@wordpress/block-editor 15.3.1-next.836ecdcae.0 → 15.3.1-next.a730c9c8c.0

package/src/store/reducer.js

@@ -2267,6 +2267,29 @@ function getDerivedBlockEditingModesForTree(
 			syncedPatternClientIds.push( clientId );
 		}
 	} );
+	const contentOnlyTemplateLockedClientIds = Object.keys(
+		state.blockListSettings
+	).filter(
+		( clientId ) =>
+			state.blockListSettings[ clientId ]?.templateLock === 'contentOnly'
+	);
+	// Use array.from for better back compat. Older versions of the iterator returned
+	// from `keys()` didn't have the `filter` method.
+	const unsyncedPatternClientIds =
+		!! window?.__experimentalContentOnlyPatternInsertion
+			? Array.from( state.blocks.attributes.keys() ).filter(
+					( clientId ) =>
+						state.blocks.attributes.get( clientId )?.metadata
+							?.patternName
+			  )
+			: [];
+	const contentOnlyParents = [
+		...contentOnlyTemplateLockedClientIds,
+		...unsyncedPatternClientIds,
+		...( window?.__experimentalContentOnlyPatternInsertion
+			? templatePartClientIds
+			: [] ),
+	];
 
 	traverseBlockTree( state, treeClientId, ( block ) => {
 		const { clientId, name: blockName } = block;
@@ -2457,6 +2480,22 @@ function getDerivedBlockEditingModesForTree(
 				derivedBlockEditingModes.set( clientId, 'disabled' );
 			}
 		}
+
+		// Handle `templateLock=contentOnly` blocks and unsynced patterns.
+		if ( contentOnlyParents.length ) {
+			const hasContentOnlyParent = !! findParentInClientIdsList(
+				state,
+				clientId,
+				contentOnlyParents
+			);
+			if ( hasContentOnlyParent ) {
+				if ( isContentBlock( blockName ) ) {
+					derivedBlockEditingModes.set( clientId, 'contentOnly' );
+				} else {
+					derivedBlockEditingModes.set( clientId, 'disabled' );
+				}
+			}
+		}
 	} );
 
 	return derivedBlockEditingModes;
@@ -2628,6 +2667,155 @@ export function withDerivedBlockEditingModes( reducer ) {
 				}
 				break;
 			}
