@wordpress/block-editor 15.16.0 → 15.17.0

package/src/components/rich-text/native/index.native.js

@@ -15,7 +15,6 @@ import {
 	showUserSuggestions,
 	showXpostSuggestions,
 } from '@wordpress/react-native-bridge';
-import { BlockFormatControls } from '@wordpress/block-editor';
 import { getPxFromCssUnit } from '@wordpress/components';
 import { Component } from '@wordpress/element';
 import {
@@ -42,6 +41,7 @@ import {
 	isCollapsed,
 	remove,
 } from '@wordpress/rich-text';
+import { BlockFormatControls } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -1342,22 +1342,23 @@ RichText.defaultProps = {
 	tagName: 'div',
 };
 
-const withFormatTypes = ( WrappedComponent ) => ( props ) => {
-	const {
-		clientId,
-		identifier,
-		withoutInteractiveFormatting,
-		allowedFormats,
-	} = props;
-	const { formatTypes } = useFormatTypes( {
-		clientId,
-		identifier,
-		withoutInteractiveFormatting,
-		allowedFormats,
-	} );
-
-	return <WrappedComponent { ...props } formatTypes={ formatTypes } />;
-};
+const withFormatTypes = ( WrappedComponent ) =>
+	function WithFormatTypes( props ) {
+		const {
+			clientId,
+			identifier,
+			withoutInteractiveFormatting,
+			allowedFormats,
+		} = props;
+		const { formatTypes } = useFormatTypes( {
+			clientId,
+			identifier,
+			withoutInteractiveFormatting,
+			allowedFormats,
+		} );
+
+		return <WrappedComponent { ...props } formatTypes={ formatTypes } />;
+	};
 
 export default compose( [
 	withSelect( ( select, { clientId } ) => {

package/src/components/spacing-sizes-control/utils.js

@@ -14,7 +14,7 @@ import {
 
 export const RANGE_CONTROL_MAX_SIZE = 8;
 
-export const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ];
+export const ALL_SIDES = [ 'top', 'bottom', 'left', 'right' ];
 
 export const DEFAULT_VALUES = {
 	top: undefined,

package/src/components/use-on-block-drop/index.js

@@ -46,7 +46,7 @@ export function parseDropEvent( event ) {
 			result,
 			JSON.parse( event.dataTransfer.getData( 'wp-blocks' ) )
 		);
-	} catch ( err ) {
+	} catch {
 		return result;
 	}
 

package/src/components/use-paste-styles/index.js

@@ -44,7 +44,7 @@ function hasSerializedBlocks( text ) {
 			return false;
 		}
 		return true;
-	} catch ( err ) {
+	} catch {
 		// Parsing error, the text is not serialized blocks.
 		// (Even though that it technically won't happen)
 		return false;
@@ -153,7 +153,7 @@ export default function usePasteStyles() {
 				}
 
 				html = await window.navigator.clipboard.readText();
-			} catch ( error ) {
+			} catch {
 				// Possibly the permission is denied.
 				createErrorNotice(
 					__(

package/src/components/writing-flow/use-selection-observer.js

@@ -214,7 +214,45 @@ export default function useSelectionObserver() {
 				const isSingularSelection = startClientId === endClientId;
 				if ( isSingularSelection ) {
 					if ( ! isMultiSelecting() ) {
-						selectBlock( startClientId );
+						// If the selection is not collapsed and falls
+						// within a RichText that doesn't have focus
+						// (e.g. the user started dragging from the block
+						// wrapper padding), dispatch a full
+						// selectionChange so the format toolbar appears.
+						const richTextElement =
+							! selection.isCollapsed &&
+							( getRichTextElement( startNode ) ||
+								getRichTextElement( endNode ) );
+
+						if (
+							richTextElement &&
+							ownerDocument.activeElement !== richTextElement
+						) {
+							const range = selection.getRangeAt( 0 );
+							const richTextData = create( {
+								element: richTextElement,
+								range,
+								__unstableIsEditableTree: true,
+							} );
+							selectionChange( {
+								start: {
+									clientId: startClientId,
+									attributeKey:
+										richTextElement.dataset
+											.wpBlockAttributeKey,
+									offset: richTextData.start ?? 0,
+								},
+								end: {
+									clientId: startClientId,
+									attributeKey:
+										richTextElement.dataset
+											.wpBlockAttributeKey,
+									offset: richTextData.end,
+								},
+							} );
+						} else {
+							selectBlock( startClientId );
+						}
 					} else {
 						multiSelect( startClientId, startClientId );
 					}

package/src/hooks/block-style-variation.js

@@ -73,10 +73,9 @@ function OverrideStyles( { override } ) {
  * @param {Object} props.config A global styles object, containing settings and styles.
  * @return {React.JSX.Element}  An array of new block variation overrides.
  */
-export function __unstableBlockStyleVariationOverridesWithConfig( { config } ) {
-	const { getBlockStyles, overrides } = useSelect(
+export function BlockStyleVariationOverridesWithConfig( { config } ) {
+	const { overrides } = useSelect(
 		( select ) => ( {
-			getBlockStyles: select( blocksStore ).getBlockStyles,
 			overrides: unlock( select( blockEditorStore ) ).getStyleOverrides(),
 		} ),
 		[]
@@ -161,7 +160,7 @@ export function __unstableBlockStyleVariationOverridesWithConfig( { config } ) {
 			}
 		}
 		return newOverrides;
-	}, [ config, overrides, getBlockStyles, getBlockName ] );
+	}, [ config, overrides, getBlockName ] );
 
 	if ( ! overridesWithConfig || ! overridesWithConfig.length ) {
 		return null;

package/src/hooks/index.js

@@ -105,5 +105,5 @@ export { getGapCSSValue } from './gap';
 export { useCachedTruthy } from './use-cached-truthy';
 export { setBackgroundStyleDefaults } from './background';
 export { useZoomOut } from './use-zoom-out';
-export { __unstableBlockStyleVariationOverridesWithConfig } from './block-style-variation';
+export { BlockStyleVariationOverridesWithConfig } from './block-style-variation';
 export { useStyleOverride } from './utils';

package/src/hooks/style.js

@@ -382,84 +382,98 @@ const elementTypes = [
 // Used for generating the instance ID
 const STYLE_BLOCK_PROPS_REFERENCE = {};
 
-function useBlockProps( { name, style } ) {
-	const blockElementsContainerIdentifier = useInstanceId(
-		STYLE_BLOCK_PROPS_REFERENCE,
-		'wp-elements'
-	);
+/**
+ * Generates CSS rules for block element styles (buttons, links, headings, etc.).
+ *
+ * Iterates over supported element types and compiles their styles, including
+ * pseudo-selectors (e.g. :hover) and related sub-elements (e.g. h1-h6 for headings),
+ * into scoped CSS rule strings.
+ *
+ * @param {Object} blockElementStyles The block's `style.elements` object.
+ * @param {string} blockName          The block name, used for skip-serialization checks.
+ * @param {string} baseSelector       The base CSS selector to scope rules under.
+ * @return {string|undefined} Concatenated CSS rules string, or undefined if none.
+ */
+function getElementCSSRules( blockElementStyles, blockName, baseSelector ) {
+	if ( ! blockElementStyles ) {
+		return;
+	}
 
-	const baseElementSelector = `.${ blockElementsContainerIdentifier }`;
-	const blockElementStyles = style?.elements;
+	const rules = [];
 
-	const styles = useMemo( () => {
-		if ( ! blockElementStyles ) {
+	elementTypes.forEach( ( { elementType, pseudo, elements } ) => {
+		const skipSerialization = shouldSkipSerialization(
+			blockName,
+			COLOR_SUPPORT_KEY,
+			elementType
+		);
+
+		if ( skipSerialization ) {
 			return;
 		}
 
-		const elementCSSRules = [];
+		const elementStyles = blockElementStyles?.[ elementType ];
 
-		elementTypes.forEach( ( { elementType, pseudo, elements } ) => {
-			const skipSerialization = shouldSkipSerialization(
-				name,
-				COLOR_SUPPORT_KEY,
-				elementType
+		// Process primary element type styles.
+		if ( elementStyles ) {
+			const selector = scopeSelector(
+				baseSelector,
+				ELEMENTS[ elementType ]
 			);
 
-			if ( skipSerialization ) {
-				return;
-			}
+			rules.push( compileCSS( elementStyles, { selector } ) );
 
-			const elementStyles = blockElementStyles?.[ elementType ];
-
-			// Process primary element type styles.
-			if ( elementStyles ) {
-				const selector = scopeSelector(
-					baseElementSelector,
-					ELEMENTS[ elementType ]
-				);
-
-				elementCSSRules.push(
-					compileCSS( elementStyles, { selector } )
-				);
-
-				// Process any interactive states for the element type.
-				if ( pseudo ) {
-					pseudo.forEach( ( pseudoSelector ) => {
-						if ( elementStyles[ pseudoSelector ] ) {
-							elementCSSRules.push(
-								compileCSS( elementStyles[ pseudoSelector ], {
-									selector: scopeSelector(
-										baseElementSelector,
-										`${ ELEMENTS[ elementType ] }${ pseudoSelector }`
-									),
-								} )
-							);
-						}
-					} );
-				}
-			}
-
-			// Process related elements e.g. h1-h6 for headings
-			if ( elements ) {
-				elements.forEach( ( element ) => {
-					if ( blockElementStyles[ element ] ) {
-						elementCSSRules.push(
-							compileCSS( blockElementStyles[ element ], {
+			// Process any interactive states for the element type.
+			if ( pseudo ) {
+				pseudo.forEach( ( pseudoSelector ) => {
+					if ( elementStyles[ pseudoSelector ] ) {
+						rules.push(
+							compileCSS( elementStyles[ pseudoSelector ], {
 								selector: scopeSelector(
-									baseElementSelector,
-									ELEMENTS[ element ]
+									baseSelector,
+									`${ ELEMENTS[ elementType ] }${ pseudoSelector }`
 								),
 							} )
 						);
 					}
 				} );
 			}
-		} );
+		}
+
+		// Process related elements e.g. h1-h6 for headings
+		if ( elements ) {
+			elements.forEach( ( element ) => {
+				if ( blockElementStyles[ element ] ) {
+					rules.push(
+						compileCSS( blockElementStyles[ element ], {
+							selector: scopeSelector(
+								baseSelector,
+								ELEMENTS[ element ]
+							),
+						} )
+					);
+				}
+			} );
+		}
+	} );
+
+	return rules.length > 0 ? rules.join( '' ) : undefined;
+}
+
+function useBlockProps( { name, style } ) {
+	const blockElementsContainerIdentifier = useInstanceId(
+		STYLE_BLOCK_PROPS_REFERENCE,
+		'wp-elements'
+	);
 
-		return elementCSSRules.length > 0
-			? elementCSSRules.join( '' )
-			: undefined;
-	}, [ baseElementSelector, blockElementStyles, name ] );
+	const baseElementSelector = `.${ blockElementsContainerIdentifier }`;
+	const blockElementStyles = style?.elements;
+
+	const styles = useMemo(
+		() =>
+			getElementCSSRules( blockElementStyles, name, baseElementSelector ),
+		[ baseElementSelector, blockElementStyles, name ]
+	);
 
 	useStyleOverride( { css: styles } );
 

package/src/private-apis.js

@@ -24,7 +24,7 @@ import {
 	setBackgroundStyleDefaults,
 	useLayoutClasses,
 	useLayoutStyles,
-	__unstableBlockStyleVariationOverridesWithConfig,
+	BlockStyleVariationOverridesWithConfig,
 	useZoomOut,
 } from './hooks';
 import DimensionsTool from './components/dimensions-tool';
@@ -121,7 +121,7 @@ lock( privateApis, {
 	PrivatePublishDateTimePicker,
 	useSpacingSizes,
 	useBlockDisplayTitle,
-	__unstableBlockStyleVariationOverridesWithConfig,
+	BlockStyleVariationOverridesWithConfig,
 	setBackgroundStyleDefaults,
 	sectionRootClientIdKey,
 	CommentIconSlotFill,

package/src/store/actions.js

@@ -1768,10 +1768,6 @@ export const insertBeforeBlock =
 			return;
 		}
 		const rootClientId = select.getBlockRootClientId( clientId );
-		const isLocked = select.getTemplateLock( rootClientId );
-		if ( isLocked ) {
-			return;
-		}
 
 		const blockIndex = select.getBlockIndex( clientId );
 		const directInsertBlock = rootClientId
@@ -1811,10 +1807,6 @@ export const insertAfterBlock =
 			return;
 		}
 		const rootClientId = select.getBlockRootClientId( clientId );
-		const isLocked = select.getTemplateLock( rootClientId );
-		if ( isLocked ) {
-			return;
-		}
 
 		const blockIndex = select.getBlockIndex( clientId );
 		const directInsertBlock = rootClientId

package/src/store/reducer.js

@@ -213,7 +213,7 @@ function updateParentInnerBlocksInTree(
 			? clientId
 			: state.parents.get( clientId );
 		do {
-			if ( state.controlledInnerBlocks[ current ] ) {
+			if ( state.controlledInnerBlocks.has( current ) ) {
 				// Should stop on controlled blocks.
 				// If we reach a controlled parent, break out of the loop.
 				controlledParents.add( current );
@@ -591,7 +591,7 @@ const withBlockReset = ( reducer ) => ( state, action ) => {
 		} );
 
 		const preservedControlledInnerBlocks =
-			state?.controlledInnerBlocks ?? {};
+			state?.controlledInnerBlocks ?? new Set();
 
 		// Preserve controlled inner blocks data from the old state.
 		// The maps above are rebuilt solely from action.blocks, but
@@ -599,17 +599,12 @@ const withBlockReset = ( reducer ) => ( state, action ) => {
 		// present in action.blocks. Re-inject them so the state
 		// remains consistent with the preserved flags.
 		if ( state?.order ) {
-			for ( const clientId of Object.keys(
-				preservedControlledInnerBlocks
-			) ) {
-				if ( ! preservedControlledInnerBlocks[ clientId ] ) {
-					continue;
-				}
+			for ( const clientId of preservedControlledInnerBlocks ) {
 				// Only preserve if the parent block still exists.
 				if ( ! newState.byClientId.has( clientId ) ) {
 					continue;
 				}
-				newState.controlledInnerBlocks[ clientId ] = true;
+				newState.controlledInnerBlocks.add( clientId );
 				const oldOrder = state.order.get( clientId );
 				if ( ! oldOrder?.length ) {
 					continue;
@@ -641,9 +636,7 @@ const withBlockReset = ( reducer ) => ( state, action ) => {
 		// (entity-level IDs), but we need them to reference the preserved
 		// cloned inner blocks instead. Mutating the existing object
 		// preserves references held by ancestor tree entries.
-		for ( const clientId of Object.keys(
-			newState.controlledInnerBlocks
-		) ) {
+		for ( const clientId of newState.controlledInnerBlocks ) {
 			const controlledOrder = newState.order.get( clientId );
 			if ( ! controlledOrder?.length ) {
 				continue;
@@ -707,12 +700,12 @@ const withReplaceInnerBlocks = ( reducer ) => ( state, action ) => {
 	// inner blocks from the block state because its inner blocks will not be
 	// attached to the block in the action.
 	const nestedControllers = {};
-	if ( Object.keys( state.controlledInnerBlocks ).length ) {
+	if ( state.controlledInnerBlocks.size ) {
 		const stack = [ ...action.blocks ];
 		while ( stack.length ) {
 			const { innerBlocks, ...block } = stack.shift();
 			stack.push( ...innerBlocks );
-			if ( !! state.controlledInnerBlocks[ block.clientId ] ) {
+			if ( state.controlledInnerBlocks.has( block.clientId ) ) {
 				nestedControllers[ block.clientId ] = true;
 			}
 		}
@@ -1222,14 +1215,22 @@ export const blocks = pipe(
 	},
 
 	controlledInnerBlocks(
-		state = {},
+		state = new Set(),
 		{ type, clientId, hasControlledInnerBlocks }
 	) {
 		if ( type === 'SET_HAS_CONTROLLED_INNER_BLOCKS' ) {
-			return {
-				...state,
-				[ clientId ]: hasControlledInnerBlocks,
-			};
+			if ( hasControlledInnerBlocks ) {
+				if ( state.has( clientId ) ) {
+					return state;
+				}
+				return new Set( state ).add( clientId );
+			}
+			if ( ! state.has( clientId ) ) {
+				return state;
+			}
+			const newState = new Set( state );
+			newState.delete( clientId );
+			return newState;
 		}
 		return state;
 	},
@@ -1828,12 +1829,12 @@ export function preferences( state = PREFERENCES_DEFAULTS, action ) {
  * Reducer returning an object where each key is a block client ID, its value
  * representing the settings for its nested blocks.
  *
- * @param {Object} state  Current state.
+ * @param {Map}    state  Current state.
  * @param {Object} action Dispatched action.
  *
  * @return {Object} Updated state.
  */
-export const blockListSettings = ( state = {}, action ) => {
+export const blockListSettings = ( state = new Map(), action ) => {
 	switch ( action.type ) {
 		case 'REPLACE_BLOCKS': {
 			// Collect all clientIds from replacement blocks. If a clientId
@@ -1848,53 +1849,48 @@ export const blockListSettings = ( state = {}, action ) => {
 				replacementIds.add( block.clientId );
 				stack.push( ...block.innerBlocks );
 			}
-			return Object.fromEntries(
-				Object.entries( state ).filter(
-					( [ id ] ) =>
-						! action.clientIds.includes( id ) ||
-						replacementIds.has( id )
-				)
-			);
+			const newState = new Map( state );
+			for ( const clientId of action.clientIds ) {
+				if ( ! replacementIds.has( clientId ) ) {
+					newState.delete( clientId );
+				}
+			}
+			return newState;
 		}
 		case 'REMOVE_BLOCKS': {
-			return Object.fromEntries(
-				Object.entries( state ).filter(
-					( [ id ] ) => ! action.clientIds.includes( id )
-				)
-			);
+			const newState = new Map( state );
+			for ( const clientId of action.clientIds ) {
+				newState.delete( clientId );
+			}
+			return newState;
 		}
 		case 'UPDATE_BLOCK_LIST_SETTINGS': {
 			const updates =
 				typeof action.clientId === 'string'
-					? { [ action.clientId ]: action.settings }
-					: action.clientId;
-
-			// Remove settings that are the same as the current state.
-			for ( const clientId in updates ) {
-				if ( ! updates[ clientId ] ) {
-					if ( ! state[ clientId ] ) {
-						delete updates[ clientId ];
-					}
-				} else if (
-					fastDeepEqual( state[ clientId ], updates[ clientId ] )
-				) {
-					delete updates[ clientId ];
-				}
-			}
+					? [ [ action.clientId, action.settings ] ]
+					: Object.entries( action.clientId );
+
+			const relevantUpdates = updates.filter(
+				( [ clientId, nextSettings ] ) =>
+					! nextSettings
+						? state.has( clientId )
+						: ! fastDeepEqual( state.get( clientId ), nextSettings )
+			);
 
-			if ( Object.keys( updates ).length === 0 ) {
+			if ( ! relevantUpdates.length ) {
 				return state;
 			}
 
-			const merged = { ...state, ...updates };
-
-			for ( const clientId in updates ) {
-				if ( ! updates[ clientId ] ) {
-					delete merged[ clientId ];
+			const newState = new Map( state );
+			for ( const [ clientId, nextSettings ] of relevantUpdates ) {
+				if ( ! nextSettings ) {
+					newState.delete( clientId );
+				} else {
+					newState.set( clientId, nextSettings );
 				}
 			}
 
-			return merged;
+			return newState;
 		}
 	}
 	return state;
@@ -2369,7 +2365,7 @@ function getBlockTreeBlock( state, clientId ) {
 		};
 	}
 
-	if ( ! state.blocks.controlledInnerBlocks[ clientId ] ) {
+	if ( ! state.blocks.controlledInnerBlocks.has( clientId ) ) {
 		return state.blocks.tree.get( clientId );
 	}
 
@@ -2468,7 +2464,7 @@ function getDerivedBlockEditingModesForTree( state, treeClientId = '' ) {
 	const templatePartClientIds = [];
 	const syncedPatternClientIds = [];
 
-	Object.keys( state.blocks.controlledInnerBlocks ).forEach( ( clientId ) => {
+	state.blocks.controlledInnerBlocks.forEach( ( clientId ) => {
 		const block = state.blocks.byClientId?.get( clientId );
 
 		if ( block?.name === 'core/template-part' ) {
@@ -2479,11 +2475,10 @@ function getDerivedBlockEditingModesForTree( state, treeClientId = '' ) {
 			syncedPatternClientIds.push( clientId );
 		}
 	} );
-	const contentOnlyTemplateLockedClientIds = Object.keys(
+	const contentOnlyTemplateLockedClientIds = Array.from(
 		state.blockListSettings
-	).filter(
-		( clientId ) =>
-			state.blockListSettings[ clientId ]?.templateLock === 'contentOnly'
+	).flatMap( ( [ clientId, listSettings ] ) =>
+		listSettings?.templateLock === 'contentOnly' ? [ clientId ] : []
 	);
 
 	// When in an isolated editing context (e.g., editing a template part or pattern directly),
@@ -2889,15 +2884,15 @@ export function withDerivedBlockEditingModes( reducer ) {
 
 				for ( const clientId in updates ) {
 					const isNewContentOnlyBlock =
-						state.blockListSettings[ clientId ]?.templateLock !==
-							'contentOnly' &&
-						nextState.blockListSettings[ clientId ]
+						state.blockListSettings.get( clientId )
+							?.templateLock !== 'contentOnly' &&
+						nextState.blockListSettings.get( clientId )
 							?.templateLock === 'contentOnly';
 
 					const wasContentOnlyBlock =
-						state.blockListSettings[ clientId ]?.templateLock ===
-							'contentOnly' &&
-						nextState.blockListSettings[ clientId ]
+						state.blockListSettings.get( clientId )
+							?.templateLock === 'contentOnly' &&
+						nextState.blockListSettings.get( clientId )
 							?.templateLock !== 'contentOnly';
 
 					if ( isNewContentOnlyBlock ) {