@wordpress/block-editor 7.0.4 → 8.0.0

package/src/store/index.js

@@ -9,7 +9,6 @@ import { createReduxStore, registerStore } from '@wordpress/data';
 import reducer from './reducer';
 import * as selectors from './selectors';
 import * as actions from './actions';
-import controls from './controls';
 import { STORE_NAME } from './constants';
 
 /**
@@ -23,7 +22,7 @@ export const storeConfig = {
 	reducer,
 	selectors,
 	actions,
-	controls,
+	__experimentalUseThunks: true,
 };
 
 /**

package/src/store/reducer.js

@@ -240,32 +240,40 @@ function buildBlockTree( state, blocks ) {
 	return result;
 }
 
-function updateParentInnerBlocksInTree( state, tree, updatedClientIds ) {
-	const clientIds = new Set( [] );
+function updateParentInnerBlocksInTree(
+	state,
+	tree,
+	updatedClientIds,
+	updateChildrenOfUpdatedClientIds = false
+) {
+	const uncontrolledParents = new Set( [] );
 	const controlledParents = new Set();
 	for ( const clientId of updatedClientIds ) {
-		let current = clientId;
+		let current = updateChildrenOfUpdatedClientIds
+			? clientId
+			: state.parents[ clientId ];
 		do {
 			if ( state.controlledInnerBlocks[ current ] ) {
-				controlledParents.add( current );
+				// Should stop on controlled blocks.
 				// If we reach a controlled parent, break out of the loop.
+				controlledParents.add( current );
 				break;
 			} else {
-				clientIds.add( current );
+				// else continue traversing up through parents.
+				uncontrolledParents.add( current );
+				current = state.parents[ current ];
 			}
-			// Should stop on controlled blocks.
-			current = state.parents[ current ];
 		} while ( current !== undefined );
 	}
 
 	// To make sure the order of assignments doesn't matter,
 	// we first create empty objects and mutates the inner blocks later.
-	for ( const clientId of clientIds ) {
+	for ( const clientId of uncontrolledParents ) {
 		tree[ clientId ] = {
 			...tree[ clientId ],
 		};
 	}
-	for ( const clientId of clientIds ) {
+	for ( const clientId of uncontrolledParents ) {
 		tree[ clientId ].innerBlocks = ( state.order[ clientId ] || [] ).map(
 			( subClientId ) => tree[ subClientId ]
 		);
@@ -311,7 +319,8 @@ const withBlockTree = ( reducer ) => ( state = {}, action ) => {
 					...newState.tree,
 					...subTree,
 				},
-				action.rootClientId ? [ action.rootClientId ] : [ '' ]
+				action.rootClientId ? [ action.rootClientId ] : [ '' ],
+				true
 			);
 			break;
 		}
@@ -321,11 +330,13 @@ const withBlockTree = ( reducer ) => ( state = {}, action ) => {
 				{
 					...newState.tree,
 					[ action.clientId ]: {
+						...newState.tree[ action.clientId ],
 						...newState.byClientId[ action.clientId ],
 						attributes: newState.attributes[ action.clientId ],
 					},
 				},
-				[ action.clientId ]
+				[ action.clientId ],
+				false
 			);
 			break;
 		case 'UPDATE_BLOCK_ATTRIBUTES': {
@@ -345,7 +356,8 @@ const withBlockTree = ( reducer ) => ( state = {}, action ) => {
 					...newState.tree,
 					...newSubTree,
 				},
-				action.clientIds
+				action.clientIds,
+				false
 			);
 			break;
 		}
@@ -364,7 +376,8 @@ const withBlockTree = ( reducer ) => ( state = {}, action ) => {
 					),
 					...subTree,
 				},
-				action.blocks.map( ( b ) => b.clientId )
+				action.blocks.map( ( b ) => b.clientId ),
+				false
 			);
 
 			// If there are no replaced blocks, it means we're removing blocks so we need to update their parent.
@@ -381,7 +394,8 @@ const withBlockTree = ( reducer ) => ( state = {}, action ) => {
 			newState.tree = updateParentInnerBlocksInTree(
 				newState,
 				newState.tree,
-				parentsOfRemovedBlocks
+				parentsOfRemovedBlocks,
+				true
 			);
 			break;
 		}
@@ -406,7 +420,8 @@ const withBlockTree = ( reducer ) => ( state = {}, action ) => {
 						)
 					)
 				),
-				parentsOfRemovedBlocks
+				parentsOfRemovedBlocks,
+				true
 			);
 			break;
 		case 'MOVE_BLOCKS_TO_POSITION': {
@@ -423,7 +438,8 @@ const withBlockTree = ( reducer ) => ( state = {}, action ) => {
 			newState.tree = updateParentInnerBlocksInTree(
 				newState,
 				newState.tree,
-				updatedBlockUids
+				updatedBlockUids,
+				true
 			);
 			break;
 		}
@@ -435,7 +451,8 @@ const withBlockTree = ( reducer ) => ( state = {}, action ) => {
 			newState.tree = updateParentInnerBlocksInTree(
 				newState,
 				newState.tree,
-				updatedBlockUids
+				updatedBlockUids,
+				true
 			);
 			break;
 		}
@@ -462,7 +479,8 @@ const withBlockTree = ( reducer ) => ( state = {}, action ) => {
 						return result;
 					}, {} ),
 				},
-				updatedBlockUids
+				updatedBlockUids,
+				false
 			);
 		}
 	}

package/src/store/selectors.js

@@ -1563,20 +1563,55 @@ export const getInserterItems = createSelector(
 			buildScope: 'inserter',
 		} );
 
-		const buildReusableBlockInserterItem = ( reusableBlock ) => {
-			const id = `core/block/${ reusableBlock.id }`;
+		/*
+		 * Matches block comment delimiters amid serialized content.
+		 *
+		 * @see `tokenizer` in `@wordpress/block-serialization-default-parser`
+		 * package
+		 *
+		 * blockParserTokenizer differs from the original tokenizer in the
+		 * following ways:
+		 *
+		 * - removed global flag (/g)
+		 * - prepended ^\s*
+		 *
+		 */
+		const blockParserTokenizer = /^\s*<!--\s+(\/)?wp:([a-z][a-z0-9_-]*\/)?([a-z][a-z0-9_-]*)\s+({(?:(?=([^}]+|}+(?=})|(?!}\s+\/?-->)[^])*)\5|[^]*?)}\s+)?(\/)?-->/;
 
