@wordpress/block-editor 12.15.0 → 12.16.0

package/src/hooks/utils.js

@@ -2,17 +2,28 @@
  * WordPress dependencies
  */
 import { getBlockSupport } from '@wordpress/blocks';
-import { useMemo, useEffect, useId } from '@wordpress/element';
+import { useMemo, useEffect, useId, useState } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
+import { createHigherOrderComponent, pure } from '@wordpress/compose';
+import { addFilter } from '@wordpress/hooks';
 
 /**
  * Internal dependencies
  */
+import {
+	useBlockEditContext,
+	mayDisplayControlsKey,
+	mayDisplayParentControlsKey,
+} from '../components/block-edit/context';
 import { useSettings } from '../components';
 import { useSettingsForBlockElement } from '../components/global-styles/hooks';
 import { getValueFromObjectPath, setImmutably } from '../utils/object';
 import { store as blockEditorStore } from '../store';
 import { unlock } from '../lock-unlock';
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
 
 /**
  * Removed falsy values from nested object.
@@ -101,14 +112,18 @@ export function transformStyles(
  * Check whether serialization of specific block support feature or set should
  * be skipped.
  *
- * @param {string|Object} blockType  Block name or block type object.
- * @param {string}        featureSet Name of block support feature set.
- * @param {string}        feature    Name of the individual feature to check.
+ * @param {string|Object} blockNameOrType Block name or block type object.
+ * @param {string}        featureSet      Name of block support feature set.
+ * @param {string}        feature         Name of the individual feature to check.
  *
  * @return {boolean} Whether serialization should occur.
  */
