@wordpress/block-editor 15.21.1 → 15.22.0

package/build/components/dimensions-tool/index.cjs

@@ -49,8 +49,7 @@ function DimensionsTool({
   // Match CSS default value for aspect-ratio.
   scaleOptions,
   // Default options handled by ScaleTool.
-  defaultScale = "fill",
-  // Match CSS default value for object-fit.
+  defaultScale = "cover",
   unitsOptions,
   // Default options handled by UnitControl.
   tools = ["aspectRatio", "widthHeight", "scale"]
@@ -58,10 +57,11 @@ function DimensionsTool({
   const width = value.width === void 0 || value.width === "auto" ? null : value.width;
   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 || value.scale === "fill" ? null : value.scale;
+  const scale = value.scale === void 0 ? null : value.scale;
   const [lastScale, setLastScale] = (0, import_element.useState)(scale);
   const [lastAspectRatio, setLastAspectRatio] = (0, import_element.useState)(aspectRatio);
-  const aspectRatioValue = width && height ? "custom" : lastAspectRatio;
+  const hasCustomAspectRatio = !!(width && height);
+  const aspectRatioValue = hasCustomAspectRatio ? "custom" : aspectRatio;
   const showScaleControl = aspectRatio || width && height;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     tools.includes("aspectRatio") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -142,7 +142,6 @@ function DimensionsTool({
         value: lastScale,
         onChange: (nextScale) => {
           const nextValue = { ...value };
-          nextScale = nextScale === "fill" ? null : nextScale;
           setLastScale(nextScale);
           if (!nextScale) {
             delete nextValue.scale;

package/build/components/dimensions-tool/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dimensions-tool/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\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 = 'fill', // Match CSS default value for object-fit.\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 =\n\t\tvalue.scale === undefined || value.scale === 'fill'\n\t\t\t? null\n\t\t\t: 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\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 = width && height ? 'custom' : lastAspectRatio;\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\t// 'fill' is CSS default, so it gets treated as null.\n\t\t\t\t\t\tnextScale = nextScale === 'fill' ? null : nextScale;\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": ["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\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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",
   "names": ["AspectRatioTool", "WidthHeightTool", "ScaleTool"]
 }

package/build/components/dimensions-tool/scale-tool.cjs

@@ -66,7 +66,7 @@ function ScaleTool({
   defaultValue = DEFAULT_SCALE_OPTIONS[0].value,
   isShownByDefault = true
 }) {
-  const displayValue = value ?? "fill";
+  const displayValue = value ?? defaultValue;
   const scaleHelp = (0, import_element.useMemo)(() => {
     return options.reduce((acc, option) => {
       acc[option.value] = option.help;

package/build/components/dimensions-tool/scale-tool.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dimensions-tool/scale-tool.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n} from '@wordpress/components';\nimport { useMemo } from '@wordpress/element';\nimport { __, _x } from '@wordpress/i18n';\n\n/**\n * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps\n */\n\n/**\n * The descriptions are purposely made generic as object-fit could be used for\n * any replaced element. Provide your own set of options if you need different\n * help text or labels.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element\n *\n * @type {SelectControlProps[]}\n */\nconst DEFAULT_SCALE_OPTIONS = [\n\t{\n\t\tvalue: 'fill',\n\t\tlabel: _x( 'Fill', 'Scale option for dimensions control' ),\n\t\thelp: __( 'Fill the space by stretching the content.' ),\n\t},\n\t{\n\t\tvalue: 'contain',\n\t\tlabel: _x( 'Contain', 'Scale option for dimensions control' ),\n\t\thelp: __( 'Fit the content to the space without clipping.' ),\n\t},\n\t{\n\t\tvalue: 'cover',\n\t\tlabel: _x( 'Cover', 'Scale option for dimensions control' ),\n\t\thelp: __( \"Fill the space by clipping what doesn't fit.\" ),\n\t},\n\t{\n\t\tvalue: 'none',\n\t\tlabel: _x( 'None', 'Scale option for dimensions control' ),\n\t\thelp: __(\n\t\t\t'Do not adjust the sizing of the content. Content that is too large will be clipped, and content that is too small will have additional padding.'\n\t\t),\n\t},\n\t{\n\t\tvalue: 'scale-down',\n\t\tlabel: _x( 'Scale down', 'Scale option for dimensions control' ),\n\t\thelp: __(\n\t\t\t'Scale down the content to fit the space if it is too big. Content that is too small will have additional padding.'\n\t\t),\n\t},\n];\n\n/**\n * @callback ScaleToolPropsOnChange\n * @param {string} nextValue New scale value.\n * @return {void}\n */\n\n/**\n * @typedef {Object} ScaleToolProps\n * @property {string}                 [panelId]               ID of the panel that contains the controls.\n * @property {string}                 [value]                 Current scale value.\n * @property {ScaleToolPropsOnChange} [onChange]              Callback to update the scale value.\n * @property {SelectControlProps[]}   [options]               Scale options.\n * @property {string}                 [defaultValue]          Default scale value.\n * @property {boolean}                [showControl=true]      Whether to show the control.\n * @property {boolean}                [isShownByDefault=true] Whether the tool panel is shown by default.\n */\n\n/**\n * A tool to select the CSS object-fit property for the image.\n *\n * @param {ScaleToolProps} props\n *\n * @return {React.ReactElement} The scale tool.\n */\nexport default function ScaleTool( {\n\tpanelId,\n\tvalue,\n\tonChange,\n\toptions = DEFAULT_SCALE_OPTIONS,\n\tdefaultValue = DEFAULT_SCALE_OPTIONS[ 0 ].value,\n\tisShownByDefault = true,\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 ?? 'fill';\n\n\tconst scaleHelp = useMemo( () => {\n\t\treturn options.reduce( ( acc, option ) => {\n\t\t\tacc[ option.value ] = option.help;\n\t\t\treturn acc;\n\t\t}, {} );\n\t}, [ options ] );\n\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\tlabel={ _x( 'Scale', 'Image scaling options' ) }\n\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\thasValue={ () => displayValue !== defaultValue }\n\t\t\tonDeselect={ () => onChange( defaultValue ) }\n\t\t\tpanelId={ panelId }\n\t\t>\n\t\t\t<ToggleGroupControl\n\t\t\t\tlabel={ _x( 'Scale', 'Image scaling options' ) }\n\t\t\t\tisBlock\n\t\t\t\thelp={ scaleHelp[ displayValue ] }\n\t\t\t\tvalue={ displayValue }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tsize=\"__unstable-large\"\n\t\t\t>\n\t\t\t\t{ options.map( ( option ) => (\n\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\tkey={ option.value }\n\t\t\t\t\t\t{ ...option }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</ToggleGroupControl>\n\t\t</ToolsPanelItem>\n\t);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAIO;AACP,qBAAwB;AACxB,kBAAuB;AA0GlB;AA3FL,IAAM,wBAAwB;AAAA,EAC7B;AAAA,IACC,OAAO;AAAA,IACP,WAAO,gBAAI,QAAQ,qCAAsC;AAAA,IACzD,UAAM,gBAAI,2CAA4C;AAAA,EACvD;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,WAAO,gBAAI,WAAW,qCAAsC;AAAA,IAC5D,UAAM,gBAAI,gDAAiD;AAAA,EAC5D;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,WAAO,gBAAI,SAAS,qCAAsC;AAAA,IAC1D,UAAM,gBAAI,8CAA+C;AAAA,EAC1D;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,WAAO,gBAAI,QAAQ,qCAAsC;AAAA,IACzD,UAAM;AAAA,MACL;AAAA,IACD;AAAA,EACD;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,WAAO,gBAAI,cAAc,qCAAsC;AAAA,IAC/D,UAAM;AAAA,MACL;AAAA,IACD;AAAA,EACD;AACD;AA0Be,SAAR,UAA4B;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,eAAe,sBAAuB,CAAE,EAAE;AAAA,EAC1C,mBAAmB;AACpB,GAAI;AAEH,QAAM,eAAe,SAAS;AAE9B,QAAM,gBAAY,wBAAS,MAAM;AAChC,WAAO,QAAQ,OAAQ,CAAE,KAAK,WAAY;AACzC,UAAK,OAAO,KAAM,IAAI,OAAO;AAC7B,aAAO;AAAA,IACR,GAAG,CAAC,CAAE;AAAA,EACP,GAAG,CAAE,OAAQ,CAAE;AAEf,SACC;AAAA,IAAC,kBAAAA;AAAA,IAAA;AAAA,MACA,WAAQ,gBAAI,SAAS,uBAAwB;AAAA,MAC7C;AAAA,MACA,UAAW,MAAM,iBAAiB;AAAA,MAClC,YAAa,MAAM,SAAU,YAAa;AAAA,MAC1C;AAAA,MAEA;AAAA,QAAC,kBAAAC;AAAA,QAAA;AAAA,UACA,WAAQ,gBAAI,SAAS,uBAAwB;AAAA,UAC7C,SAAO;AAAA,UACP,MAAO,UAAW,YAAa;AAAA,UAC/B,OAAQ;AAAA,UACR;AAAA,UACA,MAAK;AAAA,UAEH,kBAAQ,IAAK,CAAE,WAChB;AAAA,YAAC,kBAAAC;AAAA,YAAA;AAAA,cAEE,GAAG;AAAA;AAAA,YADC,OAAO;AAAA,UAEd,CACC;AAAA;AAAA,MACH;AAAA;AAAA,EACD;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n} from '@wordpress/components';\nimport { useMemo } from '@wordpress/element';\nimport { __, _x } from '@wordpress/i18n';\n\n/**\n * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps\n */\n\n/**\n * The descriptions are purposely made generic as object-fit could be used for\n * any replaced element. Provide your own set of options if you need different\n * help text or labels.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element\n *\n * @type {SelectControlProps[]}\n */\nconst DEFAULT_SCALE_OPTIONS = [\n\t{\n\t\tvalue: 'fill',\n\t\tlabel: _x( 'Fill', 'Scale option for dimensions control' ),\n\t\thelp: __( 'Fill the space by stretching the content.' ),\n\t},\n\t{\n\t\tvalue: 'contain',\n\t\tlabel: _x( 'Contain', 'Scale option for dimensions control' ),\n\t\thelp: __( 'Fit the content to the space without clipping.' ),\n\t},\n\t{\n\t\tvalue: 'cover',\n\t\tlabel: _x( 'Cover', 'Scale option for dimensions control' ),\n\t\thelp: __( \"Fill the space by clipping what doesn't fit.\" ),\n\t},\n\t{\n\t\tvalue: 'none',\n\t\tlabel: _x( 'None', 'Scale option for dimensions control' ),\n\t\thelp: __(\n\t\t\t'Do not adjust the sizing of the content. Content that is too large will be clipped, and content that is too small will have additional padding.'\n\t\t),\n\t},\n\t{\n\t\tvalue: 'scale-down',\n\t\tlabel: _x( 'Scale down', 'Scale option for dimensions control' ),\n\t\thelp: __(\n\t\t\t'Scale down the content to fit the space if it is too big. Content that is too small will have additional padding.'\n\t\t),\n\t},\n];\n\n/**\n * @callback ScaleToolPropsOnChange\n * @param {string} nextValue New scale value.\n * @return {void}\n */\n\n/**\n * @typedef {Object} ScaleToolProps\n * @property {string}                 [panelId]               ID of the panel that contains the controls.\n * @property {string}                 [value]                 Current scale value.\n * @property {ScaleToolPropsOnChange} [onChange]              Callback to update the scale value.\n * @property {SelectControlProps[]}   [options]               Scale options.\n * @property {string}                 [defaultValue]          Default scale value.\n * @property {boolean}                [showControl=true]      Whether to show the control.\n * @property {boolean}                [isShownByDefault=true] Whether the tool panel is shown by default.\n */\n\n/**\n * A tool to select the CSS object-fit property for the image.\n *\n * @param {ScaleToolProps} props\n *\n * @return {React.ReactElement} The scale tool.\n */\nexport default function ScaleTool( {\n\tpanelId,\n\tvalue,\n\tonChange,\n\toptions = DEFAULT_SCALE_OPTIONS,\n\tdefaultValue = DEFAULT_SCALE_OPTIONS[ 0 ].value,\n\tisShownByDefault = true,\n} ) {\n\tconst displayValue = value ?? defaultValue;\n\n\tconst scaleHelp = useMemo( () => {\n\t\treturn options.reduce( ( acc, option ) => {\n\t\t\tacc[ option.value ] = option.help;\n\t\t\treturn acc;\n\t\t}, {} );\n\t}, [ options ] );\n\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\tlabel={ _x( 'Scale', 'Image scaling options' ) }\n\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\thasValue={ () => displayValue !== defaultValue }\n\t\t\tonDeselect={ () => onChange( defaultValue ) }\n\t\t\tpanelId={ panelId }\n\t\t>\n\t\t\t<ToggleGroupControl\n\t\t\t\tlabel={ _x( 'Scale', 'Image scaling options' ) }\n\t\t\t\tisBlock\n\t\t\t\thelp={ scaleHelp[ displayValue ] }\n\t\t\t\tvalue={ displayValue }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tsize=\"__unstable-large\"\n\t\t\t>\n\t\t\t\t{ options.map( ( option ) => (\n\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\tkey={ option.value }\n\t\t\t\t\t\t{ ...option }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</ToggleGroupControl>\n\t\t</ToolsPanelItem>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAIO;AACP,qBAAwB;AACxB,kBAAuB;AAyGlB;AA1FL,IAAM,wBAAwB;AAAA,EAC7B;AAAA,IACC,OAAO;AAAA,IACP,WAAO,gBAAI,QAAQ,qCAAsC;AAAA,IACzD,UAAM,gBAAI,2CAA4C;AAAA,EACvD;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,WAAO,gBAAI,WAAW,qCAAsC;AAAA,IAC5D,UAAM,gBAAI,gDAAiD;AAAA,EAC5D;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,WAAO,gBAAI,SAAS,qCAAsC;AAAA,IAC1D,UAAM,gBAAI,8CAA+C;AAAA,EAC1D;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,WAAO,gBAAI,QAAQ,qCAAsC;AAAA,IACzD,UAAM;AAAA,MACL;AAAA,IACD;AAAA,EACD;AAAA,EACA;AAAA,IACC,OAAO;AAAA,IACP,WAAO,gBAAI,cAAc,qCAAsC;AAAA,IAC/D,UAAM;AAAA,MACL;AAAA,IACD;AAAA,EACD;AACD;AA0Be,SAAR,UAA4B;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,eAAe,sBAAuB,CAAE,EAAE;AAAA,EAC1C,mBAAmB;AACpB,GAAI;AACH,QAAM,eAAe,SAAS;AAE9B,QAAM,gBAAY,wBAAS,MAAM;AAChC,WAAO,QAAQ,OAAQ,CAAE,KAAK,WAAY;AACzC,UAAK,OAAO,KAAM,IAAI,OAAO;AAC7B,aAAO;AAAA,IACR,GAAG,CAAC,CAAE;AAAA,EACP,GAAG,CAAE,OAAQ,CAAE;AAEf,SACC;AAAA,IAAC,kBAAAA;AAAA,IAAA;AAAA,MACA,WAAQ,gBAAI,SAAS,uBAAwB;AAAA,MAC7C;AAAA,MACA,UAAW,MAAM,iBAAiB;AAAA,MAClC,YAAa,MAAM,SAAU,YAAa;AAAA,MAC1C;AAAA,MAEA;AAAA,QAAC,kBAAAC;AAAA,QAAA;AAAA,UACA,WAAQ,gBAAI,SAAS,uBAAwB;AAAA,UAC7C,SAAO;AAAA,UACP,MAAO,UAAW,YAAa;AAAA,UAC/B,OAAQ;AAAA,UACR;AAAA,UACA,MAAK;AAAA,UAEH,kBAAQ,IAAK,CAAE,WAChB;AAAA,YAAC,kBAAAC;AAAA,YAAA;AAAA,cAEE,GAAG;AAAA;AAAA,YADC,OAAO;AAAA,UAEd,CACC;AAAA;AAAA,MACH;AAAA;AAAA,EACD;AAEF;",
   "names": ["ToolsPanelItem", "ToggleGroupControl", "ToggleGroupControlOption"]
 }

package/build/components/global-styles/background-panel.cjs

@@ -30,10 +30,13 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // packages/block-editor/src/components/global-styles/background-panel.js
 var background_panel_exports = {};
 __export(background_panel_exports, {
+  BackgroundToolsPanel: () => BackgroundToolsPanel,
   default: () => BackgroundImagePanel,
+  hasBackgroundColorValue: () => hasBackgroundColorValue,
   hasBackgroundGradientValue: () => hasBackgroundGradientValue,
   hasBackgroundImageValue: () => hasBackgroundImageValue,
   hasBackgroundSizeValue: () => hasBackgroundSizeValue,
+  hasLegacyColorGradientValue: () => hasLegacyColorGradientValue,
   useHasBackgroundControl: () => useHasBackgroundControl,
   useHasBackgroundPanel: () => useHasBackgroundPanel
 });
@@ -41,23 +44,26 @@ module.exports = __toCommonJS(background_panel_exports);
 var import_components = require("@wordpress/components");
 var import_element = require("@wordpress/element");
 var import_i18n = require("@wordpress/i18n");
-var import_global_styles_engine = require("@wordpress/global-styles-engine");
 var import_background_image_control = __toESM(require("../background-image-control/index.cjs"));
+var import_color_gradient_dropdown_item = __toESM(require("./color-gradient-dropdown-item.cjs"));
 var import_color_panel = require("./color-panel.cjs");
 var import_hooks = require("./hooks.cjs");
 var import_utils = require("./utils.cjs");
 var import_object = require("../../utils/object.cjs");
+var import_color_values = require("../../utils/color-values.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 var DEFAULT_CONTROLS = {
   backgroundImage: true,
+  backgroundColor: true,
   gradient: true
 };
 function useHasBackgroundControl(settings, feature) {
   return settings?.background?.[feature];
 }
 function useHasBackgroundPanel(settings) {
+  const hasBackgroundColor = (0, import_color_panel.useHasBackgroundColorPanel)(settings);
   const { backgroundImage, gradient } = settings?.background || {};
-  return backgroundImage || gradient;
+  return backgroundImage || gradient || hasBackgroundColor;
 }
 function hasBackgroundSizeValue(style) {
   return style?.background?.backgroundPosition !== void 0 || style?.background?.backgroundSize !== void 0;
@@ -69,6 +75,12 @@ function hasBackgroundImageValue(style) {
 function hasBackgroundGradientValue(style) {
   return "string" === typeof style?.background?.gradient && style?.background?.gradient !== "";
 }
+function hasBackgroundColorValue(style) {
+  return !!style?.color?.background;
+}
+function hasLegacyColorGradientValue(style) {
+  return !!style?.color?.gradient;
+}
 function BackgroundToolsPanel({
   resetAllFilter,
   onChange,
@@ -101,51 +113,63 @@ function BackgroundImagePanel({
   as: Wrapper = BackgroundToolsPanel,
   value,
   onChange,
-  inheritedValue,
+  inheritedValue = value,
   settings,
   panelId,
   defaultControls = DEFAULT_CONTROLS,
   defaultValues = {},
-  headerLabel = (0, import_i18n.__)("Background")
+  headerLabel = (0, import_i18n.__)("Background"),
+  contrastWarning
 }) {
-  const gradients = (0, import_hooks.useGradientsPerOrigin)(settings);
-  const areCustomGradientsEnabled = settings?.color?.customGradient;
-  const hasGradientColors = gradients.length > 0 || areCustomGradientsEnabled;
+  const {
+    colors,
+    gradients,
+    allColors,
+    areCustomSolidsEnabled,
+    areCustomGradientsEnabled,
+    hasSolidColors,
+    hasGradientColors,
+    decodeValue,
+    encodeGradientValue
+  } = (0, import_hooks.useColorGradientSettings)(settings);
   const hasBackgroundGradientControl = useHasBackgroundControl(
     settings,
     "gradient"
   );
+  const hasColorPanelBackgroundSupport = (0, import_color_panel.useHasBackgroundColorPanel)(settings);
+  const showBackgroundColorControl = hasColorPanelBackgroundSupport && hasSolidColors;
   const showBackgroundGradientControl = hasGradientColors && hasBackgroundGradientControl;
+  const showLegacyColorGradientControl = hasColorPanelBackgroundSupport && hasGradientColors && !hasBackgroundGradientControl;
   const showBackgroundImageControl = useHasBackgroundControl(
     settings,
     "backgroundImage"
   );
   const resetAllFilter = (0, import_element.useCallback)(
     (previousValue) => {
+      const clearsColorBackground = showBackgroundColorControl;
+      const clearsColorGradient = hasBackgroundGradientControl || showLegacyColorGradientControl;
+      if (!clearsColorBackground && !clearsColorGradient) {
+        return { ...previousValue, background: {} };
+      }
       return {
         ...previousValue,
         background: {},
-        color: hasBackgroundGradientControl ? {
+        color: {
           ...previousValue?.color,
-          gradient: void 0
-        } : previousValue?.color
+          ...clearsColorBackground && { background: void 0 },
+          ...clearsColorGradient && { gradient: void 0 }
+        }
       };
     },
-    [hasBackgroundGradientControl]
+    [
+      hasBackgroundGradientControl,
+      showBackgroundColorControl,
+      showLegacyColorGradientControl
+    ]
   );
-  if (!showBackgroundGradientControl && !showBackgroundImageControl) {
+  if (!showBackgroundImageControl && !showBackgroundColorControl && !showBackgroundGradientControl && !showLegacyColorGradientControl) {
     return null;
   }
-  const decodeValue = (rawValue) => (0, import_global_styles_engine.getValueFromVariable)({ settings }, "", rawValue);
-  const encodeGradientValue = (gradientValue) => {
-    const allGradients = gradients.flatMap(
-      ({ gradients: originGradients }) => originGradients
-    );
-    const gradientObject = allGradients.find(
-      ({ gradient }) => gradient === gradientValue
-    );
-    return gradientObject ? "var:preset|gradient|" + gradientObject.slug : gradientValue;
-  };
   const resetBackground = () => onChange(
     (0, import_object.setImmutably)(
       value,
@@ -162,6 +186,42 @@ function BackgroundImagePanel({
     newValue = (0, import_object.setImmutably)(newValue, ["color", "gradient"], void 0);
     onChange(newValue);
   };
+  const backgroundColor = decodeValue(inheritedValue?.color?.background);
+  const userBackgroundColor = decodeValue(value?.color?.background);
+  const setBackgroundColor = (newColor, newSlug) => {
+    const newValue = (0, import_object.setImmutably)(
+      value,
+      ["color", "background"],
+      (0, import_color_values.encodeColorValueWithPalette)(allColors, newColor, newSlug)
+    );
+    if (showLegacyColorGradientControl) {
+      newValue.color.gradient = void 0;
+    }
+    onChange(newValue);
+  };
+  const resetBackgroundColor = () => {
+    const newValue = (0, import_object.setImmutably)(
+      value,
+      ["color", "background"],
+      void 0
+    );
+    if (showLegacyColorGradientControl) {
+      newValue.color.gradient = void 0;
+    }
+    onChange(newValue);
+  };
+  const legacyColorGradient = decodeValue(inheritedValue?.color?.gradient);
+  const userLegacyColorGradient = decodeValue(value?.color?.gradient);
+  const setLegacyColorGradient = (newGradient) => {
+    const newValue = (0, import_object.setImmutably)(
+      value,
+      ["color", "gradient"],
+      encodeGradientValue(newGradient)
+    );
+    newValue.color.background = void 0;
+    onChange(newValue);
+  };
+  const resetLegacyColorGradient = () => onChange((0, import_object.setImmutably)(value, ["color", "gradient"], void 0));
   const currentGradient = decodeValue(
     value?.background?.gradient ?? value?.color?.gradient
   );
@@ -189,7 +249,7 @@ function BackgroundImagePanel({
         showBackgroundImageControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_components.__experimentalToolsPanelItem,
           {
-            className: "block-editor-background-panel__item",
+            className: "block-editor-color-gradient-item",
             hasValue: () => hasBackgroundImageValue(value),
             label: (0, import_i18n.__)("Image"),
             onDeselect: resetBackground,
@@ -208,10 +268,48 @@ function BackgroundImagePanel({
             )
           }
         ),
+        showBackgroundColorControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_color_gradient_dropdown_item.default,
+          {
+            label: (0, import_i18n.__)("Color"),
+            hasValue: () => hasBackgroundColorValue(value),
+            resetValue: resetBackgroundColor,
+            isShownByDefault: defaultControls.backgroundColor,
+            indicators: [userBackgroundColor ?? backgroundColor],
+            contrastWarning,
+            tabs: [
+              {
+                key: "background",
+                label: (0, import_i18n.__)("Color"),
+                inheritedValue: userBackgroundColor ?? backgroundColor,
+                // Resolve the slug from the same source as the
+                // displayed value (user value first, then the
+                // inherited fallback). For a block instance the
+                // selection lives in `value` while `inheritedValue`
+                // only holds the global styles fallback, so reading
+                // the slug from `inheritedValue` alone would miss it
+                // and two same-hex presets would both appear selected.
+                inheritedSlug: (0, import_color_values.extractPresetSlug)(
+                  value?.color?.background,
+                  "color"
+                ) ?? (0, import_color_values.extractPresetSlug)(
+                  inheritedValue?.color?.background,
+                  "color"
+                ),
+                setValue: setBackgroundColor,
+                userValue: userBackgroundColor
+              }
+            ],
+            colorGradientControlSettings: {
+              colors,
+              disableCustomColors: !areCustomSolidsEnabled
+            },
+            panelId
+          }
+        ),
         showBackgroundGradientControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_color_panel.ColorPanelDropdown,
+          import_color_gradient_dropdown_item.default,
           {
-            className: "block-editor-background-panel__item",
             label: (0, import_i18n.__)("Gradient"),
             hasValue: () => hasBackgroundGradientValue(value),
             resetValue: resetGradient,
@@ -233,6 +331,33 @@ function BackgroundImagePanel({
             },
             panelId
           }
+        ),
+        showLegacyColorGradientControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_color_gradient_dropdown_item.default,
+          {
+            label: (0, import_i18n.__)("Gradient"),
+            hasValue: () => hasLegacyColorGradientValue(value),
+            resetValue: resetLegacyColorGradient,
+            isShownByDefault: defaultControls.gradient,
+            indicators: [
+              userLegacyColorGradient ?? legacyColorGradient
+            ],
+            tabs: [
+              {
+                key: "gradient",
+                label: (0, import_i18n.__)("Gradient"),
+                inheritedValue: userLegacyColorGradient ?? legacyColorGradient,
+                setValue: setLegacyColorGradient,
+                userValue: userLegacyColorGradient,
+                isGradient: true
+              }
+            ],
+            colorGradientControlSettings: {
+              gradients,
+              disableCustomGradients: !areCustomGradientsEnabled
+            },
+            panelId
+          }
         )
       ]
     }
@@ -240,9 +365,12 @@ function BackgroundImagePanel({
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  BackgroundToolsPanel,
+  hasBackgroundColorValue,
   hasBackgroundGradientValue,
   hasBackgroundImageValue,
   hasBackgroundSizeValue,
+  hasLegacyColorGradientValue,
   useHasBackgroundControl,
   useHasBackgroundPanel
 });

package/build/components/global-styles/background-panel.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/global-styles/background-panel.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { getValueFromVariable } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport BackgroundImageControl from '../background-image-control';\nimport { ColorPanelDropdown } from './color-panel';\nimport { useGradientsPerOrigin } from './hooks';\nimport { useToolsPanelDropdownMenuProps } from './utils';\nimport { setImmutably } from '../../utils/object';\n\nconst DEFAULT_CONTROLS = {\n\tbackgroundImage: true,\n\tgradient: true,\n};\n\n/**\n * Checks site settings to see if the requested feature's control may be used.\n *\n * @param {Object} settings Site settings.\n * @param {string} feature  Background feature to check.\n * @return {boolean}        Whether site settings has activated background panel.\n */\nexport function useHasBackgroundControl( settings, feature ) {\n\treturn settings?.background?.[ feature ];\n}\n\n/**\n * Checks site settings to see if the background panel may be used.\n * `settings.background.backgroundSize` exists also,\n * but can only be used if settings?.background?.backgroundImage is `true`.\n *\n * @param {Object} settings Site settings\n * @return {boolean}        Whether site settings has activated background panel.\n */\nexport function useHasBackgroundPanel( settings ) {\n\tconst { backgroundImage, gradient } = settings?.background || {};\n\treturn backgroundImage || gradient;\n}\n\n/**\n * Checks if there is a current value in the background size block support\n * attributes. Background size values include background size as well\n * as background position.\n *\n * @param {Object} style Style attribute.\n * @return {boolean}     Whether the block has a background size value set.\n */\nexport function hasBackgroundSizeValue( style ) {\n\treturn (\n\t\tstyle?.background?.backgroundPosition !== undefined ||\n\t\tstyle?.background?.backgroundSize !== undefined\n\t);\n}\n\n/**\n * Checks if there is a current value in the background image block support\n * attributes.\n *\n * @param {Object} style Style attribute.\n * @return {boolean}     Whether the block has a background image value set.\n */\nexport function hasBackgroundImageValue( style ) {\n\treturn (\n\t\t!! style?.background?.backgroundImage?.id ||\n\t\t// Supports url() string values in theme.json.\n\t\t'string' === typeof style?.background?.backgroundImage ||\n\t\t!! style?.background?.backgroundImage?.url\n\t);\n}\n\n/**\n * Checks if there is a current value in the background gradient block support\n * attributes.\n *\n * @param {Object} style Style attribute.\n * @return {boolean}     Whether the block has a background gradient value set.\n */\nexport function hasBackgroundGradientValue( style ) {\n\treturn (\n\t\t'string' === typeof style?.background?.gradient &&\n\t\tstyle?.background?.gradient !== ''\n\t);\n}\n\nfunction BackgroundToolsPanel( {\n\tresetAllFilter,\n\tonChange,\n\tvalue,\n\tpanelId,\n\tchildren,\n\theaderLabel,\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={ headerLabel }\n\t\t\tresetAll={ resetAll }\n\t\t\tpanelId={ panelId }\n\t\t\thasInnerWrapper\n\t\t\tclassName=\"background-block-support-panel\"\n\t\t\t__experimentalFirstVisibleItemClass=\"first\"\n\t\t\t__experimentalLastVisibleItemClass=\"last\"\n\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t>\n\t\t\t<div className=\"background-block-support-panel__inner-wrapper\">\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t</ToolsPanel>\n\t);\n}\n\nexport default function BackgroundImagePanel( {\n\tas: Wrapper = BackgroundToolsPanel,\n\tvalue,\n\tonChange,\n\tinheritedValue,\n\tsettings,\n\tpanelId,\n\tdefaultControls = DEFAULT_CONTROLS,\n\tdefaultValues = {},\n\theaderLabel = __( 'Background' ),\n} ) {\n\tconst gradients = useGradientsPerOrigin( settings );\n\tconst areCustomGradientsEnabled = settings?.color?.customGradient;\n\tconst hasGradientColors = gradients.length > 0 || areCustomGradientsEnabled;\n\n\tconst hasBackgroundGradientControl = useHasBackgroundControl(\n\t\tsettings,\n\t\t'gradient'\n\t);\n\tconst showBackgroundGradientControl =\n\t\thasGradientColors && hasBackgroundGradientControl;\n\tconst showBackgroundImageControl = useHasBackgroundControl(\n\t\tsettings,\n\t\t'backgroundImage'\n\t);\n\n\tconst resetAllFilter = useCallback(\n\t\t( previousValue ) => {\n\t\t\treturn {\n\t\t\t\t...previousValue,\n\t\t\t\tbackground: {},\n\t\t\t\tcolor: hasBackgroundGradientControl\n\t\t\t\t\t? {\n\t\t\t\t\t\t\t...previousValue?.color,\n\t\t\t\t\t\t\tgradient: undefined,\n\t\t\t\t\t  }\n\t\t\t\t\t: previousValue?.color,\n\t\t\t};\n\t\t},\n\t\t[ hasBackgroundGradientControl ]\n\t);\n\n\tif ( ! showBackgroundGradientControl && ! showBackgroundImageControl ) {\n\t\treturn null;\n\t}\n\n\tconst decodeValue = ( rawValue ) =>\n\t\tgetValueFromVariable( { settings }, '', rawValue );\n\tconst encodeGradientValue = ( gradientValue ) => {\n\t\tconst allGradients = gradients.flatMap(\n\t\t\t( { gradients: originGradients } ) => originGradients\n\t\t);\n\t\tconst gradientObject = allGradients.find(\n\t\t\t( { gradient } ) => gradient === gradientValue\n\t\t);\n\t\treturn gradientObject\n\t\t\t? 'var:preset|gradient|' + gradientObject.slug\n\t\t\t: gradientValue;\n\t};\n\n\tconst resetBackground = () =>\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tvalue,\n\t\t\t\t[ 'background', 'backgroundImage' ],\n\t\t\t\tundefined\n\t\t\t)\n\t\t);\n\n\tconst resetGradient = () => {\n\t\tlet newValue = setImmutably(\n\t\t\tvalue,\n\t\t\t[ 'background', 'gradient' ],\n\t\t\tundefined\n\t\t);\n\t\tnewValue = setImmutably( newValue, [ 'color', 'gradient' ], undefined );\n\t\tonChange( newValue );\n\t};\n\n\t// Get current gradient value, decoding preset slug references.\n\t// Fall back to color.gradient for legacy blocks that haven't migrated\n\t// to background.gradient yet (mirrors block inspector fallback in\n\t// packages/block-editor/src/hooks/background.js).\n\tconst currentGradient = decodeValue(\n\t\tvalue?.background?.gradient ?? value?.color?.gradient\n\t);\n\tconst inheritedGradient = decodeValue(\n\t\tinheritedValue?.background?.gradient ?? inheritedValue?.color?.gradient\n\t);\n\n\t// Set gradient value, encoding preset matches as slug references.\n\t// Also clear color.gradient to migrate from the legacy location,\n\t// matching the block inspector behavior in hooks/background.js.\n\tconst setGradient = ( newGradient ) => {\n\t\tlet newValue = setImmutably(\n\t\t\tvalue,\n\t\t\t[ 'background', 'gradient' ],\n\t\t\tencodeGradientValue( newGradient )\n\t\t);\n\t\tnewValue = setImmutably( newValue, [ 'color', 'gradient' ], undefined );\n\t\tonChange( newValue );\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\theaderLabel={ headerLabel }\n\t\t>\n\t\t\t{ showBackgroundImageControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tclassName=\"block-editor-background-panel__item\"\n\t\t\t\t\thasValue={ () => hasBackgroundImageValue( value ) }\n\t\t\t\t\tlabel={ __( 'Image' ) }\n\t\t\t\t\tonDeselect={ resetBackground }\n\t\t\t\t\tisShownByDefault={ defaultControls.backgroundImage }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<BackgroundImageControl\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tsettings={ settings }\n\t\t\t\t\t\tinheritedValue={ inheritedValue }\n\t\t\t\t\t\tdefaultControls={ defaultControls }\n\t\t\t\t\t\tdefaultValues={ defaultValues }\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ showBackgroundGradientControl && (\n\t\t\t\t<ColorPanelDropdown\n\t\t\t\t\tclassName=\"block-editor-background-panel__item\"\n\t\t\t\t\tlabel={ __( 'Gradient' ) }\n\t\t\t\t\thasValue={ () => hasBackgroundGradientValue( value ) }\n\t\t\t\t\tresetValue={ resetGradient }\n\t\t\t\t\tisShownByDefault={ defaultControls.gradient }\n\t\t\t\t\tindicators={ [ currentGradient ] }\n\t\t\t\t\ttabs={ [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tkey: 'gradient',\n\t\t\t\t\t\t\tlabel: __( 'Gradient' ),\n\t\t\t\t\t\t\tinheritedValue:\n\t\t\t\t\t\t\t\tcurrentGradient ?? inheritedGradient,\n\t\t\t\t\t\t\tsetValue: setGradient,\n\t\t\t\t\t\t\tuserValue: currentGradient,\n\t\t\t\t\t\t\tisGradient: true,\n\t\t\t\t\t\t},\n\t\t\t\t\t] }\n\t\t\t\t\tcolorGradientControlSettings={ {\n\t\t\t\t\t\tgradients,\n\t\t\t\t\t\tdisableCustomGradients: ! areCustomGradientsEnabled,\n\t\t\t\t\t} }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</Wrapper>\n\t);\n}\n"],
-  "mappings": "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",
-  "names": ["ToolsPanel", "ToolsPanelItem", "BackgroundImageControl"]
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport BackgroundImageControl from '../background-image-control';\nimport ColorGradientDropdownItem from './color-gradient-dropdown-item';\nimport { useHasBackgroundColorPanel } from './color-panel';\nimport { useColorGradientSettings } from './hooks';\nimport { useToolsPanelDropdownMenuProps } from './utils';\nimport { setImmutably } from '../../utils/object';\nimport {\n\textractPresetSlug,\n\tencodeColorValueWithPalette,\n} from '../../utils/color-values';\n\nconst DEFAULT_CONTROLS = {\n\tbackgroundImage: true,\n\tbackgroundColor: true,\n\tgradient: true,\n};\n\n/**\n * Checks site settings to see if the requested feature's control may be used.\n *\n * @param {Object} settings Site settings.\n * @param {string} feature  Background feature to check.\n * @return {boolean}        Whether site settings has activated background panel.\n */\nexport function useHasBackgroundControl( settings, feature ) {\n\treturn settings?.background?.[ feature ];\n}\n\n/**\n * Checks site settings to see if the background panel may be used.\n * `settings.background.backgroundSize` exists also,\n * but can only be used if settings?.background?.backgroundImage is `true`.\n *\n * The panel is also shown when the block has color panel background\n * support (`settings.color.background`), because background color and\n * the legacy `color.gradient` control are rendered here.\n *\n * @param {Object} settings Site settings\n * @return {boolean}        Whether site settings has activated background panel.\n */\nexport function useHasBackgroundPanel( settings ) {\n\tconst hasBackgroundColor = useHasBackgroundColorPanel( settings );\n\tconst { backgroundImage, gradient } = settings?.background || {};\n\treturn backgroundImage || gradient || hasBackgroundColor;\n}\n\n/**\n * Checks if there is a current value in the background size block support\n * attributes. Background size values include background size as well\n * as background position.\n *\n * @param {Object} style Style attribute.\n * @return {boolean}     Whether the block has a background size value set.\n */\nexport function hasBackgroundSizeValue( style ) {\n\treturn (\n\t\tstyle?.background?.backgroundPosition !== undefined ||\n\t\tstyle?.background?.backgroundSize !== undefined\n\t);\n}\n\n/**\n * Checks if there is a current value in the background image block support\n * attributes.\n *\n * @param {Object} style Style attribute.\n * @return {boolean}     Whether the block has a background image value set.\n */\nexport function hasBackgroundImageValue( style ) {\n\treturn (\n\t\t!! style?.background?.backgroundImage?.id ||\n\t\t// Supports url() string values in theme.json.\n\t\t'string' === typeof style?.background?.backgroundImage ||\n\t\t!! style?.background?.backgroundImage?.url\n\t);\n}\n\n/**\n * Checks if there is a current value in the background gradient block support\n * attributes.\n *\n * @param {Object} style Style attribute.\n * @return {boolean}     Whether the block has a background gradient value set.\n */\nexport function hasBackgroundGradientValue( style ) {\n\treturn (\n\t\t'string' === typeof style?.background?.gradient &&\n\t\tstyle?.background?.gradient !== ''\n\t);\n}\n\n/**\n * Checks if there is a current value for the background color (written to\n * `color.background`).\n *\n * @param {Object} style Style attribute.\n * @return {boolean}     Whether the block has a background color value set.\n */\nexport function hasBackgroundColorValue( style ) {\n\treturn !! style?.color?.background;\n}\n\n/**\n * Checks if there is a current value in the legacy `color.gradient` location\n * (used by blocks with color panel gradient support that haven't adopted the\n * `background.gradient` block support).\n *\n * @param {Object} style Style attribute.\n * @return {boolean}     Whether the block has a legacy color gradient value set.\n */\nexport function hasLegacyColorGradientValue( style ) {\n\treturn !! style?.color?.gradient;\n}\n\nexport function BackgroundToolsPanel( {\n\tresetAllFilter,\n\tonChange,\n\tvalue,\n\tpanelId,\n\tchildren,\n\theaderLabel,\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={ headerLabel }\n\t\t\tresetAll={ resetAll }\n\t\t\tpanelId={ panelId }\n\t\t\thasInnerWrapper\n\t\t\tclassName=\"background-block-support-panel\"\n\t\t\t__experimentalFirstVisibleItemClass=\"first\"\n\t\t\t__experimentalLastVisibleItemClass=\"last\"\n\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t>\n\t\t\t<div className=\"background-block-support-panel__inner-wrapper\">\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t</ToolsPanel>\n\t);\n}\n\nexport default function BackgroundImagePanel( {\n\tas: Wrapper = BackgroundToolsPanel,\n\tvalue,\n\tonChange,\n\tinheritedValue = value,\n\tsettings,\n\tpanelId,\n\tdefaultControls = DEFAULT_CONTROLS,\n\tdefaultValues = {},\n\theaderLabel = __( 'Background' ),\n\tcontrastWarning,\n} ) {\n\tconst {\n\t\tcolors,\n\t\tgradients,\n\t\tallColors,\n\t\tareCustomSolidsEnabled,\n\t\tareCustomGradientsEnabled,\n\t\thasSolidColors,\n\t\thasGradientColors,\n\t\tdecodeValue,\n\t\tencodeGradientValue,\n\t} = useColorGradientSettings( settings );\n\n\tconst hasBackgroundGradientControl = useHasBackgroundControl(\n\t\tsettings,\n\t\t'gradient'\n\t);\n\tconst hasColorPanelBackgroundSupport =\n\t\tuseHasBackgroundColorPanel( settings );\n\tconst showBackgroundColorControl =\n\t\thasColorPanelBackgroundSupport && hasSolidColors;\n\t// New `background.gradient` block support — gradient lives under the\n\t// `background` style path.\n\tconst showBackgroundGradientControl =\n\t\thasGradientColors && hasBackgroundGradientControl;\n\t// Legacy `color.gradient` path — only rendered when the block has\n\t// color panel background support and hasn't adopted the newer\n\t// `background.gradient` support. Keeps the UI consistent for blocks\n\t// that still write gradients to `color.gradient`.\n\tconst showLegacyColorGradientControl =\n\t\thasColorPanelBackgroundSupport &&\n\t\thasGradientColors &&\n\t\t! hasBackgroundGradientControl;\n\tconst showBackgroundImageControl = useHasBackgroundControl(\n\t\tsettings,\n\t\t'backgroundImage'\n\t);\n\n\tconst resetAllFilter = useCallback(\n\t\t( previousValue ) => {\n\t\t\tconst clearsColorBackground = showBackgroundColorControl;\n\t\t\tconst clearsColorGradient =\n\t\t\t\thasBackgroundGradientControl || showLegacyColorGradientControl;\n\t\t\tif ( ! clearsColorBackground && ! clearsColorGradient ) {\n\t\t\t\treturn { ...previousValue, background: {} };\n\t\t\t}\n\t\t\treturn {\n\t\t\t\t...previousValue,\n\t\t\t\tbackground: {},\n\t\t\t\tcolor: {\n\t\t\t\t\t...previousValue?.color,\n\t\t\t\t\t...( clearsColorBackground && { background: undefined } ),\n\t\t\t\t\t...( clearsColorGradient && { gradient: undefined } ),\n\t\t\t\t},\n\t\t\t};\n\t\t},\n\t\t[\n\t\t\thasBackgroundGradientControl,\n\t\t\tshowBackgroundColorControl,\n\t\t\tshowLegacyColorGradientControl,\n\t\t]\n\t);\n\n\tif (\n\t\t! showBackgroundImageControl &&\n\t\t! showBackgroundColorControl &&\n\t\t! showBackgroundGradientControl &&\n\t\t! showLegacyColorGradientControl\n\t) {\n\t\treturn null;\n\t}\n\n\tconst resetBackground = () =>\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tvalue,\n\t\t\t\t[ 'background', 'backgroundImage' ],\n\t\t\t\tundefined\n\t\t\t)\n\t\t);\n\n\tconst resetGradient = () => {\n\t\tlet newValue = setImmutably(\n\t\t\tvalue,\n\t\t\t[ 'background', 'gradient' ],\n\t\t\tundefined\n\t\t);\n\t\tnewValue = setImmutably( newValue, [ 'color', 'gradient' ], undefined );\n\t\tonChange( newValue );\n\t};\n\n\t// Background color (written to `color.background`).\n\tconst backgroundColor = decodeValue( inheritedValue?.color?.background );\n\tconst userBackgroundColor = decodeValue( value?.color?.background );\n\tconst setBackgroundColor = ( newColor, newSlug ) => {\n\t\tconst newValue = setImmutably(\n\t\t\tvalue,\n\t\t\t[ 'color', 'background' ],\n\t\t\tencodeColorValueWithPalette( allColors, newColor, newSlug )\n\t\t);\n\t\t// Legacy `color.gradient` is mutually exclusive with\n\t\t// `color.background`. `background.gradient` is independent and\n\t\t// should not be touched.\n\t\tif ( showLegacyColorGradientControl ) {\n\t\t\tnewValue.color.gradient = undefined;\n\t\t}\n\t\tonChange( newValue );\n\t};\n\tconst resetBackgroundColor = () => {\n\t\tconst newValue = setImmutably(\n\t\t\tvalue,\n\t\t\t[ 'color', 'background' ],\n\t\t\tundefined\n\t\t);\n\t\tif ( showLegacyColorGradientControl ) {\n\t\t\tnewValue.color.gradient = undefined;\n\t\t}\n\t\tonChange( newValue );\n\t};\n\n\t// Legacy `color.gradient` setters.\n\tconst legacyColorGradient = decodeValue( inheritedValue?.color?.gradient );\n\tconst userLegacyColorGradient = decodeValue( value?.color?.gradient );\n\tconst setLegacyColorGradient = ( newGradient ) => {\n\t\tconst newValue = setImmutably(\n\t\t\tvalue,\n\t\t\t[ 'color', 'gradient' ],\n\t\t\tencodeGradientValue( newGradient )\n\t\t);\n\t\tnewValue.color.background = undefined;\n\t\tonChange( newValue );\n\t};\n\tconst resetLegacyColorGradient = () =>\n\t\tonChange( setImmutably( value, [ 'color', 'gradient' ], undefined ) );\n\n\t// Get current gradient value, decoding preset slug references.\n\t// Fall back to color.gradient for legacy blocks that haven't migrated\n\t// to background.gradient yet (mirrors block inspector fallback in\n\t// packages/block-editor/src/hooks/background.js).\n\tconst currentGradient = decodeValue(\n\t\tvalue?.background?.gradient ?? value?.color?.gradient\n\t);\n\tconst inheritedGradient = decodeValue(\n\t\tinheritedValue?.background?.gradient ?? inheritedValue?.color?.gradient\n\t);\n\n\t// Set gradient value, encoding preset matches as slug references.\n\t// Also clear color.gradient to migrate from the legacy location,\n\t// matching the block inspector behavior in hooks/background.js.\n\tconst setGradient = ( newGradient ) => {\n\t\tlet newValue = setImmutably(\n\t\t\tvalue,\n\t\t\t[ 'background', 'gradient' ],\n\t\t\tencodeGradientValue( newGradient )\n\t\t);\n\t\tnewValue = setImmutably( newValue, [ 'color', 'gradient' ], undefined );\n\t\tonChange( newValue );\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\theaderLabel={ headerLabel }\n\t\t>\n\t\t\t{ showBackgroundImageControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tclassName=\"block-editor-color-gradient-item\"\n\t\t\t\t\thasValue={ () => hasBackgroundImageValue( value ) }\n\t\t\t\t\tlabel={ __( 'Image' ) }\n\t\t\t\t\tonDeselect={ resetBackground }\n\t\t\t\t\tisShownByDefault={ defaultControls.backgroundImage }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<BackgroundImageControl\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tsettings={ settings }\n\t\t\t\t\t\tinheritedValue={ inheritedValue }\n\t\t\t\t\t\tdefaultControls={ defaultControls }\n\t\t\t\t\t\tdefaultValues={ defaultValues }\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ showBackgroundColorControl && (\n\t\t\t\t<ColorGradientDropdownItem\n\t\t\t\t\tlabel={ __( 'Color' ) }\n\t\t\t\t\thasValue={ () => hasBackgroundColorValue( value ) }\n\t\t\t\t\tresetValue={ resetBackgroundColor }\n\t\t\t\t\tisShownByDefault={ defaultControls.backgroundColor }\n\t\t\t\t\tindicators={ [ userBackgroundColor ?? backgroundColor ] }\n\t\t\t\t\tcontrastWarning={ contrastWarning }\n\t\t\t\t\ttabs={ [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tkey: 'background',\n\t\t\t\t\t\t\tlabel: __( 'Color' ),\n\t\t\t\t\t\t\tinheritedValue:\n\t\t\t\t\t\t\t\tuserBackgroundColor ?? backgroundColor,\n\t\t\t\t\t\t\t// Resolve the slug from the same source as the\n\t\t\t\t\t\t\t// displayed value (user value first, then the\n\t\t\t\t\t\t\t// inherited fallback). For a block instance the\n\t\t\t\t\t\t\t// selection lives in `value` while `inheritedValue`\n\t\t\t\t\t\t\t// only holds the global styles fallback, so reading\n\t\t\t\t\t\t\t// the slug from `inheritedValue` alone would miss it\n\t\t\t\t\t\t\t// and two same-hex presets would both appear selected.\n\t\t\t\t\t\t\tinheritedSlug:\n\t\t\t\t\t\t\t\textractPresetSlug(\n\t\t\t\t\t\t\t\t\tvalue?.color?.background,\n\t\t\t\t\t\t\t\t\t'color'\n\t\t\t\t\t\t\t\t) ??\n\t\t\t\t\t\t\t\textractPresetSlug(\n\t\t\t\t\t\t\t\t\tinheritedValue?.color?.background,\n\t\t\t\t\t\t\t\t\t'color'\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\tsetValue: setBackgroundColor,\n\t\t\t\t\t\t\tuserValue: userBackgroundColor,\n\t\t\t\t\t\t},\n\t\t\t\t\t] }\n\t\t\t\t\tcolorGradientControlSettings={ {\n\t\t\t\t\t\tcolors,\n\t\t\t\t\t\tdisableCustomColors: ! areCustomSolidsEnabled,\n\t\t\t\t\t} }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ showBackgroundGradientControl && (\n\t\t\t\t<ColorGradientDropdownItem\n\t\t\t\t\tlabel={ __( 'Gradient' ) }\n\t\t\t\t\thasValue={ () => hasBackgroundGradientValue( value ) }\n\t\t\t\t\tresetValue={ resetGradient }\n\t\t\t\t\tisShownByDefault={ defaultControls.gradient }\n\t\t\t\t\tindicators={ [ currentGradient ] }\n\t\t\t\t\ttabs={ [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tkey: 'gradient',\n\t\t\t\t\t\t\tlabel: __( 'Gradient' ),\n\t\t\t\t\t\t\tinheritedValue:\n\t\t\t\t\t\t\t\tcurrentGradient ?? inheritedGradient,\n\t\t\t\t\t\t\tsetValue: setGradient,\n\t\t\t\t\t\t\tuserValue: currentGradient,\n\t\t\t\t\t\t\tisGradient: true,\n\t\t\t\t\t\t},\n\t\t\t\t\t] }\n\t\t\t\t\tcolorGradientControlSettings={ {\n\t\t\t\t\t\tgradients,\n\t\t\t\t\t\tdisableCustomGradients: ! areCustomGradientsEnabled,\n\t\t\t\t\t} }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ showLegacyColorGradientControl && (\n\t\t\t\t<ColorGradientDropdownItem\n\t\t\t\t\tlabel={ __( 'Gradient' ) }\n\t\t\t\t\thasValue={ () => hasLegacyColorGradientValue( value ) }\n\t\t\t\t\tresetValue={ resetLegacyColorGradient }\n\t\t\t\t\tisShownByDefault={ defaultControls.gradient }\n\t\t\t\t\tindicators={ [\n\t\t\t\t\t\tuserLegacyColorGradient ?? legacyColorGradient,\n\t\t\t\t\t] }\n\t\t\t\t\ttabs={ [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tkey: 'gradient',\n\t\t\t\t\t\t\tlabel: __( 'Gradient' ),\n\t\t\t\t\t\t\tinheritedValue:\n\t\t\t\t\t\t\t\tuserLegacyColorGradient ?? legacyColorGradient,\n\t\t\t\t\t\t\tsetValue: setLegacyColorGradient,\n\t\t\t\t\t\t\tuserValue: userLegacyColorGradient,\n\t\t\t\t\t\t\tisGradient: true,\n\t\t\t\t\t\t},\n\t\t\t\t\t] }\n\t\t\t\t\tcolorGradientControlSettings={ {\n\t\t\t\t\t\tgradients,\n\t\t\t\t\t\tdisableCustomGradients: ! areCustomGradientsEnabled,\n\t\t\t\t\t} }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</Wrapper>\n\t);\n}\n"],
+  "mappings": "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",
+  "names": ["ToolsPanel", "ToolsPanelItem", "BackgroundImageControl", "ColorGradientDropdownItem"]
 }