@wordpress/block-editor 15.6.2 → 15.6.4

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/utils/fit-text-frontend.js"],
-  "sourcesContent": ["/**\n * Frontend fit text functionality.\n * Automatically detects and initializes fit text on blocks with the has-fit-text class.\n */\n\n/**\n * Internal dependencies\n */\nimport { optimizeFitText } from './fit-text-utils';\n\n/**\n * Counter for generating unique element IDs.\n */\nlet idCounter = 0;\n\n/**\n * Get or create a unique style element for a fit text element.\n *\n * @param {string} elementId Unique identifier for the element.\n * @return {HTMLElement} Style element.\n */\nfunction getOrCreateStyleElement( elementId ) {\n\tconst styleId = `fit-text-${ elementId }`;\n\tlet styleElement = document.getElementById( styleId );\n\tif ( ! styleElement ) {\n\t\tstyleElement = document.createElement( 'style' );\n\t\tstyleElement.id = styleId;\n\t\tdocument.head.appendChild( styleElement );\n\t}\n\treturn styleElement;\n}\n\n/**\n * Generate a unique identifier for a fit text element.\n *\n * @param {HTMLElement} element The element to identify.\n * @return {string} Unique identifier.\n */\nfunction getElementIdentifier( element ) {\n\tif ( ! element.dataset.fitTextId ) {\n\t\telement.dataset.fitTextId = `fit-text-${ ++idCounter }`;\n\t}\n\treturn element.dataset.fitTextId;\n}\n\n/**\n * Initialize fit text functionality for a single element.\n *\n * @param {HTMLElement} element Element with fit text enabled.\n */\nfunction initializeFitText( element ) {\n\tconst elementId = getElementIdentifier( element );\n\n\tconst applyFitText = () => {\n\t\tconst styleElement = getOrCreateStyleElement( elementId );\n\t\tconst elementSelector = `[data-fit-text-id=\\\"${ elementId }\\\"]`;\n\n\t\t// Style management callback\n\t\tconst applyStylesFn = ( css ) => {\n\t\t\tstyleElement.textContent = css;\n\t\t};\n\n\t\toptimizeFitText( element, elementSelector, applyStylesFn );\n\t};\n\n\t// Initial sizing\n\tapplyFitText();\n\n\t// Watch for parent container resize\n\tif ( window.ResizeObserver && element.parentElement ) {\n\t\tconst resizeObserver = new window.ResizeObserver( applyFitText );\n\t\tresizeObserver.observe( element.parentElement );\n\t}\n}\n\n/**\n * Initialize fit text on all elements with the has-fit-text class.\n */\nfunction initializeAllFitText() {\n\tconst elements = document.querySelectorAll( '.has-fit-text' );\n\telements.forEach( initializeFitText );\n}\n\nwindow.addEventListener( 'load', initializeAllFitText );\n"],
-  "mappings": "AAQA,SAAS,uBAAuB;AAKhC,IAAI,YAAY;AAQhB,SAAS,wBAAyB,WAAY;AAC7C,QAAM,UAAU,YAAa,SAAU;AACvC,MAAI,eAAe,SAAS,eAAgB,OAAQ;AACpD,MAAK,CAAE,cAAe;AACrB,mBAAe,SAAS,cAAe,OAAQ;AAC/C,iBAAa,KAAK;AAClB,aAAS,KAAK,YAAa,YAAa;AAAA,EACzC;AACA,SAAO;AACR;AAQA,SAAS,qBAAsB,SAAU;AACxC,MAAK,CAAE,QAAQ,QAAQ,WAAY;AAClC,YAAQ,QAAQ,YAAY,YAAa,EAAE,SAAU;AAAA,EACtD;AACA,SAAO,QAAQ,QAAQ;AACxB;AAOA,SAAS,kBAAmB,SAAU;AACrC,QAAM,YAAY,qBAAsB,OAAQ;AAEhD,QAAM,eAAe,MAAM;AAC1B,UAAM,eAAe,wBAAyB,SAAU;AACxD,UAAM,kBAAkB,sBAAwB,SAAU;AAG1D,UAAM,gBAAgB,CAAE,QAAS;AAChC,mBAAa,cAAc;AAAA,IAC5B;AAEA,oBAAiB,SAAS,iBAAiB,aAAc;AAAA,EAC1D;AAGA,eAAa;AAGb,MAAK,OAAO,kBAAkB,QAAQ,eAAgB;AACrD,UAAM,iBAAiB,IAAI,OAAO,eAAgB,YAAa;AAC/D,mBAAe,QAAS,QAAQ,aAAc;AAAA,EAC/C;AACD;AAKA,SAAS,uBAAuB;AAC/B,QAAM,WAAW,SAAS,iBAAkB,eAAgB;AAC5D,WAAS,QAAS,iBAAkB;AACrC;AAEA,OAAO,iBAAkB,QAAQ,oBAAqB;",
+  "sourcesContent": ["/**\n * Frontend fit text functionality.\n * Automatically detects and initializes fit text on blocks with the has-fit-text class.\n * Supports both initial page load and Interactivity API client-side navigation.\n */\n\n/**\n * WordPress dependencies\n */\nimport { store, getElement, getContext } from '@wordpress/interactivity';\n\n/**\n * Internal dependencies\n */\nimport { optimizeFitText } from './fit-text-utils';\n\n// Initialize via Interactivity API for client-side navigation\nstore( 'core/fit-text', {\n\tcallbacks: {\n\t\tinit() {\n\t\t\tconst context = getContext();\n\t\t\tconst { ref } = getElement();\n\n\t\t\tconst applyFontSize = ( fontSize ) => {\n\t\t\t\tif ( fontSize === 0 ) {\n\t\t\t\t\tref.style.fontSize = '';\n\t\t\t\t} else {\n\t\t\t\t\tref.style.fontSize = `${ fontSize }px`;\n\t\t\t\t}\n\t\t\t};\n\n\t\t\t// Initial fit text optimization.\n\t\t\tcontext.fontSize = optimizeFitText( ref, applyFontSize );\n\n\t\t\t// Starts ResizeObserver to handle dynamic resizing.\n\t\t\tif ( window.ResizeObserver && ref.parentElement ) {\n\t\t\t\tconst resizeObserver = new window.ResizeObserver( () => {\n\t\t\t\t\tcontext.fontSize = optimizeFitText( ref, applyFontSize );\n\t\t\t\t} );\n\t\t\t\tresizeObserver.observe( ref.parentElement );\n\t\t\t\tresizeObserver.observe( ref );\n\n\t\t\t\t// Return cleanup function to be called when element is removed.\n\t\t\t\treturn () => {\n\t\t\t\t\tif ( resizeObserver ) {\n\t\t\t\t\t\tresizeObserver.disconnect();\n\t\t\t\t\t}\n\t\t\t\t};\n\t\t\t}\n\t\t},\n\t},\n} );\n"],
+  "mappings": "AASA,SAAS,OAAO,YAAY,kBAAkB;AAK9C,SAAS,uBAAuB;AAGhC,MAAO,iBAAiB;AAAA,EACvB,WAAW;AAAA,IACV,OAAO;AACN,YAAM,UAAU,WAAW;AAC3B,YAAM,EAAE,IAAI,IAAI,WAAW;AAE3B,YAAM,gBAAgB,CAAE,aAAc;AACrC,YAAK,aAAa,GAAI;AACrB,cAAI,MAAM,WAAW;AAAA,QACtB,OAAO;AACN,cAAI,MAAM,WAAW,GAAI,QAAS;AAAA,QACnC;AAAA,MACD;AAGA,cAAQ,WAAW,gBAAiB,KAAK,aAAc;AAGvD,UAAK,OAAO,kBAAkB,IAAI,eAAgB;AACjD,cAAM,iBAAiB,IAAI,OAAO,eAAgB,MAAM;AACvD,kBAAQ,WAAW,gBAAiB,KAAK,aAAc;AAAA,QACxD,CAAE;AACF,uBAAe,QAAS,IAAI,aAAc;AAC1C,uBAAe,QAAS,GAAI;AAG5B,eAAO,MAAM;AACZ,cAAK,gBAAiB;AACrB,2BAAe,WAAW;AAAA,UAC3B;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA,EACD;AACD,CAAE;",
   "names": []
 }

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

