{
+ if ( ! isZoomedOut ) {
+ initialContainerWidthRef.current = containerWidth;
+ }
+ }, [ containerWidth, isZoomedOut ] );
+
+ const scaleContainerWidth = Math.max(
+ initialContainerWidthRef.current,
+ containerWidth
+ );
+
+ const scaleValue = isAutoScaled
+ ? calculateScale( {
+ frameSize,
+ containerWidth,
+ maxContainerWidth,
+ scaleContainerWidth,
+ } )
+ : scale;
+
+ /**
+ * The starting transition state for the zoom out animation.
+ * @type {import('react').RefObject
}
+ */
+ const transitionFromRef = useRef( {
+ scaleValue,
+ frameSize,
+ clientHeight: 0,
+ scrollTop: 0,
+ scrollHeight: 0,
+ } );
+
+ /**
+ * The ending transition state for the zoom out animation.
+ * @type {import('react').RefObject}
+ */
+ const transitionToRef = useRef( {
+ scaleValue,
+ frameSize,
+ clientHeight: 0,
+ scrollTop: 0,
+ scrollHeight: 0,
+ } );
+
+ /**
+ * Start the zoom out animation. This sets the necessary CSS variables
+ * for animating the canvas and returns the Animation object.
+ *
+ * @return {Animation} The animation object for the zoom out animation.
+ */
+ const startZoomOutAnimation = useCallback( () => {
+ const { scrollTop } = transitionFromRef.current;
+ const { scrollTop: scrollTopNext } = transitionToRef.current;
+
+ iframeDocument.documentElement.style.setProperty(
+ '--wp-block-editor-iframe-zoom-out-scroll-top',
+ `${ scrollTop }px`
+ );
+
+ iframeDocument.documentElement.style.setProperty(
+ '--wp-block-editor-iframe-zoom-out-scroll-top-next',
+ `${ scrollTopNext }px`
+ );
+
+ iframeDocument.documentElement.classList.add( 'zoom-out-animation' );
+
+ return iframeDocument.documentElement.animate(
+ getAnimationKeyframes(
+ transitionFromRef.current,
+ transitionToRef.current
+ ),
+ {
+ easing: 'cubic-bezier(0.46, 0.03, 0.52, 0.96)',
+ duration: 400,
+ }
+ );
+ }, [ iframeDocument ] );
+
+ /**
+ * Callback when the zoom out animation is finished.
+ * - Cleans up animations refs.
+ * - Adds final CSS vars for scale and frame size to preserve the state.
+ * - Removes the 'zoom-out-animation' class (which has the fixed positioning).
+ * - Sets the final scroll position after the canvas is no longer in fixed position.
+ * - Removes CSS vars related to the animation.
+ * - Sets the transitionFrom to the transitionTo state to be ready for the next animation.
+ */
+ const finishZoomOutAnimation = useCallback( () => {
+ startAnimationRef.current = false;
+ animationRef.current = null;
+
+ // Add our final scale and frame size now that the animation is done.
+ iframeDocument.documentElement.style.setProperty(
+ '--wp-block-editor-iframe-zoom-out-scale',
+ transitionToRef.current.scaleValue
+ );
+ iframeDocument.documentElement.style.setProperty(
+ '--wp-block-editor-iframe-zoom-out-frame-size',
+ `${ transitionToRef.current.frameSize }px`
+ );
+
+ iframeDocument.documentElement.classList.remove( 'zoom-out-animation' );
+
+ // Set the final scroll position that was just animated to.
+ // Disable reason: Eslint isn't smart enough to know that this is a
+ // DOM element. https://github.com/facebook/react/issues/31483
+ // eslint-disable-next-line react-compiler/react-compiler
+ iframeDocument.documentElement.scrollTop =
+ transitionToRef.current.scrollTop;
+
+ iframeDocument.documentElement.style.removeProperty(
+ '--wp-block-editor-iframe-zoom-out-scroll-top'
+ );
+ iframeDocument.documentElement.style.removeProperty(
+ '--wp-block-editor-iframe-zoom-out-scroll-top-next'
+ );
+
+ // Update previous values.
+ transitionFromRef.current = transitionToRef.current;
+ }, [ iframeDocument ] );
+
+ /**
+ * Runs when zoom out mode is toggled, and sets the startAnimation flag
+ * so the animation will start when the next useEffect runs. We _only_
+ * want to animate when the zoom out mode is toggled, not when the scale
+ * changes due to the container resizing.
+ */
+ useEffect( () => {
+ if ( ! iframeDocument ) {
+ return;
+ }
+
+ if ( isZoomedOut ) {
+ iframeDocument.documentElement.classList.add( 'is-zoomed-out' );
+ }
+
+ startAnimationRef.current = true;
+
+ return () => {
+ iframeDocument.documentElement.classList.remove( 'is-zoomed-out' );
+ };
+ }, [ iframeDocument, isZoomedOut ] );
+
+ /**
+ * This handles:
+ * 1. Setting the correct scale and vars of the canvas when zoomed out
+ * 2. If zoom out mode has been toggled, runs the animation of zooming in/out
+ */
+ useEffect( () => {
+ if ( ! iframeDocument ) {
+ return;
+ }
+
+ // We need to update the appropriate scale to exit from. If sidebars have been opened since setting the
+ // original scale, we will snap to a much smaller scale due to the scale container immediately changing sizes when exiting.
+ if ( isAutoScaled && transitionFromRef.current.scaleValue !== 1 ) {
+ // We use containerWidth as the divisor, as scaleContainerWidth will always match the containerWidth when
+ // exiting.
+ transitionFromRef.current.scaleValue = calculateScale( {
+ frameSize: transitionFromRef.current.frameSize,
+ containerWidth,
+ maxContainerWidth,
+ scaleContainerWidth: containerWidth,
+ } );
+ }
+
+ // If we are not going to animate the transition, set the scale and frame size directly.
+ // If we are animating, these values will be set when the animation is finished.
+ // Example: Opening sidebars that reduce the scale of the canvas, but we don't want to
+ // animate the transition.
+ if ( ! startAnimationRef.current ) {
+ iframeDocument.documentElement.style.setProperty(
+ '--wp-block-editor-iframe-zoom-out-scale',
+ scaleValue
+ );
+ iframeDocument.documentElement.style.setProperty(
+ '--wp-block-editor-iframe-zoom-out-frame-size',
+ `${ frameSize }px`
+ );
+ }
+
+ iframeDocument.documentElement.style.setProperty(
+ '--wp-block-editor-iframe-zoom-out-content-height',
+ `${ contentHeight }px`
+ );
+
+ const clientHeight = iframeDocument.documentElement.clientHeight;
+ iframeDocument.documentElement.style.setProperty(
+ '--wp-block-editor-iframe-zoom-out-inner-height',
+ `${ clientHeight }px`
+ );
+
+ iframeDocument.documentElement.style.setProperty(
+ '--wp-block-editor-iframe-zoom-out-container-width',
+ `${ containerWidth }px`
+ );
+ iframeDocument.documentElement.style.setProperty(
+ '--wp-block-editor-iframe-zoom-out-scale-container-width',
+ `${ scaleContainerWidth }px`
+ );
+
+ /**
+ * Handle the zoom out animation:
+ *
+ * - Get the current scrollTop position.
+ * - Calculate where the same scroll position is after scaling.
+ * - Apply fixed positioning to the canvas with a transform offset
+ * to keep the canvas centered.
+ * - Animate the scale and padding to the new scale and frame size.
+ * - After the animation is complete, remove the fixed positioning
+ * and set the scroll position that keeps everything centered.
+ */
+ if ( startAnimationRef.current ) {
+ // Don't allow a new transition to start again unless it was started by the zoom out mode changing.
+ startAnimationRef.current = false;
+
+ /**
+ * If we already have an animation running, reverse it.
+ */
+ if ( animationRef.current ) {
+ animationRef.current.reverse();
+ // Swap the transition to/from refs so that we set the correct values when
+ // finishZoomOutAnimation runs.
+ const tempTransitionFrom = transitionFromRef.current;
+ const tempTransitionTo = transitionToRef.current;
+ transitionFromRef.current = tempTransitionTo;
+ transitionToRef.current = tempTransitionFrom;
+ } else {
+ /**
+ * Start a new zoom animation.
+ */
+
+ // We can't trust the set value from contentHeight, as it was measured
+ // before the zoom out mode was changed. After zoom out mode is changed,
+ // appenders may appear or disappear, so we need to get the height from
+ // the iframe at this point when we're about to animate the zoom out.
+ // The iframe scrollTop, scrollHeight, and clientHeight will all be
+ // the most accurate.
+ transitionFromRef.current.clientHeight =
+ transitionFromRef.current.clientHeight ?? clientHeight;
+ transitionFromRef.current.scrollTop =
+ iframeDocument.documentElement.scrollTop;
+ transitionFromRef.current.scrollHeight =
+ iframeDocument.documentElement.scrollHeight;
+
+ transitionToRef.current = {
+ scaleValue,
+ frameSize,
+ clientHeight,
+ };
+ transitionToRef.current.scrollTop = computeScrollTopNext(
+ transitionFromRef.current,
+ transitionToRef.current
+ );
+
+ animationRef.current = startZoomOutAnimation();
+
+ // If the user prefers reduced motion, finish the animation immediately and set the final state.
+ if ( prefersReducedMotion ) {
+ finishZoomOutAnimation();
+ } else {
+ animationRef.current.onfinish = finishZoomOutAnimation;
+ }
+ }
+ }
+
+ return () => {
+ iframeDocument.documentElement.style.removeProperty(
+ '--wp-block-editor-iframe-zoom-out-scale'
+ );
+ iframeDocument.documentElement.style.removeProperty(
+ '--wp-block-editor-iframe-zoom-out-frame-size'
+ );
+ iframeDocument.documentElement.style.removeProperty(
+ '--wp-block-editor-iframe-zoom-out-content-height'
+ );
+ iframeDocument.documentElement.style.removeProperty(
+ '--wp-block-editor-iframe-zoom-out-inner-height'
+ );
+ iframeDocument.documentElement.style.removeProperty(
+ '--wp-block-editor-iframe-zoom-out-container-width'
+ );
+ iframeDocument.documentElement.style.removeProperty(
+ '--wp-block-editor-iframe-zoom-out-scale-container-width'
+ );
+ };
+ }, [
+ startZoomOutAnimation,
+ finishZoomOutAnimation,
+ prefersReducedMotion,
+ isAutoScaled,
+ scaleValue,
+ frameSize,
+ iframeDocument,
+ contentHeight,
+ containerWidth,
+ maxContainerWidth,
+ scaleContainerWidth,
+ ] );
+
+ return {
+ isZoomedOut,
+ scaleContainerWidth,
+ contentResizeListener,
+ containerResizeListener,
+ };
+}
diff --git a/packages/block-editor/src/components/image-editor/use-save-image.js b/packages/block-editor/src/components/image-editor/use-save-image.js
index 676f74b9ab6a68..980ac9b8b1123c 100644
--- a/packages/block-editor/src/components/image-editor/use-save-image.js
+++ b/packages/block-editor/src/components/image-editor/use-save-image.js
@@ -83,6 +83,17 @@ export default function useSaveImage( {
} );
createSuccessNotice( messages[ modifierType ], {
type: 'snackbar',
+ actions: [
+ {
+ label: __( 'Undo' ),
+ onClick: () => {
+ onSaveImage( {
+ id,
+ url,
+ } );
+ },
+ },
+ ],
} );
} )
.catch( ( error ) => {
diff --git a/packages/block-editor/src/components/inserter-draggable-blocks/index.js b/packages/block-editor/src/components/inserter-draggable-blocks/index.js
index 0e1aaadc72e67b..ebef6304937aa7 100644
--- a/packages/block-editor/src/components/inserter-draggable-blocks/index.js
+++ b/packages/block-editor/src/components/inserter-draggable-blocks/index.js
@@ -2,12 +2,9 @@
* WordPress dependencies
*/
import { Draggable } from '@wordpress/components';
-import {
- createBlock,
- serialize,
- store as blocksStore,
-} from '@wordpress/blocks';
+import { createBlock, store as blocksStore } from '@wordpress/blocks';
import { useDispatch, useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
/**
* Internal dependencies
@@ -24,20 +21,6 @@ const InserterDraggableBlocks = ( {
children,
pattern,
} ) => {
- const transferData = {
- type: 'inserter',
- blocks,
- };
-
- const blocksContainMedia =
- blocks.filter(
- ( block ) =>
- ( block.name === 'core/image' ||
- block.name === 'core/audio' ||
- block.name === 'core/video' ) &&
- ( block.attributes.url || block.attributes.src )
- ).length > 0;
-
const blockTypeIcon = useSelect(
( select ) => {
const { getBlockType } = select( blocksStore );
@@ -52,6 +35,13 @@ const InserterDraggableBlocks = ( {
useDispatch( blockEditorStore )
);
+ const patternBlock = useMemo( () => {
+ return pattern?.type === INSERTER_PATTERN_TYPES.user &&
+ pattern?.syncStatus !== 'unsynced'
+ ? [ createBlock( 'core/block', { ref: pattern.id } ) ]
+ : undefined;
+ }, [ pattern?.type, pattern?.syncStatus, pattern?.id ] );
+
if ( ! isEnabled ) {
return children( {
draggable: false,
@@ -60,21 +50,21 @@ const InserterDraggableBlocks = ( {
} );
}
+ const draggableBlocks = patternBlock ?? blocks;
return (
{
startDragging();
- const parsedBlocks =
- pattern?.type === INSERTER_PATTERN_TYPES.user &&
- pattern?.syncStatus !== 'unsynced'
- ? [ createBlock( 'core/block', { ref: pattern.id } ) ]
- : blocks;
- event.dataTransfer.setData(
- blocksContainMedia ? 'default' : 'text/html',
- serialize( parsedBlocks )
- );
+ for ( const block of draggableBlocks ) {
+ const type = `wp-block:${ block.name }`;
+ // This will fill in the dataTransfer.types array so that
+ // the drop zone can check if the draggable is eligible.
+ // Unfortuantely, on drag start, we don't have access to the
+ // actual data, only the data keys/types.
+ event.dataTransfer.items.add( '', type );
+ }
} }
onDragEnd={ () => {
stopDragging();
diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js
index e7b6c836468f02..0cbc6c8c26203f 100644
--- a/packages/block-editor/src/components/media-placeholder/index.js
+++ b/packages/block-editor/src/components/media-placeholder/index.js
@@ -19,7 +19,6 @@ import { __ } from '@wordpress/i18n';
import { useState, useEffect } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
import { keyboardReturn } from '@wordpress/icons';
-import { pasteHandler } from '@wordpress/blocks';
import deprecated from '@wordpress/deprecated';
/**
@@ -29,6 +28,7 @@ import MediaUpload from '../media-upload';
import MediaUploadCheck from '../media-upload/check';
import URLPopover from '../url-popover';
import { store as blockEditorStore } from '../../store';
+import { parseDropEvent } from '../use-on-block-drop';
const noop = () => {};
@@ -229,30 +229,15 @@ export function MediaPlaceholder( {
} );
};
- async function handleBlocksDrop( blocks ) {
- if ( ! blocks || ! Array.isArray( blocks ) ) {
- return;
- }
+ async function handleBlocksDrop( event ) {
+ const { blocks } = parseDropEvent( event );
- function recursivelyFindMediaFromBlocks( _blocks ) {
- return _blocks.flatMap( ( block ) =>
- ( block.name === 'core/image' ||
- block.name === 'core/audio' ||
- block.name === 'core/video' ) &&
- ( block.attributes.url || block.attributes.src )
- ? [ block ]
- : recursivelyFindMediaFromBlocks( block.innerBlocks )
- );
- }
-
- const mediaBlocks = recursivelyFindMediaFromBlocks( blocks );
-
- if ( ! mediaBlocks.length ) {
+ if ( ! blocks?.length ) {
return;
}
const uploadedMediaList = await Promise.all(
- mediaBlocks.map( ( block ) => {
+ blocks.map( ( block ) => {
const blockType = block.name.split( '/' )[ 1 ];
if ( block.attributes.id ) {
block.attributes.type = blockType;
@@ -292,13 +277,6 @@ export function MediaPlaceholder( {
}
}
- async function onDrop( event ) {
- const blocks = pasteHandler( {
- HTML: event.dataTransfer?.getData( 'default' ),
- } );
- return await handleBlocksDrop( blocks );
- }
-
const onUpload = ( event ) => {
onFilesUpload( event.target.files );
};
@@ -385,7 +363,26 @@ export function MediaPlaceholder( {
return null;
}
- return ;
+ return (
+ {
+ const prefix = 'wp-block:core/';
+ const types = [];
+ for ( const type of dataTransfer.types ) {
+ if ( type.startsWith( prefix ) ) {
+ types.push( type.slice( prefix.length ) );
+ }
+ }
+ return (
+ types.every( ( type ) =>
+ allowedTypes.includes( type )
+ ) && ( multiple ? true : types.length === 1 )
+ );
+ } }
+ />
+ );
};
const renderCancelLink = () => {
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 16a18358fb2ede..46c40d56fe96d9 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
@@ -35,6 +35,11 @@ export default function useTabNav() {
const noCaptureRef = useRef();
function onFocusCapture( event ) {
+ const canvasElement =
+ container.current.ownerDocument === event.target.ownerDocument
+ ? container.current
+ : container.current.ownerDocument.defaultView.frameElement;
+
// Do not capture incoming focus if set by us in WritingFlow.
if ( noCaptureRef.current ) {
noCaptureRef.current = null;
@@ -64,17 +69,15 @@ export default function useTabNav() {
.focus();
}
// If we don't have any section blocks, focus the section root.
- else {
+ else if ( sectionRootClientId ) {
container.current
.querySelector( `[data-block="${ sectionRootClientId }"]` )
.focus();
+ } else {
+ // If we don't have any section root, focus the canvas.
+ canvasElement.focus();
}
} else {
- const canvasElement =
- container.current.ownerDocument === event.target.ownerDocument
- ? container.current
- : container.current.ownerDocument.defaultView.frameElement;
-
const isBefore =
// eslint-disable-next-line no-bitwise
event.target.compareDocumentPosition( canvasElement ) &
diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js
index 5a5ce7a801594b..9779ae1300fb57 100644
--- a/packages/block-editor/src/store/private-selectors.js
+++ b/packages/block-editor/src/store/private-selectors.js
@@ -109,16 +109,16 @@ function getEnabledClientIdsTreeUnmemoized( state, rootClientId ) {
*
* @return {Object[]} Tree of block objects with only clientID and innerBlocks set.
*/
-export const getEnabledClientIdsTree = createRegistrySelector( ( select ) =>
- createSelector( getEnabledClientIdsTreeUnmemoized, ( state ) => [
+export const getEnabledClientIdsTree = createSelector(
+ getEnabledClientIdsTreeUnmemoized,
+ ( state ) => [
state.blocks.order,
+ state.derivedBlockEditingModes,
+ state.derivedNavModeBlockEditingModes,
state.blockEditingModes,
state.settings.templateLock,
state.blockListSettings,
- select( STORE_NAME ).__unstableGetEditorMode( state ),
- state.zoomLevel,
- getSectionRootClientId( state ),
- ] )
+ ]
);
/**
diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js
index 2f0fa70d616fd9..edae9c392c37de 100644
--- a/packages/block-editor/src/store/reducer.js
+++ b/packages/block-editor/src/store/reducer.js
@@ -9,12 +9,20 @@ import fastDeepEqual from 'fast-deep-equal/es6';
import { pipe } from '@wordpress/compose';
import { combineReducers, select } from '@wordpress/data';
import deprecated from '@wordpress/deprecated';
-import { store as blocksStore } from '@wordpress/blocks';
+import {
+ store as blocksStore,
+ privateApis as blocksPrivateApis,
+} from '@wordpress/blocks';
+
/**
* Internal dependencies
*/
import { PREFERENCES_DEFAULTS, SETTINGS_DEFAULTS } from './defaults';
import { insertAt, moveTo } from './array';
+import { sectionRootClientIdKey } from './private-keys';
+import { unlock } from '../lock-unlock';
+
+const { isContentBlock } = unlock( blocksPrivateApis );
const identity = ( x ) => x;
@@ -2131,6 +2139,632 @@ const combinedReducers = combineReducers( {
zoomLevel,
} );
+/**
+ * Retrieves a block's tree structure, handling both controlled and uncontrolled inner blocks.
+ *
+ * @param {Object} state The current state object.
+ * @param {string} clientId The client ID of the block to retrieve.
+ *
+ * @return {Object|undefined} The block tree object, or undefined if not found. For controlled blocks,
+ * returns a merged tree with controlled inner blocks.
+ */
+function getBlockTreeBlock( state, clientId ) {
+ if ( clientId === '' ) {
+ const rootBlock = state.blocks.tree.get( clientId );
+
+ if ( ! rootBlock ) {
+ return;
+ }
+
+ // Patch the root block to have a clientId property.
+ // TODO - consider updating the blocks reducer so that the root block has this property.
+ return {
+ clientId: '',
+ ...rootBlock,
+ };
+ }
+
+ if ( ! state.blocks.controlledInnerBlocks[ clientId ] ) {
+ return state.blocks.tree.get( clientId );
+ }
+
+ const controlledTree = state.blocks.tree.get( `controlled||${ clientId }` );
+ const regularTree = state.blocks.tree.get( clientId );
+
+ return {
+ ...regularTree,
+ innerBlocks: controlledTree?.innerBlocks,
+ };
+}
+
+/**
+ * Recursively traverses through a block tree of a given block and executes a callback for each block.
+ *
+ * @param {Object} state The store state.
+ * @param {string} clientId The clientId of the block to start traversing from.
+ * @param {Function} callback Function to execute for each block encountered during traversal.
+ * The callback receives the current block as its argument.
+ */
+function traverseBlockTree( state, clientId, callback ) {
+ const parentTree = getBlockTreeBlock( state, clientId );
+ if ( ! parentTree ) {
+ return;
+ }
+
+ callback( parentTree );
+
+ if ( ! parentTree?.innerBlocks?.length ) {
+ return;
+ }
+
+ for ( const block of parentTree?.innerBlocks ) {
+ traverseBlockTree( state, block.clientId, callback );
+ }
+}
+
+/**
+ * Checks if a block has a parent in a list of client IDs, and if so returns the client ID of the parent.
+ *
+ * @param {Object} state The current state object.
+ * @param {string} clientId The client ID of the block to search the parents of.
+ * @param {Array} clientIds The client IDs of the blocks to check.
+ *
+ * @return {string|undefined} The client ID of the parent block if found, undefined otherwise.
+ */
+function findParentInClientIdsList( state, clientId, clientIds ) {
+ let parent = state.blocks.parents.get( clientId );
+ while ( parent ) {
+ if ( clientIds.includes( parent ) ) {
+ return parent;
+ }
+ parent = state.blocks.parents.get( parent );
+ }
+}
+
+/**
+ * Checks if a block has any bindings in its metadata attributes.
+ *
+ * @param {Object} block The block object to check for bindings.
+ * @return {boolean} True if the block has bindings, false otherwise.
+ */
+function hasBindings( block ) {
+ return (
+ block?.attributes?.metadata?.bindings &&
+ Object.keys( block?.attributes?.metadata?.bindings ).length
+ );
+}
+
+/**
+ * Computes and returns derived block editing modes for a given block tree.
+ *
+ * This function calculates the editing modes for each block in the tree, taking into account
+ * various factors such as zoom level, navigation mode, sections, and synced patterns.
+ *
+ * @param {Object} state The current state object.
+ * @param {boolean} isNavMode Whether the navigation mode is active.
+ * @param {string} treeClientId The client ID of the root block for the tree. Defaults to an empty string.
+ * @return {Map} A Map containing the derived block editing modes, keyed by block client ID.
+ */
+function getDerivedBlockEditingModesForTree(
+ state,
+ isNavMode = false,
+ treeClientId = ''
+) {
+ const isZoomedOut =
+ state?.zoomLevel < 100 || state?.zoomLevel === 'auto-scaled';
+ const derivedBlockEditingModes = new Map();
+
+ // When there are sections, the majority of blocks are disabled,
+ // so the default block editing mode is set to disabled.
+ const sectionRootClientId = state.settings?.[ sectionRootClientIdKey ];
+ const sectionClientIds = state.blocks.order.get( sectionRootClientId );
+ const syncedPatternClientIds = Object.keys(
+ state.blocks.controlledInnerBlocks
+ ).filter(
+ ( clientId ) =>
+ state.blocks.byClientId?.get( clientId )?.name === 'core/block'
+ );
+
+ traverseBlockTree( state, treeClientId, ( block ) => {
+ const { clientId, name: blockName } = block;
+ if ( isZoomedOut || isNavMode ) {
+ // If the root block is the section root set its editing mode to contentOnly.
+ if ( clientId === sectionRootClientId ) {
+ derivedBlockEditingModes.set( clientId, 'contentOnly' );
+ return;
+ }
+
+ // There are no sections, so everything else is disabled.
+ if ( ! sectionClientIds?.length ) {
+ derivedBlockEditingModes.set( clientId, 'disabled' );
+ return;
+ }
+
+ if ( sectionClientIds.includes( clientId ) ) {
+ derivedBlockEditingModes.set( clientId, 'contentOnly' );
+ return;
+ }
+
+ // If zoomed out, all blocks that aren't sections or the section root are
+ // disabled.
+ // If the tree root is not in a section, set its editing mode to disabled.
+ if (
+ isZoomedOut ||
+ ! findParentInClientIdsList( state, clientId, sectionClientIds )
+ ) {
+ derivedBlockEditingModes.set( clientId, 'disabled' );
+ return;
+ }
+
+ // Handle synced pattern content so the inner blocks of a synced pattern are
+ // properly disabled.
+ if ( syncedPatternClientIds.length ) {
+ const parentPatternClientId = findParentInClientIdsList(
+ state,
+ clientId,
+ syncedPatternClientIds
+ );
+
+ if ( parentPatternClientId ) {
+ // This is a pattern nested in another pattern, it should be disabled.
+ if (
+ findParentInClientIdsList(
+ state,
+ parentPatternClientId,
+ syncedPatternClientIds
+ )
+ ) {
+ derivedBlockEditingModes.set( clientId, 'disabled' );
+ return;
+ }
+
+ if ( hasBindings( block ) ) {
+ derivedBlockEditingModes.set( clientId, 'contentOnly' );
+ return;
+ }
+
+ // Synced pattern content without a binding isn't editable
+ // from the instance, the user has to edit the pattern source,
+ // so return 'disabled'.
+ derivedBlockEditingModes.set( clientId, 'disabled' );
+ return;
+ }
+ }
+
+ if ( blockName && isContentBlock( blockName ) ) {
+ derivedBlockEditingModes.set( clientId, 'contentOnly' );
+ return;
+ }
+
+ derivedBlockEditingModes.set( clientId, 'disabled' );
+ return;
+ }
+
+ if ( syncedPatternClientIds.length ) {
+ // Synced pattern blocks (core/block).
+ if ( syncedPatternClientIds.includes( clientId ) ) {
+ // This is a pattern nested in another pattern, it should be disabled.
+ if (
+ findParentInClientIdsList(
+ state,
+ clientId,
+ syncedPatternClientIds
+ )
+ ) {
+ derivedBlockEditingModes.set( clientId, 'disabled' );
+ return;
+ }
+
+ // Else do nothing, use the default block editing mode.
+ return;
+ }
+
+ // Inner blocks of synced patterns.
+ const parentPatternClientId = findParentInClientIdsList(
+ state,
+ clientId,
+ syncedPatternClientIds
+ );
+ if ( parentPatternClientId ) {
+ // This is a pattern nested in another pattern, it should be disabled.
+ if (
+ findParentInClientIdsList(
+ state,
+ parentPatternClientId,
+ syncedPatternClientIds
+ )
+ ) {
+ derivedBlockEditingModes.set( clientId, 'disabled' );
+ return;
+ }
+
+ if ( hasBindings( block ) ) {
+ derivedBlockEditingModes.set( clientId, 'contentOnly' );
+ return;
+ }
+
+ // Synced pattern content without a binding isn't editable
+ // from the instance, the user has to edit the pattern source,
+ // so return 'disabled'.
+ derivedBlockEditingModes.set( clientId, 'disabled' );
+ }
+ }
+ } );
+
+ return derivedBlockEditingModes;
+}
+
+/**
+ * Updates the derived block editing modes based on added and removed blocks.
+ *
+ * This function handles the updating of block editing modes when blocks are added,
+ * removed, or moved within the editor.
+ *
+ * It only returns a value when modifications are made to the block editing modes.
+ *
+ * @param {Object} options The options for updating derived block editing modes.
+ * @param {Object} options.prevState The previous state object.
+ * @param {Object} options.nextState The next state object.
+ * @param {Array} [options.addedBlocks] An array of blocks that were added.
+ * @param {Array} [options.removedClientIds] An array of client IDs of blocks that were removed.
+ * @param {boolean} [options.isNavMode] Whether the navigation mode is active.
+ * @return {Map|undefined} The updated derived block editing modes, or undefined if no changes were made.
+ */
+function getDerivedBlockEditingModesUpdates( {
+ prevState,
+ nextState,
+ addedBlocks,
+ removedClientIds,
+ isNavMode = false,
+} ) {
+ const prevDerivedBlockEditingModes = isNavMode
+ ? prevState.derivedNavModeBlockEditingModes
+ : prevState.derivedBlockEditingModes;
+ let nextDerivedBlockEditingModes;
+
+ // Perform removals before additions to handle cases like the `MOVE_BLOCKS_TO_POSITION` action.
+ // That action removes a set of clientIds, but adds the same blocks back in a different location.
+ // If removals were performed after additions, those moved clientIds would be removed incorrectly.
+ removedClientIds?.forEach( ( clientId ) => {
+ // The actions only receive parent block IDs for removal.
+ // Recurse through the block tree to ensure all blocks are removed.
+ // Specifically use the previous state, before the blocks were removed.
+ traverseBlockTree( prevState, clientId, ( block ) => {
+ if ( prevDerivedBlockEditingModes.has( block.clientId ) ) {
+ if ( ! nextDerivedBlockEditingModes ) {
+ nextDerivedBlockEditingModes = new Map(
+ prevDerivedBlockEditingModes
+ );
+ }
+ nextDerivedBlockEditingModes.delete( block.clientId );
+ }
+ } );
+ } );
+
+ addedBlocks?.forEach( ( addedBlock ) => {
+ traverseBlockTree( nextState, addedBlock.clientId, ( block ) => {
+ const updates = getDerivedBlockEditingModesForTree(
+ nextState,
+ isNavMode,
+ block.clientId
+ );
+
+ if ( updates.size ) {
+ if ( ! nextDerivedBlockEditingModes ) {
+ nextDerivedBlockEditingModes = new Map( [
+ ...( prevDerivedBlockEditingModes?.size
+ ? prevDerivedBlockEditingModes
+ : [] ),
+ ...updates,
+ ] );
+ } else {
+ nextDerivedBlockEditingModes = new Map( [
+ ...( nextDerivedBlockEditingModes?.size
+ ? nextDerivedBlockEditingModes
+ : [] ),
+ ...updates,
+ ] );
+ }
+ }
+ } );
+ } );
+
+ return nextDerivedBlockEditingModes;
+}
+
+/**
+ * Higher-order reducer that adds derived block editing modes to the state.
+ *
+ * This function wraps a reducer and enhances it to handle actions that affect
+ * block editing modes. It updates the derivedBlockEditingModes in the state
+ * based on various actions such as adding, removing, or moving blocks, or changing
+ * the editor mode.
+ *
+ * @param {Function} reducer The original reducer function to be wrapped.
+ * @return {Function} A new reducer function that includes derived block editing modes handling.
+ */
+export function withDerivedBlockEditingModes( reducer ) {
+ return ( state, action ) => {
+ const nextState = reducer( state, action );
+
+ // An exception is needed here to still recompute the block editing modes when
+ // the editor mode changes since the editor mode isn't stored within the
+ // block editor state and changing it won't trigger an altered new state.
+ if ( action.type !== 'SET_EDITOR_MODE' && nextState === state ) {
+ return state;
+ }
+
+ switch ( action.type ) {
+ case 'REMOVE_BLOCKS': {
+ const nextDerivedBlockEditingModes =
+ getDerivedBlockEditingModesUpdates( {
+ prevState: state,
+ nextState,
+ removedClientIds: action.clientIds,
+ isNavMode: false,
+ } );
+ const nextDerivedNavModeBlockEditingModes =
+ getDerivedBlockEditingModesUpdates( {
+ prevState: state,
+ nextState,
+ removedClientIds: action.clientIds,
+ isNavMode: true,
+ } );
+
+ if (
+ nextDerivedBlockEditingModes ||
+ nextDerivedNavModeBlockEditingModes
+ ) {
+ return {
+ ...nextState,
+ derivedBlockEditingModes:
+ nextDerivedBlockEditingModes ??
+ state.derivedBlockEditingModes,
+ derivedNavModeBlockEditingModes:
+ nextDerivedNavModeBlockEditingModes ??
+ state.derivedNavModeBlockEditingModes,
+ };
+ }
+ break;
+ }
+ case 'RECEIVE_BLOCKS':
+ case 'INSERT_BLOCKS': {
+ const nextDerivedBlockEditingModes =
+ getDerivedBlockEditingModesUpdates( {
+ prevState: state,
+ nextState,
+ addedBlocks: action.blocks,
+ isNavMode: false,
+ } );
+ const nextDerivedNavModeBlockEditingModes =
+ getDerivedBlockEditingModesUpdates( {
+ prevState: state,
+ nextState,
+ addedBlocks: action.blocks,
+ isNavMode: true,
+ } );
+
+ if (
+ nextDerivedBlockEditingModes ||
+ nextDerivedNavModeBlockEditingModes
+ ) {
+ return {
+ ...nextState,
+ derivedBlockEditingModes:
+ nextDerivedBlockEditingModes ??
+ state.derivedBlockEditingModes,
+ derivedNavModeBlockEditingModes:
+ nextDerivedNavModeBlockEditingModes ??
+ state.derivedNavModeBlockEditingModes,
+ };
+ }
+ break;
+ }
+ case 'SET_HAS_CONTROLLED_INNER_BLOCKS': {
+ const updatedBlock = nextState.blocks.tree.get(
+ action.clientId
+ );
+ // The block might have been removed.
+ if ( ! updatedBlock ) {
+ break;
+ }
+
+ const nextDerivedBlockEditingModes =
+ getDerivedBlockEditingModesUpdates( {
+ prevState: state,
+ nextState,
+ addedBlocks: [ updatedBlock ],
+ isNavMode: false,
+ } );
+ const nextDerivedNavModeBlockEditingModes =
+ getDerivedBlockEditingModesUpdates( {
+ prevState: state,
+ nextState,
+ addedBlocks: [ updatedBlock ],
+ isNavMode: true,
+ } );
+
+ if (
+ nextDerivedBlockEditingModes ||
+ nextDerivedNavModeBlockEditingModes
+ ) {
+ return {
+ ...nextState,
+ derivedBlockEditingModes:
+ nextDerivedBlockEditingModes ??
+ state.derivedBlockEditingModes,
+ derivedNavModeBlockEditingModes:
+ nextDerivedNavModeBlockEditingModes ??
+ state.derivedNavModeBlockEditingModes,
+ };
+ }
+ break;
+ }
+ case 'REPLACE_BLOCKS': {
+ const nextDerivedBlockEditingModes =
+ getDerivedBlockEditingModesUpdates( {
+ prevState: state,
+ nextState,
+ addedBlocks: action.blocks,
+ removedClientIds: action.clientIds,
+ isNavMode: false,
+ } );
+ const nextDerivedNavModeBlockEditingModes =
+ getDerivedBlockEditingModesUpdates( {
+ prevState: state,
+ nextState,
+ addedBlocks: action.blocks,
+ removedClientIds: action.clientIds,
+ isNavMode: true,
+ } );
+
+ if (
+ nextDerivedBlockEditingModes ||
+ nextDerivedNavModeBlockEditingModes
+ ) {
+ return {
+ ...nextState,
+ derivedBlockEditingModes:
+ nextDerivedBlockEditingModes ??
+ state.derivedBlockEditingModes,
+ derivedNavModeBlockEditingModes:
+ nextDerivedNavModeBlockEditingModes ??
+ state.derivedNavModeBlockEditingModes,
+ };
+ }
+ break;
+ }
+ case 'REPLACE_INNER_BLOCKS': {
+ // Get the clientIds of the blocks that are being replaced
+ // from the old state, before they were removed.
+ const removedClientIds = state.blocks.order.get(
+ action.rootClientId
+ );
+ const nextDerivedBlockEditingModes =
+ getDerivedBlockEditingModesUpdates( {
+ prevState: state,
+ nextState,
+ addedBlocks: action.blocks,
+ removedClientIds,
+ isNavMode: false,
+ } );
+ const nextDerivedNavModeBlockEditingModes =
+ getDerivedBlockEditingModesUpdates( {
+ prevState: state,
+ nextState,
+ addedBlocks: action.blocks,
+ removedClientIds,
+ isNavMode: true,
+ } );
+
+ if (
+ nextDerivedBlockEditingModes ||
+ nextDerivedNavModeBlockEditingModes
+ ) {
+ return {
+ ...nextState,
+ derivedBlockEditingModes:
+ nextDerivedBlockEditingModes ??
+ state.derivedBlockEditingModes,
+ derivedNavModeBlockEditingModes:
+ nextDerivedNavModeBlockEditingModes ??
+ state.derivedNavModeBlockEditingModes,
+ };
+ }
+ break;
+ }
+ case 'MOVE_BLOCKS_TO_POSITION': {
+ const addedBlocks = action.clientIds.map( ( clientId ) => {
+ return nextState.blocks.byClientId.get( clientId );
+ } );
+ const nextDerivedBlockEditingModes =
+ getDerivedBlockEditingModesUpdates( {
+ prevState: state,
+ nextState,
+ addedBlocks,
+ removedClientIds: action.clientIds,
+ isNavMode: false,
+ } );
+ const nextDerivedNavModeBlockEditingModes =
+ getDerivedBlockEditingModesUpdates( {
+ prevState: state,
+ nextState,
+ addedBlocks,
+ removedClientIds: action.clientIds,
+ isNavMode: true,
+ } );
+
+ if (
+ nextDerivedBlockEditingModes ||
+ nextDerivedNavModeBlockEditingModes
+ ) {
+ return {
+ ...nextState,
+ derivedBlockEditingModes:
+ nextDerivedBlockEditingModes ??
+ state.derivedBlockEditingModes,
+ derivedNavModeBlockEditingModes:
+ nextDerivedNavModeBlockEditingModes ??
+ state.derivedNavModeBlockEditingModes,
+ };
+ }
+ break;
+ }
+ case 'UPDATE_SETTINGS': {
+ // Recompute the entire tree if the section root changes.
+ if (
+ state?.settings?.[ sectionRootClientIdKey ] !==
+ nextState?.settings?.[ sectionRootClientIdKey ]
+ ) {
+ return {
+ ...nextState,
+ derivedBlockEditingModes:
+ getDerivedBlockEditingModesForTree(
+ nextState,
+ false /* Nav mode off */
+ ),
+ derivedNavModeBlockEditingModes:
+ getDerivedBlockEditingModesForTree(
+ nextState,
+ true /* Nav mode on */
+ ),
+ };
+ }
+ break;
+ }
+ case 'RESET_BLOCKS':
+ case 'SET_EDITOR_MODE':
+ case 'RESET_ZOOM_LEVEL':
+ case 'SET_ZOOM_LEVEL': {
+ // Recompute the entire tree if the editor mode or zoom level changes,
+ // or if all the blocks are reset.
+ return {
+ ...nextState,
+ derivedBlockEditingModes:
+ getDerivedBlockEditingModesForTree(
+ nextState,
+ false /* Nav mode off */
+ ),
+ derivedNavModeBlockEditingModes:
+ getDerivedBlockEditingModesForTree(
+ nextState,
+ true /* Nav mode on */
+ ),
+ };
+ }
+ }
+
+ // If there's no change, the derivedBlockEditingModes from the previous
+ // state need to be preserved.
+ nextState.derivedBlockEditingModes =
+ state?.derivedBlockEditingModes ?? new Map();
+ nextState.derivedNavModeBlockEditingModes =
+ state?.derivedNavModeBlockEditingModes ?? new Map();
+
+ return nextState;
+ };
+}
+
function withAutomaticChangeReset( reducer ) {
return ( state, action ) => {
const nextState = reducer( state, action );
@@ -2184,4 +2818,7 @@ function withAutomaticChangeReset( reducer ) {
};
}
-export default withAutomaticChangeReset( combinedReducers );
+export default pipe(
+ withDerivedBlockEditingModes,
+ withAutomaticChangeReset
+)( combinedReducers );
diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
index ac1d178f43de7c..75c43770f7e175 100644
--- a/packages/block-editor/src/store/selectors.js
+++ b/packages/block-editor/src/store/selectors.js
@@ -3000,14 +3000,6 @@ export function __unstableIsWithinBlockOverlay( state, clientId ) {
return false;
}
-function isWithinBlock( state, clientId, parentClientId ) {
- let parent = state.blocks.parents.get( clientId );
- while ( !! parent && parent !== parentClientId ) {
- parent = state.blocks.parents.get( parent );
- }
- return parent === parentClientId;
-}
-
/**
* @typedef {import('../components/block-editing-mode').BlockEditingMode} BlockEditingMode
*/
@@ -3049,68 +3041,28 @@ export const getBlockEditingMode = createRegistrySelector(
clientId = '';
}
- // In zoom-out mode, override the behavior set by
- // __unstableSetBlockEditingMode to only allow editing the top-level
- // sections.
- if ( isZoomOut( state ) ) {
- const sectionRootClientId = getSectionRootClientId( state );
-
- if ( clientId === '' /* ROOT_CONTAINER_CLIENT_ID */ ) {
- return sectionRootClientId ? 'disabled' : 'contentOnly';
- }
- if ( clientId === sectionRootClientId ) {
- return 'contentOnly';
- }
- const sectionsClientIds = getBlockOrder(
- state,
- sectionRootClientId
- );
-
- // Sections are always contentOnly.
- if ( sectionsClientIds?.includes( clientId ) ) {
- return 'contentOnly';
- }
-
- return 'disabled';
+ const isNavMode =
+ select( preferencesStore )?.get( 'core', 'editorTool' ) ===
+ 'navigation';
+
+ // If the editor is currently not in navigation mode, check if the clientId
+ // has an editing mode set in the regular derived map.
+ // There may be an editing mode set here for synced patterns or in zoomed out
+ // mode.
+ if (
+ ! isNavMode &&
+ state.derivedBlockEditingModes?.has( clientId )
+ ) {
+ return state.derivedBlockEditingModes.get( clientId );
}
- const editorMode = __unstableGetEditorMode( state );
- if ( editorMode === 'navigation' ) {
- const sectionRootClientId = getSectionRootClientId( state );
-
- // The root section is "default mode"
- if ( clientId === sectionRootClientId ) {
- return 'default';
- }
-
- // Sections should always be contentOnly in navigation mode.
- const sectionsClientIds = getBlockOrder(
- state,
- sectionRootClientId
- );
- if ( sectionsClientIds.includes( clientId ) ) {
- return 'contentOnly';
- }
-
- // Blocks outside sections should be disabled.
- const isWithinSectionRoot = isWithinBlock(
- state,
- clientId,
- sectionRootClientId
- );
- if ( ! isWithinSectionRoot ) {
- return 'disabled';
- }
-
- // The rest of the blocks depend on whether they are content blocks or not.
- // This "flattens" the sections tree.
- const name = getBlockName( state, clientId );
- const { hasContentRoleAttribute } = unlock(
- select( blocksStore )
- );
- const isContent = hasContentRoleAttribute( name );
-
- return isContent ? 'contentOnly' : 'disabled';
+ // If the editor *is* in navigation mode, the block editing mode states
+ // are stored in the derivedNavModeBlockEditingModes map.
+ if (
+ isNavMode &&
+ state.derivedNavModeBlockEditingModes?.has( clientId )
+ ) {
+ return state.derivedNavModeBlockEditingModes.get( clientId );
}
// In normal mode, consider that an explicitely set editing mode takes over.
@@ -3120,7 +3072,7 @@ export const getBlockEditingMode = createRegistrySelector(
}
// In normal mode, top level is default mode.
- if ( ! clientId ) {
+ if ( clientId === '' ) {
return 'default';
}
diff --git a/packages/block-editor/src/store/test/private-selectors.js b/packages/block-editor/src/store/test/private-selectors.js
index fb1d736e175af0..268d463f227d4d 100644
--- a/packages/block-editor/src/store/test/private-selectors.js
+++ b/packages/block-editor/src/store/test/private-selectors.js
@@ -129,6 +129,7 @@ describe( 'private selectors', () => {
getBlockEditingMode.registry = {
select: jest.fn( () => ( {
hasContentRoleAttribute,
+ get,
} ) ),
};
__unstableGetEditorMode.registry = {
diff --git a/packages/block-editor/src/store/test/reducer.js b/packages/block-editor/src/store/test/reducer.js
index c99d639ba8a09e..dd1665d6736ada 100644
--- a/packages/block-editor/src/store/test/reducer.js
+++ b/packages/block-editor/src/store/test/reducer.js
@@ -10,7 +10,10 @@ import {
registerBlockType,
unregisterBlockType,
createBlock,
+ privateApis,
} from '@wordpress/blocks';
+import { combineReducers, select } from '@wordpress/data';
+import { store as preferencesStore } from '@wordpress/preferences';
/**
* Internal dependencies
@@ -38,8 +41,30 @@ import {
blockEditingModes,
openedBlockSettingsMenu,
expandedBlock,
+ zoomLevel,
+ withDerivedBlockEditingModes,
} from '../reducer';
+import { unlock } from '../../lock-unlock';
+import { sectionRootClientIdKey } from '.././private-keys';
+
+const { isContentBlock } = unlock( privateApis );
+
+jest.mock( '@wordpress/data/src/select', () => {
+ const actualSelect = jest.requireActual( '@wordpress/data/src/select' );
+
+ return {
+ select: jest.fn( ( ...args ) => actualSelect.select( ...args ) ),
+ };
+} );
+
+jest.mock( '@wordpress/blocks/src/api/utils', () => {
+ return {
+ ...jest.requireActual( '@wordpress/blocks/src/api/utils' ),
+ isContentBlock: jest.fn(),
+ };
+} );
+
const noop = () => {};
describe( 'state', () => {
@@ -3544,4 +3569,828 @@ describe( 'state', () => {
expect( state ).toBe( null );
} );
} );
+
+ describe( 'withDerivedBlockEditingModes', () => {
+ const testReducer = withDerivedBlockEditingModes(
+ combineReducers( {
+ blocks,
+ settings,
+ zoomLevel,
+ } )
+ );
+
+ function dispatchActions( actions, reducer, initialState = {} ) {
+ return actions.reduce( ( _state, action ) => {
+ return reducer( _state, action );
+ }, initialState );
+ }
+
+ beforeEach( () => {
+ isContentBlock.mockImplementation(
+ ( blockName ) => blockName === 'core/paragraph'
+ );
+ } );
+
+ afterAll( () => {
+ isContentBlock.mockRestore();
+ } );
+
+ describe( 'edit mode', () => {
+ let initialState;
+ beforeAll( () => {
+ select.mockImplementation( ( storeName ) => {
+ if ( storeName === preferencesStore ) {
+ return {
+ get: jest.fn( () => 'edit' ),
+ };
+ }
+ return select( storeName );
+ } );
+
+ initialState = dispatchActions(
+ [
+ {
+ type: 'UPDATE_SETTINGS',
+ settings: {
+ [ sectionRootClientIdKey ]: '',
+ },
+ },
+ {
+ type: 'RESET_BLOCKS',
+ blocks: [
+ {
+ name: 'core/group',
+ clientId: 'group-1',
+ attributes: {},
+ innerBlocks: [
+ {
+ name: 'core/paragraph',
+ clientId: 'paragraph-1',
+ attributes: {},
+ innerBlocks: [],
+ },
+ {
+ name: 'core/group',
+ clientId: 'group-2',
+ attributes: {},
+ innerBlocks: [
+ {
+ name: 'core/paragraph',
+ clientId: 'paragraph-2',
+ attributes: {},
+ innerBlocks: [],
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ testReducer
+ );
+ } );
+
+ afterAll( () => {
+ select.mockRestore();
+ } );
+
+ it( 'returns no block editing modes when zoomed out / navigation mode are not active and there are no synced patterns', () => {
+ expect( initialState.derivedBlockEditingModes ).toEqual(
+ new Map()
+ );
+ } );
+ } );
+
+ describe( 'synced patterns', () => {
+ let initialState;
+ beforeAll( () => {
+ select.mockImplementation( ( storeName ) => {
+ if ( storeName === preferencesStore ) {
+ return {
+ get: jest.fn( () => 'edit' ),
+ };
+ }
+ return select( storeName );
+ } );
+
+ // Simulates how the editor typically inserts controlled blocks,
+ // - first the pattern is inserted with no inner blocks.
+ // - next the pattern is marked as a controlled block.
+ // - finally, once the inner blocks of the pattern are received, they're inserted.
+ // This process is repeated for the two patterns in this test.
+ initialState = dispatchActions(
+ [
+ {
+ type: 'UPDATE_SETTINGS',
+ settings: {
+ [ sectionRootClientIdKey ]: '',
+ },
+ },
+ {
+ type: 'RESET_BLOCKS',
+ blocks: [
+ {
+ name: 'core/group',
+ clientId: 'group-1',
+ attributes: {},
+ innerBlocks: [
+ {
+ name: 'core/paragraph',
+ clientId: 'paragraph-1',
+ attributes: {},
+ innerBlocks: [],
+ },
+ {
+ name: 'core/group',
+ clientId: 'group-2',
+ attributes: {},
+ innerBlocks: [
+ {
+ name: 'core/paragraph',
+ clientId: 'paragraph-2',
+ attributes: {},
+ innerBlocks: [],
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ {
+ type: 'INSERT_BLOCKS',
+ rootClientId: '',
+ blocks: [
+ {
+ name: 'core/block',
+ clientId: 'root-pattern',
+ attributes: {},
+ innerBlocks: [],
+ },
+ ],
+ },
+ {
+ type: 'SET_HAS_CONTROLLED_INNER_BLOCKS',
+ clientId: 'root-pattern',
+ hasControlledInnerBlocks: true,
+ },
+ {
+ type: 'REPLACE_INNER_BLOCKS',
+ rootClientId: 'root-pattern',
+ blocks: [
+ {
+ name: 'core/block',
+ clientId: 'nested-pattern',
+ attributes: {},
+ innerBlocks: [],
+ },
+ {
+ name: 'core/paragraph',
+ clientId: 'pattern-paragraph',
+ attributes: {},
+ innerBlocks: [],
+ },
+ {
+ name: 'core/group',
+ clientId: 'pattern-group',
+ attributes: {},
+ innerBlocks: [
+ {
+ name: 'core/paragraph',
+ clientId:
+ 'pattern-paragraph-with-overrides',
+ attributes: {
+ metadata: {
+ bindings: {
+ __default:
+ 'core/pattern-overrides',
+ },
+ },
+ },
+ innerBlocks: [],
+ },
+ ],
+ },
+ ],
+ },
+ {
+ type: 'SET_HAS_CONTROLLED_INNER_BLOCKS',
+ clientId: 'nested-pattern',
+ hasControlledInnerBlocks: true,
+ },
+ {
+ type: 'REPLACE_INNER_BLOCKS',
+ rootClientId: 'nested-pattern',
+ blocks: [
+ {
+ name: 'core/paragraph',
+ clientId: 'nested-paragraph',
+ attributes: {},
+ innerBlocks: [],
+ },
+ {
+ name: 'core/group',
+ clientId: 'nested-group',
+ attributes: {},
+ innerBlocks: [
+ {
+ name: 'core/paragraph',
+ clientId:
+ 'nested-paragraph-with-overrides',
+ attributes: {
+ metadata: {
+ bindings: {
+ __default:
+ 'core/pattern-overrides',
+ },
+ },
+ },
+ innerBlocks: [],
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ testReducer,
+ initialState
+ );
+ } );
+
+ afterAll( () => {
+ select.mockRestore();
+ } );
+
+ it( 'returns the expected block editing modes for synced patterns', () => {
+ // Only the parent pattern and its own children that have bindings
+ // are in contentOnly mode. All other blocks are disabled.
+ expect( initialState.derivedBlockEditingModes ).toEqual(
+ new Map(
+ Object.entries( {
+ 'pattern-paragraph': 'disabled',
+ 'pattern-group': 'disabled',
+ 'pattern-paragraph-with-overrides': 'contentOnly',
+ 'nested-pattern': 'disabled',
+ 'nested-paragraph': 'disabled',
+ 'nested-group': 'disabled',
+ 'nested-paragraph-with-overrides': 'disabled',
+ } )
+ )
+ );
+ } );
+
+ it( 'removes block editing modes when synced patterns are removed', () => {
+ const { derivedBlockEditingModes } = dispatchActions(
+ [
+ {
+ type: 'REMOVE_BLOCKS',
+ clientIds: [ 'root-pattern' ],
+ },
+ ],
+ testReducer,
+ initialState
+ );
+
+ expect( derivedBlockEditingModes ).toEqual( new Map() );
+ } );
+
+ it( 'returns the expected block editing modes for synced patterns when switching to navigation mode', () => {
+ select.mockImplementation( ( storeName ) => {
+ if ( storeName === preferencesStore ) {
+ return {
+ get: jest.fn( () => 'navigation' ),
+ };
+ }
+ return select( storeName );
+ } );
+
+ const {
+ derivedBlockEditingModes,
+ derivedNavModeBlockEditingModes,
+ } = dispatchActions(
+ [
+ {
+ type: 'SET_EDITOR_MODE',
+ mode: 'navigation',
+ },
+ ],
+ testReducer,
+ initialState
+ );
+
+ expect( derivedBlockEditingModes ).toEqual(
+ new Map(
+ Object.entries( {
+ 'pattern-paragraph': 'disabled',
+ 'pattern-group': 'disabled',
+ 'pattern-paragraph-with-overrides': 'contentOnly', // Pattern child with bindings.
+ 'nested-pattern': 'disabled',
+ 'nested-paragraph': 'disabled',
+ 'nested-group': 'disabled',
+ 'nested-paragraph-with-overrides': 'disabled',
+ } )
+ )
+ );
+
+ expect( derivedNavModeBlockEditingModes ).toEqual(
+ new Map(
+ Object.entries( {
+ '': 'contentOnly', // Section root.
+ 'group-1': 'contentOnly', // Section.
+ 'paragraph-1': 'contentOnly', // Content block in section.
+ 'group-2': 'disabled',
+ 'paragraph-2': 'contentOnly', // Content block in section.
+ 'root-pattern': 'contentOnly', // Section.
+ 'pattern-paragraph': 'disabled',
+ 'pattern-group': 'disabled',
+ 'pattern-paragraph-with-overrides': 'contentOnly', // Pattern child with bindings.
+ 'nested-pattern': 'disabled',
+ 'nested-paragraph': 'disabled',
+ 'nested-group': 'disabled',
+ 'nested-paragraph-with-overrides': 'disabled',
+ } )
+ )
+ );
+
+ select.mockImplementation( ( storeName ) => {
+ if ( storeName === preferencesStore ) {
+ return {
+ get: jest.fn( () => 'edit' ),
+ };
+ }
+ return select( storeName );
+ } );
+ } );
+
+ it( 'returns the expected block editing modes for synced patterns when switching to zoomed out mode', () => {
+ const { derivedBlockEditingModes } = dispatchActions(
+ [
+ {
+ type: 'SET_ZOOM_LEVEL',
+ zoom: 'auto-scaled',
+ },
+ ],
+ testReducer,
+ initialState
+ );
+
+ expect( derivedBlockEditingModes ).toEqual(
+ new Map(
+ Object.entries( {
+ '': 'contentOnly', // Section root.
+ 'group-1': 'contentOnly', // Section.
+ 'paragraph-1': 'disabled',
+ 'group-2': 'disabled',
+ 'paragraph-2': 'disabled',
+ 'root-pattern': 'contentOnly', // Pattern and section.
+ 'pattern-paragraph': 'disabled',
+ 'pattern-group': 'disabled',
+ 'pattern-paragraph-with-overrides': 'disabled',
+ 'nested-pattern': 'disabled',
+ 'nested-paragraph': 'disabled',
+ 'nested-group': 'disabled',
+ 'nested-paragraph-with-overrides': 'disabled',
+ } )
+ )
+ );
+ } );
+ } );
+
+ describe( 'navigation mode', () => {
+ let initialState;
+
+ beforeAll( () => {
+ select.mockImplementation( ( storeName ) => {
+ if ( storeName === preferencesStore ) {
+ return {
+ get: jest.fn( () => 'navigation' ),
+ };
+ }
+ return select( storeName );
+ } );
+
+ initialState = dispatchActions(
+ [
+ {
+ type: 'UPDATE_SETTINGS',
+ settings: {
+ [ sectionRootClientIdKey ]: '',
+ },
+ },
+ {
+ type: 'RESET_BLOCKS',
+ blocks: [
+ {
+ name: 'core/group',
+ clientId: 'group-1',
+ attributes: {},
+ innerBlocks: [
+ {
+ name: 'core/paragraph',
+ clientId: 'paragraph-1',
+ attributes: {},
+ innerBlocks: [],
+ },
+ {
+ name: 'core/group',
+ clientId: 'group-2',
+ attributes: {},
+ innerBlocks: [
+ {
+ name: 'core/paragraph',
+ clientId: 'paragraph-2',
+ attributes: {},
+ innerBlocks: [],
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ testReducer
+ );
+ } );
+
+ afterAll( () => {
+ select.mockRestore();
+ } );
+
+ it( 'returns the expected block editing modes', () => {
+ expect( initialState.derivedNavModeBlockEditingModes ).toEqual(
+ new Map(
+ Object.entries( {
+ '': 'contentOnly', // Section root.
+ 'group-1': 'contentOnly', // Section block.
+ 'paragraph-1': 'contentOnly', // Content block in section.
+ 'group-2': 'disabled', // Non-content block in section.
+ 'paragraph-2': 'contentOnly', // Content block in section.
+ } )
+ )
+ );
+ } );
+
+ it( 'removes block editing modes when blocks are removed', () => {
+ const { derivedNavModeBlockEditingModes } = dispatchActions(
+ [
+ {
+ type: 'REMOVE_BLOCKS',
+ clientIds: [ 'group-2' ],
+ },
+ ],
+ testReducer,
+ initialState
+ );
+
+ expect( derivedNavModeBlockEditingModes ).toEqual(
+ new Map(
+ Object.entries( {
+ '': 'contentOnly',
+ 'group-1': 'contentOnly',
+ 'paragraph-1': 'contentOnly',
+ } )
+ )
+ );
+ } );
+
+ it( 'updates block editing modes when new blocks are inserted', () => {
+ const { derivedNavModeBlockEditingModes } = dispatchActions(
+ [
+ {
+ type: 'INSERT_BLOCKS',
+ rootClientId: '',
+ blocks: [
+ {
+ name: 'core/group',
+ clientId: 'group-3',
+ attributes: {},
+ innerBlocks: [
+ {
+ name: 'core/paragraph',
+ clientId: 'paragraph-3',
+ attributes: {},
+ innerBlocks: [],
+ },
+ {
+ name: 'core/group',
+ clientId: 'group-4',
+ attributes: {},
+ innerBlocks: [],
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ testReducer,
+ initialState
+ );
+
+ expect( derivedNavModeBlockEditingModes ).toEqual(
+ new Map(
+ Object.entries( {
+ '': 'contentOnly', // Section root.
+ 'group-1': 'contentOnly', // Section block.
+ 'paragraph-1': 'contentOnly', // Content block in section.
+ 'group-2': 'disabled', // Non-content block in section.
+ 'paragraph-2': 'contentOnly', // Content block in section.
+ 'group-3': 'contentOnly', // New section block.
+ 'paragraph-3': 'contentOnly', // New content block in section.
+ 'group-4': 'disabled', // Non-content block in section.
+ } )
+ )
+ );
+ } );
+
+ it( 'updates block editing modes when blocks are moved to a new position', () => {
+ const { derivedNavModeBlockEditingModes } = dispatchActions(
+ [
+ {
+ type: 'MOVE_BLOCKS_TO_POSITION',
+ clientIds: [ 'group-2' ],
+ fromRootClientId: 'group-1',
+ toRootClientId: '',
+ },
+ ],
+ testReducer,
+ initialState
+ );
+ expect( derivedNavModeBlockEditingModes ).toEqual(
+ new Map(
+ Object.entries( {
+ '': 'contentOnly', // Section root.
+ 'group-1': 'contentOnly', // Section block.
+ 'paragraph-1': 'contentOnly', // Content block in section.
+ 'group-2': 'contentOnly', // New section block.
+ 'paragraph-2': 'contentOnly', // Still a content block in a section.
+ } )
+ )
+ );
+ } );
+
+ it( 'handles changes to the section root', () => {
+ const { derivedNavModeBlockEditingModes } = dispatchActions(
+ [
+ {
+ type: 'UPDATE_SETTINGS',
+ settings: {
+ [ sectionRootClientIdKey ]: 'group-1',
+ },
+ },
+ ],
+ testReducer,
+ initialState
+ );
+
+ expect( derivedNavModeBlockEditingModes ).toEqual(
+ new Map(
+ Object.entries( {
+ '': 'disabled',
+ 'group-1': 'contentOnly',
+ 'paragraph-1': 'contentOnly',
+ 'group-2': 'contentOnly',
+ 'paragraph-2': 'contentOnly',
+ } )
+ )
+ );
+ } );
+ } );
+
+ describe( 'zoom out mode', () => {
+ let initialState;
+
+ beforeAll( () => {
+ initialState = dispatchActions(
+ [
+ {
+ type: 'UPDATE_SETTINGS',
+ settings: {
+ [ sectionRootClientIdKey ]: '',
+ },
+ },
+ {
+ type: 'SET_ZOOM_LEVEL',
+ zoom: 'auto-scaled',
+ },
+ {
+ type: 'RESET_BLOCKS',
+ blocks: [
+ {
+ name: 'core/group',
+ clientId: 'group-1',
+ attributes: {},
+ innerBlocks: [
+ {
+ name: 'core/paragraph',
+ clientId: 'paragraph-1',
+ attributes: {},
+ innerBlocks: [],
+ },
+ {
+ name: 'core/group',
+ clientId: 'group-2',
+ attributes: {},
+ innerBlocks: [
+ {
+ name: 'core/paragraph',
+ clientId: 'paragraph-2',
+ attributes: {},
+ innerBlocks: [],
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ testReducer
+ );
+ } );
+
+ it( 'returns the expected block editing modes', () => {
+ expect( initialState.derivedBlockEditingModes ).toEqual(
+ new Map(
+ Object.entries( {
+ '': 'contentOnly', // Section root.
+ 'group-1': 'contentOnly', // Section block.
+ 'paragraph-1': 'disabled',
+ 'group-2': 'disabled',
+ 'paragraph-2': 'disabled',
+ } )
+ )
+ );
+ } );
+
+ it( 'overrides navigation mode', () => {
+ select.mockImplementation( ( storeName ) => {
+ if ( storeName === preferencesStore ) {
+ return {
+ get: jest.fn( () => 'navigation' ),
+ };
+ }
+ return select( storeName );
+ } );
+
+ const { derivedBlockEditingModes } = dispatchActions(
+ [
+ {
+ type: 'SET_EDITOR_MODE',
+ mode: 'navigation',
+ },
+ ],
+ testReducer,
+ initialState
+ );
+
+ expect( derivedBlockEditingModes ).toEqual(
+ new Map(
+ Object.entries( {
+ '': 'contentOnly', // Section root.
+ 'group-1': 'contentOnly', // Section block.
+ 'paragraph-1': 'disabled',
+ 'group-2': 'disabled',
+ 'paragraph-2': 'disabled',
+ } )
+ )
+ );
+
+ select.mockImplementation( ( storeName ) => {
+ if ( storeName === preferencesStore ) {
+ return {
+ get: jest.fn( () => 'edit' ),
+ };
+ }
+ return select( storeName );
+ } );
+ } );
+
+ it( 'removes block editing modes when blocks are removed', () => {
+ const { derivedBlockEditingModes } = dispatchActions(
+ [
+ {
+ type: 'REMOVE_BLOCKS',
+ clientIds: [ 'group-2' ],
+ },
+ ],
+ testReducer,
+ initialState
+ );
+
+ expect( derivedBlockEditingModes ).toEqual(
+ new Map(
+ Object.entries( {
+ '': 'contentOnly',
+ 'group-1': 'contentOnly',
+ 'paragraph-1': 'disabled',
+ } )
+ )
+ );
+ } );
+
+ it( 'updates block editing modes when new blocks are inserted', () => {
+ const { derivedBlockEditingModes } = dispatchActions(
+ [
+ {
+ type: 'INSERT_BLOCKS',
+ rootClientId: '',
+ blocks: [
+ {
+ name: 'core/group',
+ clientId: 'group-3',
+ attributes: {},
+ innerBlocks: [
+ {
+ name: 'core/paragraph',
+ clientId: 'paragraph-3',
+ attributes: {},
+ innerBlocks: [],
+ },
+ {
+ name: 'core/group',
+ clientId: 'group-4',
+ attributes: {},
+ innerBlocks: [],
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ testReducer,
+ initialState
+ );
+
+ expect( derivedBlockEditingModes ).toEqual(
+ new Map(
+ Object.entries( {
+ '': 'contentOnly', // Section root.
+ 'group-1': 'contentOnly', // Section block.
+ 'paragraph-1': 'disabled',
+ 'group-2': 'disabled',
+ 'paragraph-2': 'disabled',
+ 'group-3': 'contentOnly', // New section block.
+ 'paragraph-3': 'disabled',
+ 'group-4': 'disabled',
+ } )
+ )
+ );
+ } );
+
+ it( 'updates block editing modes when blocks are moved to a new position', () => {
+ const { derivedBlockEditingModes } = dispatchActions(
+ [
+ {
+ type: 'MOVE_BLOCKS_TO_POSITION',
+ clientIds: [ 'group-2' ],
+ fromRootClientId: 'group-1',
+ toRootClientId: '',
+ },
+ ],
+ testReducer,
+ initialState
+ );
+ expect( derivedBlockEditingModes ).toEqual(
+ new Map(
+ Object.entries( {
+ '': 'contentOnly', // Section root.
+ 'group-1': 'contentOnly', // Section block.
+ 'paragraph-1': 'disabled',
+ 'group-2': 'contentOnly', // New section block.
+ 'paragraph-2': 'disabled',
+ } )
+ )
+ );
+ } );
+
+ it( 'handles changes to the section root', () => {
+ const { derivedBlockEditingModes } = dispatchActions(
+ [
+ {
+ type: 'UPDATE_SETTINGS',
+ settings: {
+ [ sectionRootClientIdKey ]: 'group-1',
+ },
+ },
+ ],
+ testReducer,
+ initialState
+ );
+
+ expect( derivedBlockEditingModes ).toEqual(
+ new Map(
+ Object.entries( {
+ '': 'disabled',
+ 'group-1': 'contentOnly', // New section root.
+ 'paragraph-1': 'contentOnly', // Section block.
+ 'group-2': 'contentOnly', // Section block.
+ 'paragraph-2': 'disabled',
+ } )
+ )
+ );
+ } );
+ } );
+ } );
} );
diff --git a/packages/block-editor/src/store/test/selectors.js b/packages/block-editor/src/store/test/selectors.js
index 7c0361449c5fca..7692bd6bf2cbb6 100644
--- a/packages/block-editor/src/store/test/selectors.js
+++ b/packages/block-editor/src/store/test/selectors.js
@@ -9,14 +9,12 @@ import {
import { RawHTML } from '@wordpress/element';
import { symbol } from '@wordpress/icons';
import { select, dispatch } from '@wordpress/data';
-import { store as preferencesStore } from '@wordpress/preferences';
/**
* Internal dependencies
*/
import * as selectors from '../selectors';
import { store } from '../';
-import { sectionRootClientIdKey } from '../private-keys';
import { lock } from '../../lock-unlock';
const {
@@ -4469,29 +4467,19 @@ describe( 'getBlockEditingMode', () => {
blockEditingModes: new Map( [] ),
};
- const navigationModeStateWithRootSection = {
- ...baseState,
- settings: {
- [ sectionRootClientIdKey ]: 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', // The group is the "main" container
- },
- };
-
const hasContentRoleAttribute = jest.fn( () => false );
+ const get = jest.fn( () => 'edit' );
- const fauxPrivateAPIs = {};
+ const mockedSelectors = { get };
- lock( fauxPrivateAPIs, {
+ lock( mockedSelectors, {
hasContentRoleAttribute,
} );
getBlockEditingMode.registry = {
- select: jest.fn( () => fauxPrivateAPIs ),
+ select: jest.fn( () => mockedSelectors ),
};
- afterEach( () => {
- dispatch( preferencesStore ).set( 'core', 'editorTool', undefined );
- } );
-
it( 'should return default by default', () => {
expect(
getBlockEditingMode(
@@ -4614,98 +4602,4 @@ describe( 'getBlockEditingMode', () => {
getBlockEditingMode( state, 'b3247f75-fd94-4fef-97f9-5bfd162cc416' )
).toBe( 'contentOnly' );
} );
-
- describe( 'navigation mode', () => {
- const writeModeExperiment = window.__experimentalEditorWriteMode;
- beforeAll( () => {
- window.__experimentalEditorWriteMode = true;
- } );
- afterAll( () => {
- window.__experimentalEditorWriteMode = writeModeExperiment;
- } );
- it( 'in navigation mode, the root section container is default', () => {
- dispatch( preferencesStore ).set(
- 'core',
- 'editorTool',
- 'navigation'
- );
- expect(
- getBlockEditingMode(
- navigationModeStateWithRootSection,
- 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337'
- )
- ).toBe( 'default' );
- } );
-
- it( 'in navigation mode, anything outside the section container is disabled', () => {
- dispatch( preferencesStore ).set(
- 'core',
- 'editorTool',
- 'navigation'
- );
- expect(
- getBlockEditingMode(
- navigationModeStateWithRootSection,
- '6cf70164-9097-4460-bcbf-200560546988'
- )
- ).toBe( 'disabled' );
- } );
-
- it( 'in navigation mode, sections are contentOnly', () => {
- dispatch( preferencesStore ).set(
- 'core',
- 'editorTool',
- 'navigation'
- );
- expect(
- getBlockEditingMode(
- navigationModeStateWithRootSection,
- 'b26fc763-417d-4f01-b81c-2ec61e14a972'
- )
- ).toBe( 'contentOnly' );
- expect(
- getBlockEditingMode(
- navigationModeStateWithRootSection,
- '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f'
- )
- ).toBe( 'contentOnly' );
- } );
-
- it( 'in navigation mode, blocks with content attributes within sections are contentOnly', () => {
- dispatch( preferencesStore ).set(
- 'core',
- 'editorTool',
- 'navigation'
- );
- hasContentRoleAttribute.mockReturnValueOnce( true );
- expect(
- getBlockEditingMode(
- navigationModeStateWithRootSection,
- 'b3247f75-fd94-4fef-97f9-5bfd162cc416'
- )
- ).toBe( 'contentOnly' );
-
- hasContentRoleAttribute.mockReturnValueOnce( true );
- expect(
- getBlockEditingMode(
- navigationModeStateWithRootSection,
- 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c'
- )
- ).toBe( 'contentOnly' );
- } );
-
- it( 'in navigation mode, blocks without content attributes within sections are disabled', () => {
- dispatch( preferencesStore ).set(
- 'core',
- 'editorTool',
- 'navigation'
- );
- expect(
- getBlockEditingMode(
- navigationModeStateWithRootSection,
- '9b9c5c3f-2e46-4f02-9e14-9fed515b958s'
- )
- ).toBe( 'disabled' );
- } );
- } );
} );
diff --git a/packages/block-library/CHANGELOG.md b/packages/block-library/CHANGELOG.md
index cab58f72ff70ee..47986f12e0fb54 100644
--- a/packages/block-library/CHANGELOG.md
+++ b/packages/block-library/CHANGELOG.md
@@ -2,6 +2,8 @@
## Unreleased
+## 9.13.0 (2024-11-27)
+
## 9.12.0 (2024-11-16)
## 9.11.0 (2024-10-30)
diff --git a/packages/block-library/package.json b/packages/block-library/package.json
index e507ef36367268..77da5721abacb1 100644
--- a/packages/block-library/package.json
+++ b/packages/block-library/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/block-library",
- "version": "9.12.0",
+ "version": "9.13.0",
"description": "Block library for the WordPress editor.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
diff --git a/packages/block-library/src/block/edit.js b/packages/block-library/src/block/edit.js
index 104b07157cba74..3d4d07e52b386a 100644
--- a/packages/block-library/src/block/edit.js
+++ b/packages/block-library/src/block/edit.js
@@ -7,7 +7,7 @@ import clsx from 'clsx';
* WordPress dependencies
*/
import { useSelect, useDispatch } from '@wordpress/data';
-import { useRef, useMemo, useEffect } from '@wordpress/element';
+import { useRef, useMemo } from '@wordpress/element';
import {
useEntityRecord,
store as coreStore,
@@ -37,12 +37,10 @@ import { getBlockBindingsSource } from '@wordpress/blocks';
/**
* Internal dependencies
*/
-import { name as patternBlockName } from './index';
import { unlock } from '../lock-unlock';
const { useLayoutClasses } = unlock( blockEditorPrivateApis );
-const { isOverridableBlock, hasOverridableBlocks } =
- unlock( patternsPrivateApis );
+const { hasOverridableBlocks } = unlock( patternsPrivateApis );
const fullAlignments = [ 'full', 'wide', 'left', 'right' ];
@@ -75,22 +73,6 @@ const useInferredLayout = ( blocks, parentLayout ) => {
}, [ blocks, parentLayout ] );
};
-function setBlockEditMode( setEditMode, blocks, mode ) {
- blocks.forEach( ( block ) => {
- const editMode =
- mode ||
- ( isOverridableBlock( block ) ? 'contentOnly' : 'disabled' );
- setEditMode( block.clientId, editMode );
-
- setBlockEditMode(
- setEditMode,
- block.innerBlocks,
- // Disable editing for nested patterns.
- block.name === patternBlockName ? 'disabled' : mode
- );
- } );
-}
-
function RecursionWarning() {
const blockProps = useBlockProps();
return (
@@ -171,7 +153,6 @@ function ReusableBlockEdit( {
name,
attributes: { ref, content },
__unstableParentLayout: parentLayout,
- clientId: patternClientId,
setAttributes,
} ) {
const { record, hasResolved } = useEntityRecord(
@@ -184,49 +165,24 @@ function ReusableBlockEdit( {
} );
const isMissing = hasResolved && ! record;
- const { setBlockEditingMode, __unstableMarkLastChangeAsPersistent } =
+ const { __unstableMarkLastChangeAsPersistent } =
useDispatch( blockEditorStore );
- const {
- innerBlocks,
- onNavigateToEntityRecord,
- editingMode,
- hasPatternOverridesSource,
- } = useSelect(
+ const { onNavigateToEntityRecord, hasPatternOverridesSource } = useSelect(
( select ) => {
- const { getBlocks, getSettings, getBlockEditingMode } =
- select( blockEditorStore );
+ const { getSettings } = select( blockEditorStore );
// For editing link to the site editor if the theme and user permissions support it.
return {
- innerBlocks: getBlocks( patternClientId ),
onNavigateToEntityRecord:
getSettings().onNavigateToEntityRecord,
- editingMode: getBlockEditingMode( patternClientId ),
hasPatternOverridesSource: !! getBlockBindingsSource(
'core/pattern-overrides'
),
};
},
- [ patternClientId ]
+ []
);
- // Sync the editing mode of the pattern block with the inner blocks.
- useEffect( () => {
- setBlockEditMode(
- setBlockEditingMode,
- innerBlocks,
- // Disable editing if the pattern itself is disabled.
- editingMode === 'disabled' || ! hasPatternOverridesSource
- ? 'disabled'
- : undefined
- );
- }, [
- editingMode,
- innerBlocks,
- setBlockEditingMode,
- hasPatternOverridesSource,
- ] );
-
const canOverrideBlocks = useMemo(
() => hasPatternOverridesSource && hasOverridableBlocks( blocks ),
[ hasPatternOverridesSource, blocks ]
@@ -244,7 +200,6 @@ function ReusableBlockEdit( {
} );
const innerBlocksProps = useInnerBlocksProps( blockProps, {
- templateLock: 'all',
layout,
value: blocks,
onInput: NOOP,
diff --git a/packages/block-library/src/comments-pagination/editor.scss b/packages/block-library/src/comments-pagination/editor.scss
index a875c9e0ee21ce..3cd99c632ee833 100644
--- a/packages/block-library/src/comments-pagination/editor.scss
+++ b/packages/block-library/src/comments-pagination/editor.scss
@@ -26,6 +26,7 @@ $pagination-margin: 0.5em;
margin-right: $pagination-margin;
margin-bottom: $pagination-margin;
+ font-size: inherit;
&:last-child {
/*rtl:ignore*/
margin-right: 0;
diff --git a/packages/block-library/src/comments-pagination/style.scss b/packages/block-library/src/comments-pagination/style.scss
index c6b5d9a0a29e91..2fb6e3dd2d48f4 100644
--- a/packages/block-library/src/comments-pagination/style.scss
+++ b/packages/block-library/src/comments-pagination/style.scss
@@ -8,6 +8,7 @@ $pagination-margin: 0.5em;
margin-right: $pagination-margin;
margin-bottom: $pagination-margin;
+ font-size: inherit;
&:last-child {
/*rtl:ignore*/
margin-right: 0;
diff --git a/packages/block-library/src/missing/test/edit.native.js b/packages/block-library/src/missing/test/edit.native.js
index 47d0da572b7c88..eba1169ae643b7 100644
--- a/packages/block-library/src/missing/test/edit.native.js
+++ b/packages/block-library/src/missing/test/edit.native.js
@@ -10,7 +10,6 @@ import { Text } from 'react-native';
import { BottomSheet, Icon } from '@wordpress/components';
import { help, plugins } from '@wordpress/icons';
import { storeConfig } from '@wordpress/block-editor';
-jest.mock( '@wordpress/blocks' );
jest.mock( '@wordpress/block-editor/src/store/selectors' );
/**
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index ae3b9620a33584..9a56e399fcfecb 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -567,13 +567,14 @@ private static function get_nav_wrapper_attributes( $attributes, $inner_blocks )
$is_responsive_menu = static::is_responsive( $attributes );
$style = static::get_styles( $attributes );
$class = static::get_classes( $attributes );
- $wrapper_attributes = get_block_wrapper_attributes(
- array(
- 'class' => $class,
- 'style' => $style,
- 'aria-label' => $nav_menu_name,
- )
+ $extra_attributes = array(
+ 'class' => $class,
+ 'style' => $style,
);
+ if ( ! empty( $nav_menu_name ) ) {
+ $extra_attributes['aria-label'] = $nav_menu_name;
+ }
+ $wrapper_attributes = get_block_wrapper_attributes( $extra_attributes );
if ( $is_responsive_menu ) {
$nav_element_directives = static::get_nav_element_directives( $is_interactive );
@@ -1436,20 +1437,6 @@ function block_core_navigation_get_most_recently_published_navigation() {
return null;
}
-/**
- * Accepts the serialized markup of a block and its inner blocks, and returns serialized markup of the inner blocks.
- *
- * @since 6.5.0
- *
- * @param string $serialized_block The serialized markup of a block and its inner blocks.
- * @return string
- */
-function block_core_navigation_remove_serialized_parent_block( $serialized_block ) {
- $start = strpos( $serialized_block, '-->' ) + strlen( '-->' );
- $end = strrpos( $serialized_block, '
## Context
-See examples for this section for the [ItemGroup](/packages/components/src/item-group/item-group/README.md#context) and [`Card`](/packages/components/src/card/card/README.md#context) components.
+See examples for this section for the [ItemGroup](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/item-group/item-group/README.md#context) and [`Card`](https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/card/card#context) components.
````
## Folder structure
diff --git a/packages/components/package.json b/packages/components/package.json
index b297b31e544f98..75f0d1eb1f2331 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
{
"name": "@wordpress/components",
- "version": "28.12.0",
+ "version": "28.13.0",
"description": "UI components for WordPress.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
@@ -32,7 +32,7 @@
"src/**/*.scss"
],
"dependencies": {
- "@ariakit/react": "^0.4.10",
+ "@ariakit/react": "^0.4.13",
"@babel/runtime": "7.25.7",
"@emotion/cache": "^11.7.1",
"@emotion/css": "^11.7.1",
diff --git a/packages/components/src/box-control/README.md b/packages/components/src/box-control/README.md
index 77176b49eeb6d8..ddadf938798ee9 100644
--- a/packages/components/src/box-control/README.md
+++ b/packages/components/src/box-control/README.md
@@ -1,106 +1,125 @@
# BoxControl
-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
+See the WordPress Storybook for more detailed, interactive documentation.
+
+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 { useState } from 'react';
import { BoxControl } from '@wordpress/components';
function Example() {
- const [ values, setValues ] = useState( {
- top: '50px',
- left: '10%',
- right: '10%',
- bottom: '50px',
- } );
-
- return (
- setValues( nextValues ) }
- />
- );
-}
+ const [ values, setValues ] = useState( {
+ top: '50px',
+ left: '10%',
+ right: '10%',
+ bottom: '50px',
+ } );
+
+ return (
+
+ );
+};
```
-
## Props
-### `allowReset`: `boolean`
+### `__next40pxDefaultSize`
+
+Start opting into the larger default height that will become the default size in a future version.
+
+ - Type: `boolean`
+ - Required: No
+ - Default: `false`
+
+### `allowReset`
If this property is true, a button to reset the box control is rendered.
-- Required: No
-- Default: `true`
+ - Type: `boolean`
+ - Required: No
+ - Default: `true`
-### `splitOnAxis`: `boolean`
+### `id`
-If this property is true, when the box control is unlinked, vertical and horizontal controls can be used instead of updating individual sides.
+The id to use as a base for the unique HTML id attribute of the control.
-- Required: No
-- Default: `false`
+ - Type: `string`
+ - Required: No
-### `inputProps`: `object`
+### `inputProps`
-Props for the internal [UnitControl](../unit-control) components.
+Props for the internal `UnitControl` components.
-- Required: No
-- Default: `{ min: 0 }`
+ - Type: `UnitControlPassthroughProps`
+ - Required: No
+ - Default: `{
+ min: 0,
+ }`
-### `label`: `string`
+### `label`
Heading label for the control.
-- Required: No
-- Default: `__( 'Box Control' )`
+ - Type: `string`
+ - Required: No
+ - Default: `__( 'Box Control' )`
-### `onChange`: `(next: BoxControlValue) => void`
+### `onChange`
A callback function when an input value changes.
-- Required: Yes
+ - Type: `(next: BoxControlValue) => void`
+ - Required: No
+ - Default: `() => {}`
-### `resetValues`: `object`
+### `resetValues`
The `top`, `right`, `bottom`, and `left` box dimension values to use when the control is reset.
-- Required: No
-- Default: `{ top: undefined, right: undefined, bottom: undefined, left: undefined }`
-
-### `sides`: `string[]`
-
-Collection of sides to allow control of. If omitted or empty, all sides will be available. Allowed values are "top", "right", "bottom", "left", "vertical", and "horizontal".
-
-- Required: No
-
-### `units`: `WPUnitControlUnit[]`
-
-Collection of available units which are compatible with [UnitControl](../unit-control).
+ - Type: `BoxControlValue`
+ - Required: No
+ - Default: `{
+ top: undefined,
+ right: undefined,
+ bottom: undefined,
+ left: undefined,
+ }`
-- Required: No
+### `sides`
-### `values`: `object`
+Collection of sides to allow control of. If omitted or empty, all sides will be available.
-The `top`, `right`, `bottom`, and `left` box dimension values.
+Allowed values are "top", "right", "bottom", "left", "vertical", and "horizontal".
-- Required: No
+ - Type: `readonly (keyof BoxControlValue | "horizontal" | "vertical")[]`
+ - Required: No
-### `onMouseOver`: `function`
+### `splitOnAxis`
-A handler for onMouseOver events.
+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
+ - Type: `boolean`
+ - Required: No
+ - Default: `false`
-### `onMouseOut`: `function`
+### `units`
-A handler for onMouseOut events.
+Available units to select from.
-- Required: No
+ - Type: `WPUnitControlUnit[]`
+ - Required: No
+ - Default: `CSS_UNITS`
-### `__next40pxDefaultSize`: `boolean`
+### `values`
-Start opting into the larger default size that will become the default size in a future version.
+The current values of the control, expressed as an object of `top`, `right`, `bottom`, and `left` values.
-- Required: No
-- Default: `false`
+ - Type: `BoxControlValue`
+ - Required: No
diff --git a/packages/components/src/box-control/docs-manifest.json b/packages/components/src/box-control/docs-manifest.json
new file mode 100644
index 00000000000000..c506e7a9e27eef
--- /dev/null
+++ b/packages/components/src/box-control/docs-manifest.json
@@ -0,0 +1,5 @@
+{
+ "$schema": "../../schemas/docs-manifest.json",
+ "displayName": "BoxControl",
+ "filePath": "./index.tsx"
+}
diff --git a/packages/components/src/box-control/index.tsx b/packages/components/src/box-control/index.tsx
index 41e95aa88bea37..7f822f5f70e124 100644
--- a/packages/components/src/box-control/index.tsx
+++ b/packages/components/src/box-control/index.tsx
@@ -51,23 +51,23 @@ function useUniqueId( idProp?: string ) {
* used as an input control for values like `padding` or `margin`.
*
* ```jsx
+ * import { useState } from 'react';
* import { BoxControl } from '@wordpress/components';
- * import { useState } from '@wordpress/element';
*
* function Example() {
- * const [ values, setValues ] = useState( {
- * top: '50px',
- * left: '10%',
- * right: '10%',
- * bottom: '50px',
- * } );
+ * const [ values, setValues ] = useState( {
+ * top: '50px',
+ * left: '10%',
+ * right: '10%',
+ * bottom: '50px',
+ * } );
*
- * return (
- * setValues( nextValues ) }
- * />
- * );
+ * return (
+ *
+ * );
* };
* ```
*/
diff --git a/packages/components/src/box-control/types.ts b/packages/components/src/box-control/types.ts
index 5f4071aeed88a7..2a47abbf11001e 100644
--- a/packages/components/src/box-control/types.ts
+++ b/packages/components/src/box-control/types.ts
@@ -58,6 +58,8 @@ export type BoxControlProps = Pick<
resetValues?: BoxControlValue;
/**
* Collection of sides to allow control of. If omitted or empty, all sides will be available.
+ *
+ * Allowed values are "top", "right", "bottom", "left", "vertical", and "horizontal".
*/
sides?: readonly ( keyof BoxControlValue | 'horizontal' | 'vertical' )[];
/**
diff --git a/packages/components/src/circular-option-picker/circular-option-picker-actions.tsx b/packages/components/src/circular-option-picker/circular-option-picker-actions.tsx
index 4cf4d6f95da383..339c614e4ca45d 100644
--- a/packages/components/src/circular-option-picker/circular-option-picker-actions.tsx
+++ b/packages/components/src/circular-option-picker/circular-option-picker-actions.tsx
@@ -47,6 +47,7 @@ export function ButtonAction( {
}: WordPressComponentProps< ButtonAsButtonProps, 'button', false > ) {
return (