@wordpress/block-editor 15.6.6 → 15.6.7
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/build/components/block-variation-transforms/index.js +32 -5
- package/build/components/block-variation-transforms/index.js.map +2 -2
- package/build/components/border-radius-control/single-input-control.js +1 -0
- package/build/components/border-radius-control/single-input-control.js.map +2 -2
- package/build/hooks/block-bindings.js +11 -7
- package/build/hooks/block-bindings.js.map +2 -2
- package/build/utils/fit-text-utils.js +9 -1
- package/build/utils/fit-text-utils.js.map +2 -2
- package/build-module/components/block-variation-transforms/index.js +32 -5
- package/build-module/components/block-variation-transforms/index.js.map +2 -2
- package/build-module/components/border-radius-control/single-input-control.js +1 -0
- package/build-module/components/border-radius-control/single-input-control.js.map +2 -2
- package/build-module/hooks/block-bindings.js +11 -7
- package/build-module/hooks/block-bindings.js.map +2 -2
- package/build-module/utils/fit-text-utils.js +9 -1
- package/build-module/utils/fit-text-utils.js.map +2 -2
- package/package.json +2 -2
- package/src/components/block-variation-transforms/index.js +96 -35
- package/src/components/border-radius-control/single-input-control.js +1 -0
- package/src/hooks/block-bindings.js +11 -7
- package/src/utils/fit-text-utils.js +19 -1
|
@@ -138,7 +138,13 @@ function VariationsToggleGroupControl({
|
|
|
138
138
|
}
|
|
139
139
|
function __experimentalBlockVariationTransforms({ blockClientId }) {
|
|
140
140
|
const { updateBlockAttributes } = (0, import_data.useDispatch)(import_store.store);
|
|
141
|
-
const {
|
|
141
|
+
const {
|
|
142
|
+
activeBlockVariation,
|
|
143
|
+
unfilteredVariations,
|
|
144
|
+
blockName,
|
|
145
|
+
isContentOnly,
|
|
146
|
+
isSection
|
|
147
|
+
} = (0, import_data.useSelect)(
|
|
142
148
|
(select) => {
|
|
143
149
|
const { getActiveBlockVariation, getBlockVariations } = select(import_blocks.store);
|
|
144
150
|
const {
|
|
@@ -148,9 +154,7 @@ function __experimentalBlockVariationTransforms({ blockClientId }) {
|
|
|
148
154
|
isSectionBlock
|
|
149
155
|
} = (0, import_lock_unlock.unlock)(select(import_store.store));
|
|
150
156
|
const name = blockClientId && getBlockName(blockClientId);
|
|
151
|
-
const { hasContentRoleAttribute } = (0, import_lock_unlock.unlock)(
|
|
152
|
-
select(import_blocks.store)
|
|
153
|
-
);
|
|
157
|
+
const { hasContentRoleAttribute } = (0, import_lock_unlock.unlock)(select(import_blocks.store));
|
|
154
158
|
const isContentBlock = hasContentRoleAttribute(name);
|
|
155
159
|
return {
|
|
156
160
|
activeBlockVariation: getActiveBlockVariation(
|
|
@@ -158,13 +162,36 @@ function __experimentalBlockVariationTransforms({ blockClientId }) {
|
|
|
158
162
|
getBlockAttributes(blockClientId),
|
|
159
163
|
"transform"
|
|
160
164
|
),
|
|
161
|
-
|
|
165
|
+
unfilteredVariations: name && getBlockVariations(name, "transform"),
|
|
166
|
+
blockName: name,
|
|
162
167
|
isContentOnly: getBlockEditingMode(blockClientId) === "contentOnly" && !isContentBlock,
|
|
163
168
|
isSection: isSectionBlock(blockClientId)
|
|
164
169
|
};
|
|
165
170
|
},
|
|
166
171
|
[blockClientId]
|
|
167
172
|
);
|
|
173
|
+
const variations = (0, import_element.useMemo)(() => {
|
|
174
|
+
if (blockName === "core/paragraph") {
|
|
175
|
+
if (activeBlockVariation?.name === "stretchy-paragraph" || unfilteredVariations.every(
|
|
176
|
+
(v) => ["paragraph", "stretchy-paragraph"].includes(v.name)
|
|
177
|
+
)) {
|
|
178
|
+
return [];
|
|
179
|
+
}
|
|
180
|
+
return unfilteredVariations.filter(
|
|
181
|
+
(v) => v.name !== "stretchy-paragraph"
|
|
182
|
+
);
|
|
183
|
+
} else if (blockName === "core/heading") {
|
|
184
|
+
if (activeBlockVariation?.name === "stretchy-heading" || unfilteredVariations.every(
|
|
185
|
+
(v) => ["heading", "stretchy-heading"].includes(v.name)
|
|
186
|
+
)) {
|
|
187
|
+
return [];
|
|
188
|
+
}
|
|
189
|
+
return unfilteredVariations.filter(
|
|
190
|
+
(v) => v.name !== "stretchy-heading"
|
|
191
|
+
);
|
|
192
|
+
}
|
|
193
|
+
return unfilteredVariations;
|
|
194
|
+
}, [activeBlockVariation?.name, blockName, unfilteredVariations]);
|
|
168
195
|
const selectedValue = activeBlockVariation?.name;
|
|
169
196
|
const hasUniqueIcons = (0, import_element.useMemo)(() => {
|
|
170
197
|
const variationIcons = /* @__PURE__ */ new Set();
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/block-variation-transforms/index.js"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tButton,\n\tDropdownMenu,\n\tMenuGroup,\n\tMenuItemsChoice,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,\n\tVisuallyHidden,\n} from '@wordpress/components';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useMemo } from '@wordpress/element';\nimport { chevronDown } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport BlockIcon from '../block-icon';\nimport { store as blockEditorStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\n\nfunction VariationsButtons( {\n\tclassName,\n\tonSelectVariation,\n\tselectedValue,\n\tvariations,\n} ) {\n\treturn (\n\t\t<fieldset className={ className }>\n\t\t\t<VisuallyHidden as=\"legend\">\n\t\t\t\t{ __( 'Transform to variation' ) }\n\t\t\t</VisuallyHidden>\n\t\t\t{ variations.map( ( variation ) => (\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\tkey={ variation.name }\n\t\t\t\t\ticon={ <BlockIcon icon={ variation.icon } showColors /> }\n\t\t\t\t\tisPressed={ selectedValue === variation.name }\n\t\t\t\t\tlabel={\n\t\t\t\t\t\tselectedValue === variation.name\n\t\t\t\t\t\t\t? variation.title\n\t\t\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t\t\t/* translators: %s: Block or block variation name. */\n\t\t\t\t\t\t\t\t\t__( 'Transform to %s' ),\n\t\t\t\t\t\t\t\t\tvariation.title\n\t\t\t\t\t\t\t )\n\t\t\t\t\t}\n\t\t\t\t\tonClick={ () => onSelectVariation( variation.name ) }\n\t\t\t\t\taria-label={ variation.title }\n\t\t\t\t\tshowTooltip\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</fieldset>\n\t);\n}\n\nfunction VariationsDropdown( {\n\tclassName,\n\tonSelectVariation,\n\tselectedValue,\n\tvariations,\n} ) {\n\tconst selectOptions = variations.map(\n\t\t( { name, title, description } ) => ( {\n\t\t\tvalue: name,\n\t\t\tlabel: title,\n\t\t\tinfo: description,\n\t\t} )\n\t);\n\n\treturn (\n\t\t<DropdownMenu\n\t\t\tclassName={ className }\n\t\t\tlabel={ __( 'Transform to variation' ) }\n\t\t\ttext={ __( 'Transform to variation' ) }\n\t\t\tpopoverProps={ {\n\t\t\t\tposition: 'bottom center',\n\t\t\t\tclassName: `${ className }__popover`,\n\t\t\t} }\n\t\t\ticon={ chevronDown }\n\t\t\ttoggleProps={ { iconPosition: 'right' } }\n\t\t>\n\t\t\t{ () => (\n\t\t\t\t<MenuGroup>\n\t\t\t\t\t<MenuItemsChoice\n\t\t\t\t\t\tchoices={ selectOptions }\n\t\t\t\t\t\tvalue={ selectedValue }\n\t\t\t\t\t\tonSelect={ onSelectVariation }\n\t\t\t\t\t/>\n\t\t\t\t</MenuGroup>\n\t\t\t) }\n\t\t</DropdownMenu>\n\t);\n}\n\nfunction VariationsToggleGroupControl( {\n\tclassName,\n\tonSelectVariation,\n\tselectedValue,\n\tvariations,\n} ) {\n\treturn (\n\t\t<div className={ className }>\n\t\t\t<ToggleGroupControl\n\t\t\t\tlabel={ __( 'Transform to variation' ) }\n\t\t\t\tvalue={ selectedValue }\n\t\t\t\thideLabelFromVision\n\t\t\t\tonChange={ onSelectVariation }\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t>\n\t\t\t\t{ variations.map( ( variation ) => (\n\t\t\t\t\t<ToggleGroupControlOptionIcon\n\t\t\t\t\t\tkey={ variation.name }\n\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t<BlockIcon icon={ variation.icon } showColors />\n\t\t\t\t\t\t}\n\t\t\t\t\t\tvalue={ variation.name }\n\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\tselectedValue === variation.name\n\t\t\t\t\t\t\t\t? variation.title\n\t\t\t\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t\t\t\t/* translators: %s: Block or block variation name. */\n\t\t\t\t\t\t\t\t\t\t__( 'Transform to %s' ),\n\t\t\t\t\t\t\t\t\t\tvariation.title\n\t\t\t\t\t\t\t\t )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</ToggleGroupControl>\n\t\t</div>\n\t);\n}\n\nfunction __experimentalBlockVariationTransforms( { blockClientId } ) {\n\tconst { updateBlockAttributes } = useDispatch( blockEditorStore );\n\tconst {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgCE;AA7BF,oBAAqC;AACrC,kBAA4B;AAC5B,wBAQO;AACP,kBAAuC;AACvC,qBAAwB;AACxB,mBAA4B;AAK5B,wBAAsB;AACtB,mBAA0C;AAC1C,yBAAuB;AAEvB,SAAS,kBAAmB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,SACC,6CAAC,cAAS,WACT;AAAA,gDAAC,oCAAe,IAAG,UAChB,8BAAI,wBAAyB,GAChC;AAAA,IACE,WAAW,IAAK,CAAE,cACnB;AAAA,MAAC;AAAA;AAAA,QACA,uBAAqB;AAAA,QACrB,MAAK;AAAA,QAEL,MAAO,4CAAC,kBAAAA,SAAA,EAAU,MAAO,UAAU,MAAO,YAAU,MAAC;AAAA,QACrD,WAAY,kBAAkB,UAAU;AAAA,QACxC,OACC,kBAAkB,UAAU,OACzB,UAAU,YACV;AAAA;AAAA,cAEA,gBAAI,iBAAkB;AAAA,UACtB,UAAU;AAAA,QACV;AAAA,QAEJ,SAAU,MAAM,kBAAmB,UAAU,IAAK;AAAA,QAClD,cAAa,UAAU;AAAA,QACvB,aAAW;AAAA;AAAA,MAdL,UAAU;AAAA,IAejB,CACC;AAAA,KACH;AAEF;AAEA,SAAS,mBAAoB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,gBAAgB,WAAW;AAAA,IAChC,CAAE,EAAE,MAAM,OAAO,YAAY,OAAS;AAAA,MACrC,OAAO;AAAA,MACP,OAAO;AAAA,MACP,MAAM;AAAA,IACP;AAAA,EACD;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,WAAQ,gBAAI,wBAAyB;AAAA,MACrC,UAAO,gBAAI,wBAAyB;AAAA,MACpC,cAAe;AAAA,QACd,UAAU;AAAA,QACV,WAAW,GAAI,SAAU;AAAA,MAC1B;AAAA,MACA,MAAO;AAAA,MACP,aAAc,EAAE,cAAc,QAAQ;AAAA,MAEpC,gBACD,4CAAC,+BACA;AAAA,QAAC;AAAA;AAAA,UACA,SAAU;AAAA,UACV,OAAQ;AAAA,UACR,UAAW;AAAA;AAAA,MACZ,GACD;AAAA;AAAA,EAEF;AAEF;AAEA,SAAS,6BAA8B;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,SACC,4CAAC,SAAI,WACJ;AAAA,IAAC,kBAAAC;AAAA,IAAA;AAAA,MACA,WAAQ,gBAAI,wBAAyB;AAAA,MACrC,OAAQ;AAAA,MACR,qBAAmB;AAAA,MACnB,UAAW;AAAA,MACX,uBAAqB;AAAA,MACrB,yBAAuB;AAAA,MAErB,qBAAW,IAAK,CAAE,cACnB;AAAA,QAAC,kBAAAC;AAAA,QAAA;AAAA,UAEA,MACC,4CAAC,kBAAAF,SAAA,EAAU,MAAO,UAAU,MAAO,YAAU,MAAC;AAAA,UAE/C,OAAQ,UAAU;AAAA,UAClB,OACC,kBAAkB,UAAU,OACzB,UAAU,YACV;AAAA;AAAA,gBAEA,gBAAI,iBAAkB;AAAA,YACtB,UAAU;AAAA,UACV;AAAA;AAAA,QAZE,UAAU;AAAA,MAcjB,CACC;AAAA;AAAA,EACH,GACD;AAEF;AAEA,SAAS,uCAAwC,EAAE,cAAc,GAAI;AACpE,QAAM,EAAE,sBAAsB,QAAI,yBAAa,aAAAG,KAAiB;AAChE,QAAM,
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tButton,\n\tDropdownMenu,\n\tMenuGroup,\n\tMenuItemsChoice,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,\n\tVisuallyHidden,\n} from '@wordpress/components';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useMemo } from '@wordpress/element';\nimport { chevronDown } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport BlockIcon from '../block-icon';\nimport { store as blockEditorStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\n\nfunction VariationsButtons( {\n\tclassName,\n\tonSelectVariation,\n\tselectedValue,\n\tvariations,\n} ) {\n\treturn (\n\t\t<fieldset className={ className }>\n\t\t\t<VisuallyHidden as=\"legend\">\n\t\t\t\t{ __( 'Transform to variation' ) }\n\t\t\t</VisuallyHidden>\n\t\t\t{ variations.map( ( variation ) => (\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\tkey={ variation.name }\n\t\t\t\t\ticon={ <BlockIcon icon={ variation.icon } showColors /> }\n\t\t\t\t\tisPressed={ selectedValue === variation.name }\n\t\t\t\t\tlabel={\n\t\t\t\t\t\tselectedValue === variation.name\n\t\t\t\t\t\t\t? variation.title\n\t\t\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t\t\t/* translators: %s: Block or block variation name. */\n\t\t\t\t\t\t\t\t\t__( 'Transform to %s' ),\n\t\t\t\t\t\t\t\t\tvariation.title\n\t\t\t\t\t\t\t )\n\t\t\t\t\t}\n\t\t\t\t\tonClick={ () => onSelectVariation( variation.name ) }\n\t\t\t\t\taria-label={ variation.title }\n\t\t\t\t\tshowTooltip\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</fieldset>\n\t);\n}\n\nfunction VariationsDropdown( {\n\tclassName,\n\tonSelectVariation,\n\tselectedValue,\n\tvariations,\n} ) {\n\tconst selectOptions = variations.map(\n\t\t( { name, title, description } ) => ( {\n\t\t\tvalue: name,\n\t\t\tlabel: title,\n\t\t\tinfo: description,\n\t\t} )\n\t);\n\n\treturn (\n\t\t<DropdownMenu\n\t\t\tclassName={ className }\n\t\t\tlabel={ __( 'Transform to variation' ) }\n\t\t\ttext={ __( 'Transform to variation' ) }\n\t\t\tpopoverProps={ {\n\t\t\t\tposition: 'bottom center',\n\t\t\t\tclassName: `${ className }__popover`,\n\t\t\t} }\n\t\t\ticon={ chevronDown }\n\t\t\ttoggleProps={ { iconPosition: 'right' } }\n\t\t>\n\t\t\t{ () => (\n\t\t\t\t<MenuGroup>\n\t\t\t\t\t<MenuItemsChoice\n\t\t\t\t\t\tchoices={ selectOptions }\n\t\t\t\t\t\tvalue={ selectedValue }\n\t\t\t\t\t\tonSelect={ onSelectVariation }\n\t\t\t\t\t/>\n\t\t\t\t</MenuGroup>\n\t\t\t) }\n\t\t</DropdownMenu>\n\t);\n}\n\nfunction VariationsToggleGroupControl( {\n\tclassName,\n\tonSelectVariation,\n\tselectedValue,\n\tvariations,\n} ) {\n\treturn (\n\t\t<div className={ className }>\n\t\t\t<ToggleGroupControl\n\t\t\t\tlabel={ __( 'Transform to variation' ) }\n\t\t\t\tvalue={ selectedValue }\n\t\t\t\thideLabelFromVision\n\t\t\t\tonChange={ onSelectVariation }\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t>\n\t\t\t\t{ variations.map( ( variation ) => (\n\t\t\t\t\t<ToggleGroupControlOptionIcon\n\t\t\t\t\t\tkey={ variation.name }\n\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t<BlockIcon icon={ variation.icon } showColors />\n\t\t\t\t\t\t}\n\t\t\t\t\t\tvalue={ variation.name }\n\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\tselectedValue === variation.name\n\t\t\t\t\t\t\t\t? variation.title\n\t\t\t\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t\t\t\t/* translators: %s: Block or block variation name. */\n\t\t\t\t\t\t\t\t\t\t__( 'Transform to %s' ),\n\t\t\t\t\t\t\t\t\t\tvariation.title\n\t\t\t\t\t\t\t\t )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</ToggleGroupControl>\n\t\t</div>\n\t);\n}\n\nfunction __experimentalBlockVariationTransforms( { blockClientId } ) {\n\tconst { updateBlockAttributes } = useDispatch( blockEditorStore );\n\tconst {\n\t\tactiveBlockVariation,\n\t\tunfilteredVariations,\n\t\tblockName,\n\t\tisContentOnly,\n\t\tisSection,\n\t} = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getActiveBlockVariation, getBlockVariations } =\n\t\t\t\tselect( blocksStore );\n\n\t\t\tconst {\n\t\t\t\tgetBlockName,\n\t\t\t\tgetBlockAttributes,\n\t\t\t\tgetBlockEditingMode,\n\t\t\t\tisSectionBlock,\n\t\t\t} = unlock( select( blockEditorStore ) );\n\n\t\t\tconst name = blockClientId && getBlockName( blockClientId );\n\n\t\t\tconst { hasContentRoleAttribute } = unlock( select( blocksStore ) );\n\t\t\tconst isContentBlock = hasContentRoleAttribute( name );\n\n\t\t\treturn {\n\t\t\t\tactiveBlockVariation: getActiveBlockVariation(\n\t\t\t\t\tname,\n\t\t\t\t\tgetBlockAttributes( blockClientId ),\n\t\t\t\t\t'transform'\n\t\t\t\t),\n\t\t\t\tunfilteredVariations:\n\t\t\t\t\tname && getBlockVariations( name, 'transform' ),\n\t\t\t\tblockName: name,\n\t\t\t\tisContentOnly:\n\t\t\t\t\tgetBlockEditingMode( blockClientId ) === 'contentOnly' &&\n\t\t\t\t\t! isContentBlock,\n\t\t\t\tisSection: isSectionBlock( blockClientId ),\n\t\t\t};\n\t\t},\n\t\t[ blockClientId ]\n\t);\n\n\t/*\n\t * Hack for WordPress 6.9\n\t *\n\t * The Stretchy blocks shipped in 6.9 were ultimately\n\t * implemented as block variations of the base types Paragraph\n\t * and Heading. See #73056 for discussion and trade-offs.\n\t *\n\t * The main drawback of this choice is that the Variations API\n\t * doesn't offer enough control over how prominent and how tied\n\t * to the base type a variation should be.\n\t *\n\t * In order to ship these new \"blocks\" with an acceptable UX,\n\t * we need two hacks until the Variations API is improved:\n\t *\n\t * - Don't show the variations switcher in the block inspector\n\t * for Paragraph, Heading, Stretchy Paragraph and Stretchy\n\t * Heading (implemented below). Transformations are still\n\t * available in the block switcher.\n\t *\n\t * - Move the stretchy variations to the end of the core blocks\n\t * list in the block inserter (implemented in\n\t * getInserterItems in #73056).\n\t */\n\tconst variations = useMemo( () => {\n\t\tif ( blockName === 'core/paragraph' ) {\n\t\t\t// Always hide options when active variation is stretchy, but\n\t\t\t// ensure that there are no third-party variations before doing the\n\t\t\t// same elsewhere.\n\t\t\tif (\n\t\t\t\tactiveBlockVariation?.name === 'stretchy-paragraph' ||\n\t\t\t\tunfilteredVariations.every( ( v ) =>\n\t\t\t\t\t[ 'paragraph', 'stretchy-paragraph' ].includes( v.name )\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\treturn [];\n\t\t\t}\n\t\t\t// If there are other variations, only hide the stretchy one.\n\t\t\treturn unfilteredVariations.filter(\n\t\t\t\t( v ) => v.name !== 'stretchy-paragraph'\n\t\t\t);\n\t\t} else if ( blockName === 'core/heading' ) {\n\t\t\tif (\n\t\t\t\tactiveBlockVariation?.name === 'stretchy-heading' ||\n\t\t\t\tunfilteredVariations.every( ( v ) =>\n\t\t\t\t\t[ 'heading', 'stretchy-heading' ].includes( v.name )\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\treturn [];\n\t\t\t}\n\t\t\treturn unfilteredVariations.filter(\n\t\t\t\t( v ) => v.name !== 'stretchy-heading'\n\t\t\t);\n\t\t}\n\t\treturn unfilteredVariations;\n\t}, [ activeBlockVariation?.name, blockName, unfilteredVariations ] );\n\n\tconst selectedValue = activeBlockVariation?.name;\n\n\t// Check if each variation has a unique icon.\n\tconst hasUniqueIcons = useMemo( () => {\n\t\tconst variationIcons = new Set();\n\t\tif ( ! variations ) {\n\t\t\treturn false;\n\t\t}\n\t\tvariations.forEach( ( variation ) => {\n\t\t\tif ( variation.icon ) {\n\t\t\t\tvariationIcons.add( variation.icon?.src || variation.icon );\n\t\t\t}\n\t\t} );\n\t\treturn variationIcons.size === variations.length;\n\t}, [ variations ] );\n\n\tconst onSelectVariation = ( variationName ) => {\n\t\tupdateBlockAttributes( blockClientId, {\n\t\t\t...variations.find( ( { name } ) => name === variationName )\n\t\t\t\t.attributes,\n\t\t} );\n\t};\n\n\tconst hideVariationsForSections =\n\t\twindow?.__experimentalContentOnlyPatternInsertion && isSection;\n\n\tif ( ! variations?.length || isContentOnly || hideVariationsForSections ) {\n\t\treturn null;\n\t}\n\n\tconst baseClass = 'block-editor-block-variation-transforms';\n\n\t// Show buttons if there are more than 5 variations because the ToggleGroupControl does not wrap\n\tconst showButtons = variations.length > 5;\n\n\tconst ButtonComponent = showButtons\n\t\t? VariationsButtons\n\t\t: VariationsToggleGroupControl;\n\n\tconst Component = hasUniqueIcons ? ButtonComponent : VariationsDropdown;\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={ baseClass }\n\t\t\tonSelectVariation={ onSelectVariation }\n\t\t\tselectedValue={ selectedValue }\n\t\t\tvariations={ variations }\n\t\t/>\n\t);\n}\n\nexport default __experimentalBlockVariationTransforms;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["BlockIcon", "ToggleGroupControl", "ToggleGroupControlOptionIcon", "blockEditorStore", "blocksStore"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/border-radius-control/single-input-control.js"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalHStack as HStack,\n\tIcon,\n\tTooltip,\n\tRangeControl,\n\tButton,\n\tCustomSelectControl,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { settings } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport {\n\tgetAllValue,\n\tgetCustomValueFromPreset,\n\tgetPresetValueFromControlValue,\n\tgetPresetValueFromCustomValue,\n\tgetSliderValueFromPreset,\n\tisValuePreset,\n\tconvertPresetsToCustomValues,\n} from './utils';\nimport {\n\tCORNERS,\n\tICONS,\n\tMIN_BORDER_RADIUS_VALUE,\n\tMAX_BORDER_RADIUS_VALUES,\n\tRANGE_CONTROL_MAX_SIZE,\n} from './constants';\n\nexport default function SingleInputControl( {\n\tcorner,\n\tonChange,\n\tselectedUnits,\n\tsetSelectedUnits,\n\tvalues: valuesProp,\n\tunits,\n\tpresets,\n} ) {\n\tconst changeCornerValue = ( validatedValue ) => {\n\t\tif ( corner === 'all' ) {\n\t\t\tonChange( {\n\t\t\t\ttopLeft: validatedValue,\n\t\t\t\ttopRight: validatedValue,\n\t\t\t\tbottomLeft: validatedValue,\n\t\t\t\tbottomRight: validatedValue,\n\t\t\t} );\n\t\t} else {\n\t\t\tonChange( {\n\t\t\t\t...values,\n\t\t\t\t[ corner ]: validatedValue,\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst onChangeValue = ( next ) => {\n\t\tif ( ! onChange ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Filter out CSS-unit-only values to prevent invalid styles.\n\t\tconst isNumeric = ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\t\tchangeCornerValue( nextValue );\n\t};\n\n\tconst onChangeUnit = ( next ) => {\n\t\tconst newUnits = { ...selectedUnits };\n\t\tif ( corner === 'all' ) {\n\t\t\tnewUnits.topLeft = next;\n\t\t\tnewUnits.topRight = next;\n\t\t\tnewUnits.bottomLeft = next;\n\t\t\tnewUnits.bottomRight = next;\n\t\t} else {\n\t\t\tnewUnits[ corner ] = next;\n\t\t}\n\t\tsetSelectedUnits( newUnits );\n\t};\n\n\t// For shorthand style & backwards compatibility, handle flat string value.\n\tconst values =\n\t\ttypeof valuesProp !== 'string'\n\t\t\t? valuesProp\n\t\t\t: {\n\t\t\t\t\ttopLeft: valuesProp,\n\t\t\t\t\ttopRight: valuesProp,\n\t\t\t\t\tbottomLeft: valuesProp,\n\t\t\t\t\tbottomRight: valuesProp,\n\t\t\t };\n\n\t// For 'all' corner, convert presets to custom values before calling getAllValue\n\t// For individual corners, check if the value should be converted to a preset\n\tlet value;\n\tif ( corner === 'all' ) {\n\t\tconst convertedValues = convertPresetsToCustomValues( values, presets );\n\t\tconst customValue = getAllValue( convertedValues );\n\t\tvalue = getPresetValueFromCustomValue( customValue, presets );\n\t} else {\n\t\tvalue = getPresetValueFromCustomValue( values[ corner ], presets );\n\t}\n\tconst resolvedPresetValue = isValuePreset( value )\n\t\t? getCustomValueFromPreset( value, presets )\n\t\t: value;\n\tconst [ parsedQuantity, parsedUnit ] =\n\t\tparseQuantityAndUnitFromRawValue( resolvedPresetValue );\n\tconst computedUnit = value\n\t\t? parsedUnit\n\t\t: selectedUnits[ corner ] || selectedUnits.flat || 'px';\n\tconst unitConfig =\n\t\tunits && units.find( ( item ) => item.value === computedUnit );\n\tconst step = unitConfig?.step || 1;\n\tconst [ showCustomValueControl, setShowCustomValueControl ] = useState(\n\t\tvalue !== undefined && ! isValuePreset( value )\n\t);\n\tconst showRangeControl = presets.length <= RANGE_CONTROL_MAX_SIZE;\n\tconst presetIndex = getSliderValueFromPreset( value, presets );\n\tconst rangeTooltip = ( newValue ) =>\n\t\tvalue === undefined ? undefined : presets[ newValue ]?.name;\n\tconst marks = presets\n\t\t.slice( 1, presets.length - 1 )\n\t\t.map( ( _newValue, index ) => ( {\n\t\t\tvalue: index + 1,\n\t\t\tlabel: undefined,\n\t\t} ) );\n\tconst hasPresets = marks.length > 0;\n\tlet options = [];\n\tif ( ! showRangeControl ) {\n\t\toptions = [\n\t\t\t...presets,\n\t\t\t{\n\t\t\t\tname: __( 'Custom' ),\n\t\t\t\tslug: 'custom',\n\t\t\t\tsize: resolvedPresetValue,\n\t\t\t},\n\t\t].map( ( size, index ) => ( {\n\t\t\tkey: index,\n\t\t\tname: size.name,\n\t\t} ) );\n\t}\n\tconst icon = ICONS[ corner ];\n\n\tconst handleSliderChange = ( next ) => {\n\t\tconst val =\n\t\t\tnext !== undefined ? `${ next }${ computedUnit }` : undefined;\n\t\tchangeCornerValue( val );\n\t};\n\n\t// Controls are wrapped in tooltips as visible labels aren't desired here.\n\t// Tooltip rendering also requires the UnitControl to be wrapped. See:\n\t// https://github.com/WordPress/gutenberg/pull/24966#issuecomment-685875026\n\treturn (\n\t\t<HStack>\n\t\t\t{ icon && (\n\t\t\t\t<Icon\n\t\t\t\t\tclassName=\"components-border-radius-control__icon\"\n\t\t\t\t\ticon={ icon }\n\t\t\t\t\tsize={ 24 }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ ( ! hasPresets || showCustomValueControl ) && (\n\t\t\t\t<div className=\"components-border-radius-control__input-controls-wrapper\">\n\t\t\t\t\t<Tooltip text={ CORNERS[ corner ] } placement=\"top\">\n\t\t\t\t\t\t<div className=\"components-border-radius-control__tooltip-wrapper\">\n\t\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t\tclassName=\"components-border-radius-control__unit-control\"\n\t\t\t\t\t\t\t\taria-label={ CORNERS[ corner ] }\n\t\t\t\t\t\t\t\tvalue={ [ parsedQuantity, computedUnit ].join(\n\t\t\t\t\t\t\t\t\t''\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tonChange={ onChangeValue }\n\t\t\t\t\t\t\t\tonUnitChange={ onChangeUnit }\n\t\t\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t\t\tmin={ MIN_BORDER_RADIUS_VALUE }\n\t\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tlabel={ __( 'Border radius' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\tclassName=\"components-border-radius-control__range-control\"\n\t\t\t\t\t\tvalue={ parsedQuantity ?? '' }\n\t\t\t\t\t\tmin={ MIN_BORDER_RADIUS_VALUE }\n\t\t\t\t\t\tmax={ MAX_BORDER_RADIUS_VALUES[ computedUnit ] }\n\t\t\t\t\t\tinitialPosition={ 0 }\n\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\tonChange={ handleSliderChange }\n\t\t\t\t\t\tstep={ step }\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ hasPresets && showRangeControl && ! showCustomValueControl && (\n\t\t\t\t<RangeControl\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tclassName=\"components-border-radius-control__range-control\"\n\t\t\t\t\tvalue={ presetIndex }\n\t\t\t\t\tonChange={ ( newSize ) => {\n\t\t\t\t\t\tchangeCornerValue(\n\t\t\t\t\t\t\tgetPresetValueFromControlValue(\n\t\t\t\t\t\t\t\tnewSize,\n\t\t\t\t\t\t\t\t'range',\n\t\t\t\t\t\t\t\tpresets\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t);\n\t\t\t\t\t} }\n\t\t\t\t\twithInputField={ false }\n\t\t\t\t\taria-valuenow={ presetIndex }\n\t\t\t\t\taria-valuetext={ presets[ presetIndex ]?.name }\n\t\t\t\t\trenderTooltipContent={ rangeTooltip }\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tmax={ presets.length - 1 }\n\t\t\t\t\tmarks={ marks }\n\t\t\t\t\tlabel={ CORNERS[ corner ] }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t{ ! showRangeControl && ! showCustomValueControl && (\n\t\t\t\t<CustomSelectControl\n\t\t\t\t\tclassName=\"components-border-radius-control__custom-select-control\"\n\t\t\t\t\tvalue={\n\t\t\t\t\t\toptions.find(\n\t\t\t\t\t\t\t( option ) => option.key === presetIndex\n\t\t\t\t\t\t) || options[ options.length - 1 ]\n\t\t\t\t\t}\n\t\t\t\t\tonChange={ ( selection ) => {\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\tselection.selectedItem.key ===\n\t\t\t\t\t\t\toptions.length - 1\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\tsetShowCustomValueControl( true );\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tchangeCornerValue(\n\t\t\t\t\t\t\t\tgetPresetValueFromControlValue(\n\t\t\t\t\t\t\t\t\tselection.selectedItem.key,\n\t\t\t\t\t\t\t\t\t'selectList',\n\t\t\t\t\t\t\t\t\tpresets\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t} }\n\t\t\t\t\toptions={ options }\n\t\t\t\t\tlabel={ CORNERS[ corner ] }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasPresets && (\n\t\t\t\t<Button\n\t\t\t\t\tlabel={\n\t\t\t\t\t\tshowCustomValueControl\n\t\t\t\t\t\t\t? __( 'Use border radius preset' )\n\t\t\t\t\t\t\t: __( 'Set custom border radius' )\n\t\t\t\t\t}\n\t\t\t\t\ticon={ settings }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tsetShowCustomValueControl( ! showCustomValueControl );\n\t\t\t\t\t} }\n\t\t\t\t\tisPressed={ showCustomValueControl }\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tclassName=\"components-border-radius-control__custom-toggle\"\n\t\t\t\t\ticonSize={ 24 }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</HStack>\n\t);\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalHStack as HStack,\n\tIcon,\n\tTooltip,\n\tRangeControl,\n\tButton,\n\tCustomSelectControl,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { settings } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport {\n\tgetAllValue,\n\tgetCustomValueFromPreset,\n\tgetPresetValueFromControlValue,\n\tgetPresetValueFromCustomValue,\n\tgetSliderValueFromPreset,\n\tisValuePreset,\n\tconvertPresetsToCustomValues,\n} from './utils';\nimport {\n\tCORNERS,\n\tICONS,\n\tMIN_BORDER_RADIUS_VALUE,\n\tMAX_BORDER_RADIUS_VALUES,\n\tRANGE_CONTROL_MAX_SIZE,\n} from './constants';\n\nexport default function SingleInputControl( {\n\tcorner,\n\tonChange,\n\tselectedUnits,\n\tsetSelectedUnits,\n\tvalues: valuesProp,\n\tunits,\n\tpresets,\n} ) {\n\tconst changeCornerValue = ( validatedValue ) => {\n\t\tif ( corner === 'all' ) {\n\t\t\tonChange( {\n\t\t\t\ttopLeft: validatedValue,\n\t\t\t\ttopRight: validatedValue,\n\t\t\t\tbottomLeft: validatedValue,\n\t\t\t\tbottomRight: validatedValue,\n\t\t\t} );\n\t\t} else {\n\t\t\tonChange( {\n\t\t\t\t...values,\n\t\t\t\t[ corner ]: validatedValue,\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst onChangeValue = ( next ) => {\n\t\tif ( ! onChange ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Filter out CSS-unit-only values to prevent invalid styles.\n\t\tconst isNumeric = ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\t\tchangeCornerValue( nextValue );\n\t};\n\n\tconst onChangeUnit = ( next ) => {\n\t\tconst newUnits = { ...selectedUnits };\n\t\tif ( corner === 'all' ) {\n\t\t\tnewUnits.flat = next;\n\t\t\tnewUnits.topLeft = next;\n\t\t\tnewUnits.topRight = next;\n\t\t\tnewUnits.bottomLeft = next;\n\t\t\tnewUnits.bottomRight = next;\n\t\t} else {\n\t\t\tnewUnits[ corner ] = next;\n\t\t}\n\t\tsetSelectedUnits( newUnits );\n\t};\n\n\t// For shorthand style & backwards compatibility, handle flat string value.\n\tconst values =\n\t\ttypeof valuesProp !== 'string'\n\t\t\t? valuesProp\n\t\t\t: {\n\t\t\t\t\ttopLeft: valuesProp,\n\t\t\t\t\ttopRight: valuesProp,\n\t\t\t\t\tbottomLeft: valuesProp,\n\t\t\t\t\tbottomRight: valuesProp,\n\t\t\t };\n\n\t// For 'all' corner, convert presets to custom values before calling getAllValue\n\t// For individual corners, check if the value should be converted to a preset\n\tlet value;\n\tif ( corner === 'all' ) {\n\t\tconst convertedValues = convertPresetsToCustomValues( values, presets );\n\t\tconst customValue = getAllValue( convertedValues );\n\t\tvalue = getPresetValueFromCustomValue( customValue, presets );\n\t} else {\n\t\tvalue = getPresetValueFromCustomValue( values[ corner ], presets );\n\t}\n\tconst resolvedPresetValue = isValuePreset( value )\n\t\t? getCustomValueFromPreset( value, presets )\n\t\t: value;\n\tconst [ parsedQuantity, parsedUnit ] =\n\t\tparseQuantityAndUnitFromRawValue( resolvedPresetValue );\n\tconst computedUnit = value\n\t\t? parsedUnit\n\t\t: selectedUnits[ corner ] || selectedUnits.flat || 'px';\n\tconst unitConfig =\n\t\tunits && units.find( ( item ) => item.value === computedUnit );\n\tconst step = unitConfig?.step || 1;\n\tconst [ showCustomValueControl, setShowCustomValueControl ] = useState(\n\t\tvalue !== undefined && ! isValuePreset( value )\n\t);\n\tconst showRangeControl = presets.length <= RANGE_CONTROL_MAX_SIZE;\n\tconst presetIndex = getSliderValueFromPreset( value, presets );\n\tconst rangeTooltip = ( newValue ) =>\n\t\tvalue === undefined ? undefined : presets[ newValue ]?.name;\n\tconst marks = presets\n\t\t.slice( 1, presets.length - 1 )\n\t\t.map( ( _newValue, index ) => ( {\n\t\t\tvalue: index + 1,\n\t\t\tlabel: undefined,\n\t\t} ) );\n\tconst hasPresets = marks.length > 0;\n\tlet options = [];\n\tif ( ! showRangeControl ) {\n\t\toptions = [\n\t\t\t...presets,\n\t\t\t{\n\t\t\t\tname: __( 'Custom' ),\n\t\t\t\tslug: 'custom',\n\t\t\t\tsize: resolvedPresetValue,\n\t\t\t},\n\t\t].map( ( size, index ) => ( {\n\t\t\tkey: index,\n\t\t\tname: size.name,\n\t\t} ) );\n\t}\n\tconst icon = ICONS[ corner ];\n\n\tconst handleSliderChange = ( next ) => {\n\t\tconst val =\n\t\t\tnext !== undefined ? `${ next }${ computedUnit }` : undefined;\n\t\tchangeCornerValue( val );\n\t};\n\n\t// Controls are wrapped in tooltips as visible labels aren't desired here.\n\t// Tooltip rendering also requires the UnitControl to be wrapped. See:\n\t// https://github.com/WordPress/gutenberg/pull/24966#issuecomment-685875026\n\treturn (\n\t\t<HStack>\n\t\t\t{ icon && (\n\t\t\t\t<Icon\n\t\t\t\t\tclassName=\"components-border-radius-control__icon\"\n\t\t\t\t\ticon={ icon }\n\t\t\t\t\tsize={ 24 }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ ( ! hasPresets || showCustomValueControl ) && (\n\t\t\t\t<div className=\"components-border-radius-control__input-controls-wrapper\">\n\t\t\t\t\t<Tooltip text={ CORNERS[ corner ] } placement=\"top\">\n\t\t\t\t\t\t<div className=\"components-border-radius-control__tooltip-wrapper\">\n\t\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t\tclassName=\"components-border-radius-control__unit-control\"\n\t\t\t\t\t\t\t\taria-label={ CORNERS[ corner ] }\n\t\t\t\t\t\t\t\tvalue={ [ parsedQuantity, computedUnit ].join(\n\t\t\t\t\t\t\t\t\t''\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tonChange={ onChangeValue }\n\t\t\t\t\t\t\t\tonUnitChange={ onChangeUnit }\n\t\t\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t\t\tmin={ MIN_BORDER_RADIUS_VALUE }\n\t\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tlabel={ __( 'Border radius' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\tclassName=\"components-border-radius-control__range-control\"\n\t\t\t\t\t\tvalue={ parsedQuantity ?? '' }\n\t\t\t\t\t\tmin={ MIN_BORDER_RADIUS_VALUE }\n\t\t\t\t\t\tmax={ MAX_BORDER_RADIUS_VALUES[ computedUnit ] }\n\t\t\t\t\t\tinitialPosition={ 0 }\n\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\tonChange={ handleSliderChange }\n\t\t\t\t\t\tstep={ step }\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ hasPresets && showRangeControl && ! showCustomValueControl && (\n\t\t\t\t<RangeControl\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tclassName=\"components-border-radius-control__range-control\"\n\t\t\t\t\tvalue={ presetIndex }\n\t\t\t\t\tonChange={ ( newSize ) => {\n\t\t\t\t\t\tchangeCornerValue(\n\t\t\t\t\t\t\tgetPresetValueFromControlValue(\n\t\t\t\t\t\t\t\tnewSize,\n\t\t\t\t\t\t\t\t'range',\n\t\t\t\t\t\t\t\tpresets\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t);\n\t\t\t\t\t} }\n\t\t\t\t\twithInputField={ false }\n\t\t\t\t\taria-valuenow={ presetIndex }\n\t\t\t\t\taria-valuetext={ presets[ presetIndex ]?.name }\n\t\t\t\t\trenderTooltipContent={ rangeTooltip }\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tmax={ presets.length - 1 }\n\t\t\t\t\tmarks={ marks }\n\t\t\t\t\tlabel={ CORNERS[ corner ] }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t{ ! showRangeControl && ! showCustomValueControl && (\n\t\t\t\t<CustomSelectControl\n\t\t\t\t\tclassName=\"components-border-radius-control__custom-select-control\"\n\t\t\t\t\tvalue={\n\t\t\t\t\t\toptions.find(\n\t\t\t\t\t\t\t( option ) => option.key === presetIndex\n\t\t\t\t\t\t) || options[ options.length - 1 ]\n\t\t\t\t\t}\n\t\t\t\t\tonChange={ ( selection ) => {\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\tselection.selectedItem.key ===\n\t\t\t\t\t\t\toptions.length - 1\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\tsetShowCustomValueControl( true );\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tchangeCornerValue(\n\t\t\t\t\t\t\t\tgetPresetValueFromControlValue(\n\t\t\t\t\t\t\t\t\tselection.selectedItem.key,\n\t\t\t\t\t\t\t\t\t'selectList',\n\t\t\t\t\t\t\t\t\tpresets\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t} }\n\t\t\t\t\toptions={ options }\n\t\t\t\t\tlabel={ CORNERS[ corner ] }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasPresets && (\n\t\t\t\t<Button\n\t\t\t\t\tlabel={\n\t\t\t\t\t\tshowCustomValueControl\n\t\t\t\t\t\t\t? __( 'Use border radius preset' )\n\t\t\t\t\t\t\t: __( 'Set custom border radius' )\n\t\t\t\t\t}\n\t\t\t\t\ticon={ settings }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tsetShowCustomValueControl( ! showCustomValueControl );\n\t\t\t\t\t} }\n\t\t\t\t\tisPressed={ showCustomValueControl }\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tclassName=\"components-border-radius-control__custom-toggle\"\n\t\t\t\t\ticonSize={ 24 }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</HStack>\n\t);\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["parseQuantityAndUnitFromRawValue", "HStack", "UnitControl"]
|
|
7
7
|
}
|
|
@@ -98,13 +98,17 @@ function BlockBindingsPanelMenuContent({ attribute, binding, sources }) {
|
|
|
98
98
|
key: item.key
|
|
99
99
|
}
|
|
100
100
|
};
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
101
|
+
let values = {};
|
|
102
|
+
try {
|
|
103
|
+
values = source.getValues({
|
|
104
|
+
select,
|
|
105
|
+
context: blockContext,
|
|
106
|
+
bindings: {
|
|
107
|
+
[attribute]: itemBindings
|
|
108
|
+
}
|
|
109
|
+
});
|
|
110
|
+
} catch (e) {
|
|
111
|
+
}
|
|
108
112
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
109
113
|
Menu.CheckboxItem,
|
|
110
114
|
{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/hooks/block-bindings.js"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { getBlockBindingsSources, getBlockType } from '@wordpress/blocks';\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalItem as Item,\n\t__experimentalText as Text,\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalVStack as VStack,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { useContext } from '@wordpress/element';\nimport { useViewportMatch } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { useBlockBindingsUtils } from '../utils/block-bindings';\nimport { unlock } from '../lock-unlock';\nimport InspectorControls from '../components/inspector-controls';\nimport BlockContext from '../components/block-context';\nimport { useBlockEditContext } from '../components/block-edit';\nimport { store as blockEditorStore } from '../store';\n\nconst { Menu } = unlock( componentsPrivateApis );\n\nconst EMPTY_OBJECT = {};\n\n/**\n * Get the normalized attribute type for block bindings.\n * Converts 'rich-text' to 'string' since rich-text is stored as string.\n *\n * @param {string} blockName The block name.\n * @param {string} attribute The attribute name.\n * @return {string} The normalized attribute type.\n */\nconst getAttributeType = ( blockName, attribute ) => {\n\tconst _attributeType =\n\t\tgetBlockType( blockName ).attributes?.[ attribute ]?.type;\n\treturn _attributeType === 'rich-text' ? 'string' : _attributeType;\n};\n\nconst useToolsPanelDropdownMenuProps = () => {\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\treturn ! isMobile\n\t\t? {\n\t\t\t\tpopoverProps: {\n\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\t// For non-mobile, inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)\n\t\t\t\t\toffset: 259,\n\t\t\t\t},\n\t\t }\n\t\t: {};\n};\n\nfunction BlockBindingsPanelMenuContent( { attribute, binding, sources } ) {\n\tconst { clientId } = useBlockEditContext();\n\tconst { updateBlockBindings } = useBlockBindingsUtils();\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\tconst blockContext = useContext( BlockContext );\n\tconst { attributeType, select } = useSelect(\n\t\t( _select ) => {\n\t\t\tconst { name: blockName } =\n\t\t\t\t_select( blockEditorStore ).getBlock( clientId );\n\t\t\treturn {\n\t\t\t\tattributeType: getAttributeType( blockName, attribute ),\n\t\t\t\tselect: _select,\n\t\t\t};\n\t\t},\n\t\t[ clientId, attribute ]\n\t);\n\treturn (\n\t\t<Menu placement={ isMobile ? 'bottom-start' : 'left-start' }>\n\t\t\t{ Object.entries( sources ).map( ( [ sourceKey, source ] ) => {\n\t\t\t\t// Only show sources that have compatible data for this specific attribute.\n\t\t\t\tconst sourceDataItems = source.data?.filter(\n\t\t\t\t\t( item ) => item?.type === attributeType\n\t\t\t\t);\n\n\t\t\t\tconst noItemsAvailable =\n\t\t\t\t\t! sourceDataItems || sourceDataItems.length === 0;\n\n\t\t\t\tif ( noItemsAvailable ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\treturn (\n\t\t\t\t\t<Menu\n\t\t\t\t\t\tkey={ sourceKey }\n\t\t\t\t\t\tplacement={ isMobile ? 'bottom-start' : 'left-start' }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Menu.SubmenuTriggerItem>\n\t\t\t\t\t\t\t<Menu.ItemLabel>{ source.label }</Menu.ItemLabel>\n\t\t\t\t\t\t</Menu.SubmenuTriggerItem>\n\t\t\t\t\t\t<Menu.Popover gutter={ 8 }>\n\t\t\t\t\t\t\t<Menu.Group>\n\t\t\t\t\t\t\t\t{ sourceDataItems.map( ( item ) => {\n\t\t\t\t\t\t\t\t\tconst itemBindings = {\n\t\t\t\t\t\t\t\t\t\tsource: sourceKey,\n\t\t\t\t\t\t\t\t\t\targs: item?.args || {\n\t\t\t\t\t\t\t\t\t\t\tkey: item.key,\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\tconst values = source.getValues( {\n\t\t\t\t\t\t\t\t\t\tselect,\n\t\t\t\t\t\t\t\t\t\tcontext: blockContext,\n\t\t\t\t\t\t\t\t\t\tbindings: {\n\t\t\t\t\t\t\t\t\t\t\t[ attribute ]: itemBindings,\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<Menu.CheckboxItem\n\t\t\t\t\t\t\t\t\t\t\tkey={\n\t\t\t\t\t\t\t\t\t\t\t\tsourceKey +\n\t\t\t\t\t\t\t\t\t\t\t\t\tJSON.stringify(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\titem.args\n\t\t\t\t\t\t\t\t\t\t\t\t\t) || item.key\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tonChange={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\tconst isCurrentlySelected =\n\t\t\t\t\t\t\t\t\t\t\t\t\tfastDeepEqual(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tbinding?.args,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\titem.args\n\t\t\t\t\t\t\t\t\t\t\t\t\t) ??\n\t\t\t\t\t\t\t\t\t\t\t\t\t// Deprecate key dependency in 7.0.\n\t\t\t\t\t\t\t\t\t\t\t\t\titem.key ===\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tbinding?.args?.key;\n\n\t\t\t\t\t\t\t\t\t\t\t\tif ( isCurrentlySelected ) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// Unset if the same item is selected again.\n\t\t\t\t\t\t\t\t\t\t\t\t\tupdateBlockBindings( {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t[ attribute ]:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tundefined,\n\t\t\t\t\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\tupdateBlockBindings( {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t[ attribute ]:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titemBindings,\n\t\t\t\t\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\tname={ attribute + '-binding' }\n\t\t\t\t\t\t\t\t\t\t\tvalue={ values[ attribute ] }\n\t\t\t\t\t\t\t\t\t\t\tchecked={\n\t\t\t\t\t\t\t\t\t\t\t\tfastDeepEqual(\n\t\t\t\t\t\t\t\t\t\t\t\t\tbinding?.args,\n\t\t\t\t\t\t\t\t\t\t\t\t\titem.args\n\t\t\t\t\t\t\t\t\t\t\t\t) ??\n\t\t\t\t\t\t\t\t\t\t\t\t// Deprecate key dependency in 7.0.\n\t\t\t\t\t\t\t\t\t\t\t\titem.key === binding?.args?.key\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<Menu.ItemLabel>\n\t\t\t\t\t\t\t\t\t\t\t\t{ item?.label }\n\t\t\t\t\t\t\t\t\t\t\t</Menu.ItemLabel>\n\t\t\t\t\t\t\t\t\t\t\t<Menu.ItemHelpText>\n\t\t\t\t\t\t\t\t\t\t\t\t{ values[ attribute ] }\n\t\t\t\t\t\t\t\t\t\t\t</Menu.ItemHelpText>\n\t\t\t\t\t\t\t\t\t\t</Menu.CheckboxItem>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t</Menu.Group>\n\t\t\t\t\t\t</Menu.Popover>\n\t\t\t\t\t</Menu>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</Menu>\n\t);\n}\n\nfunction BlockBindingsAttribute( { attribute, binding, sources, blockName } ) {\n\tconst { source: sourceName, args } = binding || {};\n\tconst source = sources?.[ sourceName ];\n\n\tlet displayText;\n\tlet isValid = true;\n\tconst isNotBound = binding === undefined;\n\n\tif ( isNotBound ) {\n\t\t// Check if there are any compatible sources for this attribute type.\n\t\tconst attributeType = getAttributeType( blockName, attribute );\n\n\t\tconst hasCompatibleSources = Object.values( sources ).some( ( src ) =>\n\t\t\tsrc.data?.some( ( item ) => item?.type === attributeType )\n\t\t);\n\n\t\tif ( ! hasCompatibleSources ) {\n\t\t\tdisplayText = __( 'No sources available' );\n\t\t} else {\n\t\t\tdisplayText = __( 'Not connected' );\n\t\t}\n\t\tisValid = true;\n\t} else if ( ! source ) {\n\t\t// If there's a binding but the source is not found, it's invalid.\n\t\tisValid = false;\n\t\tdisplayText = __( 'Source not registered' );\n\t\tif ( Object.keys( sources ).length === 0 ) {\n\t\t\tdisplayText = __( 'No sources available' );\n\t\t}\n\t} else {\n\t\tdisplayText =\n\t\t\tsource.data?.find( ( item ) => fastDeepEqual( item.args, args ) )\n\t\t\t\t?.label ||\n\t\t\tsource.label ||\n\t\t\tsourceName;\n\t}\n\n\treturn (\n\t\t<VStack className=\"block-editor-bindings__item\" spacing={ 0 }>\n\t\t\t<Text truncate>{ attribute }</Text>\n\t\t\t<Text\n\t\t\t\ttruncate\n\t\t\t\tvariant={ isValid ? 'muted' : undefined }\n\t\t\t\tisDestructive={ ! isValid }\n\t\t\t>\n\t\t\t\t{ displayText }\n\t\t\t</Text>\n\t\t</VStack>\n\t);\n}\n\nfunction ReadOnlyBlockBindingsPanelItem( {\n\tattribute,\n\tbinding,\n\tsources,\n\tblockName,\n} ) {\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\n\treturn (\n\t\t<ToolsPanelItem hasValue={ () => !! binding } label={ attribute }>\n\t\t\t<Menu placement={ isMobile ? 'bottom-start' : 'left-start' }>\n\t\t\t\t<Menu.TriggerButton render={ <Item /> } disabled>\n\t\t\t\t\t<BlockBindingsAttribute\n\t\t\t\t\t\tattribute={ attribute }\n\t\t\t\t\t\tbinding={ binding }\n\t\t\t\t\t\tsources={ sources }\n\t\t\t\t\t\tblockName={ blockName }\n\t\t\t\t\t/>\n\t\t\t\t</Menu.TriggerButton>\n\t\t\t</Menu>\n\t\t</ToolsPanelItem>\n\t);\n}\n\nfunction EditableBlockBindingsPanelItem( {\n\tattribute,\n\tbinding,\n\tsources,\n\tblockName,\n} ) {\n\tconst { updateBlockBindings } = useBlockBindingsUtils();\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\thasValue={ () => !! binding }\n\t\t\tlabel={ attribute }\n\t\t\tonDeselect={ () => {\n\t\t\t\tupdateBlockBindings( {\n\t\t\t\t\t[ attribute ]: undefined,\n\t\t\t\t} );\n\t\t\t} }\n\t\t>\n\t\t\t<Menu placement={ isMobile ? 'bottom-start' : 'left-start' }>\n\t\t\t\t<Menu.TriggerButton render={ <Item /> }>\n\t\t\t\t\t<BlockBindingsAttribute\n\t\t\t\t\t\tattribute={ attribute }\n\t\t\t\t\t\tbinding={ binding }\n\t\t\t\t\t\tsources={ sources }\n\t\t\t\t\t\tblockName={ blockName }\n\t\t\t\t\t/>\n\t\t\t\t</Menu.TriggerButton>\n\t\t\t\t<Menu.Popover gutter={ isMobile ? 8 : 36 }>\n\t\t\t\t\t<BlockBindingsPanelMenuContent\n\t\t\t\t\t\tattribute={ attribute }\n\t\t\t\t\t\tbinding={ binding }\n\t\t\t\t\t\tsources={ sources }\n\t\t\t\t\t/>\n\t\t\t\t</Menu.Popover>\n\t\t\t</Menu>\n\t\t</ToolsPanelItem>\n\t);\n}\n\nexport const BlockBindingsPanel = ( { name: blockName, metadata } ) => {\n\tconst blockContext = useContext( BlockContext );\n\tconst { removeAllBlockBindings } = useBlockBindingsUtils();\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\n\t// Use useSelect to ensure sources are updated whenever there are updates in block context\n\t// or when underlying data changes.\n\t// Still needs a fix regarding _sources scope.\n\tconst _sources = {};\n\tconst { sources, canUpdateBlockBindings, bindableAttributes } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { __experimentalBlockBindingsSupportedAttributes } =\n\t\t\t\tselect( blockEditorStore ).getSettings();\n\t\t\tconst _bindableAttributes =\n\t\t\t\t__experimentalBlockBindingsSupportedAttributes?.[ blockName ];\n\t\t\tif ( ! _bindableAttributes || _bindableAttributes.length === 0 ) {\n\t\t\t\treturn EMPTY_OBJECT;\n\t\t\t}\n\n\t\t\tconst registeredSources = getBlockBindingsSources();\n\t\t\tObject.entries( registeredSources ).forEach(\n\t\t\t\t( [\n\t\t\t\t\tsourceName,\n\t\t\t\t\t{ getFieldsList, usesContext, label, getValues },\n\t\t\t\t] ) => {\n\t\t\t\t\t// Populate context.\n\t\t\t\t\tconst context = {};\n\t\t\t\t\tif ( usesContext?.length ) {\n\t\t\t\t\t\tfor ( const key of usesContext ) {\n\t\t\t\t\t\t\tcontext[ key ] = blockContext[ key ];\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tif ( getFieldsList ) {\n\t\t\t\t\t\tconst fieldsListResult = getFieldsList( {\n\t\t\t\t\t\t\tselect,\n\t\t\t\t\t\t\tcontext,\n\t\t\t\t\t\t} );\n\t\t\t\t\t\t_sources[ sourceName ] = {\n\t\t\t\t\t\t\tdata: fieldsListResult || [],\n\t\t\t\t\t\t\tlabel,\n\t\t\t\t\t\t\tgetValues,\n\t\t\t\t\t\t};\n\t\t\t\t\t} else {\n\t\t\t\t\t\t/*\n\t\t\t\t\t\t * Include sources without getFieldsList if they are already used in a binding.\n\t\t\t\t\t\t * This allows them to be displayed in read-only mode.\n\t\t\t\t\t\t */\n\t\t\t\t\t\t_sources[ sourceName ] = {\n\t\t\t\t\t\t\tdata: [],\n\t\t\t\t\t\t\tlabel,\n\t\t\t\t\t\t\tgetValues,\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\tsources:\n\t\t\t\t\tObject.values( _sources ).length > 0\n\t\t\t\t\t\t? _sources\n\t\t\t\t\t\t: EMPTY_OBJECT,\n\t\t\t\tcanUpdateBlockBindings:\n\t\t\t\t\tselect( blockEditorStore ).getSettings()\n\t\t\t\t\t\t.canUpdateBlockBindings,\n\t\t\t\tbindableAttributes: _bindableAttributes,\n\t\t\t};\n\t\t},\n\t\t[ blockContext, blockName ]\n\t);\n\t// Return early if there are no bindable attributes.\n\tif ( ! bindableAttributes || bindableAttributes.length === 0 ) {\n\t\treturn null;\n\t}\n\n\tconst { bindings } = metadata || {};\n\n\t// Check if all sources have empty data arrays.\n\tconst hasCompatibleData = Object.values( sources ).some(\n\t\t( source ) => source.data && source.data.length > 0\n\t);\n\n\t// Lock the UI when the user can't update bindings or there are no fields to connect to.\n\tconst readOnly = ! canUpdateBlockBindings || ! hasCompatibleData;\n\n\tif ( bindings === undefined && ! hasCompatibleData ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<InspectorControls group=\"bindings\">\n\t\t\t<ToolsPanel\n\t\t\t\tlabel={ __( 'Attributes' ) }\n\t\t\t\tresetAll={ () => {\n\t\t\t\t\tremoveAllBlockBindings();\n\t\t\t\t} }\n\t\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t\t\tclassName=\"block-editor-bindings__panel\"\n\t\t\t>\n\t\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t\t{ bindableAttributes.map( ( attribute ) => {\n\t\t\t\t\t\tconst binding = bindings?.[ attribute ];\n\n\t\t\t\t\t\t// Check if this specific attribute has compatible data from any source.\n\t\t\t\t\t\tconst attributeType = getAttributeType(\n\t\t\t\t\t\t\tblockName,\n\t\t\t\t\t\t\tattribute\n\t\t\t\t\t\t);\n\n\t\t\t\t\t\tconst hasCompatibleDataForAttribute = Object.values(\n\t\t\t\t\t\t\tsources\n\t\t\t\t\t\t).some( ( source ) =>\n\t\t\t\t\t\t\tsource.data?.some(\n\t\t\t\t\t\t\t\t( item ) => item?.type === attributeType\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t);\n\n\t\t\t\t\t\tconst isAttributeReadOnly =\n\t\t\t\t\t\t\treadOnly || ! hasCompatibleDataForAttribute;\n\n\t\t\t\t\t\treturn isAttributeReadOnly ? (\n\t\t\t\t\t\t\t<ReadOnlyBlockBindingsPanelItem\n\t\t\t\t\t\t\t\tkey={ attribute }\n\t\t\t\t\t\t\t\tattribute={ attribute }\n\t\t\t\t\t\t\t\tbinding={ binding }\n\t\t\t\t\t\t\t\tsources={ sources }\n\t\t\t\t\t\t\t\tblockName={ blockName }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<EditableBlockBindingsPanelItem\n\t\t\t\t\t\t\t\tkey={ attribute }\n\t\t\t\t\t\t\t\tattribute={ attribute }\n\t\t\t\t\t\t\t\tbinding={ binding }\n\t\t\t\t\t\t\t\tsources={ sources }\n\t\t\t\t\t\t\t\tblockName={ blockName }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</ItemGroup>\n\t\t\t\t{ /*\n\t\t\t\t\tUse a div element to make the ToolsPanelHiddenInnerWrapper\n\t\t\t\t\ttoggle the visibility of this help text automatically.\n\t\t\t\t*/ }\n\t\t\t\t<Text as=\"div\" variant=\"muted\">\n\t\t\t\t\t<p>\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'Attributes connected to custom fields or other dynamic data.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</p>\n\t\t\t\t</Text>\n\t\t\t</ToolsPanel>\n\t\t</InspectorControls>\n\t);\n};\n\nexport default {\n\tedit: BlockBindingsPanel,\n\tattributeKeys: [ 'metadata' ],\n\thasSupport( name ) {\n\t\treturn ! [\n\t\t\t'core/post-date',\n\t\t\t'core/navigation-link',\n\t\t\t'core/navigation-submenu',\n\t\t].includes( name );\n\t},\n};\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqGO;AAlGP,iBAA0B;AAK1B,kBAAmB;AACnB,oBAAsD;AACtD,wBAQO;AACP,kBAA0B;AAC1B,qBAA2B;AAC3B,qBAAiC;AAKjC,4BAAsC;AACtC,yBAAuB;AACvB,gCAA8B;AAC9B,2BAAyB;AACzB,wBAAoC;AACpC,mBAA0C;AAE1C,MAAM,EAAE,KAAK,QAAI,2BAAQ,kBAAAA,WAAsB;AAE/C,MAAM,eAAe,CAAC;AAUtB,MAAM,mBAAmB,CAAE,WAAW,cAAe;AACpD,QAAM,qBACL,4BAAc,SAAU,EAAE,aAAc,SAAU,GAAG;AACtD,SAAO,mBAAmB,cAAc,WAAW;AACpD;AAEA,MAAM,iCAAiC,MAAM;AAC5C,QAAM,eAAW,iCAAkB,UAAU,GAAI;AACjD,SAAO,CAAE,WACN;AAAA,IACA,cAAc;AAAA,MACb,WAAW;AAAA;AAAA,MAEX,QAAQ;AAAA,IACT;AAAA,EACA,IACA,CAAC;AACL;AAEA,SAAS,8BAA+B,EAAE,WAAW,SAAS,QAAQ,GAAI;AACzE,QAAM,EAAE,SAAS,QAAI,uCAAoB;AACzC,QAAM,EAAE,oBAAoB,QAAI,6CAAsB;AACtD,QAAM,eAAW,iCAAkB,UAAU,GAAI;AACjD,QAAM,mBAAe,2BAAY,qBAAAC,OAAa;AAC9C,QAAM,EAAE,eAAe,OAAO,QAAI;AAAA,IACjC,CAAE,YAAa;AACd,YAAM,EAAE,MAAM,UAAU,IACvB,QAAS,aAAAC,KAAiB,EAAE,SAAU,QAAS;AAChD,aAAO;AAAA,QACN,eAAe,iBAAkB,WAAW,SAAU;AAAA,QACtD,QAAQ;AAAA,MACT;AAAA,IACD;AAAA,IACA,CAAE,UAAU,SAAU;AAAA,EACvB;AACA,SACC,4CAAC,QAAK,WAAY,WAAW,iBAAiB,cAC3C,iBAAO,QAAS,OAAQ,EAAE,IAAK,CAAE,CAAE,WAAW,MAAO,MAAO;AAE7D,UAAM,kBAAkB,OAAO,MAAM;AAAA,MACpC,CAAE,SAAU,MAAM,SAAS;AAAA,IAC5B;AAEA,UAAM,mBACL,CAAE,mBAAmB,gBAAgB,WAAW;AAEjD,QAAK,kBAAmB;AACvB,aAAO;AAAA,IACR;AAEA,WACC;AAAA,MAAC;AAAA;AAAA,QAEA,WAAY,WAAW,iBAAiB;AAAA,QAExC;AAAA,sDAAC,KAAK,oBAAL,EACA,sDAAC,KAAK,WAAL,EAAiB,iBAAO,OAAO,GACjC;AAAA,UACA,4CAAC,KAAK,SAAL,EAAa,QAAS,GACtB,sDAAC,KAAK,OAAL,EACE,0BAAgB,IAAK,CAAE,SAAU;AAClC,kBAAM,eAAe;AAAA,cACpB,QAAQ;AAAA,cACR,MAAM,MAAM,QAAQ;AAAA,gBACnB,KAAK,KAAK;AAAA,cACX;AAAA,YACD;AACA,
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { getBlockBindingsSources, getBlockType } from '@wordpress/blocks';\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalItem as Item,\n\t__experimentalText as Text,\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalVStack as VStack,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { useContext } from '@wordpress/element';\nimport { useViewportMatch } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { useBlockBindingsUtils } from '../utils/block-bindings';\nimport { unlock } from '../lock-unlock';\nimport InspectorControls from '../components/inspector-controls';\nimport BlockContext from '../components/block-context';\nimport { useBlockEditContext } from '../components/block-edit';\nimport { store as blockEditorStore } from '../store';\n\nconst { Menu } = unlock( componentsPrivateApis );\n\nconst EMPTY_OBJECT = {};\n\n/**\n * Get the normalized attribute type for block bindings.\n * Converts 'rich-text' to 'string' since rich-text is stored as string.\n *\n * @param {string} blockName The block name.\n * @param {string} attribute The attribute name.\n * @return {string} The normalized attribute type.\n */\nconst getAttributeType = ( blockName, attribute ) => {\n\tconst _attributeType =\n\t\tgetBlockType( blockName ).attributes?.[ attribute ]?.type;\n\treturn _attributeType === 'rich-text' ? 'string' : _attributeType;\n};\n\nconst useToolsPanelDropdownMenuProps = () => {\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\treturn ! isMobile\n\t\t? {\n\t\t\t\tpopoverProps: {\n\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\t// For non-mobile, inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)\n\t\t\t\t\toffset: 259,\n\t\t\t\t},\n\t\t }\n\t\t: {};\n};\n\nfunction BlockBindingsPanelMenuContent( { attribute, binding, sources } ) {\n\tconst { clientId } = useBlockEditContext();\n\tconst { updateBlockBindings } = useBlockBindingsUtils();\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\tconst blockContext = useContext( BlockContext );\n\tconst { attributeType, select } = useSelect(\n\t\t( _select ) => {\n\t\t\tconst { name: blockName } =\n\t\t\t\t_select( blockEditorStore ).getBlock( clientId );\n\t\t\treturn {\n\t\t\t\tattributeType: getAttributeType( blockName, attribute ),\n\t\t\t\tselect: _select,\n\t\t\t};\n\t\t},\n\t\t[ clientId, attribute ]\n\t);\n\treturn (\n\t\t<Menu placement={ isMobile ? 'bottom-start' : 'left-start' }>\n\t\t\t{ Object.entries( sources ).map( ( [ sourceKey, source ] ) => {\n\t\t\t\t// Only show sources that have compatible data for this specific attribute.\n\t\t\t\tconst sourceDataItems = source.data?.filter(\n\t\t\t\t\t( item ) => item?.type === attributeType\n\t\t\t\t);\n\n\t\t\t\tconst noItemsAvailable =\n\t\t\t\t\t! sourceDataItems || sourceDataItems.length === 0;\n\n\t\t\t\tif ( noItemsAvailable ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\treturn (\n\t\t\t\t\t<Menu\n\t\t\t\t\t\tkey={ sourceKey }\n\t\t\t\t\t\tplacement={ isMobile ? 'bottom-start' : 'left-start' }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Menu.SubmenuTriggerItem>\n\t\t\t\t\t\t\t<Menu.ItemLabel>{ source.label }</Menu.ItemLabel>\n\t\t\t\t\t\t</Menu.SubmenuTriggerItem>\n\t\t\t\t\t\t<Menu.Popover gutter={ 8 }>\n\t\t\t\t\t\t\t<Menu.Group>\n\t\t\t\t\t\t\t\t{ sourceDataItems.map( ( item ) => {\n\t\t\t\t\t\t\t\t\tconst itemBindings = {\n\t\t\t\t\t\t\t\t\t\tsource: sourceKey,\n\t\t\t\t\t\t\t\t\t\targs: item?.args || {\n\t\t\t\t\t\t\t\t\t\t\tkey: item.key,\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\tlet values = {};\n\t\t\t\t\t\t\t\t\ttry {\n\t\t\t\t\t\t\t\t\t\tvalues = source.getValues( {\n\t\t\t\t\t\t\t\t\t\t\tselect,\n\t\t\t\t\t\t\t\t\t\t\tcontext: blockContext,\n\t\t\t\t\t\t\t\t\t\t\tbindings: {\n\t\t\t\t\t\t\t\t\t\t\t\t[ attribute ]: itemBindings,\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\t} catch ( e ) {}\n\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<Menu.CheckboxItem\n\t\t\t\t\t\t\t\t\t\t\tkey={\n\t\t\t\t\t\t\t\t\t\t\t\tsourceKey +\n\t\t\t\t\t\t\t\t\t\t\t\t\tJSON.stringify(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\titem.args\n\t\t\t\t\t\t\t\t\t\t\t\t\t) || item.key\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tonChange={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\tconst isCurrentlySelected =\n\t\t\t\t\t\t\t\t\t\t\t\t\tfastDeepEqual(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tbinding?.args,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\titem.args\n\t\t\t\t\t\t\t\t\t\t\t\t\t) ??\n\t\t\t\t\t\t\t\t\t\t\t\t\t// Deprecate key dependency in 7.0.\n\t\t\t\t\t\t\t\t\t\t\t\t\titem.key ===\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tbinding?.args?.key;\n\n\t\t\t\t\t\t\t\t\t\t\t\tif ( isCurrentlySelected ) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// Unset if the same item is selected again.\n\t\t\t\t\t\t\t\t\t\t\t\t\tupdateBlockBindings( {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t[ attribute ]:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tundefined,\n\t\t\t\t\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\tupdateBlockBindings( {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t[ attribute ]:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titemBindings,\n\t\t\t\t\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\tname={ attribute + '-binding' }\n\t\t\t\t\t\t\t\t\t\t\tvalue={ values[ attribute ] }\n\t\t\t\t\t\t\t\t\t\t\tchecked={\n\t\t\t\t\t\t\t\t\t\t\t\tfastDeepEqual(\n\t\t\t\t\t\t\t\t\t\t\t\t\tbinding?.args,\n\t\t\t\t\t\t\t\t\t\t\t\t\titem.args\n\t\t\t\t\t\t\t\t\t\t\t\t) ??\n\t\t\t\t\t\t\t\t\t\t\t\t// Deprecate key dependency in 7.0.\n\t\t\t\t\t\t\t\t\t\t\t\titem.key === binding?.args?.key\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<Menu.ItemLabel>\n\t\t\t\t\t\t\t\t\t\t\t\t{ item?.label }\n\t\t\t\t\t\t\t\t\t\t\t</Menu.ItemLabel>\n\t\t\t\t\t\t\t\t\t\t\t<Menu.ItemHelpText>\n\t\t\t\t\t\t\t\t\t\t\t\t{ values[ attribute ] }\n\t\t\t\t\t\t\t\t\t\t\t</Menu.ItemHelpText>\n\t\t\t\t\t\t\t\t\t\t</Menu.CheckboxItem>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t</Menu.Group>\n\t\t\t\t\t\t</Menu.Popover>\n\t\t\t\t\t</Menu>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</Menu>\n\t);\n}\n\nfunction BlockBindingsAttribute( { attribute, binding, sources, blockName } ) {\n\tconst { source: sourceName, args } = binding || {};\n\tconst source = sources?.[ sourceName ];\n\n\tlet displayText;\n\tlet isValid = true;\n\tconst isNotBound = binding === undefined;\n\n\tif ( isNotBound ) {\n\t\t// Check if there are any compatible sources for this attribute type.\n\t\tconst attributeType = getAttributeType( blockName, attribute );\n\n\t\tconst hasCompatibleSources = Object.values( sources ).some( ( src ) =>\n\t\t\tsrc.data?.some( ( item ) => item?.type === attributeType )\n\t\t);\n\n\t\tif ( ! hasCompatibleSources ) {\n\t\t\tdisplayText = __( 'No sources available' );\n\t\t} else {\n\t\t\tdisplayText = __( 'Not connected' );\n\t\t}\n\t\tisValid = true;\n\t} else if ( ! source ) {\n\t\t// If there's a binding but the source is not found, it's invalid.\n\t\tisValid = false;\n\t\tdisplayText = __( 'Source not registered' );\n\t\tif ( Object.keys( sources ).length === 0 ) {\n\t\t\tdisplayText = __( 'No sources available' );\n\t\t}\n\t} else {\n\t\tdisplayText =\n\t\t\tsource.data?.find( ( item ) => fastDeepEqual( item.args, args ) )\n\t\t\t\t?.label ||\n\t\t\tsource.label ||\n\t\t\tsourceName;\n\t}\n\n\treturn (\n\t\t<VStack className=\"block-editor-bindings__item\" spacing={ 0 }>\n\t\t\t<Text truncate>{ attribute }</Text>\n\t\t\t<Text\n\t\t\t\ttruncate\n\t\t\t\tvariant={ isValid ? 'muted' : undefined }\n\t\t\t\tisDestructive={ ! isValid }\n\t\t\t>\n\t\t\t\t{ displayText }\n\t\t\t</Text>\n\t\t</VStack>\n\t);\n}\n\nfunction ReadOnlyBlockBindingsPanelItem( {\n\tattribute,\n\tbinding,\n\tsources,\n\tblockName,\n} ) {\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\n\treturn (\n\t\t<ToolsPanelItem hasValue={ () => !! binding } label={ attribute }>\n\t\t\t<Menu placement={ isMobile ? 'bottom-start' : 'left-start' }>\n\t\t\t\t<Menu.TriggerButton render={ <Item /> } disabled>\n\t\t\t\t\t<BlockBindingsAttribute\n\t\t\t\t\t\tattribute={ attribute }\n\t\t\t\t\t\tbinding={ binding }\n\t\t\t\t\t\tsources={ sources }\n\t\t\t\t\t\tblockName={ blockName }\n\t\t\t\t\t/>\n\t\t\t\t</Menu.TriggerButton>\n\t\t\t</Menu>\n\t\t</ToolsPanelItem>\n\t);\n}\n\nfunction EditableBlockBindingsPanelItem( {\n\tattribute,\n\tbinding,\n\tsources,\n\tblockName,\n} ) {\n\tconst { updateBlockBindings } = useBlockBindingsUtils();\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\thasValue={ () => !! binding }\n\t\t\tlabel={ attribute }\n\t\t\tonDeselect={ () => {\n\t\t\t\tupdateBlockBindings( {\n\t\t\t\t\t[ attribute ]: undefined,\n\t\t\t\t} );\n\t\t\t} }\n\t\t>\n\t\t\t<Menu placement={ isMobile ? 'bottom-start' : 'left-start' }>\n\t\t\t\t<Menu.TriggerButton render={ <Item /> }>\n\t\t\t\t\t<BlockBindingsAttribute\n\t\t\t\t\t\tattribute={ attribute }\n\t\t\t\t\t\tbinding={ binding }\n\t\t\t\t\t\tsources={ sources }\n\t\t\t\t\t\tblockName={ blockName }\n\t\t\t\t\t/>\n\t\t\t\t</Menu.TriggerButton>\n\t\t\t\t<Menu.Popover gutter={ isMobile ? 8 : 36 }>\n\t\t\t\t\t<BlockBindingsPanelMenuContent\n\t\t\t\t\t\tattribute={ attribute }\n\t\t\t\t\t\tbinding={ binding }\n\t\t\t\t\t\tsources={ sources }\n\t\t\t\t\t/>\n\t\t\t\t</Menu.Popover>\n\t\t\t</Menu>\n\t\t</ToolsPanelItem>\n\t);\n}\n\nexport const BlockBindingsPanel = ( { name: blockName, metadata } ) => {\n\tconst blockContext = useContext( BlockContext );\n\tconst { removeAllBlockBindings } = useBlockBindingsUtils();\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\n\t// Use useSelect to ensure sources are updated whenever there are updates in block context\n\t// or when underlying data changes.\n\t// Still needs a fix regarding _sources scope.\n\tconst _sources = {};\n\tconst { sources, canUpdateBlockBindings, bindableAttributes } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { __experimentalBlockBindingsSupportedAttributes } =\n\t\t\t\tselect( blockEditorStore ).getSettings();\n\t\t\tconst _bindableAttributes =\n\t\t\t\t__experimentalBlockBindingsSupportedAttributes?.[ blockName ];\n\t\t\tif ( ! _bindableAttributes || _bindableAttributes.length === 0 ) {\n\t\t\t\treturn EMPTY_OBJECT;\n\t\t\t}\n\n\t\t\tconst registeredSources = getBlockBindingsSources();\n\t\t\tObject.entries( registeredSources ).forEach(\n\t\t\t\t( [\n\t\t\t\t\tsourceName,\n\t\t\t\t\t{ getFieldsList, usesContext, label, getValues },\n\t\t\t\t] ) => {\n\t\t\t\t\t// Populate context.\n\t\t\t\t\tconst context = {};\n\t\t\t\t\tif ( usesContext?.length ) {\n\t\t\t\t\t\tfor ( const key of usesContext ) {\n\t\t\t\t\t\t\tcontext[ key ] = blockContext[ key ];\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tif ( getFieldsList ) {\n\t\t\t\t\t\tconst fieldsListResult = getFieldsList( {\n\t\t\t\t\t\t\tselect,\n\t\t\t\t\t\t\tcontext,\n\t\t\t\t\t\t} );\n\t\t\t\t\t\t_sources[ sourceName ] = {\n\t\t\t\t\t\t\tdata: fieldsListResult || [],\n\t\t\t\t\t\t\tlabel,\n\t\t\t\t\t\t\tgetValues,\n\t\t\t\t\t\t};\n\t\t\t\t\t} else {\n\t\t\t\t\t\t/*\n\t\t\t\t\t\t * Include sources without getFieldsList if they are already used in a binding.\n\t\t\t\t\t\t * This allows them to be displayed in read-only mode.\n\t\t\t\t\t\t */\n\t\t\t\t\t\t_sources[ sourceName ] = {\n\t\t\t\t\t\t\tdata: [],\n\t\t\t\t\t\t\tlabel,\n\t\t\t\t\t\t\tgetValues,\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\tsources:\n\t\t\t\t\tObject.values( _sources ).length > 0\n\t\t\t\t\t\t? _sources\n\t\t\t\t\t\t: EMPTY_OBJECT,\n\t\t\t\tcanUpdateBlockBindings:\n\t\t\t\t\tselect( blockEditorStore ).getSettings()\n\t\t\t\t\t\t.canUpdateBlockBindings,\n\t\t\t\tbindableAttributes: _bindableAttributes,\n\t\t\t};\n\t\t},\n\t\t[ blockContext, blockName ]\n\t);\n\t// Return early if there are no bindable attributes.\n\tif ( ! bindableAttributes || bindableAttributes.length === 0 ) {\n\t\treturn null;\n\t}\n\n\tconst { bindings } = metadata || {};\n\n\t// Check if all sources have empty data arrays.\n\tconst hasCompatibleData = Object.values( sources ).some(\n\t\t( source ) => source.data && source.data.length > 0\n\t);\n\n\t// Lock the UI when the user can't update bindings or there are no fields to connect to.\n\tconst readOnly = ! canUpdateBlockBindings || ! hasCompatibleData;\n\n\tif ( bindings === undefined && ! hasCompatibleData ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<InspectorControls group=\"bindings\">\n\t\t\t<ToolsPanel\n\t\t\t\tlabel={ __( 'Attributes' ) }\n\t\t\t\tresetAll={ () => {\n\t\t\t\t\tremoveAllBlockBindings();\n\t\t\t\t} }\n\t\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t\t\tclassName=\"block-editor-bindings__panel\"\n\t\t\t>\n\t\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t\t{ bindableAttributes.map( ( attribute ) => {\n\t\t\t\t\t\tconst binding = bindings?.[ attribute ];\n\n\t\t\t\t\t\t// Check if this specific attribute has compatible data from any source.\n\t\t\t\t\t\tconst attributeType = getAttributeType(\n\t\t\t\t\t\t\tblockName,\n\t\t\t\t\t\t\tattribute\n\t\t\t\t\t\t);\n\n\t\t\t\t\t\tconst hasCompatibleDataForAttribute = Object.values(\n\t\t\t\t\t\t\tsources\n\t\t\t\t\t\t).some( ( source ) =>\n\t\t\t\t\t\t\tsource.data?.some(\n\t\t\t\t\t\t\t\t( item ) => item?.type === attributeType\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t);\n\n\t\t\t\t\t\tconst isAttributeReadOnly =\n\t\t\t\t\t\t\treadOnly || ! hasCompatibleDataForAttribute;\n\n\t\t\t\t\t\treturn isAttributeReadOnly ? (\n\t\t\t\t\t\t\t<ReadOnlyBlockBindingsPanelItem\n\t\t\t\t\t\t\t\tkey={ attribute }\n\t\t\t\t\t\t\t\tattribute={ attribute }\n\t\t\t\t\t\t\t\tbinding={ binding }\n\t\t\t\t\t\t\t\tsources={ sources }\n\t\t\t\t\t\t\t\tblockName={ blockName }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<EditableBlockBindingsPanelItem\n\t\t\t\t\t\t\t\tkey={ attribute }\n\t\t\t\t\t\t\t\tattribute={ attribute }\n\t\t\t\t\t\t\t\tbinding={ binding }\n\t\t\t\t\t\t\t\tsources={ sources }\n\t\t\t\t\t\t\t\tblockName={ blockName }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</ItemGroup>\n\t\t\t\t{ /*\n\t\t\t\t\tUse a div element to make the ToolsPanelHiddenInnerWrapper\n\t\t\t\t\ttoggle the visibility of this help text automatically.\n\t\t\t\t*/ }\n\t\t\t\t<Text as=\"div\" variant=\"muted\">\n\t\t\t\t\t<p>\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'Attributes connected to custom fields or other dynamic data.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</p>\n\t\t\t\t</Text>\n\t\t\t</ToolsPanel>\n\t\t</InspectorControls>\n\t);\n};\n\nexport default {\n\tedit: BlockBindingsPanel,\n\tattributeKeys: [ 'metadata' ],\n\thasSupport( name ) {\n\t\treturn ! [\n\t\t\t'core/post-date',\n\t\t\t'core/navigation-link',\n\t\t\t'core/navigation-submenu',\n\t\t].includes( name );\n\t},\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqGO;AAlGP,iBAA0B;AAK1B,kBAAmB;AACnB,oBAAsD;AACtD,wBAQO;AACP,kBAA0B;AAC1B,qBAA2B;AAC3B,qBAAiC;AAKjC,4BAAsC;AACtC,yBAAuB;AACvB,gCAA8B;AAC9B,2BAAyB;AACzB,wBAAoC;AACpC,mBAA0C;AAE1C,MAAM,EAAE,KAAK,QAAI,2BAAQ,kBAAAA,WAAsB;AAE/C,MAAM,eAAe,CAAC;AAUtB,MAAM,mBAAmB,CAAE,WAAW,cAAe;AACpD,QAAM,qBACL,4BAAc,SAAU,EAAE,aAAc,SAAU,GAAG;AACtD,SAAO,mBAAmB,cAAc,WAAW;AACpD;AAEA,MAAM,iCAAiC,MAAM;AAC5C,QAAM,eAAW,iCAAkB,UAAU,GAAI;AACjD,SAAO,CAAE,WACN;AAAA,IACA,cAAc;AAAA,MACb,WAAW;AAAA;AAAA,MAEX,QAAQ;AAAA,IACT;AAAA,EACA,IACA,CAAC;AACL;AAEA,SAAS,8BAA+B,EAAE,WAAW,SAAS,QAAQ,GAAI;AACzE,QAAM,EAAE,SAAS,QAAI,uCAAoB;AACzC,QAAM,EAAE,oBAAoB,QAAI,6CAAsB;AACtD,QAAM,eAAW,iCAAkB,UAAU,GAAI;AACjD,QAAM,mBAAe,2BAAY,qBAAAC,OAAa;AAC9C,QAAM,EAAE,eAAe,OAAO,QAAI;AAAA,IACjC,CAAE,YAAa;AACd,YAAM,EAAE,MAAM,UAAU,IACvB,QAAS,aAAAC,KAAiB,EAAE,SAAU,QAAS;AAChD,aAAO;AAAA,QACN,eAAe,iBAAkB,WAAW,SAAU;AAAA,QACtD,QAAQ;AAAA,MACT;AAAA,IACD;AAAA,IACA,CAAE,UAAU,SAAU;AAAA,EACvB;AACA,SACC,4CAAC,QAAK,WAAY,WAAW,iBAAiB,cAC3C,iBAAO,QAAS,OAAQ,EAAE,IAAK,CAAE,CAAE,WAAW,MAAO,MAAO;AAE7D,UAAM,kBAAkB,OAAO,MAAM;AAAA,MACpC,CAAE,SAAU,MAAM,SAAS;AAAA,IAC5B;AAEA,UAAM,mBACL,CAAE,mBAAmB,gBAAgB,WAAW;AAEjD,QAAK,kBAAmB;AACvB,aAAO;AAAA,IACR;AAEA,WACC;AAAA,MAAC;AAAA;AAAA,QAEA,WAAY,WAAW,iBAAiB;AAAA,QAExC;AAAA,sDAAC,KAAK,oBAAL,EACA,sDAAC,KAAK,WAAL,EAAiB,iBAAO,OAAO,GACjC;AAAA,UACA,4CAAC,KAAK,SAAL,EAAa,QAAS,GACtB,sDAAC,KAAK,OAAL,EACE,0BAAgB,IAAK,CAAE,SAAU;AAClC,kBAAM,eAAe;AAAA,cACpB,QAAQ;AAAA,cACR,MAAM,MAAM,QAAQ;AAAA,gBACnB,KAAK,KAAK;AAAA,cACX;AAAA,YACD;AACA,gBAAI,SAAS,CAAC;AACd,gBAAI;AACH,uBAAS,OAAO,UAAW;AAAA,gBAC1B;AAAA,gBACA,SAAS;AAAA,gBACT,UAAU;AAAA,kBACT,CAAE,SAAU,GAAG;AAAA,gBAChB;AAAA,cACD,CAAE;AAAA,YACH,SAAU,GAAI;AAAA,YAAC;AAEf,mBACC;AAAA,cAAC,KAAK;AAAA,cAAL;AAAA,gBAOA,UAAW,MAAM;AAChB,wBAAM,0BACL,WAAAC;AAAA,oBACC,SAAS;AAAA,oBACT,KAAK;AAAA,kBACN;AAAA,kBAEA,KAAK,QACJ,SAAS,MAAM;AAEjB,sBAAK,qBAAsB;AAE1B,wCAAqB;AAAA,sBACpB,CAAE,SAAU,GACX;AAAA,oBACF,CAAE;AAAA,kBACH,OAAO;AACN,wCAAqB;AAAA,sBACpB,CAAE,SAAU,GACX;AAAA,oBACF,CAAE;AAAA,kBACH;AAAA,gBACD;AAAA,gBACA,MAAO,YAAY;AAAA,gBACnB,OAAQ,OAAQ,SAAU;AAAA,gBAC1B,aACC,WAAAA;AAAA,kBACC,SAAS;AAAA,kBACT,KAAK;AAAA,gBACN;AAAA,gBAEA,KAAK,QAAQ,SAAS,MAAM;AAAA,gBAG7B;AAAA,8DAAC,KAAK,WAAL,EACE,gBAAM,OACT;AAAA,kBACA,4CAAC,KAAK,cAAL,EACE,iBAAQ,SAAU,GACrB;AAAA;AAAA;AAAA,cA5CC,YACC,KAAK;AAAA,gBACJ,KAAK;AAAA,cACN,KAAK,KAAK;AAAA,YA0Cb;AAAA,UAEF,CAAE,GACH,GACD;AAAA;AAAA;AAAA,MA9EM;AAAA,IA+EP;AAAA,EAEF,CAAE,GACH;AAEF;AAEA,SAAS,uBAAwB,EAAE,WAAW,SAAS,SAAS,UAAU,GAAI;AAC7E,QAAM,EAAE,QAAQ,YAAY,KAAK,IAAI,WAAW,CAAC;AACjD,QAAM,SAAS,UAAW,UAAW;AAErC,MAAI;AACJ,MAAI,UAAU;AACd,QAAM,aAAa,YAAY;AAE/B,MAAK,YAAa;AAEjB,UAAM,gBAAgB,iBAAkB,WAAW,SAAU;AAE7D,UAAM,uBAAuB,OAAO,OAAQ,OAAQ,EAAE;AAAA,MAAM,CAAE,QAC7D,IAAI,MAAM,KAAM,CAAE,SAAU,MAAM,SAAS,aAAc;AAAA,IAC1D;AAEA,QAAK,CAAE,sBAAuB;AAC7B,wBAAc,gBAAI,sBAAuB;AAAA,IAC1C,OAAO;AACN,wBAAc,gBAAI,eAAgB;AAAA,IACnC;AACA,cAAU;AAAA,EACX,WAAY,CAAE,QAAS;AAEtB,cAAU;AACV,sBAAc,gBAAI,uBAAwB;AAC1C,QAAK,OAAO,KAAM,OAAQ,EAAE,WAAW,GAAI;AAC1C,wBAAc,gBAAI,sBAAuB;AAAA,IAC1C;AAAA,EACD,OAAO;AACN,kBACC,OAAO,MAAM,KAAM,CAAE,aAAU,WAAAA,SAAe,KAAK,MAAM,IAAK,CAAE,GAC7D,SACH,OAAO,SACP;AAAA,EACF;AAEA,SACC,6CAAC,kBAAAC,sBAAA,EAAO,WAAU,+BAA8B,SAAU,GACzD;AAAA,gDAAC,kBAAAC,oBAAA,EAAK,UAAQ,MAAG,qBAAW;AAAA,IAC5B;AAAA,MAAC,kBAAAA;AAAA,MAAA;AAAA,QACA,UAAQ;AAAA,QACR,SAAU,UAAU,UAAU;AAAA,QAC9B,eAAgB,CAAE;AAAA,QAEhB;AAAA;AAAA,IACH;AAAA,KACD;AAEF;AAEA,SAAS,+BAAgC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,eAAW,iCAAkB,UAAU,GAAI;AAEjD,SACC,4CAAC,kBAAAC,8BAAA,EAAe,UAAW,MAAM,CAAC,CAAE,SAAU,OAAQ,WACrD,sDAAC,QAAK,WAAY,WAAW,iBAAiB,cAC7C,sDAAC,KAAK,eAAL,EAAmB,QAAS,4CAAC,kBAAAC,oBAAA,EAAK,GAAK,UAAQ,MAC/C;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACD,GACD,GACD,GACD;AAEF;AAEA,SAAS,+BAAgC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,EAAE,oBAAoB,QAAI,6CAAsB;AACtD,QAAM,eAAW,iCAAkB,UAAU,GAAI;AAEjD,SACC;AAAA,IAAC,kBAAAD;AAAA,IAAA;AAAA,MACA,UAAW,MAAM,CAAC,CAAE;AAAA,MACpB,OAAQ;AAAA,MACR,YAAa,MAAM;AAClB,4BAAqB;AAAA,UACpB,CAAE,SAAU,GAAG;AAAA,QAChB,CAAE;AAAA,MACH;AAAA,MAEA,uDAAC,QAAK,WAAY,WAAW,iBAAiB,cAC7C;AAAA,oDAAC,KAAK,eAAL,EAAmB,QAAS,4CAAC,kBAAAC,oBAAA,EAAK,GAClC;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACD,GACD;AAAA,QACA,4CAAC,KAAK,SAAL,EAAa,QAAS,WAAW,IAAI,IACrC;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACD,GACD;AAAA,SACD;AAAA;AAAA,EACD;AAEF;AAEO,MAAM,qBAAqB,CAAE,EAAE,MAAM,WAAW,SAAS,MAAO;AACtE,QAAM,mBAAe,2BAAY,qBAAAN,OAAa;AAC9C,QAAM,EAAE,uBAAuB,QAAI,6CAAsB;AACzD,QAAM,oBAAoB,+BAA+B;AAKzD,QAAM,WAAW,CAAC;AAClB,QAAM,EAAE,SAAS,wBAAwB,mBAAmB,QAAI;AAAA,IAC/D,CAAE,WAAY;AACb,YAAM,EAAE,+CAA+C,IACtD,OAAQ,aAAAC,KAAiB,EAAE,YAAY;AACxC,YAAM,sBACL,iDAAkD,SAAU;AAC7D,UAAK,CAAE,uBAAuB,oBAAoB,WAAW,GAAI;AAChE,eAAO;AAAA,MACR;AAEA,YAAM,wBAAoB,uCAAwB;AAClD,aAAO,QAAS,iBAAkB,EAAE;AAAA,QACnC,CAAE;AAAA,UACD;AAAA,UACA,EAAE,eAAe,aAAa,OAAO,UAAU;AAAA,QAChD,MAAO;AAEN,gBAAM,UAAU,CAAC;AACjB,cAAK,aAAa,QAAS;AAC1B,uBAAY,OAAO,aAAc;AAChC,sBAAS,GAAI,IAAI,aAAc,GAAI;AAAA,YACpC;AAAA,UACD;AACA,cAAK,eAAgB;AACpB,kBAAM,mBAAmB,cAAe;AAAA,cACvC;AAAA,cACA;AAAA,YACD,CAAE;AACF,qBAAU,UAAW,IAAI;AAAA,cACxB,MAAM,oBAAoB,CAAC;AAAA,cAC3B;AAAA,cACA;AAAA,YACD;AAAA,UACD,OAAO;AAKN,qBAAU,UAAW,IAAI;AAAA,cACxB,MAAM,CAAC;AAAA,cACP;AAAA,cACA;AAAA,YACD;AAAA,UACD;AAAA,QACD;AAAA,MACD;AAEA,aAAO;AAAA,QACN,SACC,OAAO,OAAQ,QAAS,EAAE,SAAS,IAChC,WACA;AAAA,QACJ,wBACC,OAAQ,aAAAA,KAAiB,EAAE,YAAY,EACrC;AAAA,QACH,oBAAoB;AAAA,MACrB;AAAA,IACD;AAAA,IACA,CAAE,cAAc,SAAU;AAAA,EAC3B;AAEA,MAAK,CAAE,sBAAsB,mBAAmB,WAAW,GAAI;AAC9D,WAAO;AAAA,EACR;AAEA,QAAM,EAAE,SAAS,IAAI,YAAY,CAAC;AAGlC,QAAM,oBAAoB,OAAO,OAAQ,OAAQ,EAAE;AAAA,IAClD,CAAE,WAAY,OAAO,QAAQ,OAAO,KAAK,SAAS;AAAA,EACnD;AAGA,QAAM,WAAW,CAAE,0BAA0B,CAAE;AAE/C,MAAK,aAAa,UAAa,CAAE,mBAAoB;AACpD,WAAO;AAAA,EACR;AAEA,SACC,4CAAC,0BAAAM,SAAA,EAAkB,OAAM,YACxB;AAAA,IAAC,kBAAAC;AAAA,IAAA;AAAA,MACA,WAAQ,gBAAI,YAAa;AAAA,MACzB,UAAW,MAAM;AAChB,+BAAuB;AAAA,MACxB;AAAA,MACA;AAAA,MACA,WAAU;AAAA,MAEV;AAAA,oDAAC,kBAAAC,yBAAA,EAAU,YAAU,MAAC,aAAW,MAC9B,6BAAmB,IAAK,CAAE,cAAe;AAC1C,gBAAM,UAAU,WAAY,SAAU;AAGtC,gBAAM,gBAAgB;AAAA,YACrB;AAAA,YACA;AAAA,UACD;AAEA,gBAAM,gCAAgC,OAAO;AAAA,YAC5C;AAAA,UACD,EAAE;AAAA,YAAM,CAAE,WACT,OAAO,MAAM;AAAA,cACZ,CAAE,SAAU,MAAM,SAAS;AAAA,YAC5B;AAAA,UACD;AAEA,gBAAM,sBACL,YAAY,CAAE;AAEf,iBAAO,sBACN;AAAA,YAAC;AAAA;AAAA,cAEA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA;AAAA,YAJM;AAAA,UAKP,IAEA;AAAA,YAAC;AAAA;AAAA,cAEA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA;AAAA,YAJM;AAAA,UAKP;AAAA,QAEF,CAAE,GACH;AAAA,QAKA,4CAAC,kBAAAL,oBAAA,EAAK,IAAG,OAAM,SAAQ,SACtB,sDAAC,OACE;AAAA,UACD;AAAA,QACD,GACD,GACD;AAAA;AAAA;AAAA,EACD,GACD;AAEF;AAEA,IAAO,yBAAQ;AAAA,EACd,MAAM;AAAA,EACN,eAAe,CAAE,UAAW;AAAA,EAC5B,WAAY,MAAO;AAClB,WAAO,CAAE;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,IACD,EAAE,SAAU,IAAK;AAAA,EAClB;AACD;",
|
|
6
6
|
"names": ["componentsPrivateApis", "BlockContext", "blockEditorStore", "fastDeepEqual", "VStack", "Text", "ToolsPanelItem", "Item", "InspectorControls", "ToolsPanel", "ItemGroup"]
|
|
7
7
|
}
|
|
@@ -26,10 +26,17 @@ function findOptimalFontSize(textElement, applyFontSize) {
|
|
|
26
26
|
let minSize = 5;
|
|
27
27
|
let maxSize = 2400;
|
|
28
28
|
let bestSize = minSize;
|
|
29
|
+
const computedStyle = window.getComputedStyle(textElement);
|
|
30
|
+
const paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;
|
|
31
|
+
const paddingRight = parseFloat(computedStyle.paddingRight) || 0;
|
|
32
|
+
const range = document.createRange();
|
|
33
|
+
range.selectNodeContents(textElement);
|
|
29
34
|
while (minSize <= maxSize) {
|
|
30
35
|
const midSize = Math.floor((minSize + maxSize) / 2);
|
|
31
36
|
applyFontSize(midSize);
|
|
32
|
-
const
|
|
37
|
+
const rect = range.getBoundingClientRect();
|
|
38
|
+
const textWidth = rect.width;
|
|
39
|
+
const fitsWidth = textElement.scrollWidth <= textElement.clientWidth && textWidth <= textElement.clientWidth - paddingLeft - paddingRight;
|
|
33
40
|
const fitsHeight = alreadyHasScrollableHeight || textElement.scrollHeight <= textElement.clientHeight;
|
|
34
41
|
if (fitsWidth && fitsHeight) {
|
|
35
42
|
bestSize = midSize;
|
|
@@ -38,6 +45,7 @@ function findOptimalFontSize(textElement, applyFontSize) {
|
|
|
38
45
|
maxSize = midSize - 1;
|
|
39
46
|
}
|
|
40
47
|
}
|
|
48
|
+
range.detach();
|
|
41
49
|
return bestSize;
|
|
42
50
|
}
|
|
43
51
|
function optimizeFitText(textElement, applyFontSize) {
|
|
@@ -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 * Find optimal font size using simple binary search between 5-600px.\n *\n * @param {HTMLElement} textElement The text element\n * @param {Function} applyFontSize Function that receives font size in pixels\n * @return {number} Optimal font size\n */\nfunction findOptimalFontSize( textElement, applyFontSize ) {\n\tconst alreadyHasScrollableHeight =\n\t\ttextElement.scrollHeight > textElement.clientHeight;\n\tlet minSize = 5;\n\tlet maxSize = 2400;\n\tlet bestSize = minSize;\n\n\twhile ( minSize <= maxSize ) {\n\t\tconst midSize = Math.floor( ( minSize + maxSize ) / 2 );\n\t\tapplyFontSize( midSize );\n\n\t\tconst
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAYA,SAAS,oBAAqB,aAAa,eAAgB;AAC1D,QAAM,6BACL,YAAY,eAAe,YAAY;AACxC,MAAI,UAAU;AACd,MAAI,UAAU;AACd,MAAI,WAAW;AAEf,SAAQ,WAAW,SAAU;AAC5B,UAAM,UAAU,KAAK,OAAS,UAAU,WAAY,CAAE;AACtD,kBAAe,OAAQ;
|
|
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 * Find optimal font size using simple binary search between 5-600px.\n *\n * @param {HTMLElement} textElement The text element\n * @param {Function} applyFontSize Function that receives font size in pixels\n * @return {number} Optimal font size\n */\nfunction findOptimalFontSize( textElement, applyFontSize ) {\n\tconst alreadyHasScrollableHeight =\n\t\ttextElement.scrollHeight > textElement.clientHeight;\n\tlet minSize = 5;\n\tlet maxSize = 2400;\n\tlet bestSize = minSize;\n\n\tconst computedStyle = window.getComputedStyle( textElement );\n\tconst paddingLeft = parseFloat( computedStyle.paddingLeft ) || 0;\n\tconst paddingRight = parseFloat( computedStyle.paddingRight ) || 0;\n\tconst range = document.createRange();\n\trange.selectNodeContents( textElement );\n\n\twhile ( minSize <= maxSize ) {\n\t\tconst midSize = Math.floor( ( minSize + maxSize ) / 2 );\n\t\tapplyFontSize( midSize );\n\n\t\t// When there is padding if the text overflows to the\n\t\t// padding area, it should be considered overflowing.\n\t\t// Use Range API to measure actual text content dimensions.\n\t\tconst rect = range.getBoundingClientRect();\n\t\tconst textWidth = rect.width;\n\n\t\t// Check if text fits within the element's width and is not\n\t\t// overflowing into the padding area.\n\t\tconst fitsWidth =\n\t\t\ttextElement.scrollWidth <= textElement.clientWidth &&\n\t\t\ttextWidth <= textElement.clientWidth - paddingLeft - paddingRight;\n\t\t// Check if text fits within the element's height.\n\t\tconst fitsHeight =\n\t\t\talreadyHasScrollableHeight ||\n\t\t\ttextElement.scrollHeight <= textElement.clientHeight;\n\n\t\tif ( fitsWidth && fitsHeight ) {\n\t\t\tbestSize = midSize;\n\t\t\tminSize = midSize + 1;\n\t\t} else {\n\t\t\tmaxSize = midSize - 1;\n\t\t}\n\t}\n\trange.detach();\n\n\treturn bestSize;\n}\n\n/**\n * Complete fit text optimization for a single text element.\n * Handles the full flow using callbacks for font size application.\n *\n * @param {HTMLElement} textElement The text element (paragraph, heading, etc.)\n * @param {Function} applyFontSize Function that receives font size in pixels (0 to clear, >0 to apply)\n */\nexport function optimizeFitText( textElement, applyFontSize ) {\n\tif ( ! textElement ) {\n\t\treturn;\n\t}\n\n\tapplyFontSize( 0 );\n\n\tconst optimalSize = findOptimalFontSize( textElement, applyFontSize );\n\n\tapplyFontSize( optimalSize );\n\treturn optimalSize;\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAYA,SAAS,oBAAqB,aAAa,eAAgB;AAC1D,QAAM,6BACL,YAAY,eAAe,YAAY;AACxC,MAAI,UAAU;AACd,MAAI,UAAU;AACd,MAAI,WAAW;AAEf,QAAM,gBAAgB,OAAO,iBAAkB,WAAY;AAC3D,QAAM,cAAc,WAAY,cAAc,WAAY,KAAK;AAC/D,QAAM,eAAe,WAAY,cAAc,YAAa,KAAK;AACjE,QAAM,QAAQ,SAAS,YAAY;AACnC,QAAM,mBAAoB,WAAY;AAEtC,SAAQ,WAAW,SAAU;AAC5B,UAAM,UAAU,KAAK,OAAS,UAAU,WAAY,CAAE;AACtD,kBAAe,OAAQ;AAKvB,UAAM,OAAO,MAAM,sBAAsB;AACzC,UAAM,YAAY,KAAK;AAIvB,UAAM,YACL,YAAY,eAAe,YAAY,eACvC,aAAa,YAAY,cAAc,cAAc;AAEtD,UAAM,aACL,8BACA,YAAY,gBAAgB,YAAY;AAEzC,QAAK,aAAa,YAAa;AAC9B,iBAAW;AACX,gBAAU,UAAU;AAAA,IACrB,OAAO;AACN,gBAAU,UAAU;AAAA,IACrB;AAAA,EACD;AACA,QAAM,OAAO;AAEb,SAAO;AACR;AASO,SAAS,gBAAiB,aAAa,eAAgB;AAC7D,MAAK,CAAE,aAAc;AACpB;AAAA,EACD;AAEA,gBAAe,CAAE;AAEjB,QAAM,cAAc,oBAAqB,aAAa,aAAc;AAEpE,gBAAe,WAAY;AAC3B,SAAO;AACR;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -113,7 +113,13 @@ function VariationsToggleGroupControl({
|
|
|
113
113
|
}
|
|
114
114
|
function __experimentalBlockVariationTransforms({ blockClientId }) {
|
|
115
115
|
const { updateBlockAttributes } = useDispatch(blockEditorStore);
|
|
116
|
-
const {
|
|
116
|
+
const {
|
|
117
|
+
activeBlockVariation,
|
|
118
|
+
unfilteredVariations,
|
|
119
|
+
blockName,
|
|
120
|
+
isContentOnly,
|
|
121
|
+
isSection
|
|
122
|
+
} = useSelect(
|
|
117
123
|
(select) => {
|
|
118
124
|
const { getActiveBlockVariation, getBlockVariations } = select(blocksStore);
|
|
119
125
|
const {
|
|
@@ -123,9 +129,7 @@ function __experimentalBlockVariationTransforms({ blockClientId }) {
|
|
|
123
129
|
isSectionBlock
|
|
124
130
|
} = unlock(select(blockEditorStore));
|
|
125
131
|
const name = blockClientId && getBlockName(blockClientId);
|
|
126
|
-
const { hasContentRoleAttribute } = unlock(
|
|
127
|
-
select(blocksStore)
|
|
128
|
-
);
|
|
132
|
+
const { hasContentRoleAttribute } = unlock(select(blocksStore));
|
|
129
133
|
const isContentBlock = hasContentRoleAttribute(name);
|
|
130
134
|
return {
|
|
131
135
|
activeBlockVariation: getActiveBlockVariation(
|
|
@@ -133,13 +137,36 @@ function __experimentalBlockVariationTransforms({ blockClientId }) {
|
|
|
133
137
|
getBlockAttributes(blockClientId),
|
|
134
138
|
"transform"
|
|
135
139
|
),
|
|
136
|
-
|
|
140
|
+
unfilteredVariations: name && getBlockVariations(name, "transform"),
|
|
141
|
+
blockName: name,
|
|
137
142
|
isContentOnly: getBlockEditingMode(blockClientId) === "contentOnly" && !isContentBlock,
|
|
138
143
|
isSection: isSectionBlock(blockClientId)
|
|
139
144
|
};
|
|
140
145
|
},
|
|
141
146
|
[blockClientId]
|
|
142
147
|
);
|
|
148
|
+
const variations = useMemo(() => {
|
|
149
|
+
if (blockName === "core/paragraph") {
|
|
150
|
+
if (activeBlockVariation?.name === "stretchy-paragraph" || unfilteredVariations.every(
|
|
151
|
+
(v) => ["paragraph", "stretchy-paragraph"].includes(v.name)
|
|
152
|
+
)) {
|
|
153
|
+
return [];
|
|
154
|
+
}
|
|
155
|
+
return unfilteredVariations.filter(
|
|
156
|
+
(v) => v.name !== "stretchy-paragraph"
|
|
157
|
+
);
|
|
158
|
+
} else if (blockName === "core/heading") {
|
|
159
|
+
if (activeBlockVariation?.name === "stretchy-heading" || unfilteredVariations.every(
|
|
160
|
+
(v) => ["heading", "stretchy-heading"].includes(v.name)
|
|
161
|
+
)) {
|
|
162
|
+
return [];
|
|
163
|
+
}
|
|
164
|
+
return unfilteredVariations.filter(
|
|
165
|
+
(v) => v.name !== "stretchy-heading"
|
|
166
|
+
);
|
|
167
|
+
}
|
|
168
|
+
return unfilteredVariations;
|
|
169
|
+
}, [activeBlockVariation?.name, blockName, unfilteredVariations]);
|
|
143
170
|
const selectedValue = activeBlockVariation?.name;
|
|
144
171
|
const hasUniqueIcons = useMemo(() => {
|
|
145
172
|
const variationIcons = /* @__PURE__ */ new Set();
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/block-variation-transforms/index.js"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tButton,\n\tDropdownMenu,\n\tMenuGroup,\n\tMenuItemsChoice,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,\n\tVisuallyHidden,\n} from '@wordpress/components';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useMemo } from '@wordpress/element';\nimport { chevronDown } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport BlockIcon from '../block-icon';\nimport { store as blockEditorStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\n\nfunction VariationsButtons( {\n\tclassName,\n\tonSelectVariation,\n\tselectedValue,\n\tvariations,\n} ) {\n\treturn (\n\t\t<fieldset className={ className }>\n\t\t\t<VisuallyHidden as=\"legend\">\n\t\t\t\t{ __( 'Transform to variation' ) }\n\t\t\t</VisuallyHidden>\n\t\t\t{ variations.map( ( variation ) => (\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\tkey={ variation.name }\n\t\t\t\t\ticon={ <BlockIcon icon={ variation.icon } showColors /> }\n\t\t\t\t\tisPressed={ selectedValue === variation.name }\n\t\t\t\t\tlabel={\n\t\t\t\t\t\tselectedValue === variation.name\n\t\t\t\t\t\t\t? variation.title\n\t\t\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t\t\t/* translators: %s: Block or block variation name. */\n\t\t\t\t\t\t\t\t\t__( 'Transform to %s' ),\n\t\t\t\t\t\t\t\t\tvariation.title\n\t\t\t\t\t\t\t )\n\t\t\t\t\t}\n\t\t\t\t\tonClick={ () => onSelectVariation( variation.name ) }\n\t\t\t\t\taria-label={ variation.title }\n\t\t\t\t\tshowTooltip\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</fieldset>\n\t);\n}\n\nfunction VariationsDropdown( {\n\tclassName,\n\tonSelectVariation,\n\tselectedValue,\n\tvariations,\n} ) {\n\tconst selectOptions = variations.map(\n\t\t( { name, title, description } ) => ( {\n\t\t\tvalue: name,\n\t\t\tlabel: title,\n\t\t\tinfo: description,\n\t\t} )\n\t);\n\n\treturn (\n\t\t<DropdownMenu\n\t\t\tclassName={ className }\n\t\t\tlabel={ __( 'Transform to variation' ) }\n\t\t\ttext={ __( 'Transform to variation' ) }\n\t\t\tpopoverProps={ {\n\t\t\t\tposition: 'bottom center',\n\t\t\t\tclassName: `${ className }__popover`,\n\t\t\t} }\n\t\t\ticon={ chevronDown }\n\t\t\ttoggleProps={ { iconPosition: 'right' } }\n\t\t>\n\t\t\t{ () => (\n\t\t\t\t<MenuGroup>\n\t\t\t\t\t<MenuItemsChoice\n\t\t\t\t\t\tchoices={ selectOptions }\n\t\t\t\t\t\tvalue={ selectedValue }\n\t\t\t\t\t\tonSelect={ onSelectVariation }\n\t\t\t\t\t/>\n\t\t\t\t</MenuGroup>\n\t\t\t) }\n\t\t</DropdownMenu>\n\t);\n}\n\nfunction VariationsToggleGroupControl( {\n\tclassName,\n\tonSelectVariation,\n\tselectedValue,\n\tvariations,\n} ) {\n\treturn (\n\t\t<div className={ className }>\n\t\t\t<ToggleGroupControl\n\t\t\t\tlabel={ __( 'Transform to variation' ) }\n\t\t\t\tvalue={ selectedValue }\n\t\t\t\thideLabelFromVision\n\t\t\t\tonChange={ onSelectVariation }\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t>\n\t\t\t\t{ variations.map( ( variation ) => (\n\t\t\t\t\t<ToggleGroupControlOptionIcon\n\t\t\t\t\t\tkey={ variation.name }\n\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t<BlockIcon icon={ variation.icon } showColors />\n\t\t\t\t\t\t}\n\t\t\t\t\t\tvalue={ variation.name }\n\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\tselectedValue === variation.name\n\t\t\t\t\t\t\t\t? variation.title\n\t\t\t\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t\t\t\t/* translators: %s: Block or block variation name. */\n\t\t\t\t\t\t\t\t\t\t__( 'Transform to %s' ),\n\t\t\t\t\t\t\t\t\t\tvariation.title\n\t\t\t\t\t\t\t\t )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</ToggleGroupControl>\n\t\t</div>\n\t);\n}\n\nfunction __experimentalBlockVariationTransforms( { blockClientId } ) {\n\tconst { updateBlockAttributes } = useDispatch( blockEditorStore );\n\tconst {
|
|
5
|
-
"mappings": "AAgCE,SACC,KADD;AA7BF,SAAS,SAAS,mBAAmB;AACrC,SAAS,IAAI,eAAe;AAC5B;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oCAAoC;AAAA,EACpC,8CAA8C;AAAA,EAC9C;AAAA,OACM;AACP,SAAS,WAAW,mBAAmB;AACvC,SAAS,eAAe;AACxB,SAAS,mBAAmB;AAK5B,OAAO,eAAe;AACtB,SAAS,SAAS,wBAAwB;AAC1C,SAAS,cAAc;AAEvB,SAAS,kBAAmB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,SACC,qBAAC,cAAS,WACT;AAAA,wBAAC,kBAAe,IAAG,UAChB,aAAI,wBAAyB,GAChC;AAAA,IACE,WAAW,IAAK,CAAE,cACnB;AAAA,MAAC;AAAA;AAAA,QACA,uBAAqB;AAAA,QACrB,MAAK;AAAA,QAEL,MAAO,oBAAC,aAAU,MAAO,UAAU,MAAO,YAAU,MAAC;AAAA,QACrD,WAAY,kBAAkB,UAAU;AAAA,QACxC,OACC,kBAAkB,UAAU,OACzB,UAAU,QACV;AAAA;AAAA,UAEA,GAAI,iBAAkB;AAAA,UACtB,UAAU;AAAA,QACV;AAAA,QAEJ,SAAU,MAAM,kBAAmB,UAAU,IAAK;AAAA,QAClD,cAAa,UAAU;AAAA,QACvB,aAAW;AAAA;AAAA,MAdL,UAAU;AAAA,IAejB,CACC;AAAA,KACH;AAEF;AAEA,SAAS,mBAAoB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,gBAAgB,WAAW;AAAA,IAChC,CAAE,EAAE,MAAM,OAAO,YAAY,OAAS;AAAA,MACrC,OAAO;AAAA,MACP,OAAO;AAAA,MACP,MAAM;AAAA,IACP;AAAA,EACD;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,OAAQ,GAAI,wBAAyB;AAAA,MACrC,MAAO,GAAI,wBAAyB;AAAA,MACpC,cAAe;AAAA,QACd,UAAU;AAAA,QACV,WAAW,GAAI,SAAU;AAAA,MAC1B;AAAA,MACA,MAAO;AAAA,MACP,aAAc,EAAE,cAAc,QAAQ;AAAA,MAEpC,gBACD,oBAAC,aACA;AAAA,QAAC;AAAA;AAAA,UACA,SAAU;AAAA,UACV,OAAQ;AAAA,UACR,UAAW;AAAA;AAAA,MACZ,GACD;AAAA;AAAA,EAEF;AAEF;AAEA,SAAS,6BAA8B;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,SACC,oBAAC,SAAI,WACJ;AAAA,IAAC;AAAA;AAAA,MACA,OAAQ,GAAI,wBAAyB;AAAA,MACrC,OAAQ;AAAA,MACR,qBAAmB;AAAA,MACnB,UAAW;AAAA,MACX,uBAAqB;AAAA,MACrB,yBAAuB;AAAA,MAErB,qBAAW,IAAK,CAAE,cACnB;AAAA,QAAC;AAAA;AAAA,UAEA,MACC,oBAAC,aAAU,MAAO,UAAU,MAAO,YAAU,MAAC;AAAA,UAE/C,OAAQ,UAAU;AAAA,UAClB,OACC,kBAAkB,UAAU,OACzB,UAAU,QACV;AAAA;AAAA,YAEA,GAAI,iBAAkB;AAAA,YACtB,UAAU;AAAA,UACV;AAAA;AAAA,QAZE,UAAU;AAAA,MAcjB,CACC;AAAA;AAAA,EACH,GACD;AAEF;AAEA,SAAS,uCAAwC,EAAE,cAAc,GAAI;AACpE,QAAM,EAAE,sBAAsB,IAAI,YAAa,gBAAiB;AAChE,QAAM,
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tButton,\n\tDropdownMenu,\n\tMenuGroup,\n\tMenuItemsChoice,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,\n\tVisuallyHidden,\n} from '@wordpress/components';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useMemo } from '@wordpress/element';\nimport { chevronDown } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport BlockIcon from '../block-icon';\nimport { store as blockEditorStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\n\nfunction VariationsButtons( {\n\tclassName,\n\tonSelectVariation,\n\tselectedValue,\n\tvariations,\n} ) {\n\treturn (\n\t\t<fieldset className={ className }>\n\t\t\t<VisuallyHidden as=\"legend\">\n\t\t\t\t{ __( 'Transform to variation' ) }\n\t\t\t</VisuallyHidden>\n\t\t\t{ variations.map( ( variation ) => (\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\tkey={ variation.name }\n\t\t\t\t\ticon={ <BlockIcon icon={ variation.icon } showColors /> }\n\t\t\t\t\tisPressed={ selectedValue === variation.name }\n\t\t\t\t\tlabel={\n\t\t\t\t\t\tselectedValue === variation.name\n\t\t\t\t\t\t\t? variation.title\n\t\t\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t\t\t/* translators: %s: Block or block variation name. */\n\t\t\t\t\t\t\t\t\t__( 'Transform to %s' ),\n\t\t\t\t\t\t\t\t\tvariation.title\n\t\t\t\t\t\t\t )\n\t\t\t\t\t}\n\t\t\t\t\tonClick={ () => onSelectVariation( variation.name ) }\n\t\t\t\t\taria-label={ variation.title }\n\t\t\t\t\tshowTooltip\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</fieldset>\n\t);\n}\n\nfunction VariationsDropdown( {\n\tclassName,\n\tonSelectVariation,\n\tselectedValue,\n\tvariations,\n} ) {\n\tconst selectOptions = variations.map(\n\t\t( { name, title, description } ) => ( {\n\t\t\tvalue: name,\n\t\t\tlabel: title,\n\t\t\tinfo: description,\n\t\t} )\n\t);\n\n\treturn (\n\t\t<DropdownMenu\n\t\t\tclassName={ className }\n\t\t\tlabel={ __( 'Transform to variation' ) }\n\t\t\ttext={ __( 'Transform to variation' ) }\n\t\t\tpopoverProps={ {\n\t\t\t\tposition: 'bottom center',\n\t\t\t\tclassName: `${ className }__popover`,\n\t\t\t} }\n\t\t\ticon={ chevronDown }\n\t\t\ttoggleProps={ { iconPosition: 'right' } }\n\t\t>\n\t\t\t{ () => (\n\t\t\t\t<MenuGroup>\n\t\t\t\t\t<MenuItemsChoice\n\t\t\t\t\t\tchoices={ selectOptions }\n\t\t\t\t\t\tvalue={ selectedValue }\n\t\t\t\t\t\tonSelect={ onSelectVariation }\n\t\t\t\t\t/>\n\t\t\t\t</MenuGroup>\n\t\t\t) }\n\t\t</DropdownMenu>\n\t);\n}\n\nfunction VariationsToggleGroupControl( {\n\tclassName,\n\tonSelectVariation,\n\tselectedValue,\n\tvariations,\n} ) {\n\treturn (\n\t\t<div className={ className }>\n\t\t\t<ToggleGroupControl\n\t\t\t\tlabel={ __( 'Transform to variation' ) }\n\t\t\t\tvalue={ selectedValue }\n\t\t\t\thideLabelFromVision\n\t\t\t\tonChange={ onSelectVariation }\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t>\n\t\t\t\t{ variations.map( ( variation ) => (\n\t\t\t\t\t<ToggleGroupControlOptionIcon\n\t\t\t\t\t\tkey={ variation.name }\n\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t<BlockIcon icon={ variation.icon } showColors />\n\t\t\t\t\t\t}\n\t\t\t\t\t\tvalue={ variation.name }\n\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\tselectedValue === variation.name\n\t\t\t\t\t\t\t\t? variation.title\n\t\t\t\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t\t\t\t/* translators: %s: Block or block variation name. */\n\t\t\t\t\t\t\t\t\t\t__( 'Transform to %s' ),\n\t\t\t\t\t\t\t\t\t\tvariation.title\n\t\t\t\t\t\t\t\t )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</ToggleGroupControl>\n\t\t</div>\n\t);\n}\n\nfunction __experimentalBlockVariationTransforms( { blockClientId } ) {\n\tconst { updateBlockAttributes } = useDispatch( blockEditorStore );\n\tconst {\n\t\tactiveBlockVariation,\n\t\tunfilteredVariations,\n\t\tblockName,\n\t\tisContentOnly,\n\t\tisSection,\n\t} = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getActiveBlockVariation, getBlockVariations } =\n\t\t\t\tselect( blocksStore );\n\n\t\t\tconst {\n\t\t\t\tgetBlockName,\n\t\t\t\tgetBlockAttributes,\n\t\t\t\tgetBlockEditingMode,\n\t\t\t\tisSectionBlock,\n\t\t\t} = unlock( select( blockEditorStore ) );\n\n\t\t\tconst name = blockClientId && getBlockName( blockClientId );\n\n\t\t\tconst { hasContentRoleAttribute } = unlock( select( blocksStore ) );\n\t\t\tconst isContentBlock = hasContentRoleAttribute( name );\n\n\t\t\treturn {\n\t\t\t\tactiveBlockVariation: getActiveBlockVariation(\n\t\t\t\t\tname,\n\t\t\t\t\tgetBlockAttributes( blockClientId ),\n\t\t\t\t\t'transform'\n\t\t\t\t),\n\t\t\t\tunfilteredVariations:\n\t\t\t\t\tname && getBlockVariations( name, 'transform' ),\n\t\t\t\tblockName: name,\n\t\t\t\tisContentOnly:\n\t\t\t\t\tgetBlockEditingMode( blockClientId ) === 'contentOnly' &&\n\t\t\t\t\t! isContentBlock,\n\t\t\t\tisSection: isSectionBlock( blockClientId ),\n\t\t\t};\n\t\t},\n\t\t[ blockClientId ]\n\t);\n\n\t/*\n\t * Hack for WordPress 6.9\n\t *\n\t * The Stretchy blocks shipped in 6.9 were ultimately\n\t * implemented as block variations of the base types Paragraph\n\t * and Heading. See #73056 for discussion and trade-offs.\n\t *\n\t * The main drawback of this choice is that the Variations API\n\t * doesn't offer enough control over how prominent and how tied\n\t * to the base type a variation should be.\n\t *\n\t * In order to ship these new \"blocks\" with an acceptable UX,\n\t * we need two hacks until the Variations API is improved:\n\t *\n\t * - Don't show the variations switcher in the block inspector\n\t * for Paragraph, Heading, Stretchy Paragraph and Stretchy\n\t * Heading (implemented below). Transformations are still\n\t * available in the block switcher.\n\t *\n\t * - Move the stretchy variations to the end of the core blocks\n\t * list in the block inserter (implemented in\n\t * getInserterItems in #73056).\n\t */\n\tconst variations = useMemo( () => {\n\t\tif ( blockName === 'core/paragraph' ) {\n\t\t\t// Always hide options when active variation is stretchy, but\n\t\t\t// ensure that there are no third-party variations before doing the\n\t\t\t// same elsewhere.\n\t\t\tif (\n\t\t\t\tactiveBlockVariation?.name === 'stretchy-paragraph' ||\n\t\t\t\tunfilteredVariations.every( ( v ) =>\n\t\t\t\t\t[ 'paragraph', 'stretchy-paragraph' ].includes( v.name )\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\treturn [];\n\t\t\t}\n\t\t\t// If there are other variations, only hide the stretchy one.\n\t\t\treturn unfilteredVariations.filter(\n\t\t\t\t( v ) => v.name !== 'stretchy-paragraph'\n\t\t\t);\n\t\t} else if ( blockName === 'core/heading' ) {\n\t\t\tif (\n\t\t\t\tactiveBlockVariation?.name === 'stretchy-heading' ||\n\t\t\t\tunfilteredVariations.every( ( v ) =>\n\t\t\t\t\t[ 'heading', 'stretchy-heading' ].includes( v.name )\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\treturn [];\n\t\t\t}\n\t\t\treturn unfilteredVariations.filter(\n\t\t\t\t( v ) => v.name !== 'stretchy-heading'\n\t\t\t);\n\t\t}\n\t\treturn unfilteredVariations;\n\t}, [ activeBlockVariation?.name, blockName, unfilteredVariations ] );\n\n\tconst selectedValue = activeBlockVariation?.name;\n\n\t// Check if each variation has a unique icon.\n\tconst hasUniqueIcons = useMemo( () => {\n\t\tconst variationIcons = new Set();\n\t\tif ( ! variations ) {\n\t\t\treturn false;\n\t\t}\n\t\tvariations.forEach( ( variation ) => {\n\t\t\tif ( variation.icon ) {\n\t\t\t\tvariationIcons.add( variation.icon?.src || variation.icon );\n\t\t\t}\n\t\t} );\n\t\treturn variationIcons.size === variations.length;\n\t}, [ variations ] );\n\n\tconst onSelectVariation = ( variationName ) => {\n\t\tupdateBlockAttributes( blockClientId, {\n\t\t\t...variations.find( ( { name } ) => name === variationName )\n\t\t\t\t.attributes,\n\t\t} );\n\t};\n\n\tconst hideVariationsForSections =\n\t\twindow?.__experimentalContentOnlyPatternInsertion && isSection;\n\n\tif ( ! variations?.length || isContentOnly || hideVariationsForSections ) {\n\t\treturn null;\n\t}\n\n\tconst baseClass = 'block-editor-block-variation-transforms';\n\n\t// Show buttons if there are more than 5 variations because the ToggleGroupControl does not wrap\n\tconst showButtons = variations.length > 5;\n\n\tconst ButtonComponent = showButtons\n\t\t? VariationsButtons\n\t\t: VariationsToggleGroupControl;\n\n\tconst Component = hasUniqueIcons ? ButtonComponent : VariationsDropdown;\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={ baseClass }\n\t\t\tonSelectVariation={ onSelectVariation }\n\t\t\tselectedValue={ selectedValue }\n\t\t\tvariations={ variations }\n\t\t/>\n\t);\n}\n\nexport default __experimentalBlockVariationTransforms;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/border-radius-control/single-input-control.js"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalHStack as HStack,\n\tIcon,\n\tTooltip,\n\tRangeControl,\n\tButton,\n\tCustomSelectControl,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { settings } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport {\n\tgetAllValue,\n\tgetCustomValueFromPreset,\n\tgetPresetValueFromControlValue,\n\tgetPresetValueFromCustomValue,\n\tgetSliderValueFromPreset,\n\tisValuePreset,\n\tconvertPresetsToCustomValues,\n} from './utils';\nimport {\n\tCORNERS,\n\tICONS,\n\tMIN_BORDER_RADIUS_VALUE,\n\tMAX_BORDER_RADIUS_VALUES,\n\tRANGE_CONTROL_MAX_SIZE,\n} from './constants';\n\nexport default function SingleInputControl( {\n\tcorner,\n\tonChange,\n\tselectedUnits,\n\tsetSelectedUnits,\n\tvalues: valuesProp,\n\tunits,\n\tpresets,\n} ) {\n\tconst changeCornerValue = ( validatedValue ) => {\n\t\tif ( corner === 'all' ) {\n\t\t\tonChange( {\n\t\t\t\ttopLeft: validatedValue,\n\t\t\t\ttopRight: validatedValue,\n\t\t\t\tbottomLeft: validatedValue,\n\t\t\t\tbottomRight: validatedValue,\n\t\t\t} );\n\t\t} else {\n\t\t\tonChange( {\n\t\t\t\t...values,\n\t\t\t\t[ corner ]: validatedValue,\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst onChangeValue = ( next ) => {\n\t\tif ( ! onChange ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Filter out CSS-unit-only values to prevent invalid styles.\n\t\tconst isNumeric = ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\t\tchangeCornerValue( nextValue );\n\t};\n\n\tconst onChangeUnit = ( next ) => {\n\t\tconst newUnits = { ...selectedUnits };\n\t\tif ( corner === 'all' ) {\n\t\t\tnewUnits.topLeft = next;\n\t\t\tnewUnits.topRight = next;\n\t\t\tnewUnits.bottomLeft = next;\n\t\t\tnewUnits.bottomRight = next;\n\t\t} else {\n\t\t\tnewUnits[ corner ] = next;\n\t\t}\n\t\tsetSelectedUnits( newUnits );\n\t};\n\n\t// For shorthand style & backwards compatibility, handle flat string value.\n\tconst values =\n\t\ttypeof valuesProp !== 'string'\n\t\t\t? valuesProp\n\t\t\t: {\n\t\t\t\t\ttopLeft: valuesProp,\n\t\t\t\t\ttopRight: valuesProp,\n\t\t\t\t\tbottomLeft: valuesProp,\n\t\t\t\t\tbottomRight: valuesProp,\n\t\t\t };\n\n\t// For 'all' corner, convert presets to custom values before calling getAllValue\n\t// For individual corners, check if the value should be converted to a preset\n\tlet value;\n\tif ( corner === 'all' ) {\n\t\tconst convertedValues = convertPresetsToCustomValues( values, presets );\n\t\tconst customValue = getAllValue( convertedValues );\n\t\tvalue = getPresetValueFromCustomValue( customValue, presets );\n\t} else {\n\t\tvalue = getPresetValueFromCustomValue( values[ corner ], presets );\n\t}\n\tconst resolvedPresetValue = isValuePreset( value )\n\t\t? getCustomValueFromPreset( value, presets )\n\t\t: value;\n\tconst [ parsedQuantity, parsedUnit ] =\n\t\tparseQuantityAndUnitFromRawValue( resolvedPresetValue );\n\tconst computedUnit = value\n\t\t? parsedUnit\n\t\t: selectedUnits[ corner ] || selectedUnits.flat || 'px';\n\tconst unitConfig =\n\t\tunits && units.find( ( item ) => item.value === computedUnit );\n\tconst step = unitConfig?.step || 1;\n\tconst [ showCustomValueControl, setShowCustomValueControl ] = useState(\n\t\tvalue !== undefined && ! isValuePreset( value )\n\t);\n\tconst showRangeControl = presets.length <= RANGE_CONTROL_MAX_SIZE;\n\tconst presetIndex = getSliderValueFromPreset( value, presets );\n\tconst rangeTooltip = ( newValue ) =>\n\t\tvalue === undefined ? undefined : presets[ newValue ]?.name;\n\tconst marks = presets\n\t\t.slice( 1, presets.length - 1 )\n\t\t.map( ( _newValue, index ) => ( {\n\t\t\tvalue: index + 1,\n\t\t\tlabel: undefined,\n\t\t} ) );\n\tconst hasPresets = marks.length > 0;\n\tlet options = [];\n\tif ( ! showRangeControl ) {\n\t\toptions = [\n\t\t\t...presets,\n\t\t\t{\n\t\t\t\tname: __( 'Custom' ),\n\t\t\t\tslug: 'custom',\n\t\t\t\tsize: resolvedPresetValue,\n\t\t\t},\n\t\t].map( ( size, index ) => ( {\n\t\t\tkey: index,\n\t\t\tname: size.name,\n\t\t} ) );\n\t}\n\tconst icon = ICONS[ corner ];\n\n\tconst handleSliderChange = ( next ) => {\n\t\tconst val =\n\t\t\tnext !== undefined ? `${ next }${ computedUnit }` : undefined;\n\t\tchangeCornerValue( val );\n\t};\n\n\t// Controls are wrapped in tooltips as visible labels aren't desired here.\n\t// Tooltip rendering also requires the UnitControl to be wrapped. See:\n\t// https://github.com/WordPress/gutenberg/pull/24966#issuecomment-685875026\n\treturn (\n\t\t<HStack>\n\t\t\t{ icon && (\n\t\t\t\t<Icon\n\t\t\t\t\tclassName=\"components-border-radius-control__icon\"\n\t\t\t\t\ticon={ icon }\n\t\t\t\t\tsize={ 24 }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ ( ! hasPresets || showCustomValueControl ) && (\n\t\t\t\t<div className=\"components-border-radius-control__input-controls-wrapper\">\n\t\t\t\t\t<Tooltip text={ CORNERS[ corner ] } placement=\"top\">\n\t\t\t\t\t\t<div className=\"components-border-radius-control__tooltip-wrapper\">\n\t\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t\tclassName=\"components-border-radius-control__unit-control\"\n\t\t\t\t\t\t\t\taria-label={ CORNERS[ corner ] }\n\t\t\t\t\t\t\t\tvalue={ [ parsedQuantity, computedUnit ].join(\n\t\t\t\t\t\t\t\t\t''\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tonChange={ onChangeValue }\n\t\t\t\t\t\t\t\tonUnitChange={ onChangeUnit }\n\t\t\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t\t\tmin={ MIN_BORDER_RADIUS_VALUE }\n\t\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tlabel={ __( 'Border radius' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\tclassName=\"components-border-radius-control__range-control\"\n\t\t\t\t\t\tvalue={ parsedQuantity ?? '' }\n\t\t\t\t\t\tmin={ MIN_BORDER_RADIUS_VALUE }\n\t\t\t\t\t\tmax={ MAX_BORDER_RADIUS_VALUES[ computedUnit ] }\n\t\t\t\t\t\tinitialPosition={ 0 }\n\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\tonChange={ handleSliderChange }\n\t\t\t\t\t\tstep={ step }\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ hasPresets && showRangeControl && ! showCustomValueControl && (\n\t\t\t\t<RangeControl\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tclassName=\"components-border-radius-control__range-control\"\n\t\t\t\t\tvalue={ presetIndex }\n\t\t\t\t\tonChange={ ( newSize ) => {\n\t\t\t\t\t\tchangeCornerValue(\n\t\t\t\t\t\t\tgetPresetValueFromControlValue(\n\t\t\t\t\t\t\t\tnewSize,\n\t\t\t\t\t\t\t\t'range',\n\t\t\t\t\t\t\t\tpresets\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t);\n\t\t\t\t\t} }\n\t\t\t\t\twithInputField={ false }\n\t\t\t\t\taria-valuenow={ presetIndex }\n\t\t\t\t\taria-valuetext={ presets[ presetIndex ]?.name }\n\t\t\t\t\trenderTooltipContent={ rangeTooltip }\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tmax={ presets.length - 1 }\n\t\t\t\t\tmarks={ marks }\n\t\t\t\t\tlabel={ CORNERS[ corner ] }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t{ ! showRangeControl && ! showCustomValueControl && (\n\t\t\t\t<CustomSelectControl\n\t\t\t\t\tclassName=\"components-border-radius-control__custom-select-control\"\n\t\t\t\t\tvalue={\n\t\t\t\t\t\toptions.find(\n\t\t\t\t\t\t\t( option ) => option.key === presetIndex\n\t\t\t\t\t\t) || options[ options.length - 1 ]\n\t\t\t\t\t}\n\t\t\t\t\tonChange={ ( selection ) => {\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\tselection.selectedItem.key ===\n\t\t\t\t\t\t\toptions.length - 1\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\tsetShowCustomValueControl( true );\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tchangeCornerValue(\n\t\t\t\t\t\t\t\tgetPresetValueFromControlValue(\n\t\t\t\t\t\t\t\t\tselection.selectedItem.key,\n\t\t\t\t\t\t\t\t\t'selectList',\n\t\t\t\t\t\t\t\t\tpresets\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t} }\n\t\t\t\t\toptions={ options }\n\t\t\t\t\tlabel={ CORNERS[ corner ] }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasPresets && (\n\t\t\t\t<Button\n\t\t\t\t\tlabel={\n\t\t\t\t\t\tshowCustomValueControl\n\t\t\t\t\t\t\t? __( 'Use border radius preset' )\n\t\t\t\t\t\t\t: __( 'Set custom border radius' )\n\t\t\t\t\t}\n\t\t\t\t\ticon={ settings }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tsetShowCustomValueControl( ! showCustomValueControl );\n\t\t\t\t\t} }\n\t\t\t\t\tisPressed={ showCustomValueControl }\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tclassName=\"components-border-radius-control__custom-toggle\"\n\t\t\t\t\ticonSize={ 24 }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</HStack>\n\t);\n}\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalHStack as HStack,\n\tIcon,\n\tTooltip,\n\tRangeControl,\n\tButton,\n\tCustomSelectControl,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { settings } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport {\n\tgetAllValue,\n\tgetCustomValueFromPreset,\n\tgetPresetValueFromControlValue,\n\tgetPresetValueFromCustomValue,\n\tgetSliderValueFromPreset,\n\tisValuePreset,\n\tconvertPresetsToCustomValues,\n} from './utils';\nimport {\n\tCORNERS,\n\tICONS,\n\tMIN_BORDER_RADIUS_VALUE,\n\tMAX_BORDER_RADIUS_VALUES,\n\tRANGE_CONTROL_MAX_SIZE,\n} from './constants';\n\nexport default function SingleInputControl( {\n\tcorner,\n\tonChange,\n\tselectedUnits,\n\tsetSelectedUnits,\n\tvalues: valuesProp,\n\tunits,\n\tpresets,\n} ) {\n\tconst changeCornerValue = ( validatedValue ) => {\n\t\tif ( corner === 'all' ) {\n\t\t\tonChange( {\n\t\t\t\ttopLeft: validatedValue,\n\t\t\t\ttopRight: validatedValue,\n\t\t\t\tbottomLeft: validatedValue,\n\t\t\t\tbottomRight: validatedValue,\n\t\t\t} );\n\t\t} else {\n\t\t\tonChange( {\n\t\t\t\t...values,\n\t\t\t\t[ corner ]: validatedValue,\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst onChangeValue = ( next ) => {\n\t\tif ( ! onChange ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Filter out CSS-unit-only values to prevent invalid styles.\n\t\tconst isNumeric = ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\t\tchangeCornerValue( nextValue );\n\t};\n\n\tconst onChangeUnit = ( next ) => {\n\t\tconst newUnits = { ...selectedUnits };\n\t\tif ( corner === 'all' ) {\n\t\t\tnewUnits.flat = next;\n\t\t\tnewUnits.topLeft = next;\n\t\t\tnewUnits.topRight = next;\n\t\t\tnewUnits.bottomLeft = next;\n\t\t\tnewUnits.bottomRight = next;\n\t\t} else {\n\t\t\tnewUnits[ corner ] = next;\n\t\t}\n\t\tsetSelectedUnits( newUnits );\n\t};\n\n\t// For shorthand style & backwards compatibility, handle flat string value.\n\tconst values =\n\t\ttypeof valuesProp !== 'string'\n\t\t\t? valuesProp\n\t\t\t: {\n\t\t\t\t\ttopLeft: valuesProp,\n\t\t\t\t\ttopRight: valuesProp,\n\t\t\t\t\tbottomLeft: valuesProp,\n\t\t\t\t\tbottomRight: valuesProp,\n\t\t\t };\n\n\t// For 'all' corner, convert presets to custom values before calling getAllValue\n\t// For individual corners, check if the value should be converted to a preset\n\tlet value;\n\tif ( corner === 'all' ) {\n\t\tconst convertedValues = convertPresetsToCustomValues( values, presets );\n\t\tconst customValue = getAllValue( convertedValues );\n\t\tvalue = getPresetValueFromCustomValue( customValue, presets );\n\t} else {\n\t\tvalue = getPresetValueFromCustomValue( values[ corner ], presets );\n\t}\n\tconst resolvedPresetValue = isValuePreset( value )\n\t\t? getCustomValueFromPreset( value, presets )\n\t\t: value;\n\tconst [ parsedQuantity, parsedUnit ] =\n\t\tparseQuantityAndUnitFromRawValue( resolvedPresetValue );\n\tconst computedUnit = value\n\t\t? parsedUnit\n\t\t: selectedUnits[ corner ] || selectedUnits.flat || 'px';\n\tconst unitConfig =\n\t\tunits && units.find( ( item ) => item.value === computedUnit );\n\tconst step = unitConfig?.step || 1;\n\tconst [ showCustomValueControl, setShowCustomValueControl ] = useState(\n\t\tvalue !== undefined && ! isValuePreset( value )\n\t);\n\tconst showRangeControl = presets.length <= RANGE_CONTROL_MAX_SIZE;\n\tconst presetIndex = getSliderValueFromPreset( value, presets );\n\tconst rangeTooltip = ( newValue ) =>\n\t\tvalue === undefined ? undefined : presets[ newValue ]?.name;\n\tconst marks = presets\n\t\t.slice( 1, presets.length - 1 )\n\t\t.map( ( _newValue, index ) => ( {\n\t\t\tvalue: index + 1,\n\t\t\tlabel: undefined,\n\t\t} ) );\n\tconst hasPresets = marks.length > 0;\n\tlet options = [];\n\tif ( ! showRangeControl ) {\n\t\toptions = [\n\t\t\t...presets,\n\t\t\t{\n\t\t\t\tname: __( 'Custom' ),\n\t\t\t\tslug: 'custom',\n\t\t\t\tsize: resolvedPresetValue,\n\t\t\t},\n\t\t].map( ( size, index ) => ( {\n\t\t\tkey: index,\n\t\t\tname: size.name,\n\t\t} ) );\n\t}\n\tconst icon = ICONS[ corner ];\n\n\tconst handleSliderChange = ( next ) => {\n\t\tconst val =\n\t\t\tnext !== undefined ? `${ next }${ computedUnit }` : undefined;\n\t\tchangeCornerValue( val );\n\t};\n\n\t// Controls are wrapped in tooltips as visible labels aren't desired here.\n\t// Tooltip rendering also requires the UnitControl to be wrapped. See:\n\t// https://github.com/WordPress/gutenberg/pull/24966#issuecomment-685875026\n\treturn (\n\t\t<HStack>\n\t\t\t{ icon && (\n\t\t\t\t<Icon\n\t\t\t\t\tclassName=\"components-border-radius-control__icon\"\n\t\t\t\t\ticon={ icon }\n\t\t\t\t\tsize={ 24 }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ ( ! hasPresets || showCustomValueControl ) && (\n\t\t\t\t<div className=\"components-border-radius-control__input-controls-wrapper\">\n\t\t\t\t\t<Tooltip text={ CORNERS[ corner ] } placement=\"top\">\n\t\t\t\t\t\t<div className=\"components-border-radius-control__tooltip-wrapper\">\n\t\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t\tclassName=\"components-border-radius-control__unit-control\"\n\t\t\t\t\t\t\t\taria-label={ CORNERS[ corner ] }\n\t\t\t\t\t\t\t\tvalue={ [ parsedQuantity, computedUnit ].join(\n\t\t\t\t\t\t\t\t\t''\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tonChange={ onChangeValue }\n\t\t\t\t\t\t\t\tonUnitChange={ onChangeUnit }\n\t\t\t\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\t\t\t\tmin={ MIN_BORDER_RADIUS_VALUE }\n\t\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tlabel={ __( 'Border radius' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\tclassName=\"components-border-radius-control__range-control\"\n\t\t\t\t\t\tvalue={ parsedQuantity ?? '' }\n\t\t\t\t\t\tmin={ MIN_BORDER_RADIUS_VALUE }\n\t\t\t\t\t\tmax={ MAX_BORDER_RADIUS_VALUES[ computedUnit ] }\n\t\t\t\t\t\tinitialPosition={ 0 }\n\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\tonChange={ handleSliderChange }\n\t\t\t\t\t\tstep={ step }\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ hasPresets && showRangeControl && ! showCustomValueControl && (\n\t\t\t\t<RangeControl\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tclassName=\"components-border-radius-control__range-control\"\n\t\t\t\t\tvalue={ presetIndex }\n\t\t\t\t\tonChange={ ( newSize ) => {\n\t\t\t\t\t\tchangeCornerValue(\n\t\t\t\t\t\t\tgetPresetValueFromControlValue(\n\t\t\t\t\t\t\t\tnewSize,\n\t\t\t\t\t\t\t\t'range',\n\t\t\t\t\t\t\t\tpresets\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t);\n\t\t\t\t\t} }\n\t\t\t\t\twithInputField={ false }\n\t\t\t\t\taria-valuenow={ presetIndex }\n\t\t\t\t\taria-valuetext={ presets[ presetIndex ]?.name }\n\t\t\t\t\trenderTooltipContent={ rangeTooltip }\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tmax={ presets.length - 1 }\n\t\t\t\t\tmarks={ marks }\n\t\t\t\t\tlabel={ CORNERS[ corner ] }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t{ ! showRangeControl && ! showCustomValueControl && (\n\t\t\t\t<CustomSelectControl\n\t\t\t\t\tclassName=\"components-border-radius-control__custom-select-control\"\n\t\t\t\t\tvalue={\n\t\t\t\t\t\toptions.find(\n\t\t\t\t\t\t\t( option ) => option.key === presetIndex\n\t\t\t\t\t\t) || options[ options.length - 1 ]\n\t\t\t\t\t}\n\t\t\t\t\tonChange={ ( selection ) => {\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\tselection.selectedItem.key ===\n\t\t\t\t\t\t\toptions.length - 1\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\tsetShowCustomValueControl( true );\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tchangeCornerValue(\n\t\t\t\t\t\t\t\tgetPresetValueFromControlValue(\n\t\t\t\t\t\t\t\t\tselection.selectedItem.key,\n\t\t\t\t\t\t\t\t\t'selectList',\n\t\t\t\t\t\t\t\t\tpresets\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t} }\n\t\t\t\t\toptions={ options }\n\t\t\t\t\tlabel={ CORNERS[ corner ] }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasPresets && (\n\t\t\t\t<Button\n\t\t\t\t\tlabel={\n\t\t\t\t\t\tshowCustomValueControl\n\t\t\t\t\t\t\t? __( 'Use border radius preset' )\n\t\t\t\t\t\t\t: __( 'Set custom border radius' )\n\t\t\t\t\t}\n\t\t\t\t\ticon={ settings }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tsetShowCustomValueControl( ! showCustomValueControl );\n\t\t\t\t\t} }\n\t\t\t\t\tisPressed={ showCustomValueControl }\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tclassName=\"components-border-radius-control__custom-toggle\"\n\t\t\t\t\ticonSize={ 24 }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</HStack>\n\t);\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -72,13 +72,17 @@ function BlockBindingsPanelMenuContent({ attribute, binding, sources }) {
|
|
|
72
72
|
key: item.key
|
|
73
73
|
}
|
|
74
74
|
};
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
75
|
+
let values = {};
|
|
76
|
+
try {
|
|
77
|
+
values = source.getValues({
|
|
78
|
+
select,
|
|
79
|
+
context: blockContext,
|
|
80
|
+
bindings: {
|
|
81
|
+
[attribute]: itemBindings
|
|
82
|
+
}
|
|
83
|
+
});
|
|
84
|
+
} catch (e) {
|
|
85
|
+
}
|
|
82
86
|
return /* @__PURE__ */ jsxs(
|
|
83
87
|
Menu.CheckboxItem,
|
|
84
88
|
{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/hooks/block-bindings.js"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { getBlockBindingsSources, getBlockType } from '@wordpress/blocks';\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalItem as Item,\n\t__experimentalText as Text,\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalVStack as VStack,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { useContext } from '@wordpress/element';\nimport { useViewportMatch } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { useBlockBindingsUtils } from '../utils/block-bindings';\nimport { unlock } from '../lock-unlock';\nimport InspectorControls from '../components/inspector-controls';\nimport BlockContext from '../components/block-context';\nimport { useBlockEditContext } from '../components/block-edit';\nimport { store as blockEditorStore } from '../store';\n\nconst { Menu } = unlock( componentsPrivateApis );\n\nconst EMPTY_OBJECT = {};\n\n/**\n * Get the normalized attribute type for block bindings.\n * Converts 'rich-text' to 'string' since rich-text is stored as string.\n *\n * @param {string} blockName The block name.\n * @param {string} attribute The attribute name.\n * @return {string} The normalized attribute type.\n */\nconst getAttributeType = ( blockName, attribute ) => {\n\tconst _attributeType =\n\t\tgetBlockType( blockName ).attributes?.[ attribute ]?.type;\n\treturn _attributeType === 'rich-text' ? 'string' : _attributeType;\n};\n\nconst useToolsPanelDropdownMenuProps = () => {\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\treturn ! isMobile\n\t\t? {\n\t\t\t\tpopoverProps: {\n\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\t// For non-mobile, inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)\n\t\t\t\t\toffset: 259,\n\t\t\t\t},\n\t\t }\n\t\t: {};\n};\n\nfunction BlockBindingsPanelMenuContent( { attribute, binding, sources } ) {\n\tconst { clientId } = useBlockEditContext();\n\tconst { updateBlockBindings } = useBlockBindingsUtils();\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\tconst blockContext = useContext( BlockContext );\n\tconst { attributeType, select } = useSelect(\n\t\t( _select ) => {\n\t\t\tconst { name: blockName } =\n\t\t\t\t_select( blockEditorStore ).getBlock( clientId );\n\t\t\treturn {\n\t\t\t\tattributeType: getAttributeType( blockName, attribute ),\n\t\t\t\tselect: _select,\n\t\t\t};\n\t\t},\n\t\t[ clientId, attribute ]\n\t);\n\treturn (\n\t\t<Menu placement={ isMobile ? 'bottom-start' : 'left-start' }>\n\t\t\t{ Object.entries( sources ).map( ( [ sourceKey, source ] ) => {\n\t\t\t\t// Only show sources that have compatible data for this specific attribute.\n\t\t\t\tconst sourceDataItems = source.data?.filter(\n\t\t\t\t\t( item ) => item?.type === attributeType\n\t\t\t\t);\n\n\t\t\t\tconst noItemsAvailable =\n\t\t\t\t\t! sourceDataItems || sourceDataItems.length === 0;\n\n\t\t\t\tif ( noItemsAvailable ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\treturn (\n\t\t\t\t\t<Menu\n\t\t\t\t\t\tkey={ sourceKey }\n\t\t\t\t\t\tplacement={ isMobile ? 'bottom-start' : 'left-start' }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Menu.SubmenuTriggerItem>\n\t\t\t\t\t\t\t<Menu.ItemLabel>{ source.label }</Menu.ItemLabel>\n\t\t\t\t\t\t</Menu.SubmenuTriggerItem>\n\t\t\t\t\t\t<Menu.Popover gutter={ 8 }>\n\t\t\t\t\t\t\t<Menu.Group>\n\t\t\t\t\t\t\t\t{ sourceDataItems.map( ( item ) => {\n\t\t\t\t\t\t\t\t\tconst itemBindings = {\n\t\t\t\t\t\t\t\t\t\tsource: sourceKey,\n\t\t\t\t\t\t\t\t\t\targs: item?.args || {\n\t\t\t\t\t\t\t\t\t\t\tkey: item.key,\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\tconst values = source.getValues( {\n\t\t\t\t\t\t\t\t\t\tselect,\n\t\t\t\t\t\t\t\t\t\tcontext: blockContext,\n\t\t\t\t\t\t\t\t\t\tbindings: {\n\t\t\t\t\t\t\t\t\t\t\t[ attribute ]: itemBindings,\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<Menu.CheckboxItem\n\t\t\t\t\t\t\t\t\t\t\tkey={\n\t\t\t\t\t\t\t\t\t\t\t\tsourceKey +\n\t\t\t\t\t\t\t\t\t\t\t\t\tJSON.stringify(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\titem.args\n\t\t\t\t\t\t\t\t\t\t\t\t\t) || item.key\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tonChange={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\tconst isCurrentlySelected =\n\t\t\t\t\t\t\t\t\t\t\t\t\tfastDeepEqual(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tbinding?.args,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\titem.args\n\t\t\t\t\t\t\t\t\t\t\t\t\t) ??\n\t\t\t\t\t\t\t\t\t\t\t\t\t// Deprecate key dependency in 7.0.\n\t\t\t\t\t\t\t\t\t\t\t\t\titem.key ===\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tbinding?.args?.key;\n\n\t\t\t\t\t\t\t\t\t\t\t\tif ( isCurrentlySelected ) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// Unset if the same item is selected again.\n\t\t\t\t\t\t\t\t\t\t\t\t\tupdateBlockBindings( {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t[ attribute ]:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tundefined,\n\t\t\t\t\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\tupdateBlockBindings( {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t[ attribute ]:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titemBindings,\n\t\t\t\t\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\tname={ attribute + '-binding' }\n\t\t\t\t\t\t\t\t\t\t\tvalue={ values[ attribute ] }\n\t\t\t\t\t\t\t\t\t\t\tchecked={\n\t\t\t\t\t\t\t\t\t\t\t\tfastDeepEqual(\n\t\t\t\t\t\t\t\t\t\t\t\t\tbinding?.args,\n\t\t\t\t\t\t\t\t\t\t\t\t\titem.args\n\t\t\t\t\t\t\t\t\t\t\t\t) ??\n\t\t\t\t\t\t\t\t\t\t\t\t// Deprecate key dependency in 7.0.\n\t\t\t\t\t\t\t\t\t\t\t\titem.key === binding?.args?.key\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<Menu.ItemLabel>\n\t\t\t\t\t\t\t\t\t\t\t\t{ item?.label }\n\t\t\t\t\t\t\t\t\t\t\t</Menu.ItemLabel>\n\t\t\t\t\t\t\t\t\t\t\t<Menu.ItemHelpText>\n\t\t\t\t\t\t\t\t\t\t\t\t{ values[ attribute ] }\n\t\t\t\t\t\t\t\t\t\t\t</Menu.ItemHelpText>\n\t\t\t\t\t\t\t\t\t\t</Menu.CheckboxItem>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t</Menu.Group>\n\t\t\t\t\t\t</Menu.Popover>\n\t\t\t\t\t</Menu>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</Menu>\n\t);\n}\n\nfunction BlockBindingsAttribute( { attribute, binding, sources, blockName } ) {\n\tconst { source: sourceName, args } = binding || {};\n\tconst source = sources?.[ sourceName ];\n\n\tlet displayText;\n\tlet isValid = true;\n\tconst isNotBound = binding === undefined;\n\n\tif ( isNotBound ) {\n\t\t// Check if there are any compatible sources for this attribute type.\n\t\tconst attributeType = getAttributeType( blockName, attribute );\n\n\t\tconst hasCompatibleSources = Object.values( sources ).some( ( src ) =>\n\t\t\tsrc.data?.some( ( item ) => item?.type === attributeType )\n\t\t);\n\n\t\tif ( ! hasCompatibleSources ) {\n\t\t\tdisplayText = __( 'No sources available' );\n\t\t} else {\n\t\t\tdisplayText = __( 'Not connected' );\n\t\t}\n\t\tisValid = true;\n\t} else if ( ! source ) {\n\t\t// If there's a binding but the source is not found, it's invalid.\n\t\tisValid = false;\n\t\tdisplayText = __( 'Source not registered' );\n\t\tif ( Object.keys( sources ).length === 0 ) {\n\t\t\tdisplayText = __( 'No sources available' );\n\t\t}\n\t} else {\n\t\tdisplayText =\n\t\t\tsource.data?.find( ( item ) => fastDeepEqual( item.args, args ) )\n\t\t\t\t?.label ||\n\t\t\tsource.label ||\n\t\t\tsourceName;\n\t}\n\n\treturn (\n\t\t<VStack className=\"block-editor-bindings__item\" spacing={ 0 }>\n\t\t\t<Text truncate>{ attribute }</Text>\n\t\t\t<Text\n\t\t\t\ttruncate\n\t\t\t\tvariant={ isValid ? 'muted' : undefined }\n\t\t\t\tisDestructive={ ! isValid }\n\t\t\t>\n\t\t\t\t{ displayText }\n\t\t\t</Text>\n\t\t</VStack>\n\t);\n}\n\nfunction ReadOnlyBlockBindingsPanelItem( {\n\tattribute,\n\tbinding,\n\tsources,\n\tblockName,\n} ) {\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\n\treturn (\n\t\t<ToolsPanelItem hasValue={ () => !! binding } label={ attribute }>\n\t\t\t<Menu placement={ isMobile ? 'bottom-start' : 'left-start' }>\n\t\t\t\t<Menu.TriggerButton render={ <Item /> } disabled>\n\t\t\t\t\t<BlockBindingsAttribute\n\t\t\t\t\t\tattribute={ attribute }\n\t\t\t\t\t\tbinding={ binding }\n\t\t\t\t\t\tsources={ sources }\n\t\t\t\t\t\tblockName={ blockName }\n\t\t\t\t\t/>\n\t\t\t\t</Menu.TriggerButton>\n\t\t\t</Menu>\n\t\t</ToolsPanelItem>\n\t);\n}\n\nfunction EditableBlockBindingsPanelItem( {\n\tattribute,\n\tbinding,\n\tsources,\n\tblockName,\n} ) {\n\tconst { updateBlockBindings } = useBlockBindingsUtils();\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\thasValue={ () => !! binding }\n\t\t\tlabel={ attribute }\n\t\t\tonDeselect={ () => {\n\t\t\t\tupdateBlockBindings( {\n\t\t\t\t\t[ attribute ]: undefined,\n\t\t\t\t} );\n\t\t\t} }\n\t\t>\n\t\t\t<Menu placement={ isMobile ? 'bottom-start' : 'left-start' }>\n\t\t\t\t<Menu.TriggerButton render={ <Item /> }>\n\t\t\t\t\t<BlockBindingsAttribute\n\t\t\t\t\t\tattribute={ attribute }\n\t\t\t\t\t\tbinding={ binding }\n\t\t\t\t\t\tsources={ sources }\n\t\t\t\t\t\tblockName={ blockName }\n\t\t\t\t\t/>\n\t\t\t\t</Menu.TriggerButton>\n\t\t\t\t<Menu.Popover gutter={ isMobile ? 8 : 36 }>\n\t\t\t\t\t<BlockBindingsPanelMenuContent\n\t\t\t\t\t\tattribute={ attribute }\n\t\t\t\t\t\tbinding={ binding }\n\t\t\t\t\t\tsources={ sources }\n\t\t\t\t\t/>\n\t\t\t\t</Menu.Popover>\n\t\t\t</Menu>\n\t\t</ToolsPanelItem>\n\t);\n}\n\nexport const BlockBindingsPanel = ( { name: blockName, metadata } ) => {\n\tconst blockContext = useContext( BlockContext );\n\tconst { removeAllBlockBindings } = useBlockBindingsUtils();\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\n\t// Use useSelect to ensure sources are updated whenever there are updates in block context\n\t// or when underlying data changes.\n\t// Still needs a fix regarding _sources scope.\n\tconst _sources = {};\n\tconst { sources, canUpdateBlockBindings, bindableAttributes } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { __experimentalBlockBindingsSupportedAttributes } =\n\t\t\t\tselect( blockEditorStore ).getSettings();\n\t\t\tconst _bindableAttributes =\n\t\t\t\t__experimentalBlockBindingsSupportedAttributes?.[ blockName ];\n\t\t\tif ( ! _bindableAttributes || _bindableAttributes.length === 0 ) {\n\t\t\t\treturn EMPTY_OBJECT;\n\t\t\t}\n\n\t\t\tconst registeredSources = getBlockBindingsSources();\n\t\t\tObject.entries( registeredSources ).forEach(\n\t\t\t\t( [\n\t\t\t\t\tsourceName,\n\t\t\t\t\t{ getFieldsList, usesContext, label, getValues },\n\t\t\t\t] ) => {\n\t\t\t\t\t// Populate context.\n\t\t\t\t\tconst context = {};\n\t\t\t\t\tif ( usesContext?.length ) {\n\t\t\t\t\t\tfor ( const key of usesContext ) {\n\t\t\t\t\t\t\tcontext[ key ] = blockContext[ key ];\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tif ( getFieldsList ) {\n\t\t\t\t\t\tconst fieldsListResult = getFieldsList( {\n\t\t\t\t\t\t\tselect,\n\t\t\t\t\t\t\tcontext,\n\t\t\t\t\t\t} );\n\t\t\t\t\t\t_sources[ sourceName ] = {\n\t\t\t\t\t\t\tdata: fieldsListResult || [],\n\t\t\t\t\t\t\tlabel,\n\t\t\t\t\t\t\tgetValues,\n\t\t\t\t\t\t};\n\t\t\t\t\t} else {\n\t\t\t\t\t\t/*\n\t\t\t\t\t\t * Include sources without getFieldsList if they are already used in a binding.\n\t\t\t\t\t\t * This allows them to be displayed in read-only mode.\n\t\t\t\t\t\t */\n\t\t\t\t\t\t_sources[ sourceName ] = {\n\t\t\t\t\t\t\tdata: [],\n\t\t\t\t\t\t\tlabel,\n\t\t\t\t\t\t\tgetValues,\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\tsources:\n\t\t\t\t\tObject.values( _sources ).length > 0\n\t\t\t\t\t\t? _sources\n\t\t\t\t\t\t: EMPTY_OBJECT,\n\t\t\t\tcanUpdateBlockBindings:\n\t\t\t\t\tselect( blockEditorStore ).getSettings()\n\t\t\t\t\t\t.canUpdateBlockBindings,\n\t\t\t\tbindableAttributes: _bindableAttributes,\n\t\t\t};\n\t\t},\n\t\t[ blockContext, blockName ]\n\t);\n\t// Return early if there are no bindable attributes.\n\tif ( ! bindableAttributes || bindableAttributes.length === 0 ) {\n\t\treturn null;\n\t}\n\n\tconst { bindings } = metadata || {};\n\n\t// Check if all sources have empty data arrays.\n\tconst hasCompatibleData = Object.values( sources ).some(\n\t\t( source ) => source.data && source.data.length > 0\n\t);\n\n\t// Lock the UI when the user can't update bindings or there are no fields to connect to.\n\tconst readOnly = ! canUpdateBlockBindings || ! hasCompatibleData;\n\n\tif ( bindings === undefined && ! hasCompatibleData ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<InspectorControls group=\"bindings\">\n\t\t\t<ToolsPanel\n\t\t\t\tlabel={ __( 'Attributes' ) }\n\t\t\t\tresetAll={ () => {\n\t\t\t\t\tremoveAllBlockBindings();\n\t\t\t\t} }\n\t\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t\t\tclassName=\"block-editor-bindings__panel\"\n\t\t\t>\n\t\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t\t{ bindableAttributes.map( ( attribute ) => {\n\t\t\t\t\t\tconst binding = bindings?.[ attribute ];\n\n\t\t\t\t\t\t// Check if this specific attribute has compatible data from any source.\n\t\t\t\t\t\tconst attributeType = getAttributeType(\n\t\t\t\t\t\t\tblockName,\n\t\t\t\t\t\t\tattribute\n\t\t\t\t\t\t);\n\n\t\t\t\t\t\tconst hasCompatibleDataForAttribute = Object.values(\n\t\t\t\t\t\t\tsources\n\t\t\t\t\t\t).some( ( source ) =>\n\t\t\t\t\t\t\tsource.data?.some(\n\t\t\t\t\t\t\t\t( item ) => item?.type === attributeType\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t);\n\n\t\t\t\t\t\tconst isAttributeReadOnly =\n\t\t\t\t\t\t\treadOnly || ! hasCompatibleDataForAttribute;\n\n\t\t\t\t\t\treturn isAttributeReadOnly ? (\n\t\t\t\t\t\t\t<ReadOnlyBlockBindingsPanelItem\n\t\t\t\t\t\t\t\tkey={ attribute }\n\t\t\t\t\t\t\t\tattribute={ attribute }\n\t\t\t\t\t\t\t\tbinding={ binding }\n\t\t\t\t\t\t\t\tsources={ sources }\n\t\t\t\t\t\t\t\tblockName={ blockName }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<EditableBlockBindingsPanelItem\n\t\t\t\t\t\t\t\tkey={ attribute }\n\t\t\t\t\t\t\t\tattribute={ attribute }\n\t\t\t\t\t\t\t\tbinding={ binding }\n\t\t\t\t\t\t\t\tsources={ sources }\n\t\t\t\t\t\t\t\tblockName={ blockName }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</ItemGroup>\n\t\t\t\t{ /*\n\t\t\t\t\tUse a div element to make the ToolsPanelHiddenInnerWrapper\n\t\t\t\t\ttoggle the visibility of this help text automatically.\n\t\t\t\t*/ }\n\t\t\t\t<Text as=\"div\" variant=\"muted\">\n\t\t\t\t\t<p>\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'Attributes connected to custom fields or other dynamic data.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</p>\n\t\t\t\t</Text>\n\t\t\t</ToolsPanel>\n\t\t</InspectorControls>\n\t);\n};\n\nexport default {\n\tedit: BlockBindingsPanel,\n\tattributeKeys: [ 'metadata' ],\n\thasSupport( name ) {\n\t\treturn ! [\n\t\t\t'core/post-date',\n\t\t\t'core/navigation-link',\n\t\t\t'core/navigation-submenu',\n\t\t].includes( name );\n\t},\n};\n"],
|
|
5
|
-
"mappings": "AAqGO,
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { getBlockBindingsSources, getBlockType } from '@wordpress/blocks';\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalItem as Item,\n\t__experimentalText as Text,\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalVStack as VStack,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { useContext } from '@wordpress/element';\nimport { useViewportMatch } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { useBlockBindingsUtils } from '../utils/block-bindings';\nimport { unlock } from '../lock-unlock';\nimport InspectorControls from '../components/inspector-controls';\nimport BlockContext from '../components/block-context';\nimport { useBlockEditContext } from '../components/block-edit';\nimport { store as blockEditorStore } from '../store';\n\nconst { Menu } = unlock( componentsPrivateApis );\n\nconst EMPTY_OBJECT = {};\n\n/**\n * Get the normalized attribute type for block bindings.\n * Converts 'rich-text' to 'string' since rich-text is stored as string.\n *\n * @param {string} blockName The block name.\n * @param {string} attribute The attribute name.\n * @return {string} The normalized attribute type.\n */\nconst getAttributeType = ( blockName, attribute ) => {\n\tconst _attributeType =\n\t\tgetBlockType( blockName ).attributes?.[ attribute ]?.type;\n\treturn _attributeType === 'rich-text' ? 'string' : _attributeType;\n};\n\nconst useToolsPanelDropdownMenuProps = () => {\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\treturn ! isMobile\n\t\t? {\n\t\t\t\tpopoverProps: {\n\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\t// For non-mobile, inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)\n\t\t\t\t\toffset: 259,\n\t\t\t\t},\n\t\t }\n\t\t: {};\n};\n\nfunction BlockBindingsPanelMenuContent( { attribute, binding, sources } ) {\n\tconst { clientId } = useBlockEditContext();\n\tconst { updateBlockBindings } = useBlockBindingsUtils();\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\tconst blockContext = useContext( BlockContext );\n\tconst { attributeType, select } = useSelect(\n\t\t( _select ) => {\n\t\t\tconst { name: blockName } =\n\t\t\t\t_select( blockEditorStore ).getBlock( clientId );\n\t\t\treturn {\n\t\t\t\tattributeType: getAttributeType( blockName, attribute ),\n\t\t\t\tselect: _select,\n\t\t\t};\n\t\t},\n\t\t[ clientId, attribute ]\n\t);\n\treturn (\n\t\t<Menu placement={ isMobile ? 'bottom-start' : 'left-start' }>\n\t\t\t{ Object.entries( sources ).map( ( [ sourceKey, source ] ) => {\n\t\t\t\t// Only show sources that have compatible data for this specific attribute.\n\t\t\t\tconst sourceDataItems = source.data?.filter(\n\t\t\t\t\t( item ) => item?.type === attributeType\n\t\t\t\t);\n\n\t\t\t\tconst noItemsAvailable =\n\t\t\t\t\t! sourceDataItems || sourceDataItems.length === 0;\n\n\t\t\t\tif ( noItemsAvailable ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\treturn (\n\t\t\t\t\t<Menu\n\t\t\t\t\t\tkey={ sourceKey }\n\t\t\t\t\t\tplacement={ isMobile ? 'bottom-start' : 'left-start' }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Menu.SubmenuTriggerItem>\n\t\t\t\t\t\t\t<Menu.ItemLabel>{ source.label }</Menu.ItemLabel>\n\t\t\t\t\t\t</Menu.SubmenuTriggerItem>\n\t\t\t\t\t\t<Menu.Popover gutter={ 8 }>\n\t\t\t\t\t\t\t<Menu.Group>\n\t\t\t\t\t\t\t\t{ sourceDataItems.map( ( item ) => {\n\t\t\t\t\t\t\t\t\tconst itemBindings = {\n\t\t\t\t\t\t\t\t\t\tsource: sourceKey,\n\t\t\t\t\t\t\t\t\t\targs: item?.args || {\n\t\t\t\t\t\t\t\t\t\t\tkey: item.key,\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\tlet values = {};\n\t\t\t\t\t\t\t\t\ttry {\n\t\t\t\t\t\t\t\t\t\tvalues = source.getValues( {\n\t\t\t\t\t\t\t\t\t\t\tselect,\n\t\t\t\t\t\t\t\t\t\t\tcontext: blockContext,\n\t\t\t\t\t\t\t\t\t\t\tbindings: {\n\t\t\t\t\t\t\t\t\t\t\t\t[ attribute ]: itemBindings,\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\t} catch ( e ) {}\n\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<Menu.CheckboxItem\n\t\t\t\t\t\t\t\t\t\t\tkey={\n\t\t\t\t\t\t\t\t\t\t\t\tsourceKey +\n\t\t\t\t\t\t\t\t\t\t\t\t\tJSON.stringify(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\titem.args\n\t\t\t\t\t\t\t\t\t\t\t\t\t) || item.key\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tonChange={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\tconst isCurrentlySelected =\n\t\t\t\t\t\t\t\t\t\t\t\t\tfastDeepEqual(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tbinding?.args,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\titem.args\n\t\t\t\t\t\t\t\t\t\t\t\t\t) ??\n\t\t\t\t\t\t\t\t\t\t\t\t\t// Deprecate key dependency in 7.0.\n\t\t\t\t\t\t\t\t\t\t\t\t\titem.key ===\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tbinding?.args?.key;\n\n\t\t\t\t\t\t\t\t\t\t\t\tif ( isCurrentlySelected ) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// Unset if the same item is selected again.\n\t\t\t\t\t\t\t\t\t\t\t\t\tupdateBlockBindings( {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t[ attribute ]:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tundefined,\n\t\t\t\t\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\tupdateBlockBindings( {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t[ attribute ]:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titemBindings,\n\t\t\t\t\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\tname={ attribute + '-binding' }\n\t\t\t\t\t\t\t\t\t\t\tvalue={ values[ attribute ] }\n\t\t\t\t\t\t\t\t\t\t\tchecked={\n\t\t\t\t\t\t\t\t\t\t\t\tfastDeepEqual(\n\t\t\t\t\t\t\t\t\t\t\t\t\tbinding?.args,\n\t\t\t\t\t\t\t\t\t\t\t\t\titem.args\n\t\t\t\t\t\t\t\t\t\t\t\t) ??\n\t\t\t\t\t\t\t\t\t\t\t\t// Deprecate key dependency in 7.0.\n\t\t\t\t\t\t\t\t\t\t\t\titem.key === binding?.args?.key\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<Menu.ItemLabel>\n\t\t\t\t\t\t\t\t\t\t\t\t{ item?.label }\n\t\t\t\t\t\t\t\t\t\t\t</Menu.ItemLabel>\n\t\t\t\t\t\t\t\t\t\t\t<Menu.ItemHelpText>\n\t\t\t\t\t\t\t\t\t\t\t\t{ values[ attribute ] }\n\t\t\t\t\t\t\t\t\t\t\t</Menu.ItemHelpText>\n\t\t\t\t\t\t\t\t\t\t</Menu.CheckboxItem>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t</Menu.Group>\n\t\t\t\t\t\t</Menu.Popover>\n\t\t\t\t\t</Menu>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</Menu>\n\t);\n}\n\nfunction BlockBindingsAttribute( { attribute, binding, sources, blockName } ) {\n\tconst { source: sourceName, args } = binding || {};\n\tconst source = sources?.[ sourceName ];\n\n\tlet displayText;\n\tlet isValid = true;\n\tconst isNotBound = binding === undefined;\n\n\tif ( isNotBound ) {\n\t\t// Check if there are any compatible sources for this attribute type.\n\t\tconst attributeType = getAttributeType( blockName, attribute );\n\n\t\tconst hasCompatibleSources = Object.values( sources ).some( ( src ) =>\n\t\t\tsrc.data?.some( ( item ) => item?.type === attributeType )\n\t\t);\n\n\t\tif ( ! hasCompatibleSources ) {\n\t\t\tdisplayText = __( 'No sources available' );\n\t\t} else {\n\t\t\tdisplayText = __( 'Not connected' );\n\t\t}\n\t\tisValid = true;\n\t} else if ( ! source ) {\n\t\t// If there's a binding but the source is not found, it's invalid.\n\t\tisValid = false;\n\t\tdisplayText = __( 'Source not registered' );\n\t\tif ( Object.keys( sources ).length === 0 ) {\n\t\t\tdisplayText = __( 'No sources available' );\n\t\t}\n\t} else {\n\t\tdisplayText =\n\t\t\tsource.data?.find( ( item ) => fastDeepEqual( item.args, args ) )\n\t\t\t\t?.label ||\n\t\t\tsource.label ||\n\t\t\tsourceName;\n\t}\n\n\treturn (\n\t\t<VStack className=\"block-editor-bindings__item\" spacing={ 0 }>\n\t\t\t<Text truncate>{ attribute }</Text>\n\t\t\t<Text\n\t\t\t\ttruncate\n\t\t\t\tvariant={ isValid ? 'muted' : undefined }\n\t\t\t\tisDestructive={ ! isValid }\n\t\t\t>\n\t\t\t\t{ displayText }\n\t\t\t</Text>\n\t\t</VStack>\n\t);\n}\n\nfunction ReadOnlyBlockBindingsPanelItem( {\n\tattribute,\n\tbinding,\n\tsources,\n\tblockName,\n} ) {\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\n\treturn (\n\t\t<ToolsPanelItem hasValue={ () => !! binding } label={ attribute }>\n\t\t\t<Menu placement={ isMobile ? 'bottom-start' : 'left-start' }>\n\t\t\t\t<Menu.TriggerButton render={ <Item /> } disabled>\n\t\t\t\t\t<BlockBindingsAttribute\n\t\t\t\t\t\tattribute={ attribute }\n\t\t\t\t\t\tbinding={ binding }\n\t\t\t\t\t\tsources={ sources }\n\t\t\t\t\t\tblockName={ blockName }\n\t\t\t\t\t/>\n\t\t\t\t</Menu.TriggerButton>\n\t\t\t</Menu>\n\t\t</ToolsPanelItem>\n\t);\n}\n\nfunction EditableBlockBindingsPanelItem( {\n\tattribute,\n\tbinding,\n\tsources,\n\tblockName,\n} ) {\n\tconst { updateBlockBindings } = useBlockBindingsUtils();\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\thasValue={ () => !! binding }\n\t\t\tlabel={ attribute }\n\t\t\tonDeselect={ () => {\n\t\t\t\tupdateBlockBindings( {\n\t\t\t\t\t[ attribute ]: undefined,\n\t\t\t\t} );\n\t\t\t} }\n\t\t>\n\t\t\t<Menu placement={ isMobile ? 'bottom-start' : 'left-start' }>\n\t\t\t\t<Menu.TriggerButton render={ <Item /> }>\n\t\t\t\t\t<BlockBindingsAttribute\n\t\t\t\t\t\tattribute={ attribute }\n\t\t\t\t\t\tbinding={ binding }\n\t\t\t\t\t\tsources={ sources }\n\t\t\t\t\t\tblockName={ blockName }\n\t\t\t\t\t/>\n\t\t\t\t</Menu.TriggerButton>\n\t\t\t\t<Menu.Popover gutter={ isMobile ? 8 : 36 }>\n\t\t\t\t\t<BlockBindingsPanelMenuContent\n\t\t\t\t\t\tattribute={ attribute }\n\t\t\t\t\t\tbinding={ binding }\n\t\t\t\t\t\tsources={ sources }\n\t\t\t\t\t/>\n\t\t\t\t</Menu.Popover>\n\t\t\t</Menu>\n\t\t</ToolsPanelItem>\n\t);\n}\n\nexport const BlockBindingsPanel = ( { name: blockName, metadata } ) => {\n\tconst blockContext = useContext( BlockContext );\n\tconst { removeAllBlockBindings } = useBlockBindingsUtils();\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\n\t// Use useSelect to ensure sources are updated whenever there are updates in block context\n\t// or when underlying data changes.\n\t// Still needs a fix regarding _sources scope.\n\tconst _sources = {};\n\tconst { sources, canUpdateBlockBindings, bindableAttributes } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { __experimentalBlockBindingsSupportedAttributes } =\n\t\t\t\tselect( blockEditorStore ).getSettings();\n\t\t\tconst _bindableAttributes =\n\t\t\t\t__experimentalBlockBindingsSupportedAttributes?.[ blockName ];\n\t\t\tif ( ! _bindableAttributes || _bindableAttributes.length === 0 ) {\n\t\t\t\treturn EMPTY_OBJECT;\n\t\t\t}\n\n\t\t\tconst registeredSources = getBlockBindingsSources();\n\t\t\tObject.entries( registeredSources ).forEach(\n\t\t\t\t( [\n\t\t\t\t\tsourceName,\n\t\t\t\t\t{ getFieldsList, usesContext, label, getValues },\n\t\t\t\t] ) => {\n\t\t\t\t\t// Populate context.\n\t\t\t\t\tconst context = {};\n\t\t\t\t\tif ( usesContext?.length ) {\n\t\t\t\t\t\tfor ( const key of usesContext ) {\n\t\t\t\t\t\t\tcontext[ key ] = blockContext[ key ];\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tif ( getFieldsList ) {\n\t\t\t\t\t\tconst fieldsListResult = getFieldsList( {\n\t\t\t\t\t\t\tselect,\n\t\t\t\t\t\t\tcontext,\n\t\t\t\t\t\t} );\n\t\t\t\t\t\t_sources[ sourceName ] = {\n\t\t\t\t\t\t\tdata: fieldsListResult || [],\n\t\t\t\t\t\t\tlabel,\n\t\t\t\t\t\t\tgetValues,\n\t\t\t\t\t\t};\n\t\t\t\t\t} else {\n\t\t\t\t\t\t/*\n\t\t\t\t\t\t * Include sources without getFieldsList if they are already used in a binding.\n\t\t\t\t\t\t * This allows them to be displayed in read-only mode.\n\t\t\t\t\t\t */\n\t\t\t\t\t\t_sources[ sourceName ] = {\n\t\t\t\t\t\t\tdata: [],\n\t\t\t\t\t\t\tlabel,\n\t\t\t\t\t\t\tgetValues,\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\tsources:\n\t\t\t\t\tObject.values( _sources ).length > 0\n\t\t\t\t\t\t? _sources\n\t\t\t\t\t\t: EMPTY_OBJECT,\n\t\t\t\tcanUpdateBlockBindings:\n\t\t\t\t\tselect( blockEditorStore ).getSettings()\n\t\t\t\t\t\t.canUpdateBlockBindings,\n\t\t\t\tbindableAttributes: _bindableAttributes,\n\t\t\t};\n\t\t},\n\t\t[ blockContext, blockName ]\n\t);\n\t// Return early if there are no bindable attributes.\n\tif ( ! bindableAttributes || bindableAttributes.length === 0 ) {\n\t\treturn null;\n\t}\n\n\tconst { bindings } = metadata || {};\n\n\t// Check if all sources have empty data arrays.\n\tconst hasCompatibleData = Object.values( sources ).some(\n\t\t( source ) => source.data && source.data.length > 0\n\t);\n\n\t// Lock the UI when the user can't update bindings or there are no fields to connect to.\n\tconst readOnly = ! canUpdateBlockBindings || ! hasCompatibleData;\n\n\tif ( bindings === undefined && ! hasCompatibleData ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<InspectorControls group=\"bindings\">\n\t\t\t<ToolsPanel\n\t\t\t\tlabel={ __( 'Attributes' ) }\n\t\t\t\tresetAll={ () => {\n\t\t\t\t\tremoveAllBlockBindings();\n\t\t\t\t} }\n\t\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t\t\tclassName=\"block-editor-bindings__panel\"\n\t\t\t>\n\t\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t\t{ bindableAttributes.map( ( attribute ) => {\n\t\t\t\t\t\tconst binding = bindings?.[ attribute ];\n\n\t\t\t\t\t\t// Check if this specific attribute has compatible data from any source.\n\t\t\t\t\t\tconst attributeType = getAttributeType(\n\t\t\t\t\t\t\tblockName,\n\t\t\t\t\t\t\tattribute\n\t\t\t\t\t\t);\n\n\t\t\t\t\t\tconst hasCompatibleDataForAttribute = Object.values(\n\t\t\t\t\t\t\tsources\n\t\t\t\t\t\t).some( ( source ) =>\n\t\t\t\t\t\t\tsource.data?.some(\n\t\t\t\t\t\t\t\t( item ) => item?.type === attributeType\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t);\n\n\t\t\t\t\t\tconst isAttributeReadOnly =\n\t\t\t\t\t\t\treadOnly || ! hasCompatibleDataForAttribute;\n\n\t\t\t\t\t\treturn isAttributeReadOnly ? (\n\t\t\t\t\t\t\t<ReadOnlyBlockBindingsPanelItem\n\t\t\t\t\t\t\t\tkey={ attribute }\n\t\t\t\t\t\t\t\tattribute={ attribute }\n\t\t\t\t\t\t\t\tbinding={ binding }\n\t\t\t\t\t\t\t\tsources={ sources }\n\t\t\t\t\t\t\t\tblockName={ blockName }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<EditableBlockBindingsPanelItem\n\t\t\t\t\t\t\t\tkey={ attribute }\n\t\t\t\t\t\t\t\tattribute={ attribute }\n\t\t\t\t\t\t\t\tbinding={ binding }\n\t\t\t\t\t\t\t\tsources={ sources }\n\t\t\t\t\t\t\t\tblockName={ blockName }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</ItemGroup>\n\t\t\t\t{ /*\n\t\t\t\t\tUse a div element to make the ToolsPanelHiddenInnerWrapper\n\t\t\t\t\ttoggle the visibility of this help text automatically.\n\t\t\t\t*/ }\n\t\t\t\t<Text as=\"div\" variant=\"muted\">\n\t\t\t\t\t<p>\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'Attributes connected to custom fields or other dynamic data.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</p>\n\t\t\t\t</Text>\n\t\t\t</ToolsPanel>\n\t\t</InspectorControls>\n\t);\n};\n\nexport default {\n\tedit: BlockBindingsPanel,\n\tattributeKeys: [ 'metadata' ],\n\thasSupport( name ) {\n\t\treturn ! [\n\t\t\t'core/post-date',\n\t\t\t'core/navigation-link',\n\t\t\t'core/navigation-submenu',\n\t\t].includes( name );\n\t},\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -3,10 +3,17 @@ function findOptimalFontSize(textElement, applyFontSize) {
|
|
|
3
3
|
let minSize = 5;
|
|
4
4
|
let maxSize = 2400;
|
|
5
5
|
let bestSize = minSize;
|
|
6
|
+
const computedStyle = window.getComputedStyle(textElement);
|
|
7
|
+
const paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;
|
|
8
|
+
const paddingRight = parseFloat(computedStyle.paddingRight) || 0;
|
|
9
|
+
const range = document.createRange();
|
|
10
|
+
range.selectNodeContents(textElement);
|
|
6
11
|
while (minSize <= maxSize) {
|
|
7
12
|
const midSize = Math.floor((minSize + maxSize) / 2);
|
|
8
13
|
applyFontSize(midSize);
|
|
9
|
-
const
|
|
14
|
+
const rect = range.getBoundingClientRect();
|
|
15
|
+
const textWidth = rect.width;
|
|
16
|
+
const fitsWidth = textElement.scrollWidth <= textElement.clientWidth && textWidth <= textElement.clientWidth - paddingLeft - paddingRight;
|
|
10
17
|
const fitsHeight = alreadyHasScrollableHeight || textElement.scrollHeight <= textElement.clientHeight;
|
|
11
18
|
if (fitsWidth && fitsHeight) {
|
|
12
19
|
bestSize = midSize;
|
|
@@ -15,6 +22,7 @@ function findOptimalFontSize(textElement, applyFontSize) {
|
|
|
15
22
|
maxSize = midSize - 1;
|
|
16
23
|
}
|
|
17
24
|
}
|
|
25
|
+
range.detach();
|
|
18
26
|
return bestSize;
|
|
19
27
|
}
|
|
20
28
|
function optimizeFitText(textElement, applyFontSize) {
|
|
@@ -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 * Find optimal font size using simple binary search between 5-600px.\n *\n * @param {HTMLElement} textElement The text element\n * @param {Function} applyFontSize Function that receives font size in pixels\n * @return {number} Optimal font size\n */\nfunction findOptimalFontSize( textElement, applyFontSize ) {\n\tconst alreadyHasScrollableHeight =\n\t\ttextElement.scrollHeight > textElement.clientHeight;\n\tlet minSize = 5;\n\tlet maxSize = 2400;\n\tlet bestSize = minSize;\n\n\twhile ( minSize <= maxSize ) {\n\t\tconst midSize = Math.floor( ( minSize + maxSize ) / 2 );\n\t\tapplyFontSize( midSize );\n\n\t\tconst
|
|
5
|
-
"mappings": "AAYA,SAAS,oBAAqB,aAAa,eAAgB;AAC1D,QAAM,6BACL,YAAY,eAAe,YAAY;AACxC,MAAI,UAAU;AACd,MAAI,UAAU;AACd,MAAI,WAAW;AAEf,SAAQ,WAAW,SAAU;AAC5B,UAAM,UAAU,KAAK,OAAS,UAAU,WAAY,CAAE;AACtD,kBAAe,OAAQ;
|
|
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 * Find optimal font size using simple binary search between 5-600px.\n *\n * @param {HTMLElement} textElement The text element\n * @param {Function} applyFontSize Function that receives font size in pixels\n * @return {number} Optimal font size\n */\nfunction findOptimalFontSize( textElement, applyFontSize ) {\n\tconst alreadyHasScrollableHeight =\n\t\ttextElement.scrollHeight > textElement.clientHeight;\n\tlet minSize = 5;\n\tlet maxSize = 2400;\n\tlet bestSize = minSize;\n\n\tconst computedStyle = window.getComputedStyle( textElement );\n\tconst paddingLeft = parseFloat( computedStyle.paddingLeft ) || 0;\n\tconst paddingRight = parseFloat( computedStyle.paddingRight ) || 0;\n\tconst range = document.createRange();\n\trange.selectNodeContents( textElement );\n\n\twhile ( minSize <= maxSize ) {\n\t\tconst midSize = Math.floor( ( minSize + maxSize ) / 2 );\n\t\tapplyFontSize( midSize );\n\n\t\t// When there is padding if the text overflows to the\n\t\t// padding area, it should be considered overflowing.\n\t\t// Use Range API to measure actual text content dimensions.\n\t\tconst rect = range.getBoundingClientRect();\n\t\tconst textWidth = rect.width;\n\n\t\t// Check if text fits within the element's width and is not\n\t\t// overflowing into the padding area.\n\t\tconst fitsWidth =\n\t\t\ttextElement.scrollWidth <= textElement.clientWidth &&\n\t\t\ttextWidth <= textElement.clientWidth - paddingLeft - paddingRight;\n\t\t// Check if text fits within the element's height.\n\t\tconst fitsHeight =\n\t\t\talreadyHasScrollableHeight ||\n\t\t\ttextElement.scrollHeight <= textElement.clientHeight;\n\n\t\tif ( fitsWidth && fitsHeight ) {\n\t\t\tbestSize = midSize;\n\t\t\tminSize = midSize + 1;\n\t\t} else {\n\t\t\tmaxSize = midSize - 1;\n\t\t}\n\t}\n\trange.detach();\n\n\treturn bestSize;\n}\n\n/**\n * Complete fit text optimization for a single text element.\n * Handles the full flow using callbacks for font size application.\n *\n * @param {HTMLElement} textElement The text element (paragraph, heading, etc.)\n * @param {Function} applyFontSize Function that receives font size in pixels (0 to clear, >0 to apply)\n */\nexport function optimizeFitText( textElement, applyFontSize ) {\n\tif ( ! textElement ) {\n\t\treturn;\n\t}\n\n\tapplyFontSize( 0 );\n\n\tconst optimalSize = findOptimalFontSize( textElement, applyFontSize );\n\n\tapplyFontSize( optimalSize );\n\treturn optimalSize;\n}\n"],
|
|
5
|
+
"mappings": "AAYA,SAAS,oBAAqB,aAAa,eAAgB;AAC1D,QAAM,6BACL,YAAY,eAAe,YAAY;AACxC,MAAI,UAAU;AACd,MAAI,UAAU;AACd,MAAI,WAAW;AAEf,QAAM,gBAAgB,OAAO,iBAAkB,WAAY;AAC3D,QAAM,cAAc,WAAY,cAAc,WAAY,KAAK;AAC/D,QAAM,eAAe,WAAY,cAAc,YAAa,KAAK;AACjE,QAAM,QAAQ,SAAS,YAAY;AACnC,QAAM,mBAAoB,WAAY;AAEtC,SAAQ,WAAW,SAAU;AAC5B,UAAM,UAAU,KAAK,OAAS,UAAU,WAAY,CAAE;AACtD,kBAAe,OAAQ;AAKvB,UAAM,OAAO,MAAM,sBAAsB;AACzC,UAAM,YAAY,KAAK;AAIvB,UAAM,YACL,YAAY,eAAe,YAAY,eACvC,aAAa,YAAY,cAAc,cAAc;AAEtD,UAAM,aACL,8BACA,YAAY,gBAAgB,YAAY;AAEzC,QAAK,aAAa,YAAa;AAC9B,iBAAW;AACX,gBAAU,UAAU;AAAA,IACrB,OAAO;AACN,gBAAU,UAAU;AAAA,IACrB;AAAA,EACD;AACA,QAAM,OAAO;AAEb,SAAO;AACR;AASO,SAAS,gBAAiB,aAAa,eAAgB;AAC7D,MAAK,CAAE,aAAc;AACpB;AAAA,EACD;AAEA,gBAAe,CAAE;AAEjB,QAAM,cAAc,oBAAqB,aAAa,aAAc;AAEpE,gBAAe,WAAY;AAC3B,SAAO;AACR;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wordpress/block-editor",
|
|
3
|
-
"version": "15.6.
|
|
3
|
+
"version": "15.6.7",
|
|
4
4
|
"description": "Generic block editor.",
|
|
5
5
|
"author": "The WordPress Contributors",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -112,5 +112,5 @@
|
|
|
112
112
|
"publishConfig": {
|
|
113
113
|
"access": "public"
|
|
114
114
|
},
|
|
115
|
-
"gitHead": "
|
|
115
|
+
"gitHead": "1c473d047a0b8f529f07cc1e23324a6be723bbc9"
|
|
116
116
|
}
|
|
@@ -139,41 +139,102 @@ function VariationsToggleGroupControl( {
|
|
|
139
139
|
|
|
140
140
|
function __experimentalBlockVariationTransforms( { blockClientId } ) {
|
|
141
141
|
const { updateBlockAttributes } = useDispatch( blockEditorStore );
|
|
142
|
-
const {
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
142
|
+
const {
|
|
143
|
+
activeBlockVariation,
|
|
144
|
+
unfilteredVariations,
|
|
145
|
+
blockName,
|
|
146
|
+
isContentOnly,
|
|
147
|
+
isSection,
|
|
148
|
+
} = useSelect(
|
|
149
|
+
( select ) => {
|
|
150
|
+
const { getActiveBlockVariation, getBlockVariations } =
|
|
151
|
+
select( blocksStore );
|
|
152
|
+
|
|
153
|
+
const {
|
|
154
|
+
getBlockName,
|
|
155
|
+
getBlockAttributes,
|
|
156
|
+
getBlockEditingMode,
|
|
157
|
+
isSectionBlock,
|
|
158
|
+
} = unlock( select( blockEditorStore ) );
|
|
159
|
+
|
|
160
|
+
const name = blockClientId && getBlockName( blockClientId );
|
|
161
|
+
|
|
162
|
+
const { hasContentRoleAttribute } = unlock( select( blocksStore ) );
|
|
163
|
+
const isContentBlock = hasContentRoleAttribute( name );
|
|
164
|
+
|
|
165
|
+
return {
|
|
166
|
+
activeBlockVariation: getActiveBlockVariation(
|
|
167
|
+
name,
|
|
168
|
+
getBlockAttributes( blockClientId ),
|
|
169
|
+
'transform'
|
|
170
|
+
),
|
|
171
|
+
unfilteredVariations:
|
|
172
|
+
name && getBlockVariations( name, 'transform' ),
|
|
173
|
+
blockName: name,
|
|
174
|
+
isContentOnly:
|
|
175
|
+
getBlockEditingMode( blockClientId ) === 'contentOnly' &&
|
|
176
|
+
! isContentBlock,
|
|
177
|
+
isSection: isSectionBlock( blockClientId ),
|
|
178
|
+
};
|
|
179
|
+
},
|
|
180
|
+
[ blockClientId ]
|
|
181
|
+
);
|
|
182
|
+
|
|
183
|
+
/*
|
|
184
|
+
* Hack for WordPress 6.9
|
|
185
|
+
*
|
|
186
|
+
* The Stretchy blocks shipped in 6.9 were ultimately
|
|
187
|
+
* implemented as block variations of the base types Paragraph
|
|
188
|
+
* and Heading. See #73056 for discussion and trade-offs.
|
|
189
|
+
*
|
|
190
|
+
* The main drawback of this choice is that the Variations API
|
|
191
|
+
* doesn't offer enough control over how prominent and how tied
|
|
192
|
+
* to the base type a variation should be.
|
|
193
|
+
*
|
|
194
|
+
* In order to ship these new "blocks" with an acceptable UX,
|
|
195
|
+
* we need two hacks until the Variations API is improved:
|
|
196
|
+
*
|
|
197
|
+
* - Don't show the variations switcher in the block inspector
|
|
198
|
+
* for Paragraph, Heading, Stretchy Paragraph and Stretchy
|
|
199
|
+
* Heading (implemented below). Transformations are still
|
|
200
|
+
* available in the block switcher.
|
|
201
|
+
*
|
|
202
|
+
* - Move the stretchy variations to the end of the core blocks
|
|
203
|
+
* list in the block inserter (implemented in
|
|
204
|
+
* getInserterItems in #73056).
|
|
205
|
+
*/
|
|
206
|
+
const variations = useMemo( () => {
|
|
207
|
+
if ( blockName === 'core/paragraph' ) {
|
|
208
|
+
// Always hide options when active variation is stretchy, but
|
|
209
|
+
// ensure that there are no third-party variations before doing the
|
|
210
|
+
// same elsewhere.
|
|
211
|
+
if (
|
|
212
|
+
activeBlockVariation?.name === 'stretchy-paragraph' ||
|
|
213
|
+
unfilteredVariations.every( ( v ) =>
|
|
214
|
+
[ 'paragraph', 'stretchy-paragraph' ].includes( v.name )
|
|
215
|
+
)
|
|
216
|
+
) {
|
|
217
|
+
return [];
|
|
218
|
+
}
|
|
219
|
+
// If there are other variations, only hide the stretchy one.
|
|
220
|
+
return unfilteredVariations.filter(
|
|
221
|
+
( v ) => v.name !== 'stretchy-paragraph'
|
|
222
|
+
);
|
|
223
|
+
} else if ( blockName === 'core/heading' ) {
|
|
224
|
+
if (
|
|
225
|
+
activeBlockVariation?.name === 'stretchy-heading' ||
|
|
226
|
+
unfilteredVariations.every( ( v ) =>
|
|
227
|
+
[ 'heading', 'stretchy-heading' ].includes( v.name )
|
|
228
|
+
)
|
|
229
|
+
) {
|
|
230
|
+
return [];
|
|
231
|
+
}
|
|
232
|
+
return unfilteredVariations.filter(
|
|
233
|
+
( v ) => v.name !== 'stretchy-heading'
|
|
234
|
+
);
|
|
235
|
+
}
|
|
236
|
+
return unfilteredVariations;
|
|
237
|
+
}, [ activeBlockVariation?.name, blockName, unfilteredVariations ] );
|
|
177
238
|
|
|
178
239
|
const selectedValue = activeBlockVariation?.name;
|
|
179
240
|
|
|
@@ -74,6 +74,7 @@ export default function SingleInputControl( {
|
|
|
74
74
|
const onChangeUnit = ( next ) => {
|
|
75
75
|
const newUnits = { ...selectedUnits };
|
|
76
76
|
if ( corner === 'all' ) {
|
|
77
|
+
newUnits.flat = next;
|
|
77
78
|
newUnits.topLeft = next;
|
|
78
79
|
newUnits.topRight = next;
|
|
79
80
|
newUnits.bottomLeft = next;
|
|
@@ -110,13 +110,17 @@ function BlockBindingsPanelMenuContent( { attribute, binding, sources } ) {
|
|
|
110
110
|
key: item.key,
|
|
111
111
|
},
|
|
112
112
|
};
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
113
|
+
let values = {};
|
|
114
|
+
try {
|
|
115
|
+
values = source.getValues( {
|
|
116
|
+
select,
|
|
117
|
+
context: blockContext,
|
|
118
|
+
bindings: {
|
|
119
|
+
[ attribute ]: itemBindings,
|
|
120
|
+
},
|
|
121
|
+
} );
|
|
122
|
+
} catch ( e ) {}
|
|
123
|
+
|
|
120
124
|
return (
|
|
121
125
|
<Menu.CheckboxItem
|
|
122
126
|
key={
|
|
@@ -17,11 +17,28 @@ function findOptimalFontSize( textElement, applyFontSize ) {
|
|
|
17
17
|
let maxSize = 2400;
|
|
18
18
|
let bestSize = minSize;
|
|
19
19
|
|
|
20
|
+
const computedStyle = window.getComputedStyle( textElement );
|
|
21
|
+
const paddingLeft = parseFloat( computedStyle.paddingLeft ) || 0;
|
|
22
|
+
const paddingRight = parseFloat( computedStyle.paddingRight ) || 0;
|
|
23
|
+
const range = document.createRange();
|
|
24
|
+
range.selectNodeContents( textElement );
|
|
25
|
+
|
|
20
26
|
while ( minSize <= maxSize ) {
|
|
21
27
|
const midSize = Math.floor( ( minSize + maxSize ) / 2 );
|
|
22
28
|
applyFontSize( midSize );
|
|
23
29
|
|
|
24
|
-
|
|
30
|
+
// When there is padding if the text overflows to the
|
|
31
|
+
// padding area, it should be considered overflowing.
|
|
32
|
+
// Use Range API to measure actual text content dimensions.
|
|
33
|
+
const rect = range.getBoundingClientRect();
|
|
34
|
+
const textWidth = rect.width;
|
|
35
|
+
|
|
36
|
+
// Check if text fits within the element's width and is not
|
|
37
|
+
// overflowing into the padding area.
|
|
38
|
+
const fitsWidth =
|
|
39
|
+
textElement.scrollWidth <= textElement.clientWidth &&
|
|
40
|
+
textWidth <= textElement.clientWidth - paddingLeft - paddingRight;
|
|
41
|
+
// Check if text fits within the element's height.
|
|
25
42
|
const fitsHeight =
|
|
26
43
|
alreadyHasScrollableHeight ||
|
|
27
44
|
textElement.scrollHeight <= textElement.clientHeight;
|
|
@@ -33,6 +50,7 @@ function findOptimalFontSize( textElement, applyFontSize ) {
|
|
|
33
50
|
maxSize = midSize - 1;
|
|
34
51
|
}
|
|
35
52
|
}
|
|
53
|
+
range.detach();
|
|
36
54
|
|
|
37
55
|
return bestSize;
|
|
38
56
|
}
|