@wordpress/block-editor 7.0.1 → 8.0.0

package/src/store/defaults.js

@@ -28,6 +28,7 @@ export const PREFERENCES_DEFAULTS = {
  * @property {boolean}       __experimentalBlockDirectory           Whether the user has enabled the Block Directory
  * @property {Array}         __experimentalBlockPatterns            Array of objects representing the block patterns
  * @property {Array}         __experimentalBlockPatternCategories   Array of objects representing the block pattern categories
+ * @property {boolean}       __unstableGalleryWithImageBlocks       Whether the user has enabled the refactored gallery block which uses InnerBlocks
  */
 export const SETTINGS_DEFAULTS = {
 	alignWide: false,
@@ -155,6 +156,7 @@ export const SETTINGS_DEFAULTS = {
 	__experimentalBlockPatterns: [],
 	__experimentalBlockPatternCategories: [],
 	__experimentalSpotlightEntityBlocks: [],
+	__unstableGalleryWithImageBlocks: false,
 
 	// gradients setting is not used anymore now defaults are passed from theme.json on the server and core has its own defaults.
 	// The setting is only kept for backward compatibility purposes.

package/src/store/defaults.native.js

@@ -6,10 +6,25 @@ import {
 	SETTINGS_DEFAULTS as SETTINGS,
 } from './defaults.js';
 
+const fontSizes = SETTINGS.fontSizes.map( ( fontSize ) => {
+	fontSize.sizePx = fontSize.size + 'px';
+	return fontSize;
+} );
+
 const SETTINGS_DEFAULTS = {
 	...SETTINGS,
+	fontSizes,
+	// FOR TESTING ONLY - Later, this will come from a REST API
+	// eslint-disable-next-line no-undef
+	__unstableGalleryWithImageBlocks: __DEV__,
 	alignWide: true,
 	supportsLayout: false,
+	__experimentalFeatures: {
+		color: {
+			text: true,
+			background: true,
+		},
+	},
 };
 
 export { PREFERENCES_DEFAULTS, SETTINGS_DEFAULTS };

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

@@ -13,7 +13,6 @@ import {
 	isEqual,
 	isEmpty,
 	identity,
-	difference,
 	omitBy,
 	pickBy,
 } from 'lodash';
@@ -215,150 +214,246 @@ export function isUpdatingSameBlockAttribute( action, lastAction ) {
 	);
 }
 
-/**
- * Utility returning an object with an empty object value for each key.
- *
- * @param {Array} objectKeys Keys to fill.
- * @return {Object} Object filled with empty object as values for each clientId.
- */
-const fillKeysWithEmptyObject = ( objectKeys ) => {
-	return objectKeys.reduce( ( result, key ) => {
-		result[ key ] = {};
-		return result;
-	}, {} );
-};
+function buildBlockTree( state, blocks ) {
+	const result = {};
+	const stack = [ ...blocks ];
+	const flattenedBlocks = [ ...blocks ];
+	while ( stack.length ) {
+		const block = stack.shift();
+		stack.push( ...block.innerBlocks );
+		flattenedBlocks.push( ...block.innerBlocks );
+	}
+	// Create objects before mutating them, that way it's always defined.
+	for ( const block of flattenedBlocks ) {
+		result[ block.clientId ] = {};
+	}
+	for ( const block of flattenedBlocks ) {
+		result[ block.clientId ] = Object.assign( result[ block.clientId ], {
+			...state.byClientId[ block.clientId ],
+			attributes: state.attributes[ block.clientId ],
+			innerBlocks: block.innerBlocks.map(
+				( subBlock ) => result[ subBlock.clientId ]
+			),
+		} );
+	}
+
+	return result;
+}
+
+function updateParentInnerBlocksInTree(
+	state,
+	tree,
+	updatedClientIds,
+	updateChildrenOfUpdatedClientIds = false
+) {
+	const uncontrolledParents = new Set( [] );
+	const controlledParents = new Set();
+	for ( const clientId of updatedClientIds ) {
+		let current = updateChildrenOfUpdatedClientIds
+			? clientId
+			: state.parents[ clientId ];
+		do {
+			if ( state.controlledInnerBlocks[ current ] ) {
+				// Should stop on controlled blocks.
+				// If we reach a controlled parent, break out of the loop.
+				controlledParents.add( current );
+				break;
+			} else {
+				// else continue traversing up through parents.
+				uncontrolledParents.add( current );
+				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 uncontrolledParents ) {
+		tree[ clientId ] = {
+			...tree[ clientId ],
+		};
+	}
+	for ( const clientId of uncontrolledParents ) {
+		tree[ clientId ].innerBlocks = ( state.order[ clientId ] || [] ).map(
+			( subClientId ) => tree[ subClientId ]
+		);
+	}
+
+	// Controlled parent blocks, need a dedicated key for their inner blocks
+	// to be used when doing getBlocks( controlledBlockClientId ).
+	for ( const clientId of controlledParents ) {
+		tree[ 'controlled||' + clientId ] = {
+			innerBlocks: ( state.order[ clientId ] || [] ).map(
+				( subClientId ) => tree[ subClientId ]
+			),
+		};
+	}
+
+	return tree;
+}
 
 /**
- * Higher-order reducer intended to compute a cache key for each block in the post.
- * A new instance of the cache key (empty object) is created each time the block object
- * needs to be refreshed (for any change in the block or its children).
+ * Higher-order reducer intended to compute full block objects key for each block in the post.
+ * This is a denormalization to optimize the performance of the getBlock selectors and avoid
+ * recomputing the block objects and avoid heavy memoization.
  *
  * @param {Function} reducer Original reducer function.
  *
  * @return {Function} Enhanced reducer function.
  */
-const withBlockCache = ( reducer ) => ( state = {}, action ) => {
+const withBlockTree = ( reducer ) => ( state = {}, action ) => {
 	const newState = reducer( state, action );
 
 	if ( newState === state ) {
 		return state;
 	}
-	newState.cache = state.cache ? state.cache : {};
-
-	/**
-	 * For each clientId provided, traverses up parents, adding the provided clientIds
-	 * and each parent's clientId to the returned array.
-	 *
-	 * When calling this function consider that it uses the old state, so any state
-	 * modifications made by the `reducer` will not be present.
-	 *
-	 * @param {Array} clientIds an Array of block clientIds.
-	 *
-	 * @return {Array} The provided clientIds and all of their parent clientIds.
-	 */
-	const getBlocksWithParentsClientIds = ( clientIds ) => {
-		return clientIds.reduce( ( result, clientId ) => {
-			let current = clientId;
-			do {
-				result.push( current );
-				current = state.parents[ current ];
-			} while ( current && ! state.controlledInnerBlocks[ current ] );
-			return result;
-		}, [] );
-	};
 
+	newState.tree = state.tree ? state.tree : {};
 	switch ( action.type ) {
-		case 'RESET_BLOCKS':
-			newState.cache = mapValues(
-				flattenBlocks( action.blocks ),
-				() => ( {} )
-			);
-			break;
 		case 'RECEIVE_BLOCKS':
 		case 'INSERT_BLOCKS': {
-			const updatedBlockUids = keys( flattenBlocks( action.blocks ) );
-			if (
-				action.rootClientId &&
-				! state.controlledInnerBlocks[ action.rootClientId ]
-			) {
-				updatedBlockUids.push( action.rootClientId );
-			}
-			newState.cache = {
-				...newState.cache,
-				...fillKeysWithEmptyObject(
-					getBlocksWithParentsClientIds( updatedBlockUids )
-				),
-			};
+			const subTree = buildBlockTree( newState, action.blocks );
+			newState.tree = updateParentInnerBlocksInTree(
+				newState,
+				{
+					...newState.tree,
+					...subTree,
+				},
+				action.rootClientId ? [ action.rootClientId ] : [ '' ],
+				true
+			);
 			break;
 		}
 		case 'UPDATE_BLOCK':
-			newState.cache = {
-				...newState.cache,
-				...fillKeysWithEmptyObject(
-					getBlocksWithParentsClientIds( [ action.clientId ] )
-				),
-			};
+			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':
-			newState.cache = {
-				...newState.cache,
-				...fillKeysWithEmptyObject(
-					getBlocksWithParentsClientIds( action.clientIds )
-				),
-			};
+		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 parentClientIds = fillKeysWithEmptyObject(
-				getBlocksWithParentsClientIds( action.replacedClientIds )
+		}
+		case 'REPLACE_BLOCKS_AUGMENTED_WITH_CHILDREN': {
+			const subTree = buildBlockTree( newState, action.blocks );
+			newState.tree = updateParentInnerBlocksInTree(
+				newState,
+				{
+					...omit(
+						newState.tree,
+						action.replacedClientIds.concat(
+							action.replacedClientIds.map(
+								( clientId ) => 'controlled||' + clientId
+							)
+						)
+					),
+					...subTree,
+				},
+				action.blocks.map( ( b ) => b.clientId ),
+				false
 			);
 
-			newState.cache = {
-				...omit( newState.cache, action.replacedClientIds ),
-				...omit( parentClientIds, action.replacedClientIds ),
-				...fillKeysWithEmptyObject(
-					keys( flattenBlocks( action.blocks ) )
-				),
-			};
+			// 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':
-			newState.cache = {
-				...omit( newState.cache, action.removedClientIds ),
-				...fillKeysWithEmptyObject(
-					difference(
-						getBlocksWithParentsClientIds( action.clientIds ),
-						action.clientIds
+			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.removedClientIds.concat(
+						action.removedClientIds.map(
+							( clientId ) => 'controlled||' + clientId
+						)
 					)
 				),
-			};
+				parentsOfRemovedBlocks,
+				true
+			);
 			break;
 		case 'MOVE_BLOCKS_TO_POSITION': {
-			const updatedBlockUids = [ ...action.clientIds ];
+			const updatedBlockUids = [];
 			if ( action.fromRootClientId ) {
 				updatedBlockUids.push( action.fromRootClientId );
 			}
 			if ( action.toRootClientId ) {
 				updatedBlockUids.push( action.toRootClientId );
 			}
-			newState.cache = {
-				...newState.cache,
-				...fillKeysWithEmptyObject(
-					getBlocksWithParentsClientIds( updatedBlockUids )
-				),
-			};
+			if ( ! action.fromRootClientId || ! action.fromRootClientId ) {
+				updatedBlockUids.push( '' );
+			}
+			newState.tree = updateParentInnerBlocksInTree(
+				newState,
+				newState.tree,
+				updatedBlockUids,
+				true
+			);
 			break;
 		}
 		case 'MOVE_BLOCKS_UP':
 		case 'MOVE_BLOCKS_DOWN': {
-			const updatedBlockUids = [];
-			if ( action.rootClientId ) {
-				updatedBlockUids.push( action.rootClientId );
-			}
-			newState.cache = {
-				...newState.cache,
-				...fillKeysWithEmptyObject(
-					getBlocksWithParentsClientIds( updatedBlockUids )
-				),
-			};
+			const updatedBlockUids = [
+				action.rootClientId ? action.rootClientId : '',
+			];
+			newState.tree = updateParentInnerBlocksInTree(
+				newState,
+				newState.tree,
+				updatedBlockUids,
+				true
+			);
 			break;
 		}
 		case 'SAVE_REUSABLE_BLOCK_SUCCESS': {
@@ -371,12 +466,22 @@ const withBlockCache = ( reducer ) => ( state = {}, action ) => {
 				} )
 			);
 
-			newState.cache = {
-				...newState.cache,
-				...fillKeysWithEmptyObject(
-					getBlocksWithParentsClientIds( updatedBlockUids )
-				),
-			};
+			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
+			);
 		}
 	}
 
@@ -531,21 +636,21 @@ const withInnerBlocksRemoveCascade = ( reducer ) => ( state, action ) => {
  * @return {Function} Enhanced reducer function.
  */
 const withBlockReset = ( reducer ) => ( state, action ) => {
-	if ( state && action.type === 'RESET_BLOCKS' ) {
+	if ( action.type === 'RESET_BLOCKS' ) {
 		/**
 		 * A list of client IDs associated with the top level entity (like a
 		 * post or template). It excludes the client IDs of blocks associated
 		 * with other entities, like inner block controllers or reusable blocks.
 		 */
 		const visibleClientIds = getNestedBlockClientIds(
-			state.order,
+			state?.order ?? {},
 			'',
-			state.controlledInnerBlocks
+			state?.controlledInnerBlocks ?? {}
 		);
 
 		// pickBy returns only the truthy values from controlledInnerBlocks
 		const controlledInnerBlocks = Object.keys(
-			pickBy( state.controlledInnerBlocks )
+			pickBy( state?.controlledInnerBlocks ?? {} )
 		);
 
 		/**
@@ -569,35 +674,43 @@ const withBlockReset = ( reducer ) => ( state, action ) => {
 		 *    new value was used, template parts would disappear from the editor
 		 *    whenever you try to undo a change in the top level entity.
 		 */
-		return {
+		const newState = {
 			...state,
 			byClientId: {
-				...omit( state.byClientId, visibleClientIds ),
+				...omit( state?.byClientId, visibleClientIds ),
 				...getFlattenedBlocksWithoutAttributes( action.blocks ),
 			},
 			attributes: {
-				...omit( state.attributes, visibleClientIds ),
+				...omit( state?.attributes, visibleClientIds ),
 				...getFlattenedBlockAttributes( action.blocks ),
 			},
 			order: {
-				...omit( state.order, visibleClientIds ),
+				...omit( state?.order, visibleClientIds ),
 				...omit(
 					mapBlockOrder( action.blocks ),
 					controlledInnerBlocks
 				),
 			},
 			parents: {
-				...omit( state.parents, visibleClientIds ),
+				...omit( state?.parents, visibleClientIds ),
 				...mapBlockParents( action.blocks ),
 			},
-			cache: {
-				...omit( state.cache, visibleClientIds ),
-				...omit(
-					mapValues( flattenBlocks( action.blocks ), () => ( {} ) ),
-					controlledInnerBlocks
+			controlledInnerBlocks: state?.controlledInnerBlocks || {},
+		};
+
+		const subTree = buildBlockTree( newState, action.blocks );
+		newState.tree = {
+			...omit( state?.tree, visibleClientIds ),
+			...subTree,
+			// Root
+			'': {
+				innerBlocks: action.blocks.map(
+					( subBlock ) => subTree[ subBlock.clientId ]
 				),
 			},
 		};
+
+		return newState;
 	}
 
 	return reducer( state, action );
@@ -727,7 +840,7 @@ const withSaveReusableBlock = ( reducer ) => ( state, action ) => {
 export const blocks = flow(
 	combineReducers,
 	withSaveReusableBlock, // needs to be before withBlockCache
-	withBlockCache, // needs to be before withInnerBlocksRemoveCascade
+	withBlockTree, // needs to be before withInnerBlocksRemoveCascade
 	withInnerBlocksRemoveCascade,
 	withReplaceInnerBlocks, // needs to be after withInnerBlocksRemoveCascade
 	withBlockReset,
@@ -736,9 +849,6 @@ export const blocks = flow(
 )( {
 	byClientId( state = {}, action ) {
 		switch ( action.type ) {
-			case 'RESET_BLOCKS':
-				return getFlattenedBlocksWithoutAttributes( action.blocks );
-
 			case 'RECEIVE_BLOCKS':
 			case 'INSERT_BLOCKS':
 				return {
@@ -785,9 +895,6 @@ export const blocks = flow(
 
 	attributes( state = {}, action ) {
 		switch ( action.type ) {
-			case 'RESET_BLOCKS':
-				return getFlattenedBlockAttributes( action.blocks );
-
 			case 'RECEIVE_BLOCKS':
 			case 'INSERT_BLOCKS':
 				return {
@@ -873,15 +980,14 @@ export const blocks = flow(
 
 	order( state = {}, action ) {
 		switch ( action.type ) {
-			case 'RESET_BLOCKS':
-				return mapBlockOrder( action.blocks );
-
-			case 'RECEIVE_BLOCKS':
+			case 'RECEIVE_BLOCKS': {
+				const blockOrder = mapBlockOrder( action.blocks );
 				return {
 					...state,
-					...omit( mapBlockOrder( action.blocks ), '' ),
+					...omit( blockOrder, '' ),
+					'': ( state?.[ '' ] || [] ).concat( blockOrder[ '' ] ),
 				};
-
+			}
 			case 'INSERT_BLOCKS': {
 				const { rootClientId = '' } = action;
 				const subState = state[ rootClientId ] || [];
@@ -1049,9 +1155,6 @@ export const blocks = flow(
 	// an optimization for the selectors which derive the ancestry of a block.
 	parents( state = {}, action ) {
 		switch ( action.type ) {
-			case 'RESET_BLOCKS':
-				return mapBlockParents( action.blocks );
-
 			case 'RECEIVE_BLOCKS':
 				return {
 					...state,
@@ -1214,9 +1317,9 @@ function selectionHelper( state = {}, action ) {
 				return state;
 			}
 
-			const indexToSelect =
-				action.indexToSelect || action.blocks.length - 1;
-			const blockToSelect = action.blocks[ indexToSelect ];
+			const blockToSelect =
+				action.blocks[ action.indexToSelect ] ||
+				action.blocks[ action.blocks.length - 1 ];
 
 			if ( ! blockToSelect ) {
 				return {};