{ header }
{ hasMenuItems && (
-
+
{ ( { onClose } ) => (
<>
diff --git a/packages/components/src/truncate/hook.js b/packages/components/src/truncate/hook.js
index cd9f313da0e95..64e45c1bed5ea 100644
--- a/packages/components/src/truncate/hook.js
+++ b/packages/components/src/truncate/hook.js
@@ -17,7 +17,7 @@ import { TRUNCATE_ELLIPSIS, TRUNCATE_TYPE, truncateContent } from './utils';
import { useCx } from '../utils/hooks/use-cx';
/**
- * @param {import('../ui/context').PolymorphicComponentProps} props
+ * @param {import('../ui/context').WordPressComponentProps} props
*/
export default function useTruncate( props ) {
const {
diff --git a/packages/components/src/ui/color-picker/component.tsx b/packages/components/src/ui/color-picker/component.tsx
index 5fa862a07ef9a..977826c6ccf95 100644
--- a/packages/components/src/ui/color-picker/component.tsx
+++ b/packages/components/src/ui/color-picker/component.tsx
@@ -19,7 +19,7 @@ import { __ } from '@wordpress/i18n';
import {
useContextSystem,
contextConnect,
- PolymorphicComponentProps,
+ WordPressComponentProps,
} from '../context';
import { HStack } from '../../h-stack';
import Button from '../../button';
@@ -53,7 +53,7 @@ const getSafeColor = (
};
const ColorPicker = (
- props: PolymorphicComponentProps< ColorPickerProps, 'div', false >,
+ props: WordPressComponentProps< ColorPickerProps, 'div', false >,
forwardedRef: Ref< any >
) => {
const {
diff --git a/packages/components/src/ui/context/context-connect.js b/packages/components/src/ui/context/context-connect.js
index df11228b1e17e..5dcbb174dbdd0 100644
--- a/packages/components/src/ui/context/context-connect.js
+++ b/packages/components/src/ui/context/context-connect.js
@@ -24,12 +24,12 @@ import { getStyledClassNameFromKey } from './get-styled-class-name-from-key';
* The hope is that we can improve render performance by removing functional
* component wrappers.
*
- * @template {import('./polymorphic-component').PolymorphicComponentProps<{}, any, any>} P
+ * @template {import('./wordpress-component').WordPressComponentProps<{}, any, any>} P
* @param {(props: P, ref: import('react').Ref) => JSX.Element | null} Component The component to register into the Context system.
* @param {string} namespace The namespace to register the component under.
* @param {Object} options
* @param {boolean} [options.memo=false]
- * @return {import('./polymorphic-component').PolymorphicComponentFromProps} The connected PolymorphicComponent
+ * @return {import('./wordpress-component').WordPressComponentFromProps
} The connected WordPressComponent
*/
export function contextConnect( Component, namespace, options = {} ) {
/* eslint-enable jsdoc/valid-types */
@@ -65,7 +65,7 @@ export function contextConnect( Component, namespace, options = {} ) {
// @ts-ignore internal property
WrappedComponent[ CONNECT_STATIC_NAMESPACE ] = uniq( mergedNamespace );
- // @ts-ignore PolymorphicComponent property
+ // @ts-ignore WordPressComponent property
WrappedComponent.selector = `.${ getStyledClassNameFromKey( namespace ) }`;
// @ts-ignore
diff --git a/packages/components/src/ui/context/index.js b/packages/components/src/ui/context/index.js
index e19795d7b7a13..54694e47304ff 100644
--- a/packages/components/src/ui/context/index.js
+++ b/packages/components/src/ui/context/index.js
@@ -8,4 +8,4 @@ export {
getConnectNamespace,
} from './context-connect';
export { useContextSystem } from './use-context-system';
-export * from './polymorphic-component';
+export * from './wordpress-component';
diff --git a/packages/components/src/ui/context/use-context-system.js b/packages/components/src/ui/context/use-context-system.js
index 4a842033a2a2f..134ef9046b849 100644
--- a/packages/components/src/ui/context/use-context-system.js
+++ b/packages/components/src/ui/context/use-context-system.js
@@ -13,7 +13,7 @@ import { useCx } from '../../utils/hooks/use-cx';
/**
* @template TProps
- * @typedef {TProps & { className: string; }} ConnectedProps
+ * @typedef {TProps & { className: string }} ConnectedProps
*/
/**
diff --git a/packages/components/src/ui/context/polymorphic-component.ts b/packages/components/src/ui/context/wordpress-component.ts
similarity index 79%
rename from packages/components/src/ui/context/polymorphic-component.ts
rename to packages/components/src/ui/context/wordpress-component.ts
index fae6cc41418db..2bf4372ec6b6e 100644
--- a/packages/components/src/ui/context/polymorphic-component.ts
+++ b/packages/components/src/ui/context/wordpress-component.ts
@@ -11,7 +11,7 @@ import type * as React from 'react';
* by `ComponentPropsWithRef`. The context is that components should require the `children`
* prop explicitely when needed (see https://github.com/WordPress/gutenberg/pull/31817).
*/
-export type PolymorphicComponentProps<
+export type WordPressComponentProps<
P,
T extends React.ElementType,
IsPolymorphic extends boolean = true
@@ -23,17 +23,17 @@ export type PolymorphicComponentProps<
}
: { as?: never } );
-export type PolymorphicComponent<
+export type WordPressComponent<
T extends React.ElementType,
O,
IsPolymorphic extends boolean
> = {
< TT extends React.ElementType >(
- props: PolymorphicComponentProps< O, TT, IsPolymorphic > &
+ props: WordPressComponentProps< O, TT, IsPolymorphic > &
( IsPolymorphic extends true ? { as: TT } : { as: never } )
): JSX.Element | null;
(
- props: PolymorphicComponentProps< O, T, IsPolymorphic >
+ props: WordPressComponentProps< O, T, IsPolymorphic >
): JSX.Element | null;
displayName?: string;
/**
@@ -47,8 +47,8 @@ export type PolymorphicComponent<
selector: `.${ string }`;
};
-export type PolymorphicComponentFromProps<
+export type WordPressComponentFromProps<
Props
-> = Props extends PolymorphicComponentProps< infer P, infer T, infer I >
- ? PolymorphicComponent< T, P, I >
+> = Props extends WordPressComponentProps< infer P, infer T, infer I >
+ ? WordPressComponent< T, P, I >
: never;
diff --git a/packages/components/src/ui/control-group/component.js b/packages/components/src/ui/control-group/component.js
index b1b82c581cdfd..d291d436c11d4 100644
--- a/packages/components/src/ui/control-group/component.js
+++ b/packages/components/src/ui/control-group/component.js
@@ -11,8 +11,8 @@ import { useControlGroup } from './hook';
import { contextConnect } from '../context';
/**
- * @param {import('../context').PolymorphicComponentProps} props
- * @param {import('react').Ref} forwardedRef
+ * @param {import('../context').WordPressComponentProps} props
+ * @param {import('react').Ref} forwardedRef
*/
function ControlGroup( props, forwardedRef ) {
const {
diff --git a/packages/components/src/ui/control-group/hook.js b/packages/components/src/ui/control-group/hook.js
index a30b745f94b9a..bc1f5d34c08b3 100644
--- a/packages/components/src/ui/control-group/hook.js
+++ b/packages/components/src/ui/control-group/hook.js
@@ -8,7 +8,7 @@ import * as styles from './styles';
import { useCx } from '../../utils/hooks/use-cx';
/**
- * @param {import('../context').PolymorphicComponentProps} props
+ * @param {import('../context').WordPressComponentProps} props
*/
export function useControlGroup( props ) {
const {
diff --git a/packages/components/src/ui/control-label/hook.js b/packages/components/src/ui/control-label/hook.js
index e376cc18f726c..c7f10444fab79 100644
--- a/packages/components/src/ui/control-label/hook.js
+++ b/packages/components/src/ui/control-label/hook.js
@@ -8,7 +8,7 @@ import * as styles from './styles';
import { useCx } from '../../utils/hooks/use-cx';
/**
- * @param {import('../context').PolymorphicComponentProps} props
+ * @param {import('../context').WordPressComponentProps} props
*/
export function useControlLabel( props ) {
const {
diff --git a/packages/components/src/ui/form-group/form-group-content.js b/packages/components/src/ui/form-group/form-group-content.js
index a84f5fa32faab..21b95ff906823 100644
--- a/packages/components/src/ui/form-group/form-group-content.js
+++ b/packages/components/src/ui/form-group/form-group-content.js
@@ -12,7 +12,7 @@ import FormGroupHelp from './form-group-help';
import FormGroupLabel from './form-group-label';
/**
- * @param {import('../context').PolymorphicComponentProps} props
+ * @param {import('../context').WordPressComponentProps} props
*/
function FormGroupContent( {
alignLabel,
diff --git a/packages/components/src/ui/form-group/form-group-label.js b/packages/components/src/ui/form-group/form-group-label.js
index 8d6c282018cad..01e9f9be3c51e 100644
--- a/packages/components/src/ui/form-group/form-group-label.js
+++ b/packages/components/src/ui/form-group/form-group-label.js
@@ -10,7 +10,7 @@ import { ControlLabel } from '../control-label';
import { VisuallyHidden } from '../../visually-hidden';
/**
- * @param {import('../context').PolymorphicComponentProps} props
+ * @param {import('../context').WordPressComponentProps} props
* @return {JSX.Element | null} The form group's label.
*/
function FormGroupLabel( { children, id, labelHidden = false, ...props } ) {
diff --git a/packages/components/src/ui/form-group/form-group.js b/packages/components/src/ui/form-group/form-group.js
index 9885aa63d2447..fc9eae01325f4 100644
--- a/packages/components/src/ui/form-group/form-group.js
+++ b/packages/components/src/ui/form-group/form-group.js
@@ -8,8 +8,8 @@ import FormGroupContent from './form-group-content';
import { useFormGroup } from './use-form-group';
/**
- * @param {import('../context').PolymorphicComponentProps} props
- * @param {import('react').Ref} forwardedRef
+ * @param {import('../context').WordPressComponentProps} props
+ * @param {import('react').Ref} forwardedRef
*/
function FormGroup( props, forwardedRef ) {
const { contentProps, horizontal, ...otherProps } = useFormGroup( props );
diff --git a/packages/components/src/ui/form-group/use-form-group.js b/packages/components/src/ui/form-group/use-form-group.js
index 3b73fc69f5f4e..eebc5ae350639 100644
--- a/packages/components/src/ui/form-group/use-form-group.js
+++ b/packages/components/src/ui/form-group/use-form-group.js
@@ -11,7 +11,7 @@ import * as styles from './form-group-styles';
import { useCx } from '../../utils/hooks/use-cx';
/**
- * @param {import('../context').PolymorphicComponentProps} props
+ * @param {import('../context').WordPressComponentProps} props
*/
export function useFormGroup( props ) {
const {
diff --git a/packages/components/src/ui/shortcut/component.tsx b/packages/components/src/ui/shortcut/component.tsx
index 911aced391c14..f5bbb6a5d791e 100644
--- a/packages/components/src/ui/shortcut/component.tsx
+++ b/packages/components/src/ui/shortcut/component.tsx
@@ -7,8 +7,11 @@ import type { Ref } from 'react';
/**
* Internal dependencies
*/
-import { useContextSystem, contextConnect } from '../context';
-import type { PolymorphicComponentProps } from '../context';
+import {
+ useContextSystem,
+ contextConnect,
+ WordPressComponentProps,
+} from '../context';
import { View } from '../../view';
export interface ShortcutDescription {
@@ -22,7 +25,7 @@ export interface Props {
}
function Shortcut(
- props: PolymorphicComponentProps< Props, 'span' >,
+ props: WordPressComponentProps< Props, 'span' >,
forwardedRef: Ref< any >
): JSX.Element | null {
const {
diff --git a/packages/components/src/ui/spinner/component.js b/packages/components/src/ui/spinner/component.js
index 12cb30f0d712b..c5b45fccf0b8a 100644
--- a/packages/components/src/ui/spinner/component.js
+++ b/packages/components/src/ui/spinner/component.js
@@ -16,8 +16,8 @@ import { COLORS } from '../../utils/colors-values';
/**
*
- * @param {import('../context').PolymorphicComponentProps} props
- * @param {import('react').Ref} forwardedRef
+ * @param {import('../context').WordPressComponentProps} props
+ * @param {import('react').Ref} forwardedRef
*/
function Spinner( props, forwardedRef ) {
const {
diff --git a/packages/components/src/ui/tooltip/component.js b/packages/components/src/ui/tooltip/component.js
index f618f4633d48f..78ab9132407e5 100644
--- a/packages/components/src/ui/tooltip/component.js
+++ b/packages/components/src/ui/tooltip/component.js
@@ -18,8 +18,8 @@ import TooltipContent from './content';
import { TooltipShortcut } from './styles';
/**
- * @param {import('../context').PolymorphicComponentProps} props
- * @param {import('react').Ref} forwardedRef
+ * @param {import('../context').WordPressComponentProps} props
+ * @param {import('react').Ref} forwardedRef
*/
function Tooltip( props, forwardedRef ) {
const {
diff --git a/packages/components/src/ui/tooltip/content.js b/packages/components/src/ui/tooltip/content.js
index 08c51288dae23..b2d533f8288c0 100644
--- a/packages/components/src/ui/tooltip/content.js
+++ b/packages/components/src/ui/tooltip/content.js
@@ -17,8 +17,8 @@ const { TooltipPopoverView } = styles;
/**
*
- * @param {import('../context').PolymorphicComponentProps} props
- * @param {import('react').Ref} forwardedRef
+ * @param {import('../context').WordPressComponentProps} props
+ * @param {import('react').Ref} forwardedRef
*/
function TooltipContent( props, forwardedRef ) {
const { children, className, ...otherProps } = useContextSystem(
diff --git a/packages/components/src/ui/utils/create-component.tsx b/packages/components/src/ui/utils/create-component.tsx
index f9bd8e6d7d3ed..8e451cffef11c 100644
--- a/packages/components/src/ui/utils/create-component.tsx
+++ b/packages/components/src/ui/utils/create-component.tsx
@@ -10,14 +10,14 @@ import type { As } from 'reakit-utils/types';
*/
import { contextConnect } from '../context';
import type {
- PolymorphicComponentProps,
- PolymorphicComponentFromProps,
+ WordPressComponentProps,
+ WordPressComponentFromProps,
} from '../context';
import { View } from '../../view';
interface Options<
A extends As,
- P extends PolymorphicComponentProps< {}, A, any >
+ P extends WordPressComponentProps< {}, A, any >
> {
as: A;
name: string;
@@ -37,13 +37,13 @@ interface Options<
*/
export const createComponent = <
A extends As,
- P extends PolymorphicComponentProps< {}, A, any >
+ P extends WordPressComponentProps< {}, A, any >
>( {
as,
name,
useHook,
memo = false,
-}: Options< A, P > ): PolymorphicComponentFromProps< P > => {
+}: Options< A, P > ): WordPressComponentFromProps< P > => {
function Component( props: P, forwardedRef: Ref< any > ) {
const otherProps = useHook( props );
diff --git a/packages/components/src/ui/utils/space.ts b/packages/components/src/ui/utils/space.ts
index d6a3748a5a0ec..b3f2c0a8b3e87 100644
--- a/packages/components/src/ui/utils/space.ts
+++ b/packages/components/src/ui/utils/space.ts
@@ -30,7 +30,8 @@ export function space( value?: SpaceInput ): string | undefined {
// test if the input has a unit, was NaN, or was one of the named CSS values (like `auto`), in which case just use that value
if (
- CSS.supports?.( 'margin', value.toString() ) ||
+ ( typeof window !== 'undefined' &&
+ window.CSS?.supports?.( 'margin', value.toString() ) ) ||
Number.isNaN( asInt )
) {
return value.toString();
diff --git a/packages/components/src/ui/utils/test/create-component.js b/packages/components/src/ui/utils/test/create-component.js
index 01dbd7b991797..970a774badf29 100644
--- a/packages/components/src/ui/utils/test/create-component.js
+++ b/packages/components/src/ui/utils/test/create-component.js
@@ -15,7 +15,7 @@ import { createComponent } from '../create-component';
describe( 'createComponent', () => {
/**
- * @param {import('../context').PolymorphicComponentProps<{}, 'output'>} props
+ * @param {import('../context').WordPressComponentProps<{}, 'output'>} props
*/
const useHook = ( props ) => ( { ...props, 'data-hook-test-prop': true } );
const name = 'Output';
diff --git a/packages/components/src/ui/utils/use-responsive-value.ts b/packages/components/src/ui/utils/use-responsive-value.ts
index da284a6510a38..d8b324b097a52 100644
--- a/packages/components/src/ui/utils/use-responsive-value.ts
+++ b/packages/components/src/ui/utils/use-responsive-value.ts
@@ -41,14 +41,11 @@ export const useBreakpointIndex = (
onResize();
if ( typeof window !== 'undefined' ) {
- // Disable reason: We don't really care about what document we listen to, we just want to know that we're resizing.
- /* eslint-disable @wordpress/no-global-event-listener */
window.addEventListener( 'resize', onResize );
}
return () => {
if ( typeof window !== 'undefined' ) {
window.removeEventListener( 'resize', onResize );
- /* eslint-enable @wordpress/no-global-event-listener */
}
};
}, [ value ] );
diff --git a/packages/components/src/unit-control/index.native.js b/packages/components/src/unit-control/index.native.js
index 9be10e31845b5..b45f1c84e0679 100644
--- a/packages/components/src/unit-control/index.native.js
+++ b/packages/components/src/unit-control/index.native.js
@@ -94,6 +94,7 @@ function UnitControl( {
accessibilityHint,
unitButtonTextStyle,
unit,
+ units,
] );
const getAnchor = useCallback(
@@ -115,6 +116,9 @@ function UnitControl( {
};
const renderUnitPicker = useCallback( () => {
+ if ( units === false ) {
+ return null;
+ }
return (
{ renderUnitButton }
diff --git a/packages/components/src/v-stack/hook.js b/packages/components/src/v-stack/hook.js
index 0dcd4d33c739a..1852da47bad09 100644
--- a/packages/components/src/v-stack/hook.js
+++ b/packages/components/src/v-stack/hook.js
@@ -6,7 +6,7 @@ import { useHStack } from '../h-stack';
/**
*
- * @param {import('../ui/context').PolymorphicComponentProps} props
+ * @param {import('../ui/context').WordPressComponentProps} props
*/
export function useVStack( props ) {
const { expanded = false, ...otherProps } = useContextSystem(
diff --git a/packages/components/src/view/component.js b/packages/components/src/view/component.js
index 095576a79e886..4d7808807bd1f 100644
--- a/packages/components/src/view/component.js
+++ b/packages/components/src/view/component.js
@@ -20,7 +20,7 @@ import styled from '@emotion/styled';
* }
* ```
*
- * @type {import('../ui/context').PolymorphicComponent<'div', { children?: import('react').ReactNode }, true>}
+ * @type {import('../ui/context').WordPressComponent<'div', { children?: import('react').ReactNode }, true>}
*/
// @ts-ignore
const View = styled.div``;
diff --git a/packages/components/src/visually-hidden/component.js b/packages/components/src/visually-hidden/component.js
index 01b9e65ddc511..ba0096d3a8bd8 100644
--- a/packages/components/src/visually-hidden/component.js
+++ b/packages/components/src/visually-hidden/component.js
@@ -6,8 +6,8 @@ import { visuallyHidden } from './styles';
import { View } from '../view';
/**
- * @param {import('../ui/context').PolymorphicComponentProps<{ children: import('react').ReactNode }, 'div'>} props
- * @param {import('react').Ref} forwardedRef
+ * @param {import('../ui/context').WordPressComponentProps<{ children: import('react').ReactNode }, 'div'>} props
+ * @param {import('react').Ref} forwardedRef
*/
function VisuallyHidden( props, forwardedRef ) {
const { style: styleProp, ...contextProps } = useContextSystem(
diff --git a/packages/components/src/z-stack/component.tsx b/packages/components/src/z-stack/component.tsx
index 32767f2877843..b6ee9fad3f1dc 100644
--- a/packages/components/src/z-stack/component.tsx
+++ b/packages/components/src/z-stack/component.tsx
@@ -14,7 +14,7 @@ import { isValidElement } from '@wordpress/element';
*/
import { getValidChildren } from '../ui/utils/get-valid-children';
import { contextConnect, useContextSystem } from '../ui/context';
-import type { PolymorphicComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../ui/context';
import { ZStackView, ZStackChildView } from './styles';
export interface ZStackProps {
@@ -43,7 +43,7 @@ export interface ZStackProps {
}
function ZStack(
- props: PolymorphicComponentProps< ZStackProps, 'div' >,
+ props: WordPressComponentProps< ZStackProps, 'div' >,
forwardedRef: Ref< any >
) {
const {
diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json
index 3c8f146acaff8..2a3b0c09c406d 100644
--- a/packages/components/tsconfig.json
+++ b/packages/components/tsconfig.json
@@ -3,7 +3,10 @@
"compilerOptions": {
"rootDir": "src",
"declarationDir": "build-types",
- "types": [ "gutenberg-env" ]
+ "types": [ "gutenberg-env" ],
+ // Some errors in Reakit types with TypeScript 4.3
+ // Remove the following line when they've been addressed.
+ "skipLibCheck": true
},
"references": [
{ "path": "../compose" },
diff --git a/packages/compose/README.md b/packages/compose/README.md
index c66787eb8c3d7..8d918eba02570 100644
--- a/packages/compose/README.md
+++ b/packages/compose/README.md
@@ -207,7 +207,7 @@ _Parameters_
_Returns_
-- `TFunc & import('lodash').Cancelable`: Debounced function.
+- `import('lodash').DebouncedFunc`: Debounced function.
### useFocusOnMount
@@ -452,7 +452,7 @@ _Parameters_
_Returns_
-- `TFunc & import('lodash').Cancelable`: Throttled function.
+- `import('lodash').DebouncedFunc`: Throttled function.
### useViewportMatch
diff --git a/packages/compose/package.json b/packages/compose/package.json
index 7f9e47021c454..d1c4efc629477 100644
--- a/packages/compose/package.json
+++ b/packages/compose/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/compose",
- "version": "5.0.0",
+ "version": "5.0.1",
"description": "WordPress higher-order components (HOCs).",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
@@ -30,7 +30,7 @@
"sideEffects": false,
"dependencies": {
"@babel/runtime": "^7.13.10",
- "@types/lodash": "4.14.149",
+ "@types/lodash": "^4.14.172",
"@types/mousetrap": "^1.6.8",
"@wordpress/deprecated": "file:../deprecated",
"@wordpress/dom": "file:../dom",
@@ -38,7 +38,7 @@
"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
"@wordpress/keycodes": "file:../keycodes",
"@wordpress/priority-queue": "file:../priority-queue",
- "clipboard": "^2.0.1",
+ "clipboard": "^2.0.8",
"lodash": "^4.17.21",
"mousetrap": "^1.6.5",
"react-resize-aware": "^3.1.0",
diff --git a/packages/compose/src/hooks/use-debounce/index.js b/packages/compose/src/hooks/use-debounce/index.js
index 374f20a521a5e..db66e74d590c6 100644
--- a/packages/compose/src/hooks/use-debounce/index.js
+++ b/packages/compose/src/hooks/use-debounce/index.js
@@ -23,7 +23,7 @@ import { useEffect } from '@wordpress/element';
* @param {TFunc} fn The function to debounce.
* @param {number} [wait] The number of milliseconds to delay.
* @param {import('lodash').DebounceSettings} [options] The options object.
- * @return {TFunc & import('lodash').Cancelable} Debounced function.
+ * @return {import('lodash').DebouncedFunc} Debounced function.
*/
export default function useDebounce( fn, wait, options ) {
/* eslint-enable jsdoc/valid-types */
diff --git a/packages/compose/src/hooks/use-drop-zone/index.js b/packages/compose/src/hooks/use-drop-zone/index.js
index c2a6a4224f55f..ea58eab14b9cb 100644
--- a/packages/compose/src/hooks/use-drop-zone/index.js
+++ b/packages/compose/src/hooks/use-drop-zone/index.js
@@ -73,18 +73,24 @@ export default function useDropZone( {
/**
* Checks if an element is in the drop zone.
*
- * @param {HTMLElement|null} elementToCheck
+ * @param {EventTarget|null} targetToCheck
*
* @return {boolean} True if in drop zone, false if not.
*/
- function isElementInZone( elementToCheck ) {
+ function isElementInZone( targetToCheck ) {
+ const { defaultView } = ownerDocument;
if (
- ! elementToCheck ||
- ! element.contains( elementToCheck )
+ ! targetToCheck ||
+ ! defaultView ||
+ ! ( targetToCheck instanceof defaultView.HTMLElement ) ||
+ ! element.contains( targetToCheck )
) {
return false;
}
+ /** @type {HTMLElement|null} */
+ let elementToCheck = targetToCheck;
+
do {
if ( elementToCheck.dataset.isDropZone ) {
return elementToCheck === element;
@@ -155,11 +161,7 @@ export default function useDropZone( {
// leaving the drop zone, which means the `relatedTarget`
// (element that has been entered) should be outside the drop
// zone.
- if (
- isElementInZone(
- /** @type {HTMLElement|null} */ ( event.relatedTarget )
- )
- ) {
+ if ( isElementInZone( event.relatedTarget ) ) {
return;
}
diff --git a/packages/compose/src/hooks/use-throttle/index.js b/packages/compose/src/hooks/use-throttle/index.js
index 8ad9589d112de..45fb2696673ae 100644
--- a/packages/compose/src/hooks/use-throttle/index.js
+++ b/packages/compose/src/hooks/use-throttle/index.js
@@ -22,7 +22,7 @@ import { useEffect } from '@wordpress/element';
* @param {TFunc} fn The function to throttle.
* @param {number} [wait] The number of milliseconds to throttle invocations to.
* @param {import('lodash').ThrottleSettings} [options] The options object. See linked documentation for details.
- * @return {TFunc & import('lodash').Cancelable} Throttled function.
+ * @return {import('lodash').DebouncedFunc} Throttled function.
*/
export default function useThrottle( fn, wait, options ) {
const throttled = useMemoOne( () => throttle( fn, wait, options ), [
diff --git a/packages/core-data/README.md b/packages/core-data/README.md
index 96f6c1e300404..5d9ee318a0af8 100644
--- a/packages/core-data/README.md
+++ b/packages/core-data/README.md
@@ -69,7 +69,7 @@ _Parameters_
- _recordId_ `string`: Record ID of the deleted entity.
- _query_ `?Object`: Special query parameters for the DELETE API call.
- _options_ `[Object]`: Delete options.
-- _options.\_\_unstableFetch_ `[Function]`: Internal use only. Function to call instead of `apiFetch()`. Must return a control descriptor.
+- _options.\_\_unstableFetch_ `[Function]`: Internal use only. Function to call instead of `apiFetch()`. Must return a promise.
### editEntityRecord
@@ -214,6 +214,10 @@ _Returns_
Action triggered to redo the last undoed
edit to an entity record, if any.
+_Returns_
+
+- `undefined`:
+
### saveEditedEntityRecord
Action triggered to save an entity record's edits.
@@ -236,13 +240,17 @@ _Parameters_
- _record_ `Object`: Record to be saved.
- _options_ `Object`: Saving options.
- _options.isAutosave_ `[boolean]`: Whether this is an autosave.
-- _options.\_\_unstableFetch_ `[Function]`: Internal use only. Function to call instead of `apiFetch()`. Must return a control descriptor.
+- _options.\_\_unstableFetch_ `[Function]`: Internal use only. Function to call instead of `apiFetch()`. Must return a promise.
### undo
Action triggered to undo the last edit to
an entity record, if any.
+_Returns_
+
+- `undefined`:
+
## Selectors
diff --git a/packages/core-data/package.json b/packages/core-data/package.json
index 70cabd048f051..56fe06013a322 100644
--- a/packages/core-data/package.json
+++ b/packages/core-data/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/core-data",
- "version": "4.0.0",
+ "version": "4.0.1",
"description": "Access to and manipulation of core WordPress entities.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
@@ -33,7 +33,6 @@
"@wordpress/api-fetch": "file:../api-fetch",
"@wordpress/blocks": "file:../blocks",
"@wordpress/data": "file:../data",
- "@wordpress/data-controls": "file:../data-controls",
"@wordpress/deprecated": "file:../deprecated",
"@wordpress/element": "file:../element",
"@wordpress/html-entities": "file:../html-entities",
diff --git a/packages/core-data/src/actions.js b/packages/core-data/src/actions.js
index 6c3d392c31210..8dfbaa6571ef3 100644
--- a/packages/core-data/src/actions.js
+++ b/packages/core-data/src/actions.js
@@ -1,14 +1,13 @@
/**
* External dependencies
*/
-import { castArray, get, isEqual, find } from 'lodash';
+import { castArray, isEqual, find } from 'lodash';
import { v4 as uuid } from 'uuid';
/**
* WordPress dependencies
*/
-import { controls } from '@wordpress/data';
-import { apiFetch, __unstableAwaitPromise } from '@wordpress/data-controls';
+import apiFetch from '@wordpress/api-fetch';
import { addQueryArgs } from '@wordpress/url';
/**
@@ -16,12 +15,7 @@ import { addQueryArgs } from '@wordpress/url';
*/
import { receiveItems, removeItems, receiveQueriedItems } from './queried-data';
import { getKindEntities, DEFAULT_ENTITY_KEY } from './entities';
-import {
- __unstableAcquireStoreLock,
- __unstableReleaseStoreLock,
-} from './locks';
import { createBatch } from './batch';
-import { getDispatch } from './controls';
import { STORE_NAME } from './name';
/**
@@ -165,16 +159,16 @@ export function receiveEmbedPreview( url, preview ) {
* @param {Object} [options] Delete options.
* @param {Function} [options.__unstableFetch] Internal use only. Function to
* call instead of `apiFetch()`.
- * Must return a control descriptor.
+ * Must return a promise.
*/
-export function* deleteEntityRecord(
+export const deleteEntityRecord = (
kind,
name,
recordId,
query,
- { __unstableFetch = null } = {}
-) {
- const entities = yield getKindEntities( kind );
+ { __unstableFetch = apiFetch } = {}
+) => async ( { dispatch } ) => {
+ const entities = await dispatch( getKindEntities( kind ) );
const entity = find( entities, { kind, name } );
let error;
let deletedRecord = false;
@@ -182,18 +176,19 @@ export function* deleteEntityRecord(
return;
}
- const lock = yield* __unstableAcquireStoreLock(
+ const lock = await dispatch.__unstableAcquireStoreLock(
STORE_NAME,
[ 'entities', 'data', kind, name, recordId ],
{ exclusive: true }
);
+
try {
- yield {
+ dispatch( {
type: 'DELETE_ENTITY_RECORD_START',
kind,
name,
recordId,
- };
+ } );
try {
let path = `${ entity.baseURL }/${ recordId }`;
@@ -202,36 +197,29 @@ export function* deleteEntityRecord(
path = addQueryArgs( path, query );
}
- const options = {
+ deletedRecord = await __unstableFetch( {
path,
method: 'DELETE',
- };
- if ( __unstableFetch ) {
- deletedRecord = yield __unstableAwaitPromise(
- __unstableFetch( options )
- );
- } else {
- deletedRecord = yield apiFetch( options );
- }
+ } );
- yield removeItems( kind, name, recordId, true );
+ await dispatch( removeItems( kind, name, recordId, true ) );
} catch ( _error ) {
error = _error;
}
- yield {
+ dispatch( {
type: 'DELETE_ENTITY_RECORD_FINISH',
kind,
name,
recordId,
error,
- };
+ } );
return deletedRecord;
} finally {
- yield* __unstableReleaseStoreLock( lock );
+ dispatch.__unstableReleaseStoreLock( lock );
}
-}
+};
/**
* Returns an action object that triggers an
@@ -246,28 +234,22 @@ export function* deleteEntityRecord(
*
* @return {Object} Action object.
*/
-export function* editEntityRecord( kind, name, recordId, edits, options = {} ) {
- const entity = yield controls.select( STORE_NAME, 'getEntity', kind, name );
+export const editEntityRecord = (
+ kind,
+ name,
+ recordId,
+ edits,
+ options = {}
+) => ( { select, dispatch } ) => {
+ const entity = select.getEntity( kind, name );
if ( ! entity ) {
throw new Error(
`The entity being edited (${ kind }, ${ name }) does not have a loaded config.`
);
}
const { transientEdits = {}, mergedEdits = {} } = entity;
- const record = yield controls.select(
- STORE_NAME,
- 'getRawEntityRecord',
- kind,
- name,
- recordId
- );
- const editedRecord = yield controls.select(
- STORE_NAME,
- 'getEditedEntityRecord',
- kind,
- name,
- recordId
- );
+ const record = select.getRawEntityRecord( kind, name, recordId );
+ const editedRecord = select.getEditedEntityRecord( kind, name, recordId );
const edit = {
kind,
@@ -286,7 +268,7 @@ export function* editEntityRecord( kind, name, recordId, edits, options = {} ) {
}, {} ),
transientEdits,
};
- return {
+ dispatch( {
type: 'EDIT_ENTITY_RECORD',
...edit,
meta: {
@@ -299,44 +281,44 @@ export function* editEntityRecord( kind, name, recordId, edits, options = {} ) {
}, {} ),
},
},
- };
-}
+ } );
+};
/**
* Action triggered to undo the last edit to
* an entity record, if any.
+ *
+ * @return {undefined}
*/
-export function* undo() {
- const undoEdit = yield controls.select( STORE_NAME, 'getUndoEdit' );
+export const undo = () => ( { select, dispatch } ) => {
+ const undoEdit = select.getUndoEdit();
if ( ! undoEdit ) {
return;
}
- yield {
+ dispatch( {
type: 'EDIT_ENTITY_RECORD',
...undoEdit,
- meta: {
- isUndo: true,
- },
- };
-}
+ meta: { isUndo: true },
+ } );
+};
/**
* Action triggered to redo the last undoed
* edit to an entity record, if any.
+ *
+ * @return {undefined}
*/
-export function* redo() {
- const redoEdit = yield controls.select( STORE_NAME, 'getRedoEdit' );
+export const redo = () => ( { select, dispatch } ) => {
+ const redoEdit = select.getRedoEdit();
if ( ! redoEdit ) {
return;
}
- yield {
+ dispatch( {
type: 'EDIT_ENTITY_RECORD',
...redoEdit,
- meta: {
- isRedo: true,
- },
- };
-}
+ meta: { isRedo: true },
+ } );
+};
/**
* Forces the creation of a new undo level.
@@ -357,16 +339,15 @@ export function __unstableCreateUndoLevel() {
* @param {boolean} [options.isAutosave=false] Whether this is an autosave.
* @param {Function} [options.__unstableFetch] Internal use only. Function to
* call instead of `apiFetch()`.
- * Must return a control
- * descriptor.
+ * Must return a promise.
*/
-export function* saveEntityRecord(
+export const saveEntityRecord = (
kind,
name,
record,
- { isAutosave = false, __unstableFetch = null } = {}
-) {
- const entities = yield getKindEntities( kind );
+ { isAutosave = false, __unstableFetch = apiFetch } = {}
+) => async ( { select, resolveSelect, dispatch } ) => {
+ const entities = await dispatch( getKindEntities( kind ) );
const entity = find( entities, { kind, name } );
if ( ! entity ) {
return;
@@ -374,26 +355,21 @@ export function* saveEntityRecord(
const entityIdKey = entity.key || DEFAULT_ENTITY_KEY;
const recordId = record[ entityIdKey ];
- const lock = yield* __unstableAcquireStoreLock(
+ const lock = await dispatch.__unstableAcquireStoreLock(
STORE_NAME,
[ 'entities', 'data', kind, name, recordId || uuid() ],
{ exclusive: true }
);
+
try {
// Evaluate optimized edits.
// (Function edits that should be evaluated on save to avoid expensive computations on every edit.)
for ( const [ key, value ] of Object.entries( record ) ) {
if ( typeof value === 'function' ) {
const evaluatedValue = value(
- yield controls.select(
- STORE_NAME,
- 'getEditedEntityRecord',
- kind,
- name,
- recordId
- )
+ select.getEditedEntityRecord( kind, name, recordId )
);
- yield editEntityRecord(
+ dispatch.editEntityRecord(
kind,
name,
recordId,
@@ -406,22 +382,20 @@ export function* saveEntityRecord(
}
}
- yield {
+ dispatch( {
type: 'SAVE_ENTITY_RECORD_START',
kind,
name,
recordId,
isAutosave,
- };
+ } );
let updatedRecord;
let error;
try {
const path = `${ entity.baseURL }${
recordId ? '/' + recordId : ''
}`;
- const persistedRecord = yield controls.select(
- STORE_NAME,
- 'getRawEntityRecord',
+ const persistedRecord = select.getRawEntityRecord(
kind,
name,
recordId
@@ -432,14 +406,9 @@ export function* saveEntityRecord(
// This is fine for now as it is the only supported autosave,
// but ideally this should all be handled in the back end,
// so the client just sends and receives objects.
- const currentUser = yield controls.select(
- STORE_NAME,
- 'getCurrentUser'
- );
+ const currentUser = select.getCurrentUser();
const currentUserId = currentUser ? currentUser.id : undefined;
- const autosavePost = yield controls.select(
- STORE_NAME,
- 'getAutosave',
+ const autosavePost = resolveSelect.getAutosave(
persistedRecord.type,
persistedRecord.id,
currentUserId
@@ -454,8 +423,7 @@ export function* saveEntityRecord(
if (
[ 'title', 'excerpt', 'content' ].includes( key )
) {
- // Edits should be the "raw" attribute values.
- acc[ key ] = get( data[ key ], 'raw', data[ key ] );
+ acc[ key ] = data[ key ];
}
return acc;
},
@@ -466,18 +434,12 @@ export function* saveEntityRecord(
: data.status,
}
);
- const options = {
+ updatedRecord = await __unstableFetch( {
path: `${ path }/autosaves`,
method: 'POST',
data,
- };
- if ( __unstableFetch ) {
- updatedRecord = yield __unstableAwaitPromise(
- __unstableFetch( options )
- );
- } else {
- updatedRecord = yield apiFetch( options );
- }
+ } );
+
// An autosave may be processed by the server as a regular save
// when its update is requested by the author and the post had
// draft or auto-draft status.
@@ -495,12 +457,7 @@ export function* saveEntityRecord(
key
)
) {
- // Edits should be the "raw" attribute values.
- acc[ key ] = get(
- newRecord[ key ],
- 'raw',
- newRecord[ key ]
- );
+ acc[ key ] = newRecord[ key ];
} else if ( key === 'status' ) {
// Status is only persisted in autosaves when going from
// "auto-draft" to "draft".
@@ -511,17 +468,13 @@ export function* saveEntityRecord(
: persistedRecord.status;
} else {
// These properties are not persisted in autosaves.
- acc[ key ] = get(
- persistedRecord[ key ],
- 'raw',
- persistedRecord[ key ]
- );
+ acc[ key ] = persistedRecord[ key ];
}
return acc;
},
{}
);
- yield receiveEntityRecords(
+ dispatch.receiveEntityRecords(
kind,
name,
newRecord,
@@ -529,7 +482,10 @@ export function* saveEntityRecord(
true
);
} else {
- yield receiveAutosaves( persistedRecord.id, updatedRecord );
+ dispatch.receiveAutosaves(
+ persistedRecord.id,
+ updatedRecord
+ );
}
} else {
let edits = record;
@@ -542,19 +498,12 @@ export function* saveEntityRecord(
),
};
}
- const options = {
+ updatedRecord = await __unstableFetch( {
path,
method: recordId ? 'PUT' : 'POST',
data: edits,
- };
- if ( __unstableFetch ) {
- updatedRecord = yield __unstableAwaitPromise(
- __unstableFetch( options )
- );
- } else {
- updatedRecord = yield apiFetch( options );
- }
- yield receiveEntityRecords(
+ } );
+ dispatch.receiveEntityRecords(
kind,
name,
updatedRecord,
@@ -566,20 +515,20 @@ export function* saveEntityRecord(
} catch ( _error ) {
error = _error;
}
- yield {
+ dispatch( {
type: 'SAVE_ENTITY_RECORD_FINISH',
kind,
name,
recordId,
error,
isAutosave,
- };
+ } );
return updatedRecord;
} finally {
- yield* __unstableReleaseStoreLock( lock );
+ dispatch.__unstableReleaseStoreLock( lock );
}
-}
+};
/**
* Runs multiple core-data actions at the same time using one API request.
@@ -603,13 +552,12 @@ export function* saveEntityRecord(
* @return {Promise} A promise that resolves to an array containing the return
* values of each function given in `requests`.
*/
-export function* __experimentalBatch( requests ) {
+export const __experimentalBatch = ( requests ) => async ( { dispatch } ) => {
const batch = createBatch();
- const dispatch = yield getDispatch();
const api = {
saveEntityRecord( kind, name, record, options ) {
return batch.add( ( add ) =>
- dispatch( STORE_NAME ).saveEntityRecord( kind, name, record, {
+ dispatch.saveEntityRecord( kind, name, record, {
...options,
__unstableFetch: add,
} )
@@ -617,38 +565,28 @@ export function* __experimentalBatch( requests ) {
},
saveEditedEntityRecord( kind, name, recordId, options ) {
return batch.add( ( add ) =>
- dispatch( STORE_NAME ).saveEditedEntityRecord(
- kind,
- name,
- recordId,
- {
- ...options,
- __unstableFetch: add,
- }
- )
+ dispatch.saveEditedEntityRecord( kind, name, recordId, {
+ ...options,
+ __unstableFetch: add,
+ } )
);
},
deleteEntityRecord( kind, name, recordId, query, options ) {
return batch.add( ( add ) =>
- dispatch( STORE_NAME ).deleteEntityRecord(
- kind,
- name,
- recordId,
- query,
- {
- ...options,
- __unstableFetch: add,
- }
- )
+ dispatch.deleteEntityRecord( kind, name, recordId, query, {
+ ...options,
+ __unstableFetch: add,
+ } )
);
},
};
const resultPromises = requests.map( ( request ) => request( api ) );
- const [ , ...results ] = yield __unstableAwaitPromise(
- Promise.all( [ batch.run(), ...resultPromises ] )
- );
+ const [ , ...results ] = await Promise.all( [
+ batch.run(),
+ ...resultPromises,
+ ] );
return results;
-}
+};
/**
* Action triggered to save an entity record's edits.
@@ -658,28 +596,23 @@ export function* __experimentalBatch( requests ) {
* @param {Object} recordId ID of the record.
* @param {Object} options Saving options.
*/
-export function* saveEditedEntityRecord( kind, name, recordId, options ) {
- if (
- ! ( yield controls.select(
- STORE_NAME,
- 'hasEditsForEntityRecord',
- kind,
- name,
- recordId
- ) )
- ) {
+export const saveEditedEntityRecord = (
+ kind,
+ name,
+ recordId,
+ options
+) => async ( { select, dispatch } ) => {
+ if ( ! select.hasEditsForEntityRecord( kind, name, recordId ) ) {
return;
}
- const edits = yield controls.select(
- STORE_NAME,
- 'getEntityRecordNonTransientEdits',
+ const edits = select.getEntityRecordNonTransientEdits(
kind,
name,
recordId
);
const record = { id: recordId, ...edits };
- return yield* saveEntityRecord( kind, name, record, options );
-}
+ return await dispatch.saveEntityRecord( kind, name, record, options );
+};
/**
* Action triggered to save only specified properties for the entity.
@@ -690,27 +623,17 @@ export function* saveEditedEntityRecord( kind, name, recordId, options ) {
* @param {Array} itemsToSave List of entity properties to save.
* @param {Object} options Saving options.
*/
-export function* __experimentalSaveSpecifiedEntityEdits(
+export const __experimentalSaveSpecifiedEntityEdits = (
kind,
name,
recordId,
itemsToSave,
options
-) {
- if (
- ! ( yield controls.select(
- STORE_NAME,
- 'hasEditsForEntityRecord',
- kind,
- name,
- recordId
- ) )
- ) {
+) => async ( { select, dispatch } ) => {
+ if ( ! select.hasEditsForEntityRecord( kind, name, recordId ) ) {
return;
}
- const edits = yield controls.select(
- STORE_NAME,
- 'getEntityRecordNonTransientEdits',
+ const edits = select.getEntityRecordNonTransientEdits(
kind,
name,
recordId
@@ -721,8 +644,8 @@ export function* __experimentalSaveSpecifiedEntityEdits(
editsToSave[ edit ] = edits[ edit ];
}
}
- return yield* saveEntityRecord( kind, name, editsToSave, options );
-}
+ return await dispatch.saveEntityRecord( kind, name, editsToSave, options );
+};
/**
* Returns an action object used in signalling that Upload permissions have been received.
diff --git a/packages/core-data/src/batch/default-processor.js b/packages/core-data/src/batch/default-processor.js
index d459923218e12..34f38ff5c3d0d 100644
--- a/packages/core-data/src/batch/default-processor.js
+++ b/packages/core-data/src/batch/default-processor.js
@@ -1,10 +1,23 @@
+/**
+ * External dependencies
+ */
+import { chunk } from 'lodash';
+
/**
* WordPress dependencies
*/
import apiFetch from '@wordpress/api-fetch';
/**
- * Default batch processor. Sends its input requests to /v1/batch.
+ * Maximum number of requests to place in a single batch request. Obtained by
+ * sending a preflight OPTIONS request to /batch/v1/.
+ *
+ * @type {number?}
+ */
+let maxItems = null;
+
+/**
+ * Default batch processor. Sends its input requests to /batch/v1.
*
* @param {Array} requests List of API requests to perform at once.
*
@@ -13,33 +26,51 @@ import apiFetch from '@wordpress/api-fetch';
* (if not ).
*/
export default async function defaultProcessor( requests ) {
- const batchResponse = await apiFetch( {
- path: '/batch/v1',
- method: 'POST',
- data: {
- validation: 'require-all-validate',
- requests: requests.map( ( request ) => ( {
- path: request.path,
- body: request.data, // Rename 'data' to 'body'.
- method: request.method,
- headers: request.headers,
- } ) ),
- },
- } );
-
- if ( batchResponse.failed ) {
- return batchResponse.responses.map( ( response ) => ( {
- error: response?.body,
- } ) );
+ if ( maxItems === null ) {
+ const preflightResponse = await apiFetch( {
+ path: '/batch/v1',
+ method: 'OPTIONS',
+ } );
+ maxItems = preflightResponse.endpoints[ 0 ].args.requests.maxItems;
}
- return batchResponse.responses.map( ( response ) => {
- const result = {};
- if ( response.status >= 200 && response.status < 300 ) {
- result.output = response.body;
+ const results = [];
+
+ for ( const batchRequests of chunk( requests, maxItems ) ) {
+ const batchResponse = await apiFetch( {
+ path: '/batch/v1',
+ method: 'POST',
+ data: {
+ validation: 'require-all-validate',
+ requests: batchRequests.map( ( request ) => ( {
+ path: request.path,
+ body: request.data, // Rename 'data' to 'body'.
+ method: request.method,
+ headers: request.headers,
+ } ) ),
+ },
+ } );
+
+ let batchResults;
+
+ if ( batchResponse.failed ) {
+ batchResults = batchResponse.responses.map( ( response ) => ( {
+ error: response?.body,
+ } ) );
} else {
- result.error = response.body;
+ batchResults = batchResponse.responses.map( ( response ) => {
+ const result = {};
+ if ( response.status >= 200 && response.status < 300 ) {
+ result.output = response.body;
+ } else {
+ result.error = response.body;
+ }
+ return result;
+ } );
}
- return result;
- } );
+
+ results.push( ...batchResults );
+ }
+
+ return results;
}
diff --git a/packages/core-data/src/batch/test/default-processor.js b/packages/core-data/src/batch/test/default-processor.js
index c6d2515410b82..c712ecdff21aa 100644
--- a/packages/core-data/src/batch/test/default-processor.js
+++ b/packages/core-data/src/batch/test/default-processor.js
@@ -11,6 +11,18 @@ import defaultProcessor from '../default-processor';
jest.mock( '@wordpress/api-fetch' );
describe( 'defaultProcessor', () => {
+ const preflightResponse = {
+ endpoints: [
+ {
+ args: {
+ requests: {
+ maxItems: 25,
+ },
+ },
+ },
+ ],
+ };
+
const requests = [
{
path: '/v1/cricketers',
@@ -26,7 +38,12 @@ describe( 'defaultProcessor', () => {
},
];
- const expectedFetchOptions = {
+ const expectedPreflightOptions = {
+ path: '/batch/v1',
+ method: 'OPTIONS',
+ };
+
+ const expectedBatchOptions = {
path: '/batch/v1',
method: 'POST',
data: {
@@ -49,21 +66,26 @@ describe( 'defaultProcessor', () => {
};
it( 'handles a successful request', async () => {
- apiFetch.mockImplementation( async () => ( {
- failed: false,
- responses: [
- {
- status: 200,
- body: 'Lyon',
- },
- {
- status: 400,
- body: 'Error!',
- },
- ],
- } ) );
+ apiFetch.mockImplementation( async ( { method } ) =>
+ method === 'OPTIONS'
+ ? preflightResponse
+ : {
+ failed: false,
+ responses: [
+ {
+ status: 200,
+ body: 'Lyon',
+ },
+ {
+ status: 400,
+ body: 'Error!',
+ },
+ ],
+ }
+ );
const results = await defaultProcessor( requests );
- expect( apiFetch ).toHaveBeenCalledWith( expectedFetchOptions );
+ expect( apiFetch ).toHaveBeenCalledWith( expectedPreflightOptions );
+ expect( apiFetch ).toHaveBeenCalledWith( expectedBatchOptions );
expect( results ).toEqual( [
{ output: 'Lyon' },
{ error: 'Error!' },
@@ -71,18 +93,23 @@ describe( 'defaultProcessor', () => {
} );
it( 'handles a failed request', async () => {
- apiFetch.mockImplementation( async () => ( {
- failed: true,
- responses: [
- null,
- {
- status: 400,
- body: 'Error!',
- },
- ],
- } ) );
+ apiFetch.mockImplementation( async ( { method } ) =>
+ method === 'OPTIONS'
+ ? preflightResponse
+ : {
+ failed: true,
+ responses: [
+ null,
+ {
+ status: 400,
+ body: 'Error!',
+ },
+ ],
+ }
+ );
const results = await defaultProcessor( requests );
- expect( apiFetch ).toHaveBeenCalledWith( expectedFetchOptions );
+ expect( apiFetch ).toHaveBeenCalledWith( expectedPreflightOptions );
+ expect( apiFetch ).toHaveBeenCalledWith( expectedBatchOptions );
expect( results ).toEqual( [
{ error: undefined },
{ error: 'Error!' },
diff --git a/packages/core-data/src/controls.js b/packages/core-data/src/controls.js
deleted file mode 100644
index 00f8ca36641c1..0000000000000
--- a/packages/core-data/src/controls.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createRegistryControl } from '@wordpress/data';
-
-export function regularFetch( url ) {
- return {
- type: 'REGULAR_FETCH',
- url,
- };
-}
-
-export function getDispatch() {
- return {
- type: 'GET_DISPATCH',
- };
-}
-
-const controls = {
- async REGULAR_FETCH( { url } ) {
- const { data } = await window
- .fetch( url )
- .then( ( res ) => res.json() );
-
- return data;
- },
-
- GET_DISPATCH: createRegistryControl( ( { dispatch } ) => () => dispatch ),
-};
-
-export default controls;
diff --git a/packages/core-data/src/entities.js b/packages/core-data/src/entities.js
index f22010c58dddc..e00e5f37319d8 100644
--- a/packages/core-data/src/entities.js
+++ b/packages/core-data/src/entities.js
@@ -6,18 +6,18 @@ import { upperFirst, camelCase, map, find, get, startCase } from 'lodash';
/**
* WordPress dependencies
*/
-import { controls } from '@wordpress/data';
-import { apiFetch } from '@wordpress/data-controls';
+import apiFetch from '@wordpress/api-fetch';
import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import { addEntities } from './actions';
-import { STORE_NAME } from './name';
export const DEFAULT_ENTITY_KEY = 'id';
+const POST_RAW_ATTRIBUTES = [ 'title', 'excerpt', 'content' ];
+
export const defaultEntities = [
{
label: __( 'Base' ),
@@ -41,6 +41,7 @@ export const defaultEntities = [
key: 'slug',
baseURL: '/wp/v2/types',
baseURLParams: { context: 'edit' },
+ rawAttributes: POST_RAW_ATTRIBUTES,
},
{
name: 'media',
@@ -167,8 +168,8 @@ export const prePersistPostType = ( persistedRecord, edits ) => {
*
* @return {Promise} Entities promise
*/
-function* loadPostTypeEntities() {
- const postTypes = yield apiFetch( { path: '/wp/v2/types?context=edit' } );
+async function loadPostTypeEntities() {
+ const postTypes = await apiFetch( { path: '/wp/v2/types?context=edit' } );
return map( postTypes, ( postType, name ) => {
const isTemplate = [ 'wp_template', 'wp_template_part' ].includes(
name
@@ -184,6 +185,7 @@ function* loadPostTypeEntities() {
selection: true,
},
mergedEdits: { meta: true },
+ rawAttributes: POST_RAW_ATTRIBUTES,
getTitle: ( record ) =>
record?.title?.rendered ||
record?.title ||
@@ -199,8 +201,8 @@ function* loadPostTypeEntities() {
*
* @return {Promise} Entities promise
*/
-function* loadTaxonomyEntities() {
- const taxonomies = yield apiFetch( {
+async function loadTaxonomyEntities() {
+ const taxonomies = await apiFetch( {
path: '/wp/v2/taxonomies?context=edit',
} );
return map( taxonomies, ( taxonomy, name ) => {
@@ -248,12 +250,8 @@ export const getMethodName = (
*
* @return {Array} Entities
*/
-export function* getKindEntities( kind ) {
- let entities = yield controls.select(
- STORE_NAME,
- 'getEntitiesByKind',
- kind
- );
+export const getKindEntities = ( kind ) => async ( { select, dispatch } ) => {
+ let entities = select.getEntitiesByKind( kind );
if ( entities && entities.length !== 0 ) {
return entities;
}
@@ -263,8 +261,8 @@ export function* getKindEntities( kind ) {
return [];
}
- entities = yield kindConfig.loadEntities();
- yield addEntities( entities );
+ entities = await kindConfig.loadEntities();
+ dispatch( addEntities( entities ) );
return entities;
-}
+};
diff --git a/packages/core-data/src/index.js b/packages/core-data/src/index.js
index 4830da46ccc98..7821e2ecd4745 100644
--- a/packages/core-data/src/index.js
+++ b/packages/core-data/src/index.js
@@ -2,7 +2,6 @@
* WordPress dependencies
*/
import { createReduxStore, register } from '@wordpress/data';
-import { controls } from '@wordpress/data-controls';
/**
* Internal dependencies
@@ -11,9 +10,7 @@ import reducer from './reducer';
import * as selectors from './selectors';
import * as actions from './actions';
import * as resolvers from './resolvers';
-import * as locksSelectors from './locks/selectors';
-import * as locksActions from './locks/actions';
-import customControls from './controls';
+import createLocksActions from './locks/actions';
import { defaultEntities, getMethodName } from './entities';
import { STORE_NAME } from './name';
@@ -57,13 +54,13 @@ const entityActions = defaultEntities.reduce( ( result, entity ) => {
return result;
}, {} );
-const storeConfig = {
+const storeConfig = () => ( {
reducer,
- controls: { ...customControls, ...controls },
- actions: { ...actions, ...entityActions, ...locksActions },
- selectors: { ...selectors, ...entitySelectors, ...locksSelectors },
+ actions: { ...actions, ...entityActions, ...createLocksActions() },
+ selectors: { ...selectors, ...entitySelectors },
resolvers: { ...resolvers, ...entityResolvers },
-};
+ __experimentalUseThunks: true,
+} );
/**
* Store definition for the code data namespace.
@@ -72,7 +69,7 @@ const storeConfig = {
*
* @type {Object}
*/
-export const store = createReduxStore( STORE_NAME, storeConfig );
+export const store = createReduxStore( STORE_NAME, storeConfig() );
register( store );
diff --git a/packages/core-data/src/locks/actions.js b/packages/core-data/src/locks/actions.js
index aab16dd703bba..b6bcb93a3dd92 100644
--- a/packages/core-data/src/locks/actions.js
+++ b/packages/core-data/src/locks/actions.js
@@ -1,69 +1,18 @@
-/**
- * WordPress dependencies
- */
-import { __unstableAwaitPromise } from '@wordpress/data-controls';
-import { controls } from '@wordpress/data';
-
/**
* Internal dependencies
*/
-import { STORE_NAME } from '../name';
+import createLocks from './engine';
-export function* __unstableAcquireStoreLock( store, path, { exclusive } ) {
- const promise = yield* __unstableEnqueueLockRequest( store, path, {
- exclusive,
- } );
- yield* __unstableProcessPendingLockRequests();
- return yield __unstableAwaitPromise( promise );
-}
+export default function createLocksActions() {
+ const locks = createLocks();
-export function* __unstableEnqueueLockRequest( store, path, { exclusive } ) {
- let notifyAcquired;
- const promise = new Promise( ( resolve ) => {
- notifyAcquired = resolve;
- } );
- yield {
- type: 'ENQUEUE_LOCK_REQUEST',
- request: { store, path, exclusive, notifyAcquired },
- };
- return promise;
-}
-
-export function* __unstableReleaseStoreLock( lock ) {
- yield {
- type: 'RELEASE_LOCK',
- lock,
- };
- yield* __unstableProcessPendingLockRequests();
-}
+ function __unstableAcquireStoreLock( store, path, { exclusive } ) {
+ return () => locks.acquire( store, path, exclusive );
+ }
-export function* __unstableProcessPendingLockRequests() {
- yield {
- type: 'PROCESS_PENDING_LOCK_REQUESTS',
- };
- const lockRequests = yield controls.select(
- STORE_NAME,
- '__unstableGetPendingLockRequests'
- );
- for ( const request of lockRequests ) {
- const { store, path, exclusive, notifyAcquired } = request;
- const isAvailable = yield controls.select(
- STORE_NAME,
- '__unstableIsLockAvailable',
- store,
- path,
- {
- exclusive,
- }
- );
- if ( isAvailable ) {
- const lock = { store, path, exclusive };
- yield {
- type: 'GRANT_LOCK_REQUEST',
- lock,
- request,
- };
- notifyAcquired( lock );
- }
+ function __unstableReleaseStoreLock( lock ) {
+ return () => locks.release( lock );
}
+
+ return { __unstableAcquireStoreLock, __unstableReleaseStoreLock };
}
diff --git a/packages/core-data/src/locks/engine.js b/packages/core-data/src/locks/engine.js
new file mode 100644
index 0000000000000..a3e3ec4e77947
--- /dev/null
+++ b/packages/core-data/src/locks/engine.js
@@ -0,0 +1,43 @@
+/**
+ * Internal dependencies
+ */
+import reducer from './reducer';
+import { isLockAvailable, getPendingLockRequests } from './selectors';
+
+export default function createLocks() {
+ let state = reducer( undefined, { type: '@@INIT' } );
+
+ function processPendingLockRequests() {
+ for ( const request of getPendingLockRequests( state ) ) {
+ const { store, path, exclusive, notifyAcquired } = request;
+ if ( isLockAvailable( state, store, path, { exclusive } ) ) {
+ const lock = { store, path, exclusive };
+ state = reducer( state, {
+ type: 'GRANT_LOCK_REQUEST',
+ lock,
+ request,
+ } );
+ notifyAcquired( lock );
+ }
+ }
+ }
+
+ function acquire( store, path, exclusive ) {
+ return new Promise( ( resolve ) => {
+ state = reducer( state, {
+ type: 'ENQUEUE_LOCK_REQUEST',
+ request: { store, path, exclusive, notifyAcquired: resolve },
+ } );
+ processPendingLockRequests();
+ } );
+ }
+ function release( lock ) {
+ state = reducer( state, {
+ type: 'RELEASE_LOCK',
+ lock,
+ } );
+ processPendingLockRequests();
+ }
+
+ return { acquire, release };
+}
diff --git a/packages/core-data/src/locks/index.js b/packages/core-data/src/locks/index.js
deleted file mode 100644
index 57e124e445d87..0000000000000
--- a/packages/core-data/src/locks/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './actions';
-export * from './selectors';
-export { default as reducer } from './reducer';
diff --git a/packages/core-data/src/locks/reducer.js b/packages/core-data/src/locks/reducer.js
index 878313b67b341..11a2b899e1827 100644
--- a/packages/core-data/src/locks/reducer.js
+++ b/packages/core-data/src/locks/reducer.js
@@ -19,7 +19,7 @@ const DEFAULT_STATE = {
*
* @return {Object} Updated state.
*/
-export function locks( state = DEFAULT_STATE, action ) {
+export default function locks( state = DEFAULT_STATE, action ) {
switch ( action.type ) {
case 'ENQUEUE_LOCK_REQUEST': {
const { request } = action;
@@ -60,5 +60,3 @@ export function locks( state = DEFAULT_STATE, action ) {
return state;
}
-
-export default locks;
diff --git a/packages/core-data/src/locks/selectors.js b/packages/core-data/src/locks/selectors.js
index 233b36985a5c5..c5f0a42e72237 100644
--- a/packages/core-data/src/locks/selectors.js
+++ b/packages/core-data/src/locks/selectors.js
@@ -8,13 +8,13 @@ import {
getNode,
} from './utils';
-export function __unstableGetPendingLockRequests( state ) {
- return state.locks.requests;
+export function getPendingLockRequests( state ) {
+ return state.requests;
}
-export function __unstableIsLockAvailable( state, store, path, { exclusive } ) {
+export function isLockAvailable( state, store, path, { exclusive } ) {
const storePath = [ store, ...path ];
- const locks = state.locks.tree;
+ const locks = state.tree;
// Validate all parents and the node itself
for ( const node of iteratePath( locks, storePath ) ) {
diff --git a/packages/core-data/src/locks/test/actions.js b/packages/core-data/src/locks/test/actions.js
deleted file mode 100644
index f3d2cbdb1b44a..0000000000000
--- a/packages/core-data/src/locks/test/actions.js
+++ /dev/null
@@ -1,307 +0,0 @@
-/**
- * Internal dependencies
- */
-import {
- __unstableAcquireStoreLock,
- __unstableEnqueueLockRequest,
- __unstableReleaseStoreLock,
- __unstableProcessPendingLockRequests,
-} from '../actions';
-
-const store = 'test';
-const path = [ 'blue', 'bird' ];
-
-describe( '__unstableEnqueueLockRequest', () => {
- it( 'Enqueues a lock request', async () => {
- const fulfillment = __unstableEnqueueLockRequest( store, path, {
- exclusive: true,
- } );
-
- // Start
- expect( fulfillment.next().value ).toMatchObject( {
- type: 'ENQUEUE_LOCK_REQUEST',
- request: {
- store,
- path,
- exclusive: true,
- notifyAcquired: expect.any( Function ),
- },
- } );
-
- // Should return a promise
- expect( fulfillment.next() ).toMatchObject( {
- done: true,
- value: expect.any( Promise ),
- } );
- } );
-
- it( 'Returns a promise fulfilled only after calling notifyAcquired', async () => {
- const fulfillment = __unstableEnqueueLockRequest( store, path, {
- exclusive: true,
- } );
- const { request } = fulfillment.next().value;
- const promise = fulfillment.next().value;
- const fulfilled = jest.fn();
- promise.then( fulfilled );
- // Fulfilled should not be called until notifyAcquired is called
- await sleep( 1 );
- expect( fulfilled ).not.toBeCalled();
- const lock = {};
- request.notifyAcquired( lock );
- expect( fulfilled ).not.toBeCalled();
-
- // Promises are resolved only the next tick, so let's wait a little:
- await sleep( 1 );
- expect( fulfilled ).toBeCalledTimes( 1 );
-
- // Calling notifyAcquired again shouldn't have any effect:
- request.notifyAcquired( lock );
- await sleep( 1 );
- expect( fulfilled ).toBeCalledTimes( 1 );
- } );
-} );
-
-describe( '__unstableProcessPendingLockRequests', () => {
- const exclusive = true;
- const lock = { store, path, exclusive };
-
- let notifyAcquired;
- let request;
-
- beforeEach( () => {
- notifyAcquired = jest.fn();
- request = { store, path, exclusive, notifyAcquired };
- } );
-
- it( 'Grants a lock request that may be granted', async () => {
- const fulfillment = __unstableProcessPendingLockRequests();
-
- // Start
- expect( fulfillment.next().value.type ).toBe(
- 'PROCESS_PENDING_LOCK_REQUESTS'
- );
-
- // Get pending lock requests
- expect( fulfillment.next().value.type ).toBe( '@@data/SELECT' );
-
- // Find one and check if the request may be granted
- expect( fulfillment.next( [ request ] ).value.type ).toBe(
- '@@data/SELECT'
- );
-
- // It may, grant it
- expect( fulfillment.next( true ).value.type ).toBe(
- 'GRANT_LOCK_REQUEST'
- );
-
- // Ensure the promise isn't fulfilled until after GRANT_LOCK_REQUEST finishes
- expect( notifyAcquired ).not.toBeCalled();
-
- // All requests processed, return
- expect( fulfillment.next() ).toMatchObject( {
- done: true,
- value: undefined,
- } );
-
- // Ensure the promise is fulfilled once GRANT_LOCK_REQUEST finishes
- expect( notifyAcquired ).toBeCalledWith( lock );
- expect( notifyAcquired ).toBeCalledTimes( 1 );
-
- // All requests processed, return
- expect( fulfillment.next() ).toMatchObject( {
- done: true,
- value: undefined,
- } );
- } );
-
- it( 'Does not grants a lock request that may not be granted', async () => {
- const fulfillment = __unstableProcessPendingLockRequests();
-
- // Start
- expect( fulfillment.next().value.type ).toBe(
- 'PROCESS_PENDING_LOCK_REQUESTS'
- );
-
- // Get pending lock requests
- expect( fulfillment.next().value.type ).toBe( '@@data/SELECT' );
-
- // Find one and check if the request may be granted
- expect( fulfillment.next( [ request ] ).value.type ).toBe(
- '@@data/SELECT'
- );
-
- // It may not, let's finish
- expect( fulfillment.next( false ) ).toMatchObject( {
- done: true,
- value: undefined,
- } );
- } );
-
- it( 'Handles multiple lock requests', async () => {
- const fulfillment = __unstableProcessPendingLockRequests();
-
- // Start
- expect( fulfillment.next().value.type ).toBe(
- 'PROCESS_PENDING_LOCK_REQUESTS'
- );
-
- // Get pending lock requests
- expect( fulfillment.next().value.type ).toBe( '@@data/SELECT' );
-
- // Find one and check if the request may be granted
- expect( fulfillment.next( [ request, request ] ).value.type ).toBe(
- '@@data/SELECT'
- );
-
- // It may not, continue - check if the next one may be granted
- expect( fulfillment.next( false ).value.type ).toBe( '@@data/SELECT' );
- // It may, grant it
- expect( fulfillment.next( true ).value.type ).toBe(
- 'GRANT_LOCK_REQUEST'
- );
-
- // Ensure the promise isn't fulfilled until after GRANT_LOCK_REQUEST finishes
- expect( notifyAcquired ).not.toBeCalled();
-
- // All requests processed, return
- expect( fulfillment.next() ).toMatchObject( {
- done: true,
- value: undefined,
- } );
-
- // Ensure the promise is fulfilled once GRANT_LOCK_REQUEST finishes
- expect( notifyAcquired ).toBeCalledWith( lock );
- expect( notifyAcquired ).toBeCalledTimes( 1 );
-
- // All requests processed, return
- expect( fulfillment.next() ).toMatchObject( {
- done: true,
- value: undefined,
- } );
- } );
-} );
-
-describe( '__unstableAcquireStoreLock', () => {
- const exclusive = true;
- const lock = { store, path, exclusive };
-
- let notifyAcquired;
- let request;
-
- beforeEach( () => {
- notifyAcquired = jest.fn();
- request = { store, path, exclusive, notifyAcquired };
- } );
-
- it( 'Enqueues a lock request and attempts to fulfill it', async () => {
- const fulfillment = __unstableAcquireStoreLock( store, path, {
- exclusive,
- } );
-
- // Start
- expect( fulfillment.next().value.type ).toBe( 'ENQUEUE_LOCK_REQUEST' );
-
- // Get pending lock requests
- expect( fulfillment.next().value.type ).toBe(
- 'PROCESS_PENDING_LOCK_REQUESTS'
- );
- expect( fulfillment.next().value.type ).toBe( '@@data/SELECT' );
-
- // Check if lock may be granted
- expect( fulfillment.next( [ request ] ).value.type ).toBe(
- '@@data/SELECT'
- );
-
- // Grant lock request
- expect( fulfillment.next( true ).value.type ).toBe(
- 'GRANT_LOCK_REQUEST'
- );
-
- // Ensure the promise isn't fulfilled until after GRANT_LOCK_REQUEST finishes
- expect( notifyAcquired ).not.toBeCalled();
-
- // Await for lock promise fulfillment
- expect( fulfillment.next( 'promise' ).value.type ).toBe(
- 'AWAIT_PROMISE'
- );
-
- // Ensure the promise is fulfilled once GRANT_LOCK_REQUEST finishes
- expect( notifyAcquired ).toBeCalledWith( lock );
-
- // Return lock
- expect( fulfillment.next( lock ) ).toMatchObject( {
- done: true,
- value: lock,
- } );
- } );
-
- it( 'Enqueues a lock request and waits until fultillment it when not available', async () => {
- const fulfillment = __unstableAcquireStoreLock( store, path, {
- exclusive,
- } );
-
- // Start
- expect( fulfillment.next().value.type ).toBe( 'ENQUEUE_LOCK_REQUEST' );
-
- // Get pending lock requests
- expect( fulfillment.next().value.type ).toBe(
- 'PROCESS_PENDING_LOCK_REQUESTS'
- );
- expect( fulfillment.next().value.type ).toBe( '@@data/SELECT' );
-
- // Check if lock may be granted
- expect( fulfillment.next( [ request ] ).value.type ).toBe(
- '@@data/SELECT'
- );
-
- // Await until lock request is granted
- expect( fulfillment.next( false ).value.type ).toBe( 'AWAIT_PROMISE' );
-
- // Ensure the promise isn't fulfilled at this point...
- expect( notifyAcquired ).not.toBeCalled();
-
- await sleep( 1000 );
-
- // ...or even a second lateer
- expect( notifyAcquired ).not.toBeCalled();
-
- // Let's assume the promise was fulfilled in the end, the action should return
- // the lock once that happens.
- expect( fulfillment.next( lock ) ).toMatchObject( {
- done: true,
- value: lock,
- } );
- } );
-} );
-
-describe( '__unstableReleaseStoreLock', () => {
- const lock = { store, path, exclusive: true };
-
- it( 'Releases a lock request and attempts to fulfill pending lock requests', async () => {
- const fulfillment = __unstableReleaseStoreLock( lock );
-
- // Start
- expect( fulfillment.next().value ).toMatchObject( {
- type: 'RELEASE_LOCK',
- lock,
- } );
-
- // Attempt to grant any pending lock requests, find none, return
- expect( fulfillment.next().value.type ).toBe(
- 'PROCESS_PENDING_LOCK_REQUESTS'
- );
- expect( fulfillment.next().value.type ).toBe( '@@data/SELECT' );
-
- // Short-circuit with no results and return
- expect( fulfillment.next( [] ) ).toMatchObject( {
- done: true,
- value: undefined,
- } );
- } );
-} );
-
-const sleep = ( ms ) => {
- const promise = new Promise( ( resolve ) => setTimeout( resolve, ms ) );
- jest.advanceTimersByTime( ms + 1 );
- return promise;
-};
diff --git a/packages/core-data/src/locks/test/engine.js b/packages/core-data/src/locks/test/engine.js
new file mode 100644
index 0000000000000..0c629a3461e13
--- /dev/null
+++ b/packages/core-data/src/locks/test/engine.js
@@ -0,0 +1,135 @@
+/**
+ * Internal dependencies
+ */
+import createLocks from '../engine';
+
+jest.useRealTimers();
+
+// we correctly await all promises with expect calls, but the rule doesn't detect that
+/* eslint-disable jest/valid-expect-in-promise */
+
+describe( 'Locks engine', () => {
+ it( 'does not grant two exclusive locks at once', async () => {
+ const locks = createLocks();
+
+ let l1Granted = false;
+ let l2Granted = false;
+
+ // request two locks
+ const l1 = locks.acquire( 'store', [ 'root' ], true );
+ const l2 = locks.acquire( 'store', [ 'root' ], true );
+
+ // on each grant, verify that the other lock is not granted at the same time
+ const check1 = l1.then( () => {
+ l1Granted = true;
+ expect( l2Granted ).toBe( false );
+ } );
+
+ const check2 = l2.then( () => {
+ l2Granted = true;
+ expect( l1Granted ).toBe( false );
+ } );
+
+ // unlock both
+ const lock1 = await l1;
+ locks.release( lock1 );
+ l1Granted = false;
+
+ const lock2 = await l2;
+ locks.release( lock2 );
+ l2Granted = false;
+
+ // ensure that both locks were granted and checked
+ return await Promise.all( [ check1, check2 ] );
+ } );
+
+ it( 'does not grant an exclusive lock if a non-exclusive one already exists', async () => {
+ const locks = createLocks();
+
+ let l1Granted = false;
+ let l2Granted = false;
+
+ // request two locks
+ const l1 = locks.acquire( 'store', [ 'root' ], false );
+ const l2 = locks.acquire( 'store', [ 'root' ], true );
+
+ // on each grant, verify that the other lock is not granted at the same time
+ const check1 = l1.then( () => {
+ l1Granted = true;
+ expect( l2Granted ).toBe( false );
+ } );
+
+ const check2 = l2.then( () => {
+ l2Granted = true;
+ expect( l1Granted ).toBe( false );
+ } );
+
+ // unlock both
+ const lock1 = await l1;
+ locks.release( lock1 );
+ l1Granted = false;
+
+ const lock2 = await l2;
+ locks.release( lock2 );
+ l2Granted = false;
+
+ // ensure that both locks were granted and checked
+ return await Promise.all( [ check1, check2 ] );
+ } );
+
+ it( 'does not grant two exclusive locks to parent and child', async () => {
+ const locks = createLocks();
+
+ let l1Granted = false;
+ let l2Granted = false;
+
+ // request two locks
+ const l1 = locks.acquire( 'store', [ 'root' ], true );
+ const l2 = locks.acquire( 'store', [ 'root', 'child' ], true );
+
+ // on each grant, verify that the other lock is not granted at the same time
+ const check1 = l1.then( () => {
+ l1Granted = true;
+ expect( l2Granted ).toBe( false );
+ } );
+
+ const check2 = l2.then( () => {
+ l2Granted = true;
+ expect( l1Granted ).toBe( false );
+ } );
+
+ // unlock both
+ const lock1 = await l1;
+ locks.release( lock1 );
+ l1Granted = false;
+
+ const lock2 = await l2;
+ locks.release( lock2 );
+ l2Granted = false;
+
+ // ensure that both locks were granted and checked
+ return await Promise.all( [ check1, check2 ] );
+ } );
+
+ it( 'grants two non-exclusive locks at once', async () => {
+ const locks = createLocks();
+
+ const l1 = await locks.acquire( 'store', [ 'root' ], false );
+ const l2 = await locks.acquire( 'store', [ 'root' ], false );
+
+ expect( l1 ).not.toBeUndefined();
+ expect( l2 ).not.toBeUndefined();
+ } );
+
+ it( 'grants two exclusive locks to different branches', async () => {
+ const locks = createLocks();
+
+ const l1 = await locks.acquire( 'store', [ 'a' ], true );
+ const l2 = await locks.acquire( 'store', [ 'b' ], true );
+
+ expect( l1 ).not.toBeUndefined();
+ expect( l2 ).not.toBeUndefined();
+ } );
+} );
+
+/* eslint-enable jest/valid-expect-in-promise */
diff --git a/packages/core-data/src/locks/test/reducer.js b/packages/core-data/src/locks/test/reducer.js
index b422ae9aa5ffa..238531ebe137c 100644
--- a/packages/core-data/src/locks/test/reducer.js
+++ b/packages/core-data/src/locks/test/reducer.js
@@ -6,7 +6,7 @@ import deepFreeze from 'deep-freeze';
/**
* Internal dependencies
*/
-import { locks } from '../reducer';
+import locks from '../reducer';
const buildNode = ( children = {} ) => ( {
locks: [],
diff --git a/packages/core-data/src/locks/test/selectors.js b/packages/core-data/src/locks/test/selectors.js
index 2f3f1cf77f707..667d93c635c00 100644
--- a/packages/core-data/src/locks/test/selectors.js
+++ b/packages/core-data/src/locks/test/selectors.js
@@ -6,58 +6,45 @@ import deepFreeze from 'deep-freeze';
/**
* Internal dependencies
*/
-import {
- __unstableGetPendingLockRequests,
- __unstableIsLockAvailable,
-} from '../selectors';
+import { getPendingLockRequests, isLockAvailable } from '../selectors';
import { deepCopyLocksTreePath, getNode } from '../utils';
-describe( '__unstableGetPendingLockRequests', () => {
+describe( 'getPendingLockRequests', () => {
it( 'returns pending lock requests', () => {
const state = deepFreeze( {
- locks: {
- requests: [ 1, 2, 3 ],
- },
+ requests: [ 1, 2, 3 ],
} );
- expect( __unstableGetPendingLockRequests( state ) ).toEqual( [
- 1,
- 2,
- 3,
- ] );
+ expect( getPendingLockRequests( state ) ).toEqual( [ 1, 2, 3 ] );
} );
} );
-describe( '__unstableIsLockAvailable', () => {
+describe( 'isLockAvailable', () => {
describe( 'smoke tests', () => {
it( 'returns true if lock is available', () => {
const state = deepFreeze( {
- locks: {
- tree: {
- children: {},
- locks: [],
- },
+ tree: {
+ children: {},
+ locks: [],
},
} );
expect(
- __unstableIsLockAvailable( state, 'core', [], {
+ isLockAvailable( state, 'core', [], {
exclusive: true,
} )
).toBe( true );
} );
it( 'returns false if lock is not available', () => {
const state = deepFreeze( {
- locks: {
- tree: {
- children: {},
- locks: [ { exclusive: false } ],
- },
+ tree: {
+ children: {},
+ locks: [ { exclusive: false } ],
},
} );
expect(
- __unstableIsLockAvailable( state, 'core', [], {
+ isLockAvailable( state, 'core', [], {
exclusive: true,
} )
).toBe( false );
@@ -75,7 +62,7 @@ describe( '__unstableIsLockAvailable', () => {
} );
it( `returns true if no parent or descendant has any locks`, () => {
expect(
- __unstableIsLockAvailable(
+ isLockAvailable(
deepFreeze( state ),
'core',
[ 'entities', 'root' ],
@@ -89,7 +76,7 @@ describe( '__unstableIsLockAvailable', () => {
exclusive: true,
} );
expect(
- __unstableIsLockAvailable(
+ isLockAvailable(
deepFreeze( state ),
'core',
[ 'entities', 'root' ],
@@ -103,7 +90,7 @@ describe( '__unstableIsLockAvailable', () => {
exclusive: true,
} );
expect(
- __unstableIsLockAvailable(
+ isLockAvailable(
deepFreeze( state ),
'core',
[ 'entities', 'root' ],
@@ -114,41 +101,39 @@ describe( '__unstableIsLockAvailable', () => {
it( `returns true if another branch holds a locks (3)`, () => {
const subState = {
- locks: {
- tree: {
- locks: [],
- children: {
- postType: {
- locks: [],
- children: {
- post: {
- locks: [],
- children: {
- 16: {
- locks: [
- {
- store: 'core',
- path: [
- 'entities',
- 'data',
- 'postType',
- 'post',
- 16,
- ],
- exclusive: true,
- },
- ],
- children: {},
- },
+ tree: {
+ locks: [],
+ children: {
+ postType: {
+ locks: [],
+ children: {
+ post: {
+ locks: [],
+ children: {
+ 16: {
+ locks: [
+ {
+ store: 'core',
+ path: [
+ 'entities',
+ 'data',
+ 'postType',
+ 'post',
+ 16,
+ ],
+ exclusive: true,
+ },
+ ],
+ children: {},
},
},
- wp_template_part: {
- locks: [],
- children: {
- 17: {
- locks: [],
- children: {},
- },
+ },
+ wp_template_part: {
+ locks: [],
+ children: {
+ 17: {
+ locks: [],
+ children: {},
},
},
},
@@ -158,7 +143,7 @@ describe( '__unstableIsLockAvailable', () => {
},
};
expect(
- __unstableIsLockAvailable(
+ isLockAvailable(
deepFreeze( subState ),
'core',
[ 'postType', 'wp_template_part', 17 ],
@@ -169,41 +154,39 @@ describe( '__unstableIsLockAvailable', () => {
it( `returns true if another branch holds a locks (4)`, () => {
const subState = {
- locks: {
- tree: {
- locks: [],
- children: {
- core: {
- locks: [],
- children: {
- entities: {
- locks: [],
- children: {
- data: {
- locks: [],
- children: {
- postType: {
- locks: [],
- children: {
- book: {
- locks: [],
- children: {
- 67: {
- locks: [
- {
- path: [
- 'core',
- 'entities',
- 'data',
- 'postType',
- 'book',
- 67,
- ],
- exclusive: true,
- },
- ],
- children: {},
- },
+ tree: {
+ locks: [],
+ children: {
+ core: {
+ locks: [],
+ children: {
+ entities: {
+ locks: [],
+ children: {
+ data: {
+ locks: [],
+ children: {
+ postType: {
+ locks: [],
+ children: {
+ book: {
+ locks: [],
+ children: {
+ 67: {
+ locks: [
+ {
+ path: [
+ 'core',
+ 'entities',
+ 'data',
+ 'postType',
+ 'book',
+ 67,
+ ],
+ exclusive: true,
+ },
+ ],
+ children: {},
},
},
},
@@ -219,7 +202,7 @@ describe( '__unstableIsLockAvailable', () => {
},
};
expect(
- __unstableIsLockAvailable(
+ isLockAvailable(
deepFreeze( subState ),
'core',
[ 'entities', 'data', 'postType', 'book', 67 ],
@@ -231,7 +214,7 @@ describe( '__unstableIsLockAvailable', () => {
[ true, false ].forEach( ( exclusive ) => {
it( `returns true if the path is not accessible and no parent holds a lock`, () => {
expect(
- __unstableIsLockAvailable(
+ isLockAvailable(
deepFreeze( state ),
'core',
[ 'fake', 'path' ],
@@ -245,7 +228,7 @@ describe( '__unstableIsLockAvailable', () => {
exclusive,
} );
expect(
- __unstableIsLockAvailable(
+ isLockAvailable(
deepFreeze( state ),
'core',
[ 'fake', 'path' ],
@@ -259,7 +242,7 @@ describe( '__unstableIsLockAvailable', () => {
exclusive,
} );
expect(
- __unstableIsLockAvailable(
+ isLockAvailable(
deepFreeze( state ),
'core',
[ 'entities', 'root' ],
@@ -273,7 +256,7 @@ describe( '__unstableIsLockAvailable', () => {
exclusive,
} );
expect(
- __unstableIsLockAvailable(
+ isLockAvailable(
deepFreeze( state ),
'core',
[ 'entities', 'root' ],
@@ -287,7 +270,7 @@ describe( '__unstableIsLockAvailable', () => {
exclusive,
} );
expect(
- __unstableIsLockAvailable(
+ isLockAvailable(
deepFreeze( state ),
'core',
[ 'entities', 'root' ],
@@ -306,7 +289,7 @@ describe( '__unstableIsLockAvailable', () => {
}
);
expect(
- __unstableIsLockAvailable(
+ isLockAvailable(
deepFreeze( state ),
'core',
[ 'entities', 'root' ],
@@ -325,7 +308,7 @@ describe( '__unstableIsLockAvailable', () => {
}
);
expect(
- __unstableIsLockAvailable(
+ isLockAvailable(
deepFreeze( state ),
'core',
[ 'entities', 'root' ],
@@ -345,7 +328,7 @@ describe( '__unstableIsLockAvailable', () => {
} );
it( `returns true if no parent or descendant has any locks`, () => {
expect(
- __unstableIsLockAvailable(
+ isLockAvailable(
deepFreeze( state ),
'core',
[ 'entities', 'root' ],
@@ -361,7 +344,7 @@ describe( '__unstableIsLockAvailable', () => {
exclusive: isOtherLockExclusive,
} );
expect(
- __unstableIsLockAvailable(
+ isLockAvailable(
deepFreeze( state ),
'core',
[ 'fake', 'path' ],
@@ -375,7 +358,7 @@ describe( '__unstableIsLockAvailable', () => {
exclusive: isOtherLockExclusive,
} );
expect(
- __unstableIsLockAvailable(
+ isLockAvailable(
deepFreeze( state ),
'core',
[ 'entities', 'root' ],
@@ -389,7 +372,7 @@ describe( '__unstableIsLockAvailable', () => {
exclusive: isOtherLockExclusive,
} );
expect(
- __unstableIsLockAvailable(
+ isLockAvailable(
deepFreeze( state ),
'core',
[ 'entities', 'root' ],
@@ -403,7 +386,7 @@ describe( '__unstableIsLockAvailable', () => {
exclusive: isOtherLockExclusive,
} );
expect(
- __unstableIsLockAvailable(
+ isLockAvailable(
deepFreeze( state ),
'core',
[ 'entities', 'root' ],
@@ -422,7 +405,7 @@ describe( '__unstableIsLockAvailable', () => {
}
);
expect(
- __unstableIsLockAvailable(
+ isLockAvailable(
deepFreeze( state ),
'core',
[ 'entities', 'root' ],
@@ -441,7 +424,7 @@ describe( '__unstableIsLockAvailable', () => {
}
);
expect(
- __unstableIsLockAvailable(
+ isLockAvailable(
deepFreeze( state ),
'core',
[ 'entities', 'root' ],
@@ -454,20 +437,18 @@ describe( '__unstableIsLockAvailable', () => {
} );
function appendLock( state, store, path, lock ) {
- getNode( state.locks.tree, [ store, ...path ] ).locks.push( lock );
+ getNode( state.tree, [ store, ...path ] ).locks.push( lock );
}
function buildState( paths ) {
return {
- locks: {
- requests: [],
- tree: paths.reduce(
- ( tree, path ) => deepCopyLocksTreePath( tree, path ),
- {
- locks: [],
- children: {},
- }
- ),
- },
+ requests: [],
+ tree: paths.reduce(
+ ( tree, path ) => deepCopyLocksTreePath( tree, path ),
+ {
+ locks: [],
+ children: {},
+ }
+ ),
};
}
diff --git a/packages/core-data/src/queried-data/get-query-parts.js b/packages/core-data/src/queried-data/get-query-parts.js
index 1cd9631495505..9075adb71fabf 100644
--- a/packages/core-data/src/queried-data/get-query-parts.js
+++ b/packages/core-data/src/queried-data/get-query-parts.js
@@ -60,12 +60,6 @@ export function getQueryParts( query ) {
parts.perPage = Number( value );
break;
- case 'include':
- parts.include = getNormalizedCommaSeparable( value ).map(
- Number
- );
- break;
-
case 'context':
parts.context = value;
break;
@@ -82,6 +76,15 @@ export function getQueryParts( query ) {
value = parts.fields.join();
}
+ // Two requests with different include values cannot have same results.
+ if ( key === 'include' ) {
+ parts.include = getNormalizedCommaSeparable( value ).map(
+ Number
+ );
+ // Normalize value for `stableKey`.
+ value = parts.include.join();
+ }
+
// While it could be any deterministic string, for simplicity's
// sake mimic querystring encoding for stable key.
//
diff --git a/packages/core-data/src/queried-data/test/get-query-parts.js b/packages/core-data/src/queried-data/test/get-query-parts.js
index 0de6036d696b3..b3ca692ad09f5 100644
--- a/packages/core-data/src/queried-data/test/get-query-parts.js
+++ b/packages/core-data/src/queried-data/test/get-query-parts.js
@@ -24,7 +24,7 @@ describe( 'getQueryParts', () => {
context: 'default',
page: 1,
perPage: 10,
- stableKey: '',
+ stableKey: 'include=1',
fields: null,
include: [ 1 ],
} );
diff --git a/packages/core-data/src/queried-data/test/selectors.js b/packages/core-data/src/queried-data/test/selectors.js
index 39b46a97a9395..f0a38aab2887e 100644
--- a/packages/core-data/src/queried-data/test/selectors.js
+++ b/packages/core-data/src/queried-data/test/selectors.js
@@ -82,6 +82,7 @@ describe( 'getQueriedItems', () => {
queries: {
default: {
'': [ 1, 2 ],
+ 'include=1': [ 1 ],
},
},
};
diff --git a/packages/core-data/src/reducer.js b/packages/core-data/src/reducer.js
index 4b975e9a47efd..f78e6fd76eff9 100644
--- a/packages/core-data/src/reducer.js
+++ b/packages/core-data/src/reducer.js
@@ -15,7 +15,6 @@ import isShallowEqual from '@wordpress/is-shallow-equal';
import { ifMatchingAction, replaceAction } from './utils';
import { reducer as queriedDataReducer } from './queried-data';
import { defaultEntities, DEFAULT_ENTITY_KEY } from './entities';
-import { reducer as locksReducer } from './locks';
/**
* Reducer managing terms state. Keyed by taxonomy slug, the value is either
@@ -580,5 +579,4 @@ export default combineReducers( {
embedPreviews,
userPermissions,
autosaves,
- locks: locksReducer,
} );
diff --git a/packages/core-data/src/resolvers.js b/packages/core-data/src/resolvers.js
index 0d459c0d0ba65..49f5ae8809ab8 100644
--- a/packages/core-data/src/resolvers.js
+++ b/packages/core-data/src/resolvers.js
@@ -7,33 +7,14 @@ import { find, includes, get, hasIn, compact, uniq } from 'lodash';
* WordPress dependencies
*/
import { addQueryArgs } from '@wordpress/url';
-import { controls } from '@wordpress/data';
-import { apiFetch } from '@wordpress/data-controls';
-/**
- * Internal dependencies
- */
-import { regularFetch } from './controls';
-import { STORE_NAME } from './name';
+import apiFetch from '@wordpress/api-fetch';
/**
* Internal dependencies
*/
-import {
- receiveUserQuery,
- receiveCurrentTheme,
- receiveCurrentUser,
- receiveEntityRecords,
- receiveThemeSupports,
- receiveEmbedPreview,
- receiveUserPermission,
- receiveAutosaves,
-} from './actions';
+import { STORE_NAME } from './name';
import { getKindEntities, DEFAULT_ENTITY_KEY } from './entities';
import { ifNotResolved, getNormalizedCommaSeparable } from './utils';
-import {
- __unstableAcquireStoreLock,
- __unstableReleaseStoreLock,
-} from './locks';
/**
* Requests authors from the REST API.
@@ -41,22 +22,22 @@ import {
* @param {Object|undefined} query Optional object of query parameters to
* include with request.
*/
-export function* getAuthors( query ) {
+export const getAuthors = ( query ) => async ( { dispatch } ) => {
const path = addQueryArgs(
'/wp/v2/users/?who=authors&per_page=100',
query
);
- const users = yield apiFetch( { path } );
- yield receiveUserQuery( path, users );
-}
+ const users = await apiFetch( { path } );
+ dispatch.receiveUserQuery( path, users );
+};
/**
* Requests the current user from the REST API.
*/
-export function* getCurrentUser() {
- const currentUser = yield apiFetch( { path: '/wp/v2/users/me' } );
- yield receiveCurrentUser( currentUser );
-}
+export const getCurrentUser = () => async ( { dispatch } ) => {
+ const currentUser = await apiFetch( { path: '/wp/v2/users/me' } );
+ dispatch.receiveCurrentUser( currentUser );
+};
/**
* Requests an entity's record from the REST API.
@@ -67,18 +48,22 @@ export function* getCurrentUser() {
* @param {Object|undefined} query Optional object of query parameters to
* include with request.
*/
-export function* getEntityRecord( kind, name, key = '', query ) {
- const entities = yield getKindEntities( kind );
+export const getEntityRecord = ( kind, name, key = '', query ) => async ( {
+ select,
+ dispatch,
+} ) => {
+ const entities = await dispatch( getKindEntities( kind ) );
const entity = find( entities, { kind, name } );
if ( ! entity ) {
return;
}
- const lock = yield* __unstableAcquireStoreLock(
+ const lock = await dispatch.__unstableAcquireStoreLock(
STORE_NAME,
[ 'entities', 'data', kind, name, key ],
{ exclusive: false }
);
+
try {
if ( query !== undefined && query._fields ) {
// If requesting specific fields, items and query association to said
@@ -111,27 +96,21 @@ export function* getEntityRecord( kind, name, key = '', query ) {
// The resolution cache won't consider query as reusable based on the
// fields, so it's tested here, prior to initiating the REST request,
// and without causing `getEntityRecords` resolution to occur.
- const hasRecords = yield controls.select(
- STORE_NAME,
- 'hasEntityRecords',
- kind,
- name,
- query
- );
+ const hasRecords = select.hasEntityRecords( kind, name, query );
if ( hasRecords ) {
return;
}
}
- const record = yield apiFetch( { path } );
- yield receiveEntityRecords( kind, name, record, query );
+ const record = await apiFetch( { path } );
+ dispatch.receiveEntityRecords( kind, name, record, query );
} catch ( error ) {
// We need a way to handle and access REST API errors in state
// Until then, catching the error ensures the resolver is marked as resolved.
} finally {
- yield* __unstableReleaseStoreLock( lock );
+ dispatch.__unstableReleaseStoreLock( lock );
}
-}
+};
/**
* Requests an entity's record from the REST API.
@@ -156,18 +135,21 @@ export const getEditedEntityRecord = ifNotResolved(
* @param {string} name Entity name.
* @param {Object?} query Query Object.
*/
-export function* getEntityRecords( kind, name, query = {} ) {
- const entities = yield getKindEntities( kind );
+export const getEntityRecords = ( kind, name, query = {} ) => async ( {
+ dispatch,
+} ) => {
+ const entities = await dispatch( getKindEntities( kind ) );
const entity = find( entities, { kind, name } );
if ( ! entity ) {
return;
}
- const lock = yield* __unstableAcquireStoreLock(
+ const lock = await dispatch.__unstableAcquireStoreLock(
STORE_NAME,
[ 'entities', 'data', kind, name ],
{ exclusive: false }
);
+
try {
if ( query._fields ) {
// If requesting specific fields, items and query association to said
@@ -187,7 +169,7 @@ export function* getEntityRecords( kind, name, query = {} ) {
...query,
} );
- let records = Object.values( yield apiFetch( { path } ) );
+ let records = Object.values( await apiFetch( { path } ) );
// If we request fields but the result doesn't contain the fields,
// explicitely set these fields as "undefined"
// that way we consider the query "fullfilled".
@@ -203,7 +185,8 @@ export function* getEntityRecords( kind, name, query = {} ) {
} );
}
- yield receiveEntityRecords( kind, name, records, query );
+ dispatch.receiveEntityRecords( kind, name, records, query );
+
// When requesting all fields, the list of results can be used to
// resolve the `getEntityRecord` selector in addition to `getEntityRecords`.
// See https://github.com/WordPress/gutenberg/pull/26575
@@ -213,21 +196,21 @@ export function* getEntityRecords( kind, name, query = {} ) {
.filter( ( record ) => record[ key ] )
.map( ( record ) => [ kind, name, record[ key ] ] );
- yield {
+ dispatch( {
type: 'START_RESOLUTIONS',
selectorName: 'getEntityRecord',
args: resolutionsArgs,
- };
- yield {
+ } );
+ dispatch( {
type: 'FINISH_RESOLUTIONS',
selectorName: 'getEntityRecord',
args: resolutionsArgs,
- };
+ } );
}
} finally {
- yield* __unstableReleaseStoreLock( lock );
+ dispatch.__unstableReleaseStoreLock( lock );
}
-}
+};
getEntityRecords.shouldInvalidate = ( action, kind, name ) => {
return (
@@ -241,39 +224,39 @@ getEntityRecords.shouldInvalidate = ( action, kind, name ) => {
/**
* Requests the current theme.
*/
-export function* getCurrentTheme() {
- const activeThemes = yield apiFetch( {
+export const getCurrentTheme = () => async ( { dispatch } ) => {
+ const activeThemes = await apiFetch( {
path: '/wp/v2/themes?status=active',
} );
- yield receiveCurrentTheme( activeThemes[ 0 ] );
-}
+ dispatch.receiveCurrentTheme( activeThemes[ 0 ] );
+};
/**
* Requests theme supports data from the index.
*/
-export function* getThemeSupports() {
- const activeThemes = yield apiFetch( {
+export const getThemeSupports = () => async ( { dispatch } ) => {
+ const activeThemes = await apiFetch( {
path: '/wp/v2/themes?status=active',
} );
- yield receiveThemeSupports( activeThemes[ 0 ].theme_supports );
-}
+ dispatch.receiveThemeSupports( activeThemes[ 0 ].theme_supports );
+};
/**
* Requests a preview from the from the Embed API.
*
* @param {string} url URL to get the preview for.
*/
-export function* getEmbedPreview( url ) {
+export const getEmbedPreview = ( url ) => async ( { dispatch } ) => {
try {
- const embedProxyResponse = yield apiFetch( {
+ const embedProxyResponse = await apiFetch( {
path: addQueryArgs( '/oembed/1.0/proxy', { url } ),
} );
- yield receiveEmbedPreview( url, embedProxyResponse );
+ dispatch.receiveEmbedPreview( url, embedProxyResponse );
} catch ( error ) {
// Embed API 404s if the URL cannot be embedded, so we have to catch the error from the apiRequest here.
- yield receiveEmbedPreview( url, false );
+ dispatch.receiveEmbedPreview( url, false );
}
-}
+};
/**
* Checks whether the current user can perform the given action on the given
@@ -284,7 +267,7 @@ export function* getEmbedPreview( url ) {
* @param {string} resource REST resource to check, e.g. 'media' or 'posts'.
* @param {?string} id ID of the rest resource to check.
*/
-export function* canUser( action, resource, id ) {
+export const canUser = ( action, resource, id ) => async ( { dispatch } ) => {
const methods = {
create: 'POST',
read: 'GET',
@@ -301,7 +284,7 @@ export function* canUser( action, resource, id ) {
let response;
try {
- response = yield apiFetch( {
+ response = await apiFetch( {
path,
// Ideally this would always be an OPTIONS request, but unfortunately there's
// a bug in the REST API which causes the Allow header to not be sent on
@@ -329,8 +312,8 @@ export function* canUser( action, resource, id ) {
const key = compact( [ action, resource, id ] ).join( '/' );
const isAllowed = includes( allowHeader, method );
- yield receiveUserPermission( key, isAllowed );
-}
+ dispatch.receiveUserPermission( key, isAllowed );
+};
/**
* Checks whether the current user can perform the given action on the given
@@ -340,16 +323,18 @@ export function* canUser( action, resource, id ) {
* @param {string} name Entity name.
* @param {string} recordId Record's id.
*/
-export function* canUserEditEntityRecord( kind, name, recordId ) {
- const entities = yield getKindEntities( kind );
+export const canUserEditEntityRecord = ( kind, name, recordId ) => async ( {
+ dispatch,
+} ) => {
+ const entities = await dispatch( getKindEntities( kind ) );
const entity = find( entities, { kind, name } );
if ( ! entity ) {
return;
}
const resource = entity.__unstable_rest_base;
- yield canUser( 'update', resource, recordId );
-}
+ await dispatch( canUser( 'update', resource, recordId ) );
+};
/**
* Request autosave data from the REST API.
@@ -357,20 +342,19 @@ export function* canUserEditEntityRecord( kind, name, recordId ) {
* @param {string} postType The type of the parent post.
* @param {number} postId The id of the parent post.
*/
-export function* getAutosaves( postType, postId ) {
- const { rest_base: restBase } = yield controls.resolveSelect(
- STORE_NAME,
- 'getPostType',
- postType
- );
- const autosaves = yield apiFetch( {
+export const getAutosaves = ( postType, postId ) => async ( {
+ dispatch,
+ resolveSelect,
+} ) => {
+ const { rest_base: restBase } = await resolveSelect.getPostType( postType );
+ const autosaves = await apiFetch( {
path: `/wp/v2/${ restBase }/${ postId }/autosaves?context=edit`,
} );
if ( autosaves && autosaves.length ) {
- yield receiveAutosaves( postId, autosaves );
+ dispatch.receiveAutosaves( postId, autosaves );
}
-}
+};
/**
* Request autosave data from the REST API.
@@ -381,31 +365,30 @@ export function* getAutosaves( postType, postId ) {
* @param {string} postType The type of the parent post.
* @param {number} postId The id of the parent post.
*/
-export function* getAutosave( postType, postId ) {
- yield controls.resolveSelect(
- STORE_NAME,
- 'getAutosaves',
- postType,
- postId
- );
-}
+export const getAutosave = ( postType, postId ) => async ( {
+ resolveSelect,
+} ) => {
+ await resolveSelect.getAutosaves( postType, postId );
+};
/**
* Retrieve the frontend template used for a given link.
*
* @param {string} link Link.
*/
-export function* __experimentalGetTemplateForLink( link ) {
+export const __experimentalGetTemplateForLink = ( link ) => async ( {
+ dispatch,
+ resolveSelect,
+} ) => {
// Ideally this should be using an apiFetch call
// We could potentially do so by adding a "filter" to the `wp_template` end point.
// Also it seems the returned object is not a regular REST API post type.
let template;
try {
- template = yield regularFetch(
- addQueryArgs( link, {
- '_wp-find-template': true,
- } )
- );
+ template = await window
+ .fetch( addQueryArgs( link, { '_wp-find-template': true } ) )
+ .then( ( res ) => res.json() )
+ .then( ( { data } ) => data );
} catch ( e ) {
// For non-FSE themes, it is possible that this request returns an error.
}
@@ -414,21 +397,18 @@ export function* __experimentalGetTemplateForLink( link ) {
return;
}
- yield getEntityRecord( 'postType', 'wp_template', template.id );
- const record = yield controls.select(
- STORE_NAME,
- 'getEntityRecord',
+ const record = await resolveSelect.getEntityRecord(
'postType',
'wp_template',
template.id
);
if ( record ) {
- yield receiveEntityRecords( 'postType', 'wp_template', [ record ], {
+ dispatch.receiveEntityRecords( 'postType', 'wp_template', [ record ], {
'find-template': link,
} );
}
-}
+};
__experimentalGetTemplateForLink.shouldInvalidate = ( action ) => {
return (
diff --git a/packages/core-data/src/selectors.js b/packages/core-data/src/selectors.js
index a7bb82da615ab..b3ab91d780960 100644
--- a/packages/core-data/src/selectors.js
+++ b/packages/core-data/src/selectors.js
@@ -17,7 +17,7 @@ import deprecated from '@wordpress/deprecated';
import { STORE_NAME } from './name';
import { getQueriedItems } from './queried-data';
import { DEFAULT_ENTITY_KEY } from './entities';
-import { getNormalizedCommaSeparable } from './utils';
+import { getNormalizedCommaSeparable, isRawAttribute } from './utils';
/**
* Shared reference to an empty array for cases where it is important to avoid
@@ -205,14 +205,18 @@ export const getRawEntityRecord = createSelector(
return (
record &&
Object.keys( record ).reduce( ( accumulator, _key ) => {
- // Because edits are the "raw" attribute values,
- // we return those from record selectors to make rendering,
- // comparisons, and joins with edits easier.
- accumulator[ _key ] = get(
- record[ _key ],
- 'raw',
- record[ _key ]
- );
+ if ( isRawAttribute( getEntity( state, kind, name ), _key ) ) {
+ // Because edits are the "raw" attribute values,
+ // we return those from record selectors to make rendering,
+ // comparisons, and joins with edits easier.
+ accumulator[ _key ] = get(
+ record[ _key ],
+ 'raw',
+ record[ _key ]
+ );
+ } else {
+ accumulator[ _key ] = record[ _key ];
+ }
return accumulator;
}, {} )
);
diff --git a/packages/core-data/src/test/actions.js b/packages/core-data/src/test/actions.js
index 6dfec991e2a03..8aa1ecade3854 100644
--- a/packages/core-data/src/test/actions.js
+++ b/packages/core-data/src/test/actions.js
@@ -1,7 +1,9 @@
/**
* WordPress dependencies
*/
-import { controls } from '@wordpress/data';
+import apiFetch from '@wordpress/api-fetch';
+
+jest.mock( '@wordpress/api-fetch' );
/**
* Internal dependencies
@@ -10,26 +12,12 @@ import {
editEntityRecord,
saveEntityRecord,
deleteEntityRecord,
- receiveEntityRecords,
receiveUserPermission,
receiveAutosaves,
receiveCurrentUser,
__experimentalBatch,
} from '../actions';
-jest.mock( '../locks/actions', () => ( {
- __unstableAcquireStoreLock: jest.fn( () => [
- {
- type: 'MOCKED_ACQUIRE_LOCK',
- },
- ] ),
- __unstableReleaseStoreLock: jest.fn( () => [
- {
- type: 'MOCKED_RELEASE_LOCK',
- },
- ] ),
-} ) );
-
jest.mock( '../batch', () => {
const { createBatch } = jest.requireActual( '../batch' );
return {
@@ -40,120 +28,161 @@ jest.mock( '../batch', () => {
} );
describe( 'editEntityRecord', () => {
- it( 'throws when the edited entity does not have a loaded config.', () => {
+ it( 'throws when the edited entity does not have a loaded config.', async () => {
const entity = { kind: 'someKind', name: 'someName', id: 'someId' };
- const fulfillment = editEntityRecord(
- entity.kind,
- entity.name,
- entity.id,
- {}
- );
- expect( fulfillment.next().value ).toEqual(
- controls.select( 'core', 'getEntity', entity.kind, entity.name )
- );
-
- // Don't pass back an entity config.
- expect( fulfillment.next.bind( fulfillment ) ).toThrow(
+ const select = {
+ getEntity: jest.fn(),
+ };
+ const fulfillment = () =>
+ editEntityRecord(
+ entity.kind,
+ entity.name,
+ entity.id,
+ {}
+ )( { select } );
+ expect( fulfillment ).toThrow(
`The entity being edited (${ entity.kind }, ${ entity.name }) does not have a loaded config.`
);
+ expect( select.getEntity ).toHaveBeenCalledTimes( 1 );
} );
} );
describe( 'deleteEntityRecord', () => {
+ beforeEach( async () => {
+ apiFetch.mockReset();
+ jest.useFakeTimers();
+ } );
+
it( 'triggers a DELETE request for an existing record', async () => {
- const post = 10;
+ const deletedRecord = { title: 'new post', id: 10 };
const entities = [
{ name: 'post', kind: 'postType', baseURL: '/wp/v2/posts' },
];
- const fulfillment = deleteEntityRecord( 'postType', 'post', post );
- // Trigger generator
- fulfillment.next();
+ const dispatch = Object.assign( jest.fn(), {
+ receiveEntityRecords: jest.fn(),
+ __unstableAcquireStoreLock: jest.fn(),
+ __unstableReleaseStoreLock: jest.fn(),
+ } );
+ // Provide entities
+ dispatch.mockReturnValueOnce( entities );
- // Acquire lock
- expect( fulfillment.next( entities ).value.type ).toBe(
- 'MOCKED_ACQUIRE_LOCK'
- );
+ // Provide response
+ apiFetch.mockImplementation( () => deletedRecord );
- // Start
- expect( fulfillment.next().value.type ).toEqual(
- 'DELETE_ENTITY_RECORD_START'
- );
+ const result = await deleteEntityRecord(
+ 'postType',
+ 'post',
+ deletedRecord.id
+ )( { dispatch } );
- // delete api call
- const { value: apiFetchAction } = fulfillment.next();
- expect( apiFetchAction.request ).toEqual( {
+ expect( apiFetch ).toHaveBeenCalledTimes( 1 );
+ expect( apiFetch ).toHaveBeenCalledWith( {
path: '/wp/v2/posts/10',
method: 'DELETE',
} );
- expect( fulfillment.next().value.type ).toBe( 'REMOVE_ITEMS' );
-
- expect( fulfillment.next().value.type ).toBe(
- 'DELETE_ENTITY_RECORD_FINISH'
+ expect( dispatch ).toHaveBeenCalledTimes( 4 );
+ expect( dispatch ).toHaveBeenCalledWith( {
+ type: 'DELETE_ENTITY_RECORD_START',
+ kind: 'postType',
+ name: 'post',
+ recordId: 10,
+ } );
+ expect( dispatch ).toHaveBeenCalledWith( {
+ type: 'DELETE_ENTITY_RECORD_FINISH',
+ kind: 'postType',
+ name: 'post',
+ recordId: 10,
+ error: undefined,
+ } );
+ expect( dispatch.__unstableAcquireStoreLock ).toHaveBeenCalledTimes(
+ 1
);
-
- // Release lock
- expect( fulfillment.next().value.type ).toEqual(
- 'MOCKED_RELEASE_LOCK'
+ expect( dispatch.__unstableReleaseStoreLock ).toHaveBeenCalledTimes(
+ 1
);
- expect( fulfillment.next() ).toMatchObject( {
- done: true,
- value: undefined,
- } );
+ expect( result ).toBe( deletedRecord );
} );
} );
describe( 'saveEntityRecord', () => {
+ beforeEach( async () => {
+ apiFetch.mockReset();
+ jest.useFakeTimers();
+ } );
+
it( 'triggers a POST request for a new record', async () => {
const post = { title: 'new post' };
const entities = [
{ name: 'post', kind: 'postType', baseURL: '/wp/v2/posts' },
];
- const fulfillment = saveEntityRecord( 'postType', 'post', post );
- // Trigger generator
- fulfillment.next();
+ const select = {
+ getRawEntityRecord: () => post,
+ };
- // Provide entities and acquire lock
- expect( fulfillment.next( entities ).value.type ).toBe(
- 'MOCKED_ACQUIRE_LOCK'
- );
+ const dispatch = Object.assign( jest.fn(), {
+ receiveEntityRecords: jest.fn(),
+ __unstableAcquireStoreLock: jest.fn(),
+ __unstableReleaseStoreLock: jest.fn(),
+ } );
+ // Provide entities
+ dispatch.mockReturnValueOnce( entities );
- // Trigger apiFetch
- expect( fulfillment.next().value.type ).toEqual(
- 'SAVE_ENTITY_RECORD_START'
- );
+ // Provide response
+ const updatedRecord = { ...post, id: 10 };
+ apiFetch.mockImplementation( () => {
+ return updatedRecord;
+ } );
- expect( fulfillment.next().value.type ).toBe( '@@data/SELECT' );
- const { value: apiFetchAction } = fulfillment.next( {} );
- expect( apiFetchAction.request ).toEqual( {
+ const result = await saveEntityRecord(
+ 'postType',
+ 'post',
+ post
+ )( { select, dispatch } );
+
+ expect( apiFetch ).toHaveBeenCalledTimes( 1 );
+ expect( apiFetch ).toHaveBeenCalledWith( {
path: '/wp/v2/posts',
method: 'POST',
data: post,
} );
- // Provide response and trigger action
- const updatedRecord = { ...post, id: 10 };
- const { value: received } = fulfillment.next( updatedRecord );
- expect( received ).toEqual(
- receiveEntityRecords(
- 'postType',
- 'post',
- updatedRecord,
- undefined,
- true,
- { title: 'new post' }
- )
+
+ expect( dispatch ).toHaveBeenCalledTimes( 3 );
+ expect( dispatch ).toHaveBeenCalledWith( {
+ type: 'SAVE_ENTITY_RECORD_START',
+ kind: 'postType',
+ name: 'post',
+ recordId: undefined,
+ isAutosave: false,
+ } );
+ expect( dispatch.__unstableAcquireStoreLock ).toHaveBeenCalledTimes(
+ 1
);
- expect( fulfillment.next().value.type ).toBe(
- 'SAVE_ENTITY_RECORD_FINISH'
+ expect( dispatch ).toHaveBeenCalledWith( {
+ type: 'SAVE_ENTITY_RECORD_FINISH',
+ kind: 'postType',
+ name: 'post',
+ recordId: undefined,
+ error: undefined,
+ isAutosave: false,
+ } );
+ expect( dispatch.__unstableReleaseStoreLock ).toHaveBeenCalledTimes(
+ 1
);
- // Release lock
- expect( fulfillment.next().value.type ).toEqual(
- 'MOCKED_RELEASE_LOCK'
+
+ expect( dispatch.receiveEntityRecords ).toHaveBeenCalledTimes( 1 );
+ expect( dispatch.receiveEntityRecords ).toHaveBeenCalledWith(
+ 'postType',
+ 'post',
+ updatedRecord,
+ undefined,
+ true,
+ post
);
- expect( fulfillment.next().value ).toBe( updatedRecord );
+ expect( result ).toBe( updatedRecord );
} );
it( 'triggers a PUT request for an existing record', async () => {
@@ -161,41 +190,71 @@ describe( 'saveEntityRecord', () => {
const entities = [
{ name: 'post', kind: 'postType', baseURL: '/wp/v2/posts' },
];
- const fulfillment = saveEntityRecord( 'postType', 'post', post );
- // Trigger generator
- fulfillment.next();
+ const select = {
+ getRawEntityRecord: () => post,
+ };
- // Provide entities and acquire lock
- expect( fulfillment.next( entities ).value.type ).toBe(
- 'MOCKED_ACQUIRE_LOCK'
- );
+ const dispatch = Object.assign( jest.fn(), {
+ receiveEntityRecords: jest.fn(),
+ __unstableAcquireStoreLock: jest.fn(),
+ __unstableReleaseStoreLock: jest.fn(),
+ } );
+ // Provide entities
+ dispatch.mockReturnValueOnce( entities );
- // Trigger apiFetch
- expect( fulfillment.next().value.type ).toEqual(
- 'SAVE_ENTITY_RECORD_START'
- );
- expect( fulfillment.next().value.type ).toBe( '@@data/SELECT' );
- const { value: apiFetchAction } = fulfillment.next( {} );
- expect( apiFetchAction.request ).toEqual( {
+ // Provide response
+ const updatedRecord = { ...post, id: 10 };
+ apiFetch.mockImplementation( () => {
+ return updatedRecord;
+ } );
+
+ const result = await saveEntityRecord(
+ 'postType',
+ 'post',
+ post
+ )( { select, dispatch } );
+
+ expect( apiFetch ).toHaveBeenCalledTimes( 1 );
+ expect( apiFetch ).toHaveBeenCalledWith( {
path: '/wp/v2/posts/10',
method: 'PUT',
data: post,
} );
- // Provide response and trigger action
- const { value: received } = fulfillment.next( post );
- expect( received ).toEqual(
- receiveEntityRecords( 'postType', 'post', post, undefined, true, {
- title: 'new post',
- id: 10,
- } )
+
+ expect( dispatch ).toHaveBeenCalledTimes( 3 );
+ expect( dispatch ).toHaveBeenCalledWith( {
+ type: 'SAVE_ENTITY_RECORD_START',
+ kind: 'postType',
+ name: 'post',
+ recordId: 10,
+ isAutosave: false,
+ } );
+ expect( dispatch.__unstableAcquireStoreLock ).toHaveBeenCalledTimes(
+ 1
);
- expect( fulfillment.next().value.type ).toBe(
- 'SAVE_ENTITY_RECORD_FINISH'
+ expect( dispatch ).toHaveBeenCalledWith( {
+ type: 'SAVE_ENTITY_RECORD_FINISH',
+ kind: 'postType',
+ name: 'post',
+ recordId: 10,
+ error: undefined,
+ isAutosave: false,
+ } );
+ expect( dispatch.__unstableReleaseStoreLock ).toHaveBeenCalledTimes(
+ 1
);
- // Release lock
- expect( fulfillment.next().value.type ).toEqual(
- 'MOCKED_RELEASE_LOCK'
+
+ expect( dispatch.receiveEntityRecords ).toHaveBeenCalledTimes( 1 );
+ expect( dispatch.receiveEntityRecords ).toHaveBeenCalledWith(
+ 'postType',
+ 'post',
+ updatedRecord,
+ undefined,
+ true,
+ post
);
+
+ expect( result ).toBe( updatedRecord );
} );
it( 'triggers a PUT request for an existing record with a custom key', async () => {
@@ -208,45 +267,68 @@ describe( 'saveEntityRecord', () => {
key: 'slug',
},
];
- const fulfillment = saveEntityRecord( 'root', 'postType', postType );
- // Trigger generator
- fulfillment.next();
+ const select = {
+ getRawEntityRecord: () => ( {} ),
+ };
- // Provide entities and acquire lock
- expect( fulfillment.next( entities ).value.type ).toBe(
- 'MOCKED_ACQUIRE_LOCK'
- );
+ const dispatch = Object.assign( jest.fn(), {
+ receiveEntityRecords: jest.fn(),
+ __unstableAcquireStoreLock: jest.fn(),
+ __unstableReleaseStoreLock: jest.fn(),
+ } );
+ // Provide entities
+ dispatch.mockReturnValueOnce( entities );
- // Trigger apiFetch
- expect( fulfillment.next().value.type ).toEqual(
- 'SAVE_ENTITY_RECORD_START'
- );
- expect( fulfillment.next().value.type ).toBe( '@@data/SELECT' );
- const { value: apiFetchAction } = fulfillment.next( {} );
- expect( apiFetchAction.request ).toEqual( {
+ // Provide response
+ apiFetch.mockImplementation( () => postType );
+
+ const result = await saveEntityRecord(
+ 'root',
+ 'postType',
+ postType
+ )( { select, dispatch } );
+
+ expect( apiFetch ).toHaveBeenCalledTimes( 1 );
+ expect( apiFetch ).toHaveBeenCalledWith( {
path: '/wp/v2/types/page',
method: 'PUT',
data: postType,
} );
- // Provide response and trigger action
- const { value: received } = fulfillment.next( postType );
- expect( received ).toEqual(
- receiveEntityRecords(
- 'root',
- 'postType',
- postType,
- undefined,
- true,
- { slug: 'page', title: 'Pages' }
- )
+
+ expect( dispatch ).toHaveBeenCalledTimes( 3 );
+ expect( dispatch ).toHaveBeenCalledWith( {
+ type: 'SAVE_ENTITY_RECORD_START',
+ kind: 'root',
+ name: 'postType',
+ recordId: 'page',
+ isAutosave: false,
+ } );
+ expect( dispatch.__unstableAcquireStoreLock ).toHaveBeenCalledTimes(
+ 1
);
- expect( fulfillment.next().value.type ).toBe(
- 'SAVE_ENTITY_RECORD_FINISH'
+ expect( dispatch ).toHaveBeenCalledWith( {
+ type: 'SAVE_ENTITY_RECORD_FINISH',
+ kind: 'root',
+ name: 'postType',
+ recordId: 'page',
+ error: undefined,
+ isAutosave: false,
+ } );
+ expect( dispatch.__unstableReleaseStoreLock ).toHaveBeenCalledTimes(
+ 1
);
- // Release lock
- expect( fulfillment.next().value.type ).toEqual(
- 'MOCKED_RELEASE_LOCK'
+
+ expect( dispatch.receiveEntityRecords ).toHaveBeenCalledTimes( 1 );
+ expect( dispatch.receiveEntityRecords ).toHaveBeenCalledWith(
+ 'root',
+ 'postType',
+ postType,
+ undefined,
+ true,
+ { slug: 'page', title: 'Pages' }
);
+
+ expect( result ).toBe( postType );
} );
} );
@@ -305,21 +387,7 @@ describe( 'receiveCurrentUser', () => {
describe( '__experimentalBatch', () => {
it( 'batches multiple actions together', async () => {
- const generator = __experimentalBatch(
- [
- ( { saveEntityRecord: _saveEntityRecord } ) =>
- _saveEntityRecord( 'root', 'widget', {} ),
- ( { saveEditedEntityRecord: _saveEditedEntityRecord } ) =>
- _saveEditedEntityRecord( 'root', 'widget', 123 ),
- ( { deleteEntityRecord: _deleteEntityRecord } ) =>
- _deleteEntityRecord( 'root', 'widget', 123, {} ),
- ],
- { __unstableProcessor: ( inputs ) => Promise.resolve( inputs ) }
- );
- // Run generator up to `yield getDispatch()`.
- const { value: getDispatchControl } = generator.next();
- expect( getDispatchControl ).toEqual( { type: 'GET_DISPATCH' } );
- const actions = {
+ const dispatch = {
saveEntityRecord: jest.fn(
( kind, name, record, { __unstableFetch } ) => {
__unstableFetch( {} );
@@ -339,36 +407,39 @@ describe( '__experimentalBatch', () => {
}
),
};
- const dispatch = () => actions;
- // Run generator up to `yield __unstableAwaitPromise( ... )`.
- const { value: awaitPromiseControl } = generator.next( dispatch );
- expect( actions.saveEntityRecord ).toHaveBeenCalledWith(
+
+ const results = await __experimentalBatch(
+ [
+ ( { saveEntityRecord: _saveEntityRecord } ) =>
+ _saveEntityRecord( 'root', 'widget', {} ),
+ ( { saveEditedEntityRecord: _saveEditedEntityRecord } ) =>
+ _saveEditedEntityRecord( 'root', 'widget', 123 ),
+ ( { deleteEntityRecord: _deleteEntityRecord } ) =>
+ _deleteEntityRecord( 'root', 'widget', 123, {} ),
+ ],
+ { __unstableProcessor: ( inputs ) => Promise.resolve( inputs ) }
+ )( { dispatch } );
+
+ expect( dispatch.saveEntityRecord ).toHaveBeenCalledWith(
'root',
'widget',
{},
{ __unstableFetch: expect.any( Function ) }
);
- expect( actions.saveEditedEntityRecord ).toHaveBeenCalledWith(
+ expect( dispatch.saveEditedEntityRecord ).toHaveBeenCalledWith(
'root',
'widget',
123,
{ __unstableFetch: expect.any( Function ) }
);
- expect( actions.deleteEntityRecord ).toHaveBeenCalledWith(
+ expect( dispatch.deleteEntityRecord ).toHaveBeenCalledWith(
'root',
'widget',
123,
{},
{ __unstableFetch: expect.any( Function ) }
);
- expect( awaitPromiseControl ).toEqual( {
- type: 'AWAIT_PROMISE',
- promise: expect.any( Promise ),
- } );
- // Run generator to the end.
- const { value: results } = generator.next(
- await awaitPromiseControl.promise
- );
+
expect( results ).toEqual( [
{ id: 123, created: true },
{ id: 123, updated: true },
diff --git a/packages/core-data/src/test/entities.js b/packages/core-data/src/test/entities.js
index ee56890246820..7c654b8d1732f 100644
--- a/packages/core-data/src/test/entities.js
+++ b/packages/core-data/src/test/entities.js
@@ -1,3 +1,9 @@
+/**
+ * WordPress dependencies
+ */
+import triggerFetch from '@wordpress/api-fetch';
+jest.mock( '@wordpress/api-fetch' );
+
/**
* Internal dependencies
*/
@@ -7,7 +13,6 @@ import {
getKindEntities,
prePersistPostType,
} from '../entities';
-import { addEntities } from '../actions';
describe( 'getMethodName', () => {
it( 'should return the right method name for an entity with the root kind', () => {
@@ -45,43 +50,52 @@ describe( 'getMethodName', () => {
} );
describe( 'getKindEntities', () => {
+ beforeEach( async () => {
+ triggerFetch.mockReset();
+ jest.useFakeTimers();
+ } );
+
it( 'shouldn’t do anything if the entities have already been resolved', async () => {
+ const dispatch = jest.fn();
+ const select = {
+ getEntitiesByKind: jest.fn( () => entities ),
+ };
const entities = [ { kind: 'postType' } ];
- const fulfillment = getKindEntities( 'postType' );
- // Start the generator
- fulfillment.next();
- // Provide the entities
- const end = fulfillment.next( entities );
- expect( end.done ).toBe( true );
+ await getKindEntities( 'postType' )( { dispatch, select } );
+ expect( dispatch ).not.toHaveBeenCalled();
} );
it( 'shouldn’t do anything if there no defined kind config', async () => {
- const fulfillment = getKindEntities( 'unknownKind' );
- // Start the generator
- fulfillment.next();
- // Provide no entities to continue
- const end = fulfillment.next( [] );
- expect( end.done ).toBe( true );
+ const dispatch = jest.fn();
+ const select = {
+ getEntitiesByKind: jest.fn( () => [] ),
+ };
+ await getKindEntities( 'unknownKind' )( { dispatch, select } );
+ expect( dispatch ).not.toHaveBeenCalled();
} );
it( 'should fetch and add the entities', async () => {
const fetchedEntities = [
{
- baseURL: '/wp/v2/posts',
- kind: 'postType',
- name: 'post',
+ rest_base: 'posts',
+ labels: {
+ singular_name: 'post',
+ },
},
];
- const fulfillment = getKindEntities( 'postType' );
- // Start the generator
- fulfillment.next();
- // Provide no entities to continue
- fulfillment.next( [] );
- // Fetch entities and trigger action
- const { value: action } = fulfillment.next( fetchedEntities );
- expect( action ).toEqual( addEntities( fetchedEntities ) );
- const end = fulfillment.next();
- expect( end ).toEqual( { done: true, value: fetchedEntities } );
+ const dispatch = jest.fn();
+ const select = {
+ getEntitiesByKind: jest.fn( () => [] ),
+ };
+ triggerFetch.mockImplementation( () => fetchedEntities );
+
+ await getKindEntities( 'postType' )( { dispatch, select } );
+ expect( dispatch ).toHaveBeenCalledTimes( 1 );
+ expect( dispatch.mock.calls[ 0 ][ 0 ].type ).toBe( 'ADD_ENTITIES' );
+ expect( dispatch.mock.calls[ 0 ][ 0 ].entities.length ).toBe( 1 );
+ expect( dispatch.mock.calls[ 0 ][ 0 ].entities[ 0 ].baseURL ).toBe(
+ '/wp/v2/posts'
+ );
} );
} );
diff --git a/packages/core-data/src/test/integration.js b/packages/core-data/src/test/integration.js
deleted file mode 100644
index 43fbdaeb27bd9..0000000000000
--- a/packages/core-data/src/test/integration.js
+++ /dev/null
@@ -1,264 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createRegistry, controls } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import * as actions from '../actions';
-import * as selectors from '../selectors';
-import * as resolvers from '../resolvers';
-import { store } from '../';
-
-// Mock to prevent calling window.fetch in test environment
-jest.mock( '@wordpress/data-controls', () => {
- const dataControls = jest.requireActual( '@wordpress/data-controls' );
- return {
- ...dataControls,
- apiFetch: jest.fn(),
- };
-} );
-const { apiFetch: actualApiFetch } = jest.requireActual(
- '@wordpress/data-controls'
-);
-import { apiFetch } from '@wordpress/data-controls';
-
-jest.mock( '@wordpress/api-fetch', () => {
- return {
- __esModule: true,
- default: jest.fn(),
- };
-} );
-import triggerFetch from '@wordpress/api-fetch';
-
-const runPromise = async ( promise ) => {
- jest.runAllTimers();
- await promise;
-};
-
-const runPendingPromises = async () => {
- jest.runAllTimers();
- const p = new Promise( ( resolve ) => setTimeout( resolve ) );
- jest.runAllTimers();
- await p;
-};
-
-describe( 'receiveEntityRecord', () => {
- function createTestRegistry( getEntityRecord ) {
- const registry = createRegistry();
- const initialState = {
- entities: {
- data: {},
- },
- };
- registry.register( store );
- registry.registerStore( 'test/resolution', {
- actions: {
- receiveEntityRecords: actions.receiveEntityRecords,
- *getEntityRecords( ...args ) {
- return yield controls.resolveSelect(
- 'test/resolution',
- 'getEntityRecords',
- ...args
- );
- },
- *getEntityRecord( ...args ) {
- return yield controls.resolveSelect(
- 'test/resolution',
- 'getEntityRecord',
- ...args
- );
- },
- },
- reducer: ( state = initialState ) => {
- return state;
- },
- selectors: {
- getEntityRecord: selectors.getEntityRecord,
- getEntityRecords: selectors.getEntityRecords,
- },
- resolvers: {
- getEntityRecord,
- getEntityRecords: resolvers.getEntityRecords,
- },
- } );
- return registry;
- }
-
- beforeEach( async () => {
- apiFetch.mockReset();
- triggerFetch.mockReset();
- jest.useFakeTimers();
- } );
-
- it( 'should not trigger a resolver when the requested record is available via receiveEntityRecords (default entity key).', async () => {
- const getEntityRecord = jest.fn();
- const registry = createTestRegistry( getEntityRecord );
-
- // Trigger resolution of postType records
- apiFetch.mockImplementation( () => ( {
- 2: { slug: 'test', id: 2 },
- } ) );
- await runPromise(
- registry
- .dispatch( 'test/resolution' )
- .getEntityRecords( 'root', 'site' )
- );
- jest.runAllTimers();
-
- // Select record with id = 2, it is available and should not trigger the resolver
- await runPromise(
- registry
- .dispatch( 'test/resolution' )
- .getEntityRecord( 'root', 'site', 2 )
- );
- expect( getEntityRecord ).not.toHaveBeenCalled();
-
- // Select record with id = 4, it is not available and should trigger the resolver
- await runPromise(
- registry
- .dispatch( 'test/resolution' )
- .getEntityRecord( 'root', 'site', 4 )
- );
- expect( getEntityRecord ).toHaveBeenCalled();
- } );
-
- it( 'should not trigger a resolver when the requested record is available via receiveEntityRecords (non-default entity key).', async () => {
- const getEntityRecord = jest.fn();
- const registry = createTestRegistry( getEntityRecord );
-
- // Trigger resolution of postType records
- apiFetch.mockImplementation( () => ( {
- 'test-1': { slug: 'test-1', id: 2 },
- } ) );
- await runPromise(
- registry
- .dispatch( 'test/resolution' )
- .getEntityRecords( 'root', 'taxonomy' )
- );
- jest.runAllTimers();
-
- // Select record with id = test-1, it is available and should not trigger the resolver
- await runPromise(
- registry
- .dispatch( 'test/resolution' )
- .getEntityRecord( 'root', 'taxonomy', 'test-1' )
- );
- expect( getEntityRecord ).not.toHaveBeenCalled();
-
- // Select record with id = test-2, it is not available and should trigger the resolver
- await runPromise(
- registry
- .dispatch( 'test/resolution' )
- .getEntityRecord( 'root', 'taxonomy', 'test-2' )
- );
- expect( getEntityRecord ).toHaveBeenCalled();
- } );
-} );
-
-describe( 'saveEntityRecord', () => {
- function createTestRegistry() {
- const registry = createRegistry();
- registry.register( store );
- return registry;
- }
-
- beforeEach( async () => {
- apiFetch.mockReset();
- triggerFetch.mockReset();
- jest.useFakeTimers( 'modern' );
- } );
-
- it( 'should not trigger any GET requests until POST/PUT is finished.', async () => {
- const registry = createTestRegistry();
- // Fetch post types from the API {{{
- apiFetch.mockImplementation( () => ( {
- 'post-1': { slug: 'post-1' },
- } ) );
-
- // Trigger fetch
- registry.select( 'core' ).getEntityRecords( 'root', 'postType' );
- jest.runAllTimers();
- await Promise.resolve().then( () => jest.runAllTimers() );
- expect( apiFetch ).toBeCalledTimes( 1 );
- expect( apiFetch ).toBeCalledWith( {
- path: '/wp/v2/types?context=edit',
- } );
-
- // Select fetched results, there should be no subsequent request
- apiFetch.mockReset();
- const results = registry
- .select( 'core' )
- .getEntityRecords( 'root', 'postType' );
- expect( apiFetch ).toBeCalledTimes( 0 );
- jest.runAllTimers();
- expect( apiFetch ).toBeCalledTimes( 0 );
- expect( results ).toHaveLength( 1 );
- expect( results[ 0 ].slug ).toBe( 'post-1' );
- // }}} Fetch post types from the API
-
- // Save changes
- apiFetch.mockClear();
- apiFetch.mockImplementation( actualApiFetch );
- let resolvePromise;
- triggerFetch.mockImplementation( function () {
- return new Promise( ( resolve ) => {
- resolvePromise = resolve;
- } );
- } );
- const savePromise = registry
- .dispatch( 'core' )
- .saveEntityRecord( 'root', 'postType', {
- slug: 'post-1',
- newField: 'a',
- } );
- await runPendingPromises();
-
- // There should ONLY be a single hanging API call (PUT) by this point.
- // If there have been any other requests, it is a race condition of some sorts,
- // e.g. a resolution was triggered before the save was finished.
- expect( triggerFetch ).toBeCalledTimes( 1 );
- expect( triggerFetch ).toHaveBeenCalledWith(
- expect.objectContaining( {
- method: 'PUT',
- path: '/wp/v2/types/post-1',
- data: expect.objectContaining( {
- newField: 'a',
- slug: 'post-1',
- } ),
- } )
- );
- triggerFetch.mockClear();
- apiFetch.mockClear();
-
- // The PUT is still hanging, let's call a selector now and make sure it won't trigger
- // any requests
- registry.select( 'core' ).getEntityRecords( 'root', 'postType' );
- jest.runAllTimers();
- expect( triggerFetch ).toBeCalledTimes( 0 );
-
- // Now that all timers are exhausted, let's resolve the PUT request and wait until the
- // save is complete
- resolvePromise( { newField: 'a', slug: 'post-1' } );
-
- // Run selector and make sure it doesn't trigger any requests just yet
- registry.select( 'core' ).getEntityRecords( 'root', 'postType' );
- jest.runAllTimers();
- expect( triggerFetch ).toBeCalledTimes( 0 );
-
- const newRecord = await savePromise;
- expect( newRecord ).toEqual( { newField: 'a', slug: 'post-1' } );
- // There should be no other API calls just because saving succeeded
- jest.runAllTimers();
- expect( triggerFetch ).toBeCalledTimes( 0 );
-
- // Calling the selector after the save is finished should trigger a resolver and a GET request
- registry.select( 'core' ).getEntityRecords( 'root', 'postType' );
- await runPendingPromises();
- expect( triggerFetch ).toBeCalledTimes( 1 );
- expect( triggerFetch ).toBeCalledWith( {
- path: '/wp/v2/types?context=edit',
- } );
- } );
-} );
diff --git a/packages/core-data/src/test/resolvers.js b/packages/core-data/src/test/resolvers.js
index 0cb095dc5fb87..f5be29cb1543d 100644
--- a/packages/core-data/src/test/resolvers.js
+++ b/packages/core-data/src/test/resolvers.js
@@ -1,7 +1,9 @@
/**
* WordPress dependencies
*/
-import { apiFetch } from '@wordpress/data-controls';
+import triggerFetch from '@wordpress/api-fetch';
+
+jest.mock( '@wordpress/api-fetch' );
/**
* Internal dependencies
@@ -14,26 +16,6 @@ import {
getAutosaves,
getCurrentUser,
} from '../resolvers';
-import {
- receiveEntityRecords,
- receiveEmbedPreview,
- receiveUserPermission,
- receiveAutosaves,
- receiveCurrentUser,
-} from '../actions';
-
-jest.mock( '../locks/actions', () => ( {
- __unstableAcquireStoreLock: jest.fn( () => [
- {
- type: 'MOCKED_ACQUIRE_LOCK',
- },
- ] ),
- __unstableReleaseStoreLock: jest.fn( () => [
- {
- type: 'MOCKED_RELEASE_LOCK',
- },
- ] ),
-} ) );
describe( 'getEntityRecord', () => {
const POST_TYPE = { slug: 'post' };
@@ -45,28 +27,44 @@ describe( 'getEntityRecord', () => {
baseURLParams: { context: 'edit' },
},
];
+ beforeEach( async () => {
+ triggerFetch.mockReset();
+ jest.useFakeTimers();
+ } );
it( 'yields with requested post type', async () => {
- const fulfillment = getEntityRecord( 'root', 'postType', 'post' );
- // Trigger generator
- fulfillment.next();
- // Provide entities and acquire lock
- expect( fulfillment.next( ENTITIES ).value.type ).toEqual(
- 'MOCKED_ACQUIRE_LOCK'
- );
- // trigger apiFetch
- const { value: apiFetchAction } = fulfillment.next();
- expect( apiFetchAction.request ).toEqual( {
+ const dispatch = Object.assign( jest.fn(), {
+ receiveEntityRecords: jest.fn(),
+ __unstableAcquireStoreLock: jest.fn(),
+ __unstableReleaseStoreLock: jest.fn(),
+ } );
+ // Provide entities
+ dispatch.mockReturnValueOnce( ENTITIES );
+
+ // Provide response
+ triggerFetch.mockImplementation( () => POST_TYPE );
+
+ await getEntityRecord( 'root', 'postType', 'post' )( { dispatch } );
+
+ // Fetch request should have been issued
+ expect( triggerFetch ).toHaveBeenCalledWith( {
path: '/wp/v2/types/post?context=edit',
} );
- // Provide response and trigger action
- const { value: received } = fulfillment.next( POST_TYPE );
- expect( received ).toEqual(
- receiveEntityRecords( 'root', 'postType', POST_TYPE )
+
+ // The record should have been received
+ expect( dispatch.receiveEntityRecords ).toHaveBeenCalledWith(
+ 'root',
+ 'postType',
+ POST_TYPE,
+ undefined
);
- // Release lock
- expect( fulfillment.next().value.type ).toEqual(
- 'MOCKED_RELEASE_LOCK'
+
+ // Locks should have been acquired and released
+ expect( dispatch.__unstableAcquireStoreLock ).toHaveBeenCalledTimes(
+ 1
+ );
+ expect( dispatch.__unstableReleaseStoreLock ).toHaveBeenCalledTimes(
+ 1
);
} );
@@ -74,42 +72,54 @@ describe( 'getEntityRecord', () => {
const query = { context: 'view', _envelope: '1' };
const queryObj = { include: [ 'post' ], ...query };
- const fulfillment = getEntityRecord(
+ const select = {
+ hasEntityRecords: jest.fn( () => {} ),
+ };
+
+ const dispatch = Object.assign( jest.fn(), {
+ receiveEntityRecords: jest.fn(),
+ __unstableAcquireStoreLock: jest.fn(),
+ __unstableReleaseStoreLock: jest.fn(),
+ } );
+ // Provide entities
+ dispatch.mockReturnValueOnce( ENTITIES );
+
+ // Provide response
+ triggerFetch.mockImplementation( () => POST_TYPE );
+
+ await getEntityRecord(
'root',
'postType',
'post',
query
- );
-
- // Trigger generator
- fulfillment.next();
-
- // Provide entities and acquire lock
- expect( fulfillment.next( ENTITIES ).value.type ).toEqual(
- 'MOCKED_ACQUIRE_LOCK'
- );
+ )( { dispatch, select } );
// Check resolution cache for an existing entity that fulfills the request with query
- const {
- value: { args: selectArgs },
- } = fulfillment.next();
- expect( selectArgs ).toEqual( [ 'root', 'postType', queryObj ] );
+ expect( select.hasEntityRecords ).toHaveBeenCalledWith(
+ 'root',
+ 'postType',
+ queryObj
+ );
// Trigger apiFetch, test that the query is present in the url
- const { value: apiFetchAction } = fulfillment.next();
- expect( apiFetchAction.request ).toEqual( {
+ expect( triggerFetch ).toHaveBeenCalledWith( {
path: '/wp/v2/types/post?context=view&_envelope=1',
} );
- // Receive response
- const { value: received } = fulfillment.next( POST_TYPE );
- expect( received ).toEqual(
- receiveEntityRecords( 'root', 'postType', POST_TYPE, queryObj )
+ // The record should have been received
+ expect( dispatch.receiveEntityRecords ).toHaveBeenCalledWith(
+ 'root',
+ 'postType',
+ POST_TYPE,
+ queryObj
);
- // Release lock
- expect( fulfillment.next().value.type ).toEqual(
- 'MOCKED_RELEASE_LOCK'
+ // Locks should have been acquired and released
+ expect( dispatch.__unstableAcquireStoreLock ).toHaveBeenCalledTimes(
+ 1
+ );
+ expect( dispatch.__unstableReleaseStoreLock ).toHaveBeenCalledTimes(
+ 1
);
} );
} );
@@ -134,71 +144,97 @@ describe( 'getEntityRecords', () => {
},
];
- it( 'yields with requested post type', async () => {
- const fulfillment = getEntityRecords( 'root', 'postType' );
+ beforeEach( async () => {
+ triggerFetch.mockReset();
+ jest.useFakeTimers();
+ } );
- // Trigger generator
- fulfillment.next();
+ it( 'dispatches the requested post type', async () => {
+ const dispatch = Object.assign( jest.fn(), {
+ receiveEntityRecords: jest.fn(),
+ __unstableAcquireStoreLock: jest.fn(),
+ __unstableReleaseStoreLock: jest.fn(),
+ } );
+ // Provide entities
+ dispatch.mockReturnValueOnce( ENTITIES );
- // Provide entities and acquire lock
- fulfillment.next( ENTITIES );
+ // Provide response
+ triggerFetch.mockImplementation( () => POST_TYPES );
- // trigger apiFetch
- const { value: apiFetchAction } = fulfillment.next();
+ await getEntityRecords( 'root', 'postType' )( { dispatch } );
- expect( apiFetchAction.request ).toEqual( {
+ // Fetch request should have been issued
+ expect( triggerFetch ).toHaveBeenCalledWith( {
path: '/wp/v2/types?context=edit',
} );
- // Provide response and trigger action
- const { value: received } = fulfillment.next( POST_TYPES );
- expect( received ).toEqual(
- receiveEntityRecords(
- 'root',
- 'postType',
- Object.values( POST_TYPES ),
- {}
- )
+
+ // The record should have been received
+ expect( dispatch.receiveEntityRecords ).toHaveBeenCalledWith(
+ 'root',
+ 'postType',
+ Object.values( POST_TYPES ),
+ {}
);
} );
it( 'Uses state locks', async () => {
- const fulfillment = getEntityRecords( 'root', 'postType' );
+ const dispatch = Object.assign( jest.fn(), {
+ receiveEntityRecords: jest.fn(),
+ __unstableAcquireStoreLock: jest.fn(),
+ __unstableReleaseStoreLock: jest.fn(),
+ } );
+ // Provide entities
+ dispatch.mockReturnValueOnce( ENTITIES );
- // Repeat the steps from `yields with requested post type` test
- fulfillment.next();
- // Provide entities and acquire lock
- expect( fulfillment.next( ENTITIES ).value.type ).toEqual(
- 'MOCKED_ACQUIRE_LOCK'
- );
- fulfillment.next();
- fulfillment.next( POST_TYPES );
+ // Provide response
+ triggerFetch.mockImplementation( () => POST_TYPES );
- // Resolve specific entity records
- fulfillment.next();
- fulfillment.next();
+ await getEntityRecords( 'root', 'postType' )( { dispatch } );
- // Release lock
- expect( fulfillment.next().value.type ).toEqual(
- 'MOCKED_RELEASE_LOCK'
+ // Fetch request should have been issued
+ expect( triggerFetch ).toHaveBeenCalledWith( {
+ path: '/wp/v2/types?context=edit',
+ } );
+
+ // The record should have been received
+ expect(
+ dispatch.__unstableAcquireStoreLock
+ ).toHaveBeenCalledWith(
+ 'core',
+ [ 'entities', 'data', 'root', 'postType' ],
+ { exclusive: false }
+ );
+ expect( dispatch.__unstableReleaseStoreLock ).toHaveBeenCalledTimes(
+ 1
);
} );
it( 'marks specific entity records as resolved', async () => {
- const fulfillment = getEntityRecords( 'root', 'postType' );
+ const dispatch = Object.assign( jest.fn(), {
+ receiveEntityRecords: jest.fn(),
+ __unstableAcquireStoreLock: jest.fn(),
+ __unstableReleaseStoreLock: jest.fn(),
+ } );
+ // Provide entities
+ dispatch.mockReturnValueOnce( ENTITIES );
+
+ // Provide response
+ triggerFetch.mockImplementation( () => POST_TYPES );
+
+ await getEntityRecords( 'root', 'postType' )( { dispatch } );
- // Repeat the steps from `yields with requested post type` test
- fulfillment.next();
- fulfillment.next( ENTITIES );
- fulfillment.next();
- fulfillment.next( POST_TYPES );
+ // Fetch request should have been issued
+ expect( triggerFetch ).toHaveBeenCalledWith( {
+ path: '/wp/v2/types?context=edit',
+ } );
- // It should mark the entity record that has an ID as resolved
- expect( fulfillment.next().value ).toEqual( {
+ // The record should have been received
+ expect( dispatch ).toHaveBeenCalledWith( {
type: 'START_RESOLUTIONS',
selectorName: 'getEntityRecord',
args: [ [ ENTITIES[ 1 ].kind, ENTITIES[ 1 ].name, 2 ] ],
} );
- expect( fulfillment.next().value ).toEqual( {
+ expect( dispatch ).toHaveBeenCalledWith( {
type: 'FINISH_RESOLUTIONS',
selectorName: 'getEntityRecord',
args: [ [ ENTITIES[ 1 ].kind, ENTITIES[ 1 ].name, 2 ] ],
@@ -213,130 +249,136 @@ describe( 'getEmbedPreview', () => {
const UNEMBEDDABLE_URL = 'http://example.com/';
it( 'yields with fetched embed preview', async () => {
- const fulfillment = getEmbedPreview( EMBEDDABLE_URL );
- // Trigger generator
- fulfillment.next();
- // Provide apiFetch response and trigger Action
- const received = ( await fulfillment.next( SUCCESSFUL_EMBED_RESPONSE ) )
- .value;
- expect( received ).toEqual(
- receiveEmbedPreview( EMBEDDABLE_URL, SUCCESSFUL_EMBED_RESPONSE )
+ const dispatch = Object.assign( jest.fn(), {
+ receiveEmbedPreview: jest.fn(),
+ } );
+
+ // Provide response
+ triggerFetch.mockResolvedValue( SUCCESSFUL_EMBED_RESPONSE );
+
+ await getEmbedPreview( EMBEDDABLE_URL )( { dispatch } );
+
+ expect( dispatch.receiveEmbedPreview ).toHaveBeenCalledWith(
+ EMBEDDABLE_URL,
+ SUCCESSFUL_EMBED_RESPONSE
);
} );
it( 'yields false if the URL cannot be embedded', async () => {
- const fulfillment = getEmbedPreview( UNEMBEDDABLE_URL );
- // Trigger generator
- fulfillment.next();
- // Provide invalid response and trigger Action
- const received = ( await fulfillment.throw( { status: 404 } ) ).value;
- expect( received ).toEqual(
- receiveEmbedPreview( UNEMBEDDABLE_URL, UNEMBEDDABLE_RESPONSE )
+ const dispatch = Object.assign( jest.fn(), {
+ receiveEmbedPreview: jest.fn(),
+ } );
+
+ // Provide response
+ triggerFetch.mockRejectedValue( { status: 404 } );
+
+ await getEmbedPreview( UNEMBEDDABLE_URL )( { dispatch } );
+
+ expect( dispatch.receiveEmbedPreview ).toHaveBeenCalledWith(
+ UNEMBEDDABLE_URL,
+ UNEMBEDDABLE_RESPONSE
);
} );
} );
describe( 'canUser', () => {
- it( 'does nothing when there is an API error', () => {
- const generator = canUser( 'create', 'media' );
-
- let received = generator.next();
- expect( received.done ).toBe( false );
- expect( received.value ).toEqual(
- apiFetch( {
- path: '/wp/v2/media',
- method: 'OPTIONS',
- parse: false,
- } )
+ beforeEach( async () => {
+ triggerFetch.mockReset();
+ } );
+
+ it( 'does nothing when there is an API error', async () => {
+ const dispatch = Object.assign( jest.fn(), {
+ receiveUserPermission: jest.fn(),
+ } );
+
+ triggerFetch.mockImplementation( () =>
+ Promise.reject( { status: 404 } )
);
- received = generator.throw( { status: 404 } );
- expect( received.done ).toBe( true );
- expect( received.value ).toBeUndefined();
+ await canUser( 'create', 'media' )( { dispatch } );
+
+ expect( triggerFetch ).toHaveBeenCalledWith( {
+ path: '/wp/v2/media',
+ method: 'OPTIONS',
+ parse: false,
+ } );
+
+ expect( dispatch.receiveUserPermission ).not.toHaveBeenCalled();
} );
- it( 'receives false when the user is not allowed to perform an action', () => {
- const generator = canUser( 'create', 'media' );
-
- let received = generator.next();
- expect( received.done ).toBe( false );
- expect( received.value ).toEqual(
- apiFetch( {
- path: '/wp/v2/media',
- method: 'OPTIONS',
- parse: false,
- } )
- );
+ it( 'receives false when the user is not allowed to perform an action', async () => {
+ const dispatch = Object.assign( jest.fn(), {
+ receiveUserPermission: jest.fn(),
+ } );
- received = generator.next( {
+ triggerFetch.mockImplementation( () => ( {
headers: {
Allow: 'GET',
},
+ } ) );
+
+ await canUser( 'create', 'media' )( { dispatch } );
+
+ expect( triggerFetch ).toHaveBeenCalledWith( {
+ path: '/wp/v2/media',
+ method: 'OPTIONS',
+ parse: false,
} );
- expect( received.done ).toBe( false );
- expect( received.value ).toEqual(
- receiveUserPermission( 'create/media', false )
- );
- received = generator.next();
- expect( received.done ).toBe( true );
- expect( received.value ).toBeUndefined();
+ expect( dispatch.receiveUserPermission ).toHaveBeenCalledWith(
+ 'create/media',
+ false
+ );
} );
- it( 'receives true when the user is allowed to perform an action', () => {
- const generator = canUser( 'create', 'media' );
-
- let received = generator.next();
- expect( received.done ).toBe( false );
- expect( received.value ).toEqual(
- apiFetch( {
- path: '/wp/v2/media',
- method: 'OPTIONS',
- parse: false,
- } )
- );
+ it( 'receives true when the user is allowed to perform an action', async () => {
+ const dispatch = Object.assign( jest.fn(), {
+ receiveUserPermission: jest.fn(),
+ } );
- received = generator.next( {
+ triggerFetch.mockImplementation( () => ( {
headers: {
Allow: 'POST, GET, PUT, DELETE',
},
+ } ) );
+
+ await canUser( 'create', 'media' )( { dispatch } );
+
+ expect( triggerFetch ).toHaveBeenCalledWith( {
+ path: '/wp/v2/media',
+ method: 'OPTIONS',
+ parse: false,
} );
- expect( received.done ).toBe( false );
- expect( received.value ).toEqual(
- receiveUserPermission( 'create/media', true )
- );
- received = generator.next();
- expect( received.done ).toBe( true );
- expect( received.value ).toBeUndefined();
+ expect( dispatch.receiveUserPermission ).toHaveBeenCalledWith(
+ 'create/media',
+ true
+ );
} );
- it( 'receives true when the user is allowed to perform an action on a specific resource', () => {
- const generator = canUser( 'update', 'blocks', 123 );
-
- let received = generator.next();
- expect( received.done ).toBe( false );
- expect( received.value ).toEqual(
- apiFetch( {
- path: '/wp/v2/blocks/123',
- method: 'GET',
- parse: false,
- } )
- );
+ it( 'receives true when the user is allowed to perform an action on a specific resource', async () => {
+ const dispatch = Object.assign( jest.fn(), {
+ receiveUserPermission: jest.fn(),
+ } );
- received = generator.next( {
+ triggerFetch.mockImplementation( () => ( {
headers: {
Allow: 'POST, GET, PUT, DELETE',
},
+ } ) );
+
+ await canUser( 'create', 'blocks', 123 )( { dispatch } );
+
+ expect( triggerFetch ).toHaveBeenCalledWith( {
+ path: '/wp/v2/blocks/123',
+ method: 'GET',
+ parse: false,
} );
- expect( received.done ).toBe( false );
- expect( received.value ).toEqual(
- receiveUserPermission( 'update/blocks/123', true )
- );
- received = generator.next();
- expect( received.done ).toBe( true );
- expect( received.value ).toBeUndefined();
+ expect( dispatch.receiveUserPermission ).toHaveBeenCalledWith(
+ 'create/blocks/123',
+ true
+ );
} );
} );
@@ -349,28 +391,31 @@ describe( 'getAutosaves', () => {
},
];
+ beforeEach( async () => {
+ triggerFetch.mockReset();
+ } );
+
it( 'yields with fetched autosaves', async () => {
const postType = 'post';
const postId = 1;
const restBase = 'posts';
const postEntity = { rest_base: restBase };
- const fulfillment = getAutosaves( postType, postId );
- // Trigger generator
- fulfillment.next();
+ triggerFetch.mockImplementation( () => SUCCESSFUL_RESPONSE );
+ const dispatch = Object.assign( jest.fn(), {
+ receiveAutosaves: jest.fn(),
+ } );
+ const resolveSelect = Object.assign( jest.fn(), {
+ getPostType: jest.fn( () => postEntity ),
+ } );
+ await getAutosaves( postType, postId )( { dispatch, resolveSelect } );
- // Trigger generator with the postEntity and assert that correct path is formed
- // in the apiFetch request.
- const { value: apiFetchAction } = fulfillment.next( postEntity );
- expect( apiFetchAction.request ).toEqual( {
+ expect( triggerFetch ).toHaveBeenCalledWith( {
path: `/wp/v2/${ restBase }/${ postId }/autosaves?context=edit`,
} );
-
- // Provide apiFetch response and trigger Action
- const received = ( await fulfillment.next( SUCCESSFUL_RESPONSE ) )
- .value;
- expect( received ).toEqual(
- receiveAutosaves( 1, SUCCESSFUL_RESPONSE )
+ expect( dispatch.receiveAutosaves ).toHaveBeenCalledWith(
+ 1,
+ SUCCESSFUL_RESPONSE
);
} );
@@ -379,21 +424,20 @@ describe( 'getAutosaves', () => {
const postId = 1;
const restBase = 'posts';
const postEntity = { rest_base: restBase };
- const fulfillment = getAutosaves( postType, postId );
- // Trigger generator
- fulfillment.next();
+ triggerFetch.mockImplementation( () => [] );
+ const dispatch = Object.assign( jest.fn(), {
+ receiveAutosaves: jest.fn(),
+ } );
+ const resolveSelect = Object.assign( jest.fn(), {
+ getPostType: jest.fn( () => postEntity ),
+ } );
+ await getAutosaves( postType, postId )( { dispatch, resolveSelect } );
- // Trigger generator with the postEntity and assert that correct path is formed
- // in the apiFetch request.
- const { value: apiFetchAction } = fulfillment.next( postEntity );
- expect( apiFetchAction.request ).toEqual( {
+ expect( triggerFetch ).toHaveBeenCalledWith( {
path: `/wp/v2/${ restBase }/${ postId }/autosaves?context=edit`,
} );
-
- // Provide apiFetch response and trigger Action
- const received = ( await fulfillment.next( [] ) ).value;
- expect( received ).toBeUndefined();
+ expect( dispatch.receiveAutosaves ).not.toHaveBeenCalled();
} );
} );
@@ -403,14 +447,17 @@ describe( 'getCurrentUser', () => {
};
it( 'yields with fetched user', async () => {
- const fulfillment = getCurrentUser();
+ const dispatch = Object.assign( jest.fn(), {
+ receiveCurrentUser: jest.fn(),
+ } );
- // Trigger generator
- fulfillment.next();
+ // Provide response
+ triggerFetch.mockResolvedValue( SUCCESSFUL_RESPONSE );
- // Provide apiFetch response and trigger Action
- const received = ( await fulfillment.next( SUCCESSFUL_RESPONSE ) )
- .value;
- expect( received ).toEqual( receiveCurrentUser( SUCCESSFUL_RESPONSE ) );
+ await getCurrentUser()( { dispatch } );
+
+ expect( dispatch.receiveCurrentUser ).toHaveBeenCalledWith(
+ SUCCESSFUL_RESPONSE
+ );
} );
} );
diff --git a/packages/core-data/src/test/selectors.js b/packages/core-data/src/test/selectors.js
index 586d39985e0c5..f76d60a09a4ab 100644
--- a/packages/core-data/src/test/selectors.js
+++ b/packages/core-data/src/test/selectors.js
@@ -11,6 +11,7 @@ import {
__experimentalGetEntityRecordNoResolver,
hasEntityRecords,
getEntityRecords,
+ getRawEntityRecord,
__experimentalGetDirtyEntityRecords,
__experimentalGetEntitiesBeingSaved,
getEntityRecordNonTransientEdits,
@@ -204,6 +205,76 @@ describe( 'hasEntityRecords', () => {
} );
} );
+describe( 'getRawEntityRecord', () => {
+ const data = {
+ someKind: {
+ someName: {
+ queriedData: {
+ items: {
+ default: {
+ post: {
+ title: {
+ raw: { html: 'post
' },
+ rendered:
+ 'rendered post
',
+ },
+ },
+ },
+ },
+ itemIsComplete: {
+ default: {
+ post: true,
+ },
+ },
+ queries: {},
+ },
+ },
+ },
+ };
+ it( 'should preserve the structure of `raw` field by default', () => {
+ const state = deepFreeze( {
+ entities: {
+ config: [
+ {
+ kind: 'someKind',
+ name: 'someName',
+ },
+ ],
+ data: { ...data },
+ },
+ } );
+ expect(
+ getRawEntityRecord( state, 'someKind', 'someName', 'post' )
+ ).toEqual( {
+ title: {
+ raw: { html: 'post
' },
+ rendered: 'rendered post
',
+ },
+ } );
+ } );
+ it( 'should flatten the structure of `raw` field for entities configured with rawAttributes', () => {
+ const state = deepFreeze( {
+ entities: {
+ config: [
+ {
+ kind: 'someKind',
+ name: 'someName',
+ rawAttributes: [ 'title' ],
+ },
+ ],
+ data: { ...data },
+ },
+ } );
+ expect(
+ getRawEntityRecord( state, 'someKind', 'someName', 'post' )
+ ).toEqual( {
+ title: {
+ html: 'post
',
+ },
+ } );
+ } );
+} );
+
describe( 'getEntityRecords', () => {
it( 'should return null by default', () => {
const state = deepFreeze( {
diff --git a/packages/core-data/src/utils/if-not-resolved.js b/packages/core-data/src/utils/if-not-resolved.js
index 0baf36f0e5d8d..653827cdfe6c0 100644
--- a/packages/core-data/src/utils/if-not-resolved.js
+++ b/packages/core-data/src/utils/if-not-resolved.js
@@ -1,13 +1,3 @@
-/**
- * WordPress dependencies
- */
-import { controls } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { STORE_NAME } from '../name';
-
/**
* Higher-order function which invokes the given resolver only if it has not
* already been resolved with the arguments passed to the enhanced function.
@@ -20,21 +10,13 @@ import { STORE_NAME } from '../name';
*
* @return {Function} Enhanced resolver.
*/
-const ifNotResolved = ( resolver, selectorName ) =>
- /**
- * @param {...any} args Original resolver arguments.
- */
- function* resolveIfNotResolved( ...args ) {
- const hasStartedResolution = yield controls.select(
- STORE_NAME,
- 'hasStartedResolution',
- selectorName,
- args
- );
-
- if ( ! hasStartedResolution ) {
- yield* resolver( ...args );
- }
- };
+const ifNotResolved = ( resolver, selectorName ) => ( ...args ) => async ( {
+ select,
+ dispatch,
+} ) => {
+ if ( ! select.hasStartedResolution( selectorName, args ) ) {
+ await dispatch( resolver( ...args ) );
+ }
+};
export default ifNotResolved;
diff --git a/packages/core-data/src/utils/index.js b/packages/core-data/src/utils/index.js
index 05e8d73bf7630..a4f4bf81373cd 100644
--- a/packages/core-data/src/utils/index.js
+++ b/packages/core-data/src/utils/index.js
@@ -5,3 +5,4 @@ export { default as ifNotResolved } from './if-not-resolved';
export { default as onSubKey } from './on-sub-key';
export { default as replaceAction } from './replace-action';
export { default as withWeakMapCache } from './with-weak-map-cache';
+export { default as isRawAttribute } from './is-raw-attribute';
diff --git a/packages/core-data/src/utils/is-raw-attribute.js b/packages/core-data/src/utils/is-raw-attribute.js
new file mode 100644
index 0000000000000..f8e8d4de359a4
--- /dev/null
+++ b/packages/core-data/src/utils/is-raw-attribute.js
@@ -0,0 +1,11 @@
+/**
+ * Checks whether the attribute is a "raw" attribute or not.
+ *
+ * @param {Object} entity Entity data.
+ * @param {string} attribute Attribute name.
+ *
+ * @return {boolean} Is the attribute raw
+ */
+export default function isRawAttribute( entity, attribute ) {
+ return ( entity.rawAttributes || [] ).includes( attribute );
+}
diff --git a/packages/core-data/src/utils/test/if-not-resolved.js b/packages/core-data/src/utils/test/if-not-resolved.js
index a773097d70514..291e224b3833c 100644
--- a/packages/core-data/src/utils/test/if-not-resolved.js
+++ b/packages/core-data/src/utils/test/if-not-resolved.js
@@ -27,49 +27,50 @@ describe( 'ifNotResolved', () => {
expect( resolver ).toBeInstanceOf( Function );
} );
- it( 'triggers original resolver if not already resolved', () => {
- controls.select.mockImplementation( ( _storeKey, selectorName ) => ( {
- _nextValue:
- selectorName === 'hasStartedResolution' ? false : undefined,
- } ) );
+ it( 'triggers original resolver if not already resolved', async () => {
+ const select = { hasStartedResolution: () => false };
+ const dispatch = () => {};
const originalResolver = jest
.fn()
- .mockImplementation( function* () {} );
+ .mockImplementation( async function () {} );
const resolver = ifNotResolved( originalResolver, 'originalResolver' );
-
- const runResolver = resolver();
-
- let next, nextValue;
- do {
- next = runResolver.next( nextValue );
- nextValue = next.value?._nextValue;
- } while ( ! next.done );
+ await resolver()( { select, dispatch } );
expect( originalResolver ).toHaveBeenCalledTimes( 1 );
} );
- it( 'does not trigger original resolver if already resolved', () => {
- controls.select.mockImplementation( ( _storeKey, selectorName ) => ( {
- _nextValue:
- selectorName === 'hasStartedResolution' ? true : undefined,
- } ) );
+ it( 'does not trigger original resolver if already resolved', async () => {
+ const select = { hasStartedResolution: () => true };
+ const dispatch = () => {};
const originalResolver = jest
.fn()
- .mockImplementation( function* () {} );
+ .mockImplementation( async function () {} );
const resolver = ifNotResolved( originalResolver, 'originalResolver' );
+ await resolver()( { select, dispatch } );
+
+ expect( originalResolver ).toHaveBeenCalledTimes( 0 );
+ } );
- const runResolver = resolver();
+ it( 'returns a promise when the resolver was not already resolved', async () => {
+ const select = { hasStartedResolution: () => false };
+ let thunkRetval;
+ const dispatch = jest.fn( ( thunk ) => {
+ thunkRetval = thunk();
+ return thunkRetval;
+ } );
- let next, nextValue;
- do {
- next = runResolver.next( nextValue );
- nextValue = next.value?._nextValue;
- } while ( ! next.done );
+ const originalResolver = jest.fn( () => () =>
+ Promise.resolve( 'success!' )
+ );
- expect( originalResolver ).toHaveBeenCalledTimes( 0 );
+ const resolver = ifNotResolved( originalResolver, 'originalResolver' );
+ const result = resolver()( { select, dispatch } );
+
+ await expect( result ).resolves.toBe( undefined );
+ await expect( thunkRetval ).resolves.toBe( 'success!' );
} );
} );
diff --git a/packages/core-data/src/utils/test/is-raw-attribute.js b/packages/core-data/src/utils/test/is-raw-attribute.js
new file mode 100644
index 0000000000000..545fd7c84286f
--- /dev/null
+++ b/packages/core-data/src/utils/test/is-raw-attribute.js
@@ -0,0 +1,22 @@
+/**
+ * Internal dependencies
+ */
+import { isRawAttribute } from '../';
+
+describe( 'isRawAttribute', () => {
+ it( 'should correctly assess that the attribute is not raw', () => {
+ const entity = {
+ kind: 'someKind',
+ name: 'someName',
+ };
+ expect( isRawAttribute( entity, 'title' ) ).toBe( false );
+ } );
+ it( 'should correctly assess that the attribute is raw', () => {
+ const entity = {
+ kind: 'someKind',
+ name: 'someName',
+ rawAttributes: [ 'title' ],
+ };
+ expect( isRawAttribute( entity, 'title' ) ).toBe( true );
+ } );
+} );
diff --git a/packages/customize-widgets/package.json b/packages/customize-widgets/package.json
index 1be81999fee62..ae7260f507fe3 100644
--- a/packages/customize-widgets/package.json
+++ b/packages/customize-widgets/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/customize-widgets",
- "version": "2.0.0",
+ "version": "2.0.1",
"description": "Widgets blocks in Customizer Module for WordPress.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/customize-widgets/src/controls/inspector-section.js b/packages/customize-widgets/src/controls/inspector-section.js
index b6cb32ccf9c8d..48b574a65ea15 100644
--- a/packages/customize-widgets/src/controls/inspector-section.js
+++ b/packages/customize-widgets/src/controls/inspector-section.js
@@ -16,6 +16,9 @@ export default function getInspectorSection() {
'customize-widgets-layout__inspector'
);
}
+ isContextuallyActive() {
+ return this.active();
+ }
onChangeExpanded( expanded, args ) {
super.onChangeExpanded( expanded, args );
diff --git a/packages/customize-widgets/src/controls/sidebar-section.js b/packages/customize-widgets/src/controls/sidebar-section.js
index a30f4c242b035..e78c47f94f351 100644
--- a/packages/customize-widgets/src/controls/sidebar-section.js
+++ b/packages/customize-widgets/src/controls/sidebar-section.js
@@ -36,6 +36,9 @@ export default function getSidebarSection() {
'customize-widgets__sidebar-section'
);
}
+ isContextuallyActive() {
+ return this.active();
+ }
hasSubSectionOpened() {
return this.inspector.expanded();
}
diff --git a/packages/customize-widgets/src/index.js b/packages/customize-widgets/src/index.js
index 8751caab3a811..ef93ba1264c8b 100644
--- a/packages/customize-widgets/src/index.js
+++ b/packages/customize-widgets/src/index.js
@@ -10,6 +10,7 @@ import {
import {
registerLegacyWidgetBlock,
registerLegacyWidgetVariations,
+ registerWidgetGroupBlock,
} from '@wordpress/widgets';
import { setFreeformContentHandlerName } from '@wordpress/blocks';
import { dispatch } from '@wordpress/data';
@@ -56,6 +57,7 @@ export function initialize( editorName, blockEditorSettings ) {
} );
}
registerLegacyWidgetVariations( blockEditorSettings );
+ registerWidgetGroupBlock();
// As we are unregistering `core/freeform` to avoid the Classic block, we must
// replace it with something as the default freeform content handler. Failure to
diff --git a/packages/data-controls/package.json b/packages/data-controls/package.json
index 7407d97bfb2c0..4b132809bea52 100644
--- a/packages/data-controls/package.json
+++ b/packages/data-controls/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/data-controls",
- "version": "2.2.1",
+ "version": "2.2.2",
"description": "A set of common controls for the @wordpress/data api.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/data/package.json b/packages/data/package.json
index ddd920360f30e..7d3fa835579db 100644
--- a/packages/data/package.json
+++ b/packages/data/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/data",
- "version": "6.0.0",
+ "version": "6.0.1",
"description": "Data module for WordPress.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/data/src/plugins/persistence/index.js b/packages/data/src/plugins/persistence/index.js
index f22e135100f16..24baf115aa1dc 100644
--- a/packages/data/src/plugins/persistence/index.js
+++ b/packages/data/src/plugins/persistence/index.js
@@ -285,6 +285,7 @@ persistencePlugin.__unstableMigrate = ( pluginOptions ) => {
persistence,
'core/customize-widgets'
);
+ migrateFeaturePreferencesToInterfaceStore( persistence, 'core/edit-post' );
};
export default persistencePlugin;
diff --git a/packages/dom/package.json b/packages/dom/package.json
index 3adff09388c9e..918415ad3d5fe 100644
--- a/packages/dom/package.json
+++ b/packages/dom/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/dom",
- "version": "3.2.1",
+ "version": "3.2.2",
"description": "DOM utilities module for WordPress.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/dom/src/dom/caret-range-from-point.js b/packages/dom/src/dom/caret-range-from-point.js
index fb32c15f0f975..8839e0861f0ab 100644
--- a/packages/dom/src/dom/caret-range-from-point.js
+++ b/packages/dom/src/dom/caret-range-from-point.js
@@ -4,9 +4,9 @@
*
* @see https://developer.mozilla.org/en-US/docs/Web/API/Document/caretRangeFromPoint
*
- * @param {Document} doc The document of the range.
- * @param {number} x Horizontal position within the current viewport.
- * @param {number} y Vertical position within the current viewport.
+ * @param {DocumentMaybeWithCaretPositionFromPoint} doc The document of the range.
+ * @param {number} x Horizontal position within the current viewport.
+ * @param {number} y Vertical position within the current viewport.
*
* @return {Range | null} The best range for the given point.
*/
@@ -34,3 +34,8 @@ export default function caretRangeFromPoint( doc, x, y ) {
return range;
}
+
+/**
+ * @typedef {{caretPositionFromPoint?: (x: number, y: number)=> CaretPosition | null} & Document } DocumentMaybeWithCaretPositionFromPoint
+ * @typedef {{ readonly offset: number; readonly offsetNode: Node; getClientRect(): DOMRect | null; }} CaretPosition
+ */
diff --git a/packages/dom/src/phrasing-content.js b/packages/dom/src/phrasing-content.js
index d233ef2eec8b4..494b7026f2b3c 100644
--- a/packages/dom/src/phrasing-content.js
+++ b/packages/dom/src/phrasing-content.js
@@ -32,7 +32,7 @@ const textContentSchema = {
s: {},
del: {},
ins: {},
- a: { attributes: [ 'href', 'target', 'rel' ] },
+ a: { attributes: [ 'href', 'target', 'rel', 'id' ] },
code: {},
abbr: { attributes: [ 'title' ] },
sub: {},
diff --git a/packages/e2e-test-utils/package.json b/packages/e2e-test-utils/package.json
index 204f11b26901b..e6ac75c7bbb06 100644
--- a/packages/e2e-test-utils/package.json
+++ b/packages/e2e-test-utils/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/e2e-test-utils",
- "version": "5.4.1",
+ "version": "5.4.2",
"description": "End-To-End (E2E) test utils for WordPress.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/e2e-tests/README.md b/packages/e2e-tests/README.md
index a322b2e40cc48..5c24e95f8a62d 100644
--- a/packages/e2e-tests/README.md
+++ b/packages/e2e-tests/README.md
@@ -10,6 +10,68 @@ Install the module
npm install @wordpress/e2e-tests --save-dev
```
+## Running tests
+
+The following commands are available on the Gutenberg repo:
+
+```json
+{
+ "test-e2e": "wp-scripts test-e2e --config packages/e2e-tests/jest.config.js",
+ "test-e2e:debug": "wp-scripts --inspect-brk test-e2e --config packages/e2e-tests/jest.config.js --puppeteer-devtools",
+ "test-e2e:watch": "npm run test-e2e -- --watch",
+}
+```
+
+### Run all available tests
+```bash
+npm run test-e2e
+```
+### Run all available tests and listen for changes.
+```bash
+npm run test-e2e:watch
+```
+
+### Run a specific test file
+```bash
+npm run test-e2e -- packages/e2e-test/
+# Or, in order to watch for changes:
+npm run test-e2e:watch -- packages/e2e-test/
+```
+### Debugging
+
+Makes e2e tests available to debug in a Chrome Browser.
+```bash
+npm run test-e2e:debug
+```
+After running the command, tests will be available for debugging in Chrome by going to chrome://inspect/#devices and clicking `inspect` under the path to `/test-e2e.js`.
+
+#### Debugging in `vscode`
+
+Debugging in a Chrome browser can be replaced with `vscode`'s debugger by adding the following configuration to `.vscode/launch.json`:
+
+```json
+{
+ "type": "node",
+ "request": "launch",
+ "name": "Debug current e2e test",
+ "program": "${workspaceRoot}/node_modules/@wordpress/scripts/bin/wp-scripts.js",
+ "args": [
+ "test-e2e",
+ "--config=${workspaceRoot}/packages/e2e-tests/jest.config.js",
+ "--verbose=true",
+ "--runInBand",
+ "--watch",
+ "${file}"
+ ],
+ "console": "integratedTerminal",
+ "internalConsoleOptions": "neverOpen",
+ "trace": "all"
+ }
+```
+
+This will run jest, targetting the spec file currently open in the editor. `vscode`'s debugger can now be used to add breakpoints and inspect tests as you would in Chrome DevTools.
+
+
**Note**: This package requires Node.js 12.0.0 or later. It is not compatible with older versions.
diff --git a/packages/e2e-tests/package.json b/packages/e2e-tests/package.json
index d7e4331cd695b..479f2331230e7 100644
--- a/packages/e2e-tests/package.json
+++ b/packages/e2e-tests/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/e2e-tests",
- "version": "2.4.0",
+ "version": "2.4.1",
"description": "End-To-End (E2E) tests for WordPress.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/e2e-tests/plugins/class-test-widget.php b/packages/e2e-tests/plugins/class-test-widget.php
index a3ae60658c0d1..11ce978257fe4 100644
--- a/packages/e2e-tests/plugins/class-test-widget.php
+++ b/packages/e2e-tests/plugins/class-test-widget.php
@@ -48,7 +48,7 @@ public function form( $instance ) {
?>
-
+
{
expect( await getEditedPostContent() ).toMatchSnapshot();
} );
+ it( 'moves focus from the link editor back to the button when escape is pressed after the URL has been submitted', async () => {
+ // Regression: https://github.com/WordPress/gutenberg/issues/34307
+ await insertBlock( 'Buttons' );
+ await pressKeyWithModifier( 'primary', 'k' );
+ await page.waitForFunction(
+ () => !! document.activeElement.closest( '.block-editor-url-input' )
+ );
+ await page.keyboard.type( 'https://example.com' );
+ await page.keyboard.press( 'Enter' );
+ await page.waitForFunction(
+ () =>
+ document.activeElement ===
+ document.querySelector(
+ '.block-editor-link-control a[href="https://example.com"]'
+ )
+ );
+ await page.keyboard.press( 'Escape' );
+
+ // Focus should move from the link control to the button block's text.
+ await page.waitForFunction(
+ () =>
+ document.activeElement ===
+ document.querySelector( '[aria-label="Button text"]' )
+ );
+
+ // The link control should still be visible when a URL is set.
+ const linkControl = await page.$( '.block-editor-link-control' );
+ expect( linkControl ).toBeTruthy();
+ } );
+
it( 'can jump to the link editor using the keyboard shortcut', async () => {
await insertBlock( 'Buttons' );
await page.keyboard.type( 'WordPress' );
diff --git a/packages/e2e-tests/specs/editor/various/a11y.test.js b/packages/e2e-tests/specs/editor/various/a11y.test.js
index a25b5d9760c3c..1c7e9fe76b4c9 100644
--- a/packages/e2e-tests/specs/editor/various/a11y.test.js
+++ b/packages/e2e-tests/specs/editor/various/a11y.test.js
@@ -15,7 +15,7 @@ describe( 'a11y', () => {
} );
it( 'tabs header bar', async () => {
- await pressKeyWithModifier( 'ctrl', '~' );
+ await pressKeyWithModifier( 'ctrl', '`' );
await page.keyboard.press( 'Tab' );
diff --git a/packages/e2e-tests/specs/editor/various/block-deletion.test.js b/packages/e2e-tests/specs/editor/various/block-deletion.test.js
index 00e239eae6959..8f79ae9eb9dc0 100644
--- a/packages/e2e-tests/specs/editor/various/block-deletion.test.js
+++ b/packages/e2e-tests/specs/editor/various/block-deletion.test.js
@@ -156,10 +156,10 @@ describe( 'deleting all blocks', () => {
await page.keyboard.type( 'Paragraph' );
await clickOnBlockSettingsMenuRemoveBlockButton();
- // There is a default block:
+ // There is a default block and post title:
expect(
await page.$$( '.block-editor-block-list__block' )
- ).toHaveLength( 1 );
+ ).toHaveLength( 2 );
// But the effective saved content is still empty:
expect( await getEditedPostContent() ).toBe( '' );
diff --git a/packages/e2e-tests/specs/editor/various/block-mover.test.js b/packages/e2e-tests/specs/editor/various/block-mover.test.js
index c3a04f6f3a6c4..e0a17fcdceeca 100644
--- a/packages/e2e-tests/specs/editor/various/block-mover.test.js
+++ b/packages/e2e-tests/specs/editor/various/block-mover.test.js
@@ -16,7 +16,7 @@ describe( 'block mover', () => {
await page.keyboard.type( 'Second Paragraph' );
// Select a block so the block mover is rendered.
- await page.focus( '.block-editor-block-list__block' );
+ await page.focus( '[data-type="core/paragraph"]' );
await showBlockToolbar();
diff --git a/packages/e2e-tests/specs/editor/various/splitting-merging.test.js b/packages/e2e-tests/specs/editor/various/splitting-merging.test.js
index 05e08db82afce..fe7a069fe1c8a 100644
--- a/packages/e2e-tests/specs/editor/various/splitting-merging.test.js
+++ b/packages/e2e-tests/specs/editor/various/splitting-merging.test.js
@@ -193,10 +193,10 @@ describe( 'splitting and merging blocks', () => {
await insertBlock( 'Paragraph' );
await page.keyboard.press( 'Backspace' );
- // There is a default block:
+ // There is a default block and post title:
expect(
await page.$$( '.block-editor-block-list__block' )
- ).toHaveLength( 1 );
+ ).toHaveLength( 2 );
// But the effective saved content is still empty:
expect( await getEditedPostContent() ).toBe( '' );
@@ -226,4 +226,50 @@ describe( 'splitting and merging blocks', () => {
expect( await getEditedPostContent() ).toMatchSnapshot();
} );
+
+ describe( 'test restore selection when merge produces more than one block', () => {
+ it( 'on forward delete', async () => {
+ await insertBlock( 'Paragraph' );
+ await page.keyboard.type( 'hi' );
+ await insertBlock( 'List' );
+ await page.keyboard.type( 'item 1' );
+ await page.keyboard.press( 'Enter' );
+ await page.keyboard.type( 'item 2' );
+ await pressKeyTimes( 'ArrowUp', 2 );
+ await page.keyboard.press( 'Delete' );
+ // Carret should be in the first block and at the proper position.
+ await page.keyboard.type( '-' );
+ expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
+ "
+ hi-item 1
+
+
+
+ item 2
+ "
+ ` );
+ } );
+ it( 'on backspace', async () => {
+ await insertBlock( 'Paragraph' );
+ await page.keyboard.type( 'hi' );
+ await insertBlock( 'List' );
+ await page.keyboard.type( 'item 1' );
+ await page.keyboard.press( 'Enter' );
+ await page.keyboard.type( 'item 2' );
+ await page.keyboard.press( 'ArrowUp' );
+ await pressKeyTimes( 'ArrowLeft', 6 );
+ await page.keyboard.press( 'Backspace' );
+ // Carret should be in the first block and at the proper position.
+ await page.keyboard.type( '-' );
+ expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
+ "
+ hi-item 1
+
+
+
+ item 2
+ "
+ ` );
+ } );
+ } );
} );
diff --git a/packages/e2e-tests/specs/experiments/__snapshots__/navigation-editor.test.js.snap b/packages/e2e-tests/specs/experiments/__snapshots__/navigation-editor.test.js.snap
index 89f22e7ad5236..82c208896c7dc 100644
--- a/packages/e2e-tests/specs/experiments/__snapshots__/navigation-editor.test.js.snap
+++ b/packages/e2e-tests/specs/experiments/__snapshots__/navigation-editor.test.js.snap
@@ -4,7 +4,7 @@ exports[`Navigation editor allows creation of a menu when there are existing men
exports[`Navigation editor allows creation of a menu when there are no current menu items 1`] = `
"
-
+
"
`;
diff --git a/packages/e2e-tests/specs/experiments/blocks/__snapshots__/navigation.test.js.snap b/packages/e2e-tests/specs/experiments/blocks/__snapshots__/navigation.test.js.snap
index 40204d478b4af..aa967c86f181d 100644
--- a/packages/e2e-tests/specs/experiments/blocks/__snapshots__/navigation.test.js.snap
+++ b/packages/e2e-tests/specs/experiments/blocks/__snapshots__/navigation.test.js.snap
@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Navigation Creating from existing Menus allows a navigation block to be created from existing menus 1`] = `
-"
+"
@@ -36,16 +36,16 @@ exports[`Navigation Creating from existing Menus allows a navigation block to be
"
`;
-exports[`Navigation Creating from existing Menus creates an empty navigation block when the selected existing menu is also empty 1`] = `""`;
+exports[`Navigation Creating from existing Menus creates an empty navigation block when the selected existing menu is also empty 1`] = `""`;
exports[`Navigation Creating from existing Pages allows a navigation block to be created using existing pages 1`] = `
-"
+"
"
`;
exports[`Navigation allows an empty navigation block to be created and manually populated using a mixture of internal and external links 1`] = `
-"
+"
@@ -53,13 +53,13 @@ exports[`Navigation allows an empty navigation block to be created and manually
`;
exports[`Navigation allows pages to be created from the navigation block and their links added to menu 1`] = `
-"
+"
"
`;
exports[`Navigation encodes URL when create block if needed 1`] = `
-"
+"
diff --git a/packages/e2e-tests/specs/experiments/navigation-editor.test.js b/packages/e2e-tests/specs/experiments/navigation-editor.test.js
index fa8bdf21d852a..972ba27eb834b 100644
--- a/packages/e2e-tests/specs/experiments/navigation-editor.test.js
+++ b/packages/e2e-tests/specs/experiments/navigation-editor.test.js
@@ -193,7 +193,18 @@ describe( 'Navigation editor', () => {
POST: menuPostResponse,
} ),
...getMenuItemMocks( { GET: [] } ),
- ...getPagesMocks( { GET: [ {} ] } ), // mock a single page
+ ...getPagesMocks( {
+ GET: [
+ {
+ type: 'page',
+ id: 1,
+ link: 'https://example.com/1',
+ title: {
+ rendered: 'My page',
+ },
+ },
+ ],
+ } ),
] );
await page.keyboard.type( 'Main Menu' );
@@ -354,7 +365,7 @@ describe( 'Navigation editor', () => {
);
await navBlock.click();
const startEmptyButton = await page.waitForXPath(
- '//button[.="Start empty"]'
+ '//button[.="Start blank"]'
);
await startEmptyButton.click();
diff --git a/packages/e2e-tests/specs/performance/post-editor.test.js b/packages/e2e-tests/specs/performance/post-editor.test.js
index 8045291cb331a..0bbfcd1866036 100644
--- a/packages/e2e-tests/specs/performance/post-editor.test.js
+++ b/packages/e2e-tests/specs/performance/post-editor.test.js
@@ -31,18 +31,18 @@ import {
jest.setTimeout( 1000000 );
describe( 'Post Editor Performance', () => {
- it( 'Loading, typing and selecting blocks', async () => {
- const traceFile = __dirname + '/trace.json';
- let traceResults;
- const results = {
- load: [],
- type: [],
- focus: [],
- inserterOpen: [],
- inserterHover: [],
- inserterSearch: [],
- };
+ const results = {
+ load: [],
+ type: [],
+ focus: [],
+ inserterOpen: [],
+ inserterHover: [],
+ inserterSearch: [],
+ };
+ const traceFile = __dirname + '/trace.json';
+ let traceResults;
+ beforeAll( async () => {
const html = readFile(
join( __dirname, '../../assets/large-post.html' )
);
@@ -63,7 +63,30 @@ describe( 'Post Editor Performance', () => {
dispatch( 'core/block-editor' ).resetBlocks( blocks );
}, html );
await saveDraft();
+ } );
+
+ afterAll( async () => {
+ const resultsFilename = basename( __filename, '.js' ) + '.results.json';
+ writeFileSync(
+ join( __dirname, resultsFilename ),
+ JSON.stringify( results, null, 2 )
+ );
+ deleteFile( traceFile );
+ } );
+ beforeEach( async () => {
+ // Disable auto-save to avoid impacting the metrics.
+ await page.evaluate( () => {
+ window.wp.data
+ .dispatch( 'core/edit-post' )
+ .__experimentalUpdateLocalAutosaveInterval( 100000000000 );
+ window.wp.data
+ .dispatch( 'core/editor' )
+ .updateEditorSettings( { autosaveInterval: 100000000000 } );
+ } );
+ } );
+
+ it( 'Loading', async () => {
// Measuring loading time
let i = 5;
while ( i-- ) {
@@ -72,7 +95,77 @@ describe( 'Post Editor Performance', () => {
await page.waitForSelector( '.wp-block' );
results.load.push( new Date() - startTime );
}
+ } );
+
+ it( 'Typing', async () => {
+ // Measuring typing performance
+ await insertBlock( 'Paragraph' );
+ let i = 20;
+ await page.tracing.start( {
+ path: traceFile,
+ screenshots: false,
+ categories: [ 'devtools.timeline' ],
+ } );
+ while ( i-- ) {
+ // Wait for the browser to be idle before starting the monitoring.
+ // The timeout should be big enough to allow all async tasks tor run.
+ // And also to allow Rich Text to mark the change as persistent.
+ // eslint-disable-next-line no-restricted-syntax
+ await page.waitForTimeout( 2000 );
+ await page.keyboard.type( 'x' );
+ }
+ await page.tracing.stop();
+ traceResults = JSON.parse( readFile( traceFile ) );
+ const [
+ keyDownEvents,
+ keyPressEvents,
+ keyUpEvents,
+ ] = getTypingEventDurations( traceResults );
+ if (
+ keyDownEvents.length === keyPressEvents.length &&
+ keyPressEvents.length === keyUpEvents.length
+ ) {
+ // The first character typed triggers a longer time (isTyping change)
+ // It can impact the stability of the metric, so we exclude it.
+ for ( let j = 1; j < keyDownEvents.length; j++ ) {
+ results.type.push(
+ keyDownEvents[ j ] + keyPressEvents[ j ] + keyUpEvents[ j ]
+ );
+ }
+ }
+ } );
+
+ it( 'Selecting blocks', async () => {
+ // Measuring block selection performance
+ await createNewPost();
+ await page.evaluate( () => {
+ const { createBlock } = window.wp.blocks;
+ const { dispatch } = window.wp.data;
+ const blocks = window.lodash
+ .times( 1000 )
+ .map( () => createBlock( 'core/paragraph' ) );
+ dispatch( 'core/block-editor' ).resetBlocks( blocks );
+ } );
+ const paragraphs = await page.$$( '.wp-block' );
+ await page.tracing.start( {
+ path: traceFile,
+ screenshots: false,
+ categories: [ 'devtools.timeline' ],
+ } );
+ await paragraphs[ 0 ].click();
+ for ( let j = 1; j <= 10; j++ ) {
+ // Wait for the browser to be idle before starting the monitoring.
+ // eslint-disable-next-line no-restricted-syntax
+ await page.waitForTimeout( 1000 );
+ await paragraphs[ j ].click();
+ }
+ await page.tracing.stop();
+ traceResults = JSON.parse( readFile( traceFile ) );
+ const [ focusEvents ] = getSelectionEventDurations( traceResults );
+ results.focus = focusEvents;
+ } );
+ it( 'Opening the inserter', async () => {
// Measure time to open inserter
await page.waitForSelector( '.edit-post-layout' );
for ( let j = 0; j < 10; j++ ) {
@@ -90,7 +183,9 @@ describe( 'Post Editor Performance', () => {
}
await closeGlobalBlockInserter();
}
+ } );
+ it( 'Searching the inserter', async () => {
// Measure time to search the inserter and get results
await openGlobalBlockInserter();
for ( let j = 0; j < 10; j++ ) {
@@ -123,7 +218,9 @@ describe( 'Post Editor Performance', () => {
await page.keyboard.press( 'Backspace' );
}
await closeGlobalBlockInserter();
+ } );
+ it( 'Hovering Inserter Items', async () => {
// Measure inserter hover performance
const paragraphBlockItem =
'.block-editor-inserter__menu .editor-block-list-item-paragraph';
@@ -157,74 +254,5 @@ describe( 'Post Editor Performance', () => {
}
}
await closeGlobalBlockInserter();
-
- // Measuring typing performance
- await insertBlock( 'Paragraph' );
- i = 20;
- await page.tracing.start( {
- path: traceFile,
- screenshots: false,
- categories: [ 'devtools.timeline' ],
- } );
- while ( i-- ) {
- // Wait for the browser to be idle before starting the monitoring.
- // eslint-disable-next-line no-restricted-syntax
- await page.waitForTimeout( 200 );
- await page.keyboard.type( 'x' );
- }
- await page.tracing.stop();
- traceResults = JSON.parse( readFile( traceFile ) );
- const [
- keyDownEvents,
- keyPressEvents,
- keyUpEvents,
- ] = getTypingEventDurations( traceResults );
- if (
- keyDownEvents.length === keyPressEvents.length &&
- keyPressEvents.length === keyUpEvents.length
- ) {
- for ( let j = 0; j < keyDownEvents.length; j++ ) {
- results.type.push(
- keyDownEvents[ j ] + keyPressEvents[ j ] + keyUpEvents[ j ]
- );
- }
- }
-
- // Measuring block selection performance
- await createNewPost();
- await page.evaluate( () => {
- const { createBlock } = window.wp.blocks;
- const { dispatch } = window.wp.data;
- const blocks = window.lodash
- .times( 1000 )
- .map( () => createBlock( 'core/paragraph' ) );
- dispatch( 'core/block-editor' ).resetBlocks( blocks );
- } );
- const paragraphs = await page.$$( '.wp-block' );
- await page.tracing.start( {
- path: traceFile,
- screenshots: false,
- categories: [ 'devtools.timeline' ],
- } );
- await paragraphs[ 0 ].click();
- for ( let j = 1; j <= 10; j++ ) {
- // Wait for the browser to be idle before starting the monitoring.
- // eslint-disable-next-line no-restricted-syntax
- await page.waitForTimeout( 200 );
- await paragraphs[ j ].click();
- }
- await page.tracing.stop();
- traceResults = JSON.parse( readFile( traceFile ) );
- const [ focusEvents ] = getSelectionEventDurations( traceResults );
- results.focus = focusEvents;
-
- const resultsFilename = basename( __filename, '.js' ) + '.results.json';
- writeFileSync(
- join( __dirname, resultsFilename ),
- JSON.stringify( results, null, 2 )
- );
- deleteFile( traceFile );
-
- expect( true ).toBe( true );
} );
} );
diff --git a/packages/e2e-tests/specs/widgets/editing-widgets.test.js b/packages/e2e-tests/specs/widgets/editing-widgets.test.js
index 728541cead9e1..a67c1575e75a4 100644
--- a/packages/e2e-tests/specs/widgets/editing-widgets.test.js
+++ b/packages/e2e-tests/specs/widgets/editing-widgets.test.js
@@ -633,12 +633,14 @@ describe( 'Widgets screen', () => {
// Wait for the Legacy Widget block's preview iframe to load.
const frame = await new Promise( ( resolve ) => {
- const checkFrame = async ( candidateFrame ) => {
- const url = await candidateFrame.url();
- if ( url.includes( 'legacy-widget-preview' ) ) {
+ const checkFrame = async () => {
+ const frameElement = await page.$(
+ 'iframe.wp-block-legacy-widget__edit-preview-iframe'
+ );
+ if ( frameElement ) {
page.off( 'frameattached', checkFrame );
page.off( 'framenavigated', checkFrame );
- resolve( candidateFrame );
+ resolve( frameElement.contentFrame() );
}
};
page.on( 'frameattached', checkFrame );
diff --git a/packages/edit-navigation/README.md b/packages/edit-navigation/README.md
index 1ee150967f869..1a405fdd4f1e2 100644
--- a/packages/edit-navigation/README.md
+++ b/packages/edit-navigation/README.md
@@ -41,6 +41,8 @@ Moreover, when the navigation is rendered on the front of the site the system co
### Block-based Mode
+**Important**: block-based mode has been temporarily ***disabled*** until it becomes stable. So, if a theme declares support for the `block-nav-menus` feature it will not affect the frontend.
+
If desired, themes are able to opt into _rendering_ complete block-based menus using the Navigation Editor. This allows for arbitrarily complex navigation block structures to be used in an existing theme whilst still ensuring the navigation data is still _saved_ to the existing (post type powered) Menus system.
Themes can opt into this behaviour by declaring:
diff --git a/packages/edit-navigation/package.json b/packages/edit-navigation/package.json
index ba871b960dfa7..caa7aeb9b9042 100644
--- a/packages/edit-navigation/package.json
+++ b/packages/edit-navigation/package.json
@@ -45,6 +45,7 @@
"@wordpress/icons": "file:../icons",
"@wordpress/interface": "file:../interface",
"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
+ "@wordpress/keycodes": "file:../keycodes",
"@wordpress/media-utils": "file:../media-utils",
"@wordpress/notices": "file:../notices",
"@wordpress/url": "file:../url",
diff --git a/packages/edit-navigation/src/components/block-placeholder/index.js b/packages/edit-navigation/src/components/block-placeholder/index.js
new file mode 100644
index 0000000000000..f4e47fa6b83dc
--- /dev/null
+++ b/packages/edit-navigation/src/components/block-placeholder/index.js
@@ -0,0 +1,187 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+import {
+ Placeholder,
+ Button,
+ DropdownMenu,
+ MenuGroup,
+ MenuItem,
+ Spinner,
+} from '@wordpress/components';
+import {
+ forwardRef,
+ useCallback,
+ useState,
+ useEffect,
+} from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { chevronDown } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { useMenuEntityProp, useSelectedMenuId } from '../../hooks';
+import useNavigationEntities from './use-navigation-entities';
+import menuItemsToBlocks from './menu-items-to-blocks';
+
+/**
+ * Convert pages to blocks.
+ *
+ * @param {Object[]} pages An array of pages.
+ *
+ * @return {WPBlock[]} An array of blocks.
+ */
+function convertPagesToBlocks( pages ) {
+ if ( ! pages?.length ) {
+ return null;
+ }
+
+ return pages.map( ( { title, type, link: url, id } ) =>
+ createBlock( 'core/navigation-link', {
+ type,
+ id,
+ url,
+ label: ! title.rendered ? __( '(no title)' ) : title.rendered,
+ opensInNewTab: false,
+ } )
+ );
+}
+
+const TOGGLE_PROPS = { variant: 'tertiary' };
+const POPOVER_PROPS = { position: 'bottom center' };
+
+function BlockPlaceholder( { onCreate }, ref ) {
+ const [ selectedMenu, setSelectedMenu ] = useState();
+ const [ isCreatingFromMenu, setIsCreatingFromMenu ] = useState( false );
+
+ const [ selectedMenuId ] = useSelectedMenuId();
+ const [ menuName ] = useMenuEntityProp( 'name', selectedMenuId );
+
+ const {
+ isResolvingPages,
+ menus,
+ isResolvingMenus,
+ menuItems,
+ hasResolvedMenuItems,
+ pages,
+ hasPages,
+ hasMenus,
+ } = useNavigationEntities( selectedMenu );
+
+ const isLoading = isResolvingPages || isResolvingMenus;
+
+ const createFromMenu = useCallback( () => {
+ const { innerBlocks: blocks } = menuItemsToBlocks( menuItems );
+ const selectNavigationBlock = true;
+ onCreate( blocks, selectNavigationBlock );
+ }, [ menuItems, menuItemsToBlocks, onCreate ] );
+
+ const onCreateFromMenu = () => {
+ // If we have menu items, create the block right away.
+ if ( hasResolvedMenuItems ) {
+ createFromMenu();
+ return;
+ }
+
+ // Otherwise, create the block when resolution finishes.
+ setIsCreatingFromMenu( true );
+ };
+
+ const onCreateEmptyMenu = () => {
+ onCreate( [] );
+ };
+
+ const onCreateAllPages = () => {
+ const blocks = convertPagesToBlocks( pages );
+ const selectNavigationBlock = true;
+ onCreate( blocks, selectNavigationBlock );
+ };
+
+ useEffect( () => {
+ // If the user selected a menu but we had to wait for menu items to
+ // finish resolving, then create the block once resolution finishes.
+ if ( isCreatingFromMenu && hasResolvedMenuItems ) {
+ createFromMenu();
+ setIsCreatingFromMenu( false );
+ }
+ }, [ isCreatingFromMenu, hasResolvedMenuItems ] );
+
+ const selectableMenus = menus?.filter(
+ ( menu ) => menu.id !== selectedMenuId
+ );
+
+ const hasSelectableMenus = !! selectableMenus?.length;
+
+ return (
+
+
+ { isLoading && (
+
+
+ { ( { onClose } ) => (
+
+ { selectableMenus.map( ( menu ) => {
+ return (
+
+ );
+ } ) }
+
+ ) }
+
+ ) : undefined }
+
+ ) }
+
+
+ );
+}
+
+export default forwardRef( BlockPlaceholder );
diff --git a/packages/edit-navigation/src/components/block-placeholder/menu-items-to-blocks.js b/packages/edit-navigation/src/components/block-placeholder/menu-items-to-blocks.js
new file mode 100644
index 0000000000000..db29190438447
--- /dev/null
+++ b/packages/edit-navigation/src/components/block-placeholder/menu-items-to-blocks.js
@@ -0,0 +1,118 @@
+/**
+ * External dependencies
+ */
+import { sortBy } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { menuItemToBlockAttributes } from '../../store/utils';
+
+/**
+ * Convert a flat menu item structure to a nested blocks structure.
+ *
+ * @param {Object[]} menuItems An array of menu items.
+ *
+ * @return {WPBlock[]} An array of blocks.
+ */
+export default function menuItemsToBlocks( menuItems ) {
+ if ( ! menuItems ) {
+ return null;
+ }
+
+ const menuTree = createDataTree( menuItems );
+ return mapMenuItemsToBlocks( menuTree );
+}
+
+/** @typedef {import('../..store/utils').WPNavMenuItem} WPNavMenuItem */
+
+/**
+ * A recursive function that maps menu item nodes to blocks.
+ *
+ * @param {WPNavMenuItem[]} menuItems An array of WPNavMenuItem items.
+ * @return {Object} Object containing innerBlocks and mapping.
+ */
+function mapMenuItemsToBlocks( menuItems ) {
+ let mapping = {};
+
+ // The menuItem should be in menu_order sort order.
+ const sortedItems = sortBy( menuItems, 'menu_order' );
+
+ const innerBlocks = sortedItems.map( ( menuItem ) => {
+ const attributes = menuItemToBlockAttributes( menuItem );
+
+ // If there are children recurse to build those nested blocks.
+ const {
+ innerBlocks: nestedBlocks = [], // alias to avoid shadowing
+ mapping: nestedMapping = {}, // alias to avoid shadowing
+ } = menuItem.children?.length
+ ? mapMenuItemsToBlocks( menuItem.children )
+ : {};
+
+ // Update parent mapping with nested mapping.
+ mapping = {
+ ...mapping,
+ ...nestedMapping,
+ };
+
+ // Create block with nested "innerBlocks".
+ const block = createBlock(
+ 'core/navigation-link',
+ attributes,
+ nestedBlocks
+ );
+
+ // Create mapping for menuItem -> block
+ mapping[ menuItem.id ] = block.clientId;
+
+ return block;
+ } );
+
+ return {
+ innerBlocks,
+ mapping,
+ };
+}
+
+/**
+ * Creates a nested, hierarchical tree representation from unstructured data that
+ * has an inherent relationship defined between individual items.
+ *
+ * For example, by default, each element in the dataset should have an `id` and
+ * `parent` property where the `parent` property indicates a relationship between
+ * the current item and another item with a matching `id` properties.
+ *
+ * This is useful for building linked lists of data from flat data structures.
+ *
+ * @param {Array} dataset linked data to be rearranged into a hierarchical tree based on relational fields.
+ * @param {string} id the property which uniquely identifies each entry within the array.
+ * @param {*} relation the property which identifies how the current item is related to other items in the data (if at all).
+ * @return {Array} a nested array of parent/child relationships
+ */
+function createDataTree( dataset, id = 'id', relation = 'parent' ) {
+ const hashTable = Object.create( null );
+ const dataTree = [];
+
+ for ( const data of dataset ) {
+ hashTable[ data[ id ] ] = {
+ ...data,
+ children: [],
+ };
+ }
+ for ( const data of dataset ) {
+ if ( data[ relation ] ) {
+ hashTable[ data[ relation ] ].children.push(
+ hashTable[ data[ id ] ]
+ );
+ } else {
+ dataTree.push( hashTable[ data[ id ] ] );
+ }
+ }
+
+ return dataTree;
+}
diff --git a/packages/edit-navigation/src/components/block-placeholder/style.scss b/packages/edit-navigation/src/components/block-placeholder/style.scss
new file mode 100644
index 0000000000000..bd9b6eab7c9a9
--- /dev/null
+++ b/packages/edit-navigation/src/components/block-placeholder/style.scss
@@ -0,0 +1,54 @@
+.edit-navigation-block-placeholder {
+ // The navigation editor already has a border around content.
+ // Hide the placeholder's border. Requires extra specificity.
+ &.edit-navigation-block-placeholder {
+ box-shadow: none;
+ background: transparent;
+
+ @include break-medium() {
+ margin: -$grid-unit-20 0;
+ }
+ }
+
+ // Show placeholder instructions when it's a medium size.
+ &.is-medium .components-placeholder__instructions {
+ display: block;
+ }
+
+ // Display buttons in a column when placeholder is small.
+ .edit-navigation-block-placeholder__actions {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+
+ .components-button {
+ margin-bottom: $grid-unit-05;
+ margin-right: 0;
+
+ // Avoid bottom margin on the dropdown since it makes the
+ // menu anchor itself too far away from the button.
+ &.components-dropdown-menu__toggle {
+ margin-bottom: 0;
+
+ svg {
+ // Make the spacing inside the left of the button match the
+ // spacing inside the right of the button.
+ margin-left: -6px;
+ }
+ }
+ }
+ }
+
+ @include break-medium() {
+ .edit-navigation-block-placeholder__actions {
+ flex-direction: row;
+ }
+
+ // Change the default button margin. Again use extra specificity.
+ &.edit-navigation-block-placeholder.is-medium .components-button {
+ margin-bottom: 0;
+ margin-right: $grid-unit-15;
+ }
+ }
+
+}
diff --git a/packages/edit-navigation/src/components/block-placeholder/use-navigation-entities.js b/packages/edit-navigation/src/components/block-placeholder/use-navigation-entities.js
new file mode 100644
index 0000000000000..17806deadd9a8
--- /dev/null
+++ b/packages/edit-navigation/src/components/block-placeholder/use-navigation-entities.js
@@ -0,0 +1,142 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * @typedef {Object} NavigationEntitiesData
+ * @property {Array|undefined} pages - a collection of WP Post entity objects of post type "Page".
+ * @property {boolean} isResolvingPages - indicates whether the request to fetch pages is currently resolving.
+ * @property {boolean} hasResolvedPages - indicates whether the request to fetch pages has finished resolving.
+ * @property {Array|undefined} menus - a collection of Menu entity objects.
+ * @property {boolean} isResolvingMenus - indicates whether the request to fetch menus is currently resolving.
+ * @property {boolean} hasResolvedMenus - indicates whether the request to fetch menus has finished resolving.
+ * @property {Array|undefined} menusItems - a collection of Menu Item entity objects for the current menuId.
+ * @property {boolean} hasResolvedMenuItems - indicates whether the request to fetch menuItems has finished resolving.
+ * @property {boolean} hasPages - indicates whether there is currently any data for pages.
+ * @property {boolean} hasMenus - indicates whether there is currently any data for menus.
+ */
+
+/**
+ * Manages fetching and resolution state for all entities required
+ * for the Navigation block.
+ *
+ * @param {number} menuId the menu for which to retrieve menuItem data.
+ * @return { NavigationEntitiesData } the entity data.
+ */
+export default function useNavigationEntities( menuId ) {
+ return {
+ ...usePageEntities(),
+ ...useMenuEntities(),
+ ...useMenuItemEntities( menuId ),
+ };
+}
+
+function useMenuEntities() {
+ const { menus, isResolvingMenus, hasResolvedMenus } = useSelect(
+ ( select ) => {
+ const { getMenus, isResolving, hasFinishedResolution } = select(
+ coreStore
+ );
+
+ const menusParameters = [ { per_page: -1 } ];
+
+ return {
+ menus: getMenus( ...menusParameters ),
+ isResolvingMenus: isResolving( 'getMenus', menusParameters ),
+ hasResolvedMenus: hasFinishedResolution(
+ 'getMenus',
+ menusParameters
+ ),
+ };
+ },
+ []
+ );
+
+ return {
+ menus,
+ isResolvingMenus,
+ hasResolvedMenus,
+ hasMenus: !! ( hasResolvedMenus && menus?.length ),
+ };
+}
+
+function useMenuItemEntities( menuId ) {
+ const { menuItems, hasResolvedMenuItems } = useSelect(
+ ( select ) => {
+ const { getMenuItems, hasFinishedResolution } = select( coreStore );
+
+ const hasSelectedMenu = menuId !== undefined;
+ const menuItemsParameters = hasSelectedMenu
+ ? [
+ {
+ menus: menuId,
+ per_page: -1,
+ },
+ ]
+ : undefined;
+
+ return {
+ menuItems: hasSelectedMenu
+ ? getMenuItems( ...menuItemsParameters )
+ : undefined,
+ hasResolvedMenuItems: hasSelectedMenu
+ ? hasFinishedResolution(
+ 'getMenuItems',
+ menuItemsParameters
+ )
+ : false,
+ };
+ },
+ [ menuId ]
+ );
+
+ return {
+ menuItems,
+ hasResolvedMenuItems,
+ };
+}
+
+function usePageEntities() {
+ const { pages, isResolvingPages, hasResolvedPages } = useSelect(
+ ( select ) => {
+ const {
+ getEntityRecords,
+ isResolving,
+ hasFinishedResolution,
+ } = select( coreStore );
+
+ const pagesParameters = [
+ 'postType',
+ 'page',
+ {
+ parent: 0,
+ order: 'asc',
+ orderby: 'id',
+ per_page: -1,
+ },
+ ];
+
+ return {
+ pages: getEntityRecords( ...pagesParameters ) || null,
+ isResolvingPages: isResolving(
+ 'getEntityRecords',
+ pagesParameters
+ ),
+ hasResolvedPages: hasFinishedResolution(
+ 'getEntityRecords',
+ pagesParameters
+ ),
+ };
+ },
+ []
+ );
+
+ return {
+ pages,
+ isResolvingPages,
+ hasResolvedPages,
+ hasPages: !! ( hasResolvedPages && pages?.length ),
+ };
+}
diff --git a/packages/edit-navigation/src/components/editor/style.scss b/packages/edit-navigation/src/components/editor/style.scss
index bce96deb1515a..5c5d813b02d38 100644
--- a/packages/edit-navigation/src/components/editor/style.scss
+++ b/packages/edit-navigation/src/components/editor/style.scss
@@ -3,7 +3,12 @@
border: $border-width solid $gray-900;
border-radius: $radius-block-ui;
max-width: $navigation-editor-width;
- margin: auto;
+ margin: $grid-unit-40 auto 0 auto;
+
+ @include break-medium() {
+ // Provide space for the floating block toolbar.
+ margin-top: $grid-unit-50 * 2;
+ }
.editor-styles-wrapper {
padding: 0;
@@ -25,11 +30,11 @@
font-family: $default-font;
// Increase specificity.
- .wp-block-navigation-link {
+ .wp-block-navigation-item {
display: block;
// Show submenus on click.
- > .wp-block-navigation-link__container {
+ > .wp-block-navigation__submenu-container {
// This unsets some styles inherited from the block, meant to only show submenus on click, not hover, when inside the editor.
opacity: 1;
visibility: visible;
@@ -39,8 +44,8 @@
}
// Fix focus outlines.
- &.is-selected > .wp-block-navigation-link__content,
- &.is-selected:hover > .wp-block-navigation-link__content {
+ &.is-selected > .wp-block-navigation-item__content,
+ &.is-selected:hover > .wp-block-navigation-item__content {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
}
@@ -50,11 +55,11 @@
// Menu items.
// This needs high specificity to override inherited values.
- &.wp-block-navigation-link.wp-block-navigation-link {
+ &.wp-block-navigation-item.wp-block-navigation-item {
margin-right: 0;
}
- .wp-block-navigation-link__content.wp-block-navigation-link__content.wp-block-navigation-link__content {
+ .wp-block-navigation-item__content.wp-block-navigation-item__content.wp-block-navigation-item__content {
padding: 0.5em 1em;
margin-bottom: 6px;
margin-right: 0;
@@ -86,7 +91,7 @@
pointer-events: none;
margin-right: 0;
- .wp-block-pages-list__item {
+ .wp-block-navigation-item {
color: $gray-700;
margin-bottom: 6px;
border-radius: $radius-block-ui;
@@ -96,7 +101,7 @@
}
// Submenu icon indicator.
- .wp-block-navigation-link__submenu-icon {
+ .wp-block-navigation__submenu-icon {
position: absolute;
top: 6px;
left: 0;
@@ -113,28 +118,28 @@
}
// Point downwards when open.
- .is-selected.has-child > .wp-block-navigation-link__submenu-icon svg,
- .has-child-selected.has-child > .wp-block-navigation-link__submenu-icon svg {
+ .is-selected.has-child > .wp-block-navigation__submenu-icon svg,
+ .has-child-selected.has-child > .wp-block-navigation__submenu-icon svg {
transform: rotate(0deg);
}
// Override inherited values to optimize menu items for the screen context.
- .wp-block-navigation-link.has-child {
+ .wp-block-navigation-item.has-child {
cursor: default;
border-radius: $radius-block-ui;
}
// Override for deeply nested submenus.
.has-child .wp-block-navigation__container .wp-block-navigation__container,
- .has-child .wp-block-navigation__container .wp-block-navigation-link__container {
+ .has-child .wp-block-navigation__container .wp-block-navigation__submenu-container {
left: auto;
}
// When editing a link with children, highlight the parent
// and adjust the spacing and submenu icon.
- .wp-block-navigation-link.has-child.is-editing {
+ .wp-block-navigation-item.has-child.is-editing {
> .wp-block-navigation__container,
- > .wp-block-navigation-link__container {
+ > .wp-block-navigation__submenu-container {
opacity: 1;
visibility: visible;
position: relative;
diff --git a/packages/edit-navigation/src/components/header/index.js b/packages/edit-navigation/src/components/header/index.js
index c923caf5b1767..228b53b520ff8 100644
--- a/packages/edit-navigation/src/components/header/index.js
+++ b/packages/edit-navigation/src/components/header/index.js
@@ -1,14 +1,19 @@
/**
* WordPress dependencies
*/
+import { NavigableToolbar } from '@wordpress/block-editor';
import { DropdownMenu } from '@wordpress/components';
+import { useViewportMatch } from '@wordpress/compose';
import { PinnedItems } from '@wordpress/interface';
import { __, sprintf } from '@wordpress/i18n';
+import { decodeEntities } from '@wordpress/html-entities';
/**
* Internal dependencies
*/
import SaveButton from './save-button';
+import UndoButton from './undo-button';
+import RedoButton from './redo-button';
import MenuSwitcher from '../menu-switcher';
import { useMenuEntityProp } from '../../hooks';
@@ -20,6 +25,7 @@ export default function Header( {
isPending,
navigationPost,
} ) {
+ const isMediumViewport = useViewportMatch( 'medium' );
const [ menuName ] = useMenuEntityProp( 'name', selectedMenuId );
let actionHeaderText;
@@ -38,14 +44,23 @@ export default function Header( {
return (
-
-
- { __( 'Navigation' ) }
-
-
- { isMenuSelected && actionHeaderText }
-
-
+ { isMediumViewport && (
+
+
+ { __( 'Navigation' ) }
+
+
+
+
+ ) }
+
+ { isMenuSelected && decodeEntities( actionHeaderText ) }
+
{ isMenuSelected && (
select( coreStore ).hasRedo() );
+ const { redo } = useDispatch( coreStore );
+ return (
+
diff --git a/packages/edit-navigation/src/components/name-editor/index.js b/packages/edit-navigation/src/components/name-editor/index.js
index 728dcb04b77c4..a1c46345f2375 100644
--- a/packages/edit-navigation/src/components/name-editor/index.js
+++ b/packages/edit-navigation/src/components/name-editor/index.js
@@ -4,6 +4,7 @@
import { __ } from '@wordpress/i18n';
import { TextControl } from '@wordpress/components';
import { useEffect, useRef, useContext } from '@wordpress/element';
+import { decodeEntities } from '@wordpress/html-entities';
/**
* Internal dependencies
@@ -36,7 +37,7 @@ export function NameEditor() {
label={ __( 'Name' ) }
onBlur={ () => setIsMenuNameEditFocused( false ) }
className="edit-navigation-name-editor__text-control"
- value={ name || '' }
+ value={ decodeEntities( name || '' ) }
onChange={ setName }
/>
);
diff --git a/packages/edit-navigation/src/components/notices/style.scss b/packages/edit-navigation/src/components/notices/style.scss
index c952988f1a09a..a633a2af3bc5e 100644
--- a/packages/edit-navigation/src/components/notices/style.scss
+++ b/packages/edit-navigation/src/components/notices/style.scss
@@ -1,7 +1,7 @@
.edit-navigation-notices__snackbar-list {
position: fixed;
- bottom: 20px;
- margin-left: 20px;
+ bottom: 0;
+ padding: 20px;
}
.edit-navigation-notices__notice-list {
diff --git a/packages/edit-navigation/src/components/sidebar/index.js b/packages/edit-navigation/src/components/sidebar/index.js
index 4123ef911e146..c6301230b1e58 100644
--- a/packages/edit-navigation/src/components/sidebar/index.js
+++ b/packages/edit-navigation/src/components/sidebar/index.js
@@ -13,6 +13,7 @@ import {
ComplementaryArea,
store as interfaceStore,
} from '@wordpress/interface';
+import { useViewportMatch } from '@wordpress/compose';
/**
* Internal dependencies
@@ -29,8 +30,8 @@ export default function Sidebar( {
isMenuBeingDeleted,
onDeleteMenu,
onSelectMenu,
- hasPermanentSidebar,
} ) {
+ const isLargeViewport = useViewportMatch( 'medium' );
const { sidebar, hasBlockSelection, hasSidebarEnabled } = useSelect(
( select ) => {
const _sidebar = select(
@@ -79,10 +80,10 @@ export default function Sidebar( {
scope={ SIDEBAR_SCOPE }
identifier={ sidebarName }
icon={ cog }
- isActiveByDefault={ hasPermanentSidebar }
+ isActiveByDefault={ isLargeViewport }
header={
{ ( { onClose } ) => (
@@ -61,7 +56,7 @@ const MoreMenu = ( { showIconLabels } ) => {
) }
-
+
);
};
diff --git a/packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap
deleted file mode 100644
index 9ffdb5a699ff0..0000000000000
--- a/packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap
+++ /dev/null
@@ -1,129 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`MoreMenu should match snapshot 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
-
-`;
diff --git a/packages/edit-post/src/components/header/more-menu/test/index.js b/packages/edit-post/src/components/header/more-menu/test/index.js
deleted file mode 100644
index 2da96abe04ea4..0000000000000
--- a/packages/edit-post/src/components/header/more-menu/test/index.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * External dependencies
- */
-import { mount } from 'enzyme';
-
-/**
- * Internal dependencies
- */
-import MoreMenu from '../index';
-
-describe( 'MoreMenu', () => {
- it( 'should match snapshot', () => {
- const wrapper = mount(
-
-
+ />
),
},
diff --git a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap
index 5e96f24c36fef..97bad699daf32 100644
--- a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap
+++ b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap
@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`PreferencesModal should match snapshot when the modal is active large viewports 1`] = `
-
+
`;
exports[`PreferencesModal should match snapshot when the modal is active small viewports 1`] = `
-
-
+ />
-
+
`;
diff --git a/packages/edit-post/src/components/sidebar/post-link/index.js b/packages/edit-post/src/components/sidebar/post-link/index.js
index 5b6ac7f7e9220..a3905a2275e5e 100644
--- a/packages/edit-post/src/components/sidebar/post-link/index.js
+++ b/packages/edit-post/src/components/sidebar/post-link/index.js
@@ -95,7 +95,11 @@ function PostLink( {
/>
{ __( 'The last part of the URL.' ) }{ ' ' }
-
+
{ __( 'Read about permalinks' ) }
diff --git a/packages/edit-post/src/components/text-editor/style.scss b/packages/edit-post/src/components/text-editor/style.scss
index 57d63b894007e..925e88df27180 100644
--- a/packages/edit-post/src/components/text-editor/style.scss
+++ b/packages/edit-post/src/components/text-editor/style.scss
@@ -5,7 +5,7 @@
flex-grow: 1;
// Post title.
- .editor-post-title.editor-post-title__block {
+ .editor-post-title {
max-width: none;
line-height: $default-line-height;
diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss
index aebef09c4eac3..b93af3ee80c71 100644
--- a/packages/edit-post/src/components/visual-editor/style.scss
+++ b/packages/edit-post/src/components/visual-editor/style.scss
@@ -44,8 +44,9 @@
margin-right: auto;
// Margins between the title and the first block, or appender, do not collapse.
- // By explicitly setting this to zero, we avoid "double margin".
- margin-bottom: 0;
+ // However in that support block gap, the first items in post content do not have a top margin.
+ // By leveraging the gap variable, with a fallback of zero, we handle both cases.
+ margin-bottom: var(--wp--style--block-gap, 0);
}
}
diff --git a/packages/edit-post/src/editor.js b/packages/edit-post/src/editor.js
index e2781d1a6a444..3f34c2a5f32bd 100644
--- a/packages/edit-post/src/editor.js
+++ b/packages/edit-post/src/editor.js
@@ -156,7 +156,9 @@ function Editor( {
] );
const styles = useMemo( () => {
- return hasThemeStyles ? settings.styles : [];
+ return hasThemeStyles && settings.styles?.length
+ ? settings.styles
+ : settings.defaultEditorStyles;
}, [ settings, hasThemeStyles ] );
if ( ! post ) {
diff --git a/packages/edit-post/src/index.js b/packages/edit-post/src/index.js
index a97ece5c01d41..c20cff1441222 100644
--- a/packages/edit-post/src/index.js
+++ b/packages/edit-post/src/index.js
@@ -6,13 +6,14 @@ import {
__experimentalRegisterExperimentalCoreBlocks,
} from '@wordpress/block-library';
import { render, unmountComponentAtNode } from '@wordpress/element';
+import { dispatch } from '@wordpress/data';
+import { store as interfaceStore } from '@wordpress/interface';
/**
* Internal dependencies
*/
import './hooks';
import './plugins';
-export { store } from './store';
import Editor from './editor';
/**
@@ -61,11 +62,8 @@ export function reinitializeEditor(
/**
* Initializes and returns an instance of Editor.
*
- * The return value of this function is not necessary if we change where we
- * call initializeEditor(). This is due to metaBox timing.
- *
* @param {string} id Unique identifier for editor instance.
- * @param {Object} postType Post type of the post to edit.
+ * @param {string} postType Post type of the post to edit.
* @param {Object} postId ID of the post to edit.
* @param {?Object} settings Editor settings object.
* @param {Object} initialEdits Programmatic edits to apply initially, to be
@@ -88,6 +86,17 @@ export function initializeEditor(
settings,
initialEdits
);
+
+ dispatch( interfaceStore ).setFeatureDefaults( 'core/edit-post', {
+ fixedToolbar: false,
+ welcomeGuide: true,
+ fullscreenMode: true,
+ showIconLabels: false,
+ themeStyles: true,
+ showBlockBreadcrumbs: true,
+ welcomeGuideTemplate: true,
+ } );
+
registerCoreBlocks();
if ( process.env.GUTENBERG_PHASE === 2 ) {
__experimentalRegisterExperimentalCoreBlocks( {
@@ -157,3 +166,4 @@ export { default as PluginSidebar } from './components/sidebar/plugin-sidebar';
export { default as PluginSidebarMoreMenuItem } from './components/header/plugin-sidebar-more-menu-item';
export { default as __experimentalFullscreenModeClose } from './components/header/fullscreen-mode-close';
export { default as __experimentalMainDashboardButton } from './components/header/main-dashboard-button';
+export { store } from './store';
diff --git a/packages/edit-post/src/plugins/welcome-guide-menu-item/index.js b/packages/edit-post/src/plugins/welcome-guide-menu-item/index.js
index 2c0a6b02fc3df..579d68c12a3a0 100644
--- a/packages/edit-post/src/plugins/welcome-guide-menu-item/index.js
+++ b/packages/edit-post/src/plugins/welcome-guide-menu-item/index.js
@@ -1,8 +1,8 @@
/**
* WordPress dependencies
*/
-import { useSelect, useDispatch } from '@wordpress/data';
-import { MenuItem } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { MoreMenuFeatureToggle } from '@wordpress/interface';
import { __ } from '@wordpress/i18n';
/**
@@ -15,17 +15,12 @@ export default function WelcomeGuideMenuItem() {
( select ) => select( editPostStore ).isEditingTemplate(),
[]
);
- const { toggleFeature } = useDispatch( editPostStore );
return (
-
+
+
+ );
+};
+
+describe( 'global styles provider', () => {
+ beforeAll( () => {
+ dispatch( 'core/edit-site' ).updateSettings( settings );
+ } );
+
+ describe( 'when a block enables color support', () => {
+ describe( 'and disables background color support', () => {
+ it( 'still enables text color support', () => {
+ act( () => {
+ dispatch( 'core/blocks' ).addBlockTypes(
+ generateCoverBlockType( {
+ link: true,
+ background: false,
+ } )
+ );
+ } );
+
+ const wrapper = generateWrapper();
+ const actual = wrapper
+ .findWhere( ( ele ) => Boolean( ele.prop( 'supports' ) ) )
+ .prop( 'supports' );
+ expect( actual ).not.toContain( 'backgroundColor' );
+ expect( actual ).toContain( 'color' );
+
+ act( () => {
+ dispatch( 'core/blocks' ).removeBlockTypes( 'core/cover' );
+ } );
+ } );
+ } );
+
+ describe( 'and both text color and background color support are disabled', () => {
+ it( 'disables text color and background color support', () => {
+ act( () => {
+ dispatch( 'core/blocks' ).addBlockTypes(
+ generateCoverBlockType( {
+ text: false,
+ background: false,
+ } )
+ );
+ } );
+
+ const wrapper = generateWrapper();
+ const actual = wrapper
+ .findWhere( ( ele ) => Boolean( ele.prop( 'supports' ) ) )
+ .prop( 'supports' );
+ expect( actual ).not.toContain( 'backgroundColor' );
+ expect( actual ).not.toContain( 'color' );
+
+ act( () => {
+ dispatch( 'core/blocks' ).removeBlockTypes( 'core/cover' );
+ } );
+ } );
+ } );
+
+ describe( 'and text color and background color supports are omitted', () => {
+ it( 'still enables both text color and background color supports', () => {
+ act( () => {
+ dispatch( 'core/blocks' ).addBlockTypes(
+ generateCoverBlockType( { link: true } )
+ );
+ } );
+
+ const wrapper = generateWrapper();
+ const actual = wrapper
+ .findWhere( ( ele ) => Boolean( ele.prop( 'supports' ) ) )
+ .prop( 'supports' );
+ expect( actual ).toContain( 'backgroundColor' );
+ expect( actual ).toContain( 'color' );
+
+ act( () => {
+ dispatch( 'core/blocks' ).removeBlockTypes( 'core/cover' );
+ } );
+ } );
+ } );
+ } );
+} );
diff --git a/packages/edit-site/src/components/editor/test/utils.js b/packages/edit-site/src/components/editor/test/utils.js
new file mode 100644
index 0000000000000..0f067424687d5
--- /dev/null
+++ b/packages/edit-site/src/components/editor/test/utils.js
@@ -0,0 +1,146 @@
+/**
+ * Internal dependencies
+ */
+import { getPresetVariable, getValueFromVariable } from '../utils';
+
+describe( 'editor utils', () => {
+ const styles = {
+ version: 1,
+ settings: {
+ color: {
+ palette: {
+ theme: [
+ {
+ slug: 'primary',
+ color: '#007cba',
+ name: 'Primary',
+ },
+ {
+ slug: 'secondary',
+ color: '#006ba1',
+ name: 'Secondary',
+ },
+ ],
+ user: [
+ {
+ slug: 'primary',
+ color: '#007cba',
+ name: 'Primary',
+ },
+ {
+ slug: 'secondary',
+ color: '#a65555',
+ name: 'Secondary',
+ },
+ ],
+ },
+ custom: true,
+ customDuotone: true,
+ customGradient: true,
+ link: true,
+ },
+ custom: {
+ color: {
+ primary: 'var(--wp--preset--color--primary)',
+ secondary: 'var(--wp--preset--color--secondary)',
+ },
+ },
+ },
+ isGlobalStylesUserThemeJSON: true,
+ };
+
+ describe( 'getPresetVariable', () => {
+ const context = 'root';
+ const propertyName = 'color';
+ const value = '#007cba';
+
+ describe( 'when a provided global style (e.g. fontFamily, color,etc.) does not exist', () => {
+ it( 'returns the originally provided value', () => {
+ const actual = getPresetVariable(
+ styles,
+ context,
+ 'fakePropertyName',
+ value
+ );
+ expect( actual ).toBe( value );
+ } );
+ } );
+
+ describe( 'when a global style is cleared by the user', () => {
+ it( 'returns an undefined preset variable', () => {
+ const actual = getPresetVariable(
+ styles,
+ context,
+ propertyName,
+ undefined
+ );
+ expect( actual ).toBe( undefined );
+ } );
+ } );
+
+ describe( 'when a global style is selected by the user', () => {
+ describe( 'and it is not a preset value (e.g. custom color)', () => {
+ it( 'returns the originally provided value', () => {
+ const customValue = '#6e4545';
+ const actual = getPresetVariable(
+ styles,
+ context,
+ propertyName,
+ customValue
+ );
+ expect( actual ).toBe( customValue );
+ } );
+ } );
+
+ describe( 'and it is a preset value', () => {
+ it( 'returns the preset variable', () => {
+ const actual = getPresetVariable(
+ styles,
+ context,
+ propertyName,
+ value
+ );
+ expect( actual ).toBe( 'var:preset|color|primary' );
+ } );
+ } );
+ } );
+ } );
+
+ describe( 'getValueFromVariable', () => {
+ describe( 'when provided an invalid variable', () => {
+ it( 'returns the originally provided value', () => {
+ const actual = getValueFromVariable(
+ styles,
+ 'root',
+ undefined
+ );
+
+ expect( actual ).toBe( undefined );
+ } );
+ } );
+
+ describe( 'when provided a preset variable', () => {
+ it( 'retrieves the correct preset value', () => {
+ const actual = getValueFromVariable(
+ styles,
+ 'root',
+ 'var:preset|color|primary'
+ );
+
+ expect( actual ).toBe( '#007cba' );
+ } );
+ } );
+
+ describe( 'when provided a custom variable', () => {
+ it( 'retrieves the correct custom value', () => {
+ const actual = getValueFromVariable(
+ styles,
+ 'root',
+ 'var(--wp--custom--color--secondary)'
+ );
+
+ expect( actual ).toBe( '#a65555' );
+ } );
+ } );
+ } );
+} );
diff --git a/packages/edit-site/src/components/editor/utils.js b/packages/edit-site/src/components/editor/utils.js
index ba883f330ea26..81a809dbf4bee 100644
--- a/packages/edit-site/src/components/editor/utils.js
+++ b/packages/edit-site/src/components/editor/utils.js
@@ -6,6 +6,7 @@ import { get, find, forEach, camelCase, isString } from 'lodash';
* WordPress dependencies
*/
import { useSelect } from '@wordpress/data';
+import { __EXPERIMENTAL_PATHS_WITH_MERGE as PATHS_WITH_MERGE } from '@wordpress/blocks';
/**
* Internal dependencies
*/
@@ -91,13 +92,6 @@ function getPresetMetadataFromStyleProperty( styleProperty ) {
return getPresetMetadataFromStyleProperty.MAP[ styleProperty ];
}
-const PATHS_WITH_MERGE = {
- 'color.gradients': true,
- 'color.palette': true,
- 'typography.fontFamilies': true,
- 'typography.fontSizes': true,
-};
-
export function useSetting( path, blockName = '' ) {
const settings = useSelect( ( select ) => {
return select( editSiteStore ).getSettings();
diff --git a/packages/edit-site/src/components/header/document-actions/index.js b/packages/edit-site/src/components/header/document-actions/index.js
index fc9f592215df4..1844f198000b6 100644
--- a/packages/edit-site/src/components/header/document-actions/index.js
+++ b/packages/edit-site/src/components/header/document-actions/index.js
@@ -29,7 +29,7 @@ function getBlockDisplayText( block ) {
}
function useSecondaryText() {
- const { getBlock } = useSelect( 'core/block-editor' );
+ const { getBlock } = useSelect( blockEditorStore );
const activeEntityBlockId = useSelect(
( select ) =>
select(
diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/content-navigation-item.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/content-navigation-item.js
index e33a4fba22ed5..43f460f26e367 100644
--- a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/content-navigation-item.js
+++ b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/content-navigation-item.js
@@ -36,7 +36,7 @@ export default function ContentNavigationItem( { item } ) {
const template = select(
coreStore
).__experimentalGetTemplateForLink( item.link );
- return template?.content?.raw;
+ return template?.content;
},
[ isPreviewVisible ]
);
diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss
index d3ab0f7ac3d5b..d78d3d4e6f668 100644
--- a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss
+++ b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss
@@ -17,9 +17,10 @@
background: $gray-900;
border-radius: 0;
color: $white;
- height: $header-height;
+ height: $header-height + $border-width;
width: $header-height;
z-index: 1;
+ margin-bottom: - $border-width;
&.has-icon {
min-width: $header-height;
@@ -44,7 +45,7 @@
bottom: 9px;
left: 9px;
border-radius: $radius-block-ui + $border-width + $border-width;
- box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #23282e;
+ box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-900;
}
// Hover color.
diff --git a/packages/edit-site/src/components/sidebar/border-panel.js b/packages/edit-site/src/components/sidebar/border-panel.js
index e7d5c801ff935..19cdcff68c6ee 100644
--- a/packages/edit-site/src/components/sidebar/border-panel.js
+++ b/packages/edit-site/src/components/sidebar/border-panel.js
@@ -32,7 +32,7 @@ export function useHasBorderPanel( { supports, name } ) {
useHasBorderWidthControl( { supports, name } ),
];
- return controls.every( Boolean );
+ return controls.some( Boolean );
}
function useHasBorderColorControl( { supports, name } ) {
@@ -123,7 +123,7 @@ export default function BorderPanel( {
{ hasBorderColor && (
0 || areCustomSolidsEnabled );
+ const hasTextColor =
+ supports.includes( 'color' ) &&
+ isTextEnabled &&
+ ( solids.length > 0 || areCustomSolidsEnabled );
+ const hasBackgroundColor =
+ supports.includes( 'backgroundColor' ) &&
+ isBackgroundEnabled &&
+ ( solids.length > 0 || areCustomSolidsEnabled );
+ const hasGradientColor =
+ supports.includes( 'background' ) &&
+ ( gradients.length > 0 || areCustomGradientsEnabled );
const settings = [];
- if ( supports.includes( 'color' ) ) {
+ if ( hasTextColor ) {
const color = getStyle( name, 'color' );
const userColor = getStyle( name, 'color', 'user' );
settings.push( {
@@ -46,7 +68,7 @@ export default function ColorPanel( {
}
let backgroundSettings = {};
- if ( supports.includes( 'backgroundColor' ) ) {
+ if ( hasBackgroundColor ) {
const backgroundColor = getStyle( name, 'backgroundColor' );
const userBackgroundColor = getStyle( name, 'backgroundColor', 'user' );
backgroundSettings = {
@@ -61,7 +83,7 @@ export default function ColorPanel( {
}
let gradientSettings = {};
- if ( supports.includes( 'background' ) ) {
+ if ( hasGradientColor ) {
const gradient = getStyle( name, 'background' );
const userGradient = getStyle( name, 'background', 'user' );
gradientSettings = {
@@ -74,10 +96,7 @@ export default function ColorPanel( {
}
}
- if (
- supports.includes( 'background' ) ||
- supports.includes( 'backgroundColor' )
- ) {
+ if ( hasBackgroundColor || hasGradientColor ) {
settings.push( {
...backgroundSettings,
...gradientSettings,
@@ -85,7 +104,7 @@ export default function ColorPanel( {
} );
}
- if ( supports.includes( 'linkColor' ) ) {
+ if ( hasLinkColor ) {
const color = getStyle( name, 'linkColor' );
const userColor = getStyle( name, 'linkColor', 'user' );
settings.push( {
@@ -95,14 +114,15 @@ export default function ColorPanel( {
clearable: color === userColor,
} );
}
+
return (
marginValues && Object.keys( marginValues ).length;
+ const gapValue = getStyle( name, '--wp--style--block-gap' );
+
+ const setGapValue = ( newGapValue ) => {
+ setStyle( name, '--wp--style--block-gap', newGapValue );
+ };
+ const resetGapValue = () => setGapValue( undefined );
+ const hasGapValue = () => !! gapValue;
+
const resetAll = () => {
resetPaddingValue();
resetMarginValue();
+ resetGapValue();
};
return (
@@ -163,6 +181,23 @@ export default function DimensionsPanel( { context, getStyle, setStyle } ) {
/>
) }
+ { showGapControl && (
+
+
+ ) }
);
}
diff --git a/packages/edit-site/src/components/template-part-converter/convert-to-regular.js b/packages/edit-site/src/components/template-part-converter/convert-to-regular.js
index cfc43db26a657..6407f8a22b071 100644
--- a/packages/edit-site/src/components/template-part-converter/convert-to-regular.js
+++ b/packages/edit-site/src/components/template-part-converter/convert-to-regular.js
@@ -10,13 +10,7 @@ import { MenuItem } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
export default function ConvertToRegularBlocks( { clientId } ) {
- const { innerBlocks } = useSelect(
- ( select ) =>
- select( blockEditorStore ).__unstableGetBlockWithBlockTree(
- clientId
- ),
- [ clientId ]
- );
+ const { getBlocks } = useSelect( blockEditorStore );
const { replaceBlocks } = useDispatch( blockEditorStore );
return (
@@ -24,7 +18,7 @@ export default function ConvertToRegularBlocks( { clientId } ) {
{ ( { onClose } ) => (
} The connected PolymorphicComponent + * @return {import('./wordpress-component').WordPressComponentFromProps
} The connected WordPressComponent
*/
export function contextConnect( Component, namespace, options = {} ) {
/* eslint-enable jsdoc/valid-types */
@@ -65,7 +65,7 @@ export function contextConnect( Component, namespace, options = {} ) {
// @ts-ignore internal property
WrappedComponent[ CONNECT_STATIC_NAMESPACE ] = uniq( mergedNamespace );
- // @ts-ignore PolymorphicComponent property
+ // @ts-ignore WordPressComponent property
WrappedComponent.selector = `.${ getStyledClassNameFromKey( namespace ) }`;
// @ts-ignore
diff --git a/packages/components/src/ui/context/index.js b/packages/components/src/ui/context/index.js
index e19795d7b7a13..54694e47304ff 100644
--- a/packages/components/src/ui/context/index.js
+++ b/packages/components/src/ui/context/index.js
@@ -8,4 +8,4 @@ export {
getConnectNamespace,
} from './context-connect';
export { useContextSystem } from './use-context-system';
-export * from './polymorphic-component';
+export * from './wordpress-component';
diff --git a/packages/components/src/ui/context/use-context-system.js b/packages/components/src/ui/context/use-context-system.js
index 4a842033a2a2f..134ef9046b849 100644
--- a/packages/components/src/ui/context/use-context-system.js
+++ b/packages/components/src/ui/context/use-context-system.js
@@ -13,7 +13,7 @@ import { useCx } from '../../utils/hooks/use-cx';
/**
* @template TProps
- * @typedef {TProps & { className: string; }} ConnectedProps
+ * @typedef {TProps & { className: string }} ConnectedProps
*/
/**
diff --git a/packages/components/src/ui/context/polymorphic-component.ts b/packages/components/src/ui/context/wordpress-component.ts
similarity index 79%
rename from packages/components/src/ui/context/polymorphic-component.ts
rename to packages/components/src/ui/context/wordpress-component.ts
index fae6cc41418db..2bf4372ec6b6e 100644
--- a/packages/components/src/ui/context/polymorphic-component.ts
+++ b/packages/components/src/ui/context/wordpress-component.ts
@@ -11,7 +11,7 @@ import type * as React from 'react';
* by `ComponentPropsWithRef`. The context is that components should require the `children`
* prop explicitely when needed (see https://github.com/WordPress/gutenberg/pull/31817).
*/
-export type PolymorphicComponentProps<
+export type WordPressComponentProps<
P,
T extends React.ElementType,
IsPolymorphic extends boolean = true
@@ -23,17 +23,17 @@ export type PolymorphicComponentProps<
}
: { as?: never } );
-export type PolymorphicComponent<
+export type WordPressComponent<
T extends React.ElementType,
O,
IsPolymorphic extends boolean
> = {
< TT extends React.ElementType >(
- props: PolymorphicComponentProps< O, TT, IsPolymorphic > &
+ props: WordPressComponentProps< O, TT, IsPolymorphic > &
( IsPolymorphic extends true ? { as: TT } : { as: never } )
): JSX.Element | null;
(
- props: PolymorphicComponentProps< O, T, IsPolymorphic >
+ props: WordPressComponentProps< O, T, IsPolymorphic >
): JSX.Element | null;
displayName?: string;
/**
@@ -47,8 +47,8 @@ export type PolymorphicComponent<
selector: `.${ string }`;
};
-export type PolymorphicComponentFromProps<
+export type WordPressComponentFromProps<
Props
-> = Props extends PolymorphicComponentProps< infer P, infer T, infer I >
- ? PolymorphicComponent< T, P, I >
+> = Props extends WordPressComponentProps< infer P, infer T, infer I >
+ ? WordPressComponent< T, P, I >
: never;
diff --git a/packages/components/src/ui/control-group/component.js b/packages/components/src/ui/control-group/component.js
index b1b82c581cdfd..d291d436c11d4 100644
--- a/packages/components/src/ui/control-group/component.js
+++ b/packages/components/src/ui/control-group/component.js
@@ -11,8 +11,8 @@ import { useControlGroup } from './hook';
import { contextConnect } from '../context';
/**
- * @param {import('../context').PolymorphicComponentProps
-
+
hi-item 1 item 2 hi-item 1 item 2
{ __( 'The last part of the URL.' ) }{ ' ' }
- post
' },
+ rendered:
+ 'rendered post
post
' },
+ rendered: 'rendered post
post
',
+ },
+ } );
+ } );
+} );
+
describe( 'getEntityRecords', () => {
it( 'should return null by default', () => {
const state = deepFreeze( {
diff --git a/packages/core-data/src/utils/if-not-resolved.js b/packages/core-data/src/utils/if-not-resolved.js
index 0baf36f0e5d8d..653827cdfe6c0 100644
--- a/packages/core-data/src/utils/if-not-resolved.js
+++ b/packages/core-data/src/utils/if-not-resolved.js
@@ -1,13 +1,3 @@
-/**
- * WordPress dependencies
- */
-import { controls } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { STORE_NAME } from '../name';
-
/**
* Higher-order function which invokes the given resolver only if it has not
* already been resolved with the arguments passed to the enhanced function.
@@ -20,21 +10,13 @@ import { STORE_NAME } from '../name';
*
* @return {Function} Enhanced resolver.
*/
-const ifNotResolved = ( resolver, selectorName ) =>
- /**
- * @param {...any} args Original resolver arguments.
- */
- function* resolveIfNotResolved( ...args ) {
- const hasStartedResolution = yield controls.select(
- STORE_NAME,
- 'hasStartedResolution',
- selectorName,
- args
- );
-
- if ( ! hasStartedResolution ) {
- yield* resolver( ...args );
- }
- };
+const ifNotResolved = ( resolver, selectorName ) => ( ...args ) => async ( {
+ select,
+ dispatch,
+} ) => {
+ if ( ! select.hasStartedResolution( selectorName, args ) ) {
+ await dispatch( resolver( ...args ) );
+ }
+};
export default ifNotResolved;
diff --git a/packages/core-data/src/utils/index.js b/packages/core-data/src/utils/index.js
index 05e8d73bf7630..a4f4bf81373cd 100644
--- a/packages/core-data/src/utils/index.js
+++ b/packages/core-data/src/utils/index.js
@@ -5,3 +5,4 @@ export { default as ifNotResolved } from './if-not-resolved';
export { default as onSubKey } from './on-sub-key';
export { default as replaceAction } from './replace-action';
export { default as withWeakMapCache } from './with-weak-map-cache';
+export { default as isRawAttribute } from './is-raw-attribute';
diff --git a/packages/core-data/src/utils/is-raw-attribute.js b/packages/core-data/src/utils/is-raw-attribute.js
new file mode 100644
index 0000000000000..f8e8d4de359a4
--- /dev/null
+++ b/packages/core-data/src/utils/is-raw-attribute.js
@@ -0,0 +1,11 @@
+/**
+ * Checks whether the attribute is a "raw" attribute or not.
+ *
+ * @param {Object} entity Entity data.
+ * @param {string} attribute Attribute name.
+ *
+ * @return {boolean} Is the attribute raw
+ */
+export default function isRawAttribute( entity, attribute ) {
+ return ( entity.rawAttributes || [] ).includes( attribute );
+}
diff --git a/packages/core-data/src/utils/test/if-not-resolved.js b/packages/core-data/src/utils/test/if-not-resolved.js
index a773097d70514..291e224b3833c 100644
--- a/packages/core-data/src/utils/test/if-not-resolved.js
+++ b/packages/core-data/src/utils/test/if-not-resolved.js
@@ -27,49 +27,50 @@ describe( 'ifNotResolved', () => {
expect( resolver ).toBeInstanceOf( Function );
} );
- it( 'triggers original resolver if not already resolved', () => {
- controls.select.mockImplementation( ( _storeKey, selectorName ) => ( {
- _nextValue:
- selectorName === 'hasStartedResolution' ? false : undefined,
- } ) );
+ it( 'triggers original resolver if not already resolved', async () => {
+ const select = { hasStartedResolution: () => false };
+ const dispatch = () => {};
const originalResolver = jest
.fn()
- .mockImplementation( function* () {} );
+ .mockImplementation( async function () {} );
const resolver = ifNotResolved( originalResolver, 'originalResolver' );
-
- const runResolver = resolver();
-
- let next, nextValue;
- do {
- next = runResolver.next( nextValue );
- nextValue = next.value?._nextValue;
- } while ( ! next.done );
+ await resolver()( { select, dispatch } );
expect( originalResolver ).toHaveBeenCalledTimes( 1 );
} );
- it( 'does not trigger original resolver if already resolved', () => {
- controls.select.mockImplementation( ( _storeKey, selectorName ) => ( {
- _nextValue:
- selectorName === 'hasStartedResolution' ? true : undefined,
- } ) );
+ it( 'does not trigger original resolver if already resolved', async () => {
+ const select = { hasStartedResolution: () => true };
+ const dispatch = () => {};
const originalResolver = jest
.fn()
- .mockImplementation( function* () {} );
+ .mockImplementation( async function () {} );
const resolver = ifNotResolved( originalResolver, 'originalResolver' );
+ await resolver()( { select, dispatch } );
+
+ expect( originalResolver ).toHaveBeenCalledTimes( 0 );
+ } );
- const runResolver = resolver();
+ it( 'returns a promise when the resolver was not already resolved', async () => {
+ const select = { hasStartedResolution: () => false };
+ let thunkRetval;
+ const dispatch = jest.fn( ( thunk ) => {
+ thunkRetval = thunk();
+ return thunkRetval;
+ } );
- let next, nextValue;
- do {
- next = runResolver.next( nextValue );
- nextValue = next.value?._nextValue;
- } while ( ! next.done );
+ const originalResolver = jest.fn( () => () =>
+ Promise.resolve( 'success!' )
+ );
- expect( originalResolver ).toHaveBeenCalledTimes( 0 );
+ const resolver = ifNotResolved( originalResolver, 'originalResolver' );
+ const result = resolver()( { select, dispatch } );
+
+ await expect( result ).resolves.toBe( undefined );
+ await expect( thunkRetval ).resolves.toBe( 'success!' );
} );
} );
diff --git a/packages/core-data/src/utils/test/is-raw-attribute.js b/packages/core-data/src/utils/test/is-raw-attribute.js
new file mode 100644
index 0000000000000..545fd7c84286f
--- /dev/null
+++ b/packages/core-data/src/utils/test/is-raw-attribute.js
@@ -0,0 +1,22 @@
+/**
+ * Internal dependencies
+ */
+import { isRawAttribute } from '../';
+
+describe( 'isRawAttribute', () => {
+ it( 'should correctly assess that the attribute is not raw', () => {
+ const entity = {
+ kind: 'someKind',
+ name: 'someName',
+ };
+ expect( isRawAttribute( entity, 'title' ) ).toBe( false );
+ } );
+ it( 'should correctly assess that the attribute is raw', () => {
+ const entity = {
+ kind: 'someKind',
+ name: 'someName',
+ rawAttributes: [ 'title' ],
+ };
+ expect( isRawAttribute( entity, 'title' ) ).toBe( true );
+ } );
+} );
diff --git a/packages/customize-widgets/package.json b/packages/customize-widgets/package.json
index 1be81999fee62..ae7260f507fe3 100644
--- a/packages/customize-widgets/package.json
+++ b/packages/customize-widgets/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/customize-widgets",
- "version": "2.0.0",
+ "version": "2.0.1",
"description": "Widgets blocks in Customizer Module for WordPress.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/customize-widgets/src/controls/inspector-section.js b/packages/customize-widgets/src/controls/inspector-section.js
index b6cb32ccf9c8d..48b574a65ea15 100644
--- a/packages/customize-widgets/src/controls/inspector-section.js
+++ b/packages/customize-widgets/src/controls/inspector-section.js
@@ -16,6 +16,9 @@ export default function getInspectorSection() {
'customize-widgets-layout__inspector'
);
}
+ isContextuallyActive() {
+ return this.active();
+ }
onChangeExpanded( expanded, args ) {
super.onChangeExpanded( expanded, args );
diff --git a/packages/customize-widgets/src/controls/sidebar-section.js b/packages/customize-widgets/src/controls/sidebar-section.js
index a30f4c242b035..e78c47f94f351 100644
--- a/packages/customize-widgets/src/controls/sidebar-section.js
+++ b/packages/customize-widgets/src/controls/sidebar-section.js
@@ -36,6 +36,9 @@ export default function getSidebarSection() {
'customize-widgets__sidebar-section'
);
}
+ isContextuallyActive() {
+ return this.active();
+ }
hasSubSectionOpened() {
return this.inspector.expanded();
}
diff --git a/packages/customize-widgets/src/index.js b/packages/customize-widgets/src/index.js
index 8751caab3a811..ef93ba1264c8b 100644
--- a/packages/customize-widgets/src/index.js
+++ b/packages/customize-widgets/src/index.js
@@ -10,6 +10,7 @@ import {
import {
registerLegacyWidgetBlock,
registerLegacyWidgetVariations,
+ registerWidgetGroupBlock,
} from '@wordpress/widgets';
import { setFreeformContentHandlerName } from '@wordpress/blocks';
import { dispatch } from '@wordpress/data';
@@ -56,6 +57,7 @@ export function initialize( editorName, blockEditorSettings ) {
} );
}
registerLegacyWidgetVariations( blockEditorSettings );
+ registerWidgetGroupBlock();
// As we are unregistering `core/freeform` to avoid the Classic block, we must
// replace it with something as the default freeform content handler. Failure to
diff --git a/packages/data-controls/package.json b/packages/data-controls/package.json
index 7407d97bfb2c0..4b132809bea52 100644
--- a/packages/data-controls/package.json
+++ b/packages/data-controls/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/data-controls",
- "version": "2.2.1",
+ "version": "2.2.2",
"description": "A set of common controls for the @wordpress/data api.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/data/package.json b/packages/data/package.json
index ddd920360f30e..7d3fa835579db 100644
--- a/packages/data/package.json
+++ b/packages/data/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/data",
- "version": "6.0.0",
+ "version": "6.0.1",
"description": "Data module for WordPress.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/data/src/plugins/persistence/index.js b/packages/data/src/plugins/persistence/index.js
index f22e135100f16..24baf115aa1dc 100644
--- a/packages/data/src/plugins/persistence/index.js
+++ b/packages/data/src/plugins/persistence/index.js
@@ -285,6 +285,7 @@ persistencePlugin.__unstableMigrate = ( pluginOptions ) => {
persistence,
'core/customize-widgets'
);
+ migrateFeaturePreferencesToInterfaceStore( persistence, 'core/edit-post' );
};
export default persistencePlugin;
diff --git a/packages/dom/package.json b/packages/dom/package.json
index 3adff09388c9e..918415ad3d5fe 100644
--- a/packages/dom/package.json
+++ b/packages/dom/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/dom",
- "version": "3.2.1",
+ "version": "3.2.2",
"description": "DOM utilities module for WordPress.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/dom/src/dom/caret-range-from-point.js b/packages/dom/src/dom/caret-range-from-point.js
index fb32c15f0f975..8839e0861f0ab 100644
--- a/packages/dom/src/dom/caret-range-from-point.js
+++ b/packages/dom/src/dom/caret-range-from-point.js
@@ -4,9 +4,9 @@
*
* @see https://developer.mozilla.org/en-US/docs/Web/API/Document/caretRangeFromPoint
*
- * @param {Document} doc The document of the range.
- * @param {number} x Horizontal position within the current viewport.
- * @param {number} y Vertical position within the current viewport.
+ * @param {DocumentMaybeWithCaretPositionFromPoint} doc The document of the range.
+ * @param {number} x Horizontal position within the current viewport.
+ * @param {number} y Vertical position within the current viewport.
*
* @return {Range | null} The best range for the given point.
*/
@@ -34,3 +34,8 @@ export default function caretRangeFromPoint( doc, x, y ) {
return range;
}
+
+/**
+ * @typedef {{caretPositionFromPoint?: (x: number, y: number)=> CaretPosition | null} & Document } DocumentMaybeWithCaretPositionFromPoint
+ * @typedef {{ readonly offset: number; readonly offsetNode: Node; getClientRect(): DOMRect | null; }} CaretPosition
+ */
diff --git a/packages/dom/src/phrasing-content.js b/packages/dom/src/phrasing-content.js
index d233ef2eec8b4..494b7026f2b3c 100644
--- a/packages/dom/src/phrasing-content.js
+++ b/packages/dom/src/phrasing-content.js
@@ -32,7 +32,7 @@ const textContentSchema = {
s: {},
del: {},
ins: {},
- a: { attributes: [ 'href', 'target', 'rel' ] },
+ a: { attributes: [ 'href', 'target', 'rel', 'id' ] },
code: {},
abbr: { attributes: [ 'title' ] },
sub: {},
diff --git a/packages/e2e-test-utils/package.json b/packages/e2e-test-utils/package.json
index 204f11b26901b..e6ac75c7bbb06 100644
--- a/packages/e2e-test-utils/package.json
+++ b/packages/e2e-test-utils/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/e2e-test-utils",
- "version": "5.4.1",
+ "version": "5.4.2",
"description": "End-To-End (E2E) test utils for WordPress.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/e2e-tests/README.md b/packages/e2e-tests/README.md
index a322b2e40cc48..5c24e95f8a62d 100644
--- a/packages/e2e-tests/README.md
+++ b/packages/e2e-tests/README.md
@@ -10,6 +10,68 @@ Install the module
npm install @wordpress/e2e-tests --save-dev
```
+## Running tests
+
+The following commands are available on the Gutenberg repo:
+
+```json
+{
+ "test-e2e": "wp-scripts test-e2e --config packages/e2e-tests/jest.config.js",
+ "test-e2e:debug": "wp-scripts --inspect-brk test-e2e --config packages/e2e-tests/jest.config.js --puppeteer-devtools",
+ "test-e2e:watch": "npm run test-e2e -- --watch",
+}
+```
+
+### Run all available tests
+```bash
+npm run test-e2e
+```
+### Run all available tests and listen for changes.
+```bash
+npm run test-e2e:watch
+```
+
+### Run a specific test file
+```bash
+npm run test-e2e -- packages/e2e-test/
- { __( 'Navigation' ) }
-
-
- { isMenuSelected && actionHeaderText }
-
-
+ { __( 'Navigation' ) }
+
+
+ { isMenuSelected && decodeEntities( actionHeaderText ) }
+
{ isMenuSelected && (