@@ -194,13 +147,6 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
}
return null;
}
- if ( topLevelLockedBlock ) {
- return (
-
);
@@ -260,9 +207,13 @@ const AnimatedContainer = ( {
);
};
-const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
+const BlockInspectorSingleBlock = ( {
+ clientId,
+ blockName,
+ isSectionBlock,
+} ) => {
const availableTabs = useInspectorControlsTabs( blockName );
- const showTabs = availableTabs?.length > 1;
+ const showTabs = ! isSectionBlock && availableTabs?.length > 1;
const hasBlockStyles = useSelect(
( select ) => {
@@ -274,6 +225,26 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
);
const blockInformation = useBlockDisplayInformation( clientId );
const borderPanelLabel = useBorderPanelLabel( { blockName } );
+ const contentClientIds = useSelect(
+ ( select ) => {
+ // Avoid unnecessary subscription.
+ if ( ! isSectionBlock ) {
+ return;
+ }
+
+ const {
+ getClientIdsOfDescendants,
+ getBlockName,
+ getBlockEditingMode,
+ } = select( blockEditorStore );
+ return getClientIdsOfDescendants( clientId ).filter(
+ ( current ) =>
+ getBlockName( current ) !== 'core/list-item' &&
+ getBlockEditingMode( current ) === 'contentOnly'
+ );
+ },
+ [ isSectionBlock, clientId ]
+ );
return (
@@ -296,35 +267,48 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
{ hasBlockStyles && (
) }
-
-
-
-
-
-
-
-
-
-
-
+
+ { contentClientIds && contentClientIds?.length > 0 && (
+
+
+ ) }
+
+ { ! isSectionBlock && (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+ ) }
) }
diff --git a/packages/block-editor/src/components/block-inspector/style.scss b/packages/block-editor/src/components/block-inspector/style.scss
index bdbf3660d9619e..92a9a0dd03ab35 100644
--- a/packages/block-editor/src/components/block-inspector/style.scss
+++ b/packages/block-editor/src/components/block-inspector/style.scss
@@ -49,4 +49,6 @@
.block-editor-block-inspector__tab-item {
flex: 1 1 0px;
+ display: flex;
+ justify-content: center;
}
diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
index deda4e3b9d0897..783b45da932a3d 100644
--- a/packages/block-editor/src/components/block-list/block.js
+++ b/packages/block-editor/src/components/block-list/block.js
@@ -25,6 +25,7 @@ import {
getBlockDefaultClassName,
hasBlockSupport,
store as blocksStore,
+ privateApis as blocksPrivateApis,
} from '@wordpress/blocks';
import { withFilters } from '@wordpress/components';
import { withDispatch, useDispatch, useSelect } from '@wordpress/data';
@@ -46,6 +47,8 @@ import { PrivateBlockContext } from './private-block-context';
import { unlock } from '../../lock-unlock';
+const { isUnmodifiedBlockContent } = unlock( blocksPrivateApis );
+
/**
* Merges wrapper props with special handling for classNames and styles.
*
@@ -350,12 +353,48 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
removeBlock( _clientId );
} else {
registry.batch( () => {
+ const firstBlock = getBlock( firstClientId );
+ const isFirstBlockContentUnmodified =
+ isUnmodifiedBlockContent( firstBlock );
+ const defaultBlockName = getDefaultBlockName();
+ const replacement = switchToBlockType(
+ firstBlock,
+ defaultBlockName
+ );
+ const canTransformToDefaultBlock =
+ !! replacement?.length &&
+ replacement.every( ( block ) =>
+ canInsertBlockType( block.name, _clientId )
+ );
+
if (
+ isFirstBlockContentUnmodified &&
+ canTransformToDefaultBlock
+ ) {
+ // Step 1: If the block is empty and can be transformed to the default block type.
+ replaceBlocks(
+ firstClientId,
+ replacement,
+ changeSelection
+ );
+ } else if (
+ isFirstBlockContentUnmodified &&
+ firstBlock.name === defaultBlockName
+ ) {
+ // Step 2: If the block is empty and is already the default block type.
+ removeBlock( firstClientId );
+ const nextBlockClientId =
+ getNextBlockClientId( clientId );
+ if ( nextBlockClientId ) {
+ selectBlock( nextBlockClientId );
+ }
+ } else if (
canInsertBlockType(
- getBlockName( firstClientId ),
+ firstBlock.name,
targetRootClientId
)
) {
+ // Step 3: If the block can be moved up.
moveBlocksToPosition(
[ firstClientId ],
_clientId,
@@ -363,21 +402,17 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
getBlockIndex( _clientId )
);
} else {
- const replacement = switchToBlockType(
- getBlock( firstClientId ),
- getDefaultBlockName()
- );
-
- if (
- replacement &&
- replacement.length &&
+ const canLiftAndTransformToDefaultBlock =
+ !! replacement?.length &&
replacement.every( ( block ) =>
canInsertBlockType(
block.name,
targetRootClientId
)
- )
- ) {
+ );
+
+ if ( canLiftAndTransformToDefaultBlock ) {
+ // Step 4: If the block can be transformed to the default block type and moved up.
insertBlocks(
replacement,
getBlockIndex( _clientId ),
@@ -386,6 +421,7 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
);
removeBlock( firstClientId, false );
} else {
+ // Step 5: Continue the default behavior.
switchToDefaultOrRemove();
}
}
@@ -549,6 +585,7 @@ function BlockListBlockProvider( props ) {
getBlockMode,
isSelectionEnabled,
getTemplateLock,
+ isSectionBlock: _isSectionBlock,
getBlockWithoutAttributes,
getBlockAttributes,
canRemoveBlock,
@@ -571,10 +608,7 @@ function BlockListBlockProvider( props ) {
__unstableSelectionHasUnmergeableBlock,
isBlockBeingDragged,
isDragging,
- hasBlockMovingClientId,
- canInsertBlockType,
__unstableHasActiveBlockOverlayActive,
- __unstableGetEditorMode,
getSelectedBlocksInitialCaretPosition,
} = unlock( select( blockEditorStore ) );
const blockWithoutAttributes =
@@ -632,7 +666,6 @@ function BlockListBlockProvider( props ) {
clientId,
checkDeep
);
- const movingClientId = hasBlockMovingClientId();
const blockEditingMode = getBlockEditingMode( clientId );
const multiple = hasBlockSupport( blockName, 'multiple', true );
@@ -646,14 +679,12 @@ function BlockListBlockProvider( props ) {
blocksWithSameName.length &&
blocksWithSameName[ 0 ] !== clientId;
- const editorMode = __unstableGetEditorMode();
-
return {
...previewContext,
mode: getBlockMode( clientId ),
isSelectionEnabled: isSelectionEnabled(),
isLocked: !! getTemplateLock( rootClientId ),
- templateLock: getTemplateLock( clientId ),
+ isSectionBlock: _isSectionBlock( clientId ),
canRemove,
canMove,
isSelected: _isSelected,
@@ -674,18 +705,15 @@ function BlockListBlockProvider( props ) {
) && hasSelectedInnerBlock( clientId ),
blockApiVersion: blockType?.apiVersion || 1,
blockTitle: match?.title || blockType?.title,
- editorMode,
isSubtreeDisabled:
blockEditingMode === 'disabled' &&
isBlockSubtreeDisabled( clientId ),
hasOverlay:
__unstableHasActiveBlockOverlayActive( clientId ) &&
! isDragging(),
- initialPosition:
- _isSelected &&
- ( editorMode === 'edit' || editorMode === 'zoom-out' ) // Don't recalculate the initialPosition when toggling in/out of zoom-out mode
- ? getSelectedBlocksInitialCaretPosition()
- : undefined,
+ initialPosition: _isSelected
+ ? getSelectedBlocksInitialCaretPosition()
+ : undefined,
isHighlighted: isBlockHighlighted( clientId ),
isMultiSelected,
isPartiallySelected:
@@ -694,13 +722,6 @@ function BlockListBlockProvider( props ) {
! __unstableSelectionHasUnmergeableBlock(),
isDragging: isBlockBeingDragged( clientId ),
hasChildSelected: isAncestorOfSelectedBlock,
- isBlockMovingMode: !! movingClientId,
- canInsertMovingBlock:
- movingClientId &&
- canInsertBlockType(
- getBlockName( movingClientId ),
- rootClientId
- ),
isEditingDisabled: blockEditingMode === 'disabled',
hasEditableOutline:
blockEditingMode !== 'disabled' &&
@@ -730,7 +751,6 @@ function BlockListBlockProvider( props ) {
themeSupportsLayout,
isTemporarilyEditingAsBlocks,
blockEditingMode,
- editorMode,
mayDisplayControls,
mayDisplayParentControls,
index,
@@ -745,9 +765,7 @@ function BlockListBlockProvider( props ) {
isReusable,
isDragging,
hasChildSelected,
- isBlockMovingMode,
- canInsertMovingBlock,
- templateLock,
+ isSectionBlock,
isEditingDisabled,
hasEditableOutline,
className,
@@ -785,16 +803,13 @@ function BlockListBlockProvider( props ) {
hasOverlay,
initialPosition,
blockEditingMode,
- editorMode,
isHighlighted,
isMultiSelected,
isPartiallySelected,
isReusable,
isDragging,
hasChildSelected,
- isBlockMovingMode,
- canInsertMovingBlock,
- templateLock,
+ isSectionBlock,
isEditingDisabled,
hasEditableOutline,
isTemporarilyEditingAsBlocks,
diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss
index 3f4b4c508aeb02..6a88813b0c6049 100644
--- a/packages/block-editor/src/components/block-list/content.scss
+++ b/packages/block-editor/src/components/block-list/content.scss
@@ -80,7 +80,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
// since things like border-radius need to be able to be set on the block itself.
.block-editor-block-list__block.is-highlighted,
.block-editor-block-list__block.is-highlighted ~ .is-multi-selected,
- &.is-navigate-mode .block-editor-block-list__block.is-selected,
.block-editor-block-list__block:not([contenteditable="true"]):focus {
outline: none;
@@ -92,56 +91,12 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
}
}
- // Moving blocks using keyboard (Ellipsis > Move).
- & .is-block-moving-mode.block-editor-block-list__block.is-selected {
-
- &::after {
- content: "";
- position: absolute;
- z-index: 0;
- pointer-events: none;
- transition:
- border-color 0.1s linear,
- border-style 0.1s linear,
- box-shadow 0.1s linear;
- right: 0;
- left: 0;
- top: -$default-block-margin * 0.5;
- border-radius: $radius-small;
- border-top: 4px solid $gray-400;
- bottom: auto;
- box-shadow: none;
- }
- }
-
- & .is-block-moving-mode.can-insert-moving-block.block-editor-block-list__block.is-selected {
- &::after {
- border-color: var(--wp-admin-theme-color);
- }
- }
-
- // Ensure an accurate partial text selection.
- // To do this, we disable text selection on the main container, then re-enable it only on the
- // elements that actually get selected.
- // To keep in mind: user-select is currently inherited to all nodes inside.
- .has-multi-selection & {
- user-select: none;
- }
-
// Re-enable it on components inside.
[class^="components-"] {
user-select: text;
}
}
-.is-block-moving-mode.block-editor-block-list__block-selection-button {
- // Should be invisible but not unfocusable.
- opacity: 0;
- font-size: 1px;
- height: 1px;
- padding: 0;
-}
-
.block-editor-block-list__layout .block-editor-block-list__block {
// With `position: static`, Safari marks a full-width selection rectangle, including margins.
// With `position: relative`, Safari marks an inline selection rectangle, similar to that of
@@ -154,11 +109,9 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
overflow-wrap: break-word;
pointer-events: auto;
- user-select: text;
&.is-editing-disabled {
pointer-events: none;
- user-select: none;
}
&.has-negative-margin {
@@ -223,19 +176,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
background-color: transparent;
}
- // Reusable blocks clickthrough overlays.
- &.is-reusable > .block-editor-inner-blocks > .block-editor-block-list__layout.has-overlay {
- // Remove only the top click overlay.
- &::after {
- display: none;
- }
-
- // Restore it for subsequent.
- .block-editor-block-list__layout.has-overlay::after {
- display: block;
- }
- }
-
// Reusable blocks parent border.
&.is-reusable.has-child-selected::after {
box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
@@ -307,7 +247,7 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
}
}
-.is-root-container:not([inert]) .block-editor-block-list__block.is-reusable.is-selected .block-editor-block-list__block.has-editable-outline::after {
+.is-root-container:not([inert]) .block-editor-block-list__block.is-selected .block-editor-block-list__block.has-editable-outline::after {
animation-name: block-editor-is-editable__animation;
animation-duration: 0.8s;
animation-timing-function: ease-out;
@@ -461,6 +401,18 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
margin-left: -1px;
margin-right: -1px;
transition: background-color 0.3s ease;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: $default-font-size;
+ font-family: $default-font;
+ color: $black;
+ font-weight: normal;
+
+ .is-zoomed-out & {
+ // Scale the font size based on the zoom level.
+ font-size: calc(#{$default-font-size} * ( 2 - var(--wp-block-editor-iframe-zoom-out-scale) ));
+ }
&.is-dragged-over {
background: $gray-400;
diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
index ea6128f1534642..e2e019d4a9bf69 100644
--- a/packages/block-editor/src/components/block-list/index.js
+++ b/packages/block-editor/src/components/block-list/index.js
@@ -47,26 +47,17 @@ const pendingBlockVisibilityUpdatesPerRegistry = new WeakMap();
function Root( { className, ...settings } ) {
const isLargeViewport = useViewportMatch( 'medium' );
- const {
- isOutlineMode,
- isFocusMode,
- editorMode,
- temporarilyEditingAsBlocks,
- } = useSelect( ( select ) => {
- const {
- getSettings,
- __unstableGetEditorMode,
- getTemporarilyEditingAsBlocks,
- isTyping,
- } = unlock( select( blockEditorStore ) );
- const { outlineMode, focusMode } = getSettings();
- return {
- isOutlineMode: outlineMode && ! isTyping(),
- isFocusMode: focusMode,
- editorMode: __unstableGetEditorMode(),
- temporarilyEditingAsBlocks: getTemporarilyEditingAsBlocks(),
- };
- }, [] );
+ const { isOutlineMode, isFocusMode, temporarilyEditingAsBlocks } =
+ useSelect( ( select ) => {
+ const { getSettings, getTemporarilyEditingAsBlocks, isTyping } =
+ unlock( select( blockEditorStore ) );
+ const { outlineMode, focusMode } = getSettings();
+ return {
+ isOutlineMode: outlineMode && ! isTyping(),
+ isFocusMode: focusMode,
+ temporarilyEditingAsBlocks: getTemporarilyEditingAsBlocks(),
+ };
+ }, [] );
const registry = useRegistry();
const { setBlockVisibility } = useDispatch( blockEditorStore );
@@ -115,7 +106,6 @@ function Root( { className, ...settings } ) {
className: clsx( 'is-root-container', className, {
'is-outline-mode': isOutlineMode,
'is-focus-mode': isFocusMode && isLargeViewport,
- 'is-navigate-mode': editorMode === 'navigation',
} ),
},
settings
@@ -192,7 +182,8 @@ function Items( {
getTemplateLock,
getBlockEditingMode,
__unstableGetEditorMode,
- } = select( blockEditorStore );
+ isSectionBlock,
+ } = unlock( select( blockEditorStore ) );
const _order = getBlockOrder( rootClientId );
@@ -211,15 +202,16 @@ function Items( {
visibleBlocks: __unstableGetVisibleBlocks(),
isZoomOut: __unstableGetEditorMode() === 'zoom-out',
shouldRenderAppender:
+ ! isSectionBlock( rootClientId ) &&
+ getBlockEditingMode( rootClientId ) !== 'disabled' &&
+ ! getTemplateLock( rootClientId ) &&
hasAppender &&
__unstableGetEditorMode() !== 'zoom-out' &&
- ( hasCustomAppender
- ? ! getTemplateLock( rootClientId ) &&
- getBlockEditingMode( rootClientId ) !== 'disabled'
- : rootClientId === selectedBlockClientId ||
- ( ! rootClientId &&
- ! selectedBlockClientId &&
- ! _order.length ) ),
+ ( hasCustomAppender ||
+ rootClientId === selectedBlockClientId ||
+ ( ! rootClientId &&
+ ! selectedBlockClientId &&
+ ! _order.length ) ),
};
},
[ rootClientId, hasAppender, hasCustomAppender ]
diff --git a/packages/block-editor/src/components/block-list/use-block-props/index.js b/packages/block-editor/src/components/block-list/use-block-props/index.js
index c3a279a618b5da..45fc1d9eb5ea12 100644
--- a/packages/block-editor/src/components/block-list/use-block-props/index.js
+++ b/packages/block-editor/src/components/block-list/use-block-props/index.js
@@ -25,7 +25,6 @@ import {
} from '../../block-edit/context';
import { useFocusHandler } from './use-focus-handler';
import { useEventHandlers } from './use-selected-block-event-handlers';
-import { useNavModeExit } from './use-nav-mode-exit';
import { useZoomOutModeExit } from './use-zoom-out-mode-exit';
import { useBlockRefProvider } from './use-block-refs';
import { useIntersectionObserver } from './use-intersection-observer';
@@ -86,7 +85,6 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
name,
blockApiVersion,
blockTitle,
- editorMode,
isSelected,
isSubtreeDisabled,
hasOverlay,
@@ -98,13 +96,11 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
isReusable,
isDragging,
hasChildSelected,
- isBlockMovingMode,
- canInsertMovingBlock,
isEditingDisabled,
hasEditableOutline,
isTemporarilyEditingAsBlocks,
defaultClassName,
- templateLock,
+ isSectionBlock,
} = useContext( PrivateBlockContext );
// translators: %s: Type of block (i.e. Text, Image etc)
@@ -116,15 +112,14 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
useBlockRefProvider( clientId ),
useFocusHandler( clientId ),
useEventHandlers( { clientId, isSelected } ),
- useNavModeExit( clientId ),
- useZoomOutModeExit( { editorMode } ),
+ useZoomOutModeExit(),
useIsHovered( { clientId } ),
useIntersectionObserver(),
useMovingAnimation( { triggerAnimationOnChange: index, clientId } ),
useDisabled( { isDisabled: ! hasOverlay } ),
useFlashEditableBlocks( {
clientId,
- isEnabled: name === 'core/block' || templateLock === 'contentOnly',
+ isEnabled: isSectionBlock,
} ),
useScrollIntoView( { isSelected } ),
] );
@@ -182,8 +177,6 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
'is-reusable': isReusable,
'is-dragging': isDragging,
'has-child-selected': hasChildSelected,
- 'is-block-moving-mode': isBlockMovingMode,
- 'can-insert-moving-block': canInsertMovingBlock,
'is-editing-disabled': isEditingDisabled,
'has-editable-outline': hasEditableOutline,
'has-negative-margin': hasNegativeMargin,
diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js b/packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js
index a6308f48005f9d..27f72d1a100d3e 100644
--- a/packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js
+++ b/packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js
@@ -68,7 +68,6 @@ export function useFocusFirstElement( { clientId, initialPosition } ) {
textInputs[ isReverse ? textInputs.length - 1 : 0 ] || ref.current;
if ( ! isInsideRootBlock( ref.current, target ) ) {
- ownerDocument.defaultView.getSelection().removeAllRanges();
ref.current.focus();
return;
}
diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-nav-mode-exit.js b/packages/block-editor/src/components/block-list/use-block-props/use-nav-mode-exit.js
deleted file mode 100644
index aa9c0a630c5bd7..00000000000000
--- a/packages/block-editor/src/components/block-list/use-block-props/use-nav-mode-exit.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useRefEffect } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../../store';
-
-/**
- * Allows navigation mode to be exited by clicking in the selected block.
- *
- * @param {string} clientId Block client ID.
- */
-export function useNavModeExit( clientId ) {
- const { isNavigationMode, isBlockSelected } = useSelect( blockEditorStore );
- const { setNavigationMode, selectBlock } = useDispatch( blockEditorStore );
- return useRefEffect(
- ( node ) => {
- function onMouseDown( event ) {
- // Don't select a block if it's already handled by a child
- // block.
- if ( isNavigationMode() && ! event.defaultPrevented ) {
- // Prevent focus from moving to the block.
- event.preventDefault();
-
- // When clicking on a selected block, exit navigation mode.
- if ( isBlockSelected( clientId ) ) {
- setNavigationMode( false );
- } else {
- selectBlock( clientId );
- }
- }
- }
-
- node.addEventListener( 'mousedown', onMouseDown );
-
- return () => {
- node.removeEventListener( 'mousedown', onMouseDown );
- };
- },
- [ clientId, isNavigationMode, isBlockSelected, setNavigationMode ]
- );
-}
diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-zoom-out-mode-exit.js b/packages/block-editor/src/components/block-list/use-block-props/use-zoom-out-mode-exit.js
index d0001bd3b33c68..494694952110bb 100644
--- a/packages/block-editor/src/components/block-list/use-block-props/use-zoom-out-mode-exit.js
+++ b/packages/block-editor/src/components/block-list/use-block-props/use-zoom-out-mode-exit.js
@@ -12,22 +12,27 @@ import { unlock } from '../../../lock-unlock';
/**
* Allows Zoom Out mode to be exited by double clicking in the selected block.
- *
- * @param {string} clientId Block client ID.
*/
-export function useZoomOutModeExit( { editorMode } ) {
- const { getSettings } = useSelect( blockEditorStore );
- const { __unstableSetEditorMode } = unlock(
+export function useZoomOutModeExit() {
+ const { getSettings, isZoomOut, __unstableGetEditorMode } = unlock(
+ useSelect( blockEditorStore )
+ );
+
+ const { __unstableSetEditorMode, resetZoomLevel } = unlock(
useDispatch( blockEditorStore )
);
return useRefEffect(
( node ) => {
- if ( editorMode !== 'zoom-out' ) {
- return;
- }
-
function onDoubleClick( event ) {
+ // In "compose" mode.
+ const composeMode =
+ __unstableGetEditorMode() === 'zoom-out' && isZoomOut();
+
+ if ( ! composeMode ) {
+ return;
+ }
+
if ( ! event.defaultPrevented ) {
event.preventDefault();
@@ -39,6 +44,7 @@ export function useZoomOutModeExit( { editorMode } ) {
__experimentalSetIsInserterOpened( false );
}
__unstableSetEditorMode( 'edit' );
+ resetZoomLevel();
}
}
@@ -48,6 +54,12 @@ export function useZoomOutModeExit( { editorMode } ) {
node.removeEventListener( 'dblclick', onDoubleClick );
};
},
- [ editorMode, getSettings, __unstableSetEditorMode ]
+ [
+ getSettings,
+ __unstableSetEditorMode,
+ __unstableGetEditorMode,
+ isZoomOut,
+ resetZoomLevel,
+ ]
);
}
diff --git a/packages/block-editor/src/components/block-list/use-in-between-inserter.js b/packages/block-editor/src/components/block-list/use-in-between-inserter.js
index bb307816fd1501..2b76804785a576 100644
--- a/packages/block-editor/src/components/block-list/use-in-between-inserter.js
+++ b/packages/block-editor/src/components/block-list/use-in-between-inserter.js
@@ -11,6 +11,7 @@ import { isRTL } from '@wordpress/i18n';
*/
import { store as blockEditorStore } from '../../store';
import { InsertionPointOpenRef } from '../block-tools/insertion-point';
+import { unlock } from '../../lock-unlock';
export function useInBetweenInserter() {
const openRef = useContext( InsertionPointOpenRef );
@@ -31,7 +32,8 @@ export function useInBetweenInserter() {
getBlockEditingMode,
getBlockName,
getBlockAttributes,
- } = useSelect( blockEditorStore );
+ getParentSectionBlock,
+ } = unlock( useSelect( blockEditorStore ) );
const { showInsertionPoint, hideInsertionPoint } =
useDispatch( blockEditorStore );
@@ -133,7 +135,8 @@ export function useInBetweenInserter() {
const clientId = element.id.slice( 'block-'.length );
if (
! clientId ||
- __unstableIsWithinBlockOverlay( clientId )
+ __unstableIsWithinBlockOverlay( clientId ) ||
+ !! getParentSectionBlock( clientId )
) {
return;
}
diff --git a/packages/block-editor/src/components/block-list/zoom-out-separator.js b/packages/block-editor/src/components/block-list/zoom-out-separator.js
index be5af549630607..9e0d087c2267cd 100644
--- a/packages/block-editor/src/components/block-list/zoom-out-separator.js
+++ b/packages/block-editor/src/components/block-list/zoom-out-separator.js
@@ -13,6 +13,7 @@ import {
import { useReducedMotion } from '@wordpress/compose';
import { useSelect } from '@wordpress/data';
import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
@@ -29,14 +30,16 @@ export function ZoomOutSeparator( {
const {
sectionRootClientId,
sectionClientIds,
- blockInsertionPoint,
+ insertionPoint,
blockInsertionPointVisible,
+ blockInsertionPoint,
} = useSelect( ( select ) => {
const {
- getBlockInsertionPoint,
+ getInsertionPoint,
getBlockOrder,
- isBlockInsertionPointVisible,
getSectionRootClientId,
+ isBlockInsertionPointVisible,
+ getBlockInsertionPoint,
} = unlock( select( blockEditorStore ) );
const root = getSectionRootClientId();
@@ -45,6 +48,7 @@ export function ZoomOutSeparator( {
sectionRootClientId: root,
sectionClientIds: sectionRootClientIds,
blockOrder: getBlockOrder( root ),
+ insertionPoint: getInsertionPoint(),
blockInsertionPoint: getBlockInsertionPoint(),
blockInsertionPointVisible: isBlockInsertionPointVisible(),
};
@@ -67,17 +71,30 @@ export function ZoomOutSeparator( {
return null;
}
+ const hasTopInsertionPoint =
+ insertionPoint?.index === 0 &&
+ clientId === sectionClientIds[ insertionPoint.index ];
+ const hasBottomInsertionPoint =
+ insertionPoint &&
+ insertionPoint.hasOwnProperty( 'index' ) &&
+ clientId === sectionClientIds[ insertionPoint.index - 1 ];
+ // We want to show the zoom out separator in either of these conditions:
+ // 1. If the inserter has an insertion index set
+ // 2. We are dragging a pattern over an insertion point
if ( position === 'top' ) {
isVisible =
- blockInsertionPointVisible &&
- blockInsertionPoint.index === 0 &&
- clientId === sectionClientIds[ blockInsertionPoint.index ];
+ hasTopInsertionPoint ||
+ ( blockInsertionPointVisible &&
+ blockInsertionPoint.index === 0 &&
+ clientId === sectionClientIds[ blockInsertionPoint.index ] );
}
if ( position === 'bottom' ) {
isVisible =
- blockInsertionPointVisible &&
- clientId === sectionClientIds[ blockInsertionPoint.index - 1 ];
+ hasBottomInsertionPoint ||
+ ( blockInsertionPointVisible &&
+ clientId ===
+ sectionClientIds[ blockInsertionPoint.index - 1 ] );
}
return (
@@ -103,7 +120,19 @@ export function ZoomOutSeparator( {
data-is-insertion-point="true"
onDragOver={ () => setIsDraggedOver( true ) }
onDragLeave={ () => setIsDraggedOver( false ) }
- >
+ >
+
+ { __( 'Drop pattern.' ) }
+
+
) }
);
diff --git a/packages/block-editor/src/components/block-navigation/dropdown.js b/packages/block-editor/src/components/block-navigation/dropdown.js
index 035a38604b0293..0bf8fd05320188 100644
--- a/packages/block-editor/src/components/block-navigation/dropdown.js
+++ b/packages/block-editor/src/components/block-navigation/dropdown.js
@@ -27,8 +27,7 @@ function BlockNavigationDropdownToggle( {
} ) {
return (
{
+ const { parentClientId, isVisible } = useSelect( ( select ) => {
const {
getBlockName,
getBlockParents,
getSelectedBlockClientId,
getBlockEditingMode,
- } = select( blockEditorStore );
+ getParentSectionBlock,
+ } = unlock( select( blockEditorStore ) );
const { hasBlockSupport } = select( blocksStore );
const selectedBlockClientId = getSelectedBlockClientId();
+ const parentSection = getParentSectionBlock( selectedBlockClientId );
const parents = getBlockParents( selectedBlockClientId );
- const _firstParentClientId = parents[ parents.length - 1 ];
- const parentBlockName = getBlockName( _firstParentClientId );
+ const _parentClientId = parentSection ?? parents[ parents.length - 1 ];
+ const parentBlockName = getBlockName( _parentClientId );
const _parentBlockType = getBlockType( parentBlockName );
return {
- firstParentClientId: _firstParentClientId,
+ parentClientId: _parentClientId,
isVisible:
- _firstParentClientId &&
- getBlockEditingMode( _firstParentClientId ) === 'default' &&
+ _parentClientId &&
+ getBlockEditingMode( _parentClientId ) !== 'disabled' &&
hasBlockSupport(
_parentBlockType,
'__experimentalParentSelector',
@@ -48,7 +51,7 @@ export default function BlockParentSelector() {
),
};
}, [] );
- const blockInformation = useBlockDisplayInformation( firstParentClientId );
+ const blockInformation = useBlockDisplayInformation( parentClientId );
// Allows highlighting the parent block outline when focusing or hovering
// the parent block selector within the child.
@@ -65,13 +68,13 @@ export default function BlockParentSelector() {
return (
selectBlock( firstParentClientId ) }
+ onClick={ () => selectBlock( parentClientId ) }
label={ sprintf(
/* translators: %s: Name of the block's parent. */
__( 'Select parent block: %s' ),
diff --git a/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js b/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js
index c551c2e1632bcf..d571e0fef5dcc3 100644
--- a/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js
+++ b/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js
@@ -18,8 +18,7 @@ import { VIEWMODES } from './constants';
const Actions = ( { onBlockPatternSelect } ) => (
@@ -36,8 +35,7 @@ const CarouselNavigation = ( {
} ) => (
setViewMode( VIEWMODES.carousel ) }
isPressed={ isCarouselView }
/>
setViewMode( VIEWMODES.grid ) }
diff --git a/packages/block-editor/src/components/block-patterns-paging/index.js b/packages/block-editor/src/components/block-patterns-paging/index.js
index ce1fa8b93df735..e4d7ce49b90f3e 100644
--- a/packages/block-editor/src/components/block-patterns-paging/index.js
+++ b/packages/block-editor/src/components/block-patterns-paging/index.js
@@ -38,24 +38,24 @@ export default function Pagination( {
className="block-editor-patterns__grid-pagination-previous"
>
changePage( 1 ) }
disabled={ currentPage === 1 }
aria-label={ __( 'First page' ) }
+ size="compact"
accessibleWhenDisabled
+ className="block-editor-patterns__grid-pagination-button"
>
Ā«
changePage( currentPage - 1 ) }
disabled={ currentPage === 1 }
aria-label={ __( 'Previous page' ) }
+ size="compact"
accessibleWhenDisabled
+ className="block-editor-patterns__grid-pagination-button"
>
ā¹
@@ -74,13 +74,13 @@ export default function Pagination( {
className="block-editor-patterns__grid-pagination-next"
>
changePage( currentPage + 1 ) }
disabled={ currentPage === numPages }
aria-label={ __( 'Next page' ) }
+ size="compact"
accessibleWhenDisabled
+ className="block-editor-patterns__grid-pagination-button"
>
āŗ
@@ -89,8 +89,9 @@ export default function Pagination( {
onClick={ () => changePage( numPages ) }
disabled={ currentPage === numPages }
aria-label={ __( 'Last page' ) }
- size="default"
+ size="compact"
accessibleWhenDisabled
+ className="block-editor-patterns__grid-pagination-button"
>
Ā»
diff --git a/packages/block-editor/src/components/block-patterns-paging/style.scss b/packages/block-editor/src/components/block-patterns-paging/style.scss
index f5f34d821233aa..85d39f9a36577c 100644
--- a/packages/block-editor/src/components/block-patterns-paging/style.scss
+++ b/packages/block-editor/src/components/block-patterns-paging/style.scss
@@ -4,37 +4,20 @@
border-top: 1px solid $gray-800;
padding: $grid-unit-05;
justify-content: center;
- .components-button.is-tertiary {
- width: auto;
- height: $button-size-compact;
- justify-content: center;
-
- &:disabled {
- color: $gray-600;
- background: none;
- }
-
- &:hover:not(:disabled) {
- color: $white;
- background-color: $gray-700;
- }
- }
}
}
.show-icon-labels {
- .block-editor-patterns__grid-pagination {
- .components-button {
- width: auto;
- // Hide the button icons when labels are set to display...
- span {
- display: none;
- }
- // ... and display labels.
- // Uses ::before as ::after is already used for active tab styling.
- &::before {
- content: attr(aria-label);
- }
+ .block-editor-patterns__grid-pagination-button {
+ width: auto;
+ // Hide the button icons when labels are set to display...
+ span {
+ display: none;
+ }
+ // ... and display labels.
+ // Uses ::before as ::after is already used for active tab styling.
+ &::before {
+ content: attr(aria-label);
}
}
}
diff --git a/packages/block-editor/src/components/block-quick-navigation/index.js b/packages/block-editor/src/components/block-quick-navigation/index.js
index 4f22c2a266722d..fdb3475b3e180f 100644
--- a/packages/block-editor/src/components/block-quick-navigation/index.js
+++ b/packages/block-editor/src/components/block-quick-navigation/index.js
@@ -59,8 +59,7 @@ function BlockQuickNavigationItem( { clientId, onSelect } ) {
return (
{
await selectBlock( clientId );
diff --git a/packages/block-editor/src/components/block-settings-menu-controls/index.js b/packages/block-editor/src/components/block-settings-menu-controls/index.js
index 39063db4f52e02..4ebce4172e9b37 100644
--- a/packages/block-editor/src/components/block-settings-menu-controls/index.js
+++ b/packages/block-editor/src/components/block-settings-menu-controls/index.js
@@ -4,12 +4,9 @@
import {
createSlotFill,
MenuGroup,
- MenuItem,
__experimentalStyleProvider as StyleProvider,
} from '@wordpress/components';
import { useSelect } from '@wordpress/data';
-import { pipe } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
@@ -96,18 +93,6 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
/>
) }
{ fills }
- { fillProps?.canMove &&
- ! fillProps?.onlyBlock &&
- ! isContentOnly && (
-
- { __( 'Move to' ) }
-
- ) }
{ selectedClientIds.length === 1 && (
{
const {
- getBlockCount,
getBlockName,
getBlockRootClientId,
getPreviousBlockClientId,
@@ -86,7 +84,6 @@ export function BlockSettingsDropdown( {
return {
firstParentClientId: _firstParentClientId,
- onlyBlock: 1 === getBlockCount( _firstParentClientId ),
parentBlockType:
_firstParentClientId &&
( getActiveBlockVariation(
@@ -186,6 +183,9 @@ export function BlockSettingsDropdown( {
}
}
+ const shouldShowBlockParentMenuItem =
+ ! parentBlockIsSelected && !! firstParentClientId;
+
return (
(
-
- { ( { onClose } ) => (
- <>
-
- <__unstableBlockSettingsMenuFirstItem.Slot
- fillProps={ { onClose } }
- />
- { ! parentBlockIsSelected &&
- !! firstParentClientId && (
+ } ) => {
+ // It is possible that some plugins register fills for this menu
+ // even if Core doesn't render anything in the block settings menu.
+ // in which case, we may want to render the menu anyway.
+ // That said for now, we can start more conservative.
+ const isEmpty =
+ ! canRemove &&
+ ! canDuplicate &&
+ ! canInsertBlock &&
+ isContentOnly;
+
+ if ( isEmpty ) {
+ return null;
+ }
+
+ return (
+
+ { ( { onClose } ) => (
+ <>
+
+ <__unstableBlockSettingsMenuFirstItem.Slot
+ fillProps={ { onClose } }
+ />
+ { shouldShowBlockParentMenuItem && (
- { __( 'Duplicate' ) }
-
- ) }
- { canInsertBlock && ! isContentOnly && (
- <>
+ { count === 1 && (
+
- { __( 'Add before' ) }
+ { __( 'Duplicate' ) }
+
+ ) }
+ { canInsertBlock && ! isContentOnly && (
+ <>
+
+ { __( 'Add before' ) }
+
+
+ { __( 'Add after' ) }
+
+
+ ) }
+
+ { canCopyStyles && ! isContentOnly && (
+
+
+ { __( 'Paste styles' ) }
+
+ ) }
+
- { __( 'Add after' ) }
+ { __( 'Delete' ) }
-
+
) }
-
- { canCopyStyles && ! isContentOnly && (
-
-
- { __( 'Paste styles' ) }
-
-
- ) }
-
-
- { __( 'Delete' ) }
-
-
- ) }
-
- ) }
-
- ) }
+
+ ) }
+
+ );
+ } }
);
}
diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js
index 98e7f7b2d21420..79f33bd30d7537 100644
--- a/packages/block-editor/src/components/block-switcher/index.js
+++ b/packages/block-editor/src/components/block-switcher/index.js
@@ -35,36 +35,40 @@ function BlockSwitcherDropdownMenuContents( {
clientIds,
hasBlockStyles,
canRemove,
- isUsingBindings,
} ) {
const { replaceBlocks, multiSelect, updateBlockAttributes } =
useDispatch( blockEditorStore );
- const { possibleBlockTransformations, patterns, blocks } = useSelect(
- ( select ) => {
- const {
- getBlocksByClientId,
- getBlockRootClientId,
- getBlockTransformItems,
- __experimentalGetPatternTransformItems,
- } = select( blockEditorStore );
- const rootClientId = getBlockRootClientId(
- Array.isArray( clientIds ) ? clientIds[ 0 ] : clientIds
- );
- const _blocks = getBlocksByClientId( clientIds );
- return {
- blocks: _blocks,
- possibleBlockTransformations: getBlockTransformItems(
- _blocks,
- rootClientId
- ),
- patterns: __experimentalGetPatternTransformItems(
- _blocks,
- rootClientId
- ),
- };
- },
- [ clientIds ]
- );
+ const { possibleBlockTransformations, patterns, blocks, isUsingBindings } =
+ useSelect(
+ ( select ) => {
+ const {
+ getBlockAttributes,
+ getBlocksByClientId,
+ getBlockRootClientId,
+ getBlockTransformItems,
+ __experimentalGetPatternTransformItems,
+ } = select( blockEditorStore );
+ const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
+ const _blocks = getBlocksByClientId( clientIds );
+ return {
+ blocks: _blocks,
+ possibleBlockTransformations: getBlockTransformItems(
+ _blocks,
+ rootClientId
+ ),
+ patterns: __experimentalGetPatternTransformItems(
+ _blocks,
+ rootClientId
+ ),
+ isUsingBindings: clientIds.every(
+ ( clientId ) =>
+ !! getBlockAttributes( clientId )?.metadata
+ ?.bindings
+ ),
+ };
+ },
+ [ clientIds ]
+ );
const blockVariationTransformations = useBlockVariationTransforms( {
clientIds,
blocks,
@@ -196,7 +200,7 @@ const BlockIndicator = ( { icon, showTitle, blockTitle } ) => (
);
-export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
+export const BlockSwitcher = ( { clientIds } ) => {
const {
hasContentOnlyLocking,
canRemove,
@@ -205,6 +209,7 @@ export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
invalidBlocks,
isReusable,
isTemplate,
+ isDisabled,
} = useSelect(
( select ) => {
const {
@@ -212,6 +217,7 @@ export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
getBlocksByClientId,
getBlockAttributes,
canRemoveBlocks,
+ getBlockEditingMode,
} = select( blockEditorStore );
const { getBlockStyles, getBlockType, getActiveBlockVariation } =
select( blocksStore );
@@ -222,6 +228,7 @@ export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
const [ { name: firstBlockName } ] = _blocks;
const _isSingleBlockSelected = _blocks.length === 1;
const blockType = getBlockType( firstBlockName );
+ const editingMode = getBlockEditingMode( clientIds[ 0 ] );
let _icon;
let _hasTemplateLock;
@@ -256,6 +263,7 @@ export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
isTemplate:
_isSingleBlockSelected && isTemplatePart( _blocks[ 0 ] ),
hasContentOnlyLocking: _hasTemplateLock,
+ isDisabled: editingMode !== 'default',
};
},
[ clientIds ]
@@ -275,7 +283,7 @@ export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
: __( 'Multiple blocks selected' );
const hideDropdown =
- disabled ||
+ isDisabled ||
( ! hasBlockStyles && ! canRemove ) ||
hasContentOnlyLocking;
@@ -339,7 +347,6 @@ export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
clientIds={ clientIds }
hasBlockStyles={ hasBlockStyles }
canRemove={ canRemove }
- isUsingBindings={ isUsingBindings }
/>
) }
diff --git a/packages/block-editor/src/components/block-switcher/test/use-transformed.patterns.js b/packages/block-editor/src/components/block-switcher/test/use-transformed.patterns.js
index 05ce545667d464..4d63c763174791 100644
--- a/packages/block-editor/src/components/block-switcher/test/use-transformed.patterns.js
+++ b/packages/block-editor/src/components/block-switcher/test/use-transformed.patterns.js
@@ -20,15 +20,15 @@ describe( 'use-transformed-patterns', () => {
},
content: {
type: 'boolean',
- __experimentalRole: 'content',
+ role: 'content',
},
level: {
type: 'number',
- __experimentalRole: 'content',
+ role: 'content',
},
color: {
type: 'string',
- __experimentalRole: 'other',
+ role: 'other',
},
},
save() {},
diff --git a/packages/block-editor/src/components/block-switcher/test/utils.js b/packages/block-editor/src/components/block-switcher/test/utils.js
index 38009601e16468..eafe5e8a4d9378 100644
--- a/packages/block-editor/src/components/block-switcher/test/utils.js
+++ b/packages/block-editor/src/components/block-switcher/test/utils.js
@@ -18,15 +18,15 @@ describe( 'BlockSwitcher - utils', () => {
},
content: {
type: 'boolean',
- __experimentalRole: 'content',
+ role: 'content',
},
level: {
type: 'number',
- __experimentalRole: 'content',
+ role: 'content',
},
color: {
type: 'string',
- __experimentalRole: 'other',
+ role: 'other',
},
},
save() {},
diff --git a/packages/block-editor/src/components/block-switcher/utils.js b/packages/block-editor/src/components/block-switcher/utils.js
index ebd95fc460e33e..49257a2126cbe5 100644
--- a/packages/block-editor/src/components/block-switcher/utils.js
+++ b/packages/block-editor/src/components/block-switcher/utils.js
@@ -1,7 +1,7 @@
/**
* WordPress dependencies
*/
-import { __experimentalGetBlockAttributesNamesByRole as getBlockAttributesNamesByRole } from '@wordpress/blocks';
+import { getBlockAttributesNamesByRole } from '@wordpress/blocks';
/**
* Try to find a matching block by a block's name in a provided
diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
index 6c4789cb2924f2..2ac2cbb12ff352 100644
--- a/packages/block-editor/src/components/block-toolbar/index.js
+++ b/packages/block-editor/src/components/block-toolbar/index.js
@@ -35,6 +35,7 @@ import { store as blockEditorStore } from '../../store';
import __unstableBlockNameContext from './block-name-context';
import NavigableToolbar from '../navigable-toolbar';
import { useHasBlockToolbar } from './use-has-block-toolbar';
+import { unlock } from '../../lock-unlock';
/**
* Renders the block toolbar.
@@ -58,7 +59,6 @@ export function PrivateBlockToolbar( {
const {
blockClientId,
blockClientIds,
- isContentOnlyEditingMode,
isDefaultEditingMode,
blockType,
toolbarKey,
@@ -78,12 +78,14 @@ export function PrivateBlockToolbar( {
getBlockAttributes,
getBlockParentsByBlockName,
getTemplateLock,
- } = select( blockEditorStore );
+ getParentSectionBlock,
+ } = unlock( select( blockEditorStore ) );
const selectedBlockClientIds = getSelectedBlockClientIds();
const selectedBlockClientId = selectedBlockClientIds[ 0 ];
const parents = getBlockParents( selectedBlockClientId );
- const firstParentClientId = parents[ parents.length - 1 ];
- const parentBlockName = getBlockName( firstParentClientId );
+ const parentSection = getParentSectionBlock( selectedBlockClientId );
+ const parentClientId = parentSection ?? parents[ parents.length - 1 ];
+ const parentBlockName = getBlockName( parentClientId );
const parentBlockType = getBlockType( parentBlockName );
const editingMode = getBlockEditingMode( selectedBlockClientId );
const _isDefaultEditingMode = editingMode === 'default';
@@ -112,21 +114,19 @@ export function PrivateBlockToolbar( {
return {
blockClientId: selectedBlockClientId,
blockClientIds: selectedBlockClientIds,
- isContentOnlyEditingMode: editingMode === 'contentOnly',
isDefaultEditingMode: _isDefaultEditingMode,
blockType: selectedBlockClientId && getBlockType( _blockName ),
shouldShowVisualToolbar: isValid && isVisual,
- toolbarKey: `${ selectedBlockClientId }${ firstParentClientId }`,
+ toolbarKey: `${ selectedBlockClientId }${ parentClientId }`,
showParentSelector:
parentBlockType &&
- getBlockEditingMode( firstParentClientId ) === 'default' &&
+ getBlockEditingMode( parentClientId ) !== 'disabled' &&
hasBlockSupport(
parentBlockType,
'__experimentalParentSelector',
true
) &&
- selectedBlockClientIds.length === 1 &&
- _isDefaultEditingMode,
+ selectedBlockClientIds.length === 1,
isUsingBindings: _isUsingBindings,
hasParentPattern: _hasParentPattern,
hasContentOnlyLocking: _hasTemplateLock,
@@ -179,36 +179,26 @@ export function PrivateBlockToolbar( {
key={ toolbarKey }
>
- { ! isMultiToolbar &&
- isLargeViewport &&
- isDefaultEditingMode &&
}
+ { ! isMultiToolbar && isLargeViewport && (
+
+ ) }
{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
- ( isDefaultEditingMode ||
- ( isContentOnlyEditingMode && ! hasParentPattern ) ||
- isSynced ) && (
+ ! hasParentPattern && (
-
) }
@@ -242,9 +232,7 @@ export function PrivateBlockToolbar( {
) }
- { isDefaultEditingMode && (
-
- ) }
+
-
-
-
- { showBlockDraggable && (
-
-
- { ( draggableProps ) => (
-
-
- ) }
- { editorMode === 'navigation' && (
-
- setNavigationMode( false )
- : undefined
- }
- onKeyDown={ onKeyDown }
- label={ label }
- showTooltip={ false }
- className="block-selection-button_select-button"
- >
-
-
- ) }
-
-
- );
-}
-
-export default forwardRef( BlockSelectionButton );
diff --git a/packages/block-editor/src/components/block-tools/block-toolbar-breadcrumb.js b/packages/block-editor/src/components/block-tools/block-toolbar-breadcrumb.js
deleted file mode 100644
index ae03bdb4f51647..00000000000000
--- a/packages/block-editor/src/components/block-tools/block-toolbar-breadcrumb.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import BlockSelectionButton from './block-selection-button';
-import { PrivateBlockPopover } from '../block-popover';
-import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
-import useSelectedBlockToolProps from './use-selected-block-tool-props';
-
-function BlockToolbarBreadcrumb( { clientId, __unstableContentRef }, ref ) {
- const {
- capturingClientId,
- isInsertionPointVisible,
- lastClientId,
- rootClientId,
- } = useSelectedBlockToolProps( clientId );
-
- const popoverProps = useBlockToolbarPopoverProps( {
- contentElement: __unstableContentRef?.current,
- clientId,
- } );
-
- return (
-
-
- );
-}
-
-export default forwardRef( BlockToolbarBreadcrumb );
diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js
index 24f60dbbf970aa..bad331561317f8 100644
--- a/packages/block-editor/src/components/block-tools/index.js
+++ b/packages/block-editor/src/components/block-tools/index.js
@@ -19,7 +19,6 @@ import {
default as InsertionPoint,
} from './insertion-point';
import BlockToolbarPopover from './block-toolbar-popover';
-import BlockToolbarBreadcrumb from './block-toolbar-breadcrumb';
import ZoomOutPopover from './zoom-out-popover';
import { store as blockEditorStore } from '../../store';
import usePopoverScroll from '../block-popover/use-popover-scroll';
@@ -35,7 +34,8 @@ function selector( select ) {
getSettings,
__unstableGetEditorMode,
isTyping,
- } = select( blockEditorStore );
+ isDragging,
+ } = unlock( select( blockEditorStore ) );
const clientId =
getSelectedBlockClientId() || getFirstMultiSelectedBlockClientId();
@@ -47,6 +47,7 @@ function selector( select ) {
hasFixedToolbar: getSettings().hasFixedToolbar,
isTyping: isTyping(),
isZoomOutMode: editorMode === 'zoom-out',
+ isDragging: isDragging(),
};
}
@@ -64,10 +65,9 @@ export default function BlockTools( {
__unstableContentRef,
...props
} ) {
- const { clientId, hasFixedToolbar, isTyping, isZoomOutMode } = useSelect(
- selector,
- []
- );
+ const { clientId, hasFixedToolbar, isTyping, isZoomOutMode, isDragging } =
+ useSelect( selector, [] );
+
const isMatch = useShortcutEventMatch();
const {
getBlocksByClientId,
@@ -78,7 +78,6 @@ export default function BlockTools( {
const { getGroupingBlockName } = useSelect( blocksStore );
const {
showEmptyBlockSideInserter,
- showBreadcrumb,
showBlockToolbarPopover,
showZoomOutToolbar,
} = useShowBlockTools();
@@ -223,14 +222,6 @@ export default function BlockTools( {
/>
) }
- { showBreadcrumb && (
- {
- setZoomOutModeInserterButtonHovered( true );
- } }
- onMouseOut={ () => {
- setZoomOutModeInserterButtonHovered( false );
- } }
label={ _x(
'Add pattern',
'Generic label for pattern inserter button'
diff --git a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
index 79f8be3f9cfe97..c279cb36782028 100644
--- a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
+++ b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
@@ -16,41 +16,39 @@ function ZoomOutModeInserters() {
const [ isReady, setIsReady ] = useState( false );
const {
hasSelection,
- blockInsertionPoint,
+ insertionPoint,
blockOrder,
blockInsertionPointVisible,
setInserterIsOpened,
sectionRootClientId,
selectedBlockClientId,
- hoveredBlockClientId,
} = useSelect( ( select ) => {
const {
getSettings,
- getBlockInsertionPoint,
+ getInsertionPoint,
getBlockOrder,
getSelectionStart,
getSelectedBlockClientId,
- getHoveredBlockClientId,
- isBlockInsertionPointVisible,
getSectionRootClientId,
+ isBlockInsertionPointVisible,
} = unlock( select( blockEditorStore ) );
const root = getSectionRootClientId();
return {
hasSelection: !! getSelectionStart().clientId,
- blockInsertionPoint: getBlockInsertionPoint(),
+ insertionPoint: getInsertionPoint(),
blockOrder: getBlockOrder( root ),
blockInsertionPointVisible: isBlockInsertionPointVisible(),
sectionRootClientId: root,
setInserterIsOpened:
getSettings().__experimentalSetIsInserterOpened,
selectedBlockClientId: getSelectedBlockClientId(),
- hoveredBlockClientId: getHoveredBlockClientId(),
};
}, [] );
- const { showInsertionPoint } = useDispatch( blockEditorStore );
+ // eslint-disable-next-line @wordpress/no-unused-vars-before-return
+ const { showInsertionPoint } = unlock( useDispatch( blockEditorStore ) );
// Defer the initial rendering to avoid the jumps due to the animation.
useEffect( () => {
@@ -62,25 +60,20 @@ function ZoomOutModeInserters() {
};
}, [] );
- if ( ! isReady ) {
+ if ( ! isReady || ! hasSelection ) {
return null;
}
return [ undefined, ...blockOrder ].map( ( clientId, index ) => {
const shouldRenderInsertionPoint =
- blockInsertionPointVisible && blockInsertionPoint.index === index;
+ blockInsertionPointVisible && insertionPoint?.index === index;
const previousClientId = clientId;
const nextClientId = blockOrder[ index ];
const isSelected =
- hasSelection &&
- ( selectedBlockClientId === previousClientId ||
- selectedBlockClientId === nextClientId );
-
- const isHovered =
- hoveredBlockClientId === previousClientId ||
- hoveredBlockClientId === nextClientId;
+ selectedBlockClientId === previousClientId ||
+ selectedBlockClientId === nextClientId;
return (
- { ! shouldRenderInsertionPoint && (
+ { ! shouldRenderInsertionPoint && isSelected && (
{
setInserterIsOpened( {
rootClientId: sectionRootClientId,
diff --git a/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js b/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js
index a3c46c4b4c970a..f2c073117d2ce8 100644
--- a/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js
+++ b/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
/**
* WordPress dependencies
*/
@@ -20,13 +15,13 @@ import BlockDraggable from '../block-draggable';
import BlockMover from '../block-mover';
import Shuffle from '../block-toolbar/shuffle';
import NavigableToolbar from '../navigable-toolbar';
+import { unlock } from '../../lock-unlock';
export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
const selected = useSelect(
( select ) => {
const {
getBlock,
- hasBlockMovingClientId,
getNextBlockClientId,
getPreviousBlockClientId,
canRemoveBlock,
@@ -62,7 +57,6 @@ export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
}
return {
- blockMovingMode: hasBlockMovingClientId(),
isBlockTemplatePart,
isNextBlockTemplatePart,
isPrevBlockTemplatePart,
@@ -75,7 +69,6 @@ export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
);
const {
- blockMovingMode,
isBlockTemplatePart,
isNextBlockTemplatePart,
isPrevBlockTemplatePart,
@@ -84,18 +77,15 @@ export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
setIsInserterOpened,
} = selected;
- const { removeBlock, __unstableSetEditorMode } =
- useDispatch( blockEditorStore );
-
- const classNames = clsx( 'zoom-out-toolbar', {
- 'is-block-moving-mode': !! blockMovingMode,
- } );
+ const { removeBlock, __unstableSetEditorMode, resetZoomLevel } = unlock(
+ useDispatch( blockEditorStore )
+ );
const showBlockDraggable = canMove && ! isBlockTemplatePart;
return (
onSelect() }
>
diff --git a/packages/block-editor/src/components/block-variation-transforms/index.js b/packages/block-editor/src/components/block-variation-transforms/index.js
index 97a3f980541842..5850fc52b37b68 100644
--- a/packages/block-editor/src/components/block-variation-transforms/index.js
+++ b/packages/block-editor/src/components/block-variation-transforms/index.js
@@ -21,6 +21,7 @@ import { chevronDown } from '@wordpress/icons';
*/
import BlockIcon from '../block-icon';
import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
function VariationsButtons( {
className,
@@ -35,8 +36,8 @@ function VariationsButtons( {
{ variations.map( ( variation ) => (
+
+This feature is still experimental. āExperimentalā means this is an early implementation subject to drastic and breaking changes.
+
+
FontFamilyControl is a React component that renders a UI that allows users to select a font family.
The component renders a user interface that allows the user to select from a set of predefined font families as defined by the `typography.fontFamilies` presets.
Optionally, you can provide a `fontFamilies` prop that overrides the predefined font families.
@@ -10,7 +14,7 @@ Optionally, you can provide a `fontFamilies` prop that overrides the predefined
```jsx
import { useState } from 'react';
-import { FontFamilyControl } from '@wordpress/block-editor';
+import { __experimentalFontFamilyControl as FontFamilyControl } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
// ...
diff --git a/packages/block-editor/src/components/global-styles/border-panel.js b/packages/block-editor/src/components/global-styles/border-panel.js
index cc7a464f8634a9..aea8e67f5b5944 100644
--- a/packages/block-editor/src/components/global-styles/border-panel.js
+++ b/packages/block-editor/src/components/global-styles/border-panel.js
@@ -2,7 +2,7 @@
* WordPress dependencies
*/
import {
- __experimentalBorderBoxControl as BorderBoxControl,
+ BorderBoxControl,
__experimentalHasSplitBorders as hasSplitBorders,
__experimentalIsDefinedBorder as isDefinedBorder,
__experimentalToolsPanel as ToolsPanel,
diff --git a/packages/block-editor/src/components/global-styles/color-panel.js b/packages/block-editor/src/components/global-styles/color-panel.js
index 87c19adedbb27b..a55a7b331bd0dd 100644
--- a/packages/block-editor/src/components/global-styles/color-panel.js
+++ b/packages/block-editor/src/components/global-styles/color-panel.js
@@ -239,11 +239,7 @@ function ColorPanelDropdown( {
};
return (
-
+
onShadowChange( undefined ) }
>
@@ -80,32 +80,31 @@ export function ShadowPresets( { presets, activeShadow, onSelect } ) {
export function ShadowIndicator( { type, label, isActive, onSelect, shadow } ) {
return (
-
- { isActive &&
- }
- />
+
+
+ { isActive &&
);
}
@@ -143,11 +142,7 @@ function renderShadowToggle() {
};
return (
-
+
{
const {
getBlockName,
- isBlockSelected,
- hasSelectedInnerBlock,
__unstableGetEditorMode,
getTemplateLock,
getBlockRootClientId,
getBlockEditingMode,
getBlockSettings,
- isDragging,
getSectionRootClientId,
} = unlock( select( blockEditorStore ) );
let _isDropZoneDisabled;
@@ -213,8 +210,6 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
const { hasBlockSupport, getBlockType } = select( blocksStore );
const blockName = getBlockName( clientId );
- const enableClickThrough =
- __unstableGetEditorMode() === 'navigation';
const blockEditingMode = getBlockEditingMode( clientId );
const parentClientId = getBlockRootClientId( clientId );
const [ defaultLayout ] = getBlockSettings( clientId, 'layout' );
@@ -236,12 +231,6 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
'__experimentalExposeControlsToChildren',
false
),
- hasOverlay:
- blockName !== 'core/template' &&
- ! isBlockSelected( clientId ) &&
- ! hasSelectedInnerBlock( clientId, true ) &&
- enableClickThrough &&
- ! isDragging(),
name: blockName,
blockType: getBlockType( blockName ),
parentLock: getTemplateLock( parentClientId ),
@@ -254,7 +243,6 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
);
const {
__experimentalCaptureToolbars,
- hasOverlay,
name,
blockType,
parentLock,
@@ -299,10 +287,7 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
className: clsx(
props.className,
'block-editor-block-list__layout',
- __unstableDisableLayoutClassNames ? '' : layoutClassNames,
- {
- 'has-overlay': hasOverlay,
- }
+ __unstableDisableLayoutClassNames ? '' : layoutClassNames
),
children: clientId ? (
-
-
+
{ categories.map( ( category ) => (
-
-
+
) ) }
-
+
{ categories.map( ( category ) => (
-
+
) ) }
-
+
);
}
diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js
index 4a79ad6b1f083c..7c7f836842b418 100644
--- a/packages/block-editor/src/components/inserter/quick-inserter.js
+++ b/packages/block-editor/src/components/inserter/quick-inserter.js
@@ -47,10 +47,11 @@ export default function QuickInserter( {
onInsertBlocks,
true
);
-
const [ patterns ] = usePatternsState(
onInsertBlocks,
- destinationRootClientId
+ destinationRootClientId,
+ undefined,
+ true
);
const { setInserterIsOpened, insertionIndex } = useSelect(
@@ -86,10 +87,10 @@ export default function QuickInserter( {
// the insertion point can work as expected.
const onBrowseAll = () => {
setInserterIsOpened( {
- rootClientId,
- insertionIndex,
filterValue,
onSelect,
+ rootClientId,
+ insertionIndex,
} );
};
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
index 3ce088901bce57..f3fa8d1e7df04b 100644
--- a/packages/block-editor/src/components/inserter/style.scss
+++ b/packages/block-editor/src/components/inserter/style.scss
@@ -257,39 +257,11 @@ $block-inserter-tabs-height: 44px;
svg {
fill: var(--wp-admin-theme-color);
}
-
- &::after {
- content: "";
- display: block;
- outline: none;
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- border-radius: $radius-small;
- opacity: 0.04;
- background: var(--wp-admin-theme-color);
- height: 100%;
- }
- }
-
- &:focus-visible,
- &:focus:not(:disabled) {
- border-radius: $radius-small;
- box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
- // Windows high contrast mode.
- outline: 2px solid transparent;
- outline-offset: 0;
}
&::before {
display: none;
}
-
- &::after {
- display: none;
- }
}
}
diff --git a/packages/block-editor/src/components/inserter/tabs.js b/packages/block-editor/src/components/inserter/tabs.js
deleted file mode 100644
index b46e4bfdaf0148..00000000000000
--- a/packages/block-editor/src/components/inserter/tabs.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
- Button,
- privateApis as componentsPrivateApis,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { forwardRef } from '@wordpress/element';
-import { closeSmall } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-
-const { Tabs } = unlock( componentsPrivateApis );
-
-const blocksTab = {
- name: 'blocks',
- /* translators: Blocks tab title in the block inserter. */
- title: __( 'Blocks' ),
-};
-const patternsTab = {
- name: 'patterns',
- /* translators: Theme and Directory Patterns tab title in the block inserter. */
- title: __( 'Patterns' ),
-};
-
-const mediaTab = {
- name: 'media',
- /* translators: Media tab title in the block inserter. */
- title: __( 'Media' ),
-};
-
-function InserterTabs( { onSelect, children, onClose, selectedTab }, ref ) {
- const tabs = [ blocksTab, patternsTab, mediaTab ];
-
- return (
-
-
-
- onClose() }
- size="small"
- />
-
-
- { tabs.map( ( tab ) => (
-
- { tab.title }
-
- ) ) }
-
-
- { tabs.map( ( tab ) => (
-
- { children }
-
- ) ) }
-
-
- { tabs.map( ( tab ) => (
-
+ showIconLabels ? (
+
+ { tab.title }
+
+ ) : (
+
+
- { showIconLabels && tab.title }
-
- }
- />
- ) ) }
+
+
+ )
+ ) }
)
}
- props
/>
{ errorMessage && (
@@ -475,16 +474,14 @@ function LinkControl( {
className="block-editor-link-control__search-actions"
>
{ __( 'Cancel' ) }
setSettingsOpen( ! settingsOpen ) }
diff --git a/packages/block-editor/src/components/list-view/block-contents.js b/packages/block-editor/src/components/list-view/block-contents.js
index 91bfbd7eddaa03..0ed2b162b127b8 100644
--- a/packages/block-editor/src/components/list-view/block-contents.js
+++ b/packages/block-editor/src/components/list-view/block-contents.js
@@ -1,12 +1,6 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
/**
* WordPress dependencies
*/
-import { useSelect } from '@wordpress/data';
import { forwardRef } from '@wordpress/element';
/**
@@ -14,7 +8,6 @@ import { forwardRef } from '@wordpress/element';
*/
import ListViewBlockSelectButton from './block-select-button';
import BlockDraggable from '../block-draggable';
-import { store as blockEditorStore } from '../../store';
import { useListViewContext } from './context';
const ListViewBlockContents = forwardRef(
@@ -34,29 +27,9 @@ const ListViewBlockContents = forwardRef(
ref
) => {
const { clientId } = block;
-
- const { blockMovingClientId, selectedBlockInBlockEditor } = useSelect(
- ( select ) => {
- const { hasBlockMovingClientId, getSelectedBlockClientId } =
- select( blockEditorStore );
- return {
- blockMovingClientId: hasBlockMovingClientId(),
- selectedBlockInBlockEditor: getSelectedBlockClientId(),
- };
- },
- []
- );
-
const { AdditionalBlockContent, insertedBlock, setInsertedBlock } =
useListViewContext();
- const isBlockMoveTarget =
- blockMovingClientId && selectedBlockInBlockEditor === clientId;
-
- const className = clsx( 'block-editor-list-view-block-contents', {
- 'is-dropping-before': isBlockMoveTarget,
- } );
-
// Only include all selected blocks if the currently clicked on block
// is one of the selected blocks. This ensures that if a user attempts
// to drag a block that isn't part of the selection, they're still able
@@ -82,7 +55,7 @@ const ListViewBlockContents = forwardRef(
{ ( { draggable, onDragStart, onDragEnd } ) => (
) }
-
+
);
}
diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
index 05a04abfd110b4..2916622efabee9 100644
--- a/packages/block-editor/src/components/list-view/style.scss
+++ b/packages/block-editor/src/components/list-view/style.scss
@@ -41,6 +41,15 @@
&:hover {
color: var(--wp-admin-theme-color);
}
+
+ svg {
+ fill: currentColor;
+ // Optimizate for high contrast modes.
+ // See also https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/.
+ @media (forced-colors: active) {
+ fill: CanvasText;
+ }
+ }
}
&:not(.is-selected) .block-editor-list-view-block-select-button {
@@ -216,20 +225,15 @@
text-align: left;
position: relative;
white-space: nowrap;
-
- &.is-dropping-before::before {
- content: "";
- position: absolute;
- pointer-events: none;
- transition:
- border-color 0.1s linear,
- border-style 0.1s linear,
- box-shadow 0.1s linear;
- top: -2px;
- right: 0;
- left: 0;
- border-top: 4px solid var(--wp-admin-theme-color);
- }
+ border-radius: 2px;
+ box-sizing: border-box;
+ color: inherit;
+ font-family: inherit;
+ font-size: 13px;
+ font-weight: 400;
+ margin: 0;
+ text-decoration: none;
+ transition: box-shadow 0.1s linear;
.components-modal__content & {
padding-left: 0;
diff --git a/packages/block-editor/src/components/media-placeholder/content.scss b/packages/block-editor/src/components/media-placeholder/content.scss
index eeb2928df80baf..2f7bb2e673f12e 100644
--- a/packages/block-editor/src/components/media-placeholder/content.scss
+++ b/packages/block-editor/src/components/media-placeholder/content.scss
@@ -1,27 +1,11 @@
.block-editor-media-placeholder__url-input-form {
- display: flex;
-
- // Selector requires a lot of specificity to override base styles.
- input[type="url"].block-editor-media-placeholder__url-input-field {
- width: 100%;
- min-width: 200px;
-
- @include break-small() {
- width: 300px;
- }
-
- flex-grow: 1;
- border: none;
- border-radius: 0;
- margin: 2px;
+ min-width: 260px;
+ @include break-small() {
+ width: 300px;
}
}
-.block-editor-media-placeholder__url-input-submit-button {
- flex-shrink: 1;
-}
-
.block-editor-media-placeholder__cancel-button.is-link {
margin: 1em;
display: block;
diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js
index 4d41289f324c0f..f16e4317227235 100644
--- a/packages/block-editor/src/components/media-placeholder/index.js
+++ b/packages/block-editor/src/components/media-placeholder/index.js
@@ -11,6 +11,8 @@ import {
FormFileUpload,
Placeholder,
DropZone,
+ __experimentalInputControl as InputControl,
+ __experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
withFilters,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
@@ -42,21 +44,23 @@ const InsertFromURLPopover = ( {
className="block-editor-media-placeholder__url-input-form"
onSubmit={ onSubmit }
>
-
+
{
- setSrc( event.target.value );
- };
-
const onFilesUpload = ( files ) => {
if (
! handleUpload ||
@@ -389,8 +388,7 @@ export function MediaPlaceholder( {
return (
onCancel && (
{
return (
{
open();
@@ -477,8 +473,7 @@ export function MediaPlaceholder( {
const content = (
<>
(
( element ) => {
preserveWhiteSpace,
pastePlainText,
} = props.current;
- const { ownerDocument } = element;
- const { defaultView } = ownerDocument;
- const { anchorNode, focusNode } = defaultView.getSelection();
- const containsSelection =
- element.contains( anchorNode ) && element.contains( focusNode );
// The event listener is attached to the window, so we need to check if
- // the target is the element.
- if ( ! containsSelection ) {
+ // the target is the element or inside the element.
+ if ( ! element.contains( event.target ) ) {
return;
}
diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js
index 387f388b8fdad6..8a5d99a7eb9f0a 100644
--- a/packages/block-editor/src/components/rich-text/index.js
+++ b/packages/block-editor/src/components/rich-text/index.js
@@ -20,7 +20,7 @@ import {
removeFormat,
} from '@wordpress/rich-text';
import { Popover } from '@wordpress/components';
-import { store as blocksStore } from '@wordpress/blocks';
+import { getBlockBindingsSource } from '@wordpress/blocks';
import deprecated from '@wordpress/deprecated';
import { __, sprintf } from '@wordpress/i18n';
@@ -39,7 +39,6 @@ import FormatEdit from './format-edit';
import { getAllowedFormats } from './utils';
import { Content, valueToHTMLString } from './content';
import { withDeprecations } from './with-deprecations';
-import { unlock } from '../../lock-unlock';
import { canBindBlock } from '../../hooks/use-bindings-attributes';
import BlockContext from '../block-context';
@@ -165,7 +164,7 @@ export function RichTextWrapper(
isBlockSelected,
] );
- const { disableBoundBlock, bindingsPlaceholder } = useSelect(
+ const { disableBoundBlock, bindingsPlaceholder, bindingsLabel } = useSelect(
( select ) => {
if (
! blockBindings?.[ identifier ] ||
@@ -175,22 +174,39 @@ export function RichTextWrapper(
}
const relatedBinding = blockBindings[ identifier ];
- const { getBlockBindingsSource } = unlock( select( blocksStore ) );
const blockBindingsSource = getBlockBindingsSource(
relatedBinding.source
);
- const fieldsList = blockBindingsSource?.getFieldsList?.( {
- registry,
- context: blockContext,
- } );
+ const blockBindingsContext = {};
+ if ( blockBindingsSource?.usesContext?.length ) {
+ for ( const key of blockBindingsSource.usesContext ) {
+ blockBindingsContext[ key ] = blockContext[ key ];
+ }
+ }
const _disableBoundBlock =
! blockBindingsSource?.canUserEditValue?.( {
select,
- context: blockContext,
+ context: blockBindingsContext,
args: relatedBinding.args,
} );
+ // Don't modify placeholders if value is not empty.
+ if ( adjustedValue.length > 0 ) {
+ return {
+ disableBoundBlock: _disableBoundBlock,
+ // Null values will make them fall back to the default behavior.
+ bindingsPlaceholder: null,
+ bindingsLabel: null,
+ };
+ }
+
+ const { getBlockAttributes } = select( blockEditorStore );
+ const blockAttributes = getBlockAttributes( clientId );
+ const fieldsList = blockBindingsSource?.getFieldsList?.( {
+ select,
+ context: blockBindingsContext,
+ } );
const bindingKey =
fieldsList?.[ relatedBinding?.args?.key ]?.label ??
blockBindingsSource?.label;
@@ -202,22 +218,22 @@ export function RichTextWrapper(
__( 'Add %s' ),
bindingKey
);
+ const _bindingsLabel = _disableBoundBlock
+ ? relatedBinding?.args?.key || blockBindingsSource?.label
+ : sprintf(
+ /* translators: %s: source label or key */
+ __( 'Empty %s; start writing to edit its value' ),
+ relatedBinding?.args?.key || blockBindingsSource?.label
+ );
return {
disableBoundBlock: _disableBoundBlock,
bindingsPlaceholder:
- ( ! adjustedValue || adjustedValue.length === 0 ) &&
- _bindingsPlaceholder,
+ blockAttributes?.placeholder || _bindingsPlaceholder,
+ bindingsLabel: _bindingsLabel,
};
},
- [
- blockBindings,
- identifier,
- blockName,
- blockContext,
- registry,
- adjustedValue,
- ]
+ [ blockBindings, identifier, blockName, blockContext, adjustedValue ]
);
const shouldDisableEditing = readOnly || disableBoundBlock;
@@ -372,19 +388,7 @@ export function RichTextWrapper(
const inputEvents = useRef( new Set() );
function onFocus() {
- let element = anchorRef.current;
-
- if ( ! element ) {
- return;
- }
-
- // Writing flow might be editable, so we should make sure focus goes to
- // the root editable element.
- while ( element.parentElement?.isContentEditable ) {
- element = element.parentElement;
- }
-
- element.focus();
+ anchorRef.current?.focus();
}
const TagName = tagName;
@@ -421,7 +425,7 @@ export function RichTextWrapper(
aria-readonly={ shouldDisableEditing }
{ ...props }
aria-label={
- bindingsPlaceholder || props[ 'aria-label' ] || placeholder
+ bindingsLabel || props[ 'aria-label' ] || placeholder
}
{ ...autocompleteProps }
ref={ useMergeRefs( [
diff --git a/packages/block-editor/src/components/skip-to-selected-block/index.js b/packages/block-editor/src/components/skip-to-selected-block/index.js
index dee7f37550e379..2b52433480f3e6 100644
--- a/packages/block-editor/src/components/skip-to-selected-block/index.js
+++ b/packages/block-editor/src/components/skip-to-selected-block/index.js
@@ -28,8 +28,7 @@ export default function SkipToSelectedBlock() {
return selectedBlockClientId ? (
select( blockEditorStore ).__unstableGetEditorMode(),
[]
);
- const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
+ const { __unstableSetEditorMode } = unlock(
+ useDispatch( blockEditorStore )
+ );
return (
(
(
<>
-
+
{ __(
- 'Tools provide different interactions for selecting, navigating, and editing blocks. Toggle between select and edit by pressing Escape and Enter.'
+ 'Tools provide different sets of interactions for blocks. Toggle between simplified content tools (Write) and advanced visual editing tools (Design).'
) }
diff --git a/packages/block-editor/src/components/tool-selector/style.scss b/packages/block-editor/src/components/tool-selector/style.scss
index 03774fe0f6b9d3..07ca91d346d907 100644
--- a/packages/block-editor/src/components/tool-selector/style.scss
+++ b/packages/block-editor/src/components/tool-selector/style.scss
@@ -8,3 +8,8 @@
color: $gray-700;
min-width: 280px;
}
+
+.block-editor-tool-selector__menu .components-menu-item__info {
+ margin-left: $grid-unit-30 + $grid-unit-15; // icon size + margin
+ text-align: left;
+}
diff --git a/packages/block-editor/src/components/url-input/button.js b/packages/block-editor/src/components/url-input/button.js
index 8170ea614ace26..560f5cd7d3d5db 100644
--- a/packages/block-editor/src/components/url-input/button.js
+++ b/packages/block-editor/src/components/url-input/button.js
@@ -3,7 +3,10 @@
*/
import { __ } from '@wordpress/i18n';
import { Component } from '@wordpress/element';
-import { Button } from '@wordpress/components';
+import {
+ Button,
+ __experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
+} from '@wordpress/components';
import { link, keyboardReturn, arrowLeft } from '@wordpress/icons';
/**
@@ -38,8 +41,7 @@ class URLInputButton extends Component {
return (
+
diff --git a/packages/block-editor/src/components/url-input/index.js b/packages/block-editor/src/components/url-input/index.js
index 25c033e88749bb..cb058be5c932f6 100644
--- a/packages/block-editor/src/components/url-input/index.js
+++ b/packages/block-editor/src/components/url-input/index.js
@@ -540,8 +540,7 @@ class URLInput extends Component {
>
{ suggestions.map( ( suggestion, index ) => (
{
return { isLoading: false, commands };
};
-const useActionsCommands = () => {
- const { clientIds } = useSelect( ( select ) => {
- const { getSelectedBlockClientIds } = select( blockEditorStore );
- const selectedBlockClientIds = getSelectedBlockClientIds();
-
- return {
- clientIds: selectedBlockClientIds,
- };
- }, [] );
-
- const { getBlockRootClientId, canMoveBlocks, getBlockCount } =
- useSelect( blockEditorStore );
-
- const { setBlockMovingClientId, setNavigationMode, selectBlock } =
- useDispatch( blockEditorStore );
-
- if ( ! clientIds || clientIds.length < 1 ) {
- return { isLoading: false, commands: [] };
- }
-
- const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
-
- const canMove =
- canMoveBlocks( clientIds ) && getBlockCount( rootClientId ) !== 1;
-
- const commands = [];
-
- if ( canMove ) {
- commands.push( {
- name: 'move-to',
- label: __( 'Move to' ),
- callback: () => {
- setNavigationMode( true );
- selectBlock( clientIds[ 0 ] );
- setBlockMovingClientId( clientIds[ 0 ] );
- },
- icon: move,
- } );
- }
-
- return {
- isLoading: false,
- commands: commands.map( ( command ) => ( {
- ...command,
- name: 'core/block-editor/action-' + command.name,
- callback: ( { close } ) => {
- command.callback();
- close();
- },
- } ) ),
- };
-};
-
const useQuickActionsCommands = () => {
const { clientIds, isUngroupable, isGroupable } = useSelect( ( select ) => {
const {
@@ -344,10 +290,6 @@ export const useBlockCommands = () => {
name: 'core/block-editor/blockTransforms',
hook: useTransformCommands,
} );
- useCommandLoader( {
- name: 'core/block-editor/blockActions',
- hook: useActionsCommands,
- } );
useCommandLoader( {
name: 'core/block-editor/blockQuickActions',
hook: useQuickActionsCommands,
diff --git a/packages/block-editor/src/components/writing-flow/index.js b/packages/block-editor/src/components/writing-flow/index.js
index cea3e4b19707dd..7e6b36b0e22143 100644
--- a/packages/block-editor/src/components/writing-flow/index.js
+++ b/packages/block-editor/src/components/writing-flow/index.js
@@ -23,7 +23,6 @@ import useSelectionObserver from './use-selection-observer';
import useClickSelection from './use-click-selection';
import useInput from './use-input';
import useClipboardHandler from './use-clipboard-handler';
-import useEventRedirect from './use-event-redirect';
import { store as blockEditorStore } from '../../store';
export function useWritingFlow() {
@@ -66,7 +65,6 @@ export function useWritingFlow() {
},
[ hasMultiSelection ]
),
- useEventRedirect(),
] ),
after,
];
diff --git a/packages/block-editor/src/components/writing-flow/use-arrow-nav.js b/packages/block-editor/src/components/writing-flow/use-arrow-nav.js
index fda5a0133ee00c..44051b324ff64d 100644
--- a/packages/block-editor/src/components/writing-flow/use-arrow-nav.js
+++ b/packages/block-editor/src/components/writing-flow/use-arrow-nav.js
@@ -19,7 +19,6 @@ import { useRefEffect } from '@wordpress/compose';
*/
import { getBlockClientId, isInSameBlock } from '../../utils/dom';
import { store as blockEditorStore } from '../../store';
-import { getSelectionRoot } from './utils';
/**
* Returns true if the element should consider edge navigation upon a keyboard
@@ -191,7 +190,8 @@ export default function useArrowNav() {
return;
}
- const { keyCode, shiftKey, ctrlKey, altKey, metaKey } = event;
+ const { keyCode, target, shiftKey, ctrlKey, altKey, metaKey } =
+ event;
const isUp = keyCode === UP;
const isDown = keyCode === DOWN;
const isLeft = keyCode === LEFT;
@@ -233,11 +233,6 @@ export default function useArrowNav() {
return;
}
- const target =
- ownerDocument.activeElement === node
- ? getSelectionRoot( ownerDocument )
- : event.target;
-
// Abort if our current target is not a candidate for navigation
// (e.g. preserve native input behaviors).
if ( ! isNavigationCandidate( target, keyCode, hasModifier ) ) {
@@ -279,7 +274,6 @@ export default function useArrowNav() {
( altKey ? isHorizontalEdge( target, isReverseDir ) : true ) &&
! keepCaretInsideBlock
) {
- node.contentEditable = false;
const closestTabbable = getClosestTabbable(
target,
isReverse,
@@ -303,7 +297,6 @@ export default function useArrowNav() {
isHorizontalEdge( target, isReverseDir ) &&
! keepCaretInsideBlock
) {
- node.contentEditable = false;
const closestTabbable = getClosestTabbable(
target,
isReverseDir,
diff --git a/packages/block-editor/src/components/writing-flow/use-event-redirect.js b/packages/block-editor/src/components/writing-flow/use-event-redirect.js
deleted file mode 100644
index b8dcd7eda69697..00000000000000
--- a/packages/block-editor/src/components/writing-flow/use-event-redirect.js
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useRefEffect } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import { getSelectionRoot } from './utils';
-
-/**
- * Whenever content editable is enabled on writing flow, it will have focus, so
- * we need to dispatch some events to the root of the selection to ensure
- * compatibility with rich text. In the future, perhaps the rich text event
- * handlers should be attached to the window instead.
- *
- * Alternatively, we could try to find a way to always maintain rich text focus.
- */
-export default function useEventRedirect() {
- return useRefEffect( ( node ) => {
- function onInput( event ) {
- if ( event.target !== node ) {
- return;
- }
-
- const { ownerDocument } = node;
- const { defaultView } = ownerDocument;
- const prototype = Object.getPrototypeOf( event );
- const constructorName = prototype.constructor.name;
- const Constructor = defaultView[ constructorName ];
- const root = getSelectionRoot( ownerDocument );
-
- if ( ! root || root === node ) {
- return;
- }
-
- const init = {};
-
- for ( const key in event ) {
- init[ key ] = event[ key ];
- }
-
- init.bubbles = false;
-
- const newEvent = new Constructor( event.type, init );
- const cancelled = ! root.dispatchEvent( newEvent );
-
- if ( cancelled ) {
- event.preventDefault();
- }
- }
-
- const events = [
- 'beforeinput',
- 'input',
- 'compositionstart',
- 'compositionend',
- 'compositionupdate',
- 'keydown',
- ];
-
- events.forEach( ( eventType ) => {
- node.addEventListener( eventType, onInput );
- } );
-
- return () => {
- events.forEach( ( eventType ) => {
- node.removeEventListener( eventType, onInput );
- } );
- };
- }, [] );
-}
diff --git a/packages/block-editor/src/components/writing-flow/use-input.js b/packages/block-editor/src/components/writing-flow/use-input.js
index 31c5d769834c01..0f10cc9c2d1c75 100644
--- a/packages/block-editor/src/components/writing-flow/use-input.js
+++ b/packages/block-editor/src/components/writing-flow/use-input.js
@@ -16,7 +16,6 @@ import {
* Internal dependencies
*/
import { store as blockEditorStore } from '../../store';
-import { getSelectionRoot } from './utils';
/**
* Handles input for selections across blocks.
@@ -50,24 +49,7 @@ export default function useInput() {
// DOM. This will cause React errors (and the DOM should only be
// altered in a controlled fashion).
if ( node.contentEditable === 'true' ) {
- const selection = node.ownerDocument.defaultView.getSelection();
- const range = selection.rangeCount
- ? selection.getRangeAt( 0 )
- : null;
- const root = getSelectionRoot( node.ownerDocument );
-
- // If selection is contained within a nested editable, allow
- // input. We need to ensure that selection is maintained.
- if ( root ) {
- node.contentEditable = false;
- root.focus();
- selection.removeAllRanges();
- if ( range ) {
- selection.addRange( range );
- }
- } else {
- event.preventDefault();
- }
+ event.preventDefault();
}
}
@@ -77,23 +59,6 @@ export default function useInput() {
}
if ( ! hasMultiSelection() ) {
- const { ownerDocument } = node;
- if ( node === ownerDocument.activeElement ) {
- if ( event.key === 'End' || event.key === 'Home' ) {
- const selectionRoot = getSelectionRoot( ownerDocument );
- const selection =
- ownerDocument.defaultView.getSelection();
- selection.selectAllChildren( selectionRoot );
- const method =
- event.key === 'End'
- ? 'collapseToEnd'
- : 'collapseToStart';
- selection[ method ]();
- event.preventDefault();
- return;
- }
- }
-
if ( event.keyCode === ENTER ) {
if ( event.shiftKey || __unstableIsFullySelected() ) {
return;
diff --git a/packages/block-editor/src/components/writing-flow/use-select-all.js b/packages/block-editor/src/components/writing-flow/use-select-all.js
index 5a7acb3a8783a4..c56549acf54ad5 100644
--- a/packages/block-editor/src/components/writing-flow/use-select-all.js
+++ b/packages/block-editor/src/components/writing-flow/use-select-all.js
@@ -10,7 +10,6 @@ import { useRefEffect } from '@wordpress/compose';
* Internal dependencies
*/
import { store as blockEditorStore } from '../../store';
-import { getSelectionRoot } from './utils';
export default function useSelectAll() {
const { getBlockOrder, getSelectedBlockClientIds, getBlockRootClientId } =
@@ -24,27 +23,12 @@ export default function useSelectAll() {
return;
}
- const selectionRoot = getSelectionRoot( node.ownerDocument );
const selectedClientIds = getSelectedBlockClientIds();
- // Abort if there is selection, but it is not within a block.
- if ( selectionRoot && ! selectedClientIds.length ) {
- return;
- }
-
if (
- selectionRoot &&
selectedClientIds.length < 2 &&
- ! isEntirelySelected( selectionRoot )
+ ! isEntirelySelected( event.target )
) {
- if ( node === node.ownerDocument.activeElement ) {
- event.preventDefault();
- node.ownerDocument.defaultView
- .getSelection()
- .selectAllChildren( selectionRoot );
- return;
- }
-
return;
}
@@ -61,7 +45,6 @@ export default function useSelectAll() {
node.ownerDocument.defaultView
.getSelection()
.removeAllRanges();
- node.contentEditable = 'false';
selectBlock( rootClientId );
}
return;
diff --git a/packages/block-editor/src/components/writing-flow/use-selection-observer.js b/packages/block-editor/src/components/writing-flow/use-selection-observer.js
index 8ecba461d1025f..c7ce5d259d875a 100644
--- a/packages/block-editor/src/components/writing-flow/use-selection-observer.js
+++ b/packages/block-editor/src/components/writing-flow/use-selection-observer.js
@@ -107,12 +107,8 @@ function getRichTextElement( node ) {
export default function useSelectionObserver() {
const { multiSelect, selectBlock, selectionChange } =
useDispatch( blockEditorStore );
- const {
- getBlockParents,
- getBlockSelectionStart,
- isMultiSelecting,
- getSelectedBlockClientId,
- } = useSelect( blockEditorStore );
+ const { getBlockParents, getBlockSelectionStart, isMultiSelecting } =
+ useSelect( blockEditorStore );
return useRefEffect(
( node ) => {
const { ownerDocument } = node;
@@ -195,17 +191,10 @@ export default function useSelectionObserver() {
return;
}
- setContentEditableWrapper(
- node,
- !! ( startClientId && endClientId )
- );
-
const isSingularSelection = startClientId === endClientId;
if ( isSingularSelection ) {
if ( ! isMultiSelecting() ) {
- if ( getSelectedBlockClientId() !== startClientId ) {
- selectBlock( startClientId );
- }
+ selectBlock( startClientId );
} else {
multiSelect( startClientId, startClientId );
}
diff --git a/packages/block-editor/src/components/writing-flow/use-tab-nav.js b/packages/block-editor/src/components/writing-flow/use-tab-nav.js
index b321d7c8d29957..3788c7021fd664 100644
--- a/packages/block-editor/src/components/writing-flow/use-tab-nav.js
+++ b/packages/block-editor/src/components/writing-flow/use-tab-nav.js
@@ -2,7 +2,7 @@
* WordPress dependencies
*/
import { focus, isFormElement } from '@wordpress/dom';
-import { TAB, ESCAPE } from '@wordpress/keycodes';
+import { TAB } from '@wordpress/keycodes';
import { useSelect, useDispatch } from '@wordpress/data';
import { useRefEffect, useMergeRefs } from '@wordpress/compose';
import { useRef } from '@wordpress/element';
@@ -21,19 +21,9 @@ export default function useTabNav() {
const { hasMultiSelection, getSelectedBlockClientId, getBlockCount } =
useSelect( blockEditorStore );
- const { setNavigationMode, setLastFocus } = unlock(
- useDispatch( blockEditorStore )
- );
- const isNavigationMode = useSelect(
- ( select ) => select( blockEditorStore ).isNavigationMode(),
- []
- );
-
+ const { setLastFocus } = unlock( useDispatch( blockEditorStore ) );
const { getLastFocus } = unlock( useSelect( blockEditorStore ) );
- // Don't allow tabbing to this element in Navigation mode.
- const focusCaptureTabIndex = ! isNavigationMode ? '0' : undefined;
-
// Reference that holds the a flag for enabling or disabling
// capturing on the focus capture elements.
const noCaptureRef = useRef();
@@ -56,8 +46,6 @@ export default function useTabNav() {
.focus();
}
} else {
- setNavigationMode( true );
-
const canvasElement =
container.current.ownerDocument === event.target.ownerDocument
? container.current
@@ -82,7 +70,7 @@ export default function useTabNav() {
const before = (
);
@@ -90,7 +78,7 @@ export default function useTabNav() {
const after = (
);
@@ -101,12 +89,6 @@ export default function useTabNav() {
return;
}
- if ( event.keyCode === ESCAPE && ! hasMultiSelection() ) {
- event.preventDefault();
- setNavigationMode( true );
- return;
- }
-
// In Edit mode, Tab should focus the first tabbable element after
// the content, which is normally the sidebar (with block controls)
// and Shift+Tab should focus the first tabbable element before the
@@ -119,20 +101,6 @@ export default function useTabNav() {
const isShift = event.shiftKey;
const direction = isShift ? 'findPrevious' : 'findNext';
-
- if ( ! hasMultiSelection() && ! getSelectedBlockClientId() ) {
- // Preserve the behaviour of entering navigation mode when
- // tabbing into the content without a block selection.
- // `onFocusCapture` already did this previously, but we need to
- // do it again here because after clearing block selection,
- // focus land on the writing flow container and pressing Tab
- // will no longer send focus through the focus capture element.
- if ( event.target === node ) {
- setNavigationMode( true );
- }
- return;
- }
-
const nextTabbable = focus.tabbable[ direction ]( event.target );
// We want to constrain the tabbing to the block and its child blocks.
diff --git a/packages/block-editor/src/components/writing-flow/utils.js b/packages/block-editor/src/components/writing-flow/utils.js
index 0cd41eedd3f6f1..2a2010854ed205 100644
--- a/packages/block-editor/src/components/writing-flow/utils.js
+++ b/packages/block-editor/src/components/writing-flow/utils.js
@@ -116,33 +116,3 @@ function toPlainText( html ) {
// Merge any consecutive line breaks
return plainText.replace( /\n\n+/g, '\n\n' );
}
-
-/**
- * Gets the current content editable root element based on the selection.
- * @param {Document} ownerDocument
- * @return {Element|undefined} The content editable root element.
- */
-export function getSelectionRoot( ownerDocument ) {
- const { defaultView } = ownerDocument;
- const { anchorNode, focusNode } = defaultView.getSelection();
-
- if ( ! anchorNode || ! focusNode ) {
- return;
- }
-
- const anchorElement = (
- anchorNode.nodeType === anchorNode.ELEMENT_NODE
- ? anchorNode
- : anchorNode.parentElement
- ).closest( '[contenteditable]' );
-
- if ( ! anchorElement ) {
- return;
- }
-
- if ( ! anchorElement.contains( focusNode ) ) {
- return;
- }
-
- return anchorElement;
-}
diff --git a/packages/block-editor/src/content.scss b/packages/block-editor/src/content.scss
index 36d428dca6b762..1ef4e118fb1bbe 100644
--- a/packages/block-editor/src/content.scss
+++ b/packages/block-editor/src/content.scss
@@ -8,7 +8,6 @@
@import "./components/button-block-appender/content.scss";
@import "./components/default-block-appender/content.scss";
@import "./components/iframe/content.scss";
-@import "./components/inner-blocks/content.scss";
@import "./components/media-placeholder/content.scss";
@import "./components/plain-text/content.scss";
@import "./components/rich-text/content.scss";
diff --git a/packages/block-editor/src/hooks/block-bindings.js b/packages/block-editor/src/hooks/block-bindings.js
index ea0d4cbb7fb5bf..5c002613831ce1 100644
--- a/packages/block-editor/src/hooks/block-bindings.js
+++ b/packages/block-editor/src/hooks/block-bindings.js
@@ -2,7 +2,10 @@
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
-import { privateApis as blocksPrivateApis } from '@wordpress/blocks';
+import {
+ getBlockBindingsSource,
+ getBlockBindingsSources,
+} from '@wordpress/blocks';
import {
__experimentalItemGroup as ItemGroup,
__experimentalItem as Item,
@@ -12,7 +15,7 @@ import {
__experimentalVStack as VStack,
privateApis as componentsPrivateApis,
} from '@wordpress/components';
-import { useRegistry, useSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
import { useContext, Fragment } from '@wordpress/element';
import { useViewportMatch } from '@wordpress/compose';
@@ -47,7 +50,6 @@ const useToolsPanelDropdownMenuProps = () => {
};
function BlockBindingsPanelDropdown( { fieldsList, attribute, binding } ) {
- const { getBlockBindingsSources } = unlock( blocksPrivateApis );
const registeredSources = getBlockBindingsSources();
const { updateBlockBindings } = useBlockBindingsUtils();
const currentKey = binding?.args?.key;
@@ -96,8 +98,7 @@ function BlockBindingsPanelDropdown( { fieldsList, attribute, binding } ) {
function BlockBindingsAttribute( { attribute, binding, fieldsList } ) {
const { source: sourceName, args } = binding || {};
- const sourceProps =
- unlock( blocksPrivateApis ).getBlockBindingsSource( sourceName );
+ const sourceProps = getBlockBindingsSource( sourceName );
const isSourceInvalid = ! sourceProps;
return (
@@ -186,7 +187,6 @@ function EditableBlockBindingsPanelItems( {
}
export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
- const registry = useRegistry();
const blockContext = useContext( BlockContext );
const { removeAllBlockBindings } = useBlockBindingsUtils();
const bindableAttributes = getBindableAttributes( blockName );
@@ -194,14 +194,13 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
// `useSelect` is used purposely here to ensure `getFieldsList`
// is updated whenever there are updates in block context.
- // `source.getFieldsList` may also call a selector via `registry.select`.
+ // `source.getFieldsList` may also call a selector via `select`.
const _fieldsList = {};
const { fieldsList, canUpdateBlockBindings } = useSelect(
( select ) => {
if ( ! bindableAttributes || bindableAttributes.length === 0 ) {
return EMPTY_OBJECT;
}
- const { getBlockBindingsSources } = unlock( blocksPrivateApis );
const registeredSources = getBlockBindingsSources();
Object.entries( registeredSources ).forEach(
( [ sourceName, { getFieldsList, usesContext } ] ) => {
@@ -214,7 +213,7 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
}
}
const sourceList = getFieldsList( {
- registry,
+ select,
context,
} );
// Only add source if the list is not empty.
@@ -234,7 +233,7 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
.canUpdateBlockBindings,
};
},
- [ blockContext, bindableAttributes, registry ]
+ [ blockContext, bindableAttributes ]
);
// Return early if there are no bindable attributes.
if ( ! bindableAttributes || bindableAttributes.length === 0 ) {
diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js
index 51130ccb9ec2a4..dbd47831c42668 100644
--- a/packages/block-editor/src/hooks/duotone.js
+++ b/packages/block-editor/src/hooks/duotone.js
@@ -314,8 +314,11 @@ function useDuotoneStyles( {
}, [ isValidFilter, blockElement, colors ] );
}
+// Used for generating the instance ID
+const DUOTONE_BLOCK_PROPS_REFERENCE = {};
+
function useBlockProps( { clientId, name, style } ) {
- const id = useInstanceId( useBlockProps );
+ const id = useInstanceId( DUOTONE_BLOCK_PROPS_REFERENCE );
const selector = useMemo( () => {
const blockType = getBlockType( name );
diff --git a/packages/block-editor/src/hooks/layout-child.js b/packages/block-editor/src/hooks/layout-child.js
index 8beb50c1b82849..558d5e2cc626bf 100644
--- a/packages/block-editor/src/hooks/layout-child.js
+++ b/packages/block-editor/src/hooks/layout-child.js
@@ -17,6 +17,9 @@ import {
GridItemMovers,
} from '../components/grid';
+// Used for generating the instance ID
+const LAYOUT_CHILD_BLOCK_PROPS_REFERENCE = {};
+
function useBlockPropsChildLayoutStyles( { style } ) {
const shouldRenderChildLayoutStyles = useSelect( ( select ) => {
return ! select( blockEditorStore ).getSettings().disableLayoutStyles;
@@ -32,7 +35,7 @@ function useBlockPropsChildLayoutStyles( { style } ) {
} = layout;
const parentLayout = useLayout() || {};
const { columnCount, minimumColumnWidth } = parentLayout;
- const id = useInstanceId( useBlockPropsChildLayoutStyles );
+ const id = useInstanceId( LAYOUT_CHILD_BLOCK_PROPS_REFERENCE );
const selector = `.wp-container-content-${ id }`;
// Check that the grid layout attributes are of the correct type, so that we don't accidentally
diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js
index 22d916d7b791bf..54a376a0c6a4f7 100644
--- a/packages/block-editor/src/hooks/layout.js
+++ b/packages/block-editor/src/hooks/layout.js
@@ -11,8 +11,8 @@ import { addFilter } from '@wordpress/hooks';
import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
import { useSelect } from '@wordpress/data';
import {
- Button,
- ButtonGroup,
+ __experimentalToggleGroupControl as ToggleGroupControl,
+ __experimentalToggleGroupControlOption as ToggleGroupControlOption,
ToggleControl,
PanelBody,
privateApis as componentsPrivateApis,
@@ -315,21 +315,26 @@ export default {
function LayoutTypeSwitcher( { type, onChange } ) {
return (
-
+
{ getLayoutTypes().map( ( { name, label } ) => {
return (
- onChange( name ) }
- >
- { label }
-
+ value={ name }
+ label={ label }
+ />
);
} ) }
-
+
);
}
diff --git a/packages/block-editor/src/hooks/position.js b/packages/block-editor/src/hooks/position.js
index 95a9c2198e4c71..bf1b730cd67d1a 100644
--- a/packages/block-editor/src/hooks/position.js
+++ b/packages/block-editor/src/hooks/position.js
@@ -310,6 +310,9 @@ export default {
},
};
+// Used for generating the instance ID
+const POSITION_BLOCK_PROPS_REFERENCE = {};
+
function useBlockProps( { name, style } ) {
const hasPositionBlockSupport = hasBlockSupport(
name,
@@ -318,7 +321,7 @@ function useBlockProps( { name, style } ) {
const isPositionDisabled = useIsPositionDisabled( { name } );
const allowPositionStyles = hasPositionBlockSupport && ! isPositionDisabled;
- const id = useInstanceId( useBlockProps );
+ const id = useInstanceId( POSITION_BLOCK_PROPS_REFERENCE );
// Higher specificity to override defaults in editor UI.
const positionSelector = `.wp-container-${ id }.wp-container-${ id }`;
diff --git a/packages/block-editor/src/hooks/use-bindings-attributes.js b/packages/block-editor/src/hooks/use-bindings-attributes.js
index e1ebf5fda6b8ee..fdc617fda20c05 100644
--- a/packages/block-editor/src/hooks/use-bindings-attributes.js
+++ b/packages/block-editor/src/hooks/use-bindings-attributes.js
@@ -103,11 +103,7 @@ export const withBlockBindingSupport = createHigherOrderComponent(
const sources = useSelect( ( select ) =>
unlock( select( blocksStore ) ).getAllBlockBindingsSources()
);
- const { name, clientId } = props;
- const hasParentPattern = !! props.context[ 'pattern/overrides' ];
- const hasPatternOverridesDefaultBinding =
- props.attributes.metadata?.bindings?.[ DEFAULT_ATTRIBUTE ]
- ?.source === 'core/pattern-overrides';
+ const { name, clientId, context, setAttributes } = props;
const blockBindings = useMemo(
() =>
replacePatternOverrideDefaultBindings(
@@ -121,79 +117,87 @@ export const withBlockBindingSupport = createHigherOrderComponent(
// used purposely here to ensure `boundAttributes` is updated whenever
// there are attribute updates.
// `source.getValues` may also call a selector via `registry.select`.
- const boundAttributes = useSelect( () => {
- if ( ! blockBindings ) {
- return;
- }
-
- const attributes = {};
-
- const blockBindingsBySource = new Map();
-
- for ( const [ attributeName, binding ] of Object.entries(
- blockBindings
- ) ) {
- const { source: sourceName, args: sourceArgs } = binding;
- const source = sources[ sourceName ];
- if ( ! source || ! canBindAttribute( name, attributeName ) ) {
- continue;
+ const updatedContext = {};
+ const boundAttributes = useSelect(
+ ( select ) => {
+ if ( ! blockBindings ) {
+ return;
}
- blockBindingsBySource.set( source, {
- ...blockBindingsBySource.get( source ),
- [ attributeName ]: {
- args: sourceArgs,
- },
- } );
- }
+ const attributes = {};
- if ( blockBindingsBySource.size ) {
- for ( const [ source, bindings ] of blockBindingsBySource ) {
- // Populate context.
- const context = {};
+ const blockBindingsBySource = new Map();
- if ( source.usesContext?.length ) {
- for ( const key of source.usesContext ) {
- context[ key ] = blockContext[ key ];
- }
+ for ( const [ attributeName, binding ] of Object.entries(
+ blockBindings
+ ) ) {
+ const { source: sourceName, args: sourceArgs } = binding;
+ const source = sources[ sourceName ];
+ if (
+ ! source ||
+ ! canBindAttribute( name, attributeName )
+ ) {
+ continue;
}
- // Get values in batch if the source supports it.
- let values = {};
- if ( ! source.getValues ) {
- Object.keys( bindings ).forEach( ( attr ) => {
- // Default to the `key` or the source label when `getValues` doesn't exist
- values[ attr ] =
- bindings[ attr ].args?.key || source.label;
- } );
- } else {
- values = source.getValues( {
- registry,
- context,
- clientId,
- bindings,
- } );
+ // Populate context.
+ for ( const key of source.usesContext || [] ) {
+ updatedContext[ key ] = blockContext[ key ];
}
- for ( const [ attributeName, value ] of Object.entries(
- values
- ) ) {
- if (
- attributeName === 'url' &&
- ( ! value || ! isURLLike( value ) )
- ) {
- // Return null if value is not a valid URL.
- attributes[ attributeName ] = null;
+
+ blockBindingsBySource.set( source, {
+ ...blockBindingsBySource.get( source ),
+ [ attributeName ]: {
+ args: sourceArgs,
+ },
+ } );
+ }
+
+ if ( blockBindingsBySource.size ) {
+ for ( const [
+ source,
+ bindings,
+ ] of blockBindingsBySource ) {
+ // Get values in batch if the source supports it.
+ let values = {};
+ if ( ! source.getValues ) {
+ Object.keys( bindings ).forEach( ( attr ) => {
+ // Default to the the source label when `getValues` doesn't exist.
+ values[ attr ] = source.label;
+ } );
} else {
- attributes[ attributeName ] = value;
+ values = source.getValues( {
+ select,
+ context: updatedContext,
+ clientId,
+ bindings,
+ } );
+ }
+ for ( const [ attributeName, value ] of Object.entries(
+ values
+ ) ) {
+ if (
+ attributeName === 'url' &&
+ ( ! value || ! isURLLike( value ) )
+ ) {
+ // Return null if value is not a valid URL.
+ attributes[ attributeName ] = null;
+ } else {
+ attributes[ attributeName ] = value;
+ }
}
}
}
- }
- return attributes;
- }, [ blockBindings, name, clientId, blockContext, registry, sources ] );
+ return attributes;
+ },
+ [ blockBindings, name, clientId, updatedContext, sources ]
+ );
- const { setAttributes } = props;
+ const hasParentPattern = !! updatedContext[ 'pattern/overrides' ];
+ const hasPatternOverridesDefaultBinding =
+ props.attributes.metadata?.bindings?.[ DEFAULT_ATTRIBUTE ]
+ ?.source === 'core/pattern-overrides';
const _setAttributes = useCallback(
( nextAttributes ) => {
@@ -237,18 +241,10 @@ export const withBlockBindingSupport = createHigherOrderComponent(
source,
bindings,
] of blockBindingsBySource ) {
- // Populate context.
- const context = {};
-
- if ( source.usesContext?.length ) {
- for ( const key of source.usesContext ) {
- context[ key ] = blockContext[ key ];
- }
- }
-
source.setValues( {
- registry,
- context,
+ select: registry.select,
+ dispatch: registry.dispatch,
+ context: updatedContext,
clientId,
bindings,
} );
@@ -278,7 +274,7 @@ export const withBlockBindingSupport = createHigherOrderComponent(
blockBindings,
name,
clientId,
- blockContext,
+ updatedContext,
setAttributes,
sources,
hasPatternOverridesDefaultBinding,
@@ -292,6 +288,7 @@ export const withBlockBindingSupport = createHigherOrderComponent(
{ ...props }
attributes={ { ...props.attributes, ...boundAttributes } }
setAttributes={ _setAttributes }
+ context={ { ...context, ...updatedContext } }
/>
);
diff --git a/packages/block-editor/src/hooks/use-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js
index d7e21ec1be0578..2a1b43060c00a9 100644
--- a/packages/block-editor/src/hooks/use-zoom-out.js
+++ b/packages/block-editor/src/hooks/use-zoom-out.js
@@ -8,46 +8,40 @@ import { useEffect, useRef } from '@wordpress/element';
* Internal dependencies
*/
import { store as blockEditorStore } from '../store';
+import { unlock } from '../lock-unlock';
/**
- * A hook used to set the editor mode to zoomed out mode, invoking the hook sets the mode.
+ * A hook used to set the zoomed out view, invoking the hook sets the mode.
*
- * @param {boolean} zoomOut If we should enter into zoomOut mode or not
+ * @param {boolean} zoomOut If we should zoom out or not.
*/
export function useZoomOut( zoomOut = true ) {
- const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
- const { __unstableGetEditorMode } = useSelect( blockEditorStore );
+ const { setZoomLevel } = unlock( useDispatch( blockEditorStore ) );
+ const { isZoomOut } = unlock( useSelect( blockEditorStore ) );
- const originalEditingModeRef = useRef( null );
- const mode = __unstableGetEditorMode();
+ const originalIsZoomOutRef = useRef( null );
useEffect( () => {
// Only set this on mount so we know what to return to when we unmount.
- if ( ! originalEditingModeRef.current ) {
- originalEditingModeRef.current = mode;
+ if ( ! originalIsZoomOutRef.current ) {
+ originalIsZoomOutRef.current = isZoomOut();
}
- return () => {
- // We need to use __unstableGetEditorMode() here and not `mode`, as mode may not update on unmount
- if (
- __unstableGetEditorMode() === 'zoom-out' &&
- __unstableGetEditorMode() !== originalEditingModeRef.current
- ) {
- __unstableSetEditorMode( originalEditingModeRef.current );
- }
- };
- }, [] );
-
- // The effect opens the zoom-out view if we want it open and it's not currently in zoom-out mode.
- useEffect( () => {
- if ( zoomOut && mode !== 'zoom-out' ) {
- __unstableSetEditorMode( 'zoom-out' );
+ // The effect opens the zoom-out view if we want it open and the canvas is not currently zoomed-out.
+ if ( zoomOut && isZoomOut() === false ) {
+ setZoomLevel( 50 );
} else if (
! zoomOut &&
- __unstableGetEditorMode() === 'zoom-out' &&
- originalEditingModeRef.current !== mode
+ isZoomOut() &&
+ originalIsZoomOutRef.current !== isZoomOut()
) {
- __unstableSetEditorMode( originalEditingModeRef.current );
+ setZoomLevel( originalIsZoomOutRef.current ? 50 : 100 );
}
- }, [ __unstableGetEditorMode, __unstableSetEditorMode, zoomOut ] ); // Mode is deliberately excluded from the dependencies so that the effect does not run when mode changes.
+
+ return () => {
+ if ( isZoomOut() && isZoomOut() !== originalIsZoomOutRef.current ) {
+ setZoomLevel( originalIsZoomOutRef.current ? 50 : 100 );
+ }
+ };
+ }, [ isZoomOut, setZoomLevel, zoomOut ] );
}
diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js
index dc7e9d1a167a19..81718449695651 100644
--- a/packages/block-editor/src/layouts/flex.js
+++ b/packages/block-editor/src/layouts/flex.js
@@ -12,7 +12,6 @@ import {
arrowDown,
} from '@wordpress/icons';
import {
- Button,
ToggleControl,
Flex,
FlexItem,
@@ -110,7 +109,6 @@ export default {
- { __( 'Vertical alignment' ) }
-
- { verticalAlignmentOptions.map( ( value, icon, label ) => {
- return (
- onVerticalAlignmentChange( value ) }
- />
- );
- } ) }
-
-
+ ' . $label_text . ' %2$s
';
$items_markup = wp_dropdown_categories( $args );
$type = 'dropdown';
diff --git a/packages/block-library/src/comment-author-name/index.js b/packages/block-library/src/comment-author-name/index.js
index 4d85bbebe047be..5bcb6896564807 100644
--- a/packages/block-library/src/comment-author-name/index.js
+++ b/packages/block-library/src/comment-author-name/index.js
@@ -18,6 +18,7 @@ export const settings = {
icon,
edit,
deprecated,
+ example: {},
};
export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/comment-content/index.js b/packages/block-library/src/comment-content/index.js
index 130f1d30125559..aefcef75acf8ae 100644
--- a/packages/block-library/src/comment-content/index.js
+++ b/packages/block-library/src/comment-content/index.js
@@ -16,6 +16,7 @@ export { metadata, name };
export const settings = {
icon,
edit,
+ example: {},
};
export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/comment-date/index.js b/packages/block-library/src/comment-date/index.js
index fddae539acfa34..d95c0a958f9ed8 100644
--- a/packages/block-library/src/comment-date/index.js
+++ b/packages/block-library/src/comment-date/index.js
@@ -18,6 +18,7 @@ export const settings = {
icon,
edit,
deprecated,
+ example: {},
};
export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/comment-edit-link/index.js b/packages/block-library/src/comment-edit-link/index.js
index 6639dda86a7a40..ffe8c98a75dfd9 100644
--- a/packages/block-library/src/comment-edit-link/index.js
+++ b/packages/block-library/src/comment-edit-link/index.js
@@ -16,6 +16,7 @@ export { metadata, name };
export const settings = {
icon,
edit,
+ example: {},
};
export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/comment-reply-link/index.js b/packages/block-library/src/comment-reply-link/index.js
index c04f8ce7b1bba5..a8287f6b08ff35 100644
--- a/packages/block-library/src/comment-reply-link/index.js
+++ b/packages/block-library/src/comment-reply-link/index.js
@@ -16,6 +16,7 @@ export { metadata, name };
export const settings = {
edit,
icon,
+ example: {},
};
export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/comments-pagination-next/block.json b/packages/block-library/src/comments-pagination-next/block.json
index 22e20bfa8dbf2d..3f7ebe677328d5 100644
--- a/packages/block-library/src/comments-pagination-next/block.json
+++ b/packages/block-library/src/comments-pagination-next/block.json
@@ -12,6 +12,11 @@
"type": "string"
}
},
+ "example": {
+ "attributes": {
+ "label": "Comments Next Page"
+ }
+ },
"usesContext": [ "postId", "comments/paginationArrow" ],
"supports": {
"reusable": false,
diff --git a/packages/block-library/src/comments-pagination-numbers/index.js b/packages/block-library/src/comments-pagination-numbers/index.js
index 3fd903e2d9ef48..f769f54b4ac034 100644
--- a/packages/block-library/src/comments-pagination-numbers/index.js
+++ b/packages/block-library/src/comments-pagination-numbers/index.js
@@ -16,6 +16,7 @@ export { metadata, name };
export const settings = {
icon,
edit,
+ example: {},
};
export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/comments-pagination-previous/block.json b/packages/block-library/src/comments-pagination-previous/block.json
index 0871b000c569dd..eb5203af33c866 100644
--- a/packages/block-library/src/comments-pagination-previous/block.json
+++ b/packages/block-library/src/comments-pagination-previous/block.json
@@ -12,6 +12,11 @@
"type": "string"
}
},
+ "example": {
+ "attributes": {
+ "label": "Comments Previous Page"
+ }
+ },
"usesContext": [ "postId", "comments/paginationArrow" ],
"supports": {
"reusable": false,
diff --git a/packages/block-library/src/comments-title/index.js b/packages/block-library/src/comments-title/index.js
index 86bdab0dbccbff..69b8228eab892b 100644
--- a/packages/block-library/src/comments-title/index.js
+++ b/packages/block-library/src/comments-title/index.js
@@ -18,6 +18,7 @@ export const settings = {
icon,
edit,
deprecated,
+ example: {},
};
export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/cover/edit/index.js b/packages/block-library/src/cover/edit/index.js
index ec62bd58a2c33a..804027708881b6 100644
--- a/packages/block-library/src/cover/edit/index.js
+++ b/packages/block-library/src/cover/edit/index.js
@@ -18,6 +18,7 @@ import {
useInnerBlocksProps,
__experimentalUseGradient,
store as blockEditorStore,
+ useBlockEditingMode,
} from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
import { useSelect, useDispatch } from '@wordpress/data';
@@ -278,6 +279,9 @@ function CoverEdit( {
const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
+ const blockEditingMode = useBlockEditingMode();
+ const hasNonContentControls = blockEditingMode === 'default';
+
const [ resizeListener, { height, width } ] = useResizeObserver();
const resizableBoxDimensions = useMemo( () => {
return {
@@ -447,7 +451,7 @@ function CoverEdit( {
<>
{ blockControls }
{ inspectorControls }
- { isSelected && (
+ { hasNonContentControls && isSelected && (
- { isSelected && (
+ { hasNonContentControls && isSelected && (
perPage > 0 }
>
pages > 0 }
onDeselect={ () => setQuery( { pages: 0 } ) }
>
diff --git a/packages/block-library/src/query/edit/inspector-controls/pages-control.js b/packages/block-library/src/query/edit/inspector-controls/pages-control.js
index cde61453ea844d..06c6e32b66ad2a 100644
--- a/packages/block-library/src/query/edit/inspector-controls/pages-control.js
+++ b/packages/block-library/src/query/edit/inspector-controls/pages-control.js
@@ -8,7 +8,7 @@ export const PagesControl = ( { pages, onChange } ) => {
return (
{
diff --git a/packages/block-library/src/query/edit/inspector-controls/per-page-control.js b/packages/block-library/src/query/edit/inspector-controls/per-page-control.js
index 3e0dfbf50b70bd..933bb0851e6257 100644
--- a/packages/block-library/src/query/edit/inspector-controls/per-page-control.js
+++ b/packages/block-library/src/query/edit/inspector-controls/per-page-control.js
@@ -12,7 +12,7 @@ const PerPageControl = ( { perPage, offset = 0, onChange } ) => {
{
diff --git a/packages/block-library/src/query/index.php b/packages/block-library/src/query/index.php
index d10db26529854e..043f351e11d7f1 100644
--- a/packages/block-library/src/query/index.php
+++ b/packages/block-library/src/query/index.php
@@ -24,27 +24,7 @@ function render_block_core_query( $attributes, $content, $block ) {
// Enqueue the script module and add the necessary directives if the block is
// interactive.
if ( $is_interactive ) {
- $suffix = wp_scripts_get_suffix();
- if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
- $module_url = gutenberg_url( '/build-module/block-library/query/view.min.js' );
- }
-
- wp_register_script_module(
- '@wordpress/block-library/query',
- isset( $module_url ) ? $module_url : includes_url( "blocks/query/view{$suffix}.js" ),
- array(
- array(
- 'id' => '@wordpress/interactivity',
- 'import' => 'static',
- ),
- array(
- 'id' => '@wordpress/interactivity-router',
- 'import' => 'dynamic',
- ),
- ),
- defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
- );
- wp_enqueue_script_module( '@wordpress/block-library/query' );
+ wp_enqueue_script_module( '@wordpress/block-library/query/view' );
$p = new WP_HTML_Tag_Processor( $content );
if ( $p->next_tag() ) {
diff --git a/packages/block-library/src/quote/block.json b/packages/block-library/src/quote/block.json
index 0f9ec97422f64b..2ae37f9f36f766 100644
--- a/packages/block-library/src/quote/block.json
+++ b/packages/block-library/src/quote/block.json
@@ -14,13 +14,13 @@
"selector": "blockquote",
"multiline": "p",
"default": "",
- "__experimentalRole": "content"
+ "role": "content"
},
"citation": {
"type": "rich-text",
"source": "rich-text",
"selector": "cite",
- "__experimentalRole": "content"
+ "role": "content"
},
"textAlign": {
"type": "string"
diff --git a/packages/block-library/src/quote/deprecated.js b/packages/block-library/src/quote/deprecated.js
index 77098b6e753139..4d3efd28e3a22c 100644
--- a/packages/block-library/src/quote/deprecated.js
+++ b/packages/block-library/src/quote/deprecated.js
@@ -70,14 +70,14 @@ const v4 = {
selector: 'blockquote',
multiline: 'p',
default: '',
- __experimentalRole: 'content',
+ role: 'content',
},
citation: {
type: 'string',
source: 'html',
selector: 'cite',
default: '',
- __experimentalRole: 'content',
+ role: 'content',
},
align: {
type: 'string',
@@ -138,14 +138,14 @@ const v3 = {
selector: 'blockquote',
multiline: 'p',
default: '',
- __experimentalRole: 'content',
+ role: 'content',
},
citation: {
type: 'string',
source: 'html',
selector: 'cite',
default: '',
- __experimentalRole: 'content',
+ role: 'content',
},
align: {
type: 'string',
diff --git a/packages/block-library/src/search/block.json b/packages/block-library/src/search/block.json
index dac4c6b488a97e..c5af5a29d21beb 100644
--- a/packages/block-library/src/search/block.json
+++ b/packages/block-library/src/search/block.json
@@ -10,7 +10,7 @@
"attributes": {
"label": {
"type": "string",
- "__experimentalRole": "content"
+ "role": "content"
},
"showLabel": {
"type": "boolean",
@@ -19,7 +19,7 @@
"placeholder": {
"type": "string",
"default": "",
- "__experimentalRole": "content"
+ "role": "content"
},
"width": {
"type": "number"
@@ -29,7 +29,7 @@
},
"buttonText": {
"type": "string",
- "__experimentalRole": "content"
+ "role": "content"
},
"buttonPosition": {
"type": "string",
diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js
index e2f3bb3999e42c..d4ed5b7e3a4055 100644
--- a/packages/block-library/src/search/edit.js
+++ b/packages/block-library/src/search/edit.js
@@ -424,13 +424,12 @@ export default function SearchEdit( {
}
step={ 1 }
onChange={ ( newWidth ) => {
- const filteredWidth =
- widthUnit === '%' &&
- parseInt( newWidth, 10 ) > 100
- ? 100
- : newWidth;
+ const parsedNewWidth =
+ newWidth === ''
+ ? undefined
+ : parseInt( newWidth, 10 );
setAttributes( {
- width: parseInt( filteredWidth, 10 ),
+ width: parsedNewWidth,
} );
} }
onUnitChange={ ( newUnit ) => {
@@ -566,7 +565,11 @@ export default function SearchEdit( {
set_attribute( 'data-wp-bind--aria-hidden', '!context.isSearchInputVisible' );
$input->set_attribute( 'data-wp-bind--tabindex', 'state.tabindex' );
diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js
index dc95d5906d7345..36c217c1bf0c79 100644
--- a/packages/block-library/src/site-logo/edit.js
+++ b/packages/block-library/src/site-logo/edit.js
@@ -564,6 +564,7 @@ export default function LogoEdit( {
iconId={ siteIconId }
canUserEdit={ canUserEdit }
/>
+ { canUserEdit &&
-This feature is still experimental. āExperimentalā means this is an early implementation subject to drastic and breaking changes.
-
-
- { showDropdownHeader ? (
-
- { __( 'Border color' ) }
-
- ) : undefined }
{ __( 'Reset' ) }
diff --git a/packages/components/src/border-control/border-control/README.md b/packages/components/src/border-control/border-control/README.md
index 74a212d00026bd..fbd0c10e418d5a 100644
--- a/packages/components/src/border-control/border-control/README.md
+++ b/packages/components/src/border-control/border-control/README.md
@@ -1,10 +1,6 @@
-# BorderControl
+# BorderControl
-
-This feature is still experimental. āExperimentalā means this is an early implementation subject to drastic and breaking changes.
-
-
-This feature is still experimental. āExperimentalā means this is an early implementation subject to drastic and breaking changes.
-
-
-BoxControl components let users set values for Top, Right, Bottom, and Left. This can be used as an input control for values like `padding` or `margin`.
+A control that lets users set values for top, right, bottom, and left. Can be used as an input control for values like `padding` or `margin`.
## Usage
```jsx
import { useState } from 'react';
-import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
+import { BoxControl } from '@wordpress/components';
-const Example = () => {
+function Example() {
const [ values, setValues ] = useState( {
top: '50px',
left: '10%',
@@ -26,23 +22,24 @@ const Example = () => {
onChange={ ( nextValues ) => setValues( nextValues ) }
/>
);
-};
+}
```
## Props
+
### `allowReset`: `boolean`
If this property is true, a button to reset the box control is rendered.
-- Required: No
-- Default: `true`
+- Required: No
+- Default: `true`
### `splitOnAxis`: `boolean`
If this property is true, when the box control is unlinked, vertical and horizontal controls can be used instead of updating individual sides.
-- Required: No
-- Default: `false`
+- Required: No
+- Default: `false`
### `inputProps`: `object`
diff --git a/packages/components/src/box-control/index.tsx b/packages/components/src/box-control/index.tsx
index 9c3452d4ccb806..41e95aa88bea37 100644
--- a/packages/components/src/box-control/index.tsx
+++ b/packages/components/src/box-control/index.tsx
@@ -47,14 +47,14 @@ function useUniqueId( idProp?: string ) {
}
/**
- * BoxControl components let users set values for Top, Right, Bottom, and Left.
- * This can be used as an input control for values like `padding` or `margin`.
+ * A control that lets users set values for top, right, bottom, and left. Can be
+ * used as an input control for values like `padding` or `margin`.
*
* ```jsx
- * import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
+ * import { BoxControl } from '@wordpress/components';
* import { useState } from '@wordpress/element';
*
- * const Example = () => {
+ * function Example() {
* const [ values, setValues ] = useState( {
* top: '50px',
* left: '10%',
diff --git a/packages/components/src/box-control/stories/index.story.tsx b/packages/components/src/box-control/stories/index.story.tsx
index 1b6604048f6d52..783f9d047b1bb0 100644
--- a/packages/components/src/box-control/stories/index.story.tsx
+++ b/packages/components/src/box-control/stories/index.story.tsx
@@ -14,7 +14,7 @@ import { useState } from '@wordpress/element';
import BoxControl from '../';
const meta: Meta< typeof BoxControl > = {
- title: 'Components (Experimental)/BoxControl',
+ title: 'Components/BoxControl',
component: BoxControl,
argTypes: {
values: { control: { type: null } },
diff --git a/packages/components/src/box-control/types.ts b/packages/components/src/box-control/types.ts
index eeb72df14bb9c1..5f4071aeed88a7 100644
--- a/packages/components/src/box-control/types.ts
+++ b/packages/components/src/box-control/types.ts
@@ -37,13 +37,13 @@ export type BoxControlProps = Pick<
/**
* Props for the internal `UnitControl` components.
*
- * @default `{ min: 0 }`
+ * @default { min: 0 }
*/
inputProps?: UnitControlPassthroughProps;
/**
* Heading label for the control.
*
- * @default `__( 'Box Control' )`
+ * @default __( 'Box Control' )
*/
label?: string;
/**
@@ -53,7 +53,7 @@ export type BoxControlProps = Pick<
/**
* The `top`, `right`, `bottom`, and `left` box dimension values to use when the control is reset.
*
- * @default `{ top: undefined, right: undefined, bottom: undefined, left: undefined }`
+ * @default { top: undefined, right: undefined, bottom: undefined, left: undefined }
*/
resetValues?: BoxControlValue;
/**
diff --git a/packages/components/src/composite/group-label.tsx b/packages/components/src/composite/group-label.tsx
index 17070dbb86bf81..7e3c6ffdc7759c 100644
--- a/packages/components/src/composite/group-label.tsx
+++ b/packages/components/src/composite/group-label.tsx
@@ -20,11 +20,13 @@ export const CompositeGroupLabel = forwardRef<
WordPressComponentProps< CompositeGroupLabelProps, 'div', false >
>( function CompositeGroupLabel( props, ref ) {
const context = useCompositeContext();
+
+ // @ts-expect-error The store prop is undocumented and only used by the
+ // legacy compat layer. The `store` prop is documented, but its type is
+ // obfuscated to discourage its use outside of the component's internals.
+ const store = ( props.store ?? context.store ) as Ariakit.CompositeStore;
+
return (
- After
);
- renderAndValidate(
+ * Item
+ *
+ * }
+ * />
+ *
+ * // š¢ Good
+ *
+ *
+ * Item one
+ *
+ *
+ * ```
+ */
+export const WithTooltips: StoryObj< typeof Composite > = {
+ ...Default,
+ args: {
+ ...Default.args,
+ children: (
+ <>
+
+ Item one
+
+
+ Item two
+
+
+ Item three
+
+
+ ),
+ },
+};
diff --git a/packages/components/src/composite/test/index.tsx b/packages/components/src/composite/test/index.tsx
new file mode 100644
index 00000000000000..64619aaed01bd6
--- /dev/null
+++ b/packages/components/src/composite/test/index.tsx
@@ -0,0 +1,123 @@
+/**
+ * External dependencies
+ */
+import { queryByAttribute, render, screen } from '@testing-library/react';
+import { click, press, waitFor } from '@ariakit/test';
+import type { ComponentProps } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { Composite } from '..';
+
+// This is necessary because of how Ariakit calculates page up and
+// page down. Without this, nothing has a height, and so paging up
+// and down doesn't behave as expected in tests.
+
+let clientHeightSpy: jest.SpiedGetter<
+ typeof HTMLElement.prototype.clientHeight
+>;
+
+beforeAll( () => {
+ clientHeightSpy = jest
+ .spyOn( HTMLElement.prototype, 'clientHeight', 'get' )
+ .mockImplementation( function getClientHeight( this: HTMLElement ) {
+ if ( this.tagName === 'BODY' ) {
+ return window.outerHeight;
+ }
+ return 50;
+ } );
+} );
+
+afterAll( () => {
+ clientHeightSpy?.mockRestore();
+} );
+
+async function renderAndValidate( ...args: Parameters< typeof render > ) {
+ const view = render( ...args );
+ await waitFor( () => {
+ const activeButton = queryByAttribute(
+ 'data-active-item',
+ view.baseElement,
+ 'true'
+ );
+ expect( activeButton ).not.toBeNull();
+ } );
+ return view;
+}
+
+function RemoveItemTest( props: ComponentProps< typeof Composite > ) {
+ const [ showThirdItem, setShowThirdItem ] = useState( true );
+ return (
+ <>
+ Focus trap before composite
+
+ Item 1
+ Item 2
+ { showThirdItem && Item 3 }
+
+ setShowThirdItem( ( value ) => ! value ) }>
+ Toggle third item
+
+
+ );
+}
+
+describe( 'Composite', () => {
+ it( 'should remain focusable even when there are no elements in the DOM associated with the currently active ID', async () => {
+ await renderAndValidate(
@@ -150,6 +151,7 @@ export function DatePicker( {
)
);
} }
+ size="compact"
/>
= {
icon: more,
children: ( { onClose } ) => (
<>
+
+ Standalone Item
+
Move Up
diff --git a/packages/components/src/dropdown/stories/index.story.tsx b/packages/components/src/dropdown/stories/index.story.tsx
index c6fe5014ffdc2a..0f07664787cc33 100644
--- a/packages/components/src/dropdown/stories/index.story.tsx
+++ b/packages/components/src/dropdown/stories/index.story.tsx
@@ -99,6 +99,7 @@ export const WithMenuItems: StoryObj< typeof Dropdown > = {
...Default.args,
renderContent: () => (
<>
+ Standalone Item
Item 1
Item 2
diff --git a/packages/components/src/dropdown/style.scss b/packages/components/src/dropdown/style.scss
index 8a5b0e0a0a6a28..d7ae7963f7ed8c 100644
--- a/packages/components/src/dropdown/style.scss
+++ b/packages/components/src/dropdown/style.scss
@@ -5,6 +5,16 @@
.components-dropdown__content {
.components-popover__content {
padding: $grid-unit-10;
+
+ &:has(.components-menu-group) {
+ padding: 0;
+
+ .components-dropdown-menu__menu > .components-menu-item__button,
+ > .components-menu-item__button {
+ margin: $grid-unit-10;
+ width: auto;
+ }
+ }
}
[role="menuitem"] {
@@ -13,22 +23,9 @@
.components-menu-group {
padding: $grid-unit-10;
- margin-top: 0;
- margin-bottom: 0;
- margin-left: -$grid-unit-10;
- margin-right: -$grid-unit-10;
-
- &:first-child {
- margin-top: -$grid-unit-10;
- }
-
- &:last-child {
- margin-bottom: -$grid-unit-10;
- }
}
.components-menu-group + .components-menu-group {
- margin-top: 0;
border-top: $border-width solid $gray-400;
padding: $grid-unit-10;
}
diff --git a/packages/components/src/guide/index.tsx b/packages/components/src/guide/index.tsx
index 0ca5957fd3a656..121c9f22330e88 100644
--- a/packages/components/src/guide/index.tsx
+++ b/packages/components/src/guide/index.tsx
@@ -164,6 +164,7 @@ function Guide( {
className="components-guide__finish-button"
variant="primary"
onClick={ onFinish }
+ __next40pxDefaultSize
>
{ finishButtonText }
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 32195ebc444ce6..e82d6da70279e8 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -33,14 +33,22 @@ export {
} from './autocomplete';
export { default as BaseControl, useBaseControlProps } from './base-control';
export {
+ /** @deprecated Import `BorderBoxControl` instead. */
BorderBoxControl as __experimentalBorderBoxControl,
+ BorderBoxControl,
hasSplitBorders as __experimentalHasSplitBorders,
isDefinedBorder as __experimentalIsDefinedBorder,
isEmptyBorder as __experimentalIsEmptyBorder,
} from './border-box-control';
-export { BorderControl as __experimentalBorderControl } from './border-control';
export {
+ /** @deprecated Import `BorderControl` instead. */
+ BorderControl as __experimentalBorderControl,
+ BorderControl,
+} from './border-control';
+export {
+ /** @deprecated Import `BoxControl` instead. */
default as __experimentalBoxControl,
+ default as BoxControl,
applyValueToSides as __experimentalApplyValueToSides,
} from './box-control';
export { default as Button } from './button';
@@ -121,11 +129,21 @@ export { default as __experimentalNavigationGroup } from './navigation/group';
export { default as __experimentalNavigationItem } from './navigation/item';
export { default as __experimentalNavigationMenu } from './navigation/menu';
export {
+ /** @deprecated Import `Navigator` instead. */
NavigatorProvider as __experimentalNavigatorProvider,
+ /** @deprecated Import `Navigator` and use `Navigator.Screen` instead. */
NavigatorScreen as __experimentalNavigatorScreen,
+ /** @deprecated Import `Navigator` and use `Navigator.Button` instead. */
NavigatorButton as __experimentalNavigatorButton,
+ /** @deprecated Import `Navigator` and use `Navigator.BackButton` instead. */
NavigatorBackButton as __experimentalNavigatorBackButton,
+ /** @deprecated Import `Navigator` and use `Navigator.BackButton` instead. */
NavigatorToParentButton as __experimentalNavigatorToParentButton,
+} from './navigator/legacy';
+export {
+ Navigator,
+ useNavigator,
+ /** @deprecated Import `useNavigator` instead. */
useNavigator as __experimentalUseNavigator,
} from './navigator';
export { default as Notice } from './notice';
diff --git a/packages/components/src/menu-group/style.scss b/packages/components/src/menu-group/style.scss
index d9412c504940b3..744e3f74c5b955 100644
--- a/packages/components/src/menu-group/style.scss
+++ b/packages/components/src/menu-group/style.scss
@@ -1,5 +1,4 @@
.components-menu-group + .components-menu-group {
- margin-top: $grid-unit-10;
padding-top: $grid-unit-10;
border-top: $border-width solid $gray-900;
@@ -10,6 +9,10 @@
}
}
+.components-menu-group:has(> div:empty) {
+ display: none;
+}
+
.components-menu-group__label {
padding: 0 $grid-unit-10;
margin-top: $grid-unit-05;
diff --git a/packages/components/src/menu-items-choice/style.scss b/packages/components/src/menu-items-choice/style.scss
index 5de8363be0d6e8..383eb4066ba86b 100644
--- a/packages/components/src/menu-items-choice/style.scss
+++ b/packages/components/src/menu-items-choice/style.scss
@@ -1,5 +1,7 @@
.components-menu-items-choice,
.components-menu-items-choice.components-button {
+ height: auto;
+
svg {
margin-right: $grid-unit-15;
}
diff --git a/packages/components/src/navigator/README.md b/packages/components/src/navigator/README.md
new file mode 100644
index 00000000000000..b56a82e0524eef
--- /dev/null
+++ b/packages/components/src/navigator/README.md
@@ -0,0 +1,176 @@
+# `Navigator`
+
+`Navigator` is a collection components that allow rendering nested views/panels/menus (via the `Navigator.Screen` component) and navigate between them (via the `Navigator.Button` and `Navigator.BackButton` components).
+
+## Usage
+
+```jsx
+import { Navigator } from '@wordpress/components';
+
+const MyNavigation = () => (
+
+
+ This is the home screen.
+
+ Navigate to child screen.
+
+
+
+ This is the child screen.
+ Go back
+
+
+);
+```
+
+### Hierarchical `path`s
+
+`Navigator` assumes that screens are organized hierarchically according to their `path`, which should follow a URL-like scheme where each path segment starts with and is separated by the `/` character.
+
+`Navigator` will treat "back" navigations as going to the parent screen ā it is, therefore, the responsibility of the consumer of the component to create the correct screen hierarchy.
+
+For example:
+
+- `/` is the root of all paths. There should always be a screen with `path="/"`;
+- `/parent/child` is a child of `/parent`;
+- `/parent/child/grand-child` is a child of `/parent/child`;
+- `/parent/:param` is a child of `/parent` as well;
+- if the current screen has a `path="/parent/child/grand-child"`, when going "back" `Navigator` will try to recursively navigate the path hierarchy until a matching screen (or the root `/`) is found.
+
+### Height and animations
+
+Due to how `Navigator.Screen` animations work, it is recommended that the `Navigator` component is assigned a `height` to prevent some potential UI jumps while moving across screens.
+
+### Individual components
+
+`Navigator` is comprised of four individual components:
+
+- `Navigator`: a wrapper component and context provider. It holds the main logic for hiding and showing screens.
+- `Navigator.Screen`: represents a single view/screen/panel;
+- `Navigator.Button`: renders a button that allows navigating to a different `Navigator.Screen`;
+- `Navigator.BackButton`: renders a button that allows navigating to the parent `Navigator.Screen` (see the section above about hierarchical paths).
+
+For advanced usages, consumers can use the `useNavigator` hook.
+
+#### `Navigator`
+
+##### Props
+
+###### `initialPath`: `string`
+
+The initial active path.
+
+- Required: Yes
+
+###### `children`: `string`
+
+The children elements.
+
+- Required: Yes
+
+#### `Navigator.Screen`
+
+##### Props
+
+###### `path`: `string`
+
+The screen's path, matched against the current path stored in the navigator.
+
+`Navigator` assumes that screens are organized hierarchically according to their `path`, which should follow a URL-like scheme where each path segment starts with and is separated by the `/` character.
+
+`Navigator` will treat "back" navigations as going to the parent screen ā it is, therefore, the responsibility of the consumer of the component to create the correct screen hierarchy.
+
+For example:
+
+- `/` is the root of all paths. There should always be a screen with `path="/"`.
+- `/parent/child` is a child of `/parent`.
+- `/parent/child/grand-child` is a child of `/parent/child`.
+- `/parent/:param` is a child of `/parent` as well.
+- if the current screen has a `path` with value `/parent/child/grand-child`, when going "back" `Navigator` will try to recursively navigate the path hierarchy until a matching screen (or the root `/`) is found.
+
+- Required: Yes
+
+###### `children`: `string`
+
+The children elements.
+
+- Required: Yes
+
+#### `Navigator.Button`
+
+##### Props
+
+###### `path`: `string`
+
+The path of the screen to navigate to. The value of this prop needs to be [a valid value for an HTML attribute](https://html.spec.whatwg.org/multipage/syntax.html#attributes-2).
+
+- Required: Yes
+
+###### `attributeName`: `string`
+
+The HTML attribute used to identify the `Navigator.Button`, which is used by `Navigator` to restore focus.
+
+- Required: No
+- Default: `id`
+
+###### `children`: `string`
+
+The children elements.
+
+- Required: No
+
+###### Inherited props
+
+`Navigator.Button` also inherits all of the [`Button` props](/packages/components/src/button/README.md#props), except for `href` and `target`.
+
+#### `Navigator.BackButton`
+
+##### Props
+
+###### `children`: `string`
+
+The children elements.
+
+- Required: No
+
+###### Inherited props
+
+`Navigator.BackButton` also inherits all of the [`Button` props](/packages/components/src/button/README.md#props), except for `href` and `target`.
+
+#### `useNavigator`
+
+You can retrieve a `navigator` instance by using the `useNavigator` hook.
+
+##### Props
+
+The `navigator` instance has a few properties:
+
+###### `goTo`: `( path: string, options: NavigateOptions ) => void`
+
+The `goTo` function allows navigating to a given path. The second argument can augment the navigation operations with different options.
+
+The available options are:
+
+- `focusTargetSelector`: `string`. An optional property used to specify the CSS selector used to restore focus on the matching element when navigating back;
+- `isBack`: `boolean`. An optional property used to specify whether the navigation should be considered as backwards (thus enabling focus restoration when possible, and causing the animation to be backwards too);
+- `skipFocus`: `boolean`. An optional property used to opt out of `Navigator`'s focus management, useful when the consumer of the component wants to manage focus themselves;
+
+###### `goBack`: `( path: string, options: NavigateOptions ) => void`
+
+The `goBack` function allows navigating to the parent screen. Parent/child navigation only works if the paths you define are hierarchical (see note above).
+
+When a match is not found, the function will try to recursively navigate the path hierarchy until a matching screen (or the root `/`) is found.
+
+The available options are the same as for the `goTo` method, except for the `isBack` property, which is not available for the `goBack` method.
+
+###### `location`: `NavigatorLocation`
+
+The `location` object represents the current location, and has a few properties:
+
+- `path`: `string`. The path associated to the location.
+- `isBack`: `boolean`. A flag that is `true` when the current location was reached by navigating backwards.
+- `isInitial`: `boolean`. A flag that is `true` only for the initial location.
+
+###### `params`: `Record< string, string | string[] >`
+
+The parsed record of parameters from the current location. For example if the current screen path is `/product/:productId` and the location is `/product/123`, then `params` will be `{ productId: '123' }`.
diff --git a/packages/components/src/navigator/index.ts b/packages/components/src/navigator/index.ts
deleted file mode 100644
index 130edc2ae52eb8..00000000000000
--- a/packages/components/src/navigator/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export { NavigatorProvider } from './navigator-provider/component';
-export { NavigatorScreen } from './navigator-screen/component';
-export { NavigatorButton } from './navigator-button/component';
-export { NavigatorBackButton } from './navigator-back-button/component';
-export { NavigatorToParentButton } from './navigator-to-parent-button/component';
-export { useNavigator } from './use-navigator';
diff --git a/packages/components/src/navigator/index.tsx b/packages/components/src/navigator/index.tsx
new file mode 100644
index 00000000000000..1d9ae95441e01a
--- /dev/null
+++ b/packages/components/src/navigator/index.tsx
@@ -0,0 +1,131 @@
+/**
+ * Internal dependencies
+ */
+import { Navigator as TopLevelNavigator } from './navigator/component';
+import { NavigatorScreen } from './navigator-screen/component';
+import { NavigatorButton } from './navigator-button/component';
+import { NavigatorBackButton } from './navigator-back-button/component';
+export { useNavigator } from './use-navigator';
+
+/**
+ * The `Navigator` component allows rendering nested views/panels/menus
+ * (via the `Navigator.Screen` component) and navigate between them
+ * (via the `Navigator.Button` and `Navigator.BackButton` components).
+ *
+ * ```jsx
+ * import { Navigator } from '@wordpress/components';
+ *
+ * const MyNavigation = () => (
+ *
+ *
+ * This is the home screen.
+ *
+ * Navigate to child screen.
+ *
+ *
+ *
+ *
+ * This is the child screen.
+ *
+ * Go back
+ *
+ *
+ *
+ * );
+ * ```
+ */
+export const Navigator = Object.assign( TopLevelNavigator, {
+ /**
+ * The `Navigator.Screen` component represents a single view/screen/panel and
+ * should be used in combination with the `Navigator`, the `Navigator.Button`
+ * and the `Navigator.BackButton` components.
+ *
+ * @example
+ * ```jsx
+ * import { Navigator } from '@wordpress/components';
+ *
+ * const MyNavigation = () => (
+ *
+ *
+ * This is the home screen.
+ *
+ * Navigate to child screen.
+ *
+ *
+ *
+ *
+ * This is the child screen.
+ *
+ * Go back
+ *
+ *
+ *
+ * );
+ * ```
+ */
+ Screen: Object.assign( NavigatorScreen, {
+ displayName: 'Navigator.Screen',
+ } ),
+ /**
+ * The `Navigator.Button` component can be used to navigate to a screen and
+ * should be used in combination with the `Navigator`, the `Navigator.Screen`
+ * and the `Navigator.BackButton` components.
+ *
+ * @example
+ * ```jsx
+ * import { Navigator } from '@wordpress/components';
+ *
+ * const MyNavigation = () => (
+ *
+ *
+ * This is the home screen.
+ *
+ * Navigate to child screen.
+ *
+ *
+ *
+ *
+ * This is the child screen.
+ *
+ * Go back
+ *
+ *
+ *
+ * );
+ * ```
+ */
+ Button: Object.assign( NavigatorButton, {
+ displayName: 'Navigator.Button',
+ } ),
+ /**
+ * The `Navigator.BackButton` component can be used to navigate to a screen and
+ * should be used in combination with the `Navigator`, the `Navigator.Screen`
+ * and the `Navigator.Button` components.
+ *
+ * @example
+ * ```jsx
+ * import { Navigator } from '@wordpress/components';
+ *
+ * const MyNavigation = () => (
+ *
+ *
+ * This is the home screen.
+ *
+ * Navigate to child screen.
+ *
+ *
+ *
+ *
+ * This is the child screen.
+ *
+ * Go back
+ *
+ *
+ *
+ * );
+ * ```
+ */
+ BackButton: Object.assign( NavigatorBackButton, {
+ displayName: 'Navigator.BackButton',
+ } ),
+} );
diff --git a/packages/components/src/navigator/legacy.ts b/packages/components/src/navigator/legacy.ts
new file mode 100644
index 00000000000000..1caa5380fc049e
--- /dev/null
+++ b/packages/components/src/navigator/legacy.ts
@@ -0,0 +1,169 @@
+/**
+ * Internal dependencies
+ */
+import { Navigator as InternalNavigator } from './navigator/component';
+import { NavigatorScreen as InternalNavigatorScreen } from './navigator-screen/component';
+import { NavigatorButton as InternalNavigatorButton } from './navigator-button/component';
+import { NavigatorBackButton as InternalNavigatorBackButton } from './navigator-back-button/component';
+import { NavigatorToParentButton as InternalNavigatorToParentButton } from './navigator-to-parent-button/component';
+export { useNavigator } from './use-navigator';
+
+/**
+ * The `NavigatorProvider` component allows rendering nested views/panels/menus
+ * (via the `NavigatorScreen` component and navigate between them
+ * (via the `NavigatorButton` and `NavigatorBackButton` components).
+ *
+ * ```jsx
+ * import {
+ * __experimentalNavigatorProvider as NavigatorProvider,
+ * __experimentalNavigatorScreen as NavigatorScreen,
+ * __experimentalNavigatorButton as NavigatorButton,
+ * __experimentalNavigatorBackButton as NavigatorBackButton,
+ * } from '@wordpress/components';
+ *
+ * const MyNavigation = () => (
+ *
+ *
+ * This is the home screen.
+ *
+ * Navigate to child screen.
+ *
+ *
+ *
+ *
+ * This is the child screen.
+ *
+ * Go back
+ *
+ *
+ *
+ * );
+ * ```
+ */
+export const NavigatorProvider = Object.assign( InternalNavigator, {
+ displayName: 'NavigatorProvider',
+} );
+
+/**
+ * The `NavigatorScreen` component represents a single view/screen/panel and
+ * should be used in combination with the `NavigatorProvider`, the
+ * `NavigatorButton` and the `NavigatorBackButton` components.
+ *
+ * @example
+ * ```jsx
+ * import {
+ * __experimentalNavigatorProvider as NavigatorProvider,
+ * __experimentalNavigatorScreen as NavigatorScreen,
+ * __experimentalNavigatorButton as NavigatorButton,
+ * __experimentalNavigatorBackButton as NavigatorBackButton,
+ * } from '@wordpress/components';
+ *
+ * const MyNavigation = () => (
+ *
+ *
+ * This is the home screen.
+ *
+ * Navigate to child screen.
+ *
+ *
+ *
+ *
+ * This is the child screen.
+ *
+ * Go back
+ *
+ *
+ *
+ * );
+ * ```
+ */
+export const NavigatorScreen = Object.assign( InternalNavigatorScreen, {
+ displayName: 'NavigatorScreen',
+} );
+
+/**
+ * The `NavigatorButton` component can be used to navigate to a screen and should
+ * be used in combination with the `NavigatorProvider`, the `NavigatorScreen`
+ * and the `NavigatorBackButton` components.
+ *
+ * @example
+ * ```jsx
+ * import {
+ * __experimentalNavigatorProvider as NavigatorProvider,
+ * __experimentalNavigatorScreen as NavigatorScreen,
+ * __experimentalNavigatorButton as NavigatorButton,
+ * __experimentalNavigatorBackButton as NavigatorBackButton,
+ * } from '@wordpress/components';
+ *
+ * const MyNavigation = () => (
+ *
+ *
+ * This is the home screen.
+ *
+ * Navigate to child screen.
+ *
+ *
+ *
+ *
+ * This is the child screen.
+ *
+ * Go back
+ *
+ *
+ *
+ * );
+ * ```
+ */
+export const NavigatorButton = Object.assign( InternalNavigatorButton, {
+ displayName: 'NavigatorButton',
+} );
+
+/**
+ * The `NavigatorBackButton` component can be used to navigate to a screen and
+ * should be used in combination with the `NavigatorProvider`, the
+ * `NavigatorScreen` and the `NavigatorButton` components.
+ *
+ * @example
+ * ```jsx
+ * import {
+ * __experimentalNavigatorProvider as NavigatorProvider,
+ * __experimentalNavigatorScreen as NavigatorScreen,
+ * __experimentalNavigatorButton as NavigatorButton,
+ * __experimentalNavigatorBackButton as NavigatorBackButton,
+ * } from '@wordpress/components';
+ *
+ * const MyNavigation = () => (
+ *
+ *
+ * This is the home screen.
+ *
+ * Navigate to child screen.
+ *
+ *
+ *
+ *
+ * This is the child screen.
+ *
+ * Go back (to parent)
+ *
+ *
+ *
+ * );
+ * ```
+ */
+export const NavigatorBackButton = Object.assign( InternalNavigatorBackButton, {
+ displayName: 'NavigatorBackButton',
+} );
+
+/**
+ * _Note: this component is deprecated. Please use the `NavigatorBackButton`
+ * component instead._
+ *
+ * @deprecated
+ */
+export const NavigatorToParentButton = Object.assign(
+ InternalNavigatorToParentButton,
+ {
+ displayName: 'NavigatorToParentButton',
+ }
+);
diff --git a/packages/components/src/navigator/navigator-back-button/README.md b/packages/components/src/navigator/navigator-back-button/README.md
deleted file mode 100644
index 01d4221be536e5..00000000000000
--- a/packages/components/src/navigator/navigator-back-button/README.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# `NavigatorBackButton`
-
-
-This feature is still experimental. āExperimentalā means this is an early implementation subject to drastic and breaking changes.
-
-
-The `NavigatorBackButton` component can be used to navigate to a screen and should be used in combination with the [`NavigatorProvider`](/packages/components/src/navigator/navigator-provider/README.md), the [`NavigatorScreen`](/packages/components/src/navigator/navigator-screen/README.md) and the [`NavigatorButton`](/packages/components/src/navigator/navigator-button/README.md) components (or the `useNavigator` hook).
-
-## Usage
-
-Refer to [the `NavigatorProvider` component](/packages/components/src/navigator/navigator-provider/README.md#usage) for a usage example.
-
-### Inherited props
-
-`NavigatorBackButton` also inherits all of the [`Button` props](/packages/components/src/button/README.md#props), except for `href` and `target`.
diff --git a/packages/components/src/navigator/navigator-back-button/component.tsx b/packages/components/src/navigator/navigator-back-button/component.tsx
index 88ed45b643a13d..b5c4de7df78a85 100644
--- a/packages/components/src/navigator/navigator-back-button/component.tsx
+++ b/packages/components/src/navigator/navigator-back-button/component.tsx
@@ -21,43 +21,7 @@ function UnconnectedNavigatorBackButton(
return
;
}
-/**
- * The `NavigatorBackButton` component can be used to navigate to a screen and
- * should be used in combination with the `NavigatorProvider`, the
- * `NavigatorScreen` and the `NavigatorButton` components (or the `useNavigator`
- * hook).
- *
- * @example
- * ```jsx
- * import {
- * __experimentalNavigatorProvider as NavigatorProvider,
- * __experimentalNavigatorScreen as NavigatorScreen,
- * __experimentalNavigatorButton as NavigatorButton,
- * __experimentalNavigatorBackButton as NavigatorBackButton,
- * } from '@wordpress/components';
- *
- * const MyNavigation = () => (
- *
- *
- * This is the home screen.
- *
- * Navigate to child screen.
- *
- *
- *
- *
- * This is the child screen.
- *
- * Go back (to parent)
- *
- *
- *
- * );
- * ```
- */
export const NavigatorBackButton = contextConnect(
UnconnectedNavigatorBackButton,
- 'NavigatorBackButton'
+ 'Navigator.BackButton'
);
-
-export default NavigatorBackButton;
diff --git a/packages/components/src/navigator/navigator-back-button/hook.ts b/packages/components/src/navigator/navigator-back-button/hook.ts
index 9ddc095292190a..d6fcd39647bff9 100644
--- a/packages/components/src/navigator/navigator-back-button/hook.ts
+++ b/packages/components/src/navigator/navigator-back-button/hook.ts
@@ -20,7 +20,7 @@ export function useNavigatorBackButton(
as = Button,
...otherProps
- } = useContextSystem( props, 'NavigatorBackButton' );
+ } = useContextSystem( props, 'Navigator.BackButton' );
const { goBack } = useNavigator();
const handleClick: React.MouseEventHandler< HTMLButtonElement > =
diff --git a/packages/components/src/navigator/navigator-button/README.md b/packages/components/src/navigator/navigator-button/README.md
deleted file mode 100644
index 72154ec317da44..00000000000000
--- a/packages/components/src/navigator/navigator-button/README.md
+++ /dev/null
@@ -1,38 +0,0 @@
-# `NavigatorButton`
-
-
-This feature is still experimental. āExperimentalā means this is an early implementation subject to drastic and breaking changes.
-
-
-The `NavigatorButton` component can be used to navigate to a screen and should be used in combination with the [`NavigatorProvider`](/packages/components/src/navigator/navigator-provider/README.md), the [`NavigatorScreen`](/packages/components/src/navigator/navigator-screen/README.md) and the [`NavigatorBackButton`](/packages/components/src/navigator/navigator-back-button/README.md) components (or the `useNavigator` hook).
-
-## Usage
-
-Refer to [the `NavigatorProvider` component](/packages/components/src/navigator/navigator-provider/README.md#usage) for a usage example.
-
-## Props
-
-The component accepts the following props:
-
-### `attributeName`: `string`
-
-The HTML attribute used to identify the `NavigatorButton`, which is used by `Navigator` to restore focus.
-
-- Required: No
-- Default: `id`
-
-### `onClick`: `React.MouseEventHandler< HTMLElement >`
-
-The callback called in response to a `click` event.
-
-- Required: No
-
-### `path`: `string`
-
-The path of the screen to navigate to. The value of this prop needs to be [a valid value for an HTML attribute](https://html.spec.whatwg.org/multipage/syntax.html#attributes-2).
-
-- Required: Yes
-
-### Inherited props
-
-`NavigatorButton` also inherits all of the [`Button` props](/packages/components/src/button/README.md#props), except for `href` and `target`.
diff --git a/packages/components/src/navigator/navigator-button/component.tsx b/packages/components/src/navigator/navigator-button/component.tsx
index 1b84a2315c04d3..a6dc7963376723 100644
--- a/packages/components/src/navigator/navigator-button/component.tsx
+++ b/packages/components/src/navigator/navigator-button/component.tsx
@@ -21,42 +21,7 @@ function UnconnectedNavigatorButton(
return
;
}
-/**
- * The `NavigatorButton` component can be used to navigate to a screen and should
- * be used in combination with the `NavigatorProvider`, the `NavigatorScreen`
- * and the `NavigatorBackButton` components (or the `useNavigator` hook).
- *
- * @example
- * ```jsx
- * import {
- * __experimentalNavigatorProvider as NavigatorProvider,
- * __experimentalNavigatorScreen as NavigatorScreen,
- * __experimentalNavigatorButton as NavigatorButton,
- * __experimentalNavigatorBackButton as NavigatorBackButton,
- * } from '@wordpress/components';
- *
- * const MyNavigation = () => (
- *
- *
- * This is the home screen.
- *
- * Navigate to child screen.
- *
- *
- *
- *
- * This is the child screen.
- *
- * Go back
- *
- *
- *
- * );
- * ```
- */
export const NavigatorButton = contextConnect(
UnconnectedNavigatorButton,
- 'NavigatorButton'
+ 'Navigator.Button'
);
-
-export default NavigatorButton;
diff --git a/packages/components/src/navigator/navigator-button/hook.ts b/packages/components/src/navigator/navigator-button/hook.ts
index 3e39b05661e1b2..59d2aaa65662d7 100644
--- a/packages/components/src/navigator/navigator-button/hook.ts
+++ b/packages/components/src/navigator/navigator-button/hook.ts
@@ -25,7 +25,7 @@ export function useNavigatorButton(
as = Button,
attributeName = 'id',
...otherProps
- } = useContextSystem( props, 'NavigatorButton' );
+ } = useContextSystem( props, 'Navigator.Button' );
const escapedPath = escapeAttribute( path );
diff --git a/packages/components/src/navigator/navigator-provider/README.md b/packages/components/src/navigator/navigator-provider/README.md
deleted file mode 100644
index 35bf7a69720be2..00000000000000
--- a/packages/components/src/navigator/navigator-provider/README.md
+++ /dev/null
@@ -1,94 +0,0 @@
-# `NavigatorProvider`
-
-
-This feature is still experimental. āExperimentalā means this is an early implementation subject to drastic and breaking changes.
-
-
-The `NavigatorProvider` component allows rendering nested views/panels/menus (via the [`NavigatorScreen` component](/packages/components/src/navigator/navigator-screen/README.md)) and navigate between these different states (via the [`NavigatorButton`](/packages/components/src/navigator/navigator-button/README.md), [`NavigatorToParentButton`](/packages/components/src/navigator/navigator-to-parent-button/README.md) and [`NavigatorBackButton`](/packages/components/src/navigator/navigator-back-button/README.md) components or the `useNavigator` hook). The Global Styles sidebar is an example of this.
-
-## Usage
-
-```jsx
-import {
- __experimentalNavigatorProvider as NavigatorProvider,
- __experimentalNavigatorScreen as NavigatorScreen,
- __experimentalNavigatorButton as NavigatorButton,
- __experimentalNavigatorBackButton as NavigatorBackButton,
-} from '@wordpress/components';
-
-const MyNavigation = () => (
-
-
- This is the home screen.
-
- Navigate to child screen.
-
-
-
-
- This is the child screen.
- Go back
-
-
-);
-```
-
-**Important note**
-
-`Navigator` assumes that screens are organized hierarchically according to their `path`, which should follow a URL-like scheme where each path segment starts with and is separated by the `/` character.
-
-`Navigator` will treat "back" navigations as going to the parent screen ā it is therefore responsibility of the consumer of the component to create the correct screen hierarchy.
-
-For example:
-
-- `/` is the root of all paths. There should always be a screen with `path="/"`.
-- `/parent/child` is a child of `/parent`.
-- `/parent/child/grand-child` is a child of `/parent/child`.
-- `/parent/:param` is a child of `/parent` as well.
-- if the current screen has a `path` with value `/parent/child/grand-child`, when going "back" `Navigator` will try to recursively navigate the path hierarchy until a matching screen (or the root `/`) is found.
-
-## Props
-
-The component accepts the following props:
-
-### `initialPath`: `string`
-
-The initial active path.
-
-- Required: No
-
-## The `navigator` object
-
-You can retrieve a `navigator` instance by using the `useNavigator` hook.
-
-The `navigator` instance has a few properties:
-
-### `goTo`: `( path: string, options: NavigateOptions ) => void`
-
-The `goTo` function allows navigating to a given path. The second argument can augment the navigation operations with different options.
-
-The available options are:
-
-- `focusTargetSelector`: `string`. An optional property used to specify the CSS selector used to restore focus on the matching element when navigating back;
-- `isBack`: `boolean`. An optional property used to specify whether the navigation should be considered as backwards (thus enabling focus restoration when possible, and causing the animation to be backwards too);
-- `skipFocus`: `boolean`. An optional property used to opt out of `Navigator`'s focus management, useful when the consumer of the component wants to manage focus themselves;
-
-### `goBack`: `( path: string, options: NavigateOptions ) => void`
-
-The `goBack` function allows navigating to the parent screen. Parent/child navigation only works if the paths you define are hierarchical (see note above).
-
-When a match is not found, the function will try to recursively navigate the path hierarchy until a matching screen (or the root `/`) are found.
-
-The available options are the same as for the `goTo` method, except for the `isBack` property, which is not available for the `goBack` method.
-
-### `location`: `NavigatorLocation`
-
-The `location` object represent the current location, and has a few properties:
-
-- `path`: `string`. The path associated to the location.
-- `isBack`: `boolean`. A flag that is `true` when the current location was reached by navigating backwards.
-- `isInitial`: `boolean`. A flag that is `true` only for the initial location.
-
-### `params`: `Record< string, string | string[] >`
-
-The parsed record of parameters from the current location. For example if the current screen path is `/product/:productId` and the location is `/product/123`, then `params` will be `{ productId: '123' }`.
diff --git a/packages/components/src/navigator/navigator-screen/README.md b/packages/components/src/navigator/navigator-screen/README.md
deleted file mode 100644
index 583da461cd3c27..00000000000000
--- a/packages/components/src/navigator/navigator-screen/README.md
+++ /dev/null
@@ -1,33 +0,0 @@
-# `NavigatorScreen`
-
-
-This feature is still experimental. āExperimentalā means this is an early implementation subject to drastic and breaking changes.
-
-
-The `NavigatorScreen` component represents a single view/screen/panel and should be used in combination with the [`NavigatorProvider`](/packages/components/src/navigator/navigator-provider/README.md), the [`NavigatorButton`](/packages/components/src/navigator/navigator-button/README.md) and the [`NavigatorBackButton`](/packages/components/src/navigator/navigator-back-button/README.md) components (or the `useNavigator` hook).
-
-## Usage
-
-Refer to [the `NavigatorProvider` component](/packages/components/src/navigator/navigator-provider/README.md#usage) for a usage example.
-
-## Props
-
-The component accepts the following props:
-
-### `path`: `string`
-
-The screen"s path, matched against the current path stored in the navigator.
-
-`Navigator` assumes that screens are organized hierarchically according to their `path`, which should follow a URL-like scheme where each path segment starts with and is separated by the `/` character.
-
-`Navigator` will treat "back" navigations as going to the parent screen ā it is therefore responsibility of the consumer of the component to create the correct screen hierarchy.
-
-For example:
-
-- `/` is the root of all paths. There should always be a screen with `path="/"`.
-- `/parent/child` is a child of `/parent`.
-- `/parent/child/grand-child` is a child of `/parent/child`.
-- `/parent/:param` is a child of `/parent` as well.
-- if the current screen has a `path` with value `/parent/child/grand-child`, when going "back" `Navigator` will try to recursively navigate the path hierarchy until a matching screen (or the root `/`) is found.
-
-- Required: Yes
diff --git a/packages/components/src/navigator/navigator-screen/component.tsx b/packages/components/src/navigator/navigator-screen/component.tsx
index 5882f271d4518f..fe0d81b90a17be 100644
--- a/packages/components/src/navigator/navigator-screen/component.tsx
+++ b/packages/components/src/navigator/navigator-screen/component.tsx
@@ -15,7 +15,6 @@ import {
useId,
} from '@wordpress/element';
import { useMergeRefs } from '@wordpress/compose';
-import { isRTL as isRTLFn } from '@wordpress/i18n';
import { escapeAttribute } from '@wordpress/escape-html';
import warning from '@wordpress/warning';
@@ -29,6 +28,7 @@ import { View } from '../../view';
import { NavigatorContext } from '../context';
import * as styles from '../styles';
import type { NavigatorScreenProps } from '../types';
+import { useScreenAnimatePresence } from './use-screen-animate-presence';
function UnconnectedNavigatorScreen(
props: WordPressComponentProps< NavigatorScreenProps, 'div', false >,
@@ -36,21 +36,29 @@ function UnconnectedNavigatorScreen(
) {
if ( ! /^\//.test( props.path ) ) {
warning(
- 'wp.components.NavigatorScreen: the `path` should follow a URL-like scheme; it should start with and be separated by the `/` character.'
+ 'wp.components.Navigator.Screen: the `path` should follow a URL-like scheme; it should start with and be separated by the `/` character.'
);
}
const screenId = useId();
- const { children, className, path, ...otherProps } = useContextSystem(
- props,
- 'NavigatorScreen'
- );
+
+ const {
+ children,
+ className,
+ path,
+ onAnimationEnd: onAnimationEndProp,
+ ...otherProps
+ } = useContextSystem( props, 'Navigator.Screen' );
const { location, match, addScreen, removeScreen } =
useContext( NavigatorContext );
+ const { isInitial, isBack, focusTargetSelector, skipFocus } = location;
+
const isMatch = match === screenId;
const wrapperRef = useRef< HTMLDivElement >( null );
+ const skipAnimationAndFocusRestoration = !! isInitial && ! isBack;
+ // Register / unregister screen with the navigator context.
useEffect( () => {
const screen = {
id: screenId,
@@ -60,31 +68,28 @@ function UnconnectedNavigatorScreen(
return () => removeScreen( screen );
}, [ screenId, path, addScreen, removeScreen ] );
- const isRTL = isRTLFn();
- const { isInitial, isBack } = location;
+ // Animation.
+ const { animationStyles, shouldRenderScreen, screenProps } =
+ useScreenAnimatePresence( {
+ isMatch,
+ isBack,
+ onAnimationEnd: onAnimationEndProp,
+ skipAnimation: skipAnimationAndFocusRestoration,
+ } );
+
const cx = useCx();
const classes = useMemo(
- () =>
- cx(
- styles.navigatorScreen( {
- isInitial,
- isBack,
- isRTL,
- } ),
- className
- ),
- [ className, cx, isInitial, isBack, isRTL ]
+ () => cx( styles.navigatorScreen, animationStyles, className ),
+ [ className, cx, animationStyles ]
);
+ // Focus restoration
const locationRef = useRef( location );
-
useEffect( () => {
locationRef.current = location;
}, [ location ] );
-
- // Focus restoration
- const isInitialLocation = location.isInitial && ! location.isBack;
useEffect( () => {
+ const wrapperEl = wrapperRef.current;
// Only attempt to restore focus:
// - if the current location is not the initial one (to avoid moving focus on page load)
// - when the screen becomes visible
@@ -92,20 +97,20 @@ function UnconnectedNavigatorScreen(
// - if focus hasn't already been restored for the current location
// - if the `skipFocus` option is not set to `true`. This is useful when we trigger the navigation outside of NavigatorScreen.
if (
- isInitialLocation ||
+ skipAnimationAndFocusRestoration ||
! isMatch ||
- ! wrapperRef.current ||
+ ! wrapperEl ||
locationRef.current.hasRestoredFocus ||
- location.skipFocus
+ skipFocus
) {
return;
}
- const activeElement = wrapperRef.current.ownerDocument.activeElement;
+ const activeElement = wrapperEl.ownerDocument.activeElement;
// If an element is already focused within the wrapper do not focus the
// element. This prevents inputs or buttons from losing focus unnecessarily.
- if ( wrapperRef.current.contains( activeElement ) ) {
+ if ( wrapperEl.contains( activeElement ) ) {
return;
}
@@ -113,75 +118,42 @@ function UnconnectedNavigatorScreen(
// When navigating back, if a selector is provided, use it to look for the
// target element (assumed to be a node inside the current NavigatorScreen)
- if ( location.isBack && location.focusTargetSelector ) {
- elementToFocus = wrapperRef.current.querySelector(
- location.focusTargetSelector
- );
+ if ( isBack && focusTargetSelector ) {
+ elementToFocus = wrapperEl.querySelector( focusTargetSelector );
}
// If the previous query didn't run or find any element to focus, fallback
// to the first tabbable element in the screen (or the screen itself).
if ( ! elementToFocus ) {
- const [ firstTabbable ] = focus.tabbable.find( wrapperRef.current );
- elementToFocus = firstTabbable ?? wrapperRef.current;
+ const [ firstTabbable ] = focus.tabbable.find( wrapperEl );
+ elementToFocus = firstTabbable ?? wrapperEl;
}
locationRef.current.hasRestoredFocus = true;
elementToFocus.focus();
}, [
- isInitialLocation,
+ skipAnimationAndFocusRestoration,
isMatch,
- location.isBack,
- location.focusTargetSelector,
- location.skipFocus,
+ isBack,
+ focusTargetSelector,
+ skipFocus,
] );
const mergedWrapperRef = useMergeRefs( [ forwardedRef, wrapperRef ] );
- return isMatch ? (
-
+ return shouldRenderScreen ? (
+
{ children }
) : null;
}
-/**
- * The `NavigatorScreen` component represents a single view/screen/panel and
- * should be used in combination with the `NavigatorProvider`, the
- * `NavigatorButton` and the `NavigatorBackButton` components (or the `useNavigator`
- * hook).
- *
- * @example
- * ```jsx
- * import {
- * __experimentalNavigatorProvider as NavigatorProvider,
- * __experimentalNavigatorScreen as NavigatorScreen,
- * __experimentalNavigatorButton as NavigatorButton,
- * __experimentalNavigatorBackButton as NavigatorBackButton,
- * } from '@wordpress/components';
- *
- * const MyNavigation = () => (
- *
- *
- * This is the home screen.
- *
- * Navigate to child screen.
- *
- *
- *
- *
- * This is the child screen.
- *
- * Go back
- *
- *
- *
- * );
- * ```
- */
export const NavigatorScreen = contextConnect(
UnconnectedNavigatorScreen,
- 'NavigatorScreen'
+ 'Navigator.Screen'
);
-
-export default NavigatorScreen;
diff --git a/packages/components/src/navigator/navigator-screen/use-screen-animate-presence.ts b/packages/components/src/navigator/navigator-screen/use-screen-animate-presence.ts
new file mode 100644
index 00000000000000..af5a47ee12df4c
--- /dev/null
+++ b/packages/components/src/navigator/navigator-screen/use-screen-animate-presence.ts
@@ -0,0 +1,177 @@
+/**
+ * WordPress dependencies
+ */
+import {
+ useState,
+ useEffect,
+ useLayoutEffect,
+ useCallback,
+} from '@wordpress/element';
+import { useReducedMotion } from '@wordpress/compose';
+import { isRTL as isRTLFn } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import * as styles from '../styles';
+
+// Possible values:
+// - 'INITIAL': the initial state
+// - 'ANIMATING_IN': start enter animation
+// - 'IN': enter animation has ended
+// - 'ANIMATING_OUT': start exit animation
+// - 'OUT': the exit animation has ended
+type AnimationStatus =
+ | 'INITIAL'
+ | 'ANIMATING_IN'
+ | 'IN'
+ | 'ANIMATING_OUT'
+ | 'OUT';
+
+// Allow an extra 20% of the total animation duration to account for potential
+// event loop delays.
+const ANIMATION_TIMEOUT_MARGIN = 1.2;
+
+const isEnterAnimation = (
+ animationDirection: 'end' | 'start',
+ animationStatus: AnimationStatus,
+ animationName: string
+) =>
+ animationStatus === 'ANIMATING_IN' &&
+ animationName === styles.ANIMATION_END_NAMES[ animationDirection ].in;
+
+const isExitAnimation = (
+ animationDirection: 'end' | 'start',
+ animationStatus: AnimationStatus,
+ animationName: string
+) =>
+ animationStatus === 'ANIMATING_OUT' &&
+ animationName === styles.ANIMATION_END_NAMES[ animationDirection ].out;
+
+export function useScreenAnimatePresence( {
+ isMatch,
+ skipAnimation,
+ isBack,
+ onAnimationEnd,
+}: {
+ isMatch: boolean;
+ skipAnimation: boolean;
+ isBack?: boolean;
+ onAnimationEnd?: React.AnimationEventHandler< Element >;
+} ) {
+ const isRTL = isRTLFn();
+ const prefersReducedMotion = useReducedMotion();
+
+ const [ animationStatus, setAnimationStatus ] =
+ useState< AnimationStatus >( 'INITIAL' );
+
+ // Start enter and exit animations when the screen is selected or deselected.
+ // The animation status is set to `IN` or `OUT` immediately if the animation
+ // should be skipped.
+ const becameSelected =
+ animationStatus !== 'ANIMATING_IN' &&
+ animationStatus !== 'IN' &&
+ isMatch;
+ const becameUnselected =
+ animationStatus !== 'ANIMATING_OUT' &&
+ animationStatus !== 'OUT' &&
+ ! isMatch;
+ useLayoutEffect( () => {
+ if ( becameSelected ) {
+ setAnimationStatus(
+ skipAnimation || prefersReducedMotion ? 'IN' : 'ANIMATING_IN'
+ );
+ } else if ( becameUnselected ) {
+ setAnimationStatus(
+ skipAnimation || prefersReducedMotion ? 'OUT' : 'ANIMATING_OUT'
+ );
+ }
+ }, [
+ becameSelected,
+ becameUnselected,
+ skipAnimation,
+ prefersReducedMotion,
+ ] );
+
+ // Animation attributes (derived state).
+ const animationDirection =
+ ( isRTL && isBack ) || ( ! isRTL && ! isBack ) ? 'end' : 'start';
+ const isAnimatingIn = animationStatus === 'ANIMATING_IN';
+ const isAnimatingOut = animationStatus === 'ANIMATING_OUT';
+ let animationType: 'in' | 'out' | undefined;
+ if ( isAnimatingIn ) {
+ animationType = 'in';
+ } else if ( isAnimatingOut ) {
+ animationType = 'out';
+ }
+
+ const onScreenAnimationEnd = useCallback(
+ ( e: React.AnimationEvent< HTMLElement > ) => {
+ onAnimationEnd?.( e );
+
+ if (
+ isExitAnimation(
+ animationDirection,
+ animationStatus,
+ e.animationName
+ )
+ ) {
+ // When the exit animation ends on an unselected screen, set the
+ // status to 'OUT' to remove the screen contents from the DOM.
+ setAnimationStatus( 'OUT' );
+ } else if (
+ isEnterAnimation(
+ animationDirection,
+ animationStatus,
+ e.animationName
+ )
+ ) {
+ // When the enter animation ends on a selected screen, set the
+ // status to 'IN' to ensure the screen is rendered in the DOM.
+ setAnimationStatus( 'IN' );
+ }
+ },
+ [ onAnimationEnd, animationStatus, animationDirection ]
+ );
+
+ // Fallback timeout to ensure that the logic is applied even if the
+ // `animationend` event is not triggered.
+ useEffect( () => {
+ let animationTimeout: number | undefined;
+
+ if ( isAnimatingOut ) {
+ animationTimeout = window.setTimeout( () => {
+ setAnimationStatus( 'OUT' );
+ animationTimeout = undefined;
+ }, styles.TOTAL_ANIMATION_DURATION.OUT * ANIMATION_TIMEOUT_MARGIN );
+ } else if ( isAnimatingIn ) {
+ animationTimeout = window.setTimeout( () => {
+ setAnimationStatus( 'IN' );
+ animationTimeout = undefined;
+ }, styles.TOTAL_ANIMATION_DURATION.IN * ANIMATION_TIMEOUT_MARGIN );
+ }
+
+ return () => {
+ if ( animationTimeout ) {
+ window.clearTimeout( animationTimeout );
+ animationTimeout = undefined;
+ }
+ };
+ }, [ isAnimatingOut, isAnimatingIn ] );
+
+ return {
+ animationStyles: styles.navigatorScreenAnimation,
+ // Render the screen's contents in the DOM not only when the screen is
+ // selected, but also while it is animating out.
+ shouldRenderScreen:
+ isMatch ||
+ animationStatus === 'IN' ||
+ animationStatus === 'ANIMATING_OUT',
+ screenProps: {
+ onAnimationEnd: onScreenAnimationEnd,
+ 'data-animation-direction': animationDirection,
+ 'data-animation-type': animationType,
+ 'data-skip-animation': skipAnimation || undefined,
+ },
+ } as const;
+}
diff --git a/packages/components/src/navigator/navigator-to-parent-button/README.md b/packages/components/src/navigator/navigator-to-parent-button/README.md
deleted file mode 100644
index 0100ea9b8d2e1f..00000000000000
--- a/packages/components/src/navigator/navigator-to-parent-button/README.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# `NavigatorToParentButton`
-
-
-This feature is still experimental. āExperimentalā means this is an early implementation subject to drastic and breaking changes.
-
-
-This component is deprecated. Please use the [`NavigatorBackButton`](/packages/components/src/navigator/navigator-back-button/README.md) component instead.
-
-The `NavigatorToParentButton` component can be used to navigate to a screen and should be used in combination with the [`NavigatorProvider`](/packages/components/src/navigator/navigator-provider/README.md), the [`NavigatorScreen`](/packages/components/src/navigator/navigator-screen/README.md) and the [`NavigatorButton`](/packages/components/src/navigator/navigator-button/README.md) components (or the `useNavigator` hook).
-
-## Usage
-
-Refer to [the `NavigatorProvider` component](/packages/components/src/navigator/navigator-provider/README.md#usage) for a usage example.
-
-### Inherited props
-
-`NavigatorToParentButton` also inherits all of the [`Button` props](/packages/components/src/button/README.md#props), except for `href` and `target`.
diff --git a/packages/components/src/navigator/navigator-to-parent-button/component.tsx b/packages/components/src/navigator/navigator-to-parent-button/component.tsx
index fcbadea03cf7bb..f1c2d27e2284a1 100644
--- a/packages/components/src/navigator/navigator-to-parent-button/component.tsx
+++ b/packages/components/src/navigator/navigator-to-parent-button/component.tsx
@@ -17,21 +17,16 @@ function UnconnectedNavigatorToParentButton(
) {
deprecated( 'wp.components.NavigatorToParentButton', {
since: '6.7',
- alternative: 'wp.components.NavigatorBackButton',
+ alternative: 'wp.components.Navigator.BackButton',
} );
return
- *
- * This is the home screen.
- *
- * Navigate to child screen.
- *
- *
- *
- *
- * This is the child screen.
- *
- * Go back
- *
- *
- *
- * );
- * ```
- */
-export const NavigatorProvider = contextConnect(
- UnconnectedNavigatorProvider,
- 'NavigatorProvider'
-);
-
-export default NavigatorProvider;
+export const Navigator = contextConnect( UnconnectedNavigator, 'Navigator' );
diff --git a/packages/components/src/navigator/stories/index.story.tsx b/packages/components/src/navigator/stories/index.story.tsx
index 30b9c71a368c1a..e9e342bb0d2eee 100644
--- a/packages/components/src/navigator/stories/index.story.tsx
+++ b/packages/components/src/navigator/stories/index.story.tsx
@@ -8,20 +8,20 @@ import type { Meta, StoryObj } from '@storybook/react';
*/
import Button from '../../button';
import { VStack } from '../../v-stack';
-import {
- NavigatorProvider,
- NavigatorScreen,
- NavigatorButton,
- NavigatorBackButton,
- useNavigator,
-} from '..';
import { HStack } from '../../h-stack';
-
-const meta: Meta< typeof NavigatorProvider > = {
- component: NavigatorProvider,
- // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
- subcomponents: { NavigatorScreen, NavigatorButton, NavigatorBackButton },
- title: 'Components (Experimental)/Navigator',
+import { Navigator, useNavigator } from '../';
+
+const meta: Meta< typeof Navigator > = {
+ component: Navigator,
+ subcomponents: {
+ // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+ Screen: Navigator.Screen,
+ // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+ Button: Navigator.Button,
+ // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+ BackButton: Navigator.BackButton,
+ },
+ title: 'Components/Navigator',
argTypes: {
as: { control: { type: null } },
children: { control: { type: null } },
@@ -36,14 +36,14 @@ const meta: Meta< typeof NavigatorProvider > = {
return (
<>
@@ -55,55 +55,55 @@ const meta: Meta< typeof NavigatorProvider > = {
};
export default meta;
-export const Default: StoryObj< typeof NavigatorProvider > = {
+export const Default: StoryObj< typeof Navigator > = {
args: {
initialPath: '/',
children: (
<>
-
+
This is the home screen.
-
+
Go to child screen.
-
+
-
+
Go to dynamic path screen with id 1.
-
+
-
+
Go to dynamic path screen with id 2.
-
+
-
+
-
+
This is the child screen.
-
+
Go back
-
+
-
Go to grand child screen.
-
+
-
+
-
+
This is the grand child screen.
-
+
Go back
-
-
+
+
-
+
+
),
},
@@ -119,14 +119,14 @@ function DynamicScreen() {
This screen can parse params dynamically. The current id is:{ ' ' }
{ params.id }
-
+
Go back
-
+
);
}
-export const WithNestedInitialPath: StoryObj< typeof NavigatorProvider > = {
+export const WithNestedInitialPath: StoryObj< typeof Navigator > = {
...Default,
args: {
...Default.args,
@@ -138,7 +138,7 @@ const NavigatorButtonWithSkipFocus = ( {
path,
onClick,
...props
-}: React.ComponentProps< typeof NavigatorButton > ) => {
+}: React.ComponentProps< typeof Navigator.Button > ) => {
const { goTo } = useNavigator();
return (
@@ -156,7 +156,7 @@ const NavigatorButtonWithSkipFocus = ( {
);
};
-export const SkipFocus: StoryObj< typeof NavigatorProvider > = {
+export const SkipFocus: StoryObj< typeof Navigator > = {
args: {
initialPath: '/',
children: (
@@ -167,21 +167,22 @@ export const SkipFocus: StoryObj< typeof NavigatorProvider > = {
outline: '1px solid black',
outlineOffset: '-1px',
marginBlockEnd: '1rem',
+ display: 'contents',
} }
>
-
+
Home screen
-
+
Go to child screen.
-
-
+
+
-
+
Child screen
-
+
Go back to home screen
-
-
+
+
diff --git a/packages/components/src/navigator/styles.ts b/packages/components/src/navigator/styles.ts
index 0203edbdf1816a..167d4ac07de3d6 100644
--- a/packages/components/src/navigator/styles.ts
+++ b/packages/components/src/navigator/styles.ts
@@ -3,69 +3,140 @@
*/
import { css, keyframes } from '@emotion/react';
-export const navigatorProviderWrapper = css`
+export const navigatorWrapper = css`
+ position: relative;
/* Prevents horizontal overflow while animating screen transitions */
- overflow-x: hidden;
- /* Mark this subsection of the DOM as isolated, providing performance benefits
- * by limiting calculations of layout, style and paint to a DOM subtree rather
- * than the entire page.
+ overflow-x: clip;
+ /*
+ * Mark this DOM subtree as isolated when it comes to layout calculations,
+ * providing performance benefits.
*/
- contain: content;
+ contain: layout;
+
+ display: grid;
+ grid-template-columns: 1fr;
+ grid-template-rows: 1fr;
+ align-items: start;
`;
-const fadeInFromRight = keyframes( {
- '0%': {
+const fadeIn = keyframes( {
+ from: {
opacity: 0,
- transform: `translateX( 50px )`,
},
- '100%': { opacity: 1, transform: 'none' },
} );
-const fadeInFromLeft = keyframes( {
- '0%': {
+const fadeOut = keyframes( {
+ to: {
opacity: 0,
- transform: `translateX( -50px )`,
},
- '100%': { opacity: 1, transform: 'none' },
} );
-type NavigatorScreenAnimationProps = {
- isInitial?: boolean;
- isBack?: boolean;
- isRTL: boolean;
+export const slideFromRight = keyframes( {
+ from: {
+ transform: 'translateX(100px)',
+ },
+} );
+
+export const slideToLeft = keyframes( {
+ to: {
+ transform: 'translateX(-80px)',
+ },
+} );
+
+export const slideFromLeft = keyframes( {
+ from: {
+ transform: 'translateX(-100px)',
+ },
+} );
+
+export const slideToRight = keyframes( {
+ to: {
+ transform: 'translateX(80px)',
+ },
+} );
+
+const FADE = {
+ DURATION: 70,
+ EASING: 'linear',
+ DELAY: {
+ IN: 70,
+ OUT: 40,
+ },
+};
+const SLIDE = {
+ DURATION: 300,
+ EASING: 'cubic-bezier(0.33, 0, 0, 1)',
+};
+
+export const TOTAL_ANIMATION_DURATION = {
+ IN: Math.max( FADE.DURATION + FADE.DELAY.IN, SLIDE.DURATION ),
+ OUT: Math.max( FADE.DURATION + FADE.DELAY.OUT, SLIDE.DURATION ),
};
-const navigatorScreenAnimation = ( {
- isInitial,
- isBack,
- isRTL,
-}: NavigatorScreenAnimationProps ) => {
- if ( isInitial && ! isBack ) {
- return;
- }
+export const ANIMATION_END_NAMES = {
+ end: {
+ in: slideFromRight.name,
+ out: slideToLeft.name,
+ },
+ start: {
+ in: slideFromLeft.name,
+ out: slideToRight.name,
+ },
+};
- const animationName =
- ( isRTL && isBack ) || ( ! isRTL && ! isBack )
- ? fadeInFromRight
- : fadeInFromLeft;
+const ANIMATION = {
+ end: {
+ in: css`
+ ${ FADE.DURATION }ms ${ FADE.EASING } ${ FADE.DELAY
+ .IN }ms both ${ fadeIn }, ${ SLIDE.DURATION }ms ${ SLIDE.EASING } both ${ slideFromRight }
+ `,
+ out: css`
+ ${ FADE.DURATION }ms ${ FADE.EASING } ${ FADE.DELAY
+ .OUT }ms both ${ fadeOut }, ${ SLIDE.DURATION }ms ${ SLIDE.EASING } both ${ slideToLeft }
+ `,
+ },
+ start: {
+ in: css`
+ ${ FADE.DURATION }ms ${ FADE.EASING } ${ FADE.DELAY
+ .IN }ms both ${ fadeIn }, ${ SLIDE.DURATION }ms ${ SLIDE.EASING } both ${ slideFromLeft }
+ `,
+ out: css`
+ ${ FADE.DURATION }ms ${ FADE.EASING } ${ FADE.DELAY
+ .OUT }ms both ${ fadeOut }, ${ SLIDE.DURATION }ms ${ SLIDE.EASING } both ${ slideToRight }
+ `,
+ },
+} as const;
+export const navigatorScreenAnimation = css`
+ z-index: 1;
- return css`
- animation-duration: 0.14s;
- animation-timing-function: ease-in-out;
- will-change: transform, opacity;
- animation-name: ${ animationName };
+ &[data-animation-type='out'] {
+ z-index: 0;
+ }
- @media ( prefers-reduced-motion ) {
- animation-duration: 0s;
+ @media not ( prefers-reduced-motion ) {
+ &:not( [data-skip-animation] ) {
+ ${ ( [ 'start', 'end' ] as const ).map( ( direction ) =>
+ ( [ 'in', 'out' ] as const ).map(
+ ( type ) => css`
+ &[data-animation-direction='${ direction }'][data-animation-type='${ type }'] {
+ animation: ${ ANIMATION[ direction ][ type ] };
+ }
+ `
+ )
+ ) }
}
- `;
-};
+ }
+`;
-export const navigatorScreen = ( props: NavigatorScreenAnimationProps ) => css`
+export const navigatorScreen = css`
/* Ensures horizontal overflow is visually accessible */
overflow-x: auto;
/* In case the root has a height, it should not be exceeded */
max-height: 100%;
+ box-sizing: border-box;
+
+ position: relative;
- ${ navigatorScreenAnimation( props ) }
+ grid-column: 1 / -1;
+ grid-row: 1 / -1;
`;
diff --git a/packages/components/src/navigator/test/index.tsx b/packages/components/src/navigator/test/index.tsx
index 820942a22644ba..cab6e9a4cdadff 100644
--- a/packages/components/src/navigator/test/index.tsx
+++ b/packages/components/src/navigator/test/index.tsx
@@ -14,14 +14,8 @@ import { useState } from '@wordpress/element';
* Internal dependencies
*/
import Button from '../../button';
-import {
- NavigatorProvider,
- NavigatorScreen,
- NavigatorButton,
- NavigatorBackButton,
- NavigatorToParentButton,
- useNavigator,
-} from '..';
+import { Navigator, useNavigator } from '..';
+import { NavigatorToParentButton } from '../legacy';
import type { NavigateOptions } from '../types';
const INVALID_HTML_ATTRIBUTE = {
@@ -76,11 +70,11 @@ function CustomNavigatorButton( {
path,
onClick,
...props
-}: Omit< ComponentPropsWithoutRef< typeof NavigatorButton >, 'onClick' > & {
+}: Omit< ComponentPropsWithoutRef< typeof Navigator.Button >, 'onClick' > & {
onClick?: CustomTestOnClickHandler;
} ) {
return (
- {
// Used to spy on the values passed to `navigator.goTo`.
onClick?.( { type: 'goTo', path } );
@@ -95,7 +89,7 @@ function CustomNavigatorGoToBackButton( {
path,
onClick,
...props
-}: Omit< ComponentPropsWithoutRef< typeof NavigatorButton >, 'onClick' > & {
+}: Omit< ComponentPropsWithoutRef< typeof Navigator.Button >, 'onClick' > & {
onClick?: CustomTestOnClickHandler;
} ) {
const { goTo } = useNavigator();
@@ -115,7 +109,7 @@ function CustomNavigatorGoToSkipFocusButton( {
path,
onClick,
...props
-}: Omit< ComponentPropsWithoutRef< typeof NavigatorButton >, 'onClick' > & {
+}: Omit< ComponentPropsWithoutRef< typeof Navigator.Button >, 'onClick' > & {
onClick?: CustomTestOnClickHandler;
} ) {
const { goTo } = useNavigator();
@@ -134,11 +128,14 @@ function CustomNavigatorGoToSkipFocusButton( {
function CustomNavigatorBackButton( {
onClick,
...props
-}: Omit< ComponentPropsWithoutRef< typeof NavigatorBackButton >, 'onClick' > & {
+}: Omit<
+ ComponentPropsWithoutRef< typeof Navigator.BackButton >,
+ 'onClick'
+> & {
onClick?: CustomTestOnClickHandler;
} ) {
return (
- {
// Used to spy on the values passed to `navigator.goBack`.
onClick?.( { type: 'goBack' } );
@@ -151,7 +148,10 @@ function CustomNavigatorBackButton( {
function CustomNavigatorToParentButton( {
onClick,
...props
-}: Omit< ComponentPropsWithoutRef< typeof NavigatorBackButton >, 'onClick' > & {
+}: Omit<
+ ComponentPropsWithoutRef< typeof Navigator.BackButton >,
+ 'onClick'
+> & {
onClick?: CustomTestOnClickHandler;
} ) {
return (
@@ -194,13 +194,13 @@ const ProductScreen = ( {
const { params } = useNavigator();
return (
-
+
{ SCREEN_TEXT.product }
Product ID is { params.productId }
{ BUTTON_TEXT.back }
-
+
);
};
@@ -215,8 +215,8 @@ const MyNavigation = ( {
const [ outerInputValue, setOuterInputValue ] = useState( '' );
return (
<>
-
-
+
+
{ SCREEN_TEXT.home }
{ /*
* A button useful to test focus restoration. This button is the first
@@ -254,9 +254,9 @@ const MyNavigation = ( {
>
{ BUTTON_TEXT.toInvalidHtmlPathScreen }
-
+
-
+
{ SCREEN_TEXT.child }
{ /*
* A button useful to test focus restoration. This button is the first
@@ -286,30 +286,30 @@ const MyNavigation = ( {
} }
value={ innerInputValue }
/>
-
+
-
+
{ SCREEN_TEXT.nested }
{ BUTTON_TEXT.back }
-
+
+
{ SCREEN_TEXT.invalidHtmlPath }
{ BUTTON_TEXT.back }
-
+
- { /* A `NavigatorScreen` with `path={ PATHS.NOT_FOUND }` is purposefully not included. */ }
-
+ { /* A `Navigator.Screen` with `path={ PATHS.NOT_FOUND }` is purposefully not included. */ }
+
Outer input
-
+
+
{ SCREEN_TEXT.home }
{ /*
* A button useful to test focus restoration. This button is the first
@@ -349,9 +349,9 @@ const MyHierarchicalNavigation = ( {
>
{ BUTTON_TEXT.toChildScreen }
-
+
-
+
{ SCREEN_TEXT.child }
{ /*
* A button useful to test focus restoration. This button is the first
@@ -370,9 +370,9 @@ const MyHierarchicalNavigation = ( {
>
{ BUTTON_TEXT.back }
-
+
-
+
{ SCREEN_TEXT.nested }
{ BUTTON_TEXT.backUsingGoTo }
-
+
{ BUTTON_TEXT.goToWithSkipFocus }
-
+
);
};
@@ -406,8 +406,8 @@ const MyDeprecatedNavigation = ( {
} ) => {
return (
<>
-
-
+
+
{ SCREEN_TEXT.home }
{ /*
* A button useful to test focus restoration. This button is the first
@@ -421,9 +421,9 @@ const MyDeprecatedNavigation = ( {
>
{ BUTTON_TEXT.toChildScreen }
-
+
-
+
{ SCREEN_TEXT.child }
{ /*
* A button useful to test focus restoration. This button is the first
@@ -442,17 +442,17 @@ const MyDeprecatedNavigation = ( {
>
{ BUTTON_TEXT.back }
-
+
-
+
{ SCREEN_TEXT.nested }
{ BUTTON_TEXT.back }
-
-
+
+
);
};
@@ -643,10 +643,10 @@ describe( 'Navigator', () => {
} );
it( 'should warn if the `path` prop does not follow the required format', () => {
- render( Test );
+ render( Test );
expect( console ).toHaveWarnedWith(
- 'wp.components.NavigatorScreen: the `path` should follow a URL-like scheme; it should start with and be separated by the `/` character.'
+ 'wp.components.Navigator.Screen: the `path` should follow a URL-like scheme; it should start with and be separated by the `/` character.'
);
} );
@@ -880,7 +880,7 @@ describe( 'Navigator', () => {
// Rendering `NavigatorToParentButton` logs a deprecation notice
expect( console ).toHaveWarnedWith(
- 'wp.components.NavigatorToParentButton is deprecated since version 6.7. Please use wp.components.NavigatorBackButton instead.'
+ 'wp.components.NavigatorToParentButton is deprecated since version 6.7. Please use wp.components.Navigator.BackButton instead.'
);
} );
diff --git a/packages/components/src/navigator/types.ts b/packages/components/src/navigator/types.ts
index 855787b4d0a193..aeb5fd3b12c7fb 100644
--- a/packages/components/src/navigator/types.ts
+++ b/packages/components/src/navigator/types.ts
@@ -86,7 +86,7 @@ export type NavigatorContext = Navigator & {
match?: string;
};
-export type NavigatorProviderProps = {
+export type NavigatorProps = {
/**
* The initial active path.
*/
@@ -100,6 +100,24 @@ export type NavigatorProviderProps = {
export type NavigatorScreenProps = {
/**
* The screen's path, matched against the current path stored in the navigator.
+ *
+ * `Navigator` assumes that screens are organized hierarchically according
+ * to their `path`, which should follow a URL-like scheme where each path
+ * segment starts with and is separated by the `/` character.
+ *
+ * `Navigator` will treat "back" navigations as going to the parent screen ā
+ * it is, therefore, the responsibility of the consumer of the component to
+ * create the correct screen hierarchy.
+ *
+ * For example:
+ * - `/` is the root of all paths. There should always be a screen with
+ * `path="/"`;
+ * - `/parent/child` is a child of `/parent`;
+ * - `/parent/child/grand-child` is a child of `/parent/child`;
+ * - `/parent/:param` is a child of `/parent` as well;
+ * - if the current screen has a `path="/parent/child/grand-child"`, when
+ * going "back" `Navigator` will try to recursively navigate the path
+ * hierarchy until a matching screen (or the root `/`) is found.
*/
path: string;
/**
diff --git a/packages/components/src/navigator/use-navigator.ts b/packages/components/src/navigator/use-navigator.ts
index 7ac35d73150d32..1ea99f3f1c857d 100644
--- a/packages/components/src/navigator/use-navigator.ts
+++ b/packages/components/src/navigator/use-navigator.ts
@@ -10,7 +10,10 @@ import { NavigatorContext } from './context';
import type { Navigator } from './types';
/**
- * Retrieves a `navigator` instance.
+ * Retrieves a `navigator` instance. This hook provides advanced functionality,
+ * such as imperatively navigating to a new location (with options like
+ * navigating back or skipping focus restoration) and accessing the current
+ * location and path parameters.
*/
export function useNavigator(): Navigator {
const { location, params, goTo, goBack, goToParent } =
diff --git a/packages/components/src/search-control/index.tsx b/packages/components/src/search-control/index.tsx
index aac905e137e025..c41eda9b209b6c 100644
--- a/packages/components/src/search-control/index.tsx
+++ b/packages/components/src/search-control/index.tsx
@@ -67,7 +67,7 @@ function UnforwardedSearchControl(
) {
// @ts-expect-error The `disabled` prop is not yet supported in the SearchControl component.
// Work with the design team (@WordPress/gutenberg-design) if you need this feature.
- delete restProps.disabled;
+ const { disabled, ...filteredRestProps } = restProps;
const searchRef = useRef< HTMLInputElement >( null );
const instanceId = useInstanceId(
@@ -117,7 +117,7 @@ function UnforwardedSearchControl(
/>
}
- { ...restProps }
+ { ...filteredRestProps }
/>
);
diff --git a/packages/components/src/select-control/stories/index.story.tsx b/packages/components/src/select-control/stories/index.story.tsx
index 018f519e6b6d43..5e57a4eaecd5ab 100644
--- a/packages/components/src/select-control/stories/index.story.tsx
+++ b/packages/components/src/select-control/stories/index.story.tsx
@@ -12,6 +12,7 @@ import { useState } from '@wordpress/element';
* Internal dependencies
*/
import SelectControl from '../';
+import { InputControlPrefixWrapper } from '../../input-control/input-prefix-wrapper';
const meta: Meta< typeof SelectControl > = {
title: 'Components/SelectControl',
@@ -64,6 +65,7 @@ const SelectControlWithState: StoryFn< typeof SelectControl > = ( props ) => {
export const Default = SelectControlWithState.bind( {} );
Default.args = {
__nextHasNoMarginBottom: true,
+ label: 'Label',
options: [
{ value: '', label: 'Select an Option', disabled: true },
{ value: 'a', label: 'Option A' },
@@ -76,7 +78,6 @@ export const WithLabelAndHelpText = SelectControlWithState.bind( {} );
WithLabelAndHelpText.args = {
...Default.args,
help: 'Help text to explain the select control.',
- label: 'Value',
};
/**
@@ -86,6 +87,7 @@ WithLabelAndHelpText.args = {
export const WithCustomChildren = SelectControlWithState.bind( {} );
WithCustomChildren.args = {
__nextHasNoMarginBottom: true,
+ label: 'Label',
children: (
<>
Option 1
@@ -104,8 +106,19 @@ WithCustomChildren.args = {
),
};
+/**
+ * By default, the prefix is aligned with the edge of the input border, with no padding.
+ * If you want to apply standard padding in accordance with the size variant, wrap the element in the `` component.
+ */
+export const WithPrefix = SelectControlWithState.bind( {} );
+WithPrefix.args = {
+ ...Default.args,
+ prefix: Prefix: ,
+};
+
export const Minimal = SelectControlWithState.bind( {} );
Minimal.args = {
...Default.args,
variant: 'minimal',
+ hideLabelFromVision: true,
};
diff --git a/packages/components/src/tabs/stories/index.story.tsx b/packages/components/src/tabs/stories/index.story.tsx
index e5f113d93b7d0e..0f7e0d2c6ac75f 100644
--- a/packages/components/src/tabs/stories/index.story.tsx
+++ b/packages/components/src/tabs/stories/index.story.tsx
@@ -70,6 +70,112 @@ const Template: StoryFn< typeof Tabs > = ( props ) => {
export const Default = Template.bind( {} );
+export const SizeAndOverflowPlayground: StoryFn< typeof Tabs > = ( props ) => {
+ const [ fullWidth, setFullWidth ] = useState( false );
+ return (
+
+
+
+ This story helps understand how the TabList component
+ behaves under different conditions. The container below
+ (with the dotted red border) can be horizontally resized,
+ and it has a bit of padding to be out of the way of the
+ TabList.
+
+
+ The button will toggle between full width (adding{ ' ' }
+ width: 100%) and the default width.
+
+
Try the following:
+
+
+ Small container that causes tabs to
+ overflow with scroll.
+
+
+ Large container that exceeds the normal
+ width of the tabs.
+
+
+
+ With width: 100%
+ { ' ' }
+ set on the TabList (tabs fill up the space).
+
+
+
+ Without width: 100%
+ { ' ' }
+ (defaults to auto) set on the
+ TabList (tabs take up space proportional to
+ their content).
+
+
+
+
+
+
setFullWidth( ! fullWidth ) }
+ >
+ { fullWidth
+ ? 'Remove width: 100% from TabList'
+ : 'Set width: 100% in TabList' }
+
+
+
+
+
+ Label with multiple words
+
+ Short
+
+ Hippopotomonstrosesquippedaliophobia
+
+ Tab 4
+ Tab 5
+
+
+
+ Selected tab: Tab 1
+ (Label with multiple words)
+
+
+ Selected tab: Tab 2
+ (Short)
+
+
+ Selected tab: Tab 3
+ (Hippopotomonstrosesquippedaliophobia)
+
+
+ Selected tab: Tab 4
+
+
+ Selected tab: Tab 5
+
+
+
diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index c00943b180f637..283d6421f5b768 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -16,32 +16,40 @@ export const TabListWrapper = styled.div`
align-items: stretch;
flex-direction: row;
text-align: center;
+ overflow-x: auto;
&[aria-orientation='vertical'] {
flex-direction: column;
text-align: start;
}
- @media not ( prefers-reduced-motion ) {
- &.is-animation-enabled::after {
- transition-property: transform;
- transition-duration: 0.2s;
- transition-timing-function: ease-out;
- }
+ :where( [aria-orientation='horizontal'] ) {
+ width: fit-content;
}
+
--direction-factor: 1;
- --direction-origin-x: left;
+ --direction-start: left;
+ --direction-end: right;
--indicator-start: var( --indicator-left );
&:dir( rtl ) {
--direction-factor: -1;
- --direction-origin-x: right;
+ --direction-start: right;
+ --direction-end: left;
--indicator-start: var( --indicator-right );
}
- &::after {
+
+ @media not ( prefers-reduced-motion ) {
+ &.is-animation-enabled::before {
+ transition-property: transform;
+ transition-duration: 0.2s;
+ transition-timing-function: ease-out;
+ }
+ }
+ &::before {
content: '';
position: absolute;
pointer-events: none;
- transform-origin: var( --direction-origin-x ) top;
+ transform-origin: var( --direction-start ) top;
// Windows high contrast mode.
outline: 2px solid transparent;
@@ -52,7 +60,31 @@ export const TabListWrapper = styled.div`
when scaling in the transform, see: https://stackoverflow.com/a/52159123 */
--antialiasing-factor: 100;
&:not( [aria-orientation='vertical'] ) {
- &::after {
+ --fade-width: 4rem;
+ --fade-gradient-base: transparent 0%, black var( --fade-width );
+ --fade-gradient-composed: var( --fade-gradient-base ), black 60%,
+ transparent 50%;
+ &.is-overflowing-first {
+ mask-image: linear-gradient(
+ to var( --direction-end ),
+ var( --fade-gradient-base )
+ );
+ }
+ &.is-overflowing-last {
+ mask-image: linear-gradient(
+ to var( --direction-start ),
+ var( --fade-gradient-base )
+ );
+ }
+ &.is-overflowing-first.is-overflowing-last {
+ mask-image: linear-gradient(
+ to right,
+ var( --fade-gradient-composed )
+ ),
+ linear-gradient( to left, var( --fade-gradient-composed ) );
+ }
+
+ &::before {
bottom: 0;
height: 0;
width: calc( var( --antialiasing-factor ) * 1px );
@@ -71,8 +103,7 @@ export const TabListWrapper = styled.div`
${ COLORS.theme.accent };
}
}
- &[aria-orientation='vertical']::after {
- z-index: -1;
+ &[aria-orientation='vertical']::before {
top: 0;
left: 0;
width: 100%;
@@ -87,14 +118,14 @@ export const TabListWrapper = styled.div`
export const Tab = styled( Ariakit.Tab )`
& {
+ scroll-margin: 24px;
+ flex-grow: 1;
+ flex-shrink: 0;
display: inline-flex;
align-items: center;
position: relative;
border-radius: 0;
- min-height: ${ space(
- 12
- ) }; // Avoid fixed height to allow for long strings that go in multiple lines.
- height: auto;
+ height: ${ space( 12 ) };
background: transparent;
border: none;
box-shadow: none;
@@ -104,7 +135,6 @@ export const Tab = styled( Ariakit.Tab )`
margin-left: 0;
font-weight: 500;
text-align: inherit;
- hyphens: auto;
color: ${ COLORS.theme.foreground };
&[aria-disabled='true'] {
@@ -123,7 +153,7 @@ export const Tab = styled( Ariakit.Tab )`
}
// Focus.
- &::before {
+ &::after {
content: '';
position: absolute;
top: ${ space( 3 ) };
@@ -146,7 +176,7 @@ export const Tab = styled( Ariakit.Tab )`
}
}
- &:focus-visible::before {
+ &:focus-visible::after {
opacity: 1;
}
}
@@ -156,6 +186,10 @@ export const Tab = styled( Ariakit.Tab )`
10
) }; // Avoid fixed height to allow for long strings that go in multiple lines.
}
+
+ [aria-orientation='horizontal'] & {
+ justify-content: center;
+ }
`;
export const TabPanel = styled( Ariakit.TabPanel )`
diff --git a/packages/components/src/tabs/tablist.tsx b/packages/components/src/tabs/tablist.tsx
index 2977d6a6283708..ae8daf60fc237c 100644
--- a/packages/components/src/tabs/tablist.tsx
+++ b/packages/components/src/tabs/tablist.tsx
@@ -8,7 +8,8 @@ import { useStoreState } from '@ariakit/react';
* WordPress dependencies
*/
import warning from '@wordpress/warning';
-import { forwardRef, useState } from '@wordpress/element';
+import { forwardRef, useLayoutEffect, useState } from '@wordpress/element';
+import { useMergeRefs } from '@wordpress/compose';
/**
* Internal dependencies
@@ -20,33 +21,58 @@ import type { WordPressComponentProps } from '../context';
import clsx from 'clsx';
import { useTrackElementOffsetRect } from '../utils/element-rect';
import { useOnValueUpdate } from '../utils/hooks/use-on-value-update';
+import { useTrackOverflow } from './use-track-overflow';
+
+const SCROLL_MARGIN = 24;
export const TabList = forwardRef<
HTMLDivElement,
WordPressComponentProps< TabListProps, 'div', false >
>( function TabList( { children, ...otherProps }, ref ) {
- const context = useTabsContext();
+ const { store } = useTabsContext() ?? {};
+
+ const selectedId = useStoreState( store, 'selectedId' );
+ const activeId = useStoreState( store, 'activeId' );
+ const selectOnMove = useStoreState( store, 'selectOnMove' );
+ const items = useStoreState( store, 'items' );
+ const [ parent, setParent ] = useState< HTMLElement | null >();
+ const refs = useMergeRefs( [ ref, setParent ] );
+ const overflow = useTrackOverflow( parent, {
+ first: items?.at( 0 )?.element,
+ last: items?.at( -1 )?.element,
+ } );
- const tabStoreState = useStoreState( context?.store );
- const selectedId = tabStoreState?.selectedId;
- const indicatorPosition = useTrackElementOffsetRect(
- context?.store.item( selectedId )?.element
+ const selectedTabPosition = useTrackElementOffsetRect(
+ store?.item( selectedId )?.element
);
const [ animationEnabled, setAnimationEnabled ] = useState( false );
- useOnValueUpdate(
- selectedId,
- ( { previousValue } ) => previousValue && setAnimationEnabled( true )
- );
+ useOnValueUpdate( selectedId, ( { previousValue } ) => {
+ if ( previousValue ) {
+ setAnimationEnabled( true );
+ }
+ } );
- if ( ! context || ! tabStoreState ) {
- warning( '`Tabs.TabList` must be wrapped in a `Tabs` component.' );
- return null;
- }
+ // Make sure selected tab is scrolled into view.
+ useLayoutEffect( () => {
+ if ( ! parent || ! selectedTabPosition ) {
+ return;
+ }
+
+ const { scrollLeft: parentScroll } = parent;
+ const parentWidth = parent.getBoundingClientRect().width;
+ const { left: childLeft, width: childWidth } = selectedTabPosition;
- const { store } = context;
- const { activeId, selectOnMove } = tabStoreState;
- const { setActiveId } = store;
+ const parentRightEdge = parentScroll + parentWidth;
+ const childRightEdge = childLeft + childWidth;
+ const rightOverflow = childRightEdge + SCROLL_MARGIN - parentRightEdge;
+ const leftOverflow = parentScroll - ( childLeft - SCROLL_MARGIN );
+ if ( leftOverflow > 0 ) {
+ parent.scrollLeft = parentScroll - leftOverflow;
+ } else if ( rightOverflow > 0 ) {
+ parent.scrollLeft = parentScroll + rightOverflow;
+ }
+ }, [ parent, selectedTabPosition ] );
const onBlur = () => {
if ( ! selectOnMove ) {
@@ -58,35 +84,43 @@ export const TabList = forwardRef<
// that the selected tab will receive keyboard focus when tabbing back into
// the tablist.
if ( selectedId !== activeId ) {
- setActiveId( selectedId );
+ store?.setActiveId( selectedId );
}
};
+ if ( ! store ) {
+ warning( '`Tabs.TabList` must be wrapped in a `Tabs` component.' );
+ return null;
+ }
+
return (
{
- if ( event.pseudoElement === '::after' ) {
+ if ( event.pseudoElement === '::before' ) {
setAnimationEnabled( false );
}
} }
/>
}
onBlur={ onBlur }
+ tabIndex={ -1 }
{ ...otherProps }
style={ {
- '--indicator-top': indicatorPosition.top,
- '--indicator-right': indicatorPosition.right,
- '--indicator-left': indicatorPosition.left,
- '--indicator-width': indicatorPosition.width,
- '--indicator-height': indicatorPosition.height,
+ '--indicator-top': selectedTabPosition.top,
+ '--indicator-right': selectedTabPosition.right,
+ '--indicator-left': selectedTabPosition.left,
+ '--indicator-width': selectedTabPosition.width,
+ '--indicator-height': selectedTabPosition.height,
...otherProps.style,
} }
className={ clsx(
- animationEnabled ? 'is-animation-enabled' : '',
+ overflow.first && 'is-overflowing-first',
+ overflow.last && 'is-overflowing-last',
+ animationEnabled && 'is-animation-enabled',
otherProps.className
) }
>
diff --git a/packages/components/src/tabs/use-track-overflow.ts b/packages/components/src/tabs/use-track-overflow.ts
new file mode 100644
index 00000000000000..5f6504e6875212
--- /dev/null
+++ b/packages/components/src/tabs/use-track-overflow.ts
@@ -0,0 +1,76 @@
+/* eslint-disable jsdoc/require-param */
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+import { useEvent } from '@wordpress/compose';
+
+/**
+ * Tracks if an element contains overflow and on which end by tracking the
+ * first and last child elements with an `IntersectionObserver` in relation
+ * to the parent element.
+ *
+ * Note that the returned value will only indicate whether the first or last
+ * element is currently "going out of bounds" but not whether it happens on
+ * the X or Y axis.
+ */
+export function useTrackOverflow(
+ parent: HTMLElement | undefined | null,
+ children: {
+ first: HTMLElement | undefined | null;
+ last: HTMLElement | undefined | null;
+ }
+) {
+ const [ first, setFirst ] = useState( false );
+ const [ last, setLast ] = useState( false );
+ const [ observer, setObserver ] = useState< IntersectionObserver >();
+
+ const callback: IntersectionObserverCallback = useEvent( ( entries ) => {
+ for ( const entry of entries ) {
+ if ( entry.target === children.first ) {
+ setFirst( ! entry.isIntersecting );
+ }
+ if ( entry.target === children.last ) {
+ setLast( ! entry.isIntersecting );
+ }
+ }
+ } );
+
+ useEffect( () => {
+ if ( ! parent || ! window.IntersectionObserver ) {
+ return;
+ }
+ const newObserver = new IntersectionObserver( callback, {
+ root: parent,
+ threshold: 0.9,
+ } );
+ setObserver( newObserver );
+
+ return () => newObserver.disconnect();
+ }, [ callback, parent ] );
+
+ useEffect( () => {
+ if ( ! observer ) {
+ return;
+ }
+
+ if ( children.first ) {
+ observer.observe( children.first );
+ }
+ if ( children.last ) {
+ observer.observe( children.last );
+ }
+
+ return () => {
+ if ( children.first ) {
+ observer.unobserve( children.first );
+ }
+ if ( children.last ) {
+ observer.unobserve( children.last );
+ }
+ };
+ }, [ children.first, children.last, observer ] );
+
+ return { first, last };
+}
+/* eslint-enable jsdoc/require-param */
diff --git a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
index e9b4f4ca22ab85..d2d98eaba85e6f 100644
--- a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
+++ b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
@@ -60,6 +60,55 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
outline-offset: -2px;
}
+@media not ( prefers-reduced-motion ) {
+ .emotion-8[data-indicator-animated]::before {
+ transition-property: transform,border-radius;
+ transition-duration: 0.2s;
+ transition-timing-function: ease-out;
+ }
+}
+
+.emotion-8::before {
+ content: '';
+ position: absolute;
+ pointer-events: none;
+ background: #1e1e1e;
+ outline: 2px solid transparent;
+ outline-offset: -3px;
+ --antialiasing-factor: 100;
+ border-radius: calc(
+ 1px /
+ (
+ var( --selected-width, 0 ) /
+ var( --antialiasing-factor )
+ )
+ )/1px;
+ left: -1px;
+ width: calc( var( --antialiasing-factor ) * 1px );
+ height: calc( var( --selected-height, 0 ) * 1px );
+ transform-origin: left top;
+ -webkit-transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
+ calc(
+ var( --selected-width, 0 ) / var( --antialiasing-factor )
+ )
+ );
+ -moz-transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
+ calc(
+ var( --selected-width, 0 ) / var( --antialiasing-factor )
+ )
+ );
+ -ms-transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
+ calc(
+ var( --selected-width, 0 ) / var( --antialiasing-factor )
+ )
+ );
+ transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
+ calc(
+ var( --selected-width, 0 ) / var( --antialiasing-factor )
+ )
+ );
+}
+
.emotion-10 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
@@ -150,17 +199,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
line-height: 1;
}
-.emotion-15 {
- background: #1e1e1e;
- border-radius: 1px;
- position: absolute;
- inset: 0;
- z-index: 1;
- outline: 2px solid transparent;
- outline-offset: -3px;
-}
-
-.emotion-18 {
+.emotion-17 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
@@ -204,22 +243,22 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
}
@media not ( prefers-reduced-motion ) {
- .emotion-18 {
+ .emotion-17 {
-webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
}
}
-.emotion-18::-moz-focus-inner {
+.emotion-17::-moz-focus-inner {
border: 0;
}
-.emotion-18[disabled] {
+.emotion-17[disabled] {
opacity: 0.4;
cursor: default;
}
-.emotion-18:active {
+.emotion-17:active {
background: #fff;
}
@@ -280,12 +319,6 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
-
-
{
if ( showTooltip && text ) {
return (
@@ -58,7 +51,6 @@ function ToggleGroupControlOptionBase(
>,
forwardedRef: ForwardedRef< any >
) {
- const shouldReduceMotion = useReducedMotion();
const toggleGroupControlContext = useToggleGroupControlContext();
const id = useInstanceId(
@@ -107,7 +99,6 @@ function ToggleGroupControlOptionBase(
),
[ cx, isDeselectable, isIcon, isPressed, size, className ]
);
- const backdropClasses = useMemo( () => cx( styles.backdropView ), [ cx ] );
const buttonOnClick = () => {
if ( isDeselectable && isPressed ) {
@@ -124,8 +115,15 @@ function ToggleGroupControlOptionBase(
ref: forwardedRef,
};
+ const labelRef = useRef< HTMLDivElement | null >( null );
+ useLayoutEffect( () => {
+ if ( isPressed && labelRef.current ) {
+ toggleGroupControlContext.setSelectedElement( labelRef.current );
+ }
+ }, [ isPressed, toggleGroupControlContext ] );
+
return (
-
+
) }
- { /* Animated backdrop using framer motion's shared layout animation */ }
- { isPressed ? (
-
-
- ) : null }
);
}
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts b/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts
index 86efc5224077f4..c0248f9b3f7f22 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts
@@ -70,7 +70,7 @@ export const buttonView = ( {
}
&:active {
- background: ${ CONFIG.toggleGroupControlBackgroundColor };
+ background: ${ CONFIG.controlBackgroundColor };
}
${ isDeselectable && deselectable }
@@ -119,14 +119,3 @@ const isIconStyles = ( {
padding-right: 0;
`;
};
-
-export const backdropView = css`
- background: ${ COLORS.gray[ 900 ] };
- border-radius: ${ CONFIG.radiusXSmall };
- position: absolute;
- inset: 0;
- z-index: 1;
- // Windows High Contrast mode will show this outline, but not the box-shadow.
- outline: 2px solid transparent;
- outline-offset: -3px;
-`;
diff --git a/packages/components/src/toggle-group-control/toggle-group-control/as-button-group.tsx b/packages/components/src/toggle-group-control/toggle-group-control/as-button-group.tsx
index b3f56bccd07c5f..7ce762b6e71df2 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control/as-button-group.tsx
+++ b/packages/components/src/toggle-group-control/toggle-group-control/as-button-group.tsx
@@ -26,6 +26,7 @@ function UnforwardedToggleGroupControlAsButtonGroup(
size,
value: valueProp,
id: idProp,
+ setSelectedElement,
...otherProps
}: WordPressComponentProps<
ToggleGroupControlMainControlProps,
@@ -54,16 +55,23 @@ function UnforwardedToggleGroupControlAsButtonGroup(
} );
const groupContextValue = useMemo(
- () =>
- ( {
- baseId,
- value: selectedValue,
- setValue: setSelectedValue,
- isBlock: ! isAdaptiveWidth,
- isDeselectable: true,
- size,
- } ) as ToggleGroupControlContextProps,
- [ baseId, selectedValue, setSelectedValue, isAdaptiveWidth, size ]
+ (): ToggleGroupControlContextProps => ( {
+ baseId,
+ value: selectedValue,
+ setValue: setSelectedValue,
+ isBlock: ! isAdaptiveWidth,
+ isDeselectable: true,
+ size,
+ setSelectedElement,
+ } ),
+ [
+ baseId,
+ selectedValue,
+ setSelectedValue,
+ isAdaptiveWidth,
+ size,
+ setSelectedElement,
+ ]
);
return (
diff --git a/packages/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx b/packages/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx
index 6baadd65dc5ff6..342f9f128defd9 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx
+++ b/packages/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx
@@ -10,6 +10,7 @@ import { useStoreState } from '@ariakit/react';
*/
import { useInstanceId } from '@wordpress/compose';
import { forwardRef, useMemo } from '@wordpress/element';
+import { isRTL } from '@wordpress/i18n';
/**
* Internal dependencies
@@ -32,6 +33,7 @@ function UnforwardedToggleGroupControlAsRadioGroup(
size,
value: valueProp,
id: idProp,
+ setSelectedElement,
...otherProps
}: WordPressComponentProps<
ToggleGroupControlMainControlProps,
@@ -65,21 +67,31 @@ function UnforwardedToggleGroupControlAsRadioGroup(
defaultValue,
value,
setValue: wrappedOnChangeProp,
+ rtl: isRTL(),
} );
const selectedValue = useStoreState( radio, 'value' );
const setValue = radio.setValue;
const groupContextValue = useMemo(
- () =>
- ( {
- baseId,
- isBlock: ! isAdaptiveWidth,
- size,
- value: selectedValue,
- setValue,
- } ) as ToggleGroupControlContextProps,
- [ baseId, isAdaptiveWidth, size, selectedValue, setValue ]
+ (): ToggleGroupControlContextProps => ( {
+ baseId,
+ isBlock: ! isAdaptiveWidth,
+ size,
+ // @ts-expect-error - This is wrong and we should fix it.
+ value: selectedValue,
+ // @ts-expect-error - This is wrong and we should fix it.
+ setValue,
+ setSelectedElement,
+ } ),
+ [
+ baseId,
+ isAdaptiveWidth,
+ selectedValue,
+ setSelectedElement,
+ setValue,
+ size,
+ ]
);
return (
diff --git a/packages/components/src/toggle-group-control/toggle-group-control/component.tsx b/packages/components/src/toggle-group-control/toggle-group-control/component.tsx
index 1c86c93548f6df..cdf8a2c04eb0b8 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control/component.tsx
+++ b/packages/components/src/toggle-group-control/toggle-group-control/component.tsx
@@ -2,13 +2,11 @@
* External dependencies
*/
import type { ForwardedRef } from 'react';
-import { LayoutGroup } from 'framer-motion';
/**
* WordPress dependencies
*/
-import { useInstanceId } from '@wordpress/compose';
-import { useMemo } from '@wordpress/element';
+import { useLayoutEffect, useMemo, useState } from '@wordpress/element';
/**
* Internal dependencies
@@ -22,6 +20,104 @@ import { VisualLabelWrapper } from './styles';
import * as styles from './styles';
import { ToggleGroupControlAsRadioGroup } from './as-radio-group';
import { ToggleGroupControlAsButtonGroup } from './as-button-group';
+import type { ElementOffsetRect } from '../../utils/element-rect';
+import { useTrackElementOffsetRect } from '../../utils/element-rect';
+import { useOnValueUpdate } from '../../utils/hooks/use-on-value-update';
+import { useEvent, useMergeRefs } from '@wordpress/compose';
+
+/**
+ * A utility used to animate something in a container component based on the "offset
+ * rect" (position relative to the container and size) of a subelement. For example,
+ * this is useful to render an indicator for the selected option of a component, and
+ * to animate it when the selected option changes.
+ *
+ * Takes in a container element and the up-to-date "offset rect" of the target
+ * subelement, obtained with `useTrackElementOffsetRect`. Then it does the following:
+ *
+ * - Adds CSS variables with rect information to the container, so that the indicator
+ * can be rendered and animated with them. These are kept up-to-date, enabling CSS
+ * transitions on change.
+ * - Sets an attribute (`data-subelement-animated` by default) when the tracked
+ * element changes, so that the target (e.g. the indicator) can be animated to its
+ * new size and position.
+ * - Removes the attribute when the animation is done.
+ *
+ * The need for the attribute is due to the fact that the rect might update in
+ * situations other than when the tracked element changes, e.g. the tracked element
+ * might be resized. In such cases, there is no need to animate the indicator, and
+ * the change in size or position of the indicator needs to be reflected immediately.
+ */
+function useAnimatedOffsetRect(
+ /**
+ * The container element.
+ */
+ container: HTMLElement | undefined,
+ /**
+ * The rect of the tracked element.
+ */
+ rect: ElementOffsetRect,
+ {
+ prefix = 'subelement',
+ dataAttribute = `${ prefix }-animated`,
+ transitionEndFilter = () => true,
+ }: {
+ /**
+ * The prefix used for the CSS variables, e.g. if `prefix` is `selected`, the
+ * CSS variables will be `--selected-top`, `--selected-left`, etc.
+ * @default 'subelement'
+ */
+ prefix?: string;
+ /**
+ * The name of the data attribute used to indicate that the animation is in
+ * progress. The `data-` prefix is added automatically.
+ *
+ * For example, if `dataAttribute` is `indicator-animated`, the attribute will
+ * be `data-indicator-animated`.
+ * @default `${ prefix }-animated`
+ */
+ dataAttribute?: string;
+ /**
+ * A function that is called with the transition event and returns a boolean
+ * indicating whether the animation should be stopped. The default is a function
+ * that always returns `true`.
+ *
+ * For example, if the animated element is the `::before` pseudo-element, the
+ * function can be written as `( event ) => event.pseudoElement === '::before'`.
+ * @default () => true
+ */
+ transitionEndFilter?: ( event: TransitionEvent ) => boolean;
+ } = {}
+) {
+ const setProperties = useEvent( () => {
+ ( Object.keys( rect ) as Array< keyof typeof rect > ).forEach(
+ ( property ) =>
+ property !== 'element' &&
+ container?.style.setProperty(
+ `--${ prefix }-${ property }`,
+ String( rect[ property ] )
+ )
+ );
+ } );
+ useLayoutEffect( () => {
+ setProperties();
+ }, [ rect, setProperties ] );
+ useOnValueUpdate( rect.element, ( { previousValue } ) => {
+ // Only enable the animation when moving from one element to another.
+ if ( rect.element && previousValue ) {
+ container?.setAttribute( `data-${ dataAttribute }`, '' );
+ }
+ } );
+ useLayoutEffect( () => {
+ function onTransitionEnd( event: TransitionEvent ) {
+ if ( transitionEndFilter( event ) ) {
+ container?.removeAttribute( `data-${ dataAttribute }` );
+ }
+ }
+ container?.addEventListener( 'transitionend', onTransitionEnd );
+ return () =>
+ container?.removeEventListener( 'transitionend', onTransitionEnd );
+ }, [ dataAttribute, container, transitionEndFilter ] );
+}
function UnconnectedToggleGroupControl(
props: WordPressComponentProps< ToggleGroupControlProps, 'div', false >,
@@ -44,10 +140,21 @@ function UnconnectedToggleGroupControl(
...otherProps
} = useContextSystem( props, 'ToggleGroupControl' );
- const baseId = useInstanceId( ToggleGroupControl, 'toggle-group-control' );
const normalizedSize =
__next40pxDefaultSize && size === 'default' ? '__unstable-large' : size;
+ const [ selectedElement, setSelectedElement ] = useState< HTMLElement >();
+ const [ controlElement, setControlElement ] = useState< HTMLElement >();
+ const refs = useMergeRefs( [ setControlElement, forwardedRef ] );
+ const selectedRect = useTrackElementOffsetRect(
+ value ? selectedElement : undefined
+ );
+ useAnimatedOffsetRect( controlElement, selectedRect, {
+ prefix: 'selected',
+ dataAttribute: 'indicator-animated',
+ transitionEndFilter: ( event ) => event.pseudoElement === '::before',
+ } );
+
const cx = useCx();
const classes = useMemo(
@@ -81,15 +188,16 @@ function UnconnectedToggleGroupControl(
) }
- { children }
+ { children }
);
diff --git a/packages/components/src/toggle-group-control/toggle-group-control/styles.ts b/packages/components/src/toggle-group-control/toggle-group-control/styles.ts
index 8d01c150a45eaf..bb6efe476b2b2c 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control/styles.ts
+++ b/packages/components/src/toggle-group-control/toggle-group-control/styles.ts
@@ -26,6 +26,47 @@ export const toggleGroupControl = ( {
${ toggleGroupControlSize( size ) }
${ ! isDeselectable && enclosingBorders( isBlock ) }
+
+ @media not ( prefers-reduced-motion ) {
+ &[data-indicator-animated]::before {
+ transition-property: transform, border-radius;
+ transition-duration: 0.2s;
+ transition-timing-function: ease-out;
+ }
+ }
+
+ &::before {
+ content: '';
+ position: absolute;
+ pointer-events: none;
+ background: ${ COLORS.gray[ 900 ] };
+
+ // Windows High Contrast mode will show this outline, but not the box-shadow.
+ outline: 2px solid transparent;
+ outline-offset: -3px;
+
+ /* Using a large value to avoid antialiasing rounding issues
+ when scaling in the transform, see: https://stackoverflow.com/a/52159123 */
+ --antialiasing-factor: 100;
+ /* Adjusting the border radius to match the scaling in the x axis. */
+ border-radius: calc(
+ ${ CONFIG.radiusXSmall } /
+ (
+ var( --selected-width, 0 ) /
+ var( --antialiasing-factor )
+ )
+ ) / ${ CONFIG.radiusXSmall };
+ left: -1px; // Correcting for border.
+ width: calc( var( --antialiasing-factor ) * 1px );
+ height: calc( var( --selected-height, 0 ) * 1px );
+ transform-origin: left top;
+ transform: translateX( calc( var( --selected-left, 0 ) * 1px ) )
+ scaleX(
+ calc(
+ var( --selected-width, 0 ) / var( --antialiasing-factor )
+ )
+ );
+ }
`;
const enclosingBorders = ( isBlock: ToggleGroupControlProps[ 'isBlock' ] ) => {
diff --git a/packages/components/src/toggle-group-control/types.ts b/packages/components/src/toggle-group-control/types.ts
index d49ef3cbb77cb4..2a4af680263dba 100644
--- a/packages/components/src/toggle-group-control/types.ts
+++ b/packages/components/src/toggle-group-control/types.ts
@@ -137,9 +137,11 @@ export type ToggleGroupControlContextProps = {
size: ToggleGroupControlProps[ 'size' ];
value: ToggleGroupControlProps[ 'value' ];
setValue: ( newValue: string | number | undefined ) => void;
+ setSelectedElement: ( element: HTMLElement | undefined ) => void;
};
export type ToggleGroupControlMainControlProps = Pick<
ToggleGroupControlProps,
'children' | 'isAdaptiveWidth' | 'label' | 'size' | 'onChange' | 'value'
->;
+> &
+ Pick< ToggleGroupControlContextProps, 'setSelectedElement' >;
diff --git a/packages/components/src/tools-panel/tools-panel/README.md b/packages/components/src/tools-panel/tools-panel/README.md
index df41b623eefb6c..1daa7537335e1c 100644
--- a/packages/components/src/tools-panel/tools-panel/README.md
+++ b/packages/components/src/tools-panel/tools-panel/README.md
@@ -60,7 +60,7 @@ import styled from '@emotion/styled';
* WordPress dependencies
*/
import {
- __experimentalBoxControl as BoxControl,
+ BoxControl,
__experimentalToolsPanel as ToolsPanel,
__experimentalToolsPanelItem as ToolsPanelItem,
__experimentalUnitControl as UnitControl,
@@ -91,8 +91,8 @@ export function DimensionPanel() {
return (
- Select dimensions or spacing related settings from the
- menu for additional controls.
+ Select dimensions or spacing related settings from the menu for
+ additional controls.
!! height }
@@ -154,8 +154,8 @@ export function DimensionPanel() {
Flags that the items in this ToolsPanel will be contained within an inner
wrapper element allowing the panel to lay them out accordingly.
-- Required: No
-- Default: `false`
+- Required: No
+- Default: `false`
### `dropdownMenuProps`: `{}`
@@ -176,7 +176,7 @@ The heading level of the panel's header.
Text to be displayed within the panel's header and as the `aria-label` for the
panel's dropdown menu.
-- Required: Yes
+- Required: Yes
### `panelId`: `string | null`
@@ -185,13 +185,13 @@ to restrict panel items. When a `panelId` is set, items can only register
themselves if the `panelId` is explicitly `null` or the item's `panelId` matches
exactly.
-- Required: No
+- Required: No
### `resetAll`: `( filters?: ResetAllFilter[] ) => void`
A function to call when the `Reset all` menu option is selected. As an argument, it receives an array containing the `resetAllFilter` callbacks of all the valid registered `ToolsPanelItems`.
-- Required: Yes
+- Required: Yes
### `shouldRenderPlaceholderItems`: `boolean`
@@ -201,5 +201,5 @@ placeholder content (instead of `null`) when they are toggled off and hidden.
Note that placeholder items won't apply the `className` that would be
normally applied to a visible `ToolsPanelItem` via the `className` prop.
-- Required: No
-- Default: `false`
+- Required: No
+- Default: `false`
diff --git a/packages/components/src/tools-panel/tools-panel/hook.ts b/packages/components/src/tools-panel/tools-panel/hook.ts
index 931bf2494e6e34..583a079ab20026 100644
--- a/packages/components/src/tools-panel/tools-panel/hook.ts
+++ b/packages/components/src/tools-panel/tools-panel/hook.ts
@@ -5,8 +5,8 @@ import {
useCallback,
useEffect,
useMemo,
+ useReducer,
useRef,
- useState,
} from '@wordpress/element';
/**
@@ -27,14 +27,40 @@ import type {
const DEFAULT_COLUMNS = 2;
+type PanelItemsState = {
+ panelItems: ToolsPanelItem[];
+ menuItemOrder: string[];
+ menuItems: ToolsPanelMenuItems;
+};
+
+type PanelItemsAction =
+ | { type: 'REGISTER_PANEL'; item: ToolsPanelItem }
+ | { type: 'UNREGISTER_PANEL'; label: string }
+ | {
+ type: 'UPDATE_VALUE';
+ group: ToolsPanelMenuItemKey;
+ label: string;
+ value: boolean;
+ }
+ | { type: 'TOGGLE_VALUE'; label: string }
+ | { type: 'RESET_ALL' };
+
+function emptyMenuItems(): ToolsPanelMenuItems {
+ return { default: {}, optional: {} };
+}
+
+function emptyState(): PanelItemsState {
+ return { panelItems: [], menuItemOrder: [], menuItems: emptyMenuItems() };
+}
+
const generateMenuItems = ( {
panelItems,
shouldReset,
currentMenuItems,
menuItemOrder,
}: ToolsPanelMenuItemsConfig ) => {
- const newMenuItems: ToolsPanelMenuItems = { default: {}, optional: {} };
- const menuItems: ToolsPanelMenuItems = { default: {}, optional: {} };
+ const newMenuItems: ToolsPanelMenuItems = emptyMenuItems();
+ const menuItems: ToolsPanelMenuItems = emptyMenuItems();
panelItems.forEach( ( { hasValue, isShownByDefault, label } ) => {
const group = isShownByDefault ? 'default' : 'optional';
@@ -75,9 +101,149 @@ const generateMenuItems = ( {
return menuItems;
};
+function panelItemsReducer(
+ panelItems: ToolsPanelItem[],
+ action: PanelItemsAction
+) {
+ switch ( action.type ) {
+ case 'REGISTER_PANEL': {
+ const newItems = [ ...panelItems ];
+ // If an item with this label has already been registered, remove it
+ // first. This can happen when an item is moved between the default
+ // and optional groups.
+ const existingIndex = newItems.findIndex(
+ ( oldItem ) => oldItem.label === action.item.label
+ );
+ if ( existingIndex !== -1 ) {
+ newItems.splice( existingIndex, 1 );
+ }
+ newItems.push( action.item );
+ return newItems;
+ }
+ case 'UNREGISTER_PANEL': {
+ const index = panelItems.findIndex(
+ ( item ) => item.label === action.label
+ );
+ if ( index !== -1 ) {
+ const newItems = [ ...panelItems ];
+ newItems.splice( index, 1 );
+ return newItems;
+ }
+ return panelItems;
+ }
+ default:
+ return panelItems;
+ }
+}
+
+function menuItemOrderReducer(
+ menuItemOrder: string[],
+ action: PanelItemsAction
+) {
+ switch ( action.type ) {
+ case 'REGISTER_PANEL': {
+ // Track the initial order of item registration. This is used for
+ // maintaining menu item order later.
+ if ( menuItemOrder.includes( action.item.label ) ) {
+ return menuItemOrder;
+ }
+
+ return [ ...menuItemOrder, action.item.label ];
+ }
+ default:
+ return menuItemOrder;
+ }
+}
+
+function menuItemsReducer( state: PanelItemsState, action: PanelItemsAction ) {
+ switch ( action.type ) {
+ case 'REGISTER_PANEL':
+ case 'UNREGISTER_PANEL':
+ // generate new menu items from original `menuItems` and updated `panelItems` and `menuItemOrder`
+ return generateMenuItems( {
+ currentMenuItems: state.menuItems,
+ panelItems: state.panelItems,
+ menuItemOrder: state.menuItemOrder,
+ shouldReset: false,
+ } );
+ case 'RESET_ALL':
+ return generateMenuItems( {
+ panelItems: state.panelItems,
+ menuItemOrder: state.menuItemOrder,
+ shouldReset: true,
+ } );
+ case 'UPDATE_VALUE': {
+ const oldValue = state.menuItems[ action.group ][ action.label ];
+ if ( action.value === oldValue ) {
+ return state.menuItems;
+ }
+ return {
+ ...state.menuItems,
+ [ action.group ]: {
+ ...state.menuItems[ action.group ],
+ [ action.label ]: action.value,
+ },
+ };
+ }
+ case 'TOGGLE_VALUE': {
+ const currentItem = state.panelItems.find(
+ ( item ) => item.label === action.label
+ );
+
+ if ( ! currentItem ) {
+ return state.menuItems;
+ }
+
+ const menuGroup = currentItem.isShownByDefault
+ ? 'default'
+ : 'optional';
+
+ const newMenuItems = {
+ ...state.menuItems,
+ [ menuGroup ]: {
+ ...state.menuItems[ menuGroup ],
+ [ action.label ]:
+ ! state.menuItems[ menuGroup ][ action.label ],
+ },
+ };
+ return newMenuItems;
+ }
+
+ default:
+ return state.menuItems;
+ }
+}
+
+function panelReducer( state: PanelItemsState, action: PanelItemsAction ) {
+ const panelItems = panelItemsReducer( state.panelItems, action );
+ const menuItemOrder = menuItemOrderReducer( state.menuItemOrder, action );
+ // `menuItemsReducer` is a bit unusual because it generates new state from original `menuItems`
+ // and the updated `panelItems` and `menuItemOrder`.
+ const menuItems = menuItemsReducer(
+ { panelItems, menuItemOrder, menuItems: state.menuItems },
+ action
+ );
+
+ return { panelItems, menuItemOrder, menuItems };
+}
+
+function resetAllFiltersReducer(
+ filters: ResetAllFilter[],
+ action: { type: 'REGISTER' | 'UNREGISTER'; filter: ResetAllFilter }
+) {
+ switch ( action.type ) {
+ case 'REGISTER':
+ return [ ...filters, action.filter ];
+ case 'UNREGISTER':
+ return filters.filter( ( f ) => f !== action.filter );
+ default:
+ return filters;
+ }
+}
+
const isMenuItemTypeEmpty = (
- obj?: ToolsPanelMenuItems[ ToolsPanelMenuItemKey ]
-) => obj && Object.keys( obj ).length === 0;
+ obj: ToolsPanelMenuItems[ ToolsPanelMenuItemKey ]
+) => Object.keys( obj ).length === 0;
export function useToolsPanel(
props: WordPressComponentProps< ToolsPanelProps, 'div' >
@@ -108,103 +274,43 @@ export function useToolsPanel(
}, [ wasResetting ] );
// Allow panel items to register themselves.
- const [ panelItems, setPanelItems ] = useState< ToolsPanelItem[] >( [] );
- const [ menuItemOrder, setMenuItemOrder ] = useState< string[] >( [] );
- const [ resetAllFilters, setResetAllFilters ] = useState<
- ResetAllFilter[]
- >( [] );
-
- const registerPanelItem = useCallback(
- ( item: ToolsPanelItem ) => {
- // Add item to panel items.
- setPanelItems( ( items ) => {
- const newItems = [ ...items ];
- // If an item with this label has already been registered, remove it
- // first. This can happen when an item is moved between the default
- // and optional groups.
- const existingIndex = newItems.findIndex(
- ( oldItem ) => oldItem.label === item.label
- );
- if ( existingIndex !== -1 ) {
- newItems.splice( existingIndex, 1 );
- }
- return [ ...newItems, item ];
- } );
-
- // Track the initial order of item registration. This is used for
- // maintaining menu item order later.
- setMenuItemOrder( ( items ) => {
- if ( items.includes( item.label ) ) {
- return items;
- }
+ const [ { panelItems, menuItems }, panelDispatch ] = useReducer(
+ panelReducer,
+ undefined,
+ emptyState
+ );
- return [ ...items, item.label ];
- } );
- },
- [ setPanelItems, setMenuItemOrder ]
+ const [ resetAllFilters, dispatchResetAllFilters ] = useReducer(
+ resetAllFiltersReducer,
+ []
);
+ const registerPanelItem = useCallback( ( item: ToolsPanelItem ) => {
+ // Add item to panel items.
+ panelDispatch( { type: 'REGISTER_PANEL', item } );
+ }, [] );
+
// Panels need to deregister on unmount to avoid orphans in menu state.
// This is an issue when panel items are being injected via SlotFills.
- const deregisterPanelItem = useCallback(
- ( label: string ) => {
- // When switching selections between components injecting matching
- // controls, e.g. both panels have a "padding" control, the
- // deregistration of the first panel doesn't occur until after the
- // registration of the next.
- setPanelItems( ( items ) => {
- const newItems = [ ...items ];
- const index = newItems.findIndex(
- ( item ) => item.label === label
- );
- if ( index !== -1 ) {
- newItems.splice( index, 1 );
- }
- return newItems;
- } );
- },
- [ setPanelItems ]
- );
-
- const registerResetAllFilter = useCallback(
- ( newFilter: ResetAllFilter ) => {
- setResetAllFilters( ( filters ) => {
- return [ ...filters, newFilter ];
- } );
- },
- [ setResetAllFilters ]
- );
+ const deregisterPanelItem = useCallback( ( label: string ) => {
+ // When switching selections between components injecting matching
+ // controls, e.g. both panels have a "padding" control, the
+ // deregistration of the first panel doesn't occur until after the
+ // registration of the next.
+ panelDispatch( { type: 'UNREGISTER_PANEL', label } );
+ }, [] );
+
+ const registerResetAllFilter = useCallback( ( filter: ResetAllFilter ) => {
+ dispatchResetAllFilters( { type: 'REGISTER', filter } );
+ }, [] );
const deregisterResetAllFilter = useCallback(
- ( filterToRemove: ResetAllFilter ) => {
- setResetAllFilters( ( filters ) => {
- return filters.filter(
- ( filter ) => filter !== filterToRemove
- );
- } );
+ ( filter: ResetAllFilter ) => {
+ dispatchResetAllFilters( { type: 'UNREGISTER', filter } );
},
- [ setResetAllFilters ]
+ []
);
- // Manage and share display state of menu items representing child controls.
- const [ menuItems, setMenuItems ] = useState< ToolsPanelMenuItems >( {
- default: {},
- optional: {},
- } );
-
- // Setup menuItems state as panel items register themselves.
- useEffect( () => {
- setMenuItems( ( prevState ) => {
- const items = generateMenuItems( {
- panelItems,
- shouldReset: false,
- currentMenuItems: prevState,
- menuItemOrder,
- } );
- return items;
- } );
- }, [ panelItems, setMenuItems, menuItemOrder ] );
-
// Updates the status of the panelās menu items. For default items the
// value represents whether it differs from the default and for optional
// items whether the item is shown.
@@ -214,38 +320,24 @@ export function useToolsPanel(
label: string,
group: ToolsPanelMenuItemKey = 'default'
) => {
- setMenuItems( ( items ) => {
- const newState = {
- ...items,
- [ group ]: {
- ...items[ group ],
- [ label ]: value,
- },
- };
- return newState;
- } );
+ panelDispatch( { type: 'UPDATE_VALUE', group, label, value } );
},
- [ setMenuItems ]
+ []
);
// Whether all optional menu items are hidden or not must be tracked
// in order to later determine if the panel display is empty and handle
// conditional display of a plus icon to indicate the presence of further
// menu items.
- const [ areAllOptionalControlsHidden, setAreAllOptionalControlsHidden ] =
- useState( false );
-
- useEffect( () => {
- if (
- isMenuItemTypeEmpty( menuItems?.default ) &&
- ! isMenuItemTypeEmpty( menuItems?.optional )
- ) {
- const allControlsHidden = ! Object.entries(
- menuItems.optional
- ).some( ( [ , isSelected ] ) => isSelected );
- setAreAllOptionalControlsHidden( allControlsHidden );
- }
- }, [ menuItems, setAreAllOptionalControlsHidden ] );
+ const areAllOptionalControlsHidden = useMemo( () => {
+ return (
+ isMenuItemTypeEmpty( menuItems.default ) &&
+ ! isMenuItemTypeEmpty( menuItems.optional ) &&
+ Object.values( menuItems.optional ).every(
+ ( isSelected ) => ! isSelected
+ )
+ );
+ }, [ menuItems ] );
const cx = useCx();
const classes = useMemo( () => {
@@ -253,9 +345,7 @@ export function useToolsPanel(
hasInnerWrapper &&
styles.ToolsPanelWithInnerWrapper( DEFAULT_COLUMNS );
const emptyStyle =
- isMenuItemTypeEmpty( menuItems?.default ) &&
- areAllOptionalControlsHidden &&
- styles.ToolsPanelHiddenInnerWrapper;
+ areAllOptionalControlsHidden && styles.ToolsPanelHiddenInnerWrapper;
return cx(
styles.ToolsPanel( DEFAULT_COLUMNS ),
@@ -263,42 +353,13 @@ export function useToolsPanel(
emptyStyle,
className
);
- }, [
- areAllOptionalControlsHidden,
- className,
- cx,
- hasInnerWrapper,
- menuItems,
- ] );
+ }, [ areAllOptionalControlsHidden, className, cx, hasInnerWrapper ] );
// Toggle the checked state of a menu item which is then used to determine
// display of the item within the panel.
- const toggleItem = useCallback(
- ( label: string ) => {
- const currentItem = panelItems.find(
- ( item ) => item.label === label
- );
-
- if ( ! currentItem ) {
- return;
- }
-
- const menuGroup = currentItem.isShownByDefault
- ? 'default'
- : 'optional';
-
- const newMenuItems = {
- ...menuItems,
- [ menuGroup ]: {
- ...menuItems[ menuGroup ],
- [ label ]: ! menuItems[ menuGroup ][ label ],
- },
- };
-
- setMenuItems( newMenuItems );
- },
- [ menuItems, panelItems, setMenuItems ]
- );
+ const toggleItem = useCallback( ( label: string ) => {
+ panelDispatch( { type: 'TOGGLE_VALUE', label } );
+ }, [] );
// Resets display of children and executes resetAll callback if available.
const resetAllItems = useCallback( () => {
@@ -308,20 +369,15 @@ export function useToolsPanel(
}
// Turn off display of all non-default items.
- const resetMenuItems = generateMenuItems( {
- panelItems,
- menuItemOrder,
- shouldReset: true,
- } );
- setMenuItems( resetMenuItems );
- }, [ panelItems, resetAllFilters, resetAll, setMenuItems, menuItemOrder ] );
+ panelDispatch( { type: 'RESET_ALL' } );
+ }, [ resetAllFilters, resetAll ] );
// Assist ItemGroup styling when there are potentially hidden placeholder
// items by identifying first & last items that are toggled on for display.
const getFirstVisibleItemLabel = ( items: ToolsPanelItem[] ) => {
const optionalItems = menuItems.optional || {};
const firstItem = items.find(
- ( item ) => item.isShownByDefault || !! optionalItems[ item.label ]
+ ( item ) => item.isShownByDefault || optionalItems[ item.label ]
);
return firstItem?.label;
@@ -332,6 +388,8 @@ export function useToolsPanel(
[ ...panelItems ].reverse()
);
+ const hasMenuItems = panelItems.length > 0;
+
const panelContext = useMemo(
() => ( {
areAllOptionalControlsHidden,
@@ -339,7 +397,7 @@ export function useToolsPanel(
deregisterResetAllFilter,
firstDisplayedItem,
flagItemCustomization,
- hasMenuItems: !! panelItems.length,
+ hasMenuItems,
isResetting: isResettingRef.current,
lastDisplayedItem,
menuItems,
@@ -359,7 +417,7 @@ export function useToolsPanel(
lastDisplayedItem,
menuItems,
panelId,
- panelItems,
+ hasMenuItems,
registerResetAllFilter,
registerPanelItem,
shouldRenderPlaceholderItems,
diff --git a/packages/components/src/utils/config-values.js b/packages/components/src/utils/config-values.js
index 2040f479a231c2..1bc3945f9b3b16 100644
--- a/packages/components/src/utils/config-values.js
+++ b/packages/components/src/utils/config-values.js
@@ -7,18 +7,13 @@ import { COLORS } from './colors-values';
const CONTROL_HEIGHT = '36px';
const CONTROL_PROPS = {
- controlSurfaceColor: COLORS.white,
- controlTextActiveColor: COLORS.theme.accent,
-
// These values should be shared with TextControl.
controlPaddingX: 12,
controlPaddingXSmall: 8,
controlPaddingXLarge: 12 * 1.3334, // TODO: Deprecate
controlBackgroundColor: COLORS.white,
- controlBoxShadow: 'transparent',
controlBoxShadowFocus: `0 0 0 0.5px ${ COLORS.theme.accent }`,
- controlDestructiveBorderColor: COLORS.alert.red,
controlHeight: CONTROL_HEIGHT,
controlHeightXSmall: `calc( ${ CONTROL_HEIGHT } * 0.6 )`,
controlHeightSmall: `calc( ${ CONTROL_HEIGHT } * 0.8 )`,
@@ -26,18 +21,9 @@ const CONTROL_PROPS = {
controlHeightXLarge: `calc( ${ CONTROL_HEIGHT } * 1.4 )`,
};
-const TOGGLE_GROUP_CONTROL_PROPS = {
- toggleGroupControlBackgroundColor: CONTROL_PROPS.controlBackgroundColor,
- toggleGroupControlBorderColor: COLORS.ui.border,
- toggleGroupControlBackdropBackgroundColor:
- CONTROL_PROPS.controlSurfaceColor,
- toggleGroupControlBackdropBorderColor: COLORS.ui.border,
- toggleGroupControlButtonColorActive: CONTROL_PROPS.controlBackgroundColor,
-};
-
// Using Object.assign to avoid creating circular references when emitting
// TypeScript type declarations.
-export default Object.assign( {}, CONTROL_PROPS, TOGGLE_GROUP_CONTROL_PROPS, {
+export default Object.assign( {}, CONTROL_PROPS, {
colorDivider: 'rgba(0, 0, 0, 0.1)',
colorScrollbarThumb: 'rgba(0, 0, 0, 0.2)',
colorScrollbarThumbHover: 'rgba(0, 0, 0, 0.5)',
diff --git a/packages/components/src/utils/element-rect.ts b/packages/components/src/utils/element-rect.ts
index 550ec35b0bc932..7c83db4428ca0f 100644
--- a/packages/components/src/utils/element-rect.ts
+++ b/packages/components/src/utils/element-rect.ts
@@ -3,16 +3,16 @@
* WordPress dependencies
*/
import { useLayoutEffect, useRef, useState } from '@wordpress/element';
-import { useResizeObserver } from '@wordpress/compose';
-/**
- * Internal dependencies
- */
-import { useEvent } from './hooks/use-event';
+import { useEvent, useResizeObserver } from '@wordpress/compose';
/**
* The position and dimensions of an element, relative to its offset parent.
*/
export type ElementOffsetRect = {
+ /**
+ * The element the rect belongs to.
+ */
+ element: HTMLElement | undefined;
/**
* The distance from the top edge of the offset parent to the top edge of
* the element.
@@ -47,6 +47,7 @@ export type ElementOffsetRect = {
* An `ElementOffsetRect` object with all values set to zero.
*/
export const NULL_ELEMENT_OFFSET_RECT = {
+ element: undefined,
top: 0,
right: 0,
bottom: 0,
@@ -79,9 +80,11 @@ export function getElementOffsetRect(
if ( rect.width === 0 || rect.height === 0 ) {
return;
}
+ const offsetParent = element.offsetParent;
const offsetParentRect =
- element.offsetParent?.getBoundingClientRect() ??
- NULL_ELEMENT_OFFSET_RECT;
+ offsetParent?.getBoundingClientRect() ?? NULL_ELEMENT_OFFSET_RECT;
+ const offsetParentScrollX = offsetParent?.scrollLeft ?? 0;
+ const offsetParentScrollY = offsetParent?.scrollTop ?? 0;
// Computed widths and heights have subpixel precision, and are not affected
// by distortions.
@@ -94,13 +97,22 @@ export function getElementOffsetRect(
const scaleY = computedHeight / rect.height;
return {
+ element,
// To obtain the adjusted values for the position:
// 1. Compute the element's position relative to the offset parent.
// 2. Correct for the scale factor.
- top: ( rect.top - offsetParentRect?.top ) * scaleY,
- right: ( offsetParentRect?.right - rect.right ) * scaleX,
- bottom: ( offsetParentRect?.bottom - rect.bottom ) * scaleY,
- left: ( rect.left - offsetParentRect?.left ) * scaleX,
+ // 3. Adjust for the scroll position of the offset parent.
+ top:
+ ( rect.top - offsetParentRect?.top ) * scaleY + offsetParentScrollY,
+ right:
+ ( offsetParentRect?.right - rect.right ) * scaleX -
+ offsetParentScrollX,
+ bottom:
+ ( offsetParentRect?.bottom - rect.bottom ) * scaleY -
+ offsetParentScrollY,
+ left:
+ ( rect.left - offsetParentRect?.left ) * scaleX +
+ offsetParentScrollX,
// Computed dimensions don't need any adjustments.
width: computedWidth,
height: computedHeight,
@@ -113,6 +125,9 @@ const POLL_RATE = 100;
* Tracks the position and dimensions of an element, relative to its offset
* parent. The element can be changed dynamically.
*
+ * When no element is provided (`null` or `undefined`), the hook will return
+ * a "null" rect, in which all values are `0` and `element` is `undefined`.
+ *
* **Note:** sometimes, the measurement will fail (see `getElementOffsetRect`'s
* documentation for more details). When that happens, this hook will attempt
* to measure again after a frame, and if that fails, it will poll every 100
@@ -149,10 +164,12 @@ export function useTrackElementOffsetRect(
}
} );
- useLayoutEffect(
- () => setElement( targetElement ),
- [ setElement, targetElement ]
- );
+ useLayoutEffect( () => {
+ setElement( targetElement );
+ if ( ! targetElement ) {
+ setIndicatorPosition( NULL_ELEMENT_OFFSET_RECT );
+ }
+ }, [ setElement, targetElement ] );
return indicatorPosition;
}
diff --git a/packages/components/src/utils/hooks/use-event.ts b/packages/components/src/utils/hooks/use-event.ts
deleted file mode 100644
index eefac9478a8b4f..00000000000000
--- a/packages/components/src/utils/hooks/use-event.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-/* eslint-disable jsdoc/require-param */
-/**
- * WordPress dependencies
- */
-import { useRef, useInsertionEffect, useCallback } from '@wordpress/element';
-
-/**
- * Any function.
- */
-export type AnyFunction = ( ...args: any ) => any;
-
-/**
- * Creates a stable callback function that has access to the latest state and
- * can be used within event handlers and effect callbacks. Throws when used in
- * the render phase.
- *
- * @example
- *
- * ```tsx
- * function Component(props) {
- * const onClick = useEvent(props.onClick);
- * React.useEffect(() => {}, [onClick]);
- * }
- * ```
- */
-export function useEvent< T extends AnyFunction >( callback?: T ) {
- const ref = useRef< AnyFunction | undefined >( () => {
- throw new Error( 'Cannot call an event handler while rendering.' );
- } );
- useInsertionEffect( () => {
- ref.current = callback;
- } );
- return useCallback< AnyFunction >(
- ( ...args ) => ref.current?.( ...args ),
- []
- ) as T;
-}
-/* eslint-enable jsdoc/require-param */
diff --git a/packages/components/src/utils/hooks/use-on-value-update.ts b/packages/components/src/utils/hooks/use-on-value-update.ts
index 5726f3977daf04..15cfc321359e7c 100644
--- a/packages/components/src/utils/hooks/use-on-value-update.ts
+++ b/packages/components/src/utils/hooks/use-on-value-update.ts
@@ -2,11 +2,8 @@
/**
* WordPress dependencies
*/
-import { useRef, useEffect } from '@wordpress/element';
-/**
- * Internal dependencies
- */
-import { useEvent } from './use-event';
+import { useEvent } from '@wordpress/compose';
+import { useRef, useLayoutEffect } from '@wordpress/element';
/**
* Context object for the `onUpdate` callback of `useOnValueUpdate`.
@@ -30,7 +27,7 @@ export function useOnValueUpdate< T >(
) {
const previousValueRef = useRef( value );
const updateCallbackEvent = useEvent( onUpdate );
- useEffect( () => {
+ useLayoutEffect( () => {
if ( previousValueRef.current !== value ) {
updateCallbackEvent( {
previousValue: previousValueRef.current,
diff --git a/packages/compose/CHANGELOG.md b/packages/compose/CHANGELOG.md
index 18c21a65b9b124..28269dca692a4f 100644
--- a/packages/compose/CHANGELOG.md
+++ b/packages/compose/CHANGELOG.md
@@ -2,6 +2,10 @@
## Unreleased
+### Bug Fixes
+
+- `useResizeObserver`: export legacy API at top-level for React Native ([#65588](https://github.com/WordPress/gutenberg/pull/65588)).
+
## 7.8.0 (2024-09-19)
### New Features
diff --git a/packages/compose/src/hooks/use-resize-observer/index.native.js b/packages/compose/src/hooks/use-resize-observer/index.native.js
new file mode 100644
index 00000000000000..79eb3e569e332a
--- /dev/null
+++ b/packages/compose/src/hooks/use-resize-observer/index.native.js
@@ -0,0 +1 @@
+export { default } from './legacy/index.native';
diff --git a/packages/compose/src/hooks/use-resize-observer/index.ts b/packages/compose/src/hooks/use-resize-observer/index.ts
index 2a76b2aa6ab590..1bd0f074cc49f2 100644
--- a/packages/compose/src/hooks/use-resize-observer/index.ts
+++ b/packages/compose/src/hooks/use-resize-observer/index.ts
@@ -1,53 +1,14 @@
-/**
- * WordPress dependencies
- */
-import { useRef } from '@wordpress/element';
/**
* Internal dependencies
*/
-import useEvent from '../use-event';
-import type { ObservedSize } from './_legacy';
-import _useLegacyResizeObserver from './_legacy';
+import { useResizeObserver as _useResizeObserver } from './use-resize-observer';
+import type { ObservedSize } from './legacy';
+import _useLegacyResizeObserver from './legacy';
/**
* External dependencies
*/
import type { ReactElement } from 'react';
-// This is the current implementation of `useResizeObserver`.
-//
-// The legacy implementation is still supported for backwards compatibility.
-// This is achieved by overloading the exported function with both signatures,
-// and detecting which API is being used at runtime.
-function _useResizeObserver< T extends HTMLElement >(
- callback: ResizeObserverCallback,
- resizeObserverOptions: ResizeObserverOptions = {}
-): ( element?: T | null ) => void {
- const callbackEvent = useEvent( callback );
-
- const observedElementRef = useRef< T | null >();
- const resizeObserverRef = useRef< ResizeObserver >();
- return useEvent( ( element?: T | null ) => {
- if ( element === observedElementRef.current ) {
- return;
- }
- observedElementRef.current = element;
-
- // Set up `ResizeObserver`.
- resizeObserverRef.current ??= new ResizeObserver( callbackEvent );
- const { current: resizeObserver } = resizeObserverRef;
-
- // Unobserve previous element.
- if ( observedElementRef.current ) {
- resizeObserver.unobserve( observedElementRef.current );
- }
-
- // Observe new element.
- if ( element ) {
- resizeObserver.observe( element, resizeObserverOptions );
- }
- } );
-}
-
/**
* Sets up a [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API)
* for an HTML or SVG element.
diff --git a/packages/compose/src/hooks/use-resize-observer/_legacy/index.native.js b/packages/compose/src/hooks/use-resize-observer/legacy/index.native.js
similarity index 100%
rename from packages/compose/src/hooks/use-resize-observer/_legacy/index.native.js
rename to packages/compose/src/hooks/use-resize-observer/legacy/index.native.js
diff --git a/packages/compose/src/hooks/use-resize-observer/_legacy/index.tsx b/packages/compose/src/hooks/use-resize-observer/legacy/index.tsx
similarity index 98%
rename from packages/compose/src/hooks/use-resize-observer/_legacy/index.tsx
rename to packages/compose/src/hooks/use-resize-observer/legacy/index.tsx
index b44bd841964164..fe765810982226 100644
--- a/packages/compose/src/hooks/use-resize-observer/_legacy/index.tsx
+++ b/packages/compose/src/hooks/use-resize-observer/legacy/index.tsx
@@ -10,7 +10,7 @@ import { useCallback, useRef, useState } from '@wordpress/element';
/**
* Internal dependencies
*/
-import useResizeObserver from '../index';
+import { useResizeObserver } from '../use-resize-observer';
export type ObservedSize = {
width: number | null;
diff --git a/packages/compose/src/hooks/use-resize-observer/_legacy/test/index.native.js b/packages/compose/src/hooks/use-resize-observer/legacy/test/index.native.js
similarity index 100%
rename from packages/compose/src/hooks/use-resize-observer/_legacy/test/index.native.js
rename to packages/compose/src/hooks/use-resize-observer/legacy/test/index.native.js
diff --git a/packages/compose/src/hooks/use-resize-observer/use-resize-observer.ts b/packages/compose/src/hooks/use-resize-observer/use-resize-observer.ts
new file mode 100644
index 00000000000000..4c1031b9839dc3
--- /dev/null
+++ b/packages/compose/src/hooks/use-resize-observer/use-resize-observer.ts
@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import useEvent from '../use-event';
+
+// This is the current implementation of `useResizeObserver`.
+//
+// The legacy implementation is still supported for backwards compatibility.
+// This is achieved by overloading the exported function with both signatures,
+// and detecting which API is being used at runtime.
+export function useResizeObserver< T extends HTMLElement >(
+ callback: ResizeObserverCallback,
+ resizeObserverOptions: ResizeObserverOptions = {}
+): ( element?: T | null ) => void {
+ const callbackEvent = useEvent( callback );
+
+ const observedElementRef = useRef< T | null >();
+ const resizeObserverRef = useRef< ResizeObserver >();
+ return useEvent( ( element?: T | null ) => {
+ if ( element === observedElementRef.current ) {
+ return;
+ }
+
+ // Set up `ResizeObserver`.
+ resizeObserverRef.current ??= new ResizeObserver( callbackEvent );
+ const { current: resizeObserver } = resizeObserverRef;
+
+ // Unobserve previous element.
+ if ( observedElementRef.current ) {
+ resizeObserver.unobserve( observedElementRef.current );
+ }
+
+ // Observe new element.
+ observedElementRef.current = element;
+ if ( element ) {
+ resizeObserver.observe( element, resizeObserverOptions );
+ }
+ } );
+}
diff --git a/packages/core-commands/package.json b/packages/core-commands/package.json
index 8334ef97c9244d..a2d3c76ebe5d9c 100644
--- a/packages/core-commands/package.json
+++ b/packages/core-commands/package.json
@@ -37,6 +37,7 @@
"@wordpress/html-entities": "file:../html-entities",
"@wordpress/i18n": "file:../i18n",
"@wordpress/icons": "file:../icons",
+ "@wordpress/notices": "file:../notices",
"@wordpress/private-apis": "file:../private-apis",
"@wordpress/router": "file:../router",
"@wordpress/url": "file:../url"
diff --git a/packages/core-commands/src/admin-navigation-commands.js b/packages/core-commands/src/admin-navigation-commands.js
index 0ffa7ba7eb6285..c0d8bb084b46ad 100644
--- a/packages/core-commands/src/admin-navigation-commands.js
+++ b/packages/core-commands/src/admin-navigation-commands.js
@@ -1,9 +1,92 @@
/**
* WordPress dependencies
*/
-import { useCommand } from '@wordpress/commands';
+import { useCommand, useCommandLoader } from '@wordpress/commands';
import { __ } from '@wordpress/i18n';
import { plus } from '@wordpress/icons';
+import { getPath } from '@wordpress/url';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useCallback, useMemo } from '@wordpress/element';
+import { store as noticesStore } from '@wordpress/notices';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from './lock-unlock';
+
+const { useHistory } = unlock( routerPrivateApis );
+
+function useAddNewPageCommand() {
+ const isSiteEditor = getPath( window.location.href )?.includes(
+ 'site-editor.php'
+ );
+ const history = useHistory();
+ const isBlockBasedTheme = useSelect( ( select ) => {
+ return select( coreStore ).getCurrentTheme()?.is_block_theme;
+ }, [] );
+ const { saveEntityRecord } = useDispatch( coreStore );
+ const { createErrorNotice } = useDispatch( noticesStore );
+
+ const createPageEntity = useCallback(
+ async ( { close } ) => {
+ try {
+ const page = await saveEntityRecord(
+ 'postType',
+ 'page',
+ {
+ status: 'draft',
+ },
+ {
+ throwOnError: true,
+ }
+ );
+ if ( page?.id ) {
+ history.push( {
+ postId: page.id,
+ postType: 'page',
+ canvas: 'edit',
+ } );
+ }
+ } catch ( error ) {
+ const errorMessage =
+ error.message && error.code !== 'unknown_error'
+ ? error.message
+ : __( 'An error occurred while creating the item.' );
+
+ createErrorNotice( errorMessage, {
+ type: 'snackbar',
+ } );
+ } finally {
+ close();
+ }
+ },
+ [ createErrorNotice, history, saveEntityRecord ]
+ );
+
+ const commands = useMemo( () => {
+ const addNewPage =
+ isSiteEditor && isBlockBasedTheme
+ ? createPageEntity
+ : () =>
+ ( document.location.href =
+ 'post-new.php?post_type=page' );
+ return [
+ {
+ name: 'core/add-new-page',
+ label: __( 'Add new page' ),
+ icon: plus,
+ callback: addNewPage,
+ },
+ ];
+ }, [ createPageEntity, isSiteEditor, isBlockBasedTheme ] );
+
+ return {
+ isLoading: false,
+ commands,
+ };
+}
export function useAdminNavigationCommands() {
useCommand( {
@@ -14,12 +97,9 @@ export function useAdminNavigationCommands() {
document.location.href = 'post-new.php';
},
} );
- useCommand( {
+
+ useCommandLoader( {
name: 'core/add-new-page',
- label: __( 'Add new page' ),
- icon: plus,
- callback: () => {
- document.location.href = 'post-new.php?post_type=page';
- },
+ hook: useAddNewPageCommand,
} );
}
diff --git a/packages/core-data/src/test/entity-provider.js b/packages/core-data/src/test/entity-provider.js
index 6b0b7bd5ef77a8..4dc0d8a51663e8 100644
--- a/packages/core-data/src/test/entity-provider.js
+++ b/packages/core-data/src/test/entity-provider.js
@@ -104,7 +104,7 @@ describe( 'useEntityBlockEditor', () => {
source: 'html',
selector: 'p',
default: '',
- __experimentalRole: 'content',
+ role: 'content',
},
},
title: 'block title',
diff --git a/packages/create-block-interactive-template/CHANGELOG.md b/packages/create-block-interactive-template/CHANGELOG.md
index 348c8466836c69..24dcfd52b7b586 100644
--- a/packages/create-block-interactive-template/CHANGELOG.md
+++ b/packages/create-block-interactive-template/CHANGELOG.md
@@ -1,9 +1,11 @@
-## Unreleased
-
## 2.8.0 (2024-09-19)
+### Enhancements
+
+- Added TypeScript variant of the template ([#64577](https://github.com/WordPress/gutenberg/pull/64577)).
+
## 2.7.0 (2024-09-05)
### Enhancements
diff --git a/packages/create-block-interactive-template/README.md b/packages/create-block-interactive-template/README.md
index 4417c647495c4c..b50adb49265245 100644
--- a/packages/create-block-interactive-template/README.md
+++ b/packages/create-block-interactive-template/README.md
@@ -1,6 +1,6 @@
# Create Block Interactive Template
-This is a template for [`@wordpress/create-block`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/create-block/README.md) to create interactive blocks
+This is a template for [`@wordpress/create-block`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/create-block/README.md) to create interactive blocks.
## Usage
diff --git a/packages/create-block-interactive-template/block-templates/README.md.mustache b/packages/create-block-interactive-template/block-templates/README.md.mustache
index 3e64ce8f629a3c..4a13743750f748 100644
--- a/packages/create-block-interactive-template/block-templates/README.md.mustache
+++ b/packages/create-block-interactive-template/block-templates/README.md.mustache
@@ -3,6 +3,4 @@
> **Note**
> Check the [Interactivity API Reference docs in the Block Editor handbook](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/) to learn more about the Interactivity API.
-{{#isBasicVariant}}
This block has been created with the `create-block-interactive-template` and shows a basic structure of an interactive block that uses the Interactivity API.
-{{/isBasicVariant}}
\ No newline at end of file
diff --git a/packages/create-block-interactive-template/block-templates/render.php.mustache b/packages/create-block-interactive-template/block-templates/render.php.mustache
index 3a41a2981cd8cf..4f84b30dbcdbdd 100644
--- a/packages/create-block-interactive-template/block-templates/render.php.mustache
+++ b/packages/create-block-interactive-template/block-templates/render.php.mustache
@@ -1,4 +1,3 @@
-{{#isBasicVariant}}
false,
+ 'darkText' => esc_html__( 'Switch to Light', '{{textdomain}}' ),
+ 'lightText' => esc_html__( 'Switch to Dark', '{{textdomain}}' ),
+ 'themeText' => esc_html__( 'Switch to Dark', '{{textdomain}}' ),
+ )
+);
?>
false ) ); ?>
data-wp-watch="callbacks.logIsOpen"
+ data-wp-class--dark-theme="state.isDark"
>
@@ -38,4 +54,3 @@ $unique_id = wp_unique_id( 'p-' );
?>
-{{/isBasicVariant}}
diff --git a/packages/create-block-interactive-template/block-templates/style.scss.mustache b/packages/create-block-interactive-template/block-templates/style.scss.mustache
index 1c73fa1c38ff94..c8aa9f232136e2 100644
--- a/packages/create-block-interactive-template/block-templates/style.scss.mustache
+++ b/packages/create-block-interactive-template/block-templates/style.scss.mustache
@@ -9,4 +9,19 @@
font-size: 1em;
background: #ffff001a;
padding: 1em;
+
+ &.dark-theme {
+ background: #333;
+ color: #fff;
+
+ button {
+ background: #555;
+ color: #fff;
+ border: 1px solid #777;
+ }
+
+ p {
+ color: #ddd;
+ }
+ }
}
diff --git a/packages/create-block-interactive-template/block-templates/view.js.mustache b/packages/create-block-interactive-template/block-templates/view.js.mustache
index b4bae3939461dd..3fcf1ba365d265 100644
--- a/packages/create-block-interactive-template/block-templates/view.js.mustache
+++ b/packages/create-block-interactive-template/block-templates/view.js.mustache
@@ -1,15 +1,23 @@
-{{#isBasicVariant}}
+{{#isDefaultVariant}}
/**
* WordPress dependencies
*/
-import { store, getContext } from "@wordpress/interactivity";
+import { store, getContext } from '@wordpress/interactivity';
-store( '{{namespace}}', {
+const { state } = store( '{{namespace}}', {
+ state: {
+ get themeText() {
+ return state.isDark ? state.darkText : state.lightText;
+ }
+ },
actions: {
- toggle: () => {
+ toggleOpen() {
const context = getContext();
context.isOpen = ! context.isOpen;
},
+ toggleTheme() {
+ state.isDark = ! state.isDark;
+ }
},
callbacks: {
logIsOpen: () => {
@@ -19,5 +27,4 @@ store( '{{namespace}}', {
},
},
} );
-
-{{/isBasicVariant}}
+{{/isDefaultVariant}}
diff --git a/packages/create-block-interactive-template/block-templates/view.ts.mustache b/packages/create-block-interactive-template/block-templates/view.ts.mustache
new file mode 100644
index 00000000000000..11670442d73704
--- /dev/null
+++ b/packages/create-block-interactive-template/block-templates/view.ts.mustache
@@ -0,0 +1,46 @@
+{{#isTypescriptVariant}}
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
+
+type ServerState = {
+ state: {
+ isDark: boolean;
+ darkText: string;
+ lightText: string;
+ };
+};
+
+type Context = {
+ isOpen: boolean;
+};
+
+const storeDef = {
+ state: {
+ get themeText(): string {
+ return state.isDark ? state.darkText : state.lightText;
+ }
+ },
+ actions: {
+ toggleOpen() {
+ const context = getContext< Context >();
+ context.isOpen = ! context.isOpen;
+ },
+ toggleTheme() {
+ state.isDark = ! state.isDark;
+ }
+ },
+ callbacks: {
+ logIsOpen: () => {
+ const { isOpen } = getContext< Context >();
+ // Log the value of `isOpen` each time it changes.
+ console.log( `Is open: ${ isOpen }` );
+ },
+ },
+};
+
+type Store = ServerState & typeof storeDef;
+
+const { state } = store< Store >( '{{namespace}}', storeDef );
+{{/isTypescriptVariant}}
diff --git a/packages/create-block-interactive-template/index.js b/packages/create-block-interactive-template/index.js
index bb203b7023e281..94f615df2747f2 100644
--- a/packages/create-block-interactive-template/index.js
+++ b/packages/create-block-interactive-template/index.js
@@ -7,7 +7,7 @@ module.exports = {
defaultValues: {
slug: 'example-interactive',
title: 'Example Interactive',
- description: 'An interactive block with the Interactivity API',
+ description: 'An interactive block with the Interactivity API.',
dashicon: 'media-interactive',
npmDependencies: [ '@wordpress/interactivity' ],
customPackageJSON: { files: [ '[^.]*' ] },
@@ -24,7 +24,14 @@ module.exports = {
},
},
variants: {
- basic: {},
+ default: {},
+ typescript: {
+ slug: 'example-interactive-typescript',
+ title: 'Example Interactive TypeScript',
+ description:
+ 'An interactive block with the Interactivity API using TypeScript.',
+ viewScriptModule: 'file:./view.ts',
+ },
},
pluginTemplatesPath: join( __dirname, 'plugin-templates' ),
blockTemplatesPath: join( __dirname, 'block-templates' ),
diff --git a/packages/customize-widgets/src/components/error-boundary/index.js b/packages/customize-widgets/src/components/error-boundary/index.js
index 49867787afd059..0fff18a616d11c 100644
--- a/packages/customize-widgets/src/components/error-boundary/index.js
+++ b/packages/customize-widgets/src/components/error-boundary/index.js
@@ -11,12 +11,7 @@ import { doAction } from '@wordpress/hooks';
function CopyButton( { text, children } ) {
const ref = useCopyToClipboard( text );
return (
-
+
{ children }
);
diff --git a/packages/customize-widgets/src/components/inserter/index.js b/packages/customize-widgets/src/components/inserter/index.js
index 41fc037cf673c9..4f271bef9e9a3f 100644
--- a/packages/customize-widgets/src/components/inserter/index.js
+++ b/packages/customize-widgets/src/components/inserter/index.js
@@ -37,9 +37,7 @@ function Inserter( { setIsOpened } ) {
{ __( 'Add a block' ) }
setIsOpened( false ) }
aria-label={ __( 'Close inserter' ) }
diff --git a/packages/customize-widgets/src/components/welcome-guide/index.js b/packages/customize-widgets/src/components/welcome-guide/index.js
index 51c4d479be51ff..3f7b2f45d86b7a 100644
--- a/packages/customize-widgets/src/components/welcome-guide/index.js
+++ b/packages/customize-widgets/src/components/welcome-guide/index.js
@@ -43,9 +43,7 @@ export default function WelcomeGuide( { sidebar } ) {
) }
toggle( 'core/customize-widgets', 'welcomeGuide' )
diff --git a/packages/dataviews/README.md b/packages/dataviews/README.md
index 3ce895680a15c5..95b8fc898555c3 100644
--- a/packages/dataviews/README.md
+++ b/packages/dataviews/README.md
@@ -2,6 +2,10 @@
DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).
+DataViews is data agnostic, it can work with data coming from a static (JSON file) or dynamic source (HTTP Request) āĀ it just requires the data to be an array of objects that have an unique identifier. Consumers are responsible to query the data source appropiately based on the DataViews props:
+
+
+
## Installation
Install the module
diff --git a/packages/dataviews/src/components/dataform-combined-edit/index.tsx b/packages/dataviews/src/components/dataform-combined-edit/index.tsx
new file mode 100644
index 00000000000000..6b2a752fa8de52
--- /dev/null
+++ b/packages/dataviews/src/components/dataform-combined-edit/index.tsx
@@ -0,0 +1,66 @@
+/**
+ * WordPress dependencies
+ */
+import {
+ __experimentalHStack as HStack,
+ __experimentalVStack as VStack,
+ __experimentalHeading as Heading,
+ __experimentalSpacer as Spacer,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import type { DataFormCombinedEditProps, NormalizedField } from '../../types';
+
+function Header( { title }: { title: string } ) {
+ return (
+
+
+
+ { title }
+
+
+
+ );
+}
+
+function DataFormCombinedEdit< Item >( {
+ field,
+ data,
+ onChange,
+ hideLabelFromVision,
+}: DataFormCombinedEditProps< Item > ) {
+ const className = 'dataforms-combined-edit';
+ const visibleChildren = ( field.children ?? [] )
+ .map( ( fieldId ) => field.fields.find( ( { id } ) => id === fieldId ) )
+ .filter(
+ ( childField ): childField is NormalizedField< Item > =>
+ !! childField
+ );
+ const children = visibleChildren.map( ( child ) => {
+ return (
+
+
+ );
+ } );
+
+ const Stack = field.direction === 'horizontal' ? HStack : VStack;
+
+ return (
+ <>
+ { ! hideLabelFromVision && }
+
+ { children }
+
+
+ );
+}
+
+export default DataFormCombinedEdit;
diff --git a/packages/dataviews/src/components/dataform-combined-edit/style.scss b/packages/dataviews/src/components/dataform-combined-edit/style.scss
new file mode 100644
index 00000000000000..0b59cbc9a47768
--- /dev/null
+++ b/packages/dataviews/src/components/dataform-combined-edit/style.scss
@@ -0,0 +1,12 @@
+.dataforms-layouts-panel__field-dropdown {
+ .dataforms-combined-edit {
+ border: none;
+ padding: 0;
+ }
+}
+
+.dataforms-combined-edit {
+ &__field {
+ flex: 1 1 auto;
+ }
+}
diff --git a/packages/dataviews/src/components/dataform/stories/index.story.tsx b/packages/dataviews/src/components/dataform/stories/index.story.tsx
index 7147b9c2342638..c929c21f1c21a9 100644
--- a/packages/dataviews/src/components/dataform/stories/index.story.tsx
+++ b/packages/dataviews/src/components/dataform/stories/index.story.tsx
@@ -7,6 +7,7 @@ import { useState } from '@wordpress/element';
* Internal dependencies
*/
import DataForm from '../index';
+import type { CombinedFormField } from '../../../types';
const meta = {
title: 'DataViews/DataForm',
@@ -76,6 +77,11 @@ const fields = [
{ value: 'published', label: 'Published' },
],
},
+ {
+ id: 'password',
+ label: 'Password',
+ type: 'text' as const,
+ },
];
export const Default = ( { type }: { type: 'panel' | 'regular' } ) => {
@@ -118,3 +124,62 @@ export const Default = ( { type }: { type: 'panel' | 'regular' } ) => {
/>
);
};
+
+const CombinedFieldsComponent = ( {
+ type = 'regular',
+ combinedFieldDirection = 'vertical',
+}: {
+ type: 'panel' | 'regular';
+ combinedFieldDirection: 'vertical' | 'horizontal';
+} ) => {
+ const [ post, setPost ] = useState( {
+ title: 'Hello, World!',
+ order: 2,
+ author: 1,
+ status: 'draft',
+ } );
+
+ const form = {
+ fields: [ 'title', 'status_and_visibility', 'order', 'author' ],
+ combinedFields: [
+ {
+ id: 'status_and_visibility',
+ label: 'Status & Visibility',
+ children: [ 'status', 'password' ],
+ direction: combinedFieldDirection,
+ render: ( { item } ) => item.status,
+ },
+ ] as CombinedFormField< any >[],
+ };
+
+ return (
+
+ setPost( ( prev ) => ( {
+ ...prev,
+ ...edits,
+ } ) )
+ }
+ />
+ );
+};
+
+export const CombinedFields = {
+ title: 'DataViews/CombinedFields',
+ render: CombinedFieldsComponent,
+ argTypes: {
+ ...meta.argTypes,
+ combinedFieldDirection: {
+ control: { type: 'select' },
+ description:
+ 'Chooses the direction of the combined field. "vertical" is the default layout.',
+ options: [ 'vertical', 'horizontal' ],
+ },
+ },
+};
diff --git a/packages/dataviews/src/components/dataviews-filters/style.scss b/packages/dataviews/src/components/dataviews-filters/style.scss
index ad834fb224e2e4..130ef8872615a5 100644
--- a/packages/dataviews/src/components/dataviews-filters/style.scss
+++ b/packages/dataviews/src/components/dataviews-filters/style.scss
@@ -160,7 +160,6 @@
}
.dataviews-filters__search-widget-listbox {
- max-height: $grid-unit * 23;
padding: $grid-unit-05;
overflow: auto;
}
diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx
index 48fdf6906b0774..02e81b2b0913d8 100644
--- a/packages/dataviews/src/components/dataviews-view-config/index.tsx
+++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -8,6 +8,7 @@ import type { ChangeEvent } from 'react';
*/
import {
Button,
+ __experimentalDropdownContentWrapper as DropdownContentWrapper,
Dropdown,
__experimentalToggleGroupControl as ToggleGroupControl,
__experimentalToggleGroupControlOption as ToggleGroupControlOption,
@@ -27,6 +28,7 @@ import { __, _x, sprintf } from '@wordpress/i18n';
import { memo, useContext, useMemo } from '@wordpress/element';
import { chevronDown, chevronUp, cog, seen, unseen } from '@wordpress/icons';
import warning from '@wordpress/warning';
+import { useInstanceId } from '@wordpress/compose';
/**
* Internal dependencies
@@ -55,6 +57,8 @@ interface ViewTypeMenuProps {
defaultLayouts?: SupportedLayouts;
}
+const DATAVIEWS_CONFIG_POPOVER_PROPS = { placement: 'bottom-end', offset: 9 };
+
function ViewTypeMenu( {
defaultLayouts = { list: {}, grid: {}, table: {} },
}: ViewTypeMenuProps ) {
@@ -510,7 +514,7 @@ function SettingsSection( {
);
}
-function DataviewsViewConfigContent( {
+function DataviewsViewConfigDropdown( {
density,
setDensity,
}: {
@@ -518,25 +522,52 @@ function DataviewsViewConfigContent( {
setDensity: React.Dispatch< React.SetStateAction< number > >;
} ) {
const { view } = useContext( DataViewsContext );
+ const popoverId = useInstanceId(
+ _DataViewsViewConfig,
+ 'dataviews-view-config-dropdown'
+ );
+
return (
-
-
-
-
- { view.type === LAYOUT_GRID && (
- {
+ return (
+
-
-
-
+ );
+ } }
+ renderContent={ () => (
+
+
+
+
+
+ { view.type === LAYOUT_GRID && (
+
+
+
+
+
+ ) }
+ />
);
}
@@ -552,28 +583,9 @@ function _DataViewsViewConfig( {
return (
<>
{
- return (
-
+ modified
+ newProps
+
+
+
+>
+
+ >
+
+
+
+
+
+
+
+
'modify' ) ); ?>
+ data-wp-on--click="actions.attemptModification"
+ data-wp-text="context.result">
+ >
+ modify
+
+
+
+
+
+
+
+
+
'modify' ) ); ?>
+ data-wp-on--click="actions.attemptModification"
+ data-wp-text="context.result">
+ >
+ modify
+
+
+
+
+ $link ) {
+ $i = $key += 1;
+ echo <<link $i
+HTML;
+ }
+ }
+ ?>
+
+
{
- if ( isNewPost && postType === 'wp_block' ) {
- setIsModalOpen( true );
- }
- // We only want the modal to open when the page is first loaded.
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [] );
+ const [ isModalOpen, setIsModalOpen ] = useState( () =>
+ isNewPost && postType === 'wp_block' ? true : false
+ );
if ( postType !== 'wp_block' || ! isNewPost ) {
return null;
@@ -88,8 +82,7 @@ export default function InitPatternModal() {
/>
Show & Reload Page
@@ -300,7 +300,7 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox and a confirmati
A page reload is required for this change. Make sure your content is saved before reloading.
Hide & Reload Page
diff --git a/packages/edit-post/src/store/actions.js b/packages/edit-post/src/store/actions.js
index d00f7472382f80..1dc0401baf21c3 100644
--- a/packages/edit-post/src/store/actions.js
+++ b/packages/edit-post/src/store/actions.js
@@ -8,7 +8,7 @@ import {
privateApis as editorPrivateApis,
} from '@wordpress/editor';
import deprecated from '@wordpress/deprecated';
-import { addFilter } from '@wordpress/hooks';
+import { addAction } from '@wordpress/hooks';
import { store as coreStore } from '@wordpress/core-data';
/**
@@ -478,21 +478,14 @@ export const initializeMetaBoxes =
metaBoxesInitialized = true;
// Save metaboxes on save completion, except for autosaves.
- addFilter(
- 'editor.__unstableSavePost',
+ addAction(
+ 'editor.savePost',
'core/edit-post/save-metaboxes',
- ( previous, options ) =>
- previous.then( () => {
- if ( options.isAutosave ) {
- return;
- }
-
- if ( ! select.hasMetaBoxes() ) {
- return;
- }
-
- return dispatch.requestMetaBoxUpdates();
- } )
+ async ( options ) => {
+ if ( ! options.isAutosave && select.hasMetaBoxes() ) {
+ await dispatch.requestMetaBoxUpdates();
+ }
+ }
);
dispatch( {
diff --git a/packages/edit-post/src/store/selectors.js b/packages/edit-post/src/store/selectors.js
index 5bea6e7d35eb62..8d85249e8100ba 100644
--- a/packages/edit-post/src/store/selectors.js
+++ b/packages/edit-post/src/store/selectors.js
@@ -506,7 +506,7 @@ export const __experimentalGetInsertionPoint = createRegistrySelector(
version: '6.7',
}
);
- return unlock( select( editorStore ) ).getInsertionPoint();
+ return unlock( select( editorStore ) ).getInserter();
}
);
diff --git a/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js b/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js
index 4993f12153b9e4..69f1925c7b0e44 100644
--- a/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js
+++ b/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js
@@ -36,8 +36,7 @@ function SuggestionListItem( {
diff --git a/packages/edit-site/src/components/add-new-template/index.js b/packages/edit-site/src/components/add-new-template/index.js
index 933ea6df1198bb..bb0acbe62cd659 100644
--- a/packages/edit-site/src/components/add-new-template/index.js
+++ b/packages/edit-site/src/components/add-new-template/index.js
@@ -107,8 +107,7 @@ function TemplateListItem( {
} ) {
return (
{ shouldShowCloseButton && (
-
)
diff --git a/packages/edit-site/src/components/editor/style.scss b/packages/edit-site/src/components/editor/style.scss
index 10efff92af6434..a6cc5084966947 100644
--- a/packages/edit-site/src/components/editor/style.scss
+++ b/packages/edit-site/src/components/editor/style.scss
@@ -69,6 +69,10 @@
background-color: hsla(0, 0%, 80%);
pointer-events: none;
+ svg {
+ fill: currentColor;
+ }
+
&.has-site-icon {
background-color: hsla(0, 0%, 100%, 0.6);
-webkit-backdrop-filter: saturate(180%) blur(15px);
diff --git a/packages/edit-site/src/components/error-boundary/warning.js b/packages/edit-site/src/components/error-boundary/warning.js
index b03c99f46f03b1..c4090c7e6b1190 100644
--- a/packages/edit-site/src/components/error-boundary/warning.js
+++ b/packages/edit-site/src/components/error-boundary/warning.js
@@ -9,12 +9,7 @@ import { useCopyToClipboard } from '@wordpress/compose';
function CopyButton( { text, children } ) {
const ref = useCopyToClipboard( text );
return (
-
+
{ children }
);
diff --git a/packages/edit-site/src/components/global-styles-sidebar/index.js b/packages/edit-site/src/components/global-styles-sidebar/index.js
index b314b5d7e75244..966005907cda4a 100644
--- a/packages/edit-site/src/components/global-styles-sidebar/index.js
+++ b/packages/edit-site/src/components/global-styles-sidebar/index.js
@@ -6,7 +6,7 @@ import {
FlexBlock,
Flex,
Button,
- __experimentalUseNavigator as useNavigator,
+ useNavigator,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { styles, seen, backup } from '@wordpress/icons';
diff --git a/packages/edit-site/src/components/global-styles-sidebar/style.scss b/packages/edit-site/src/components/global-styles-sidebar/style.scss
index b76192ddfcb5ca..4ca87bf200f178 100644
--- a/packages/edit-site/src/components/global-styles-sidebar/style.scss
+++ b/packages/edit-site/src/components/global-styles-sidebar/style.scss
@@ -22,14 +22,7 @@
flex-direction: column;
min-height: 100%;
- &__panel,
- &__navigator-provider {
- display: flex;
- flex-direction: column;
- flex: 1;
- }
-
- &__navigator-screen {
+ &__panel {
flex: 1;
}
}
diff --git a/packages/edit-site/src/components/global-styles/font-families.js b/packages/edit-site/src/components/global-styles/font-families.js
index 6a554b136317dd..5332478823c210 100644
--- a/packages/edit-site/src/components/global-styles/font-families.js
+++ b/packages/edit-site/src/components/global-styles/font-families.js
@@ -1,7 +1,7 @@
/**
* WordPress dependencies
*/
-import { __, _x } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
import {
__experimentalText as Text,
__experimentalItemGroup as ItemGroup,
@@ -61,14 +61,9 @@ function FontFamilies() {
) }
- { themeFonts.length > 0 && (
-
-
- {
- /* translators: Heading for a list of fonts provided by the theme. */
- _x( 'Theme', 'font source' )
- }
-
+ { [ ...themeFonts, ...customFonts ].length > 0 && (
+ <>
+ { __( 'Fonts' ) }
{ themeFonts.map( ( font ) => (
-
- ) }
- { customFonts.length > 0 && (
-
-
- {
- /* translators: Heading for a list of fonts installed by the user. */
- _x( 'Custom', 'font source' )
- }
-
-
- { customFonts.map( ( font ) => (
-
-
+
) }
{ ! hasFonts && (
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-card.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-card.js
index 579c6564fdf3e7..61f8c28c77144f 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/font-card.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-card.js
@@ -3,7 +3,7 @@
*/
import { _n, sprintf, isRTL } from '@wordpress/i18n';
import {
- __experimentalUseNavigator as useNavigator,
+ useNavigator,
__experimentalText as Text,
Button,
Flex,
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
index ce7b4c1766c64f..caf339091de752 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
@@ -13,9 +13,7 @@ import {
__experimentalText as Text,
__experimentalHStack as HStack,
__experimentalVStack as VStack,
- __experimentalNavigatorProvider as NavigatorProvider,
- __experimentalNavigatorScreen as NavigatorScreen,
- __experimentalNavigatorBackButton as NavigatorBackButton,
+ Navigator,
__experimentalHeading as Heading,
Notice,
SelectControl,
@@ -284,11 +282,11 @@ function FontCollection( { slug } ) {
{ ! isLoading && (
<>
-
-
+
@@ -378,11 +376,11 @@ function FontCollection( { slug } ) {
{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
+
-
-
+
+
{ selectedFont && (
-
+
{ tabs.map( ( { id, title } ) => (
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
index 8cb023fff08e96..b7666a66afe0b3 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
@@ -6,10 +6,8 @@ import {
__experimentalConfirmDialog as ConfirmDialog,
__experimentalHStack as HStack,
__experimentalHeading as Heading,
- __experimentalNavigatorProvider as NavigatorProvider,
- __experimentalNavigatorScreen as NavigatorScreen,
- __experimentalNavigatorBackButton as NavigatorBackButton,
- __experimentalUseNavigator as useNavigator,
+ Navigator,
+ useNavigator,
__experimentalSpacer as Spacer,
__experimentalText as Text,
__experimentalVStack as VStack,
@@ -235,12 +233,12 @@ function InstalledFonts() {
{ ! isResolvingLibrary && (
<>
-
-
+
{ notice && (
) }
-
+
-
+
-
{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
-
-
+
+
size.slug === slug );
+ // Navigate to the font sizes list if the font size is not available.
+ useEffect( () => {
+ if ( ! fontSize ) {
+ goTo( '/typography/font-sizes/', { isBack: true } );
+ }
+ }, [ fontSize, goTo ] );
+
+ if ( ! origin || ! slug || ! fontSize ) {
+ return null;
+ }
+
// Whether the font size is fluid. If not defined, use the global fluid value of the theme.
const isFluid =
- fontSize.fluid !== undefined ? !! fontSize.fluid : !! globalFluid;
+ fontSize?.fluid !== undefined ? !! fontSize.fluid : !! globalFluid;
// Whether custom fluid values are used.
- const isCustomFluid = typeof fontSize.fluid === 'object';
+ const isCustomFluid = typeof fontSize?.fluid === 'object';
const handleNameChange = ( value ) => {
updateFontSize( 'name', value );
@@ -107,9 +117,6 @@ function FontSize() {
};
const handleRemoveFontSize = () => {
- // Navigate to the font sizes list.
- goBack();
-
const newFontSizes = sizes.filter( ( size ) => size.slug !== slug );
setFontSizes( {
...fontSizes,
diff --git a/packages/edit-site/src/components/global-styles/header.js b/packages/edit-site/src/components/global-styles/header.js
index 1d9de84183aef7..1bbff8fb3d6a6d 100644
--- a/packages/edit-site/src/components/global-styles/header.js
+++ b/packages/edit-site/src/components/global-styles/header.js
@@ -7,7 +7,7 @@ import {
__experimentalSpacer as Spacer,
__experimentalHeading as Heading,
__experimentalView as View,
- __experimentalNavigatorBackButton as NavigatorBackButton,
+ Navigator,
} from '@wordpress/components';
import { isRTL, __ } from '@wordpress/i18n';
import { chevronRight, chevronLeft } from '@wordpress/icons';
@@ -18,7 +18,7 @@ function ScreenHeader( { title, description, onBack } ) {
-
-
-
-
-
- );
-}
-
-export default ScreenTypeset;
diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js
index c23592c51a6a2a..3739e3234258bd 100644
--- a/packages/edit-site/src/components/global-styles/screen-typography.js
+++ b/packages/edit-site/src/components/global-styles/screen-typography.js
@@ -11,8 +11,8 @@ import { store as editorStore } from '@wordpress/editor';
*/
import TypographyElements from './typography-elements';
import ScreenHeader from './header';
+import TypographyVariations from './variations/variations-typography';
import FontSizesCount from './font-sizes/font-sizes-count';
-import TypesetButton from './typeset-button';
import FontFamilies from './font-families';
function ScreenTypography() {
@@ -27,12 +27,12 @@ function ScreenTypography() {
-
-
- { __( 'Typeset' ) }
-
-
-
-
- { title }
-
-
-
-
- )
- );
-}
-
-export default ( { ...props } ) => (
-
-
-);
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index 60d7e314d7776a..fbc3e461e6abb6 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -2,9 +2,8 @@
* WordPress dependencies
*/
import {
- __experimentalNavigatorProvider as NavigatorProvider,
- __experimentalNavigatorScreen as NavigatorScreen,
- __experimentalUseNavigator as useNavigator,
+ Navigator,
+ useNavigator,
createSlotFill,
DropdownMenu,
MenuGroup,
@@ -32,7 +31,6 @@ import {
} from './screen-block-list';
import ScreenBlock from './screen-block';
import ScreenTypography from './screen-typography';
-import ScreenTypeset from './screen-typeset';
import ScreenTypographyElement from './screen-typography-element';
import FontSize from './font-sizes/font-size';
import FontSizes from './font-sizes/font-sizes';
@@ -125,7 +123,7 @@ function GlobalStylesActionMenu() {
function GlobalStylesNavigationScreen( { className, ...props } ) {
return (
-
@@ -325,10 +310,6 @@ function GlobalStylesUI() {
-
-
@@ -403,7 +384,7 @@ function GlobalStylesUI() {
setShouldShowHandle( true ) }
onMouseOut={ () => setShouldShowHandle( false ) }
handleComponent={ {
- left: canvasMode === 'view' && (
+ [ isRTL() ? 'right' : 'left' ]: canvasMode === 'view' && (
<>
{ /* Disable reason: role="separator" does in fact support aria-valuenow */ }
diff --git a/packages/edit-site/src/components/routes/link.js b/packages/edit-site/src/components/routes/link.js
index 4423eeeb1d6e8d..a34b37943a0799 100644
--- a/packages/edit-site/src/components/routes/link.js
+++ b/packages/edit-site/src/components/routes/link.js
@@ -33,14 +33,17 @@ export function useLink( params, state, shouldReplace = false ) {
...Object.keys( currentArgs )
);
+ let extraParams = {};
if ( isPreviewingTheme() ) {
- params = {
- ...params,
+ extraParams = {
wp_theme_preview: currentlyPreviewingTheme(),
};
}
- const newUrl = addQueryArgs( currentUrlWithoutArgs, params );
+ const newUrl = addQueryArgs( currentUrlWithoutArgs, {
+ ...params,
+ ...extraParams,
+ } );
return {
href: newUrl,
diff --git a/packages/edit-site/src/components/save-panel/index.js b/packages/edit-site/src/components/save-panel/index.js
index babcf72181a1af..9b00a39fd78948 100644
--- a/packages/edit-site/src/components/save-panel/index.js
+++ b/packages/edit-site/src/components/save-panel/index.js
@@ -150,8 +150,7 @@ export default function SavePanel() {
} ) }
>
setIsSaveViewOpened( true ) }
diff --git a/packages/edit-site/src/components/sidebar-button/index.js b/packages/edit-site/src/components/sidebar-button/index.js
index d7030597dac503..64c6efb891f462 100644
--- a/packages/edit-site/src/components/sidebar-button/index.js
+++ b/packages/edit-site/src/components/sidebar-button/index.js
@@ -11,8 +11,7 @@ import { Button } from '@wordpress/components';
export default function SidebarButton( props ) {
return (
{
setIsAdding( false );
@@ -99,8 +98,7 @@ function AddNewItemModalContent( { type, setIsAdding } ) {
{ title }
diff --git a/packages/edit-site/src/components/sidebar-dataviews/default-views.js b/packages/edit-site/src/components/sidebar-dataviews/default-views.js
index 20f61e451b21fa..658fa319e9c667 100644
--- a/packages/edit-site/src/components/sidebar-dataviews/default-views.js
+++ b/packages/edit-site/src/components/sidebar-dataviews/default-views.js
@@ -13,7 +13,7 @@ import {
notAllowed,
} from '@wordpress/icons';
import { useSelect } from '@wordpress/data';
-import { store as coreStore, useEntityRecords } from '@wordpress/core-data';
+import { store as coreStore } from '@wordpress/core-data';
import { useMemo } from '@wordpress/element';
/**
@@ -68,50 +68,6 @@ const DEFAULT_POST_BASE = {
layout: defaultLayouts[ LAYOUT_LIST ].layout,
};
-export function useDefaultViewsWithItemCounts( { postType } ) {
- const defaultViews = useDefaultViews( { postType } );
- const { records, totalItems } = useEntityRecords( 'postType', postType, {
- per_page: -1,
- status: [ 'any', 'trash' ],
- } );
-
- return useMemo( () => {
- if ( ! defaultViews ) {
- return [];
- }
-
- // If there are no records, return the default views with no counts.
- if ( ! records ) {
- return defaultViews;
- }
-
- const counts = {
- drafts: records.filter( ( record ) => record.status === 'draft' )
- .length,
- future: records.filter( ( record ) => record.status === 'future' )
- .length,
- pending: records.filter( ( record ) => record.status === 'pending' )
- .length,
- private: records.filter( ( record ) => record.status === 'private' )
- .length,
- published: records.filter(
- ( record ) => record.status === 'publish'
- ).length,
- trash: records.filter( ( record ) => record.status === 'trash' )
- .length,
- };
-
- // All items excluding trashed items as per the default "all" status query.
- counts.all = totalItems ? totalItems - counts.trash : 0;
-
- // Filter out views with > 0 item counts.
- return defaultViews.map( ( _view ) => {
- _view.count = counts[ _view.slug ];
- return _view;
- } );
- }, [ defaultViews, records, totalItems ] );
-}
-
export function useDefaultViews( { postType } ) {
const labels = useSelect(
( select ) => {
diff --git a/packages/edit-site/src/components/sidebar-dataviews/index.js b/packages/edit-site/src/components/sidebar-dataviews/index.js
index 3f7f5b965fce71..86420c4eec1d1f 100644
--- a/packages/edit-site/src/components/sidebar-dataviews/index.js
+++ b/packages/edit-site/src/components/sidebar-dataviews/index.js
@@ -7,7 +7,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
/**
* Internal dependencies
*/
-import { useDefaultViewsWithItemCounts } from './default-views';
+import { useDefaultViews } from './default-views';
import { unlock } from '../../lock-unlock';
import DataViewItem from './dataview-item';
import CustomDataViewsList from './custom-dataviews-list';
@@ -18,9 +18,7 @@ export default function DataViewsSidebarContent() {
const {
params: { postType, activeView = 'all', isCustom = 'false' },
} = useLocation();
-
- const defaultViews = useDefaultViewsWithItemCounts( { postType } );
-
+ const defaultViews = useDefaultViews( { postType } );
if ( ! postType ) {
return null;
}
@@ -36,9 +34,6 @@ export default function DataViewsSidebarContent() {
slug={ dataview.slug }
title={ dataview.title }
icon={ dataview.icon }
- navigationItemSuffix={
- { dataview.count }
- }
type={ dataview.view.type }
isActive={
! isCustomBoolean &&
diff --git a/packages/edit-site/src/components/sidebar-dataviews/style.scss b/packages/edit-site/src/components/sidebar-dataviews/style.scss
index 3473c8e20e1a45..14e6bf1d03fca8 100644
--- a/packages/edit-site/src/components/sidebar-dataviews/style.scss
+++ b/packages/edit-site/src/components/sidebar-dataviews/style.scss
@@ -15,10 +15,6 @@
min-width: initial;
}
- .edit-site-sidebar-navigation-item.with-suffix {
- padding-right: $grid-unit-10;
- }
-
&:hover,
&:focus,
&[aria-current] {
diff --git a/packages/edit-site/src/components/site-hub/index.js b/packages/edit-site/src/components/site-hub/index.js
index 7fe929d20a1db2..8cb3502493cff0 100644
--- a/packages/edit-site/src/components/site-hub/index.js
+++ b/packages/edit-site/src/components/site-hub/index.js
@@ -62,8 +62,7 @@ const SiteHub = memo(
) }
>
openCommandCenter() }
@@ -149,8 +146,7 @@ export const SiteHubMobile = memo(
) }
>
openCommandCenter() }
diff --git a/packages/edit-site/src/components/style-book/categories.ts b/packages/edit-site/src/components/style-book/categories.ts
new file mode 100644
index 00000000000000..2c1b627c6d0c60
--- /dev/null
+++ b/packages/edit-site/src/components/style-book/categories.ts
@@ -0,0 +1,91 @@
+/**
+ * WordPress dependencies
+ */
+import { getCategories } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import type {
+ BlockExample,
+ StyleBookCategory,
+ CategoryExamples,
+} from './types';
+import {
+ STYLE_BOOK_CATEGORIES,
+ STYLE_BOOK_THEME_SUBCATEGORIES,
+} from './constants';
+
+/**
+ * Returns category examples for a given category definition and list of examples.
+ * @param {StyleBookCategory} categoryDefinition The category definition.
+ * @param {BlockExample[]} examples An array of block examples.
+ * @return {CategoryExamples|undefined} An object containing the category examples.
+ */
+export function getExamplesByCategory(
+ categoryDefinition: StyleBookCategory,
+ examples: BlockExample[]
+): CategoryExamples | undefined {
+ if ( ! categoryDefinition?.slug || ! examples?.length ) {
+ return;
+ }
+
+ if ( categoryDefinition?.subcategories?.length ) {
+ return categoryDefinition.subcategories.reduce(
+ ( acc, subcategoryDefinition ) => {
+ const subcategoryExamples = getExamplesByCategory(
+ subcategoryDefinition,
+ examples
+ );
+ if ( subcategoryExamples ) {
+ acc.subcategories = [
+ ...acc.subcategories,
+ subcategoryExamples,
+ ];
+ }
+ return acc;
+ },
+ {
+ title: categoryDefinition.title,
+ slug: categoryDefinition.slug,
+ subcategories: [],
+ }
+ );
+ }
+
+ const blocksToInclude = categoryDefinition?.blocks || [];
+ const blocksToExclude = categoryDefinition?.exclude || [];
+ const categoryExamples = examples.filter( ( example ) => {
+ return (
+ ! blocksToExclude.includes( example.name ) &&
+ ( example.category === categoryDefinition.slug ||
+ blocksToInclude.includes( example.name ) )
+ );
+ } );
+
+ if ( ! categoryExamples.length ) {
+ return;
+ }
+
+ return {
+ title: categoryDefinition.title,
+ slug: categoryDefinition.slug,
+ examples: categoryExamples,
+ };
+}
+
+/**
+ * Returns category examples for a given category definition and list of examples.
+ *
+ * @return {StyleBookCategory[]} An array of top-level category definitions.
+ */
+export function getTopLevelStyleBookCategories(): StyleBookCategory[] {
+ const reservedCategories = [
+ ...STYLE_BOOK_THEME_SUBCATEGORIES,
+ ...STYLE_BOOK_CATEGORIES,
+ ].map( ( { slug } ) => slug );
+ const extraCategories = getCategories().filter(
+ ( { slug } ) => ! reservedCategories.includes( slug )
+ );
+ return [ ...STYLE_BOOK_CATEGORIES, ...extraCategories ];
+}
diff --git a/packages/edit-site/src/components/style-book/constants.ts b/packages/edit-site/src/components/style-book/constants.ts
new file mode 100644
index 00000000000000..fc06d8f1409f0d
--- /dev/null
+++ b/packages/edit-site/src/components/style-book/constants.ts
@@ -0,0 +1,191 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { StyleBookCategory } from './types';
+
+export const STYLE_BOOK_THEME_SUBCATEGORIES: Omit<
+ StyleBookCategory,
+ 'subcategories'
+>[] = [
+ {
+ slug: 'site-identity',
+ title: __( 'Site Identity' ),
+ blocks: [ 'core/site-logo', 'core/site-title', 'core/site-tagline' ],
+ },
+ {
+ slug: 'design',
+ title: __( 'Design' ),
+ blocks: [ 'core/navigation', 'core/avatar', 'core/post-time-to-read' ],
+ exclude: [ 'core/home-link', 'core/navigation-link' ],
+ },
+ {
+ slug: 'posts',
+ title: __( 'Posts' ),
+ blocks: [
+ 'core/post-title',
+ 'core/post-excerpt',
+ 'core/post-author',
+ 'core/post-author-name',
+ 'core/post-author-biography',
+ 'core/post-date',
+ 'core/post-terms',
+ 'core/term-description',
+ 'core/query-title',
+ 'core/query-no-results',
+ 'core/query-pagination',
+ 'core/query-numbers',
+ ],
+ },
+ {
+ slug: 'comments',
+ title: __( 'Comments' ),
+ blocks: [
+ 'core/comments-title',
+ 'core/comments-pagination',
+ 'core/comments-pagination-numbers',
+ 'core/comments',
+ 'core/comments-author-name',
+ 'core/comment-content',
+ 'core/comment-date',
+ 'core/comment-edit-link',
+ 'core/comment-reply-link',
+ 'core/comment-template',
+ 'core/post-comments-count',
+ 'core/post-comments-link',
+ ],
+ },
+];
+
+export const STYLE_BOOK_CATEGORIES: StyleBookCategory[] = [
+ {
+ slug: 'text',
+ title: __( 'Text' ),
+ blocks: [
+ 'core/post-content',
+ 'core/home-link',
+ 'core/navigation-link',
+ ],
+ },
+ {
+ slug: 'colors',
+ title: __( 'Colors' ),
+ blocks: [ 'custom/colors' ],
+ },
+ {
+ slug: 'theme',
+ title: __( 'Theme' ),
+ subcategories: STYLE_BOOK_THEME_SUBCATEGORIES,
+ },
+ {
+ slug: 'media',
+ title: __( 'Media' ),
+ blocks: [ 'core/post-featured-image' ],
+ },
+ {
+ slug: 'widgets',
+ title: __( 'Widgets' ),
+ blocks: [],
+ },
+ {
+ slug: 'embed',
+ title: __( 'Embeds' ),
+ include: [],
+ },
+];
+
+// The content area of the Style Book is rendered within an iframe so that global styles
+// are applied to elements within the entire content area. To support elements that are
+// not part of the block previews, such as headings and layout for the block previews,
+// additional CSS rules need to be passed into the iframe. These are hard-coded below.
+// Note that button styles are unset, and then focus rules from the `Button` component are
+// applied to the `button` element, targeted via `.edit-site-style-book__example`.
+// This is to ensure that browser default styles for buttons are not applied to the previews.
+export const STYLE_BOOK_IFRAME_STYLES = `
+ // Forming a "block formatting context" to prevent margin collapsing.
+ // @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
+ .is-root-container {
+ display: flow-root;
+ }
+
+ body {
+ position: relative;
+ padding: 32px !important;
+ }
+
+ .edit-site-style-book__examples {
+ max-width: 1200px;
+ margin: 0 auto;
+ }
+
+ .edit-site-style-book__example {
+ max-width: 900px;
+ border-radius: 2px;
+ cursor: pointer;
+ display: flex;
+ flex-direction: column;
+ gap: 40px;
+ padding: 16px;
+ width: 100%;
+ box-sizing: border-box;
+ scroll-margin-top: 32px;
+ scroll-margin-bottom: 32px;
+ margin: 0 auto 40px auto;
+ }
+
+ .edit-site-style-book__example.is-selected {
+ box-shadow: 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+ }
+
+ .edit-site-style-book__example:focus:not(:disabled) {
+ box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+ outline: 3px solid transparent;
+ }
+
+ .edit-site-style-book__examples.is-wide .edit-site-style-book__example {
+ flex-direction: row;
+ }
+
+ .edit-site-style-book__subcategory-title,
+ .edit-site-style-book__example-title {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+ font-size: 11px;
+ font-weight: 500;
+ line-height: normal;
+ margin: 0;
+ text-align: left;
+ text-transform: uppercase;
+ }
+
+ .edit-site-style-book__subcategory-title {
+ font-size: 16px;
+ margin-bottom: 40px;
+ border-bottom: 1px solid #ddd;
+ padding-bottom: 8px;
+ }
+
+ .edit-site-style-book__examples.is-wide .edit-site-style-book__example-title {
+ text-align: right;
+ width: 120px;
+ }
+
+ .edit-site-style-book__example-preview {
+ width: 100%;
+ }
+
+ .edit-site-style-book__example-preview .block-editor-block-list__insertion-point,
+ .edit-site-style-book__example-preview .block-list-appender {
+ display: none;
+ }
+
+ .edit-site-style-book__example-preview .is-root-container > .wp-block:first-child {
+ margin-top: 0;
+ }
+ .edit-site-style-book__example-preview .is-root-container > .wp-block:last-child {
+ margin-bottom: 0;
+ }
+`;
diff --git a/packages/edit-site/src/components/style-book/examples.ts b/packages/edit-site/src/components/style-book/examples.ts
new file mode 100644
index 00000000000000..80807b10374c68
--- /dev/null
+++ b/packages/edit-site/src/components/style-book/examples.ts
@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import {
+ getBlockType,
+ getBlockTypes,
+ getBlockFromExample,
+ createBlock,
+} from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import type { BlockExample } from './types';
+
+/**
+ * Returns a list of examples for registered block types.
+ *
+ * @return {BlockExample[]} An array of block examples.
+ */
+export function getExamples(): BlockExample[] {
+ const nonHeadingBlockExamples = getBlockTypes()
+ .filter( ( blockType ) => {
+ const { name, example, supports } = blockType;
+ return (
+ name !== 'core/heading' &&
+ !! example &&
+ supports.inserter !== false
+ );
+ } )
+ .map( ( blockType ) => ( {
+ name: blockType.name,
+ title: blockType.title,
+ category: blockType.category,
+ blocks: getBlockFromExample( blockType.name, blockType.example ),
+ } ) );
+ const isHeadingBlockRegistered = !! getBlockType( 'core/heading' );
+
+ if ( ! isHeadingBlockRegistered ) {
+ return nonHeadingBlockExamples;
+ }
+
+ // Use our own example for the Heading block so that we can show multiple
+ // heading levels.
+ const headingsExample = {
+ name: 'core/heading',
+ title: __( 'Headings' ),
+ category: 'text',
+ blocks: [ 1, 2, 3, 4, 5, 6 ].map( ( level ) => {
+ return createBlock( 'core/heading', {
+ content: sprintf(
+ // translators: %d: heading level e.g: "1", "2", "3"
+ __( 'Heading %d' ),
+ level
+ ),
+ level,
+ } );
+ } ),
+ };
+
+ return [ headingsExample, ...nonHeadingBlockExamples ];
+}
diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index 64503dcf7a6dbb..7b85c320e20c99 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -12,13 +12,6 @@ import {
privateApis as componentsPrivateApis,
} from '@wordpress/components';
import { __, sprintf } from '@wordpress/i18n';
-import {
- getCategories,
- getBlockType,
- getBlockTypes,
- getBlockFromExample,
- createBlock,
-} from '@wordpress/blocks';
import {
BlockList,
privateApis as blockEditorPrivateApis,
@@ -37,6 +30,12 @@ import { ENTER, SPACE } from '@wordpress/keycodes';
*/
import { unlock } from '../../lock-unlock';
import EditorCanvasContainer from '../editor-canvas-container';
+import { STYLE_BOOK_IFRAME_STYLES } from './constants';
+import {
+ getExamplesByCategory,
+ getTopLevelStyleBookCategories,
+} from './categories';
+import { getExamples } from './examples';
const {
ExperimentalBlockEditorProvider,
@@ -48,126 +47,10 @@ const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
const { Tabs } = unlock( componentsPrivateApis );
-// The content area of the Style Book is rendered within an iframe so that global styles
-// are applied to elements within the entire content area. To support elements that are
-// not part of the block previews, such as headings and layout for the block previews,
-// additional CSS rules need to be passed into the iframe. These are hard-coded below.
-// Note that button styles are unset, and then focus rules from the `Button` component are
-// applied to the `button` element, targeted via `.edit-site-style-book__example`.
-// This is to ensure that browser default styles for buttons are not applied to the previews.
-const STYLE_BOOK_IFRAME_STYLES = `
- .edit-site-style-book__examples {
- max-width: 900px;
- margin: 0 auto;
- }
-
- .edit-site-style-book__example {
- border-radius: 2px;
- cursor: pointer;
- display: flex;
- flex-direction: column;
- gap: 40px;
- margin-bottom: 40px;
- padding: 16px;
- width: 100%;
- box-sizing: border-box;
- scroll-margin-top: 32px;
- scroll-margin-bottom: 32px;
- }
-
- .edit-site-style-book__example.is-selected {
- box-shadow: 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
- }
-
- .edit-site-style-book__example:focus:not(:disabled) {
- box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
- outline: 3px solid transparent;
- }
-
- .edit-site-style-book__examples.is-wide .edit-site-style-book__example {
- flex-direction: row;
- }
-
- .edit-site-style-book__example-title {
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
- font-size: 11px;
- font-weight: 500;
- line-height: normal;
- margin: 0;
- text-align: left;
- text-transform: uppercase;
- }
-
- .edit-site-style-book__examples.is-wide .edit-site-style-book__example-title {
- text-align: right;
- width: 120px;
- }
-
- .edit-site-style-book__example-preview {
- width: 100%;
- }
-
- .edit-site-style-book__example-preview .block-editor-block-list__insertion-point,
- .edit-site-style-book__example-preview .block-list-appender {
- display: none;
- }
-
- .edit-site-style-book__example-preview .is-root-container > .wp-block:first-child {
- margin-top: 0;
- }
- .edit-site-style-book__example-preview .is-root-container > .wp-block:last-child {
- margin-bottom: 0;
- }
-`;
-
function isObjectEmpty( object ) {
return ! object || Object.keys( object ).length === 0;
}
-function getExamples() {
- const nonHeadingBlockExamples = getBlockTypes()
- .filter( ( blockType ) => {
- const { name, example, supports } = blockType;
- return (
- name !== 'core/heading' &&
- !! example &&
- supports.inserter !== false
- );
- } )
- .map( ( blockType ) => ( {
- name: blockType.name,
- title: blockType.title,
- category: blockType.category,
- blocks: getBlockFromExample( blockType.name, blockType.example ),
- } ) );
-
- const isHeadingBlockRegistered = !! getBlockType( 'core/heading' );
-
- if ( ! isHeadingBlockRegistered ) {
- return nonHeadingBlockExamples;
- }
-
- // Use our own example for the Heading block so that we can show multiple
- // heading levels.
- const headingsExample = {
- name: 'core/heading',
- title: __( 'Headings' ),
- category: 'text',
- blocks: [ 1, 2, 3, 4, 5, 6 ].map( ( level ) => {
- return createBlock( 'core/heading', {
- content: sprintf(
- // translators: %d: heading level e.g: "1", "2", "3"
- __( 'Heading %d' ),
- level
- ),
- level,
- } );
- } ),
- };
-
- return [ headingsExample, ...nonHeadingBlockExamples ];
-}
-
function StyleBook( {
enableResizing = true,
isSelected,
@@ -184,17 +67,11 @@ function StyleBook( {
const [ examples ] = useState( getExamples );
const tabs = useMemo(
() =>
- getCategories()
- .filter( ( category ) =>
- examples.some(
- ( example ) => example.category === category.slug
- )
+ getTopLevelStyleBookCategories().filter( ( category ) =>
+ examples.some(
+ ( example ) => example.category === category.slug
)
- .map( ( category ) => ( {
- name: category.slug,
- title: category.title,
- icon: category.icon,
- } ) ),
+ ),
[ examples ]
);
const { base: baseConfig } = useContext( GlobalStylesContext );
@@ -245,24 +122,26 @@ function StyleBook( {
{ showTabs ? (
-
- { tabs.map( ( tab ) => (
-
- { tab.title }
-
- ) ) }
-
+
+
+ { tabs.map( ( tab ) => (
+
+ { tab.title }
+
+ ) ) }
+
+
{ tabs.map( ( tab ) => (
{
+ const categoryDefinition = category
+ ? getTopLevelStyleBookCategories().find(
+ ( _category ) => _category.slug === category
+ )
+ : null;
+
+ const filteredExamples = categoryDefinition
+ ? getExamplesByCategory( categoryDefinition, examples )
+ : { examples };
+
return (
- { examples
- .filter( ( example ) =>
- category ? example.category === category : true
- )
- .map( ( example ) => (
+ { !! filteredExamples?.examples?.length &&
+ filteredExamples.examples.map( ( example ) => (
+
+
+ { subcategory.title }
+
+
+
+ ) ) }
);
}
);
+const Subcategory = ( { examples, isSelected, onSelect } ) => {
+ return (
+ !! examples?.length &&
+ examples.map( ( example ) => (
+ {
+ onSelect?.( example.name );
+ } }
+ />
+ ) )
+ );
+};
+
const Example = ( { id, title, blocks, isSelected, onClick } ) => {
const originalSettings = useSelect(
( select ) => select( blockEditorStore ).getSettings(),
diff --git a/packages/edit-site/src/components/style-book/style.scss b/packages/edit-site/src/components/style-book/style.scss
index ab66ec288da310..3e0c6466438a22 100644
--- a/packages/edit-site/src/components/style-book/style.scss
+++ b/packages/edit-site/src/components/style-book/style.scss
@@ -17,12 +17,16 @@
}
}
-.edit-site-style-book__tabs {
- [role="tablist"] {
- background: $white;
- color: $gray-900;
- }
+.edit-site-style-book__tablist-container {
+ background: $white;
+ width: 100%;
+ padding-right: 56px;
+ display: flex;
+ position: absolute;
+ z-index: 1;
+}
+.edit-site-style-book__tabs {
[role="tabpanel"] {
bottom: 0;
left: 0;
diff --git a/packages/edit-site/src/components/style-book/test/categories.js b/packages/edit-site/src/components/style-book/test/categories.js
new file mode 100644
index 00000000000000..5629689e260f89
--- /dev/null
+++ b/packages/edit-site/src/components/style-book/test/categories.js
@@ -0,0 +1,171 @@
+/**
+ * Internal dependencies
+ */
+import {
+ getExamplesByCategory,
+ getTopLevelStyleBookCategories,
+} from '../categories';
+import { STYLE_BOOK_CATEGORIES } from '../constants';
+
+jest.mock( '@wordpress/blocks', () => {
+ return {
+ getCategories() {
+ return [
+ {
+ slug: 'text',
+ title: 'Text Registered',
+ icon: 'text',
+ },
+ {
+ slug: 'design',
+ title: 'Design Registered',
+ icon: 'design',
+ },
+ {
+ slug: 'funky',
+ title: 'Funky',
+ icon: 'funky',
+ },
+ ];
+ },
+ };
+} );
+
+// Fixtures
+const exampleThemeBlocks = [
+ {
+ name: 'core/post-content',
+ title: 'Post Content',
+ category: 'theme',
+ },
+ {
+ name: 'core/post-terms',
+ title: 'Post Terms',
+ category: 'theme',
+ },
+ {
+ name: 'core/home-link',
+ title: 'Home Link',
+ category: 'design',
+ },
+ {
+ name: 'custom/colors',
+ title: 'Colors',
+ category: 'colors',
+ },
+ {
+ name: 'core/site-logo',
+ title: 'Site Logo',
+ category: 'theme',
+ },
+ {
+ name: 'core/site-title',
+ title: 'Site Title',
+ category: 'theme',
+ },
+ {
+ name: 'core/site-tagline',
+ title: 'Site Tagline',
+ category: 'theme',
+ },
+ {
+ name: 'core/group',
+ title: 'Group',
+ category: 'design',
+ },
+ {
+ name: 'core/comments-pagination-numbers',
+ title: 'Comments Page Numbers',
+ category: 'theme',
+ },
+ {
+ name: 'core/post-featured-image',
+ title: 'Featured Image',
+ category: 'theme',
+ },
+];
+
+describe( 'utils', () => {
+ describe( 'getTopLevelStyleBookCategories', () => {
+ it( 'returns theme subcategories examples', () => {
+ expect( getTopLevelStyleBookCategories() ).toEqual( [
+ ...STYLE_BOOK_CATEGORIES,
+ {
+ slug: 'funky',
+ title: 'Funky',
+ icon: 'funky',
+ },
+ ] );
+ } );
+ } );
+
+ describe( 'getExamplesByCategory', () => {
+ it( 'returns theme subcategories examples', () => {
+ const themeCategory = STYLE_BOOK_CATEGORIES.find(
+ ( category ) => category.slug === 'theme'
+ );
+ const themeCategoryExamples = getExamplesByCategory(
+ themeCategory,
+ exampleThemeBlocks
+ );
+
+ expect( themeCategoryExamples.slug ).toEqual( 'theme' );
+
+ const siteIdentity = themeCategoryExamples.subcategories.find(
+ ( subcategory ) => subcategory.slug === 'site-identity'
+ );
+ expect( siteIdentity ).toEqual( {
+ title: 'Site Identity',
+ slug: 'site-identity',
+ examples: [
+ {
+ name: 'core/site-logo',
+ title: 'Site Logo',
+ category: 'theme',
+ },
+ {
+ name: 'core/site-title',
+ title: 'Site Title',
+ category: 'theme',
+ },
+ {
+ name: 'core/site-tagline',
+ title: 'Site Tagline',
+ category: 'theme',
+ },
+ ],
+ } );
+
+ const design = themeCategoryExamples.subcategories.find(
+ ( subcategory ) => subcategory.slug === 'design'
+ );
+ expect( design ).toEqual( {
+ title: 'Design',
+ slug: 'design',
+ examples: [
+ {
+ name: 'core/group',
+ title: 'Group',
+ category: 'design',
+ },
+ ],
+ } );
+
+ const posts = themeCategoryExamples.subcategories.find(
+ ( subcategory ) => subcategory.slug === 'posts'
+ );
+
+ expect( posts ).toEqual( {
+ title: 'Posts',
+ slug: 'posts',
+ examples: [
+ {
+ name: 'core/post-terms',
+ title: 'Post Terms',
+ category: 'theme',
+ },
+ ],
+ } );
+ } );
+ } );
+} );
diff --git a/packages/edit-site/src/components/style-book/types.ts b/packages/edit-site/src/components/style-book/types.ts
new file mode 100644
index 00000000000000..4729b38b1b2bb1
--- /dev/null
+++ b/packages/edit-site/src/components/style-book/types.ts
@@ -0,0 +1,27 @@
+type Block = {
+ name: string;
+ attributes: Record< string, unknown >;
+ innerBlocks?: Block[];
+};
+
+export type StyleBookCategory = {
+ title: string;
+ slug: string;
+ blocks?: string[];
+ exclude?: string[];
+ subcategories?: StyleBookCategory[];
+};
+
+export type BlockExample = {
+ name: string;
+ title: string;
+ category: string;
+ blocks: Block | Block[];
+};
+
+export type CategoryExamples = {
+ title: string;
+ slug: string;
+ examples?: BlockExample[];
+ subcategories?: CategoryExamples[];
+};
diff --git a/packages/edit-site/src/store/selectors.js b/packages/edit-site/src/store/selectors.js
index 3f7bbea0be7d25..ddef4a71d0a915 100644
--- a/packages/edit-site/src/store/selectors.js
+++ b/packages/edit-site/src/store/selectors.js
@@ -213,7 +213,7 @@ export const __experimentalGetInsertionPoint = createRegistrySelector(
version: '6.7',
}
);
- return unlock( select( editorStore ) ).getInsertionPoint();
+ return unlock( select( editorStore ) ).getInserter();
}
);
diff --git a/packages/edit-widgets/src/components/header/style.scss b/packages/edit-widgets/src/components/header/style.scss
index 6e5d8de8142f42..7bd3c41a6a22ad 100644
--- a/packages/edit-widgets/src/components/header/style.scss
+++ b/packages/edit-widgets/src/components/header/style.scss
@@ -82,6 +82,7 @@
padding-right: $grid-unit-10;
padding-left: $grid-unit-20;
overflow: hidden;
+ height: $header-height;
}
.edit-widgets-header__title {
diff --git a/packages/edit-widgets/src/components/sidebar/index.js b/packages/edit-widgets/src/components/sidebar/index.js
index f08ee81a0d19cc..79a47b18c7bf12 100644
--- a/packages/edit-widgets/src/components/sidebar/index.js
+++ b/packages/edit-widgets/src/components/sidebar/index.js
@@ -28,7 +28,7 @@ const SIDEBAR_ACTIVE_BY_DEFAULT = Platform.select( {
const BLOCK_INSPECTOR_IDENTIFIER = 'edit-widgets/block-inspector';
-// Widget areas were one called block areas, so use 'edit-widgets/block-areas'
+// Widget areas were once called block areas, so use 'edit-widgets/block-areas'
// for backwards compatibility.
const WIDGET_AREAS_IDENTIFIER = 'edit-widgets/block-areas';
@@ -192,10 +192,10 @@ export default function Sidebar() {
const { enableComplementaryArea } = useDispatch( interfaceStore );
- // `newSelectedTabId` could technically be falsey if no tab is selected (i.e.
+ // `newSelectedTabId` could technically be falsy if no tab is selected (i.e.
// the initial render) or when we don't want a tab displayed (i.e. the
// sidebar is closed). These cases should both be covered by the `!!` check
- // below, so we shouldn't need any additional falsey handling.
+ // below, so we shouldn't need any additional falsy handling.
const onTabSelect = useCallback(
( newSelectedTabId ) => {
if ( !! newSelectedTabId ) {
diff --git a/packages/editor/src/bindings/api.js b/packages/editor/src/bindings/api.js
index 2cfed5168a143e..84003fab7eaf7b 100644
--- a/packages/editor/src/bindings/api.js
+++ b/packages/editor/src/bindings/api.js
@@ -2,8 +2,8 @@
* WordPress dependencies
*/
import {
- privateApis as blocksPrivateApis,
store as blocksStore,
+ registerBlockBindingsSource,
} from '@wordpress/blocks';
import { dispatch } from '@wordpress/data';
@@ -25,7 +25,6 @@ import { unlock } from '../lock-unlock';
* ```
*/
export function registerCoreBlockBindingsSources() {
- const { registerBlockBindingsSource } = unlock( blocksPrivateApis );
registerBlockBindingsSource( patternOverrides );
registerBlockBindingsSource( postMeta );
}
diff --git a/packages/editor/src/bindings/pattern-overrides.js b/packages/editor/src/bindings/pattern-overrides.js
index 88c6c73bdc61c1..baa1f72f47694b 100644
--- a/packages/editor/src/bindings/pattern-overrides.js
+++ b/packages/editor/src/bindings/pattern-overrides.js
@@ -7,9 +7,9 @@ const CONTENT = 'content';
export default {
name: 'core/pattern-overrides',
- getValues( { registry, clientId, context, bindings } ) {
+ getValues( { select, clientId, context, bindings } ) {
const patternOverridesContent = context[ 'pattern/overrides' ];
- const { getBlockAttributes } = registry.select( blockEditorStore );
+ const { getBlockAttributes } = select( blockEditorStore );
const currentBlockAttributes = getBlockAttributes( clientId );
const overridesValues = {};
@@ -32,9 +32,9 @@ export default {
}
return overridesValues;
},
- setValues( { registry, clientId, bindings } ) {
+ setValues( { select, dispatch, clientId, bindings } ) {
const { getBlockAttributes, getBlockParentsByBlockName, getBlocks } =
- registry.select( blockEditorStore );
+ select( blockEditorStore );
const currentBlockAttributes = getBlockAttributes( clientId );
const blockName = currentBlockAttributes?.metadata?.name;
if ( ! blockName ) {
@@ -61,12 +61,10 @@ export default {
const syncBlocksWithSameName = ( blocks ) => {
for ( const block of blocks ) {
if ( block.attributes?.metadata?.name === blockName ) {
- registry
- .dispatch( blockEditorStore )
- .updateBlockAttributes(
- block.clientId,
- attributes
- );
+ dispatch( blockEditorStore ).updateBlockAttributes(
+ block.clientId,
+ attributes
+ );
}
syncBlocksWithSameName( block.innerBlocks );
}
@@ -77,27 +75,26 @@ export default {
}
const currentBindingValue =
getBlockAttributes( patternClientId )?.[ CONTENT ];
- registry
- .dispatch( blockEditorStore )
- .updateBlockAttributes( patternClientId, {
- [ CONTENT ]: {
- ...currentBindingValue,
- [ blockName ]: {
- ...currentBindingValue?.[ blockName ],
- ...Object.entries( attributes ).reduce(
- ( acc, [ key, value ] ) => {
- // TODO: We need a way to represent `undefined` in the serialized overrides.
- // Also see: https://github.com/WordPress/gutenberg/pull/57249#discussion_r1452987871
- // We use an empty string to represent undefined for now until
- // we support a richer format for overrides and the block bindings API.
- acc[ key ] = value === undefined ? '' : value;
- return acc;
- },
- {}
- ),
- },
+
+ dispatch( blockEditorStore ).updateBlockAttributes( patternClientId, {
+ [ CONTENT ]: {
+ ...currentBindingValue,
+ [ blockName ]: {
+ ...currentBindingValue?.[ blockName ],
+ ...Object.entries( attributes ).reduce(
+ ( acc, [ key, value ] ) => {
+ // TODO: We need a way to represent `undefined` in the serialized overrides.
+ // Also see: https://github.com/WordPress/gutenberg/pull/57249#discussion_r1452987871
+ // We use an empty string to represent undefined for now until
+ // we support a richer format for overrides and the block bindings API.
+ acc[ key ] = value === undefined ? '' : value;
+ return acc;
+ },
+ {}
+ ),
},
- } );
+ },
+ } );
},
canUserEditValue: () => true,
};
diff --git a/packages/editor/src/bindings/post-meta.js b/packages/editor/src/bindings/post-meta.js
index 572cd0b525a003..9198ac0fe41e1e 100644
--- a/packages/editor/src/bindings/post-meta.js
+++ b/packages/editor/src/bindings/post-meta.js
@@ -9,26 +9,63 @@ import { store as coreDataStore } from '@wordpress/core-data';
import { store as editorStore } from '../store';
import { unlock } from '../lock-unlock';
-function getMetadata( registry, context, registeredFields ) {
- let metaFields = {};
- const type = registry.select( editorStore ).getCurrentPostType();
- const { getEditedEntityRecord } = registry.select( coreDataStore );
+/**
+ * Gets a list of post meta fields with their values and labels
+ * to be consumed in the needed callbacks.
+ * If the value is not available based on context, like in templates,
+ * it falls back to the default value, label, or key.
+ *
+ * @param {Object} select The select function from the data store.
+ * @param {Object} context The context provided.
+ * @return {Object} List of post meta fields with their value and label.
+ *
+ * @example
+ * ```js
+ * {
+ * field_1_key: {
+ * label: 'Field 1 Label',
+ * value: 'Field 1 Value',
+ * },
+ * field_2_key: {
+ * label: 'Field 2 Label',
+ * value: 'Field 2 Value',
+ * },
+ * ...
+ * }
+ * ```
+ */
+function getPostMetaFields( select, context ) {
+ const { getEditedEntityRecord } = select( coreDataStore );
+ const { getRegisteredPostMeta } = unlock( select( coreDataStore ) );
+ let entityMetaValues;
+ // Try to get the current entity meta values.
if ( context?.postType && context?.postId ) {
- metaFields = getEditedEntityRecord(
+ entityMetaValues = getEditedEntityRecord(
'postType',
context?.postType,
context?.postId
).meta;
- } else if ( type === 'wp_template' ) {
- // Populate the `metaFields` object with the default values.
- Object.entries( registeredFields || {} ).forEach(
- ( [ key, props ] ) => {
- if ( props.default ) {
- metaFields[ key ] = props.default;
- }
- }
- );
+ }
+
+ const registeredFields = getRegisteredPostMeta( context?.postType );
+ const metaFields = {};
+ Object.entries( registeredFields || {} ).forEach( ( [ key, props ] ) => {
+ // Don't include footnotes or private fields.
+ if ( key !== 'footnotes' && key.charAt( 0 ) !== '_' ) {
+ metaFields[ key ] = {
+ label: props.title || key,
+ value:
+ // When using the entity value, an empty string IS a valid value.
+ entityMetaValues?.[ key ] ??
+ // When using the default, an empty string IS NOT a valid value.
+ ( props.default || undefined ),
+ };
+ }
+ } );
+
+ if ( ! Object.keys( metaFields || {} ).length ) {
+ return null;
}
return metaFields;
@@ -36,34 +73,33 @@ function getMetadata( registry, context, registeredFields ) {
export default {
name: 'core/post-meta',
- getValues( { registry, context, bindings } ) {
- const { getRegisteredPostMeta } = unlock(
- registry.select( coreDataStore )
- );
- const registeredFields = getRegisteredPostMeta( context?.postType );
- const metaFields = getMetadata( registry, context, registeredFields );
+ getValues( { select, context, bindings } ) {
+ const metaFields = getPostMetaFields( select, context );
const newValues = {};
for ( const [ attributeName, source ] of Object.entries( bindings ) ) {
// Use the value, the field label, or the field key.
- const metaKey = source.args.key;
- newValues[ attributeName ] =
- metaFields?.[ metaKey ] ??
- registeredFields?.[ metaKey ]?.title ??
- metaKey;
+ const fieldKey = source.args.key;
+ const { value: fieldValue, label: fieldLabel } =
+ metaFields?.[ fieldKey ] || {};
+ newValues[ attributeName ] = fieldValue ?? fieldLabel ?? fieldKey;
}
return newValues;
},
- setValues( { registry, context, bindings } ) {
+ setValues( { dispatch, context, bindings } ) {
const newMeta = {};
Object.values( bindings ).forEach( ( { args, newValue } ) => {
newMeta[ args.key ] = newValue;
} );
- registry
- .dispatch( coreDataStore )
- .editEntityRecord( 'postType', context?.postType, context?.postId, {
+
+ dispatch( coreDataStore ).editEntityRecord(
+ 'postType',
+ context?.postType,
+ context?.postId,
+ {
meta: newMeta,
- } );
+ }
+ );
},
canUserEditValue( { select, context, args } ) {
// Lock editing in query loop.
@@ -79,14 +115,9 @@ export default {
return false;
}
- // Check that the custom field is not protected and available in the REST API.
+ const fieldValue = getPostMetaFields( select, context )?.[ args.key ]
+ ?.value;
// Empty string or `false` could be a valid value, so we need to check if the field value is undefined.
- const fieldValue = select( coreDataStore ).getEntityRecord(
- 'postType',
- postType,
- context?.postId
- )?.meta?.[ args.key ];
-
if ( fieldValue === undefined ) {
return false;
}
@@ -109,32 +140,7 @@ export default {
return true;
},
- getFieldsList( { registry, context } ) {
- const { getRegisteredPostMeta } = unlock(
- registry.select( coreDataStore )
- );
- const registeredFields = getRegisteredPostMeta( context?.postType );
- const metaFields = getMetadata( registry, context, registeredFields );
-
- if ( ! metaFields || ! Object.keys( metaFields ).length ) {
- return null;
- }
-
- return Object.fromEntries(
- Object.entries( metaFields )
- // Remove footnotes or private keys from the list of fields.
- .filter(
- ( [ key ] ) =>
- key !== 'footnotes' && key.charAt( 0 ) !== '_'
- )
- // Return object with label and value.
- .map( ( [ key, value ] ) => [
- key,
- {
- label: registeredFields?.[ key ]?.title || key,
- value,
- },
- ] )
- );
+ getFieldsList( { select, context } ) {
+ return getPostMetaFields( select, context );
},
};
diff --git a/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js b/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js
index fcf7adfa77635c..af0e9b30ae83b4 100644
--- a/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js
+++ b/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js
@@ -17,21 +17,20 @@ import { __, _x } from '@wordpress/i18n';
*/
import { store as editorStore } from '../../store';
import { unlock } from '../../lock-unlock';
+import usePostContentBlocks from '../provider/use-post-content-blocks';
function ContentOnlySettingsMenuItems( { clientId, onClose } ) {
+ const postContentBlocks = usePostContentBlocks();
const { entity, onNavigateToEntityRecord, canEditTemplates } = useSelect(
( select ) => {
const {
- getBlockEditingMode,
getBlockParentsByBlockName,
getSettings,
getBlockAttributes,
+ getBlockParents,
} = select( blockEditorStore );
- const contentOnly =
- getBlockEditingMode( clientId ) === 'contentOnly';
- if ( ! contentOnly ) {
- return {};
- }
+ const { getCurrentTemplateId, getRenderingMode } =
+ select( editorStore );
const patternParent = getBlockParentsByBlockName(
clientId,
'core/block',
@@ -45,19 +44,20 @@ function ContentOnlySettingsMenuItems( { clientId, onClose } ) {
'wp_block',
getBlockAttributes( patternParent ).ref
);
- } else {
- const { getCurrentTemplateId } = select( editorStore );
- const templateId = getCurrentTemplateId();
- const { getContentLockingParent } = unlock(
- select( blockEditorStore )
+ } else if (
+ getRenderingMode() === 'template-locked' &&
+ ! getBlockParents( clientId ).some( ( parent ) =>
+ postContentBlocks.includes( parent )
+ )
+ ) {
+ record = select( coreStore ).getEntityRecord(
+ 'postType',
+ 'wp_template',
+ getCurrentTemplateId()
);
- if ( ! getContentLockingParent( clientId ) && templateId ) {
- record = select( coreStore ).getEntityRecord(
- 'postType',
- 'wp_template',
- templateId
- );
- }
+ }
+ if ( ! record ) {
+ return {};
}
const _canEditTemplates = select( coreStore ).canUser( 'create', {
kind: 'postType',
@@ -70,7 +70,7 @@ function ContentOnlySettingsMenuItems( { clientId, onClose } ) {
getSettings().onNavigateToEntityRecord,
};
},
- [ clientId ]
+ [ clientId, postContentBlocks ]
);
if ( ! entity ) {
diff --git a/packages/editor/src/components/document-tools/index.js b/packages/editor/src/components/document-tools/index.js
index 54121652bbf131..6a8c20c8d70551 100644
--- a/packages/editor/src/components/document-tools/index.js
+++ b/packages/editor/src/components/document-tools/index.js
@@ -38,10 +38,8 @@ function DocumentTools( { className, disableBlockTools = false } ) {
listViewShortcut,
inserterSidebarToggleRef,
listViewToggleRef,
- hasFixedToolbar,
showIconLabels,
} = useSelect( ( select ) => {
- const { getSettings } = select( blockEditorStore );
const { get } = select( preferencesStore );
const {
isListViewOpened,
@@ -60,7 +58,6 @@ function DocumentTools( { className, disableBlockTools = false } ) {
),
inserterSidebarToggleRef: getInserterSidebarToggleRef(),
listViewToggleRef: getListViewToggleRef(),
- hasFixedToolbar: getSettings().hasFixedToolbar,
showIconLabels: get( 'core', 'showIconLabels' ),
isDistractionFree: get( 'core', 'distractionFree' ),
isVisualMode: getEditorMode() === 'visual',
@@ -137,7 +134,7 @@ function DocumentTools( { className, disableBlockTools = false } ) {
) }
{ ( isWideViewport || ! showIconLabels ) && (
<>
- { isLargeViewport && ! hasFixedToolbar && (
+ { isLargeViewport && (
{
const { get } = select( preferencesStore );
const { getEditorSettings, getPostTypeLabel } = select( editorStore );
const editorSettings = getEditorSettings();
const postTypeLabel = getPostTypeLabel();
+ const { isZoomOut: _isZoomOut } = unlock( select( blockEditorStore ) );
return {
mode: select( editorStore ).getEditorMode(),
@@ -94,8 +97,7 @@ export default function EditorInterface( {
showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
// translators: Default label for the Document in the Block Breadcrumb.
documentLabel: postTypeLabel || _x( 'Document', 'noun' ),
- blockEditorMode:
- select( blockEditorStore ).__unstableGetEditorMode(),
+ isZoomOut: _isZoomOut(),
};
}, [] );
const isLargeViewport = useViewportMatch( 'medium' );
@@ -206,7 +208,7 @@ export default function EditorInterface( {
isLargeViewport &&
showBlockBreadcrumbs &&
isRichEditingEnabled &&
- blockEditorMode !== 'zoom-out' &&
+ ! isZoomOut &&
mode === 'visual' && (
+
+ { __( 'Cancel' ) }
+
@@ -147,14 +157,6 @@ export function EntitiesSavedStatesExtensible( {
>
{ saveLabel }
-
- { __( 'Cancel' ) }
-
diff --git a/packages/editor/src/components/entities-saved-states/style.scss b/packages/editor/src/components/entities-saved-states/style.scss
index 981a0d92e5ff6b..e2c320678c322a 100644
--- a/packages/editor/src/components/entities-saved-states/style.scss
+++ b/packages/editor/src/components/entities-saved-states/style.scss
@@ -1,8 +1,8 @@
.entities-saved-states__panel-header {
box-sizing: border-box;
background: $white;
- padding-left: $grid-unit-10;
- padding-right: $grid-unit-10;
+ padding-left: $grid-unit-20;
+ padding-right: $grid-unit-20;
height: $header-height;
border-bottom: $border-width solid $gray-300;
}
diff --git a/packages/editor/src/components/header/index.js b/packages/editor/src/components/header/index.js
index fb034ba8bb8574..631643f26d4d5f 100644
--- a/packages/editor/src/components/header/index.js
+++ b/packages/editor/src/components/header/index.js
@@ -1,13 +1,13 @@
/**
* WordPress dependencies
*/
+import { store as blockEditorStore } from '@wordpress/block-editor';
import { useSelect } from '@wordpress/data';
import { useMediaQuery, useViewportMatch } from '@wordpress/compose';
import { __unstableMotion as motion } from '@wordpress/components';
import { store as preferencesStore } from '@wordpress/preferences';
import { useState } from '@wordpress/element';
import { PinnedItems } from '@wordpress/interface';
-import { store as blockEditorStore } from '@wordpress/block-editor';
/**
* Internal dependencies
@@ -53,39 +53,50 @@ function Header( {
const isLargeViewport = useViewportMatch( 'medium' );
const isTooNarrowForDocumentBar = useMediaQuery( '(max-width: 403px)' );
const {
+ postType,
isTextEditor,
isPublishSidebarOpened,
showIconLabels,
hasFixedToolbar,
+ hasBlockSelection,
isNestedEntity,
} = useSelect( ( select ) => {
const { get: getPreference } = select( preferencesStore );
const {
getEditorMode,
getEditorSettings,
+ getCurrentPostType,
isPublishSidebarOpened: _isPublishSidebarOpened,
} = select( editorStore );
- const { __unstableGetEditorMode } = select( blockEditorStore );
return {
+ postType: getCurrentPostType(),
isTextEditor: getEditorMode() === 'text',
isPublishSidebarOpened: _isPublishSidebarOpened(),
showIconLabels: getPreference( 'core', 'showIconLabels' ),
hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
+ hasBlockSelection:
+ !! select( blockEditorStore ).getBlockSelectionStart(),
isNestedEntity:
!! getEditorSettings().onNavigateToPreviousEntityRecord,
- isZoomedOutView: __unstableGetEditorMode() === 'zoom-out',
};
}, [] );
+ const canBeZoomedOut = [ 'post', 'page', 'wp_template' ].includes(
+ postType
+ );
+
const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] =
useState( true );
- const hasCenter = isBlockToolsCollapsed && ! isTooNarrowForDocumentBar;
+ const hasCenter =
+ ( ! hasBlockSelection || isBlockToolsCollapsed ) &&
+ ! isTooNarrowForDocumentBar;
const hasBackButton = useHasBackButton();
-
- // The edit-post-header classname is only kept for backward compatibilty
- // as some plugins might be relying on its presence.
+ /*
+ * The edit-post-header classname is only kept for backward compatability
+ * as some plugins might be relying on its presence.
+ */
return (
{ hasBackButton && (
@@ -127,13 +138,20 @@ function Header( {
className="editor-header__settings"
>
{ ! customSaveButton && ! isPublishSidebarOpened && (
- // This button isn't completely hidden by the publish sidebar.
- // We can't hide the whole toolbar when the publish sidebar is open because
- // we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node.
- // We track that DOM node to return focus to the PostPublishButtonOrToggle
- // when the publish sidebar has been closed.
+ /*
+ * This button isn't completely hidden by the publish sidebar.
+ * We can't hide the whole toolbar when the publish sidebar is open because
+ * we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node.
+ * We track that DOM node to return focus to the PostPublishButtonOrToggle
+ * when the publish sidebar has been closed.
+ */
) }
+
+ { canBeZoomedOut && isEditorIframed && isWideViewport && (
+
+ ) }
+
- { isEditorIframed && isWideViewport &&
}
-
{ ( isWideViewport || ! showIconLabels ) && (
) }
diff --git a/packages/editor/src/components/inserter-sidebar/index.js b/packages/editor/src/components/inserter-sidebar/index.js
index b98770b7afe8fa..5cace042fae58c 100644
--- a/packages/editor/src/components/inserter-sidebar/index.js
+++ b/packages/editor/src/components/inserter-sidebar/index.js
@@ -24,13 +24,13 @@ export default function InserterSidebar() {
const {
blockSectionRootClientId,
inserterSidebarToggleRef,
- insertionPoint,
+ inserter,
showMostUsedBlocks,
sidebarIsOpened,
} = useSelect( ( select ) => {
const {
getInserterSidebarToggleRef,
- getInsertionPoint,
+ getInserter,
isPublishSidebarOpened,
} = unlock( select( editorStore ) );
const {
@@ -52,7 +52,7 @@ export default function InserterSidebar() {
};
return {
inserterSidebarToggleRef: getInserterSidebarToggleRef(),
- insertionPoint: getInsertionPoint(),
+ inserter: getInserter(),
showMostUsedBlocks: get( 'core', 'mostUsedBlocks' ),
blockSectionRootClientId: getBlockSectionRootClientId(),
sidebarIsOpened: !! (
@@ -88,14 +88,11 @@ export default function InserterSidebar() {
showMostUsedBlocks={ showMostUsedBlocks }
showInserterHelpPanel
shouldFocusBlock={ isMobileViewport }
- rootClientId={
- blockSectionRootClientId ?? insertionPoint.rootClientId
- }
- __experimentalInsertionIndex={ insertionPoint.insertionIndex }
- onSelect={ insertionPoint.onSelect }
- __experimentalInitialTab={ insertionPoint.tab }
- __experimentalInitialCategory={ insertionPoint.category }
- __experimentalFilterValue={ insertionPoint.filterValue }
+ rootClientId={ blockSectionRootClientId }
+ onSelect={ inserter.onSelect }
+ __experimentalInitialTab={ inserter.tab }
+ __experimentalInitialCategory={ inserter.category }
+ __experimentalFilterValue={ inserter.filterValue }
onPatternCategorySelection={
sidebarIsOpened
? () => disableComplementaryArea( 'core' )
diff --git a/packages/editor/src/components/plugin-sidebar/index.js b/packages/editor/src/components/plugin-sidebar/index.js
index b9c0177e30fc42..56a954cadffb69 100644
--- a/packages/editor/src/components/plugin-sidebar/index.js
+++ b/packages/editor/src/components/plugin-sidebar/index.js
@@ -3,7 +3,6 @@
*/
import { useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
import { ComplementaryArea } from '@wordpress/interface';
/**
@@ -77,12 +76,9 @@ import { store as editorStore } from '../../store';
* ```
*/
export default function PluginSidebar( { className, ...props } ) {
- const { postTitle, shortcut } = useSelect( ( select ) => {
+ const { postTitle } = useSelect( ( select ) => {
return {
postTitle: select( editorStore ).getEditedPostAttribute( 'title' ),
- shortcut: select(
- keyboardShortcutsStore
- ).getShortcutRepresentation( 'core/editor/toggle-sidebar' ),
};
}, [] );
return (
@@ -91,7 +87,6 @@ export default function PluginSidebar( { className, ...props } ) {
className="editor-sidebar"
smallScreenTitle={ postTitle || __( '(no title)' ) }
scope="core"
- toggleShortcut={ shortcut }
{ ...props }
/>
);
diff --git a/packages/editor/src/components/post-publish-button/index.js b/packages/editor/src/components/post-publish-button/index.js
index 0460b27b616e81..71e18a4d6a9c82 100644
--- a/packages/editor/src/components/post-publish-button/index.js
+++ b/packages/editor/src/components/post-publish-button/index.js
@@ -2,7 +2,7 @@
* WordPress dependencies
*/
import { Button } from '@wordpress/components';
-import { Component, createRef } from '@wordpress/element';
+import { Component } from '@wordpress/element';
import { withSelect, withDispatch } from '@wordpress/data';
import { compose } from '@wordpress/compose';
@@ -17,7 +17,6 @@ const noop = () => {};
export class PostPublishButton extends Component {
constructor( props ) {
super( props );
- this.buttonNode = createRef();
this.createOnClick = this.createOnClick.bind( this );
this.closeEntitiesSavedStates =
@@ -28,21 +27,6 @@ export class PostPublishButton extends Component {
};
}
- componentDidMount() {
- if ( this.props.focusOnMount ) {
- // This timeout is necessary to make sure the `useEffect` hook of
- // `useFocusReturn` gets the correct element (the button that opens the
- // PostPublishPanel) otherwise it will get this button.
- this.timeoutID = setTimeout( () => {
- this.buttonNode.current.focus();
- }, 0 );
- }
- }
-
- componentWillUnmount() {
- clearTimeout( this.timeoutID );
- }
-
createOnClick( callback ) {
return ( ...args ) => {
const { hasNonPostEntityChanges, setEntitiesSavedStatesCallback } =
@@ -182,7 +166,6 @@ export class PostPublishButton extends Component {
return (
<>
{
+ this.cancelButtonNode.current.focus();
+ }, 0 );
+ }
+
+ componentWillUnmount() {
+ clearTimeout( this.timeoutID );
}
componentDidUpdate( prevProps ) {
@@ -85,15 +99,9 @@ export class PostPublishPanel extends Component {
/>
) : (
<>
-
+
) }
diff --git a/packages/editor/src/components/post-publish-panel/maybe-upload-media.js b/packages/editor/src/components/post-publish-panel/maybe-upload-media.js
index 8c8d757c583399..32ea69c425e0b5 100644
--- a/packages/editor/src/components/post-publish-panel/maybe-upload-media.js
+++ b/packages/editor/src/components/post-publish-panel/maybe-upload-media.js
@@ -98,8 +98,8 @@ function Image( { clientId, alt, url } ) {
animate={ { opacity: 1 } }
exit={ { opacity: 0, scale: 0 } }
style={ {
- width: '36px',
- height: '36px',
+ width: '32px',
+ height: '32px',
objectFit: 'cover',
borderRadius: '2px',
cursor: 'pointer',
@@ -256,7 +256,7 @@ export default function MaybeUploadMediaPanel() {
) : (
diff --git a/packages/editor/src/components/post-publish-panel/style.scss b/packages/editor/src/components/post-publish-panel/style.scss
index 9892cf5430f9a2..7b075717651781 100644
--- a/packages/editor/src/components/post-publish-panel/style.scss
+++ b/packages/editor/src/components/post-publish-panel/style.scss
@@ -68,12 +68,12 @@
}
.editor-post-publish-panel__header-publish-button {
- padding-right: $grid-unit-05;
+ padding-left: $grid-unit-05;
justify-content: center;
}
.editor-post-publish-panel__header-cancel-button {
- padding-left: $grid-unit-05;
+ padding-right: $grid-unit-05;
}
.editor-post-publish-panel__header-published {
diff --git a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
index 1dd75fffaa7b6a..b074159ac423d4 100644
--- a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
+++ b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
@@ -433,24 +433,24 @@ exports[`PostPublishPanel should render the pre-publish panel if post status is
class="editor-post-publish-panel__header"
>
@@ -783,24 +783,24 @@ exports[`PostPublishPanel should render the spinner if the post is being saved 1
class="editor-post-publish-panel__header"
>
diff --git a/packages/editor/src/components/preview-dropdown/index.js b/packages/editor/src/components/preview-dropdown/index.js
index ecc5bc610a3027..0fbb2beb62665e 100644
--- a/packages/editor/src/components/preview-dropdown/index.js
+++ b/packages/editor/src/components/preview-dropdown/index.js
@@ -26,7 +26,9 @@ import { ActionItem } from '@wordpress/interface';
* Internal dependencies
*/
import { store as editorStore } from '../../store';
+import { store as blockEditorStore } from '@wordpress/block-editor';
import PostPreviewButton from '../post-preview-button';
+import { unlock } from '../../lock-unlock';
export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
const { deviceType, homeUrl, isTemplate, isViewable, showIconLabels } =
@@ -44,6 +46,14 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
};
}, [] );
const { setDeviceType } = useDispatch( editorStore );
+ const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
+ const { resetZoomLevel } = unlock( useDispatch( blockEditorStore ) );
+
+ const handleDevicePreviewChange = ( newDeviceType ) => {
+ setDeviceType( newDeviceType );
+ __unstableSetEditorMode( 'edit' );
+ resetZoomLevel();
+ };
const isMobile = useViewportMatch( 'medium', '<' );
if ( isMobile ) {
@@ -113,7 +123,7 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
-
- { items.length > 1
- ? sprintf(
- // translators: %d: number of items to delete.
- _n(
- 'Delete %d item?',
- 'Delete %d items?',
- items.length
- ),
- items.length
- )
- : sprintf(
- // translators: %s: The template or template part's titles
- __( 'Delete "%s"?' ),
- getItemTitle( items[ 0 ] )
- ) }
-
-
-
- { __( 'Cancel' ) }
-
- {
- setIsBusy( true );
- await removeTemplates( items, {
- allowUndo: false,
- } );
- onActionPerformed?.( items );
- setIsBusy( false );
- closeModal?.();
- } }
- isBusy={ isBusy }
- disabled={ isBusy }
- accessibleWhenDisabled
- __next40pxDefaultSize
- >
- { __( 'Delete' ) }
-
-
-
- );
- },
-};
-
-export default deletePostAction;
diff --git a/packages/editor/src/dataviews/actions/reset-post.tsx b/packages/editor/src/dataviews/actions/reset-post.tsx
deleted file mode 100644
index d0b5521a34833d..00000000000000
--- a/packages/editor/src/dataviews/actions/reset-post.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { backup } from '@wordpress/icons';
-import { useDispatch } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-import { __, sprintf } from '@wordpress/i18n';
-import { store as noticesStore } from '@wordpress/notices';
-import { useState } from '@wordpress/element';
-import {
- Button,
- __experimentalText as Text,
- __experimentalHStack as HStack,
- __experimentalVStack as VStack,
-} from '@wordpress/components';
-import type { Action } from '@wordpress/dataviews';
-import type { StoreDescriptor } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { TEMPLATE_POST_TYPE, TEMPLATE_ORIGINS } from '../../store/constants';
-import { store as editorStore } from '../../store';
-import { unlock } from '../../lock-unlock';
-import type { Post, CoreDataError } from '../types';
-import { isTemplateOrTemplatePart, getItemTitle } from './utils';
-
-const resetPost: Action< Post > = {
- id: 'reset-post',
- label: __( 'Reset' ),
- isEligible: ( item ) => {
- return (
- isTemplateOrTemplatePart( item ) &&
- item?.source === TEMPLATE_ORIGINS.custom &&
- ( Boolean( item.type === 'wp_template' && item?.plugin ) ||
- item?.has_theme_file )
- );
- },
- icon: backup,
- supportsBulk: true,
- hideModalHeader: true,
- RenderModal: ( { items, closeModal, onActionPerformed } ) => {
- const [ isBusy, setIsBusy ] = useState( false );
- const { revertTemplate } = unlock(
- useDispatch( editorStore as StoreDescriptor )
- );
- const { saveEditedEntityRecord } = useDispatch( coreStore );
- const { createSuccessNotice, createErrorNotice } =
- useDispatch( noticesStore );
- const onConfirm = async () => {
- try {
- for ( const template of items ) {
- await revertTemplate( template, {
- allowUndo: false,
- } );
- await saveEditedEntityRecord(
- 'postType',
- template.type,
- template.id
- );
- }
- createSuccessNotice(
- items.length > 1
- ? sprintf(
- /* translators: The number of items. */
- __( '%s items reset.' ),
- items.length
- )
- : sprintf(
- /* translators: The template/part's name. */
- __( '"%s" reset.' ),
- getItemTitle( items[ 0 ] )
- ),
- {
- type: 'snackbar',
- id: 'revert-template-action',
- }
- );
- } catch ( error ) {
- let fallbackErrorMessage;
- if ( items[ 0 ].type === TEMPLATE_POST_TYPE ) {
- fallbackErrorMessage =
- items.length === 1
- ? __(
- 'An error occurred while reverting the template.'
- )
- : __(
- 'An error occurred while reverting the templates.'
- );
- } else {
- fallbackErrorMessage =
- items.length === 1
- ? __(
- 'An error occurred while reverting the template part.'
- )
- : __(
- 'An error occurred while reverting the template parts.'
- );
- }
-
- const typedError = error as CoreDataError;
- const errorMessage =
- typedError.message && typedError.code !== 'unknown_error'
- ? typedError.message
- : fallbackErrorMessage;
-
- createErrorNotice( errorMessage, { type: 'snackbar' } );
- }
- };
- return (
-
-
- { __( 'Reset to default and clear all customizations?' ) }
-
-
-
- { __( 'Cancel' ) }
-
- {
- setIsBusy( true );
- await onConfirm();
- onActionPerformed?.( items );
- setIsBusy( false );
- closeModal?.();
- } }
- isBusy={ isBusy }
- disabled={ isBusy }
- accessibleWhenDisabled
- >
- { __( 'Reset' ) }
-
-
-
- );
- },
-};
-
-export default resetPost;
diff --git a/packages/editor/src/dataviews/fields/index.ts b/packages/editor/src/dataviews/fields/index.ts
deleted file mode 100644
index b215172eaf7f02..00000000000000
--- a/packages/editor/src/dataviews/fields/index.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import type { Field } from '@wordpress/dataviews';
-
-/**
- * Internal dependencies
- */
-import type { BasePost } from '../types';
-import { getItemTitle } from '../actions/utils';
-
-export const titleField: Field< BasePost > = {
- type: 'text',
- id: 'title',
- label: __( 'Title' ),
- placeholder: __( 'No title' ),
- getValue: ( { item } ) => getItemTitle( item ),
-};
-
-export const orderField: Field< BasePost > = {
- type: 'integer',
- id: 'menu_order',
- label: __( 'Order' ),
- description: __( 'Determines the order of pages.' ),
-};
diff --git a/packages/editor/src/dataviews/store/private-actions.ts b/packages/editor/src/dataviews/store/private-actions.ts
index e685493641f3b8..10f2b9ce872d5a 100644
--- a/packages/editor/src/dataviews/store/private-actions.ts
+++ b/packages/editor/src/dataviews/store/private-actions.ts
@@ -8,11 +8,6 @@ import { doAction } from '@wordpress/hooks';
/**
* Internal dependencies
*/
-import duplicateTemplatePart from '../actions/duplicate-template-part';
-import resetPost from '../actions/reset-post';
-import trashPost from '../actions/trash-post';
-import renamePost from '../actions/rename-post';
-import restorePost from '../actions/restore-post';
import type { PostType } from '../types';
import { store as editorStore } from '../../store';
import { unlock } from '../../lock-unlock';
@@ -24,8 +19,13 @@ import {
reorderPage,
exportPattern,
permanentlyDeletePost,
+ restorePost,
+ trashPost,
+ renamePost,
+ resetPost,
+ deletePost,
} from '@wordpress/fields';
-import deletePost from '../actions/delete-post';
+import duplicateTemplatePart from '../actions/duplicate-template-part';
export function registerEntityAction< Item >(
kind: string,
@@ -117,8 +117,8 @@ export const registerPostTypeActions =
? reorderPage
: undefined,
postTypeConfig.slug === 'wp_block' ? exportPattern : undefined,
- resetPost,
restorePost,
+ resetPost,
deletePost,
trashPost,
permanentlyDeletePost,
diff --git a/packages/editor/src/hooks/pattern-overrides.js b/packages/editor/src/hooks/pattern-overrides.js
index 6f81f368351f38..8882856a89e0d9 100644
--- a/packages/editor/src/hooks/pattern-overrides.js
+++ b/packages/editor/src/hooks/pattern-overrides.js
@@ -6,7 +6,7 @@ import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
import { createHigherOrderComponent } from '@wordpress/compose';
import { useBlockEditingMode } from '@wordpress/block-editor';
import { useSelect } from '@wordpress/data';
-import { store as blocksStore } from '@wordpress/blocks';
+import { getBlockBindingsSource } from '@wordpress/blocks';
/**
* Internal dependencies
@@ -58,7 +58,6 @@ function ControlsWithStoreSubscription( props ) {
const blockEditingMode = useBlockEditingMode();
const { hasPatternOverridesSource, isEditingSyncedPattern } = useSelect(
( select ) => {
- const { getBlockBindingsSource } = unlock( select( blocksStore ) );
const { getCurrentPostType, getEditedPostAttribute } =
select( editorStore );
diff --git a/packages/editor/src/store/actions.js b/packages/editor/src/store/actions.js
index 59faa6b5b73624..fa720e1fc7d347 100644
--- a/packages/editor/src/store/actions.js
+++ b/packages/editor/src/store/actions.js
@@ -12,7 +12,11 @@ import {
import { store as noticesStore } from '@wordpress/notices';
import { store as coreStore } from '@wordpress/core-data';
import { store as blockEditorStore } from '@wordpress/block-editor';
-import { applyFilters } from '@wordpress/hooks';
+import {
+ applyFilters,
+ applyFiltersAsync,
+ doActionAsync,
+} from '@wordpress/hooks';
import { store as preferencesStore } from '@wordpress/preferences';
import { __ } from '@wordpress/i18n';
@@ -26,7 +30,7 @@ import {
getNotificationArgumentsForSaveFail,
getNotificationArgumentsForTrashFail,
} from './utils/notice-builder';
-
+import { unlock } from '../lock-unlock';
/**
* Returns an action generator used in signalling that editor has initialized with
* the specified post object and editor settings.
@@ -184,7 +188,7 @@ export const savePost =
}
const previousRecord = select.getCurrentPost();
- const edits = {
+ let edits = {
id: previousRecord.id,
...registry
.select( coreStore )
@@ -199,9 +203,9 @@ export const savePost =
let error = false;
try {
- error = await applyFilters(
- 'editor.__unstablePreSavePost',
- Promise.resolve( false ),
+ edits = await applyFiltersAsync(
+ 'editor.preSavePost',
+ edits,
options
);
} catch ( err ) {
@@ -236,14 +240,25 @@ export const savePost =
);
}
+ // Run the hook with legacy unstable name for backward compatibility
if ( ! error ) {
- await applyFilters(
- 'editor.__unstableSavePost',
- Promise.resolve(),
- options
- ).catch( ( err ) => {
+ try {
+ await applyFilters(
+ 'editor.__unstableSavePost',
+ Promise.resolve(),
+ options
+ );
+ } catch ( err ) {
error = err;
- } );
+ }
+ }
+
+ if ( ! error ) {
+ try {
+ await doActionAsync( 'editor.savePost', options );
+ } catch ( err ) {
+ error = err;
+ }
}
dispatch( { type: 'REQUEST_POST_UPDATE_FINISH', options } );
@@ -726,15 +741,32 @@ export function removeEditorPanel( panelName ) {
* use an object.
* @param {string} value.rootClientId The root client ID to insert at.
* @param {number} value.insertionIndex The index to insert at.
+ * @param {string} value.filterValue A query to filter the inserter results.
+ * @param {Function} value.onSelect A callback when an item is selected.
+ * @param {string} value.tab The tab to open in the inserter.
+ * @param {string} value.category The category to initialize in the inserter.
*
* @return {Object} Action object.
*/
-export function setIsInserterOpened( value ) {
- return {
- type: 'SET_IS_INSERTER_OPENED',
- value,
+export const setIsInserterOpened =
+ ( value ) =>
+ ( { dispatch, registry } ) => {
+ if (
+ typeof value === 'object' &&
+ value.hasOwnProperty( 'rootClientId' ) &&
+ value.hasOwnProperty( 'insertionIndex' )
+ ) {
+ unlock( registry.dispatch( blockEditorStore ) ).setInsertionPoint( {
+ rootClientId: value.rootClientId,
+ index: value.insertionIndex,
+ } );
+ }
+
+ dispatch( {
+ type: 'SET_IS_INSERTER_OPENED',
+ value,
+ } );
};
-}
/**
* Returns an action object used to open/close the list view.
diff --git a/packages/editor/src/store/private-selectors.js b/packages/editor/src/store/private-selectors.js
index 357a7344f631d4..9bc065436c10bb 100644
--- a/packages/editor/src/store/private-selectors.js
+++ b/packages/editor/src/store/private-selectors.js
@@ -37,13 +37,13 @@ const EMPTY_INSERTION_POINT = {
};
/**
- * Get the insertion point for the inserter.
+ * Get the inserter.
*
* @param {Object} state Global application state.
*
* @return {Object} The root client ID, index to insert at and starting filter value.
*/
-export const getInsertionPoint = createRegistrySelector( ( select ) =>
+export const getInserter = createRegistrySelector( ( select ) =>
createSelector(
( state ) => {
if ( typeof state.blockInserterPanel === 'object' ) {
diff --git a/packages/editor/src/store/test/actions.js b/packages/editor/src/store/test/actions.js
index fae30c6fc271ec..206c60a159d04f 100644
--- a/packages/editor/src/store/test/actions.js
+++ b/packages/editor/src/store/test/actions.js
@@ -576,4 +576,80 @@ describe( 'Editor actions', () => {
).toBe( true );
} );
} );
+
+ describe( 'setIsInserterOpened', () => {
+ it( 'should open and close the inserter', () => {
+ const registry = createRegistryWithStores();
+
+ registry.dispatch( editorStore ).setIsInserterOpened( true );
+
+ expect( registry.select( editorStore ).isInserterOpened() ).toBe(
+ true
+ );
+
+ registry.dispatch( editorStore ).setIsInserterOpened( false );
+
+ expect( registry.select( editorStore ).isInserterOpened() ).toBe(
+ false
+ );
+ } );
+
+ it( 'the list view should close when the inserter is opened', () => {
+ const registry = createRegistryWithStores();
+
+ registry.dispatch( editorStore ).setIsListViewOpened( true );
+ expect( registry.select( editorStore ).isListViewOpened() ).toBe(
+ true
+ );
+ expect( registry.select( editorStore ).isInserterOpened() ).toBe(
+ false
+ );
+
+ registry.dispatch( editorStore ).setIsInserterOpened( true );
+ expect( registry.select( editorStore ).isInserterOpened() ).toBe(
+ true
+ );
+ expect( registry.select( editorStore ).isListViewOpened() ).toBe(
+ false
+ );
+ } );
+ } );
+
+ describe( 'setIsListViewOpened', () => {
+ it( 'should open and close the list view', () => {
+ const registry = createRegistryWithStores();
+
+ registry.dispatch( editorStore ).setIsListViewOpened( true );
+
+ expect( registry.select( editorStore ).isListViewOpened() ).toBe(
+ true
+ );
+
+ registry.dispatch( editorStore ).setIsListViewOpened( false );
+
+ expect( registry.select( editorStore ).isListViewOpened() ).toBe(
+ false
+ );
+ } );
+
+ it( 'the inserter should close when the list view is opened', () => {
+ const registry = createRegistryWithStores();
+
+ registry.dispatch( editorStore ).setIsInserterOpened( true );
+ expect( registry.select( editorStore ).isInserterOpened() ).toBe(
+ true
+ );
+ expect( registry.select( editorStore ).isListViewOpened() ).toBe(
+ false
+ );
+
+ registry.dispatch( editorStore ).setIsListViewOpened( true );
+ expect( registry.select( editorStore ).isListViewOpened() ).toBe(
+ true
+ );
+ expect( registry.select( editorStore ).isInserterOpened() ).toBe(
+ false
+ );
+ } );
+ } );
} );
diff --git a/packages/editor/src/store/test/reducer.js b/packages/editor/src/store/test/reducer.js
index b4fd013c6b4d42..3971ad30c9de74 100644
--- a/packages/editor/src/store/test/reducer.js
+++ b/packages/editor/src/store/test/reducer.js
@@ -18,7 +18,6 @@ import {
blockInserterPanel,
listViewPanel,
} from '../reducer';
-import { setIsInserterOpened } from '../actions';
describe( 'state', () => {
describe( 'hasSameKeys()', () => {
@@ -298,15 +297,6 @@ describe( 'state', () => {
expect( blockInserterPanel( true, {} ) ).toBe( true );
} );
- it( 'should set the open state of the inserter panel', () => {
- expect(
- blockInserterPanel( false, setIsInserterOpened( true ) )
- ).toBe( true );
- expect(
- blockInserterPanel( true, setIsInserterOpened( false ) )
- ).toBe( false );
- } );
-
it( 'should close the inserter when opening the list view panel', () => {
expect(
blockInserterPanel( true, {
@@ -349,17 +339,5 @@ describe( 'state', () => {
} )
).toBe( false );
} );
-
- it( 'should close the list view when opening the inserter panel', () => {
- expect( listViewPanel( true, setIsInserterOpened( true ) ) ).toBe(
- false
- );
- } );
-
- it( 'should not change the state when closing the inserter panel', () => {
- expect( listViewPanel( true, setIsInserterOpened( false ) ) ).toBe(
- true
- );
- } );
} );
} );
diff --git a/packages/fields/README.md b/packages/fields/README.md
index 842fab02606af8..b4e45103600da6 100644
--- a/packages/fields/README.md
+++ b/packages/fields/README.md
@@ -14,6 +14,10 @@ npm install @wordpress/fields --save
+### deletePost
+
+Undocumented declaration.
+
### duplicatePattern
Undocumented declaration.
@@ -42,6 +46,10 @@ Undocumented declaration.
Undocumented declaration.
+### renamePost
+
+Undocumented declaration.
+
### reorderPage
Undocumented declaration.
@@ -50,10 +58,22 @@ Undocumented declaration.
Undocumented declaration.
+### resetPost
+
+Undocumented declaration.
+
+### restorePost
+
+Undocumented declaration.
+
### titleField
Undocumented declaration.
+### trashPost
+
+Undocumented declaration.
+
### viewPost
Undocumented declaration.
diff --git a/packages/fields/package.json b/packages/fields/package.json
index 2e417c9f4de570..3da913d1ee9ae5 100644
--- a/packages/fields/package.json
+++ b/packages/fields/package.json
@@ -9,7 +9,6 @@
"gutenberg",
"dataviews"
],
- "private": true,
"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/packages/fields/README.md",
"repository": {
"type": "git",
@@ -33,6 +32,7 @@
],
"dependencies": {
"@babel/runtime": "^7.16.0",
+ "@wordpress/api-fetch": "file:../api-fetch",
"@wordpress/blob": "file:../blob",
"@wordpress/blocks": "file:../blocks",
"@wordpress/components": "file:../components",
diff --git a/packages/fields/src/actions/base-post/index.ts b/packages/fields/src/actions/base-post/index.ts
deleted file mode 100644
index 7541be86c48b1f..00000000000000
--- a/packages/fields/src/actions/base-post/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export { default as viewPost } from './view-post';
-export { default as reorderPage } from './reorder-page';
-export { default as reorderPageNative } from './reorder-page.native';
-export { default as duplicatePost } from './duplicate-post';
-export { default as duplicatePostNative } from './duplicate-post.native';
diff --git a/packages/fields/src/actions/common/index.ts b/packages/fields/src/actions/common/index.ts
deleted file mode 100644
index 3590b2e270892e..00000000000000
--- a/packages/fields/src/actions/common/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as viewPostRevisions } from './view-post-revisions';
-export { default as permanentlyDeletePost } from './permanently-delete-post';
diff --git a/packages/fields/src/actions/delete-post.tsx b/packages/fields/src/actions/delete-post.tsx
new file mode 100644
index 00000000000000..c5ab866e12479e
--- /dev/null
+++ b/packages/fields/src/actions/delete-post.tsx
@@ -0,0 +1,203 @@
+/**
+ * WordPress dependencies
+ */
+import { trash } from '@wordpress/icons';
+import { __, _n, sprintf } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import {
+ Button,
+ __experimentalText as Text,
+ __experimentalHStack as HStack,
+ __experimentalVStack as VStack,
+} from '@wordpress/components';
+// @ts-ignore
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+import type { Action } from '@wordpress/dataviews';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import {
+ getItemTitle,
+ isTemplateOrTemplatePart,
+ isTemplateRemovable,
+} from './utils';
+import type { Pattern, Template, TemplatePart } from '../types';
+import type { NoticeSettings } from '../mutation';
+import { deletePostWithNotices } from '../mutation';
+import { unlock } from '../lock-unlock';
+
+const { PATTERN_TYPES } = unlock( patternsPrivateApis );
+
+// This action is used for templates, patterns and template parts.
+// Every other post type uses the similar `trashPostAction` which
+// moves the post to trash.
+const deletePostAction: Action< Template | TemplatePart | Pattern > = {
+ id: 'delete-post',
+ label: __( 'Delete' ),
+ isPrimary: true,
+ icon: trash,
+ isEligible( post ) {
+ if ( isTemplateOrTemplatePart( post ) ) {
+ return isTemplateRemovable( post );
+ }
+ // We can only remove user patterns.
+ return post.type === PATTERN_TYPES.user;
+ },
+ supportsBulk: true,
+ hideModalHeader: true,
+ RenderModal: ( { items, closeModal, onActionPerformed } ) => {
+ const [ isBusy, setIsBusy ] = useState( false );
+ const isResetting = items.every(
+ ( item ) => isTemplateOrTemplatePart( item ) && item?.has_theme_file
+ );
+ return (
+
+
+ { items.length > 1
+ ? sprintf(
+ // translators: %d: number of items to delete.
+ _n(
+ 'Delete %d item?',
+ 'Delete %d items?',
+ items.length
+ ),
+ items.length
+ )
+ : sprintf(
+ // translators: %s: The template or template part's titles
+ __( 'Delete "%s"?' ),
+ getItemTitle( items[ 0 ] )
+ ) }
+
+
+
+ { __( 'Cancel' ) }
+
+ {
+ setIsBusy( true );
+ const notice: NoticeSettings<
+ Template | TemplatePart | Pattern
+ > = {
+ success: {
+ messages: {
+ getMessage: ( item ) => {
+ return isResetting
+ ? sprintf(
+ /* translators: The template/part's name. */
+ __( '"%s" reset.' ),
+ decodeEntities(
+ getItemTitle( item )
+ )
+ )
+ : sprintf(
+ /* translators: The template/part's name. */
+ __( '"%s" deleted.' ),
+ decodeEntities(
+ getItemTitle( item )
+ )
+ );
+ },
+ getBatchMessage: () => {
+ return isResetting
+ ? __( 'Items reset.' )
+ : __( 'Items deleted.' );
+ },
+ },
+ },
+ error: {
+ messages: {
+ getMessage: ( error ) => {
+ if ( error.size === 1 ) {
+ return [ ...error ][ 0 ];
+ }
+ return isResetting
+ ? __(
+ 'An error occurred while reverting the item.'
+ )
+ : __(
+ 'An error occurred while deleting the item.'
+ );
+ },
+ getBatchMessage: ( errors ) => {
+ if ( errors.size === 0 ) {
+ return isResetting
+ ? __(
+ 'An error occurred while reverting the items.'
+ )
+ : __(
+ 'An error occurred while deleting the items.'
+ );
+ }
+
+ if ( errors.size === 1 ) {
+ return isResetting
+ ? sprintf(
+ /* translators: %s: an error message */
+ __(
+ 'An error occurred while reverting the items: %s'
+ ),
+ [ ...errors ][ 0 ]
+ )
+ : sprintf(
+ /* translators: %s: an error message */
+ __(
+ 'An error occurred while deleting the items: %s'
+ ),
+ [ ...errors ][ 0 ]
+ );
+ }
+
+ return isResetting
+ ? sprintf(
+ /* translators: %s: a list of comma separated error messages */
+ __(
+ 'Some errors occurred while reverting the items: %s'
+ ),
+ [ ...errors ].join(
+ ','
+ )
+ )
+ : sprintf(
+ /* translators: %s: a list of comma separated error messages */
+ __(
+ 'Some errors occurred while deleting the items: %s'
+ ),
+ [ ...errors ].join(
+ ','
+ )
+ );
+ },
+ },
+ },
+ };
+
+ await deletePostWithNotices( items, notice, {
+ onActionPerformed,
+ } );
+ setIsBusy( false );
+ closeModal?.();
+ } }
+ isBusy={ isBusy }
+ disabled={ isBusy }
+ accessibleWhenDisabled
+ __next40pxDefaultSize
+ >
+ { __( 'Delete' ) }
+
+
+
+ );
+ },
+};
+
+export default deletePostAction;
diff --git a/packages/fields/src/actions/pattern/duplicate-pattern.tsx b/packages/fields/src/actions/duplicate-pattern.tsx
similarity index 91%
rename from packages/fields/src/actions/pattern/duplicate-pattern.tsx
rename to packages/fields/src/actions/duplicate-pattern.tsx
index 7c71a271997f15..bf2820f951dbad 100644
--- a/packages/fields/src/actions/pattern/duplicate-pattern.tsx
+++ b/packages/fields/src/actions/duplicate-pattern.tsx
@@ -9,8 +9,8 @@ import type { Action } from '@wordpress/dataviews';
/**
* Internal dependencies
*/
-import { unlock } from '../../lock-unlock';
-import type { Pattern } from '../../types';
+import { unlock } from '../lock-unlock';
+import type { Pattern } from '../types';
// Patterns.
const { CreatePatternModalContents, useDuplicatePatternProps } =
diff --git a/packages/fields/src/actions/base-post/duplicate-post.native.tsx b/packages/fields/src/actions/duplicate-post.native.tsx
similarity index 100%
rename from packages/fields/src/actions/base-post/duplicate-post.native.tsx
rename to packages/fields/src/actions/duplicate-post.native.tsx
diff --git a/packages/fields/src/actions/base-post/duplicate-post.tsx b/packages/fields/src/actions/duplicate-post.tsx
similarity index 96%
rename from packages/fields/src/actions/base-post/duplicate-post.tsx
rename to packages/fields/src/actions/duplicate-post.tsx
index 0035a40c009342..d153073f4b6c12 100644
--- a/packages/fields/src/actions/base-post/duplicate-post.tsx
+++ b/packages/fields/src/actions/duplicate-post.tsx
@@ -18,9 +18,9 @@ import type { Action } from '@wordpress/dataviews';
/**
* Internal dependencies
*/
-import { titleField } from '../../fields';
-import type { BasePost, CoreDataError } from '../../types';
-import { getItemTitle } from '../utils';
+import { titleField } from '../fields';
+import type { BasePost, CoreDataError } from '../types';
+import { getItemTitle } from './utils';
const fields = [ titleField ];
const formDuplicateAction = {
diff --git a/packages/fields/src/actions/pattern/export-pattern.native.tsx b/packages/fields/src/actions/export-pattern.native.tsx
similarity index 100%
rename from packages/fields/src/actions/pattern/export-pattern.native.tsx
rename to packages/fields/src/actions/export-pattern.native.tsx
diff --git a/packages/fields/src/actions/pattern/export-pattern.tsx b/packages/fields/src/actions/export-pattern.tsx
similarity index 95%
rename from packages/fields/src/actions/pattern/export-pattern.tsx
rename to packages/fields/src/actions/export-pattern.tsx
index b0f6c3335544c1..b6be83eeda84b4 100644
--- a/packages/fields/src/actions/pattern/export-pattern.tsx
+++ b/packages/fields/src/actions/export-pattern.tsx
@@ -15,8 +15,8 @@ import type { Action } from '@wordpress/dataviews';
/**
* Internal dependencies
*/
-import type { Pattern } from '../../types';
-import { getItemTitle } from '../utils';
+import type { Pattern } from '../types';
+import { getItemTitle } from './utils';
function getJsonFromItem( item: Pattern ) {
return JSON.stringify(
diff --git a/packages/fields/src/actions/index.ts b/packages/fields/src/actions/index.ts
index cf4fd6833f3fbe..08e22836e68fd1 100644
--- a/packages/fields/src/actions/index.ts
+++ b/packages/fields/src/actions/index.ts
@@ -1,3 +1,15 @@
-export * from './base-post';
-export * from './common';
-export * from './pattern';
+export { default as viewPost } from './view-post';
+export { default as reorderPage } from './reorder-page';
+export { default as reorderPageNative } from './reorder-page.native';
+export { default as duplicatePost } from './duplicate-post';
+export { default as duplicatePostNative } from './duplicate-post.native';
+export { default as renamePost } from './rename-post';
+export { default as resetPost } from './reset-post';
+export { default as duplicatePattern } from './duplicate-pattern';
+export { default as exportPattern } from './export-pattern';
+export { default as exportPatternNative } from './export-pattern.native';
+export { default as viewPostRevisions } from './view-post-revisions';
+export { default as permanentlyDeletePost } from './permanently-delete-post';
+export { default as restorePost } from './restore-post';
+export { default as trashPost } from './trash-post';
+export { default as deletePost } from './delete-post';
diff --git a/packages/fields/src/actions/pattern/index.ts b/packages/fields/src/actions/pattern/index.ts
deleted file mode 100644
index 827c2ce365c2c5..00000000000000
--- a/packages/fields/src/actions/pattern/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as duplicatePattern } from './duplicate-pattern';
-export { default as exportPattern } from './export-pattern';
-export { default as exportPatternNative } from './export-pattern.native';
diff --git a/packages/fields/src/actions/common/permanently-delete-post.tsx b/packages/fields/src/actions/permanently-delete-post.tsx
similarity index 96%
rename from packages/fields/src/actions/common/permanently-delete-post.tsx
rename to packages/fields/src/actions/permanently-delete-post.tsx
index e0c1de96871f1f..afbb84ae12c74c 100644
--- a/packages/fields/src/actions/common/permanently-delete-post.tsx
+++ b/packages/fields/src/actions/permanently-delete-post.tsx
@@ -10,8 +10,8 @@ import { trash } from '@wordpress/icons';
/**
* Internal dependencies
*/
-import { getItemTitle, isTemplateOrTemplatePart } from '../utils';
-import type { CoreDataError, PostWithPermissions } from '../../types';
+import { getItemTitle, isTemplateOrTemplatePart } from './utils';
+import type { CoreDataError, PostWithPermissions } from '../types';
const permanentlyDeletePost: Action< PostWithPermissions > = {
id: 'permanently-delete',
diff --git a/packages/editor/src/dataviews/actions/rename-post.tsx b/packages/fields/src/actions/rename-post.tsx
similarity index 97%
rename from packages/editor/src/dataviews/actions/rename-post.tsx
rename to packages/fields/src/actions/rename-post.tsx
index ef9da271111ea2..da1fd46669f0df 100644
--- a/packages/editor/src/dataviews/actions/rename-post.tsx
+++ b/packages/fields/src/actions/rename-post.tsx
@@ -19,17 +19,16 @@ import { store as noticesStore } from '@wordpress/notices';
/**
* Internal dependencies
*/
-import {
- TEMPLATE_ORIGINS,
- TEMPLATE_PART_POST_TYPE,
- TEMPLATE_POST_TYPE,
-} from '../../store/constants';
-import { unlock } from '../../lock-unlock';
+
+import { unlock } from '../lock-unlock';
import {
getItemTitle,
isTemplateRemovable,
isTemplate,
isTemplatePart,
+ TEMPLATE_ORIGINS,
+ TEMPLATE_PART_POST_TYPE,
+ TEMPLATE_POST_TYPE,
} from './utils';
import type { CoreDataError, PostWithPermissions } from '../types';
diff --git a/packages/fields/src/actions/base-post/reorder-page.native.tsx b/packages/fields/src/actions/reorder-page.native.tsx
similarity index 100%
rename from packages/fields/src/actions/base-post/reorder-page.native.tsx
rename to packages/fields/src/actions/reorder-page.native.tsx
diff --git a/packages/fields/src/actions/base-post/reorder-page.tsx b/packages/fields/src/actions/reorder-page.tsx
similarity index 96%
rename from packages/fields/src/actions/base-post/reorder-page.tsx
rename to packages/fields/src/actions/reorder-page.tsx
index 7f3bca59c471ce..1820884d8d8c73 100644
--- a/packages/fields/src/actions/base-post/reorder-page.tsx
+++ b/packages/fields/src/actions/reorder-page.tsx
@@ -17,8 +17,8 @@ import type { Action, RenderModalProps } from '@wordpress/dataviews';
/**
* Internal dependencies
*/
-import type { CoreDataError, BasePost } from '../../types';
-import { orderField } from '../../fields';
+import type { CoreDataError, BasePost } from '../types';
+import { orderField } from '../fields';
const fields = [ orderField ];
const formOrderAction = {
diff --git a/packages/fields/src/actions/reset-post.tsx b/packages/fields/src/actions/reset-post.tsx
new file mode 100644
index 00000000000000..105d7b283b8334
--- /dev/null
+++ b/packages/fields/src/actions/reset-post.tsx
@@ -0,0 +1,300 @@
+/**
+ * WordPress dependencies
+ */
+import { backup } from '@wordpress/icons';
+import { dispatch, select, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { __, sprintf } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import { useState } from '@wordpress/element';
+// @ts-ignore
+import { parse, __unstableSerializeAndClean } from '@wordpress/blocks';
+import {
+ Button,
+ __experimentalText as Text,
+ __experimentalHStack as HStack,
+ __experimentalVStack as VStack,
+} from '@wordpress/components';
+import type { Action } from '@wordpress/dataviews';
+import { addQueryArgs } from '@wordpress/url';
+import apiFetch from '@wordpress/api-fetch';
+
+/**
+ * Internal dependencies
+ */
+import {
+ getItemTitle,
+ isTemplateOrTemplatePart,
+ TEMPLATE_ORIGINS,
+ TEMPLATE_POST_TYPE,
+} from './utils';
+import type { CoreDataError, Template, TemplatePart } from '../types';
+
+const isTemplateRevertable = (
+ templateOrTemplatePart: Template | TemplatePart
+) => {
+ if ( ! templateOrTemplatePart ) {
+ return false;
+ }
+
+ return (
+ templateOrTemplatePart.source === TEMPLATE_ORIGINS.custom &&
+ ( Boolean( templateOrTemplatePart?.plugin ) ||
+ templateOrTemplatePart?.has_theme_file )
+ );
+};
+
+/**
+ * Copied - pasted from https://github.com/WordPress/gutenberg/blob/bf1462ad37d4637ebbf63270b9c244b23c69e2a8/packages/editor/src/store/private-actions.js#L233-L365
+ *
+ * @param {Object} template The template to revert.
+ * @param {Object} [options]
+ * @param {boolean} [options.allowUndo] Whether to allow the user to undo
+ * reverting the template. Default true.
+ */
+const revertTemplate = async (
+ template: TemplatePart | Template,
+ { allowUndo = true } = {}
+) => {
+ const noticeId = 'edit-site-template-reverted';
+ dispatch( noticesStore ).removeNotice( noticeId );
+ if ( ! isTemplateRevertable( template ) ) {
+ dispatch( noticesStore ).createErrorNotice(
+ __( 'This template is not revertable.' ),
+ {
+ type: 'snackbar',
+ }
+ );
+ return;
+ }
+
+ try {
+ const templateEntityConfig = select( coreStore ).getEntityConfig(
+ 'postType',
+ template.type
+ );
+
+ if ( ! templateEntityConfig ) {
+ dispatch( noticesStore ).createErrorNotice(
+ __(
+ 'The editor has encountered an unexpected error. Please reload.'
+ ),
+ { type: 'snackbar' }
+ );
+ return;
+ }
+
+ const fileTemplatePath = addQueryArgs(
+ `${ templateEntityConfig.baseURL }/${ template.id }`,
+ { context: 'edit', source: template.origin }
+ );
+
+ const fileTemplate = ( await apiFetch( {
+ path: fileTemplatePath,
+ } ) ) as any;
+ if ( ! fileTemplate ) {
+ dispatch( noticesStore ).createErrorNotice(
+ __(
+ 'The editor has encountered an unexpected error. Please reload.'
+ ),
+ { type: 'snackbar' }
+ );
+ return;
+ }
+
+ const serializeBlocks = ( { blocks: blocksForSerialization = [] } ) =>
+ __unstableSerializeAndClean( blocksForSerialization );
+
+ const edited = select( coreStore ).getEditedEntityRecord(
+ 'postType',
+ template.type,
+ template.id
+ ) as any;
+
+ // We are fixing up the undo level here to make sure we can undo
+ // the revert in the header toolbar correctly.
+ dispatch( coreStore ).editEntityRecord(
+ 'postType',
+ template.type,
+ template.id,
+ {
+ content: serializeBlocks, // Required to make the `undo` behave correctly.
+ blocks: edited.blocks, // Required to revert the blocks in the editor.
+ source: 'custom', // required to avoid turning the editor into a dirty state
+ },
+ {
+ undoIgnore: true, // Required to merge this edit with the last undo level.
+ }
+ );
+
+ const blocks = parse( fileTemplate?.content?.raw );
+
+ dispatch( coreStore ).editEntityRecord(
+ 'postType',
+ template.type,
+ fileTemplate.id,
+ {
+ content: serializeBlocks,
+ blocks,
+ source: 'theme',
+ }
+ );
+
+ if ( allowUndo ) {
+ const undoRevert = () => {
+ dispatch( coreStore ).editEntityRecord(
+ 'postType',
+ template.type,
+ edited.id,
+ {
+ content: serializeBlocks,
+ blocks: edited.blocks,
+ source: 'custom',
+ }
+ );
+ };
+
+ dispatch( noticesStore ).createSuccessNotice(
+ __( 'Template reset.' ),
+ {
+ type: 'snackbar',
+ id: noticeId,
+ actions: [
+ {
+ label: __( 'Undo' ),
+ onClick: undoRevert,
+ },
+ ],
+ }
+ );
+ }
+ } catch ( error: any ) {
+ const errorMessage =
+ error.message && error.code !== 'unknown_error'
+ ? error.message
+ : __( 'Template revert failed. Please reload.' );
+
+ dispatch( noticesStore ).createErrorNotice( errorMessage, {
+ type: 'snackbar',
+ } );
+ }
+};
+
+const resetPostAction: Action< Template | TemplatePart > = {
+ id: 'reset-post',
+ label: __( 'Reset' ),
+ isEligible: ( item ) => {
+ return (
+ isTemplateOrTemplatePart( item ) &&
+ item?.source === TEMPLATE_ORIGINS.custom &&
+ ( Boolean( item.type === 'wp_template' && item?.plugin ) ||
+ item?.has_theme_file )
+ );
+ },
+ icon: backup,
+ supportsBulk: true,
+ hideModalHeader: true,
+ RenderModal: ( { items, closeModal, onActionPerformed } ) => {
+ const [ isBusy, setIsBusy ] = useState( false );
+
+ const { saveEditedEntityRecord } = useDispatch( coreStore );
+ const { createSuccessNotice, createErrorNotice } =
+ useDispatch( noticesStore );
+ const onConfirm = async () => {
+ try {
+ for ( const template of items ) {
+ await revertTemplate( template, {
+ allowUndo: false,
+ } );
+ await saveEditedEntityRecord(
+ 'postType',
+ template.type,
+ template.id
+ );
+ }
+ createSuccessNotice(
+ items.length > 1
+ ? sprintf(
+ /* translators: The number of items. */
+ __( '%s items reset.' ),
+ items.length
+ )
+ : sprintf(
+ /* translators: The template/part's name. */
+ __( '"%s" reset.' ),
+ getItemTitle( items[ 0 ] )
+ ),
+ {
+ type: 'snackbar',
+ id: 'revert-template-action',
+ }
+ );
+ } catch ( error ) {
+ let fallbackErrorMessage;
+ if ( items[ 0 ].type === TEMPLATE_POST_TYPE ) {
+ fallbackErrorMessage =
+ items.length === 1
+ ? __(
+ 'An error occurred while reverting the template.'
+ )
+ : __(
+ 'An error occurred while reverting the templates.'
+ );
+ } else {
+ fallbackErrorMessage =
+ items.length === 1
+ ? __(
+ 'An error occurred while reverting the template part.'
+ )
+ : __(
+ 'An error occurred while reverting the template parts.'
+ );
+ }
+
+ const typedError = error as CoreDataError;
+ const errorMessage =
+ typedError.message && typedError.code !== 'unknown_error'
+ ? typedError.message
+ : fallbackErrorMessage;
+
+ createErrorNotice( errorMessage, { type: 'snackbar' } );
+ }
+ };
+ return (
+
+
+ { __( 'Reset to default and clear all customizations?' ) }
+
+
+
+ { __( 'Cancel' ) }
+
+ {
+ setIsBusy( true );
+ await onConfirm();
+ onActionPerformed?.( items );
+ setIsBusy( false );
+ closeModal?.();
+ } }
+ isBusy={ isBusy }
+ disabled={ isBusy }
+ accessibleWhenDisabled
+ >
+ { __( 'Reset' ) }
+
+
+
+ );
+ },
+};
+
+export default resetPostAction;
diff --git a/packages/editor/src/dataviews/actions/restore-post.tsx b/packages/fields/src/actions/restore-post.tsx
similarity index 100%
rename from packages/editor/src/dataviews/actions/restore-post.tsx
rename to packages/fields/src/actions/restore-post.tsx
diff --git a/packages/editor/src/dataviews/actions/trash-post.tsx b/packages/fields/src/actions/trash-post.tsx
similarity index 100%
rename from packages/editor/src/dataviews/actions/trash-post.tsx
rename to packages/fields/src/actions/trash-post.tsx
diff --git a/packages/fields/src/actions/common/view-post-revisions.tsx b/packages/fields/src/actions/view-post-revisions.tsx
similarity index 96%
rename from packages/fields/src/actions/common/view-post-revisions.tsx
rename to packages/fields/src/actions/view-post-revisions.tsx
index 617a5263a707d6..875b925b94f070 100644
--- a/packages/fields/src/actions/common/view-post-revisions.tsx
+++ b/packages/fields/src/actions/view-post-revisions.tsx
@@ -8,7 +8,7 @@ import type { Action } from '@wordpress/dataviews';
/**
* Internal dependencies
*/
-import type { Post } from '../../types';
+import type { Post } from '../types';
const viewPostRevisions: Action< Post > = {
id: 'view-post-revisions',
diff --git a/packages/fields/src/actions/base-post/view-post.tsx b/packages/fields/src/actions/view-post.tsx
similarity index 92%
rename from packages/fields/src/actions/base-post/view-post.tsx
rename to packages/fields/src/actions/view-post.tsx
index 8c581877e473bb..187faffafb5d3c 100644
--- a/packages/fields/src/actions/base-post/view-post.tsx
+++ b/packages/fields/src/actions/view-post.tsx
@@ -8,7 +8,7 @@ import type { Action } from '@wordpress/dataviews';
/**
* Internal dependencies
*/
-import type { BasePost } from '../../types';
+import type { BasePost } from '../types';
const viewPost: Action< BasePost > = {
id: 'view-post',
diff --git a/packages/fields/src/index.native.ts b/packages/fields/src/index.native.ts
index e4d3134d72f847..33a26e3c2e6e27 100644
--- a/packages/fields/src/index.native.ts
+++ b/packages/fields/src/index.native.ts
@@ -1,2 +1,2 @@
-export * from './actions/base-post/duplicate-post.native';
-export * from './actions/base-post/reorder-page.native';
+export * from './actions/duplicate-post.native';
+export * from './actions/reorder-page.native';
diff --git a/packages/fields/src/mutation/index.ts b/packages/fields/src/mutation/index.ts
new file mode 100644
index 00000000000000..80e399d74e9479
--- /dev/null
+++ b/packages/fields/src/mutation/index.ts
@@ -0,0 +1,184 @@
+/**
+ * WordPress dependencies
+ */
+import { store as noticesStore } from '@wordpress/notices';
+import { store as coreStore } from '@wordpress/core-data';
+import { dispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import type { CoreDataError, Post } from '../types';
+
+const getErrorMessagesFromPromises = < T >(
+ allSettledResults: PromiseSettledResult< T >[]
+) => {
+ const errorMessages = new Set< string >();
+ // If there was at lease one failure.
+ if ( allSettledResults.length === 1 ) {
+ const typedError = allSettledResults[ 0 ] as {
+ reason?: CoreDataError;
+ };
+ if ( typedError.reason?.message ) {
+ errorMessages.add( typedError.reason.message );
+ }
+ } else {
+ const failedPromises = allSettledResults.filter(
+ ( { status } ) => status === 'rejected'
+ );
+ for ( const failedPromise of failedPromises ) {
+ const typedError = failedPromise as {
+ reason?: CoreDataError;
+ };
+ if ( typedError.reason?.message ) {
+ errorMessages.add( typedError.reason.message );
+ }
+ }
+ }
+ return errorMessages;
+};
+
+export type NoticeSettings< T extends Post > = {
+ success: {
+ id?: string;
+ type?: string;
+ messages: {
+ getMessage: ( posts: T ) => string;
+ getBatchMessage: ( posts: T[] ) => string;
+ };
+ };
+ error: {
+ id?: string;
+ type?: string;
+ messages: {
+ getMessage: ( errors: Set< string > ) => string;
+ getBatchMessage: ( errors: Set< string > ) => string;
+ };
+ };
+};
+
+export const deletePostWithNotices = async < T extends Post >(
+ posts: T[],
+ notice: NoticeSettings< T >,
+ callbacks: {
+ onActionPerformed?: ( posts: T[] ) => void;
+ onActionError?: () => void;
+ }
+) => {
+ const { createSuccessNotice, createErrorNotice } = dispatch( noticesStore );
+ const { deleteEntityRecord } = dispatch( coreStore );
+ const allSettledResults = await Promise.allSettled(
+ posts.map( ( post ) => {
+ return deleteEntityRecord(
+ 'postType',
+ post.type,
+ post.id,
+ { force: true },
+ { throwOnError: true }
+ );
+ } )
+ );
+ // If all the promises were fulfilled with success.
+ if ( allSettledResults.every( ( { status } ) => status === 'fulfilled' ) ) {
+ let successMessage;
+ if ( allSettledResults.length === 1 ) {
+ successMessage = notice.success.messages.getMessage( posts[ 0 ] );
+ } else {
+ successMessage = notice.success.messages.getBatchMessage( posts );
+ }
+ createSuccessNotice( successMessage, {
+ type: notice.success.type ?? 'snackbar',
+ id: notice.success.id,
+ } );
+ callbacks.onActionPerformed?.( posts );
+ } else {
+ const errorMessages = getErrorMessagesFromPromises( allSettledResults );
+ let errorMessage = '';
+ if ( allSettledResults.length === 1 ) {
+ errorMessage = notice.error.messages.getMessage( errorMessages );
+ } else {
+ errorMessage =
+ notice.error.messages.getBatchMessage( errorMessages );
+ }
+
+ createErrorNotice( errorMessage, {
+ type: notice.error.type ?? 'snackbar',
+ id: notice.error.id,
+ } );
+ callbacks.onActionError?.();
+ }
+};
+
+export const editPostWithNotices = async < T extends Post >(
+ postsWithUpdates: {
+ originalPost: T;
+ changes: Partial< T >;
+ }[],
+ notice: NoticeSettings< T >,
+ callbacks: {
+ onActionPerformed?: ( posts: T[] ) => void;
+ onActionError?: () => void;
+ }
+) => {
+ const { createSuccessNotice, createErrorNotice } = dispatch( noticesStore );
+ const { editEntityRecord, saveEditedEntityRecord } = dispatch( coreStore );
+ await Promise.allSettled(
+ postsWithUpdates.map( ( post ) => {
+ return editEntityRecord(
+ 'postType',
+ post.originalPost.type,
+ post.originalPost.id,
+ {
+ ...post.changes,
+ }
+ );
+ } )
+ );
+ const allSettledResults = await Promise.allSettled(
+ postsWithUpdates.map( ( post ) => {
+ return saveEditedEntityRecord(
+ 'postType',
+ post.originalPost.type,
+ post.originalPost.id,
+ {
+ throwOnError: true,
+ }
+ );
+ } )
+ );
+ // If all the promises were fulfilled with success.
+ if ( allSettledResults.every( ( { status } ) => status === 'fulfilled' ) ) {
+ let successMessage;
+ if ( allSettledResults.length === 1 ) {
+ successMessage = notice.success.messages.getMessage(
+ postsWithUpdates[ 0 ].originalPost
+ );
+ } else {
+ successMessage = notice.success.messages.getBatchMessage(
+ postsWithUpdates.map( ( post ) => post.originalPost )
+ );
+ }
+ createSuccessNotice( successMessage, {
+ type: notice.success.type ?? 'snackbar',
+ id: notice.success.id,
+ } );
+ callbacks.onActionPerformed?.(
+ postsWithUpdates.map( ( post ) => post.originalPost )
+ );
+ } else {
+ const errorMessages = getErrorMessagesFromPromises( allSettledResults );
+ let errorMessage = '';
+ if ( allSettledResults.length === 1 ) {
+ errorMessage = notice.error.messages.getMessage( errorMessages );
+ } else {
+ errorMessage =
+ notice.error.messages.getBatchMessage( errorMessages );
+ }
+
+ createErrorNotice( errorMessage, {
+ type: notice.error.type ?? 'snackbar',
+ id: notice.error.id,
+ } );
+ callbacks.onActionError?.();
+ }
+};
diff --git a/packages/fields/src/types.ts b/packages/fields/src/types.ts
index 664c2dd417201c..a5ed9596b07dfd 100644
--- a/packages/fields/src/types.ts
+++ b/packages/fields/src/types.ts
@@ -54,6 +54,7 @@ export interface TemplatePart extends CommonPost {
has_theme_file: boolean;
id: string;
area: string;
+ plugin?: string;
}
export interface Pattern extends CommonPost {
diff --git a/packages/fields/src/wordpress-editor.d.ts b/packages/fields/src/wordpress-editor.d.ts
deleted file mode 100644
index 915dacd5f05a9c..00000000000000
--- a/packages/fields/src/wordpress-editor.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-declare module '@wordpress/editor';
diff --git a/packages/fields/tsconfig.json b/packages/fields/tsconfig.json
index c55be59acf40f0..69dbd076d05747 100644
--- a/packages/fields/tsconfig.json
+++ b/packages/fields/tsconfig.json
@@ -7,6 +7,7 @@
"checkJs": false
},
"references": [
+ { "path": "../api-fetch" },
{ "path": "../components" },
{ "path": "../compose" },
{ "path": "../data" },
@@ -24,6 +25,5 @@
{ "path": "../hooks" },
{ "path": "../html-entities" }
],
- "include": [ "src" ],
- "exclude": [ "@wordpress/editor" ]
+ "include": [ "src" ]
}
diff --git a/packages/hooks/CHANGELOG.md b/packages/hooks/CHANGELOG.md
index 0e162b64513d26..060e061b5c2843 100644
--- a/packages/hooks/CHANGELOG.md
+++ b/packages/hooks/CHANGELOG.md
@@ -2,6 +2,10 @@
## Unreleased
+### New Features
+
+- added new `doActionAsync` and `applyFiltersAsync` functions to run hooks in async mode ([#64204](https://github.com/WordPress/gutenberg/pull/64204)).
+
## 4.8.0 (2024-09-19)
## 4.7.0 (2024-09-05)
diff --git a/packages/hooks/README.md b/packages/hooks/README.md
index 3e9897c79952cd..f80d2e63af37ba 100644
--- a/packages/hooks/README.md
+++ b/packages/hooks/README.md
@@ -41,7 +41,9 @@ One notable difference between the JS and PHP hooks API is that in the JS versio
- `removeAllActions( 'hookName' )`
- `removeAllFilters( 'hookName' )`
- `doAction( 'hookName', arg1, arg2, moreArgs, finalArg )`
+- `doActionAsync( 'hookName', arg1, arg2, moreArgs, finalArg )`
- `applyFilters( 'hookName', content, arg1, arg2, moreArgs, finalArg )`
+- `applyFiltersAsync( 'hookName', content, arg1, arg2, moreArgs, finalArg )`
- `doingAction( 'hookName' )`
- `doingFilter( 'hookName' )`
- `didAction( 'hookName' )`
diff --git a/packages/hooks/src/createCurrentHook.js b/packages/hooks/src/createCurrentHook.js
index 634901fe55f63a..3ada0322496004 100644
--- a/packages/hooks/src/createCurrentHook.js
+++ b/packages/hooks/src/createCurrentHook.js
@@ -11,11 +11,8 @@
function createCurrentHook( hooks, storeKey ) {
return function currentHook() {
const hooksStore = hooks[ storeKey ];
-
- return (
- hooksStore.__current[ hooksStore.__current.length - 1 ]?.name ??
- null
- );
+ const currentArray = Array.from( hooksStore.__current );
+ return currentArray.at( -1 )?.name ?? null;
};
}
diff --git a/packages/hooks/src/createDoingHook.js b/packages/hooks/src/createDoingHook.js
index 652ab06b4ba728..9fccf38171f332 100644
--- a/packages/hooks/src/createDoingHook.js
+++ b/packages/hooks/src/createDoingHook.js
@@ -24,13 +24,13 @@ function createDoingHook( hooks, storeKey ) {
// If the hookName was not passed, check for any current hook.
if ( 'undefined' === typeof hookName ) {
- return 'undefined' !== typeof hooksStore.__current[ 0 ];
+ return hooksStore.__current.size > 0;
}
- // Return the __current hook.
- return hooksStore.__current[ 0 ]
- ? hookName === hooksStore.__current[ 0 ].name
- : false;
+ // Find if the `hookName` hook is in `__current`.
+ return Array.from( hooksStore.__current ).some(
+ ( hook ) => hook.name === hookName
+ );
};
}
diff --git a/packages/hooks/src/createHooks.js b/packages/hooks/src/createHooks.js
index 361383a3a97fc9..1f9b1a8206b020 100644
--- a/packages/hooks/src/createHooks.js
+++ b/packages/hooks/src/createHooks.js
@@ -20,11 +20,11 @@ export class _Hooks {
constructor() {
/** @type {import('.').Store} actions */
this.actions = Object.create( null );
- this.actions.__current = [];
+ this.actions.__current = new Set();
/** @type {import('.').Store} filters */
this.filters = Object.create( null );
- this.filters.__current = [];
+ this.filters.__current = new Set();
this.addAction = createAddHook( this, 'actions' );
this.addFilter = createAddHook( this, 'filters' );
@@ -34,8 +34,10 @@ export class _Hooks {
this.hasFilter = createHasHook( this, 'filters' );
this.removeAllActions = createRemoveHook( this, 'actions', true );
this.removeAllFilters = createRemoveHook( this, 'filters', true );
- this.doAction = createRunHook( this, 'actions' );
- this.applyFilters = createRunHook( this, 'filters', true );
+ this.doAction = createRunHook( this, 'actions', false, false );
+ this.doActionAsync = createRunHook( this, 'actions', false, true );
+ this.applyFilters = createRunHook( this, 'filters', true, false );
+ this.applyFiltersAsync = createRunHook( this, 'filters', true, true );
this.currentAction = createCurrentHook( this, 'actions' );
this.currentFilter = createCurrentHook( this, 'filters' );
this.doingAction = createDoingHook( this, 'actions' );
diff --git a/packages/hooks/src/createRunHook.js b/packages/hooks/src/createRunHook.js
index c2bf6fd187ce08..f2a56dbdc0d717 100644
--- a/packages/hooks/src/createRunHook.js
+++ b/packages/hooks/src/createRunHook.js
@@ -3,15 +3,15 @@
* registered to a hook of the specified type, optionally returning the final
* value of the call chain.
*
- * @param {import('.').Hooks} hooks Hooks instance.
+ * @param {import('.').Hooks} hooks Hooks instance.
* @param {import('.').StoreKey} storeKey
- * @param {boolean} [returnFirstArg=false] Whether each hook callback is expected to
- * return its first argument.
+ * @param {boolean} returnFirstArg Whether each hook callback is expected to return its first argument.
+ * @param {boolean} async Whether the hook callback should be run asynchronously
*
* @return {(hookName:string, ...args: unknown[]) => undefined|unknown} Function that runs hook callbacks.
*/
-function createRunHook( hooks, storeKey, returnFirstArg = false ) {
- return function runHooks( hookName, ...args ) {
+function createRunHook( hooks, storeKey, returnFirstArg, async ) {
+ return function runHook( hookName, ...args ) {
const hooksStore = hooks[ storeKey ];
if ( ! hooksStore[ hookName ] ) {
@@ -42,26 +42,43 @@ function createRunHook( hooks, storeKey, returnFirstArg = false ) {
currentIndex: 0,
};
- hooksStore.__current.push( hookInfo );
-
- while ( hookInfo.currentIndex < handlers.length ) {
- const handler = handlers[ hookInfo.currentIndex ];
-
- const result = handler.callback.apply( null, args );
- if ( returnFirstArg ) {
- args[ 0 ] = result;
+ async function asyncRunner() {
+ try {
+ hooksStore.__current.add( hookInfo );
+ let result = returnFirstArg ? args[ 0 ] : undefined;
+ while ( hookInfo.currentIndex < handlers.length ) {
+ const handler = handlers[ hookInfo.currentIndex ];
+ result = await handler.callback.apply( null, args );
+ if ( returnFirstArg ) {
+ args[ 0 ] = result;
+ }
+ hookInfo.currentIndex++;
+ }
+ return returnFirstArg ? result : undefined;
+ } finally {
+ hooksStore.__current.delete( hookInfo );
}
-
- hookInfo.currentIndex++;
}
- hooksStore.__current.pop();
-
- if ( returnFirstArg ) {
- return args[ 0 ];
+ function syncRunner() {
+ try {
+ hooksStore.__current.add( hookInfo );
+ let result = returnFirstArg ? args[ 0 ] : undefined;
+ while ( hookInfo.currentIndex < handlers.length ) {
+ const handler = handlers[ hookInfo.currentIndex ];
+ result = handler.callback.apply( null, args );
+ if ( returnFirstArg ) {
+ args[ 0 ] = result;
+ }
+ hookInfo.currentIndex++;
+ }
+ return returnFirstArg ? result : undefined;
+ } finally {
+ hooksStore.__current.delete( hookInfo );
+ }
}
- return undefined;
+ return ( async ? asyncRunner : syncRunner )();
};
}
diff --git a/packages/hooks/src/index.js b/packages/hooks/src/index.js
index 653a9537145d91..1d13397e406c6b 100644
--- a/packages/hooks/src/index.js
+++ b/packages/hooks/src/index.js
@@ -25,7 +25,7 @@ import createHooks from './createHooks';
*/
/**
- * @typedef {Record & {__current: Current[]}} Store
+ * @typedef {Record & {__current: Set}} Store
*/
/**
@@ -48,7 +48,9 @@ const {
removeAllActions,
removeAllFilters,
doAction,
+ doActionAsync,
applyFilters,
+ applyFiltersAsync,
currentAction,
currentFilter,
doingAction,
@@ -70,7 +72,9 @@ export {
removeAllActions,
removeAllFilters,
doAction,
+ doActionAsync,
applyFilters,
+ applyFiltersAsync,
currentAction,
currentFilter,
doingAction,
diff --git a/packages/hooks/src/test/index.test.js b/packages/hooks/src/test/index.test.js
index 9b7eb3b8e0e223..5fdaf5fc7207a1 100644
--- a/packages/hooks/src/test/index.test.js
+++ b/packages/hooks/src/test/index.test.js
@@ -12,7 +12,9 @@ import {
removeAllActions,
removeAllFilters,
doAction,
+ doActionAsync,
applyFilters,
+ applyFiltersAsync,
currentAction,
currentFilter,
doingAction,
@@ -943,3 +945,151 @@ test( 'checking hasFilter with named callbacks and removeAllActions', () => {
expect( hasFilter( 'test.filter', 'my_callback' ) ).toBe( false );
expect( hasFilter( 'test.filter', 'my_second_callback' ) ).toBe( false );
} );
+
+describe( 'async filter', () => {
+ test( 'runs all registered handlers', async () => {
+ addFilter( 'test.async.filter', 'callback_plus1', ( value ) => {
+ return new Promise( ( r ) =>
+ setTimeout( () => r( value + 1 ), 10 )
+ );
+ } );
+ addFilter( 'test.async.filter', 'callback_times2', ( value ) => {
+ return new Promise( ( r ) =>
+ setTimeout( () => r( value * 2 ), 10 )
+ );
+ } );
+
+ expect( await applyFiltersAsync( 'test.async.filter', 2 ) ).toBe( 6 );
+ } );
+
+ test( 'aborts when handler throws an error', async () => {
+ const sqrt = jest.fn( async ( value ) => {
+ if ( value < 0 ) {
+ throw new Error( 'cannot pass negative value to sqrt' );
+ }
+ return Math.sqrt( value );
+ } );
+
+ const plus1 = jest.fn( async ( value ) => {
+ return value + 1;
+ } );
+
+ addFilter( 'test.async.filter', 'callback_sqrt', sqrt );
+ addFilter( 'test.async.filter', 'callback_plus1', plus1 );
+
+ await expect(
+ applyFiltersAsync( 'test.async.filter', -1 )
+ ).rejects.toThrow( 'cannot pass negative value to sqrt' );
+ expect( sqrt ).toHaveBeenCalledTimes( 1 );
+ expect( plus1 ).not.toHaveBeenCalled();
+ } );
+
+ test( 'is correctly tracked by doingFilter and didFilter', async () => {
+ addFilter( 'test.async.filter', 'callback_doing', async ( value ) => {
+ await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+ expect( doingFilter( 'test.async.filter' ) ).toBe( true );
+ return value;
+ } );
+
+ expect( doingFilter( 'test.async.filter' ) ).toBe( false );
+ expect( didFilter( 'test.async.filter' ) ).toBe( 0 );
+ await applyFiltersAsync( 'test.async.filter', 0 );
+ expect( doingFilter( 'test.async.filter' ) ).toBe( false );
+ expect( didFilter( 'test.async.filter' ) ).toBe( 1 );
+ } );
+
+ test( 'is correctly tracked when multiple filters run at once', async () => {
+ addFilter( 'test.async.filter1', 'callback_doing', async ( value ) => {
+ await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+ expect( doingFilter( 'test.async.filter1' ) ).toBe( true );
+ await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+ return value;
+ } );
+ addFilter( 'test.async.filter2', 'callback_doing', async ( value ) => {
+ await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+ expect( doingFilter( 'test.async.filter2' ) ).toBe( true );
+ await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+ return value;
+ } );
+
+ await Promise.all( [
+ applyFiltersAsync( 'test.async.filter1', 0 ),
+ applyFiltersAsync( 'test.async.filter2', 0 ),
+ ] );
+ } );
+} );
+
+describe( 'async action', () => {
+ test( 'runs all registered handlers sequentially', async () => {
+ const outputs = [];
+ const action1 = async () => {
+ outputs.push( 1 );
+ await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+ outputs.push( 2 );
+ };
+
+ const action2 = async () => {
+ outputs.push( 3 );
+ await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+ outputs.push( 4 );
+ };
+
+ addAction( 'test.async.action', 'action1', action1 );
+ addAction( 'test.async.action', 'action2', action2 );
+
+ await doActionAsync( 'test.async.action' );
+ expect( outputs ).toEqual( [ 1, 2, 3, 4 ] );
+ } );
+
+ test( 'aborts when handler throws an error', async () => {
+ const outputs = [];
+ const action1 = async () => {
+ throw new Error( 'aborting' );
+ };
+
+ const action2 = async () => {
+ outputs.push( 3 );
+ await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+ outputs.push( 4 );
+ };
+
+ addAction( 'test.async.action', 'action1', action1 );
+ addAction( 'test.async.action', 'action2', action2 );
+
+ await expect( doActionAsync( 'test.async.action' ) ).rejects.toThrow(
+ 'aborting'
+ );
+ expect( outputs ).toEqual( [] );
+ } );
+
+ test( 'is correctly tracked by doingAction and didAction', async () => {
+ addAction( 'test.async.action', 'callback_doing', async () => {
+ await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+ expect( doingAction( 'test.async.action' ) ).toBe( true );
+ } );
+
+ expect( doingAction( 'test.async.action' ) ).toBe( false );
+ expect( didAction( 'test.async.action' ) ).toBe( 0 );
+ await doActionAsync( 'test.async.action', 0 );
+ expect( doingAction( 'test.async.action' ) ).toBe( false );
+ expect( didAction( 'test.async.action' ) ).toBe( 1 );
+ } );
+
+ test( 'is correctly tracked when multiple actions run at once', async () => {
+ addAction( 'test.async.action1', 'callback_doing', async () => {
+ await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+ expect( doingAction( 'test.async.action1' ) ).toBe( true );
+ await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+ } );
+ addAction( 'test.async.action2', 'callback_doing', async () => {
+ await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+ expect( doingAction( 'test.async.action2' ) ).toBe( true );
+ await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+ } );
+
+ await Promise.all( [
+ doActionAsync( 'test.async.action1', 0 ),
+ doActionAsync( 'test.async.action2', 0 ),
+ ] );
+ } );
+} );
diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md
index be047e2181d4a5..ddf850dd116819 100644
--- a/packages/icons/CHANGELOG.md
+++ b/packages/icons/CHANGELOG.md
@@ -6,7 +6,10 @@
### New Features
+- Add new `envelope` icon.
+
- Add new `bell` and `bell-unread` icons.
+- Add new `arrowUpLeft` and `arrowDownRight` icons.
## 10.7.0 (2024-09-05)
diff --git a/packages/icons/src/icon/stories/index.story.js b/packages/icons/src/icon/stories/index.story.js
index 8fda801f23884f..092434de43b4dc 100644
--- a/packages/icons/src/icon/stories/index.story.js
+++ b/packages/icons/src/icon/stories/index.story.js
@@ -47,7 +47,7 @@ const LibraryExample = () => {
const filteredIcons = filter.length
? Object.fromEntries(
Object.entries( availableIcons ).filter( ( [ name ] ) =>
- name.includes( filter )
+ name.toLowerCase().includes( filter.toLowerCase() )
)
)
: availableIcons;
diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js
index 9ab41bd3620279..586911ffc746b2 100644
--- a/packages/icons/src/index.js
+++ b/packages/icons/src/index.js
@@ -10,9 +10,11 @@ export { default as alignNone } from './library/align-none';
export { default as alignRight } from './library/align-right';
export { default as archive } from './library/archive';
export { default as arrowDown } from './library/arrow-down';
+export { default as arrowDownRight } from './library/arrow-down-right';
export { default as arrowLeft } from './library/arrow-left';
export { default as arrowRight } from './library/arrow-right';
export { default as arrowUp } from './library/arrow-up';
+export { default as arrowUpLeft } from './library/arrow-up-left';
export { default as atSymbol } from './library/at-symbol';
export { default as aspectRatio } from './library/aspect-ratio';
export { default as audio } from './library/audio';
@@ -79,6 +81,7 @@ export { default as drawerLeft } from './library/drawer-left';
export { default as drawerRight } from './library/drawer-right';
export { default as download } from './library/download';
export { default as edit } from './library/edit';
+export { default as envelope } from './library/envelope';
export { default as external } from './library/external';
export { default as file } from './library/file';
export { default as filter } from './library/filter';
diff --git a/packages/icons/src/library/arrow-down-right.js b/packages/icons/src/library/arrow-down-right.js
new file mode 100644
index 00000000000000..3755b63873cefc
--- /dev/null
+++ b/packages/icons/src/library/arrow-down-right.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const arrowDownRight = (
+
+
+);
+
+export default arrowDownRight;
diff --git a/packages/icons/src/library/arrow-up-left.js b/packages/icons/src/library/arrow-up-left.js
new file mode 100644
index 00000000000000..1b3686f6ec1e62
--- /dev/null
+++ b/packages/icons/src/library/arrow-up-left.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const arrowUpLeft = (
+
+
+);
+
+export default arrowUpLeft;
diff --git a/packages/icons/src/library/envelope.js b/packages/icons/src/library/envelope.js
new file mode 100644
index 00000000000000..45064b35785ec1
--- /dev/null
+++ b/packages/icons/src/library/envelope.js
@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const envelope = (
+
+
+);
+
+export default envelope;
diff --git a/packages/interactivity-router/README.md b/packages/interactivity-router/README.md
index 94b88e80886c90..efb52e59be2b5d 100644
--- a/packages/interactivity-router/README.md
+++ b/packages/interactivity-router/README.md
@@ -1,21 +1,32 @@
-# Interactivity Router
+# `@wordpress/interactivity-router`
-> **Note**
-> This package is a extension of the API shared at [Proposal: The Interactivity API ā A better developer experience in building interactive blocks](https://make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/). As part of an [Open Source project](https://developer.wordpress.org/block-editor/getting-started/faq/#the-gutenberg-project) we encourage participation in helping shape this API and the [discussions in GitHub](https://github.com/WordPress/gutenberg/discussions/categories/interactivity-api) is the best place to engage.
+The package `@wordpress/interactivity-router` enables loading content from other pages without a full page reload. Currently, the only supported mode is "region-based". Full "client-side navigation" is still in experimental phase.
-This package defines an Interactivity API store with the `core/router` namespace, exposing state and actions like `navigate` and `prefetch` to handle client-side navigations.
+The package defines an Interactivity API store with the `core/router` namespace, exposing state and 2 actions: `navigate` and `prefetch` to handle client-side navigation.
+
+The `@wordpress/interactivity-router` package was [introduced in WordPress Core in v6.5](https://make.wordpress.org/core/2024/02/19/merge-announcement-interactivity-api/). This means this package is already bundled in Core in any version of WordPress higher than v6.5.
+
+
## Usage
-The package is intended to be imported dynamically in the `view.js` files of interactive blocks.
+The package is intended to be imported dynamically in the `view.js` files of interactive blocks. This is done in in order to reduce the JS bundle size on the initial page load.
```js
+/* view.js */
+
import { store } from '@wordpress/interactivity';
-store( 'myblock', {
+// This is how you would typically use the navigate() action in your block.
+store( 'my-namespace/myblock', {
actions: {
- *navigate( e ) {
+ *goToPage( e ) {
e.preventDefault();
+
+ // We import the package dynamically to reduce the initial JS bundle size.
+ // Async actions are defined as generators so the import() must be called with `yield`.
const { actions } = yield import(
'@wordpress/interactivity-router'
);
@@ -25,52 +36,116 @@ store( 'myblock', {
} );
```
-## Frequently Asked Questions
+Now, you can call `actions.navigate()` in your block's `view.js` file to navigate to a different page or e.g. pass it to a `data-wp-on--click` attribute.
+
+When loaded, this package [adds the following state and actions](https://github.com/WordPress/gutenberg/blob/ed7d78652526270b63976d7a970dba46a2bfcbb0/packages/interactivity-router/src/index.ts#L212) to the `core/router` store:
+
+```js
+const { state, actions } = store( 'core/router', {
+ state: {
+ url: window.location.href,
+ navigation: {
+ hasStarted: false,
+ hasFinished: false,
+ texts: {
+ loading: '',
+ loaded: '',
+ },
+ message: '',
+ },
+ },
+ actions: {
+ *navigate(href, options) {...},
+ prefetch(url, options) {...},
+ }
+})
+```
+
+
+
+### Directives
+
+#### `data-wp-router-region`
+
+It defines a region that is updated on navigation. It requires a unique ID as the value and can only be used in root interactive elements, i.e., elements with `data-wp-interactive` that are not nested inside other elements with `data-wp-interactive`.
+
+Example:
+
+```html
+
+```
+
+### Actions
+
+#### `navigate`
+
+Navigates to the specified page.
-At this point, some of the questions you have about the Interactivity API may be:
+This function normalizes the passed `href`, fetches the page HTML if needed, and updates any interactive regions whose contents have changed in the new page. It also creates a new entry in the browser session history.
-### What is this?
+**Params**
-This is the base of a new standard to create interactive blocks. Read [the proposal](https://make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/) to learn more about this.
+```js
+navigate( href: string, options: NavigateOptions = {} )
+```
-### Can I use it?
+- `href`: The page `href`.
+- `options`: Options object.
+ - `force`: If `true`, it forces re-fetching the URL. `navigate()` always caches the page, so if the page has been navigated to before, it will be used. Default is `false`.
+ - `html`: HTML string to be used instead of fetching the requested URL.
+ - `replace`: If `true`, it replaces the current entry in the browser session history. Default is `false`.
+ - `timeout`: Time until the navigation is aborted, in milliseconds. Default is `10000`.
+ - `loadingAnimation`: Whether an animation should be shown while navigating. Default to `true`.
+ - `screenReaderAnnouncement`: Whether a message for screen readers should be announced while navigating. Default to `true`.
-You can test it, but it's still very experimental.
+#### `prefetch`
-### How do I get started?
+Prefetches the page for the passed URL. The page is cached and can be used for navigation.
-The best place to start with the Interactivity API is this [**Getting started guide**](https://github.com/WordPress/gutenberg/blob/trunk/packages/interactivity/docs/1-getting-started.md). There you'll will find a very quick start guide and the current requirements of the Interactivity API.
+The function normalizes the URL and stores internally the fetch promise, to avoid triggering a second fetch for an ongoing request.
-### Where can I ask questions?
+**Params**
-The [āInteractivity APIā category](https://github.com/WordPress/gutenberg/discussions/categories/interactivity-api) in Gutenberg repo discussions is the best place to ask questions about the Interactivity API.
+```js
+prefetch( url: string, options: PrefetchOptions = {} )
+```
-### Where can I share my feedback about the API?
+- `url`: The page `url`.
+- `options`: Options object.
-The [āInteractivity APIā category](https://github.com/WordPress/gutenberg/discussions/categories/interactivity-api) in Gutenberg repo discussions is also the best place to share your feedback about the Interactivity API.
+ - `force`: If `true`, forces fetching the URL again.
+ - `html`: HTML string to be used instead of fetching the requested URL.
+
+### State
+
+`state.url` is a reactive property synchronized with the current URL.
+Properties under `state.navigation` are meant for loading bar animations.
## Installation
Install the module:
```bash
-npm install @wordpress/interactivity --save
+npm install @wordpress/interactivity-router --save
```
-_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for such language features and APIs, you should include [the polyfill shipped in `@wordpress/babel-preset-default`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/babel-preset-default#polyfill) in your code._
-
-## Docs & Examples
+This step is only required if you use the Interactivity API outside WordPress.
-**[Interactivity API Documentation](https://github.com/WordPress/gutenberg/tree/trunk/packages/interactivity/docs)** is the best place to learn about this proposal. Although it's still in progress, some key pages are already available:
+Within WordPress, the package is already bundled in Core. To ensure it's enqueued, add `@wordpress/interactivity-router` to the dependency array of the script module. This process is often done automatically with tools like [`wp-scripts`](https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-scripts/).
-- **[Getting Started Guide](https://github.com/WordPress/gutenberg/blob/trunk/packages/interactivity/docs/1-getting-started.md)**: Follow this Getting Started guide to learn how to scaffold a new project and create your first interactive blocks.
-- **[API Reference](https://github.com/WordPress/gutenberg/blob/trunk/packages/interactivity/docs/2-api-reference.md)**: Check this page for technical detailed explanations and examples of the directives and the store.
+Furthermore, this package assumes your code will run in an **ES2015+** environment. If you're using an environment with limited or no support for such language features and APIs, you should include the polyfill shipped in [`@wordpress/babel-preset-default`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/babel-preset-default#polyfill) in your code.
-Here you have some more resources to learn/read more about the Interactivity API:
+## License
-- **[Interactivity API Discussions](https://github.com/WordPress/gutenberg/discussions/52882)**
-- [Proposal: The Interactivity API ā A better developer experience in building interactive blocks](https://make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/)
-- Developer Hours sessions ([Americas](https://www.youtube.com/watch?v=RXNoyP2ZiS8&t=664s) & [APAC/EMEA](https://www.youtube.com/watch?v=6ghbrhyAcvA))
-- [wpmovies.dev](http://wpmovies.dev/) demo and its [wp-movies-demo](https://github.com/WordPress/wp-movies-demo) repo
+Interactivity API proposal, as part of Gutenberg and the WordPress project is free software, and is released under the terms of the GNU General Public License version 2 or (at your option) any later version. See [LICENSE.md](https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md) for complete license.
-
+
diff --git a/packages/interactivity-router/src/index.ts b/packages/interactivity-router/src/index.ts
index 3bd44c7aebd71f..b2e8e2d4395dcd 100644
--- a/packages/interactivity-router/src/index.ts
+++ b/packages/interactivity-router/src/index.ts
@@ -221,11 +221,6 @@ interface Store {
navigation: {
hasStarted: boolean;
hasFinished: boolean;
- message: string;
- texts?: {
- loading?: string;
- loaded?: string;
- };
};
};
actions: {
@@ -240,7 +235,6 @@ export const { state, actions } = store< Store >( 'core/router', {
navigation: {
hasStarted: false,
hasFinished: false,
- message: '',
},
},
actions: {
@@ -403,10 +397,16 @@ function a11ySpeak( messageKey: keyof typeof navigationTexts ) {
} catch {}
} else {
// Fallback to localized strings from Interactivity API state.
+ // @todo This block is for Core < 6.7.0. Remove when support is dropped.
+
+ // @ts-expect-error
if ( state.navigation.texts?.loading ) {
+ // @ts-expect-error
navigationTexts.loading = state.navigation.texts.loading;
}
+ // @ts-expect-error
if ( state.navigation.texts?.loaded ) {
+ // @ts-expect-error
navigationTexts.loaded = state.navigation.texts.loaded;
}
}
@@ -414,19 +414,11 @@ function a11ySpeak( messageKey: keyof typeof navigationTexts ) {
const message = navigationTexts[ messageKey ];
- if ( globalThis.IS_GUTENBERG_PLUGIN ) {
- import( '@wordpress/a11y' ).then(
- ( { speak } ) => speak( message ),
- // Ignore failures to load the a11y module.
- () => {}
- );
- } else {
- state.navigation.message =
- // Announce that the page has been loaded. If the message is the
- // same, we use a no-break space similar to the @wordpress/a11y
- // package: https://github.com/WordPress/gutenberg/blob/c395242b8e6ee20f8b06c199e4fc2920d7018af1/packages/a11y/src/filter-message.js#L20-L26
- message + ( state.navigation.message === message ? '\u00A0' : '' );
- }
+ import( '@wordpress/a11y' ).then(
+ ( { speak } ) => speak( message ),
+ // Ignore failures to load the a11y module.
+ () => {}
+ );
}
// Add click and prefetch to all links.
diff --git a/packages/interactivity/CHANGELOG.md b/packages/interactivity/CHANGELOG.md
index 6989bcdc0c802c..42f311973709dd 100644
--- a/packages/interactivity/CHANGELOG.md
+++ b/packages/interactivity/CHANGELOG.md
@@ -6,6 +6,7 @@
### Enhancements
+- Improve TypeScript support for generators ([#64577](https://github.com/WordPress/gutenberg/pull/64577)).
- Refactor internal context proxies implementation ([#64713](https://github.com/WordPress/gutenberg/pull/64713)).
### Bug Fixes
diff --git a/packages/interactivity/src/directives.tsx b/packages/interactivity/src/directives.tsx
index cde39d830499a2..340880954683da 100644
--- a/packages/interactivity/src/directives.tsx
+++ b/packages/interactivity/src/directives.tsx
@@ -142,14 +142,19 @@ export default () => {
const defaultEntry = context.find(
( { suffix } ) => suffix === 'default'
);
- const inheritedValue = useContext( inheritedContext );
+ const { client: inheritedClient, server: inheritedServer } =
+ useContext( inheritedContext );
const ns = defaultEntry!.namespace;
- const currentValue = useRef( proxifyState( ns, {} ) );
+ const client = useRef( proxifyState( ns, {} ) );
+ const server = useRef( proxifyState( ns, {}, { readOnly: true } ) );
// No change should be made if `defaultEntry` does not exist.
const contextStack = useMemo( () => {
- const result = { ...inheritedValue };
+ const result = {
+ client: { ...inheritedClient },
+ server: { ...inheritedServer },
+ };
if ( defaultEntry ) {
const { namespace, value } = defaultEntry;
// Check that the value is a JSON object. Send a console warning if not.
@@ -159,17 +164,22 @@ export default () => {
);
}
deepMerge(
- currentValue.current,
+ client.current,
deepClone( value ) as object,
false
);
- result[ namespace ] = proxifyContext(
- currentValue.current,
- inheritedValue[ namespace ]
+ deepMerge( server.current, deepClone( value ) as object );
+ result.client[ namespace ] = proxifyContext(
+ client.current,
+ inheritedClient[ namespace ]
+ );
+ result.server[ namespace ] = proxifyContext(
+ server.current,
+ inheritedServer[ namespace ]
);
}
return result;
- }, [ defaultEntry, inheritedValue ] );
+ }, [ defaultEntry, inheritedClient, inheritedServer ] );
return createElement( Provider, { value: contextStack }, children );
},
@@ -563,17 +573,24 @@ export default () => {
suffix === 'default' ? 'item' : kebabToCamelCase( suffix );
const itemContext = proxifyContext(
proxifyState( namespace, {} ),
- inheritedValue[ namespace ]
+ inheritedValue.client[ namespace ]
);
const mergedContext = {
- ...inheritedValue,
- [ namespace ]: itemContext,
+ client: {
+ ...inheritedValue.client,
+ [ namespace ]: itemContext,
+ },
+ server: { ...inheritedValue.server },
};
// Set the item after proxifying the context.
- mergedContext[ namespace ][ itemProp ] = item;
+ mergedContext.client[ namespace ][ itemProp ] = item;
- const scope = { ...getScope(), context: mergedContext };
+ const scope = {
+ ...getScope(),
+ context: mergedContext.client,
+ serverContext: mergedContext.server,
+ };
const key = eachKey
? getEvaluate( { scope } )( eachKey[ 0 ] )
: item;
diff --git a/packages/interactivity/src/hooks.tsx b/packages/interactivity/src/hooks.tsx
index 215da8afef9b5b..6b55ec014aa799 100644
--- a/packages/interactivity/src/hooks.tsx
+++ b/packages/interactivity/src/hooks.tsx
@@ -93,7 +93,7 @@ interface DirectivesProps {
}
// Main context.
-const context = createContext< any >( {} );
+const context = createContext< any >( { client: {}, server: {} } );
// WordPress Directives.
const directiveCallbacks: Record< string, DirectiveCallback > = {};
@@ -190,9 +190,13 @@ const resolve = ( path: string, namespace: string ) => {
}
let resolvedStore = stores.get( namespace );
if ( typeof resolvedStore === 'undefined' ) {
- resolvedStore = store( namespace, undefined, {
- lock: universalUnlock,
- } );
+ resolvedStore = store(
+ namespace,
+ {},
+ {
+ lock: universalUnlock,
+ }
+ );
}
const current = {
...resolvedStore,
@@ -253,7 +257,9 @@ const Directives = ( {
// element ref, state and props.
const scope = useRef< Scope >( {} as Scope ).current;
scope.evaluate = useCallback( getEvaluate( { scope } ), [] );
- scope.context = useContext( context );
+ const { client, server } = useContext( context );
+ scope.context = client;
+ scope.serverContext = server;
/* eslint-disable react-hooks/rules-of-hooks */
scope.ref = previousScope?.ref || useRef( null );
/* eslint-enable react-hooks/rules-of-hooks */
diff --git a/packages/interactivity/src/index.ts b/packages/interactivity/src/index.ts
index 336c2a97226db7..9d013e4e744ed5 100644
--- a/packages/interactivity/src/index.ts
+++ b/packages/interactivity/src/index.ts
@@ -16,8 +16,8 @@ import { getNamespace } from './namespaces';
import { parseServerData, populateServerData } from './store';
import { proxifyState } from './proxies';
-export { store, getConfig } from './store';
-export { getContext, getElement } from './scopes';
+export { store, getConfig, getServerState } from './store';
+export { getContext, getServerContext, getElement } from './scopes';
export {
withScope,
useWatch,
diff --git a/packages/interactivity/src/proxies/state.ts b/packages/interactivity/src/proxies/state.ts
index ec49c4b27c4adb..c91d8f6ab90a5b 100644
--- a/packages/interactivity/src/proxies/state.ts
+++ b/packages/interactivity/src/proxies/state.ts
@@ -46,6 +46,8 @@ const proxyToProps: WeakMap<
export const hasPropSignal = ( proxy: object, key: string ) =>
proxyToProps.has( proxy ) && proxyToProps.get( proxy )!.has( key );
+const readOnlyProxies = new WeakSet();
+
/**
* Returns the {@link PropSignal | `PropSignal`} instance associated with the
* specified prop in the passed proxy.
@@ -77,8 +79,11 @@ const getPropSignal = (
if ( get ) {
prop.setGetter( get );
} else {
+ const readOnly = readOnlyProxies.has( proxy );
prop.setValue(
- shouldProxy( value ) ? proxifyState( ns, value ) : value
+ shouldProxy( value )
+ ? proxifyState( ns, value, { readOnly } )
+ : value
);
}
}
@@ -148,6 +153,9 @@ const stateHandlers: ProxyHandler< object > = {
value: unknown,
receiver: object
): boolean {
+ if ( readOnlyProxies.has( receiver ) ) {
+ return false;
+ }
setNamespace( getNamespaceFromProxy( receiver ) );
try {
return Reflect.set( target, key, value, receiver );
@@ -161,6 +169,10 @@ const stateHandlers: ProxyHandler< object > = {
key: string,
desc: PropertyDescriptor
): boolean {
+ if ( readOnlyProxies.has( getProxyFromObject( target )! ) ) {
+ return false;
+ }
+
const isNew = ! ( key in target );
const result = Reflect.defineProperty( target, key, desc );
@@ -199,6 +211,10 @@ const stateHandlers: ProxyHandler< object > = {
},
deleteProperty( target: object, key: string ): boolean {
+ if ( readOnlyProxies.has( getProxyFromObject( target )! ) ) {
+ return false;
+ }
+
const result = Reflect.deleteProperty( target, key );
if ( result ) {
@@ -230,8 +246,10 @@ const stateHandlers: ProxyHandler< object > = {
* Returns the proxy associated with the given state object, creating it if it
* does not exist.
*
- * @param namespace The namespace that will be associated to this proxy.
- * @param obj The object to proxify.
+ * @param namespace The namespace that will be associated to this proxy.
+ * @param obj The object to proxify.
+ * @param options Options.
+ * @param options.readOnly Read-only.
*
* @throws Error if the object cannot be proxified. Use {@link shouldProxy} to
* check if a proxy can be created for a specific object.
@@ -240,8 +258,15 @@ const stateHandlers: ProxyHandler< object > = {
*/
export const proxifyState = < T extends object >(
namespace: string,
- obj: T
-): T => createProxy( namespace, obj, stateHandlers ) as T;
+ obj: T,
+ options?: { readOnly?: boolean }
+): T => {
+ const proxy = createProxy( namespace, obj, stateHandlers ) as T;
+ if ( options?.readOnly ) {
+ readOnlyProxies.add( proxy );
+ }
+ return proxy;
+};
/**
* Reads the value of the specified property without subscribing to it.
diff --git a/packages/interactivity/src/proxies/test/state-proxy.ts b/packages/interactivity/src/proxies/test/state-proxy.ts
index 92500189fc8309..4b0d2b0a708c3a 100644
--- a/packages/interactivity/src/proxies/test/state-proxy.ts
+++ b/packages/interactivity/src/proxies/test/state-proxy.ts
@@ -9,7 +9,7 @@ import { effect } from '@preact/signals';
/**
* Internal dependencies
*/
-import { proxifyState, peek } from '../';
+import { proxifyState, peek, deepMerge } from '../';
import { setScope, resetScope, getContext, getElement } from '../../scopes';
import { setNamespace, resetNamespace } from '../../namespaces';
@@ -1265,5 +1265,202 @@ describe( 'Interactivity API', () => {
expect( x ).toBe( undefined );
} );
} );
+
+ describe( 'read-only', () => {
+ it( "should not allow modifying a prop's value", () => {
+ const readOnlyState = proxifyState(
+ 'test',
+ { prop: 'value', nested: { prop: 'value' } },
+ { readOnly: true }
+ );
+
+ expect( () => {
+ readOnlyState.prop = 'new value';
+ } ).toThrow();
+ expect( () => {
+ readOnlyState.nested.prop = 'new value';
+ } ).toThrow();
+ } );
+
+ it( 'should not allow modifying a prop descriptor', () => {
+ const readOnlyState = proxifyState(
+ 'test',
+ { prop: 'value', nested: { prop: 'value' } },
+ { readOnly: true }
+ );
+
+ expect( () => {
+ Object.defineProperty( readOnlyState, 'prop', {
+ get: () => 'value from getter',
+ writable: true,
+ enumerable: false,
+ } );
+ } ).toThrow();
+ expect( () => {
+ Object.defineProperty( readOnlyState.nested, 'prop', {
+ get: () => 'value from getter',
+ writable: true,
+ enumerable: false,
+ } );
+ } ).toThrow();
+ } );
+
+ it( 'should not allow adding new props', () => {
+ const readOnlyState = proxifyState< any >(
+ 'test',
+ { prop: 'value', nested: { prop: 'value' } },
+ { readOnly: true }
+ );
+
+ expect( () => {
+ readOnlyState.newProp = 'value';
+ } ).toThrow();
+ expect( () => {
+ readOnlyState.nested.newProp = 'value';
+ } ).toThrow();
+ } );
+
+ it( 'should not allow removing props', () => {
+ const readOnlyState = proxifyState< any >(
+ 'test',
+ { prop: 'value', nested: { prop: 'value' } },
+ { readOnly: true }
+ );
+
+ expect( () => {
+ delete readOnlyState.prop;
+ } ).toThrow();
+ expect( () => {
+ delete readOnlyState.nested.prop;
+ } ).toThrow();
+ } );
+
+ it( 'should not allow adding items to an array', () => {
+ const readOnlyState = proxifyState(
+ 'test',
+ { array: [ 1, 2, 3 ], nested: { array: [ 1, 2, 3 ] } },
+ { readOnly: true }
+ );
+
+ expect( () => readOnlyState.array.push( 4 ) ).toThrow();
+ expect( () => readOnlyState.nested.array.push( 4 ) ).toThrow();
+ } );
+
+ it( 'should not allow removing items from an array', () => {
+ const readOnlyState = proxifyState(
+ 'test',
+ { array: [ 1, 2, 3 ], nested: { array: [ 1, 2, 3 ] } },
+ { readOnly: true }
+ );
+
+ expect( () => readOnlyState.array.pop() ).toThrow();
+ expect( () => readOnlyState.nested.array.pop() ).toThrow();
+ } );
+
+ it( 'should allow subscribing to prop changes', () => {
+ const readOnlyState = proxifyState(
+ 'test',
+ {
+ prop: 'value',
+ nested: { prop: 'value' },
+ },
+ { readOnly: true }
+ );
+
+ const spy1 = jest.fn( () => readOnlyState.prop );
+ const spy2 = jest.fn( () => readOnlyState.nested.prop );
+
+ effect( spy1 );
+ effect( spy2 );
+ expect( spy1 ).toHaveBeenCalledTimes( 1 );
+ expect( spy2 ).toHaveBeenCalledTimes( 1 );
+ expect( spy1 ).toHaveLastReturnedWith( 'value' );
+ expect( spy2 ).toHaveLastReturnedWith( 'value' );
+
+ deepMerge( readOnlyState, { prop: 'new value' } );
+
+ expect( spy1 ).toHaveBeenCalledTimes( 2 );
+ expect( spy2 ).toHaveBeenCalledTimes( 1 );
+ expect( spy1 ).toHaveLastReturnedWith( 'new value' );
+ expect( spy2 ).toHaveLastReturnedWith( 'value' );
+
+ deepMerge( readOnlyState, { nested: { prop: 'new value' } } );
+
+ expect( spy1 ).toHaveBeenCalledTimes( 2 );
+ expect( spy2 ).toHaveBeenCalledTimes( 2 );
+ expect( spy1 ).toHaveLastReturnedWith( 'new value' );
+ expect( spy2 ).toHaveLastReturnedWith( 'new value' );
+ } );
+
+ it( 'should allow subscribing to new props', () => {
+ const readOnlyState = proxifyState< any >(
+ 'test',
+ {
+ prop: 'value',
+ nested: { prop: 'value' },
+ },
+ { readOnly: true }
+ );
+
+ const spy1 = jest.fn( () => readOnlyState.newProp );
+ const spy2 = jest.fn( () => readOnlyState.nested.newProp );
+
+ effect( spy1 );
+ effect( spy2 );
+ expect( spy1 ).toHaveBeenCalledTimes( 1 );
+ expect( spy2 ).toHaveBeenCalledTimes( 1 );
+ expect( spy1 ).toHaveLastReturnedWith( undefined );
+ expect( spy2 ).toHaveLastReturnedWith( undefined );
+
+ deepMerge( readOnlyState, { newProp: 'value' } );
+
+ expect( spy1 ).toHaveBeenCalledTimes( 2 );
+ expect( spy2 ).toHaveBeenCalledTimes( 1 );
+ expect( spy1 ).toHaveLastReturnedWith( 'value' );
+ expect( spy2 ).toHaveLastReturnedWith( undefined );
+
+ deepMerge( readOnlyState, { nested: { newProp: 'value' } } );
+
+ expect( spy1 ).toHaveBeenCalledTimes( 2 );
+ expect( spy2 ).toHaveBeenCalledTimes( 2 );
+ expect( spy1 ).toHaveLastReturnedWith( 'value' );
+ expect( spy2 ).toHaveLastReturnedWith( 'value' );
+ } );
+
+ it( 'should allow subscribing to array changes', () => {
+ const readOnlyState = proxifyState< any >(
+ 'test',
+ {
+ array: [ 1, 2, 3 ],
+ nested: { array: [ 1, 2, 3 ] },
+ },
+ { readOnly: true }
+ );
+
+ const spy1 = jest.fn( () => readOnlyState.array[ 0 ] );
+ const spy2 = jest.fn( () => readOnlyState.nested.array[ 0 ] );
+
+ effect( spy1 );
+ effect( spy2 );
+ expect( spy1 ).toHaveBeenCalledTimes( 1 );
+ expect( spy2 ).toHaveBeenCalledTimes( 1 );
+ expect( spy1 ).toHaveLastReturnedWith( 1 );
+ expect( spy2 ).toHaveLastReturnedWith( 1 );
+
+ deepMerge( readOnlyState, { array: [ 4, 5, 6 ] } );
+
+ expect( spy1 ).toHaveBeenCalledTimes( 2 );
+ expect( spy2 ).toHaveBeenCalledTimes( 1 );
+ expect( spy1 ).toHaveLastReturnedWith( 4 );
+ expect( spy2 ).toHaveLastReturnedWith( 1 );
+
+ deepMerge( readOnlyState, { nested: { array: [] } } );
+
+ expect( spy1 ).toHaveBeenCalledTimes( 2 );
+ expect( spy2 ).toHaveBeenCalledTimes( 2 );
+ expect( spy1 ).toHaveLastReturnedWith( 4 );
+ expect( spy2 ).toHaveLastReturnedWith( undefined );
+ } );
+ } );
} );
} );
diff --git a/packages/interactivity/src/scopes.ts b/packages/interactivity/src/scopes.ts
index 2e78755ec4bbe6..722305f6bee112 100644
--- a/packages/interactivity/src/scopes.ts
+++ b/packages/interactivity/src/scopes.ts
@@ -12,6 +12,7 @@ import type { Evaluate } from './hooks';
export interface Scope {
evaluate: Evaluate;
context: object;
+ serverContext: object;
ref: RefObject< HTMLElement >;
attributes: createElement.JSX.HTMLAttributes;
}
@@ -96,3 +97,46 @@ export const getElement = () => {
attributes: deepImmutable( attributes ),
} );
};
+
+/**
+ * Retrieves the part of the inherited context defined and updated from the
+ * server.
+ *
+ * The object returned is read-only, and includes the context defined in PHP
+ * with `wp_interactivity_data_wp_context()`, including the corresponding
+ * inherited properties. When `actions.navigate()` is called, this object is
+ * updated to reflect the changes in the new visited page, without affecting the
+ * context returned by `getContext()`. Directives can subscribe to those changes
+ * to update the context if needed.
+ *
+ * @example
+ * ```js
+ * store('...', {
+ * callbacks: {
+ * updateServerContext() {
+ * const context = getContext();
+ * const serverContext = getServerContext();
+ * // Override some property with the new value that came from the server.
+ * context.overridableProp = serverContext.overridableProp;
+ * },
+ * },
+ * });
+ * ```
+ *
+ * @param namespace Store namespace. By default, the namespace where the calling
+ * function exists is used.
+ * @return The server context content.
+ */
+export const getServerContext = < T extends object >(
+ namespace?: string
+): T => {
+ const scope = getScope();
+ if ( globalThis.SCRIPT_DEBUG ) {
+ if ( ! scope ) {
+ throw Error(
+ 'Cannot call `getServerContext()` when there is no scope. If you are using an async function, please consider using a generator instead. If you are using some sort of async callbacks, like `setTimeout`, please wrap the callback with `withScope(callback)`.'
+ );
+ }
+ }
+ return scope.serverContext[ namespace || getNamespace() ];
+};
diff --git a/packages/interactivity/src/store.ts b/packages/interactivity/src/store.ts
index c74764b902e194..b147e0f61163bf 100644
--- a/packages/interactivity/src/store.ts
+++ b/packages/interactivity/src/store.ts
@@ -12,6 +12,7 @@ export const stores = new Map();
const rawStores = new Map();
const storeLocks = new Map();
const storeConfigs = new Map();
+const serverStates = new Map();
/**
* Get the defined config for the store with the passed namespace.
@@ -22,6 +23,39 @@ const storeConfigs = new Map();
export const getConfig = ( namespace?: string ) =>
storeConfigs.get( namespace || getNamespace() ) || {};
+/**
+ * Get the part of the state defined and updated from the server.
+ *
+ * The object returned is read-only, and includes the state defined in PHP with
+ * `wp_interactivity_state()`. When using `actions.navigate()`, this object is
+ * updated to reflect the changes in its properites, without affecting the state
+ * returned by `store()`. Directives can subscribe to those changes to update
+ * the state if needed.
+ *
+ * @example
+ * ```js
+ * const { state } = store('myStore', {
+ * callbacks: {
+ * updateServerState() {
+ * const serverState = getServerState();
+ * // Override some property with the new value that came from the server.
+ * state.overridableProp = serverState.overridableProp;
+ * },
+ * },
+ * });
+ * ```
+ *
+ * @param namespace Store's namespace from which to retrieve the server state.
+ * @return The server state for the given namespace.
+ */
+export const getServerState = ( namespace?: string ) => {
+ const ns = namespace || getNamespace();
+ if ( ! serverStates.has( ns ) ) {
+ serverStates.set( ns, proxifyState( ns, {}, { readOnly: true } ) );
+ }
+ return serverStates.get( ns );
+};
+
interface StoreOptions {
/**
* Property to block/unblock private store namespaces.
@@ -50,6 +84,42 @@ interface StoreOptions {
lock?: boolean | string;
}
+type Prettify< T > = { [ K in keyof T ]: T[ K ] } & {};
+type DeepPartial< T > = T extends object
+ ? { [ P in keyof T ]?: DeepPartial< T[ P ] > }
+ : T;
+type DeepPartialState< T extends { state: object } > = Omit< T, 'state' > & {
+ state?: DeepPartial< T[ 'state' ] >;
+};
+type ConvertGeneratorToPromise< T > = T extends (
+ ...args: infer A
+) => Generator< any, infer R, any >
+ ? ( ...args: A ) => Promise< R >
+ : never;
+type ConvertGeneratorsToPromises< T > = {
+ [ K in keyof T ]: T[ K ] extends ( ...args: any[] ) => any
+ ? ConvertGeneratorToPromise< T[ K ] > extends never
+ ? T[ K ]
+ : ConvertGeneratorToPromise< T[ K ] >
+ : T[ K ] extends object
+ ? Prettify< ConvertGeneratorsToPromises< T[ K ] > >
+ : T[ K ];
+};
+type ConvertPromiseToGenerator< T > = T extends (
+ ...args: infer A
+) => Promise< infer R >
+ ? ( ...args: A ) => Generator< any, R, any >
+ : never;
+type ConvertPromisesToGenerators< T > = {
+ [ K in keyof T ]: T[ K ] extends ( ...args: any[] ) => any
+ ? ConvertPromiseToGenerator< T[ K ] > extends never
+ ? T[ K ]
+ : ConvertPromiseToGenerator< T[ K ] >
+ : T[ K ] extends object
+ ? Prettify< ConvertPromisesToGenerators< T[ K ] > >
+ : T[ K ];
+};
+
export const universalUnlock =
'I acknowledge that using a private store means my plugin will inevitably break on the next store release.';
@@ -98,17 +168,34 @@ export const universalUnlock =
*
* @return A reference to the namespace content.
*/
-export function store< S extends object = {} >(
+
+// Overload for when the types are inferred.
+export function store< T extends object >(
+ namespace: string,
+ storePart: T,
+ options?: StoreOptions
+): Prettify< ConvertGeneratorsToPromises< T > >;
+
+// Overload for when types are passed via generics and they contain state.
+export function store< T extends { state: object } >(
+ namespace: string,
+ storePart: ConvertPromisesToGenerators< DeepPartialState< T > >,
+ options?: StoreOptions
+): Prettify< ConvertGeneratorsToPromises< T > >;
+
+// Overload for when types are passed via generics and they don't contain state.
+export function store< T extends object >(
namespace: string,
- storePart?: S,
+ storePart: ConvertPromisesToGenerators< T >,
options?: StoreOptions
-): S;
+): Prettify< ConvertGeneratorsToPromises< T > >;
+// Overload for when types are divided into multiple parts.
export function store< T extends object >(
namespace: string,
- storePart?: T,
+ storePart: ConvertPromisesToGenerators< DeepPartial< T > >,
options?: StoreOptions
-): T;
+): Prettify< ConvertGeneratorsToPromises< T > >;
export function store(
namespace: string,
@@ -187,6 +274,7 @@ export const populateServerData = ( data?: {
Object.entries( data!.state ).forEach( ( [ namespace, state ] ) => {
const st = store< any >( namespace, {}, { lock: universalUnlock } );
deepMerge( st.state, state, false );
+ deepMerge( getServerState( namespace ), state );
} );
}
if ( isPlainObject( data?.config ) ) {
diff --git a/packages/interactivity/src/test/store.ts b/packages/interactivity/src/test/store.ts
new file mode 100644
index 00000000000000..1092001db03143
--- /dev/null
+++ b/packages/interactivity/src/test/store.ts
@@ -0,0 +1,286 @@
+/**
+ * Internal dependencies
+ */
+import { store } from '../store';
+
+describe( 'Interactivity API', () => {
+ describe( 'store', () => {
+ it( 'dummy test', () => {
+ expect( true ).toBe( true );
+ } );
+
+ describe( 'types', () => {
+ describe( 'the whole store can be inferred', () => {
+ // eslint-disable-next-line no-unused-expressions
+ async () => {
+ const myStore = store( 'test', {
+ state: {
+ clientValue: 1,
+ get derived(): number {
+ return myStore.state.clientValue;
+ },
+ },
+ actions: {
+ sync( n: number ) {
+ return n;
+ },
+ *async( n: number ) {
+ const n1: number =
+ yield myStore.actions.sync( n );
+ return myStore.state.derived + n1 + n;
+ },
+ },
+ } );
+
+ myStore.state.clientValue satisfies number;
+ myStore.state.derived satisfies number;
+
+ // @ts-expect-error
+ myStore.state.nonExistent satisfies number;
+ myStore.actions.sync( 1 ) satisfies number;
+ myStore.actions.async( 1 ) satisfies Promise< number >;
+ ( await myStore.actions.async( 1 ) ) satisfies number;
+
+ // @ts-expect-error
+ myStore.actions.nonExistent() satisfies {};
+ };
+ } );
+
+ describe( 'the whole store can be manually typed', () => {
+ // eslint-disable-next-line no-unused-expressions
+ async () => {
+ interface Store {
+ state: {
+ clientValue: number;
+ serverValue: number;
+ readonly derived: number;
+ };
+ actions: {
+ sync: ( n: number ) => number;
+ async: ( n: number ) => Promise< number >;
+ };
+ }
+
+ const myStore = store< Store >( 'test', {
+ state: {
+ clientValue: 1,
+ // @ts-expect-error
+ nonExistent: 2,
+ get derived(): number {
+ return myStore.state.serverValue;
+ },
+ },
+ actions: {
+ sync( n ) {
+ return n;
+ },
+ *async( n ): Generator< unknown, number, unknown > {
+ const n1 = myStore.actions.sync( n );
+ return myStore.state.derived + n1 + n;
+ },
+ },
+ } );
+
+ myStore.state.clientValue satisfies number;
+ myStore.state.serverValue satisfies number;
+ myStore.state.derived satisfies number;
+ // @ts-expect-error
+ myStore.state.nonExistent satisfies number;
+ myStore.actions.sync( 1 ) satisfies number;
+ myStore.actions.async( 1 ) satisfies Promise< number >;
+ ( await myStore.actions.async( 1 ) ) satisfies number;
+ // @ts-expect-error
+ myStore.actions.nonExistent();
+ };
+ } );
+
+ describe( 'the server state can be typed and the rest inferred', () => {
+ // eslint-disable-next-line no-unused-expressions
+ async () => {
+ type ServerStore = {
+ state: {
+ serverValue: number;
+ };
+ };
+
+ const clientStore = {
+ state: {
+ clientValue: 1,
+ get derived(): number {
+ return myStore.state.serverValue;
+ },
+ },
+ actions: {
+ sync( n: number ) {
+ return n;
+ },
+ *async(
+ n: number
+ ): Generator< unknown, number, number > {
+ const n1: number =
+ yield myStore.actions.sync( n );
+ return myStore.state.derived + n1 + n;
+ },
+ },
+ };
+
+ type Store = ServerStore & typeof clientStore;
+
+ const myStore = store< Store >( 'test', clientStore );
+
+ myStore.state.clientValue satisfies number;
+ myStore.state.serverValue satisfies number;
+ myStore.state.derived satisfies number;
+ // @ts-expect-error
+ myStore.state.nonExistent satisfies number;
+ myStore.actions.sync( 1 ) satisfies number;
+ myStore.actions.async( 1 ) satisfies Promise< number >;
+ ( await myStore.actions.async( 1 ) ) satisfies number;
+ // @ts-expect-error
+ myStore.actions.nonExistent();
+ };
+ } );
+
+ describe( 'the state can be casted and the rest inferred', () => {
+ // eslint-disable-next-line no-unused-expressions
+ async () => {
+ type State = {
+ clientValue: number;
+ serverValue: number;
+ derived: number;
+ };
+
+ const myStore = store( 'test', {
+ state: {
+ clientValue: 1,
+ get derived(): number {
+ return myStore.state.serverValue;
+ },
+ } as State,
+ actions: {
+ sync( n: number ) {
+ return n;
+ },
+ *async(
+ n: number
+ ): Generator< unknown, number, number > {
+ const n1: number =
+ yield myStore.actions.sync( n );
+ return myStore.state.derived + n1 + n;
+ },
+ },
+ } );
+
+ myStore.state.clientValue satisfies number;
+ myStore.state.serverValue satisfies number;
+ myStore.state.derived satisfies number;
+ // @ts-expect-error
+ myStore.state.nonExistent satisfies number;
+ myStore.actions.sync( 1 ) satisfies number;
+ myStore.actions.async( 1 ) satisfies Promise< number >;
+ ( await myStore.actions.async( 1 ) ) satisfies number;
+ // @ts-expect-error
+ myStore.actions.nonExistent() satisfies {};
+ };
+ } );
+
+ describe( 'the whole store can be manually typed even if doesnt contain state', () => {
+ // eslint-disable-next-line no-unused-expressions
+ async () => {
+ interface Store {
+ actions: {
+ sync: ( n: number ) => number;
+ async: ( n: number ) => Promise< number >;
+ };
+ callbacks: {
+ existent: number;
+ };
+ }
+
+ const myStore = store< Store >( 'test', {
+ actions: {
+ sync( n ) {
+ return n;
+ },
+ *async( n ): Generator< unknown, number, number > {
+ const n1: number =
+ yield myStore.actions.sync( n );
+ return n1 + n;
+ },
+ },
+ callbacks: {
+ existent: 1,
+ // @ts-expect-error
+ nonExistent: 1,
+ },
+ } );
+
+ // @ts-expect-error
+ myStore.state.nonExistent satisfies number;
+ myStore.actions.sync( 1 ) satisfies number;
+ myStore.actions.async( 1 ) satisfies Promise< number >;
+ ( await myStore.actions.async( 1 ) ) satisfies number;
+ myStore.callbacks.existent satisfies number;
+ // @ts-expect-error
+ myStore.callbacks.nonExistent satisfies number;
+ // @ts-expect-error
+ myStore.actions.nonExistent() satisfies {};
+ };
+ } );
+
+ describe( 'the store can be divided into multiple parts', () => {
+ // eslint-disable-next-line no-unused-expressions
+ async () => {
+ type ServerState = {
+ state: {
+ serverValue: number;
+ };
+ };
+
+ const firstStorePart = {
+ state: {
+ clientValue1: 1,
+ },
+ actions: {
+ incrementValue1( n = 1 ) {
+ myStore.state.clientValue1 += n;
+ },
+ },
+ };
+
+ type FirstStorePart = typeof firstStorePart;
+
+ const secondStorePart = {
+ state: {
+ clientValue2: 'test',
+ },
+ actions: {
+ *asyncAction() {
+ return (
+ myStore.state.clientValue1 +
+ myStore.state.serverValue
+ );
+ },
+ },
+ };
+
+ type Store = ServerState &
+ FirstStorePart &
+ typeof secondStorePart;
+
+ const myStore = store< Store >( 'test', firstStorePart );
+ store( 'test', secondStorePart );
+
+ myStore.state.clientValue1 satisfies number;
+ myStore.state.clientValue2 satisfies string;
+ myStore.actions.incrementValue1( 1 );
+ myStore.actions.asyncAction() satisfies Promise< number >;
+ ( await myStore.actions.asyncAction() ) satisfies number;
+
+ // @ts-expect-error
+ myStore.state.nonExistent satisfies {};
+ };
+ } );
+ } );
+ } );
+} );
diff --git a/packages/interactivity/tsconfig.test.json b/packages/interactivity/tsconfig.test.json
new file mode 100644
index 00000000000000..6a90abc2ba2210
--- /dev/null
+++ b/packages/interactivity/tsconfig.test.json
@@ -0,0 +1,13 @@
+{
+ "$schema": "https://json.schemastore.org/tsconfig.json",
+ "extends": "../../tsconfig.base.json",
+ "compilerOptions": {
+ "rootDir": "src",
+ "noEmit": true,
+ "emitDeclarationOnly": false,
+ "types": [ "jest" ]
+ },
+ "references": [ { "path": "./tsconfig.json" } ],
+ "files": [ "src/test/store.ts" ],
+ "exclude": []
+}
diff --git a/packages/interface/src/components/complementary-area-toggle/index.js b/packages/interface/src/components/complementary-area-toggle/index.js
index b6690b7df5fc5d..2f8d8dd413674b 100644
--- a/packages/interface/src/components/complementary-area-toggle/index.js
+++ b/packages/interface/src/components/complementary-area-toggle/index.js
@@ -10,6 +10,25 @@ import { useDispatch, useSelect } from '@wordpress/data';
import { store as interfaceStore } from '../../store';
import complementaryAreaContext from '../complementary-area-context';
+/**
+ * Whether the role supports checked state.
+ *
+ * @param {import('react').AriaRole} role Role.
+ * @return {boolean} Whether the role supports checked state.
+ * @see https://www.w3.org/TR/wai-aria-1.1/#aria-checked
+ */
+function roleSupportsCheckedState( role ) {
+ return [
+ 'checkbox',
+ 'option',
+ 'radio',
+ 'switch',
+ 'menuitemcheckbox',
+ 'menuitemradio',
+ 'treeitem',
+ ].includes( role );
+}
+
function ComplementaryAreaToggle( {
as = Button,
scope,
@@ -17,6 +36,7 @@ function ComplementaryAreaToggle( {
icon,
selectedIcon,
name,
+ shortcut,
...props
} ) {
const ComponentToUse = as;
@@ -26,12 +46,18 @@ function ComplementaryAreaToggle( {
identifier,
[ identifier, scope ]
);
+
const { enableComplementaryArea, disableComplementaryArea } =
useDispatch( interfaceStore );
+
return (
{
if ( isSelected ) {
disableComplementaryArea( scope );
@@ -39,6 +65,7 @@ function ComplementaryAreaToggle( {
enableComplementaryArea( scope, identifier );
}
} }
+ shortcut={ shortcut }
{ ...props }
/>
);
diff --git a/packages/interface/src/components/complementary-area/index.js b/packages/interface/src/components/complementary-area/index.js
index 363a6ee9dea76c..d9fa8e71acb23a 100644
--- a/packages/interface/src/components/complementary-area/index.js
+++ b/packages/interface/src/components/complementary-area/index.js
@@ -275,6 +275,7 @@ function ComplementaryArea( {
showTooltip={ ! showIconLabels }
variant={ showIconLabels ? 'tertiary' : undefined }
size="compact"
+ shortcut={ toggleShortcut }
/>
) }
diff --git a/packages/list-reusable-blocks/src/components/import-dropdown/index.js b/packages/list-reusable-blocks/src/components/import-dropdown/index.js
index d20ba9fcf10999..fdad08f80d213c 100644
--- a/packages/list-reusable-blocks/src/components/import-dropdown/index.js
+++ b/packages/list-reusable-blocks/src/components/import-dropdown/index.js
@@ -17,8 +17,8 @@ function ImportDropdown( { onUpload } ) {
contentClassName="list-reusable-blocks-import-dropdown__content"
renderToggle={ ( { isOpen, onToggle } ) => (
{ children }
@@ -66,8 +65,7 @@ export function DotTip( {
Got it
@@ -27,7 +27,7 @@ exports[`DotTip should render correctly 1`] = `
-
+
+
{ tabs.map( ( tab ) => {
return (
-
-
+
{ sections.length &&
sections.map( ( section ) => {
return (
-
@@ -151,7 +145,7 @@ export default function PreferencesModalTabs( { sections } ) {
size="small"
gap="6"
>
-
{ section.content }
-
+
);
} ) }
-
+
);
}
diff --git a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
index bceca4876654cf..e0d8592df4d8c3 100644
--- a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
+++ b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
@@ -191,8 +191,7 @@ export default function ReusableBlockConvertButton( {
/>
{
setIsModalOpen( false );
@@ -203,8 +202,7 @@ export default function ReusableBlockConvertButton( {
diff --git a/packages/rich-text/README.md b/packages/rich-text/README.md
index 3c3abc422fa5f9..033a4f2c747abe 100644
--- a/packages/rich-text/README.md
+++ b/packages/rich-text/README.md
@@ -430,7 +430,7 @@ Create an HTML string from a Rich Text value.
_Parameters_
-- _$1_ `Object`: Named argements.
+- _$1_ `Object`: Named arguments.
- _$1.value_ `RichTextValue`: Rich text value.
- _$1.preserveWhiteSpace_ `[boolean]`: Preserves newlines if true.
diff --git a/packages/rich-text/src/component/event-listeners/copy-handler.js b/packages/rich-text/src/component/event-listeners/copy-handler.js
index 1a92237bb4c5b4..0cc1594c3ab914 100644
--- a/packages/rich-text/src/component/event-listeners/copy-handler.js
+++ b/packages/rich-text/src/component/event-listeners/copy-handler.js
@@ -2,21 +2,18 @@
* Internal dependencies
*/
import { toHTMLString } from '../../to-html-string';
+import { isCollapsed } from '../../is-collapsed';
import { slice } from '../../slice';
-import { remove } from '../../remove';
import { getTextContent } from '../../get-text-content';
export default ( props ) => ( element ) => {
function onCopy( event ) {
- const { record, createRecord, handleChange } = props.current;
+ const { record } = props.current;
const { ownerDocument } = element;
- const { defaultView } = ownerDocument;
- const { anchorNode, focusNode, isCollapsed } =
- defaultView.getSelection();
- const containsSelection =
- element.contains( anchorNode ) && element.contains( focusNode );
-
- if ( isCollapsed || ! containsSelection ) {
+ if (
+ isCollapsed( record.current ) ||
+ ! element.contains( ownerDocument.activeElement )
+ ) {
return;
}
@@ -29,7 +26,7 @@ export default ( props ) => ( element ) => {
event.preventDefault();
if ( event.type === 'cut' ) {
- handleChange( remove( createRecord() ) );
+ ownerDocument.execCommand( 'delete' );
}
}
diff --git a/packages/rich-text/src/component/event-listeners/input-and-selection.js b/packages/rich-text/src/component/event-listeners/input-and-selection.js
index 11dcdb0d8ff9ab..621f1c59fab04e 100644
--- a/packages/rich-text/src/component/event-listeners/input-and-selection.js
+++ b/packages/rich-text/src/component/event-listeners/input-and-selection.js
@@ -114,13 +114,14 @@ export default ( props ) => ( element ) => {
return;
}
- const { anchorNode, focusNode } = defaultView.getSelection();
- const containsSelection =
- element.contains( anchorNode ) &&
- element.contains( focusNode ) &&
- ownerDocument.activeElement.contains( element );
-
- if ( ! containsSelection ) {
+ // Ensure the active element is the rich text element.
+ if ( ownerDocument.activeElement !== element ) {
+ // If it is not, we can stop listening for selection changes. We
+ // resume listening when the element is focused.
+ ownerDocument.removeEventListener(
+ 'selectionchange',
+ handleSelectionChange
+ );
return;
}
@@ -254,9 +255,5 @@ export default ( props ) => ( element ) => {
element.removeEventListener( 'compositionstart', onCompositionStart );
element.removeEventListener( 'compositionend', onCompositionEnd );
element.removeEventListener( 'focus', onFocus );
- ownerDocument.removeEventListener(
- 'selectionchange',
- handleSelectionChange
- );
};
};
diff --git a/packages/rich-text/src/create.js b/packages/rich-text/src/create.js
index 0b0a269509e7ec..898bdfa73b330e 100644
--- a/packages/rich-text/src/create.js
+++ b/packages/rich-text/src/create.js
@@ -431,7 +431,7 @@ export function removeReservedCharacters( string ) {
/**
* Creates a Rich Text value from a DOM element and range.
*
- * @param {Object} $1 Named argements.
+ * @param {Object} $1 Named arguments.
* @param {Element} [$1.element] Element to create value from.
* @param {Range} [$1.range] Range to create value from.
* @param {boolean} [$1.isEditableTree]
@@ -591,7 +591,7 @@ function createFromElement( { element, range, isEditableTree } ) {
/**
* Gets the attributes of an element in object shape.
*
- * @param {Object} $1 Named argements.
+ * @param {Object} $1 Named arguments.
* @param {Element} $1.element Element to get attributes from.
*
* @return {Object|void} Attribute object or `undefined` if the element has no
diff --git a/packages/rich-text/src/to-html-string.js b/packages/rich-text/src/to-html-string.js
index 35089003f0b3fb..f770dfdefc128a 100644
--- a/packages/rich-text/src/to-html-string.js
+++ b/packages/rich-text/src/to-html-string.js
@@ -19,7 +19,7 @@ import { toTree } from './to-tree';
/**
* Create an HTML string from a Rich Text value.
*
- * @param {Object} $1 Named argements.
+ * @param {Object} $1 Named arguments.
* @param {RichTextValue} $1.value Rich text value.
* @param {boolean} [$1.preserveWhiteSpace] Preserves newlines if true.
*
diff --git a/packages/widgets/src/blocks/legacy-widget/edit/index.js b/packages/widgets/src/blocks/legacy-widget/edit/index.js
index f371786c106d6f..c5ca43211e58e6 100644
--- a/packages/widgets/src/blocks/legacy-widget/edit/index.js
+++ b/packages/widgets/src/blocks/legacy-widget/edit/index.js
@@ -11,13 +11,11 @@ import {
BlockControls,
InspectorControls,
BlockIcon,
- store as blockEditorStore,
} from '@wordpress/block-editor';
import { Flex, FlexBlock, Spinner, Placeholder } from '@wordpress/components';
import { brush as brushIcon } from '@wordpress/icons';
import { __ } from '@wordpress/i18n';
import { useState, useCallback } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
import { useEntityRecord } from '@wordpress/core-data';
/**
@@ -102,11 +100,6 @@ function NotEmpty( {
const { record: widgetType, hasResolved: hasResolvedWidgetType } =
useEntityRecord( 'root', 'widgetType', widgetTypeId );
- const isNavigationMode = useSelect(
- ( select ) => select( blockEditorStore ).isNavigationMode(),
- []
- );
-
const setInstance = useCallback( ( nextInstance ) => {
setAttributes( { instance: nextInstance } );
}, [] );
@@ -130,8 +123,7 @@ function NotEmpty( {
);
}
- const mode =
- idBase && ( isNavigationMode || ! isSelected ) ? 'preview' : 'edit';
+ const mode = idBase && ! isSelected ? 'preview' : 'edit';
return (
<>
diff --git a/phpunit/blocks/render-post-template-test.php b/phpunit/blocks/render-post-template-test.php
index 6241f6f0605164..e929e459654fe7 100644
--- a/phpunit/blocks/render-post-template-test.php
+++ b/phpunit/blocks/render-post-template-test.php
@@ -122,7 +122,7 @@ public function test_rendering_post_template_with_main_query_loop_already_starte
global $wp_query, $wp_the_query;
// Query block with post template block.
- $content = '';
+ $content = '';
$content .= '';
$content .= '';
$content .= '';
diff --git a/phpunit/bootstrap.php b/phpunit/bootstrap.php
index 5d078193f0c3bf..36746d05669519 100644
--- a/phpunit/bootstrap.php
+++ b/phpunit/bootstrap.php
@@ -24,12 +24,6 @@
define( 'GUTENBERG_DIR_TESTDATA', __DIR__ . '/data/' );
define( 'GUTENBERG_DIR_TESTFIXTURES', __DIR__ . '/fixtures/' );
-// Pretend that these are Core unit tests. This is needed so that
-// wp_theme_has_theme_json() does not cache its return value between each test.
-if ( ! defined( 'WP_RUN_CORE_TESTS' ) ) {
- define( 'WP_RUN_CORE_TESTS', true );
-}
-
// Require composer dependencies.
require_once dirname( __DIR__ ) . '/vendor/autoload.php';
diff --git a/readme.txt b/readme.txt
index c5ef1231b183ee..4bd7ddc36d6e9b 100644
--- a/readme.txt
+++ b/readme.txt
@@ -55,7 +55,7 @@ To report a security issue, please visit the [WordPress HackerOne](https://hacke
= Do I have to use the Gutenberg plugin to get access to these features? =
-Not necessarily. Each version of WordPress after 5.0 has included features from the Gutenberg plugin, which are known collectively as the WordPress Editor . You are likely already benefitting from stable features!
+Not necessarily. Each version of WordPress after 5.0 has included features from the Gutenberg plugin, which are known collectively as the WordPress Editor . You are likely already benefiting from stable features!
But if you want cutting edge beta features, including more experimental items, you will need to use the plugin. You can read more here to help decide whether the plugin is right for you.
diff --git a/storybook/main.js b/storybook/main.js
index 66e951b26b1de6..f111e9f5d8cd38 100644
--- a/storybook/main.js
+++ b/storybook/main.js
@@ -41,6 +41,7 @@ module.exports = {
disableTelemetry: true,
},
stories,
+ staticDirs: [ './static' ],
addons: [
{
name: '@storybook/addon-docs',
diff --git a/storybook/manager-head.html b/storybook/manager-head.html
index ebf2d6891ba0bb..dcafe36caefa72 100644
--- a/storybook/manager-head.html
+++ b/storybook/manager-head.html
@@ -2,9 +2,13 @@
( function redirectIfStoryMoved() {
const PREVIOUSLY_EXPERIMENTAL_COMPONENTS = [
'alignmentmatrixcontrol',
+ 'borderboxcontrol',
+ 'bordercontrol',
+ 'boxcontrol',
'customselectcontrol-v2',
'dimensioncontrol',
'navigation',
+ 'navigator',
'progressbar',
'theme',
];
diff --git a/storybook/static/wp-logo@2x.png b/storybook/static/wp-logo@2x.png
new file mode 100644
index 00000000000000..a95cd961902b01
Binary files /dev/null and b/storybook/static/wp-logo@2x.png differ
diff --git a/storybook/theme.js b/storybook/theme.js
index c13de5b53d4f53..9e340119eb48f8 100644
--- a/storybook/theme.js
+++ b/storybook/theme.js
@@ -6,6 +6,37 @@ import { create } from '@storybook/theming/create';
export default create( {
base: 'light',
brandTitle: 'WordPress Components',
- brandImage:
- 'https://s.w.org/style/images/about/WordPress-logotype-wmark.png',
+ brandImage: './wp-logo@2x.png',
+
+ // Typography
+ fontBase:
+ '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
+ fontCode: 'monospace',
+
+ //
+ colorPrimary: '#3858E9',
+ colorSecondary: '#3858E9',
+
+ // UI
+ appBg: '#ffffff',
+ appContentBg: '#ffffff',
+ appPreviewBg: '#ffffff',
+ appBorderColor: '#DCDCDE',
+ appBorderRadius: 4,
+
+ // Text colors
+ textColor: '#10162F',
+ textInverseColor: '#ffffff',
+
+ // Toolbar default and active colors
+ barTextColor: '#9E9E9E',
+ barSelectedColor: '#3858E9',
+ barHoverColor: '#3858E9',
+ barBg: '#ffffff',
+
+ // Form colors
+ inputBg: '#ffffff',
+ inputBorder: '#10162F',
+ inputTextColor: '#10162F',
+ inputBorderRadius: 2,
} );
diff --git a/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-paste-link-to-formatted-text-1-chromium.txt b/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-paste-link-to-formatted-text-1-chromium.txt
new file mode 100644
index 00000000000000..73ed4090549910
--- /dev/null
+++ b/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-paste-link-to-formatted-text-1-chromium.txt
@@ -0,0 +1,3 @@
+
+tes t
+
\ No newline at end of file
diff --git a/test/e2e/specs/editor/various/allowed-patterns.spec.js b/test/e2e/specs/editor/various/allowed-patterns.spec.js
index e592f776c61dd8..83d44403d60ee2 100644
--- a/test/e2e/specs/editor/various/allowed-patterns.spec.js
+++ b/test/e2e/specs/editor/various/allowed-patterns.spec.js
@@ -14,10 +14,7 @@ test.describe( 'Allowed Patterns', () => {
);
} );
- test( 'should show all patterns when all blocks are allowed', async ( {
- admin,
- page,
- } ) => {
+ test( 'should show all patterns by default', async ( { admin, page } ) => {
await admin.createNewPost();
await page
.getByRole( 'toolbar', { name: 'Document tools' } )
@@ -57,7 +54,7 @@ test.describe( 'Allowed Patterns', () => {
);
} );
- test( 'should show only allowed patterns', async ( {
+ test( 'should hide patterns with only hidden blocks', async ( {
admin,
page,
} ) => {
diff --git a/test/e2e/specs/editor/various/block-bindings.spec.js b/test/e2e/specs/editor/various/block-bindings.spec.js
deleted file mode 100644
index c556c469698ebd..00000000000000
--- a/test/e2e/specs/editor/various/block-bindings.spec.js
+++ /dev/null
@@ -1,2415 +0,0 @@
-/**
- * External dependencies
- */
-const path = require( 'path' );
-/**
- * WordPress dependencies
- */
-const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
-
-test.describe( 'Block bindings', () => {
- let imagePlaceholderSrc;
- let imageCustomFieldSrc;
- test.beforeAll( async ( { requestUtils } ) => {
- await requestUtils.activateTheme( 'emptytheme' );
- await requestUtils.activatePlugin( 'gutenberg-test-block-bindings' );
- await requestUtils.deleteAllMedia();
- const placeholderMedia = await requestUtils.uploadMedia(
- path.join( './test/e2e/assets', '10x10_e2e_test_image_z9T8jK.png' )
- );
- imagePlaceholderSrc = placeholderMedia.source_url;
- } );
-
- test.afterEach( async ( { requestUtils } ) => {
- await requestUtils.deleteAllPosts();
- } );
-
- test.afterAll( async ( { requestUtils } ) => {
- await requestUtils.deleteAllMedia();
- await requestUtils.activateTheme( 'twentytwentyone' );
- await requestUtils.deactivatePlugin( 'gutenberg-test-block-bindings' );
- } );
-
- test.describe( 'Template context', () => {
- test.beforeEach( async ( { admin, editor } ) => {
- await admin.visitSiteEditor( {
- postId: 'emptytheme//index',
- postType: 'wp_template',
- canvas: 'edit',
- } );
- await editor.openDocumentSettingsSidebar();
- } );
-
- test.describe( 'Paragraph', () => {
- test( 'should show the key of the custom field in post meta', async ( {
- editor,
- } ) => {
- await editor.insertBlock( {
- name: 'core/paragraph',
- attributes: {
- content: 'paragraph default content',
- metadata: {
- bindings: {
- content: {
- source: 'core/post-meta',
- args: { key: 'text_custom_field' },
- },
- },
- },
- },
- } );
- const paragraphBlock = editor.canvas.getByRole( 'document', {
- name: 'Block: Paragraph',
- } );
- await expect( paragraphBlock ).toHaveText(
- 'text_custom_field'
- );
- } );
-
- test( 'should show the key of the custom field in server sources with key', async ( {
- editor,
- } ) => {
- await editor.insertBlock( {
- name: 'core/paragraph',
- attributes: {
- content: 'paragraph default content',
- metadata: {
- bindings: {
- content: {
- source: 'core/server-source',
- args: { key: 'text_custom_field' },
- },
- },
- },
- },
- } );
- const paragraphBlock = editor.canvas.getByRole( 'document', {
- name: 'Block: Paragraph',
- } );
- await expect( paragraphBlock ).toHaveText(
- 'text_custom_field'
- );
- } );
-
- test( 'should show the source label in server sources without key', async ( {
- editor,
- } ) => {
- await editor.insertBlock( {
- name: 'core/paragraph',
- attributes: {
- content: 'paragraph default content',
- metadata: {
- bindings: {
- content: {
- source: 'core/server-source',
- },
- },
- },
- },
- } );
- const paragraphBlock = editor.canvas.getByRole( 'document', {
- name: 'Block: Paragraph',
- } );
- await expect( paragraphBlock ).toHaveText( 'Server Source' );
- } );
-
- test( 'should lock the appropriate controls with a registered source', async ( {
- editor,
- page,
- } ) => {
- await editor.insertBlock( {
- name: 'core/paragraph',
- attributes: {
- content: 'paragraph default content',
- metadata: {
- bindings: {
- content: {
- source: 'core/post-meta',
- args: { key: 'text_custom_field' },
- },
- },
- },
- },
- } );
- const paragraphBlock = editor.canvas.getByRole( 'document', {
- name: 'Block: Paragraph',
- } );
- await paragraphBlock.click();
-
- // Alignment controls exist.
- await expect(
- page
- .getByRole( 'toolbar', { name: 'Block tools' } )
- .getByRole( 'button', { name: 'Align text' } )
- ).toBeVisible();
-
- // Format controls don't exist.
- await expect(
- page
- .getByRole( 'toolbar', { name: 'Block tools' } )
- .getByRole( 'button', {
- name: 'Bold',
- } )
- ).toBeHidden();
-
- // Paragraph is not editable.
- await expect( paragraphBlock ).toHaveAttribute(
- 'contenteditable',
- 'false'
- );
- } );
-
- test( 'should lock the appropriate controls when source is not defined', async ( {
- editor,
- page,
- } ) => {
- await editor.insertBlock( {
- name: 'core/paragraph',
- attributes: {
- content: 'paragraph default content',
- metadata: {
- bindings: {
- content: {
- source: 'plugin/undefined-source',
- args: { key: 'text_custom_field' },
- },
- },
- },
- },
- } );
- const paragraphBlock = editor.canvas.getByRole( 'document', {
- name: 'Block: Paragraph',
- } );
- await paragraphBlock.click();
-
- // Alignment controls exist.
- await expect(
- page
- .getByRole( 'toolbar', { name: 'Block tools' } )
- .getByRole( 'button', { name: 'Align text' } )
- ).toBeVisible();
-
- // Format controls don't exist.
- await expect(
- page
- .getByRole( 'toolbar', { name: 'Block tools' } )
- .getByRole( 'button', {
- name: 'Bold',
- } )
- ).toBeHidden();
-
- // Paragraph is not editable.
- await expect( paragraphBlock ).toHaveAttribute(
- 'contenteditable',
- 'false'
- );
- } );
- } );
-
- test.describe( 'Heading', () => {
- test( 'should show the key of the custom field', async ( {
- editor,
- } ) => {
- await editor.insertBlock( {
- name: 'core/heading',
- attributes: {
- content: 'heading default content',
- metadata: {
- bindings: {
- content: {
- source: 'core/post-meta',
- args: { key: 'text_custom_field' },
- },
- },
- },
- },
- } );
- const headingBlock = editor.canvas.getByRole( 'document', {
- name: 'Block: Heading',
- } );
- await expect( headingBlock ).toHaveText( 'text_custom_field' );
- } );
-
- test( 'should lock the appropriate controls with a registered source', async ( {
- editor,
- page,
- } ) => {
- await editor.insertBlock( {
- name: 'core/heading',
- attributes: {
- content: 'heading default content',
- metadata: {
- bindings: {
- content: {
- source: 'core/post-meta',
- args: { key: 'text_custom_field' },
- },
- },
- },
- },
- } );
- const headingBlock = editor.canvas.getByRole( 'document', {
- name: 'Block: Heading',
- } );
- await headingBlock.click();
-
- // Alignment controls exist.
- await expect(
- page
- .getByRole( 'toolbar', { name: 'Block tools' } )
- .getByRole( 'button', { name: 'Align text' } )
- ).toBeVisible();
-
- // Format controls don't exist.
- await expect(
- page
- .getByRole( 'toolbar', { name: 'Block tools' } )
- .getByRole( 'button', {
- name: 'Bold',
- } )
- ).toBeHidden();
-
- // Heading is not editable.
- await expect( headingBlock ).toHaveAttribute(
- 'contenteditable',
- 'false'
- );
- } );
-
- test( 'should lock the appropriate controls when source is not defined', async ( {
- editor,
- page,
- } ) => {
- await editor.insertBlock( {
- name: 'core/heading',
- attributes: {
- content: 'heading default content',
- metadata: {
- bindings: {
- content: {
- source: 'plugin/undefined-source',
- args: { key: 'text_custom_field' },
- },
- },
- },
- },
- } );
- const headingBlock = editor.canvas.getByRole( 'document', {
- name: 'Block: Heading',
- } );
- await headingBlock.click();
-
- // Alignment controls exist.
- await expect(
- page
- .getByRole( 'toolbar', { name: 'Block tools' } )
- .getByRole( 'button', { name: 'Align text' } )
- ).toBeVisible();
-
- // Format controls don't exist.
- await expect(
- page
- .getByRole( 'toolbar', { name: 'Block tools' } )
- .getByRole( 'button', {
- name: 'Bold',
- } )
- ).toBeHidden();
-
- // Heading is not editable.
- await expect( headingBlock ).toHaveAttribute(
- 'contenteditable',
- 'false'
- );
- } );
- } );
-
- test.describe( 'Button', () => {
- test( 'should show the key of the custom field when text is bound', async ( {
- editor,
- } ) => {
- await editor.insertBlock( {
- name: 'core/buttons',
- innerBlocks: [
- {
- name: 'core/button',
- attributes: {
- text: 'button default text',
- url: '#default-url',
- metadata: {
- bindings: {
- text: {
- source: 'core/post-meta',
- args: { key: 'text_custom_field' },
- },
- },
- },
- },
- },
- ],
- } );
- const buttonBlock = editor.canvas.getByRole( 'document', {
- name: 'Block: Button',
- exact: true,
- } );
- await expect( buttonBlock ).toHaveText( 'text_custom_field' );
- } );
-
- test( 'should lock text controls when text is bound to a registered source', async ( {
- editor,
- page,
- } ) => {
- await editor.insertBlock( {
- name: 'core/buttons',
- innerBlocks: [
- {
- name: 'core/button',
- attributes: {
- text: 'button default text',
- url: '#default-url',
- metadata: {
- bindings: {
- text: {
- source: 'core/post-meta',
- args: { key: 'text_custom_field' },
- },
- },
- },
- },
- },
- ],
- } );
- const buttonBlock = editor.canvas
- .getByRole( 'document', {
- name: 'Block: Button',
- exact: true,
- } )
- .getByRole( 'textbox' );
- await buttonBlock.click();
-
- // Alignment controls exist.
- await expect(
- page
- .getByRole( 'toolbar', { name: 'Block tools' } )
- .getByRole( 'button', { name: 'Align text' } )
- ).toBeVisible();
-
- // Format controls don't exist.
- await expect(
- page
- .getByRole( 'toolbar', { name: 'Block tools' } )
- .getByRole( 'button', {
- name: 'Bold',
- } )
- ).toBeHidden();
-
- // Button is not editable.
- await expect( buttonBlock ).toHaveAttribute(
- 'contenteditable',
- 'false'
- );
-
- // Link controls exist.
- await expect(
- page
- .getByRole( 'toolbar', { name: 'Block tools' } )
- .getByRole( 'button', { name: 'Unlink' } )
- ).toBeVisible();
- } );
-
- test( 'should lock text controls when text is bound to an undefined source', async ( {
- editor,
- page,
- } ) => {
- await editor.insertBlock( {
- name: 'core/buttons',
- innerBlocks: [
- {
- name: 'core/button',
- attributes: {
- text: 'button default text',
- url: '#default-url',
- metadata: {
- bindings: {
- text: {
- source: 'plugin/undefined-source',
- args: { key: 'text_custom_field' },
- },
- },
- },
- },
- },
- ],
- } );
- const buttonBlock = editor.canvas
- .getByRole( 'document', {
- name: 'Block: Button',
- exact: true,
- } )
- .getByRole( 'textbox' );
- await buttonBlock.click();
-
- // Alignment controls exist.
- await expect(
- page
- .getByRole( 'toolbar', { name: 'Block tools' } )
- .getByRole( 'button', { name: 'Align text' } )
- ).toBeVisible();
-
- // Format controls don't exist.
- await expect(
- page
- .getByRole( 'toolbar', { name: 'Block tools' } )
- .getByRole( 'button', {
- name: 'Bold',
- } )
- ).toBeHidden();
-
- // Button is not editable.
- await expect( buttonBlock ).toHaveAttribute(
- 'contenteditable',
- 'false'
- );
-
- // Link controls exist.
- await expect(
- page
- .getByRole( 'toolbar', { name: 'Block tools' } )
- .getByRole( 'button', { name: 'Unlink' } )
- ).toBeVisible();
- } );
-
- test( 'should lock url controls when url is bound to a registered source', async ( {
- editor,
- page,
- } ) => {
- await editor.insertBlock( {
- name: 'core/buttons',
- innerBlocks: [
- {
- name: 'core/button',
- attributes: {
- text: 'button default text',
- url: '#default-url',
- metadata: {
- bindings: {
- url: {
- source: 'core/post-meta',
- args: { key: 'url_custom_field' },
- },
- },
- },
- },
- },
- ],
- } );
- const buttonBlock = editor.canvas
- .getByRole( 'document', {
- name: 'Block: Button',
- exact: true,
- } )
- .getByRole( 'textbox' );
- await buttonBlock.click();
-
- // Format controls exist.
- await expect(
- page
- .getByRole( 'toolbar', { name: 'Block tools' } )
- .getByRole( 'button', {
- name: 'Bold',
- } )
- ).toBeVisible();
-
- // Button is editable.
- await expect( buttonBlock ).toHaveAttribute(
- 'contenteditable',
- 'true'
- );
-
- // Link controls don't exist.
- await expect(
- page
- .getByRole( 'toolbar', { name: 'Block tools' } )
- .getByRole( 'button', { name: 'Link' } )
- ).toBeHidden();
- await expect(
- page
- .getByRole( 'toolbar', { name: 'Block tools' } )
- .getByRole( 'button', { name: 'Unlink' } )
- ).toBeHidden();
- } );
-
- test( 'should lock url controls when url is bound to an undefined source', async ( {
- editor,
- page,
- } ) => {
- await editor.insertBlock( {
- name: 'core/buttons',
- innerBlocks: [
- {
- name: 'core/button',
- attributes: {
- text: 'button default text',
- url: '#default-url',
- metadata: {
- bindings: {
- url: {
- source: 'plugin/undefined-source',
- args: { key: 'url_custom_field' },
- },
- },
- },
- },
- },
- ],
- } );
- const buttonBlock = editor.canvas
- .getByRole( 'document', {
- name: 'Block: Button',
- exact: true,
- } )
- .getByRole( 'textbox' );
- await buttonBlock.click();
-
- // Format controls exist.
- await expect(
- page
- .getByRole( 'toolbar', { name: 'Block tools' } )
- .getByRole( 'button', {
- name: 'Bold',
- } )
- ).toBeVisible();
-
- // Button is editable.
- await expect( buttonBlock ).toHaveAttribute(
- 'contenteditable',
- 'true'
- );
-
- // Link controls don't exist.
- await expect(
- page
- .getByRole( 'toolbar', { name: 'Block tools' } )
- .getByRole( 'button', { name: 'Link' } )
- ).toBeHidden();
- await expect(
- page
- .getByRole( 'toolbar', { name: 'Block tools' } )
- .getByRole( 'button', { name: 'Unlink' } )
- ).toBeHidden();
- } );
-
- test( 'should lock url and text controls when both are bound', async ( {
- editor,
- page,
- } ) => {
- await editor.insertBlock( {
- name: 'core/buttons',
- innerBlocks: [
- {
- name: 'core/button',
- attributes: {
- text: 'button default text',
- url: '#default-url',
- metadata: {
- bindings: {
- text: {
- source: 'core/post-meta',
- args: { key: 'text_custom_field' },
- },
- url: {
- source: 'core/post-meta',
- args: { key: 'url_custom_field' },
- },
- },
- },
- },
- },
- ],
- } );
- const buttonBlock = editor.canvas
- .getByRole( 'document', {
- name: 'Block: Button',
- exact: true,
- } )
- .getByRole( 'textbox' );
- await buttonBlock.click();
-
- // Alignment controls are visible.
- await expect(
- page
- .getByRole( 'toolbar', { name: 'Block tools' } )
- .getByRole( 'button', { name: 'Align text' } )
- ).toBeVisible();
-
- // Format controls don't exist.
- await expect(
- page
- .getByRole( 'toolbar', { name: 'Block tools' } )
- .getByRole( 'button', {
- name: 'Bold',
- } )
- ).toBeHidden();
-
- // Button is not editable.
- await expect( buttonBlock ).toHaveAttribute(
- 'contenteditable',
- 'false'
- );
-
- // Link controls don't exist.
- await expect(
- page
- .getByRole( 'toolbar', { name: 'Block tools' } )
- .getByRole( 'button', { name: 'Link' } )
- ).toBeHidden();
- await expect(
- page
- .getByRole( 'toolbar', { name: 'Block tools' } )
- .getByRole( 'button', { name: 'Unlink' } )
- ).toBeHidden();
- } );
- } );
-
- test.describe( 'Image', () => {
- test( 'should show the upload form when url is not bound', async ( {
- editor,
- } ) => {
- await editor.insertBlock( { name: 'core/image' } );
- const imageBlock = editor.canvas.getByRole( 'document', {
- name: 'Block: Image',
- } );
- await imageBlock.click();
- await expect(
- imageBlock.getByRole( 'button', { name: 'Upload' } )
- ).toBeVisible();
- } );
-
- test( 'should NOT show the upload form when url is bound to a registered source', async ( {
- editor,
- } ) => {
- await editor.insertBlock( {
- name: 'core/image',
- attributes: {
- url: imagePlaceholderSrc,
- alt: 'default alt value',
- title: 'default title value',
- metadata: {
- bindings: {
- url: {
- source: 'core/post-meta',
- args: { key: 'url_custom_field' },
- },
- },
- },
- },
- } );
- const imageBlock = editor.canvas.getByRole( 'document', {
- name: 'Block: Image',
- } );
- await imageBlock.click();
- await expect(
- imageBlock.getByRole( 'button', { name: 'Upload' } )
- ).toBeHidden();
- } );
-
- test( 'should NOT show the upload form when url is bound to an undefined source', async ( {
- editor,
- } ) => {
- await editor.insertBlock( {
- name: 'core/image',
- attributes: {
- url: imagePlaceholderSrc,
- alt: 'default alt value',
- title: 'default title value',
- metadata: {
- bindings: {
- url: {
- source: 'plugin/undefined-source',
- args: { key: 'url_custom_field' },
- },
- },
- },
- },
- } );
- const imageBlock = editor.canvas.getByRole( 'document', {
- name: 'Block: Image',
- } );
- await imageBlock.click();
- await expect(
- imageBlock.getByRole( 'button', { name: 'Upload' } )
- ).toBeHidden();
- } );
-
- test( 'should lock url controls when url is bound to a registered source', async ( {
- editor,
- page,
- } ) => {
- await editor.insertBlock( {
- name: 'core/image',
- attributes: {
- url: imagePlaceholderSrc,
- alt: 'default alt value',
- title: 'default title value',
- metadata: {
- bindings: {
- url: {
- source: 'core/post-meta',
- args: { key: 'url_custom_field' },
- },
- },
- },
- },
- } );
- const imageBlock = editor.canvas.getByRole( 'document', {
- name: 'Block: Image',
- } );
- await imageBlock.click();
-
- // Replace controls don't exist.
- await expect(
- page
- .getByRole( 'toolbar', { name: 'Block tools' } )
- .getByRole( 'button', {
- name: 'Replace',
- } )
- ).toBeHidden();
-
- // Image placeholder doesn't show the upload button.
- await expect(
- imageBlock.getByRole( 'button', { name: 'Upload' } )
- ).toBeHidden();
-
- // Alt textarea is enabled and with the original value.
- await expect(
- page
- .getByRole( 'tabpanel', { name: 'Settings' } )
- .getByLabel( 'Alternative text' )
- ).toBeEnabled();
- const altValue = await page
- .getByRole( 'tabpanel', { name: 'Settings' } )
- .getByLabel( 'Alternative text' )
- .inputValue();
- expect( altValue ).toBe( 'default alt value' );
-
- // Title input is enabled and with the original value.
- await page
- .getByRole( 'tabpanel', { name: 'Settings' } )
- .getByRole( 'button', { name: 'Advanced' } )
- .click();
-
- await expect(
- page
- .getByRole( 'tabpanel', { name: 'Settings' } )
- .getByLabel( 'Title attribute' )
- ).toBeEnabled();
- const titleValue = await page
- .getByRole( 'tabpanel', { name: 'Settings' } )
- .getByLabel( 'Title attribute' )
- .inputValue();
- expect( titleValue ).toBe( 'default title value' );
- } );
-
- test( 'should lock url controls when url is bound to an undefined source', async ( {
- editor,
- page,
- } ) => {
- await editor.insertBlock( {
- name: 'core/image',
- attributes: {
- url: imagePlaceholderSrc,
- alt: 'default alt value',
- title: 'default title value',
- metadata: {
- bindings: {
- url: {
- source: 'plugin/undefined-source',
- args: { key: 'url_custom_field' },
- },
- },
- },
- },
- } );
- const imageBlock = editor.canvas.getByRole( 'document', {
- name: 'Block: Image',
- } );
- await imageBlock.click();
-
- // Replace controls don't exist.
- await expect(
- page
- .getByRole( 'toolbar', { name: 'Block tools' } )
- .getByRole( 'button', {
- name: 'Replace',
- } )
- ).toBeHidden();
-
- // Image placeholder doesn't show the upload button.
- await expect(
- imageBlock.getByRole( 'button', { name: 'Upload' } )
- ).toBeHidden();
-
- // Alt textarea is enabled and with the original value.
- await expect(
- page
- .getByRole( 'tabpanel', { name: 'Settings' } )
- .getByLabel( 'Alternative text' )
- ).toBeEnabled();
- const altValue = await page
- .getByRole( 'tabpanel', { name: 'Settings' } )
- .getByLabel( 'Alternative text' )
- .inputValue();
- expect( altValue ).toBe( 'default alt value' );
-
- // Title input is enabled and with the original value.
- await page
- .getByRole( 'tabpanel', { name: 'Settings' } )
- .getByRole( 'button', { name: 'Advanced' } )
- .click();
-
- await expect(
- page
- .getByRole( 'tabpanel', { name: 'Settings' } )
- .getByLabel( 'Title attribute' )
- ).toBeEnabled();
- const titleValue = await page
- .getByRole( 'tabpanel', { name: 'Settings' } )
- .getByLabel( 'Title attribute' )
- .inputValue();
- expect( titleValue ).toBe( 'default title value' );
- } );
-
- test( 'should disable alt textarea when alt is bound to a registered source', async ( {
- editor,
- page,
- } ) => {
- await editor.insertBlock( {
- name: 'core/image',
- attributes: {
- url: imagePlaceholderSrc,
- alt: 'default alt value',
- title: 'default title value',
- metadata: {
- bindings: {
- alt: {
- source: 'core/post-meta',
- args: { key: 'text_custom_field' },
- },
- },
- },
- },
- } );
- const imageBlock = editor.canvas.getByRole( 'document', {
- name: 'Block: Image',
- } );
- await imageBlock.click();
-
- // Replace controls exist.
- await expect(
- page
- .getByRole( 'toolbar', { name: 'Block tools' } )
- .getByRole( 'button', {
- name: 'Replace',
- } )
- ).toBeVisible();
-
- // Alt textarea is disabled and with the custom field value.
- await expect(
- page
- .getByRole( 'tabpanel', { name: 'Settings' } )
- .getByLabel( 'Alternative text' )
- ).toHaveAttribute( 'readonly' );
- const altValue = await page
- .getByRole( 'tabpanel', { name: 'Settings' } )
- .getByLabel( 'Alternative text' )
- .inputValue();
- expect( altValue ).toBe( 'text_custom_field' );
-
- // Title input is enabled and with the original value.
- await page
- .getByRole( 'tabpanel', { name: 'Settings' } )
- .getByRole( 'button', { name: 'Advanced' } )
- .click();
- await expect(
- page
- .getByRole( 'tabpanel', { name: 'Settings' } )
- .getByLabel( 'Title attribute' )
- ).toBeEnabled();
- const titleValue = await page
- .getByRole( 'tabpanel', { name: 'Settings' } )
- .getByLabel( 'Title attribute' )
- .inputValue();
- expect( titleValue ).toBe( 'default title value' );
- } );
-
- test( 'should disable alt textarea when alt is bound to an undefined source', async ( {
- editor,
- page,
- } ) => {
- await editor.insertBlock( {
- name: 'core/image',
- attributes: {
- url: imagePlaceholderSrc,
- alt: 'default alt value',
- title: 'default title value',
- metadata: {
- bindings: {
- alt: {
- source: 'plguin/undefined-source',
- args: { key: 'text_custom_field' },
- },
- },
- },
- },
- } );
- const imageBlock = editor.canvas.getByRole( 'document', {
- name: 'Block: Image',
- } );
- await imageBlock.click();
-
- // Replace controls exist.
- await expect(
- page
- .getByRole( 'toolbar', { name: 'Block tools' } )
- .getByRole( 'button', {
- name: 'Replace',
- } )
- ).toBeVisible();
-
- // Alt textarea is disabled and with the custom field value.
- await expect(
- page
- .getByRole( 'tabpanel', { name: 'Settings' } )
- .getByLabel( 'Alternative text' )
- ).toHaveAttribute( 'readonly' );
- const altValue = await page
- .getByRole( 'tabpanel', { name: 'Settings' } )
- .getByLabel( 'Alternative text' )
- .inputValue();
- expect( altValue ).toBe( 'default alt value' );
-
- // Title input is enabled and with the original value.
- await page
- .getByRole( 'tabpanel', { name: 'Settings' } )
- .getByRole( 'button', { name: 'Advanced' } )
- .click();
- await expect(
- page
- .getByRole( 'tabpanel', { name: 'Settings' } )
- .getByLabel( 'Title attribute' )
- ).toBeEnabled();
- const titleValue = await page
- .getByRole( 'tabpanel', { name: 'Settings' } )
- .getByLabel( 'Title attribute' )
- .inputValue();
- expect( titleValue ).toBe( 'default title value' );
- } );
-
- test( 'should disable title input when title is bound to a registered source', async ( {
- editor,
- page,
- } ) => {
- await editor.insertBlock( {
- name: 'core/image',
- attributes: {
- url: imagePlaceholderSrc,
- alt: 'default alt value',
- title: 'default title value',
- metadata: {
- bindings: {
- title: {
- source: 'core/post-meta',
- args: { key: 'text_custom_field' },
- },
- },
- },
- },
- } );
- const imageBlock = editor.canvas.getByRole( 'document', {
- name: 'Block: Image',
- } );
- await imageBlock.click();
-
- // Replace controls exist.
- await expect(
- page
- .getByRole( 'toolbar', { name: 'Block tools' } )
- .getByRole( 'button', {
- name: 'Replace',
- } )
- ).toBeVisible();
-
- // Alt textarea is enabled and with the original value.
- await expect(
- page
- .getByRole( 'tabpanel', { name: 'Settings' } )
- .getByLabel( 'Alternative text' )
- ).toBeEnabled();
- const altValue = await page
- .getByRole( 'tabpanel', { name: 'Settings' } )
- .getByLabel( 'Alternative text' )
- .inputValue();
- expect( altValue ).toBe( 'default alt value' );
-
- // Title input is disabled and with the custom field value.
- await page
- .getByRole( 'tabpanel', { name: 'Settings' } )
- .getByRole( 'button', { name: 'Advanced' } )
- .click();
- await expect(
- page
- .getByRole( 'tabpanel', { name: 'Settings' } )
- .getByLabel( 'Title attribute' )
- ).toHaveAttribute( 'readonly' );
- const titleValue = await page
- .getByRole( 'tabpanel', { name: 'Settings' } )
- .getByLabel( 'Title attribute' )
- .inputValue();
- expect( titleValue ).toBe( 'text_custom_field' );
- } );
-
- test( 'should disable title input when title is bound to an undefined source', async ( {
- editor,
- page,
- } ) => {
- await editor.insertBlock( {
- name: 'core/image',
- attributes: {
- url: imagePlaceholderSrc,
- alt: 'default alt value',
- title: 'default title value',
- metadata: {
- bindings: {
- title: {
- source: 'plugin/undefined-source',
- args: { key: 'text_custom_field' },
- },
- },
- },
- },
- } );
- const imageBlock = editor.canvas.getByRole( 'document', {
- name: 'Block: Image',
- } );
- await imageBlock.click();
-
- // Replace controls exist.
- await expect(
- page
- .getByRole( 'toolbar', { name: 'Block tools' } )
- .getByRole( 'button', {
- name: 'Replace',
- } )
- ).toBeVisible();
-
- // Alt textarea is enabled and with the original value.
- await expect(
- page
- .getByRole( 'tabpanel', { name: 'Settings' } )
- .getByLabel( 'Alternative text' )
- ).toBeEnabled();
- const altValue = await page
- .getByRole( 'tabpanel', { name: 'Settings' } )
- .getByLabel( 'Alternative text' )
- .inputValue();
- expect( altValue ).toBe( 'default alt value' );
-
- // Title input is disabled and with the custom field value.
- await page
- .getByRole( 'tabpanel', { name: 'Settings' } )
- .getByRole( 'button', { name: 'Advanced' } )
- .click();
- await expect(
- page
- .getByRole( 'tabpanel', { name: 'Settings' } )
- .getByLabel( 'Title attribute' )
- ).toHaveAttribute( 'readonly' );
- const titleValue = await page
- .getByRole( 'tabpanel', { name: 'Settings' } )
- .getByLabel( 'Title attribute' )
- .inputValue();
- expect( titleValue ).toBe( 'default title value' );
- } );
-
- test( 'Multiple bindings should lock the appropriate controls', async ( {
- editor,
- page,
- } ) => {
- await editor.insertBlock( {
- name: 'core/image',
- attributes: {
- url: imagePlaceholderSrc,
- alt: 'default alt value',
- title: 'default title value',
- metadata: {
- bindings: {
- url: {
- source: 'core/post-meta',
- args: { key: 'url_custom_field' },
- },
- alt: {
- source: 'core/post-meta',
- args: { key: 'text_custom_field' },
- },
- },
- },
- },
- } );
- const imageBlock = editor.canvas.getByRole( 'document', {
- name: 'Block: Image',
- } );
- await imageBlock.click();
-
- // Replace controls don't exist.
- await expect(
- page
- .getByRole( 'toolbar', { name: 'Block tools' } )
- .getByRole( 'button', {
- name: 'Replace',
- } )
- ).toBeHidden();
-
- // Image placeholder doesn't show the upload button.
- await expect(
- imageBlock.getByRole( 'button', { name: 'Upload' } )
- ).toBeHidden();
-
- // Alt textarea is disabled and with the custom field value.
- await expect(
- page
- .getByRole( 'tabpanel', { name: 'Settings' } )
- .getByLabel( 'Alternative text' )
- ).toHaveAttribute( 'readonly' );
- const altValue = await page
- .getByRole( 'tabpanel', { name: 'Settings' } )
- .getByLabel( 'Alternative text' )
- .inputValue();
- expect( altValue ).toBe( 'text_custom_field' );
-
- // Title input is enabled and with the original value.
- await page
- .getByRole( 'tabpanel', { name: 'Settings' } )
- .getByRole( 'button', { name: 'Advanced' } )
- .click();
- await expect(
- page
- .getByRole( 'tabpanel', { name: 'Settings' } )
- .getByLabel( 'Title attribute' )
- ).toBeEnabled();
- const titleValue = await page
- .getByRole( 'tabpanel', { name: 'Settings' } )
- .getByLabel( 'Title attribute' )
- .inputValue();
- expect( titleValue ).toBe( 'default title value' );
- } );
- } );
- } );
-
- test.describe( 'Post/page context', () => {
- test.beforeEach( async ( { admin } ) => {
- await admin.createNewPost( { title: 'Test bindings' } );
- } );
- test.describe( 'Paragraph', () => {
- test( 'should show the value of the custom field when exists', async ( {
- editor,
- } ) => {
- await editor.insertBlock( {
- name: 'core/paragraph',
- attributes: {
- anchor: 'paragraph-binding',
- content: 'paragraph default content',
- metadata: {
- bindings: {
- content: {
- source: 'core/post-meta',
- args: { key: 'text_custom_field' },
- },
- },
- },
- },
- } );
- const paragraphBlock = editor.canvas.getByRole( 'document', {
- name: 'Block: Paragraph',
- } );
- await expect( paragraphBlock ).toHaveText(
- 'Value of the text custom field'
- );
-
- // Check the frontend shows the value of the custom field.
- const previewPage = await editor.openPreviewPage();
- await expect(
- previewPage.locator( '#paragraph-binding' )
- ).toHaveText( 'Value of the text custom field' );
- } );
-
- test( "should show the value of the key when custom field doesn't exist", async ( {
- editor,
- } ) => {
- await editor.insertBlock( {
- name: 'core/paragraph',
- attributes: {
- anchor: 'paragraph-binding',
- content: 'fallback value',
- metadata: {
- bindings: {
- content: {
- source: 'core/post-meta',
- args: { key: 'non_existing_custom_field' },
- },
- },
- },
- },
- } );
- const paragraphBlock = editor.canvas.getByRole( 'document', {
- name: 'Block: Paragraph',
- } );
- await expect( paragraphBlock ).toHaveText(
- 'non_existing_custom_field'
- );
- // Paragraph is not editable.
- await expect( paragraphBlock ).toHaveAttribute(
- 'contenteditable',
- 'false'
- );
-
- // Check the frontend doesn't show the content.
- const previewPage = await editor.openPreviewPage();
- await expect(
- previewPage.locator( '#paragraph-binding' )
- ).toHaveText( 'fallback value' );
- } );
-
- test( 'should show the prompt placeholder in field with empty value', async ( {
- editor,
- } ) => {
- await editor.insertBlock( {
- name: 'core/paragraph',
- attributes: {
- content: 'paragraph default content',
- metadata: {
- bindings: {
- content: {
- source: 'core/post-meta',
- args: { key: 'empty_field' },
- },
- },
- },
- },
- } );
-
- const paragraphBlock = editor.canvas.getByRole( 'document', {
- // Aria-label is changed for empty paragraphs.
- name: 'Add empty_field',
- } );
-
- await expect( paragraphBlock ).toBeEmpty();
-
- const placeholder = paragraphBlock.locator( 'span' );
- await expect( placeholder ).toHaveAttribute(
- 'data-rich-text-placeholder',
- 'Add empty_field'
- );
- } );
-
- test( 'should not show the value of a protected meta field', async ( {
- editor,
- } ) => {
- await editor.insertBlock( {
- name: 'core/paragraph',
- attributes: {
- anchor: 'paragraph-binding',
- content: 'fallback value',
- metadata: {
- bindings: {
- content: {
- source: 'core/post-meta',
- args: { key: '_protected_field' },
- },
- },
- },
- },
- } );
- const paragraphBlock = editor.canvas.getByRole( 'document', {
- name: 'Block: Paragraph',
- } );
- await expect( paragraphBlock ).toHaveText( '_protected_field' );
- // Check the frontend doesn't show the content.
- const previewPage = await editor.openPreviewPage();
- await expect(
- previewPage.locator( '#paragraph-binding' )
- ).toHaveText( 'fallback value' );
- } );
-
- test( 'should not show the value of a meta field with `show_in_rest` false', async ( {
- editor,
- } ) => {
- await editor.insertBlock( {
- name: 'core/paragraph',
- attributes: {
- anchor: 'paragraph-binding',
- content: 'fallback value',
- metadata: {
- bindings: {
- content: {
- source: 'core/post-meta',
- args: { key: 'show_in_rest_false_field' },
- },
- },
- },
- },
- } );
- const paragraphBlock = editor.canvas.getByRole( 'document', {
- name: 'Block: Paragraph',
- } );
- await expect( paragraphBlock ).toHaveText(
- 'show_in_rest_false_field'
- );
- // Check the frontend doesn't show the content.
- const previewPage = await editor.openPreviewPage();
- await expect(
- previewPage.locator( '#paragraph-binding' )
- ).toHaveText( 'fallback value' );
- } );
-
- test( 'should add empty paragraph block when pressing enter', async ( {
- editor,
- page,
- } ) => {
- await editor.insertBlock( {
- name: 'core/paragraph',
- attributes: {
- content: 'paragraph default content',
- metadata: {
- bindings: {
- content: {
- source: 'core/post-meta',
- args: { key: 'text_custom_field' },
- },
- },
- },
- },
- } );
- // Select the paragraph and press Enter at the end of it.
- const paragraph = editor.canvas.getByRole( 'document', {
- name: 'Block: Paragraph',
- } );
- await editor.selectBlocks( paragraph );
- await page.keyboard.press( 'End' );
- await page.keyboard.press( 'Enter' );
- const [ initialParagraph, newEmptyParagraph ] =
- await editor.canvas
- .locator( '[data-type="core/paragraph"]' )
- .all();
- await expect( initialParagraph ).toHaveText(
- 'Value of the text custom field'
- );
- await expect( newEmptyParagraph ).toHaveText( '' );
- await expect( newEmptyParagraph ).toBeEditable();
- } );
-
- test( 'should NOT be possible to edit the value of the custom field when it is protected', async ( {
- editor,
- } ) => {
- await editor.insertBlock( {
- name: 'core/paragraph',
- attributes: {
- anchor: 'protected-field-binding',
- content: 'fallback value',
- metadata: {
- bindings: {
- content: {
- source: 'core/post-meta',
- args: { key: '_protected_field' },
- },
- },
- },
- },
- } );
-
- const protectedFieldBlock = editor.canvas.getByRole(
- 'document',
- {
- name: 'Block: Paragraph',
- }
- );
-
- await expect( protectedFieldBlock ).toHaveAttribute(
- 'contenteditable',
- 'false'
- );
- } );
-
- test( 'should NOT be possible to edit the value of the custom field when it is not shown in the REST API', async ( {
- editor,
- } ) => {
- await editor.insertBlock( {
- name: 'core/paragraph',
- attributes: {
- anchor: 'show-in-rest-false-binding',
- content: 'fallback value',
- metadata: {
- bindings: {
- content: {
- source: 'core/post-meta',
- args: { key: 'show_in_rest_false_field' },
- },
- },
- },
- },
- } );
-
- const showInRestFalseBlock = editor.canvas.getByRole(
- 'document',
- {
- name: 'Block: Paragraph',
- }
- );
-
- await expect( showInRestFalseBlock ).toHaveAttribute(
- 'contenteditable',
- 'false'
- );
- } );
- test( 'should show a selector for content', async ( {
- editor,
- page,
- } ) => {
- await editor.insertBlock( {
- name: 'core/paragraph',
- } );
- await page.getByLabel( 'Attributes options' ).click();
- const contentAttribute = page.getByRole( 'menuitemcheckbox', {
- name: 'Show content',
- } );
- await expect( contentAttribute ).toBeVisible();
- } );
- test( 'should use a selector to update the content', async ( {
- editor,
- page,
- } ) => {
- await editor.insertBlock( {
- name: 'core/paragraph',
- attributes: {
- content: 'fallback value',
- metadata: {
- bindings: {
- content: {
- source: 'core/post-meta',
- args: { key: 'undefined_field' },
- },
- },
- },
- },
- } );
- await page.getByRole( 'button', { name: 'content' } ).click();
-
- await page
- .getByRole( 'menuitemradio' )
- .filter( { hasText: 'text_custom_field' } )
- .click();
- const paragraphBlock = editor.canvas.getByRole( 'document', {
- name: 'Block: Paragraph',
- } );
- await expect( paragraphBlock ).toHaveText(
- 'Value of the text custom field'
- );
- } );
- } );
-
- test.describe( 'Heading', () => {
- test( 'should show the value of the custom field', async ( {
- editor,
- } ) => {
- await editor.insertBlock( {
- name: 'core/heading',
- attributes: {
- anchor: 'heading-binding',
- content: 'heading default content',
- metadata: {
- bindings: {
- content: {
- source: 'core/post-meta',
- args: { key: 'text_custom_field' },
- },
- },
- },
- },
- } );
- const headingBlock = editor.canvas.getByRole( 'document', {
- name: 'Block: Heading',
- } );
- await expect( headingBlock ).toHaveText(
- 'Value of the text custom field'
- );
-
- // Check the frontend shows the value of the custom field.
- const previewPage = await editor.openPreviewPage();
- await expect(
- previewPage.locator( '#heading-binding' )
- ).toHaveText( 'Value of the text custom field' );
- } );
-
- test( 'should add empty paragraph block when pressing enter', async ( {
- editor,
- page,
- } ) => {
- await editor.insertBlock( {
- name: 'core/heading',
- attributes: {
- anchor: 'heading-binding',
- content: 'heading default content',
- metadata: {
- bindings: {
- content: {
- source: 'core/post-meta',
- args: { key: 'text_custom_field' },
- },
- },
- },
- },
- } );
-
- // Select the heading and press Enter at the end of it.
- const heading = editor.canvas.getByRole( 'document', {
- name: 'Block: Heading',
- } );
- await editor.selectBlocks( heading );
- await page.keyboard.press( 'End' );
- await page.keyboard.press( 'Enter' );
- // Can't use `editor.getBlocks` because it doesn't return the meta value shown in the editor.
- const [ initialHeading, newEmptyParagraph ] =
- await editor.canvas.locator( '[data-block]' ).all();
- // First block should be the original block.
- await expect( initialHeading ).toHaveAttribute(
- 'data-type',
- 'core/heading'
- );
- await expect( initialHeading ).toHaveText(
- 'Value of the text custom field'
- );
- // Second block should be an empty paragraph block.
- await expect( newEmptyParagraph ).toHaveAttribute(
- 'data-type',
- 'core/paragraph'
- );
- await expect( newEmptyParagraph ).toHaveText( '' );
- await expect( newEmptyParagraph ).toBeEditable();
- } );
- test( 'should show a selector for content', async ( {
- editor,
- page,
- } ) => {
- await editor.insertBlock( {
- name: 'core/heading',
- } );
- await page.getByLabel( 'Attributes options' ).click();
- const contentAttribute = page.getByRole( 'menuitemcheckbox', {
- name: 'Show content',
- } );
- await expect( contentAttribute ).toBeVisible();
- } );
- } );
-
- test.describe( 'Button', () => {
- test( 'should show the value of the custom field when text is bound', async ( {
- editor,
- } ) => {
- await editor.insertBlock( {
- name: 'core/buttons',
- innerBlocks: [
- {
- name: 'core/button',
- attributes: {
- anchor: 'button-text-binding',
- text: 'button default text',
- url: '#default-url',
- metadata: {
- bindings: {
- text: {
- source: 'core/post-meta',
- args: { key: 'text_custom_field' },
- },
- },
- },
- },
- },
- ],
- } );
- const buttonBlock = editor.canvas
- .getByRole( 'document', {
- name: 'Block: Button',
- exact: true,
- } )
- .getByRole( 'textbox' );
- await buttonBlock.click();
- await expect( buttonBlock ).toHaveText(
- 'Value of the text custom field'
- );
-
- // Check the frontend shows the value of the custom field.
- const previewPage = await editor.openPreviewPage();
- const buttonDom = previewPage.locator(
- '#button-text-binding a'
- );
- await expect( buttonDom ).toHaveText(
- 'Value of the text custom field'
- );
- await expect( buttonDom ).toHaveAttribute(
- 'href',
- '#default-url'
- );
- } );
-
- test( 'should use the value of the custom field when url is bound', async ( {
- editor,
- } ) => {
- await editor.insertBlock( {
- name: 'core/buttons',
- innerBlocks: [
- {
- name: 'core/button',
- attributes: {
- anchor: 'button-url-binding',
- text: 'button default text',
- url: '#default-url',
- metadata: {
- bindings: {
- url: {
- source: 'core/post-meta',
- args: { key: 'url_custom_field' },
- },
- },
- },
- },
- },
- ],
- } );
-
- // Check the frontend shows the original value of the custom field.
- const previewPage = await editor.openPreviewPage();
- const buttonDom = previewPage.locator(
- '#button-url-binding a'
- );
- await expect( buttonDom ).toHaveText( 'button default text' );
- await expect( buttonDom ).toHaveAttribute(
- 'href',
- '#url-custom-field'
- );
- } );
-
- test( 'should use the values of the custom fields when text and url are bound', async ( {
- editor,
- } ) => {
- await editor.insertBlock( {
- name: 'core/buttons',
- innerBlocks: [
- {
- name: 'core/button',
- attributes: {
- anchor: 'button-multiple-bindings',
- text: 'button default text',
- url: '#default-url',
- metadata: {
- bindings: {
- text: {
- source: 'core/post-meta',
- args: { key: 'text_custom_field' },
- },
- url: {
- source: 'core/post-meta',
- args: { key: 'url_custom_field' },
- },
- },
- },
- },
- },
- ],
- } );
-
- // Check the frontend uses the values of the custom fields.
- const previewPage = await editor.openPreviewPage();
- const buttonDom = previewPage.locator(
- '#button-multiple-bindings a'
- );
- await expect( buttonDom ).toHaveText(
- 'Value of the text custom field'
- );
- await expect( buttonDom ).toHaveAttribute(
- 'href',
- '#url-custom-field'
- );
- } );
-
- test( 'should add empty button block when pressing enter', async ( {
- editor,
- page,
- } ) => {
- await editor.insertBlock( {
- name: 'core/buttons',
- innerBlocks: [
- {
- name: 'core/button',
- attributes: {
- anchor: 'button-text-binding',
- text: 'button default text',
- url: '#default-url',
- metadata: {
- bindings: {
- text: {
- source: 'core/post-meta',
- args: { key: 'text_custom_field' },
- },
- },
- },
- },
- },
- ],
- } );
- await editor.canvas
- .getByRole( 'document', {
- name: 'Block: Button',
- exact: true,
- } )
- .getByRole( 'textbox' )
- .click();
- await page.keyboard.press( 'End' );
- await page.keyboard.press( 'Enter' );
- const [ initialButton, newEmptyButton ] = await editor.canvas
- .locator( '[data-type="core/button"]' )
- .all();
- // First block should be the original block.
- await expect( initialButton ).toHaveText(
- 'Value of the text custom field'
- );
- // Second block should be an empty paragraph block.
- await expect( newEmptyButton ).toHaveText( '' );
- await expect( newEmptyButton ).toBeEditable();
- } );
- test( 'should show a selector for url, text, linkTarget and rel', async ( {
- editor,
- page,
- } ) => {
- await editor.insertBlock( {
- name: 'core/buttons',
- innerBlocks: [
- {
- name: 'core/button',
- },
- ],
- } );
- await editor.canvas
- .getByRole( 'document', {
- name: 'Block: Button',
- exact: true,
- } )
- .getByRole( 'textbox' )
- .click();
- await page
- .getByRole( 'tabpanel', {
- name: 'Settings',
- } )
- .getByLabel( 'Attributes options' )
- .click();
- const urlAttribute = page.getByRole( 'menuitemcheckbox', {
- name: 'Show url',
- } );
- await expect( urlAttribute ).toBeVisible();
- const textAttribute = page.getByRole( 'menuitemcheckbox', {
- name: 'Show text',
- } );
- await expect( textAttribute ).toBeVisible();
- const linkTargetAttribute = page.getByRole(
- 'menuitemcheckbox',
- {
- name: 'Show linkTarget',
- }
- );
- await expect( linkTargetAttribute ).toBeVisible();
- const relAttribute = page.getByRole( 'menuitemcheckbox', {
- name: 'Show rel',
- } );
- await expect( relAttribute ).toBeVisible();
- } );
- } );
-
- test.describe( 'Image', () => {
- test.beforeAll( async ( { requestUtils } ) => {
- const customFieldMedia = await requestUtils.uploadMedia(
- path.join(
- './test/e2e/assets',
- '1024x768_e2e_test_image_size.jpeg'
- )
- );
- imageCustomFieldSrc = customFieldMedia.source_url;
- } );
-
- test.beforeEach( async ( { editor, page, requestUtils } ) => {
- const postId = await editor.publishPost();
- await requestUtils.rest( {
- method: 'POST',
- path: '/wp/v2/posts/' + postId,
- data: {
- meta: {
- url_custom_field: imageCustomFieldSrc,
- },
- },
- } );
- await page.reload();
- } );
- test( 'should show the value of the custom field when url is bound', async ( {
- editor,
- } ) => {
- await editor.insertBlock( {
- name: 'core/image',
- attributes: {
- anchor: 'image-url-binding',
- url: imagePlaceholderSrc,
- alt: 'default alt value',
- title: 'default title value',
- metadata: {
- bindings: {
- url: {
- source: 'core/post-meta',
- args: { key: 'url_custom_field' },
- },
- },
- },
- },
- } );
- const imageBlockImg = editor.canvas
- .getByRole( 'document', {
- name: 'Block: Image',
- } )
- .locator( 'img' );
- await expect( imageBlockImg ).toHaveAttribute(
- 'src',
- imageCustomFieldSrc
- );
-
- // Check the frontend uses the value of the custom field.
- const previewPage = await editor.openPreviewPage();
- const imageDom = previewPage.locator(
- '#image-url-binding img'
- );
- await expect( imageDom ).toHaveAttribute(
- 'src',
- imageCustomFieldSrc
- );
- await expect( imageDom ).toHaveAttribute(
- 'alt',
- 'default alt value'
- );
- await expect( imageDom ).toHaveAttribute(
- 'title',
- 'default title value'
- );
- } );
-
- test( 'should show value of the custom field in the alt textarea when alt is bound', async ( {
- editor,
- page,
- } ) => {
- await editor.insertBlock( {
- name: 'core/image',
- attributes: {
- anchor: 'image-alt-binding',
- url: imagePlaceholderSrc,
- alt: 'default alt value',
- title: 'default title value',
- metadata: {
- bindings: {
- alt: {
- source: 'core/post-meta',
- args: { key: 'text_custom_field' },
- },
- },
- },
- },
- } );
- const imageBlockImg = editor.canvas
- .getByRole( 'document', {
- name: 'Block: Image',
- } )
- .locator( 'img' );
- await imageBlockImg.click();
-
- // Image src is the placeholder.
- await expect( imageBlockImg ).toHaveAttribute(
- 'src',
- imagePlaceholderSrc
- );
-
- // Alt textarea should have the custom field value.
- const altValue = await page
- .getByRole( 'tabpanel', { name: 'Settings' } )
- .getByLabel( 'Alternative text' )
- .inputValue();
- expect( altValue ).toBe( 'Value of the text custom field' );
-
- // Check the frontend uses the value of the custom field.
- const previewPage = await editor.openPreviewPage();
- const imageDom = previewPage.locator(
- '#image-alt-binding img'
- );
- await expect( imageDom ).toHaveAttribute(
- 'src',
- imagePlaceholderSrc
- );
- await expect( imageDom ).toHaveAttribute(
- 'alt',
- 'Value of the text custom field'
- );
- await expect( imageDom ).toHaveAttribute(
- 'title',
- 'default title value'
- );
- } );
-
- test( 'should show value of the custom field in the title input when title is bound', async ( {
- editor,
- page,
- } ) => {
- await editor.insertBlock( {
- name: 'core/image',
- attributes: {
- anchor: 'image-title-binding',
- url: imagePlaceholderSrc,
- alt: 'default alt value',
- title: 'default title value',
- metadata: {
- bindings: {
- title: {
- source: 'core/post-meta',
- args: { key: 'text_custom_field' },
- },
- },
- },
- },
- } );
- const imageBlockImg = editor.canvas
- .getByRole( 'document', {
- name: 'Block: Image',
- } )
- .locator( 'img' );
- await imageBlockImg.click();
-
- // Image src is the placeholder.
- await expect( imageBlockImg ).toHaveAttribute(
- 'src',
- imagePlaceholderSrc
- );
-
- // Title input should have the custom field value.
- const advancedButton = page
- .getByRole( 'tabpanel', { name: 'Settings' } )
- .getByRole( 'button', {
- name: 'Advanced',
- } );
- const isAdvancedPanelOpen =
- await advancedButton.getAttribute( 'aria-expanded' );
- if ( isAdvancedPanelOpen === 'false' ) {
- await advancedButton.click();
- }
- const titleValue = await page
- .getByRole( 'tabpanel', { name: 'Settings' } )
- .getByLabel( 'Title attribute' )
- .inputValue();
- expect( titleValue ).toBe( 'Value of the text custom field' );
-
- // Check the frontend uses the value of the custom field.
- const previewPage = await editor.openPreviewPage();
- const imageDom = previewPage.locator(
- '#image-title-binding img'
- );
- await expect( imageDom ).toHaveAttribute(
- 'src',
- imagePlaceholderSrc
- );
- await expect( imageDom ).toHaveAttribute(
- 'alt',
- 'default alt value'
- );
- await expect( imageDom ).toHaveAttribute(
- 'title',
- 'Value of the text custom field'
- );
- } );
-
- test( 'Multiple bindings should show the value of the custom fields', async ( {
- editor,
- page,
- } ) => {
- await editor.insertBlock( {
- name: 'core/image',
- attributes: {
- anchor: 'image-multiple-bindings',
- url: imagePlaceholderSrc,
- alt: 'default alt value',
- title: 'default title value',
- metadata: {
- bindings: {
- url: {
- source: 'core/post-meta',
- args: { key: 'url_custom_field' },
- },
- alt: {
- source: 'core/post-meta',
- args: { key: 'text_custom_field' },
- },
- },
- },
- },
- } );
- const imageBlockImg = editor.canvas
- .getByRole( 'document', {
- name: 'Block: Image',
- } )
- .locator( 'img' );
- await imageBlockImg.click();
-
- // Image src is the custom field value.
- await expect( imageBlockImg ).toHaveAttribute(
- 'src',
- imageCustomFieldSrc
- );
-
- // Alt textarea should have the custom field value.
- const altValue = await page
- .getByRole( 'tabpanel', { name: 'Settings' } )
- .getByLabel( 'Alternative text' )
- .inputValue();
- expect( altValue ).toBe( 'Value of the text custom field' );
-
- // Title input should have the original value.
- const advancedButton = page
- .getByRole( 'tabpanel', { name: 'Settings' } )
- .getByRole( 'button', {
- name: 'Advanced',
- } );
- const isAdvancedPanelOpen =
- await advancedButton.getAttribute( 'aria-expanded' );
- if ( isAdvancedPanelOpen === 'false' ) {
- await advancedButton.click();
- }
- const titleValue = await page
- .getByRole( 'tabpanel', { name: 'Settings' } )
- .getByLabel( 'Title attribute' )
- .inputValue();
- expect( titleValue ).toBe( 'default title value' );
-
- // Check the frontend uses the values of the custom fields.
- const previewPage = await editor.openPreviewPage();
- const imageDom = previewPage.locator(
- '#image-multiple-bindings img'
- );
- await expect( imageDom ).toHaveAttribute(
- 'src',
- imageCustomFieldSrc
- );
- await expect( imageDom ).toHaveAttribute(
- 'alt',
- 'Value of the text custom field'
- );
- await expect( imageDom ).toHaveAttribute(
- 'title',
- 'default title value'
- );
- } );
- test( 'should show a selector for url, id, title and alt', async ( {
- editor,
- page,
- } ) => {
- await editor.insertBlock( {
- name: 'core/image',
- } );
- await page
- .getByRole( 'tabpanel', {
- name: 'Settings',
- } )
- .getByLabel( 'Attributes options' )
- .click();
- const urlAttribute = page.getByRole( 'menuitemcheckbox', {
- name: 'Show url',
- } );
- await expect( urlAttribute ).toBeVisible();
- const idAttribute = page.getByRole( 'menuitemcheckbox', {
- name: 'Show id',
- } );
- await expect( idAttribute ).toBeVisible();
- const titleAttribute = page.getByRole( 'menuitemcheckbox', {
- name: 'Show title',
- } );
- await expect( titleAttribute ).toBeVisible();
- const altAttribute = page.getByRole( 'menuitemcheckbox', {
- name: 'Show alt',
- } );
- await expect( altAttribute ).toBeVisible();
- } );
- } );
-
- test.describe( 'Edit custom fields', () => {
- test( 'should be possible to edit the value of the custom field from the paragraph', async ( {
- editor,
- } ) => {
- await editor.insertBlock( {
- name: 'core/paragraph',
- attributes: {
- anchor: 'paragraph-binding',
- content: 'paragraph default content',
- metadata: {
- bindings: {
- content: {
- source: 'core/post-meta',
- args: { key: 'text_custom_field' },
- },
- },
- },
- },
- } );
- const paragraphBlock = editor.canvas.getByRole( 'document', {
- name: 'Block: Paragraph',
- } );
-
- await expect( paragraphBlock ).toHaveAttribute(
- 'contenteditable',
- 'true'
- );
- await paragraphBlock.fill( 'new value' );
- // Check that the paragraph content attribute didn't change.
- const [ paragraphBlockObject ] = await editor.getBlocks();
- expect( paragraphBlockObject.attributes.content ).toBe(
- 'paragraph default content'
- );
- // Check the value of the custom field is being updated by visiting the frontend.
- const previewPage = await editor.openPreviewPage();
- await expect(
- previewPage.locator( '#paragraph-binding' )
- ).toHaveText( 'new value' );
- } );
-
- // Related issue: https://github.com/WordPress/gutenberg/issues/62347
- test( 'should be possible to use symbols and numbers as the custom field value', async ( {
- editor,
- } ) => {
- await editor.insertBlock( {
- name: 'core/paragraph',
- attributes: {
- anchor: 'paragraph-binding',
- content: 'paragraph default content',
- metadata: {
- bindings: {
- content: {
- source: 'core/post-meta',
- args: { key: 'text_custom_field' },
- },
- },
- },
- },
- } );
- const paragraphBlock = editor.canvas.getByRole( 'document', {
- name: 'Block: Paragraph',
- } );
-
- await expect( paragraphBlock ).toHaveAttribute(
- 'contenteditable',
- 'true'
- );
- await paragraphBlock.fill( '$10.00' );
- // Check the value of the custom field is being updated by visiting the frontend.
- const previewPage = await editor.openPreviewPage();
- await expect(
- previewPage.locator( '#paragraph-binding' )
- ).toHaveText( '$10.00' );
- } );
-
- test( 'should be possible to edit the value of the url custom field from the button', async ( {
- editor,
- page,
- pageUtils,
- } ) => {
- await editor.insertBlock( {
- name: 'core/buttons',
- innerBlocks: [
- {
- name: 'core/button',
- attributes: {
- anchor: 'button-url-binding',
- text: 'button default text',
- url: '#default-url',
- metadata: {
- bindings: {
- url: {
- source: 'core/post-meta',
- args: { key: 'url_custom_field' },
- },
- },
- },
- },
- },
- ],
- } );
-
- // Edit the url.
- const buttonBlock = editor.canvas
- .getByRole( 'document', {
- name: 'Block: Button',
- exact: true,
- } )
- .getByRole( 'textbox' );
- await buttonBlock.click();
- await page
- .getByRole( 'button', { name: 'Edit link', exact: true } )
- .click();
- await page
- .getByPlaceholder( 'Search or type URL' )
- .fill( '#url-custom-field-modified' );
- await pageUtils.pressKeys( 'Enter' );
-
- // Check that the button url attribute didn't change.
- const [ buttonsObject ] = await editor.getBlocks();
- expect( buttonsObject.innerBlocks[ 0 ].attributes.url ).toBe(
- '#default-url'
- );
- // Check the value of the custom field is being updated by visiting the frontend.
- const previewPage = await editor.openPreviewPage();
- await expect(
- previewPage.locator( '#button-url-binding a' )
- ).toHaveAttribute( 'href', '#url-custom-field-modified' );
- } );
-
- test( 'should be possible to edit the value of the url custom field from the image', async ( {
- editor,
- page,
- pageUtils,
- requestUtils,
- } ) => {
- const customFieldMedia = await requestUtils.uploadMedia(
- path.join(
- './test/e2e/assets',
- '1024x768_e2e_test_image_size.jpeg'
- )
- );
- imageCustomFieldSrc = customFieldMedia.source_url;
-
- await editor.insertBlock( {
- name: 'core/image',
- attributes: {
- anchor: 'image-url-binding',
- url: imagePlaceholderSrc,
- alt: 'default alt value',
- title: 'default title value',
- metadata: {
- bindings: {
- url: {
- source: 'core/post-meta',
- args: { key: 'url_custom_field' },
- },
- },
- },
- },
- } );
-
- // Edit image url.
- await page
- .getByRole( 'toolbar', { name: 'Block tools' } )
- .getByRole( 'button', {
- name: 'Replace',
- } )
- .click();
- await page
- .getByRole( 'button', { name: 'Edit link', exact: true } )
- .click();
- await page
- .getByPlaceholder( 'Search or type URL' )
- .fill( imageCustomFieldSrc );
- await pageUtils.pressKeys( 'Enter' );
-
- // Check that the image url attribute didn't change and still uses the placeholder.
- const [ imageBlockObject ] = await editor.getBlocks();
- expect( imageBlockObject.attributes.url ).toBe(
- imagePlaceholderSrc
- );
-
- // Check the value of the custom field is being updated by visiting the frontend.
- const previewPage = await editor.openPreviewPage();
- await expect(
- previewPage.locator( '#image-url-binding img' )
- ).toHaveAttribute( 'src', imageCustomFieldSrc );
- } );
-
- test( 'should be possible to edit the value of the text custom field from the image alt', async ( {
- editor,
- page,
- } ) => {
- await editor.insertBlock( {
- name: 'core/image',
- attributes: {
- anchor: 'image-alt-binding',
- url: imagePlaceholderSrc,
- alt: 'default alt value',
- metadata: {
- bindings: {
- alt: {
- source: 'core/post-meta',
- args: { key: 'text_custom_field' },
- },
- },
- },
- },
- } );
- const imageBlockImg = editor.canvas
- .getByRole( 'document', {
- name: 'Block: Image',
- } )
- .locator( 'img' );
- await imageBlockImg.click();
-
- // Edit the custom field value in the alt textarea.
- const altInputArea = page
- .getByRole( 'tabpanel', { name: 'Settings' } )
- .getByLabel( 'Alternative text' );
- await expect( altInputArea ).not.toHaveAttribute( 'readonly' );
- await altInputArea.fill( 'new value' );
-
- // Check that the image alt attribute didn't change.
- const [ imageBlockObject ] = await editor.getBlocks();
- expect( imageBlockObject.attributes.alt ).toBe(
- 'default alt value'
- );
- // Check the value of the custom field is being updated by visiting the frontend.
- const previewPage = await editor.openPreviewPage();
- await expect(
- previewPage.locator( '#image-alt-binding img' )
- ).toHaveAttribute( 'alt', 'new value' );
- } );
- } );
- } );
-
- test.describe( 'Sources registration', () => {
- test.beforeEach( async ( { admin } ) => {
- await admin.createNewPost( { title: 'Test bindings' } );
- } );
-
- test( 'should show the label of a source only registered in the server', async ( {
- editor,
- page,
- } ) => {
- await editor.insertBlock( {
- name: 'core/paragraph',
- attributes: {
- metadata: {
- bindings: {
- content: {
- source: 'core/server-source',
- },
- },
- },
- },
- } );
-
- const bindingsPanel = page.locator(
- '.block-editor-bindings__panel'
- );
- await expect( bindingsPanel ).toContainText( 'Server Source' );
- } );
- } );
-} );
diff --git a/test/e2e/specs/editor/various/block-bindings/custom-sources.spec.js b/test/e2e/specs/editor/various/block-bindings/custom-sources.spec.js
new file mode 100644
index 00000000000000..d6563ce9cb5f5f
--- /dev/null
+++ b/test/e2e/specs/editor/various/block-bindings/custom-sources.spec.js
@@ -0,0 +1,1204 @@
+/**
+ * External dependencies
+ */
+const path = require( 'path' );
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Registered sources', () => {
+ let imagePlaceholderSrc;
+ let testingImgSrc;
+ test.beforeAll( async ( { requestUtils } ) => {
+ await requestUtils.activateTheme(
+ 'gutenberg-test-themes/block-bindings'
+ );
+ await requestUtils.activatePlugin( 'gutenberg-test-block-bindings' );
+ await requestUtils.deleteAllMedia();
+ const placeholderMedia = await requestUtils.uploadMedia(
+ path.join( './test/e2e/assets', '10x10_e2e_test_image_z9T8jK.png' )
+ );
+ imagePlaceholderSrc = placeholderMedia.source_url;
+
+ const testingImgMedia = await requestUtils.uploadMedia(
+ path.join(
+ './test/e2e/assets',
+ '1024x768_e2e_test_image_size.jpeg'
+ )
+ );
+ testingImgSrc = testingImgMedia.source_url;
+ } );
+
+ test.beforeEach( async ( { admin } ) => {
+ await admin.createNewPost( { title: 'Test bindings' } );
+ } );
+
+ test.afterEach( async ( { requestUtils } ) => {
+ await requestUtils.deleteAllPosts();
+ } );
+
+ test.afterAll( async ( { requestUtils } ) => {
+ await requestUtils.deleteAllMedia();
+ await requestUtils.activateTheme( 'twentytwentyone' );
+ await requestUtils.deactivatePlugin( 'gutenberg-test-block-bindings' );
+ } );
+
+ test.describe( 'getValues', () => {
+ test( 'should show the returned value in paragraph content', async ( {
+ editor,
+ } ) => {
+ await editor.insertBlock( {
+ name: 'core/paragraph',
+ attributes: {
+ anchor: 'connected-paragraph',
+ content: 'paragraph default content',
+ metadata: {
+ bindings: {
+ content: {
+ source: 'testing/complete-source',
+ args: { key: 'text_field' },
+ },
+ },
+ },
+ },
+ } );
+ const paragraphBlock = editor.canvas.getByRole( 'document', {
+ name: 'Block: Paragraph',
+ } );
+ await expect( paragraphBlock ).toHaveText( 'Text Field Value' );
+
+ // Check the frontend shows the value of the custom field.
+ const previewPage = await editor.openPreviewPage();
+ await expect(
+ previewPage.locator( '#connected-paragraph' )
+ ).toHaveText( 'Text Field Value' );
+ } );
+ test( 'should show the returned value in heading content', async ( {
+ editor,
+ } ) => {
+ await editor.insertBlock( {
+ name: 'core/heading',
+ attributes: {
+ anchor: 'connected-heading',
+ content: 'heading default content',
+ metadata: {
+ bindings: {
+ content: {
+ source: 'testing/complete-source',
+ args: { key: 'text_field' },
+ },
+ },
+ },
+ },
+ } );
+ const headingBlock = editor.canvas.getByRole( 'document', {
+ name: 'Block: Heading',
+ } );
+ await expect( headingBlock ).toHaveText( 'Text Field Value' );
+
+ // Check the frontend shows the value of the custom field.
+ const previewPage = await editor.openPreviewPage();
+ await expect(
+ previewPage.locator( '#connected-heading' )
+ ).toHaveText( 'Text Field Value' );
+ } );
+ test( 'should show the returned values in button attributes', async ( {
+ editor,
+ } ) => {
+ await editor.insertBlock( {
+ name: 'core/buttons',
+ innerBlocks: [
+ {
+ name: 'core/button',
+ attributes: {
+ anchor: 'connected-button',
+ text: 'button default text',
+ url: '#default-url',
+ metadata: {
+ bindings: {
+ text: {
+ source: 'testing/complete-source',
+ args: { key: 'text_field' },
+ },
+ url: {
+ source: 'testing/complete-source',
+ args: { key: 'url_field' },
+ },
+ },
+ },
+ },
+ },
+ ],
+ } );
+
+ // Check the frontend uses the values of the custom fields.
+ const previewPage = await editor.openPreviewPage();
+ const buttonDom = previewPage.locator( '#connected-button a' );
+ await expect( buttonDom ).toHaveText( 'Text Field Value' );
+ await expect( buttonDom ).toHaveAttribute( 'href', testingImgSrc );
+ } );
+ test( 'should show the returned values in image attributes', async ( {
+ editor,
+ page,
+ } ) => {
+ await editor.insertBlock( {
+ name: 'core/image',
+ attributes: {
+ anchor: 'connected-image',
+ url: imagePlaceholderSrc,
+ alt: 'default alt value',
+ title: 'default title value',
+ metadata: {
+ bindings: {
+ url: {
+ source: 'testing/complete-source',
+ args: { key: 'url_field' },
+ },
+ alt: {
+ source: 'testing/complete-source',
+ args: { key: 'text_field' },
+ },
+ },
+ },
+ },
+ } );
+ const imageBlockImg = editor.canvas
+ .getByRole( 'document', {
+ name: 'Block: Image',
+ } )
+ .locator( 'img' );
+ await imageBlockImg.click();
+
+ // Image src is the custom field value.
+ await expect( imageBlockImg ).toHaveAttribute(
+ 'src',
+ testingImgSrc
+ );
+
+ // Alt textarea should have the custom field value.
+ const altValue = await page
+ .getByRole( 'tabpanel', { name: 'Settings' } )
+ .getByLabel( 'Alternative text' )
+ .inputValue();
+ expect( altValue ).toBe( 'Text Field Value' );
+
+ // Title input should have the original value.
+ const advancedButton = page
+ .getByRole( 'tabpanel', { name: 'Settings' } )
+ .getByRole( 'button', {
+ name: 'Advanced',
+ } );
+ const isAdvancedPanelOpen =
+ await advancedButton.getAttribute( 'aria-expanded' );
+ if ( isAdvancedPanelOpen === 'false' ) {
+ await advancedButton.click();
+ }
+ const titleValue = await page
+ .getByRole( 'tabpanel', { name: 'Settings' } )
+ .getByLabel( 'Title attribute' )
+ .inputValue();
+ expect( titleValue ).toBe( 'default title value' );
+
+ // Check the frontend uses the values of the custom fields.
+ const previewPage = await editor.openPreviewPage();
+ const imageDom = previewPage.locator( '#connected-image img' );
+ await expect( imageDom ).toHaveAttribute( 'src', testingImgSrc );
+ await expect( imageDom ).toHaveAttribute(
+ 'alt',
+ 'Text Field Value'
+ );
+ await expect( imageDom ).toHaveAttribute(
+ 'title',
+ 'default title value'
+ );
+ } );
+ test( 'should fall back to source label when `getValues` is undefined', async ( {
+ editor,
+ } ) => {
+ await editor.insertBlock( {
+ name: 'core/paragraph',
+ attributes: {
+ content: 'paragraph default content',
+ metadata: {
+ bindings: {
+ content: {
+ source: 'testing/server-only-source',
+ args: { key: 'text_field' },
+ },
+ },
+ },
+ },
+ } );
+ const paragraphBlock = editor.canvas.getByRole( 'document', {
+ name: 'Block: Paragraph',
+ } );
+ await expect( paragraphBlock ).toHaveText( 'Server Source' );
+ } );
+ test( 'should fall back to null when `getValues` is undefined in URL attributes', async ( {
+ editor,
+ } ) => {
+ await editor.insertBlock( {
+ name: 'core/image',
+ attributes: {
+ metadata: {
+ bindings: {
+ url: {
+ source: 'testing/server-only-source',
+ args: { key: 'url_field' },
+ },
+ },
+ },
+ },
+ } );
+ const imageBlock = editor.canvas.getByRole( 'document', {
+ name: 'Block: Image',
+ } );
+ await expect(
+ imageBlock.locator( '.components-placeholder__fieldset' )
+ ).toHaveText( 'Connected to Server Source' );
+ } );
+ } );
+
+ test.describe( 'should lock editing', () => {
+ // Logic reused accross all the tests that check paragraph editing is locked.
+ async function testParagraphControlsAreLocked( {
+ source,
+ editor,
+ page,
+ } ) {
+ await editor.insertBlock( {
+ name: 'core/paragraph',
+ attributes: {
+ content: 'paragraph default content',
+ metadata: {
+ bindings: {
+ content: {
+ source,
+ args: { key: 'text_field' },
+ },
+ },
+ },
+ },
+ } );
+ const paragraphBlock = editor.canvas.getByRole( 'document', {
+ name: 'Block: Paragraph',
+ } );
+ await paragraphBlock.click();
+
+ // Alignment controls exist.
+ await expect(
+ page
+ .getByRole( 'toolbar', { name: 'Block tools' } )
+ .getByRole( 'button', { name: 'Align text' } )
+ ).toBeVisible();
+
+ // Format controls don't exist.
+ await expect(
+ page
+ .getByRole( 'toolbar', { name: 'Block tools' } )
+ .getByRole( 'button', {
+ name: 'Bold',
+ } )
+ ).toBeHidden();
+
+ // Paragraph is not editable.
+ await expect( paragraphBlock ).toHaveAttribute(
+ 'contenteditable',
+ 'false'
+ );
+ }
+ test.describe( 'canUserEditValue returns false', () => {
+ test( 'paragraph', async ( { editor, page } ) => {
+ await testParagraphControlsAreLocked( {
+ source: 'testing/can-user-edit-false',
+ editor,
+ page,
+ } );
+ } );
+ test( 'heading', async ( { editor, page } ) => {
+ await editor.insertBlock( {
+ name: 'core/heading',
+ attributes: {
+ content: 'heading default content',
+ metadata: {
+ bindings: {
+ content: {
+ source: 'testing/can-user-edit-false',
+ args: { key: 'text_field' },
+ },
+ },
+ },
+ },
+ } );
+ const headingBlock = editor.canvas.getByRole( 'document', {
+ name: 'Block: Heading',
+ } );
+ await headingBlock.click();
+
+ // Alignment controls exist.
+ await expect(
+ page
+ .getByRole( 'toolbar', { name: 'Block tools' } )
+ .getByRole( 'button', { name: 'Align text' } )
+ ).toBeVisible();
+
+ // Format controls don't exist.
+ await expect(
+ page
+ .getByRole( 'toolbar', { name: 'Block tools' } )
+ .getByRole( 'button', {
+ name: 'Bold',
+ } )
+ ).toBeHidden();
+
+ // Heading is not editable.
+ await expect( headingBlock ).toHaveAttribute(
+ 'contenteditable',
+ 'false'
+ );
+ } );
+ test( 'button', async ( { editor, page } ) => {
+ await editor.insertBlock( {
+ name: 'core/buttons',
+ innerBlocks: [
+ {
+ name: 'core/button',
+ attributes: {
+ text: 'button default text',
+ url: '#default-url',
+ metadata: {
+ bindings: {
+ text: {
+ source: 'testing/can-user-edit-false',
+ args: { key: 'text_field' },
+ },
+ url: {
+ source: 'testing/can-user-edit-false',
+ args: { key: 'url_field' },
+ },
+ },
+ },
+ },
+ },
+ ],
+ } );
+ const buttonBlock = editor.canvas
+ .getByRole( 'document', {
+ name: 'Block: Button',
+ exact: true,
+ } )
+ .getByRole( 'textbox' );
+ await buttonBlock.click();
+
+ // Alignment controls are visible.
+ await expect(
+ page
+ .getByRole( 'toolbar', { name: 'Block tools' } )
+ .getByRole( 'button', { name: 'Align text' } )
+ ).toBeVisible();
+
+ // Format controls don't exist.
+ await expect(
+ page
+ .getByRole( 'toolbar', { name: 'Block tools' } )
+ .getByRole( 'button', {
+ name: 'Bold',
+ } )
+ ).toBeHidden();
+
+ // Button is not editable.
+ await expect( buttonBlock ).toHaveAttribute(
+ 'contenteditable',
+ 'false'
+ );
+
+ // Link controls don't exist.
+ await expect(
+ page
+ .getByRole( 'toolbar', { name: 'Block tools' } )
+ .getByRole( 'button', { name: 'Link' } )
+ ).toBeHidden();
+ await expect(
+ page
+ .getByRole( 'toolbar', { name: 'Block tools' } )
+ .getByRole( 'button', { name: 'Unlink' } )
+ ).toBeHidden();
+ } );
+ test( 'image', async ( { editor, page } ) => {
+ await editor.insertBlock( {
+ name: 'core/image',
+ attributes: {
+ url: imagePlaceholderSrc,
+ alt: 'default alt value',
+ title: 'default title value',
+ metadata: {
+ bindings: {
+ url: {
+ source: 'testing/can-user-edit-false',
+ args: { key: 'url_field' },
+ },
+ alt: {
+ source: 'testing/can-user-edit-false',
+ args: { key: 'text_field' },
+ },
+ title: {
+ source: 'testing/can-user-edit-false',
+ args: { key: 'text_field' },
+ },
+ },
+ },
+ },
+ } );
+ const imageBlock = editor.canvas.getByRole( 'document', {
+ name: 'Block: Image',
+ } );
+ await imageBlock.click();
+
+ // Replace controls don't exist.
+ await expect(
+ page
+ .getByRole( 'toolbar', { name: 'Block tools' } )
+ .getByRole( 'button', {
+ name: 'Replace',
+ } )
+ ).toBeHidden();
+
+ // Image placeholder doesn't show the upload button.
+ await expect(
+ imageBlock.getByRole( 'button', { name: 'Upload' } )
+ ).toBeHidden();
+
+ // Alt textarea is disabled and with the custom field value.
+ await expect(
+ page
+ .getByRole( 'tabpanel', { name: 'Settings' } )
+ .getByLabel( 'Alternative text' )
+ ).toHaveAttribute( 'readonly' );
+ const altValue = await page
+ .getByRole( 'tabpanel', { name: 'Settings' } )
+ .getByLabel( 'Alternative text' )
+ .inputValue();
+ expect( altValue ).toBe( 'Text Field Value' );
+
+ // Title input is enabled and with the original value.
+ await page
+ .getByRole( 'tabpanel', { name: 'Settings' } )
+ .getByRole( 'button', { name: 'Advanced' } )
+ .click();
+ await expect(
+ page
+ .getByRole( 'tabpanel', { name: 'Settings' } )
+ .getByLabel( 'Title attribute' )
+ ).toHaveAttribute( 'readonly' );
+ const titleValue = await page
+ .getByRole( 'tabpanel', { name: 'Settings' } )
+ .getByLabel( 'Title attribute' )
+ .inputValue();
+ expect( titleValue ).toBe( 'Text Field Value' );
+ } );
+ } );
+ // The following tests just check the paragraph and assume is the case for the rest of the blocks.
+ test( 'canUserEditValue is not defined', async ( { editor, page } ) => {
+ await testParagraphControlsAreLocked( {
+ source: 'testing/can-user-edit-undefined',
+ editor,
+ page,
+ } );
+ } );
+ test( 'setValues is not defined', async ( { editor, page } ) => {
+ await testParagraphControlsAreLocked( {
+ source: 'testing/complete-source-undefined',
+ editor,
+ page,
+ } );
+ } );
+ test( 'source is not defined', async ( { editor, page } ) => {
+ await testParagraphControlsAreLocked( {
+ source: 'testing/undefined-source',
+ editor,
+ page,
+ } );
+ } );
+ } );
+
+ // Use `core/post-meta` source to test editing to avoid overcomplicating custom sources.
+ // It needs a source that can be consumed and edited from the server and the editor.
+ test.describe( 'setValues', () => {
+ test( 'should be possible to edit the value from paragraph content', async ( {
+ editor,
+ } ) => {
+ await editor.insertBlock( {
+ name: 'core/paragraph',
+ attributes: {
+ anchor: 'connected-paragraph',
+ content: 'paragraph default content',
+ metadata: {
+ bindings: {
+ content: {
+ source: 'core/post-meta',
+ args: { key: 'text_custom_field' },
+ },
+ },
+ },
+ },
+ } );
+ const paragraphBlock = editor.canvas.getByRole( 'document', {
+ name: 'Block: Paragraph',
+ } );
+
+ await expect( paragraphBlock ).toHaveAttribute(
+ 'contenteditable',
+ 'true'
+ );
+ await paragraphBlock.fill( 'new value' );
+ // Check that the paragraph content attribute didn't change.
+ const [ paragraphBlockObject ] = await editor.getBlocks();
+ expect( paragraphBlockObject.attributes.content ).toBe(
+ 'paragraph default content'
+ );
+ // Check the value of the custom field is being updated by visiting the frontend.
+ const previewPage = await editor.openPreviewPage();
+ await expect(
+ previewPage.locator( '#connected-paragraph' )
+ ).toHaveText( 'new value' );
+ } );
+ // Related issue: https://github.com/WordPress/gutenberg/issues/62347
+ test( 'should be possible to use symbols and numbers as the custom field value', async ( {
+ editor,
+ } ) => {
+ await editor.insertBlock( {
+ name: 'core/paragraph',
+ attributes: {
+ anchor: 'paragraph-binding',
+ content: 'paragraph default content',
+ metadata: {
+ bindings: {
+ content: {
+ source: 'core/post-meta',
+ args: { key: 'text_custom_field' },
+ },
+ },
+ },
+ },
+ } );
+ const paragraphBlock = editor.canvas.getByRole( 'document', {
+ name: 'Block: Paragraph',
+ } );
+
+ await expect( paragraphBlock ).toHaveAttribute(
+ 'contenteditable',
+ 'true'
+ );
+ await paragraphBlock.fill( '$10.00' );
+ // Check the value of the custom field is being updated by visiting the frontend.
+ const previewPage = await editor.openPreviewPage();
+ await expect(
+ previewPage.locator( '#paragraph-binding' )
+ ).toHaveText( '$10.00' );
+ } );
+ test( 'should be possible to edit the value of the url custom field from the button', async ( {
+ editor,
+ page,
+ pageUtils,
+ } ) => {
+ await editor.insertBlock( {
+ name: 'core/buttons',
+ innerBlocks: [
+ {
+ name: 'core/button',
+ attributes: {
+ anchor: 'button-url-binding',
+ text: 'button default text',
+ url: '#default-url',
+ metadata: {
+ bindings: {
+ url: {
+ source: 'core/post-meta',
+ args: { key: 'url_custom_field' },
+ },
+ },
+ },
+ },
+ },
+ ],
+ } );
+
+ // Edit the url.
+ const buttonBlock = editor.canvas
+ .getByRole( 'document', {
+ name: 'Block: Button',
+ exact: true,
+ } )
+ .getByRole( 'textbox' );
+ await buttonBlock.click();
+ await page
+ .getByRole( 'button', { name: 'Edit link', exact: true } )
+ .click();
+ await page
+ .getByPlaceholder( 'Search or type URL' )
+ .fill( '#url-custom-field-modified' );
+ await pageUtils.pressKeys( 'Enter' );
+
+ // Check that the button url attribute didn't change.
+ const [ buttonsObject ] = await editor.getBlocks();
+ expect( buttonsObject.innerBlocks[ 0 ].attributes.url ).toBe(
+ '#default-url'
+ );
+ // Check the value of the custom field is being updated by visiting the frontend.
+ const previewPage = await editor.openPreviewPage();
+ await expect(
+ previewPage.locator( '#button-url-binding a' )
+ ).toHaveAttribute( 'href', '#url-custom-field-modified' );
+ } );
+ test( 'should be possible to edit the value of the url custom field from the image', async ( {
+ editor,
+ page,
+ pageUtils,
+ requestUtils,
+ } ) => {
+ const customFieldMedia = await requestUtils.uploadMedia(
+ path.join(
+ './test/e2e/assets',
+ '1024x768_e2e_test_image_size.jpeg'
+ )
+ );
+ testingImgSrc = customFieldMedia.source_url;
+
+ await editor.insertBlock( {
+ name: 'core/image',
+ attributes: {
+ anchor: 'image-url-binding',
+ url: imagePlaceholderSrc,
+ alt: 'default alt value',
+ title: 'default title value',
+ metadata: {
+ bindings: {
+ url: {
+ source: 'core/post-meta',
+ args: { key: 'url_custom_field' },
+ },
+ },
+ },
+ },
+ } );
+
+ // Edit image url.
+ await page
+ .getByRole( 'toolbar', { name: 'Block tools' } )
+ .getByRole( 'button', {
+ name: 'Replace',
+ } )
+ .click();
+ await page
+ .getByRole( 'button', { name: 'Edit link', exact: true } )
+ .click();
+ await page
+ .getByPlaceholder( 'Search or type URL' )
+ .fill( testingImgSrc );
+ await pageUtils.pressKeys( 'Enter' );
+
+ // Check that the image url attribute didn't change and still uses the placeholder.
+ const [ imageBlockObject ] = await editor.getBlocks();
+ expect( imageBlockObject.attributes.url ).toBe(
+ imagePlaceholderSrc
+ );
+
+ // Check the value of the custom field is being updated by visiting the frontend.
+ const previewPage = await editor.openPreviewPage();
+ await expect(
+ previewPage.locator( '#image-url-binding img' )
+ ).toHaveAttribute( 'src', testingImgSrc );
+ } );
+ test( 'should be possible to edit the value of the text custom field from the image alt', async ( {
+ editor,
+ page,
+ } ) => {
+ await editor.insertBlock( {
+ name: 'core/image',
+ attributes: {
+ anchor: 'image-alt-binding',
+ url: imagePlaceholderSrc,
+ alt: 'default alt value',
+ metadata: {
+ bindings: {
+ alt: {
+ source: 'core/post-meta',
+ args: { key: 'text_custom_field' },
+ },
+ },
+ },
+ },
+ } );
+ const imageBlockImg = editor.canvas
+ .getByRole( 'document', {
+ name: 'Block: Image',
+ } )
+ .locator( 'img' );
+ await imageBlockImg.click();
+
+ // Edit the custom field value in the alt textarea.
+ const altInputArea = page
+ .getByRole( 'tabpanel', { name: 'Settings' } )
+ .getByLabel( 'Alternative text' );
+ await expect( altInputArea ).not.toHaveAttribute( 'readonly' );
+ await altInputArea.fill( 'new value' );
+
+ // Check that the image alt attribute didn't change.
+ const [ imageBlockObject ] = await editor.getBlocks();
+ expect( imageBlockObject.attributes.alt ).toBe(
+ 'default alt value'
+ );
+ // Check the value of the custom field is being updated by visiting the frontend.
+ const previewPage = await editor.openPreviewPage();
+ await expect(
+ previewPage.locator( '#image-alt-binding img' )
+ ).toHaveAttribute( 'alt', 'new value' );
+ } );
+ } );
+
+ test.describe( 'getFieldsList', () => {
+ test( 'should be possible to update attribute value through bindings UI', async ( {
+ editor,
+ page,
+ } ) => {
+ await editor.insertBlock( {
+ name: 'core/paragraph',
+ } );
+ await page.getByLabel( 'Attributes options' ).click();
+ await page
+ .getByRole( 'menuitemcheckbox', {
+ name: 'Show content',
+ } )
+ .click();
+ await page.getByRole( 'button', { name: 'content' } ).click();
+ await page
+ .getByRole( 'menuitemradio' )
+ .filter( { hasText: 'Text Field Label' } )
+ .click();
+ const paragraphBlock = editor.canvas.getByRole( 'document', {
+ name: 'Block: Paragraph',
+ } );
+ await expect( paragraphBlock ).toHaveText( 'Text Field Value' );
+ } );
+ test( 'should be possible to connect the paragraph content', async ( {
+ editor,
+ page,
+ } ) => {
+ await editor.insertBlock( {
+ name: 'core/paragraph',
+ } );
+ await page.getByLabel( 'Attributes options' ).click();
+ const contentAttribute = page.getByRole( 'menuitemcheckbox', {
+ name: 'Show content',
+ } );
+ await expect( contentAttribute ).toBeVisible();
+ } );
+ test( 'should be possible to connect the heading content', async ( {
+ editor,
+ page,
+ } ) => {
+ await editor.insertBlock( {
+ name: 'core/heading',
+ } );
+ await page.getByLabel( 'Attributes options' ).click();
+ const contentAttribute = page.getByRole( 'menuitemcheckbox', {
+ name: 'Show content',
+ } );
+ await expect( contentAttribute ).toBeVisible();
+ } );
+ test( 'should be possible to connect the button supported attributes', async ( {
+ editor,
+ page,
+ } ) => {
+ await editor.insertBlock( {
+ name: 'core/buttons',
+ innerBlocks: [
+ {
+ name: 'core/button',
+ },
+ ],
+ } );
+ await editor.canvas
+ .getByRole( 'document', {
+ name: 'Block: Button',
+ exact: true,
+ } )
+ .getByRole( 'textbox' )
+ .click();
+ await page
+ .getByRole( 'tabpanel', {
+ name: 'Settings',
+ } )
+ .getByLabel( 'Attributes options' )
+ .click();
+ const urlAttribute = page.getByRole( 'menuitemcheckbox', {
+ name: 'Show url',
+ } );
+ await expect( urlAttribute ).toBeVisible();
+ const textAttribute = page.getByRole( 'menuitemcheckbox', {
+ name: 'Show text',
+ } );
+ await expect( textAttribute ).toBeVisible();
+ const linkTargetAttribute = page.getByRole( 'menuitemcheckbox', {
+ name: 'Show linkTarget',
+ } );
+ await expect( linkTargetAttribute ).toBeVisible();
+ const relAttribute = page.getByRole( 'menuitemcheckbox', {
+ name: 'Show rel',
+ } );
+ await expect( relAttribute ).toBeVisible();
+ // Check not supported attributes are not included.
+ const tagNameAttribute = page.getByRole( 'menuitemcheckbox', {
+ name: 'Show tagName',
+ } );
+ await expect( tagNameAttribute ).toBeHidden();
+ } );
+ test( 'should be possible to connect the image supported attributes', async ( {
+ editor,
+ page,
+ } ) => {
+ await editor.insertBlock( {
+ name: 'core/image',
+ } );
+ await page
+ .getByRole( 'tabpanel', {
+ name: 'Settings',
+ } )
+ .getByLabel( 'Attributes options' )
+ .click();
+ const urlAttribute = page.getByRole( 'menuitemcheckbox', {
+ name: 'Show url',
+ } );
+ await expect( urlAttribute ).toBeVisible();
+ const idAttribute = page.getByRole( 'menuitemcheckbox', {
+ name: 'Show id',
+ } );
+ await expect( idAttribute ).toBeVisible();
+ const titleAttribute = page.getByRole( 'menuitemcheckbox', {
+ name: 'Show title',
+ } );
+ await expect( titleAttribute ).toBeVisible();
+ const altAttribute = page.getByRole( 'menuitemcheckbox', {
+ name: 'Show alt',
+ } );
+ await expect( altAttribute ).toBeVisible();
+ // Check not supported attributes are not included.
+ const linkClassAttribute = page.getByRole( 'menuitemcheckbox', {
+ name: 'Show linkClass',
+ } );
+ await expect( linkClassAttribute ).toBeHidden();
+ } );
+ test( 'should show all the available fields in the dropdown UI', async ( {
+ editor,
+ page,
+ } ) => {
+ await editor.insertBlock( {
+ name: 'core/paragraph',
+ attributes: {
+ content: 'default value',
+ metadata: {
+ bindings: {
+ content: {
+ source: 'testing/complete-source',
+ args: { key: 'text_field' },
+ },
+ },
+ },
+ },
+ } );
+ await page.getByRole( 'button', { name: 'content' } ).click();
+ const textField = page
+ .getByRole( 'menuitemradio' )
+ .filter( { hasText: 'Text Field Label' } );
+ await expect( textField ).toBeVisible();
+ await expect( textField ).toBeChecked();
+ const urlField = page
+ .getByRole( 'menuitemradio' )
+ .filter( { hasText: 'URL Field Label' } );
+ await expect( urlField ).toBeVisible();
+ await expect( urlField ).not.toBeChecked();
+ } );
+ test( 'should show the connected fields in the attributes panel', async ( {
+ editor,
+ page,
+ } ) => {
+ await editor.insertBlock( {
+ name: 'core/paragraph',
+ attributes: {
+ content: 'default value',
+ metadata: {
+ bindings: {
+ content: {
+ source: 'testing/complete-source',
+ args: { key: 'text_field' },
+ },
+ },
+ },
+ },
+ } );
+ const contentButton = page.getByRole( 'button', {
+ name: 'content',
+ } );
+ await expect( contentButton ).toContainText( 'Text Field Label' );
+ } );
+ } );
+
+ test.describe( 'RichText workflows', () => {
+ test( 'should add empty paragraph block when pressing enter in paragraph', async ( {
+ editor,
+ page,
+ } ) => {
+ await editor.insertBlock( {
+ name: 'core/paragraph',
+ attributes: {
+ content: 'paragraph default content',
+ metadata: {
+ bindings: {
+ content: {
+ source: 'testing/complete-source',
+ args: { key: 'text_field' },
+ },
+ },
+ },
+ },
+ } );
+ // Select the paragraph and press Enter at the end of it.
+ const paragraph = editor.canvas.getByRole( 'document', {
+ name: 'Block: Paragraph',
+ } );
+ await editor.selectBlocks( paragraph );
+ await page.keyboard.press( 'End' );
+ await page.keyboard.press( 'Enter' );
+ const [ initialParagraph, newEmptyParagraph ] = await editor.canvas
+ .locator( '[data-type="core/paragraph"]' )
+ .all();
+ await expect( initialParagraph ).toHaveText( 'Text Field Value' );
+ await expect( newEmptyParagraph ).toHaveText( '' );
+ await expect( newEmptyParagraph ).toBeEditable();
+ } );
+ test( 'should add empty paragraph block when pressing enter in heading', async ( {
+ editor,
+ page,
+ } ) => {
+ await editor.insertBlock( {
+ name: 'core/heading',
+ attributes: {
+ anchor: 'heading-binding',
+ content: 'heading default content',
+ metadata: {
+ bindings: {
+ content: {
+ source: 'testing/complete-source',
+ args: { key: 'text_field' },
+ },
+ },
+ },
+ },
+ } );
+
+ // Select the heading and press Enter at the end of it.
+ const heading = editor.canvas.getByRole( 'document', {
+ name: 'Block: Heading',
+ } );
+ await editor.selectBlocks( heading );
+ await page.keyboard.press( 'End' );
+ await page.keyboard.press( 'Enter' );
+ // Can't use `editor.getBlocks` because it doesn't return the meta value shown in the editor.
+ const [ initialHeading, newEmptyParagraph ] = await editor.canvas
+ .locator( '[data-block]' )
+ .all();
+ // First block should be the original block.
+ await expect( initialHeading ).toHaveAttribute(
+ 'data-type',
+ 'core/heading'
+ );
+ await expect( initialHeading ).toHaveText( 'Text Field Value' );
+ // Second block should be an empty paragraph block.
+ await expect( newEmptyParagraph ).toHaveAttribute(
+ 'data-type',
+ 'core/paragraph'
+ );
+ await expect( newEmptyParagraph ).toHaveText( '' );
+ await expect( newEmptyParagraph ).toBeEditable();
+ } );
+ test( 'should add empty button block when pressing enter in button', async ( {
+ editor,
+ page,
+ } ) => {
+ await editor.insertBlock( {
+ name: 'core/buttons',
+ innerBlocks: [
+ {
+ name: 'core/button',
+ attributes: {
+ anchor: 'button-text-binding',
+ text: 'button default text',
+ url: '#default-url',
+ metadata: {
+ bindings: {
+ text: {
+ source: 'testing/complete-source',
+ args: { key: 'text_field' },
+ },
+ },
+ },
+ },
+ },
+ ],
+ } );
+ await editor.canvas
+ .getByRole( 'document', {
+ name: 'Block: Button',
+ exact: true,
+ } )
+ .getByRole( 'textbox' )
+ .click();
+ await page.keyboard.press( 'End' );
+ await page.keyboard.press( 'Enter' );
+ const [ initialButton, newEmptyButton ] = await editor.canvas
+ .locator( '[data-type="core/button"]' )
+ .all();
+ // First block should be the original block.
+ await expect( initialButton ).toHaveText( 'Text Field Value' );
+ // Second block should be an empty paragraph block.
+ await expect( newEmptyButton ).toHaveText( '' );
+ await expect( newEmptyButton ).toBeEditable();
+ } );
+ test( 'should show placeholder prompt when value is empty and can edit', async ( {
+ editor,
+ } ) => {
+ await editor.insertBlock( {
+ name: 'core/paragraph',
+ attributes: {
+ content: 'paragraph default content',
+ metadata: {
+ bindings: {
+ content: {
+ source: 'testing/complete-source',
+ args: { key: 'empty_field' },
+ },
+ },
+ },
+ },
+ } );
+
+ const paragraphBlock = editor.canvas.getByRole( 'document', {
+ // Aria-label is changed for empty paragraphs.
+ name: 'Empty empty_field; start writing to edit its value',
+ } );
+
+ await expect( paragraphBlock ).toBeEmpty();
+
+ const placeholder = paragraphBlock.locator( 'span' );
+ await expect( placeholder ).toHaveAttribute(
+ 'data-rich-text-placeholder',
+ 'Add Empty Field Label'
+ );
+ } );
+ test( 'should show source label when value is empty, cannot edit, and `getFieldsList` is undefined', async ( {
+ editor,
+ } ) => {
+ await editor.insertBlock( {
+ name: 'core/paragraph',
+ attributes: {
+ content: 'paragraph default content',
+ metadata: {
+ bindings: {
+ content: {
+ source: 'testing/can-user-edit-false',
+ args: { key: 'empty_field' },
+ },
+ },
+ },
+ },
+ } );
+ const paragraphBlock = editor.canvas.getByRole( 'document', {
+ // Aria-label is changed for empty paragraphs.
+ name: 'empty_field',
+ } );
+ await expect( paragraphBlock ).toBeEmpty();
+ const placeholder = paragraphBlock.locator( 'span' );
+ await expect( placeholder ).toHaveAttribute(
+ 'data-rich-text-placeholder',
+ 'Can User Edit: False'
+ );
+ } );
+ test( 'should show placeholder attribute over bindings placeholder', async ( {
+ editor,
+ } ) => {
+ await editor.insertBlock( {
+ name: 'core/paragraph',
+ attributes: {
+ placeholder: 'My custom placeholder',
+ content: 'paragraph default content',
+ metadata: {
+ bindings: {
+ content: {
+ source: 'testing/complete-source',
+ args: { key: 'empty_field' },
+ },
+ },
+ },
+ },
+ } );
+ const paragraphBlock = editor.canvas.getByRole( 'document', {
+ // Aria-label is changed for empty paragraphs.
+ name: 'empty_field',
+ } );
+
+ await expect( paragraphBlock ).toBeEmpty();
+
+ const placeholder = paragraphBlock.locator( 'span' );
+ await expect( placeholder ).toHaveAttribute(
+ 'data-rich-text-placeholder',
+ 'My custom placeholder'
+ );
+ } );
+ } );
+
+ test( 'should show the label of a source only registered in the server in blocks connected', async ( {
+ editor,
+ page,
+ } ) => {
+ await editor.insertBlock( {
+ name: 'core/paragraph',
+ attributes: {
+ metadata: {
+ bindings: {
+ content: {
+ source: 'testing/server-only-source',
+ },
+ },
+ },
+ },
+ } );
+
+ const contentButton = page.getByRole( 'button', {
+ name: 'content',
+ } );
+ await expect( contentButton ).toContainText( 'Server Source' );
+ } );
+ test( 'should show an "Invalid source" warning for not registered sources', async ( {
+ editor,
+ page,
+ } ) => {
+ await editor.insertBlock( {
+ name: 'core/paragraph',
+ attributes: {
+ metadata: {
+ bindings: {
+ content: {
+ source: 'testing/undefined-source',
+ },
+ },
+ },
+ },
+ } );
+
+ const contentButton = page.getByRole( 'button', {
+ name: 'content',
+ } );
+ await expect( contentButton ).toContainText( 'Invalid source' );
+ } );
+} );
diff --git a/test/e2e/specs/editor/various/block-bindings/post-meta.spec.js b/test/e2e/specs/editor/various/block-bindings/post-meta.spec.js
new file mode 100644
index 00000000000000..d82def6feb66bf
--- /dev/null
+++ b/test/e2e/specs/editor/various/block-bindings/post-meta.spec.js
@@ -0,0 +1,551 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Post Meta source', () => {
+ test.beforeAll( async ( { requestUtils } ) => {
+ await requestUtils.activateTheme(
+ 'gutenberg-test-themes/block-bindings'
+ );
+ await requestUtils.activatePlugin( 'gutenberg-test-block-bindings' );
+ } );
+
+ test.afterEach( async ( { requestUtils } ) => {
+ await requestUtils.deleteAllPosts();
+ } );
+
+ test.afterAll( async ( { requestUtils } ) => {
+ await requestUtils.deleteAllMedia();
+ await requestUtils.activateTheme( 'twentytwentyone' );
+ await requestUtils.deactivatePlugin( 'gutenberg-test-block-bindings' );
+ } );
+
+ test.describe( 'Movie CPT template', () => {
+ test.beforeEach( async ( { admin, editor } ) => {
+ await admin.visitSiteEditor( {
+ postId: 'gutenberg-test-themes/block-bindings//single-movie',
+ postType: 'wp_template',
+ canvas: 'edit',
+ } );
+ await editor.openDocumentSettingsSidebar();
+ } );
+
+ test.describe( 'Block attributes values', () => {
+ test( 'should not be possible to edit connected blocks', async ( {
+ editor,
+ } ) => {
+ await editor.insertBlock( {
+ name: 'core/paragraph',
+ attributes: {
+ content: 'fallback content',
+ metadata: {
+ bindings: {
+ content: {
+ source: 'core/post-meta',
+ args: {
+ key: 'movie_field',
+ },
+ },
+ },
+ },
+ },
+ } );
+ const paragraphBlock = editor.canvas.getByRole( 'document', {
+ name: 'Block: Paragraph',
+ } );
+ await expect( paragraphBlock ).toHaveAttribute(
+ 'contenteditable',
+ 'false'
+ );
+ } );
+ test( 'should show the default value if it is defined', async ( {
+ editor,
+ } ) => {
+ await editor.insertBlock( {
+ name: 'core/paragraph',
+ attributes: {
+ content: 'fallback content',
+ metadata: {
+ bindings: {
+ content: {
+ source: 'core/post-meta',
+ args: {
+ key: 'movie_field',
+ },
+ },
+ },
+ },
+ },
+ } );
+ const paragraphBlock = editor.canvas.getByRole( 'document', {
+ name: 'Block: Paragraph',
+ } );
+ await expect( paragraphBlock ).toHaveText(
+ 'Movie field default value'
+ );
+ } );
+ test( 'should fall back to the field label if the default value is not defined', async ( {
+ editor,
+ } ) => {
+ await editor.insertBlock( {
+ name: 'core/paragraph',
+ attributes: {
+ content: 'fallback content',
+ metadata: {
+ bindings: {
+ content: {
+ source: 'core/post-meta',
+ args: {
+ key: 'field_with_only_label',
+ },
+ },
+ },
+ },
+ },
+ } );
+ const paragraphBlock = editor.canvas.getByRole( 'document', {
+ name: 'Block: Paragraph',
+ } );
+ await expect( paragraphBlock ).toHaveText(
+ 'Field with only label'
+ );
+ } );
+ test( 'should fall back to the field key if the field label is not defined', async ( {
+ editor,
+ } ) => {
+ await editor.insertBlock( {
+ name: 'core/paragraph',
+ attributes: {
+ content: 'fallback content',
+ metadata: {
+ bindings: {
+ content: {
+ source: 'core/post-meta',
+ args: {
+ key: 'field_without_label_or_default',
+ },
+ },
+ },
+ },
+ },
+ } );
+ const paragraphBlock = editor.canvas.getByRole( 'document', {
+ name: 'Block: Paragraph',
+ } );
+ await expect( paragraphBlock ).toHaveText(
+ 'field_without_label_or_default'
+ );
+ } );
+ } );
+
+ test.describe( 'Attributes panel', () => {
+ test( 'should show the field label if it is defined', async ( {
+ editor,
+ page,
+ } ) => {
+ /**
+ * Create connection manually until this issue is solved:
+ * https://github.com/WordPress/gutenberg/pull/65604
+ *
+ * Once solved, block with the binding can be directly inserted.
+ */
+ await editor.insertBlock( {
+ name: 'core/paragraph',
+ } );
+ await page.getByLabel( 'Attributes options' ).click();
+ await page
+ .getByRole( 'menuitemcheckbox', {
+ name: 'Show content',
+ } )
+ .click();
+ const contentBinding = page.getByRole( 'button', {
+ name: 'content',
+ } );
+ await contentBinding.click();
+ await page
+ .getByRole( 'menuitemradio' )
+ .filter( { hasText: 'Movie field label' } )
+ .click();
+ await expect( contentBinding ).toContainText(
+ 'Movie field label'
+ );
+ } );
+ test( 'should fall back to the field key if the field label is not defined', async ( {
+ editor,
+ page,
+ } ) => {
+ /**
+ * Create connection manually until this issue is solved:
+ * https://github.com/WordPress/gutenberg/pull/65604
+ *
+ * Once solved, block with the binding can be directly inserted.
+ */
+ await editor.insertBlock( {
+ name: 'core/paragraph',
+ } );
+ await page.getByLabel( 'Attributes options' ).click();
+ await page
+ .getByRole( 'menuitemcheckbox', {
+ name: 'Show content',
+ } )
+ .click();
+ const contentBinding = page.getByRole( 'button', {
+ name: 'content',
+ } );
+ await contentBinding.click();
+ await page
+ .getByRole( 'menuitemradio' )
+ .filter( { hasText: 'field_without_label_or_default' } )
+ .click();
+ await expect( contentBinding ).toContainText(
+ 'field_without_label_or_default'
+ );
+ } );
+ } );
+
+ test.describe( 'Fields list dropdown', () => {
+ // Insert block and open the dropdown for every test.
+ test.beforeEach( async ( { editor, page } ) => {
+ await editor.insertBlock( {
+ name: 'core/paragraph',
+ } );
+ await page.getByLabel( 'Attributes options' ).click();
+ await page
+ .getByRole( 'menuitemcheckbox', {
+ name: 'Show content',
+ } )
+ .click();
+ await page
+ .getByRole( 'button', {
+ name: 'content',
+ } )
+ .click();
+ } );
+
+ test( 'should include movie fields in UI to connect attributes', async ( {
+ page,
+ } ) => {
+ const movieField = page
+ .getByRole( 'menuitemradio' )
+ .filter( { hasText: 'Movie field label' } );
+ await expect( movieField ).toBeVisible();
+ } );
+ test( 'should include global fields in UI to connect attributes', async ( {
+ page,
+ } ) => {
+ const globalField = page
+ .getByRole( 'menuitemradio' )
+ .filter( { hasText: 'text_custom_field' } );
+ await expect( globalField ).toBeVisible();
+ } );
+ test( 'should not include protected fields', async ( { page } ) => {
+ // Ensure the fields have loaded by checking the field is visible.
+ const globalField = page
+ .getByRole( 'menuitemradio' )
+ .filter( { hasText: 'text_custom_field' } );
+ await expect( globalField ).toBeVisible();
+ // Check the protected fields are not visible.
+ const protectedField = page
+ .getByRole( 'menuitemradio' )
+ .filter( { hasText: '_protected_field' } );
+ await expect( protectedField ).toBeHidden();
+ const showInRestFalseField = page
+ .getByRole( 'menuitemradio' )
+ .filter( { hasText: 'show_in_rest_false_field' } );
+ await expect( showInRestFalseField ).toBeHidden();
+ } );
+ test( 'should show the default value if it is defined', async ( {
+ page,
+ } ) => {
+ const fieldButton = page
+ .getByRole( 'menuitemradio' )
+ .filter( { hasText: 'Movie field label' } );
+ await expect( fieldButton ).toContainText(
+ 'Movie field default value'
+ );
+ } );
+ test( 'should not show anything if the default value is not defined', async ( {
+ page,
+ } ) => {
+ const fieldButton = page
+ .getByRole( 'menuitemradio' )
+ .filter( { hasText: 'Field with only label' } );
+ // Check it only contains the field label.
+ await expect( fieldButton ).toHaveText(
+ 'Field with only label'
+ );
+ } );
+ } );
+ } );
+
+ test.describe( 'Custom template', () => {
+ test.beforeEach( async ( { admin, editor } ) => {
+ await admin.visitSiteEditor( {
+ postId: 'gutenberg-test-themes/block-bindings//custom-template',
+ postType: 'wp_template',
+ canvas: 'edit',
+ } );
+ await editor.openDocumentSettingsSidebar();
+ } );
+
+ test( 'should not include post meta fields in UI to connect attributes', async ( {
+ editor,
+ page,
+ } ) => {
+ await editor.insertBlock( {
+ name: 'core/paragraph',
+ attributes: {
+ content: 'fallback content',
+ metadata: {
+ bindings: {
+ content: {
+ source: 'core/post-meta',
+ args: {
+ key: 'text_custom_field',
+ },
+ },
+ },
+ },
+ },
+ } );
+ await page
+ .getByRole( 'button', {
+ name: 'content',
+ } )
+ .click();
+ // Check the fields registered by other sources are there.
+ const customSourceField = page
+ .getByRole( 'menuitemradio' )
+ .filter( { hasText: 'Text Field Label' } );
+ await expect( customSourceField ).toBeVisible();
+ // Check the post meta fields are not visible.
+ const globalField = page
+ .getByRole( 'menuitemradio' )
+ .filter( { hasText: 'text_custom_field' } );
+ await expect( globalField ).toBeHidden();
+ const movieField = page
+ .getByRole( 'menuitemradio' )
+ .filter( { hasText: 'Movie field label' } );
+ await expect( movieField ).toBeHidden();
+ } );
+ test( 'should show the key in attributes connected to post meta', async ( {
+ editor,
+ } ) => {
+ await editor.insertBlock( {
+ name: 'core/paragraph',
+ attributes: {
+ content: 'fallback content',
+ metadata: {
+ bindings: {
+ content: {
+ source: 'core/post-meta',
+ args: {
+ key: 'text_custom_field',
+ },
+ },
+ },
+ },
+ },
+ } );
+ const paragraphBlock = editor.canvas.getByRole( 'document', {
+ name: 'Block: Paragraph',
+ } );
+ await expect( paragraphBlock ).toHaveText( 'text_custom_field' );
+ } );
+ } );
+
+ test.describe( 'Movie CPT post', () => {
+ test.beforeEach( async ( { admin } ) => {
+ // CHECK HOW TO CREATE A MOVIE.
+ await admin.createNewPost( {
+ postType: 'movie',
+ title: 'Test bindings',
+ } );
+ } );
+
+ test( 'should show the custom field value of that specific post', async ( {
+ editor,
+ } ) => {
+ await editor.insertBlock( {
+ name: 'core/paragraph',
+ attributes: {
+ anchor: 'connected-paragraph',
+ content: 'fallback content',
+ metadata: {
+ bindings: {
+ content: {
+ source: 'core/post-meta',
+ args: {
+ key: 'movie_field',
+ },
+ },
+ },
+ },
+ },
+ } );
+ const paragraphBlock = editor.canvas.getByRole( 'document', {
+ name: 'Block: Paragraph',
+ } );
+ await expect( paragraphBlock ).toHaveText(
+ 'Movie field default value'
+ );
+ // Check the frontend shows the value of the custom field.
+ const previewPage = await editor.openPreviewPage();
+ await expect(
+ previewPage.locator( '#connected-paragraph' )
+ ).toHaveText( 'Movie field default value' );
+ } );
+ test( 'should fall back to the key when custom field is not accessible', async ( {
+ editor,
+ } ) => {
+ await editor.insertBlock( {
+ name: 'core/paragraph',
+ attributes: {
+ content: 'fallback content',
+ metadata: {
+ bindings: {
+ content: {
+ source: 'core/post-meta',
+ args: {
+ key: 'unaccessible_field',
+ },
+ },
+ },
+ },
+ },
+ } );
+ const paragraphBlock = editor.canvas.getByRole( 'document', {
+ name: 'Block: Paragraph',
+ } );
+ await expect( paragraphBlock ).toHaveText( 'unaccessible_field' );
+ await expect( paragraphBlock ).toHaveAttribute(
+ 'contenteditable',
+ 'false'
+ );
+ } );
+ test( 'should not show or edit the value of a protected field', async ( {
+ editor,
+ } ) => {
+ await editor.insertBlock( {
+ name: 'core/paragraph',
+ attributes: {
+ content: 'fallback content',
+ metadata: {
+ bindings: {
+ content: {
+ source: 'core/post-meta',
+ args: {
+ key: '_protected_field',
+ },
+ },
+ },
+ },
+ },
+ } );
+ const paragraphBlock = editor.canvas.getByRole( 'document', {
+ name: 'Block: Paragraph',
+ } );
+ await expect( paragraphBlock ).toHaveText( '_protected_field' );
+ await expect( paragraphBlock ).toHaveAttribute(
+ 'contenteditable',
+ 'false'
+ );
+ } );
+ test( 'should not show or edit the value of a field with `show_in_rest` set to false', async ( {
+ editor,
+ } ) => {
+ await editor.insertBlock( {
+ name: 'core/paragraph',
+ attributes: {
+ content: 'fallback content',
+ metadata: {
+ bindings: {
+ content: {
+ source: 'core/post-meta',
+ args: {
+ key: 'show_in_rest_false_field',
+ },
+ },
+ },
+ },
+ },
+ } );
+ const paragraphBlock = editor.canvas.getByRole( 'document', {
+ name: 'Block: Paragraph',
+ } );
+ await expect( paragraphBlock ).toHaveText(
+ 'show_in_rest_false_field'
+ );
+ await expect( paragraphBlock ).toHaveAttribute(
+ 'contenteditable',
+ 'false'
+ );
+ } );
+ test( 'should be possible to edit the value of the connected custom fields', async ( {
+ editor,
+ } ) => {
+ await editor.insertBlock( {
+ name: 'core/paragraph',
+ attributes: {
+ anchor: 'connected-paragraph',
+ content: 'fallback content',
+ metadata: {
+ bindings: {
+ content: {
+ source: 'core/post-meta',
+ args: {
+ key: 'movie_field',
+ },
+ },
+ },
+ },
+ },
+ } );
+ const paragraphBlock = editor.canvas.getByRole( 'document', {
+ name: 'Block: Paragraph',
+ } );
+ await expect( paragraphBlock ).toHaveText(
+ 'Movie field default value'
+ );
+ await expect( paragraphBlock ).toHaveAttribute(
+ 'contenteditable',
+ 'true'
+ );
+ await paragraphBlock.fill( 'new value' );
+ // Check that the paragraph content attribute didn't change.
+ const [ paragraphBlockObject ] = await editor.getBlocks();
+ expect( paragraphBlockObject.attributes.content ).toBe(
+ 'fallback content'
+ );
+ // Check the value of the custom field is being updated by visiting the frontend.
+ const previewPage = await editor.openPreviewPage();
+ await expect(
+ previewPage.locator( '#connected-paragraph' )
+ ).toHaveText( 'new value' );
+ } );
+ test( 'should be possible to connect movie fields through the attributes panel', async ( {
+ editor,
+ page,
+ } ) => {
+ await editor.insertBlock( {
+ name: 'core/paragraph',
+ } );
+ await page.getByLabel( 'Attributes options' ).click();
+ await page
+ .getByRole( 'menuitemcheckbox', {
+ name: 'Show content',
+ } )
+ .click();
+ await page
+ .getByRole( 'button', {
+ name: 'content',
+ } )
+ .click();
+ const movieField = page
+ .getByRole( 'menuitemradio' )
+ .filter( { hasText: 'Movie field label' } );
+ await expect( movieField ).toBeVisible();
+ } );
+ } );
+} );
diff --git a/test/e2e/specs/editor/various/block-deletion.spec.js b/test/e2e/specs/editor/various/block-deletion.spec.js
index 00b51a94668d50..9346412c46bcb2 100644
--- a/test/e2e/specs/editor/various/block-deletion.spec.js
+++ b/test/e2e/specs/editor/various/block-deletion.spec.js
@@ -287,16 +287,15 @@ test.describe( 'Block deletion', () => {
await expect.poll( editor.getBlocks ).toMatchObject( [
{ name: 'core/paragraph', attributes: { content: 'First' } },
{ name: 'core/paragraph', attributes: { content: 'Second' } },
+ { name: 'core/paragraph', attributes: { content: '' } },
] );
// Ensure that the newly created empty block is focused.
- await expect.poll( editor.getBlocks ).toHaveLength( 2 );
+ await expect.poll( editor.getBlocks ).toHaveLength( 3 );
await expect(
- editor.canvas
- .getByRole( 'document', {
- name: 'Block: Paragraph',
- } )
- .nth( 1 )
+ editor.canvas.getByRole( 'document', {
+ name: 'Empty block',
+ } )
).toBeFocused();
} );
diff --git a/test/e2e/specs/editor/various/block-moving-mode.spec.js b/test/e2e/specs/editor/various/block-moving-mode.spec.js
deleted file mode 100644
index 5b8ef6bdcd051b..00000000000000
--- a/test/e2e/specs/editor/various/block-moving-mode.spec.js
+++ /dev/null
@@ -1,155 +0,0 @@
-/**
- * WordPress dependencies
- */
-const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
-
-test.describe( 'Block moving mode', () => {
- test.beforeEach( async ( { admin } ) => {
- await admin.createNewPost();
- } );
-
- test.afterEach( async ( { requestUtils } ) => {
- await requestUtils.deleteAllPosts();
- } );
-
- test( 'can move block', async ( { editor, page } ) => {
- await editor.insertBlock( {
- name: 'core/paragraph',
- attributes: { content: 'First Paragraph' },
- } );
- await editor.insertBlock( {
- name: 'core/paragraph',
- attributes: { content: 'Second Paragraph' },
- } );
-
- // Move the second block in front of the first block.
- await editor.showBlockToolbar();
- await page
- .getByRole( 'toolbar', { name: 'Block tools' } )
- .getByRole( 'button', { name: 'Options' } )
- .click();
- await page.getByRole( 'menuitem', { name: 'Move to' } ).click();
- await page.keyboard.press( 'ArrowUp' );
- await page.keyboard.press( 'Enter' );
-
- await expect.poll( editor.getBlocks ).toMatchObject( [
- {
- name: 'core/paragraph',
- attributes: { content: 'Second Paragraph' },
- },
- {
- name: 'core/paragraph',
- attributes: { content: 'First Paragraph' },
- },
- ] );
- } );
-
- test( 'can move block in the nested block', async ( { editor, page } ) => {
- // Create two group blocks with some blocks.
- await editor.insertBlock( { name: 'core/group' } );
- await editor.canvas
- .locator(
- 'role=button[name="Group: Gather blocks in a container."i]'
- )
- .click();
- await page.keyboard.press( 'ArrowDown' );
- await page.keyboard.press( 'Enter' );
- await page.getByRole( 'option', { name: 'Paragraph' } ).click();
- await page.keyboard.type( 'First Paragraph' );
- await page.keyboard.press( 'Enter' );
- await page.keyboard.type( 'Second Paragraph' );
-
- await editor.insertBlock( { name: 'core/group' } );
- await editor.canvas
- .locator(
- 'role=button[name="Group: Gather blocks in a container."i]'
- )
- .click();
- await page.keyboard.press( 'ArrowDown' );
- await page.keyboard.press( 'Enter' );
- await page.getByRole( 'option', { name: 'Paragraph' } ).click();
- await page.keyboard.type( 'Third Paragraph' );
- await page.keyboard.press( 'Enter' );
- await page.keyboard.type( 'Fourth Paragraph' );
-
- // Move a paragraph block in the first group block into the second group block.
- const paragraphBlock = editor.canvas.locator(
- 'text="First Paragraph"'
- );
- await paragraphBlock.focus();
- await editor.showBlockToolbar();
- await page
- .getByRole( 'toolbar', { name: 'Block tools' } )
- .getByRole( 'button', { name: 'Options' } )
- .click();
- await page.getByRole( 'menuitem', { name: 'Move to' } ).click();
- await page.keyboard.press( 'ArrowLeft' ); // Select the first group block.
- await page.keyboard.press( 'ArrowDown' ); // Select the second group block.
- await page.keyboard.press( 'ArrowRight' ); // Enter the second group block.
- await page.keyboard.press( 'ArrowDown' ); // Move down in the second group block.
- await page.keyboard.press( 'Enter' );
-
- await expect.poll( editor.getBlocks ).toMatchObject( [
- {
- name: 'core/group',
- innerBlocks: [
- {
- name: 'core/paragraph',
- attributes: { content: 'Second Paragraph' },
- },
- ],
- },
- {
- name: 'core/group',
- innerBlocks: [
- {
- name: 'core/paragraph',
- attributes: { content: 'Third Paragraph' },
- },
- {
- name: 'core/paragraph',
- attributes: { content: 'First Paragraph' },
- },
- {
- name: 'core/paragraph',
- attributes: { content: 'Fourth Paragraph' },
- },
- ],
- },
- ] );
- } );
-
- test( 'can not move inside its own block', async ( { editor, page } ) => {
- // Create a paragraph block and a group block.
- await editor.insertBlock( {
- name: 'core/paragraph',
- attributes: { content: 'First Paragraph' },
- } );
- await editor.insertBlock( { name: 'core/group' } );
- await editor.canvas
- .locator(
- 'role=button[name="Group: Gather blocks in a container."i]'
- )
- .click();
- await page.keyboard.press( 'ArrowDown' );
- await page.keyboard.press( 'Enter' );
- await page.getByRole( 'option', { name: 'Paragraph' } ).click();
- await page.keyboard.type( 'Second Paragraph' );
- await page.keyboard.press( 'Enter' );
- await page.keyboard.type( 'Third Paragraph' );
-
- // Trying to move the group block into its own.
- const groupBlock = editor.canvas.locator(
- 'role=document[name="Block: Group"i]'
- );
- await groupBlock.focus();
- await editor.showBlockToolbar();
- await page
- .getByRole( 'toolbar', { name: 'Block tools' } )
- .getByRole( 'button', { name: 'Options' } )
- .click();
- await page.getByRole( 'menuitem', { name: 'Move to' } ).click();
- await page.keyboard.press( 'ArrowRight' );
- await expect( groupBlock ).toHaveClass( /is-selected/ );
- } );
-} );
diff --git a/test/e2e/specs/editor/various/copy-cut-paste.spec.js b/test/e2e/specs/editor/various/copy-cut-paste.spec.js
index 33a65e6f5a1195..bca062b06416a1 100644
--- a/test/e2e/specs/editor/various/copy-cut-paste.spec.js
+++ b/test/e2e/specs/editor/various/copy-cut-paste.spec.js
@@ -565,6 +565,27 @@ test.describe( 'Copy/cut/paste', () => {
] );
} );
+ test( 'should paste link to formatted text', async ( {
+ page,
+ pageUtils,
+ editor,
+ } ) => {
+ await editor.insertBlock( {
+ name: 'core/paragraph',
+ attributes: { content: 'test ' },
+ } );
+ await page.keyboard.press( 'ArrowRight' );
+ await page.keyboard.press( 'ArrowRight' );
+ await pageUtils.pressKeys( 'shift+ArrowRight' );
+ await pageUtils.pressKeys( 'shift+ArrowRight' );
+ pageUtils.setClipboardData( {
+ plainText: 'https://wordpress.org/gutenberg',
+ html: 'https://wordpress.org/gutenberg',
+ } );
+ await pageUtils.pressKeys( 'primary+v' );
+ expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+ } );
+
test( 'should auto-link', async ( { pageUtils, editor } ) => {
await editor.insertBlock( {
name: 'core/paragraph',
diff --git a/test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js b/test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js
index 6a7125d04f7a6a..e1ca121040b974 100644
--- a/test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js
+++ b/test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js
@@ -17,108 +17,26 @@ test.describe( 'Order of block keyboard navigation', () => {
await editor.openDocumentSettingsSidebar();
} );
- test( 'permits tabbing through paragraph blocks in the expected order', async ( {
+ test( 'permits tabbing through the block toolbar of the paragraph block', async ( {
editor,
KeyboardNavigableBlocks,
page,
+ pageUtils,
} ) => {
- const paragraphBlocks = [ 'Paragraph 0', 'Paragraph 1', 'Paragraph 2' ];
-
- // Create 3 paragraphs blocks with some content.
- for ( const paragraphBlock of paragraphBlocks ) {
+ // Insert three paragraph blocks.
+ for ( let i = 0; i < 3; i++ ) {
await editor.insertBlock( { name: 'core/paragraph' } );
- await page.keyboard.type( paragraphBlock );
+ await page.keyboard.type( `Paragraph ${ i + 1 }` );
}
-
- // Select the middle block.
+ // Select the middle paragraph block.
await page.keyboard.press( 'ArrowUp' );
await editor.showBlockToolbar();
- await KeyboardNavigableBlocks.navigateToContentEditorTop();
- await KeyboardNavigableBlocks.tabThroughParagraphBlock( 'Paragraph 1' );
-
- // Repeat the same steps to ensure that there is no change introduced in how the focus is handled.
- // This prevents the previous regression explained in: https://github.com/WordPress/gutenberg/issues/11773.
- await KeyboardNavigableBlocks.navigateToContentEditorTop();
- await KeyboardNavigableBlocks.tabThroughParagraphBlock( 'Paragraph 1' );
- } );
-
- test( 'allows tabbing in navigation mode if no block is selected', async ( {
- editor,
- KeyboardNavigableBlocks,
- page,
- } ) => {
- const paragraphBlocks = [ '0', '1' ];
-
- // Create 2 paragraphs blocks with some content.
- for ( const paragraphBlock of paragraphBlocks ) {
- await editor.insertBlock( { name: 'core/paragraph' } );
- await page.keyboard.type( paragraphBlock );
- }
-
- // Clear the selected block.
- const paragraph = editor.canvas
- .locator( '[data-type="core/paragraph"]' )
- .getByText( '1' );
- const box = await paragraph.boundingBox();
- await page.mouse.click( box.x - 1, box.y );
-
- await page.keyboard.press( 'Tab' );
- await KeyboardNavigableBlocks.expectLabelToHaveFocus( 'Add title' );
-
- await page.keyboard.press( 'Tab' );
- await KeyboardNavigableBlocks.expectLabelToHaveFocus(
- 'Paragraph Block. Row 1. 0'
- );
-
- await page.keyboard.press( 'Tab' );
- await KeyboardNavigableBlocks.expectLabelToHaveFocus(
- 'Paragraph Block. Row 2. 1'
- );
-
- await page.keyboard.press( 'Tab' );
- await KeyboardNavigableBlocks.expectLabelToHaveFocus( 'Post' );
- } );
-
- test( 'allows tabbing in navigation mode if no block is selected (reverse)', async ( {
- editor,
- KeyboardNavigableBlocks,
- page,
- pageUtils,
- } ) => {
- const paragraphBlocks = [ '0', '1' ];
-
- // Create 2 paragraphs blocks with some content.
- for ( const paragraphBlock of paragraphBlocks ) {
- await editor.insertBlock( { name: 'core/paragraph' } );
- await page.keyboard.type( paragraphBlock );
- }
-
- // Clear the selected block.
- const paragraph = editor.canvas
- .locator( '[data-type="core/paragraph"]' )
- .getByText( '1' );
- const box = await paragraph.boundingBox();
- await page.mouse.click( box.x - 1, box.y );
-
- // Put focus behind the block list.
- await page.evaluate( () => {
- document
- .querySelector( '.interface-interface-skeleton__sidebar' )
- .focus();
- } );
-
- await pageUtils.pressKeys( 'shift+Tab' );
- await KeyboardNavigableBlocks.expectLabelToHaveFocus(
- 'Paragraph Block. Row 2. 1'
- );
-
await pageUtils.pressKeys( 'shift+Tab' );
+ await KeyboardNavigableBlocks.navigateThroughBlockToolbar();
+ await page.keyboard.press( 'Tab' );
await KeyboardNavigableBlocks.expectLabelToHaveFocus(
- 'Paragraph Block. Row 1. 0'
+ 'Block: Paragraph'
);
-
- await pageUtils.pressKeys( 'shift+Tab' );
- await KeyboardNavigableBlocks.expectLabelToHaveFocus( 'Add title' );
} );
test( 'should navigate correctly with multi selection', async ( {
@@ -208,31 +126,7 @@ class KeyboardNavigableBlocks {
expect( ariaLabel ).toBe( label );
}
- async navigateToContentEditorTop() {
- // Use 'Ctrl+`' to return to the top of the editor.
- await this.pageUtils.pressKeys( 'ctrl+`', { times: 5 } );
- }
-
- async tabThroughParagraphBlock( paragraphText ) {
- await this.tabThroughBlockToolbar();
-
- await this.page.keyboard.press( 'Tab' );
- await this.expectLabelToHaveFocus( 'Block: Paragraph' );
-
- const activeElement = this.editor.canvas.locator( ':focus' );
-
- await expect( activeElement ).toHaveText( paragraphText );
-
- await this.page.keyboard.press( 'Tab' );
- await this.expectLabelToHaveFocus( 'Block' );
-
- // Need to shift+tab here to end back in the block. If not, we'll be in the next region and it will only require 4 region jumps instead of 5.
- await this.pageUtils.pressKeys( 'shift+Tab' );
- await this.expectLabelToHaveFocus( 'Block: Paragraph' );
- }
-
- async tabThroughBlockToolbar() {
- await this.page.keyboard.press( 'Tab' );
+ async navigateThroughBlockToolbar() {
await this.expectLabelToHaveFocus( 'Paragraph' );
await this.page.keyboard.press( 'ArrowRight' );
diff --git a/test/e2e/specs/editor/various/pattern-overrides.spec.js b/test/e2e/specs/editor/various/pattern-overrides.spec.js
index 83f2f880f3bf1b..5fbd0e66b5fd02 100644
--- a/test/e2e/specs/editor/various/pattern-overrides.spec.js
+++ b/test/e2e/specs/editor/various/pattern-overrides.spec.js
@@ -150,7 +150,7 @@ test.describe( 'Pattern Overrides', () => {
name: 'Block: Paragraph',
} );
// Ensure the first pattern is selected.
- await editor.selectBlocks( patternBlocks.first() );
+ await patternBlocks.first().selectText();
await expect( paragraphs.first() ).not.toHaveAttribute(
'inert',
'true'
@@ -168,7 +168,7 @@ test.describe( 'Pattern Overrides', () => {
await page.keyboard.type( 'I would word it this way' );
// Ensure the second pattern is selected.
- await editor.selectBlocks( patternBlocks.last() );
+ await patternBlocks.last().selectText();
await patternBlocks
.last()
.getByRole( 'document', {
diff --git a/test/e2e/specs/editor/various/publish-panel.spec.js b/test/e2e/specs/editor/various/publish-panel.spec.js
index 534fea5289c9e1..1fe94ff334f3b2 100644
--- a/test/e2e/specs/editor/various/publish-panel.spec.js
+++ b/test/e2e/specs/editor/various/publish-panel.spec.js
@@ -58,7 +58,7 @@ test.describe( 'Post publish panel', () => {
).toBeFocused();
} );
- test( 'should move focus to the publish button in the panel', async ( {
+ test( 'should move focus to the cancel button in the panel', async ( {
editor,
page,
} ) => {
@@ -74,7 +74,7 @@ test.describe( 'Post publish panel', () => {
page
.getByRole( 'region', { name: 'Editor publish' } )
.locator( ':focus' )
- ).toHaveText( 'Publish' );
+ ).toHaveText( 'Cancel' );
} );
test( 'should focus on the post list after publishing', async ( {
diff --git a/test/e2e/specs/editor/various/shortcut-focus-toolbar.spec.js b/test/e2e/specs/editor/various/shortcut-focus-toolbar.spec.js
index a8e49f7a6b84dd..cfaf4e0be9188f 100644
--- a/test/e2e/specs/editor/various/shortcut-focus-toolbar.spec.js
+++ b/test/e2e/specs/editor/various/shortcut-focus-toolbar.spec.js
@@ -50,32 +50,6 @@ test.describe( 'Focus toolbar shortcut (alt + F10)', () => {
await expect( toolbarUtils.documentToolbarTooltip ).toBeHidden();
} );
- test( 'Focuses correct toolbar in default view options in select mode', async ( {
- editor,
- page,
- toolbarUtils,
- } ) => {
- // Test: Focus the document toolbar from title
- await toolbarUtils.useSelectMode();
- await toolbarUtils.moveToToolbarShortcut();
- await expect( toolbarUtils.documentToolbarButton ).toBeFocused();
-
- // Test: Focus the top level toolbar from empty block
- await editor.insertBlock( { name: 'core/paragraph' } );
- await toolbarUtils.useSelectMode();
- await toolbarUtils.moveToToolbarShortcut();
- await expect( toolbarUtils.documentToolbarButton ).toBeFocused();
-
- // Test: Focus the top level toolbar from paragraph block
- await editor.insertBlock( { name: 'core/paragraph' } );
- await page.keyboard.type(
- 'Focus top level toolbar from paragraph block in select mode.'
- );
- await toolbarUtils.useSelectMode();
- await toolbarUtils.moveToToolbarShortcut();
- await expect( toolbarUtils.documentToolbarButton ).toBeFocused();
- } );
-
test.describe( 'In Top Toolbar option:', () => {
test.beforeEach( async ( { editor } ) => {
// Ensure the fixed toolbar option is on
diff --git a/test/e2e/specs/editor/various/splitting-merging.spec.js b/test/e2e/specs/editor/various/splitting-merging.spec.js
index 29e7e5d64522c9..eba9f1d3163fd5 100644
--- a/test/e2e/specs/editor/various/splitting-merging.spec.js
+++ b/test/e2e/specs/editor/various/splitting-merging.spec.js
@@ -373,6 +373,103 @@ test.describe( 'splitting and merging blocks (@firefox, @webkit)', () => {
);
} );
+ // Fix for https://github.com/WordPress/gutenberg/issues/65174.
+ test( 'should handle unwrapping and merging blocks with empty contents', async ( {
+ editor,
+ page,
+ } ) => {
+ const emptyAlignedParagraph = {
+ name: 'core/paragraph',
+ attributes: { content: '', align: 'center', dropCap: false },
+ innerBlocks: [],
+ };
+ const emptyAlignedHeading = {
+ name: 'core/heading',
+ attributes: { content: '', textAlign: 'center', level: 2 },
+ innerBlocks: [],
+ };
+ const headingWithContent = {
+ name: 'core/heading',
+ attributes: { content: 'heading', level: 2 },
+ innerBlocks: [],
+ };
+ const placeholderBlock = { name: 'core/separator' };
+ await editor.insertBlock( {
+ name: 'core/group',
+ innerBlocks: [
+ emptyAlignedParagraph,
+ emptyAlignedHeading,
+ headingWithContent,
+ placeholderBlock,
+ ],
+ } );
+ await editor.canvas
+ .getByRole( 'document', { name: 'Empty block' } )
+ .focus();
+
+ await page.keyboard.press( 'Backspace' );
+ await expect
+ .poll( editor.getBlocks, 'Remove the default empty block' )
+ .toEqual( [
+ {
+ name: 'core/group',
+ attributes: { tagName: 'div' },
+ innerBlocks: [
+ emptyAlignedHeading,
+ headingWithContent,
+ expect.objectContaining( placeholderBlock ),
+ ],
+ },
+ ] );
+
+ // Move the caret to the beginning of the empty heading block.
+ await page.keyboard.press( 'ArrowDown' );
+ await page.keyboard.press( 'Backspace' );
+ await expect
+ .poll(
+ editor.getBlocks,
+ 'Convert the non-default empty block to a default block'
+ )
+ .toEqual( [
+ {
+ name: 'core/group',
+ attributes: { tagName: 'div' },
+ innerBlocks: [
+ emptyAlignedParagraph,
+ headingWithContent,
+ expect.objectContaining( placeholderBlock ),
+ ],
+ },
+ ] );
+ await page.keyboard.press( 'Backspace' );
+ await expect.poll( editor.getBlocks ).toEqual( [
+ {
+ name: 'core/group',
+ attributes: { tagName: 'div' },
+ innerBlocks: [
+ headingWithContent,
+ expect.objectContaining( placeholderBlock ),
+ ],
+ },
+ ] );
+
+ // Move the caret to the beginning of the "heading" heading block.
+ await page.keyboard.press( 'ArrowDown' );
+ await page.keyboard.press( 'Backspace' );
+ await expect
+ .poll( editor.getBlocks, 'Lift the non-empty non-default block' )
+ .toEqual( [
+ headingWithContent,
+ {
+ name: 'core/group',
+ attributes: { tagName: 'div' },
+ innerBlocks: [
+ expect.objectContaining( placeholderBlock ),
+ ],
+ },
+ ] );
+ } );
+
test.describe( 'test restore selection when merge produces more than one block', () => {
const snap1 = [
{
diff --git a/test/e2e/specs/editor/various/writing-flow.spec.js b/test/e2e/specs/editor/various/writing-flow.spec.js
index bd1552ad4cb66a..4077d6dcc58200 100644
--- a/test/e2e/specs/editor/various/writing-flow.spec.js
+++ b/test/e2e/specs/editor/various/writing-flow.spec.js
@@ -106,48 +106,6 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => {
] );
} );
- test( 'Should navigate between inner and root blocks in navigation mode', async ( {
- page,
- writingFlowUtils,
- } ) => {
- await writingFlowUtils.addDemoContent();
-
- // Switch to navigation mode.
- await page.keyboard.press( 'Escape' );
- // Arrow up to Columns block.
- await page.keyboard.press( 'ArrowUp' );
- await expect
- .poll( writingFlowUtils.getActiveBlockName )
- .toBe( 'core/columns' );
- // Arrow right into Column block.
- await page.keyboard.press( 'ArrowRight' );
- await expect
- .poll( writingFlowUtils.getActiveBlockName )
- .toBe( 'core/column' );
- // Arrow down to reach second Column block.
- await page.keyboard.press( 'ArrowDown' );
- // Arrow right again into Paragraph block.
- await page.keyboard.press( 'ArrowRight' );
- await expect
- .poll( writingFlowUtils.getActiveBlockName )
- .toBe( 'core/paragraph' );
- // Arrow left back to Column block.
- await page.keyboard.press( 'ArrowLeft' );
- await expect
- .poll( writingFlowUtils.getActiveBlockName )
- .toBe( 'core/column' );
- // Arrow left back to Columns block.
- await page.keyboard.press( 'ArrowLeft' );
- await expect
- .poll( writingFlowUtils.getActiveBlockName )
- .toBe( 'core/columns' );
- // Arrow up to first paragraph.
- await page.keyboard.press( 'ArrowUp' );
- await expect
- .poll( writingFlowUtils.getActiveBlockName )
- .toBe( 'core/paragraph' );
- } );
-
test( 'should navigate around inline boundaries', async ( {
editor,
page,
@@ -958,32 +916,6 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => {
` );
} );
- test( 'escape should set select mode and then focus the canvas', async ( {
- page,
- writingFlowUtils,
- } ) => {
- await page.keyboard.press( 'Enter' );
- await page.keyboard.type( 'Random Paragraph' );
-
- // First escape enters navigation mode.
- await page.keyboard.press( 'Escape' );
- const navigationButton = page.getByLabel(
- 'Paragraph Block. Row 1. Random Paragraph'
- );
- await expect( navigationButton ).toBeVisible();
- await expect
- .poll( writingFlowUtils.getActiveBlockName )
- .toBe( 'core/paragraph' );
-
- // Second escape should send focus to the canvas
- await page.keyboard.press( 'Escape' );
- // The navigation button should be hidden.
- await expect( navigationButton ).toBeHidden();
- await expect(
- page.getByRole( 'region', { name: 'Editor content' } )
- ).toBeFocused();
- } );
-
// Checks for regressions of https://github.com/WordPress/gutenberg/issues/40091.
test( 'does not deselect the block when selecting text outside the editor canvas', async ( {
editor,
@@ -1222,11 +1154,11 @@ class WritingFlowUtils {
'role=listbox[name="Blocks"i] >> role=option[name="Paragraph"i]'
);
await this.page.keyboard.type( '2nd col' ); // If this text is too long, it may wrap to a new line and cause test failure. That's why we're using "2nd" instead of "Second" here.
-
- await this.page.keyboard.press( 'Escape' ); // Enter navigation mode.
- await this.page.keyboard.press( 'ArrowLeft' ); // Move to the column block.
- await this.page.keyboard.press( 'ArrowLeft' ); // Move to the columns block.
- await this.page.keyboard.press( 'Enter' ); // Enter edit mode with the columns block selected.
+ await this.editor.showBlockToolbar();
+ await this.page.keyboard.press( 'Shift+Tab' ); // Move to toolbar to select parent
+ await this.page.keyboard.press( 'Enter' ); // Selects the column block.
+ await this.page.keyboard.press( 'Shift+Tab' ); // Move to toolbar to select parent
+ await this.page.keyboard.press( 'Enter' ); // Selects the columns block.
await this.page.keyboard.press( 'Enter' ); // Creates a paragraph after the columns block.
await this.page.keyboard.type( 'Second paragraph' );
}
diff --git a/test/e2e/specs/interactivity/get-sever-context.spec.ts b/test/e2e/specs/interactivity/get-sever-context.spec.ts
new file mode 100644
index 00000000000000..d7bc4075f97604
--- /dev/null
+++ b/test/e2e/specs/interactivity/get-sever-context.spec.ts
@@ -0,0 +1,166 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'getServerContext()', () => {
+ test.beforeAll( async ( { interactivityUtils: utils } ) => {
+ const parent = {
+ prop: 'parent',
+ nested: {
+ prop: 'parent',
+ },
+ inherited: {
+ prop: 'parent',
+ },
+ };
+
+ const parentModified = {
+ prop: 'parentModified',
+ nested: {
+ prop: 'parentModified',
+ },
+ inherited: {
+ prop: 'parentModified',
+ },
+ };
+
+ const parentNewProps = {
+ prop: 'parent',
+ newProp: 'parent',
+ nested: {
+ prop: 'parent',
+ newProp: 'parent',
+ },
+ inherited: {
+ prop: 'parent',
+ newProp: 'parent',
+ },
+ };
+
+ const child = {
+ prop: 'child',
+ nested: {
+ prop: 'child',
+ },
+ };
+
+ const childModified = {
+ prop: 'childModified',
+ nested: {
+ prop: 'childModified',
+ },
+ };
+
+ const childNewProps = {
+ prop: 'child',
+ newProp: 'child',
+ nested: {
+ prop: 'child',
+ newProp: 'child',
+ },
+ };
+
+ await utils.activatePlugins();
+ const link1 = await utils.addPostWithBlock( 'test/get-server-context', {
+ alias: 'getServerContext() - modified',
+ attributes: {
+ parentContext: parentModified,
+ childContext: childModified,
+ },
+ } );
+ const link2 = await utils.addPostWithBlock( 'test/get-server-context', {
+ alias: 'getServerContext() - new props',
+ attributes: {
+ parentContext: parentNewProps,
+ childContext: childNewProps,
+ },
+ } );
+ await utils.addPostWithBlock( 'test/get-server-context', {
+ alias: 'getServerContext() - main',
+ attributes: {
+ links: { modified: link1, newProps: link2 },
+ parentContext: parent,
+ childContext: child,
+ },
+ } );
+ } );
+
+ test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+ await page.goto( utils.getLink( 'getServerContext() - main' ) );
+ } );
+
+ test.afterAll( async ( { interactivityUtils: utils } ) => {
+ await utils.deactivatePlugins();
+ await utils.deleteAllPosts();
+ } );
+
+ test( 'should update modified props on navigation', async ( { page } ) => {
+ const prop = page.getByTestId( 'prop' );
+ const nestedProp = page.getByTestId( 'nested.prop' );
+ const inheritedProp = page.getByTestId( 'inherited.prop' );
+
+ await expect( prop ).toHaveText( 'child' );
+ await expect( nestedProp ).toHaveText( 'child' );
+ await expect( inheritedProp ).toHaveText( 'parent' );
+
+ await page.getByTestId( 'modified' ).click();
+
+ await expect( prop ).toHaveText( 'childModified' );
+ await expect( nestedProp ).toHaveText( 'childModified' );
+ await expect( inheritedProp ).toHaveText( 'parentModified' );
+
+ await page.goBack();
+
+ await expect( prop ).toHaveText( 'child' );
+ await expect( nestedProp ).toHaveText( 'child' );
+ await expect( inheritedProp ).toHaveText( 'parent' );
+ } );
+
+ test( 'should add new props on navigation', async ( { page } ) => {
+ const newProp = page.getByTestId( 'newProp' );
+ const nestedNewProp = page.getByTestId( 'nested.newProp' );
+ const inheritedNewProp = page.getByTestId( 'inherited.newProp' );
+
+ await expect( newProp ).toBeEmpty();
+ await expect( nestedNewProp ).toBeEmpty();
+ await expect( inheritedNewProp ).toBeEmpty();
+
+ await page.getByTestId( 'newProps' ).click();
+
+ await expect( newProp ).toHaveText( 'child' );
+ await expect( nestedNewProp ).toHaveText( 'child' );
+ await expect( inheritedNewProp ).toHaveText( 'parent' );
+ } );
+
+ test( 'should keep new props on navigation', async ( { page } ) => {
+ const newProp = page.getByTestId( 'newProp' );
+ const nestedNewProp = page.getByTestId( 'nested.newProp' );
+ const inheritedNewProp = page.getByTestId( 'inherited.newProp' );
+
+ await page.getByTestId( 'newProps' ).click();
+
+ await expect( newProp ).toHaveText( 'child' );
+ await expect( nestedNewProp ).toHaveText( 'child' );
+ await expect( inheritedNewProp ).toHaveText( 'parent' );
+
+ await page.goBack();
+
+ await expect( newProp ).toHaveText( 'child' );
+ await expect( nestedNewProp ).toHaveText( 'child' );
+ await expect( inheritedNewProp ).toHaveText( 'parent' );
+ } );
+
+ test( 'should prevent any manual modifications', async ( { page } ) => {
+ const prop = page.getByTestId( 'prop' );
+ const button = page.getByTestId( 'tryToModifyServerContext' );
+
+ await expect( prop ).toHaveText( 'child' );
+ await expect( button ).toHaveText( 'modify' );
+
+ await button.click();
+
+ await expect( prop ).toHaveText( 'child' );
+ await expect( button ).toHaveText( 'not modified ā
' );
+ } );
+} );
diff --git a/test/e2e/specs/interactivity/get-sever-state.spec.ts b/test/e2e/specs/interactivity/get-sever-state.spec.ts
new file mode 100644
index 00000000000000..16406c1d824463
--- /dev/null
+++ b/test/e2e/specs/interactivity/get-sever-state.spec.ts
@@ -0,0 +1,119 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'getServerState()', () => {
+ test.beforeAll( async ( { interactivityUtils: utils } ) => {
+ await utils.activatePlugins();
+ const link1 = await utils.addPostWithBlock( 'test/get-server-state', {
+ alias: 'getServerState() - link 1',
+ attributes: {
+ state: {
+ prop: 'link 1',
+ newProp: 'link 1',
+ nested: {
+ prop: 'link 1',
+ newProp: 'link 1',
+ },
+ },
+ },
+ } );
+ const link2 = await utils.addPostWithBlock( 'test/get-server-state', {
+ alias: 'getServerState() - link 2',
+ attributes: {
+ state: {
+ prop: 'link 2',
+ newProp: 'link 2',
+ nested: {
+ prop: 'link 2',
+ newProp: 'link 2',
+ },
+ },
+ },
+ } );
+ await utils.addPostWithBlock( 'test/get-server-state', {
+ alias: 'getServerState() - main',
+ attributes: {
+ title: 'Main',
+ links: [ link1, link2 ],
+ state: {
+ prop: 'main',
+ nested: {
+ prop: 'main',
+ },
+ },
+ },
+ } );
+ } );
+
+ test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+ await page.goto( utils.getLink( 'getServerState() - main' ) );
+ } );
+
+ test.afterAll( async ( { interactivityUtils: utils } ) => {
+ await utils.deactivatePlugins();
+ await utils.deleteAllPosts();
+ } );
+
+ test( 'should update existing state props on navigation', async ( {
+ page,
+ } ) => {
+ const prop = page.getByTestId( 'prop' );
+ const nestedProp = page.getByTestId( 'nested.prop' );
+
+ await expect( prop ).toHaveText( 'main' );
+ await expect( nestedProp ).toHaveText( 'main' );
+
+ await page.getByTestId( 'link 1' ).click();
+
+ await expect( prop ).toHaveText( 'link 1' );
+ await expect( nestedProp ).toHaveText( 'link 1' );
+
+ await page.goBack();
+ await expect( prop ).toHaveText( 'main' );
+ await expect( nestedProp ).toHaveText( 'main' );
+
+ await page.getByTestId( 'link 2' ).click();
+
+ await expect( prop ).toHaveText( 'link 2' );
+ await expect( nestedProp ).toHaveText( 'link 2' );
+ } );
+
+ test( 'should add new state props and keep them on navigation', async ( {
+ page,
+ } ) => {
+ const newProp = page.getByTestId( 'newProp' );
+ const nestedNewProp = page.getByTestId( 'nested.newProp' );
+
+ await expect( newProp ).toBeEmpty();
+ await expect( nestedNewProp ).toBeEmpty();
+
+ await page.getByTestId( 'link 1' ).click();
+
+ await expect( newProp ).toHaveText( 'link 1' );
+ await expect( nestedNewProp ).toHaveText( 'link 1' );
+
+ await page.goBack();
+ await expect( newProp ).toHaveText( 'link 1' );
+ await expect( nestedNewProp ).toHaveText( 'link 1' );
+
+ await page.getByTestId( 'link 2' ).click();
+
+ await expect( newProp ).toHaveText( 'link 2' );
+ await expect( nestedNewProp ).toHaveText( 'link 2' );
+ } );
+
+ test( 'should prevent any manual modifications', async ( { page } ) => {
+ const prop = page.getByTestId( 'prop' );
+ const button = page.getByTestId( 'tryToModifyServerState' );
+
+ await expect( prop ).toHaveText( 'main' );
+ await expect( button ).toHaveText( 'modify' );
+
+ await button.click();
+
+ await expect( prop ).toHaveText( 'main' );
+ await expect( button ).toHaveText( 'not modified ā
' );
+ } );
+} );
diff --git a/test/e2e/specs/site-editor/command-center.spec.js b/test/e2e/specs/site-editor/command-center.spec.js
index 5b049cda252a8b..19318081aa171b 100644
--- a/test/e2e/specs/site-editor/command-center.spec.js
+++ b/test/e2e/specs/site-editor/command-center.spec.js
@@ -28,10 +28,12 @@ test.describe( 'Site editor command palette', () => {
await page.keyboard.type( 'new page' );
await page.getByRole( 'option', { name: 'Add new page' } ).click();
await expect( page ).toHaveURL(
- '/wp-admin/post-new.php?post_type=page'
+ /\/wp-admin\/site-editor.php\?postId=(\d+)&postType=page&canvas=edit/
);
await expect(
- editor.canvas.getByRole( 'textbox', { name: 'Add title' } )
+ editor.canvas
+ .getByLabel( 'Block: Title' )
+ .locator( '[data-rich-text-placeholder="No title"]' )
).toBeVisible();
} );
diff --git a/test/e2e/specs/site-editor/navigation.spec.js b/test/e2e/specs/site-editor/navigation.spec.js
index 4db860b703892c..1b92ef2e850e67 100644
--- a/test/e2e/specs/site-editor/navigation.spec.js
+++ b/test/e2e/specs/site-editor/navigation.spec.js
@@ -83,19 +83,6 @@ test.describe( 'Site editor navigation', () => {
// The button role should have been removed from the iframe.
await expect( editorCanvasButton ).toBeHidden();
- // Test to make sure a Tab keypress works as expected.
- // As of this writing, we are in select mode and a tab
- // keypress will reveal the header template select mode
- // button. This test is not documenting that we _want_
- // that action, but checking that we are within the site
- // editor and keypresses work as intened.
- await pageUtils.pressKeys( 'Tab' );
- await expect(
- page.getByRole( 'button', {
- name: 'Template Part Block. Row 1. header',
- } )
- ).toBeFocused();
-
// Test: We can go back to the main navigation from the editor frame
// Move to the document toolbar
await pageUtils.pressKeys( 'alt+F10' );
diff --git a/test/e2e/specs/site-editor/style-book.spec.js b/test/e2e/specs/site-editor/style-book.spec.js
index c4e153e9b5e2fa..3f871d28ef941b 100644
--- a/test/e2e/specs/site-editor/style-book.spec.js
+++ b/test/e2e/specs/site-editor/style-book.spec.js
@@ -42,9 +42,6 @@ test.describe( 'Style Book', () => {
test( 'should have tabs containing block examples', async ( { page } ) => {
await expect( page.locator( 'role=tab[name="Text"i]' ) ).toBeVisible();
await expect( page.locator( 'role=tab[name="Media"i]' ) ).toBeVisible();
- await expect(
- page.locator( 'role=tab[name="Design"i]' )
- ).toBeVisible();
await expect(
page.locator( 'role=tab[name="Widgets"i]' )
).toBeVisible();
diff --git a/test/e2e/specs/widgets/customizing-widgets.spec.js b/test/e2e/specs/widgets/customizing-widgets.spec.js
index 53b4da7be2d61f..38e9d3ee2c58ab 100644
--- a/test/e2e/specs/widgets/customizing-widgets.spec.js
+++ b/test/e2e/specs/widgets/customizing-widgets.spec.js
@@ -465,16 +465,6 @@ test.describe( 'Widgets Customizer', () => {
await expect( paragraphBlock ).toBeVisible();
await paragraphBlock.focus();
-
- // Expect pressing the Escape key to enter navigation mode,
- // but not close the editor.
- await page.keyboard.press( 'Escape' );
- await expect(
- page.locator(
- 'css=.block-editor-block-list__layout.is-navigate-mode'
- )
- ).toBeVisible();
- await expect( paragraphBlock ).toBeVisible();
} );
test( 'should move (inner) blocks to another sidebar', async ( {
diff --git a/test/gutenberg-test-themes/block-bindings/index.php b/test/gutenberg-test-themes/block-bindings/index.php
new file mode 100644
index 00000000000000..0c6530acc1aaff
--- /dev/null
+++ b/test/gutenberg-test-themes/block-bindings/index.php
@@ -0,0 +1,9 @@
+
+Custom template
+
diff --git a/test/gutenberg-test-themes/block-bindings/templates/index.html b/test/gutenberg-test-themes/block-bindings/templates/index.html
new file mode 100644
index 00000000000000..ab136ac8df9a7d
--- /dev/null
+++ b/test/gutenberg-test-themes/block-bindings/templates/index.html
@@ -0,0 +1,8 @@
+
+
+
+
+
+
+
+
diff --git a/test/gutenberg-test-themes/block-bindings/templates/single-movie.html b/test/gutenberg-test-themes/block-bindings/templates/single-movie.html
new file mode 100644
index 00000000000000..cd05d5fe917fea
--- /dev/null
+++ b/test/gutenberg-test-themes/block-bindings/templates/single-movie.html
@@ -0,0 +1,2 @@
+
+
diff --git a/test/gutenberg-test-themes/block-bindings/templates/single.html b/test/gutenberg-test-themes/block-bindings/templates/single.html
new file mode 100644
index 00000000000000..cd05d5fe917fea
--- /dev/null
+++ b/test/gutenberg-test-themes/block-bindings/templates/single.html
@@ -0,0 +1,2 @@
+
+
diff --git a/test/gutenberg-test-themes/block-bindings/theme.json b/test/gutenberg-test-themes/block-bindings/theme.json
new file mode 100644
index 00000000000000..c996b014328398
--- /dev/null
+++ b/test/gutenberg-test-themes/block-bindings/theme.json
@@ -0,0 +1,18 @@
+{
+ "$schema": "../../../schemas/json/theme.json",
+ "version": 3,
+ "settings": {
+ "appearanceTools": true,
+ "layout": {
+ "contentSize": "840px",
+ "wideSize": "1100px"
+ }
+ },
+ "customTemplates": [
+ {
+ "name": "custom-template",
+ "title": "Custom",
+ "postTypes": [ "post", "movie" ]
+ }
+ ]
+}
diff --git a/tools/webpack/script-modules.js b/tools/webpack/script-modules.js
index 18287c96d83c8a..021f11f5f5ed95 100644
--- a/tools/webpack/script-modules.js
+++ b/tools/webpack/script-modules.js
@@ -89,11 +89,11 @@ module.exports = {
},
output: {
devtoolNamespace: 'wp',
- filename: './build-module/[name].min.js',
+ filename: '[name].min.js',
library: {
type: 'module',
},
- path: join( __dirname, '..', '..' ),
+ path: join( __dirname, '..', '..', 'build-module' ),
environment: { module: true },
module: true,
chunkFormat: 'module',
@@ -102,7 +102,13 @@ module.exports = {
resolve: {
extensions: [ '.js', '.ts', '.tsx' ],
},
- plugins: [ ...plugins, new DependencyExtractionWebpackPlugin() ],
+ plugins: [
+ ...plugins,
+ new DependencyExtractionWebpackPlugin( {
+ combineAssets: true,
+ combinedOutputFile: `./assets.php`,
+ } ),
+ ],
watchOptions: {
ignored: [ '**/node_modules' ],
aggregateTimeout: 500,
diff --git a/tools/webpack/shared.js b/tools/webpack/shared.js
index c8c5b05c7d151b..f30d3a830f3eb1 100644
--- a/tools/webpack/shared.js
+++ b/tools/webpack/shared.js
@@ -25,7 +25,7 @@ const baseConfig = {
parallel: true,
terserOptions: {
output: {
- comments: /(translators:|wp:polyfill)/i,
+ comments: /translators:/i,
},
compress: {
passes: 2,
diff --git a/tsconfig.json b/tsconfig.json
index 3ab54f66019bca..8821ef4404e3b5 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -32,6 +32,7 @@
{ "path": "packages/i18n" },
{ "path": "packages/icons" },
{ "path": "packages/interactivity" },
+ { "path": "packages/interactivity/tsconfig.test.json" },
{ "path": "packages/interactivity-router" },
{ "path": "packages/is-shallow-equal" },
{ "path": "packages/keycodes" },