@wordpress/block-editor 15.5.1-next.b8c8708f3.0 → 15.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +2 -0
- package/build/components/block-edit/edit.js +2 -2
- package/build/components/block-edit/edit.js.map +2 -2
- package/build/hooks/fit-text.js +17 -8
- package/build/hooks/fit-text.js.map +2 -2
- package/build/utils/fit-text-utils.js +4 -4
- package/build/utils/fit-text-utils.js.map +2 -2
- package/build-module/components/block-edit/edit.js +2 -2
- package/build-module/components/block-edit/edit.js.map +2 -2
- package/build-module/hooks/fit-text.js +18 -9
- package/build-module/hooks/fit-text.js.map +2 -2
- package/build-module/utils/fit-text-utils.js +4 -4
- package/build-module/utils/fit-text-utils.js.map +2 -2
- package/build-style/content-rtl.css +4 -0
- package/build-style/content.css +4 -0
- package/package.json +35 -35
- package/src/components/block-edit/edit.js +2 -2
- package/src/components/link-control/test/index.js +7 -6
- package/src/components/rich-text/content.scss +5 -0
- package/src/hooks/fit-text.js +27 -11
- package/src/utils/fit-text-utils.js +16 -4
package/CHANGELOG.md
CHANGED
|
@@ -109,7 +109,7 @@ const EditWithGeneratedProps = (props) => {
|
|
|
109
109
|
)) {
|
|
110
110
|
const { source: sourceName, args: sourceArgs } = binding;
|
|
111
111
|
const source = registeredSources[sourceName];
|
|
112
|
-
if (!source || !bindableAttributes
|
|
112
|
+
if (!source || !bindableAttributes?.includes(attributeName)) {
|
|
113
113
|
continue;
|
|
114
114
|
}
|
|
115
115
|
blockBindingsBySource.set(source, {
|
|
@@ -172,7 +172,7 @@ const EditWithGeneratedProps = (props) => {
|
|
|
172
172
|
for (const [attributeName, newValue] of Object.entries(
|
|
173
173
|
keptAttributes
|
|
174
174
|
)) {
|
|
175
|
-
if (!blockBindings[attributeName] || !bindableAttributes
|
|
175
|
+
if (!blockBindings[attributeName] || !bindableAttributes?.includes(attributeName)) {
|
|
176
176
|
continue;
|
|
177
177
|
}
|
|
178
178
|
const binding = blockBindings[attributeName];
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/block-edit/edit.js"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tgetBlockDefaultClassName,\n\tgetBlockType,\n\thasBlockSupport,\n\tstore as blocksStore,\n} from '@wordpress/blocks';\nimport { withFilters } from '@wordpress/components';\nimport { useRegistry, useSelect } from '@wordpress/data';\nimport { useCallback, useContext, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BlockContext from '../block-context';\nimport isURLLike from '../link-control/is-url-like';\nimport {\n\thasPatternOverridesDefaultBinding,\n\treplacePatternOverridesDefaultBinding,\n} from '../../utils/block-bindings';\nimport { unlock } from '../../lock-unlock';\nimport { PrivateBlockContext } from '../block-list/private-block-context';\n\n/**\n * Default value used for blocks which do not define their own context needs,\n * used to guarantee that a block's `context` prop will always be an object. It\n * is assigned as a constant since it is always expected to be an empty object,\n * and in order to avoid unnecessary React reconciliations of a changing object.\n *\n * @type {{}}\n */\nconst DEFAULT_BLOCK_CONTEXT = {};\n\nconst Edit = ( props ) => {\n\tconst { name } = props;\n\tconst blockType = getBlockType( name );\n\n\tif ( ! blockType ) {\n\t\treturn null;\n\t}\n\n\t// `edit` and `save` are functions or components describing the markup\n\t// with which a block is displayed. If `blockType` is valid, assign\n\t// them preferentially as the render value for the block.\n\tconst Component = blockType.edit || blockType.save;\n\n\treturn <Component { ...props } />;\n};\n\nconst EditWithFilters = withFilters( 'editor.BlockEdit' )( Edit );\n\nconst EditWithGeneratedProps = ( props ) => {\n\tconst { name, clientId, attributes, setAttributes } = props;\n\tconst registry = useRegistry();\n\tconst blockType = getBlockType( name );\n\tconst blockContext = useContext( BlockContext );\n\tconst registeredSources = useSelect(\n\t\t( select ) =>\n\t\t\tunlock( select( blocksStore ) ).getAllBlockBindingsSources(),\n\t\t[]\n\t);\n\tconst { bindableAttributes } = useContext( PrivateBlockContext );\n\n\tconst { blockBindings, context, hasPatternOverrides } = useMemo( () => {\n\t\t// Assign context values using the block type's declared context needs.\n\t\tconst computedContext = blockType?.usesContext\n\t\t\t? Object.fromEntries(\n\t\t\t\t\tObject.entries( blockContext ).filter( ( [ key ] ) =>\n\t\t\t\t\t\tblockType.usesContext.includes( key )\n\t\t\t\t\t)\n\t\t\t )\n\t\t\t: DEFAULT_BLOCK_CONTEXT;\n\t\t// Add context requested by Block Bindings sources.\n\t\tif ( attributes?.metadata?.bindings ) {\n\t\t\tObject.values( attributes?.metadata?.bindings || {} ).forEach(\n\t\t\t\t( binding ) => {\n\t\t\t\t\tregisteredSources[ binding?.source ]?.usesContext?.forEach(\n\t\t\t\t\t\t( key ) => {\n\t\t\t\t\t\t\tcomputedContext[ key ] = blockContext[ key ];\n\t\t\t\t\t\t}\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t\treturn {\n\t\t\tblockBindings: replacePatternOverridesDefaultBinding(\n\t\t\t\tattributes?.metadata?.bindings,\n\t\t\t\tbindableAttributes\n\t\t\t),\n\t\t\tcontext: computedContext,\n\t\t\thasPatternOverrides: hasPatternOverridesDefaultBinding(\n\t\t\t\tattributes?.metadata?.bindings\n\t\t\t),\n\t\t};\n\t}, [\n\t\tname,\n\t\tblockType?.usesContext,\n\t\tblockContext,\n\t\tattributes?.metadata?.bindings,\n\t\tregisteredSources,\n\t] );\n\n\tconst computedAttributes = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! blockBindings ) {\n\t\t\t\treturn attributes;\n\t\t\t}\n\n\t\t\tconst attributesFromSources = {};\n\t\t\tconst blockBindingsBySource = new Map();\n\n\t\t\tfor ( const [ attributeName, binding ] of Object.entries(\n\t\t\t\tblockBindings\n\t\t\t) ) {\n\t\t\t\tconst { source: sourceName, args: sourceArgs } = binding;\n\t\t\t\tconst source = registeredSources[ sourceName ];\n\t\t\t\tif (\n\t\t\t\t\t! source ||\n\t\t\t\t\t! bindableAttributes
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqDQ;AAlDR,kBAAiB;AAKjB,oBAKO;AACP,wBAA4B;AAC5B,kBAAuC;AACvC,qBAAiD;AAKjD,2BAAyB;AACzB,yBAAsB;AACtB,4BAGO;AACP,yBAAuB;AACvB,mCAAoC;AAUpC,MAAM,wBAAwB,CAAC;AAE/B,MAAM,OAAO,CAAE,UAAW;AACzB,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,gBAAY,4BAAc,IAAK;AAErC,MAAK,CAAE,WAAY;AAClB,WAAO;AAAA,EACR;AAKA,QAAM,YAAY,UAAU,QAAQ,UAAU;AAE9C,SAAO,4CAAC,aAAY,GAAG,OAAQ;AAChC;AAEA,MAAM,sBAAkB,+BAAa,kBAAmB,EAAG,IAAK;AAEhE,MAAM,yBAAyB,CAAE,UAAW;AAC3C,QAAM,EAAE,MAAM,UAAU,YAAY,cAAc,IAAI;AACtD,QAAM,eAAW,yBAAY;AAC7B,QAAM,gBAAY,4BAAc,IAAK;AACrC,QAAM,mBAAe,2BAAY,qBAAAA,OAAa;AAC9C,QAAM,wBAAoB;AAAA,IACzB,CAAE,eACD,2BAAQ,OAAQ,cAAAC,KAAY,CAAE,EAAE,2BAA2B;AAAA,IAC5D,CAAC;AAAA,EACF;AACA,QAAM,EAAE,mBAAmB,QAAI,2BAAY,gDAAoB;AAE/D,QAAM,EAAE,eAAe,SAAS,oBAAoB,QAAI,wBAAS,MAAM;AAEtE,UAAM,kBAAkB,WAAW,cAChC,OAAO;AAAA,MACP,OAAO,QAAS,YAAa,EAAE;AAAA,QAAQ,CAAE,CAAE,GAAI,MAC9C,UAAU,YAAY,SAAU,GAAI;AAAA,MACrC;AAAA,IACA,IACA;AAEH,QAAK,YAAY,UAAU,UAAW;AACrC,aAAO,OAAQ,YAAY,UAAU,YAAY,CAAC,CAAE,EAAE;AAAA,QACrD,CAAE,YAAa;AACd,4BAAmB,SAAS,MAAO,GAAG,aAAa;AAAA,YAClD,CAAE,QAAS;AACV,8BAAiB,GAAI,IAAI,aAAc,GAAI;AAAA,YAC5C;AAAA,UACD;AAAA,QACD;AAAA,MACD;AAAA,IACD;AACA,WAAO;AAAA,MACN,mBAAe;AAAA,QACd,YAAY,UAAU;AAAA,QACtB;AAAA,MACD;AAAA,MACA,SAAS;AAAA,MACT,yBAAqB;AAAA,QACpB,YAAY,UAAU;AAAA,MACvB;AAAA,IACD;AAAA,EACD,GAAG;AAAA,IACF;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,YAAY,UAAU;AAAA,IACtB;AAAA,EACD,CAAE;AAEF,QAAM,yBAAqB;AAAA,IAC1B,CAAE,WAAY;AACb,UAAK,CAAE,eAAgB;AACtB,eAAO;AAAA,MACR;AAEA,YAAM,wBAAwB,CAAC;AAC/B,YAAM,wBAAwB,oBAAI,IAAI;AAEtC,iBAAY,CAAE,eAAe,OAAQ,KAAK,OAAO;AAAA,QAChD;AAAA,MACD,GAAI;AACH,cAAM,EAAE,QAAQ,YAAY,MAAM,WAAW,IAAI;AACjD,cAAM,SAAS,kBAAmB,UAAW;AAC7C,YACC,CAAE,UACF,CAAE,
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tgetBlockDefaultClassName,\n\tgetBlockType,\n\thasBlockSupport,\n\tstore as blocksStore,\n} from '@wordpress/blocks';\nimport { withFilters } from '@wordpress/components';\nimport { useRegistry, useSelect } from '@wordpress/data';\nimport { useCallback, useContext, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BlockContext from '../block-context';\nimport isURLLike from '../link-control/is-url-like';\nimport {\n\thasPatternOverridesDefaultBinding,\n\treplacePatternOverridesDefaultBinding,\n} from '../../utils/block-bindings';\nimport { unlock } from '../../lock-unlock';\nimport { PrivateBlockContext } from '../block-list/private-block-context';\n\n/**\n * Default value used for blocks which do not define their own context needs,\n * used to guarantee that a block's `context` prop will always be an object. It\n * is assigned as a constant since it is always expected to be an empty object,\n * and in order to avoid unnecessary React reconciliations of a changing object.\n *\n * @type {{}}\n */\nconst DEFAULT_BLOCK_CONTEXT = {};\n\nconst Edit = ( props ) => {\n\tconst { name } = props;\n\tconst blockType = getBlockType( name );\n\n\tif ( ! blockType ) {\n\t\treturn null;\n\t}\n\n\t// `edit` and `save` are functions or components describing the markup\n\t// with which a block is displayed. If `blockType` is valid, assign\n\t// them preferentially as the render value for the block.\n\tconst Component = blockType.edit || blockType.save;\n\n\treturn <Component { ...props } />;\n};\n\nconst EditWithFilters = withFilters( 'editor.BlockEdit' )( Edit );\n\nconst EditWithGeneratedProps = ( props ) => {\n\tconst { name, clientId, attributes, setAttributes } = props;\n\tconst registry = useRegistry();\n\tconst blockType = getBlockType( name );\n\tconst blockContext = useContext( BlockContext );\n\tconst registeredSources = useSelect(\n\t\t( select ) =>\n\t\t\tunlock( select( blocksStore ) ).getAllBlockBindingsSources(),\n\t\t[]\n\t);\n\tconst { bindableAttributes } = useContext( PrivateBlockContext );\n\n\tconst { blockBindings, context, hasPatternOverrides } = useMemo( () => {\n\t\t// Assign context values using the block type's declared context needs.\n\t\tconst computedContext = blockType?.usesContext\n\t\t\t? Object.fromEntries(\n\t\t\t\t\tObject.entries( blockContext ).filter( ( [ key ] ) =>\n\t\t\t\t\t\tblockType.usesContext.includes( key )\n\t\t\t\t\t)\n\t\t\t )\n\t\t\t: DEFAULT_BLOCK_CONTEXT;\n\t\t// Add context requested by Block Bindings sources.\n\t\tif ( attributes?.metadata?.bindings ) {\n\t\t\tObject.values( attributes?.metadata?.bindings || {} ).forEach(\n\t\t\t\t( binding ) => {\n\t\t\t\t\tregisteredSources[ binding?.source ]?.usesContext?.forEach(\n\t\t\t\t\t\t( key ) => {\n\t\t\t\t\t\t\tcomputedContext[ key ] = blockContext[ key ];\n\t\t\t\t\t\t}\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t\treturn {\n\t\t\tblockBindings: replacePatternOverridesDefaultBinding(\n\t\t\t\tattributes?.metadata?.bindings,\n\t\t\t\tbindableAttributes\n\t\t\t),\n\t\t\tcontext: computedContext,\n\t\t\thasPatternOverrides: hasPatternOverridesDefaultBinding(\n\t\t\t\tattributes?.metadata?.bindings\n\t\t\t),\n\t\t};\n\t}, [\n\t\tname,\n\t\tblockType?.usesContext,\n\t\tblockContext,\n\t\tattributes?.metadata?.bindings,\n\t\tregisteredSources,\n\t] );\n\n\tconst computedAttributes = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! blockBindings ) {\n\t\t\t\treturn attributes;\n\t\t\t}\n\n\t\t\tconst attributesFromSources = {};\n\t\t\tconst blockBindingsBySource = new Map();\n\n\t\t\tfor ( const [ attributeName, binding ] of Object.entries(\n\t\t\t\tblockBindings\n\t\t\t) ) {\n\t\t\t\tconst { source: sourceName, args: sourceArgs } = binding;\n\t\t\t\tconst source = registeredSources[ sourceName ];\n\t\t\t\tif (\n\t\t\t\t\t! source ||\n\t\t\t\t\t! bindableAttributes?.includes( attributeName )\n\t\t\t\t) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tblockBindingsBySource.set( source, {\n\t\t\t\t\t...blockBindingsBySource.get( source ),\n\t\t\t\t\t[ attributeName ]: {\n\t\t\t\t\t\targs: sourceArgs,\n\t\t\t\t\t},\n\t\t\t\t} );\n\t\t\t}\n\n\t\t\tif ( blockBindingsBySource.size ) {\n\t\t\t\tfor ( const [ source, bindings ] of blockBindingsBySource ) {\n\t\t\t\t\t// Get values in batch if the source supports it.\n\t\t\t\t\tlet values = {};\n\t\t\t\t\tif ( ! source.getValues ) {\n\t\t\t\t\t\tObject.keys( bindings ).forEach( ( attr ) => {\n\t\t\t\t\t\t\t// Default to the the source label when `getValues` doesn't exist.\n\t\t\t\t\t\t\tvalues[ attr ] = source.label;\n\t\t\t\t\t\t} );\n\t\t\t\t\t} else {\n\t\t\t\t\t\tvalues = source.getValues( {\n\t\t\t\t\t\t\tselect,\n\t\t\t\t\t\t\tcontext,\n\t\t\t\t\t\t\tclientId,\n\t\t\t\t\t\t\tbindings,\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\t\t\t\t\tfor ( const [ attributeName, value ] of Object.entries(\n\t\t\t\t\t\tvalues\n\t\t\t\t\t) ) {\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\tattributeName === 'url' &&\n\t\t\t\t\t\t\t( ! value || ! isURLLike( value ) )\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t// Return null if value is not a valid URL.\n\t\t\t\t\t\t\tattributesFromSources[ attributeName ] = null;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tattributesFromSources[ attributeName ] = value;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\t...attributes,\n\t\t\t\t...attributesFromSources,\n\t\t\t};\n\t\t},\n\t\t[\n\t\t\tattributes,\n\t\t\tbindableAttributes,\n\t\t\tblockBindings,\n\t\t\tclientId,\n\t\t\tcontext,\n\t\t\tname,\n\t\t\tregisteredSources,\n\t\t]\n\t);\n\n\tconst setBoundAttributes = useCallback(\n\t\t( nextAttributes ) => {\n\t\t\tif ( ! blockBindings ) {\n\t\t\t\tsetAttributes( nextAttributes );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tregistry.batch( () => {\n\t\t\t\tconst keptAttributes = { ...nextAttributes };\n\t\t\t\tconst blockBindingsBySource = new Map();\n\n\t\t\t\t// Loop only over the updated attributes to avoid modifying the bound ones that haven't changed.\n\t\t\t\tfor ( const [ attributeName, newValue ] of Object.entries(\n\t\t\t\t\tkeptAttributes\n\t\t\t\t) ) {\n\t\t\t\t\tif (\n\t\t\t\t\t\t! blockBindings[ attributeName ] ||\n\t\t\t\t\t\t! bindableAttributes?.includes( attributeName )\n\t\t\t\t\t) {\n\t\t\t\t\t\tcontinue;\n\t\t\t\t\t}\n\n\t\t\t\t\tconst binding = blockBindings[ attributeName ];\n\t\t\t\t\tconst source = registeredSources[ binding?.source ];\n\t\t\t\t\tif ( ! source?.setValues ) {\n\t\t\t\t\t\tcontinue;\n\t\t\t\t\t}\n\t\t\t\t\tblockBindingsBySource.set( source, {\n\t\t\t\t\t\t...blockBindingsBySource.get( source ),\n\t\t\t\t\t\t[ attributeName ]: {\n\t\t\t\t\t\t\targs: binding.args,\n\t\t\t\t\t\t\tnewValue,\n\t\t\t\t\t\t},\n\t\t\t\t\t} );\n\t\t\t\t\tdelete keptAttributes[ attributeName ];\n\t\t\t\t}\n\n\t\t\t\tif ( blockBindingsBySource.size ) {\n\t\t\t\t\tfor ( const [\n\t\t\t\t\t\tsource,\n\t\t\t\t\t\tbindings,\n\t\t\t\t\t] of blockBindingsBySource ) {\n\t\t\t\t\t\tsource.setValues( {\n\t\t\t\t\t\t\tselect: registry.select,\n\t\t\t\t\t\t\tdispatch: registry.dispatch,\n\t\t\t\t\t\t\tcontext,\n\t\t\t\t\t\t\tclientId,\n\t\t\t\t\t\t\tbindings,\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tconst hasParentPattern = !! context[ 'pattern/overrides' ];\n\n\t\t\t\tif (\n\t\t\t\t\t// Don't update non-connected attributes if the block is using pattern overrides\n\t\t\t\t\t// and the editing is happening while overriding the pattern (not editing the original).\n\t\t\t\t\t! ( hasPatternOverrides && hasParentPattern ) &&\n\t\t\t\t\tObject.keys( keptAttributes ).length\n\t\t\t\t) {\n\t\t\t\t\t// Don't update caption and href until they are supported.\n\t\t\t\t\tif ( hasPatternOverrides ) {\n\t\t\t\t\t\tdelete keptAttributes.caption;\n\t\t\t\t\t\tdelete keptAttributes.href;\n\t\t\t\t\t}\n\t\t\t\t\tsetAttributes( keptAttributes );\n\t\t\t\t}\n\t\t\t} );\n\t\t},\n\t\t[\n\t\t\tbindableAttributes,\n\t\t\tblockBindings,\n\t\t\tclientId,\n\t\t\tcontext,\n\t\t\thasPatternOverrides,\n\t\t\tsetAttributes,\n\t\t\tregisteredSources,\n\t\t\tname,\n\t\t\tregistry,\n\t\t]\n\t);\n\n\tif ( ! blockType ) {\n\t\treturn null;\n\t}\n\n\tif ( blockType.apiVersion > 1 ) {\n\t\treturn (\n\t\t\t<EditWithFilters\n\t\t\t\t{ ...props }\n\t\t\t\tattributes={ computedAttributes }\n\t\t\t\tcontext={ context }\n\t\t\t\tsetAttributes={ setBoundAttributes }\n\t\t\t/>\n\t\t);\n\t}\n\n\t// Generate a class name for the block's editable form.\n\tconst generatedClassName = hasBlockSupport( blockType, 'className', true )\n\t\t? getBlockDefaultClassName( name )\n\t\t: null;\n\tconst className = clsx(\n\t\tgeneratedClassName,\n\t\tattributes?.className,\n\t\tprops.className\n\t);\n\n\treturn (\n\t\t<EditWithFilters\n\t\t\t{ ...props }\n\t\t\tattributes={ computedAttributes }\n\t\t\tclassName={ className }\n\t\t\tcontext={ context }\n\t\t\tsetAttributes={ setBoundAttributes }\n\t\t/>\n\t);\n};\n\nexport default EditWithGeneratedProps;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["BlockContext", "blocksStore", "isURLLike", "clsx"]
|
|
7
7
|
}
|
package/build/hooks/fit-text.js
CHANGED
|
@@ -65,15 +65,22 @@ function addAttributes(settings) {
|
|
|
65
65
|
function useFitText({ fitText, name, clientId }) {
|
|
66
66
|
const hasFitTextSupport2 = (0, import_blocks.hasBlockSupport)(name, FIT_TEXT_SUPPORT_KEY);
|
|
67
67
|
const blockElement = (0, import_use_block_refs.useBlockElement)(clientId);
|
|
68
|
-
const blockAttributes = (0, import_data.useSelect)(
|
|
68
|
+
const { blockAttributes, isSelected } = (0, import_data.useSelect)(
|
|
69
69
|
(select) => {
|
|
70
70
|
if (!clientId) {
|
|
71
|
-
return;
|
|
71
|
+
return { blockAttributes: void 0, isSelected: false };
|
|
72
72
|
}
|
|
73
|
-
return
|
|
73
|
+
return {
|
|
74
|
+
blockAttributes: select(import_store.store).getBlockAttributes(clientId),
|
|
75
|
+
isSelected: select(import_store.store).isBlockSelected(clientId)
|
|
76
|
+
};
|
|
74
77
|
},
|
|
75
78
|
[clientId]
|
|
76
79
|
);
|
|
80
|
+
const isSelectedRef = (0, import_element.useRef)();
|
|
81
|
+
(0, import_element.useEffect)(() => {
|
|
82
|
+
isSelectedRef.current = isSelected;
|
|
83
|
+
}, [isSelected]);
|
|
77
84
|
const applyFitText = (0, import_element.useCallback)(() => {
|
|
78
85
|
if (!blockElement || !hasFitTextSupport2 || !fitText) {
|
|
79
86
|
return;
|
|
@@ -89,8 +96,9 @@ function useFitText({ fitText, name, clientId }) {
|
|
|
89
96
|
const applyStylesFn = (css) => {
|
|
90
97
|
styleElement.textContent = css;
|
|
91
98
|
};
|
|
92
|
-
|
|
93
|
-
|
|
99
|
+
const maxSize = isSelectedRef.current ? 200 : void 0;
|
|
100
|
+
(0, import_fit_text_utils.optimizeFitText)(blockElement, blockSelector, applyStylesFn, maxSize);
|
|
101
|
+
}, [blockElement, clientId, hasFitTextSupport2, fitText, isSelectedRef]);
|
|
94
102
|
(0, import_element.useEffect)(() => {
|
|
95
103
|
if (!fitText || !blockElement || !clientId || !hasFitTextSupport2) {
|
|
96
104
|
return;
|
|
@@ -115,15 +123,16 @@ function useFitText({ fitText, name, clientId }) {
|
|
|
115
123
|
}, [fitText, clientId, applyFitText, blockElement, hasFitTextSupport2]);
|
|
116
124
|
(0, import_element.useEffect)(() => {
|
|
117
125
|
if (fitText && blockElement && hasFitTextSupport2) {
|
|
118
|
-
const
|
|
126
|
+
const frameId = window.requestAnimationFrame(() => {
|
|
119
127
|
if (blockElement) {
|
|
120
128
|
applyFitText();
|
|
121
129
|
}
|
|
122
|
-
}
|
|
123
|
-
return () =>
|
|
130
|
+
});
|
|
131
|
+
return () => window.cancelAnimationFrame(frameId);
|
|
124
132
|
}
|
|
125
133
|
}, [
|
|
126
134
|
blockAttributes,
|
|
135
|
+
isSelected,
|
|
127
136
|
fitText,
|
|
128
137
|
applyFitText,
|
|
129
138
|
blockElement,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/hooks/fit-text.js"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { addFilter } from '@wordpress/hooks';\nimport { hasBlockSupport } from '@wordpress/blocks';\nimport { useEffect, useCallback } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tToggleControl,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { optimizeFitText } from '../utils/fit-text-utils';\nimport { store as blockEditorStore } from '../store';\nimport { useBlockElement } from '../components/block-list/use-block-props/use-block-refs';\nimport InspectorControls from '../components/inspector-controls';\n\nexport const FIT_TEXT_SUPPORT_KEY = 'typography.fitText';\n\n/**\n * Filters registered block settings, extending attributes to include\n * the `fitText` attribute.\n *\n * @param {Object} settings Original block settings.\n * @return {Object} Filtered block settings.\n */\nfunction addAttributes( settings ) {\n\tif ( ! hasBlockSupport( settings, FIT_TEXT_SUPPORT_KEY ) ) {\n\t\treturn settings;\n\t}\n\n\t// Allow blocks to specify their own attribute definition.\n\tif ( settings.attributes?.fitText ) {\n\t\treturn settings;\n\t}\n\n\t// Add fitText attribute.\n\treturn {\n\t\t...settings,\n\t\tattributes: {\n\t\t\t...settings.attributes,\n\t\t\tfitText: {\n\t\t\t\ttype: 'boolean',\n\t\t\t},\n\t\t},\n\t};\n}\n\n/**\n * Custom hook to handle fit text functionality in the editor.\n *\n * @param {Object} props Component props.\n * @param {?boolean} props.fitText Fit text attribute.\n * @param {string} props.name Block name.\n * @param {string} props.clientId Block client ID.\n */\nfunction useFitText( { fitText, name, clientId } ) {\n\tconst hasFitTextSupport = hasBlockSupport( name, FIT_TEXT_SUPPORT_KEY );\n\tconst blockElement = useBlockElement( clientId );\n\n\t// Monitor block attribute changes\n\t// Any attribute may change the available space.\n\tconst blockAttributes = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! clientId ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\treturn
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { addFilter } from '@wordpress/hooks';\nimport { hasBlockSupport } from '@wordpress/blocks';\nimport { useEffect, useCallback, useRef } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tToggleControl,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { optimizeFitText } from '../utils/fit-text-utils';\nimport { store as blockEditorStore } from '../store';\nimport { useBlockElement } from '../components/block-list/use-block-props/use-block-refs';\nimport InspectorControls from '../components/inspector-controls';\n\nexport const FIT_TEXT_SUPPORT_KEY = 'typography.fitText';\n\n/**\n * Filters registered block settings, extending attributes to include\n * the `fitText` attribute.\n *\n * @param {Object} settings Original block settings.\n * @return {Object} Filtered block settings.\n */\nfunction addAttributes( settings ) {\n\tif ( ! hasBlockSupport( settings, FIT_TEXT_SUPPORT_KEY ) ) {\n\t\treturn settings;\n\t}\n\n\t// Allow blocks to specify their own attribute definition.\n\tif ( settings.attributes?.fitText ) {\n\t\treturn settings;\n\t}\n\n\t// Add fitText attribute.\n\treturn {\n\t\t...settings,\n\t\tattributes: {\n\t\t\t...settings.attributes,\n\t\t\tfitText: {\n\t\t\t\ttype: 'boolean',\n\t\t\t},\n\t\t},\n\t};\n}\n\n/**\n * Custom hook to handle fit text functionality in the editor.\n *\n * @param {Object} props Component props.\n * @param {?boolean} props.fitText Fit text attribute.\n * @param {string} props.name Block name.\n * @param {string} props.clientId Block client ID.\n */\nfunction useFitText( { fitText, name, clientId } ) {\n\tconst hasFitTextSupport = hasBlockSupport( name, FIT_TEXT_SUPPORT_KEY );\n\tconst blockElement = useBlockElement( clientId );\n\n\t// Monitor block attribute changes and selection state\n\t// Any attribute may change the available space.\n\tconst { blockAttributes, isSelected } = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! clientId ) {\n\t\t\t\treturn { blockAttributes: undefined, isSelected: false };\n\t\t\t}\n\t\t\treturn {\n\t\t\t\tblockAttributes:\n\t\t\t\t\tselect( blockEditorStore ).getBlockAttributes( clientId ),\n\t\t\t\tisSelected:\n\t\t\t\t\tselect( blockEditorStore ).isBlockSelected( clientId ),\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\n\tconst isSelectedRef = useRef();\n\tuseEffect( () => {\n\t\tisSelectedRef.current = isSelected;\n\t}, [ isSelected ] );\n\n\tconst applyFitText = useCallback( () => {\n\t\tif ( ! blockElement || ! hasFitTextSupport || ! fitText ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Get or create style element with unique ID\n\t\tconst styleId = `fit-text-${ clientId }`;\n\t\tlet styleElement = blockElement.ownerDocument.getElementById( styleId );\n\t\tif ( ! styleElement ) {\n\t\t\tstyleElement = blockElement.ownerDocument.createElement( 'style' );\n\t\t\tstyleElement.id = styleId;\n\t\t\tblockElement.ownerDocument.head.appendChild( styleElement );\n\t\t}\n\n\t\tconst blockSelector = `#block-${ clientId }`;\n\n\t\tconst applyStylesFn = ( css ) => {\n\t\t\tstyleElement.textContent = css;\n\t\t};\n\n\t\t// Avoid very jarring resizes when a user is actively editing the\n\t\t// block. Placing a ceiling on how much the block can grow curbs the\n\t\t// effect of the first few keypresses.\n\t\tconst maxSize = isSelectedRef.current ? 200 : undefined;\n\n\t\toptimizeFitText( blockElement, blockSelector, applyStylesFn, maxSize );\n\t}, [ blockElement, clientId, hasFitTextSupport, fitText, isSelectedRef ] );\n\n\tuseEffect( () => {\n\t\tif (\n\t\t\t! fitText ||\n\t\t\t! blockElement ||\n\t\t\t! clientId ||\n\t\t\t! hasFitTextSupport\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Apply initially\n\t\tapplyFitText();\n\n\t\t// Store current element value for cleanup\n\t\tconst currentElement = blockElement;\n\n\t\t// Watch for size changes\n\t\tlet resizeObserver;\n\t\tif ( window.ResizeObserver && currentElement.parentElement ) {\n\t\t\tresizeObserver = new window.ResizeObserver( applyFitText );\n\t\t\tresizeObserver.observe( currentElement.parentElement );\n\t\t}\n\n\t\t// Cleanup function\n\t\treturn () => {\n\t\t\tif ( resizeObserver ) {\n\t\t\t\tresizeObserver.disconnect();\n\t\t\t}\n\n\t\t\tconst styleId = `fit-text-${ clientId }`;\n\t\t\tconst styleElement =\n\t\t\t\tcurrentElement.ownerDocument.getElementById( styleId );\n\t\t\tif ( styleElement ) {\n\t\t\t\tstyleElement.remove();\n\t\t\t}\n\t\t};\n\t}, [ fitText, clientId, applyFitText, blockElement, hasFitTextSupport ] );\n\n\t// Trigger fit text recalculation when content changes\n\tuseEffect( () => {\n\t\tif ( fitText && blockElement && hasFitTextSupport ) {\n\t\t\t// Wait for next frame to ensure DOM has updated after content changes\n\t\t\tconst frameId = window.requestAnimationFrame( () => {\n\t\t\t\tif ( blockElement ) {\n\t\t\t\t\tapplyFitText();\n\t\t\t\t}\n\t\t\t} );\n\n\t\t\treturn () => window.cancelAnimationFrame( frameId );\n\t\t}\n\t}, [\n\t\tblockAttributes,\n\t\tisSelected,\n\t\tfitText,\n\t\tapplyFitText,\n\t\tblockElement,\n\t\thasFitTextSupport,\n\t] );\n}\n\n/**\n * Fit text control component for the typography panel.\n *\n * @param {Object} props Component props.\n * @param {string} props.clientId Block client ID.\n * @param {Function} props.setAttributes Function to set block attributes.\n * @param {string} props.name Block name.\n * @param {boolean} props.fitText Whether fit text is enabled.\n */\nexport function FitTextControl( {\n\tclientId,\n\tfitText = false,\n\tsetAttributes,\n\tname,\n} ) {\n\tif ( ! hasBlockSupport( name, FIT_TEXT_SUPPORT_KEY ) ) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<InspectorControls group=\"typography\">\n\t\t\t<ToolsPanelItem\n\t\t\t\thasValue={ () => fitText }\n\t\t\t\tlabel={ __( 'Fit text' ) }\n\t\t\t\tonDeselect={ () => setAttributes( { fitText: undefined } ) }\n\t\t\t\tresetAllFilter={ () => ( { fitText: undefined } ) }\n\t\t\t\tpanelId={ clientId }\n\t\t\t>\n\t\t\t\t<ToggleControl\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\tlabel={ __( 'Fit text' ) }\n\t\t\t\t\tchecked={ fitText }\n\t\t\t\t\tonChange={ () =>\n\t\t\t\t\t\tsetAttributes( { fitText: ! fitText || undefined } )\n\t\t\t\t\t}\n\t\t\t\t\thelp={\n\t\t\t\t\t\tfitText\n\t\t\t\t\t\t\t? __( 'Text will resize to fit its container.' )\n\t\t\t\t\t\t\t: __( 'Resize text to fit its container.' )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</ToolsPanelItem>\n\t\t</InspectorControls>\n\t);\n}\n\n/**\n * Override props applied to the block element on save.\n *\n * @param {Object} props Additional props applied to the block element.\n * @param {Object} blockType Block type.\n * @param {Object} attributes Block attributes.\n * @return {Object} Filtered props applied to the block element.\n */\nfunction addSaveProps( props, blockType, attributes ) {\n\tif ( ! hasBlockSupport( blockType, FIT_TEXT_SUPPORT_KEY ) ) {\n\t\treturn props;\n\t}\n\n\tconst { fitText } = attributes;\n\n\tif ( ! fitText ) {\n\t\treturn props;\n\t}\n\n\t// Add CSS class for frontend detection and styling\n\tconst className = props.className\n\t\t? `${ props.className } has-fit-text`\n\t\t: 'has-fit-text';\n\n\treturn {\n\t\t...props,\n\t\tclassName,\n\t};\n}\n/**\n * Override props applied to the block element in the editor.\n *\n * @param {Object} props Component props including block attributes.\n * @param {string} props.name Block name.\n * @param {boolean} props.fitText Whether fit text is enabled.\n * @param {string} props.clientId Block client ID.\n * @return {Object} Filtered props applied to the block element.\n */\nfunction useBlockProps( { name, fitText, clientId } ) {\n\tuseFitText( { fitText, name, clientId } );\n\tif ( ! fitText || ! hasBlockSupport( name, FIT_TEXT_SUPPORT_KEY ) ) {\n\t\treturn {};\n\t}\n\treturn {\n\t\tclassName: 'has-fit-text',\n\t};\n}\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'core/fit-text/addAttribute',\n\taddAttributes\n);\n\nconst hasFitTextSupport = ( blockNameOrType ) => {\n\treturn hasBlockSupport( blockNameOrType, FIT_TEXT_SUPPORT_KEY );\n};\n\nexport default {\n\tuseBlockProps,\n\taddSaveProps,\n\tattributeKeys: [ 'fitText' ],\n\thasSupport: hasFitTextSupport,\n\tedit: FitTextControl,\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["hasFitTextSupport", "blockEditorStore", "InspectorControls", "ToolsPanelItem"]
|
|
7
7
|
}
|
|
@@ -24,10 +24,9 @@ module.exports = __toCommonJS(fit_text_utils_exports);
|
|
|
24
24
|
function generateCSSRule(elementSelector, fontSize) {
|
|
25
25
|
return `${elementSelector} { font-size: ${fontSize}px !important; }`;
|
|
26
26
|
}
|
|
27
|
-
function findOptimalFontSize(textElement, elementSelector, applyStylesFn) {
|
|
27
|
+
function findOptimalFontSize(textElement, elementSelector, applyStylesFn, maxSize = 600) {
|
|
28
28
|
const alreadyHasScrollableHeight = textElement.scrollHeight > textElement.clientHeight;
|
|
29
29
|
let minSize = 5;
|
|
30
|
-
let maxSize = 600;
|
|
31
30
|
let bestSize = minSize;
|
|
32
31
|
while (minSize <= maxSize) {
|
|
33
32
|
const midSize = Math.floor((minSize + maxSize) / 2);
|
|
@@ -43,7 +42,7 @@ function findOptimalFontSize(textElement, elementSelector, applyStylesFn) {
|
|
|
43
42
|
}
|
|
44
43
|
return bestSize;
|
|
45
44
|
}
|
|
46
|
-
function optimizeFitText(textElement, elementSelector, applyStylesFn) {
|
|
45
|
+
function optimizeFitText(textElement, elementSelector, applyStylesFn, maxSize) {
|
|
47
46
|
if (!textElement) {
|
|
48
47
|
return;
|
|
49
48
|
}
|
|
@@ -51,7 +50,8 @@ function optimizeFitText(textElement, elementSelector, applyStylesFn) {
|
|
|
51
50
|
const optimalSize = findOptimalFontSize(
|
|
52
51
|
textElement,
|
|
53
52
|
elementSelector,
|
|
54
|
-
applyStylesFn
|
|
53
|
+
applyStylesFn,
|
|
54
|
+
maxSize
|
|
55
55
|
);
|
|
56
56
|
const cssRule = generateCSSRule(elementSelector, optimalSize);
|
|
57
57
|
applyStylesFn(cssRule);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/utils/fit-text-utils.js"],
|
|
4
|
-
"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(
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAYA,SAAS,gBAAiB,iBAAiB,UAAW;AACrD,SAAO,GAAI,eAAgB,iBAAkB,QAAS;AACvD;
|
|
4
|
+
"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 * @param {number} maxSize Maximum font size in pixels (default: 600)\n * @return {number} Optimal font size\n */\nfunction findOptimalFontSize(\n\ttextElement,\n\telementSelector,\n\tapplyStylesFn,\n\tmaxSize = 600\n) {\n\tconst alreadyHasScrollableHeight =\n\t\ttextElement.scrollHeight > textElement.clientHeight;\n\tlet minSize = 5;\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 * @param {number} maxSize Maximum font size in pixels.\n */\nexport function optimizeFitText(\n\ttextElement,\n\telementSelector,\n\tapplyStylesFn,\n\tmaxSize\n) {\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\tmaxSize\n\t);\n\n\tconst cssRule = generateCSSRule( elementSelector, optimalSize );\n\tapplyStylesFn( cssRule );\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAYA,SAAS,gBAAiB,iBAAiB,UAAW;AACrD,SAAO,GAAI,eAAgB,iBAAkB,QAAS;AACvD;AAWA,SAAS,oBACR,aACA,iBACA,eACA,UAAU,KACT;AACD,QAAM,6BACL,YAAY,eAAe,YAAY;AACxC,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;AAWO,SAAS,gBACf,aACA,iBACA,eACA,SACC;AACD,MAAK,CAAE,aAAc;AACpB;AAAA,EACD;AAEA,gBAAe,EAAG;AAElB,QAAM,cAAc;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAEA,QAAM,UAAU,gBAAiB,iBAAiB,WAAY;AAC9D,gBAAe,OAAQ;AACxB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -84,7 +84,7 @@ const EditWithGeneratedProps = (props) => {
|
|
|
84
84
|
)) {
|
|
85
85
|
const { source: sourceName, args: sourceArgs } = binding;
|
|
86
86
|
const source = registeredSources[sourceName];
|
|
87
|
-
if (!source || !bindableAttributes
|
|
87
|
+
if (!source || !bindableAttributes?.includes(attributeName)) {
|
|
88
88
|
continue;
|
|
89
89
|
}
|
|
90
90
|
blockBindingsBySource.set(source, {
|
|
@@ -147,7 +147,7 @@ const EditWithGeneratedProps = (props) => {
|
|
|
147
147
|
for (const [attributeName, newValue] of Object.entries(
|
|
148
148
|
keptAttributes
|
|
149
149
|
)) {
|
|
150
|
-
if (!blockBindings[attributeName] || !bindableAttributes
|
|
150
|
+
if (!blockBindings[attributeName] || !bindableAttributes?.includes(attributeName)) {
|
|
151
151
|
continue;
|
|
152
152
|
}
|
|
153
153
|
const binding = blockBindings[attributeName];
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/block-edit/edit.js"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tgetBlockDefaultClassName,\n\tgetBlockType,\n\thasBlockSupport,\n\tstore as blocksStore,\n} from '@wordpress/blocks';\nimport { withFilters } from '@wordpress/components';\nimport { useRegistry, useSelect } from '@wordpress/data';\nimport { useCallback, useContext, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BlockContext from '../block-context';\nimport isURLLike from '../link-control/is-url-like';\nimport {\n\thasPatternOverridesDefaultBinding,\n\treplacePatternOverridesDefaultBinding,\n} from '../../utils/block-bindings';\nimport { unlock } from '../../lock-unlock';\nimport { PrivateBlockContext } from '../block-list/private-block-context';\n\n/**\n * Default value used for blocks which do not define their own context needs,\n * used to guarantee that a block's `context` prop will always be an object. It\n * is assigned as a constant since it is always expected to be an empty object,\n * and in order to avoid unnecessary React reconciliations of a changing object.\n *\n * @type {{}}\n */\nconst DEFAULT_BLOCK_CONTEXT = {};\n\nconst Edit = ( props ) => {\n\tconst { name } = props;\n\tconst blockType = getBlockType( name );\n\n\tif ( ! blockType ) {\n\t\treturn null;\n\t}\n\n\t// `edit` and `save` are functions or components describing the markup\n\t// with which a block is displayed. If `blockType` is valid, assign\n\t// them preferentially as the render value for the block.\n\tconst Component = blockType.edit || blockType.save;\n\n\treturn <Component { ...props } />;\n};\n\nconst EditWithFilters = withFilters( 'editor.BlockEdit' )( Edit );\n\nconst EditWithGeneratedProps = ( props ) => {\n\tconst { name, clientId, attributes, setAttributes } = props;\n\tconst registry = useRegistry();\n\tconst blockType = getBlockType( name );\n\tconst blockContext = useContext( BlockContext );\n\tconst registeredSources = useSelect(\n\t\t( select ) =>\n\t\t\tunlock( select( blocksStore ) ).getAllBlockBindingsSources(),\n\t\t[]\n\t);\n\tconst { bindableAttributes } = useContext( PrivateBlockContext );\n\n\tconst { blockBindings, context, hasPatternOverrides } = useMemo( () => {\n\t\t// Assign context values using the block type's declared context needs.\n\t\tconst computedContext = blockType?.usesContext\n\t\t\t? Object.fromEntries(\n\t\t\t\t\tObject.entries( blockContext ).filter( ( [ key ] ) =>\n\t\t\t\t\t\tblockType.usesContext.includes( key )\n\t\t\t\t\t)\n\t\t\t )\n\t\t\t: DEFAULT_BLOCK_CONTEXT;\n\t\t// Add context requested by Block Bindings sources.\n\t\tif ( attributes?.metadata?.bindings ) {\n\t\t\tObject.values( attributes?.metadata?.bindings || {} ).forEach(\n\t\t\t\t( binding ) => {\n\t\t\t\t\tregisteredSources[ binding?.source ]?.usesContext?.forEach(\n\t\t\t\t\t\t( key ) => {\n\t\t\t\t\t\t\tcomputedContext[ key ] = blockContext[ key ];\n\t\t\t\t\t\t}\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t\treturn {\n\t\t\tblockBindings: replacePatternOverridesDefaultBinding(\n\t\t\t\tattributes?.metadata?.bindings,\n\t\t\t\tbindableAttributes\n\t\t\t),\n\t\t\tcontext: computedContext,\n\t\t\thasPatternOverrides: hasPatternOverridesDefaultBinding(\n\t\t\t\tattributes?.metadata?.bindings\n\t\t\t),\n\t\t};\n\t}, [\n\t\tname,\n\t\tblockType?.usesContext,\n\t\tblockContext,\n\t\tattributes?.metadata?.bindings,\n\t\tregisteredSources,\n\t] );\n\n\tconst computedAttributes = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! blockBindings ) {\n\t\t\t\treturn attributes;\n\t\t\t}\n\n\t\t\tconst attributesFromSources = {};\n\t\t\tconst blockBindingsBySource = new Map();\n\n\t\t\tfor ( const [ attributeName, binding ] of Object.entries(\n\t\t\t\tblockBindings\n\t\t\t) ) {\n\t\t\t\tconst { source: sourceName, args: sourceArgs } = binding;\n\t\t\t\tconst source = registeredSources[ sourceName ];\n\t\t\t\tif (\n\t\t\t\t\t! source ||\n\t\t\t\t\t! bindableAttributes
|
|
5
|
-
"mappings": "AAqDQ;AAlDR,OAAO,UAAU;AAKjB;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,OACH;AACP,SAAS,mBAAmB;AAC5B,SAAS,aAAa,iBAAiB;AACvC,SAAS,aAAa,YAAY,eAAe;AAKjD,OAAO,kBAAkB;AACzB,OAAO,eAAe;AACtB;AAAA,EACC;AAAA,EACA;AAAA,OACM;AACP,SAAS,cAAc;AACvB,SAAS,2BAA2B;AAUpC,MAAM,wBAAwB,CAAC;AAE/B,MAAM,OAAO,CAAE,UAAW;AACzB,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,YAAY,aAAc,IAAK;AAErC,MAAK,CAAE,WAAY;AAClB,WAAO;AAAA,EACR;AAKA,QAAM,YAAY,UAAU,QAAQ,UAAU;AAE9C,SAAO,oBAAC,aAAY,GAAG,OAAQ;AAChC;AAEA,MAAM,kBAAkB,YAAa,kBAAmB,EAAG,IAAK;AAEhE,MAAM,yBAAyB,CAAE,UAAW;AAC3C,QAAM,EAAE,MAAM,UAAU,YAAY,cAAc,IAAI;AACtD,QAAM,WAAW,YAAY;AAC7B,QAAM,YAAY,aAAc,IAAK;AACrC,QAAM,eAAe,WAAY,YAAa;AAC9C,QAAM,oBAAoB;AAAA,IACzB,CAAE,WACD,OAAQ,OAAQ,WAAY,CAAE,EAAE,2BAA2B;AAAA,IAC5D,CAAC;AAAA,EACF;AACA,QAAM,EAAE,mBAAmB,IAAI,WAAY,mBAAoB;AAE/D,QAAM,EAAE,eAAe,SAAS,oBAAoB,IAAI,QAAS,MAAM;AAEtE,UAAM,kBAAkB,WAAW,cAChC,OAAO;AAAA,MACP,OAAO,QAAS,YAAa,EAAE;AAAA,QAAQ,CAAE,CAAE,GAAI,MAC9C,UAAU,YAAY,SAAU,GAAI;AAAA,MACrC;AAAA,IACA,IACA;AAEH,QAAK,YAAY,UAAU,UAAW;AACrC,aAAO,OAAQ,YAAY,UAAU,YAAY,CAAC,CAAE,EAAE;AAAA,QACrD,CAAE,YAAa;AACd,4BAAmB,SAAS,MAAO,GAAG,aAAa;AAAA,YAClD,CAAE,QAAS;AACV,8BAAiB,GAAI,IAAI,aAAc,GAAI;AAAA,YAC5C;AAAA,UACD;AAAA,QACD;AAAA,MACD;AAAA,IACD;AACA,WAAO;AAAA,MACN,eAAe;AAAA,QACd,YAAY,UAAU;AAAA,QACtB;AAAA,MACD;AAAA,MACA,SAAS;AAAA,MACT,qBAAqB;AAAA,QACpB,YAAY,UAAU;AAAA,MACvB;AAAA,IACD;AAAA,EACD,GAAG;AAAA,IACF;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,YAAY,UAAU;AAAA,IACtB;AAAA,EACD,CAAE;AAEF,QAAM,qBAAqB;AAAA,IAC1B,CAAE,WAAY;AACb,UAAK,CAAE,eAAgB;AACtB,eAAO;AAAA,MACR;AAEA,YAAM,wBAAwB,CAAC;AAC/B,YAAM,wBAAwB,oBAAI,IAAI;AAEtC,iBAAY,CAAE,eAAe,OAAQ,KAAK,OAAO;AAAA,QAChD;AAAA,MACD,GAAI;AACH,cAAM,EAAE,QAAQ,YAAY,MAAM,WAAW,IAAI;AACjD,cAAM,SAAS,kBAAmB,UAAW;AAC7C,YACC,CAAE,UACF,CAAE,
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tgetBlockDefaultClassName,\n\tgetBlockType,\n\thasBlockSupport,\n\tstore as blocksStore,\n} from '@wordpress/blocks';\nimport { withFilters } from '@wordpress/components';\nimport { useRegistry, useSelect } from '@wordpress/data';\nimport { useCallback, useContext, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BlockContext from '../block-context';\nimport isURLLike from '../link-control/is-url-like';\nimport {\n\thasPatternOverridesDefaultBinding,\n\treplacePatternOverridesDefaultBinding,\n} from '../../utils/block-bindings';\nimport { unlock } from '../../lock-unlock';\nimport { PrivateBlockContext } from '../block-list/private-block-context';\n\n/**\n * Default value used for blocks which do not define their own context needs,\n * used to guarantee that a block's `context` prop will always be an object. It\n * is assigned as a constant since it is always expected to be an empty object,\n * and in order to avoid unnecessary React reconciliations of a changing object.\n *\n * @type {{}}\n */\nconst DEFAULT_BLOCK_CONTEXT = {};\n\nconst Edit = ( props ) => {\n\tconst { name } = props;\n\tconst blockType = getBlockType( name );\n\n\tif ( ! blockType ) {\n\t\treturn null;\n\t}\n\n\t// `edit` and `save` are functions or components describing the markup\n\t// with which a block is displayed. If `blockType` is valid, assign\n\t// them preferentially as the render value for the block.\n\tconst Component = blockType.edit || blockType.save;\n\n\treturn <Component { ...props } />;\n};\n\nconst EditWithFilters = withFilters( 'editor.BlockEdit' )( Edit );\n\nconst EditWithGeneratedProps = ( props ) => {\n\tconst { name, clientId, attributes, setAttributes } = props;\n\tconst registry = useRegistry();\n\tconst blockType = getBlockType( name );\n\tconst blockContext = useContext( BlockContext );\n\tconst registeredSources = useSelect(\n\t\t( select ) =>\n\t\t\tunlock( select( blocksStore ) ).getAllBlockBindingsSources(),\n\t\t[]\n\t);\n\tconst { bindableAttributes } = useContext( PrivateBlockContext );\n\n\tconst { blockBindings, context, hasPatternOverrides } = useMemo( () => {\n\t\t// Assign context values using the block type's declared context needs.\n\t\tconst computedContext = blockType?.usesContext\n\t\t\t? Object.fromEntries(\n\t\t\t\t\tObject.entries( blockContext ).filter( ( [ key ] ) =>\n\t\t\t\t\t\tblockType.usesContext.includes( key )\n\t\t\t\t\t)\n\t\t\t )\n\t\t\t: DEFAULT_BLOCK_CONTEXT;\n\t\t// Add context requested by Block Bindings sources.\n\t\tif ( attributes?.metadata?.bindings ) {\n\t\t\tObject.values( attributes?.metadata?.bindings || {} ).forEach(\n\t\t\t\t( binding ) => {\n\t\t\t\t\tregisteredSources[ binding?.source ]?.usesContext?.forEach(\n\t\t\t\t\t\t( key ) => {\n\t\t\t\t\t\t\tcomputedContext[ key ] = blockContext[ key ];\n\t\t\t\t\t\t}\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t\treturn {\n\t\t\tblockBindings: replacePatternOverridesDefaultBinding(\n\t\t\t\tattributes?.metadata?.bindings,\n\t\t\t\tbindableAttributes\n\t\t\t),\n\t\t\tcontext: computedContext,\n\t\t\thasPatternOverrides: hasPatternOverridesDefaultBinding(\n\t\t\t\tattributes?.metadata?.bindings\n\t\t\t),\n\t\t};\n\t}, [\n\t\tname,\n\t\tblockType?.usesContext,\n\t\tblockContext,\n\t\tattributes?.metadata?.bindings,\n\t\tregisteredSources,\n\t] );\n\n\tconst computedAttributes = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! blockBindings ) {\n\t\t\t\treturn attributes;\n\t\t\t}\n\n\t\t\tconst attributesFromSources = {};\n\t\t\tconst blockBindingsBySource = new Map();\n\n\t\t\tfor ( const [ attributeName, binding ] of Object.entries(\n\t\t\t\tblockBindings\n\t\t\t) ) {\n\t\t\t\tconst { source: sourceName, args: sourceArgs } = binding;\n\t\t\t\tconst source = registeredSources[ sourceName ];\n\t\t\t\tif (\n\t\t\t\t\t! source ||\n\t\t\t\t\t! bindableAttributes?.includes( attributeName )\n\t\t\t\t) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tblockBindingsBySource.set( source, {\n\t\t\t\t\t...blockBindingsBySource.get( source ),\n\t\t\t\t\t[ attributeName ]: {\n\t\t\t\t\t\targs: sourceArgs,\n\t\t\t\t\t},\n\t\t\t\t} );\n\t\t\t}\n\n\t\t\tif ( blockBindingsBySource.size ) {\n\t\t\t\tfor ( const [ source, bindings ] of blockBindingsBySource ) {\n\t\t\t\t\t// Get values in batch if the source supports it.\n\t\t\t\t\tlet values = {};\n\t\t\t\t\tif ( ! source.getValues ) {\n\t\t\t\t\t\tObject.keys( bindings ).forEach( ( attr ) => {\n\t\t\t\t\t\t\t// Default to the the source label when `getValues` doesn't exist.\n\t\t\t\t\t\t\tvalues[ attr ] = source.label;\n\t\t\t\t\t\t} );\n\t\t\t\t\t} else {\n\t\t\t\t\t\tvalues = source.getValues( {\n\t\t\t\t\t\t\tselect,\n\t\t\t\t\t\t\tcontext,\n\t\t\t\t\t\t\tclientId,\n\t\t\t\t\t\t\tbindings,\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\t\t\t\t\tfor ( const [ attributeName, value ] of Object.entries(\n\t\t\t\t\t\tvalues\n\t\t\t\t\t) ) {\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\tattributeName === 'url' &&\n\t\t\t\t\t\t\t( ! value || ! isURLLike( value ) )\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t// Return null if value is not a valid URL.\n\t\t\t\t\t\t\tattributesFromSources[ attributeName ] = null;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tattributesFromSources[ attributeName ] = value;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\t...attributes,\n\t\t\t\t...attributesFromSources,\n\t\t\t};\n\t\t},\n\t\t[\n\t\t\tattributes,\n\t\t\tbindableAttributes,\n\t\t\tblockBindings,\n\t\t\tclientId,\n\t\t\tcontext,\n\t\t\tname,\n\t\t\tregisteredSources,\n\t\t]\n\t);\n\n\tconst setBoundAttributes = useCallback(\n\t\t( nextAttributes ) => {\n\t\t\tif ( ! blockBindings ) {\n\t\t\t\tsetAttributes( nextAttributes );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tregistry.batch( () => {\n\t\t\t\tconst keptAttributes = { ...nextAttributes };\n\t\t\t\tconst blockBindingsBySource = new Map();\n\n\t\t\t\t// Loop only over the updated attributes to avoid modifying the bound ones that haven't changed.\n\t\t\t\tfor ( const [ attributeName, newValue ] of Object.entries(\n\t\t\t\t\tkeptAttributes\n\t\t\t\t) ) {\n\t\t\t\t\tif (\n\t\t\t\t\t\t! blockBindings[ attributeName ] ||\n\t\t\t\t\t\t! bindableAttributes?.includes( attributeName )\n\t\t\t\t\t) {\n\t\t\t\t\t\tcontinue;\n\t\t\t\t\t}\n\n\t\t\t\t\tconst binding = blockBindings[ attributeName ];\n\t\t\t\t\tconst source = registeredSources[ binding?.source ];\n\t\t\t\t\tif ( ! source?.setValues ) {\n\t\t\t\t\t\tcontinue;\n\t\t\t\t\t}\n\t\t\t\t\tblockBindingsBySource.set( source, {\n\t\t\t\t\t\t...blockBindingsBySource.get( source ),\n\t\t\t\t\t\t[ attributeName ]: {\n\t\t\t\t\t\t\targs: binding.args,\n\t\t\t\t\t\t\tnewValue,\n\t\t\t\t\t\t},\n\t\t\t\t\t} );\n\t\t\t\t\tdelete keptAttributes[ attributeName ];\n\t\t\t\t}\n\n\t\t\t\tif ( blockBindingsBySource.size ) {\n\t\t\t\t\tfor ( const [\n\t\t\t\t\t\tsource,\n\t\t\t\t\t\tbindings,\n\t\t\t\t\t] of blockBindingsBySource ) {\n\t\t\t\t\t\tsource.setValues( {\n\t\t\t\t\t\t\tselect: registry.select,\n\t\t\t\t\t\t\tdispatch: registry.dispatch,\n\t\t\t\t\t\t\tcontext,\n\t\t\t\t\t\t\tclientId,\n\t\t\t\t\t\t\tbindings,\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tconst hasParentPattern = !! context[ 'pattern/overrides' ];\n\n\t\t\t\tif (\n\t\t\t\t\t// Don't update non-connected attributes if the block is using pattern overrides\n\t\t\t\t\t// and the editing is happening while overriding the pattern (not editing the original).\n\t\t\t\t\t! ( hasPatternOverrides && hasParentPattern ) &&\n\t\t\t\t\tObject.keys( keptAttributes ).length\n\t\t\t\t) {\n\t\t\t\t\t// Don't update caption and href until they are supported.\n\t\t\t\t\tif ( hasPatternOverrides ) {\n\t\t\t\t\t\tdelete keptAttributes.caption;\n\t\t\t\t\t\tdelete keptAttributes.href;\n\t\t\t\t\t}\n\t\t\t\t\tsetAttributes( keptAttributes );\n\t\t\t\t}\n\t\t\t} );\n\t\t},\n\t\t[\n\t\t\tbindableAttributes,\n\t\t\tblockBindings,\n\t\t\tclientId,\n\t\t\tcontext,\n\t\t\thasPatternOverrides,\n\t\t\tsetAttributes,\n\t\t\tregisteredSources,\n\t\t\tname,\n\t\t\tregistry,\n\t\t]\n\t);\n\n\tif ( ! blockType ) {\n\t\treturn null;\n\t}\n\n\tif ( blockType.apiVersion > 1 ) {\n\t\treturn (\n\t\t\t<EditWithFilters\n\t\t\t\t{ ...props }\n\t\t\t\tattributes={ computedAttributes }\n\t\t\t\tcontext={ context }\n\t\t\t\tsetAttributes={ setBoundAttributes }\n\t\t\t/>\n\t\t);\n\t}\n\n\t// Generate a class name for the block's editable form.\n\tconst generatedClassName = hasBlockSupport( blockType, 'className', true )\n\t\t? getBlockDefaultClassName( name )\n\t\t: null;\n\tconst className = clsx(\n\t\tgeneratedClassName,\n\t\tattributes?.className,\n\t\tprops.className\n\t);\n\n\treturn (\n\t\t<EditWithFilters\n\t\t\t{ ...props }\n\t\t\tattributes={ computedAttributes }\n\t\t\tclassName={ className }\n\t\t\tcontext={ context }\n\t\t\tsetAttributes={ setBoundAttributes }\n\t\t/>\n\t);\n};\n\nexport default EditWithGeneratedProps;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { addFilter } from "@wordpress/hooks";
|
|
3
3
|
import { hasBlockSupport } from "@wordpress/blocks";
|
|
4
|
-
import { useEffect, useCallback } from "@wordpress/element";
|
|
4
|
+
import { useEffect, useCallback, useRef } from "@wordpress/element";
|
|
5
5
|
import { useSelect } from "@wordpress/data";
|
|
6
6
|
import { __ } from "@wordpress/i18n";
|
|
7
7
|
import {
|
|
@@ -33,15 +33,22 @@ function addAttributes(settings) {
|
|
|
33
33
|
function useFitText({ fitText, name, clientId }) {
|
|
34
34
|
const hasFitTextSupport2 = hasBlockSupport(name, FIT_TEXT_SUPPORT_KEY);
|
|
35
35
|
const blockElement = useBlockElement(clientId);
|
|
36
|
-
const blockAttributes = useSelect(
|
|
36
|
+
const { blockAttributes, isSelected } = useSelect(
|
|
37
37
|
(select) => {
|
|
38
38
|
if (!clientId) {
|
|
39
|
-
return;
|
|
39
|
+
return { blockAttributes: void 0, isSelected: false };
|
|
40
40
|
}
|
|
41
|
-
return
|
|
41
|
+
return {
|
|
42
|
+
blockAttributes: select(blockEditorStore).getBlockAttributes(clientId),
|
|
43
|
+
isSelected: select(blockEditorStore).isBlockSelected(clientId)
|
|
44
|
+
};
|
|
42
45
|
},
|
|
43
46
|
[clientId]
|
|
44
47
|
);
|
|
48
|
+
const isSelectedRef = useRef();
|
|
49
|
+
useEffect(() => {
|
|
50
|
+
isSelectedRef.current = isSelected;
|
|
51
|
+
}, [isSelected]);
|
|
45
52
|
const applyFitText = useCallback(() => {
|
|
46
53
|
if (!blockElement || !hasFitTextSupport2 || !fitText) {
|
|
47
54
|
return;
|
|
@@ -57,8 +64,9 @@ function useFitText({ fitText, name, clientId }) {
|
|
|
57
64
|
const applyStylesFn = (css) => {
|
|
58
65
|
styleElement.textContent = css;
|
|
59
66
|
};
|
|
60
|
-
|
|
61
|
-
|
|
67
|
+
const maxSize = isSelectedRef.current ? 200 : void 0;
|
|
68
|
+
optimizeFitText(blockElement, blockSelector, applyStylesFn, maxSize);
|
|
69
|
+
}, [blockElement, clientId, hasFitTextSupport2, fitText, isSelectedRef]);
|
|
62
70
|
useEffect(() => {
|
|
63
71
|
if (!fitText || !blockElement || !clientId || !hasFitTextSupport2) {
|
|
64
72
|
return;
|
|
@@ -83,15 +91,16 @@ function useFitText({ fitText, name, clientId }) {
|
|
|
83
91
|
}, [fitText, clientId, applyFitText, blockElement, hasFitTextSupport2]);
|
|
84
92
|
useEffect(() => {
|
|
85
93
|
if (fitText && blockElement && hasFitTextSupport2) {
|
|
86
|
-
const
|
|
94
|
+
const frameId = window.requestAnimationFrame(() => {
|
|
87
95
|
if (blockElement) {
|
|
88
96
|
applyFitText();
|
|
89
97
|
}
|
|
90
|
-
}
|
|
91
|
-
return () =>
|
|
98
|
+
});
|
|
99
|
+
return () => window.cancelAnimationFrame(frameId);
|
|
92
100
|
}
|
|
93
101
|
}, [
|
|
94
102
|
blockAttributes,
|
|
103
|
+
isSelected,
|
|
95
104
|
fitText,
|
|
96
105
|
applyFitText,
|
|
97
106
|
blockElement,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/hooks/fit-text.js"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { addFilter } from '@wordpress/hooks';\nimport { hasBlockSupport } from '@wordpress/blocks';\nimport { useEffect, useCallback } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tToggleControl,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { optimizeFitText } from '../utils/fit-text-utils';\nimport { store as blockEditorStore } from '../store';\nimport { useBlockElement } from '../components/block-list/use-block-props/use-block-refs';\nimport InspectorControls from '../components/inspector-controls';\n\nexport const FIT_TEXT_SUPPORT_KEY = 'typography.fitText';\n\n/**\n * Filters registered block settings, extending attributes to include\n * the `fitText` attribute.\n *\n * @param {Object} settings Original block settings.\n * @return {Object} Filtered block settings.\n */\nfunction addAttributes( settings ) {\n\tif ( ! hasBlockSupport( settings, FIT_TEXT_SUPPORT_KEY ) ) {\n\t\treturn settings;\n\t}\n\n\t// Allow blocks to specify their own attribute definition.\n\tif ( settings.attributes?.fitText ) {\n\t\treturn settings;\n\t}\n\n\t// Add fitText attribute.\n\treturn {\n\t\t...settings,\n\t\tattributes: {\n\t\t\t...settings.attributes,\n\t\t\tfitText: {\n\t\t\t\ttype: 'boolean',\n\t\t\t},\n\t\t},\n\t};\n}\n\n/**\n * Custom hook to handle fit text functionality in the editor.\n *\n * @param {Object} props Component props.\n * @param {?boolean} props.fitText Fit text attribute.\n * @param {string} props.name Block name.\n * @param {string} props.clientId Block client ID.\n */\nfunction useFitText( { fitText, name, clientId } ) {\n\tconst hasFitTextSupport = hasBlockSupport( name, FIT_TEXT_SUPPORT_KEY );\n\tconst blockElement = useBlockElement( clientId );\n\n\t// Monitor block attribute changes\n\t// Any attribute may change the available space.\n\tconst blockAttributes = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! clientId ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\treturn
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { addFilter } from '@wordpress/hooks';\nimport { hasBlockSupport } from '@wordpress/blocks';\nimport { useEffect, useCallback, useRef } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tToggleControl,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { optimizeFitText } from '../utils/fit-text-utils';\nimport { store as blockEditorStore } from '../store';\nimport { useBlockElement } from '../components/block-list/use-block-props/use-block-refs';\nimport InspectorControls from '../components/inspector-controls';\n\nexport const FIT_TEXT_SUPPORT_KEY = 'typography.fitText';\n\n/**\n * Filters registered block settings, extending attributes to include\n * the `fitText` attribute.\n *\n * @param {Object} settings Original block settings.\n * @return {Object} Filtered block settings.\n */\nfunction addAttributes( settings ) {\n\tif ( ! hasBlockSupport( settings, FIT_TEXT_SUPPORT_KEY ) ) {\n\t\treturn settings;\n\t}\n\n\t// Allow blocks to specify their own attribute definition.\n\tif ( settings.attributes?.fitText ) {\n\t\treturn settings;\n\t}\n\n\t// Add fitText attribute.\n\treturn {\n\t\t...settings,\n\t\tattributes: {\n\t\t\t...settings.attributes,\n\t\t\tfitText: {\n\t\t\t\ttype: 'boolean',\n\t\t\t},\n\t\t},\n\t};\n}\n\n/**\n * Custom hook to handle fit text functionality in the editor.\n *\n * @param {Object} props Component props.\n * @param {?boolean} props.fitText Fit text attribute.\n * @param {string} props.name Block name.\n * @param {string} props.clientId Block client ID.\n */\nfunction useFitText( { fitText, name, clientId } ) {\n\tconst hasFitTextSupport = hasBlockSupport( name, FIT_TEXT_SUPPORT_KEY );\n\tconst blockElement = useBlockElement( clientId );\n\n\t// Monitor block attribute changes and selection state\n\t// Any attribute may change the available space.\n\tconst { blockAttributes, isSelected } = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! clientId ) {\n\t\t\t\treturn { blockAttributes: undefined, isSelected: false };\n\t\t\t}\n\t\t\treturn {\n\t\t\t\tblockAttributes:\n\t\t\t\t\tselect( blockEditorStore ).getBlockAttributes( clientId ),\n\t\t\t\tisSelected:\n\t\t\t\t\tselect( blockEditorStore ).isBlockSelected( clientId ),\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\n\tconst isSelectedRef = useRef();\n\tuseEffect( () => {\n\t\tisSelectedRef.current = isSelected;\n\t}, [ isSelected ] );\n\n\tconst applyFitText = useCallback( () => {\n\t\tif ( ! blockElement || ! hasFitTextSupport || ! fitText ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Get or create style element with unique ID\n\t\tconst styleId = `fit-text-${ clientId }`;\n\t\tlet styleElement = blockElement.ownerDocument.getElementById( styleId );\n\t\tif ( ! styleElement ) {\n\t\t\tstyleElement = blockElement.ownerDocument.createElement( 'style' );\n\t\t\tstyleElement.id = styleId;\n\t\t\tblockElement.ownerDocument.head.appendChild( styleElement );\n\t\t}\n\n\t\tconst blockSelector = `#block-${ clientId }`;\n\n\t\tconst applyStylesFn = ( css ) => {\n\t\t\tstyleElement.textContent = css;\n\t\t};\n\n\t\t// Avoid very jarring resizes when a user is actively editing the\n\t\t// block. Placing a ceiling on how much the block can grow curbs the\n\t\t// effect of the first few keypresses.\n\t\tconst maxSize = isSelectedRef.current ? 200 : undefined;\n\n\t\toptimizeFitText( blockElement, blockSelector, applyStylesFn, maxSize );\n\t}, [ blockElement, clientId, hasFitTextSupport, fitText, isSelectedRef ] );\n\n\tuseEffect( () => {\n\t\tif (\n\t\t\t! fitText ||\n\t\t\t! blockElement ||\n\t\t\t! clientId ||\n\t\t\t! hasFitTextSupport\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Apply initially\n\t\tapplyFitText();\n\n\t\t// Store current element value for cleanup\n\t\tconst currentElement = blockElement;\n\n\t\t// Watch for size changes\n\t\tlet resizeObserver;\n\t\tif ( window.ResizeObserver && currentElement.parentElement ) {\n\t\t\tresizeObserver = new window.ResizeObserver( applyFitText );\n\t\t\tresizeObserver.observe( currentElement.parentElement );\n\t\t}\n\n\t\t// Cleanup function\n\t\treturn () => {\n\t\t\tif ( resizeObserver ) {\n\t\t\t\tresizeObserver.disconnect();\n\t\t\t}\n\n\t\t\tconst styleId = `fit-text-${ clientId }`;\n\t\t\tconst styleElement =\n\t\t\t\tcurrentElement.ownerDocument.getElementById( styleId );\n\t\t\tif ( styleElement ) {\n\t\t\t\tstyleElement.remove();\n\t\t\t}\n\t\t};\n\t}, [ fitText, clientId, applyFitText, blockElement, hasFitTextSupport ] );\n\n\t// Trigger fit text recalculation when content changes\n\tuseEffect( () => {\n\t\tif ( fitText && blockElement && hasFitTextSupport ) {\n\t\t\t// Wait for next frame to ensure DOM has updated after content changes\n\t\t\tconst frameId = window.requestAnimationFrame( () => {\n\t\t\t\tif ( blockElement ) {\n\t\t\t\t\tapplyFitText();\n\t\t\t\t}\n\t\t\t} );\n\n\t\t\treturn () => window.cancelAnimationFrame( frameId );\n\t\t}\n\t}, [\n\t\tblockAttributes,\n\t\tisSelected,\n\t\tfitText,\n\t\tapplyFitText,\n\t\tblockElement,\n\t\thasFitTextSupport,\n\t] );\n}\n\n/**\n * Fit text control component for the typography panel.\n *\n * @param {Object} props Component props.\n * @param {string} props.clientId Block client ID.\n * @param {Function} props.setAttributes Function to set block attributes.\n * @param {string} props.name Block name.\n * @param {boolean} props.fitText Whether fit text is enabled.\n */\nexport function FitTextControl( {\n\tclientId,\n\tfitText = false,\n\tsetAttributes,\n\tname,\n} ) {\n\tif ( ! hasBlockSupport( name, FIT_TEXT_SUPPORT_KEY ) ) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<InspectorControls group=\"typography\">\n\t\t\t<ToolsPanelItem\n\t\t\t\thasValue={ () => fitText }\n\t\t\t\tlabel={ __( 'Fit text' ) }\n\t\t\t\tonDeselect={ () => setAttributes( { fitText: undefined } ) }\n\t\t\t\tresetAllFilter={ () => ( { fitText: undefined } ) }\n\t\t\t\tpanelId={ clientId }\n\t\t\t>\n\t\t\t\t<ToggleControl\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\tlabel={ __( 'Fit text' ) }\n\t\t\t\t\tchecked={ fitText }\n\t\t\t\t\tonChange={ () =>\n\t\t\t\t\t\tsetAttributes( { fitText: ! fitText || undefined } )\n\t\t\t\t\t}\n\t\t\t\t\thelp={\n\t\t\t\t\t\tfitText\n\t\t\t\t\t\t\t? __( 'Text will resize to fit its container.' )\n\t\t\t\t\t\t\t: __( 'Resize text to fit its container.' )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</ToolsPanelItem>\n\t\t</InspectorControls>\n\t);\n}\n\n/**\n * Override props applied to the block element on save.\n *\n * @param {Object} props Additional props applied to the block element.\n * @param {Object} blockType Block type.\n * @param {Object} attributes Block attributes.\n * @return {Object} Filtered props applied to the block element.\n */\nfunction addSaveProps( props, blockType, attributes ) {\n\tif ( ! hasBlockSupport( blockType, FIT_TEXT_SUPPORT_KEY ) ) {\n\t\treturn props;\n\t}\n\n\tconst { fitText } = attributes;\n\n\tif ( ! fitText ) {\n\t\treturn props;\n\t}\n\n\t// Add CSS class for frontend detection and styling\n\tconst className = props.className\n\t\t? `${ props.className } has-fit-text`\n\t\t: 'has-fit-text';\n\n\treturn {\n\t\t...props,\n\t\tclassName,\n\t};\n}\n/**\n * Override props applied to the block element in the editor.\n *\n * @param {Object} props Component props including block attributes.\n * @param {string} props.name Block name.\n * @param {boolean} props.fitText Whether fit text is enabled.\n * @param {string} props.clientId Block client ID.\n * @return {Object} Filtered props applied to the block element.\n */\nfunction useBlockProps( { name, fitText, clientId } ) {\n\tuseFitText( { fitText, name, clientId } );\n\tif ( ! fitText || ! hasBlockSupport( name, FIT_TEXT_SUPPORT_KEY ) ) {\n\t\treturn {};\n\t}\n\treturn {\n\t\tclassName: 'has-fit-text',\n\t};\n}\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'core/fit-text/addAttribute',\n\taddAttributes\n);\n\nconst hasFitTextSupport = ( blockNameOrType ) => {\n\treturn hasBlockSupport( blockNameOrType, FIT_TEXT_SUPPORT_KEY );\n};\n\nexport default {\n\tuseBlockProps,\n\taddSaveProps,\n\tattributeKeys: [ 'fitText' ],\n\thasSupport: hasFitTextSupport,\n\tedit: FitTextControl,\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["hasFitTextSupport"]
|
|
7
7
|
}
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
function generateCSSRule(elementSelector, fontSize) {
|
|
2
2
|
return `${elementSelector} { font-size: ${fontSize}px !important; }`;
|
|
3
3
|
}
|
|
4
|
-
function findOptimalFontSize(textElement, elementSelector, applyStylesFn) {
|
|
4
|
+
function findOptimalFontSize(textElement, elementSelector, applyStylesFn, maxSize = 600) {
|
|
5
5
|
const alreadyHasScrollableHeight = textElement.scrollHeight > textElement.clientHeight;
|
|
6
6
|
let minSize = 5;
|
|
7
|
-
let maxSize = 600;
|
|
8
7
|
let bestSize = minSize;
|
|
9
8
|
while (minSize <= maxSize) {
|
|
10
9
|
const midSize = Math.floor((minSize + maxSize) / 2);
|
|
@@ -20,7 +19,7 @@ function findOptimalFontSize(textElement, elementSelector, applyStylesFn) {
|
|
|
20
19
|
}
|
|
21
20
|
return bestSize;
|
|
22
21
|
}
|
|
23
|
-
function optimizeFitText(textElement, elementSelector, applyStylesFn) {
|
|
22
|
+
function optimizeFitText(textElement, elementSelector, applyStylesFn, maxSize) {
|
|
24
23
|
if (!textElement) {
|
|
25
24
|
return;
|
|
26
25
|
}
|
|
@@ -28,7 +27,8 @@ function optimizeFitText(textElement, elementSelector, applyStylesFn) {
|
|
|
28
27
|
const optimalSize = findOptimalFontSize(
|
|
29
28
|
textElement,
|
|
30
29
|
elementSelector,
|
|
31
|
-
applyStylesFn
|
|
30
|
+
applyStylesFn,
|
|
31
|
+
maxSize
|
|
32
32
|
);
|
|
33
33
|
const cssRule = generateCSSRule(elementSelector, optimalSize);
|
|
34
34
|
applyStylesFn(cssRule);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/utils/fit-text-utils.js"],
|
|
4
|
-
"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(
|
|
5
|
-
"mappings": "AAYA,SAAS,gBAAiB,iBAAiB,UAAW;AACrD,SAAO,GAAI,eAAgB,iBAAkB,QAAS;AACvD;
|
|
4
|
+
"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 * @param {number} maxSize Maximum font size in pixels (default: 600)\n * @return {number} Optimal font size\n */\nfunction findOptimalFontSize(\n\ttextElement,\n\telementSelector,\n\tapplyStylesFn,\n\tmaxSize = 600\n) {\n\tconst alreadyHasScrollableHeight =\n\t\ttextElement.scrollHeight > textElement.clientHeight;\n\tlet minSize = 5;\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 * @param {number} maxSize Maximum font size in pixels.\n */\nexport function optimizeFitText(\n\ttextElement,\n\telementSelector,\n\tapplyStylesFn,\n\tmaxSize\n) {\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\tmaxSize\n\t);\n\n\tconst cssRule = generateCSSRule( elementSelector, optimalSize );\n\tapplyStylesFn( cssRule );\n}\n"],
|
|
5
|
+
"mappings": "AAYA,SAAS,gBAAiB,iBAAiB,UAAW;AACrD,SAAO,GAAI,eAAgB,iBAAkB,QAAS;AACvD;AAWA,SAAS,oBACR,aACA,iBACA,eACA,UAAU,KACT;AACD,QAAM,6BACL,YAAY,eAAe,YAAY;AACxC,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;AAWO,SAAS,gBACf,aACA,iBACA,eACA,SACC;AACD,MAAK,CAAE,aAAc;AACpB;AAAA,EACD;AAEA,gBAAe,EAAG;AAElB,QAAM,cAAc;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAEA,QAAM,UAAU,gBAAiB,iBAAiB,WAAY;AAC9D,gBAAe,OAAQ;AACxB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -887,6 +887,10 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
|
|
|
887
887
|
padding: 0 2px;
|
|
888
888
|
}
|
|
889
889
|
|
|
890
|
+
.rich-text [contenteditable=false]::selection {
|
|
891
|
+
background-color: transparent;
|
|
892
|
+
}
|
|
893
|
+
|
|
890
894
|
.block-editor-warning {
|
|
891
895
|
align-items: center;
|
|
892
896
|
display: flex;
|
package/build-style/content.css
CHANGED
|
@@ -887,6 +887,10 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
|
|
|
887
887
|
padding: 0 2px;
|
|
888
888
|
}
|
|
889
889
|
|
|
890
|
+
.rich-text [contenteditable=false]::selection {
|
|
891
|
+
background-color: transparent;
|
|
892
|
+
}
|
|
893
|
+
|
|
890
894
|
.block-editor-warning {
|
|
891
895
|
align-items: center;
|
|
892
896
|
display: flex;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wordpress/block-editor",
|
|
3
|
-
"version": "15.
|
|
3
|
+
"version": "15.6.0",
|
|
4
4
|
"description": "Generic block editor.",
|
|
5
5
|
"author": "The WordPress Contributors",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -56,39 +56,39 @@
|
|
|
56
56
|
"@emotion/react": "^11.7.1",
|
|
57
57
|
"@emotion/styled": "^11.6.0",
|
|
58
58
|
"@react-spring/web": "^9.4.5",
|
|
59
|
-
"@wordpress/a11y": "^4.
|
|
60
|
-
"@wordpress/api-fetch": "^7.
|
|
61
|
-
"@wordpress/base-styles": "^6.
|
|
62
|
-
"@wordpress/blob": "^4.
|
|
63
|
-
"@wordpress/block-serialization-default-parser": "^5.
|
|
64
|
-
"@wordpress/blocks": "^15.
|
|
65
|
-
"@wordpress/commands": "^1.
|
|
66
|
-
"@wordpress/components": "^30.6.
|
|
67
|
-
"@wordpress/compose": "^7.
|
|
68
|
-
"@wordpress/data": "^10.
|
|
69
|
-
"@wordpress/date": "^5.
|
|
70
|
-
"@wordpress/deprecated": "^4.
|
|
71
|
-
"@wordpress/dom": "^4.
|
|
72
|
-
"@wordpress/element": "^6.
|
|
73
|
-
"@wordpress/escape-html": "^3.
|
|
74
|
-
"@wordpress/hooks": "^4.
|
|
75
|
-
"@wordpress/html-entities": "^4.
|
|
76
|
-
"@wordpress/i18n": "^6.
|
|
77
|
-
"@wordpress/icons": "^11.0.
|
|
78
|
-
"@wordpress/is-shallow-equal": "^5.
|
|
79
|
-
"@wordpress/keyboard-shortcuts": "^5.
|
|
80
|
-
"@wordpress/keycodes": "^4.
|
|
81
|
-
"@wordpress/notices": "^5.
|
|
82
|
-
"@wordpress/preferences": "^4.
|
|
83
|
-
"@wordpress/priority-queue": "^3.
|
|
84
|
-
"@wordpress/private-apis": "^1.
|
|
85
|
-
"@wordpress/rich-text": "^7.
|
|
86
|
-
"@wordpress/style-engine": "^2.
|
|
87
|
-
"@wordpress/token-list": "^3.
|
|
88
|
-
"@wordpress/upload-media": "^0.
|
|
89
|
-
"@wordpress/url": "^4.
|
|
90
|
-
"@wordpress/warning": "^3.
|
|
91
|
-
"@wordpress/wordcount": "^4.
|
|
59
|
+
"@wordpress/a11y": "^4.33.0",
|
|
60
|
+
"@wordpress/api-fetch": "^7.33.0",
|
|
61
|
+
"@wordpress/base-styles": "^6.9.0",
|
|
62
|
+
"@wordpress/blob": "^4.33.0",
|
|
63
|
+
"@wordpress/block-serialization-default-parser": "^5.33.0",
|
|
64
|
+
"@wordpress/blocks": "^15.6.0",
|
|
65
|
+
"@wordpress/commands": "^1.33.0",
|
|
66
|
+
"@wordpress/components": "^30.6.0",
|
|
67
|
+
"@wordpress/compose": "^7.33.0",
|
|
68
|
+
"@wordpress/data": "^10.33.0",
|
|
69
|
+
"@wordpress/date": "^5.33.0",
|
|
70
|
+
"@wordpress/deprecated": "^4.33.0",
|
|
71
|
+
"@wordpress/dom": "^4.33.0",
|
|
72
|
+
"@wordpress/element": "^6.33.0",
|
|
73
|
+
"@wordpress/escape-html": "^3.33.0",
|
|
74
|
+
"@wordpress/hooks": "^4.33.0",
|
|
75
|
+
"@wordpress/html-entities": "^4.33.0",
|
|
76
|
+
"@wordpress/i18n": "^6.6.0",
|
|
77
|
+
"@wordpress/icons": "^11.0.0",
|
|
78
|
+
"@wordpress/is-shallow-equal": "^5.33.0",
|
|
79
|
+
"@wordpress/keyboard-shortcuts": "^5.33.0",
|
|
80
|
+
"@wordpress/keycodes": "^4.33.0",
|
|
81
|
+
"@wordpress/notices": "^5.33.0",
|
|
82
|
+
"@wordpress/preferences": "^4.33.0",
|
|
83
|
+
"@wordpress/priority-queue": "^3.33.0",
|
|
84
|
+
"@wordpress/private-apis": "^1.33.0",
|
|
85
|
+
"@wordpress/rich-text": "^7.33.0",
|
|
86
|
+
"@wordpress/style-engine": "^2.33.0",
|
|
87
|
+
"@wordpress/token-list": "^3.33.0",
|
|
88
|
+
"@wordpress/upload-media": "^0.18.0",
|
|
89
|
+
"@wordpress/url": "^4.33.0",
|
|
90
|
+
"@wordpress/warning": "^3.33.0",
|
|
91
|
+
"@wordpress/wordcount": "^4.33.0",
|
|
92
92
|
"change-case": "^4.1.2",
|
|
93
93
|
"clsx": "^2.1.1",
|
|
94
94
|
"colord": "^2.7.0",
|
|
@@ -111,5 +111,5 @@
|
|
|
111
111
|
"publishConfig": {
|
|
112
112
|
"access": "public"
|
|
113
113
|
},
|
|
114
|
-
"gitHead": "
|
|
114
|
+
"gitHead": "2bbe0d34ab65458468758c48826296d7a753428b"
|
|
115
115
|
}
|
|
@@ -123,7 +123,7 @@ const EditWithGeneratedProps = ( props ) => {
|
|
|
123
123
|
const source = registeredSources[ sourceName ];
|
|
124
124
|
if (
|
|
125
125
|
! source ||
|
|
126
|
-
! bindableAttributes
|
|
126
|
+
! bindableAttributes?.includes( attributeName )
|
|
127
127
|
) {
|
|
128
128
|
continue;
|
|
129
129
|
}
|
|
@@ -202,7 +202,7 @@ const EditWithGeneratedProps = ( props ) => {
|
|
|
202
202
|
) ) {
|
|
203
203
|
if (
|
|
204
204
|
! blockBindings[ attributeName ] ||
|
|
205
|
-
! bindableAttributes
|
|
205
|
+
! bindableAttributes?.includes( attributeName )
|
|
206
206
|
) {
|
|
207
207
|
continue;
|
|
208
208
|
}
|
|
@@ -1518,17 +1518,18 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
|
|
|
1518
1518
|
|
|
1519
1519
|
await user.click( createButton );
|
|
1520
1520
|
|
|
1521
|
-
|
|
1522
|
-
|
|
1523
|
-
} );
|
|
1524
|
-
|
|
1525
|
-
const errorNotice = screen.getAllByText(
|
|
1521
|
+
// Wait for the error message to appear after the async operation fails
|
|
1522
|
+
const errorNotice = await screen.findByText(
|
|
1526
1523
|
'API response returned invalid entity.'
|
|
1527
|
-
)
|
|
1524
|
+
);
|
|
1528
1525
|
|
|
1529
1526
|
// Catch the error in the test to avoid test failures.
|
|
1530
1527
|
expect( throwsError ).toThrow( Error );
|
|
1531
1528
|
|
|
1529
|
+
searchInput = screen.getByRole( 'combobox', {
|
|
1530
|
+
name: 'Search or type URL',
|
|
1531
|
+
} );
|
|
1532
|
+
|
|
1532
1533
|
// Check human readable error notice is perceivable.
|
|
1533
1534
|
expect( errorNotice ).toBeVisible();
|
|
1534
1535
|
// eslint-disable-next-line testing-library/no-node-access
|
|
@@ -47,3 +47,8 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
|
|
|
47
47
|
padding: 0 2px;
|
|
48
48
|
}
|
|
49
49
|
}
|
|
50
|
+
|
|
51
|
+
// Hide selection within non-editable elements, we draw our own boundaries.
|
|
52
|
+
.rich-text [contenteditable="false"]::selection {
|
|
53
|
+
background-color: transparent;
|
|
54
|
+
}
|
package/src/hooks/fit-text.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*/
|
|
4
4
|
import { addFilter } from '@wordpress/hooks';
|
|
5
5
|
import { hasBlockSupport } from '@wordpress/blocks';
|
|
6
|
-
import { useEffect, useCallback } from '@wordpress/element';
|
|
6
|
+
import { useEffect, useCallback, useRef } from '@wordpress/element';
|
|
7
7
|
import { useSelect } from '@wordpress/data';
|
|
8
8
|
import { __ } from '@wordpress/i18n';
|
|
9
9
|
import {
|
|
@@ -62,18 +62,28 @@ function useFitText( { fitText, name, clientId } ) {
|
|
|
62
62
|
const hasFitTextSupport = hasBlockSupport( name, FIT_TEXT_SUPPORT_KEY );
|
|
63
63
|
const blockElement = useBlockElement( clientId );
|
|
64
64
|
|
|
65
|
-
// Monitor block attribute changes
|
|
65
|
+
// Monitor block attribute changes and selection state
|
|
66
66
|
// Any attribute may change the available space.
|
|
67
|
-
const blockAttributes = useSelect(
|
|
67
|
+
const { blockAttributes, isSelected } = useSelect(
|
|
68
68
|
( select ) => {
|
|
69
69
|
if ( ! clientId ) {
|
|
70
|
-
return;
|
|
70
|
+
return { blockAttributes: undefined, isSelected: false };
|
|
71
71
|
}
|
|
72
|
-
return
|
|
72
|
+
return {
|
|
73
|
+
blockAttributes:
|
|
74
|
+
select( blockEditorStore ).getBlockAttributes( clientId ),
|
|
75
|
+
isSelected:
|
|
76
|
+
select( blockEditorStore ).isBlockSelected( clientId ),
|
|
77
|
+
};
|
|
73
78
|
},
|
|
74
79
|
[ clientId ]
|
|
75
80
|
);
|
|
76
81
|
|
|
82
|
+
const isSelectedRef = useRef();
|
|
83
|
+
useEffect( () => {
|
|
84
|
+
isSelectedRef.current = isSelected;
|
|
85
|
+
}, [ isSelected ] );
|
|
86
|
+
|
|
77
87
|
const applyFitText = useCallback( () => {
|
|
78
88
|
if ( ! blockElement || ! hasFitTextSupport || ! fitText ) {
|
|
79
89
|
return;
|
|
@@ -94,8 +104,13 @@ function useFitText( { fitText, name, clientId } ) {
|
|
|
94
104
|
styleElement.textContent = css;
|
|
95
105
|
};
|
|
96
106
|
|
|
97
|
-
|
|
98
|
-
|
|
107
|
+
// Avoid very jarring resizes when a user is actively editing the
|
|
108
|
+
// block. Placing a ceiling on how much the block can grow curbs the
|
|
109
|
+
// effect of the first few keypresses.
|
|
110
|
+
const maxSize = isSelectedRef.current ? 200 : undefined;
|
|
111
|
+
|
|
112
|
+
optimizeFitText( blockElement, blockSelector, applyStylesFn, maxSize );
|
|
113
|
+
}, [ blockElement, clientId, hasFitTextSupport, fitText, isSelectedRef ] );
|
|
99
114
|
|
|
100
115
|
useEffect( () => {
|
|
101
116
|
if (
|
|
@@ -138,17 +153,18 @@ function useFitText( { fitText, name, clientId } ) {
|
|
|
138
153
|
// Trigger fit text recalculation when content changes
|
|
139
154
|
useEffect( () => {
|
|
140
155
|
if ( fitText && blockElement && hasFitTextSupport ) {
|
|
141
|
-
//
|
|
142
|
-
const
|
|
156
|
+
// Wait for next frame to ensure DOM has updated after content changes
|
|
157
|
+
const frameId = window.requestAnimationFrame( () => {
|
|
143
158
|
if ( blockElement ) {
|
|
144
159
|
applyFitText();
|
|
145
160
|
}
|
|
146
|
-
}
|
|
161
|
+
} );
|
|
147
162
|
|
|
148
|
-
return () =>
|
|
163
|
+
return () => window.cancelAnimationFrame( frameId );
|
|
149
164
|
}
|
|
150
165
|
}, [
|
|
151
166
|
blockAttributes,
|
|
167
|
+
isSelected,
|
|
152
168
|
fitText,
|
|
153
169
|
applyFitText,
|
|
154
170
|
blockElement,
|
|
@@ -20,13 +20,18 @@ function generateCSSRule( elementSelector, fontSize ) {
|
|
|
20
20
|
* @param {HTMLElement} textElement The text element
|
|
21
21
|
* @param {string} elementSelector CSS selector for the text element
|
|
22
22
|
* @param {Function} applyStylesFn Function to apply test styles
|
|
23
|
+
* @param {number} maxSize Maximum font size in pixels (default: 600)
|
|
23
24
|
* @return {number} Optimal font size
|
|
24
25
|
*/
|
|
25
|
-
function findOptimalFontSize(
|
|
26
|
+
function findOptimalFontSize(
|
|
27
|
+
textElement,
|
|
28
|
+
elementSelector,
|
|
29
|
+
applyStylesFn,
|
|
30
|
+
maxSize = 600
|
|
31
|
+
) {
|
|
26
32
|
const alreadyHasScrollableHeight =
|
|
27
33
|
textElement.scrollHeight > textElement.clientHeight;
|
|
28
34
|
let minSize = 5;
|
|
29
|
-
let maxSize = 600;
|
|
30
35
|
let bestSize = minSize;
|
|
31
36
|
|
|
32
37
|
while ( minSize <= maxSize ) {
|
|
@@ -56,8 +61,14 @@ function findOptimalFontSize( textElement, elementSelector, applyStylesFn ) {
|
|
|
56
61
|
* @param {HTMLElement} textElement The text element (paragraph, heading, etc.)
|
|
57
62
|
* @param {string} elementSelector CSS selector for the text element
|
|
58
63
|
* @param {Function} applyStylesFn Function to apply CSS styles (pass empty string to clear)
|
|
64
|
+
* @param {number} maxSize Maximum font size in pixels.
|
|
59
65
|
*/
|
|
60
|
-
export function optimizeFitText(
|
|
66
|
+
export function optimizeFitText(
|
|
67
|
+
textElement,
|
|
68
|
+
elementSelector,
|
|
69
|
+
applyStylesFn,
|
|
70
|
+
maxSize
|
|
71
|
+
) {
|
|
61
72
|
if ( ! textElement ) {
|
|
62
73
|
return;
|
|
63
74
|
}
|
|
@@ -67,7 +78,8 @@ export function optimizeFitText( textElement, elementSelector, applyStylesFn ) {
|
|
|
67
78
|
const optimalSize = findOptimalFontSize(
|
|
68
79
|
textElement,
|
|
69
80
|
elementSelector,
|
|
70
|
-
applyStylesFn
|
|
81
|
+
applyStylesFn,
|
|
82
|
+
maxSize
|
|
71
83
|
);
|
|
72
84
|
|
|
73
85
|
const cssRule = generateCSSRule( elementSelector, optimalSize );
|