@wordpress/block-editor 15.6.4 → 15.6.6

package/build-module/utils/fit-text-utils.js

@@ -1,7 +1,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) {
     const midSize = Math.floor((minSize + maxSize) / 2);

package/build-module/utils/fit-text-utils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/utils/fit-text-utils.js"],
-  "sourcesContent": ["/**\n * Shared utility functions for fit text functionality.\n * Uses callback-based approach for maximum code reuse between editor and frontend.\n */\n\n/**\n * Find optimal font size using simple binary search between 5-600px.\n *\n * @param {HTMLElement} textElement   The text element\n * @param {Function}    applyFontSize Function that receives font size in pixels\n * @return {number} Optimal font size\n */\nfunction findOptimalFontSize( textElement, applyFontSize ) {\n\tconst alreadyHasScrollableHeight =\n\t\ttextElement.scrollHeight > textElement.clientHeight;\n\tlet minSize = 5;\n\tlet maxSize = 600;\n\tlet bestSize = minSize;\n\n\twhile ( minSize <= maxSize ) {\n\t\tconst midSize = Math.floor( ( minSize + maxSize ) / 2 );\n\t\tapplyFontSize( midSize );\n\n\t\tconst fitsWidth = textElement.scrollWidth <= textElement.clientWidth;\n\t\tconst fitsHeight =\n\t\t\talreadyHasScrollableHeight ||\n\t\t\ttextElement.scrollHeight <= textElement.clientHeight;\n\n\t\tif ( fitsWidth && fitsHeight ) {\n\t\t\tbestSize = midSize;\n\t\t\tminSize = midSize + 1;\n\t\t} else {\n\t\t\tmaxSize = midSize - 1;\n\t\t}\n\t}\n\n\treturn bestSize;\n}\n\n/**\n * Complete fit text optimization for a single text element.\n * Handles the full flow using callbacks for font size application.\n *\n * @param {HTMLElement} textElement   The text element (paragraph, heading, etc.)\n * @param {Function}    applyFontSize Function that receives font size in pixels (0 to clear, >0 to apply)\n */\nexport function optimizeFitText( textElement, applyFontSize ) {\n\tif ( ! textElement ) {\n\t\treturn;\n\t}\n\n\tapplyFontSize( 0 );\n\n\tconst optimalSize = findOptimalFontSize( textElement, applyFontSize );\n\n\tapplyFontSize( optimalSize );\n\treturn optimalSize;\n}\n"],
+  "sourcesContent": ["/**\n * Shared utility functions for fit text functionality.\n * Uses callback-based approach for maximum code reuse between editor and frontend.\n */\n\n/**\n * Find optimal font size using simple binary search between 5-600px.\n *\n * @param {HTMLElement} textElement   The text element\n * @param {Function}    applyFontSize Function that receives font size in pixels\n * @return {number} Optimal font size\n */\nfunction findOptimalFontSize( textElement, applyFontSize ) {\n\tconst alreadyHasScrollableHeight =\n\t\ttextElement.scrollHeight > textElement.clientHeight;\n\tlet minSize = 5;\n\tlet maxSize = 2400;\n\tlet bestSize = minSize;\n\n\twhile ( minSize <= maxSize ) {\n\t\tconst midSize = Math.floor( ( minSize + maxSize ) / 2 );\n\t\tapplyFontSize( midSize );\n\n\t\tconst fitsWidth = textElement.scrollWidth <= textElement.clientWidth;\n\t\tconst fitsHeight =\n\t\t\talreadyHasScrollableHeight ||\n\t\t\ttextElement.scrollHeight <= textElement.clientHeight;\n\n\t\tif ( fitsWidth && fitsHeight ) {\n\t\t\tbestSize = midSize;\n\t\t\tminSize = midSize + 1;\n\t\t} else {\n\t\t\tmaxSize = midSize - 1;\n\t\t}\n\t}\n\n\treturn bestSize;\n}\n\n/**\n * Complete fit text optimization for a single text element.\n * Handles the full flow using callbacks for font size application.\n *\n * @param {HTMLElement} textElement   The text element (paragraph, heading, etc.)\n * @param {Function}    applyFontSize Function that receives font size in pixels (0 to clear, >0 to apply)\n */\nexport function optimizeFitText( textElement, applyFontSize ) {\n\tif ( ! textElement ) {\n\t\treturn;\n\t}\n\n\tapplyFontSize( 0 );\n\n\tconst optimalSize = findOptimalFontSize( textElement, applyFontSize );\n\n\tapplyFontSize( optimalSize );\n\treturn optimalSize;\n}\n"],
   "mappings": "AAYA,SAAS,oBAAqB,aAAa,eAAgB;AAC1D,QAAM,6BACL,YAAY,eAAe,YAAY;AACxC,MAAI,UAAU;AACd,MAAI,UAAU;AACd,MAAI,WAAW;AAEf,SAAQ,WAAW,SAAU;AAC5B,UAAM,UAAU,KAAK,OAAS,UAAU,WAAY,CAAE;AACtD,kBAAe,OAAQ;AAEvB,UAAM,YAAY,YAAY,eAAe,YAAY;AACzD,UAAM,aACL,8BACA,YAAY,gBAAgB,YAAY;AAEzC,QAAK,aAAa,YAAa;AAC9B,iBAAW;AACX,gBAAU,UAAU;AAAA,IACrB,OAAO;AACN,gBAAU,UAAU;AAAA,IACrB;AAAA,EACD;AAEA,SAAO;AACR;AASO,SAAS,gBAAiB,aAAa,eAAgB;AAC7D,MAAK,CAAE,aAAc;AACpB;AAAA,EACD;AAEA,gBAAe,CAAE;AAEjB,QAAM,cAAc,oBAAqB,aAAa,aAAc;AAEpE,gBAAe,WAAY;AAC3B,SAAO;AACR;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "15.6.4",
+	"version": "15.6.6",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -61,9 +61,9 @@
 		"@wordpress/base-styles": "^6.9.1",
 		"@wordpress/blob": "^4.33.1",
 		"@wordpress/block-serialization-default-parser": "^5.33.1",
-		"@wordpress/blocks": "^15.6.1",
-		"@wordpress/commands": "^1.33.2",
-		"@wordpress/components": "^30.6.2",
+		"@wordpress/blocks": "^15.6.2",
+		"@wordpress/commands": "^1.33.4",
+		"@wordpress/components": "^30.6.4",
 		"@wordpress/compose": "^7.33.1",
 		"@wordpress/data": "^10.33.1",
 		"@wordpress/date": "^5.33.1",
@@ -80,13 +80,13 @@
 		"@wordpress/keyboard-shortcuts": "^5.33.1",
 		"@wordpress/keycodes": "^4.33.1",
 		"@wordpress/notices": "^5.33.1",
-		"@wordpress/preferences": "^4.33.2",
+		"@wordpress/preferences": "^4.33.4",
 		"@wordpress/priority-queue": "^3.33.1",
 		"@wordpress/private-apis": "^1.33.1",
-		"@wordpress/rich-text": "^7.33.1",
+		"@wordpress/rich-text": "^7.33.2",
 		"@wordpress/style-engine": "^2.33.1",
 		"@wordpress/token-list": "^3.33.1",
-		"@wordpress/upload-media": "^0.18.2",
+		"@wordpress/upload-media": "^0.18.4",
 		"@wordpress/url": "^4.33.1",
 		"@wordpress/warning": "^3.33.1",
 		"@wordpress/wordcount": "^4.33.1",
@@ -112,5 +112,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "2e2a11a11f0c5c9cb2bba2dd40b8046d2a10dc9d"
+	"gitHead": "e821b2ec0a90d60aa7cafc248ba049f13b4265b7"
 }

