npm - @wordpress/block-editor - Versions diffs - 16.0.0 → 16.1.0 - Mend

@wordpress/block-editor 16.0.0 → 16.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (368) hide show

package/build-module/components/border-radius-control/utils.mjs CHANGED Viewed

@@ -1,5 +1,10 @@
 // packages/block-editor/src/components/border-radius-control/utils.js
 import { __experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue } from "@wordpress/components";
+import {
+  getCustomValueFromPreset,
+  isValuePreset
+} from "../preset-input-control/utils.mjs";
+var BORDER_RADIUS_PRESET_TYPE = "border-radius";
 function mode(inputArray) {
   const arr = [...inputArray];
   return arr.sort(
@@ -57,40 +62,6 @@ function hasDefinedValues(values) {
   });
   return !!filteredValues.length;
 }
-function isValuePreset(value) {
-  if (!value?.includes) {
-    return false;
-  }
-  return value === "0" || value.includes("var:preset|border-radius|");
-}
-function getPresetSlug(value) {
-  if (!value) {
-    return;
-  }
-  if (value === "0" || value === "default") {
-    return value;
-  }
-  const slug = value.match(/var:preset\|border-radius\|(.+)/);
-  return slug ? slug[1] : void 0;
-}
-function getSliderValueFromPreset(presetValue, presets) {
-  if (presetValue === void 0) {
-    return 0;
-  }
-  const slug = parseFloat(presetValue, 10) === 0 ? "0" : getPresetSlug(presetValue);
-  const sliderValue = presets.findIndex((size) => {
-    return String(size.slug) === slug;
-  });
-  return sliderValue !== -1 ? sliderValue : NaN;
-}
-function getCustomValueFromPreset(value, presets) {
-  if (!isValuePreset(value)) {
-    return value;
-  }
-  const slug = parseFloat(value, 10) === 0 ? "0" : getPresetSlug(value);
-  const radiusSize = presets.find((size) => String(size.slug) === slug);
-  return radiusSize?.size;
-}
 function getPresetValueFromControlValue(controlValue, controlType, presets) {
   const size = parseInt(controlValue, 10);
   if (controlType === "selectList") {
@@ -102,18 +73,6 @@ function getPresetValueFromControlValue(controlValue, controlType, presets) {
   }
   return `var:preset|border-radius|${presets[controlValue]?.slug}`;
 }
-function getPresetValueFromCustomValue(value, presets) {
-  if (!value || isValuePreset(value) || value === "0") {
-    return value;
-  }
-  const spacingMatch = presets.find(
-    (size) => String(size.size) === String(value)
-  );
-  if (spacingMatch?.slug) {
-    return `var:preset|border-radius|${spacingMatch.slug}`;
-  }
-  return value;
-}
 function convertPresetsToCustomValues(values, presets) {
   if (!values || typeof values !== "object") {
     return values;
@@ -121,8 +80,12 @@ function convertPresetsToCustomValues(values, presets) {
   const converted = {};
   Object.keys(values).forEach((key) => {
     const value = values[key];
-    if (isValuePreset(value)) {
-      const customValue = getCustomValueFromPreset(value, presets);
+    if (isValuePreset(value, BORDER_RADIUS_PRESET_TYPE)) {
+      const customValue = getCustomValueFromPreset(
+        value,
+        presets,
+        BORDER_RADIUS_PRESET_TYPE
+      );
       converted[key] = customValue !== void 0 ? customValue : value;
     } else {
       converted[key] = value;
@@ -134,14 +97,9 @@ export {
   convertPresetsToCustomValues,
   getAllUnit,
   getAllValue,
-  getCustomValueFromPreset,
-  getPresetSlug,
   getPresetValueFromControlValue,
-  getPresetValueFromCustomValue,
-  getSliderValueFromPreset,
   hasDefinedValues,
   hasMixedValues,
-  isValuePreset,
   mode
 };
 //# sourceMappingURL=utils.mjs.map

package/build-module/components/border-radius-control/utils.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/border-radius-control/utils.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue } from '@wordpress/components';\n\n/**\n * Gets the (non-undefined) item with the highest occurrence within an array\n * Based in part on: https://stackoverflow.com/a/20762713\n *\n * Undefined values are always sorted to the end by `sort`, so this function\n * returns the first element, to always prioritize real values over undefined\n * values.\n *\n * See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#description\n *\n * @param {Array<any>} inputArray Array of items to check.\n * @return {any}                  The item with the most occurrences.\n */\nexport function mode( inputArray ) {\n\tconst arr = [ ...inputArray ];\n\treturn arr\n\t\t.sort(\n\t\t\t( a, b ) =>\n\t\t\t\tinputArray.filter( ( v ) => v === b ).length -\n\t\t\t\tinputArray.filter( ( v ) => v === a ).length\n\t\t)\n\t\t.shift();\n}\n\n/**\n * Returns the most common CSS unit from the current CSS unit selections.\n *\n * - If a single flat border radius is set, its unit will be used\n * - If individual corner selections, the most common of those will be used\n * - Failing any unit selections a default of 'px' is returned.\n *\n * @param {Object} selectedUnits Unit selections for flat radius & each corner.\n * @return {string} Most common CSS unit from current selections. Default: `px`.\n */\nexport function getAllUnit( selectedUnits = {} ) {\n\tconst { flat, ...cornerUnits } = selectedUnits;\n\treturn (\n\t\tflat || mode( Object.values( cornerUnits ).filter( Boolean ) ) || 'px'\n\t);\n}\n\n/**\n * Gets the 'all' input value and unit from values data.\n *\n * @param {Object|string} values Radius values.\n * @return {string}              A value + unit for the 'all' input.\n */\nexport function getAllValue( values = {} ) {\n\t/**\n\t * Border radius support was originally a single pixel value.\n\t *\n\t * To maintain backwards compatibility treat this case as the all value.\n\t */\n\tif ( typeof values === 'string' ) {\n\t\treturn values;\n\t}\n\n\tconst parsedQuantitiesAndUnits = Object.values( values ).map( ( value ) => {\n\t\tconst newValue = parseQuantityAndUnitFromRawValue( value );\n\t\tif ( typeof value === 'string' && newValue[ 0 ] === undefined ) {\n\t\t\treturn [ value, '' ];\n\t\t}\n\t\treturn newValue;\n\t} );\n\n\tconst allValues = parsedQuantitiesAndUnits.map(\n\t\t( value ) => value[ 0 ] ?? ''\n\t);\n\tconst allUnits = parsedQuantitiesAndUnits.map( ( value ) => value[ 1 ] );\n\n\tconst value = allValues.every( ( v ) => v === allValues[ 0 ] )\n\t\t? allValues[ 0 ]\n\t\t: '';\n\tconst unit = mode( allUnits );\n\n\tconst allValue =\n\t\tvalue === 0 || value ? `${ value }${ unit || '' }` : undefined;\n\n\treturn allValue;\n}\n\n/**\n * Checks to determine if values are mixed.\n *\n * @param {Object} values Radius values.\n * @return {boolean}      Whether values are mixed.\n */\nexport function hasMixedValues( values = {} ) {\n\tif ( typeof values === 'string' ) {\n\t\treturn false;\n\t}\n\n\tif ( ! values || typeof values !== 'object' ) {\n\t\treturn false;\n\t}\n\n\tconst cornerValues = Object.values( values );\n\n\tif ( cornerValues.length === 0 ) {\n\t\treturn false;\n\t}\n\n\tconst firstValue = cornerValues[ 0 ];\n\n\t// Check if all values are exactly the same (including undefined)\n\tconst allSame = cornerValues.every( ( value ) => value === firstValue );\n\n\treturn ! allSame;\n}\n\n/**\n * Checks to determine if values are defined.\n *\n * @param {Object} values Radius values.\n * @return {boolean}      Whether values are mixed.\n */\nexport function hasDefinedValues( values ) {\n\tif ( ! values ) {\n\t\treturn false;\n\t}\n\n\t// A string value represents a shorthand value.\n\tif ( typeof values === 'string' ) {\n\t\treturn true;\n\t}\n\n\t// An object represents longhand border radius values, if any are set\n\t// flag values as being defined.\n\tconst filteredValues = Object.values( values ).filter( ( value ) => {\n\t\treturn !! value || value === 0;\n\t} );\n\n\treturn !! filteredValues.length;\n}\n\n/**\n * Checks is given value is a radius preset.\n *\n * @param {string} value Value to check\n *\n * @return {boolean} Return true if value is string in format var:preset|border-radius|.\n */\nexport function isValuePreset( value ) {\n\tif ( ! value?.includes ) {\n\t\treturn false;\n\t}\n\treturn value === '0' || value.includes( 'var:preset|border-radius|' );\n}\n\n/**\n * Returns the slug section of the given preset string.\n *\n * @param {string} value Value to extract slug from.\n *\n * @return {string|undefined} The value slug from given preset.\n */\nexport function getPresetSlug( value ) {\n\tif ( ! value ) {\n\t\treturn;\n\t}\n\n\tif ( value === '0' || value === 'default' ) {\n\t\treturn value;\n\t}\n\n\tconst slug = value.match( /var:preset\\|border-radius\\|(.+)/ );\n\n\treturn slug ? slug[ 1 ] : undefined;\n}\n\n/**\n * Converts radius preset value into a Range component value .\n *\n * @param {string} presetValue Value to convert to Range value.\n * @param {Array}  presets     Array of current radius preset value objects.\n *\n * @return {number} The int value for use in Range control.\n */\nexport function getSliderValueFromPreset( presetValue, presets ) {\n\tif ( presetValue === undefined ) {\n\t\treturn 0;\n\t}\n\tconst slug =\n\t\tparseFloat( presetValue, 10 ) === 0\n\t\t\t? '0'\n\t\t\t: getPresetSlug( presetValue );\n\tconst sliderValue = presets.findIndex( ( size ) => {\n\t\treturn String( size.slug ) === slug;\n\t} );\n\n\t// Returning NaN rather than undefined as undefined makes range control thumb sit in center\n\treturn sliderValue !== -1 ? sliderValue : NaN;\n}\n\n/**\n * Converts a preset into a custom value.\n *\n * @param {string} value   Value to convert\n * @param {Array}  presets Array of the current radius preset objects\n *\n * @return {string} Mapping of the radius preset to its equivalent custom value.\n */\nexport function getCustomValueFromPreset( value, presets ) {\n\tif ( ! isValuePreset( value ) ) {\n\t\treturn value;\n\t}\n\n\tconst slug = parseFloat( value, 10 ) === 0 ? '0' : getPresetSlug( value );\n\tconst radiusSize = presets.find( ( size ) => String( size.slug ) === slug );\n\n\treturn radiusSize?.size;\n}\n\n/**\n * Converts a control value into a preset value.\n *\n * @param {number} controlValue to convert to preset value.\n * @param {string} controlType  Type of control\n * @param {Array}  presets      Array of current radius preset value objects.\n *\n * @return {string} The custom value for use in Range control.\n */\nexport function getPresetValueFromControlValue(\n\tcontrolValue,\n\tcontrolType,\n\tpresets\n) {\n\tconst size = parseInt( controlValue, 10 );\n\tif ( controlType === 'selectList' ) {\n\t\tif ( size === 0 ) {\n\t\t\treturn undefined;\n\t\t}\n\t} else if ( size === 0 ) {\n\t\treturn '0';\n\t}\n\n\treturn `var:preset|border-radius|${ presets[ controlValue ]?.slug }`;\n}\n\n/**\n * Converts a custom value to preset value if one can be found.\n *\n * Returns value as-is if no match is found.\n *\n * @param {string} value   Value to convert\n * @param {Array}  presets Array of the current border radius preset objects\n *\n * @return {string} The preset value if it can be found.\n */\nexport function getPresetValueFromCustomValue( value, presets ) {\n\t// Return value as-is if it is undefined or is already a preset, or '0';\n\tif ( ! value || isValuePreset( value ) || value === '0' ) {\n\t\treturn value;\n\t}\n\n\tconst spacingMatch = presets.find(\n\t\t( size ) => String( size.size ) === String( value )\n\t);\n\n\tif ( spacingMatch?.slug ) {\n\t\treturn `var:preset|border-radius|${ spacingMatch.slug }`;\n\t}\n\n\treturn value;\n}\n\n/**\n * Converts all preset values in a values object to their custom equivalents.\n *\n * @param {Object} values  Values object to convert\n * @param {Array}  presets Array of current border radius preset objects\n *\n * @return {Object} Values with presets converted to custom values\n */\nexport function convertPresetsToCustomValues( values, presets ) {\n\tif ( ! values || typeof values !== 'object' ) {\n\t\treturn values;\n\t}\n\n\tconst converted = {};\n\tObject.keys( values ).forEach( ( key ) => {\n\t\tconst value = values[ key ];\n\t\tif ( isValuePreset( value ) ) {\n\t\t\tconst customValue = getCustomValueFromPreset( value, presets );\n\t\t\tconverted[ key ] = customValue !== undefined ? customValue : value;\n\t\t} else {\n\t\t\tconverted[ key ] = value;\n\t\t}\n\t} );\n\n\treturn converted;\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport {\n\tgetCustomValueFromPreset,\n\tisValuePreset,\n} from '../preset-input-control/utils';\n\nconst BORDER_RADIUS_PRESET_TYPE = 'border-radius';\n\n/**\n * Gets the (non-undefined) item with the highest occurrence within an array\n * Based in part on: https://stackoverflow.com/a/20762713\n *\n * Undefined values are always sorted to the end by `sort`, so this function\n * returns the first element, to always prioritize real values over undefined\n * values.\n *\n * See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#description\n *\n * @param {Array<any>} inputArray Array of items to check.\n * @return {any}                  The item with the most occurrences.\n */\nexport function mode( inputArray ) {\n\tconst arr = [ ...inputArray ];\n\treturn arr\n\t\t.sort(\n\t\t\t( a, b ) =>\n\t\t\t\tinputArray.filter( ( v ) => v === b ).length -\n\t\t\t\tinputArray.filter( ( v ) => v === a ).length\n\t\t)\n\t\t.shift();\n}\n\n/**\n * Returns the most common CSS unit from the current CSS unit selections.\n *\n * - If a single flat border radius is set, its unit will be used\n * - If individual corner selections, the most common of those will be used\n * - Failing any unit selections a default of 'px' is returned.\n *\n * @param {Object} selectedUnits Unit selections for flat radius & each corner.\n * @return {string} Most common CSS unit from current selections. Default: `px`.\n */\nexport function getAllUnit( selectedUnits = {} ) {\n\tconst { flat, ...cornerUnits } = selectedUnits;\n\treturn (\n\t\tflat || mode( Object.values( cornerUnits ).filter( Boolean ) ) || 'px'\n\t);\n}\n\n/**\n * Gets the 'all' input value and unit from values data.\n *\n * @param {Object|string} values Radius values.\n * @return {string}              A value + unit for the 'all' input.\n */\nexport function getAllValue( values = {} ) {\n\t/**\n\t * Border radius support was originally a single pixel value.\n\t *\n\t * To maintain backwards compatibility treat this case as the all value.\n\t */\n\tif ( typeof values === 'string' ) {\n\t\treturn values;\n\t}\n\n\tconst parsedQuantitiesAndUnits = Object.values( values ).map( ( value ) => {\n\t\tconst newValue = parseQuantityAndUnitFromRawValue( value );\n\t\tif ( typeof value === 'string' && newValue[ 0 ] === undefined ) {\n\t\t\treturn [ value, '' ];\n\t\t}\n\t\treturn newValue;\n\t} );\n\n\tconst allValues = parsedQuantitiesAndUnits.map(\n\t\t( value ) => value[ 0 ] ?? ''\n\t);\n\tconst allUnits = parsedQuantitiesAndUnits.map( ( value ) => value[ 1 ] );\n\n\tconst value = allValues.every( ( v ) => v === allValues[ 0 ] )\n\t\t? allValues[ 0 ]\n\t\t: '';\n\tconst unit = mode( allUnits );\n\n\tconst allValue =\n\t\tvalue === 0 || value ? `${ value }${ unit || '' }` : undefined;\n\n\treturn allValue;\n}\n\n/**\n * Checks to determine if values are mixed.\n *\n * @param {Object} values Radius values.\n * @return {boolean}      Whether values are mixed.\n */\nexport function hasMixedValues( values = {} ) {\n\tif ( typeof values === 'string' ) {\n\t\treturn false;\n\t}\n\n\tif ( ! values || typeof values !== 'object' ) {\n\t\treturn false;\n\t}\n\n\tconst cornerValues = Object.values( values );\n\n\tif ( cornerValues.length === 0 ) {\n\t\treturn false;\n\t}\n\n\tconst firstValue = cornerValues[ 0 ];\n\n\t// Check if all values are exactly the same (including undefined)\n\tconst allSame = cornerValues.every( ( value ) => value === firstValue );\n\n\treturn ! allSame;\n}\n\n/**\n * Checks to determine if values are defined.\n *\n * @param {Object} values Radius values.\n * @return {boolean}      Whether values are mixed.\n */\nexport function hasDefinedValues( values ) {\n\tif ( ! values ) {\n\t\treturn false;\n\t}\n\n\t// A string value represents a shorthand value.\n\tif ( typeof values === 'string' ) {\n\t\treturn true;\n\t}\n\n\t// An object represents longhand border radius values, if any are set\n\t// flag values as being defined.\n\tconst filteredValues = Object.values( values ).filter( ( value ) => {\n\t\treturn !! value || value === 0;\n\t} );\n\n\treturn !! filteredValues.length;\n}\n\n/**\n * Converts a control value into a preset value.\n *\n * @param {number} controlValue to convert to preset value.\n * @param {string} controlType  Type of control\n * @param {Array}  presets      Array of current radius preset value objects.\n *\n * @return {string} The custom value for use in Range control.\n */\nexport function getPresetValueFromControlValue(\n\tcontrolValue,\n\tcontrolType,\n\tpresets\n) {\n\tconst size = parseInt( controlValue, 10 );\n\tif ( controlType === 'selectList' ) {\n\t\tif ( size === 0 ) {\n\t\t\treturn undefined;\n\t\t}\n\t} else if ( size === 0 ) {\n\t\treturn '0';\n\t}\n\n\treturn `var:preset|border-radius|${ presets[ controlValue ]?.slug }`;\n}\n\n/**\n * Converts all preset values in a values object to their custom equivalents.\n *\n * @param {Object} values  Values object to convert\n * @param {Array}  presets Array of current border radius preset objects\n *\n * @return {Object} Values with presets converted to custom values\n */\nexport function convertPresetsToCustomValues( values, presets ) {\n\tif ( ! values || typeof values !== 'object' ) {\n\t\treturn values;\n\t}\n\n\tconst converted = {};\n\tObject.keys( values ).forEach( ( key ) => {\n\t\tconst value = values[ key ];\n\t\tif ( isValuePreset( value, BORDER_RADIUS_PRESET_TYPE ) ) {\n\t\t\tconst customValue = getCustomValueFromPreset(\n\t\t\t\tvalue,\n\t\t\t\tpresets,\n\t\t\t\tBORDER_RADIUS_PRESET_TYPE\n\t\t\t);\n\t\t\tconverted[ key ] = customValue !== undefined ? customValue : value;\n\t\t} else {\n\t\t\tconverted[ key ] = value;\n\t\t}\n\t} );\n\n\treturn converted;\n}\n"],
+  "mappings": "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",
   "names": ["value"]
 }

package/build-module/components/colors-gradients/control.mjs CHANGED Viewed

@@ -33,6 +33,7 @@ function ColorGradientControlInner({
   colorValue,
   colorSlug,
   gradientValue,
+  gradientSlug,
   clearable,
   showTitle = true,
   enableAlpha,
@@ -76,10 +77,11 @@ function ColorGradientControlInner({
       GradientPicker,
       {
         value: gradientValue,
-        onChange: canChooseAColor ? (newGradient) => {
-          onGradientChange(newGradient);
+        selectedSlug: gradientSlug,
+        onChange: canChooseAColor ? (newGradient, _index, newSlug) => {
+          onGradientChange(newGradient, newSlug);
           onColorChange();
-        } : onGradientChange,
+        } : (newGradient, _index, newSlug) => onGradientChange(newGradient, newSlug),
         ...{ gradients, disableCustomGradients },
         __experimentalIsRenderedInSidebar,
         clearable,

package/build-module/components/colors-gradients/control.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/colors-gradients/control.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tBaseControl,\n\t__experimentalVStack as VStack,\n\tColorPalette,\n\tGradientPicker,\n\tNotice,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { useSettings } from '../use-settings';\nimport { unlock } from '../../lock-unlock';\n\nconst { Tabs } = unlock( componentsPrivateApis );\nconst colorsAndGradientKeys = [\n\t'colors',\n\t'disableCustomColors',\n\t'gradients',\n\t'disableCustomGradients',\n];\n\nconst TAB_IDS = { color: 'color', gradient: 'gradient' };\n\nfunction ColorGradientControlInner( {\n\tcolors,\n\tgradients,\n\tdisableCustomColors,\n\tdisableCustomGradients,\n\t__experimentalIsRenderedInSidebar,\n\tclassName,\n\tlabel,\n\tonColorChange,\n\tonGradientChange,\n\tcolorValue,\n\tcolorSlug,\n\tgradientValue,\n\tclearable,\n\tshowTitle = true,\n\tenableAlpha,\n\theadingLevel,\n\tnoticeProps,\n} ) {\n\tconst canChooseAColor =\n\t\tonColorChange &&\n\t\t( ( colors && colors.length > 0 ) || ! disableCustomColors );\n\tconst canChooseAGradient =\n\t\tonGradientChange &&\n\t\t( ( gradients && gradients.length > 0 ) || ! disableCustomGradients );\n\n\tif ( ! canChooseAColor && ! canChooseAGradient ) {\n\t\treturn null;\n\t}\n\n\tconst colorPaletteOnChange = canChooseAGradient\n\t\t? ( newColor, _index, newSlug ) => {\n\t\t\t\tonColorChange( newColor, newSlug );\n\t\t\t\tonGradientChange();\n\t\t  }\n\t\t: ( newColor, _index, newSlug ) => onColorChange( newColor, newSlug );\n\n\tconst colorPalette = (\n\t\t<ColorPalette\n\t\t\tvalue={ colorValue }\n\t\t\tselectedSlug={ colorSlug }\n\t\t\tonChange={ colorPaletteOnChange }\n\t\t\t{ ...{ colors, disableCustomColors } }\n\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t}\n\t\t\tclearable={ clearable }\n\t\t\tenableAlpha={ enableAlpha }\n\t\t\theadingLevel={ headingLevel }\n\t\t/>\n\t);\n\n\tconst tabPanels = {\n\t\t// The `ColorPalette` must stay at a stable position in the tree whether\n\t\t// or not a notice is present. Wrapping it in a `VStack` only when a\n\t\t// notice appears remounts it, which resets the custom color picker back\n\t\t// to the swatch view mid-edit. Keep `ColorPalette` first and toggle only\n\t\t// the trailing notice after it, so the palette holds a stable index and\n\t\t// the notice sits at the bottom of the popover.\n\t\t[ TAB_IDS.color ]: (\n\t\t\t<>\n\t\t\t\t{ colorPalette }\n\t\t\t\t{ noticeProps && (\n\t\t\t\t\t<Notice isDismissible={ false } { ...noticeProps } />\n\t\t\t\t) }\n\t\t\t</>\n\t\t),\n\t\t[ TAB_IDS.gradient ]: (\n\t\t\t<GradientPicker\n\t\t\t\tvalue={ gradientValue }\n\t\t\t\tonChange={\n\t\t\t\t\tcanChooseAColor\n\t\t\t\t\t\t? ( newGradient ) => {\n\t\t\t\t\t\t\t\tonGradientChange( newGradient );\n\t\t\t\t\t\t\t\tonColorChange();\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: onGradientChange\n\t\t\t\t}\n\t\t\t\t{ ...{ gradients, disableCustomGradients } }\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tclearable={ clearable }\n\t\t\t\theadingLevel={ headingLevel }\n\t\t\t/>\n\t\t),\n\t};\n\n\tconst renderPanelType = ( type ) => (\n\t\t<div className=\"block-editor-color-gradient-control__panel\">\n\t\t\t{ tabPanels[ type ] }\n\t\t</div>\n\t);\n\n\treturn (\n\t\t<BaseControl\n\t\t\tclassName={ clsx(\n\t\t\t\t'block-editor-color-gradient-control',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t<fieldset className=\"block-editor-color-gradient-control__fieldset\">\n\t\t\t\t<VStack spacing={ 1 }>\n\t\t\t\t\t{ showTitle && (\n\t\t\t\t\t\t<legend>\n\t\t\t\t\t\t\t<div className=\"block-editor-color-gradient-control__color-indicator\">\n\t\t\t\t\t\t\t\t<BaseControl.VisualLabel>\n\t\t\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</legend>\n\t\t\t\t\t) }\n\t\t\t\t\t{ canChooseAColor && canChooseAGradient && (\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<Tabs\n\t\t\t\t\t\t\t\tdefaultTabId={\n\t\t\t\t\t\t\t\t\tgradientValue\n\t\t\t\t\t\t\t\t\t\t? TAB_IDS.gradient\n\t\t\t\t\t\t\t\t\t\t: !! canChooseAColor && TAB_IDS.color\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Tabs.TabList>\n\t\t\t\t\t\t\t\t\t<Tabs.Tab tabId={ TAB_IDS.color }>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Color' ) }\n\t\t\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t\t\t\t<Tabs.Tab tabId={ TAB_IDS.gradient }>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Gradient' ) }\n\t\t\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t\t\t</Tabs.TabList>\n\t\t\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\t\t\ttabId={ TAB_IDS.color }\n\t\t\t\t\t\t\t\t\tclassName=\"block-editor-color-gradient-control__panel\"\n\t\t\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ tabPanels.color }\n\t\t\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\t\t\ttabId={ TAB_IDS.gradient }\n\t\t\t\t\t\t\t\t\tclassName=\"block-editor-color-gradient-control__panel\"\n\t\t\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ tabPanels.gradient }\n\t\t\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t\t</Tabs>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ ! canChooseAGradient && renderPanelType( TAB_IDS.color ) }\n\t\t\t\t\t{ ! canChooseAColor && renderPanelType( TAB_IDS.gradient ) }\n\t\t\t\t</VStack>\n\t\t\t</fieldset>\n\t\t</BaseControl>\n\t);\n}\n\nfunction ColorGradientControlSelect( props ) {\n\tconst [ colors, gradients, customColors, customGradients ] = useSettings(\n\t\t'color.palette',\n\t\t'color.gradients',\n\t\t'color.custom',\n\t\t'color.customGradient'\n\t);\n\n\treturn (\n\t\t<ColorGradientControlInner\n\t\t\tcolors={ colors }\n\t\t\tgradients={ gradients }\n\t\t\tdisableCustomColors={ ! customColors }\n\t\t\tdisableCustomGradients={ ! customGradients }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction ColorGradientControl( props ) {\n\tif (\n\t\tcolorsAndGradientKeys.every( ( key ) => props.hasOwnProperty( key ) )\n\t) {\n\t\treturn <ColorGradientControlInner { ...props } />;\n\t}\n\treturn <ColorGradientControlSelect { ...props } />;\n}\n\nexport default ColorGradientControl;\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tBaseControl,\n\t__experimentalVStack as VStack,\n\tColorPalette,\n\tGradientPicker,\n\tNotice,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { useSettings } from '../use-settings';\nimport { unlock } from '../../lock-unlock';\n\nconst { Tabs } = unlock( componentsPrivateApis );\nconst colorsAndGradientKeys = [\n\t'colors',\n\t'disableCustomColors',\n\t'gradients',\n\t'disableCustomGradients',\n];\n\nconst TAB_IDS = { color: 'color', gradient: 'gradient' };\n\nfunction ColorGradientControlInner( {\n\tcolors,\n\tgradients,\n\tdisableCustomColors,\n\tdisableCustomGradients,\n\t__experimentalIsRenderedInSidebar,\n\tclassName,\n\tlabel,\n\tonColorChange,\n\tonGradientChange,\n\tcolorValue,\n\tcolorSlug,\n\tgradientValue,\n\tgradientSlug,\n\tclearable,\n\tshowTitle = true,\n\tenableAlpha,\n\theadingLevel,\n\tnoticeProps,\n} ) {\n\tconst canChooseAColor =\n\t\tonColorChange &&\n\t\t( ( colors && colors.length > 0 ) || ! disableCustomColors );\n\tconst canChooseAGradient =\n\t\tonGradientChange &&\n\t\t( ( gradients && gradients.length > 0 ) || ! disableCustomGradients );\n\n\tif ( ! canChooseAColor && ! canChooseAGradient ) {\n\t\treturn null;\n\t}\n\n\tconst colorPaletteOnChange = canChooseAGradient\n\t\t? ( newColor, _index, newSlug ) => {\n\t\t\t\tonColorChange( newColor, newSlug );\n\t\t\t\tonGradientChange();\n\t\t  }\n\t\t: ( newColor, _index, newSlug ) => onColorChange( newColor, newSlug );\n\n\tconst colorPalette = (\n\t\t<ColorPalette\n\t\t\tvalue={ colorValue }\n\t\t\tselectedSlug={ colorSlug }\n\t\t\tonChange={ colorPaletteOnChange }\n\t\t\t{ ...{ colors, disableCustomColors } }\n\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t}\n\t\t\tclearable={ clearable }\n\t\t\tenableAlpha={ enableAlpha }\n\t\t\theadingLevel={ headingLevel }\n\t\t/>\n\t);\n\n\tconst tabPanels = {\n\t\t// The `ColorPalette` must stay at a stable position in the tree whether\n\t\t// or not a notice is present. Wrapping it in a `VStack` only when a\n\t\t// notice appears remounts it, which resets the custom color picker back\n\t\t// to the swatch view mid-edit. Keep `ColorPalette` first and toggle only\n\t\t// the trailing notice after it, so the palette holds a stable index and\n\t\t// the notice sits at the bottom of the popover.\n\t\t[ TAB_IDS.color ]: (\n\t\t\t<>\n\t\t\t\t{ colorPalette }\n\t\t\t\t{ noticeProps && (\n\t\t\t\t\t<Notice isDismissible={ false } { ...noticeProps } />\n\t\t\t\t) }\n\t\t\t</>\n\t\t),\n\t\t[ TAB_IDS.gradient ]: (\n\t\t\t<GradientPicker\n\t\t\t\tvalue={ gradientValue }\n\t\t\t\tselectedSlug={ gradientSlug }\n\t\t\t\tonChange={\n\t\t\t\t\tcanChooseAColor\n\t\t\t\t\t\t? ( newGradient, _index, newSlug ) => {\n\t\t\t\t\t\t\t\tonGradientChange( newGradient, newSlug );\n\t\t\t\t\t\t\t\tonColorChange();\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: ( newGradient, _index, newSlug ) =>\n\t\t\t\t\t\t\t\tonGradientChange( newGradient, newSlug )\n\t\t\t\t}\n\t\t\t\t{ ...{ gradients, disableCustomGradients } }\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tclearable={ clearable }\n\t\t\t\theadingLevel={ headingLevel }\n\t\t\t/>\n\t\t),\n\t};\n\n\tconst renderPanelType = ( type ) => (\n\t\t<div className=\"block-editor-color-gradient-control__panel\">\n\t\t\t{ tabPanels[ type ] }\n\t\t</div>\n\t);\n\n\treturn (\n\t\t<BaseControl\n\t\t\tclassName={ clsx(\n\t\t\t\t'block-editor-color-gradient-control',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t<fieldset className=\"block-editor-color-gradient-control__fieldset\">\n\t\t\t\t<VStack spacing={ 1 }>\n\t\t\t\t\t{ showTitle && (\n\t\t\t\t\t\t<legend>\n\t\t\t\t\t\t\t<div className=\"block-editor-color-gradient-control__color-indicator\">\n\t\t\t\t\t\t\t\t<BaseControl.VisualLabel>\n\t\t\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</legend>\n\t\t\t\t\t) }\n\t\t\t\t\t{ canChooseAColor && canChooseAGradient && (\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<Tabs\n\t\t\t\t\t\t\t\tdefaultTabId={\n\t\t\t\t\t\t\t\t\tgradientValue\n\t\t\t\t\t\t\t\t\t\t? TAB_IDS.gradient\n\t\t\t\t\t\t\t\t\t\t: !! canChooseAColor && TAB_IDS.color\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Tabs.TabList>\n\t\t\t\t\t\t\t\t\t<Tabs.Tab tabId={ TAB_IDS.color }>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Color' ) }\n\t\t\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t\t\t\t<Tabs.Tab tabId={ TAB_IDS.gradient }>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Gradient' ) }\n\t\t\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t\t\t</Tabs.TabList>\n\t\t\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\t\t\ttabId={ TAB_IDS.color }\n\t\t\t\t\t\t\t\t\tclassName=\"block-editor-color-gradient-control__panel\"\n\t\t\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ tabPanels.color }\n\t\t\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\t\t\ttabId={ TAB_IDS.gradient }\n\t\t\t\t\t\t\t\t\tclassName=\"block-editor-color-gradient-control__panel\"\n\t\t\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ tabPanels.gradient }\n\t\t\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t\t</Tabs>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ ! canChooseAGradient && renderPanelType( TAB_IDS.color ) }\n\t\t\t\t\t{ ! canChooseAColor && renderPanelType( TAB_IDS.gradient ) }\n\t\t\t\t</VStack>\n\t\t\t</fieldset>\n\t\t</BaseControl>\n\t);\n}\n\nfunction ColorGradientControlSelect( props ) {\n\tconst [ colors, gradients, customColors, customGradients ] = useSettings(\n\t\t'color.palette',\n\t\t'color.gradients',\n\t\t'color.custom',\n\t\t'color.customGradient'\n\t);\n\n\treturn (\n\t\t<ColorGradientControlInner\n\t\t\tcolors={ colors }\n\t\t\tgradients={ gradients }\n\t\t\tdisableCustomColors={ ! customColors }\n\t\t\tdisableCustomGradients={ ! customGradients }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction ColorGradientControl( props ) {\n\tif (\n\t\tcolorsAndGradientKeys.every( ( key ) => props.hasOwnProperty( key ) )\n\t) {\n\t\treturn <ColorGradientControlInner { ...props } />;\n\t}\n\treturn <ColorGradientControlSelect { ...props } />;\n}\n\nexport default ColorGradientControl;\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/components/dimension-control/index.mjs CHANGED Viewed

@@ -1,4 +1,5 @@
 // packages/block-editor/src/components/dimension-control/index.js
+import clsx from "clsx";
 import { useMemo, useState } from "@wordpress/element";
 import {
   BaseControl,
@@ -35,6 +36,8 @@ function DimensionControl({
   label = __("Dimension"),
   onChange,
   value,
+  placeholder,
+  className,
   dimensionSizes: dimensionSizesProp
 }) {
   const [dimensionSizesFromSettings, availableUnits] = useSettings(
@@ -94,26 +97,33 @@ function DimensionControl({
     }
     setSelectedUnit(newUnit);
   };
-  return /* @__PURE__ */ jsxs("fieldset", { className: "block-editor-dimension-control", children: [
-    /* @__PURE__ */ jsx(BaseControl.VisualLabel, { as: "legend", children: label }),
-    /* @__PURE__ */ jsx(
-      PresetInputControl,
-      {
-        ariaLabel: label,
-        className: "block-editor-dimension-control",
-        customValueSettings: DIMENSION_CUSTOM_VALUE_SETTINGS,
-        minimumCustomValue: 0,
-        onChange,
-        onUnitChange: handleUnitChange,
-        presets: options,
-        presetType: "dimension",
-        selectedUnit,
-        showTooltip: true,
-        units,
-        value
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "fieldset",
+    {
+      className: clsx("block-editor-dimension-control", className),
+      children: [
+        /* @__PURE__ */ jsx(BaseControl.VisualLabel, { as: "legend", children: label }),
+        /* @__PURE__ */ jsx(
+          PresetInputControl,
+          {
+            ariaLabel: label,
+            className: "block-editor-dimension-control",
+            customValueSettings: DIMENSION_CUSTOM_VALUE_SETTINGS,
+            minimumCustomValue: 0,
+            onChange,
+            onUnitChange: handleUnitChange,
+            placeholder,
+            presets: options,
+            presetType: "dimension",
+            selectedUnit,
+            showTooltip: true,
+            units,
+            value
+          }
+        )
+      ]
+    }
+  );
 }
 export {
   DimensionControl as default

package/build-module/components/dimension-control/index.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dimension-control/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMemo, useState } from '@wordpress/element';\nimport {\n\tBaseControl,\n\t__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,\n\t__experimentalUseCustomUnits as useCustomUnits,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useSettings } from '../use-settings';\nimport PresetInputControl from '../preset-input-control';\nimport { CUSTOM_VALUE_SETTINGS } from '../preset-input-control/constants';\n\nconst EMPTY_ARRAY = [];\n\n// Dimension-specific custom value settings - override defaults for larger dimension values\nconst DIMENSION_CUSTOM_VALUE_SETTINGS = {\n\t...CUSTOM_VALUE_SETTINGS,\n\tpx: { max: 1000, steps: 1 },\n\tem: { max: 50, steps: 0.1 },\n\trem: { max: 50, steps: 0.1 },\n};\n\n/**\n * Hook to retrieve dimension sizes from theme settings.\n *\n * @param {Object} presets Dimension presets object containing default, theme, and custom sizes.\n * @return {Array} Array of dimension size options.\n */\nfunction useDimensionSizes( presets ) {\n\tconst defaultSizes = presets?.default ?? EMPTY_ARRAY;\n\tconst customSizes = presets?.custom ?? EMPTY_ARRAY;\n\tconst themeSizes = presets?.theme ?? EMPTY_ARRAY;\n\n\treturn useMemo( () => {\n\t\tconst sizes = [\n\t\t\t{ name: __( 'None' ), slug: '0', size: 0 },\n\t\t\t...customSizes,\n\t\t\t...themeSizes,\n\t\t\t...defaultSizes,\n\t\t];\n\n\t\treturn sizes;\n\t}, [ customSizes, themeSizes, defaultSizes ] );\n}\n\n/**\n * DimensionControl renders a linked unit control and range control for adjusting dimensions of a block.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/dimension-control/README.md\n *\n * @param {Object}                     props\n * @param {?string}                    props.label          A label for the control.\n * @param {( value: string ) => void } props.onChange       Called when the dimension value changes.\n * @param {string}                     props.value          The current dimension value.\n * @param {?Object}                    props.dimensionSizes Optional dimension size presets. Falls back to settings from the store.\n *\n * @return {Component} The component to be rendered.\n */\nexport default function DimensionControl( {\n\tlabel = __( 'Dimension' ),\n\tonChange,\n\tvalue,\n\tdimensionSizes: dimensionSizesProp,\n} ) {\n\tconst [ dimensionSizesFromSettings, availableUnits ] = useSettings(\n\t\t'dimensions.dimensionSizes',\n\t\t'spacing.units'\n\t);\n\tconst dimensionSizes = dimensionSizesProp ?? dimensionSizesFromSettings;\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: availableUnits || [\n\t\t\t'%',\n\t\t\t'px',\n\t\t\t'em',\n\t\t\t'rem',\n\t\t\t'vh',\n\t\t\t'vw',\n\t\t],\n\t} );\n\n\tconst options = useDimensionSizes( dimensionSizes );\n\n\t// Track selected unit for PresetInputControl\n\tconst [ selectedUnit, setSelectedUnit ] = useState( () => {\n\t\tconst [ , unit ] = parseQuantityAndUnitFromRawValue( value );\n\t\treturn unit || units[ 0 ]?.value || 'px';\n\t} );\n\n\tconst handleUnitChange = ( newUnit ) => {\n\t\t// Attempt to smooth over differences between currentUnit and newUnit.\n\t\t// This should slightly improve the experience of switching between unit types.\n\t\tconst [ currentValue, currentUnit ] =\n\t\t\tparseQuantityAndUnitFromRawValue( value );\n\n\t\tif ( [ 'em', 'rem' ].includes( newUnit ) && currentUnit === 'px' ) {\n\t\t\t// Convert pixel value to an approximate of the new unit, assuming a root size of 16px.\n\t\t\tonChange( ( currentValue / 16 ).toFixed( 2 ) + newUnit );\n\t\t} else if (\n\t\t\t[ 'em', 'rem' ].includes( currentUnit ) &&\n\t\t\tnewUnit === 'px'\n\t\t) {\n\t\t\t// Convert to pixel value assuming a root size of 16px.\n\t\t\tonChange( Math.round( currentValue * 16 ) + newUnit );\n\t\t} else if (\n\t\t\t[\n\t\t\t\t'%',\n\t\t\t\t'vw',\n\t\t\t\t'svw',\n\t\t\t\t'lvw',\n\t\t\t\t'dvw',\n\t\t\t\t'vh',\n\t\t\t\t'svh',\n\t\t\t\t'lvh',\n\t\t\t\t'dvh',\n\t\t\t\t'vi',\n\t\t\t\t'svi',\n\t\t\t\t'lvi',\n\t\t\t\t'dvi',\n\t\t\t\t'vb',\n\t\t\t\t'svb',\n\t\t\t\t'lvb',\n\t\t\t\t'dvb',\n\t\t\t\t'vmin',\n\t\t\t\t'svmin',\n\t\t\t\t'lvmin',\n\t\t\t\t'dvmin',\n\t\t\t\t'vmax',\n\t\t\t\t'svmax',\n\t\t\t\t'lvmax',\n\t\t\t\t'dvmax',\n\t\t\t].includes( newUnit ) &&\n\t\t\tcurrentValue > 100\n\t\t) {\n\t\t\t// When converting to `%` or viewport-relative units, cap the new value at 100.\n\t\t\tonChange( 100 + newUnit );\n\t\t}\n\n\t\tsetSelectedUnit( newUnit );\n\t};\n\n\treturn (\n\t\t<fieldset className=\"block-editor-dimension-control\">\n\t\t\t<BaseControl.VisualLabel as=\"legend\">\n\t\t\t\t{ label }\n\t\t\t</BaseControl.VisualLabel>\n\t\t\t<PresetInputControl\n\t\t\t\tariaLabel={ label }\n\t\t\t\tclassName=\"block-editor-dimension-control\"\n\t\t\t\tcustomValueSettings={ DIMENSION_CUSTOM_VALUE_SETTINGS }\n\t\t\t\tminimumCustomValue={ 0 }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tonUnitChange={ handleUnitChange }\n\t\t\t\tpresets={ options }\n\t\t\t\tpresetType=\"dimension\"\n\t\t\t\tselectedUnit={ selectedUnit }\n\t\t\t\tshowTooltip\n\t\t\t\tunits={ units }\n\t\t\t\tvalue={ value }\n\t\t\t/>\n\t\t</fieldset>\n\t);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, useState } from '@wordpress/element';\nimport {\n\tBaseControl,\n\t__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,\n\t__experimentalUseCustomUnits as useCustomUnits,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useSettings } from '../use-settings';\nimport PresetInputControl from '../preset-input-control';\nimport { CUSTOM_VALUE_SETTINGS } from '../preset-input-control/constants';\n\nconst EMPTY_ARRAY = [];\n\n// Dimension-specific custom value settings - override defaults for larger dimension values\nconst DIMENSION_CUSTOM_VALUE_SETTINGS = {\n\t...CUSTOM_VALUE_SETTINGS,\n\tpx: { max: 1000, steps: 1 },\n\tem: { max: 50, steps: 0.1 },\n\trem: { max: 50, steps: 0.1 },\n};\n\n/**\n * Hook to retrieve dimension sizes from theme settings.\n *\n * @param {Object} presets Dimension presets object containing default, theme, and custom sizes.\n * @return {Array} Array of dimension size options.\n */\nfunction useDimensionSizes( presets ) {\n\tconst defaultSizes = presets?.default ?? EMPTY_ARRAY;\n\tconst customSizes = presets?.custom ?? EMPTY_ARRAY;\n\tconst themeSizes = presets?.theme ?? EMPTY_ARRAY;\n\n\treturn useMemo( () => {\n\t\tconst sizes = [\n\t\t\t{ name: __( 'None' ), slug: '0', size: 0 },\n\t\t\t...customSizes,\n\t\t\t...themeSizes,\n\t\t\t...defaultSizes,\n\t\t];\n\n\t\treturn sizes;\n\t}, [ customSizes, themeSizes, defaultSizes ] );\n}\n\n/**\n * DimensionControl renders a linked unit control and range control for adjusting dimensions of a block.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/dimension-control/README.md\n *\n * @param {Object}                     props\n * @param {?string}                    props.label          A label for the control.\n * @param {( value: string ) => void } props.onChange       Called when the dimension value changes.\n * @param {string}                     props.value          The current dimension value.\n * @param {?string}                    props.placeholder    Placeholder text for the custom-value input.\n * @param {?string}                    props.className      Additional CSS class on the wrapping fieldset.\n * @param {?Object}                    props.dimensionSizes Optional dimension size presets. Falls back to settings from the store.\n *\n * @return {Component} The component to be rendered.\n */\nexport default function DimensionControl( {\n\tlabel = __( 'Dimension' ),\n\tonChange,\n\tvalue,\n\tplaceholder,\n\tclassName,\n\tdimensionSizes: dimensionSizesProp,\n} ) {\n\tconst [ dimensionSizesFromSettings, availableUnits ] = useSettings(\n\t\t'dimensions.dimensionSizes',\n\t\t'spacing.units'\n\t);\n\tconst dimensionSizes = dimensionSizesProp ?? dimensionSizesFromSettings;\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: availableUnits || [\n\t\t\t'%',\n\t\t\t'px',\n\t\t\t'em',\n\t\t\t'rem',\n\t\t\t'vh',\n\t\t\t'vw',\n\t\t],\n\t} );\n\n\tconst options = useDimensionSizes( dimensionSizes );\n\n\t// Track selected unit for PresetInputControl\n\tconst [ selectedUnit, setSelectedUnit ] = useState( () => {\n\t\tconst [ , unit ] = parseQuantityAndUnitFromRawValue( value );\n\t\treturn unit || units[ 0 ]?.value || 'px';\n\t} );\n\n\tconst handleUnitChange = ( newUnit ) => {\n\t\t// Attempt to smooth over differences between currentUnit and newUnit.\n\t\t// This should slightly improve the experience of switching between unit types.\n\t\tconst [ currentValue, currentUnit ] =\n\t\t\tparseQuantityAndUnitFromRawValue( value );\n\n\t\tif ( [ 'em', 'rem' ].includes( newUnit ) && currentUnit === 'px' ) {\n\t\t\t// Convert pixel value to an approximate of the new unit, assuming a root size of 16px.\n\t\t\tonChange( ( currentValue / 16 ).toFixed( 2 ) + newUnit );\n\t\t} else if (\n\t\t\t[ 'em', 'rem' ].includes( currentUnit ) &&\n\t\t\tnewUnit === 'px'\n\t\t) {\n\t\t\t// Convert to pixel value assuming a root size of 16px.\n\t\t\tonChange( Math.round( currentValue * 16 ) + newUnit );\n\t\t} else if (\n\t\t\t[\n\t\t\t\t'%',\n\t\t\t\t'vw',\n\t\t\t\t'svw',\n\t\t\t\t'lvw',\n\t\t\t\t'dvw',\n\t\t\t\t'vh',\n\t\t\t\t'svh',\n\t\t\t\t'lvh',\n\t\t\t\t'dvh',\n\t\t\t\t'vi',\n\t\t\t\t'svi',\n\t\t\t\t'lvi',\n\t\t\t\t'dvi',\n\t\t\t\t'vb',\n\t\t\t\t'svb',\n\t\t\t\t'lvb',\n\t\t\t\t'dvb',\n\t\t\t\t'vmin',\n\t\t\t\t'svmin',\n\t\t\t\t'lvmin',\n\t\t\t\t'dvmin',\n\t\t\t\t'vmax',\n\t\t\t\t'svmax',\n\t\t\t\t'lvmax',\n\t\t\t\t'dvmax',\n\t\t\t].includes( newUnit ) &&\n\t\t\tcurrentValue > 100\n\t\t) {\n\t\t\t// When converting to `%` or viewport-relative units, cap the new value at 100.\n\t\t\tonChange( 100 + newUnit );\n\t\t}\n\n\t\tsetSelectedUnit( newUnit );\n\t};\n\n\treturn (\n\t\t<fieldset\n\t\t\tclassName={ clsx( 'block-editor-dimension-control', className ) }\n\t\t>\n\t\t\t<BaseControl.VisualLabel as=\"legend\">\n\t\t\t\t{ label }\n\t\t\t</BaseControl.VisualLabel>\n\t\t\t<PresetInputControl\n\t\t\t\tariaLabel={ label }\n\t\t\t\tclassName=\"block-editor-dimension-control\"\n\t\t\t\tcustomValueSettings={ DIMENSION_CUSTOM_VALUE_SETTINGS }\n\t\t\t\tminimumCustomValue={ 0 }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tonUnitChange={ handleUnitChange }\n\t\t\t\tplaceholder={ placeholder }\n\t\t\t\tpresets={ options }\n\t\t\t\tpresetType=\"dimension\"\n\t\t\t\tselectedUnit={ selectedUnit }\n\t\t\t\tshowTooltip\n\t\t\t\tunits={ units }\n\t\t\t\tvalue={ value }\n\t\t\t/>\n\t\t</fieldset>\n\t);\n}\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,10 +1,8 @@
 // packages/block-editor/src/components/dimensions-tool/aspect-ratio-tool.js
-import {
-  SelectControl,
-  __experimentalToolsPanelItem as ToolsPanelItem
-} from "@wordpress/components";
+import { SelectControl } from "@wordpress/components";
 import { __, _x } from "@wordpress/i18n";
 import { useSettings } from "../use-settings/index.mjs";
+import { InheritanceToolsPanelItem } from "../global-styles/inheritance/index.mjs";
 import { jsx } from "react/jsx-runtime";
 function AspectRatioTool({
   panelId,
@@ -14,7 +12,10 @@ function AspectRatioTool({
   options,
   defaultValue = "auto",
   hasValue,
-  isShownByDefault = true
+  isShownByDefault = true,
+  className,
+  isInherited,
+  hasLocalOverride
 }) {
   const displayValue = value ?? "auto";
   const [defaultRatios, themeRatios, showDefaultRatios] = useSettings(
@@ -48,8 +49,11 @@ function AspectRatioTool({
     }
   ];
   return /* @__PURE__ */ jsx(
-    ToolsPanelItem,
+    InheritanceToolsPanelItem,
     {
+      className,
+      isInherited,
+      hasLocalOverride,
       hasValue: hasValue ? hasValue : () => displayValue !== defaultValue,
       label: __("Aspect ratio"),
       onDeselect: () => onChange(void 0),

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dimensions-tool/aspect-ratio-tool.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tSelectControl,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\n/**\n * Internal dependencies\n */\nimport { useSettings } from '../use-settings';\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 */\n\nexport default function AspectRatioTool( {\n\tpanelId,\n\tvalue,\n\tonChange = () => {},\n\toptions,\n\tdefaultValue = 'auto',\n\thasValue,\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 ?? '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<ToolsPanelItem\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</ToolsPanelItem>\n\t);\n}\n"],
-  "mappings": ";AAGA;AAAA,EACC;AAAA,EACA,gCAAgC;AAAA,OAC1B;AACP,SAAS,IAAI,UAAU;AAIvB,SAAS,mBAAmB;AA8EzB;AAxDY,SAAR,gBAAkC;AAAA,EACxC;AAAA,EACA;AAAA,EACA,WAAW,MAAM;AAAA,EAAC;AAAA,EAClB;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,mBAAmB;AACpB,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,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": ["/**\n * WordPress dependencies\n */\nimport { SelectControl } from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\n/**\n * Internal dependencies\n */\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": ";AAGA,SAAS,qBAAqB;AAC9B,SAAS,IAAI,UAAU;AAIvB,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;",
   "names": []
 }

package/build-module/components/editor-styles/index.mjs CHANGED Viewed

@@ -46,7 +46,15 @@ function EditorStyles({ styles, scope, transformOptions }) {
   );
   const [transformedStyles, transformedSvgs] = useMemo(() => {
     const _styles = Object.values(styles ?? []);
-    for (const [id, override] of overrides) {
+    const orderedOverrides = [
+      ...overrides.filter(
+        ([, override]) => override?.__unstableType !== "custom-css"
+      ),
+      ...overrides.filter(
+        ([, override]) => override?.__unstableType === "custom-css"
+      )
+    ];
+    for (const [id, override] of orderedOverrides) {
       const index = _styles.findIndex(({ id: _id }) => id === _id);
       const overrideWithId = { ...override, id };
       if (index === -1) {

package/build-module/components/editor-styles/index.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/editor-styles/index.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { SVG } from '@wordpress/components';\nimport { useCallback, useMemo, memo } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport transformStyles from '../../utils/transform-styles';\nimport { store as blockEditorStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction useDarkThemeBodyClassName( styles, scope ) {\n\treturn useCallback(\n\t\t( node ) => {\n\t\t\tif ( ! node ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst { ownerDocument } = node;\n\t\t\tconst { defaultView, body } = ownerDocument;\n\t\t\tconst canvas = scope ? ownerDocument.querySelector( scope ) : body;\n\n\t\t\tlet backgroundColor;\n\n\t\t\tif ( ! canvas ) {\n\t\t\t\t// The real .editor-styles-wrapper element might not exist in the\n\t\t\t\t// DOM, so calculate the background color by creating a fake\n\t\t\t\t// wrapper.\n\t\t\t\tconst tempCanvas = ownerDocument.createElement( 'div' );\n\t\t\t\ttempCanvas.classList.add( 'editor-styles-wrapper' );\n\t\t\t\tbody.appendChild( tempCanvas );\n\n\t\t\t\tbackgroundColor = defaultView\n\t\t\t\t\t?.getComputedStyle( tempCanvas, null )\n\t\t\t\t\t.getPropertyValue( 'background-color' );\n\n\t\t\t\tbody.removeChild( tempCanvas );\n\t\t\t} else {\n\t\t\t\tbackgroundColor = defaultView\n\t\t\t\t\t?.getComputedStyle( canvas, null )\n\t\t\t\t\t.getPropertyValue( 'background-color' );\n\t\t\t}\n\t\t\tconst colordBackgroundColor = colord( backgroundColor );\n\t\t\t// If background is transparent, it should be treated as light color.\n\t\t\tif (\n\t\t\t\tcolordBackgroundColor.luminance() > 0.5 ||\n\t\t\t\tcolordBackgroundColor.alpha() === 0\n\t\t\t) {\n\t\t\t\tbody.classList.remove( 'is-dark-theme' );\n\t\t\t} else {\n\t\t\t\tbody.classList.add( 'is-dark-theme' );\n\t\t\t}\n\t\t},\n\t\t[ styles, scope ]\n\t);\n}\n\nfunction EditorStyles( { styles, scope, transformOptions } ) {\n\tconst overrides = useSelect(\n\t\t( select ) => unlock( select( blockEditorStore ) ).getStyleOverrides(),\n\t\t[]\n\t);\n\tconst [ transformedStyles, transformedSvgs ] = useMemo( () => {\n\t\tconst _styles = Object.values( styles ?? [] );\n\n\t\tfor ( const [ id, override ] of overrides ) {\n\t\t\tconst index = _styles.findIndex( ( { id: _id } ) => id === _id );\n\t\t\tconst overrideWithId = { ...override, id };\n\t\t\tif ( index === -1 ) {\n\t\t\t\t_styles.push( overrideWithId );\n\t\t\t} else {\n\t\t\t\t_styles[ index ] = overrideWithId;\n\t\t\t}\n\t\t}\n\n\t\treturn [\n\t\t\ttransformStyles(\n\t\t\t\t_styles.filter( ( style ) => style?.css ),\n\t\t\t\tscope,\n\t\t\t\ttransformOptions\n\t\t\t),\n\t\t\t_styles\n\t\t\t\t.filter( ( style ) => style.__unstableType === 'svgs' )\n\t\t\t\t.map( ( style ) => style.assets )\n\t\t\t\t.join( '' ),\n\t\t];\n\t}, [ styles, overrides, scope, transformOptions ] );\n\n\treturn (\n\t\t<>\n\t\t\t{ /* Use an empty style element to have a document reference,\n\t\t\t     but this could be any element. */ }\n\t\t\t<style\n\t\t\t\tref={ useDarkThemeBodyClassName( transformedStyles, scope ) }\n\t\t\t/>\n\t\t\t{ transformedStyles.map( ( css, index ) => (\n\t\t\t\t<style key={ index }>{ css }</style>\n\t\t\t) ) }\n\t\t\t<SVG\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\tviewBox=\"0 0 0 0\"\n\t\t\t\twidth=\"0\"\n\t\t\t\theight=\"0\"\n\t\t\t\trole=\"none\"\n\t\t\t\tstyle={ {\n\t\t\t\t\tvisibility: 'hidden',\n\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\tleft: '-9999px',\n\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t} }\n\t\t\t\tdangerouslySetInnerHTML={ { __html: transformedSvgs } }\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nexport default memo( EditorStyles );\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { SVG } from '@wordpress/components';\nimport { useCallback, useMemo, memo } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport transformStyles from '../../utils/transform-styles';\nimport { store as blockEditorStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction useDarkThemeBodyClassName( styles, scope ) {\n\treturn useCallback(\n\t\t( node ) => {\n\t\t\tif ( ! node ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst { ownerDocument } = node;\n\t\t\tconst { defaultView, body } = ownerDocument;\n\t\t\tconst canvas = scope ? ownerDocument.querySelector( scope ) : body;\n\n\t\t\tlet backgroundColor;\n\n\t\t\tif ( ! canvas ) {\n\t\t\t\t// The real .editor-styles-wrapper element might not exist in the\n\t\t\t\t// DOM, so calculate the background color by creating a fake\n\t\t\t\t// wrapper.\n\t\t\t\tconst tempCanvas = ownerDocument.createElement( 'div' );\n\t\t\t\ttempCanvas.classList.add( 'editor-styles-wrapper' );\n\t\t\t\tbody.appendChild( tempCanvas );\n\n\t\t\t\tbackgroundColor = defaultView\n\t\t\t\t\t?.getComputedStyle( tempCanvas, null )\n\t\t\t\t\t.getPropertyValue( 'background-color' );\n\n\t\t\t\tbody.removeChild( tempCanvas );\n\t\t\t} else {\n\t\t\t\tbackgroundColor = defaultView\n\t\t\t\t\t?.getComputedStyle( canvas, null )\n\t\t\t\t\t.getPropertyValue( 'background-color' );\n\t\t\t}\n\t\t\tconst colordBackgroundColor = colord( backgroundColor );\n\t\t\t// If background is transparent, it should be treated as light color.\n\t\t\tif (\n\t\t\t\tcolordBackgroundColor.luminance() > 0.5 ||\n\t\t\t\tcolordBackgroundColor.alpha() === 0\n\t\t\t) {\n\t\t\t\tbody.classList.remove( 'is-dark-theme' );\n\t\t\t} else {\n\t\t\t\tbody.classList.add( 'is-dark-theme' );\n\t\t\t}\n\t\t},\n\t\t[ styles, scope ]\n\t);\n}\n\nfunction EditorStyles( { styles, scope, transformOptions } ) {\n\tconst overrides = useSelect(\n\t\t( select ) => unlock( select( blockEditorStore ) ).getStyleOverrides(),\n\t\t[]\n\t);\n\tconst [ transformedStyles, transformedSvgs ] = useMemo( () => {\n\t\tconst _styles = Object.values( styles ?? [] );\n\n\t\t/*\n\t\t * Custom CSS overrides are applied after all other overrides so they\n\t\t * win the cascade at equal specificity, mirroring the front end where\n\t\t * the custom CSS stylesheet is printed last. Both partitions keep the\n\t\t * block order established by getStyleOverrides.\n\t\t */\n\t\tconst orderedOverrides = [\n\t\t\t...overrides.filter(\n\t\t\t\t( [ , override ] ) => override?.__unstableType !== 'custom-css'\n\t\t\t),\n\t\t\t...overrides.filter(\n\t\t\t\t( [ , override ] ) => override?.__unstableType === 'custom-css'\n\t\t\t),\n\t\t];\n\n\t\tfor ( const [ id, override ] of orderedOverrides ) {\n\t\t\tconst index = _styles.findIndex( ( { id: _id } ) => id === _id );\n\t\t\tconst overrideWithId = { ...override, id };\n\t\t\tif ( index === -1 ) {\n\t\t\t\t_styles.push( overrideWithId );\n\t\t\t} else {\n\t\t\t\t_styles[ index ] = overrideWithId;\n\t\t\t}\n\t\t}\n\n\t\treturn [\n\t\t\ttransformStyles(\n\t\t\t\t_styles.filter( ( style ) => style?.css ),\n\t\t\t\tscope,\n\t\t\t\ttransformOptions\n\t\t\t),\n\t\t\t_styles\n\t\t\t\t.filter( ( style ) => style.__unstableType === 'svgs' )\n\t\t\t\t.map( ( style ) => style.assets )\n\t\t\t\t.join( '' ),\n\t\t];\n\t}, [ styles, overrides, scope, transformOptions ] );\n\n\treturn (\n\t\t<>\n\t\t\t{ /* Use an empty style element to have a document reference,\n\t\t\t     but this could be any element. */ }\n\t\t\t<style\n\t\t\t\tref={ useDarkThemeBodyClassName( transformedStyles, scope ) }\n\t\t\t/>\n\t\t\t{ transformedStyles.map( ( css, index ) => (\n\t\t\t\t<style key={ index }>{ css }</style>\n\t\t\t) ) }\n\t\t\t<SVG\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\tviewBox=\"0 0 0 0\"\n\t\t\t\twidth=\"0\"\n\t\t\t\theight=\"0\"\n\t\t\t\trole=\"none\"\n\t\t\t\tstyle={ {\n\t\t\t\t\tvisibility: 'hidden',\n\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\tleft: '-9999px',\n\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t} }\n\t\t\t\tdangerouslySetInnerHTML={ { __html: transformedSvgs } }\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nexport default memo( EditorStyles );\n"],
+  "mappings": "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",
   "names": []
 }