@wordpress/block-editor 16.2.0 → 17.0.0

package/build-module/components/dimensions-tool/aspect-ratio-tool.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dimensions-tool/aspect-ratio-tool.js"],
-  "sourcesContent": ["import { SelectControl } from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\nimport { useSettings } from '../use-settings';\nimport { InheritanceToolsPanelItem } from '../global-styles/inheritance';\n\n/**\n * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps\n */\n\n/**\n * @callback AspectRatioToolPropsOnChange\n * @param {string} [value] New aspect ratio value.\n * @return {void} No return.\n */\n\n/**\n * @typedef {Object} AspectRatioToolProps\n * @property {string}                       [panelId]          ID of the panel this tool is associated with.\n * @property {string}                       [value]            Current aspect ratio value.\n * @property {AspectRatioToolPropsOnChange} [onChange]         Callback to update the aspect ratio value.\n * @property {SelectControlProps[]}         [options]          Aspect ratio options.\n * @property {string}                       [defaultValue]     Default aspect ratio value.\n * @property {boolean}                      [isShownByDefault] Whether the tool is shown by default.\n * @property {string}                       [className]        Additional CSS class on the wrapping panel item.\n * @property {boolean}                      [isInherited]      Whether the control is displaying an inherited Global Styles value.\n * @property {boolean}                      [hasLocalOverride] Whether a local value is overriding an inherited Global Styles value.\n */\n\nexport default function AspectRatioTool( {\n\tpanelId,\n\tvalue,\n\tonChange = () => {},\n\toptions,\n\tdefaultValue = 'auto',\n\thasValue,\n\tisShownByDefault = true,\n\tclassName,\n\tisInherited,\n\thasLocalOverride,\n} ) {\n\t// Match the CSS default so if the value is used directly in CSS it will look correct in the control.\n\tconst displayValue = value ?? 'auto';\n\n\tconst [ defaultRatios, themeRatios, showDefaultRatios ] = useSettings(\n\t\t'dimensions.aspectRatios.default',\n\t\t'dimensions.aspectRatios.theme',\n\t\t'dimensions.defaultAspectRatios'\n\t);\n\n\tconst themeOptions = themeRatios?.map( ( { name, ratio } ) => ( {\n\t\tlabel: name,\n\t\tvalue: ratio,\n\t} ) );\n\n\tconst defaultOptions = defaultRatios?.map( ( { name, ratio } ) => ( {\n\t\tlabel: name,\n\t\tvalue: ratio,\n\t} ) );\n\n\tconst aspectRatioOptions = [\n\t\t{\n\t\t\tlabel: _x(\n\t\t\t\t'Original',\n\t\t\t\t'Aspect ratio option for dimensions control'\n\t\t\t),\n\t\t\tvalue: 'auto',\n\t\t},\n\t\t...( showDefaultRatios ? defaultOptions : [] ),\n\t\t...( themeOptions ? themeOptions : [] ),\n\t\t{\n\t\t\tlabel: _x( 'Custom', 'Aspect ratio option for dimensions control' ),\n\t\t\tvalue: 'custom',\n\t\t\tdisabled: true,\n\t\t\thidden: true,\n\t\t},\n\t];\n\n\treturn (\n\t\t<InheritanceToolsPanelItem\n\t\t\tclassName={ className }\n\t\t\tisInherited={ isInherited }\n\t\t\thasLocalOverride={ hasLocalOverride }\n\t\t\thasValue={\n\t\t\t\thasValue ? hasValue : () => displayValue !== defaultValue\n\t\t\t}\n\t\t\tlabel={ __( 'Aspect ratio' ) }\n\t\t\tonDeselect={ () => onChange( undefined ) }\n\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\tpanelId={ panelId }\n\t\t>\n\t\t\t<SelectControl\n\t\t\t\tlabel={ __( 'Aspect ratio' ) }\n\t\t\t\tvalue={ displayValue }\n\t\t\t\toptions={ options ?? aspectRatioOptions }\n\t\t\t\tonChange={ onChange }\n\t\t\t/>\n\t\t</InheritanceToolsPanelItem>\n\t);\n}\n"],
-  "mappings": ";AAAA,SAAS,qBAAqB;AAC9B,SAAS,IAAI,UAAU;AACvB,SAAS,mBAAmB;AAC5B,SAAS,iCAAiC;AAuFvC;AA9DY,SAAR,gBAAkC;AAAA,EACxC;AAAA,EACA;AAAA,EACA,WAAW,MAAM;AAAA,EAAC;AAAA,EAClB;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACD,GAAI;AAEH,QAAM,eAAe,SAAS;AAE9B,QAAM,CAAE,eAAe,aAAa,iBAAkB,IAAI;AAAA,IACzD;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAEA,QAAM,eAAe,aAAa,IAAK,CAAE,EAAE,MAAM,MAAM,OAAS;AAAA,IAC/D,OAAO;AAAA,IACP,OAAO;AAAA,EACR,EAAI;AAEJ,QAAM,iBAAiB,eAAe,IAAK,CAAE,EAAE,MAAM,MAAM,OAAS;AAAA,IACnE,OAAO;AAAA,IACP,OAAO;AAAA,EACR,EAAI;AAEJ,QAAM,qBAAqB;AAAA,IAC1B;AAAA,MACC,OAAO;AAAA,QACN;AAAA,QACA;AAAA,MACD;AAAA,MACA,OAAO;AAAA,IACR;AAAA,IACA,GAAK,oBAAoB,iBAAiB,CAAC;AAAA,IAC3C,GAAK,eAAe,eAAe,CAAC;AAAA,IACpC;AAAA,MACC,OAAO,GAAI,UAAU,4CAA6C;AAAA,MAClE,OAAO;AAAA,MACP,UAAU;AAAA,MACV,QAAQ;AAAA,IACT;AAAA,EACD;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UACC,WAAW,WAAW,MAAM,iBAAiB;AAAA,MAE9C,OAAQ,GAAI,cAAe;AAAA,MAC3B,YAAa,MAAM,SAAU,MAAU;AAAA,MACvC;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACA,OAAQ,GAAI,cAAe;AAAA,UAC3B,OAAQ;AAAA,UACR,SAAU,WAAW;AAAA,UACrB;AAAA;AAAA,MACD;AAAA;AAAA,EACD;AAEF;",
+  "sourcesContent": ["import { SelectControl } from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\nimport { useSettings } from '../use-settings';\nimport { InheritanceToolsPanelItem } from '../global-styles/inheritance';\nimport { findAspectRatioOption } from './utils';\n\n/**\n * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps\n */\n\n/**\n * @callback AspectRatioToolPropsOnChange\n * @param {string} [value] New aspect ratio value.\n * @return {void} No return.\n */\n\n/**\n * @typedef {Object} AspectRatioToolProps\n * @property {string}                       [panelId]          ID of the panel this tool is associated with.\n * @property {string}                       [value]            Current aspect ratio value.\n * @property {AspectRatioToolPropsOnChange} [onChange]         Callback to update the aspect ratio value.\n * @property {SelectControlProps[]}         [options]          Aspect ratio options.\n * @property {string}                       [defaultValue]     Default aspect ratio value.\n * @property {boolean}                      [isShownByDefault] Whether the tool is shown by default.\n * @property {string}                       [className]        Additional CSS class on the wrapping panel item.\n * @property {boolean}                      [isInherited]      Whether the control is displaying an inherited Global Styles value.\n * @property {boolean}                      [hasLocalOverride] Whether a local value is overriding an inherited Global Styles value.\n */\n\nexport default function AspectRatioTool( {\n\tpanelId,\n\tvalue,\n\tonChange = () => {},\n\toptions,\n\tdefaultValue = 'auto',\n\thasValue,\n\tisShownByDefault = true,\n\tclassName,\n\tisInherited,\n\thasLocalOverride,\n} ) {\n\tconst [ defaultRatios, themeRatios, showDefaultRatios ] = useSettings(\n\t\t'dimensions.aspectRatios.default',\n\t\t'dimensions.aspectRatios.theme',\n\t\t'dimensions.defaultAspectRatios'\n\t);\n\n\tconst themeOptions = themeRatios?.map( ( { name, ratio } ) => ( {\n\t\tlabel: name,\n\t\tvalue: ratio,\n\t} ) );\n\n\tconst defaultOptions = defaultRatios?.map( ( { name, ratio } ) => ( {\n\t\tlabel: name,\n\t\tvalue: ratio,\n\t} ) );\n\n\tconst aspectRatioOptions = [\n\t\t{\n\t\t\tlabel: _x(\n\t\t\t\t'Original',\n\t\t\t\t'Aspect ratio option for dimensions control'\n\t\t\t),\n\t\t\tvalue: 'auto',\n\t\t},\n\t\t...( showDefaultRatios ? defaultOptions : [] ),\n\t\t...( themeOptions ? themeOptions : [] ),\n\t\t{\n\t\t\tlabel: _x( 'Custom', 'Aspect ratio option for dimensions control' ),\n\t\t\tvalue: 'custom',\n\t\t\tdisabled: true,\n\t\t\thidden: true,\n\t\t},\n\t];\n\n\tconst resolvedOptions = options ?? aspectRatioOptions;\n\n\t// The value is free-form CSS, so it doesn't necessarily match an option as\n\t// written, e.g. '1/1' and '1' describe the same ratio. Resolve it to the\n\t// option that represents it, falling back to 'custom' so that a ratio\n\t// without a matching preset isn't displayed as one of the presets. Values\n\t// that are empty match the CSS default, so if the value is used directly in\n\t// CSS it will look correct in the control.\n\tconst displayValue =\n\t\tvalue === undefined || value === null || value === 'auto'\n\t\t\t? 'auto'\n\t\t\t: findAspectRatioOption( value, resolvedOptions )?.value ??\n\t\t\t  'custom';\n\n\treturn (\n\t\t<InheritanceToolsPanelItem\n\t\t\tclassName={ className }\n\t\t\tisInherited={ isInherited }\n\t\t\thasLocalOverride={ hasLocalOverride }\n\t\t\thasValue={\n\t\t\t\thasValue ? hasValue : () => displayValue !== defaultValue\n\t\t\t}\n\t\t\tlabel={ __( 'Aspect ratio' ) }\n\t\t\tonDeselect={ () => onChange( undefined ) }\n\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\tpanelId={ panelId }\n\t\t>\n\t\t\t<SelectControl\n\t\t\t\tlabel={ __( 'Aspect ratio' ) }\n\t\t\t\tvalue={ displayValue }\n\t\t\t\toptions={ resolvedOptions }\n\t\t\t\tonChange={ onChange }\n\t\t\t/>\n\t\t</InheritanceToolsPanelItem>\n\t);\n}\n"],
+  "mappings": ";AAAA,SAAS,qBAAqB;AAC9B,SAAS,IAAI,UAAU;AACvB,SAAS,mBAAmB;AAC5B,SAAS,iCAAiC;AAC1C,SAAS,6BAA6B;AAkGnC;AAzEY,SAAR,gBAAkC;AAAA,EACxC;AAAA,EACA;AAAA,EACA,WAAW,MAAM;AAAA,EAAC;AAAA,EAClB;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,CAAE,eAAe,aAAa,iBAAkB,IAAI;AAAA,IACzD;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAEA,QAAM,eAAe,aAAa,IAAK,CAAE,EAAE,MAAM,MAAM,OAAS;AAAA,IAC/D,OAAO;AAAA,IACP,OAAO;AAAA,EACR,EAAI;AAEJ,QAAM,iBAAiB,eAAe,IAAK,CAAE,EAAE,MAAM,MAAM,OAAS;AAAA,IACnE,OAAO;AAAA,IACP,OAAO;AAAA,EACR,EAAI;AAEJ,QAAM,qBAAqB;AAAA,IAC1B;AAAA,MACC,OAAO;AAAA,QACN;AAAA,QACA;AAAA,MACD;AAAA,MACA,OAAO;AAAA,IACR;AAAA,IACA,GAAK,oBAAoB,iBAAiB,CAAC;AAAA,IAC3C,GAAK,eAAe,eAAe,CAAC;AAAA,IACpC;AAAA,MACC,OAAO,GAAI,UAAU,4CAA6C;AAAA,MAClE,OAAO;AAAA,MACP,UAAU;AAAA,MACV,QAAQ;AAAA,IACT;AAAA,EACD;AAEA,QAAM,kBAAkB,WAAW;AAQnC,QAAM,eACL,UAAU,UAAa,UAAU,QAAQ,UAAU,SAChD,SACA,sBAAuB,OAAO,eAAgB,GAAG,SACjD;AAEJ,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UACC,WAAW,WAAW,MAAM,iBAAiB;AAAA,MAE9C,OAAQ,GAAI,cAAe;AAAA,MAC3B,YAAa,MAAM,SAAU,MAAU;AAAA,MACvC;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACA,OAAQ,GAAI,cAAe;AAAA,UAC3B,OAAQ;AAAA,UACR,SAAU;AAAA,UACV;AAAA;AAAA,MACD;AAAA;AAAA,EACD;AAEF;",
   "names": []
 }

package/build-module/components/dimensions-tool/index.mjs

@@ -1,5 +1,5 @@
 // packages/block-editor/src/components/dimensions-tool/index.js
-import { useState } from "@wordpress/element";
+import { useEffect, useRef } from "@wordpress/element";
 import AspectRatioTool from "./aspect-ratio-tool.mjs";
 import ScaleTool from "./scale-tool.mjs";
 import WidthHeightTool from "./width-height-tool.mjs";