+			case 'UPDATE_BLOCK_ATTRIBUTES': {
+				// Handle unsynced patterns which indicate their contentOnly-ness via
+				// the `attributes.metadata.patternName` property.
+				// Check when this is added or removed and update blockEditingModes.
+				const addedBlocks = [];
+				const removedClientIds = [];
+
+				for ( const clientId of action?.clientIds ) {
+					const attributes = action.options?.uniqueByBlock
+						? action.attributes[ clientId ]
+						: action.attributes;
+
+					if ( ! attributes ) {
+						break;
+					}
+
+					if (
+						// patternName is switching from falsy to truthy, indicating
+						// this block is becoming an unsynced pattern.
+						attributes.metadata?.patternName &&
+						! state.blocks.attributes.get( clientId )?.metadata
+							?.patternName
+					) {
+						addedBlocks.push(
+							nextState.blocks.tree.get( clientId )
+						);
+					} else if (
+						// patternName is switching from truthy to falsy, this block is becoming
+						// a regular block but was an unsynced pattern.
+						// Check that `metadata` is part of the included attributes, as
+						// `updateBlockAttributes` merges attributes, if it isn't present
+						// the previous `metadata` would be retained.
+						attributes.metadata &&
+						! attributes.metadata?.patternName &&
+						state.blocks.attributes.get( clientId )?.metadata
+							?.patternName
+					) {
+						// Include it in 'removedClientIds'.
+						removedClientIds.push( clientId );
+					}
+				}
+
+				if ( ! addedBlocks?.length && ! removedClientIds?.length ) {
+					break;
+				}
+
+				const nextDerivedBlockEditingModes =
+					getDerivedBlockEditingModesUpdates( {
+						prevState: state,
+						nextState,
+						addedBlocks,
+						removedClientIds,
+						isNavMode: false,
+					} );
+				const nextDerivedNavModeBlockEditingModes =
+					getDerivedBlockEditingModesUpdates( {
+						prevState: state,
+						nextState,
+						addedBlocks,
+						removedClientIds,
+						isNavMode: true,
+					} );
+
+				if (
+					nextDerivedBlockEditingModes ||
+					nextDerivedNavModeBlockEditingModes
+				) {
+					return {
+						...nextState,
+						derivedBlockEditingModes:
+							nextDerivedBlockEditingModes ??
+							state.derivedBlockEditingModes,
+						derivedNavModeBlockEditingModes:
+							nextDerivedNavModeBlockEditingModes ??
+							state.derivedNavModeBlockEditingModes,
+					};
+				}
+
+				break;
+			}
+			case 'UPDATE_BLOCK_LIST_SETTINGS': {
+				// Handle the addition and removal of contentOnly template locked blocks.
+				const addedBlocks = [];
+				const removedClientIds = [];
+
+				const updates =
+					typeof action.clientId === 'string'
+						? { [ action.clientId ]: action.settings }
+						: action.clientId;
+
+				for ( const clientId in updates ) {
+					const isNewContentOnlyBlock =
+						state.blockListSettings[ clientId ]?.templateLock !==
+							'contentOnly' &&
+						nextState.blockListSettings[ clientId ]
+							?.templateLock === 'contentOnly';
+
+					const wasContentOnlyBlock =
+						state.blockListSettings[ clientId ]?.templateLock ===
+							'contentOnly' &&
+						nextState.blockListSettings[ clientId ]
+							?.templateLock !== 'contentOnly';
+
+					if ( isNewContentOnlyBlock ) {
+						addedBlocks.push(
+							nextState.blocks.tree.get( clientId )
+						);
+					} else if ( wasContentOnlyBlock ) {
+						removedClientIds.push( clientId );
+					}
+				}
+
+				if ( ! addedBlocks.length && ! removedClientIds.length ) {
+					break;
+				}
+
+				const nextDerivedBlockEditingModes =
+					getDerivedBlockEditingModesUpdates( {
+						prevState: state,
+						nextState,
+						addedBlocks,
+						removedClientIds,
+						isNavMode: false,
+					} );
+				const nextDerivedNavModeBlockEditingModes =
+					getDerivedBlockEditingModesUpdates( {
+						prevState: state,
+						nextState,
+						addedBlocks,
+						removedClientIds,
+						isNavMode: true,
+					} );
+
+				if (
+					nextDerivedBlockEditingModes ||
+					nextDerivedNavModeBlockEditingModes
+				) {
+					return {
+						...nextState,
+						derivedBlockEditingModes:
+							nextDerivedBlockEditingModes ??
+							state.derivedBlockEditingModes,
+						derivedNavModeBlockEditingModes:
+							nextDerivedNavModeBlockEditingModes ??
+							state.derivedNavModeBlockEditingModes,
+					};
+				}
+				break;
+			}
 			case 'SET_BLOCK_EDITING_MODE':
 			case 'UNSET_BLOCK_EDITING_MODE':
 			case 'SET_HAS_CONTROLLED_INNER_BLOCKS': {

package/src/store/selectors.js

@@ -30,6 +30,7 @@ import {
 	getInsertBlockTypeDependants,
 	getParsedPattern,
 	getGrammar,
+	mapUserPattern,
 } from './utils';
 import { orderBy } from '../utils/sorting';
 import { STORE_NAME } from './constants';
@@ -2155,27 +2156,31 @@ export const getInserterItems = createRegistrySelector( ( select ) =>
 							foreground: 'var(--wp-block-synced-color)',
 					  }
 					: symbol;
-				const id = `core/block/${ reusableBlock.id }`;
-				const { time, count = 0 } = getInsertUsage( state, id ) || {};
+				const userPattern = mapUserPattern( reusableBlock );
+				const { time, count = 0 } =
+					getInsertUsage( state, userPattern.name ) || {};
 				const frecency = calculateFrecency( time, count );
 
 				return {
-					id,
+					id: userPattern.name,
 					name: 'core/block',
 					initialAttributes: { ref: reusableBlock.id },
-					title: reusableBlock.title?.raw,
+					title: userPattern.title,
 					icon,
 					category: 'reusable',
 					keywords: [ 'reusable' ],
 					isDisabled: false,
 					utility: 1, // Deprecated.
 					frecency,
-					content: reusableBlock.content?.raw,
-					syncStatus: reusableBlock.wp_pattern_sync_status,
+					content: userPattern.content,
+					get blocks() {
+						return getParsedPattern( userPattern ).blocks;
+					},
+					syncStatus: userPattern.syncStatus,
 				};
 			};
 