-export function shouldSkipSerialization( blockType, featureSet, feature ) {
-	const support = getBlockSupport( blockType, featureSet );
+export function shouldSkipSerialization(
+	blockNameOrType,
+	featureSet,
+	feature
+) {
+	const support = getBlockSupport( blockNameOrType, featureSet );
 	const skipSerialization = support?.__experimentalSkipSerialization;
 
 	if ( Array.isArray( skipSerialization ) ) {
@@ -362,3 +377,169 @@ export function useBlockSettings( name, parentLayout ) {
 
 	return useSettingsForBlockElement( rawSettings, name );
 }
+
+export function createBlockEditFilter( features ) {
+	// We don't want block controls to re-render when typing inside a block.
+	// `pure` will prevent re-renders unless props change, so only pass the
+	// needed props and not the whole attributes object.
+	features = features.map( ( settings ) => {
+		return { ...settings, Edit: pure( settings.edit ) };
+	} );
+	const withBlockEditHooks = createHigherOrderComponent(
+		( OriginalBlockEdit ) => ( props ) => {
+			const context = useBlockEditContext();
+			// CAUTION: code added before this line will be executed for all
+			// blocks, not just those that support the feature! Code added
+			// above this line should be carefully evaluated for its impact on
+			// performance.
+			return [
+				...features.map( ( feature, i ) => {
+					const {
+						Edit,
+						hasSupport,
+						attributeKeys = [],
+						shareWithChildBlocks,
+					} = feature;
+					const shouldDisplayControls =
+						context[ mayDisplayControlsKey ] ||
+						( context[ mayDisplayParentControlsKey ] &&
+							shareWithChildBlocks );
+
+					if (
+						! shouldDisplayControls ||
+						! hasSupport( props.name )
+					) {
+						return null;
+					}
+
+					const neededProps = {};
+					for ( const key of attributeKeys ) {
+						if ( props.attributes[ key ] ) {
+							neededProps[ key ] = props.attributes[ key ];
+						}
+					}
+					return (
+						<Edit
+							// We can use the index because the array length
+							// is fixed per page load right now.
+							key={ i }
+							name={ props.name }
+							clientId={ props.clientId }
+							setAttributes={ props.setAttributes }
+							__unstableParentLayout={
+								props.__unstableParentLayout
+							}
+							// This component is pure, so only pass needed
+							// props!!!
+							{ ...neededProps }
+						/>
+					);
+				} ),
+				<OriginalBlockEdit key="edit" { ...props } />,
+			];
+		},
+		'withBlockEditHooks'
+	);
+	addFilter( 'editor.BlockEdit', 'core/editor/hooks', withBlockEditHooks );
+}
+
+function BlockProps( { index, useBlockProps, setAllWrapperProps, ...props } ) {
+	const wrapperProps = useBlockProps( props );
+	const setWrapperProps = ( next ) =>
+		setAllWrapperProps( ( prev ) => {
+			const nextAll = [ ...prev ];
+			nextAll[ index ] = next;
+			return nextAll;
+		} );
+	// Setting state after every render is fine because this component is
+	// pure and will only re-render when needed props change.
+	useEffect( () => {
+		// We could shallow compare the props, but since this component only
+		// changes when needed attributes change, the benefit is probably small.
+		setWrapperProps( wrapperProps );
+		return () => {
+			setWrapperProps( undefined );
+		};
+	} );
+	return null;
+}
+
+const BlockPropsPure = pure( BlockProps );
+
+export function createBlockListBlockFilter( features ) {
+	const withBlockListBlockHooks = createHigherOrderComponent(
+		( BlockListBlock ) => ( props ) => {
+			const [ allWrapperProps, setAllWrapperProps ] = useState(
+				Array( features.length ).fill( undefined )
+			);
+			return [
+				...features.map( ( feature, i ) => {
+					const {
+						hasSupport,
+						attributeKeys = [],
+						useBlockProps,
+					} = feature;
+
+					const neededProps = {};
+					for ( const key of attributeKeys ) {
+						if ( props.attributes[ key ] ) {
+							neededProps[ key ] = props.attributes[ key ];
+						}
+					}
+
+					if (
+						! hasSupport( props.name ) ||
+						// Skip rendering if none of the needed attributes are
+						// set.
+						! Object.keys( neededProps ).length
+					) {
+						return null;
+					}
+
+					return (
+						<BlockPropsPure
+							// We can use the index because the array length
+							// is fixed per page load right now.
+							key={ i }
+							index={ i }
+							useBlockProps={ useBlockProps }
+							// This component is pure, so we must pass a stable
+							// function reference.
+							setAllWrapperProps={ setAllWrapperProps }
+							name={ props.name }
+							// This component is pure, so only pass needed
+							// props!!!
+							{ ...neededProps }
+						/>
+					);
+				} ),
+				<BlockListBlock
+					key="edit"
+					{ ...props }
+					wrapperProps={ allWrapperProps
+						.filter( Boolean )
+						.reduce( ( acc, wrapperProps ) => {
+							return {
+								...acc,
+								...wrapperProps,
+								className: classnames(
+									acc.className,
+									wrapperProps.className
+								),
+								style: {
+									...acc.style,
+									...wrapperProps.style,
+								},
+							};
+						}, props.wrapperProps || {} ) }
+				/>,
+			];
+		},
+		'withBlockListBlockHooks'
+	);
+	addFilter(
+		'editor.BlockListBlock',
+		'core/editor/hooks',
+		withBlockListBlockHooks
+	);
+}

package/src/private-apis.js

@@ -10,7 +10,6 @@ import ResizableBoxPopover from './components/resizable-box-popover';
 import { ComposedPrivateInserter as PrivateInserter } from './components/inserter';
 import { PrivateListView } from './components/list-view';
 import BlockInfo from './components/block-info-slot-fill';
-import BlockContextualToolbar from './components/block-tools/block-contextual-toolbar';
 import { useShouldContextualToolbarShow } from './utils/use-should-contextual-toolbar-show';
 import { cleanEmptyObject, useStyleOverride } from './hooks/utils';
 import BlockQuickNavigation from './components/block-quick-navigation';
@@ -42,7 +41,6 @@ lock( privateApis, {
 	PrivateListView,
 	ResizableBoxPopover,
 	BlockInfo,
-	BlockContextualToolbar,
 	useShouldContextualToolbarShow,
 	cleanEmptyObject,
 	useStyleOverride,

package/src/store/private-actions.js

@@ -290,3 +290,11 @@ export function deleteStyleOverride( id ) {
 		id,
 	};
 }
+
+export function syncDerivedBlockAttributes( clientId, attributes ) {
+	return {
+		type: 'SYNC_DERIVED_BLOCK_ATTRIBUTES',
+		clientIds: [ clientId ],
+		attributes,
+	};
+}

package/src/store/private-selectors.js

@@ -10,7 +10,12 @@ import {
 	getBlockOrder,
 	getBlockParents,
 	getBlockEditingMode,
+	getSettings,
+	__experimentalGetParsedPattern,
+	canInsertBlockType,
+	__experimentalGetAllowedPatterns,
 } from './selectors';
+import { getUserPatterns, checkAllowListRecursive } from './utils';
 
 /**
  * Returns true if the block interface is hidden, or false otherwise.
@@ -236,3 +241,43 @@ export const getInserterMediaCategories = createSelector(
 		state.registeredInserterMediaCategories,
 	]
 );
+
+/**
+ * Returns whether there is at least one allowed pattern for inner blocks children.
+ * This is useful for deferring the parsing of all patterns until needed.
+ *
+ * @param {Object} state               Editor state.
+ * @param {string} [rootClientId=null] Target root client ID.
+ *
+ * @return {boolean} If there is at least one allowed pattern.
+ */
+export const hasAllowedPatterns = createSelector(
+	( state, rootClientId = null ) => {
+		const patterns = state.settings.__experimentalBlockPatterns;
+		const userPatterns = getUserPatterns( state );
+		const { allowedBlockTypes } = getSettings( state );
+		return [ ...userPatterns, ...patterns ].some(
+			( { name, inserter = true } ) => {
+				if ( ! inserter ) {
+					return false;
+				}
+				const { blocks } = __experimentalGetParsedPattern(
+					state,
+					name
+				);
+				return (
+					checkAllowListRecursive( blocks, allowedBlockTypes ) &&
+					blocks.every( ( { name: blockName } ) =>
+						canInsertBlockType( state, blockName, rootClientId )
+					)
+				);
+			}
+		);
+	},
+	( state, rootClientId ) => [
+		...__experimentalGetAllowedPatterns.getDependants(
+			state,
+			rootClientId
+		),
+	]
+);

package/src/store/reducer.js

@@ -283,6 +283,7 @@ const withBlockTree =
 					false
 				);
 				break;
+			case 'SYNC_DERIVED_BLOCK_ATTRIBUTES':
 			case 'UPDATE_BLOCK_ATTRIBUTES': {
 				newState.tree = new Map( newState.tree );
 				action.clientIds.forEach( ( clientId ) => {
@@ -456,6 +457,12 @@ function withPersistentBlockChange( reducer ) {
 	return ( state, action ) => {
 		let nextState = reducer( state, action );
 
+		if ( action.type === 'SYNC_DERIVED_BLOCK_ATTRIBUTES' ) {
+			return nextState.isPersistentChange
+				? { ...nextState, isPersistentChange: false }
+				: nextState;
+		}
+
 		const isExplicitPersistentChange =
 			action.type === 'MARK_LAST_CHANGE_AS_PERSISTENT' ||
 			markNextChangeAsNotPersistent;
@@ -860,6 +867,7 @@ export const blocks = pipe(
 				return newState;
 			}
 
+			case 'SYNC_DERIVED_BLOCK_ATTRIBUTES':
 			case 'UPDATE_BLOCK_ATTRIBUTES': {
 				// Avoid a state change if none of the block IDs are known.
 				if ( action.clientIds.every( ( id ) => ! state.get( id ) ) ) {

package/src/store/selectors.js

@@ -26,8 +26,12 @@ import { createRegistrySelector } from '@wordpress/data';
 /**
  * Internal dependencies
  */
+import {
+	getUserPatterns,
+	checkAllowListRecursive,
+	checkAllowList,
+} from './utils';
 import { orderBy } from '../utils/sorting';
-import { PATTERN_TYPES } from '../components/inserter/block-patterns-tab/utils';
 
 /**
  * A block selection object.
@@ -1481,22 +1485,6 @@ export function getTemplateLock( state, rootClientId ) {
 	return getBlockListSettings( state, rootClientId )?.templateLock ?? false;
 }
 
-const checkAllowList = ( list, item, defaultResult = null ) => {
-	if ( typeof list === 'boolean' ) {
-		return 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 )
-		if ( list.includes( 'core/post-content' ) && item === null ) {
-			return true;
-		}
-		return list.includes( item );
-	}
-	return defaultResult;
-};
-
 /**
  * Determines if the given block type is allowed to be inserted into the block list.
  * This function is not exported and not memoized because using a memoized selector
@@ -2249,58 +2237,6 @@ export const __experimentalGetDirectInsertBlock = createSelector(
 	]
 );
 
-const checkAllowListRecursive = ( blocks, allowedBlockTypes ) => {
-	if ( typeof allowedBlockTypes === 'boolean' ) {
-		return allowedBlockTypes;
-	}
-
-	const blocksQueue = [ ...blocks ];
-	while ( blocksQueue.length > 0 ) {
-		const block = blocksQueue.shift();
-
-		const isAllowed = checkAllowList(
-			allowedBlockTypes,
-			block.name || block.blockName,
-			true
-		);
-		if ( ! isAllowed ) {
-			return false;
-		}
-
-		block.innerBlocks?.forEach( ( innerBlock ) => {
-			blocksQueue.push( innerBlock );
-		} );
-	}
-
-	return true;
-};
-
-function getUserPatterns( state ) {
-	const userPatterns =
-		state?.settings?.__experimentalReusableBlocks ?? EMPTY_ARRAY;
-	const userPatternCategories =
-		state?.settings?.__experimentalUserPatternCategories ?? [];
-	const categories = new Map();
-	userPatternCategories.forEach( ( userCategory ) =>
-		categories.set( userCategory.id, userCategory )
-	);
-	return userPatterns.map( ( userPattern ) => {
-		return {
-			name: `core/block/${ userPattern.id }`,
-			id: userPattern.id,
-			type: PATTERN_TYPES.user,
-			title: userPattern.title.raw,
-			categories: userPattern.wp_pattern_category.map( ( catId ) =>
-				categories && categories.get( catId )
-					? categories.get( catId ).slug
-					: catId
-			),
-			content: userPattern.content.raw,
-			syncStatus: userPattern.wp_pattern_sync_status,
-		};
-	} );
-}
-
 export const __experimentalUserPatternCategories = createSelector(
 	( state ) => {
 		return state?.settings?.__experimentalUserPatternCategories;

package/src/store/utils.js

@@ -0,0 +1,74 @@
+/**
+ * Internal dependencies
+ */
+import { PATTERN_TYPES } from '../components/inserter/block-patterns-tab/utils';
+
+const EMPTY_ARRAY = [];
+
+export function getUserPatterns( state ) {
+	const userPatterns =
+		state?.settings?.__experimentalReusableBlocks ?? EMPTY_ARRAY;
+	const userPatternCategories =
+		state?.settings?.__experimentalUserPatternCategories ?? [];
+	const categories = new Map();
+	userPatternCategories.forEach( ( userCategory ) =>
+		categories.set( userCategory.id, userCategory )
+	);
+	return userPatterns.map( ( userPattern ) => {
+		return {
+			name: `core/block/${ userPattern.id }`,
+			id: userPattern.id,
+			type: PATTERN_TYPES.user,
+			title: userPattern.title.raw,
+			categories: userPattern.wp_pattern_category.map( ( catId ) =>
+				categories && categories.get( catId )
+					? categories.get( catId ).slug
+					: catId
+			),
+			content: userPattern.content.raw,
+			syncStatus: userPattern.wp_pattern_sync_status,
+		};
+	} );
+}
+
+export const checkAllowList = ( list, item, defaultResult = null ) => {
+	if ( typeof list === 'boolean' ) {
+		return 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 )
+		if ( list.includes( 'core/post-content' ) && item === null ) {
+			return true;
+		}
+		return list.includes( item );
+	}
+	return defaultResult;
+};
+
+export const checkAllowListRecursive = ( blocks, allowedBlockTypes ) => {
+	if ( typeof allowedBlockTypes === 'boolean' ) {
+		return allowedBlockTypes;
+	}
+
+	const blocksQueue = [ ...blocks ];
+	while ( blocksQueue.length > 0 ) {
+		const block = blocksQueue.shift();
+
+		const isAllowed = checkAllowList(
+			allowedBlockTypes,
+			block.name || block.blockName,
+			true
+		);
+		if ( ! isAllowed ) {
+			return false;
+		}
+
+		block.innerBlocks?.forEach( ( innerBlock ) => {
+			blocksQueue.push( innerBlock );
+		} );
+	}
+
+	return true;
+};

package/src/style.scss

@@ -10,7 +10,6 @@
 @import "./components/block-draggable/style.scss";
 @import "./components/block-mover/style.scss";
 @import "./components/block-navigation/style.scss";
-@import "./components/block-parent-selector/style.scss";
 @import "./components/block-patterns-list/style.scss";
 @import "./components/block-patterns-paging/style.scss";
 @import "./components/block-popover/style.scss";
@@ -60,7 +59,6 @@
 
 @import "./components/block-toolbar/style.scss";
 @import "./components/inserter/style.scss";
-@import "./components/preview-options/style.scss";
 @import "./components/spacing-sizes-control/style.scss";
 
 @include wordpress-admin-schemes();

package/src/utils/object.js

@@ -2,28 +2,6 @@
  * External dependencies
  */
 import { paramCase } from 'change-case';
-import memoize from 'memize';
-
-/**
- * Converts a path to an array of its fragments.
- * Supports strings, numbers and arrays:
- *
- * 'foo' => [ 'foo' ]
- * 2 => [ '2' ]
- * [ 'foo', 'bar' ] => [ 'foo', 'bar' ]
- *
- * @param {string|number|Array} path Path
- * @return {Array} Normalized path.
- */
-function normalizePath( path ) {
-	if ( Array.isArray( path ) ) {
-		return path;
-	} else if ( typeof path === 'number' ) {
-		return [ path.toString() ];
-	}
-
-	return [ path ];
-}
 
 /**
  * Converts any string to kebab case.
@@ -55,33 +33,6 @@ export function kebabCase( str ) {
 	} );
 }
 
-/**
- * Clones an object.
- * Arrays are also cloned as arrays.
- * Non-object values are returned unchanged.
- *
- * @param {*} object Object to clone.
- * @return {*} Cloned object, or original literal non-object value.
- */
-function cloneObject( object ) {
-	if ( Array.isArray( object ) ) {
-		return object.map( cloneObject );
-	}
-
-	if ( object && typeof object === 'object' ) {
-		return {
-			...Object.fromEntries(
-				Object.entries( object ).map( ( [ key, value ] ) => [
-					key,
-					cloneObject( value ),
-				] )
-			),
-		};
-	}
-
-	return object;
-}
-
 /**
  * Immutably sets a value inside an object. Like `lodash#set`, but returning a
  * new object. Treats nullish initial values as empty objects. Clones any
@@ -93,27 +44,25 @@ function cloneObject( object ) {
  * @return {Object} Cloned object with the new value set.
  */
 export function setImmutably( object, path, value ) {
-	const normalizedPath = normalizePath( path );
-	const newObject = object ? cloneObject( object ) : {};
+	// Normalize path
+	path = Array.isArray( path ) ? [ ...path ] : [ path ];
 
-	normalizedPath.reduce( ( acc, key, i ) => {
-		if ( acc[ key ] === undefined ) {
-			if ( Number.isInteger( path[ i + 1 ] ) ) {
-				acc[ key ] = [];
-			} else {
-				acc[ key ] = {};
-			}
-		}
-		if ( i === normalizedPath.length - 1 ) {
-			acc[ key ] = value;
-		}
-		return acc[ key ];
-	}, newObject );
+	// Shallowly clone the base of the object
+	object = Array.isArray( object ) ? [ ...object ] : { ...object };
 
-	return newObject;
-}
+	const leaf = path.pop();
+
+	// Traverse object from root to leaf, shallowly cloning at each level
+	let prev = object;
+	for ( const key of path ) {
+		const lvl = prev[ key ];
+		prev = prev[ key ] = Array.isArray( lvl ) ? [ ...lvl ] : { ...lvl };
+	}
 
-const stringToPath = memoize( ( path ) => path.split( '.' ) );
+	prev[ leaf ] = value;
+
+	return object;
+}
 
 /**
  * Helper util to return a value from a certain path of the object.
@@ -128,9 +77,9 @@ const stringToPath = memoize( ( path ) => path.split( '.' ) );
  * @return {*} Value of the object property at the specified path.
  */
 export const getValueFromObjectPath = ( object, path, defaultValue ) => {
-	const normalizedPath = Array.isArray( path ) ? path : stringToPath( path );
+	const arrayPath = Array.isArray( path ) ? path : path.split( '.' );
 	let value = object;
-	normalizedPath.forEach( ( fieldName ) => {
+	arrayPath.forEach( ( fieldName ) => {
 		value = value?.[ fieldName ];
 	} );
 	return value ?? defaultValue;

package/src/utils/selection.js

@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { RichTextData } from '@wordpress/rich-text';
+
 /**
  * A robust way to retain selection position through various
  * transforms is to insert a special character at the position and
@@ -19,8 +24,10 @@ export function retrieveSelectedAttribute( blockAttributes ) {
 	return Object.keys( blockAttributes ).find( ( name ) => {
 		const value = blockAttributes[ name ];
 		return (
-			typeof value === 'string' &&
-			value.indexOf( START_OF_SELECTED_AREA ) !== -1
+			( typeof value === 'string' || value instanceof RichTextData ) &&
+			// To do: refactor this to use rich text's selection instead, so we
+			// no longer have to use on this hack inserting a special character.
+			value.toString().indexOf( START_OF_SELECTED_AREA ) !== -1
 		);
 	} );
 }