@wordpress/block-editor 14.9.0 → 14.10.0

package/src/hooks/supports.js

@@ -6,20 +6,20 @@ import { Platform } from '@wordpress/element';
 
 const ALIGN_SUPPORT_KEY = 'align';
 const ALIGN_WIDE_SUPPORT_KEY = 'alignWide';
-const BORDER_SUPPORT_KEY = 'border';
+const BORDER_SUPPORT_KEY = '__experimentalBorder';
 const COLOR_SUPPORT_KEY = 'color';
 const CUSTOM_CLASS_NAME_SUPPORT_KEY = 'customClassName';
-const FONT_FAMILY_SUPPORT_KEY = 'typography.fontFamily';
+const FONT_FAMILY_SUPPORT_KEY = 'typography.__experimentalFontFamily';
 const FONT_SIZE_SUPPORT_KEY = 'typography.fontSize';
 const LINE_HEIGHT_SUPPORT_KEY = 'typography.lineHeight';
 /**
  * Key within block settings' support array indicating support for font style.
  */
-const FONT_STYLE_SUPPORT_KEY = 'typography.fontStyle';
+const FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle';
 /**
  * Key within block settings' support array indicating support for font weight.
  */
-const FONT_WEIGHT_SUPPORT_KEY = 'typography.fontWeight';
+const FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight';
 /**
  * Key within block settings' supports array indicating support for text
  * align e.g. settings found in `block.json`.
@@ -34,7 +34,7 @@ const TEXT_COLUMNS_SUPPORT_KEY = 'typography.textColumns';
  * Key within block settings' supports array indicating support for text
  * decorations e.g. settings found in `block.json`.
  */
-const TEXT_DECORATION_SUPPORT_KEY = 'typography.textDecoration';
+const TEXT_DECORATION_SUPPORT_KEY = 'typography.__experimentalTextDecoration';
 /**
  * Key within block settings' supports array indicating support for writing mode
  * e.g. settings found in `block.json`.
@@ -44,13 +44,13 @@ const WRITING_MODE_SUPPORT_KEY = 'typography.__experimentalWritingMode';
  * Key within block settings' supports array indicating support for text
  * transforms e.g. settings found in `block.json`.
  */
-const TEXT_TRANSFORM_SUPPORT_KEY = 'typography.textTransform';
+const TEXT_TRANSFORM_SUPPORT_KEY = 'typography.__experimentalTextTransform';
 
 /**
  * Key within block settings' supports array indicating support for letter-spacing
  * e.g. settings found in `block.json`.
  */
