@wordpress/block-editor 14.8.1-next.cd6172eb0.0 → 14.10.0

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 );
@@ -1586,14 +1586,14 @@ export function getTemplateLock( state, rootClientId ) {
  * @param {string|Object} blockNameOrType The block type object, e.g., the response
  *                                        from the block directory; or a string name of
  *                                        an installed block type, e.g.' core/paragraph'.
- * @param {Set}           checkedBlocks   Set of block names that have already been checked.
+ * @param {?string}       rootClientId    Optional root client ID of block list.
  *
  * @return {boolean} Whether the given block type is allowed to be inserted.
  */
 const isBlockVisibleInTheInserter = (
 	state,
 	blockNameOrType,
-	checkedBlocks = new Set()
+	rootClientId = null
 ) => {
 	let blockType;
 	let blockName;
@@ -1621,26 +1621,19 @@ const isBlockVisibleInTheInserter = (
 		return false;
 	}
 
-	if ( checkedBlocks.has( blockName ) ) {
-		return false;
-	}
-
-	checkedBlocks.add( blockName );
-
 	// If parent blocks are not visible, child blocks should be hidden too.
-	if ( Array.isArray( blockType.parent ) ) {
-		return blockType.parent.some(
-			( name ) =>
-				( blockName !== name &&
-					isBlockVisibleInTheInserter(
-						state,
-						name,
-						checkedBlocks
-					) ) ||
-				// Exception for blocks with post-content parent,
-				// the root level is often consider as "core/post-content".
-				// This exception should only apply to the post editor ideally though.
-				name === 'core/post-content'
+	const parents = (
+		Array.isArray( blockType.parent ) ? blockType.parent : []
+	).concat( Array.isArray( blockType.ancestor ) ? blockType.ancestor : [] );
+	if ( parents.length > 0 ) {
+		const rootBlockName = getBlockName( state, rootClientId );
+		// This is an exception to the rule that says that all blocks are visible in the inserter.
+		// Blocks that require a given parent or ancestor are only visible if we're within that parent.
+		return (
+			parents.includes( 'core/post-content' ) ||
+			parents.includes( rootBlockName ) ||
+			getBlockParentsByBlockName( state, rootClientId, parents ).length >
+				0
 		);
 	}
 
@@ -1665,7 +1658,7 @@ const canInsertBlockTypeUnmemoized = (
 	blockName,
 	rootClientId = null
 ) => {
-	if ( ! isBlockVisibleInTheInserter( state, blockName ) ) {
+	if ( ! isBlockVisibleInTheInserter( state, blockName, rootClientId ) ) {
 		return false;
 	}
 
@@ -1999,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.
@@ -2072,6 +2065,7 @@ const buildBlockTypeItem =
 			category: blockType.category,
 			keywords: blockType.keywords,
 			parent: blockType.parent,
+			ancestor: blockType.ancestor,
 			variations: inserterVariations,
 			example: blockType.example,
 			utility: 1, // Deprecated.
@@ -2086,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'.
  *
@@ -2169,7 +2163,11 @@ export const getInserterItems = createRegistrySelector( ( select ) =>
 			} else {
 				blockTypeInserterItems = blockTypeInserterItems
 					.filter( ( blockType ) =>
-						isBlockVisibleInTheInserter( state, blockType )
+						isBlockVisibleInTheInserter(
+							state,
+							blockType,
+							rootClientId
+						)
 					)
 					.map( ( blockType ) => ( {
 						...blockType,
@@ -2238,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'.
  *
@@ -2402,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 ) {
@@ -2501,7 +2499,11 @@ export const __experimentalGetAllowedPatterns = createRegistrySelector(
 										name,
 										rootClientId
 								  )
-								: isBlockVisibleInTheInserter( state, name )
+								: isBlockVisibleInTheInserter(
+										state,
+										name,
+										rootClientId
+								  )
 						)
 				);
 
@@ -3085,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(