@wordpress/block-editor 7.0.2 → 8.0.1

package/src/store/defaults.native.js

@@ -6,13 +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

@@ -240,36 +240,45 @@ 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 ]
 		);
 	}
+
 	// Controlled parent blocks, need a dedicated key for their inner blocks
 	// to be used when doing getBlocks( controlledBlockClientId ).
 	for ( const clientId of controlledParents ) {
@@ -310,7 +319,8 @@ const withBlockTree = ( reducer ) => ( state = {}, action ) => {
 					...newState.tree,
 					...subTree,
 				},
-				action.rootClientId ? [ action.rootClientId ] : [ '' ]
+				action.rootClientId ? [ action.rootClientId ] : [ '' ],
+				true
 			);
 			break;
 		}
@@ -320,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': {
@@ -344,7 +356,8 @@ const withBlockTree = ( reducer ) => ( state = {}, action ) => {
 					...newState.tree,
 					...newSubTree,
 				},
-				action.clientIds
+				action.clientIds,
+				false
 			);
 			break;
 		}
@@ -363,7 +376,26 @@ 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.
+			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;
 		}
@@ -388,7 +420,8 @@ const withBlockTree = ( reducer ) => ( state = {}, action ) => {
 						)
 					)
 				),
-				parentsOfRemovedBlocks
+				parentsOfRemovedBlocks,
+				true
 			);
 			break;
 		case 'MOVE_BLOCKS_TO_POSITION': {
@@ -405,7 +438,8 @@ const withBlockTree = ( reducer ) => ( state = {}, action ) => {
 			newState.tree = updateParentInnerBlocksInTree(
 				newState,
 				newState.tree,
-				updatedBlockUids
+				updatedBlockUids,
+				true
 			);
 			break;
 		}
@@ -417,7 +451,8 @@ const withBlockTree = ( reducer ) => ( state = {}, action ) => {
 			newState.tree = updateParentInnerBlocksInTree(
 				newState,
 				newState.tree,
-				updatedBlockUids
+				updatedBlockUids,
+				true
 			);
 			break;
 		}
@@ -444,7 +479,8 @@ const withBlockTree = ( reducer ) => ( state = {}, action ) => {
 						return result;
 					}, {} ),
 				},
-				updatedBlockUids
+				updatedBlockUids,
+				false
 			);
 		}
 	}
