@wordpress/block-editor 15.5.1-next.ff1cebbba.0 → 15.6.1-next.36001005c.0

package/src/hooks/fit-text.js

@@ -3,7 +3,7 @@
  */
 import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
-import { useEffect, useCallback } from '@wordpress/element';
+import { useEffect, useCallback, useRef } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import {
@@ -62,18 +62,28 @@ function useFitText( { fitText, name, clientId } ) {
 	const hasFitTextSupport = hasBlockSupport( name, FIT_TEXT_SUPPORT_KEY );
 	const blockElement = useBlockElement( clientId );
 
-	// Monitor block attribute changes
+	// Monitor block attribute changes and selection state
 	// Any attribute may change the available space.
-	const blockAttributes = useSelect(
+	const { blockAttributes, isSelected } = useSelect(
 		( select ) => {
 			if ( ! clientId ) {
-				return;
+				return { blockAttributes: undefined, isSelected: false };
 			}
-			return select( blockEditorStore ).getBlockAttributes( clientId );
+			return {
+				blockAttributes:
+					select( blockEditorStore ).getBlockAttributes( clientId ),
+				isSelected:
+					select( blockEditorStore ).isBlockSelected( clientId ),
+			};
 		},
 		[ clientId ]
 	);
 
+	const isSelectedRef = useRef();
+	useEffect( () => {
+		isSelectedRef.current = isSelected;
+	}, [ isSelected ] );
+
 	const applyFitText = useCallback( () => {
 		if ( ! blockElement || ! hasFitTextSupport || ! fitText ) {
 			return;
@@ -94,8 +104,13 @@ function useFitText( { fitText, name, clientId } ) {
 			styleElement.textContent = css;
 		};
 
-		optimizeFitText( blockElement, blockSelector, applyStylesFn );
-	}, [ blockElement, clientId, hasFitTextSupport, fitText ] );
+		// Avoid very jarring resizes when a user is actively editing the
+		// block. Placing a ceiling on how much the block can grow curbs the
+		// effect of the first few keypresses.
+		const maxSize = isSelectedRef.current ? 200 : undefined;
+
+		optimizeFitText( blockElement, blockSelector, applyStylesFn, maxSize );
+	}, [ blockElement, clientId, hasFitTextSupport, fitText, isSelectedRef ] );
 
 	useEffect( () => {
 		if (
@@ -138,17 +153,18 @@ function useFitText( { fitText, name, clientId } ) {
 	// Trigger fit text recalculation when content changes
 	useEffect( () => {
 		if ( fitText && blockElement && hasFitTextSupport ) {
-			// Small delay to ensure DOM has updated after content changes
-			const timer = setTimeout( () => {
+			// Wait for next frame to ensure DOM has updated after content changes
+			const frameId = window.requestAnimationFrame( () => {
 				if ( blockElement ) {
 					applyFitText();
 				}
-			}, 1000 );
+			} );
 
-			return () => clearTimeout( timer );
+			return () => window.cancelAnimationFrame( frameId );
 		}
 	}, [
 		blockAttributes,
+		isSelected,
 		fitText,
 		applyFitText,
 		blockElement,

package/src/hooks/font-size.js

@@ -4,6 +4,7 @@
 import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
 import TokenList from '@wordpress/token-list';
+import { getTypographyFontSizeValue } from '@wordpress/global-styles-engine';
 
 /**
  * Internal dependencies
@@ -21,7 +22,6 @@ import {
 	shouldSkipSerialization,
 } from './utils';
 import { useSettings } from '../components/use-settings';
-import { getTypographyFontSizeValue } from '../components/global-styles/typography-utils';
 
 export const FONT_SIZE_SUPPORT_KEY = 'typography.fontSize';
 

package/src/hooks/use-typography-props.js

@@ -7,13 +7,13 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { privateApis as componentsPrivateApis } from '@wordpress/components';
+import { getTypographyFontSizeValue } from '@wordpress/global-styles-engine';
 
 /**
  * Internal dependencies
  */
 import { getInlineStyles } from './style';
 import { getFontSizeClass } from '../components/font-sizes';
-import { getTypographyFontSizeValue } from '../components/global-styles/typography-utils';
 import { unlock } from '../lock-unlock';
 
 const { kebabCase } = unlock( componentsPrivateApis );

package/src/style.scss

@@ -20,6 +20,7 @@
 @use "./components/block-patterns-paging/style.scss" as *;
 @use "./components/block-popover/style.scss" as *;
 @use "./components/block-preview/style.scss" as *;
+@use "./components/block-quick-navigation/style.scss" as *;
 @use "./components/block-rename/style.scss" as *;
 @use "./components/block-styles/style.scss" as *;
 @use "./components/block-switcher/style.scss" as *;

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

@@ -20,13 +20,18 @@ function generateCSSRule( elementSelector, fontSize ) {
  * @param {HTMLElement} textElement     The text element
  * @param {string}      elementSelector CSS selector for the text element
  * @param {Function}    applyStylesFn   Function to apply test styles
+ * @param {number}      maxSize         Maximum font size in pixels (default: 600)
  * @return {number} Optimal font size
  */
-function findOptimalFontSize( textElement, elementSelector, applyStylesFn ) {
+function findOptimalFontSize(
+	textElement,
+	elementSelector,
+	applyStylesFn,
+	maxSize = 600
+) {
 	const alreadyHasScrollableHeight =
 		textElement.scrollHeight > textElement.clientHeight;
 	let minSize = 5;
-	let maxSize = 600;
 	let bestSize = minSize;
 
 	while ( minSize <= maxSize ) {
@@ -56,8 +61,14 @@ function findOptimalFontSize( textElement, elementSelector, applyStylesFn ) {
  * @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 {number}      maxSize         Maximum font size in pixels.
  */
-export function optimizeFitText( textElement, elementSelector, applyStylesFn ) {
+export function optimizeFitText(
+	textElement,
+	elementSelector,
+	applyStylesFn,
+	maxSize
+) {
 	if ( ! textElement ) {
 		return;
 	}
@@ -67,7 +78,8 @@ export function optimizeFitText( textElement, elementSelector, applyStylesFn ) {
 	const optimalSize = findOptimalFontSize(
 		textElement,
 		elementSelector,
-		applyStylesFn
+		applyStylesFn,
+		maxSize
 	);
 
 	const cssRule = generateCSSRule( elementSelector, optimalSize );

package/tsconfig.json

@@ -14,6 +14,7 @@
 		{ "path": "../dom" },
 		{ "path": "../element" },
 		{ "path": "../escape-html" },
+		{ "path": "../global-styles-engine" },
 		{ "path": "../priority-queue" },
 		{ "path": "../private-apis" },
 		{ "path": "../hooks" },

package/build/components/global-styles/get-block-css-selector.js

@@ -1,78 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var get_block_css_selector_exports = {};
-__export(get_block_css_selector_exports, {
-  getBlockCSSSelector: () => getBlockCSSSelector
-});
-module.exports = __toCommonJS(get_block_css_selector_exports);
-var import_utils = require("./utils");
-var import_object = require("../../utils/object");
-function getBlockCSSSelector(blockType, target = "root", options = {}) {
-  if (!target) {
-    return null;
-  }
-  const { fallback = false } = options;
-  const { name, selectors, supports } = blockType;
-  const hasSelectors = selectors && Object.keys(selectors).length > 0;
-  const path = Array.isArray(target) ? target.join(".") : target;
-  let rootSelector = null;
-  if (hasSelectors && selectors.root) {
-    rootSelector = selectors?.root;
-  } else if (supports?.__experimentalSelector) {
-    rootSelector = supports.__experimentalSelector;
-  } else {
-    rootSelector = ".wp-block-" + name.replace("core/", "").replace("/", "-");
-  }
-  if (path === "root") {
-    return rootSelector;
-  }
-  const pathArray = Array.isArray(target) ? target : target.split(".");
-  if (pathArray.length === 1) {
-    const fallbackSelector = fallback ? rootSelector : null;
-    if (hasSelectors) {
-      const featureSelector2 = (0, import_object.getValueFromObjectPath)(selectors, `${path}.root`, null) || (0, import_object.getValueFromObjectPath)(selectors, path, null);
-      return featureSelector2 || fallbackSelector;
-    }
-    const featureSelector = (0, import_object.getValueFromObjectPath)(
-      supports,
-      `${path}.__experimentalSelector`,
-      null
-    );
-    if (!featureSelector) {
-      return fallbackSelector;
-    }
-    return (0, import_utils.scopeSelector)(rootSelector, featureSelector);
-  }
-  let subfeatureSelector;
-  if (hasSelectors) {
-    subfeatureSelector = (0, import_object.getValueFromObjectPath)(selectors, path, null);
-  }
-  if (subfeatureSelector) {
-    return subfeatureSelector;
-  }
-  if (fallback) {
-    return getBlockCSSSelector(blockType, pathArray[0], options);
-  }
-  return null;
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  getBlockCSSSelector
-});
-//# sourceMappingURL=get-block-css-selector.js.map

package/build/components/global-styles/get-block-css-selector.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/global-styles/get-block-css-selector.js"],
-  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { scopeSelector } from './utils';\nimport { getValueFromObjectPath } from '../../utils/object';\n\n/**\n * Determine the CSS selector for the block type and target provided, returning\n * it if available.\n *\n * @param {import('@wordpress/blocks').Block} blockType        The block's type.\n * @param {string|string[]}                   target           The desired selector's target e.g. `root`, delimited string, or array path.\n * @param {Object}                            options          Options object.\n * @param {boolean}                           options.fallback Whether or not to fallback to broader selector.\n *\n * @return {?string} The CSS selector or `null` if no selector available.\n */\nexport function getBlockCSSSelector(\n\tblockType,\n\ttarget = 'root',\n\toptions = {}\n) {\n\tif ( ! target ) {\n\t\treturn null;\n\t}\n\n\tconst { fallback = false } = options;\n\tconst { name, selectors, supports } = blockType;\n\n\tconst hasSelectors = selectors && Object.keys( selectors ).length > 0;\n\tconst path = Array.isArray( target ) ? target.join( '.' ) : target;\n\n\t// Root selector.\n\n\t// Calculated before returning as it can be used as a fallback for feature\n\t// selectors later on.\n\tlet rootSelector = null;\n\n\tif ( hasSelectors && selectors.root ) {\n\t\t// Use the selectors API if available.\n\t\trootSelector = selectors?.root;\n\t} else if ( supports?.__experimentalSelector ) {\n\t\t// Use the old experimental selector supports property if set.\n\t\trootSelector = supports.__experimentalSelector;\n\t} else {\n\t\t// If no root selector found, generate default block class selector.\n\t\trootSelector =\n\t\t\t'.wp-block-' + name.replace( 'core/', '' ).replace( '/', '-' );\n\t}\n\n\t// Return selector if it's the root target we are looking for.\n\tif ( path === 'root' ) {\n\t\treturn rootSelector;\n\t}\n\n\t// If target is not `root` or `duotone` we have a feature or subfeature\n\t// as the target. If the target is a string convert to an array.\n\tconst pathArray = Array.isArray( target ) ? target : target.split( '.' );\n\n\t// Feature selectors ( may fallback to root selector );\n\tif ( pathArray.length === 1 ) {\n\t\tconst fallbackSelector = fallback ? rootSelector : null;\n\n\t\t// Prefer the selectors API if available.\n\t\tif ( hasSelectors ) {\n\t\t\t// Get selector from either `feature.root` or shorthand path.\n\t\t\tconst featureSelector =\n\t\t\t\tgetValueFromObjectPath( selectors, `${ path }.root`, null ) ||\n\t\t\t\tgetValueFromObjectPath( selectors, path, null );\n\n\t\t\t// Return feature selector if found or any available fallback.\n\t\t\treturn featureSelector || fallbackSelector;\n\t\t}\n\n\t\t// Try getting old experimental supports selector value.\n\t\tconst featureSelector = getValueFromObjectPath(\n\t\t\tsupports,\n\t\t\t`${ path }.__experimentalSelector`,\n\t\t\tnull\n\t\t);\n\n\t\t// If nothing to work with, provide fallback selector if available.\n\t\tif ( ! featureSelector ) {\n\t\t\treturn fallbackSelector;\n\t\t}\n\n\t\t// Scope the feature selector by the block's root selector.\n\t\treturn scopeSelector( rootSelector, featureSelector );\n\t}\n\n\t// Subfeature selector.\n\t// This may fallback either to parent feature or root selector.\n\tlet subfeatureSelector;\n\n\t// Use selectors API if available.\n\tif ( hasSelectors ) {\n\t\tsubfeatureSelector = getValueFromObjectPath( selectors, path, null );\n\t}\n\n\t// Only return if we have a subfeature selector.\n\tif ( subfeatureSelector ) {\n\t\treturn subfeatureSelector;\n\t}\n\n\t// To this point we don't have a subfeature selector. If a fallback has been\n\t// requested, remove subfeature from target path and return results of a\n\t// call for the parent feature's selector.\n\tif ( fallback ) {\n\t\treturn getBlockCSSSelector( blockType, pathArray[ 0 ], options );\n\t}\n\n\t// We tried.\n\treturn null;\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,mBAA8B;AAC9B,oBAAuC;AAahC,SAAS,oBACf,WACA,SAAS,QACT,UAAU,CAAC,GACV;AACD,MAAK,CAAE,QAAS;AACf,WAAO;AAAA,EACR;AAEA,QAAM,EAAE,WAAW,MAAM,IAAI;AAC7B,QAAM,EAAE,MAAM,WAAW,SAAS,IAAI;AAEtC,QAAM,eAAe,aAAa,OAAO,KAAM,SAAU,EAAE,SAAS;AACpE,QAAM,OAAO,MAAM,QAAS,MAAO,IAAI,OAAO,KAAM,GAAI,IAAI;AAM5D,MAAI,eAAe;AAEnB,MAAK,gBAAgB,UAAU,MAAO;AAErC,mBAAe,WAAW;AAAA,EAC3B,WAAY,UAAU,wBAAyB;AAE9C,mBAAe,SAAS;AAAA,EACzB,OAAO;AAEN,mBACC,eAAe,KAAK,QAAS,SAAS,EAAG,EAAE,QAAS,KAAK,GAAI;AAAA,EAC/D;AAGA,MAAK,SAAS,QAAS;AACtB,WAAO;AAAA,EACR;AAIA,QAAM,YAAY,MAAM,QAAS,MAAO,IAAI,SAAS,OAAO,MAAO,GAAI;AAGvE,MAAK,UAAU,WAAW,GAAI;AAC7B,UAAM,mBAAmB,WAAW,eAAe;AAGnD,QAAK,cAAe;AAEnB,YAAMA,uBACL,sCAAwB,WAAW,GAAI,IAAK,SAAS,IAAK,SAC1D,sCAAwB,WAAW,MAAM,IAAK;AAG/C,aAAOA,oBAAmB;AAAA,IAC3B;AAGA,UAAM,sBAAkB;AAAA,MACvB;AAAA,MACA,GAAI,IAAK;AAAA,MACT;AAAA,IACD;AAGA,QAAK,CAAE,iBAAkB;AACxB,aAAO;AAAA,IACR;AAGA,eAAO,4BAAe,cAAc,eAAgB;AAAA,EACrD;AAIA,MAAI;AAGJ,MAAK,cAAe;AACnB,6BAAqB,sCAAwB,WAAW,MAAM,IAAK;AAAA,EACpE;AAGA,MAAK,oBAAqB;AACzB,WAAO;AAAA,EACR;AAKA,MAAK,UAAW;AACf,WAAO,oBAAqB,WAAW,UAAW,CAAE,GAAG,OAAQ;AAAA,EAChE;AAGA,SAAO;AACR;",
-  "names": ["featureSelector"]
-}