@wordpress/block-editor 9.2.0 → 9.5.0

package/src/store/index.js

@@ -15,8 +15,6 @@ import { STORE_NAME } from './constants';
  * Block editor data store configuration.
  *
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#registerStore
- *
- * @type {Object}
  */
 export const storeConfig = {
 	reducer,
@@ -28,8 +26,6 @@ export const storeConfig = {
  * Store definition for the block editor namespace.
  *
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore
- *
- * @type {Object}
  */
 export const store = createReduxStore( STORE_NAME, {
 	...storeConfig,

package/src/store/reducer.js

@@ -9,10 +9,8 @@ import {
 	omit,
 	without,
 	mapValues,
-	keys,
 	isEqual,
 	isEmpty,
-	identity,
 	omitBy,
 } from 'lodash';
 
@@ -27,6 +25,8 @@ import { store as blocksStore } from '@wordpress/blocks';
 import { PREFERENCES_DEFAULTS, SETTINGS_DEFAULTS } from './defaults';
 import { insertAt, moveTo } from './array';
 
+const identity = ( x ) => x;
+
 /**
  * Given an array of blocks, returns an object where each key is a nesting
  * context, the value of which is an array of block client IDs existing within
@@ -148,7 +148,7 @@ function getMutateSafeObject( original, working ) {
  * @return {boolean} Whether the two objects have the same keys.
  */
 export function hasSameKeys( a, b ) {
-	return isEqual( keys( a ), keys( b ) );
+	return isEqual( Object.keys( a ), Object.keys( b ) );
 }
 
 /**
@@ -258,197 +258,207 @@ function updateParentInnerBlocksInTree(
  *
  * @return {Function} Enhanced reducer function.
  */
-const withBlockTree = ( reducer ) => ( state = {}, action ) => {
-	const newState = reducer( state, action );
-
-	if ( newState === state ) {
-		return state;
-	}
+const withBlockTree =
+	( reducer ) =>
+	( state = {}, action ) => {
+		const newState = reducer( state, action );
 
-	newState.tree = state.tree ? state.tree : {};
-	switch ( action.type ) {
-		case 'RECEIVE_BLOCKS':
-		case 'INSERT_BLOCKS': {
-			const subTree = buildBlockTree( newState, action.blocks );
-			newState.tree = updateParentInnerBlocksInTree(
-				newState,
-				{
-					...newState.tree,
-					...subTree,
-				},
-				action.rootClientId ? [ action.rootClientId ] : [ '' ],
-				true
-			);
-			break;
+		if ( newState === state ) {
+			return state;
 		}
-		case 'UPDATE_BLOCK':
-			newState.tree = updateParentInnerBlocksInTree(
-				newState,
-				{
-					...newState.tree,
-					[ action.clientId ]: {
-						...newState.tree[ action.clientId ],
-						...newState.byClientId[ action.clientId ],
-						attributes: newState.attributes[ action.clientId ],
+
+		newState.tree = state.tree ? state.tree : {};
+		switch ( action.type ) {
+			case 'RECEIVE_BLOCKS':
+			case 'INSERT_BLOCKS': {
+				const subTree = buildBlockTree( newState, action.blocks );
+				newState.tree = updateParentInnerBlocksInTree(
+					newState,
+					{
+						...newState.tree,
+						...subTree,
 					},
-				},
-				[ action.clientId ],
-				false
-			);
-			break;
-		case 'UPDATE_BLOCK_ATTRIBUTES': {
-			const newSubTree = action.clientIds.reduce(
-				( result, clientId ) => {
-					result[ clientId ] = {
-						...newState.tree[ clientId ],
-						attributes: newState.attributes[ clientId ],
-					};
-					return result;
-				},
-				{}
-			);
-			newState.tree = updateParentInnerBlocksInTree(
-				newState,
-				{
-					...newState.tree,
-					...newSubTree,
-				},
-				action.clientIds,
-				false
-			);
-			break;
-		}
-		case 'REPLACE_BLOCKS_AUGMENTED_WITH_CHILDREN': {
-			const subTree = buildBlockTree( newState, action.blocks );
-			newState.tree = updateParentInnerBlocksInTree(
-				newState,
-				{
-					...omit(
+					action.rootClientId ? [ action.rootClientId ] : [ '' ],
+					true
+				);
+				break;
+			}
+			case 'UPDATE_BLOCK':
+				newState.tree = updateParentInnerBlocksInTree(
+					newState,
+					{
+						...newState.tree,
+						[ action.clientId ]: {
+							...newState.tree[ action.clientId ],
+							...newState.byClientId[ action.clientId ],
+							attributes: newState.attributes[ action.clientId ],
+						},
+					},
+					[ action.clientId ],
+					false
+				);
+				break;
+			case 'UPDATE_BLOCK_ATTRIBUTES': {
+				const newSubTree = action.clientIds.reduce(
+					( result, clientId ) => {
+						result[ clientId ] = {
+							...newState.tree[ clientId ],
+							attributes: newState.attributes[ clientId ],
+						};
+						return result;
+					},
+					{}
+				);
+				newState.tree = updateParentInnerBlocksInTree(
+					newState,
+					{
+						...newState.tree,
+						...newSubTree,
+					},
+					action.clientIds,
+					false
+				);
+				break;
+			}
+			case 'REPLACE_BLOCKS_AUGMENTED_WITH_CHILDREN': {
+				const subTree = buildBlockTree( newState, action.blocks );
+				newState.tree = updateParentInnerBlocksInTree(
+					newState,
+					{
+						...omit(
+							newState.tree,
+							action.replacedClientIds.concat(
+								// Controlled inner blocks are only removed
+								// if the block doesn't move to another position
+								// otherwise their content will be lost.
+								action.replacedClientIds
+									.filter(
+										( clientId ) => ! subTree[ clientId ]
+									)
+									.map(
+										( clientId ) =>
+											'controlled||' + clientId
+									)
+							)
+						),
+						...subTree,
+					},
+					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.
+				const parentsOfRemovedBlocks = [];
+				for ( const clientId of action.clientIds ) {
+					if (
+						state.parents[ clientId ] !== undefined &&
+						( state.parents[ clientId ] === '' ||
+							newState.byClientId[ state.parents[ clientId ] ] )
+					) {
+						parentsOfRemovedBlocks.push(
+							state.parents[ clientId ]
+						);
+					}
+				}
+				newState.tree = updateParentInnerBlocksInTree(
+					newState,
+					newState.tree,
+					parentsOfRemovedBlocks,
+					true
+				);
+				break;
+			}
+			case 'REMOVE_BLOCKS_AUGMENTED_WITH_CHILDREN':
+				const parentsOfRemovedBlocks = [];
+				for ( const clientId of action.clientIds ) {
+					if (
+						state.parents[ clientId ] !== undefined &&
+						( state.parents[ clientId ] === '' ||
+							newState.byClientId[ state.parents[ clientId ] ] )
+					) {
+						parentsOfRemovedBlocks.push(
+							state.parents[ clientId ]
+						);
+					}
+				}
+				newState.tree = updateParentInnerBlocksInTree(
+					newState,
+					omit(
 						newState.tree,
-						action.replacedClientIds.concat(
-							// Controlled inner blocks are only removed
-							// if the block doesn't move to another position
-							// otherwise their content will be lost.
-							action.replacedClientIds
-								.filter( ( clientId ) => ! subTree[ clientId ] )
-								.map(
-									( clientId ) => 'controlled||' + clientId
-								)
+						action.removedClientIds.concat(
+							action.removedClientIds.map(
+								( clientId ) => 'controlled||' + clientId
+							)
 						)
 					),
-					...subTree,
-				},
-				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.
-			const parentsOfRemovedBlocks = [];
-			for ( const clientId of action.clientIds ) {
-				if (
-					state.parents[ clientId ] !== undefined &&
-					( state.parents[ clientId ] === '' ||
-						newState.byClientId[ state.parents[ clientId ] ] )
-				) {
-					parentsOfRemovedBlocks.push( state.parents[ clientId ] );
+					parentsOfRemovedBlocks,
+					true
+				);
+				break;
+			case 'MOVE_BLOCKS_TO_POSITION': {
+				const updatedBlockUids = [];
+				if ( action.fromRootClientId ) {
+					updatedBlockUids.push( action.fromRootClientId );
+				} else {
+					updatedBlockUids.push( '' );
 				}
-			}
-			newState.tree = updateParentInnerBlocksInTree(
-				newState,
-				newState.tree,
-				parentsOfRemovedBlocks,
-				true
-			);
-			break;
-		}
-		case 'REMOVE_BLOCKS_AUGMENTED_WITH_CHILDREN':
-			const parentsOfRemovedBlocks = [];
-			for ( const clientId of action.clientIds ) {
-				if (
-					state.parents[ clientId ] !== undefined &&
-					( state.parents[ clientId ] === '' ||
-						newState.byClientId[ state.parents[ clientId ] ] )
-				) {
-					parentsOfRemovedBlocks.push( state.parents[ clientId ] );
+				if ( action.toRootClientId ) {
+					updatedBlockUids.push( action.toRootClientId );
 				}
-			}
-			newState.tree = updateParentInnerBlocksInTree(
-				newState,
-				omit(
+				newState.tree = updateParentInnerBlocksInTree(
+					newState,
 					newState.tree,
-					action.removedClientIds.concat(
-						action.removedClientIds.map(
-							( clientId ) => 'controlled||' + clientId
-						)
-					)
-				),
-				parentsOfRemovedBlocks,
-				true
-			);
-			break;
-		case 'MOVE_BLOCKS_TO_POSITION': {
-			const updatedBlockUids = [];
-			if ( action.fromRootClientId ) {
-				updatedBlockUids.push( action.fromRootClientId );
-			}
-			if ( action.toRootClientId ) {
-				updatedBlockUids.push( action.toRootClientId );
+					updatedBlockUids,
+					true
+				);
+				break;
 			}
-			if ( ! action.fromRootClientId || ! action.fromRootClientId ) {
-				updatedBlockUids.push( '' );
+			case 'MOVE_BLOCKS_UP':
+			case 'MOVE_BLOCKS_DOWN': {
+				const updatedBlockUids = [
+					action.rootClientId ? action.rootClientId : '',
+				];
+				newState.tree = updateParentInnerBlocksInTree(
+					newState,
+					newState.tree,
+					updatedBlockUids,
+					true
+				);
+				break;
 			}
-			newState.tree = updateParentInnerBlocksInTree(
-				newState,
-				newState.tree,
-				updatedBlockUids,
-				true
-			);
-			break;
-		}
-		case 'MOVE_BLOCKS_UP':
-		case 'MOVE_BLOCKS_DOWN': {
-			const updatedBlockUids = [
-				action.rootClientId ? action.rootClientId : '',
-			];
-			newState.tree = updateParentInnerBlocksInTree(
-				newState,
-				newState.tree,
-				updatedBlockUids,
-				true
-			);
-			break;
-		}
-		case 'SAVE_REUSABLE_BLOCK_SUCCESS': {
-			const updatedBlockUids = keys(
-				omitBy( newState.attributes, ( attributes, clientId ) => {
-					return (
-						newState.byClientId[ clientId ].name !== 'core/block' ||
-						attributes.ref !== action.updatedId
-					);
-				} )
-			);
+			case 'SAVE_REUSABLE_BLOCK_SUCCESS': {
+				const updatedBlockUids = Object.keys(
+					omitBy( newState.attributes, ( attributes, clientId ) => {
+						return (
+							newState.byClientId[ clientId ].name !==
+								'core/block' ||
+							attributes.ref !== action.updatedId
+						);
+					} )
+				);
 
-			newState.tree = updateParentInnerBlocksInTree(
-				newState,
-				{
-					...newState.tree,
-					...updatedBlockUids.reduce( ( result, clientId ) => {
-						result[ clientId ] = {
-							...newState.byClientId[ clientId ],
-							attributes: newState.attributes[ clientId ],
-							innerBlocks: newState.tree[ clientId ].innerBlocks,
-						};
-						return result;
-					}, {} ),
-				},
-				updatedBlockUids,
-				false
-			);
+				newState.tree = updateParentInnerBlocksInTree(
+					newState,
+					{
+						...newState.tree,
+						...updatedBlockUids.reduce( ( result, clientId ) => {
+							result[ clientId ] = {
+								...newState.byClientId[ clientId ],
+								attributes: newState.attributes[ clientId ],
+								innerBlocks:
+									newState.tree[ clientId ].innerBlocks,
+							};
+							return result;
+						}, {} ),
+					},
+					updatedBlockUids,
+					false
+				);
+			}
 		}
-	}
 
-	return newState;
-};
+		return newState;
+	};
 
 /**
  * Higher-order reducer intended to augment the blocks reducer, assigning an
@@ -679,9 +689,9 @@ const withReplaceInnerBlocks = ( reducer ) => ( state, action ) => {
 			index: 0,
 		} );
 
-		// We need to re-attach the block order of the controlled inner blocks.
-		// Otherwise, an inner block controller's blocks will be deleted entirely
-		// from its entity..
+		// We need to re-attach the controlled inner blocks to the blocks tree and
+		// preserve their block order. Otherwise, an inner block controller's blocks
+		// will be deleted entirely from its entity.
 		stateAfterInsert.order = {
 			...stateAfterInsert.order,
 			...reduce(
@@ -695,6 +705,20 @@ const withReplaceInnerBlocks = ( reducer ) => ( state, action ) => {
 				{}
 			),
 		};
+		stateAfterInsert.tree = {
+			...stateAfterInsert.tree,
+			...reduce(
+				nestedControllers,
+				( result, value, _key ) => {
+					const key = `controlled||${ _key }`;
+					if ( state.tree[ key ] ) {
+						result[ key ] = state.tree[ key ];
+					}
+					return result;
+				},
+				{}
+			),
+		};
 	}
 	return stateAfterInsert;
 };
@@ -1667,7 +1691,7 @@ export function lastBlockAttributesChange( state, action ) {
 /**
  * Reducer returning automatic change state.
  *
- * @param {boolean} state  Current state.
+ * @param {?string} state  Current state.
  * @param {Object}  action Dispatched action.
  *
  * @return {string} Updated state.

package/src/store/selectors.js

@@ -4,8 +4,6 @@
 import {
 	castArray,
 	first,
-	isArray,
-	isBoolean,
 	last,
 	map,
 	reduce,
@@ -412,8 +410,8 @@ export function getBlockSelectionEnd( state ) {
  * @return {number} Number of blocks selected in the post.
  */
 export function getSelectedBlockCount( state ) {
-	const multiSelectedBlockCount = getMultiSelectedBlockClientIds( state )
-		.length;
+	const multiSelectedBlockCount =
+		getMultiSelectedBlockClientIds( state ).length;
 
 	if ( multiSelectedBlockCount ) {
 		return multiSelectedBlockCount;
@@ -774,9 +772,8 @@ export function getMultiSelectedBlockClientIds( state ) {
  */
 export const getMultiSelectedBlocks = createSelector(
 	( state ) => {
-		const multiSelectedBlockClientIds = getMultiSelectedBlockClientIds(
-			state
-		);
+		const multiSelectedBlockClientIds =
+			getMultiSelectedBlockClientIds( state );
 		if ( ! multiSelectedBlockClientIds.length ) {
 			return EMPTY_ARRAY;
 		}
@@ -1384,7 +1381,7 @@ export function getBlockInsertionPoint( state ) {
 
 	if ( clientId ) {
 		rootClientId = getBlockRootClientId( state, clientId ) || undefined;
-		index = getBlockIndex( state, selectionEnd.clientId, rootClientId ) + 1;
+		index = getBlockIndex( state, selectionEnd.clientId ) + 1;
 	} else {
 		index = getBlockOrder( state ).length;
 	}
@@ -1447,10 +1444,10 @@ export function getTemplateLock( state, rootClientId ) {
 }
 
 const checkAllowList = ( list, item, defaultResult = null ) => {
-	if ( isBoolean( list ) ) {
+	if ( typeof list === 'boolean' ) {
 		return list;
 	}
-	if ( isArray( list ) ) {
+	if ( Array.isArray( list ) ) {
 		// TODO: when there is a canonical way to detect that we are editing a post
 		// the following check should be changed to something like:
 		// if ( list.includes( 'core/post-content' ) && getEditorMode() === 'post-content' && item === null )
@@ -1843,42 +1840,48 @@ const calculateFrecency = ( time, count ) => {
  * @param {string} options.buildScope The scope for which the item is going to be used.
  * @return {Function} Function returns an item to be shown in a specific context (Inserter|Transforms list).
  */
-const buildBlockTypeItem = ( state, { buildScope = 'inserter' } ) => (
-	blockType
-) => {
-	const id = blockType.name;
-
-	let isDisabled = false;
-	if ( ! hasBlockSupport( blockType.name, 'multiple', true ) ) {
-		isDisabled = some(
-			getBlocksByClientId( state, getClientIdsWithDescendants( state ) ),
-			{ name: blockType.name }
-		);
-	}
+const buildBlockTypeItem =
+	( state, { buildScope = 'inserter' } ) =>
+	( blockType ) => {
+		const id = blockType.name;
+
+		let isDisabled = false;
+		if ( ! hasBlockSupport( blockType.name, 'multiple', true ) ) {
+			isDisabled = some(
+				getBlocksByClientId(
+					state,
+					getClientIdsWithDescendants( state )
+				),
+				{ name: blockType.name }
+			);
+		}
 
-	const { time, count = 0 } = getInsertUsage( state, id ) || {};
-	const blockItemBase = {
-		id,
-		name: blockType.name,
-		title: blockType.title,
-		icon: blockType.icon,
-		isDisabled,
-		frecency: calculateFrecency( time, count ),
-	};
-	if ( buildScope === 'transform' ) return blockItemBase;
+		const { time, count = 0 } = getInsertUsage( state, id ) || {};
+		const blockItemBase = {
+			id,
+			name: blockType.name,
+			title: blockType.title,
+			icon: blockType.icon,
+			isDisabled,
+			frecency: calculateFrecency( time, count ),
+		};
+		if ( buildScope === 'transform' ) return blockItemBase;
 
-	const inserterVariations = getBlockVariations( blockType.name, 'inserter' );
-	return {
-		...blockItemBase,
-		initialAttributes: {},
-		description: blockType.description,
-		category: blockType.category,
-		keywords: blockType.keywords,
-		variations: inserterVariations,
-		example: blockType.example,
-		utility: 1, // Deprecated.
+		const inserterVariations = getBlockVariations(
+			blockType.name,
+			'inserter'
+		);
+		return {
+			...blockItemBase,
+			initialAttributes: {},
+			description: blockType.description,
+			category: blockType.category,
+			keywords: blockType.keywords,
+			variations: inserterVariations,
+			example: blockType.example,
+			utility: 1, // Deprecated.
+		};
 	};
-};
 
 /**
  * Determines the items that appear in the inserter. Includes both static
@@ -1928,7 +1931,8 @@ export const getInserterItems = createSelector(
 		 * - prepended ^\s*
 		 *
 		 */
-		const blockParserTokenizer = /^\s*<!--\s+(\/)?wp:([a-z][a-z0-9_-]*\/)?([a-z][a-z0-9_-]*)\s+({(?:(?=([^}]+|}+(?=})|(?!}\s+\/?-->)[^])*)\5|[^]*?)}\s+)?(\/)?-->/;
+		const blockParserTokenizer =
+			/^\s*<!--\s+(\/)?wp:([a-z][a-z0-9_-]*\/)?([a-z][a-z0-9_-]*)\s+({(?:(?=([^}]+|}+(?=})|(?!}\s+\/?-->)[^])*)\5|[^]*?)}\s+)?(\/)?-->/;
 
 		const buildReusableBlockInserterItem = ( reusableBlock ) => {
 			let icon = symbol;
@@ -1948,12 +1952,8 @@ export const getInserterItems = createSelector(
 						: reusableBlock.content;
 				const rawBlockMatch = content.match( blockParserTokenizer );
 				if ( rawBlockMatch ) {
-					const [
-						,
-						,
-						namespace = 'core/',
-						blockName,
-					] = rawBlockMatch;
+					const [ , , namespace = 'core/', blockName ] =
+						rawBlockMatch;
 					const referencedBlockType = getBlockType(
 						namespace + blockName
 					);
@@ -2020,10 +2020,10 @@ export const getInserterItems = createSelector(
 			type.push( block );
 			return blocks;
 		};
-		const {
-			core: coreItems,
-			noncore: nonCoreItems,
-		} = items.reduce( groupByType, { core: [], noncore: [] } );
+		const { core: coreItems, noncore: nonCoreItems } = items.reduce(
+			groupByType,
+			{ core: [], noncore: [] }
+		);
 		const sortedBlockTypes = [ ...coreItems, ...nonCoreItems ];
 		return [ ...sortedBlockTypes, ...reusableBlockInserterItems ];
 	},
@@ -2217,7 +2217,7 @@ export const __experimentalGetDirectInsertBlock = createSelector(
 );
 
 const checkAllowListRecursive = ( blocks, allowedBlockTypes ) => {
-	if ( isBoolean( allowedBlockTypes ) ) {
+	if ( typeof allowedBlockTypes === 'boolean' ) {
 		return allowedBlockTypes;
 	}
 
@@ -2615,9 +2615,8 @@ export const __experimentalGetActiveBlockIdByBlockNames = createSelector(
 			return selectedBlockClientId;
 		}
 		// Check if first selected block is a child of a valid entity area.
-		const multiSelectedBlockClientIds = getMultiSelectedBlockClientIds(
-			state
-		);
+		const multiSelectedBlockClientIds =
+			getMultiSelectedBlockClientIds( state );
 		const entityAreaParents = getBlockParentsByBlockName(
 			state,
 			selectedBlockClientId || multiSelectedBlockClientIds[ 0 ],

package/src/store/test/actions.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { noop } from 'lodash';
 import deepFreeze from 'deep-freeze';
 
 /**
@@ -24,6 +23,8 @@ import reducer from '../reducer';
 import * as actions from '../actions';
 import { STORE_NAME as blockEditorStoreName } from '../../store/constants';
 
+const noop = () => {};
+
 const {
 	clearSelectedBlock,
 	hideInsertionPoint,