@wordpress/block-editor 15.7.0 → 15.8.0

package/src/hooks/allowed-blocks.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { addFilter } from '@wordpress/hooks';
-import { hasBlockSupport } from '@wordpress/blocks';
+import { hasBlockSupport, getBlockType } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -64,3 +64,91 @@ addFilter(
 	'core/allowedBlocks/attribute',
 	addAttribute
 );
+
+/**
+ * Add transforms to preserve allowedBlocks on block transformations.
+ *
+ * @param {Object} result  The transformed block.
+ * @param {Array}  source  Original blocks transformed.
+ * @param {number} index   Index of the transformed block.
+ * @param {Array}  results All blocks that resulted from the transformation.
+ * @return {Object} Modified transformed block.
+ */
+export function addTransforms( result, source, index, results ) {
+	if ( ! hasBlockSupport( result.name, 'allowedBlocks' ) ) {
+		return result;
+	}
+
+	// If the condition verifies we are probably in the presence of a wrapping transform
+	// e.g: nesting paragraphs in a group or columns and in that case the attribute should not be kept.
+	if (
+		source.length !== 1 &&
+		results.length === 1 &&
+		result.innerBlocks.length === source.length
+	) {
+		return result;
+	}
+
+	// If we are transforming one block to multiple blocks or multiple blocks to one block,
+	// we ignore the attribute during the transform.
+	if (
+		( results.length === 1 && source.length > 1 ) ||
+		( results.length > 1 && source.length === 1 )
+	) {
+		return result;
+	}
+
+	// If we are transforming multiple blocks to multiple blocks with different counts,
+	// we ignore the attribute during the transform.
+	if (
+		results.length > 1 &&
+		source.length > 1 &&
+		results.length !== source.length
+	) {
+		return result;
+	}
+
+	// If the target block already has allowedBlocks, we don't need to preserve
+	// the source allowedBlocks.
+	if ( result.attributes.allowedBlocks ) {
+		return result;
+	}
+
+	const sourceAllowedBlocks = source[ index ]?.attributes?.allowedBlocks;
+
+	if ( ! sourceAllowedBlocks ) {
+		return result;
+	}
+
+	const blockType = getBlockType( result.name );
+	const destinationAllowedBlocks = blockType?.allowedBlocks || [];
+
+	if ( ! destinationAllowedBlocks.length ) {
+		return {
+			...result,
+			attributes: {
+				...result.attributes,
+				allowedBlocks: sourceAllowedBlocks,
+			},
+		};
+	}
+
+	// Filter out any source allowed blocks that are not defined in the destination allowed blocks.
+	const filteredSourceAllowedBlocks = sourceAllowedBlocks.filter( ( block ) =>
+		destinationAllowedBlocks.includes( block )
+	);
+
+	return {
+		...result,
+		attributes: {
+			...result.attributes,
+			allowedBlocks: filteredSourceAllowedBlocks,
+		},
+	};
+}
+
+addFilter(
+	'blocks.switchToBlockType.transformedBlock',
+	'core/allowedBlocks/addTransforms',
+	addTransforms
+);

package/src/hooks/block-bindings.js