@@ -24,9 +24,19 @@ function DimensionsTool({
   const height = value.height === void 0 || value.height === "auto" ? null : value.height;
   const aspectRatio = value.aspectRatio === void 0 || value.aspectRatio === "auto" ? null : value.aspectRatio;
   const scale = value.scale === void 0 ? null : value.scale;
-  const [lastScale, setLastScale] = useState(scale);
-  const [lastAspectRatio, setLastAspectRatio] = useState(aspectRatio);
   const hasCustomAspectRatio = !!(width && height);
+  const lastScaleRef = useRef(scale);
+  const lastAspectRatioRef = useRef(aspectRatio);
+  useEffect(() => {
+    if (scale) {
+      lastScaleRef.current = scale;
+    }
+  }, [scale]);
+  useEffect(() => {
+    if (!hasCustomAspectRatio) {
+      lastAspectRatioRef.current = aspectRatio;
+    }
+  }, [aspectRatio, hasCustomAspectRatio]);
   const aspectRatioValue = hasCustomAspectRatio ? "custom" : aspectRatio;
   const showScaleControl = aspectRatio || width && height;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -40,7 +50,6 @@ function DimensionsTool({
         onChange: (nextAspectRatio) => {
           const nextValue = { ...value };
           nextAspectRatio = nextAspectRatio === "auto" ? null : nextAspectRatio;
-          setLastAspectRatio(nextAspectRatio);
           if (!nextAspectRatio) {
             delete nextValue.aspectRatio;
           } else {
@@ -48,11 +57,8 @@ function DimensionsTool({
           }
           if (!nextAspectRatio) {
             delete nextValue.scale;
-          } else if (lastScale) {
-            nextValue.scale = lastScale;
           } else {
-            nextValue.scale = defaultScale;
-            setLastScale(defaultScale);
+            nextValue.scale = lastScaleRef.current ?? defaultScale;
           }
           if ("custom" !== nextAspectRatio && width && height) {
             delete nextValue.height;
@@ -83,17 +89,14 @@ function DimensionsTool({
           }
           if (nextWidth && nextHeight) {
             delete nextValue.aspectRatio;
-          } else if (lastAspectRatio) {
-            nextValue.aspectRatio = lastAspectRatio;
+          } else if (lastAspectRatioRef.current) {
+            nextValue.aspectRatio = lastAspectRatioRef.current;
           } else {
           }
-          if (!lastAspectRatio && !!nextWidth !== !!nextHeight) {
+          if (!lastAspectRatioRef.current && !!nextWidth !== !!nextHeight) {
             delete nextValue.scale;
-          } else if (lastScale) {
-            nextValue.scale = lastScale;
           } else {
-            nextValue.scale = defaultScale;
-            setLastScale(defaultScale);
+            nextValue.scale = lastScaleRef.current ?? defaultScale;
           }
           onChange(nextValue);
         }
@@ -105,10 +108,9 @@ function DimensionsTool({
         panelId,
         options: scaleOptions,
         defaultValue: defaultScale,
-        value: lastScale,
+        value: scale,
         onChange: (nextScale) => {
           const nextValue = { ...value };
-          setLastScale(nextScale);
           if (!nextScale) {
             delete nextValue.scale;
           } else {

package/build-module/components/dimensions-tool/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dimensions-tool/index.js"],
-  "sourcesContent": ["import { useState } from '@wordpress/element';\nimport AspectRatioTool from './aspect-ratio-tool';\nimport ScaleTool from './scale-tool';\nimport WidthHeightTool from './width-height-tool';\n\n/**\n * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps\n */\n\n/**\n * @typedef {import('@wordpress/components/build-types/unit-control/types').WPUnitControlUnit} WPUnitControlUnit\n */\n\n/**\n * @typedef {Object} Dimensions\n * @property {string} [width]       CSS width property.\n * @property {string} [height]      CSS height property.\n * @property {string} [scale]       CSS object-fit property.\n * @property {string} [aspectRatio] CSS aspect-ratio property.\n */\n\n/**\n * @callback DimensionsControlsOnChange\n * @param {Dimensions} nextValue\n * @return {void}\n */\n\n/**\n * @typedef {Object} DimensionsControlsProps\n * @property {string}                     [panelId]            ID of the panel that contains the controls.\n * @property {Dimensions}                 [value]              Current dimensions values.\n * @property {DimensionsControlsOnChange} [onChange]           Callback to update the dimensions values.\n * @property {SelectControlProps[]}       [aspectRatioOptions] Aspect ratio options.\n * @property {SelectControlProps[]}       [scaleOptions]       Scale options.\n * @property {WPUnitControlUnit[]}        [unitsOptions]       Units options.\n */\n\n/**\n * Component that renders controls to edit the dimensions of an image or container.\n *\n * @param {DimensionsControlsProps} props The component props.\n *\n * @return {Element} The dimensions controls.\n */\nfunction DimensionsTool( {\n\tpanelId,\n\tvalue = {},\n\tonChange = () => {},\n\taspectRatioOptions, // Default options handled by AspectRatioTool.\n\tdefaultAspectRatio = 'auto', // Match CSS default value for aspect-ratio.\n\tscaleOptions, // Default options handled by ScaleTool.\n\tdefaultScale = 'cover',\n\tunitsOptions, // Default options handled by UnitControl.\n\ttools = [ 'aspectRatio', 'widthHeight', 'scale' ],\n} ) {\n\t// Coerce undefined and CSS default values to be null.\n\tconst width =\n\t\tvalue.width === undefined || value.width === 'auto'\n\t\t\t? null\n\t\t\t: value.width;\n\tconst height =\n\t\tvalue.height === undefined || value.height === 'auto'\n\t\t\t? null\n\t\t\t: value.height;\n\tconst aspectRatio =\n\t\tvalue.aspectRatio === undefined || value.aspectRatio === 'auto'\n\t\t\t? null\n\t\t\t: value.aspectRatio;\n\tconst scale = value.scale === undefined ? null : value.scale;\n\n\t// Keep track of state internally, so when the value is cleared by means\n\t// other than directly editing that field, it's easier to restore the\n\t// previous value.\n\tconst [ lastScale, setLastScale ] = useState( scale );\n\tconst [ lastAspectRatio, setLastAspectRatio ] = useState( aspectRatio );\n\tconst hasCustomAspectRatio = !! ( width && height );\n\n\t// 'custom' is not a valid value for CSS aspect-ratio, but it is used in the\n\t// dropdown to indicate that setting both the width and height is the same\n\t// as a custom aspect ratio.\n\tconst aspectRatioValue = hasCustomAspectRatio ? 'custom' : aspectRatio;\n\n\tconst showScaleControl = aspectRatio || ( width && height );\n\n\treturn (\n\t\t<>\n\t\t\t{ tools.includes( 'aspectRatio' ) && (\n\t\t\t\t<AspectRatioTool\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t\toptions={ aspectRatioOptions }\n\t\t\t\t\tdefaultValue={ defaultAspectRatio }\n\t\t\t\t\tvalue={ aspectRatioValue }\n\t\t\t\t\tonChange={ ( nextAspectRatio ) => {\n\t\t\t\t\t\tconst nextValue = { ...value };\n\n\t\t\t\t\t\t// 'auto' is CSS default, so it gets treated as null.\n\t\t\t\t\t\tnextAspectRatio =\n\t\t\t\t\t\t\tnextAspectRatio === 'auto' ? null : nextAspectRatio;\n\n\t\t\t\t\t\tsetLastAspectRatio( nextAspectRatio );\n\n\t\t\t\t\t\t// Update aspectRatio.\n\t\t\t\t\t\tif ( ! nextAspectRatio ) {\n\t\t\t\t\t\t\tdelete nextValue.aspectRatio;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tnextValue.aspectRatio = nextAspectRatio;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// Auto-update scale.\n\t\t\t\t\t\tif ( ! nextAspectRatio ) {\n\t\t\t\t\t\t\tdelete nextValue.scale;\n\t\t\t\t\t\t} else if ( lastScale ) {\n\t\t\t\t\t\t\tnextValue.scale = lastScale;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tnextValue.scale = defaultScale;\n\t\t\t\t\t\t\tsetLastScale( defaultScale );\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// Auto-update width and height.\n\t\t\t\t\t\tif ( 'custom' !== nextAspectRatio && width && height ) {\n\t\t\t\t\t\t\tdelete nextValue.height;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tonChange( nextValue );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ tools.includes( 'widthHeight' ) && (\n\t\t\t\t<WidthHeightTool\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t\tunits={ unitsOptions }\n\t\t\t\t\tvalue={ { width, height } }\n\t\t\t\t\tonChange={ ( { width: nextWidth, height: nextHeight } ) => {\n\t\t\t\t\t\tconst nextValue = { ...value };\n\n\t\t\t\t\t\t// 'auto' is CSS default, so it gets treated as null.\n\t\t\t\t\t\tnextWidth = nextWidth === 'auto' ? null : nextWidth;\n\t\t\t\t\t\tnextHeight = nextHeight === 'auto' ? null : nextHeight;\n\n\t\t\t\t\t\t// Update width.\n\t\t\t\t\t\tif ( ! nextWidth ) {\n\t\t\t\t\t\t\tdelete nextValue.width;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tnextValue.width = nextWidth;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// Update height.\n\t\t\t\t\t\tif ( ! nextHeight ) {\n\t\t\t\t\t\t\tdelete nextValue.height;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tnextValue.height = nextHeight;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// Auto-update aspectRatio.\n\t\t\t\t\t\tif ( nextWidth && nextHeight ) {\n\t\t\t\t\t\t\tdelete nextValue.aspectRatio;\n\t\t\t\t\t\t} else if ( lastAspectRatio ) {\n\t\t\t\t\t\t\tnextValue.aspectRatio = lastAspectRatio;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t// No setting defaultAspectRatio here, because\n\t\t\t\t\t\t\t// aspectRatio is optional in this scenario,\n\t\t\t\t\t\t\t// unlike scale.\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// Auto-update scale.\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t! lastAspectRatio &&\n\t\t\t\t\t\t\t!! nextWidth !== !! nextHeight\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\tdelete nextValue.scale;\n\t\t\t\t\t\t} else if ( lastScale ) {\n\t\t\t\t\t\t\tnextValue.scale = lastScale;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tnextValue.scale = defaultScale;\n\t\t\t\t\t\t\tsetLastScale( defaultScale );\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tonChange( nextValue );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ tools.includes( 'scale' ) && showScaleControl && (\n\t\t\t\t<ScaleTool\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t\toptions={ scaleOptions }\n\t\t\t\t\tdefaultValue={ defaultScale }\n\t\t\t\t\tvalue={ lastScale }\n\t\t\t\t\tonChange={ ( nextScale ) => {\n\t\t\t\t\t\tconst nextValue = { ...value };\n\n\t\t\t\t\t\tsetLastScale( nextScale );\n\n\t\t\t\t\t\t// Update scale.\n\t\t\t\t\t\tif ( ! nextScale ) {\n\t\t\t\t\t\t\tdelete nextValue.scale;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tnextValue.scale = nextScale;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tonChange( nextValue );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default DimensionsTool;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useEffect, useRef } from '@wordpress/element';\nimport AspectRatioTool from './aspect-ratio-tool';\nimport ScaleTool from './scale-tool';\nimport WidthHeightTool from './width-height-tool';\n\n/**\n * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps\n */\n\n/**\n * @typedef {import('@wordpress/components/build-types/unit-control/types').WPUnitControlUnit} WPUnitControlUnit\n */\n\n/**\n * @typedef {Object} Dimensions\n * @property {string} [width]       CSS width property.\n * @property {string} [height]      CSS height property.\n * @property {string} [scale]       CSS object-fit property.\n * @property {string} [aspectRatio] CSS aspect-ratio property.\n */\n\n/**\n * @callback DimensionsControlsOnChange\n * @param {Dimensions} nextValue\n * @return {void}\n */\n\n/**\n * @typedef {Object} DimensionsControlsProps\n * @property {string}                     [panelId]            ID of the panel that contains the controls.\n * @property {Dimensions}                 [value]              Current dimensions values.\n * @property {DimensionsControlsOnChange} [onChange]           Callback to update the dimensions values.\n * @property {SelectControlProps[]}       [aspectRatioOptions] Aspect ratio options.\n * @property {SelectControlProps[]}       [scaleOptions]       Scale options.\n * @property {WPUnitControlUnit[]}        [unitsOptions]       Units options.\n */\n\n/**\n * Component that renders controls to edit the dimensions of an image or container.\n *\n * @param {DimensionsControlsProps} props The component props.\n *\n * @return {Element} The dimensions controls.\n */\nfunction DimensionsTool( {\n\tpanelId,\n\tvalue = {},\n\tonChange = () => {},\n\taspectRatioOptions, // Default options handled by AspectRatioTool.\n\tdefaultAspectRatio = 'auto', // Match CSS default value for aspect-ratio.\n\tscaleOptions, // Default options handled by ScaleTool.\n\tdefaultScale = 'cover',\n\tunitsOptions, // Default options handled by UnitControl.\n\ttools = [ 'aspectRatio', 'widthHeight', 'scale' ],\n} ) {\n\t// Coerce undefined and CSS default values to be null.\n\tconst width =\n\t\tvalue.width === undefined || value.width === 'auto'\n\t\t\t? null\n\t\t\t: value.width;\n\tconst height =\n\t\tvalue.height === undefined || value.height === 'auto'\n\t\t\t? null\n\t\t\t: value.height;\n\tconst aspectRatio =\n\t\tvalue.aspectRatio === undefined || value.aspectRatio === 'auto'\n\t\t\t? null\n\t\t\t: value.aspectRatio;\n\tconst scale = value.scale === undefined ? null : value.scale;\n\n\tconst hasCustomAspectRatio = !! ( width && height );\n\n\t// Keep track of the previous values, so when a value is cleared by means\n\t// other than directly editing that field, it's easier to restore it. These\n\t// are only ever read while handling a change, so they're kept in refs and\n\t// synced from the value to stay correct when it is updated externally, e.g.\n\t// by undo or by another client.\n\tconst lastScaleRef = useRef( scale );\n\tconst lastAspectRatioRef = useRef( aspectRatio );\n\n\tuseEffect( () => {\n\t\t// Scale is cleared alongside the aspect ratio, so only remember the\n\t\t// values it is actually set to.\n\t\tif ( scale ) {\n\t\t\tlastScaleRef.current = scale;\n\t\t}\n\t}, [ scale ] );\n\n\tuseEffect( () => {\n\t\t// A custom aspect ratio, i.e. both a width and a height, clears the\n\t\t// aspect ratio value. Keep the remembered one so it can be restored\n\t\t// once the custom aspect ratio is removed.\n\t\tif ( ! hasCustomAspectRatio ) {\n\t\t\tlastAspectRatioRef.current = aspectRatio;\n\t\t}\n\t}, [ aspectRatio, hasCustomAspectRatio ] );\n\n\t// 'custom' is not a valid value for CSS aspect-ratio, but it is used in the\n\t// dropdown to indicate that setting both the width and height is the same\n\t// as a custom aspect ratio.\n\tconst aspectRatioValue = hasCustomAspectRatio ? 'custom' : aspectRatio;\n\n\tconst showScaleControl = aspectRatio || ( width && height );\n\n\treturn (\n\t\t<>\n\t\t\t{ tools.includes( 'aspectRatio' ) && (\n\t\t\t\t<AspectRatioTool\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t\toptions={ aspectRatioOptions }\n\t\t\t\t\tdefaultValue={ defaultAspectRatio }\n\t\t\t\t\tvalue={ aspectRatioValue }\n\t\t\t\t\tonChange={ ( nextAspectRatio ) => {\n\t\t\t\t\t\tconst nextValue = { ...value };\n\n\t\t\t\t\t\t// 'auto' is CSS default, so it gets treated as null.\n\t\t\t\t\t\tnextAspectRatio =\n\t\t\t\t\t\t\tnextAspectRatio === 'auto' ? null : nextAspectRatio;\n\n\t\t\t\t\t\t// Update aspectRatio.\n\t\t\t\t\t\tif ( ! nextAspectRatio ) {\n\t\t\t\t\t\t\tdelete nextValue.aspectRatio;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tnextValue.aspectRatio = nextAspectRatio;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// Auto-update scale.\n\t\t\t\t\t\tif ( ! nextAspectRatio ) {\n\t\t\t\t\t\t\tdelete nextValue.scale;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tnextValue.scale =\n\t\t\t\t\t\t\t\tlastScaleRef.current ?? defaultScale;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// Auto-update width and height.\n\t\t\t\t\t\tif ( 'custom' !== nextAspectRatio && width && height ) {\n\t\t\t\t\t\t\tdelete nextValue.height;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tonChange( nextValue );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ tools.includes( 'widthHeight' ) && (\n\t\t\t\t<WidthHeightTool\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t\tunits={ unitsOptions }\n\t\t\t\t\tvalue={ { width, height } }\n\t\t\t\t\tonChange={ ( { width: nextWidth, height: nextHeight } ) => {\n\t\t\t\t\t\tconst nextValue = { ...value };\n\n\t\t\t\t\t\t// 'auto' is CSS default, so it gets treated as null.\n\t\t\t\t\t\tnextWidth = nextWidth === 'auto' ? null : nextWidth;\n\t\t\t\t\t\tnextHeight = nextHeight === 'auto' ? null : nextHeight;\n\n\t\t\t\t\t\t// Update width.\n\t\t\t\t\t\tif ( ! nextWidth ) {\n\t\t\t\t\t\t\tdelete nextValue.width;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tnextValue.width = nextWidth;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// Update height.\n\t\t\t\t\t\tif ( ! nextHeight ) {\n\t\t\t\t\t\t\tdelete nextValue.height;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tnextValue.height = nextHeight;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// Auto-update aspectRatio.\n\t\t\t\t\t\tif ( nextWidth && nextHeight ) {\n\t\t\t\t\t\t\tdelete nextValue.aspectRatio;\n\t\t\t\t\t\t} else if ( lastAspectRatioRef.current ) {\n\t\t\t\t\t\t\tnextValue.aspectRatio = lastAspectRatioRef.current;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t// No setting defaultAspectRatio here, because\n\t\t\t\t\t\t\t// aspectRatio is optional in this scenario,\n\t\t\t\t\t\t\t// unlike scale.\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// Auto-update scale.\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t! lastAspectRatioRef.current &&\n\t\t\t\t\t\t\t!! nextWidth !== !! nextHeight\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\tdelete nextValue.scale;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tnextValue.scale =\n\t\t\t\t\t\t\t\tlastScaleRef.current ?? defaultScale;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tonChange( nextValue );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ tools.includes( 'scale' ) && showScaleControl && (\n\t\t\t\t<ScaleTool\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t\toptions={ scaleOptions }\n\t\t\t\t\tdefaultValue={ defaultScale }\n\t\t\t\t\tvalue={ scale }\n\t\t\t\t\tonChange={ ( nextScale ) => {\n\t\t\t\t\t\tconst nextValue = { ...value };\n\n\t\t\t\t\t\t// Update scale.\n\t\t\t\t\t\tif ( ! nextScale ) {\n\t\t\t\t\t\t\tdelete nextValue.scale;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tnextValue.scale = nextScale;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tonChange( nextValue );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default DimensionsTool;\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/components/dimensions-tool/utils.mjs

@@ -0,0 +1,35 @@
+// packages/block-editor/src/components/dimensions-tool/utils.js
+function parseAspectRatio(value) {
+  if (typeof value !== "string") {
+    return null;
+  }
+  const parts = value.split("/");
+  if (parts.length > 2) {
+    return null;
+  }
+  const [width, height = "1"] = parts;
+  const numericWidth = Number(width.trim());
+  const numericHeight = Number(height.trim());
+  if (!Number.isFinite(numericWidth) || !Number.isFinite(numericHeight) || numericWidth <= 0 || numericHeight <= 0) {
+    return null;
+  }
+  return numericWidth / numericHeight;
+}
+function findAspectRatioOption(value, options) {
+  const exactMatch = options.find((option) => option.value === value);
+  if (exactMatch) {
+    return exactMatch;
+  }
+  const ratio = parseAspectRatio(value);
+  if (ratio === null) {
+    return null;
+  }
+  return options.find(
+    (option) => parseAspectRatio(option.value) === ratio
+  ) ?? null;
+}
+export {
+  findAspectRatioOption,
+  parseAspectRatio
+};
+//# sourceMappingURL=utils.mjs.map

package/build-module/components/dimensions-tool/utils.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/dimensions-tool/utils.js"],
+  "sourcesContent": ["/**\n * Parses a CSS `aspect-ratio` value into a number so that values that are\n * written differently but describe the same ratio, e.g. `1` and `1/1`, can be\n * compared.\n *\n * @param {string} [value] CSS aspect-ratio value, e.g. '16/9' or '1.5'.\n *\n * @return {?number} The ratio as a number, or null when it cannot be parsed.\n */\nexport function parseAspectRatio( value ) {\n\tif ( typeof value !== 'string' ) {\n\t\treturn null;\n\t}\n\n\tconst parts = value.split( '/' );\n\n\tif ( parts.length > 2 ) {\n\t\treturn null;\n\t}\n\n\tconst [ width, height = '1' ] = parts;\n\tconst numericWidth = Number( width.trim() );\n\tconst numericHeight = Number( height.trim() );\n\n\tif (\n\t\t! Number.isFinite( numericWidth ) ||\n\t\t! Number.isFinite( numericHeight ) ||\n\t\tnumericWidth <= 0 ||\n\t\tnumericHeight <= 0\n\t) {\n\t\treturn null;\n\t}\n\n\treturn numericWidth / numericHeight;\n}\n\n/**\n * Finds the option that represents the given CSS `aspect-ratio` value.\n *\n * Aspect ratio values are free-form CSS, while the options are a fixed list of\n * presets, so an exact string match isn't enough: `1/1` and `1` describe the\n * same ratio but only one of them is a preset value.\n *\n * @param {string}   value   CSS aspect-ratio value.\n * @param {Object[]} options Aspect ratio options.\n *\n * @return {?Object} The matching option, or null when there is none.\n */\nexport function findAspectRatioOption( value, options ) {\n\tconst exactMatch = options.find( ( option ) => option.value === value );\n\n\tif ( exactMatch ) {\n\t\treturn exactMatch;\n\t}\n\n\tconst ratio = parseAspectRatio( value );\n\n\tif ( ratio === null ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\toptions.find(\n\t\t\t( option ) => parseAspectRatio( option.value ) === ratio\n\t\t) ?? null\n\t);\n}\n"],
+  "mappings": ";AASO,SAAS,iBAAkB,OAAQ;AACzC,MAAK,OAAO,UAAU,UAAW;AAChC,WAAO;AAAA,EACR;AAEA,QAAM,QAAQ,MAAM,MAAO,GAAI;AAE/B,MAAK,MAAM,SAAS,GAAI;AACvB,WAAO;AAAA,EACR;AAEA,QAAM,CAAE,OAAO,SAAS,GAAI,IAAI;AAChC,QAAM,eAAe,OAAQ,MAAM,KAAK,CAAE;AAC1C,QAAM,gBAAgB,OAAQ,OAAO,KAAK,CAAE;AAE5C,MACC,CAAE,OAAO,SAAU,YAAa,KAChC,CAAE,OAAO,SAAU,aAAc,KACjC,gBAAgB,KAChB,iBAAiB,GAChB;AACD,WAAO;AAAA,EACR;AAEA,SAAO,eAAe;AACvB;AAcO,SAAS,sBAAuB,OAAO,SAAU;AACvD,QAAM,aAAa,QAAQ,KAAM,CAAE,WAAY,OAAO,UAAU,KAAM;AAEtE,MAAK,YAAa;AACjB,WAAO;AAAA,EACR;AAEA,QAAM,QAAQ,iBAAkB,KAAM;AAEtC,MAAK,UAAU,MAAO;AACrB,WAAO;AAAA,EACR;AAEA,SACC,QAAQ;AAAA,IACP,CAAE,WAAY,iBAAkB,OAAO,KAAM,MAAM;AAAA,EACpD,KAAK;AAEP;",
+  "names": []
+}

package/build-module/components/duotone-control/index.mjs

@@ -19,6 +19,7 @@ function DuotoneControl({
   disableCustomColors,
   disableCustomDuotone,
   value,
+  selectedSlug,
   onChange
 }) {
   let toolbarIcon;
@@ -73,6 +74,7 @@ function DuotoneControl({
             disableCustomColors,
             disableCustomDuotone,
             value,
+            selectedSlug,
             onChange
           }
         )

package/build-module/components/duotone-control/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/duotone-control/index.js"],
-  "sourcesContent": ["import {\n\tColorIndicator,\n\tDropdown,\n\tDuotonePicker,\n\tDuotoneSwatch,\n\tMenuGroup,\n\tToolbarButton,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { DOWN } from '@wordpress/keycodes';\nimport { Icon, filter } from '@wordpress/icons';\nimport { useInstanceId } from '@wordpress/compose';\n\nfunction DuotoneControl( {\n\tid: idProp,\n\tcolorPalette,\n\tduotonePalette,\n\tdisableCustomColors,\n\tdisableCustomDuotone,\n\tvalue,\n\tonChange,\n} ) {\n\tlet toolbarIcon;\n\tif ( value === 'unset' ) {\n\t\ttoolbarIcon = (\n\t\t\t<ColorIndicator className=\"block-editor-duotone-control__unset-indicator\" />\n\t\t);\n\t} else if ( value ) {\n\t\ttoolbarIcon = <DuotoneSwatch values={ value } />;\n\t} else {\n\t\ttoolbarIcon = <Icon icon={ filter } />;\n\t}\n\n\tconst actionLabel = __( 'Apply duotone filter' );\n\tconst id = useInstanceId( DuotoneControl, 'duotone-control', idProp );\n\tconst descriptionId = `${ id }__description`;\n\n\treturn (\n\t\t<Dropdown\n\t\t\tpopoverProps={ {\n\t\t\t\tclassName: 'block-editor-duotone-control__popover',\n\t\t\t\theaderTitle: __( 'Duotone' ),\n\t\t\t} }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => {\n\t\t\t\tconst openOnArrowDown = ( event ) => {\n\t\t\t\t\tif ( ! isOpen && event.keyCode === DOWN ) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tonToggle();\n\t\t\t\t\t}\n\t\t\t\t};\n\t\t\t\treturn (\n\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\tonKeyDown={ openOnArrowDown }\n\t\t\t\t\t\tlabel={ actionLabel }\n\t\t\t\t\t\ticon={ toolbarIcon }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} }\n\t\t\trenderContent={ () => (\n\t\t\t\t<MenuGroup label={ __( 'Duotone' ) }>\n\t\t\t\t\t<p>\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'Create a two-tone color effect without losing your original image.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</p>\n\t\t\t\t\t<DuotonePicker\n\t\t\t\t\t\taria-label={ actionLabel }\n\t\t\t\t\t\taria-describedby={ descriptionId }\n\t\t\t\t\t\tcolorPalette={ colorPalette }\n\t\t\t\t\t\tduotonePalette={ duotonePalette }\n\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\tdisableCustomDuotone={ disableCustomDuotone }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t</MenuGroup>\n\t\t\t) }\n\t\t/>\n\t);\n}\n\nexport default DuotoneControl;\n"],
-  "mappings": ";AAAA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,UAAU;AACnB,SAAS,YAAY;AACrB,SAAS,MAAM,cAAc;AAC7B,SAAS,qBAAqB;AAc3B,cAsCC,YAtCD;AAZH,SAAS,eAAgB;AAAA,EACxB,IAAI;AAAA,EACJ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,MAAI;AACJ,MAAK,UAAU,SAAU;AACxB,kBACC,oBAAC,kBAAe,WAAU,iDAAgD;AAAA,EAE5E,WAAY,OAAQ;AACnB,kBAAc,oBAAC,iBAAc,QAAS,OAAQ;AAAA,EAC/C,OAAO;AACN,kBAAc,oBAAC,QAAK,MAAO,QAAS;AAAA,EACrC;AAEA,QAAM,cAAc,GAAI,sBAAuB;AAC/C,QAAM,KAAK,cAAe,gBAAgB,mBAAmB,MAAO;AACpE,QAAM,gBAAgB,GAAI,EAAG;AAE7B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,cAAe;AAAA,QACd,WAAW;AAAA,QACX,aAAa,GAAI,SAAU;AAAA,MAC5B;AAAA,MACA,cAAe,CAAE,EAAE,QAAQ,SAAS,MAAO;AAC1C,cAAM,kBAAkB,CAAE,UAAW;AACpC,cAAK,CAAE,UAAU,MAAM,YAAY,MAAO;AACzC,kBAAM,eAAe;AACrB,qBAAS;AAAA,UACV;AAAA,QACD;AACA,eACC;AAAA,UAAC;AAAA;AAAA,YACA,aAAW;AAAA,YACX,SAAU;AAAA,YACV,iBAAc;AAAA,YACd,iBAAgB;AAAA,YAChB,WAAY;AAAA,YACZ,OAAQ;AAAA,YACR,MAAO;AAAA;AAAA,QACR;AAAA,MAEF;AAAA,MACA,eAAgB,MACf,qBAAC,aAAU,OAAQ,GAAI,SAAU,GAChC;AAAA,4BAAC,OACE;AAAA,UACD;AAAA,QACD,GACD;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACA,cAAa;AAAA,YACb,oBAAmB;AAAA,YACnB;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACD;AAAA,SACD;AAAA;AAAA,EAEF;AAEF;AAEA,IAAO,0BAAQ;",
+  "sourcesContent": ["import {\n\tColorIndicator,\n\tDropdown,\n\tDuotonePicker,\n\tDuotoneSwatch,\n\tMenuGroup,\n\tToolbarButton,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { DOWN } from '@wordpress/keycodes';\nimport { Icon, filter } from '@wordpress/icons';\nimport { useInstanceId } from '@wordpress/compose';\n\nfunction DuotoneControl( {\n\tid: idProp,\n\tcolorPalette,\n\tduotonePalette,\n\tdisableCustomColors,\n\tdisableCustomDuotone,\n\tvalue,\n\tselectedSlug,\n\tonChange,\n} ) {\n\tlet toolbarIcon;\n\tif ( value === 'unset' ) {\n\t\ttoolbarIcon = (\n\t\t\t<ColorIndicator className=\"block-editor-duotone-control__unset-indicator\" />\n\t\t);\n\t} else if ( value ) {\n\t\ttoolbarIcon = <DuotoneSwatch values={ value } />;\n\t} else {\n\t\ttoolbarIcon = <Icon icon={ filter } />;\n\t}\n\n\tconst actionLabel = __( 'Apply duotone filter' );\n\tconst id = useInstanceId( DuotoneControl, 'duotone-control', idProp );\n\tconst descriptionId = `${ id }__description`;\n\n\treturn (\n\t\t<Dropdown\n\t\t\tpopoverProps={ {\n\t\t\t\tclassName: 'block-editor-duotone-control__popover',\n\t\t\t\theaderTitle: __( 'Duotone' ),\n\t\t\t} }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => {\n\t\t\t\tconst openOnArrowDown = ( event ) => {\n\t\t\t\t\tif ( ! isOpen && event.keyCode === DOWN ) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tonToggle();\n\t\t\t\t\t}\n\t\t\t\t};\n\t\t\t\treturn (\n\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\tonKeyDown={ openOnArrowDown }\n\t\t\t\t\t\tlabel={ actionLabel }\n\t\t\t\t\t\ticon={ toolbarIcon }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} }\n\t\t\trenderContent={ () => (\n\t\t\t\t<MenuGroup label={ __( 'Duotone' ) }>\n\t\t\t\t\t<p>\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'Create a two-tone color effect without losing your original image.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</p>\n\t\t\t\t\t<DuotonePicker\n\t\t\t\t\t\taria-label={ actionLabel }\n\t\t\t\t\t\taria-describedby={ descriptionId }\n\t\t\t\t\t\tcolorPalette={ colorPalette }\n\t\t\t\t\t\tduotonePalette={ duotonePalette }\n\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\tdisableCustomDuotone={ disableCustomDuotone }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tselectedSlug={ selectedSlug }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t</MenuGroup>\n\t\t\t) }\n\t\t/>\n\t);\n}\n\nexport default DuotoneControl;\n"],
+  "mappings": ";AAAA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,UAAU;AACnB,SAAS,YAAY;AACrB,SAAS,MAAM,cAAc;AAC7B,SAAS,qBAAqB;AAe3B,cAsCC,YAtCD;AAbH,SAAS,eAAgB;AAAA,EACxB,IAAI;AAAA,EACJ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,MAAI;AACJ,MAAK,UAAU,SAAU;AACxB,kBACC,oBAAC,kBAAe,WAAU,iDAAgD;AAAA,EAE5E,WAAY,OAAQ;AACnB,kBAAc,oBAAC,iBAAc,QAAS,OAAQ;AAAA,EAC/C,OAAO;AACN,kBAAc,oBAAC,QAAK,MAAO,QAAS;AAAA,EACrC;AAEA,QAAM,cAAc,GAAI,sBAAuB;AAC/C,QAAM,KAAK,cAAe,gBAAgB,mBAAmB,MAAO;AACpE,QAAM,gBAAgB,GAAI,EAAG;AAE7B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,cAAe;AAAA,QACd,WAAW;AAAA,QACX,aAAa,GAAI,SAAU;AAAA,MAC5B;AAAA,MACA,cAAe,CAAE,EAAE,QAAQ,SAAS,MAAO;AAC1C,cAAM,kBAAkB,CAAE,UAAW;AACpC,cAAK,CAAE,UAAU,MAAM,YAAY,MAAO;AACzC,kBAAM,eAAe;AACrB,qBAAS;AAAA,UACV;AAAA,QACD;AACA,eACC;AAAA,UAAC;AAAA;AAAA,YACA,aAAW;AAAA,YACX,SAAU;AAAA,YACV,iBAAc;AAAA,YACd,iBAAgB;AAAA,YAChB,WAAY;AAAA,YACZ,OAAQ;AAAA,YACR,MAAO;AAAA;AAAA,QACR;AAAA,MAEF;AAAA,MACA,eAAgB,MACf,qBAAC,aAAU,OAAQ,GAAI,SAAU,GAChC;AAAA,4BAAC,OACE;AAAA,UACD;AAAA,QACD,GACD;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACA,cAAa;AAAA,YACb,oBAAmB;AAAA,YACnB;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACD;AAAA,SACD;AAAA;AAAA,EAEF;AAEF;AAEA,IAAO,0BAAQ;",
   "names": []
 }

package/build-module/components/global-styles/advanced-panel.mjs

@@ -1,5 +1,8 @@
 // packages/block-editor/src/components/global-styles/advanced-panel.js
-import { TextareaControl, Notice } from "@wordpress/components";
+import {
+  TextareaControl as WCTextareaControl,
+  Notice
+} from "@wordpress/components";
 import { Stack } from "@wordpress/ui";
 import { useState } from "@wordpress/element";
 import { __ } from "@wordpress/i18n";
@@ -57,7 +60,7 @@ function AdvancedPanel({
       children: [
         cssError && /* @__PURE__ */ jsx(Notice, { status: "error", onRemove: () => setCSSError(null), children: cssError }),
         /* @__PURE__ */ jsx(
-          TextareaControl,
+          WCTextareaControl,
           {
             label: __("Additional CSS"),
             value: customCSS,

package/build-module/components/global-styles/advanced-panel.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/global-styles/advanced-panel.js"],
-  "sourcesContent": ["import { TextareaControl, Notice } from '@wordpress/components';\nimport { Stack } from '@wordpress/ui';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { default as transformStyles } from '../../utils/transform-styles';\n\n/**\n * Validates that a CSS string doesn't contain HTML markup.\n * Uses the same validation as the PHP/global styles REST API.\n *\n * @param {string} css The CSS string to validate.\n * @return {boolean} True if the CSS is valid, false otherwise.\n */\nexport function validateCSS( css ) {\n\t// Check for HTML markup.\n\tif ( typeof css === 'string' && /<\\/?\\w/.test( css ) ) {\n\t\treturn false;\n\t}\n\treturn true;\n}\n\n/**\n * Returns the error message string if the CSS contains HTML markup, or null if it is clean.\n *\n * @param {string} css The CSS string to check.\n * @return {string|null} An error message, or null if the CSS is valid.\n */\nfunction getMarkupValidationError( css ) {\n\treturn validateCSS( css )\n\t\t? null\n\t\t: __( 'The custom CSS is invalid. Do not use <> markup.' );\n}\n\n/**\n * Full CSS validation: markup check first (fast), then a CSS parser (slower).\n *\n * @param {string} css The CSS string to validate.\n * @return {string|null} An error message, or null if the CSS is valid.\n */\nfunction getCSSValidationError( css ) {\n\tif ( ! css ) {\n\t\treturn null;\n\t}\n\tconst markupError = getMarkupValidationError( css );\n\tif ( markupError ) {\n\t\treturn markupError;\n\t}\n\tconst [ transformed ] = transformStyles(\n\t\t[ { css } ],\n\t\t'.for-validation-only'\n\t);\n\treturn transformed === null\n\t\t? __( 'There is an error with your CSS structure.' )\n\t\t: null;\n}\n\nexport default function AdvancedPanel( {\n\tvalue,\n\tonChange,\n\tinheritedValue = value,\n\thelp,\n} ) {\n\t// Custom CSS\n\tconst customCSS = inheritedValue?.css;\n\tconst [ cssError, setCSSError ] = useState( () =>\n\t\tgetCSSValidationError( customCSS )\n\t);\n\tfunction handleOnChange( newValue ) {\n\t\tonChange( {\n\t\t\t...value,\n\t\t\tcss: newValue,\n\t\t} );\n\n\t\tsetCSSError( getMarkupValidationError( newValue ) );\n\t}\n\tfunction handleOnBlur( event ) {\n\t\tsetCSSError( getCSSValidationError( event?.target?.value ) );\n\t}\n\n\treturn (\n\t\t<Stack\n\t\t\tdirection=\"column\"\n\t\t\tgap=\"md\"\n\t\t\tclassName=\"block-editor-global-styles-advanced-panel\"\n\t\t>\n\t\t\t{ cssError && (\n\t\t\t\t<Notice status=\"error\" onRemove={ () => setCSSError( null ) }>\n\t\t\t\t\t{ cssError }\n\t\t\t\t</Notice>\n\t\t\t) }\n\t\t\t<TextareaControl\n\t\t\t\tlabel={ __( 'Additional CSS' ) }\n\t\t\t\tvalue={ customCSS }\n\t\t\t\tonChange={ ( newValue ) => handleOnChange( newValue ) }\n\t\t\t\tonBlur={ handleOnBlur }\n\t\t\t\tclassName=\"block-editor-global-styles-advanced-panel__custom-css-input\"\n\t\t\t\tspellCheck={ false }\n\t\t\t\thelp={ help }\n\t\t\t/>\n\t\t</Stack>\n\t);\n}\n"],
-  "mappings": ";AAAA,SAAS,iBAAiB,cAAc;AACxC,SAAS,aAAa;AACtB,SAAS,gBAAgB;AACzB,SAAS,UAAU;AACnB,SAAS,WAAW,uBAAuB;AA4EzC,SAME,KANF;AAnEK,SAAS,YAAa,KAAM;AAElC,MAAK,OAAO,QAAQ,YAAY,SAAS,KAAM,GAAI,GAAI;AACtD,WAAO;AAAA,EACR;AACA,SAAO;AACR;AAQA,SAAS,yBAA0B,KAAM;AACxC,SAAO,YAAa,GAAI,IACrB,OACA,GAAI,kDAAmD;AAC3D;AAQA,SAAS,sBAAuB,KAAM;AACrC,MAAK,CAAE,KAAM;AACZ,WAAO;AAAA,EACR;AACA,QAAM,cAAc,yBAA0B,GAAI;AAClD,MAAK,aAAc;AAClB,WAAO;AAAA,EACR;AACA,QAAM,CAAE,WAAY,IAAI;AAAA,IACvB,CAAE,EAAE,IAAI,CAAE;AAAA,IACV;AAAA,EACD;AACA,SAAO,gBAAgB,OACpB,GAAI,4CAA6C,IACjD;AACJ;AAEe,SAAR,cAAgC;AAAA,EACtC;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB;AACD,GAAI;AAEH,QAAM,YAAY,gBAAgB;AAClC,QAAM,CAAE,UAAU,WAAY,IAAI;AAAA,IAAU,MAC3C,sBAAuB,SAAU;AAAA,EAClC;AACA,WAAS,eAAgB,UAAW;AACnC,aAAU;AAAA,MACT,GAAG;AAAA,MACH,KAAK;AAAA,IACN,CAAE;AAEF,gBAAa,yBAA0B,QAAS,CAAE;AAAA,EACnD;AACA,WAAS,aAAc,OAAQ;AAC9B,gBAAa,sBAAuB,OAAO,QAAQ,KAAM,CAAE;AAAA,EAC5D;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,KAAI;AAAA,MACJ,WAAU;AAAA,MAER;AAAA,oBACD,oBAAC,UAAO,QAAO,SAAQ,UAAW,MAAM,YAAa,IAAK,GACvD,oBACH;AAAA,QAED;AAAA,UAAC;AAAA;AAAA,YACA,OAAQ,GAAI,gBAAiB;AAAA,YAC7B,OAAQ;AAAA,YACR,UAAW,CAAE,aAAc,eAAgB,QAAS;AAAA,YACpD,QAAS;AAAA,YACT,WAAU;AAAA,YACV,YAAa;AAAA,YACb;AAAA;AAAA,QACD;AAAA;AAAA;AAAA,EACD;AAEF;",
+  "sourcesContent": ["import {\n\tTextareaControl as WCTextareaControl,\n\tNotice,\n} from '@wordpress/components';\nimport { Stack } from '@wordpress/ui';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { default as transformStyles } from '../../utils/transform-styles';\n\n/**\n * Validates that a CSS string doesn't contain HTML markup.\n * Uses the same validation as the PHP/global styles REST API.\n *\n * @param {string} css The CSS string to validate.\n * @return {boolean} True if the CSS is valid, false otherwise.\n */\nexport function validateCSS( css ) {\n\t// Check for HTML markup.\n\tif ( typeof css === 'string' && /<\\/?\\w/.test( css ) ) {\n\t\treturn false;\n\t}\n\treturn true;\n}\n\n/**\n * Returns the error message string if the CSS contains HTML markup, or null if it is clean.\n *\n * @param {string} css The CSS string to check.\n * @return {string|null} An error message, or null if the CSS is valid.\n */\nfunction getMarkupValidationError( css ) {\n\treturn validateCSS( css )\n\t\t? null\n\t\t: __( 'The custom CSS is invalid. Do not use <> markup.' );\n}\n\n/**\n * Full CSS validation: markup check first (fast), then a CSS parser (slower).\n *\n * @param {string} css The CSS string to validate.\n * @return {string|null} An error message, or null if the CSS is valid.\n */\nfunction getCSSValidationError( css ) {\n\tif ( ! css ) {\n\t\treturn null;\n\t}\n\tconst markupError = getMarkupValidationError( css );\n\tif ( markupError ) {\n\t\treturn markupError;\n\t}\n\tconst [ transformed ] = transformStyles(\n\t\t[ { css } ],\n\t\t'.for-validation-only'\n\t);\n\treturn transformed === null\n\t\t? __( 'There is an error with your CSS structure.' )\n\t\t: null;\n}\n\nexport default function AdvancedPanel( {\n\tvalue,\n\tonChange,\n\tinheritedValue = value,\n\thelp,\n} ) {\n\t// Custom CSS\n\tconst customCSS = inheritedValue?.css;\n\tconst [ cssError, setCSSError ] = useState( () =>\n\t\tgetCSSValidationError( customCSS )\n\t);\n\tfunction handleOnChange( newValue ) {\n\t\tonChange( {\n\t\t\t...value,\n\t\t\tcss: newValue,\n\t\t} );\n\n\t\tsetCSSError( getMarkupValidationError( newValue ) );\n\t}\n\tfunction handleOnBlur( event ) {\n\t\tsetCSSError( getCSSValidationError( event?.target?.value ) );\n\t}\n\n\treturn (\n\t\t<Stack\n\t\t\tdirection=\"column\"\n\t\t\tgap=\"md\"\n\t\t\tclassName=\"block-editor-global-styles-advanced-panel\"\n\t\t>\n\t\t\t{ cssError && (\n\t\t\t\t<Notice status=\"error\" onRemove={ () => setCSSError( null ) }>\n\t\t\t\t\t{ cssError }\n\t\t\t\t</Notice>\n\t\t\t) }\n\t\t\t<WCTextareaControl\n\t\t\t\tlabel={ __( 'Additional CSS' ) }\n\t\t\t\tvalue={ customCSS }\n\t\t\t\tonChange={ ( newValue ) => handleOnChange( newValue ) }\n\t\t\t\tonBlur={ handleOnBlur }\n\t\t\t\tclassName=\"block-editor-global-styles-advanced-panel__custom-css-input\"\n\t\t\t\tspellCheck={ false }\n\t\t\t\thelp={ help }\n\t\t\t/>\n\t\t</Stack>\n\t);\n}\n"],
+  "mappings": ";AAAA;AAAA,EACC,mBAAmB;AAAA,EACnB;AAAA,OACM;AACP,SAAS,aAAa;AACtB,SAAS,gBAAgB;AACzB,SAAS,UAAU;AACnB,SAAS,WAAW,uBAAuB;AA4EzC,SAME,KANF;AAnEK,SAAS,YAAa,KAAM;AAElC,MAAK,OAAO,QAAQ,YAAY,SAAS,KAAM,GAAI,GAAI;AACtD,WAAO;AAAA,EACR;AACA,SAAO;AACR;AAQA,SAAS,yBAA0B,KAAM;AACxC,SAAO,YAAa,GAAI,IACrB,OACA,GAAI,kDAAmD;AAC3D;AAQA,SAAS,sBAAuB,KAAM;AACrC,MAAK,CAAE,KAAM;AACZ,WAAO;AAAA,EACR;AACA,QAAM,cAAc,yBAA0B,GAAI;AAClD,MAAK,aAAc;AAClB,WAAO;AAAA,EACR;AACA,QAAM,CAAE,WAAY,IAAI;AAAA,IACvB,CAAE,EAAE,IAAI,CAAE;AAAA,IACV;AAAA,EACD;AACA,SAAO,gBAAgB,OACpB,GAAI,4CAA6C,IACjD;AACJ;AAEe,SAAR,cAAgC;AAAA,EACtC;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB;AACD,GAAI;AAEH,QAAM,YAAY,gBAAgB;AAClC,QAAM,CAAE,UAAU,WAAY,IAAI;AAAA,IAAU,MAC3C,sBAAuB,SAAU;AAAA,EAClC;AACA,WAAS,eAAgB,UAAW;AACnC,aAAU;AAAA,MACT,GAAG;AAAA,MACH,KAAK;AAAA,IACN,CAAE;AAEF,gBAAa,yBAA0B,QAAS,CAAE;AAAA,EACnD;AACA,WAAS,aAAc,OAAQ;AAC9B,gBAAa,sBAAuB,OAAO,QAAQ,KAAM,CAAE;AAAA,EAC5D;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,KAAI;AAAA,MACJ,WAAU;AAAA,MAER;AAAA,oBACD,oBAAC,UAAO,QAAO,SAAQ,UAAW,MAAM,YAAa,IAAK,GACvD,oBACH;AAAA,QAED;AAAA,UAAC;AAAA;AAAA,YACA,OAAQ,GAAI,gBAAiB;AAAA,YAC7B,OAAQ;AAAA,YACR,UAAW,CAAE,aAAc,eAAgB,QAAS;AAAA,YACpD,QAAS;AAAA,YACT,WAAU;AAAA,YACV,YAAa;AAAA,YACb;AAAA;AAAA,QACD;AAAA;AAAA;AAAA,EACD;AAEF;",
   "names": []
 }

package/build-module/components/global-styles/border-panel.mjs

@@ -88,7 +88,6 @@ function BorderPanel({
   inheritedValue = value,
   settings,
   panelId,
-  name,
   defaultControls = DEFAULT_CONTROLS,
   showInheritanceLabelIndicators = isGlobalStylesInheritanceEnabled()
 }) {
@@ -204,10 +203,9 @@ function BorderPanel({
   const inheritedShadow = decodeValue(inheritedValue?.shadow);
   const isShadowPlaceholder = localShadow === void 0 && inheritedShadow !== void 0 && inheritedShadow !== "";
   const shadow = isShadowPlaceholder ? inheritedShadow : localShadow;
-  const shadowPresets = settings?.shadow?.presets ?? {};
-  const mergedShadowPresets = shadowPresets.custom ?? shadowPresets.theme ?? shadowPresets.default ?? [];
+  const shadowPresets = useShadowPresets(settings);
   const setShadow = (newValue) => {
-    const slug = mergedShadowPresets?.find(
+    const slug = shadowPresets.findLast(
       ({ shadow: shadowName }) => shadowName === newValue
     )?.slug;
     onChange(
@@ -263,7 +261,6 @@ function BorderPanel({
   const showBorderByDefault = defaultControls?.color || defaultControls?.width;
   const hasBorderControl = showBorderColor || showBorderStyle || showBorderWidth || showBorderRadius;
   const label = useBorderPanelLabel({
-    blockName: name,
     hasShadowControl,
     hasBorderControl
   });

package/build-module/components/global-styles/border-panel.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/global-styles/border-panel.js"],
-  "sourcesContent": ["import {\n\tBorderBoxControl,\n\t__experimentalHasSplitBorders as hasSplitBorders,\n\t__experimentalIsDefinedBorder as isDefinedBorder,\n\t__experimentalToolsPanel as ToolsPanel,\n\tBaseControl,\n} from '@wordpress/components';\nimport { useCallback, useMemo } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { getValueFromVariable } from '@wordpress/global-styles-engine';\nimport BorderRadiusControl from '../border-radius-control';\nimport { useColorsPerOrigin } from './hooks';\nimport { useToolsPanelDropdownMenuProps } from './utils';\nimport { setImmutably } from '../../utils/object';\nimport { useBorderPanelLabel } from '../../hooks/border';\nimport { ShadowPopover, useShadowPresets } from './shadow-panel-components';\nimport {\n\tgetInheritanceProps,\n\tInheritanceToolsPanelItem,\n\tisGlobalStylesInheritanceEnabled,\n} from './inheritance';\n\nexport function useHasBorderPanel( settings ) {\n\tconst controls = Object.values( useHasBorderPanelControls( settings ) );\n\treturn controls.some( Boolean );\n}\n\nexport function useHasBorderPanelControls( settings ) {\n\tconst controls = {\n\t\thasBorderColor: useHasBorderColorControl( settings ),\n\t\thasBorderRadius: useHasBorderRadiusControl( settings ),\n\t\thasBorderStyle: useHasBorderStyleControl( settings ),\n\t\thasBorderWidth: useHasBorderWidthControl( settings ),\n\t\thasShadow: useHasShadowControl( settings ),\n\t};\n\n\treturn controls;\n}\n\nfunction useHasBorderColorControl( settings ) {\n\treturn settings?.border?.color;\n}\n\nfunction useHasBorderRadiusControl( settings ) {\n\treturn settings?.border?.radius;\n}\n\nfunction useHasBorderStyleControl( settings ) {\n\treturn settings?.border?.style;\n}\n\nfunction useHasBorderWidthControl( settings ) {\n\treturn settings?.border?.width;\n}\n\nfunction useHasShadowControl( settings ) {\n\tconst shadows = useShadowPresets( settings );\n\treturn !! settings?.shadow && shadows.length > 0;\n}\n\nfunction BorderToolsPanel( {\n\tresetAllFilter,\n\tonChange,\n\tvalue,\n\tpanelId,\n\tchildren,\n\tlabel,\n} ) {\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\tconst resetAll = () => {\n\t\tconst updatedValue = resetAllFilter( value );\n\t\tonChange( updatedValue );\n\t};\n\n\treturn (\n\t\t<ToolsPanel\n\t\t\tlabel={ label }\n\t\t\tresetAll={ resetAll }\n\t\t\tpanelId={ panelId }\n\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t>\n\t\t\t{ children }\n\t\t</ToolsPanel>\n\t);\n}\n\nconst DEFAULT_CONTROLS = {\n\tradius: true,\n\tcolor: true,\n\twidth: true,\n\tshadow: true,\n};\n\nexport default function BorderPanel( {\n\tas: Wrapper = BorderToolsPanel,\n\tvalue,\n\tonChange,\n\tinheritedValue = value,\n\tsettings,\n\tpanelId,\n\tname,\n\tdefaultControls = DEFAULT_CONTROLS,\n\tshowInheritanceLabelIndicators = isGlobalStylesInheritanceEnabled(),\n} ) {\n\tconst colors = useColorsPerOrigin( settings );\n\tconst areCustomSolidsEnabled = settings?.color?.custom;\n\tconst decodeValue = useCallback(\n\t\t( rawValue ) => getValueFromVariable( { settings }, '', rawValue ),\n\t\t[ settings ]\n\t);\n\t// Always keep the layout className (e.g. `single-column`); only the\n\t// inheritance treatment is gated on `showInheritanceLabelIndicators`.\n\tconst inheritanceProps = ( isInherited, hasLocalOverride, className ) =>\n\t\tgetInheritanceProps(\n\t\t\tshowInheritanceLabelIndicators && isInherited,\n\t\t\tshowInheritanceLabelIndicators && hasLocalOverride,\n\t\t\tclassName\n\t\t);\n\tconst encodeColorValue = ( colorValue ) => {\n\t\tconst allColors = colors.flatMap(\n\t\t\t( { colors: originColors } ) => originColors\n\t\t);\n\t\tconst colorObject = allColors.find(\n\t\t\t( { color } ) => color === colorValue\n\t\t);\n\t\treturn colorObject\n\t\t\t? 'var:preset|color|' + colorObject.slug\n\t\t\t: colorValue;\n\t};\n\t// Decode a `border` sub-tree (handles split borders + flat shape).\n\tconst decodeBorder = useCallback(\n\t\t( source ) => {\n\t\t\tif ( ! source ) {\n\t\t\t\treturn undefined;\n\t\t\t}\n\t\t\tif ( hasSplitBorders( source ) ) {\n\t\t\t\tconst out = { ...source };\n\t\t\t\t[ 'top', 'right', 'bottom', 'left' ].forEach( ( side ) => {\n\t\t\t\t\tout[ side ] = {\n\t\t\t\t\t\t...out[ side ],\n\t\t\t\t\t\tcolor: decodeValue( out[ side ]?.color ),\n\t\t\t\t\t};\n\t\t\t\t} );\n\t\t\t\treturn out;\n\t\t\t}\n\t\t\treturn {\n\t\t\t\t...source,\n\t\t\t\tcolor: source.color ? decodeValue( source.color ) : undefined,\n\t\t\t};\n\t\t},\n\t\t[ decodeValue ]\n\t);\n\t// Local-then-inherited: prefer the user's locally-set border (whether\n\t// flat or split) when defined, otherwise fall back to the inherited\n\t// Global Styles border. The merge happens at the sub-tree root, not\n\t// at the leaf level — borders are commonly authored as a single\n\t// affordance in the inspector, so partial leaf merges would be\n\t// surprising.\n\tconst localBorder = useMemo(\n\t\t() => decodeBorder( value?.border ),\n\t\t[ value?.border, decodeBorder ]\n\t);\n\tconst inheritedBorder = useMemo(\n\t\t() => decodeBorder( inheritedValue?.border ),\n\t\t[ inheritedValue?.border, decodeBorder ]\n\t);\n\tconst isBorderPlaceholder =\n\t\t! isDefinedBorder( value?.border ) &&\n\t\t!! inheritedBorder &&\n\t\tisDefinedBorder( inheritedBorder );\n\tconst border = isBorderPlaceholder ? inheritedBorder : localBorder;\n\tconst setBorder = ( newBorder ) =>\n\t\tonChange( { ...value, border: newBorder } );\n\tconst showBorderColor = useHasBorderColorControl( settings );\n\tconst showBorderStyle = useHasBorderStyleControl( settings );\n\tconst showBorderWidth = useHasBorderWidthControl( settings );\n\n\t// Border radius. Display inherited values through the control's `values`\n\t// prop when local values are empty so UnitControl can parse the numeric\n\t// quantity and selected unit normally (e.g. `2.5em` -> `2.5` + `em`).\n\t// `hasBorderRadius` remains local-only, so displaying the inherited value\n\t// does not mark the ToolsPanel item as customised or commit on mount.\n\tconst showBorderRadius = useHasBorderRadiusControl( settings );\n\tconst localBorderRadius = useMemo( () => {\n\t\tif ( typeof value?.border?.radius !== 'object' ) {\n\t\t\treturn decodeValue( value?.border?.radius );\n\t\t}\n\t\treturn {\n\t\t\ttopLeft: decodeValue( value?.border?.radius?.topLeft ),\n\t\t\ttopRight: decodeValue( value?.border?.radius?.topRight ),\n\t\t\tbottomLeft: decodeValue( value?.border?.radius?.bottomLeft ),\n\t\t\tbottomRight: decodeValue( value?.border?.radius?.bottomRight ),\n\t\t};\n\t}, [ value?.border?.radius, decodeValue ] );\n\tconst inheritedBorderRadius = useMemo( () => {\n\t\tconst rawRadius = inheritedValue?.border?.radius;\n\t\tif ( typeof rawRadius !== 'object' ) {\n\t\t\treturn decodeValue( rawRadius );\n\t\t}\n\t\treturn {\n\t\t\ttopLeft: decodeValue( rawRadius?.topLeft ),\n\t\t\ttopRight: decodeValue( rawRadius?.topRight ),\n\t\t\tbottomLeft: decodeValue( rawRadius?.bottomLeft ),\n\t\t\tbottomRight: decodeValue( rawRadius?.bottomRight ),\n\t\t};\n\t}, [ inheritedValue?.border?.radius, decodeValue ] );\n\t// Spread the local border, not the merged display value, or setting a\n\t// radius bakes the inherited border into the local override. Mirror of\n\t// the guard in `onBorderChange`.\n\tconst setBorderRadius = ( newBorderRadius ) =>\n\t\tsetBorder( { ...value?.border, radius: newBorderRadius } );\n\tconst hasBorderRadius = () => {\n\t\tconst borderValues = value?.border?.radius;\n\t\tif ( typeof borderValues === 'object' ) {\n\t\t\treturn Object.entries( borderValues ).some( ( [ , v ] ) => !! v );\n\t\t}\n\t\treturn !! borderValues;\n\t};\n\tconst isBorderRadiusPlaceholder =\n\t\t! hasBorderRadius() &&\n\t\tinheritedBorderRadius !== undefined &&\n\t\tinheritedBorderRadius !== '';\n\t// Build an object value so unlinked-mode shows per-corner inherited\n\t// values. The control accepts either a string or an object; passing the\n\t// object form is correct in both modes (the control collapses to the\n\t// `all`/first corner in linked mode).\n\tconst borderRadius = useMemo( () => {\n\t\tif ( ! isBorderRadiusPlaceholder ) {\n\t\t\treturn localBorderRadius;\n\t\t}\n\t\tif ( typeof inheritedBorderRadius === 'string' ) {\n\t\t\treturn inheritedBorderRadius;\n\t\t}\n\t\tconst obj = inheritedBorderRadius;\n\t\tif ( ! obj ) {\n\t\t\treturn localBorderRadius;\n\t\t}\n\t\tconst all =\n\t\t\tobj.topLeft &&\n\t\t\tobj.topLeft === obj.topRight &&\n\t\t\tobj.topLeft === obj.bottomLeft &&\n\t\t\tobj.topLeft === obj.bottomRight\n\t\t\t\t? obj.topLeft\n\t\t\t\t: undefined;\n\t\treturn { all, ...obj };\n\t}, [\n\t\tisBorderRadiusPlaceholder,\n\t\tlocalBorderRadius,\n\t\tinheritedBorderRadius,\n\t] );\n\tconst hasShadowControl = useHasShadowControl( settings );\n\n\t// Shadow. At rest, the popover toggle button uses the placeholder\n\t// treatment, and the popover preset list pre-selects the inherited shadow.\n\t// The interceptor below recognises the user's \"accept inherited\" click as\n\t// an explicit commit, mirroring the ToggleGroup pattern in the typography\n\t// panel.\n\tconst localShadow = decodeValue( value?.shadow );\n\tconst inheritedShadow = decodeValue( inheritedValue?.shadow );\n\tconst isShadowPlaceholder =\n\t\tlocalShadow === undefined &&\n\t\tinheritedShadow !== undefined &&\n\t\tinheritedShadow !== '';\n\tconst shadow = isShadowPlaceholder ? inheritedShadow : localShadow;\n\tconst shadowPresets = settings?.shadow?.presets ?? {};\n\tconst mergedShadowPresets =\n\t\tshadowPresets.custom ??\n\t\tshadowPresets.theme ??\n\t\tshadowPresets.default ??\n\t\t[];\n\tconst setShadow = ( newValue ) => {\n\t\tconst slug = mergedShadowPresets?.find(\n\t\t\t( { shadow: shadowName } ) => shadowName === newValue\n\t\t)?.slug;\n\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tvalue,\n\t\t\t\t[ 'shadow' ],\n\t\t\t\tslug ? `var:preset|shadow|${ slug }` : newValue || undefined\n\t\t\t)\n\t\t);\n\t};\n\t// Display-without-commit interceptor for the shadow preset list. When the\n\t// user is at the at-rest preselect (local is undefined, inherited is the\n\t// active shadow), `ShadowPresets`' default toggle-off behaviour would\n\t// interpret the click on the highlighted preset as `undefined` (clear).\n\t// Re-route it to an explicit commit of the inherited value, so clicking\n\t// the visible preselected preset is the user's \"accept this inherited\n\t// value\" affordance.\n\tconst setShadowWithInheritedCommit = ( newValue ) => {\n\t\tif ( isShadowPlaceholder && newValue === undefined ) {\n\t\t\tsetShadow( inheritedShadow );\n\t\t\treturn;\n\t\t}\n\t\tsetShadow( newValue );\n\t};\n\tconst hasShadow = () => !! value?.shadow;\n\tconst resetShadow = () => setShadow( undefined );\n\t// A local override exists when the user has set a shadow that shadows an\n\t// inherited one. Only then does the toggle render the blue-dot reset\n\t// affordance (mirroring the color/gradient controls); a merely-inherited\n\t// value at rest shows no reset button.\n\tconst hasShadowLocalOverride =\n\t\tshowInheritanceLabelIndicators &&\n\t\thasShadow() &&\n\t\tinheritedShadow !== undefined;\n\n\tconst resetBorder = () => {\n\t\tif ( hasBorderRadius() ) {\n\t\t\treturn setBorder( { radius: value?.border?.radius } );\n\t\t}\n\n\t\tsetBorder( undefined );\n\t};\n\n\tconst onBorderChange = ( newBorder ) => {\n\t\t// Ensure we have a visible border style when a border width or\n\t\t// color is being selected.\n\t\tconst updatedBorder = { ...newBorder };\n\n\t\tif ( hasSplitBorders( updatedBorder ) ) {\n\t\t\t[ 'top', 'right', 'bottom', 'left' ].forEach( ( side ) => {\n\t\t\t\tif ( updatedBorder[ side ] ) {\n\t\t\t\t\tupdatedBorder[ side ] = {\n\t\t\t\t\t\t...updatedBorder[ side ],\n\t\t\t\t\t\tcolor: encodeColorValue( updatedBorder[ side ]?.color ),\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t} );\n\t\t} else if ( updatedBorder ) {\n\t\t\tupdatedBorder.color = encodeColorValue( updatedBorder.color );\n\t\t}\n\n\t\t// As radius is maintained separately to color, style, and width\n\t\t// maintain its value. Read from `value` (local-only) rather than\n\t\t// `border` (the merged display value), otherwise an inherited\n\t\t// radius gets baked into the local override every time the\n\t\t// user touches color/style/width — which both pollutes the\n\t\t// stored attribute and causes the radius `ToolsPanelItem` to\n\t\t// flip into the `has-local-override-from-global-styles` state\n\t\t// even though the user never customised the radius. The\n\t\t// `radius` key must come after the spread so it wins over any\n\t\t// `radius` field forwarded by `BorderBoxControl`'s inner\n\t\t// `BorderControl`, which merges its incoming `value` with the\n\t\t// changed prop. Undefined values here will be cleaned when\n\t\t// global styles are saved.\n\t\tsetBorder( {\n\t\t\t...updatedBorder,\n\t\t\tradius: value?.border?.radius,\n\t\t} );\n\t};\n\n\tconst resetAllFilter = useCallback( ( previousValue ) => {\n\t\treturn {\n\t\t\t...previousValue,\n\t\t\tborder: undefined,\n\t\t\tshadow: undefined,\n\t\t};\n\t}, [] );\n\n\tconst showBorderByDefault =\n\t\tdefaultControls?.color || defaultControls?.width;\n\n\tconst hasBorderControl =\n\t\tshowBorderColor ||\n\t\tshowBorderStyle ||\n\t\tshowBorderWidth ||\n\t\tshowBorderRadius;\n\n\tconst label = useBorderPanelLabel( {\n\t\tblockName: name,\n\t\thasShadowControl,\n\t\thasBorderControl,\n\t} );\n\n\treturn (\n\t\t<Wrapper\n\t\t\tresetAllFilter={ resetAllFilter }\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t\tpanelId={ panelId }\n\t\t\tlabel={ label }\n\t\t>\n\t\t\t{ ( showBorderWidth || showBorderColor ) && (\n\t\t\t\t<InheritanceToolsPanelItem\n\t\t\t\t\t{ ...inheritanceProps(\n\t\t\t\t\t\tisBorderPlaceholder,\n\t\t\t\t\t\tisDefinedBorder( value?.border ) &&\n\t\t\t\t\t\t\t!! inheritedBorder &&\n\t\t\t\t\t\t\tisDefinedBorder( inheritedBorder )\n\t\t\t\t\t) }\n\t\t\t\t\thasValue={ () => isDefinedBorder( value?.border ) }\n\t\t\t\t\tlabel={ __( 'Border' ) }\n\t\t\t\t\tonDeselect={ () => resetBorder() }\n\t\t\t\t\tisShownByDefault={ showBorderByDefault }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t{ ( showInheritanceLabelIndicators ||\n\t\t\t\t\t\thasShadowControl ) && (\n\t\t\t\t\t\t// Render the visible label as `BaseControl.VisualLabel`\n\t\t\t\t\t\t// (which produces `.components-base-control__label`)\n\t\t\t\t\t\t// rather than passing `label` to `BorderBoxControl`,\n\t\t\t\t\t\t// whose internal `<StyledLabel>` carries no stable\n\t\t\t\t\t\t// className. The inheritance treatment and the\n\t\t\t\t\t\t// local-override reset affordance both target\n\t\t\t\t\t\t// `.components-base-control__label`, so the visible\n\t\t\t\t\t\t// \"Border\" label has to be a `BaseControl` label to\n\t\t\t\t\t\t// receive them.\n\t\t\t\t\t\t//\n\t\t\t\t\t\t// Render it whenever a Shadow control is also present so\n\t\t\t\t\t\t// the two controls stay disambiguated (mirrors the\n\t\t\t\t\t\t// Shadow label's `hasBorderControl` guard below, and\n\t\t\t\t\t\t// trunk's `hideLabelFromVision={ ! hasShadowControl }`),\n\t\t\t\t\t\t// even when inheritance indicators are off (e.g. in\n\t\t\t\t\t\t// Global Styles).\n\t\t\t\t\t\t<BaseControl.VisualLabel as=\"legend\">\n\t\t\t\t\t\t\t{ __( 'Border' ) }\n\t\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t) }\n\t\t\t\t\t<BorderBoxControl\n\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\tenableStyle={ showBorderStyle }\n\t\t\t\t\t\tonChange={ onBorderChange }\n\t\t\t\t\t\tpopoverOffset={ 40 }\n\t\t\t\t\t\tpopoverPlacement=\"left-start\"\n\t\t\t\t\t\tvalue={ border }\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t/>\n\t\t\t\t</InheritanceToolsPanelItem>\n\t\t\t) }\n\t\t\t{ showBorderRadius && (\n\t\t\t\t<InheritanceToolsPanelItem\n\t\t\t\t\t{ ...inheritanceProps(\n\t\t\t\t\t\tisBorderRadiusPlaceholder,\n\t\t\t\t\t\thasBorderRadius() && inheritedBorderRadius !== undefined\n\t\t\t\t\t) }\n\t\t\t\t\thasValue={ hasBorderRadius }\n\t\t\t\t\tlabel={ __( 'Radius' ) }\n\t\t\t\t\thasInlineEndToggle\n\t\t\t\t\tonDeselect={ () => setBorderRadius( undefined ) }\n\t\t\t\t\tisShownByDefault={ defaultControls.radius }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<BorderRadiusControl\n\t\t\t\t\t\tpresets={ settings?.border?.radiusSizes }\n\t\t\t\t\t\tvalues={ borderRadius }\n\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\tsetBorderRadius( newValue || undefined );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t</InheritanceToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasShadowControl && (\n\t\t\t\t<InheritanceToolsPanelItem\n\t\t\t\t\t{ ...inheritanceProps(\n\t\t\t\t\t\tisShadowPlaceholder,\n\t\t\t\t\t\thasShadow() && inheritedShadow !== undefined\n\t\t\t\t\t) }\n\t\t\t\t\tlabel={ __( 'Shadow' ) }\n\t\t\t\t\thasValue={ hasShadow }\n\t\t\t\t\tonDeselect={ resetShadow }\n\t\t\t\t\tisShownByDefault={ defaultControls.shadow }\n\t\t\t\t\t// The shadow toggle renders its own reset affordance (blue\n\t\t\t\t\t// dot for a local override, default reset otherwise) inside\n\t\t\t\t\t// the control, mirroring the color/gradient controls, so the\n\t\t\t\t\t// panel item must not render a second sibling reset dot.\n\t\t\t\t\tshowLocalOverrideActionsInLabel={ false }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t{ hasBorderControl ? (\n\t\t\t\t\t\t<BaseControl.VisualLabel as=\"legend\">\n\t\t\t\t\t\t\t{ __( 'Shadow' ) }\n\t\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t) : null }\n\n\t\t\t\t\t<ShadowPopover\n\t\t\t\t\t\tshadow={ shadow }\n\t\t\t\t\t\tonShadowChange={ setShadowWithInheritedCommit }\n\t\t\t\t\t\tsettings={ settings }\n\t\t\t\t\t\thasLocalValue={ hasShadow() }\n\t\t\t\t\t\thasLocalOverride={ hasShadowLocalOverride }\n\t\t\t\t\t\tonReset={ resetShadow }\n\t\t\t\t\t/>\n\t\t\t\t</InheritanceToolsPanelItem>\n\t\t\t) }\n\t\t</Wrapper>\n\t);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n\tBorderBoxControl,\n\t__experimentalHasSplitBorders as hasSplitBorders,\n\t__experimentalIsDefinedBorder as isDefinedBorder,\n\t__experimentalToolsPanel as ToolsPanel,\n\tBaseControl,\n} from '@wordpress/components';\nimport { useCallback, useMemo } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { getValueFromVariable } from '@wordpress/global-styles-engine';\nimport BorderRadiusControl from '../border-radius-control';\nimport { useColorsPerOrigin } from './hooks';\nimport { useToolsPanelDropdownMenuProps } from './utils';\nimport { setImmutably } from '../../utils/object';\nimport { useBorderPanelLabel } from '../../hooks/border';\nimport { ShadowPopover, useShadowPresets } from './shadow-panel-components';\nimport {\n\tgetInheritanceProps,\n\tInheritanceToolsPanelItem,\n\tisGlobalStylesInheritanceEnabled,\n} from './inheritance';\n\nexport function useHasBorderPanel( settings ) {\n\tconst controls = Object.values( useHasBorderPanelControls( settings ) );\n\treturn controls.some( Boolean );\n}\n\nexport function useHasBorderPanelControls( settings ) {\n\tconst controls = {\n\t\thasBorderColor: useHasBorderColorControl( settings ),\n\t\thasBorderRadius: useHasBorderRadiusControl( settings ),\n\t\thasBorderStyle: useHasBorderStyleControl( settings ),\n\t\thasBorderWidth: useHasBorderWidthControl( settings ),\n\t\thasShadow: useHasShadowControl( settings ),\n\t};\n\n\treturn controls;\n}\n\nfunction useHasBorderColorControl( settings ) {\n\treturn settings?.border?.color;\n}\n\nfunction useHasBorderRadiusControl( settings ) {\n\treturn settings?.border?.radius;\n}\n\nfunction useHasBorderStyleControl( settings ) {\n\treturn settings?.border?.style;\n}\n\nfunction useHasBorderWidthControl( settings ) {\n\treturn settings?.border?.width;\n}\n\nfunction useHasShadowControl( settings ) {\n\tconst shadows = useShadowPresets( settings );\n\treturn !! settings?.shadow && shadows.length > 0;\n}\n\nfunction BorderToolsPanel( {\n\tresetAllFilter,\n\tonChange,\n\tvalue,\n\tpanelId,\n\tchildren,\n\tlabel,\n} ) {\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\tconst resetAll = () => {\n\t\tconst updatedValue = resetAllFilter( value );\n\t\tonChange( updatedValue );\n\t};\n\n\treturn (\n\t\t<ToolsPanel\n\t\t\tlabel={ label }\n\t\t\tresetAll={ resetAll }\n\t\t\tpanelId={ panelId }\n\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t>\n\t\t\t{ children }\n\t\t</ToolsPanel>\n\t);\n}\n\nconst DEFAULT_CONTROLS = {\n\tradius: true,\n\tcolor: true,\n\twidth: true,\n\tshadow: true,\n};\n\nexport default function BorderPanel( {\n\tas: Wrapper = BorderToolsPanel,\n\tvalue,\n\tonChange,\n\tinheritedValue = value,\n\tsettings,\n\tpanelId,\n\tdefaultControls = DEFAULT_CONTROLS,\n\tshowInheritanceLabelIndicators = isGlobalStylesInheritanceEnabled(),\n} ) {\n\tconst colors = useColorsPerOrigin( settings );\n\tconst areCustomSolidsEnabled = settings?.color?.custom;\n\tconst decodeValue = useCallback(\n\t\t( rawValue ) => getValueFromVariable( { settings }, '', rawValue ),\n\t\t[ settings ]\n\t);\n\t// Always keep the layout className (e.g. `single-column`); only the\n\t// inheritance treatment is gated on `showInheritanceLabelIndicators`.\n\tconst inheritanceProps = ( isInherited, hasLocalOverride, className ) =>\n\t\tgetInheritanceProps(\n\t\t\tshowInheritanceLabelIndicators && isInherited,\n\t\t\tshowInheritanceLabelIndicators && hasLocalOverride,\n\t\t\tclassName\n\t\t);\n\tconst encodeColorValue = ( colorValue ) => {\n\t\tconst allColors = colors.flatMap(\n\t\t\t( { colors: originColors } ) => originColors\n\t\t);\n\t\tconst colorObject = allColors.find(\n\t\t\t( { color } ) => color === colorValue\n\t\t);\n\t\treturn colorObject\n\t\t\t? 'var:preset|color|' + colorObject.slug\n\t\t\t: colorValue;\n\t};\n\t// Decode a `border` sub-tree (handles split borders + flat shape).\n\tconst decodeBorder = useCallback(\n\t\t( source ) => {\n\t\t\tif ( ! source ) {\n\t\t\t\treturn undefined;\n\t\t\t}\n\t\t\tif ( hasSplitBorders( source ) ) {\n\t\t\t\tconst out = { ...source };\n\t\t\t\t[ 'top', 'right', 'bottom', 'left' ].forEach( ( side ) => {\n\t\t\t\t\tout[ side ] = {\n\t\t\t\t\t\t...out[ side ],\n\t\t\t\t\t\tcolor: decodeValue( out[ side ]?.color ),\n\t\t\t\t\t};\n\t\t\t\t} );\n\t\t\t\treturn out;\n\t\t\t}\n\t\t\treturn {\n\t\t\t\t...source,\n\t\t\t\tcolor: source.color ? decodeValue( source.color ) : undefined,\n\t\t\t};\n\t\t},\n\t\t[ decodeValue ]\n\t);\n\t// Local-then-inherited: prefer the user's locally-set border (whether\n\t// flat or split) when defined, otherwise fall back to the inherited\n\t// Global Styles border. The merge happens at the sub-tree root, not\n\t// at the leaf level — borders are commonly authored as a single\n\t// affordance in the inspector, so partial leaf merges would be\n\t// surprising.\n\tconst localBorder = useMemo(\n\t\t() => decodeBorder( value?.border ),\n\t\t[ value?.border, decodeBorder ]\n\t);\n\tconst inheritedBorder = useMemo(\n\t\t() => decodeBorder( inheritedValue?.border ),\n\t\t[ inheritedValue?.border, decodeBorder ]\n\t);\n\tconst isBorderPlaceholder =\n\t\t! isDefinedBorder( value?.border ) &&\n\t\t!! inheritedBorder &&\n\t\tisDefinedBorder( inheritedBorder );\n\tconst border = isBorderPlaceholder ? inheritedBorder : localBorder;\n\tconst setBorder = ( newBorder ) =>\n\t\tonChange( { ...value, border: newBorder } );\n\tconst showBorderColor = useHasBorderColorControl( settings );\n\tconst showBorderStyle = useHasBorderStyleControl( settings );\n\tconst showBorderWidth = useHasBorderWidthControl( settings );\n\n\t// Border radius. Display inherited values through the control's `values`\n\t// prop when local values are empty so UnitControl can parse the numeric\n\t// quantity and selected unit normally (e.g. `2.5em` -> `2.5` + `em`).\n\t// `hasBorderRadius` remains local-only, so displaying the inherited value\n\t// does not mark the ToolsPanel item as customised or commit on mount.\n\tconst showBorderRadius = useHasBorderRadiusControl( settings );\n\tconst localBorderRadius = useMemo( () => {\n\t\tif ( typeof value?.border?.radius !== 'object' ) {\n\t\t\treturn decodeValue( value?.border?.radius );\n\t\t}\n\t\treturn {\n\t\t\ttopLeft: decodeValue( value?.border?.radius?.topLeft ),\n\t\t\ttopRight: decodeValue( value?.border?.radius?.topRight ),\n\t\t\tbottomLeft: decodeValue( value?.border?.radius?.bottomLeft ),\n\t\t\tbottomRight: decodeValue( value?.border?.radius?.bottomRight ),\n\t\t};\n\t}, [ value?.border?.radius, decodeValue ] );\n\tconst inheritedBorderRadius = useMemo( () => {\n\t\tconst rawRadius = inheritedValue?.border?.radius;\n\t\tif ( typeof rawRadius !== 'object' ) {\n\t\t\treturn decodeValue( rawRadius );\n\t\t}\n\t\treturn {\n\t\t\ttopLeft: decodeValue( rawRadius?.topLeft ),\n\t\t\ttopRight: decodeValue( rawRadius?.topRight ),\n\t\t\tbottomLeft: decodeValue( rawRadius?.bottomLeft ),\n\t\t\tbottomRight: decodeValue( rawRadius?.bottomRight ),\n\t\t};\n\t}, [ inheritedValue?.border?.radius, decodeValue ] );\n\t// Spread the local border, not the merged display value, or setting a\n\t// radius bakes the inherited border into the local override. Mirror of\n\t// the guard in `onBorderChange`.\n\tconst setBorderRadius = ( newBorderRadius ) =>\n\t\tsetBorder( { ...value?.border, radius: newBorderRadius } );\n\tconst hasBorderRadius = () => {\n\t\tconst borderValues = value?.border?.radius;\n\t\tif ( typeof borderValues === 'object' ) {\n\t\t\treturn Object.entries( borderValues ).some( ( [ , v ] ) => !! v );\n\t\t}\n\t\treturn !! borderValues;\n\t};\n\tconst isBorderRadiusPlaceholder =\n\t\t! hasBorderRadius() &&\n\t\tinheritedBorderRadius !== undefined &&\n\t\tinheritedBorderRadius !== '';\n\t// Build an object value so unlinked-mode shows per-corner inherited\n\t// values. The control accepts either a string or an object; passing the\n\t// object form is correct in both modes (the control collapses to the\n\t// `all`/first corner in linked mode).\n\tconst borderRadius = useMemo( () => {\n\t\tif ( ! isBorderRadiusPlaceholder ) {\n\t\t\treturn localBorderRadius;\n\t\t}\n\t\tif ( typeof inheritedBorderRadius === 'string' ) {\n\t\t\treturn inheritedBorderRadius;\n\t\t}\n\t\tconst obj = inheritedBorderRadius;\n\t\tif ( ! obj ) {\n\t\t\treturn localBorderRadius;\n\t\t}\n\t\tconst all =\n\t\t\tobj.topLeft &&\n\t\t\tobj.topLeft === obj.topRight &&\n\t\t\tobj.topLeft === obj.bottomLeft &&\n\t\t\tobj.topLeft === obj.bottomRight\n\t\t\t\t? obj.topLeft\n\t\t\t\t: undefined;\n\t\treturn { all, ...obj };\n\t}, [\n\t\tisBorderRadiusPlaceholder,\n\t\tlocalBorderRadius,\n\t\tinheritedBorderRadius,\n\t] );\n\tconst hasShadowControl = useHasShadowControl( settings );\n\n\t// Shadow. At rest, the popover toggle button uses the placeholder\n\t// treatment, and the popover preset list pre-selects the inherited shadow.\n\t// The interceptor below recognises the user's \"accept inherited\" click as\n\t// an explicit commit, mirroring the ToggleGroup pattern in the typography\n\t// panel.\n\tconst localShadow = decodeValue( value?.shadow );\n\tconst inheritedShadow = decodeValue( inheritedValue?.shadow );\n\tconst isShadowPlaceholder =\n\t\tlocalShadow === undefined &&\n\t\tinheritedShadow !== undefined &&\n\t\tinheritedShadow !== '';\n\tconst shadow = isShadowPlaceholder ? inheritedShadow : localShadow;\n\t// The presets the popover offers, from every origin. A preset the user\n\t// picked has to be stored as a reference to its CSS variable rather than as\n\t// the value it resolves to today, otherwise it stops tracking later edits\n\t// to the preset. Reading the same list the popover renders is what keeps\n\t// the two in step.\n\tconst shadowPresets = useShadowPresets( settings );\n\tconst setShadow = ( newValue ) => {\n\t\t// The list runs default, theme, custom, so searching backwards picks\n\t\t// the most specific origin when more than one defines the same shadow\n\t\t// value — a newly added custom preset starts out identical to the\n\t\t// `natural` default one, and it is the custom slug the user means.\n\t\tconst slug = shadowPresets.findLast(\n\t\t\t( { shadow: shadowName } ) => shadowName === newValue\n\t\t)?.slug;\n\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tvalue,\n\t\t\t\t[ 'shadow' ],\n\t\t\t\tslug ? `var:preset|shadow|${ slug }` : newValue || undefined\n\t\t\t)\n\t\t);\n\t};\n\t// Display-without-commit interceptor for the shadow preset list. When the\n\t// user is at the at-rest preselect (local is undefined, inherited is the\n\t// active shadow), `ShadowPresets`' default toggle-off behaviour would\n\t// interpret the click on the highlighted preset as `undefined` (clear).\n\t// Re-route it to an explicit commit of the inherited value, so clicking\n\t// the visible preselected preset is the user's \"accept this inherited\n\t// value\" affordance.\n\tconst setShadowWithInheritedCommit = ( newValue ) => {\n\t\tif ( isShadowPlaceholder && newValue === undefined ) {\n\t\t\tsetShadow( inheritedShadow );\n\t\t\treturn;\n\t\t}\n\t\tsetShadow( newValue );\n\t};\n\tconst hasShadow = () => !! value?.shadow;\n\tconst resetShadow = () => setShadow( undefined );\n\t// A local override exists when the user has set a shadow that shadows an\n\t// inherited one. Only then does the toggle render the blue-dot reset\n\t// affordance (mirroring the color/gradient controls); a merely-inherited\n\t// value at rest shows no reset button.\n\tconst hasShadowLocalOverride =\n\t\tshowInheritanceLabelIndicators &&\n\t\thasShadow() &&\n\t\tinheritedShadow !== undefined;\n\n\tconst resetBorder = () => {\n\t\tif ( hasBorderRadius() ) {\n\t\t\treturn setBorder( { radius: value?.border?.radius } );\n\t\t}\n\n\t\tsetBorder( undefined );\n\t};\n\n\tconst onBorderChange = ( newBorder ) => {\n\t\t// Ensure we have a visible border style when a border width or\n\t\t// color is being selected.\n\t\tconst updatedBorder = { ...newBorder };\n\n\t\tif ( hasSplitBorders( updatedBorder ) ) {\n\t\t\t[ 'top', 'right', 'bottom', 'left' ].forEach( ( side ) => {\n\t\t\t\tif ( updatedBorder[ side ] ) {\n\t\t\t\t\tupdatedBorder[ side ] = {\n\t\t\t\t\t\t...updatedBorder[ side ],\n\t\t\t\t\t\tcolor: encodeColorValue( updatedBorder[ side ]?.color ),\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t} );\n\t\t} else if ( updatedBorder ) {\n\t\t\tupdatedBorder.color = encodeColorValue( updatedBorder.color );\n\t\t}\n\n\t\t// As radius is maintained separately to color, style, and width\n\t\t// maintain its value. Read from `value` (local-only) rather than\n\t\t// `border` (the merged display value), otherwise an inherited\n\t\t// radius gets baked into the local override every time the\n\t\t// user touches color/style/width — which both pollutes the\n\t\t// stored attribute and causes the radius `ToolsPanelItem` to\n\t\t// flip into the `has-local-override-from-global-styles` state\n\t\t// even though the user never customised the radius. The\n\t\t// `radius` key must come after the spread so it wins over any\n\t\t// `radius` field forwarded by `BorderBoxControl`'s inner\n\t\t// `BorderControl`, which merges its incoming `value` with the\n\t\t// changed prop. Undefined values here will be cleaned when\n\t\t// global styles are saved.\n\t\tsetBorder( {\n\t\t\t...updatedBorder,\n\t\t\tradius: value?.border?.radius,\n\t\t} );\n\t};\n\n\tconst resetAllFilter = useCallback( ( previousValue ) => {\n\t\treturn {\n\t\t\t...previousValue,\n\t\t\tborder: undefined,\n\t\t\tshadow: undefined,\n\t\t};\n\t}, [] );\n\n\tconst showBorderByDefault =\n\t\tdefaultControls?.color || defaultControls?.width;\n\n\tconst hasBorderControl =\n\t\tshowBorderColor ||\n\t\tshowBorderStyle ||\n\t\tshowBorderWidth ||\n\t\tshowBorderRadius;\n\n\tconst label = useBorderPanelLabel( {\n\t\thasShadowControl,\n\t\thasBorderControl,\n\t} );\n\n\treturn (\n\t\t<Wrapper\n\t\t\tresetAllFilter={ resetAllFilter }\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t\tpanelId={ panelId }\n\t\t\tlabel={ label }\n\t\t>\n\t\t\t{ ( showBorderWidth || showBorderColor ) && (\n\t\t\t\t<InheritanceToolsPanelItem\n\t\t\t\t\t{ ...inheritanceProps(\n\t\t\t\t\t\tisBorderPlaceholder,\n\t\t\t\t\t\tisDefinedBorder( value?.border ) &&\n\t\t\t\t\t\t\t!! inheritedBorder &&\n\t\t\t\t\t\t\tisDefinedBorder( inheritedBorder )\n\t\t\t\t\t) }\n\t\t\t\t\thasValue={ () => isDefinedBorder( value?.border ) }\n\t\t\t\t\tlabel={ __( 'Border' ) }\n\t\t\t\t\tonDeselect={ () => resetBorder() }\n\t\t\t\t\tisShownByDefault={ showBorderByDefault }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t{ ( showInheritanceLabelIndicators ||\n\t\t\t\t\t\thasShadowControl ) && (\n\t\t\t\t\t\t// Render the visible label as `BaseControl.VisualLabel`\n\t\t\t\t\t\t// (which produces `.components-base-control__label`)\n\t\t\t\t\t\t// rather than passing `label` to `BorderBoxControl`,\n\t\t\t\t\t\t// whose internal `<StyledLabel>` carries no stable\n\t\t\t\t\t\t// className. The inheritance treatment and the\n\t\t\t\t\t\t// local-override reset affordance both target\n\t\t\t\t\t\t// `.components-base-control__label`, so the visible\n\t\t\t\t\t\t// \"Border\" label has to be a `BaseControl` label to\n\t\t\t\t\t\t// receive them.\n\t\t\t\t\t\t//\n\t\t\t\t\t\t// Render it whenever a Shadow control is also present so\n\t\t\t\t\t\t// the two controls stay disambiguated (mirrors the\n\t\t\t\t\t\t// Shadow label's `hasBorderControl` guard below, and\n\t\t\t\t\t\t// trunk's `hideLabelFromVision={ ! hasShadowControl }`),\n\t\t\t\t\t\t// even when inheritance indicators are off (e.g. in\n\t\t\t\t\t\t// Global Styles).\n\t\t\t\t\t\t<BaseControl.VisualLabel as=\"legend\">\n\t\t\t\t\t\t\t{ __( 'Border' ) }\n\t\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t) }\n\t\t\t\t\t<BorderBoxControl\n\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\tenableStyle={ showBorderStyle }\n\t\t\t\t\t\tonChange={ onBorderChange }\n\t\t\t\t\t\tpopoverOffset={ 40 }\n\t\t\t\t\t\tpopoverPlacement=\"left-start\"\n\t\t\t\t\t\tvalue={ border }\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t/>\n\t\t\t\t</InheritanceToolsPanelItem>\n\t\t\t) }\n\t\t\t{ showBorderRadius && (\n\t\t\t\t<InheritanceToolsPanelItem\n\t\t\t\t\t{ ...inheritanceProps(\n\t\t\t\t\t\tisBorderRadiusPlaceholder,\n\t\t\t\t\t\thasBorderRadius() && inheritedBorderRadius !== undefined\n\t\t\t\t\t) }\n\t\t\t\t\thasValue={ hasBorderRadius }\n\t\t\t\t\tlabel={ __( 'Radius' ) }\n\t\t\t\t\thasInlineEndToggle\n\t\t\t\t\tonDeselect={ () => setBorderRadius( undefined ) }\n\t\t\t\t\tisShownByDefault={ defaultControls.radius }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<BorderRadiusControl\n\t\t\t\t\t\tpresets={ settings?.border?.radiusSizes }\n\t\t\t\t\t\tvalues={ borderRadius }\n\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\tsetBorderRadius( newValue || undefined );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t</InheritanceToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasShadowControl && (\n\t\t\t\t<InheritanceToolsPanelItem\n\t\t\t\t\t{ ...inheritanceProps(\n\t\t\t\t\t\tisShadowPlaceholder,\n\t\t\t\t\t\thasShadow() && inheritedShadow !== undefined\n\t\t\t\t\t) }\n\t\t\t\t\tlabel={ __( 'Shadow' ) }\n\t\t\t\t\thasValue={ hasShadow }\n\t\t\t\t\tonDeselect={ resetShadow }\n\t\t\t\t\tisShownByDefault={ defaultControls.shadow }\n\t\t\t\t\t// The shadow toggle renders its own reset affordance (blue\n\t\t\t\t\t// dot for a local override, default reset otherwise) inside\n\t\t\t\t\t// the control, mirroring the color/gradient controls, so the\n\t\t\t\t\t// panel item must not render a second sibling reset dot.\n\t\t\t\t\tshowLocalOverrideActionsInLabel={ false }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t{ hasBorderControl ? (\n\t\t\t\t\t\t<BaseControl.VisualLabel as=\"legend\">\n\t\t\t\t\t\t\t{ __( 'Shadow' ) }\n\t\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t) : null }\n\n\t\t\t\t\t<ShadowPopover\n\t\t\t\t\t\tshadow={ shadow }\n\t\t\t\t\t\tonShadowChange={ setShadowWithInheritedCommit }\n\t\t\t\t\t\tsettings={ settings }\n\t\t\t\t\t\thasLocalValue={ hasShadow() }\n\t\t\t\t\t\thasLocalOverride={ hasShadowLocalOverride }\n\t\t\t\t\t\tonReset={ resetShadow }\n\t\t\t\t\t/>\n\t\t\t\t</InheritanceToolsPanelItem>\n\t\t\t) }\n\t\t</Wrapper>\n\t);\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/components/global-styles/color-panel.mjs

@@ -97,6 +97,7 @@ function ColorPanel({
   label,
   children,
   contrastWarning,
+  additionalElements,
   showInheritanceLabelIndicators = isGlobalStylesInheritanceEnabled()
 }) {
   const {
@@ -203,9 +204,20 @@ function ColorPanel({
         name: "h6",
         label: __("H6"),
         showPanel: showHeadingPanel
-      }
+      },
+      ...additionalElements?.map((element) => ({
+        ...element,
+        showPanel: hasSolidColors || hasGradientColors
+      })) ?? []
     ],
-    [showCaptionPanel, showButtonPanel, showHeadingPanel]
+    [
+      additionalElements,
+      hasGradientColors,
+      hasSolidColors,
+      showCaptionPanel,
+      showButtonPanel,
+      showHeadingPanel
+    ]
   );
   const resetAllFilter = useCallback(
     (previousValue) => {