-			const syncedPatternInserterItems = canInsertBlockTypeUnmemoized(
+			const patternInserterItems = canInsertBlockTypeUnmemoized(
 				state,
 				'core/block',
 				rootClientId
@@ -2261,7 +2266,7 @@ export const getInserterItems = createRegistrySelector( ( select ) =>
 				{ core: [], noncore: [] }
 			);
 			const sortedBlockTypes = [ ...coreItems, ...nonCoreItems ];
-			return [ ...sortedBlockTypes, ...syncedPatternInserterItems ];
+			return [ ...sortedBlockTypes, ...patternInserterItems ];
 		},
 		( state, rootClientId ) => [
 			getBlockTypes(),
@@ -3076,62 +3081,36 @@ export function __unstableIsWithinBlockOverlay( state, clientId ) {
  * @return {BlockEditingMode} The block editing mode. One of `'disabled'`,
  *                            `'contentOnly'`, or `'default'`.
  */
-export const getBlockEditingMode = createRegistrySelector(
-	( select ) =>
-		( state, clientId = '' ) => {
-			// Some selectors that call this provide `null` as the default
-			// rootClientId, but the default rootClientId is actually `''`.
-			if ( clientId === null ) {
-				clientId = '';
-			}
+export function getBlockEditingMode( state, clientId = '' ) {
+	// Some selectors that call this provide `null` as the default
+	// rootClientId, but the default rootClientId is actually `''`.
+	if ( clientId === null ) {
+		clientId = '';
+	}
 
-			const isNavMode = isNavigationMode( state );
-
-			// 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 isNavMode = isNavigationMode( state );
 
-			// 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 );
-			}
+	// 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 );
+	}
 
-			// In normal mode, consider that an explicitly set editing mode takes over.
-			const blockEditingMode = state.blockEditingModes.get( clientId );
-			if ( blockEditingMode ) {
-				return blockEditingMode;
-			}
+	// 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, top level is default mode.
-			if ( clientId === '' ) {
-				return 'default';
-			}
+	// In normal mode, consider that an explicitly set editing mode takes over.
+	if ( state.blockEditingModes.has( clientId ) ) {
+		return state.blockEditingModes.get( clientId );
+	}
 
-			const rootClientId = getBlockRootClientId( state, clientId );
-			const templateLock = getTemplateLock( state, rootClientId );
-			// If the parent of the block is contentOnly locked, check whether it's a content block.
-			if ( templateLock === 'contentOnly' ) {
-				const name = getBlockName( state, clientId );
-				const { hasContentRoleAttribute } = unlock(
-					select( blocksStore )
-				);
-				const isContent = hasContentRoleAttribute( name );
-				return isContent ? 'contentOnly' : 'disabled';
-			}
-			return 'default';
-		}
-);
+	return 'default';
+}
 
 /**
  * Indicates if a block is ungroupable.