@wordpress/block-editor 15.19.1-next.v.202605131032.0 → 15.20.0

package/build/hooks/color.cjs

@@ -49,8 +49,10 @@ var import_background = require("./background.cjs");
 var import_use_settings = require("../components/use-settings/index.cjs");
 var import_inspector_controls = __toESM(require("../components/inspector-controls/index.cjs"));
 var import_color_panel = __toESM(require("../components/global-styles/color-panel.cjs"));
+var import_color_values = require("../utils/color-values.cjs");
 var import_contrast_checker = __toESM(require("./contrast-checker.cjs"));
 var import_store = require("../store/index.cjs");
+var import_block_style_state = require("./block-style-state.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 var COLOR_SUPPORT_KEY = "color";
 var hasColorSupport = (blockNameOrType) => {
@@ -131,13 +133,14 @@ function addSaveProps(props, blockNameOrType, attributes) {
 }
 function styleToAttributes(style) {
   const textColorValue = style?.color?.text;
-  const textColorSlug = textColorValue?.startsWith("var:preset|color|") ? textColorValue.substring("var:preset|color|".length) : void 0;
+  const textColorSlug = (0, import_color_values.extractPresetSlug)(textColorValue, "color");
   const backgroundColorValue = style?.color?.background;
-  const backgroundColorSlug = backgroundColorValue?.startsWith(
-    "var:preset|color|"
-  ) ? backgroundColorValue.substring("var:preset|color|".length) : void 0;
+  const backgroundColorSlug = (0, import_color_values.extractPresetSlug)(
+    backgroundColorValue,
+    "color"
+  );
   const gradientValue = style?.color?.gradient;
-  const gradientSlug = gradientValue?.startsWith("var:preset|gradient|") ? gradientValue.substring("var:preset|gradient|".length) : void 0;
+  const gradientSlug = (0, import_color_values.extractPresetSlug)(gradientValue, "gradient");
   const updatedStyle = { ...style };
   updatedStyle.color = {
     ...updatedStyle.color,
@@ -193,6 +196,7 @@ function ColorEdit({
   label,
   defaultControls
 }) {
+  const selectedState = (0, import_block_style_state.useBlockStyleState)();
   const isEnabled = (0, import_color_panel.useHasColorPanel)(settings);
   const { style, textColor, backgroundColor, gradient } = (0, import_data.useSelect)(
     (select) => {
@@ -214,17 +218,33 @@ function ColorEdit({
     },
     [clientId, isEnabled]
   );
+  const isStateSelected = !(0, import_block_style_state.isDefaultBlockStyleState)(selectedState);
   const value = (0, import_element.useMemo)(() => {
+    if (isStateSelected) {
+      return (0, import_block_style_state.getStyleForState)(style, selectedState);
+    }
     return attributesToStyle({
       style,
       textColor,
       backgroundColor,
       gradient
     });
-  }, [style, textColor, backgroundColor, gradient]);
-  const onChange = (newStyle) => {
+  }, [
+    isStateSelected,
+    selectedState,
+    style,
+    textColor,
+    backgroundColor,
+    gradient
+  ]);
+  const onChange = isStateSelected ? (newStyle) => {
+    setAttributes({
+      style: (0, import_block_style_state.setStyleForState)(style, selectedState, newStyle)
+    });
+  } : (newStyle) => {
     setAttributes(styleToAttributes(newStyle));
   };
+  const Wrapper = asWrapper || ColorInspectorControl;
   if (!isEnabled) {
     return null;
   }
@@ -232,14 +252,13 @@ function ColorEdit({
     COLOR_SUPPORT_KEY,
     "__experimentalDefaultControls"
   ]);
-  const enableContrastChecking = import_element.Platform.OS === "web" && !value?.color?.gradient && (settings?.color?.text || settings?.color?.link) && // Contrast checking is enabled by default.
+  const enableContrastChecking = !isStateSelected && import_element.Platform.OS === "web" && !value?.color?.gradient && (settings?.color?.text || settings?.color?.link) && // Contrast checking is enabled by default.
   // Deactivating it requires `enableContrastChecker` to have
   // an explicit value of `false`.
   false !== (0, import_blocks.getBlockSupport)(name, [
     COLOR_SUPPORT_KEY,
     "enableContrastChecker"
   ]);
-  const Wrapper = asWrapper || ColorInspectorControl;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_color_panel.default,
     {

package/build/hooks/color.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/hooks/color.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { addFilter } from '@wordpress/hooks';\nimport { getBlockSupport } from '@wordpress/blocks';\nimport { useMemo, Platform, useCallback } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport {\n\tgetColorClassName,\n\tgetColorObjectByAttributeValues,\n} from '../components/colors';\nimport { __experimentalGetGradientClass } from '../components/gradients';\nimport {\n\tcleanEmptyObject,\n\ttransformStyles,\n\tshouldSkipSerialization,\n} from './utils';\nimport { getBackgroundImageClasses } from './background';\nimport { useSettings } from '../components/use-settings';\nimport InspectorControls from '../components/inspector-controls';\nimport {\n\tuseHasColorPanel,\n\tdefault as StylesColorPanel,\n} from '../components/global-styles/color-panel';\nimport BlockColorContrastChecker from './contrast-checker';\nimport { store as blockEditorStore } from '../store';\n\nexport const COLOR_SUPPORT_KEY = 'color';\n\nconst hasColorSupport = ( blockNameOrType ) => {\n\tconst colorSupport = getBlockSupport( blockNameOrType, COLOR_SUPPORT_KEY );\n\treturn (\n\t\tcolorSupport &&\n\t\t( colorSupport.link === true ||\n\t\t\tcolorSupport.gradient === true ||\n\t\t\tcolorSupport.background !== false ||\n\t\t\tcolorSupport.text !== false )\n\t);\n};\n\nconst hasLinkColorSupport = ( blockType ) => {\n\tif ( Platform.OS !== 'web' ) {\n\t\treturn false;\n\t}\n\n\tconst colorSupport = getBlockSupport( blockType, COLOR_SUPPORT_KEY );\n\n\treturn (\n\t\tcolorSupport !== null &&\n\t\ttypeof colorSupport === 'object' &&\n\t\t!! colorSupport.link\n\t);\n};\n\nconst hasGradientSupport = ( blockNameOrType ) => {\n\tconst colorSupport = getBlockSupport( blockNameOrType, COLOR_SUPPORT_KEY );\n\n\treturn (\n\t\tcolorSupport !== null &&\n\t\ttypeof colorSupport === 'object' &&\n\t\t!! colorSupport.gradients\n\t);\n};\n\nconst hasBackgroundColorSupport = ( blockType ) => {\n\tconst colorSupport = getBlockSupport( blockType, COLOR_SUPPORT_KEY );\n\n\treturn colorSupport && colorSupport.background !== false;\n};\n\nconst hasTextColorSupport = ( blockType ) => {\n\tconst colorSupport = getBlockSupport( blockType, COLOR_SUPPORT_KEY );\n\n\treturn colorSupport && colorSupport.text !== false;\n};\n\n/**\n * Filters registered block settings, extending attributes to include\n * `backgroundColor` and `textColor` attribute.\n *\n * @param {Object} settings Original block settings.\n *\n * @return {Object} Filtered block settings.\n */\nfunction addAttributes( settings ) {\n\tif ( ! hasColorSupport( settings ) ) {\n\t\treturn settings;\n\t}\n\n\t// Allow blocks to specify their own attribute definition with default values if needed.\n\tif ( ! settings.attributes.backgroundColor ) {\n\t\tObject.assign( settings.attributes, {\n\t\t\tbackgroundColor: {\n\t\t\t\ttype: 'string',\n\t\t\t},\n\t\t} );\n\t}\n\tif ( ! settings.attributes.textColor ) {\n\t\tObject.assign( settings.attributes, {\n\t\t\ttextColor: {\n\t\t\t\ttype: 'string',\n\t\t\t},\n\t\t} );\n\t}\n\n\tif ( hasGradientSupport( settings ) && ! settings.attributes.gradient ) {\n\t\tObject.assign( settings.attributes, {\n\t\t\tgradient: {\n\t\t\t\ttype: 'string',\n\t\t\t},\n\t\t} );\n\t}\n\n\treturn settings;\n}\n\n/**\n * Override props assigned to save component to inject colors classnames.\n *\n * @param {Object}        props           Additional props applied to save element.\n * @param {Object|string} blockNameOrType Block type.\n * @param {Object}        attributes      Block attributes.\n *\n * @return {Object} Filtered props applied to save element.\n */\nexport function addSaveProps( props, blockNameOrType, attributes ) {\n\tif (\n\t\t! hasColorSupport( blockNameOrType ) ||\n\t\tshouldSkipSerialization( blockNameOrType, COLOR_SUPPORT_KEY )\n\t) {\n\t\treturn props;\n\t}\n\n\tconst hasGradient = hasGradientSupport( blockNameOrType );\n\n\t// I'd have preferred to avoid the \"style\" attribute usage here\n\tconst { backgroundColor, textColor, gradient, style } = attributes;\n\n\tconst shouldSerialize = ( feature ) =>\n\t\t! shouldSkipSerialization(\n\t\t\tblockNameOrType,\n\t\t\tCOLOR_SUPPORT_KEY,\n\t\t\tfeature\n\t\t);\n\n\t// Primary color classes must come before the `has-text-color`,\n\t// `has-background` and `has-link-color` classes to maintain backwards\n\t// compatibility and avoid block invalidations.\n\tconst textClass = shouldSerialize( 'text' )\n\t\t? getColorClassName( 'color', textColor )\n\t\t: undefined;\n\n\tconst gradientClass = shouldSerialize( 'gradients' )\n\t\t? __experimentalGetGradientClass( gradient )\n\t\t: undefined;\n\n\tconst backgroundClass = shouldSerialize( 'background' )\n\t\t? getColorClassName( 'background-color', backgroundColor )\n\t\t: undefined;\n\n\tconst serializeHasBackground =\n\t\tshouldSerialize( 'background' ) || shouldSerialize( 'gradients' );\n\tconst hasBackground =\n\t\tbackgroundColor ||\n\t\tstyle?.color?.background ||\n\t\t( hasGradient && ( gradient || style?.color?.gradient ) );\n\n\tconst newClassName = clsx( props.className, textClass, gradientClass, {\n\t\t// Don't apply the background class if there's a custom gradient.\n\t\t[ backgroundClass ]:\n\t\t\t( ! hasGradient || ! style?.color?.gradient ) && !! backgroundClass,\n\t\t'has-text-color':\n\t\t\tshouldSerialize( 'text' ) && ( textColor || style?.color?.text ),\n\t\t'has-background': serializeHasBackground && hasBackground,\n\t\t'has-link-color':\n\t\t\tshouldSerialize( 'link' ) && style?.elements?.link?.color,\n\t} );\n\tprops.className = newClassName ? newClassName : undefined;\n\n\treturn props;\n}\n\nfunction styleToAttributes( style ) {\n\tconst textColorValue = style?.color?.text;\n\tconst textColorSlug = textColorValue?.startsWith( 'var:preset|color|' )\n\t\t? textColorValue.substring( 'var:preset|color|'.length )\n\t\t: undefined;\n\tconst backgroundColorValue = style?.color?.background;\n\tconst backgroundColorSlug = backgroundColorValue?.startsWith(\n\t\t'var:preset|color|'\n\t)\n\t\t? backgroundColorValue.substring( 'var:preset|color|'.length )\n\t\t: undefined;\n\tconst gradientValue = style?.color?.gradient;\n\tconst gradientSlug = gradientValue?.startsWith( 'var:preset|gradient|' )\n\t\t? gradientValue.substring( 'var:preset|gradient|'.length )\n\t\t: undefined;\n\tconst updatedStyle = { ...style };\n\tupdatedStyle.color = {\n\t\t...updatedStyle.color,\n\t\ttext: textColorSlug ? undefined : textColorValue,\n\t\tbackground: backgroundColorSlug ? undefined : backgroundColorValue,\n\t\tgradient: gradientSlug ? undefined : gradientValue,\n\t};\n\treturn {\n\t\tstyle: cleanEmptyObject( updatedStyle ),\n\t\ttextColor: textColorSlug,\n\t\tbackgroundColor: backgroundColorSlug,\n\t\tgradient: gradientSlug,\n\t};\n}\n\nfunction attributesToStyle( attributes ) {\n\treturn {\n\t\t...attributes.style,\n\t\tcolor: {\n\t\t\t...attributes.style?.color,\n\t\t\ttext: attributes.textColor\n\t\t\t\t? 'var:preset|color|' + attributes.textColor\n\t\t\t\t: attributes.style?.color?.text,\n\t\t\tbackground: attributes.backgroundColor\n\t\t\t\t? 'var:preset|color|' + attributes.backgroundColor\n\t\t\t\t: attributes.style?.color?.background,\n\t\t\tgradient: attributes.gradient\n\t\t\t\t? 'var:preset|gradient|' + attributes.gradient\n\t\t\t\t: attributes.style?.color?.gradient,\n\t\t},\n\t};\n}\n\nfunction ColorInspectorControl( { children, resetAllFilter } ) {\n\tconst attributesResetAllFilter = useCallback(\n\t\t( attributes ) => {\n\t\t\tconst existingStyle = attributesToStyle( attributes );\n\t\t\tconst updatedStyle = resetAllFilter( existingStyle );\n\t\t\treturn {\n\t\t\t\t...attributes,\n\t\t\t\t...styleToAttributes( updatedStyle ),\n\t\t\t};\n\t\t},\n\t\t[ resetAllFilter ]\n\t);\n\n\treturn (\n\t\t<InspectorControls\n\t\t\tgroup=\"color\"\n\t\t\tresetAllFilter={ attributesResetAllFilter }\n\t\t>\n\t\t\t{ children }\n\t\t</InspectorControls>\n\t);\n}\n\nexport function ColorEdit( {\n\tclientId,\n\tname,\n\tsetAttributes,\n\tsettings,\n\tasWrapper,\n\tlabel,\n\tdefaultControls,\n} ) {\n\tconst isEnabled = useHasColorPanel( settings );\n\n\tconst { style, textColor, backgroundColor, gradient } = useSelect(\n\t\t( select ) => {\n\t\t\t// Early return to avoid subscription when disabled\n\t\t\tif ( ! isEnabled ) {\n\t\t\t\treturn {};\n\t\t\t}\n\t\t\tconst {\n\t\t\t\tstyle: _style,\n\t\t\t\ttextColor: _textColor,\n\t\t\t\tbackgroundColor: _backgroundColor,\n\t\t\t\tgradient: _gradient,\n\t\t\t} = select( blockEditorStore ).getBlockAttributes( clientId ) || {};\n\t\t\treturn {\n\t\t\t\tstyle: _style,\n\t\t\t\ttextColor: _textColor,\n\t\t\t\tbackgroundColor: _backgroundColor,\n\t\t\t\tgradient: _gradient,\n\t\t\t};\n\t\t},\n\t\t[ clientId, isEnabled ]\n\t);\n\tconst value = useMemo( () => {\n\t\treturn attributesToStyle( {\n\t\t\tstyle,\n\t\t\ttextColor,\n\t\t\tbackgroundColor,\n\t\t\tgradient,\n\t\t} );\n\t}, [ style, textColor, backgroundColor, gradient ] );\n\n\tconst onChange = ( newStyle ) => {\n\t\tsetAttributes( styleToAttributes( newStyle ) );\n\t};\n\n\tif ( ! isEnabled ) {\n\t\treturn null;\n\t}\n\n\tdefaultControls = defaultControls\n\t\t? defaultControls\n\t\t: getBlockSupport( name, [\n\t\t\t\tCOLOR_SUPPORT_KEY,\n\t\t\t\t'__experimentalDefaultControls',\n\t\t  ] );\n\n\tconst enableContrastChecking =\n\t\tPlatform.OS === 'web' &&\n\t\t! value?.color?.gradient &&\n\t\t( settings?.color?.text || settings?.color?.link ) &&\n\t\t// Contrast checking is enabled by default.\n\t\t// Deactivating it requires `enableContrastChecker` to have\n\t\t// an explicit value of `false`.\n\t\tfalse !==\n\t\t\tgetBlockSupport( name, [\n\t\t\t\tCOLOR_SUPPORT_KEY,\n\t\t\t\t'enableContrastChecker',\n\t\t\t] );\n\n\t// Use provided wrapper or default to ColorInspectorControl\n\tconst Wrapper = asWrapper || ColorInspectorControl;\n\n\treturn (\n\t\t<StylesColorPanel\n\t\t\tas={ Wrapper }\n\t\t\tpanelId={ clientId }\n\t\t\tsettings={ settings }\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t\tdefaultControls={ defaultControls }\n\t\t\tlabel={ label }\n\t\t\tenableContrastChecker={\n\t\t\t\tfalse !==\n\t\t\t\tgetBlockSupport( name, [\n\t\t\t\t\tCOLOR_SUPPORT_KEY,\n\t\t\t\t\t'enableContrastChecker',\n\t\t\t\t] )\n\t\t\t}\n\t\t>\n\t\t\t{ enableContrastChecking && (\n\t\t\t\t<BlockColorContrastChecker\n\t\t\t\t\tclientId={ clientId }\n\t\t\t\t\tname={ name }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</StylesColorPanel>\n\t);\n}\n\nfunction useBlockProps( {\n\tname,\n\tbackgroundColor,\n\ttextColor,\n\tgradient,\n\tstyle,\n} ) {\n\tconst [ userPalette, themePalette, defaultPalette ] = useSettings(\n\t\t'color.palette.custom',\n\t\t'color.palette.theme',\n\t\t'color.palette.default'\n\t);\n\n\tconst colors = useMemo(\n\t\t() => [\n\t\t\t...( userPalette || [] ),\n\t\t\t...( themePalette || [] ),\n\t\t\t...( defaultPalette || [] ),\n\t\t],\n\t\t[ userPalette, themePalette, defaultPalette ]\n\t);\n\tif (\n\t\t! hasColorSupport( name ) ||\n\t\tshouldSkipSerialization( name, COLOR_SUPPORT_KEY )\n\t) {\n\t\treturn {};\n\t}\n\tconst extraStyles = {};\n\n\tif (\n\t\ttextColor &&\n\t\t! shouldSkipSerialization( name, COLOR_SUPPORT_KEY, 'text' )\n\t) {\n\t\textraStyles.color = getColorObjectByAttributeValues(\n\t\t\tcolors,\n\t\t\ttextColor\n\t\t)?.color;\n\t}\n\tif (\n\t\tbackgroundColor &&\n\t\t! shouldSkipSerialization( name, COLOR_SUPPORT_KEY, 'background' )\n\t) {\n\t\textraStyles.backgroundColor = getColorObjectByAttributeValues(\n\t\t\tcolors,\n\t\t\tbackgroundColor\n\t\t)?.color;\n\t}\n\n\tconst saveProps = addSaveProps( { style: extraStyles }, name, {\n\t\ttextColor,\n\t\tbackgroundColor,\n\t\tgradient,\n\t\tstyle,\n\t} );\n\n\tconst hasBackgroundValue =\n\t\tbackgroundColor ||\n\t\tstyle?.color?.background ||\n\t\tgradient ||\n\t\tstyle?.color?.gradient;\n\n\treturn {\n\t\t...saveProps,\n\t\tclassName: clsx(\n\t\t\tsaveProps.className,\n\t\t\t// Add background image classes in the editor, if not already handled by background color values.\n\t\t\t! hasBackgroundValue && getBackgroundImageClasses( style )\n\t\t),\n\t};\n}\n\nexport default {\n\tuseBlockProps,\n\taddSaveProps,\n\tattributeKeys: [ 'backgroundColor', 'textColor', 'gradient', 'style' ],\n\thasSupport: hasColorSupport,\n};\n\nconst MIGRATION_PATHS = {\n\tlinkColor: [ [ 'style', 'elements', 'link', 'color', 'text' ] ],\n\ttextColor: [ [ 'textColor' ], [ 'style', 'color', 'text' ] ],\n\tbackgroundColor: [\n\t\t[ 'backgroundColor' ],\n\t\t[ 'style', 'color', 'background' ],\n\t],\n\tgradient: [ [ 'gradient' ], [ 'style', 'color', 'gradient' ] ],\n};\n\nexport function addTransforms( result, source, index, results ) {\n\tconst destinationBlockType = result.name;\n\tconst activeSupports = {\n\t\tlinkColor: hasLinkColorSupport( destinationBlockType ),\n\t\ttextColor: hasTextColorSupport( destinationBlockType ),\n\t\tbackgroundColor: hasBackgroundColorSupport( destinationBlockType ),\n\t\tgradient: hasGradientSupport( destinationBlockType ),\n\t};\n\treturn transformStyles(\n\t\tactiveSupports,\n\t\tMIGRATION_PATHS,\n\t\tresult,\n\t\tsource,\n\t\tindex,\n\t\tresults\n\t);\n}\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'core/color/addAttribute',\n\taddAttributes\n);\n\naddFilter(\n\t'blocks.switchToBlockType.transformedBlock',\n\t'core/color/addTransforms',\n\taddTransforms\n);\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,mBAA0B;AAC1B,oBAAgC;AAChC,qBAA+C;AAC/C,kBAA0B;AAK1B,oBAGO;AACP,uBAA+C;AAC/C,mBAIO;AACP,wBAA0C;AAC1C,0BAA4B;AAC5B,gCAA8B;AAC9B,yBAGO;AACP,8BAAsC;AACtC,mBAA0C;AA2NxC;AAzNK,IAAM,oBAAoB;AAEjC,IAAM,kBAAkB,CAAE,oBAAqB;AAC9C,QAAM,mBAAe,+BAAiB,iBAAiB,iBAAkB;AACzE,SACC,iBACE,aAAa,SAAS,QACvB,aAAa,aAAa,QAC1B,aAAa,eAAe,SAC5B,aAAa,SAAS;AAEzB;AAEA,IAAM,sBAAsB,CAAE,cAAe;AAC5C,MAAK,wBAAS,OAAO,OAAQ;AAC5B,WAAO;AAAA,EACR;AAEA,QAAM,mBAAe,+BAAiB,WAAW,iBAAkB;AAEnE,SACC,iBAAiB,QACjB,OAAO,iBAAiB,YACxB,CAAC,CAAE,aAAa;AAElB;AAEA,IAAM,qBAAqB,CAAE,oBAAqB;AACjD,QAAM,mBAAe,+BAAiB,iBAAiB,iBAAkB;AAEzE,SACC,iBAAiB,QACjB,OAAO,iBAAiB,YACxB,CAAC,CAAE,aAAa;AAElB;AAEA,IAAM,4BAA4B,CAAE,cAAe;AAClD,QAAM,mBAAe,+BAAiB,WAAW,iBAAkB;AAEnE,SAAO,gBAAgB,aAAa,eAAe;AACpD;AAEA,IAAM,sBAAsB,CAAE,cAAe;AAC5C,QAAM,mBAAe,+BAAiB,WAAW,iBAAkB;AAEnE,SAAO,gBAAgB,aAAa,SAAS;AAC9C;AAUA,SAAS,cAAe,UAAW;AAClC,MAAK,CAAE,gBAAiB,QAAS,GAAI;AACpC,WAAO;AAAA,EACR;AAGA,MAAK,CAAE,SAAS,WAAW,iBAAkB;AAC5C,WAAO,OAAQ,SAAS,YAAY;AAAA,MACnC,iBAAiB;AAAA,QAChB,MAAM;AAAA,MACP;AAAA,IACD,CAAE;AAAA,EACH;AACA,MAAK,CAAE,SAAS,WAAW,WAAY;AACtC,WAAO,OAAQ,SAAS,YAAY;AAAA,MACnC,WAAW;AAAA,QACV,MAAM;AAAA,MACP;AAAA,IACD,CAAE;AAAA,EACH;AAEA,MAAK,mBAAoB,QAAS,KAAK,CAAE,SAAS,WAAW,UAAW;AACvE,WAAO,OAAQ,SAAS,YAAY;AAAA,MACnC,UAAU;AAAA,QACT,MAAM;AAAA,MACP;AAAA,IACD,CAAE;AAAA,EACH;AAEA,SAAO;AACR;AAWO,SAAS,aAAc,OAAO,iBAAiB,YAAa;AAClE,MACC,CAAE,gBAAiB,eAAgB,SACnC,sCAAyB,iBAAiB,iBAAkB,GAC3D;AACD,WAAO;AAAA,EACR;AAEA,QAAM,cAAc,mBAAoB,eAAgB;AAGxD,QAAM,EAAE,iBAAiB,WAAW,UAAU,MAAM,IAAI;AAExD,QAAM,kBAAkB,CAAE,YACzB,KAAE;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAKD,QAAM,YAAY,gBAAiB,MAAO,QACvC,iCAAmB,SAAS,SAAU,IACtC;AAEH,QAAM,gBAAgB,gBAAiB,WAAY,QAChD,iDAAgC,QAAS,IACzC;AAEH,QAAM,kBAAkB,gBAAiB,YAAa,QACnD,iCAAmB,oBAAoB,eAAgB,IACvD;AAEH,QAAM,yBACL,gBAAiB,YAAa,KAAK,gBAAiB,WAAY;AACjE,QAAM,gBACL,mBACA,OAAO,OAAO,cACZ,gBAAiB,YAAY,OAAO,OAAO;AAE9C,QAAM,mBAAe,YAAAA,SAAM,MAAM,WAAW,WAAW,eAAe;AAAA;AAAA,IAErE,CAAE,eAAgB,IACf,CAAE,eAAe,CAAE,OAAO,OAAO,aAAc,CAAC,CAAE;AAAA,IACrD,kBACC,gBAAiB,MAAO,MAAO,aAAa,OAAO,OAAO;AAAA,IAC3D,kBAAkB,0BAA0B;AAAA,IAC5C,kBACC,gBAAiB,MAAO,KAAK,OAAO,UAAU,MAAM;AAAA,EACtD,CAAE;AACF,QAAM,YAAY,eAAe,eAAe;AAEhD,SAAO;AACR;AAEA,SAAS,kBAAmB,OAAQ;AACnC,QAAM,iBAAiB,OAAO,OAAO;AACrC,QAAM,gBAAgB,gBAAgB,WAAY,mBAAoB,IACnE,eAAe,UAAW,oBAAoB,MAAO,IACrD;AACH,QAAM,uBAAuB,OAAO,OAAO;AAC3C,QAAM,sBAAsB,sBAAsB;AAAA,IACjD;AAAA,EACD,IACG,qBAAqB,UAAW,oBAAoB,MAAO,IAC3D;AACH,QAAM,gBAAgB,OAAO,OAAO;AACpC,QAAM,eAAe,eAAe,WAAY,sBAAuB,IACpE,cAAc,UAAW,uBAAuB,MAAO,IACvD;AACH,QAAM,eAAe,EAAE,GAAG,MAAM;AAChC,eAAa,QAAQ;AAAA,IACpB,GAAG,aAAa;AAAA,IAChB,MAAM,gBAAgB,SAAY;AAAA,IAClC,YAAY,sBAAsB,SAAY;AAAA,IAC9C,UAAU,eAAe,SAAY;AAAA,EACtC;AACA,SAAO;AAAA,IACN,WAAO,+BAAkB,YAAa;AAAA,IACtC,WAAW;AAAA,IACX,iBAAiB;AAAA,IACjB,UAAU;AAAA,EACX;AACD;AAEA,SAAS,kBAAmB,YAAa;AACxC,SAAO;AAAA,IACN,GAAG,WAAW;AAAA,IACd,OAAO;AAAA,MACN,GAAG,WAAW,OAAO;AAAA,MACrB,MAAM,WAAW,YACd,sBAAsB,WAAW,YACjC,WAAW,OAAO,OAAO;AAAA,MAC5B,YAAY,WAAW,kBACpB,sBAAsB,WAAW,kBACjC,WAAW,OAAO,OAAO;AAAA,MAC5B,UAAU,WAAW,WAClB,yBAAyB,WAAW,WACpC,WAAW,OAAO,OAAO;AAAA,IAC7B;AAAA,EACD;AACD;AAEA,SAAS,sBAAuB,EAAE,UAAU,eAAe,GAAI;AAC9D,QAAM,+BAA2B;AAAA,IAChC,CAAE,eAAgB;AACjB,YAAM,gBAAgB,kBAAmB,UAAW;AACpD,YAAM,eAAe,eAAgB,aAAc;AACnD,aAAO;AAAA,QACN,GAAG;AAAA,QACH,GAAG,kBAAmB,YAAa;AAAA,MACpC;AAAA,IACD;AAAA,IACA,CAAE,cAAe;AAAA,EAClB;AAEA,SACC;AAAA,IAAC,0BAAAC;AAAA,IAAA;AAAA,MACA,OAAM;AAAA,MACN,gBAAiB;AAAA,MAEf;AAAA;AAAA,EACH;AAEF;AAEO,SAAS,UAAW;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,gBAAY,qCAAkB,QAAS;AAE7C,QAAM,EAAE,OAAO,WAAW,iBAAiB,SAAS,QAAI;AAAA,IACvD,CAAE,WAAY;AAEb,UAAK,CAAE,WAAY;AAClB,eAAO,CAAC;AAAA,MACT;AACA,YAAM;AAAA,QACL,OAAO;AAAA,QACP,WAAW;AAAA,QACX,iBAAiB;AAAA,QACjB,UAAU;AAAA,MACX,IAAI,OAAQ,aAAAC,KAAiB,EAAE,mBAAoB,QAAS,KAAK,CAAC;AAClE,aAAO;AAAA,QACN,OAAO;AAAA,QACP,WAAW;AAAA,QACX,iBAAiB;AAAA,QACjB,UAAU;AAAA,MACX;AAAA,IACD;AAAA,IACA,CAAE,UAAU,SAAU;AAAA,EACvB;AACA,QAAM,YAAQ,wBAAS,MAAM;AAC5B,WAAO,kBAAmB;AAAA,MACzB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD,CAAE;AAAA,EACH,GAAG,CAAE,OAAO,WAAW,iBAAiB,QAAS,CAAE;AAEnD,QAAM,WAAW,CAAE,aAAc;AAChC,kBAAe,kBAAmB,QAAS,CAAE;AAAA,EAC9C;AAEA,MAAK,CAAE,WAAY;AAClB,WAAO;AAAA,EACR;AAEA,oBAAkB,kBACf,sBACA,+BAAiB,MAAM;AAAA,IACvB;AAAA,IACA;AAAA,EACA,CAAE;AAEL,QAAM,yBACL,wBAAS,OAAO,SAChB,CAAE,OAAO,OAAO,aACd,UAAU,OAAO,QAAQ,UAAU,OAAO;AAAA;AAAA;AAAA,EAI5C,cACC,+BAAiB,MAAM;AAAA,IACtB;AAAA,IACA;AAAA,EACD,CAAE;AAGJ,QAAM,UAAU,aAAa;AAE7B,SACC;AAAA,IAAC,mBAAAC;AAAA,IAAA;AAAA,MACA,IAAK;AAAA,MACL,SAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,uBACC,cACA,+BAAiB,MAAM;AAAA,QACtB;AAAA,QACA;AAAA,MACD,CAAE;AAAA,MAGD,oCACD;AAAA,QAAC,wBAAAC;AAAA,QAAA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACD;AAAA;AAAA,EAEF;AAEF;AAEA,SAAS,cAAe;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,CAAE,aAAa,cAAc,cAAe,QAAI;AAAA,IACrD;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAEA,QAAM,aAAS;AAAA,IACd,MAAM;AAAA,MACL,GAAK,eAAe,CAAC;AAAA,MACrB,GAAK,gBAAgB,CAAC;AAAA,MACtB,GAAK,kBAAkB,CAAC;AAAA,IACzB;AAAA,IACA,CAAE,aAAa,cAAc,cAAe;AAAA,EAC7C;AACA,MACC,CAAE,gBAAiB,IAAK,SACxB,sCAAyB,MAAM,iBAAkB,GAChD;AACD,WAAO,CAAC;AAAA,EACT;AACA,QAAM,cAAc,CAAC;AAErB,MACC,aACA,KAAE,sCAAyB,MAAM,mBAAmB,MAAO,GAC1D;AACD,gBAAY,YAAQ;AAAA,MACnB;AAAA,MACA;AAAA,IACD,GAAG;AAAA,EACJ;AACA,MACC,mBACA,KAAE,sCAAyB,MAAM,mBAAmB,YAAa,GAChE;AACD,gBAAY,sBAAkB;AAAA,MAC7B;AAAA,MACA;AAAA,IACD,GAAG;AAAA,EACJ;AAEA,QAAM,YAAY,aAAc,EAAE,OAAO,YAAY,GAAG,MAAM;AAAA,IAC7D;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AAEF,QAAM,qBACL,mBACA,OAAO,OAAO,cACd,YACA,OAAO,OAAO;AAEf,SAAO;AAAA,IACN,GAAG;AAAA,IACH,eAAW,YAAAJ;AAAA,MACV,UAAU;AAAA;AAAA,MAEV,CAAE,0BAAsB,6CAA2B,KAAM;AAAA,IAC1D;AAAA,EACD;AACD;AAEA,IAAO,gBAAQ;AAAA,EACd;AAAA,EACA;AAAA,EACA,eAAe,CAAE,mBAAmB,aAAa,YAAY,OAAQ;AAAA,EACrE,YAAY;AACb;AAEA,IAAM,kBAAkB;AAAA,EACvB,WAAW,CAAE,CAAE,SAAS,YAAY,QAAQ,SAAS,MAAO,CAAE;AAAA,EAC9D,WAAW,CAAE,CAAE,WAAY,GAAG,CAAE,SAAS,SAAS,MAAO,CAAE;AAAA,EAC3D,iBAAiB;AAAA,IAChB,CAAE,iBAAkB;AAAA,IACpB,CAAE,SAAS,SAAS,YAAa;AAAA,EAClC;AAAA,EACA,UAAU,CAAE,CAAE,UAAW,GAAG,CAAE,SAAS,SAAS,UAAW,CAAE;AAC9D;AAEO,SAAS,cAAe,QAAQ,QAAQ,OAAO,SAAU;AAC/D,QAAM,uBAAuB,OAAO;AACpC,QAAM,iBAAiB;AAAA,IACtB,WAAW,oBAAqB,oBAAqB;AAAA,IACrD,WAAW,oBAAqB,oBAAqB;AAAA,IACrD,iBAAiB,0BAA2B,oBAAqB;AAAA,IACjE,UAAU,mBAAoB,oBAAqB;AAAA,EACpD;AACA,aAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD;AAAA,IAEA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AACD;AAAA,IAEA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AACD;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { addFilter } from '@wordpress/hooks';\nimport { getBlockSupport } from '@wordpress/blocks';\nimport { useMemo, Platform, useCallback } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport {\n\tgetColorClassName,\n\tgetColorObjectByAttributeValues,\n} from '../components/colors';\nimport { __experimentalGetGradientClass } from '../components/gradients';\nimport {\n\tcleanEmptyObject,\n\ttransformStyles,\n\tshouldSkipSerialization,\n} from './utils';\nimport { getBackgroundImageClasses } from './background';\nimport { useSettings } from '../components/use-settings';\nimport InspectorControls from '../components/inspector-controls';\nimport {\n\tuseHasColorPanel,\n\tdefault as StylesColorPanel,\n} from '../components/global-styles/color-panel';\nimport { extractPresetSlug } from '../utils/color-values';\nimport BlockColorContrastChecker from './contrast-checker';\nimport { store as blockEditorStore } from '../store';\nimport {\n\tgetStyleForState,\n\tisDefaultBlockStyleState,\n\tsetStyleForState,\n\tuseBlockStyleState,\n} from './block-style-state';\n\nexport const COLOR_SUPPORT_KEY = 'color';\n\nconst hasColorSupport = ( blockNameOrType ) => {\n\tconst colorSupport = getBlockSupport( blockNameOrType, COLOR_SUPPORT_KEY );\n\treturn (\n\t\tcolorSupport &&\n\t\t( colorSupport.link === true ||\n\t\t\tcolorSupport.gradient === true ||\n\t\t\tcolorSupport.background !== false ||\n\t\t\tcolorSupport.text !== false )\n\t);\n};\n\nconst hasLinkColorSupport = ( blockType ) => {\n\tif ( Platform.OS !== 'web' ) {\n\t\treturn false;\n\t}\n\n\tconst colorSupport = getBlockSupport( blockType, COLOR_SUPPORT_KEY );\n\n\treturn (\n\t\tcolorSupport !== null &&\n\t\ttypeof colorSupport === 'object' &&\n\t\t!! colorSupport.link\n\t);\n};\n\nconst hasGradientSupport = ( blockNameOrType ) => {\n\tconst colorSupport = getBlockSupport( blockNameOrType, COLOR_SUPPORT_KEY );\n\n\treturn (\n\t\tcolorSupport !== null &&\n\t\ttypeof colorSupport === 'object' &&\n\t\t!! colorSupport.gradients\n\t);\n};\n\nconst hasBackgroundColorSupport = ( blockType ) => {\n\tconst colorSupport = getBlockSupport( blockType, COLOR_SUPPORT_KEY );\n\n\treturn colorSupport && colorSupport.background !== false;\n};\n\nconst hasTextColorSupport = ( blockType ) => {\n\tconst colorSupport = getBlockSupport( blockType, COLOR_SUPPORT_KEY );\n\n\treturn colorSupport && colorSupport.text !== false;\n};\n\n/**\n * Filters registered block settings, extending attributes to include\n * `backgroundColor` and `textColor` attribute.\n *\n * @param {Object} settings Original block settings.\n *\n * @return {Object} Filtered block settings.\n */\nfunction addAttributes( settings ) {\n\tif ( ! hasColorSupport( settings ) ) {\n\t\treturn settings;\n\t}\n\n\t// Allow blocks to specify their own attribute definition with default values if needed.\n\tif ( ! settings.attributes.backgroundColor ) {\n\t\tObject.assign( settings.attributes, {\n\t\t\tbackgroundColor: {\n\t\t\t\ttype: 'string',\n\t\t\t},\n\t\t} );\n\t}\n\tif ( ! settings.attributes.textColor ) {\n\t\tObject.assign( settings.attributes, {\n\t\t\ttextColor: {\n\t\t\t\ttype: 'string',\n\t\t\t},\n\t\t} );\n\t}\n\n\tif ( hasGradientSupport( settings ) && ! settings.attributes.gradient ) {\n\t\tObject.assign( settings.attributes, {\n\t\t\tgradient: {\n\t\t\t\ttype: 'string',\n\t\t\t},\n\t\t} );\n\t}\n\n\treturn settings;\n}\n\n/**\n * Override props assigned to save component to inject colors classnames.\n *\n * @param {Object}        props           Additional props applied to save element.\n * @param {Object|string} blockNameOrType Block type.\n * @param {Object}        attributes      Block attributes.\n *\n * @return {Object} Filtered props applied to save element.\n */\nexport function addSaveProps( props, blockNameOrType, attributes ) {\n\tif (\n\t\t! hasColorSupport( blockNameOrType ) ||\n\t\tshouldSkipSerialization( blockNameOrType, COLOR_SUPPORT_KEY )\n\t) {\n\t\treturn props;\n\t}\n\n\tconst hasGradient = hasGradientSupport( blockNameOrType );\n\n\t// I'd have preferred to avoid the \"style\" attribute usage here\n\tconst { backgroundColor, textColor, gradient, style } = attributes;\n\n\tconst shouldSerialize = ( feature ) =>\n\t\t! shouldSkipSerialization(\n\t\t\tblockNameOrType,\n\t\t\tCOLOR_SUPPORT_KEY,\n\t\t\tfeature\n\t\t);\n\n\t// Primary color classes must come before the `has-text-color`,\n\t// `has-background` and `has-link-color` classes to maintain backwards\n\t// compatibility and avoid block invalidations.\n\tconst textClass = shouldSerialize( 'text' )\n\t\t? getColorClassName( 'color', textColor )\n\t\t: undefined;\n\n\tconst gradientClass = shouldSerialize( 'gradients' )\n\t\t? __experimentalGetGradientClass( gradient )\n\t\t: undefined;\n\n\tconst backgroundClass = shouldSerialize( 'background' )\n\t\t? getColorClassName( 'background-color', backgroundColor )\n\t\t: undefined;\n\n\tconst serializeHasBackground =\n\t\tshouldSerialize( 'background' ) || shouldSerialize( 'gradients' );\n\tconst hasBackground =\n\t\tbackgroundColor ||\n\t\tstyle?.color?.background ||\n\t\t( hasGradient && ( gradient || style?.color?.gradient ) );\n\n\tconst newClassName = clsx( props.className, textClass, gradientClass, {\n\t\t// Don't apply the background class if there's a custom gradient.\n\t\t[ backgroundClass ]:\n\t\t\t( ! hasGradient || ! style?.color?.gradient ) && !! backgroundClass,\n\t\t'has-text-color':\n\t\t\tshouldSerialize( 'text' ) && ( textColor || style?.color?.text ),\n\t\t'has-background': serializeHasBackground && hasBackground,\n\t\t'has-link-color':\n\t\t\tshouldSerialize( 'link' ) && style?.elements?.link?.color,\n\t} );\n\tprops.className = newClassName ? newClassName : undefined;\n\n\treturn props;\n}\n\nfunction styleToAttributes( style ) {\n\tconst textColorValue = style?.color?.text;\n\tconst textColorSlug = extractPresetSlug( textColorValue, 'color' );\n\tconst backgroundColorValue = style?.color?.background;\n\tconst backgroundColorSlug = extractPresetSlug(\n\t\tbackgroundColorValue,\n\t\t'color'\n\t);\n\tconst gradientValue = style?.color?.gradient;\n\tconst gradientSlug = extractPresetSlug( gradientValue, 'gradient' );\n\tconst updatedStyle = { ...style };\n\tupdatedStyle.color = {\n\t\t...updatedStyle.color,\n\t\ttext: textColorSlug ? undefined : textColorValue,\n\t\tbackground: backgroundColorSlug ? undefined : backgroundColorValue,\n\t\tgradient: gradientSlug ? undefined : gradientValue,\n\t};\n\treturn {\n\t\tstyle: cleanEmptyObject( updatedStyle ),\n\t\ttextColor: textColorSlug,\n\t\tbackgroundColor: backgroundColorSlug,\n\t\tgradient: gradientSlug,\n\t};\n}\n\nfunction attributesToStyle( attributes ) {\n\treturn {\n\t\t...attributes.style,\n\t\tcolor: {\n\t\t\t...attributes.style?.color,\n\t\t\ttext: attributes.textColor\n\t\t\t\t? 'var:preset|color|' + attributes.textColor\n\t\t\t\t: attributes.style?.color?.text,\n\t\t\tbackground: attributes.backgroundColor\n\t\t\t\t? 'var:preset|color|' + attributes.backgroundColor\n\t\t\t\t: attributes.style?.color?.background,\n\t\t\tgradient: attributes.gradient\n\t\t\t\t? 'var:preset|gradient|' + attributes.gradient\n\t\t\t\t: attributes.style?.color?.gradient,\n\t\t},\n\t};\n}\n\nfunction ColorInspectorControl( { children, resetAllFilter } ) {\n\tconst attributesResetAllFilter = useCallback(\n\t\t( attributes ) => {\n\t\t\tconst existingStyle = attributesToStyle( attributes );\n\t\t\tconst updatedStyle = resetAllFilter( existingStyle );\n\t\t\treturn {\n\t\t\t\t...attributes,\n\t\t\t\t...styleToAttributes( updatedStyle ),\n\t\t\t};\n\t\t},\n\t\t[ resetAllFilter ]\n\t);\n\n\treturn (\n\t\t<InspectorControls\n\t\t\tgroup=\"color\"\n\t\t\tresetAllFilter={ attributesResetAllFilter }\n\t\t>\n\t\t\t{ children }\n\t\t</InspectorControls>\n\t);\n}\n\nexport function ColorEdit( {\n\tclientId,\n\tname,\n\tsetAttributes,\n\tsettings,\n\tasWrapper,\n\tlabel,\n\tdefaultControls,\n} ) {\n\tconst selectedState = useBlockStyleState();\n\tconst isEnabled = useHasColorPanel( settings );\n\n\tconst { style, textColor, backgroundColor, gradient } = useSelect(\n\t\t( select ) => {\n\t\t\t// Early return to avoid subscription when disabled\n\t\t\tif ( ! isEnabled ) {\n\t\t\t\treturn {};\n\t\t\t}\n\t\t\tconst {\n\t\t\t\tstyle: _style,\n\t\t\t\ttextColor: _textColor,\n\t\t\t\tbackgroundColor: _backgroundColor,\n\t\t\t\tgradient: _gradient,\n\t\t\t} = select( blockEditorStore ).getBlockAttributes( clientId ) || {};\n\t\t\treturn {\n\t\t\t\tstyle: _style,\n\t\t\t\ttextColor: _textColor,\n\t\t\t\tbackgroundColor: _backgroundColor,\n\t\t\t\tgradient: _gradient,\n\t\t\t};\n\t\t},\n\t\t[ clientId, isEnabled ]\n\t);\n\n\tconst isStateSelected = ! isDefaultBlockStyleState( selectedState );\n\n\tconst value = useMemo( () => {\n\t\tif ( isStateSelected ) {\n\t\t\treturn getStyleForState( style, selectedState );\n\t\t}\n\t\treturn attributesToStyle( {\n\t\t\tstyle,\n\t\t\ttextColor,\n\t\t\tbackgroundColor,\n\t\t\tgradient,\n\t\t} );\n\t}, [\n\t\tisStateSelected,\n\t\tselectedState,\n\t\tstyle,\n\t\ttextColor,\n\t\tbackgroundColor,\n\t\tgradient,\n\t] );\n\n\tconst onChange = isStateSelected\n\t\t? ( newStyle ) => {\n\t\t\t\tsetAttributes( {\n\t\t\t\t\tstyle: setStyleForState( style, selectedState, newStyle ),\n\t\t\t\t} );\n\t\t  }\n\t\t: ( newStyle ) => {\n\t\t\t\tsetAttributes( styleToAttributes( newStyle ) );\n\t\t  };\n\n\tconst Wrapper = asWrapper || ColorInspectorControl;\n\n\tif ( ! isEnabled ) {\n\t\treturn null;\n\t}\n\n\tdefaultControls = defaultControls\n\t\t? defaultControls\n\t\t: getBlockSupport( name, [\n\t\t\t\tCOLOR_SUPPORT_KEY,\n\t\t\t\t'__experimentalDefaultControls',\n\t\t  ] );\n\n\tconst enableContrastChecking =\n\t\t! isStateSelected &&\n\t\tPlatform.OS === 'web' &&\n\t\t! value?.color?.gradient &&\n\t\t( settings?.color?.text || settings?.color?.link ) &&\n\t\t// Contrast checking is enabled by default.\n\t\t// Deactivating it requires `enableContrastChecker` to have\n\t\t// an explicit value of `false`.\n\t\tfalse !==\n\t\t\tgetBlockSupport( name, [\n\t\t\t\tCOLOR_SUPPORT_KEY,\n\t\t\t\t'enableContrastChecker',\n\t\t\t] );\n\n\treturn (\n\t\t<StylesColorPanel\n\t\t\tas={ Wrapper }\n\t\t\tpanelId={ clientId }\n\t\t\tsettings={ settings }\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t\tdefaultControls={ defaultControls }\n\t\t\tlabel={ label }\n\t\t\tenableContrastChecker={\n\t\t\t\tfalse !==\n\t\t\t\tgetBlockSupport( name, [\n\t\t\t\t\tCOLOR_SUPPORT_KEY,\n\t\t\t\t\t'enableContrastChecker',\n\t\t\t\t] )\n\t\t\t}\n\t\t>\n\t\t\t{ enableContrastChecking && (\n\t\t\t\t<BlockColorContrastChecker\n\t\t\t\t\tclientId={ clientId }\n\t\t\t\t\tname={ name }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</StylesColorPanel>\n\t);\n}\n\nfunction useBlockProps( {\n\tname,\n\tbackgroundColor,\n\ttextColor,\n\tgradient,\n\tstyle,\n} ) {\n\tconst [ userPalette, themePalette, defaultPalette ] = useSettings(\n\t\t'color.palette.custom',\n\t\t'color.palette.theme',\n\t\t'color.palette.default'\n\t);\n\n\tconst colors = useMemo(\n\t\t() => [\n\t\t\t...( userPalette || [] ),\n\t\t\t...( themePalette || [] ),\n\t\t\t...( defaultPalette || [] ),\n\t\t],\n\t\t[ userPalette, themePalette, defaultPalette ]\n\t);\n\tif (\n\t\t! hasColorSupport( name ) ||\n\t\tshouldSkipSerialization( name, COLOR_SUPPORT_KEY )\n\t) {\n\t\treturn {};\n\t}\n\tconst extraStyles = {};\n\n\tif (\n\t\ttextColor &&\n\t\t! shouldSkipSerialization( name, COLOR_SUPPORT_KEY, 'text' )\n\t) {\n\t\textraStyles.color = getColorObjectByAttributeValues(\n\t\t\tcolors,\n\t\t\ttextColor\n\t\t)?.color;\n\t}\n\tif (\n\t\tbackgroundColor &&\n\t\t! shouldSkipSerialization( name, COLOR_SUPPORT_KEY, 'background' )\n\t) {\n\t\textraStyles.backgroundColor = getColorObjectByAttributeValues(\n\t\t\tcolors,\n\t\t\tbackgroundColor\n\t\t)?.color;\n\t}\n\n\tconst saveProps = addSaveProps( { style: extraStyles }, name, {\n\t\ttextColor,\n\t\tbackgroundColor,\n\t\tgradient,\n\t\tstyle,\n\t} );\n\n\tconst hasBackgroundValue =\n\t\tbackgroundColor ||\n\t\tstyle?.color?.background ||\n\t\tgradient ||\n\t\tstyle?.color?.gradient;\n\n\treturn {\n\t\t...saveProps,\n\t\tclassName: clsx(\n\t\t\tsaveProps.className,\n\t\t\t// Add background image classes in the editor, if not already handled by background color values.\n\t\t\t! hasBackgroundValue && getBackgroundImageClasses( style )\n\t\t),\n\t};\n}\n\nexport default {\n\tuseBlockProps,\n\taddSaveProps,\n\tattributeKeys: [ 'backgroundColor', 'textColor', 'gradient', 'style' ],\n\thasSupport: hasColorSupport,\n};\n\nconst MIGRATION_PATHS = {\n\tlinkColor: [ [ 'style', 'elements', 'link', 'color', 'text' ] ],\n\ttextColor: [ [ 'textColor' ], [ 'style', 'color', 'text' ] ],\n\tbackgroundColor: [\n\t\t[ 'backgroundColor' ],\n\t\t[ 'style', 'color', 'background' ],\n\t],\n\tgradient: [ [ 'gradient' ], [ 'style', 'color', 'gradient' ] ],\n};\n\nexport function addTransforms( result, source, index, results ) {\n\tconst destinationBlockType = result.name;\n\tconst activeSupports = {\n\t\tlinkColor: hasLinkColorSupport( destinationBlockType ),\n\t\ttextColor: hasTextColorSupport( destinationBlockType ),\n\t\tbackgroundColor: hasBackgroundColorSupport( destinationBlockType ),\n\t\tgradient: hasGradientSupport( destinationBlockType ),\n\t};\n\treturn transformStyles(\n\t\tactiveSupports,\n\t\tMIGRATION_PATHS,\n\t\tresult,\n\t\tsource,\n\t\tindex,\n\t\tresults\n\t);\n}\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'core/color/addAttribute',\n\taddAttributes\n);\n\naddFilter(\n\t'blocks.switchToBlockType.transformedBlock',\n\t'core/color/addTransforms',\n\taddTransforms\n);\n"],
+  "mappings": "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",
   "names": ["clsx", "InspectorControls", "blockEditorStore", "StylesColorPanel", "BlockColorContrastChecker"]
 }

package/build/hooks/dimensions.cjs

@@ -51,6 +51,7 @@ var import_spacing_visualizer = require("./spacing-visualizer.cjs");
 var import_store = require("../store/index.cjs");
 var import_lock_unlock = require("../lock-unlock.cjs");
 var import_utils = require("./utils.cjs");
+var import_block_style_state = require("./block-style-state.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 var DIMENSIONS_SUPPORT_KEY = "dimensions";
 var SPACING_SUPPORT_KEY = "spacing";
@@ -92,8 +93,10 @@ function DimensionsInspectorControl({ children, resetAllFilter }) {
   );
 }
 function DimensionsPanel({ clientId, name, setAttributes, settings }) {
-  const isEnabled = (0, import_global_styles.useHasDimensionsPanel)(settings);
-  const value = (0, import_data.useSelect)(
+  const selectedState = (0, import_block_style_state.useBlockStyleState)();
+  const isStateSelected = !(0, import_block_style_state.isDefaultBlockStyleState)(selectedState);
+  const isEnabled = (0, import_global_styles.useHasDimensionsPanel)(settings, selectedState);
+  const style = (0, import_data.useSelect)(
     (select) => {
       if (!isEnabled) {
         return void 0;
@@ -103,7 +106,12 @@ function DimensionsPanel({ clientId, name, setAttributes, settings }) {
     [clientId, isEnabled]
   );
   const [visualizedProperty, setVisualizedProperty] = useVisualizer();
-  const onChange = (newStyle) => {
+  const value = isStateSelected ? (0, import_block_style_state.getStyleForState)(style, selectedState) : style;
+  const onChange = isStateSelected ? (newStyle) => {
+    setAttributes({
+      style: (0, import_block_style_state.setStyleForState)(style, selectedState, newStyle)
+    });
+  } : (newStyle) => {
     setAttributes({
       style: (0, import_utils.cleanEmptyObject)(newStyle)
     });
@@ -137,10 +145,11 @@ function DimensionsPanel({ clientId, name, setAttributes, settings }) {
         value,
         onChange,
         defaultControls,
-        onVisualize: setVisualizedProperty
+        styleState: selectedState,
+        onVisualize: isStateSelected ? void 0 : setVisualizedProperty
       }
     ),
-    !!settings?.spacing?.padding && visualizedProperty === "padding" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    !isStateSelected && !!settings?.spacing?.padding && visualizedProperty === "padding" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_spacing_visualizer.PaddingVisualizer,
       {
         forceShow: visualizedProperty === "padding",
@@ -148,7 +157,7 @@ function DimensionsPanel({ clientId, name, setAttributes, settings }) {
         value
       }
     ),
-    !!settings?.spacing?.margin && visualizedProperty === "margin" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    !isStateSelected && !!settings?.spacing?.margin && visualizedProperty === "margin" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_spacing_visualizer.MarginVisualizer,
       {
         forceShow: visualizedProperty === "margin",

package/build/hooks/dimensions.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/hooks/dimensions.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { Platform, useState, useEffect, useCallback } from '@wordpress/element';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { getBlockSupport } from '@wordpress/blocks';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport InspectorControls from '../components/inspector-controls';\nimport {\n\tDimensionsPanel as StylesDimensionsPanel,\n\tuseHasDimensionsPanel,\n} from '../components/global-styles';\nimport { MarginVisualizer, PaddingVisualizer } from './spacing-visualizer';\nimport { store as blockEditorStore } from '../store';\nimport { unlock } from '../lock-unlock';\nimport { cleanEmptyObject, shouldSkipSerialization } from './utils';\n\nexport const DIMENSIONS_SUPPORT_KEY = 'dimensions';\nexport const SPACING_SUPPORT_KEY = 'spacing';\nexport const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ];\nexport const AXIAL_SIDES = [ 'vertical', 'horizontal' ];\n\nfunction useVisualizer() {\n\tconst [ property, setProperty ] = useState( false );\n\tconst { hideBlockInterface, showBlockInterface } = unlock(\n\t\tuseDispatch( blockEditorStore )\n\t);\n\tuseEffect( () => {\n\t\tif ( ! property ) {\n\t\t\tshowBlockInterface();\n\t\t} else {\n\t\t\thideBlockInterface();\n\t\t}\n\t}, [ property, showBlockInterface, hideBlockInterface ] );\n\n\treturn [ property, setProperty ];\n}\n\nfunction DimensionsInspectorControl( { children, resetAllFilter } ) {\n\tconst attributesResetAllFilter = useCallback(\n\t\t( attributes ) => {\n\t\t\tconst existingStyle = attributes.style;\n\t\t\tconst updatedStyle = resetAllFilter( existingStyle );\n\t\t\treturn {\n\t\t\t\t...attributes,\n\t\t\t\tstyle: updatedStyle,\n\t\t\t};\n\t\t},\n\t\t[ resetAllFilter ]\n\t);\n\n\treturn (\n\t\t<InspectorControls\n\t\t\tgroup=\"dimensions\"\n\t\t\tresetAllFilter={ attributesResetAllFilter }\n\t\t>\n\t\t\t{ children }\n\t\t</InspectorControls>\n\t);\n}\n\nexport function DimensionsPanel( { clientId, name, setAttributes, settings } ) {\n\tconst isEnabled = useHasDimensionsPanel( settings );\n\tconst value = useSelect(\n\t\t( select ) => {\n\t\t\t// Early return to avoid subscription when disabled\n\t\t\tif ( ! isEnabled ) {\n\t\t\t\treturn undefined;\n\t\t\t}\n\t\t\treturn select( blockEditorStore ).getBlockAttributes( clientId )\n\t\t\t\t?.style;\n\t\t},\n\t\t[ clientId, isEnabled ]\n\t);\n\n\tconst [ visualizedProperty, setVisualizedProperty ] = useVisualizer();\n\tconst onChange = ( newStyle ) => {\n\t\tsetAttributes( {\n\t\t\tstyle: cleanEmptyObject( newStyle ),\n\t\t} );\n\t};\n\n\tif ( ! isEnabled ) {\n\t\treturn null;\n\t}\n\n\tconst defaultDimensionsControls = getBlockSupport( name, [\n\t\tDIMENSIONS_SUPPORT_KEY,\n\t\t'__experimentalDefaultControls',\n\t] );\n\tconst defaultSpacingControls = getBlockSupport( name, [\n\t\tSPACING_SUPPORT_KEY,\n\t\t'__experimentalDefaultControls',\n\t] );\n\tconst defaultControls = {\n\t\t// In the block inspector, minHeight and minWidth should not\n\t\t// be shown by default unless the block explicitly opts in.\n\t\tminHeight: false,\n\t\tminWidth: false,\n\t\t...defaultDimensionsControls,\n\t\t...defaultSpacingControls,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<StylesDimensionsPanel\n\t\t\t\tas={ DimensionsInspectorControl }\n\t\t\t\tpanelId={ clientId }\n\t\t\t\tsettings={ settings }\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tdefaultControls={ defaultControls }\n\t\t\t\tonVisualize={ setVisualizedProperty }\n\t\t\t/>\n\t\t\t{ !! settings?.spacing?.padding &&\n\t\t\t\tvisualizedProperty === 'padding' && (\n\t\t\t\t\t<PaddingVisualizer\n\t\t\t\t\t\tforceShow={ visualizedProperty === 'padding' }\n\t\t\t\t\t\tclientId={ clientId }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t{ !! settings?.spacing?.margin &&\n\t\t\t\tvisualizedProperty === 'margin' && (\n\t\t\t\t\t<MarginVisualizer\n\t\t\t\t\t\tforceShow={ visualizedProperty === 'margin' }\n\t\t\t\t\t\tclientId={ clientId }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t</>\n\t);\n}\n\n/**\n * Determine whether there is block support for dimensions.\n *\n * @param {string} blockName Block name.\n * @param {string} feature   Background image feature to check for.\n *\n * @return {boolean} Whether there is support.\n */\nexport function hasDimensionsSupport( blockName, feature = 'any' ) {\n\tif ( Platform.OS !== 'web' ) {\n\t\treturn false;\n\t}\n\n\tconst support = getBlockSupport( blockName, DIMENSIONS_SUPPORT_KEY );\n\n\tif ( support === true ) {\n\t\treturn true;\n\t}\n\n\tif ( feature === 'any' ) {\n\t\treturn !! (\n\t\t\tsupport?.aspectRatio ||\n\t\t\t!! support?.height ||\n\t\t\t!! support?.minHeight ||\n\t\t\t!! support?.width ||\n\t\t\t!! support?.minWidth\n\t\t);\n\t}\n\n\treturn !! support?.[ feature ];\n}\n\nexport default {\n\tuseBlockProps,\n\tattributeKeys: [ 'height', 'minHeight', 'width', 'style' ],\n\thasSupport( name ) {\n\t\treturn hasDimensionsSupport( name );\n\t},\n};\n\nfunction useBlockProps( { name, height, minHeight, style } ) {\n\tif (\n\t\t! hasDimensionsSupport( name, 'aspectRatio' ) ||\n\t\tshouldSkipSerialization( name, DIMENSIONS_SUPPORT_KEY, 'aspectRatio' )\n\t) {\n\t\treturn {};\n\t}\n\n\tconst className = clsx( {\n\t\t'has-aspect-ratio': !! style?.dimensions?.aspectRatio,\n\t} );\n\n\t// Allow dimensions-based inline style overrides to override any global styles rules that\n\t// might be set for the block, and therefore affect the display of the aspect ratio.\n\tconst inlineStyleOverrides = {};\n\n\t// Apply rules to unset incompatible styles.\n\t// Note that a set `aspectRatio` will win out if both an aspect ratio and height-related properties are set.\n\t// This is because the aspect ratio is a newer block support, so (in theory) any aspect ratio\n\t// that is set should be intentional and should override any existing height properties. The Cover block\n\t// and dimensions controls have logic that will manually clear the aspect ratio if height properties\n\t// are set.\n\tif ( style?.dimensions?.aspectRatio ) {\n\t\t// To ensure the aspect ratio does not get overridden by `minHeight` or `height` unset any existing rule.\n\t\tinlineStyleOverrides.minHeight = 'unset';\n\t\tinlineStyleOverrides.height = 'unset';\n\t} else if (\n\t\tminHeight ||\n\t\tstyle?.dimensions?.minHeight ||\n\t\theight ||\n\t\tstyle?.dimensions?.height\n\t) {\n\t\t// To ensure height properties do not get overridden by `aspectRatio` unset any existing rule.\n\t\tinlineStyleOverrides.aspectRatio = 'unset';\n\t}\n\n\treturn { className, style: inlineStyleOverrides };\n}\n\n/**\n * @deprecated\n */\nexport function useCustomSides() {\n\tdeprecated( 'wp.blockEditor.__experimentalUseCustomSides', {\n\t\tsince: '6.3',\n\t\tversion: '6.4',\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 { Platform, useState, useEffect, useCallback } from '@wordpress/element';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { getBlockSupport } from '@wordpress/blocks';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport InspectorControls from '../components/inspector-controls';\nimport {\n\tDimensionsPanel as StylesDimensionsPanel,\n\tuseHasDimensionsPanel,\n} from '../components/global-styles';\nimport { MarginVisualizer, PaddingVisualizer } from './spacing-visualizer';\nimport { store as blockEditorStore } from '../store';\nimport { unlock } from '../lock-unlock';\nimport { cleanEmptyObject, shouldSkipSerialization } from './utils';\nimport {\n\tgetStyleForState,\n\tisDefaultBlockStyleState,\n\tsetStyleForState,\n\tuseBlockStyleState,\n} from './block-style-state';\n\nexport const DIMENSIONS_SUPPORT_KEY = 'dimensions';\nexport const SPACING_SUPPORT_KEY = 'spacing';\nexport const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ];\nexport const AXIAL_SIDES = [ 'vertical', 'horizontal' ];\n\nfunction useVisualizer() {\n\tconst [ property, setProperty ] = useState( false );\n\tconst { hideBlockInterface, showBlockInterface } = unlock(\n\t\tuseDispatch( blockEditorStore )\n\t);\n\tuseEffect( () => {\n\t\tif ( ! property ) {\n\t\t\tshowBlockInterface();\n\t\t} else {\n\t\t\thideBlockInterface();\n\t\t}\n\t}, [ property, showBlockInterface, hideBlockInterface ] );\n\n\treturn [ property, setProperty ];\n}\n\nfunction DimensionsInspectorControl( { children, resetAllFilter } ) {\n\tconst attributesResetAllFilter = useCallback(\n\t\t( attributes ) => {\n\t\t\tconst existingStyle = attributes.style;\n\t\t\tconst updatedStyle = resetAllFilter( existingStyle );\n\t\t\treturn {\n\t\t\t\t...attributes,\n\t\t\t\tstyle: updatedStyle,\n\t\t\t};\n\t\t},\n\t\t[ resetAllFilter ]\n\t);\n\n\treturn (\n\t\t<InspectorControls\n\t\t\tgroup=\"dimensions\"\n\t\t\tresetAllFilter={ attributesResetAllFilter }\n\t\t>\n\t\t\t{ children }\n\t\t</InspectorControls>\n\t);\n}\n\nexport function DimensionsPanel( { clientId, name, setAttributes, settings } ) {\n\tconst selectedState = useBlockStyleState();\n\tconst isStateSelected = ! isDefaultBlockStyleState( selectedState );\n\tconst isEnabled = useHasDimensionsPanel( settings, selectedState );\n\tconst style = useSelect(\n\t\t( select ) => {\n\t\t\t// Early return to avoid subscription when disabled\n\t\t\tif ( ! isEnabled ) {\n\t\t\t\treturn undefined;\n\t\t\t}\n\t\t\treturn select( blockEditorStore ).getBlockAttributes( clientId )\n\t\t\t\t?.style;\n\t\t},\n\t\t[ clientId, isEnabled ]\n\t);\n\tconst [ visualizedProperty, setVisualizedProperty ] = useVisualizer();\n\tconst value = isStateSelected\n\t\t? getStyleForState( style, selectedState )\n\t\t: style;\n\tconst onChange = isStateSelected\n\t\t? ( newStyle ) => {\n\t\t\t\tsetAttributes( {\n\t\t\t\t\tstyle: setStyleForState( style, selectedState, newStyle ),\n\t\t\t\t} );\n\t\t  }\n\t\t: ( newStyle ) => {\n\t\t\t\tsetAttributes( {\n\t\t\t\t\tstyle: cleanEmptyObject( newStyle ),\n\t\t\t\t} );\n\t\t  };\n\n\tif ( ! isEnabled ) {\n\t\treturn null;\n\t}\n\n\tconst defaultDimensionsControls = getBlockSupport( name, [\n\t\tDIMENSIONS_SUPPORT_KEY,\n\t\t'__experimentalDefaultControls',\n\t] );\n\tconst defaultSpacingControls = getBlockSupport( name, [\n\t\tSPACING_SUPPORT_KEY,\n\t\t'__experimentalDefaultControls',\n\t] );\n\tconst defaultControls = {\n\t\t// In the block inspector, minHeight and minWidth should not\n\t\t// be shown by default unless the block explicitly opts in.\n\t\tminHeight: false,\n\t\tminWidth: false,\n\t\t...defaultDimensionsControls,\n\t\t...defaultSpacingControls,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<StylesDimensionsPanel\n\t\t\t\tas={ DimensionsInspectorControl }\n\t\t\t\tpanelId={ clientId }\n\t\t\t\tsettings={ settings }\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tdefaultControls={ defaultControls }\n\t\t\t\tstyleState={ selectedState }\n\t\t\t\tonVisualize={\n\t\t\t\t\tisStateSelected ? undefined : setVisualizedProperty\n\t\t\t\t}\n\t\t\t/>\n\t\t\t{ ! isStateSelected &&\n\t\t\t\t!! settings?.spacing?.padding &&\n\t\t\t\tvisualizedProperty === 'padding' && (\n\t\t\t\t\t<PaddingVisualizer\n\t\t\t\t\t\tforceShow={ visualizedProperty === 'padding' }\n\t\t\t\t\t\tclientId={ clientId }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t{ ! isStateSelected &&\n\t\t\t\t!! settings?.spacing?.margin &&\n\t\t\t\tvisualizedProperty === 'margin' && (\n\t\t\t\t\t<MarginVisualizer\n\t\t\t\t\t\tforceShow={ visualizedProperty === 'margin' }\n\t\t\t\t\t\tclientId={ clientId }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t</>\n\t);\n}\n\n/**\n * Determine whether there is block support for dimensions.\n *\n * @param {string} blockName Block name.\n * @param {string} feature   Background image feature to check for.\n *\n * @return {boolean} Whether there is support.\n */\nexport function hasDimensionsSupport( blockName, feature = 'any' ) {\n\tif ( Platform.OS !== 'web' ) {\n\t\treturn false;\n\t}\n\n\tconst support = getBlockSupport( blockName, DIMENSIONS_SUPPORT_KEY );\n\n\tif ( support === true ) {\n\t\treturn true;\n\t}\n\n\tif ( feature === 'any' ) {\n\t\treturn !! (\n\t\t\tsupport?.aspectRatio ||\n\t\t\t!! support?.height ||\n\t\t\t!! support?.minHeight ||\n\t\t\t!! support?.width ||\n\t\t\t!! support?.minWidth\n\t\t);\n\t}\n\n\treturn !! support?.[ feature ];\n}\n\nexport default {\n\tuseBlockProps,\n\tattributeKeys: [ 'height', 'minHeight', 'width', 'style' ],\n\thasSupport( name ) {\n\t\treturn hasDimensionsSupport( name );\n\t},\n};\n\nfunction useBlockProps( { name, height, minHeight, style } ) {\n\tif (\n\t\t! hasDimensionsSupport( name, 'aspectRatio' ) ||\n\t\tshouldSkipSerialization( name, DIMENSIONS_SUPPORT_KEY, 'aspectRatio' )\n\t) {\n\t\treturn {};\n\t}\n\n\tconst className = clsx( {\n\t\t'has-aspect-ratio': !! style?.dimensions?.aspectRatio,\n\t} );\n\n\t// Allow dimensions-based inline style overrides to override any global styles rules that\n\t// might be set for the block, and therefore affect the display of the aspect ratio.\n\tconst inlineStyleOverrides = {};\n\n\t// Apply rules to unset incompatible styles.\n\t// Note that a set `aspectRatio` will win out if both an aspect ratio and height-related properties are set.\n\t// This is because the aspect ratio is a newer block support, so (in theory) any aspect ratio\n\t// that is set should be intentional and should override any existing height properties. The Cover block\n\t// and dimensions controls have logic that will manually clear the aspect ratio if height properties\n\t// are set.\n\tif ( style?.dimensions?.aspectRatio ) {\n\t\t// To ensure the aspect ratio does not get overridden by `minHeight` or `height` unset any existing rule.\n\t\tinlineStyleOverrides.minHeight = 'unset';\n\t\tinlineStyleOverrides.height = 'unset';\n\t} else if (\n\t\tminHeight ||\n\t\tstyle?.dimensions?.minHeight ||\n\t\theight ||\n\t\tstyle?.dimensions?.height\n\t) {\n\t\t// To ensure height properties do not get overridden by `aspectRatio` unset any existing rule.\n\t\tinlineStyleOverrides.aspectRatio = 'unset';\n\t}\n\n\treturn { className, style: inlineStyleOverrides };\n}\n\n/**\n * @deprecated\n */\nexport function useCustomSides() {\n\tdeprecated( 'wp.blockEditor.__experimentalUseCustomSides', {\n\t\tsince: '6.3',\n\t\tversion: '6.4',\n\t} );\n}\n"],
+  "mappings": "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",
   "names": ["blockEditorStore", "InspectorControls", "StylesDimensionsPanel", "clsx", "deprecated"]
 }

package/build/hooks/layout-child.cjs

@@ -30,7 +30,10 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // packages/block-editor/src/hooks/layout-child.js
 var layout_child_exports = {};
 __export(layout_child_exports, {
-  default: () => layout_child_default
+  default: () => layout_child_default,
+  getChildLayoutStyleRules: () => getChildLayoutStyleRules,
+  getChildLayoutStyles: () => getChildLayoutStyles,
+  getResponsiveChildLayoutStyles: () => getResponsiveChildLayoutStyles
 });
 module.exports = __toCommonJS(layout_child_exports);
 var import_compose = require("@wordpress/compose");
@@ -45,11 +48,28 @@ var import_private_keys = require("../store/private-keys.cjs");
 var import_constants = require("../components/block-visibility/constants.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 var LAYOUT_CHILD_BLOCK_PROPS_REFERENCE = {};
-function useBlockPropsChildLayoutStyles({ style }) {
-  const shouldRenderChildLayoutStyles = (0, import_data.useSelect)((select) => {
-    return !select(import_store.store).getSettings().disableLayoutStyles;
-  });
-  const layout = style?.layout ?? {};
+var RESPONSIVE_BREAKPOINTS = {
+  mobile: "@media (width <= 480px)",
+  tablet: "@media (480px < width <= 782px)"
+};
+function serializeRule({ selector, declarations }) {
+  return `${selector} {
+		${Object.entries(declarations).map(([property, value]) => `${property}: ${value}`).join("; ")};
+	}`;
+}
+function getChildLayoutStyleRules({
+  selector,
+  layout = {},
+  viewportOverrides,
+  parentLayout = {},
+  includeContainerQuery = true
+}) {
+  const hasViewportOverrides = viewportOverrides !== void 0;
+  const effectiveLayout = hasViewportOverrides ? {
+    ...layout,
+    ...viewportOverrides
+  } : layout;
+  const hasViewportOverride = (key) => Object.hasOwn(viewportOverrides || {}, key);
   const {
     selfStretch,
     flexSize,
@@ -57,62 +77,40 @@ function useBlockPropsChildLayoutStyles({ style }) {
     rowStart,
     columnSpan,
     rowSpan
-  } = layout;
-  const parentLayout = (0, import_layout.useLayout)() || {};
+  } = effectiveLayout;
   const { columnCount, minimumColumnWidth } = parentLayout;
-  const id = (0, import_compose.useInstanceId)(LAYOUT_CHILD_BLOCK_PROPS_REFERENCE);
-  const selector = `.wp-container-content-${id}`;
-  if (process.env.NODE_ENV === "development") {
-    if (columnStart && typeof columnStart !== "number") {
-      throw new Error("columnStart must be a number");
-    }
-    if (rowStart && typeof rowStart !== "number") {
-      throw new Error("rowStart must be a number");
-    }
-    if (columnSpan && typeof columnSpan !== "number") {
-      throw new Error("columnSpan must be a number");
-    }
-    if (rowSpan && typeof rowSpan !== "number") {
-      throw new Error("rowSpan must be a number");
-    }
-  }
-  let css = "";
-  if (shouldRenderChildLayoutStyles) {
+  const rules = [];
+  const declarations = {};
+  if (!hasViewportOverrides || hasViewportOverride("selfStretch") || hasViewportOverride("flexSize")) {
     if (selfStretch === "fixed" && flexSize) {
-      css = `${selector} {
-				flex-basis: ${flexSize};
-				box-sizing: border-box;
-			}`;
+      declarations["flex-basis"] = flexSize;
+      declarations["box-sizing"] = "border-box";
     } else if (selfStretch === "fill") {
-      css = `${selector} {
-				flex-grow: 1;
-			}`;
-    } else if (columnStart && columnSpan) {
-      css = `${selector} {
-				grid-column: ${columnStart} / span ${columnSpan};
-			}`;
+      declarations["flex-grow"] = "1";
+    }
+  }
+  if (!hasViewportOverrides || hasViewportOverride("columnStart") || hasViewportOverride("columnSpan")) {
+    if (columnStart && columnSpan) {
+      declarations["grid-column"] = `${columnStart} / span ${columnSpan}`;
     } else if (columnStart) {
-      css = `${selector} {
-				grid-column: ${columnStart};
-			}`;
+      declarations["grid-column"] = `${columnStart}`;
     } else if (columnSpan) {
-      css = `${selector} {
-				grid-column: span ${columnSpan};
-			}`;
+      declarations["grid-column"] = `span ${columnSpan}`;
     }
+  }
+  if (!hasViewportOverrides || hasViewportOverride("rowStart") || hasViewportOverride("rowSpan")) {
     if (rowStart && rowSpan) {
-      css += `${selector} {
-				grid-row: ${rowStart} / span ${rowSpan};
-			}`;
+      declarations["grid-row"] = `${rowStart} / span ${rowSpan}`;
     } else if (rowStart) {
-      css += `${selector} {
-				grid-row: ${rowStart};
-			}`;
+      declarations["grid-row"] = `${rowStart}`;
     } else if (rowSpan) {
-      css += `${selector} {
-				grid-row: span ${rowSpan};
-			}`;
+      declarations["grid-row"] = `span ${rowSpan}`;
     }
+  }
+  if (Object.keys(declarations).length) {
+    rules.push({ selector, declarations });
+  }
+  if (includeContainerQuery && !hasViewportOverrides) {
     if ((columnSpan || columnStart) && (minimumColumnWidth || !columnCount)) {
       let parentColumnValue = parseFloat(minimumColumnWidth);
       if (isNaN(parentColumnValue)) {
@@ -137,16 +135,98 @@ function useBlockPropsChildLayoutStyles({ style }) {
       const containerQueryValue = numColsToBreakAt * parentColumnValue + (numColsToBreakAt - 1) * defaultGapValue;
       const minimumContainerQueryValue = parentColumnValue * 2 + defaultGapValue - 1;
       const gridColumnValue = columnSpan && columnSpan > 1 ? "1/-1" : "auto";
-      css += `@container (max-width: ${Math.max(
-        containerQueryValue,
-        minimumContainerQueryValue
-      )}${parentColumnUnit}) {
-				${selector} {
-					grid-column: ${gridColumnValue};
-					grid-row: auto;
-				}
-			}`;
+      rules.push({
+        rulesGroup: `@container (max-width: ${Math.max(
+          containerQueryValue,
+          minimumContainerQueryValue
+        )}${parentColumnUnit})`,
+        selector,
+        declarations: {
+          "grid-column": gridColumnValue,
+          "grid-row": "auto"
+        }
+      });
+    }
+  }
+  return rules;
+}
+function getChildLayoutStyles({
+  selector,
+  layout = {},
+  parentLayout = {},
+  includeContainerQuery = true
+}) {
+  return getChildLayoutStyleRules({
+    selector,
+    layout,
+    parentLayout,
+    includeContainerQuery
+  }).map((rule) => {
+    const serializedRule = serializeRule(rule);
+    return rule.rulesGroup ? `${rule.rulesGroup} {
+				${serializedRule}
+			}` : serializedRule;
+  }).join("");
+}
+function getResponsiveChildLayoutStyles({
+  style = {},
+  selector,
+  parentLayout = {}
+}) {
+  const baseLayout = style?.layout ?? {};
+  return Object.entries(RESPONSIVE_BREAKPOINTS).map(([viewport, mediaQuery]) => {
+    const viewportLayout = style?.[viewport]?.layout;
+    if (!viewportLayout || !Object.keys(viewportLayout).length) {
+      return "";
+    }
+    const viewportRules = getChildLayoutStyleRules({
+      selector,
+      layout: baseLayout,
+      viewportOverrides: viewportLayout,
+      parentLayout,
+      includeContainerQuery: false
+    });
+    const css = viewportRules.map(serializeRule).join("");
+    return css ? `${mediaQuery}{${css}}` : "";
+  }).filter(Boolean).join("");
+}
+function useBlockPropsChildLayoutStyles({ style }) {
+  const shouldRenderChildLayoutStyles = (0, import_data.useSelect)((select) => {
+    return !select(import_store.store).getSettings().disableLayoutStyles;
+  });
+  const layout = style?.layout ?? {};
+  const { columnStart, rowStart, columnSpan, rowSpan } = layout;
+  const parentLayout = (0, import_layout.useLayout)() || {};
+  const id = (0, import_compose.useInstanceId)(LAYOUT_CHILD_BLOCK_PROPS_REFERENCE);
+  const selector = `.wp-container-content-${id}`;
+  if (process.env.NODE_ENV === "development") {
+    if (columnStart && typeof columnStart !== "number") {
+      throw new Error("columnStart must be a number");
+    }
+    if (rowStart && typeof rowStart !== "number") {
+      throw new Error("rowStart must be a number");
     }
+    if (columnSpan && typeof columnSpan !== "number") {
+      throw new Error("columnSpan must be a number");
+    }
+    if (rowSpan && typeof rowSpan !== "number") {
+      throw new Error("rowSpan must be a number");
+    }
+  }
+  let css = "";
+  if (shouldRenderChildLayoutStyles) {
+    css = [
+      getChildLayoutStyles({
+        selector,
+        layout,
+        parentLayout
+      }),
+      getResponsiveChildLayoutStyles({
+        style,
+        selector,
+        parentLayout
+      })
+    ].join("");
   }
   (0, import_utils.useStyleOverride)({ css });
   if (!css) {
@@ -286,4 +366,10 @@ var layout_child_default = {
     return true;
   }
 };
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getChildLayoutStyleRules,
+  getChildLayoutStyles,
+  getResponsiveChildLayoutStyles
+});
 //# sourceMappingURL=layout-child.cjs.map