-			const referencedBlocks = __experimentalGetParsedReusableBlock(
-				state,
-				reusableBlock.id
-			);
-			let referencedBlockType;
-			if ( referencedBlocks.length === 1 ) {
-				referencedBlockType = getBlockType(
-					referencedBlocks[ 0 ].name
-				);
+		const buildReusableBlockInserterItem = ( reusableBlock ) => {
+			let icon = symbol;
+
+			/*
+			 * Instead of always displaying a generic "symbol" icon for every
+			 * reusable block, try to use an icon that represents the first
+			 * outermost block contained in the reusable block. This requires
+			 * scanning the serialized form of the reusable block to find its
+			 * first block delimiter, then looking up the corresponding block
+			 * type, if available.
+			 */
+			if ( Platform.OS === 'web' ) {
+				const content =
+					typeof reusableBlock.content.raw === 'string'
+						? reusableBlock.content.raw
+						: reusableBlock.content;
+				const rawBlockMatch = content.match( blockParserTokenizer );
+				if ( rawBlockMatch ) {
+					const [
+						,
+						,
+						namespace = 'core/',
+						blockName,
+					] = rawBlockMatch;
+					const referencedBlockType = getBlockType(
+						namespace + blockName
+					);
+					if ( referencedBlockType ) {
+						icon = referencedBlockType.icon;
+					}
+				}
 			}
 
+			const id = `core/block/${ reusableBlock.id }`;
 			const { time, count = 0 } = getInsertUsage( state, id ) || {};
 			const frecency = calculateFrecency( time, count );
 
@@ -1585,10 +1620,7 @@ export const getInserterItems = createSelector(
 				name: 'core/block',
 				initialAttributes: { ref: reusableBlock.id },
 				title: reusableBlock.title.raw,
-				icon:
-					referencedBlockType && Platform.OS === 'web'
-						? referencedBlockType.icon
-						: symbol,
+				icon,
 				category: 'reusable',
 				keywords: [],
 				isDisabled: false,
@@ -1869,9 +1901,11 @@ const getAllAllowedPatterns = createSelector(
 	( state ) => {
 		const patterns = state.settings.__experimentalBlockPatterns;
 		const { allowedBlockTypes } = getSettings( state );
-		const parsedPatterns = patterns.map( ( { name } ) =>
-			__experimentalGetParsedPattern( state, name )
-		);
+		const parsedPatterns = patterns
+			.filter( ( { inserter = true } ) => !! inserter )
+			.map( ( { name } ) =>
+				__experimentalGetParsedPattern( state, name )
+			);
 		const allowedPatterns = parsedPatterns.filter( ( { blocks } ) =>
 			checkAllowListRecursive( blocks, allowedBlockTypes )
 		);
@@ -2072,35 +2106,6 @@ export const __experimentalGetBlockListSettingsForBlocks = createSelector(
 	( state ) => [ state.blockListSettings ]
 );
 
-/**
- * Returns the parsed block saved as shared block with the given ID.
- *
- * @param {Object}        state Global application state.
- * @param {number|string} ref   The shared block's ID.
- *
- * @return {Object} The parsed block.
- */
-export const __experimentalGetParsedReusableBlock = createSelector(
-	( state, ref ) => {
-		const reusableBlock = find(
-			getReusableBlocks( state ),
-			( block ) => block.id === ref
-		);
-		if ( ! reusableBlock ) {
-			return null;
-		}
-
-		// Only reusableBlock.content.raw should be used here, `reusableBlock.content` is a
-		// workaround until #22127 is fixed.
-		return parse(
-			typeof reusableBlock.content.raw === 'string'
-				? reusableBlock.content.raw
-				: reusableBlock.content
-		);
-	},
-	( state ) => [ getReusableBlocks( state ) ]
-);
-
 /**
  * Returns the title of a given reusable block
  *