@@ -949,7 +985,7 @@ export const blocks = flow(
 				return {
 					...state,
 					...omit( blockOrder, '' ),
-					'': ( state?.[ '' ] || [] ).concat( blockOrder ),
+					'': ( state?.[ '' ] || [] ).concat( blockOrder[ '' ] ),
 				};
 			}
 			case 'INSERT_BLOCKS': {

package/src/store/selectors.js

@@ -24,6 +24,7 @@ import createSelector from 'rememo';
 import {
 	getBlockType,
 	getBlockTypes,
+	getBlockVariations,
 	hasBlockSupport,
 	getPossibleBlockTransformations,
 	parse,
@@ -636,6 +637,7 @@ export function getNextBlockClientId( state, startClientId ) {
 	return getAdjacentBlockClientId( state, startClientId, 1 );
 }
 
+/* eslint-disable jsdoc/valid-types */
 /**
  * Returns the initial caret position for the selected block.
  * This position is to used to position the caret properly when the selected block changes.
@@ -646,6 +648,7 @@ export function getNextBlockClientId( state, startClientId ) {
  * @return {0|-1|null} Initial position.
  */
 export function getSelectedBlocksInitialCaretPosition( state ) {
+	/* eslint-enable jsdoc/valid-types */
 	return state.initialPosition;
 }
 
@@ -1302,6 +1305,90 @@ export function canInsertBlocks( state, clientIds, rootClientId = null ) {
 	);
 }
 
+/**
+ * Determines if the given block is allowed to be deleted.
+ *
+ * @param {Object}  state        Editor state.
+ * @param {string}  clientId     The block client Id.
+ * @param {?string} rootClientId Optional root client ID of block list.
+ *
+ * @return {boolean} Whether the given block is allowed to be removed.
+ */
+export function canRemoveBlock( state, clientId, rootClientId = null ) {
+	const attributes = getBlockAttributes( state, clientId );
+
+	// attributes can be null if the block is already deleted.
+	if ( attributes === null ) {
+		return true;
+	}
+
+	const { lock } = attributes;
+	const parentIsLocked = !! getTemplateLock( state, rootClientId );
+	// If we don't have a lock on the blockType level, we differ to the parent templateLock.
+	if ( lock === undefined || lock?.remove === undefined ) {
+		return ! parentIsLocked;
+	}
+
+	// when remove is true, it means we cannot remove it.
+	return ! lock?.remove;
+}
+
+/**
+ * Determines if the given blocks are allowed to be removed.
+ *
+ * @param {Object}  state        Editor state.
+ * @param {string}  clientIds    The block client IDs to be removed.
+ * @param {?string} rootClientId Optional root client ID of block list.
+ *
+ * @return {boolean} Whether the given blocks are allowed to be removed.
+ */
+export function canRemoveBlocks( state, clientIds, rootClientId = null ) {
+	return clientIds.every( ( clientId ) =>
+		canRemoveBlock( state, clientId, rootClientId )
+	);
+}
+
+/**
+ * Determines if the given block is allowed to be moved.
+ *
+ * @param {Object}  state        Editor state.
+ * @param {string}  clientId     The block client Id.
+ * @param {?string} rootClientId Optional root client ID of block list.
+ *
+ * @return {boolean} Whether the given block is allowed to be moved.
+ */
+export function canMoveBlock( state, clientId, rootClientId = null ) {
+	const attributes = getBlockAttributes( state, clientId );
+	if ( attributes === null ) {
+		return;
+	}
+
+	const { lock } = attributes;
+	const parentIsLocked = getTemplateLock( state, rootClientId ) === 'all';
+	// If we don't have a lock on the blockType level, we differ to the parent templateLock.
+	if ( lock === undefined || lock?.move === undefined ) {
+		return ! parentIsLocked;
+	}
+
+	// when move is true, it means we cannot move it.
+	return ! lock?.move;
+}
+
+/**
+ * Determines if the given blocks are allowed to be moved.
+ *
+ * @param {Object}  state        Editor state.
+ * @param {string}  clientIds    The block client IDs to be moved.
+ * @param {?string} rootClientId Optional root client ID of block list.
+ *
+ * @return {boolean} Whether the given blocks are allowed to be moved.
+ */
+export function canMoveBlocks( state, clientIds, rootClientId = null ) {
+	return clientIds.every( ( clientId ) =>
+		canMoveBlock( state, clientId, rootClientId )
+	);
+}
+
 /**
  * Returns information about how recently and frequently a block has been inserted.
  *
@@ -1428,9 +1515,7 @@ const buildBlockTypeItem = ( state, { buildScope = 'inserter' } ) => (
 	};
 	if ( buildScope === 'transform' ) return blockItemBase;
 
-	const inserterVariations = blockType.variations.filter(
-		( { scope } ) => ! scope || scope.includes( 'inserter' )
-	);
+	const inserterVariations = getBlockVariations( blockType.name, 'inserter' );
 	return {
 		...blockItemBase,
 		initialAttributes: {},
@@ -1478,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 );
 
@@ -1500,7 +1620,7 @@ export const getInserterItems = createSelector(
 				name: 'core/block',
 				initialAttributes: { ref: reusableBlock.id },
 				title: reusableBlock.title.raw,
-				icon: referencedBlockType ? referencedBlockType.icon : symbol,
+				icon,
 				category: 'reusable',
 				keywords: [],
 				isDisabled: false,
@@ -1703,6 +1823,39 @@ export const __experimentalGetAllowedBlocks = createSelector(
 	]
 );
 
+/**
+ * Returns the block to be directly inserted by the block appender.
+ *
+ * @param {Object}  state        Editor state.
+ * @param {?string} rootClientId Optional root client ID of block list.
+ *
+ * @return {?Array} The block type to be directly inserted.
+ */
+export const __experimentalGetDirectInsertBlock = createSelector(
+	( state, rootClientId = null ) => {
+		if ( ! rootClientId ) {
+			return;
+		}
+		const defaultBlock =
+			state.blockListSettings[ rootClientId ]?.__experimentalDefaultBlock;
+		const directInsert =
+			state.blockListSettings[ rootClientId ]?.__experimentalDirectInsert;
+		if ( ! defaultBlock || ! directInsert ) {
+			return;
+		}
+		if ( typeof directInsert === 'function' ) {
+			return directInsert( getBlock( state, rootClientId ) )
+				? defaultBlock
+				: null;
+		}
+		return defaultBlock;
+	},
+	( state, rootClientId ) => [
+		state.blockListSettings[ rootClientId ],
+		state.blocks.tree[ rootClientId ],
+	]
+);
+
 const checkAllowListRecursive = ( blocks, allowedBlockTypes ) => {
 	if ( isBoolean( allowedBlockTypes ) ) {
 		return allowedBlockTypes;
@@ -1748,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 )
 		);
@@ -1951,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
  *