@wordpress/block-editor 15.6.5 → 15.6.7

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

@@ -1,12 +1,19 @@
 function findOptimalFontSize(textElement, applyFontSize) {
   const alreadyHasScrollableHeight = textElement.scrollHeight > textElement.clientHeight;
   let minSize = 5;
-  let maxSize = 600;
+  let maxSize = 2400;
   let bestSize = minSize;
+  const computedStyle = window.getComputedStyle(textElement);
+  const paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;
+  const paddingRight = parseFloat(computedStyle.paddingRight) || 0;
+  const range = document.createRange();
+  range.selectNodeContents(textElement);
   while (minSize <= maxSize) {
     const midSize = Math.floor((minSize + maxSize) / 2);
     applyFontSize(midSize);
-    const fitsWidth = textElement.scrollWidth <= textElement.clientWidth;
+    const rect = range.getBoundingClientRect();
+    const textWidth = rect.width;
+    const fitsWidth = textElement.scrollWidth <= textElement.clientWidth && textWidth <= textElement.clientWidth - paddingLeft - paddingRight;
     const fitsHeight = alreadyHasScrollableHeight || textElement.scrollHeight <= textElement.clientHeight;
     if (fitsWidth && fitsHeight) {
       bestSize = midSize;
@@ -15,6 +22,7 @@ function findOptimalFontSize(textElement, applyFontSize) {
       maxSize = midSize - 1;
     }
   }
+  range.detach();
   return bestSize;
 }
 function optimizeFitText(textElement, applyFontSize) {

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"],
-  "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;",
+  "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\tconst computedStyle = window.getComputedStyle( textElement );\n\tconst paddingLeft = parseFloat( computedStyle.paddingLeft ) || 0;\n\tconst paddingRight = parseFloat( computedStyle.paddingRight ) || 0;\n\tconst range = document.createRange();\n\trange.selectNodeContents( textElement );\n\n\twhile ( minSize <= maxSize ) {\n\t\tconst midSize = Math.floor( ( minSize + maxSize ) / 2 );\n\t\tapplyFontSize( midSize );\n\n\t\t// When there is padding if the text overflows to the\n\t\t// padding area, it should be considered overflowing.\n\t\t// Use Range API to measure actual text content dimensions.\n\t\tconst rect = range.getBoundingClientRect();\n\t\tconst textWidth = rect.width;\n\n\t\t// Check if text fits within the element's width and is not\n\t\t// overflowing into the padding area.\n\t\tconst fitsWidth =\n\t\t\ttextElement.scrollWidth <= textElement.clientWidth &&\n\t\t\ttextWidth <= textElement.clientWidth - paddingLeft - paddingRight;\n\t\t// Check if text fits within the element's height.\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\trange.detach();\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,QAAM,gBAAgB,OAAO,iBAAkB,WAAY;AAC3D,QAAM,cAAc,WAAY,cAAc,WAAY,KAAK;AAC/D,QAAM,eAAe,WAAY,cAAc,YAAa,KAAK;AACjE,QAAM,QAAQ,SAAS,YAAY;AACnC,QAAM,mBAAoB,WAAY;AAEtC,SAAQ,WAAW,SAAU;AAC5B,UAAM,UAAU,KAAK,OAAS,UAAU,WAAY,CAAE;AACtD,kBAAe,OAAQ;AAKvB,UAAM,OAAO,MAAM,sBAAsB;AACzC,UAAM,YAAY,KAAK;AAIvB,UAAM,YACL,YAAY,eAAe,YAAY,eACvC,aAAa,YAAY,cAAc,cAAc;AAEtD,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;AACA,QAAM,OAAO;AAEb,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.5",
+	"version": "15.6.7",
 	"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.3",
-		"@wordpress/components": "^30.6.3",
+		"@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.3",
+		"@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.3",
+		"@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": "36643498e343222da980e5ae235d2f8630ad6b4f"
+	"gitHead": "1c473d047a0b8f529f07cc1e23324a6be723bbc9"
 }

package/src/components/block-variation-transforms/index.js

@@ -139,41 +139,102 @@ function VariationsToggleGroupControl( {
 
 function __experimentalBlockVariationTransforms( { blockClientId } ) {
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
-	const { activeBlockVariation, variations, isContentOnly, isSection } =
-		useSelect(
-			( select ) => {
-				const { getActiveBlockVariation, getBlockVariations } =
-					select( blocksStore );
-
-				const {
-					getBlockName,
-					getBlockAttributes,
-					getBlockEditingMode,
-					isSectionBlock,
-				} = unlock( select( blockEditorStore ) );
-
-				const name = blockClientId && getBlockName( blockClientId );
-
-				const { hasContentRoleAttribute } = unlock(
-					select( blocksStore )
-				);
-				const isContentBlock = hasContentRoleAttribute( name );
-
-				return {
-					activeBlockVariation: getActiveBlockVariation(
-						name,
-						getBlockAttributes( blockClientId ),
-						'transform'
-					),
-					variations: name && getBlockVariations( name, 'transform' ),
-					isContentOnly:
-						getBlockEditingMode( blockClientId ) ===
-							'contentOnly' && ! isContentBlock,
-					isSection: isSectionBlock( blockClientId ),
-				};
-			},
-			[ blockClientId ]
-		);
+	const {
+		activeBlockVariation,
+		unfilteredVariations,
+		blockName,
+		isContentOnly,
+		isSection,
+	} = useSelect(
+		( select ) => {
+			const { getActiveBlockVariation, getBlockVariations } =
+				select( blocksStore );
+
+			const {
+				getBlockName,
+				getBlockAttributes,
+				getBlockEditingMode,
+				isSectionBlock,
+			} = unlock( select( blockEditorStore ) );
+
+			const name = blockClientId && getBlockName( blockClientId );
+
+			const { hasContentRoleAttribute } = unlock( select( blocksStore ) );
+			const isContentBlock = hasContentRoleAttribute( name );
+
+			return {
+				activeBlockVariation: getActiveBlockVariation(
+					name,
+					getBlockAttributes( blockClientId ),
+					'transform'
+				),
+				unfilteredVariations:
+					name && getBlockVariations( name, 'transform' ),
+				blockName: name,
+				isContentOnly:
+					getBlockEditingMode( blockClientId ) === 'contentOnly' &&
+					! isContentBlock,
+				isSection: isSectionBlock( blockClientId ),
+			};
+		},
+		[ blockClientId ]
+	);
+
+	/*
+	 * Hack for WordPress 6.9
+	 *
+	 * The Stretchy blocks shipped in 6.9 were ultimately
+	 * implemented as block variations of the base types Paragraph
+	 * and Heading. See #73056 for discussion and trade-offs.
+	 *
+	 * The main drawback of this choice is that the Variations API
+	 * doesn't offer enough control over how prominent and how tied
+	 * to the base type a variation should be.
+	 *
+	 * In order to ship these new "blocks" with an acceptable UX,
+	 * we need two hacks until the Variations API is improved:
+	 *
+	 * - Don't show the variations switcher in the block inspector
+	 *   for Paragraph, Heading, Stretchy Paragraph and Stretchy
+	 *   Heading (implemented below). Transformations are still
+	 *   available in the block switcher.
+	 *
+	 * - Move the stretchy variations to the end of the core blocks
+	 *   list in the block inserter (implemented in
+	 *   getInserterItems in #73056).
+	 */
+	const variations = useMemo( () => {
+		if ( blockName === 'core/paragraph' ) {
+			// Always hide options when active variation is stretchy, but
+			// ensure that there are no third-party variations before doing the
+			// same elsewhere.
+			if (
+				activeBlockVariation?.name === 'stretchy-paragraph' ||
+				unfilteredVariations.every( ( v ) =>
+					[ 'paragraph', 'stretchy-paragraph' ].includes( v.name )
+				)
+			) {
+				return [];
+			}
+			// If there are other variations, only hide the stretchy one.
+			return unfilteredVariations.filter(
+				( v ) => v.name !== 'stretchy-paragraph'
+			);
+		} else if ( blockName === 'core/heading' ) {
+			if (
+				activeBlockVariation?.name === 'stretchy-heading' ||
+				unfilteredVariations.every( ( v ) =>
+					[ 'heading', 'stretchy-heading' ].includes( v.name )
+				)
+			) {
+				return [];
+			}
+			return unfilteredVariations.filter(
+				( v ) => v.name !== 'stretchy-heading'
+			);
+		}
+		return unfilteredVariations;
+	}, [ activeBlockVariation?.name, blockName, unfilteredVariations ] );
 
 	const selectedValue = activeBlockVariation?.name;
 

package/src/components/border-radius-control/single-input-control.js

@@ -74,6 +74,7 @@ export default function SingleInputControl( {
 	const onChangeUnit = ( next ) => {
 		const newUnits = { ...selectedUnits };
 		if ( corner === 'all' ) {
+			newUnits.flat = next;
 			newUnits.topLeft = next;
 			newUnits.topRight = next;
 			newUnits.bottomLeft = next;

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/block-bindings.js

@@ -110,13 +110,17 @@ function BlockBindingsPanelMenuContent( { attribute, binding, sources } ) {
 											key: item.key,
 										},
 									};
-									const values = source.getValues( {
-										select,
-										context: blockContext,
-										bindings: {
-											[ attribute ]: itemBindings,
-										},
-									} );
+									let values = {};
+									try {
+										values = source.getValues( {
+											select,
+											context: blockContext,
+											bindings: {
+												[ attribute ]: itemBindings,
+											},
+										} );
+									} catch ( e ) {}
+
 									return (
 										<Menu.CheckboxItem
 											key={

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,14 +14,31 @@ function findOptimalFontSize( textElement, applyFontSize ) {
 	const alreadyHasScrollableHeight =
 		textElement.scrollHeight > textElement.clientHeight;
 	let minSize = 5;
-	let maxSize = 600;
+	let maxSize = 2400;
 	let bestSize = minSize;
 
+	const computedStyle = window.getComputedStyle( textElement );
+	const paddingLeft = parseFloat( computedStyle.paddingLeft ) || 0;
+	const paddingRight = parseFloat( computedStyle.paddingRight ) || 0;
+	const range = document.createRange();
+	range.selectNodeContents( textElement );
+
 	while ( minSize <= maxSize ) {
 		const midSize = Math.floor( ( minSize + maxSize ) / 2 );
 		applyFontSize( midSize );
 
-		const fitsWidth = textElement.scrollWidth <= textElement.clientWidth;
+		// When there is padding if the text overflows to the
+		// padding area, it should be considered overflowing.
+		// Use Range API to measure actual text content dimensions.
+		const rect = range.getBoundingClientRect();
+		const textWidth = rect.width;
+
+		// Check if text fits within the element's width and is not
+		// overflowing into the padding area.
+		const fitsWidth =
+			textElement.scrollWidth <= textElement.clientWidth &&
+			textWidth <= textElement.clientWidth - paddingLeft - paddingRight;
+		// Check if text fits within the element's height.
 		const fitsHeight =
 			alreadyHasScrollableHeight ||
 			textElement.scrollHeight <= textElement.clientHeight;
@@ -33,6 +50,7 @@ function findOptimalFontSize( textElement, applyFontSize ) {
 			maxSize = midSize - 1;
 		}
 	}
+	range.detach();
 
 	return bestSize;
 }