@@ -1,14 +1,11 @@
-function generateCSSRule(elementSelector, fontSize) {
-  return `${elementSelector} { font-size: ${fontSize}px !important; }`;
-}
-function findOptimalFontSize(textElement, elementSelector, applyStylesFn) {
+function findOptimalFontSize(textElement, applyFontSize) {
   const alreadyHasScrollableHeight = textElement.scrollHeight > textElement.clientHeight;
   let minSize = 5;
   let maxSize = 600;
   let bestSize = minSize;
   while (minSize <= maxSize) {
     const midSize = Math.floor((minSize + maxSize) / 2);
-    applyStylesFn(generateCSSRule(elementSelector, midSize));
+    applyFontSize(midSize);
     const fitsWidth = textElement.scrollWidth <= textElement.clientWidth;
     const fitsHeight = alreadyHasScrollableHeight || textElement.scrollHeight <= textElement.clientHeight;
     if (fitsWidth && fitsHeight) {
@@ -20,18 +17,14 @@ function findOptimalFontSize(textElement, elementSelector, applyStylesFn) {
   }
   return bestSize;
 }
-function optimizeFitText(textElement, elementSelector, applyStylesFn) {
+function optimizeFitText(textElement, applyFontSize) {
   if (!textElement) {
     return;
   }
-  applyStylesFn("");
-  const optimalSize = findOptimalFontSize(
-    textElement,
-    elementSelector,
-    applyStylesFn
-  );
-  const cssRule = generateCSSRule(elementSelector, optimalSize);
-  applyStylesFn(cssRule);
+  applyFontSize(0);
+  const optimalSize = findOptimalFontSize(textElement, applyFontSize);
+  applyFontSize(optimalSize);
+  return optimalSize;
 }
 export {
   optimizeFitText

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 * Generate CSS rule for single text element.\n *\n * @param {string} elementSelector CSS selector for the text element\n * @param {number} fontSize        Font size in pixels\n * @return {string} CSS rule string\n */\nfunction generateCSSRule( elementSelector, fontSize ) {\n\treturn `${ elementSelector } { font-size: ${ fontSize }px !important; }`;\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 {string}      elementSelector CSS selector for the text element\n * @param {Function}    applyStylesFn   Function to apply test styles\n * @return {number} Optimal font size\n */\nfunction findOptimalFontSize( textElement, elementSelector, applyStylesFn ) {\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\tapplyStylesFn( generateCSSRule( elementSelector, 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 style management.\n *\n * @param {HTMLElement} textElement     The text element (paragraph, heading, etc.)\n * @param {string}      elementSelector CSS selector for the text element\n * @param {Function}    applyStylesFn   Function to apply CSS styles (pass empty string to clear)\n */\nexport function optimizeFitText( textElement, elementSelector, applyStylesFn ) {\n\tif ( ! textElement ) {\n\t\treturn;\n\t}\n\n\tapplyStylesFn( '' );\n\n\tconst optimalSize = findOptimalFontSize(\n\t\ttextElement,\n\t\telementSelector,\n\t\tapplyStylesFn\n\t);\n\n\tconst cssRule = generateCSSRule( elementSelector, optimalSize );\n\tapplyStylesFn( cssRule );\n}\n"],
-  "mappings": "AAYA,SAAS,gBAAiB,iBAAiB,UAAW;AACrD,SAAO,GAAI,eAAgB,iBAAkB,QAAS;AACvD;AAUA,SAAS,oBAAqB,aAAa,iBAAiB,eAAgB;AAC3E,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,gBAAiB,iBAAiB,OAAQ,CAAE;AAE3D,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;AAUO,SAAS,gBAAiB,aAAa,iBAAiB,eAAgB;AAC9E,MAAK,CAAE,aAAc;AACpB;AAAA,EACD;AAEA,gBAAe,EAAG;AAElB,QAAM,cAAc;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAEA,QAAM,UAAU,gBAAiB,iBAAiB,WAAY;AAC9D,gBAAe,OAAQ;AACxB;",
+  "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;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "15.6.2",
+	"version": "15.6.4",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -62,8 +62,8 @@
 		"@wordpress/blob": "^4.33.1",
 		"@wordpress/block-serialization-default-parser": "^5.33.1",
 		"@wordpress/blocks": "^15.6.1",
-		"@wordpress/commands": "^1.33.1",
-		"@wordpress/components": "^30.6.1",
+		"@wordpress/commands": "^1.33.2",
+		"@wordpress/components": "^30.6.2",
 		"@wordpress/compose": "^7.33.1",
 		"@wordpress/data": "^10.33.1",
 		"@wordpress/date": "^5.33.1",
@@ -75,17 +75,18 @@
 		"@wordpress/html-entities": "^4.33.1",
 		"@wordpress/i18n": "^6.6.1",
 		"@wordpress/icons": "^11.0.1",
+		"@wordpress/interactivity": "^6.33.1",
 		"@wordpress/is-shallow-equal": "^5.33.1",
 		"@wordpress/keyboard-shortcuts": "^5.33.1",
 		"@wordpress/keycodes": "^4.33.1",
 		"@wordpress/notices": "^5.33.1",
-		"@wordpress/preferences": "^4.33.1",
+		"@wordpress/preferences": "^4.33.2",
 		"@wordpress/priority-queue": "^3.33.1",
 		"@wordpress/private-apis": "^1.33.1",
 		"@wordpress/rich-text": "^7.33.1",
 		"@wordpress/style-engine": "^2.33.1",
 		"@wordpress/token-list": "^3.33.1",
-		"@wordpress/upload-media": "^0.18.1",
+		"@wordpress/upload-media": "^0.18.2",
 		"@wordpress/url": "^4.33.1",
 		"@wordpress/warning": "^3.33.1",
 		"@wordpress/wordcount": "^4.33.1",
@@ -111,5 +112,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "45005cc254bab59182927e35a68cd22f6320634d"
+	"gitHead": "2e2a11a11f0c5c9cb2bba2dd40b8046d2a10dc9d"
 }

package/src/components/block-settings-menu/block-settings-dropdown.js

@@ -336,7 +336,10 @@ export function BlockSettingsDropdown( {
 									) }
 									{ count === 1 && (
 										<CommentIconSlotFill.Slot
-											fillProps={ { onClose } }
+											fillProps={ {
+												clientId: firstBlockClientId,
+												onClose,
+											} }
 										/>
 									) }
 								</MenuGroup>

package/src/components/border-radius-control/test/utils.js

@@ -107,6 +107,96 @@ describe( 'getAllValue', () => {
 			expect( getAllValue( undefined ) ).toBe( undefined );
 		} );
 	} );
+
+	describe( 'when provided complex CSS values (clamp, min, max, calc)', () => {
+		it( 'should preserve clamp values when all corners have the same clamp value', () => {
+			const clampValue = 'clamp(1rem, 2vw, 3rem)';
+			const values = {
+				bottomLeft: clampValue,
+				bottomRight: clampValue,
+				topLeft: clampValue,
+				topRight: clampValue,
+			};
+			expect( getAllValue( values ) ).toBe( clampValue );
+		} );
+
+		it( 'should preserve min() values when all corners have the same min value', () => {
+			const minValue = 'min(10px, 5vw)';
+			const values = {
+				bottomLeft: minValue,
+				bottomRight: minValue,
+				topLeft: minValue,
+				topRight: minValue,
+			};
+			expect( getAllValue( values ) ).toBe( minValue );
+		} );
+
+		it( 'should preserve max() values when all corners have the same max value', () => {
+			const maxValue = 'max(20px, 10vw)';
+			const values = {
+				bottomLeft: maxValue,
+				bottomRight: maxValue,
+				topLeft: maxValue,
+				topRight: maxValue,
+			};
+			expect( getAllValue( values ) ).toBe( maxValue );
+		} );
+
+		it( 'should preserve calc() values when all corners have the same calc value', () => {
+			const calcValue = 'calc(100% - 20px)';
+			const values = {
+				bottomLeft: calcValue,
+				bottomRight: calcValue,
+				topLeft: calcValue,
+				topRight: calcValue,
+			};
+			expect( getAllValue( values ) ).toBe( calcValue );
+		} );
+
+		it( 'should return undefined when complex CSS values are mixed', () => {
+			const values = {
+				bottomLeft: 'clamp(1rem, 2vw, 3rem)',
+				bottomRight: 'clamp(1rem, 2vw, 3rem)',
+				topLeft: 'min(10px, 5vw)',
+				topRight: 'clamp(1rem, 2vw, 3rem)',
+			};
+			expect( getAllValue( values ) ).toBe( undefined );
+		} );
+
+		it( 'should return undefined when complex CSS values are mixed with simple values', () => {
+			const values = {
+				bottomLeft: 'clamp(1rem, 2vw, 3rem)',
+				bottomRight: 'clamp(1rem, 2vw, 3rem)',
+				topLeft: '2px',
+				topRight: 'clamp(1rem, 2vw, 3rem)',
+			};
+			expect( getAllValue( values ) ).toBe( undefined );
+		} );
+
+		it( 'should preserve string values that cannot be parsed at all (no numeric prefix)', () => {
+			// Values with no numeric prefix cannot be parsed, so they should be preserved
+			const unparseableValue = 'apples';
+			const values = {
+				bottomLeft: unparseableValue,
+				bottomRight: unparseableValue,
+				topLeft: unparseableValue,
+				topRight: unparseableValue,
+			};
+			expect( getAllValue( values ) ).toBe( unparseableValue );
+		} );
+
+		it( 'should parse numeric prefix from partially parseable values', () => {
+			// Values with numeric prefix get parsed, so "32apples" becomes "32"
+			const partiallyParseableValue = '32apples';
+			const values = {
+				bottomLeft: partiallyParseableValue,
+				bottomRight: partiallyParseableValue,
+				topLeft: partiallyParseableValue,
+				topRight: partiallyParseableValue,
+			};
+			expect( getAllValue( values ) ).toBe( '32' );
+		} );
+	} );
 } );
 
 describe( 'hasMixedValues', () => {

package/src/components/border-radius-control/utils.js

@@ -60,9 +60,13 @@ export function getAllValue( values = {} ) {
 		return values;
 	}
 
-	const parsedQuantitiesAndUnits = Object.values( values ).map( ( value ) =>
-		parseQuantityAndUnitFromRawValue( value )
-	);
+	const parsedQuantitiesAndUnits = Object.values( values ).map( ( value ) => {
+		const newValue = parseQuantityAndUnitFromRawValue( value );
+		if ( typeof value === 'string' && newValue[ 0 ] === undefined ) {
+			return [ value, '' ];
+		}
+		return newValue;
+	} );
 
 	const allValues = parsedQuantitiesAndUnits.map(
 		( value ) => value[ 0 ] ?? ''

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

@@ -146,17 +146,21 @@ export default function BorderPanel( {
 	// Border radius.
 	const showBorderRadius = useHasBorderRadiusControl( settings );
 	const borderRadiusValues = useMemo( () => {
-		if ( typeof border?.radius !== 'object' ) {
-			return border?.radius;
+		if ( typeof inheritedValue?.border?.radius !== 'object' ) {
+			return decodeValue( inheritedValue?.border?.radius );
 		}
 
 		return {
-			topLeft: border?.radius?.topLeft,
-			topRight: border?.radius?.topRight,
-			bottomLeft: border?.radius?.bottomLeft,
-			bottomRight: border?.radius?.bottomRight,
+			topLeft: decodeValue( inheritedValue?.border?.radius?.topLeft ),
+			topRight: decodeValue( inheritedValue?.border?.radius?.topRight ),
+			bottomLeft: decodeValue(
+				inheritedValue?.border?.radius?.bottomLeft
+			),
+			bottomRight: decodeValue(
+				inheritedValue?.border?.radius?.bottomRight
+			),
 		};
-	}, [ border?.radius ] );
+	}, [ inheritedValue?.border?.radius, decodeValue ] );
 	const setBorderRadius = ( newBorderRadius ) =>
 		setBorder( { ...border, radius: newBorderRadius } );
 	const hasBorderRadius = () => {

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

@@ -569,6 +569,7 @@ const PublicForwardedRichTextContainer = forwardRef( ( props, ref ) => {
 		} = removeNativeProps( props );
 		return (
 			<Tag
+				ref={ ref }
 				{ ...contentProps }
 				dangerouslySetInnerHTML={ {
 					__html: valueToHTMLString( value, multiline ),

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/fit-text.js

@@ -11,6 +11,8 @@ import {
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 
+const EMPTY_OBJECT = {};
+
 /**
  * Internal dependencies
  */
@@ -62,14 +64,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 +97,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 +118,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 +177,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( () => {

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

@@ -1,84 +1,52 @@
 /**
  * Frontend fit text functionality.
  * Automatically detects and initializes fit text on blocks with the has-fit-text class.
+ * Supports both initial page load and Interactivity API client-side navigation.
  */
 
 /**
- * Internal dependencies
- */
-import { optimizeFitText } from './fit-text-utils';
-
-/**
- * Counter for generating unique element IDs.
- */
-let idCounter = 0;
-
-/**
- * Get or create a unique style element for a fit text element.
- *
- * @param {string} elementId Unique identifier for the element.
- * @return {HTMLElement} Style element.
- */
-function getOrCreateStyleElement( elementId ) {
-	const styleId = `fit-text-${ elementId }`;
-	let styleElement = document.getElementById( styleId );
-	if ( ! styleElement ) {
-		styleElement = document.createElement( 'style' );
-		styleElement.id = styleId;
-		document.head.appendChild( styleElement );
-	}
-	return styleElement;
-}
-
-/**
- * Generate a unique identifier for a fit text element.
- *
- * @param {HTMLElement} element The element to identify.
- * @return {string} Unique identifier.
+ * WordPress dependencies
  */
-function getElementIdentifier( element ) {
-	if ( ! element.dataset.fitTextId ) {
-		element.dataset.fitTextId = `fit-text-${ ++idCounter }`;
-	}
-	return element.dataset.fitTextId;
-}
+import { store, getElement, getContext } from '@wordpress/interactivity';
 
 /**
- * Initialize fit text functionality for a single element.
- *
- * @param {HTMLElement} element Element with fit text enabled.
- */
-function initializeFitText( element ) {
-	const elementId = getElementIdentifier( element );
-
-	const applyFitText = () => {
-		const styleElement = getOrCreateStyleElement( elementId );
-		const elementSelector = `[data-fit-text-id=\"${ elementId }\"]`;
-
-		// Style management callback
-		const applyStylesFn = ( css ) => {
-			styleElement.textContent = css;
-		};
-
-		optimizeFitText( element, elementSelector, applyStylesFn );
-	};
-
-	// Initial sizing
-	applyFitText();
-
-	// Watch for parent container resize
-	if ( window.ResizeObserver && element.parentElement ) {
-		const resizeObserver = new window.ResizeObserver( applyFitText );
-		resizeObserver.observe( element.parentElement );
-	}
-}
-
-/**
- * Initialize fit text on all elements with the has-fit-text class.
+ * Internal dependencies
  */
-function initializeAllFitText() {
-	const elements = document.querySelectorAll( '.has-fit-text' );
-	elements.forEach( initializeFitText );
-}
+import { optimizeFitText } from './fit-text-utils';
 
-window.addEventListener( 'load', initializeAllFitText );
+// Initialize via Interactivity API for client-side navigation
+store( 'core/fit-text', {
+	callbacks: {
+		init() {
+			const context = getContext();
+			const { ref } = getElement();
+
+			const applyFontSize = ( fontSize ) => {
+				if ( fontSize === 0 ) {
+					ref.style.fontSize = '';
+				} else {
+					ref.style.fontSize = `${ fontSize }px`;
+				}
+			};
+
+			// Initial fit text optimization.
+			context.fontSize = optimizeFitText( ref, applyFontSize );
+
+			// Starts ResizeObserver to handle dynamic resizing.
+			if ( window.ResizeObserver && ref.parentElement ) {
+				const resizeObserver = new window.ResizeObserver( () => {
+					context.fontSize = optimizeFitText( ref, applyFontSize );
+				} );
+				resizeObserver.observe( ref.parentElement );
+				resizeObserver.observe( ref );
+
+				// Return cleanup function to be called when element is removed.
+				return () => {
+					if ( resizeObserver ) {
+						resizeObserver.disconnect();
+					}
+				};
+			}
+		},
+	},
+} );

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

@@ -3,26 +3,14 @@
  * Uses callback-based approach for maximum code reuse between editor and frontend.
  */
 
-/**
- * Generate CSS rule for single text element.
- *
- * @param {string} elementSelector CSS selector for the text element
- * @param {number} fontSize        Font size in pixels
- * @return {string} CSS rule string
- */
-function generateCSSRule( elementSelector, fontSize ) {
-	return `${ elementSelector } { font-size: ${ fontSize }px !important; }`;
-}
-
 /**
  * Find optimal font size using simple binary search between 5-600px.
  *
- * @param {HTMLElement} textElement     The text element
- * @param {string}      elementSelector CSS selector for the text element
- * @param {Function}    applyStylesFn   Function to apply test styles
+ * @param {HTMLElement} textElement   The text element
+ * @param {Function}    applyFontSize Function that receives font size in pixels
  * @return {number} Optimal font size
  */
-function findOptimalFontSize( textElement, elementSelector, applyStylesFn ) {
+function findOptimalFontSize( textElement, applyFontSize ) {
 	const alreadyHasScrollableHeight =
 		textElement.scrollHeight > textElement.clientHeight;
 	let minSize = 5;
@@ -31,7 +19,7 @@ function findOptimalFontSize( textElement, elementSelector, applyStylesFn ) {
 
 	while ( minSize <= maxSize ) {
 		const midSize = Math.floor( ( minSize + maxSize ) / 2 );
-		applyStylesFn( generateCSSRule( elementSelector, midSize ) );
+		applyFontSize( midSize );
 
 		const fitsWidth = textElement.scrollWidth <= textElement.clientWidth;
 		const fitsHeight =
@@ -51,25 +39,20 @@ function findOptimalFontSize( textElement, elementSelector, applyStylesFn ) {
 
 /**
  * Complete fit text optimization for a single text element.
- * Handles the full flow using callbacks for style management.
+ * Handles the full flow using callbacks for font size application.
  *
- * @param {HTMLElement} textElement     The text element (paragraph, heading, etc.)
- * @param {string}      elementSelector CSS selector for the text element
- * @param {Function}    applyStylesFn   Function to apply CSS styles (pass empty string to clear)
+ * @param {HTMLElement} textElement   The text element (paragraph, heading, etc.)
+ * @param {Function}    applyFontSize Function that receives font size in pixels (0 to clear, >0 to apply)
  */
-export function optimizeFitText( textElement, elementSelector, applyStylesFn ) {
+export function optimizeFitText( textElement, applyFontSize ) {
 	if ( ! textElement ) {
 		return;
 	}
 
-	applyStylesFn( '' );
+	applyFontSize( 0 );
 
-	const optimalSize = findOptimalFontSize(
-		textElement,
-		elementSelector,
-		applyStylesFn
-	);
+	const optimalSize = findOptimalFontSize( textElement, applyFontSize );
 
-	const cssRule = generateCSSRule( elementSelector, optimalSize );
-	applyStylesFn( cssRule );
+	applyFontSize( optimalSize );
+	return optimalSize;
 }

package/tsconfig.json

@@ -20,6 +20,7 @@
 		{ "path": "../html-entities" },
 		{ "path": "../i18n" },
 		{ "path": "../icons" },
+		{ "path": "../interactivity" },
 		{ "path": "../is-shallow-equal" },
 		{ "path": "../keycodes" },
 		{ "path": "../notices" },