package/src/components/global-styles/typography-panel.js

@@ -178,6 +178,7 @@ export default function TypographyPanel( {
 	settings,
 	panelId,
 	defaultControls = DEFAULT_CONTROLS,
+	fitText = false,
 } ) {
 	const decodeValue = ( rawValue ) =>
 		getValueFromVariable( { settings }, '', rawValue );
@@ -447,7 +448,7 @@ export default function TypographyPanel( {
 					/>
 				</ToolsPanelItem>
 			) }
-			{ hasFontSizeEnabled && (
+			{ hasFontSizeEnabled && ! fitText && (
 				<ToolsPanelItem
 					label={ __( 'Size' ) }
 					hasValue={ hasFontSize }

package/src/hooks/fit-text.js

@@ -5,11 +5,6 @@ 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 = {};
 
@@ -19,7 +14,6 @@ const EMPTY_OBJECT = {};
 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';
 
@@ -207,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.
  *
@@ -338,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/typography.js

@@ -130,16 +130,7 @@ export function TypographyPanel( { clientId, name, setAttributes, settings } ) {
 	);
 
 	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 +150,7 @@ export function TypographyPanel( { clientId, name, setAttributes, settings } ) {
 			value={ value }
 			onChange={ onChange }
 			defaultControls={ defaultControls }
+			fitText={ fitText }
 		/>
 	);
 }

package/src/store/selectors.js

@@ -2263,6 +2263,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;
@@ -2275,14 +2277,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-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 ) {