-const LETTER_SPACING_SUPPORT_KEY = 'typography.letterSpacing';
+const LETTER_SPACING_SUPPORT_KEY = 'typography.__experimentalLetterSpacing';
 const LAYOUT_SUPPORT_KEY = 'layout';
 const TYPOGRAPHY_SUPPORT_KEYS = [
 	LINE_HEIGHT_SUPPORT_KEY,

package/src/hooks/test/style.js

@@ -133,7 +133,8 @@ describe( 'addSaveProps', () => {
 	const applySkipSerialization = ( features ) => {
 		const updatedSettings = { ...blockSettings };
 		Object.keys( features ).forEach( ( key ) => {
-			updatedSettings.supports[ key ].skipSerialization = features[ key ];
+			updatedSettings.supports[ key ].__experimentalSkipSerialization =
+				features[ key ];
 		} );
 		return updatedSettings;
 	};

package/src/hooks/typography.js

@@ -27,12 +27,12 @@ function omit( object, keys ) {
 	);
 }
 
-const LETTER_SPACING_SUPPORT_KEY = 'typography.letterSpacing';
-const TEXT_TRANSFORM_SUPPORT_KEY = 'typography.textTransform';
-const TEXT_DECORATION_SUPPORT_KEY = 'typography.textDecoration';
+const LETTER_SPACING_SUPPORT_KEY = 'typography.__experimentalLetterSpacing';
+const TEXT_TRANSFORM_SUPPORT_KEY = 'typography.__experimentalTextTransform';
+const TEXT_DECORATION_SUPPORT_KEY = 'typography.__experimentalTextDecoration';
 const TEXT_COLUMNS_SUPPORT_KEY = 'typography.textColumns';
-const FONT_STYLE_SUPPORT_KEY = 'typography.fontStyle';
-const FONT_WEIGHT_SUPPORT_KEY = 'typography.fontWeight';
+const FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle';
+const FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight';
 const WRITING_MODE_SUPPORT_KEY = 'typography.__experimentalWritingMode';
 export const TYPOGRAPHY_SUPPORT_KEY = 'typography';
 export const TYPOGRAPHY_SUPPORT_KEYS = [
@@ -133,7 +133,7 @@ export function TypographyPanel( { clientId, name, setAttributes, settings } ) {
 
 	const defaultControls = getBlockSupport( name, [
 		TYPOGRAPHY_SUPPORT_KEY,
-		'defaultControls',
+		'__experimentalDefaultControls',
 	] );
 
 	return (

package/src/hooks/use-zoom-out.js

@@ -2,13 +2,14 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useEffect, useRef } from '@wordpress/element';
+import { useEffect, useRef, useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../store';
 import { unlock } from '../lock-unlock';
+import BlockContext from '../components/block-context';
 
 /**
  * A hook used to set the editor mode to zoomed out mode, invoking the hook sets the mode.
@@ -19,6 +20,7 @@ import { unlock } from '../lock-unlock';
  * @param {boolean} enabled If we should enter into zoomOut mode or not
  */
 export function useZoomOut( enabled = true ) {
+	const { postId } = useContext( BlockContext );
 	const { setZoomLevel, resetZoomLevel } = unlock(
 		useDispatch( blockEditorStore )
 	);
@@ -37,6 +39,7 @@ export function useZoomOut( enabled = true ) {
 
 	const controlZoomLevelRef = useRef( false );
 	const isEnabledRef = useRef( enabled );
+	const postIdRef = useRef( postId );
 
 	/**
 	 * This hook tracks if the zoom state was changed manually by the user via clicking
@@ -55,6 +58,11 @@ export function useZoomOut( enabled = true ) {
 	useEffect( () => {
 		isEnabledRef.current = enabled;
 
+		// If the user created a new post/page, we should take control of the zoom level.
+		if ( postIdRef.current !== postId ) {
+			controlZoomLevelRef.current = true;
+		}
+
 		if ( enabled !== isZoomOut() ) {
 			controlZoomLevelRef.current = true;
 
@@ -71,5 +79,5 @@ export function useZoomOut( enabled = true ) {
 				resetZoomLevel();
 			}
 		};
-	}, [ enabled, isZoomOut, resetZoomLevel, setZoomLevel ] );
+	}, [ enabled, isZoomOut, postId, resetZoomLevel, setZoomLevel ] );
 }

package/src/hooks/utils.js

@@ -124,7 +124,7 @@ export function shouldSkipSerialization(
 	feature
 ) {
 	const support = getBlockSupport( blockNameOrType, featureSet );
-	const skipSerialization = support?.skipSerialization;
+	const skipSerialization = support?.__experimentalSkipSerialization;
 
 	if ( Array.isArray( skipSerialization ) ) {
 		return skipSerialization.includes( feature );

package/src/store/private-actions.js

@@ -26,6 +26,7 @@ const castArray = ( maybeArray ) =>
 const privateSettings = [
 	'inserterMediaCategories',
 	'blockInspectorAnimation',
+	'mediaSideload',
 ];
 
 /**

package/src/store/private-selectors.js

@@ -502,13 +502,23 @@ export const getParentSectionBlock = ( state, clientId ) => {
  * @return {boolean} Whether the block is a content locking parent.
  */
 export function isSectionBlock( state, clientId ) {
+	const blockName = getBlockName( state, clientId );
+	if (
+		blockName === 'core/block' ||
+		getTemplateLock( state, clientId ) === 'contentOnly'
+	) {
+		return true;
+	}
+
+	// Template parts become sections in navigation mode.
+	const _isNavigationMode = isNavigationMode( state );
+	if ( _isNavigationMode && blockName === 'core/template-part' ) {
+		return true;
+	}
+
 	const sectionRootClientId = getSectionRootClientId( state );
 	const sectionClientIds = getBlockOrder( state, sectionRootClientId );
-	return (
-		getBlockName( state, clientId ) === 'core/block' ||
-		getTemplateLock( state, clientId ) === 'contentOnly' ||
-		( isNavigationMode( state ) && sectionClientIds.includes( clientId ) )
-	);
+	return _isNavigationMode && sectionClientIds.includes( clientId );
 }
 
 /**

package/src/store/reducer.js

@@ -1964,8 +1964,14 @@ export function temporarilyEditingFocusModeRevert( state = '', action ) {
 export function blockEditingModes( state = new Map(), action ) {
 	switch ( action.type ) {
 		case 'SET_BLOCK_EDITING_MODE':
+			if ( state.get( action.clientId ) === action.mode ) {
+				return state;
+			}
 			return new Map( state ).set( action.clientId, action.mode );
 		case 'UNSET_BLOCK_EDITING_MODE': {
+			if ( ! state.has( action.clientId ) ) {
+				return state;
+			}
 			const newState = new Map( state );
 			newState.delete( action.clientId );
 			return newState;
@@ -2186,19 +2192,19 @@ function getBlockTreeBlock( state, clientId ) {
  *                            The callback receives the current block as its argument.
  */
 function traverseBlockTree( state, clientId, callback ) {
-	const parentTree = getBlockTreeBlock( state, clientId );
-	if ( ! parentTree ) {
+	const tree = getBlockTreeBlock( state, clientId );
+	if ( ! tree ) {
 		return;
 	}
 
-	callback( parentTree );
+	callback( tree );
 
-	if ( ! parentTree?.innerBlocks?.length ) {
+	if ( ! tree?.innerBlocks?.length ) {
 		return;
 	}
 
-	for ( const block of parentTree?.innerBlocks ) {
-		traverseBlockTree( state, block.clientId, callback );
+	for ( const innerBlock of tree?.innerBlocks ) {
+		traverseBlockTree( state, innerBlock.clientId, callback );
 	}
 }
 
@@ -2212,8 +2218,12 @@ function traverseBlockTree( state, clientId, callback ) {
  * @return {string|undefined} The client ID of the parent block if found, undefined otherwise.
  */
 function findParentInClientIdsList( state, clientId, clientIds ) {
+	if ( ! clientIds.length ) {
+		return;
+	}
+
 	let parent = state.blocks.parents.get( clientId );
-	while ( parent ) {
+	while ( parent !== undefined ) {
 		if ( clientIds.includes( parent ) ) {
 			return parent;
 		}
@@ -2258,15 +2268,65 @@ function getDerivedBlockEditingModesForTree(
 	// 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'
+	const hasDisabledBlocks = Array.from( state.blockEditingModes ).some(
+		( [ , mode ] ) => mode === 'disabled'
 	);
+	const templatePartClientIds = [];
+	const syncedPatternClientIds = [];
+
+	Object.keys( state.blocks.controlledInnerBlocks ).forEach( ( clientId ) => {
+		const block = state.blocks.byClientId?.get( clientId );
+
+		if ( block?.name === 'core/template-part' ) {
+			templatePartClientIds.push( clientId );
+		}
+
+		if ( block?.name === 'core/block' ) {
+			syncedPatternClientIds.push( clientId );
+		}
+	} );
 
 	traverseBlockTree( state, treeClientId, ( block ) => {
 		const { clientId, name: blockName } = block;
+
+		// If the block already has an explicit block editing mode set,
+		// don't override it.
+		if ( state.blockEditingModes.has( clientId ) ) {
+			return;
+		}
+
+		// Disabled explicit block editing modes are inherited by children.
+		// It's an expensive calculation, so only do it if there are disabled blocks.
+		if ( hasDisabledBlocks ) {
+			// Look through parents to find one with an explicit block editing mode.
+			let ancestorBlockEditingMode;
+			let parent = state.blocks.parents.get( clientId );
+			while ( parent !== undefined ) {
+				// There's a chance we only just calculated this for the parent,
+				// if so we can return that value for a faster lookup.
+				if ( derivedBlockEditingModes.has( parent ) ) {
+					ancestorBlockEditingMode =
+						derivedBlockEditingModes.get( parent );
+				} else if ( state.blockEditingModes.has( parent ) ) {
+					// Checking the explicit block editing mode will be slower,
+					// as the block editing mode is more likely to be set on a
+					// distant ancestor.
+					ancestorBlockEditingMode =
+						state.blockEditingModes.get( parent );
+				}
+				if ( ancestorBlockEditingMode ) {
+					break;
+				}
+				parent = state.blocks.parents.get( parent );
+			}
+
+			// If the ancestor block editing mode is disabled, it's inherited by the child.
+			if ( ancestorBlockEditingMode === 'disabled' ) {
+				derivedBlockEditingModes.set( clientId, 'disabled' );
+				return;
+			}
+		}
+
 		if ( isZoomedOut || isNavMode ) {
 			// If the root block is the section root set its editing mode to contentOnly.
 			if ( clientId === sectionRootClientId ) {
@@ -2287,15 +2347,41 @@ function getDerivedBlockEditingModesForTree(
 
 			// 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 )
-			) {
+			if ( isZoomedOut ) {
 				derivedBlockEditingModes.set( clientId, 'disabled' );
 				return;
 			}
 
+			const isInSection = !! findParentInClientIdsList(
+				state,
+				clientId,
+				sectionClientIds
+			);
+			if ( ! isInSection ) {
+				if ( clientId === '' ) {
+					derivedBlockEditingModes.set( clientId, 'disabled' );
+					return;
+				}
+
+				// Allow selection of template parts outside of sections.
+				if ( blockName === 'core/template-part' ) {
+					derivedBlockEditingModes.set( clientId, 'contentOnly' );
+					return;
+				}
+
+				const isInTemplatePart = !! findParentInClientIdsList(
+					state,
+					clientId,
+					templatePartClientIds
+				);
+				// Allow contentOnly blocks in template parts outside of sections
+				// to be editable. Only disable blocks that don't fit this criteria.
+				if ( ! isInTemplatePart && ! isContentBlock( blockName ) ) {
+					derivedBlockEditingModes.set( clientId, 'disabled' );
+					return;
+				}
+			}
+
 			// Handle synced pattern content so the inner blocks of a synced pattern are
 			// properly disabled.
 			if ( syncedPatternClientIds.length ) {
@@ -2560,11 +2646,16 @@ export function withDerivedBlockEditingModes( reducer ) {
 				}
 				break;
 			}
+			case 'SET_BLOCK_EDITING_MODE':
+			case 'UNSET_BLOCK_EDITING_MODE':
 			case 'SET_HAS_CONTROLLED_INNER_BLOCKS': {
-				const updatedBlock = nextState.blocks.tree.get(
+				const updatedBlock = getBlockTreeBlock(
+					nextState,
 					action.clientId
 				);
-				// The block might have been removed.
+
+				// The block might have been removed in which case it'll be
+				// handled by the `REMOVE_BLOCKS` action.
 				if ( ! updatedBlock ) {
 					break;
 				}
@@ -2573,6 +2664,7 @@ export function withDerivedBlockEditingModes( reducer ) {
 					getDerivedBlockEditingModesUpdates( {
 						prevState: state,
 						nextState,
+						removedClientIds: [ action.clientId ],
 						addedBlocks: [ updatedBlock ],
 						isNavMode: false,
 					} );
@@ -2580,6 +2672,7 @@ export function withDerivedBlockEditingModes( reducer ) {
 					getDerivedBlockEditingModesUpdates( {
 						prevState: state,
 						nextState,
+						removedClientIds: [ action.clientId ],
 						addedBlocks: [ updatedBlock ],
 						isNavMode: true,
 					} );

package/src/store/selectors.js

@@ -128,7 +128,7 @@ export function isBlockValid( state, clientId ) {
  * @param {Object} state    Editor state.
  * @param {string} clientId Block client ID.
  *
- * @return {Object?} Block attributes.
+ * @return {?Object} Block attributes.
  */
 export function getBlockAttributes( state, clientId ) {
 	const block = state.blocks.byClientId.get( clientId );
@@ -1992,7 +1992,7 @@ const getItemFromVariation = ( state, item ) => ( variation ) => {
  * Returns the calculated frecency.
  *
  * 'frecency' is a heuristic (https://en.wikipedia.org/wiki/Frecency)
- * that combines block usage frequenty and recency.
+ * that combines block usage frequency and recency.
  *
  * @param {number} time  When the last insert occurred as a UNIX epoch
  * @param {number} count The number of inserts that have occurred.
@@ -2080,7 +2080,7 @@ const buildBlockTypeItem =
  * inserter and handle its selection.
  *
  * The 'frecency' property is a heuristic (https://en.wikipedia.org/wiki/Frecency)
- * that combines block usage frequenty and recency.
+ * that combines block usage frequency and recency.
  *
  * Items are returned ordered descendingly by their 'utility' and 'frecency'.
  *
@@ -2236,7 +2236,7 @@ export const getInserterItems = createRegistrySelector( ( select ) =>
  * transform list and handle its selection.
  *
  * The 'frecency' property is a heuristic (https://en.wikipedia.org/wiki/Frecency)
- * that combines block usage frequenty and recency.
+ * that combines block usage frequency and recency.
  *
  * Items are returned ordered descendingly by their 'frecency'.
  *
@@ -2400,7 +2400,7 @@ export const __experimentalGetAllowedBlocks = createSelector(
  * @typedef {Object} WPDirectInsertBlock
  * @property {string}         name             The type of block.
  * @property {?Object}        attributes       Attributes to pass to the newly created block.
- * @property {?Array<string>} attributesToCopy Attributes to be copied from adjecent blocks when inserted.
+ * @property {?Array<string>} attributesToCopy Attributes to be copied from adjacent blocks when inserted.
  */
 export function getDirectInsertBlock( state, rootClientId = null ) {
 	if ( ! rootClientId ) {
@@ -3087,9 +3087,7 @@ export const getBlockEditingMode = createRegistrySelector(
 				const isContent = hasContentRoleAttribute( name );
 				return isContent ? 'contentOnly' : 'disabled';
 			}
-			// Otherwise, check if there's an ancestor that is contentOnly
-			const parentMode = getBlockEditingMode( state, rootClientId );
-			return parentMode === 'contentOnly' ? 'default' : parentMode;
+			return 'default';
 		}
 );
 

package/src/store/test/private-selectors.js

@@ -122,6 +122,7 @@ describe( 'private selectors', () => {
 				'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f': {},
 			},
 			blockEditingModes: new Map( [] ),
+			derivedBlockEditingModes: new Map( [] ),
 		};
 
 		const hasContentRoleAttribute = jest.fn( () => false );
@@ -142,6 +143,7 @@ describe( 'private selectors', () => {
 			const state = {
 				...baseState,
 				blockEditingModes: new Map( [] ),
+				derivedBlockEditingModes: new Map( [] ),
 			};
 			expect(
 				isBlockSubtreeDisabled(
@@ -157,6 +159,12 @@ describe( 'private selectors', () => {
 				blockEditingModes: new Map( [
 					[ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', 'disabled' ],
 				] ),
+				derivedBlockEditingModes: new Map( [
+					[ 'b26fc763-417d-4f01-b81c-2ec61e14a972', 'disabled' ],
+					[ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', 'disabled' ],
+					[ 'b3247f75-fd94-4fef-97f9-5bfd162cc416', 'disabled' ],
+					[ 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c', 'disabled' ],
+				] ),
 			};
 			expect(
 				isBlockSubtreeDisabled(
@@ -166,10 +174,18 @@ describe( 'private selectors', () => {
 			).toBe( true );
 		} );
 
-		it( 'should return true when top level block is disabled via inheritence and there are no editing modes within it', () => {
+		it( 'should return true when top level block is disabled via inheritance and there are no editing modes within it', () => {
 			const state = {
 				...baseState,
 				blockEditingModes: new Map( [ [ '', 'disabled' ] ] ),
+				derivedBlockEditingModes: new Map( [
+					[ '6cf70164-9097-4460-bcbf-200560546988', 'disabled' ],
+					[ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', 'disabled' ],
+					[ 'b26fc763-417d-4f01-b81c-2ec61e14a972', 'disabled' ],
+					[ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', 'disabled' ],
+					[ 'b3247f75-fd94-4fef-97f9-5bfd162cc416', 'disabled' ],
+					[ 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c', 'disabled' ],
+				] ),
 			};
 			expect(
 				isBlockSubtreeDisabled(
@@ -186,6 +202,11 @@ describe( 'private selectors', () => {
 					[ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', 'disabled' ],
 					[ 'b3247f75-fd94-4fef-97f9-5bfd162cc416', 'disabled' ],
 				] ),
+				derivedBlockEditingModes: new Map( [
+					[ 'b26fc763-417d-4f01-b81c-2ec61e14a972', 'disabled' ],
+					[ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', 'disabled' ],
+					[ 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c', 'disabled' ],
+				] ),
 			};
 			expect(
 				isBlockSubtreeDisabled(
@@ -202,6 +223,11 @@ describe( 'private selectors', () => {
 					[ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', 'disabled' ],
 					[ 'b3247f75-fd94-4fef-97f9-5bfd162cc416', 'default' ],
 				] ),
+				derivedBlockEditingModes: new Map( [
+					[ 'b26fc763-417d-4f01-b81c-2ec61e14a972', 'disabled' ],
+					[ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', 'disabled' ],
+					[ 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c', 'disabled' ],
+				] ),
 			};
 			expect(
 				isBlockSubtreeDisabled(
@@ -218,6 +244,13 @@ describe( 'private selectors', () => {
 					[ '', 'disabled' ],
 					[ 'b3247f75-fd94-4fef-97f9-5bfd162cc416', 'default' ],
 				] ),
+				derivedBlockEditingModes: new Map( [
+					[ '6cf70164-9097-4460-bcbf-200560546988', 'disabled' ],
+					[ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', 'disabled' ],
+					[ 'b26fc763-417d-4f01-b81c-2ec61e14a972', 'disabled' ],
+					[ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', 'disabled' ],
+					[ 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c', 'disabled' ],
+				] ),
 			};
 			expect(
 				isBlockSubtreeDisabled(
@@ -303,6 +336,7 @@ describe( 'private selectors', () => {
 			const state = {
 				...baseState,
 				blockEditingModes: new Map( [] ),
+				derivedBlockEditingModes: new Map( [] ),
 			};
 			expect( getEnabledClientIdsTree( state ) ).toEqual( [
 				{
@@ -340,6 +374,7 @@ describe( 'private selectors', () => {
 			const state = {
 				...baseState,
 				blockEditingModes: new Map( [] ),
+				derivedBlockEditingModes: new Map( [] ),
 			};
 			expect(
 				getEnabledClientIdsTree(
@@ -375,6 +410,10 @@ describe( 'private selectors', () => {
 					[ 'b26fc763-417d-4f01-b81c-2ec61e14a972', 'contentOnly' ],
 					[ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', 'contentOnly' ],
 				] ),
+				derivedBlockEditingModes: new Map( [
+					[ '6cf70164-9097-4460-bcbf-200560546988', 'disabled' ],
+					[ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', 'disabled' ],
+				] ),
 			};
 			expect( getEnabledClientIdsTree( state ) ).toEqual( [
 				{
@@ -412,6 +451,7 @@ describe( 'private selectors', () => {
 					] ),
 				},
 				blockEditingModes: new Map(),
+				derivedBlockEditingModes: new Map(),
 			};
 			expect(
 				getEnabledBlockParents(
@@ -433,7 +473,7 @@ describe( 'private selectors', () => {
 						],
 						[
 							'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c',
-							'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
+							'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337',
 						],
 						[
 							'4c2b7140-fffd-44b4-b2a7-820c670a6514',
@@ -442,6 +482,7 @@ describe( 'private selectors', () => {
 					] ),
 
 					order: new Map( [
+						[ '', [ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337' ] ],
 						[
 							'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337',
 							[
@@ -453,12 +494,15 @@ describe( 'private selectors', () => {
 							'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c',
 							[ '4c2b7140-fffd-44b4-b2a7-820c670a6514' ],
 						],
-						[ '', [ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337' ] ],
 					] ),
 				},
 				blockEditingModes: new Map( [
 					[ '', 'disabled' ],
-					[ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', 'default' ],
+					[ 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c', 'default' ],
+				] ),
+				derivedBlockEditingModes: new Map( [
+					[ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', 'disabled' ],
+					[ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', 'disabled' ],
 				] ),
 				blockListSettings: {},
 			};
@@ -467,10 +511,7 @@ describe( 'private selectors', () => {
 					state,
 					'4c2b7140-fffd-44b4-b2a7-820c670a6514'
 				)
-			).toEqual( [
-				'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
-				'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c',
-			] );
+			).toEqual( [ 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c' ] );
 		} );
 
 		it( 'should order from bottom to top if ascending is true', () => {
@@ -493,6 +534,7 @@ describe( 'private selectors', () => {
 						],
 					] ),
 					order: new Map( [
+						[ '', [ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337' ] ],
 						[
 							'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337',
 							[ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f' ],
@@ -505,13 +547,15 @@ describe( 'private selectors', () => {
 							'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c',
 							[ '4c2b7140-fffd-44b4-b2a7-820c670a6514' ],
 						],
-						[ '', [ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337' ] ],
 					] ),
 				},
 				blockEditingModes: new Map( [
 					[ '', 'disabled' ],
 					[ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', 'default' ],
 				] ),
+				derivedBlockEditingModes: new Map( [
+					[ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', 'disabled' ],
+				] ),
 				blockListSettings: {},
 			};
 			expect(