@@ -449,7 +449,11 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 export default {
 	edit: BlockBindingsPanel,
 	attributeKeys: [ 'metadata' ],
-	hasSupport() {
-		return true;
+	hasSupport( name ) {
+		return ! [
+			'core/post-date',
+			'core/navigation-link',
+			'core/navigation-submenu',
+		].includes( name );
 	},
 };

package/src/hooks/border.js

@@ -142,12 +142,18 @@ function BordersInspectorControl( { label, children, resetAllFilter } ) {
 
 export function BorderPanel( { clientId, name, setAttributes, settings } ) {
 	const isEnabled = useHasBorderPanel( settings );
-	function selector( select ) {
-		const { style, borderColor } =
-			select( blockEditorStore ).getBlockAttributes( clientId ) || {};
-		return { style, borderColor };
-	}
-	const { style, borderColor } = useSelect( selector, [ clientId ] );
+	const { style, borderColor } = useSelect(
+		( select ) => {
+			// Early return to avoid subscription when disabled
+			if ( ! isEnabled ) {
+				return {};
+			}
+			const { style: _style, borderColor: _borderColor } =
+				select( blockEditorStore ).getBlockAttributes( clientId ) || {};
+			return { style: _style, borderColor: _borderColor };
+		},
+		[ clientId, isEnabled ]
+	);
 	const value = useMemo( () => {
 		return attributesToStyle( { style, borderColor } );
 	}, [ style, borderColor ] );

package/src/hooks/color.js

@@ -260,16 +260,37 @@ function ColorInspectorControl( { children, resetAllFilter } ) {
 	);
 }
 
-export function ColorEdit( { clientId, name, setAttributes, settings } ) {
+export function ColorEdit( {
+	clientId,
+	name,
+	setAttributes,
+	settings,
+	asWrapper,
+	label,
+	defaultControls,
+} ) {
 	const isEnabled = useHasColorPanel( settings );
-	function selector( select ) {
-		const { style, textColor, backgroundColor, gradient } =
-			select( blockEditorStore ).getBlockAttributes( clientId ) || {};
-		return { style, textColor, backgroundColor, gradient };
-	}
+
 	const { style, textColor, backgroundColor, gradient } = useSelect(
-		selector,
-		[ clientId ]
+		( select ) => {
+			// Early return to avoid subscription when disabled
+			if ( ! isEnabled ) {
+				return {};
+			}
+			const {
+				style: _style,
+				textColor: _textColor,
+				backgroundColor: _backgroundColor,
+				gradient: _gradient,
+			} = select( blockEditorStore ).getBlockAttributes( clientId ) || {};
+			return {
+				style: _style,
+				textColor: _textColor,
+				backgroundColor: _backgroundColor,
+				gradient: _gradient,
+			};
+		},
+		[ clientId, isEnabled ]
 	);
 	const value = useMemo( () => {
 		return attributesToStyle( {
@@ -288,10 +309,12 @@ export function ColorEdit( { clientId, name, setAttributes, settings } ) {
 		return null;
 	}
 
-	const defaultControls = getBlockSupport( name, [
-		COLOR_SUPPORT_KEY,
-		'__experimentalDefaultControls',
-	] );
+	defaultControls = defaultControls
+		? defaultControls
+		: getBlockSupport( name, [
+				COLOR_SUPPORT_KEY,
+				'__experimentalDefaultControls',
+		  ] );
 
 	const enableContrastChecking =
 		Platform.OS === 'web' &&
@@ -306,14 +329,18 @@ export function ColorEdit( { clientId, name, setAttributes, settings } ) {
 				'enableContrastChecker',
 			] );
 
+	// Use provided wrapper or default to ColorInspectorControl
+	const Wrapper = asWrapper || ColorInspectorControl;
+
 	return (
 		<StylesColorPanel
-			as={ ColorInspectorControl }
+			as={ Wrapper }
 			panelId={ clientId }
 			settings={ settings }
 			value={ value }
 			onChange={ onChange }
 			defaultControls={ defaultControls }
+			label={ label }
 			enableContrastChecker={
 				false !==
 				getBlockSupport( name, [

package/src/hooks/content-lock-ui.js

@@ -14,44 +14,51 @@ import { BlockControls } from '../components';
 import { unlock } from '../lock-unlock';
 
 // The implementation of content locking is mainly in this file, although the mechanism
-// to stop temporarily editing as blocks when an outside block is selected is on component StopEditingAsBlocksOnOutsideSelect
-// at block-editor/src/components/block-list/index.js.
+// to stop editing a content only section when an outside block is selected is in the component
+// `StopEditingContentOnlySectionOnOutsideSelect` at block-editor/src/components/block-list/index.js.
 // Besides the components on this file and the file referenced above the implementation
 // also includes artifacts on the store (actions, reducers, and selector).
 
 function ContentLockControlsPure( { clientId } ) {
-	const { templateLock, isLockedByParent, isEditingAsBlocks } = useSelect(
-		( select ) => {
-			const {
-				getContentLockingParent,
-				getTemplateLock,
-				getTemporarilyEditingAsBlocks,
-			} = unlock( select( blockEditorStore ) );
-			return {
-				templateLock: getTemplateLock( clientId ),
-				isLockedByParent: !! getContentLockingParent( clientId ),
-				isEditingAsBlocks: getTemporarilyEditingAsBlocks() === clientId,
-			};
-		},
-		[ clientId ]
-	);
+	const { templateLock, isLockedByParent, isEditingContentOnlySection } =
+		useSelect(
+			( select ) => {
+				const {
+					getContentLockingParent,
+					getTemplateLock,
+					getEditedContentOnlySection,
+				} = unlock( select( blockEditorStore ) );
+				return {
+					templateLock: getTemplateLock( clientId ),
+					isLockedByParent: !! getContentLockingParent( clientId ),
+					isEditingContentOnlySection:
+						getEditedContentOnlySection() === clientId,
+				};
+			},
+			[ clientId ]
+		);
 
-	const { stopEditingAsBlocks } = unlock( useDispatch( blockEditorStore ) );
+	const { stopEditingContentOnlySection } = unlock(
+		useDispatch( blockEditorStore )
+	);
 	const isContentLocked =
 		! isLockedByParent && templateLock === 'contentOnly';
 
 	const stopEditingAsBlockCallback = useCallback( () => {
-		stopEditingAsBlocks( clientId );
-	}, [ clientId, stopEditingAsBlocks ] );
+		stopEditingContentOnlySection();
+	}, [ stopEditingContentOnlySection ] );
 
-	if ( ! isContentLocked && ! isEditingAsBlocks ) {
+	// Hide the Done button when the content only pattern insertion experiment is active.
+	// This is replaced by an alternative UI in the experiment.
+	if (
+		window?.__experimentalContentOnlyPatternInsertion ||
+		( ! isContentLocked && ! isEditingContentOnlySection )
+	) {
 		return null;
 	}
 
-	const showStopEditingAsBlocks = isEditingAsBlocks && ! isContentLocked;
-
 	return (
-		showStopEditingAsBlocks && (
+		isEditingContentOnlySection && (
 			<BlockControls group="other">
 				<ToolbarButton onClick={ stopEditingAsBlockCallback }>
 					{ __( 'Done' ) }

package/src/hooks/dimensions.js

@@ -71,9 +71,15 @@ function DimensionsInspectorControl( { children, resetAllFilter } ) {
 export function DimensionsPanel( { clientId, name, setAttributes, settings } ) {
 	const isEnabled = useHasDimensionsPanel( settings );
 	const value = useSelect(
-		( select ) =>
-			select( blockEditorStore ).getBlockAttributes( clientId )?.style,
-		[ clientId ]
+		( select ) => {
+			// Early return to avoid subscription when disabled
+			if ( ! isEnabled ) {
+				return undefined;
+			}
+			return select( blockEditorStore ).getBlockAttributes( clientId )
+				?.style;
+		},
+		[ clientId, isEnabled ]
 	);
 	const [ visualizedProperty, setVisualizedProperty ] = useVisualizer();
 	const onChange = ( newStyle ) => {
@@ -110,20 +116,22 @@ export function DimensionsPanel( { clientId, name, setAttributes, settings } ) {
 				defaultControls={ defaultControls }
 				onVisualize={ setVisualizedProperty }
 			/>
-			{ !! settings?.spacing?.padding && (
-				<PaddingVisualizer
-					forceShow={ visualizedProperty === 'padding' }
-					clientId={ clientId }
-					value={ value }
-				/>
-			) }
-			{ !! settings?.spacing?.margin && (
-				<MarginVisualizer
-					forceShow={ visualizedProperty === 'margin' }
-					clientId={ clientId }
-					value={ value }
-				/>
-			) }
+			{ !! settings?.spacing?.padding &&
+				visualizedProperty === 'padding' && (
+					<PaddingVisualizer
+						forceShow={ visualizedProperty === 'padding' }
+						clientId={ clientId }
+						value={ value }
+					/>
+				) }
+			{ !! settings?.spacing?.margin &&
+				visualizedProperty === 'margin' && (
+					<MarginVisualizer
+						forceShow={ visualizedProperty === 'margin' }
+						clientId={ clientId }
+						value={ value }
+					/>
+				) }
 		</>
 	);
 }

package/src/hooks/fit-text.js

@@ -5,11 +5,8 @@ import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
 import { useEffect, useCallback } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import {
-	ToggleControl,
-	__experimentalToolsPanelItem as ToolsPanelItem,
-} from '@wordpress/components';
+
+const EMPTY_OBJECT = {};
 
 /**
  * Internal dependencies
@@ -17,7 +14,6 @@ import {
 import { optimizeFitText } from '../utils/fit-text-utils';
 import { store as blockEditorStore } from '../store';
 import { useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
-import InspectorControls from '../components/inspector-controls';
 
 export const FIT_TEXT_SUPPORT_KEY = 'typography.fitText';
 
@@ -62,14 +58,19 @@ function useFitText( { fitText, name, clientId } ) {
 	const hasFitTextSupport = hasBlockSupport( name, FIT_TEXT_SUPPORT_KEY );
 	const blockElement = useBlockElement( clientId );
 
-	// Monitor block attribute changes
-	// Any attribute may change the available space.
-	const blockAttributes = useSelect(
+	// Monitor block attribute changes, and parent changes.
+	// Any attribute or parent change may change the available space.
+	const { blockAttributes, parentId } = useSelect(
 		( select ) => {
 			if ( ! clientId || ! hasFitTextSupport || ! fitText ) {
-				return;
+				return EMPTY_OBJECT;
 			}
-			return select( blockEditorStore ).getBlockAttributes( clientId );
+			return {
+				blockAttributes:
+					select( blockEditorStore ).getBlockAttributes( clientId ),
+				parentId:
+					select( blockEditorStore ).getBlockRootClientId( clientId ),
+			};
 		},
 		[ clientId, hasFitTextSupport, fitText ]
 	);
@@ -90,11 +91,15 @@ function useFitText( { fitText, name, clientId } ) {
 
 		const blockSelector = `#block-${ clientId }`;
 
-		const applyStylesFn = ( css ) => {
-			styleElement.textContent = css;
+		const applyFontSize = ( fontSize ) => {
+			if ( fontSize === 0 ) {
+				styleElement.textContent = '';
+			} else {
+				styleElement.textContent = `${ blockSelector } { font-size: ${ fontSize }px !important; }`;
+			}
 		};
 
-		optimizeFitText( blockElement, blockSelector, applyStylesFn );
+		optimizeFitText( blockElement, applyFontSize );
 	}, [ blockElement, clientId, hasFitTextSupport, fitText ] );
 
 	useEffect( () => {
@@ -107,21 +112,54 @@ function useFitText( { fitText, name, clientId } ) {
 			return;
 		}
 
-		// Apply initially
-		applyFitText();
-
 		// Store current element value for cleanup
 		const currentElement = blockElement;
+		const previousVisibility = currentElement.style.visibility;
+
+		// Store IDs for cleanup
+		let hideFrameId = null;
+		let calculateFrameId = null;
+		let showTimeoutId = null;
+
+		// We are hiding the element doing the calculation of fit text
+		// and then showing it again to avoid the user noticing a flash of potentially
+		// big fitText while the binary search is happening.
+		hideFrameId = window.requestAnimationFrame( () => {
+			currentElement.style.visibility = 'hidden';
+			// Wait for browser to render the hidden state
+			calculateFrameId = window.requestAnimationFrame( () => {
+				applyFitText();
+
+				// Using a timeout instead of requestAnimationFrame, because
+				// with requestAnimationFrame a flash of very high size
+				// can still occur although rare.
+				showTimeoutId = setTimeout( () => {
+					currentElement.style.visibility = previousVisibility;
+				}, 10 );
+			} );
+		} );
 
 		// Watch for size changes
 		let resizeObserver;
 		if ( window.ResizeObserver && currentElement.parentElement ) {
 			resizeObserver = new window.ResizeObserver( applyFitText );
 			resizeObserver.observe( currentElement.parentElement );
+			resizeObserver.observe( currentElement );
 		}
 
 		// Cleanup function
 		return () => {
+			// Cancel pending async operations
+			if ( hideFrameId !== null ) {
+				window.cancelAnimationFrame( hideFrameId );
+			}
+			if ( calculateFrameId !== null ) {
+				window.cancelAnimationFrame( calculateFrameId );
+			}
+			if ( showTimeoutId !== null ) {
+				clearTimeout( showTimeoutId );
+			}
+
 			if ( resizeObserver ) {
 				resizeObserver.disconnect();
 			}
@@ -133,7 +171,14 @@ function useFitText( { fitText, name, clientId } ) {
 				styleElement.remove();
 			}
 		};
-	}, [ fitText, clientId, applyFitText, blockElement, hasFitTextSupport ] );
+	}, [
+		fitText,
+		clientId,
+		parentId,
+		applyFitText,
+		blockElement,
+		hasFitTextSupport,
+	] );
 
 	// Trigger fit text recalculation when content changes
 	useEffect( () => {
@@ -156,76 +201,6 @@ function useFitText( { fitText, name, clientId } ) {
 	] );
 }
 
-/**
- * Fit text control component for the typography panel.
- *
- * @param {Object}   props               Component props.
- * @param {string}   props.clientId      Block client ID.
- * @param {Function} props.setAttributes Function to set block attributes.
- * @param {string}   props.name          Block name.
- * @param {boolean}  props.fitText       Whether fit text is enabled.
- * @param {string}   props.fontSize      Font size slug.
- * @param {Object}   props.style         Block style object.
- */
-export function FitTextControl( {
-	clientId,
-	fitText = false,
-	setAttributes,
-	name,
-	fontSize,
-	style,
-} ) {
-	if ( ! hasBlockSupport( name, FIT_TEXT_SUPPORT_KEY ) ) {
-		return null;
-	}
-	return (
-		<InspectorControls group="typography">
-			<ToolsPanelItem
-				hasValue={ () => fitText }
-				label={ __( 'Fit text' ) }
-				onDeselect={ () => setAttributes( { fitText: undefined } ) }
-				resetAllFilter={ () => ( { fitText: undefined } ) }
-				panelId={ clientId }
-			>
-				<ToggleControl
-					__nextHasNoMarginBottom
-					label={ __( 'Fit text' ) }
-					checked={ fitText }
-					onChange={ () => {
-						const newFitText = ! fitText || undefined;
-						const updates = { fitText: newFitText };
-
-						// When enabling fit text, clear font size if it has a value
-						if ( newFitText ) {
-							if ( fontSize ) {
-								updates.fontSize = undefined;
-							}
-							if ( style?.typography?.fontSize ) {
-								updates.style = {
-									...style,
-									typography: {
-										...style?.typography,
-										fontSize: undefined,
-									},
-								};
-							}
-						}
-
-						setAttributes( updates );
-					} }
-					help={
-						fitText
-							? __( 'Text will resize to fit its container.' )
-							: __(
-									'The text will resize to fit its container, resetting other font size settings.'
-							  )
-					}
-				/>
-			</ToolsPanelItem>
-		</InspectorControls>
-	);
-}
-
 /**
  * Override props applied to the block element on save.
  *
@@ -287,7 +262,7 @@ const hasFitTextSupport = ( blockNameOrType ) => {
 export default {
 	useBlockProps,
 	addSaveProps,
-	attributeKeys: [ 'fitText', 'fontSize', 'style' ],
+	attributeKeys: [ 'fitText' ],
 	hasSupport: hasFitTextSupport,
-	edit: FitTextControl,
+	edit: () => null,
 };

package/src/hooks/font-size.js

@@ -92,11 +92,16 @@ function addSaveProps( props, blockNameOrType, attributes ) {
  */
 export function FontSizeEdit( props ) {
 	const {
-		attributes: { fontSize, style },
+		attributes: { fontSize, style, fitText },
 		setAttributes,
 	} = props;
+
 	const [ fontSizes ] = useSettings( 'typography.fontSizes' );
 
+	// Hide font size UI when fitText is enabled
+	if ( fitText ) {
+		return null;
+	}
 	const onChange = ( value, selectedItem ) => {
 		// Use the selectedItem's slug if available, otherwise fall back to finding by value
 		const fontSizeSlug =
@@ -211,7 +216,7 @@ function useBlockProps( { name, fontSize, style } ) {
 export default {
 	useBlockProps,
 	addSaveProps,
-	attributeKeys: [ 'fontSize', 'style' ],
+	attributeKeys: [ 'fontSize', 'style', 'fitText' ],
 	hasSupport( name ) {
 		return hasBlockSupport( name, FONT_SIZE_SUPPORT_KEY );
 	},

package/src/hooks/layout.js

@@ -74,13 +74,17 @@ export function useLayoutClasses( blockAttributes = {}, blockName = '' ) {
 
 	const hasGlobalPadding = useSelect(
 		( select ) => {
-			return (
-				( usedLayout?.inherit ||
-					usedLayout?.contentSize ||
-					usedLayout?.type === 'constrained' ) &&
-				select( blockEditorStore ).getSettings().__experimentalFeatures
-					?.useRootPaddingAwareAlignments
-			);
+			// Early return to avoid subscription when layout doesn't use global padding
+			if (
+				! usedLayout?.inherit &&
+				! usedLayout?.contentSize &&
+				usedLayout?.type !== 'constrained'
+			) {
+				return false;
+			}
+
+			return select( blockEditorStore ).getSettings()
+				.__experimentalFeatures?.useRootPaddingAwareAlignments;
 		},
 		[ usedLayout?.contentSize, usedLayout?.inherit, usedLayout?.type ]
 	);

package/src/hooks/spacing-visualizer.js

@@ -16,7 +16,15 @@ function SpacingVisualizer( { clientId, value, computeStyle, forceShow } ) {
 		computeStyle( blockElement )
 	);
 
-	// It's not sufficient to read the block’s computed style when `value` changes because
+	// Force style computation when forceShow becomes true (e.g., when hovering control)
+	// to ensure visualizer displays correct dimensions on first render.
+	useEffect( () => {
+		if ( blockElement && forceShow ) {
+			updateStyle();
+		}
+	}, [ blockElement, forceShow ] );
+
+	// It's not sufficient to read the block's computed style when `value` changes because
 	// the effect would run before the block’s style has updated. Thus observing mutations
 	// to the block’s attributes is used to trigger updates to the visualizer’s styles.
 	useEffect( () => {