@wordpress/block-editor 15.7.1-next.2f1c7c01b.0 → 15.8.0

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

@@ -45,17 +45,20 @@ function ContentLockControlsPure( { clientId } ) {
 		! isLockedByParent && templateLock === 'contentOnly';
 
 	const stopEditingAsBlockCallback = useCallback( () => {
-		stopEditingContentOnlySection( clientId );
-	}, [ clientId, stopEditingContentOnlySection ] );
+		stopEditingContentOnlySection();
+	}, [ stopEditingContentOnlySection ] );
 
-	if ( ! isContentLocked && ! isEditingContentOnlySection ) {
+	// 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 showDoneButton = isEditingContentOnlySection && ! isContentLocked;
-
 	return (
-		showDoneButton && (
+		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 ]
 	);
@@ -143,6 +144,7 @@ function useFitText( { fitText, name, clientId } ) {
 		if ( window.ResizeObserver && currentElement.parentElement ) {
 			resizeObserver = new window.ResizeObserver( applyFitText );
 			resizeObserver.observe( currentElement.parentElement );
+			resizeObserver.observe( currentElement );
 		}
 
 		// Cleanup function
@@ -169,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( () => {
@@ -192,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.
  *
@@ -323,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( () => {

package/src/hooks/typography.js

@@ -115,31 +115,36 @@ function TypographyInspectorControl( { children, resetAllFilter } ) {
 }
 
 export function TypographyPanel( { clientId, name, setAttributes, settings } ) {
-	function selector( select ) {
-		const { style, fontFamily, fontSize, fitText } =
-			select( blockEditorStore ).getBlockAttributes( clientId ) || {};
-		return { style, fontFamily, fontSize, fitText };
-	}
-	const { style, fontFamily, fontSize, fitText } = useSelect( selector, [
-		clientId,
-	] );
 	const isEnabled = useHasTypographyPanel( settings );
+
+	const { style, fontFamily, fontSize, fitText } = useSelect(
+		( select ) => {
+			// Early return to avoid subscription when disabled.
+			if ( ! isEnabled ) {
+				return {};
+			}
+			const {
+				style: _style,
+				fontFamily: _fontFamily,
+				fontSize: _fontSize,
+				fitText: _fitText,
+			} = select( blockEditorStore ).getBlockAttributes( clientId ) || {};
+			return {
+				style: _style,
+				fontFamily: _fontFamily,
+				fontSize: _fontSize,
+				fitText: _fitText,
+			};
+		},
+		[ clientId, isEnabled ]
+	);
 	const value = useMemo(
 		() => attributesToStyle( { style, fontFamily, fontSize } ),
 		[ style, fontSize, fontFamily ]
 	);
 
 	const onChange = ( newStyle ) => {
-		const newAttributes = styleToAttributes( newStyle );
-
-		// If setting a font size and fitText is currently enabled, disable it
-		const hasFontSize =
-			newAttributes.fontSize || newAttributes.style?.typography?.fontSize;
-		if ( hasFontSize && fitText ) {
-			newAttributes.fitText = undefined;
-		}
-
-		setAttributes( newAttributes );
+		setAttributes( styleToAttributes( newStyle ) );
 	};
 
 	if ( ! isEnabled ) {
@@ -159,6 +164,7 @@ export function TypographyPanel( { clientId, name, setAttributes, settings } ) {
 			value={ value }
 			onChange={ onChange }
 			defaultControls={ defaultControls }
+			fitText={ fitText }
 		/>
 	);
 }

package/src/store/private-selectors.js

@@ -493,7 +493,10 @@ export const getContentLockingParent = ( state, clientId ) => {
 export const getParentSectionBlock = ( state, clientId ) => {
 	let current = clientId;
 	let result;
-	while ( ! result && ( current = state.blocks.parents.get( current ) ) ) {
+
+	// If sections are nested, return the top level section block.
+	// Don't return early.
+	while ( ( current = state.blocks.parents.get( current ) ) ) {
 		if ( isSectionBlock( state, current ) ) {
 			result = current;
 		}
@@ -510,6 +513,10 @@ export const getParentSectionBlock = ( state, clientId ) => {
  * @return {boolean} Whether the block is a contentOnly section.
  */
 export function isSectionBlock( state, clientId ) {
+	if ( clientId === state.editedContentOnlySection ) {
+		return false;
+	}
+
 	const blockName = getBlockName( state, clientId );
 	if (
 		blockName === 'core/block' ||
@@ -541,6 +548,24 @@ export function getEditedContentOnlySection( state ) {
 	return state.editedContentOnlySection;
 }
 
+export function isWithinEditedContentOnlySection( state, clientId ) {
+	if ( ! state.editedContentOnlySection ) {
+		return false;
+	}
+
+	if ( state.editedContentOnlySection === clientId ) {
+		return true;
+	}
+
+	let current = clientId;
+	while ( ( current = state.blocks.parents.get( current ) ) ) {
+		if ( state.editedContentOnlySection === current ) {
+			return true;
+		}
+	}
+	return false;
+}
+
 /**
  * Returns the style attributes of multiple blocks.
  *

package/src/store/reducer.js

@@ -2331,6 +2331,12 @@ function getDerivedBlockEditingModesForTree( state, treeClientId = '' ) {
 				derivedBlockEditingModes.set( clientId, 'default' );
 				return;
 			}
+
+			// For the content only pattern experiment, disable blocks that are outside of the edited section.
+			if ( window?.__experimentalContentOnlyPatternInsertion ) {
+				derivedBlockEditingModes.set( clientId, 'disabled' );
+				return;
+			}
 		}
 
 		// If the block already has an explicit block editing mode set,

package/src/store/selectors.js

@@ -2274,6 +2274,8 @@ export const getInserterItems = createRegistrySelector( ( select ) =>
 					} ) );
 			}
 
+			// Hardcode: Collect stretch variations separately to add at the end
+			const stretchVariations = [];
 			const items = blockTypeInserterItems.reduce(
 				( accumulator, item ) => {
 					const { variations = [] } = item;
@@ -2286,14 +2288,26 @@ export const getInserterItems = createRegistrySelector( ( select ) =>
 							state,
 							item
 						);
-						accumulator.push(
-							...variations.map( variationMapper )
-						);
+						variations
+							.map( variationMapper )
+							.forEach( ( variation ) => {
+								if (
+									variation.id ===
+										'core/paragraph/stretchy-paragraph' ||
+									variation.id ===
+										'core/heading/stretchy-heading'
+								) {
+									stretchVariations.push( variation );
+								} else {
+									accumulator.push( variation );
+								}
+							} );
 					}
 					return accumulator;
 				},
 				[]
 			);
+			items.push( ...stretchVariations );
 
 			// Ensure core blocks are prioritized in the returned results,
 			// because third party blocks can be registered earlier than

package/src/utils/fit-text-frontend.js

@@ -38,6 +38,7 @@ store( 'core/fit-text', {
 					context.fontSize = optimizeFitText( ref, applyFontSize );
 				} );
 				resizeObserver.observe( ref.parentElement );
+				resizeObserver.observe( ref );
 
 				// Return cleanup function to be called when element is removed.
 				return () => {

package/src/utils/fit-text-utils.js

@@ -14,7 +14,7 @@ function findOptimalFontSize( textElement, applyFontSize ) {
 	const alreadyHasScrollableHeight =
 		textElement.scrollHeight > textElement.clientHeight;
 	let minSize = 5;
-	let maxSize = 600;
+	let maxSize = 2400;
 	let bestSize = minSize;
 
 	while ( minSize <= maxSize ) {