@wordpress/edit-site 5.2.0 → 5.3.0

package/build/components/global-styles/screen-background-color.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-background-color.js"],"names":["ScreenBackgroundColor","name","variationPath","supports","solids","gradients","areCustomSolidsEnabled","areCustomGradientsEnabled","colorsPerOrigin","gradientsPerOrigin","isBackgroundEnabled","hasBackgroundColor","includes","length","hasGradientColor","backgroundColor","setBackgroundColor","userBackgroundColor","gradient","setGradient","userGradient","backgroundSettings","colorValue","onColorChange","clearable","gradientSettings","gradientValue","onGradientChange","controlProps"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport {\n\tgetSupportedGlobalStylesPanels,\n\tuseColorsPerOrigin,\n\tuseGradientsPerOrigin,\n\tuseSetting,\n\tuseStyle,\n} from './hooks';\n\nfunction ScreenBackgroundColor( { name, variationPath = '' } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst [ solids ] = useSetting( 'color.palette', name );\n\tconst [ gradients ] = useSetting( 'color.gradients', name );\n\tconst [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );\n\tconst [ areCustomGradientsEnabled ] = useSetting(\n\t\t'color.customGradient',\n\t\tname\n\t);\n\n\tconst colorsPerOrigin = useColorsPerOrigin( name );\n\tconst gradientsPerOrigin = useGradientsPerOrigin( name );\n\n\tconst [ isBackgroundEnabled ] = useSetting( 'color.background', name );\n\n\tconst hasBackgroundColor =\n\t\tsupports.includes( 'backgroundColor' ) &&\n\t\tisBackgroundEnabled &&\n\t\t( solids.length > 0 || areCustomSolidsEnabled );\n\tconst hasGradientColor =\n\t\tsupports.includes( 'background' ) &&\n\t\t( gradients.length > 0 || areCustomGradientsEnabled );\n\tconst [ backgroundColor, setBackgroundColor ] = useStyle(\n\t\tvariationPath + 'color.background',\n\t\tname\n\t);\n\tconst [ userBackgroundColor ] = useStyle(\n\t\tvariationPath + 'color.background',\n\t\tname,\n\t\t'user'\n\t);\n\tconst [ gradient, setGradient ] = useStyle(\n\t\tvariationPath + 'color.gradient',\n\t\tname\n\t);\n\tconst [ userGradient ] = useStyle(\n\t\tvariationPath + 'color.gradient',\n\t\tname,\n\t\t'user'\n\t);\n\n\tif ( ! hasBackgroundColor && ! hasGradientColor ) {\n\t\treturn null;\n\t}\n\n\tlet backgroundSettings = {};\n\tif ( hasBackgroundColor ) {\n\t\tbackgroundSettings = {\n\t\t\tcolorValue: backgroundColor,\n\t\t\tonColorChange: setBackgroundColor,\n\t\t};\n\t\tif ( backgroundColor ) {\n\t\t\tbackgroundSettings.clearable =\n\t\t\t\tbackgroundColor === userBackgroundColor;\n\t\t}\n\t}\n\n\tlet gradientSettings = {};\n\tif ( hasGradientColor ) {\n\t\tgradientSettings = {\n\t\t\tgradientValue: gradient,\n\t\t\tonGradientChange: setGradient,\n\t\t};\n\t\tif ( gradient ) {\n\t\t\tgradientSettings.clearable = gradient === userGradient;\n\t\t}\n\t}\n\n\tconst controlProps = {\n\t\t...backgroundSettings,\n\t\t...gradientSettings,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Background' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Set a background color or gradient for the whole site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<ColorGradientControl\n\t\t\t\tclassName=\"edit-site-screen-background-color__control\"\n\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\tgradients={ gradientsPerOrigin }\n\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\tdisableCustomGradients={ ! areCustomGradientsEnabled }\n\t\t\t\tshowTitle={ false }\n\t\t\t\tenableAlpha\n\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t{ ...controlProps }\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nexport default ScreenBackgroundColor;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-background-color.js"],"names":["useGlobalSetting","useGlobalStyle","blockEditorExperiments","ScreenBackgroundColor","name","variation","prefix","supports","areCustomSolidsEnabled","areCustomGradientsEnabled","colorsPerOrigin","gradientsPerOrigin","isBackgroundEnabled","hasBackgroundColor","includes","length","hasGradientColor","backgroundColor","setBackgroundColor","userBackgroundColor","gradient","setGradient","userGradient","backgroundSettings","colorValue","onColorChange","clearable","gradientSettings","gradientValue","onGradientChange","controlProps"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalColorGradientControl as ColorGradientControl,\n\texperiments as blockEditorExperiments,\n} from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport {\n\tgetSupportedGlobalStylesPanels,\n\tuseColorsPerOrigin,\n\tuseGradientsPerOrigin,\n} from './hooks';\nimport { unlock } from '../../experiments';\n\nconst { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments );\n\nfunction ScreenBackgroundColor( { name, variation = '' } ) {\n\tconst prefix = variation ? `variations.${ variation }.` : '';\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );\n\tconst [ areCustomGradientsEnabled ] = useGlobalSetting(\n\t\t'color.customGradient',\n\t\tname\n\t);\n\tconst colorsPerOrigin = useColorsPerOrigin( name );\n\tconst gradientsPerOrigin = useGradientsPerOrigin( name );\n\n\tconst [ isBackgroundEnabled ] = useGlobalSetting(\n\t\t'color.background',\n\t\tname\n\t);\n\n\tconst hasBackgroundColor =\n\t\tsupports.includes( 'backgroundColor' ) &&\n\t\tisBackgroundEnabled &&\n\t\t( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );\n\tconst hasGradientColor =\n\t\tsupports.includes( 'background' ) &&\n\t\t( gradientsPerOrigin.length > 0 || areCustomGradientsEnabled );\n\tconst [ backgroundColor, setBackgroundColor ] = useGlobalStyle(\n\t\tprefix + 'color.background',\n\t\tname\n\t);\n\tconst [ userBackgroundColor ] = useGlobalStyle(\n\t\tprefix + 'color.background',\n\t\tname,\n\t\t'user'\n\t);\n\tconst [ gradient, setGradient ] = useGlobalStyle(\n\t\tprefix + 'color.gradient',\n\t\tname\n\t);\n\tconst [ userGradient ] = useGlobalStyle(\n\t\tprefix + 'color.gradient',\n\t\tname,\n\t\t'user'\n\t);\n\n\tif ( ! hasBackgroundColor && ! hasGradientColor ) {\n\t\treturn null;\n\t}\n\n\tlet backgroundSettings = {};\n\tif ( hasBackgroundColor ) {\n\t\tbackgroundSettings = {\n\t\t\tcolorValue: backgroundColor,\n\t\t\tonColorChange: setBackgroundColor,\n\t\t};\n\t\tif ( backgroundColor ) {\n\t\t\tbackgroundSettings.clearable =\n\t\t\t\tbackgroundColor === userBackgroundColor;\n\t\t}\n\t}\n\n\tlet gradientSettings = {};\n\tif ( hasGradientColor ) {\n\t\tgradientSettings = {\n\t\t\tgradientValue: gradient,\n\t\t\tonGradientChange: setGradient,\n\t\t};\n\t\tif ( gradient ) {\n\t\t\tgradientSettings.clearable = gradient === userGradient;\n\t\t}\n\t}\n\n\tconst controlProps = {\n\t\t...backgroundSettings,\n\t\t...gradientSettings,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Background' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Set a background color or gradient for the whole site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<ColorGradientControl\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'edit-site-screen-background-color__control',\n\t\t\t\t\t{\n\t\t\t\t\t\t'has-no-tabs':\n\t\t\t\t\t\t\t! hasBackgroundColor || ! hasGradientColor,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\tgradients={ gradientsPerOrigin }\n\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\tdisableCustomGradients={ ! areCustomGradientsEnabled }\n\t\t\t\tshowTitle={ false }\n\t\t\t\tenableAlpha\n\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t{ ...controlProps }\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nexport default ScreenBackgroundColor;\n"]}

package/build/components/global-styles/screen-border.js

@@ -19,6 +19,8 @@ var _blockPreviewPanel = _interopRequireDefault(require("./block-preview-panel")
 
 var _utils = require("./utils");
 
+var _shadowPanel = _interopRequireWildcard(require("./shadow-panel"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -33,18 +35,22 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function ScreenBorder(_ref) {
   let {
     name,
-    variationPath = ''
+    variation = ''
   } = _ref;
   const hasBorderPanel = (0, _borderPanel.useHasBorderPanel)(name);
-  const variationClassName = (0, _utils.getVariationClassNameFromPath)(variationPath);
+  const variationClassName = (0, _utils.getVariationClassName)(variation);
+  const hasShadowPanel = (0, _shadowPanel.useHasShadowControl)(name);
   return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
-    title: (0, _i18n.__)('Border')
+    title: (0, _i18n.__)('Border & Shadow')
   }), (0, _element.createElement)(_blockPreviewPanel.default, {
     name: name,
     variation: variationClassName
   }), hasBorderPanel && (0, _element.createElement)(_borderPanel.default, {
     name: name,
-    variationPath: variationPath
+    variation: variation
+  }), hasShadowPanel && (0, _element.createElement)(_shadowPanel.default, {
+    name: name,
+    variation: variation
   }));
 }
 

package/build/components/global-styles/screen-border.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-border.js"],"names":["ScreenBorder","name","variationPath","hasBorderPanel","variationClassName"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AACA;;;;;;AAXA;AACA;AACA;;AAGA;AACA;AACA;AAMA,SAASA,YAAT,OAAsD;AAAA,MAA/B;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,aAAa,GAAG;AAAxB,GAA+B;AACrD,QAAMC,cAAc,GAAG,oCAAmBF,IAAnB,CAAvB;AACA,QAAMG,kBAAkB,GAAG,0CAA+BF,aAA/B,CAA3B;AACA,SACC,qDACC,4BAAC,eAAD;AAAc,IAAA,KAAK,EAAG,cAAI,QAAJ;AAAtB,IADD,EAEC,4BAAC,0BAAD;AAAmB,IAAA,IAAI,EAAGD,IAA1B;AAAiC,IAAA,SAAS,EAAGG;AAA7C,IAFD,EAGGD,cAAc,IACf,4BAAC,oBAAD;AAAa,IAAA,IAAI,EAAGF,IAApB;AAA2B,IAAA,aAAa,EAAGC;AAA3C,IAJF,CADD;AASA;;eAEcF,Y","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport BorderPanel, { useHasBorderPanel } from './border-panel';\nimport BlockPreviewPanel from './block-preview-panel';\nimport { getVariationClassNameFromPath } from './utils';\n\nfunction ScreenBorder( { name, variationPath = '' } ) {\n\tconst hasBorderPanel = useHasBorderPanel( name );\n\tconst variationClassName = getVariationClassNameFromPath( variationPath );\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader title={ __( 'Border' ) } />\n\t\t\t<BlockPreviewPanel name={ name } variation={ variationClassName } />\n\t\t\t{ hasBorderPanel && (\n\t\t\t\t<BorderPanel name={ name } variationPath={ variationPath } />\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default ScreenBorder;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-border.js"],"names":["ScreenBorder","name","variation","hasBorderPanel","variationClassName","hasShadowPanel"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AACA;;AACA;;;;;;AAZA;AACA;AACA;;AAGA;AACA;AACA;AAOA,SAASA,YAAT,OAAkD;AAAA,MAA3B;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,SAAS,GAAG;AAApB,GAA2B;AACjD,QAAMC,cAAc,GAAG,oCAAmBF,IAAnB,CAAvB;AACA,QAAMG,kBAAkB,GAAG,kCAAuBF,SAAvB,CAA3B;AACA,QAAMG,cAAc,GAAG,sCAAqBJ,IAArB,CAAvB;AACA,SACC,qDACC,4BAAC,eAAD;AAAc,IAAA,KAAK,EAAG,cAAI,iBAAJ;AAAtB,IADD,EAEC,4BAAC,0BAAD;AAAmB,IAAA,IAAI,EAAGA,IAA1B;AAAiC,IAAA,SAAS,EAAGG;AAA7C,IAFD,EAGGD,cAAc,IACf,4BAAC,oBAAD;AAAa,IAAA,IAAI,EAAGF,IAApB;AAA2B,IAAA,SAAS,EAAGC;AAAvC,IAJF,EAMGG,cAAc,IACf,4BAAC,oBAAD;AAAa,IAAA,IAAI,EAAGJ,IAApB;AAA2B,IAAA,SAAS,EAAGC;AAAvC,IAPF,CADD;AAYA;;eAEcF,Y","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport BorderPanel, { useHasBorderPanel } from './border-panel';\nimport BlockPreviewPanel from './block-preview-panel';\nimport { getVariationClassName } from './utils';\nimport ShadowPanel, { useHasShadowControl } from './shadow-panel';\n\nfunction ScreenBorder( { name, variation = '' } ) {\n\tconst hasBorderPanel = useHasBorderPanel( name );\n\tconst variationClassName = getVariationClassName( variation );\n\tconst hasShadowPanel = useHasShadowControl( name );\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader title={ __( 'Border & Shadow' ) } />\n\t\t\t<BlockPreviewPanel name={ name } variation={ variationClassName } />\n\t\t\t{ hasBorderPanel && (\n\t\t\t\t<BorderPanel name={ name } variation={ variation } />\n\t\t\t) }\n\t\t\t{ hasShadowPanel && (\n\t\t\t\t<ShadowPanel name={ name } variation={ variation } />\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default ScreenBorder;\n"]}

package/build/components/global-styles/screen-button-color.js

@@ -17,6 +17,8 @@ var _header = _interopRequireDefault(require("./header"));
 
 var _hooks = require("./hooks");
 
+var _experiments = require("../../experiments");
+
 /**
  * WordPress dependencies
  */
@@ -24,21 +26,26 @@ var _hooks = require("./hooks");
 /**
  * Internal dependencies
  */
+const {
+  useGlobalSetting,
+  useGlobalStyle
+} = (0, _experiments.unlock)(_blockEditor.experiments);
+
 function ScreenButtonColor(_ref) {
   let {
     name,
-    variationPath = ''
+    variation = ''
   } = _ref;
+  const prefix = variation ? `variations.${variation}.` : '';
   const supports = (0, _hooks.getSupportedGlobalStylesPanels)(name);
-  const [solids] = (0, _hooks.useSetting)('color.palette', name);
-  const [areCustomSolidsEnabled] = (0, _hooks.useSetting)('color.custom', name);
   const colorsPerOrigin = (0, _hooks.useColorsPerOrigin)(name);
-  const [isBackgroundEnabled] = (0, _hooks.useSetting)('color.background', name);
-  const hasButtonColor = supports.includes('buttonColor') && isBackgroundEnabled && (solids.length > 0 || areCustomSolidsEnabled);
-  const [buttonTextColor, setButtonTextColor] = (0, _hooks.useStyle)(variationPath + 'elements.button.color.text', name);
-  const [userButtonTextColor] = (0, _hooks.useStyle)('elements.button.color.text', name, 'user');
-  const [buttonBgColor, setButtonBgColor] = (0, _hooks.useStyle)('elements.button.color.background', name);
-  const [userButtonBgColor] = (0, _hooks.useStyle)('elements.button.color.background', name, 'user');
+  const [areCustomSolidsEnabled] = useGlobalSetting('color.custom', name);
+  const [isBackgroundEnabled] = useGlobalSetting('color.background', name);
+  const hasButtonColor = supports.includes('buttonColor') && isBackgroundEnabled && (colorsPerOrigin.length > 0 || areCustomSolidsEnabled);
+  const [buttonTextColor, setButtonTextColor] = useGlobalStyle(prefix + 'elements.button.color.text', name);
+  const [userButtonTextColor] = useGlobalStyle('elements.button.color.text', name, 'user');
+  const [buttonBgColor, setButtonBgColor] = useGlobalStyle('elements.button.color.background', name);
+  const [userButtonBgColor] = useGlobalStyle('elements.button.color.background', name, 'user');
 
   if (!hasButtonColor) {
     return null;

package/build/components/global-styles/screen-button-color.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-button-color.js"],"names":["ScreenButtonColor","name","variationPath","supports","solids","areCustomSolidsEnabled","colorsPerOrigin","isBackgroundEnabled","hasButtonColor","includes","length","buttonTextColor","setButtonTextColor","userButtonTextColor","buttonBgColor","setButtonBgColor","userButtonBgColor"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AAVA;AACA;AACA;;AAIA;AACA;AACA;AASA,SAASA,iBAAT,OAA2D;AAAA,MAA/B;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,aAAa,GAAG;AAAxB,GAA+B;AAC1D,QAAMC,QAAQ,GAAG,2CAAgCF,IAAhC,CAAjB;AACA,QAAM,CAAEG,MAAF,IAAa,uBAAY,eAAZ,EAA6BH,IAA7B,CAAnB;AACA,QAAM,CAAEI,sBAAF,IAA6B,uBAAY,cAAZ,EAA4BJ,IAA5B,CAAnC;AAEA,QAAMK,eAAe,GAAG,+BAAoBL,IAApB,CAAxB;AAEA,QAAM,CAAEM,mBAAF,IAA0B,uBAAY,kBAAZ,EAAgCN,IAAhC,CAAhC;AAEA,QAAMO,cAAc,GACnBL,QAAQ,CAACM,QAAT,CAAmB,aAAnB,KACAF,mBADA,KAEEH,MAAM,CAACM,MAAP,GAAgB,CAAhB,IAAqBL,sBAFvB,CADD;AAKA,QAAM,CAAEM,eAAF,EAAmBC,kBAAnB,IAA0C,qBAC/CV,aAAa,GAAG,4BAD+B,EAE/CD,IAF+C,CAAhD;AAIA,QAAM,CAAEY,mBAAF,IAA0B,qBAC/B,4BAD+B,EAE/BZ,IAF+B,EAG/B,MAH+B,CAAhC;AAMA,QAAM,CAAEa,aAAF,EAAiBC,gBAAjB,IAAsC,qBAC3C,kCAD2C,EAE3Cd,IAF2C,CAA5C;AAIA,QAAM,CAAEe,iBAAF,IAAwB,qBAC7B,kCAD6B,EAE7Bf,IAF6B,EAG7B,MAH6B,CAA9B;;AAMA,MAAK,CAAEO,cAAP,EAAwB;AACvB,WAAO,IAAP;AACA;;AAED,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,KAAK,EAAG,cAAI,SAAJ,CADT;AAEC,IAAA,WAAW,EAAG,cACb,0DADa;AAFf,IADD,EAQC;AAAI,IAAA,SAAS,EAAC;AAAd,KACG,cAAI,YAAJ,CADH,CARD,EAYC,4BAAC,+CAAD;AACC,IAAA,SAAS,EAAC,wCADX;AAEC,IAAA,MAAM,EAAGF,eAFV;AAGC,IAAA,mBAAmB,EAAG,CAAED,sBAHzB;AAIC,IAAA,SAAS,EAAG,KAJb;AAKC,IAAA,WAAW,MALZ;AAMC,IAAA,iCAAiC,MANlC;AAOC,IAAA,UAAU,EAAGM,eAPd;AAQC,IAAA,aAAa,EAAGC,kBARjB;AASC,IAAA,SAAS,EAAGD,eAAe,KAAKE;AATjC,IAZD,EAwBC;AAAI,IAAA,SAAS,EAAC;AAAd,KACG,cAAI,kBAAJ,CADH,CAxBD,EA4BC,4BAAC,+CAAD;AACC,IAAA,SAAS,EAAC,wCADX;AAEC,IAAA,MAAM,EAAGP,eAFV;AAGC,IAAA,mBAAmB,EAAG,CAAED,sBAHzB;AAIC,IAAA,SAAS,EAAG,KAJb;AAKC,IAAA,WAAW,MALZ;AAMC,IAAA,iCAAiC,MANlC;AAOC,IAAA,UAAU,EAAGS,aAPd;AAQC,IAAA,aAAa,EAAGC,gBARjB;AASC,IAAA,SAAS,EAAGD,aAAa,KAAKE;AAT/B,IA5BD,CADD;AA0CA;;eAEchB,iB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport {\n\tgetSupportedGlobalStylesPanels,\n\tuseSetting,\n\tuseStyle,\n\tuseColorsPerOrigin,\n} from './hooks';\n\nfunction ScreenButtonColor( { name, variationPath = '' } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst [ solids ] = useSetting( 'color.palette', name );\n\tconst [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );\n\n\tconst colorsPerOrigin = useColorsPerOrigin( name );\n\n\tconst [ isBackgroundEnabled ] = useSetting( 'color.background', name );\n\n\tconst hasButtonColor =\n\t\tsupports.includes( 'buttonColor' ) &&\n\t\tisBackgroundEnabled &&\n\t\t( solids.length > 0 || areCustomSolidsEnabled );\n\n\tconst [ buttonTextColor, setButtonTextColor ] = useStyle(\n\t\tvariationPath + 'elements.button.color.text',\n\t\tname\n\t);\n\tconst [ userButtonTextColor ] = useStyle(\n\t\t'elements.button.color.text',\n\t\tname,\n\t\t'user'\n\t);\n\n\tconst [ buttonBgColor, setButtonBgColor ] = useStyle(\n\t\t'elements.button.color.background',\n\t\tname\n\t);\n\tconst [ userButtonBgColor ] = useStyle(\n\t\t'elements.button.color.background',\n\t\tname,\n\t\t'user'\n\t);\n\n\tif ( ! hasButtonColor ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Buttons' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Set the default colors used for buttons across the site.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<h4 className=\"edit-site-global-styles-section-title\">\n\t\t\t\t{ __( 'Text color' ) }\n\t\t\t</h4>\n\n\t\t\t<ColorGradientControl\n\t\t\t\tclassName=\"edit-site-screen-button-color__control\"\n\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\tshowTitle={ false }\n\t\t\t\tenableAlpha\n\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\tcolorValue={ buttonTextColor }\n\t\t\t\tonColorChange={ setButtonTextColor }\n\t\t\t\tclearable={ buttonTextColor === userButtonTextColor }\n\t\t\t/>\n\n\t\t\t<h4 className=\"edit-site-global-styles-section-title\">\n\t\t\t\t{ __( 'Background color' ) }\n\t\t\t</h4>\n\n\t\t\t<ColorGradientControl\n\t\t\t\tclassName=\"edit-site-screen-button-color__control\"\n\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\tshowTitle={ false }\n\t\t\t\tenableAlpha\n\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\tcolorValue={ buttonBgColor }\n\t\t\t\tonColorChange={ setButtonBgColor }\n\t\t\t\tclearable={ buttonBgColor === userButtonBgColor }\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nexport default ScreenButtonColor;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-button-color.js"],"names":["useGlobalSetting","useGlobalStyle","blockEditorExperiments","ScreenButtonColor","name","variation","prefix","supports","colorsPerOrigin","areCustomSolidsEnabled","isBackgroundEnabled","hasButtonColor","includes","length","buttonTextColor","setButtonTextColor","userButtonTextColor","buttonBgColor","setButtonBgColor","userButtonBgColor"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAQA;;AACA;;AACA;;AAdA;AACA;AACA;;AAOA;AACA;AACA;AAKA,MAAM;AAAEA,EAAAA,gBAAF;AAAoBC,EAAAA;AAApB,IAAuC,yBAAQC,wBAAR,CAA7C;;AAEA,SAASC,iBAAT,OAAuD;AAAA,MAA3B;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,SAAS,GAAG;AAApB,GAA2B;AACtD,QAAMC,MAAM,GAAGD,SAAS,GAAI,cAAcA,SAAW,GAA7B,GAAkC,EAA1D;AACA,QAAME,QAAQ,GAAG,2CAAgCH,IAAhC,CAAjB;AACA,QAAMI,eAAe,GAAG,+BAAoBJ,IAApB,CAAxB;AACA,QAAM,CAAEK,sBAAF,IAA6BT,gBAAgB,CAAE,cAAF,EAAkBI,IAAlB,CAAnD;AACA,QAAM,CAAEM,mBAAF,IAA0BV,gBAAgB,CAC/C,kBAD+C,EAE/CI,IAF+C,CAAhD;AAKA,QAAMO,cAAc,GACnBJ,QAAQ,CAACK,QAAT,CAAmB,aAAnB,KACAF,mBADA,KAEEF,eAAe,CAACK,MAAhB,GAAyB,CAAzB,IAA8BJ,sBAFhC,CADD;AAKA,QAAM,CAAEK,eAAF,EAAmBC,kBAAnB,IAA0Cd,cAAc,CAC7DK,MAAM,GAAG,4BADoD,EAE7DF,IAF6D,CAA9D;AAIA,QAAM,CAAEY,mBAAF,IAA0Bf,cAAc,CAC7C,4BAD6C,EAE7CG,IAF6C,EAG7C,MAH6C,CAA9C;AAMA,QAAM,CAAEa,aAAF,EAAiBC,gBAAjB,IAAsCjB,cAAc,CACzD,kCADyD,EAEzDG,IAFyD,CAA1D;AAIA,QAAM,CAAEe,iBAAF,IAAwBlB,cAAc,CAC3C,kCAD2C,EAE3CG,IAF2C,EAG3C,MAH2C,CAA5C;;AAMA,MAAK,CAAEO,cAAP,EAAwB;AACvB,WAAO,IAAP;AACA;;AAED,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,KAAK,EAAG,cAAI,SAAJ,CADT;AAEC,IAAA,WAAW,EAAG,cACb,0DADa;AAFf,IADD,EAQC;AAAI,IAAA,SAAS,EAAC;AAAd,KACG,cAAI,YAAJ,CADH,CARD,EAYC,4BAAC,+CAAD;AACC,IAAA,SAAS,EAAC,wCADX;AAEC,IAAA,MAAM,EAAGH,eAFV;AAGC,IAAA,mBAAmB,EAAG,CAAEC,sBAHzB;AAIC,IAAA,SAAS,EAAG,KAJb;AAKC,IAAA,WAAW,MALZ;AAMC,IAAA,iCAAiC,MANlC;AAOC,IAAA,UAAU,EAAGK,eAPd;AAQC,IAAA,aAAa,EAAGC,kBARjB;AASC,IAAA,SAAS,EAAGD,eAAe,KAAKE;AATjC,IAZD,EAwBC;AAAI,IAAA,SAAS,EAAC;AAAd,KACG,cAAI,kBAAJ,CADH,CAxBD,EA4BC,4BAAC,+CAAD;AACC,IAAA,SAAS,EAAC,wCADX;AAEC,IAAA,MAAM,EAAGR,eAFV;AAGC,IAAA,mBAAmB,EAAG,CAAEC,sBAHzB;AAIC,IAAA,SAAS,EAAG,KAJb;AAKC,IAAA,WAAW,MALZ;AAMC,IAAA,iCAAiC,MANlC;AAOC,IAAA,UAAU,EAAGQ,aAPd;AAQC,IAAA,aAAa,EAAGC,gBARjB;AASC,IAAA,SAAS,EAAGD,aAAa,KAAKE;AAT/B,IA5BD,CADD;AA0CA;;eAEchB,iB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalColorGradientControl as ColorGradientControl,\n\texperiments as blockEditorExperiments,\n} from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport { getSupportedGlobalStylesPanels, useColorsPerOrigin } from './hooks';\nimport { unlock } from '../../experiments';\n\nconst { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments );\n\nfunction ScreenButtonColor( { name, variation = '' } ) {\n\tconst prefix = variation ? `variations.${ variation }.` : '';\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst colorsPerOrigin = useColorsPerOrigin( name );\n\tconst [ areCustomSolidsEnabled ] = useGlobalSetting( 'color.custom', name );\n\tconst [ isBackgroundEnabled ] = useGlobalSetting(\n\t\t'color.background',\n\t\tname\n\t);\n\n\tconst hasButtonColor =\n\t\tsupports.includes( 'buttonColor' ) &&\n\t\tisBackgroundEnabled &&\n\t\t( colorsPerOrigin.length > 0 || areCustomSolidsEnabled );\n\n\tconst [ buttonTextColor, setButtonTextColor ] = useGlobalStyle(\n\t\tprefix + 'elements.button.color.text',\n\t\tname\n\t);\n\tconst [ userButtonTextColor ] = useGlobalStyle(\n\t\t'elements.button.color.text',\n\t\tname,\n\t\t'user'\n\t);\n\n\tconst [ buttonBgColor, setButtonBgColor ] = useGlobalStyle(\n\t\t'elements.button.color.background',\n\t\tname\n\t);\n\tconst [ userButtonBgColor ] = useGlobalStyle(\n\t\t'elements.button.color.background',\n\t\tname,\n\t\t'user'\n\t);\n\n\tif ( ! hasButtonColor ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Buttons' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Set the default colors used for buttons across the site.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<h4 className=\"edit-site-global-styles-section-title\">\n\t\t\t\t{ __( 'Text color' ) }\n\t\t\t</h4>\n\n\t\t\t<ColorGradientControl\n\t\t\t\tclassName=\"edit-site-screen-button-color__control\"\n\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\tshowTitle={ false }\n\t\t\t\tenableAlpha\n\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\tcolorValue={ buttonTextColor }\n\t\t\t\tonColorChange={ setButtonTextColor }\n\t\t\t\tclearable={ buttonTextColor === userButtonTextColor }\n\t\t\t/>\n\n\t\t\t<h4 className=\"edit-site-global-styles-section-title\">\n\t\t\t\t{ __( 'Background color' ) }\n\t\t\t</h4>\n\n\t\t\t<ColorGradientControl\n\t\t\t\tclassName=\"edit-site-screen-button-color__control\"\n\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\tshowTitle={ false }\n\t\t\t\tenableAlpha\n\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\tcolorValue={ buttonBgColor }\n\t\t\t\tonColorChange={ setButtonBgColor }\n\t\t\t\tclearable={ buttonBgColor === userButtonBgColor }\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nexport default ScreenButtonColor;\n"]}

package/build/components/global-styles/screen-colors.js

@@ -13,6 +13,8 @@ var _i18n = require("@wordpress/i18n");
 
 var _components = require("@wordpress/components");
 
+var _blockEditor = require("@wordpress/block-editor");
+
 var _header = _interopRequireDefault(require("./header"));
 
 var _palette = _interopRequireDefault(require("./palette"));
@@ -29,6 +31,8 @@ var _blockPreviewPanel = _interopRequireDefault(require("./block-preview-panel")
 
 var _utils = require("./utils");
 
+var _experiments = require("../../experiments");
+
 /**
  * WordPress dependencies
  */
@@ -36,32 +40,29 @@ var _utils = require("./utils");
 /**
  * Internal dependencies
  */
-function variationPathToURL(variationPath) {
-  if (!variationPath) {
-    return '';
-  } // Replace the dots with slashes, add slash at the beginning and remove the last slash.
-
-
-  return '/' + variationPath.replace(/\./g, '/').slice(0, -1);
-}
+const {
+  useGlobalStyle
+} = (0, _experiments.unlock)(_blockEditor.experiments);
 
 function BackgroundColorItem(_ref) {
   let {
     name,
     parentMenu,
-    variationPath = ''
+    variation = ''
   } = _ref;
+  const prefix = variation ? `variations.${variation}.` : '';
+  const urlPrefix = variation ? `/variations/${variation}` : '';
   const supports = (0, _hooks.getSupportedGlobalStylesPanels)(name);
   const hasSupport = supports.includes('backgroundColor') || supports.includes('background');
-  const [backgroundColor] = (0, _hooks.useStyle)(variationPath + 'color.background', name);
-  const [gradientValue] = (0, _hooks.useStyle)(variationPath + 'color.gradient', name);
+  const [backgroundColor] = useGlobalStyle(prefix + 'color.background', name);
+  const [gradientValue] = useGlobalStyle(prefix + 'color.gradient', name);
 
   if (!hasSupport) {
     return null;
   }
 
   return (0, _element.createElement)(_navigationButton.NavigationButtonAsItem, {
-    path: parentMenu + variationPathToURL(variationPath) + '/colors/background',
+    path: parentMenu + urlPrefix + '/colors/background',
     "aria-label": (0, _i18n.__)('Colors background styles')
   }, (0, _element.createElement)(_components.__experimentalHStack, {
     justify: "flex-start"
@@ -79,18 +80,20 @@ function TextColorItem(_ref2) {
   let {
     name,
     parentMenu,
-    variationPath = ''
+    variation = ''
   } = _ref2;
+  const prefix = variation ? `variations.${variation}.` : '';
+  const urlPrefix = variation ? `/variations/${variation}` : '';
   const supports = (0, _hooks.getSupportedGlobalStylesPanels)(name);
   const hasSupport = supports.includes('color');
-  const [color] = (0, _hooks.useStyle)(variationPath + 'color.text', name);
+  const [color] = useGlobalStyle(prefix + 'color.text', name);
 
   if (!hasSupport) {
     return null;
   }
 
   return (0, _element.createElement)(_navigationButton.NavigationButtonAsItem, {
-    path: parentMenu + variationPathToURL(variationPath) + '/colors/text',
+    path: parentMenu + urlPrefix + '/colors/text',
     "aria-label": (0, _i18n.__)('Colors text styles')
   }, (0, _element.createElement)(_components.__experimentalHStack, {
     justify: "flex-start"
@@ -108,19 +111,21 @@ function LinkColorItem(_ref3) {
   let {
     name,
     parentMenu,
-    variationPath = ''
+    variation = ''
   } = _ref3;
+  const prefix = variation ? `variations.${variation}.` : '';
+  const urlPrefix = variation ? `/variations/${variation}` : '';
   const supports = (0, _hooks.getSupportedGlobalStylesPanels)(name);
   const hasSupport = supports.includes('linkColor');
-  const [color] = (0, _hooks.useStyle)(variationPath + 'elements.link.color.text', name);
-  const [colorHover] = (0, _hooks.useStyle)(variationPath + 'elements.link.:hover.color.text', name);
+  const [color] = useGlobalStyle(prefix + 'elements.link.color.text', name);
+  const [colorHover] = useGlobalStyle(prefix + 'elements.link.:hover.color.text', name);
 
   if (!hasSupport) {
     return null;
   }
 
   return (0, _element.createElement)(_navigationButton.NavigationButtonAsItem, {
-    path: parentMenu + variationPathToURL(variationPath) + '/colors/link',
+    path: parentMenu + urlPrefix + '/colors/link',
     "aria-label": (0, _i18n.__)('Colors link styles')
   }, (0, _element.createElement)(_components.__experimentalHStack, {
     justify: "flex-start"
@@ -144,19 +149,21 @@ function HeadingColorItem(_ref4) {
   let {
     name,
     parentMenu,
-    variationPath = ''
+    variation = ''
   } = _ref4;
+  const prefix = variation ? `variations.${variation}.` : '';
+  const urlPrefix = variation ? `/variations/${variation}` : '';
   const supports = (0, _hooks.getSupportedGlobalStylesPanels)(name);
   const hasSupport = supports.includes('color');
-  const [color] = (0, _hooks.useStyle)(variationPath + 'elements.heading.color.text', name);
-  const [bgColor] = (0, _hooks.useStyle)(variationPath + 'elements.heading.color.background', name);
+  const [color] = useGlobalStyle(prefix + 'elements.heading.color.text', name);
+  const [bgColor] = useGlobalStyle(prefix + 'elements.heading.color.background', name);
 
   if (!hasSupport) {
     return null;
   }
 
   return (0, _element.createElement)(_navigationButton.NavigationButtonAsItem, {
-    path: parentMenu + variationPathToURL(variationPath) + '/colors/heading',
+    path: parentMenu + urlPrefix + '/colors/heading',
     "aria-label": (0, _i18n.__)('Colors heading styles')
   }, (0, _element.createElement)(_components.__experimentalHStack, {
     justify: "flex-start"
@@ -178,19 +185,21 @@ function ButtonColorItem(_ref5) {
   let {
     name,
     parentMenu,
-    variationPath = ''
+    variation = ''
   } = _ref5;
+  const prefix = variation ? `variations.${variation}.` : '';
+  const urlPrefix = variation ? `/variations/${variation}` : '';
   const supports = (0, _hooks.getSupportedGlobalStylesPanels)(name);
   const hasSupport = supports.includes('buttonColor');
-  const [color] = (0, _hooks.useStyle)(variationPath + 'elements.button.color.text', name);
-  const [bgColor] = (0, _hooks.useStyle)(variationPath + 'elements.button.color.background', name);
+  const [color] = useGlobalStyle(prefix + 'elements.button.color.text', name);
+  const [bgColor] = useGlobalStyle(prefix + 'elements.button.color.background', name);
 
   if (!hasSupport) {
     return null;
   }
 
   return (0, _element.createElement)(_navigationButton.NavigationButtonAsItem, {
-    path: parentMenu + variationPathToURL(variationPath) + '/colors/button'
+    path: parentMenu + urlPrefix + '/colors/button'
   }, (0, _element.createElement)(_components.__experimentalHStack, {
     justify: "flex-start"
   }, (0, _element.createElement)(_components.__experimentalZStack, {
@@ -212,10 +221,10 @@ function ButtonColorItem(_ref5) {
 function ScreenColors(_ref6) {
   let {
     name,
-    variationPath = ''
+    variation = ''
   } = _ref6;
   const parentMenu = name === undefined ? '' : '/blocks/' + encodeURIComponent(name);
-  const variationClassName = (0, _utils.getVariationClassNameFromPath)(variationPath);
+  const variationClassName = (0, _utils.getVariationClassName)(variation);
   return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
     title: (0, _i18n.__)('Colors'),
     description: (0, _i18n.__)('Manage palettes and the default color of different global elements on the site.')
@@ -236,23 +245,23 @@ function ScreenColors(_ref6) {
   }, (0, _element.createElement)(BackgroundColorItem, {
     name: name,
     parentMenu: parentMenu,
-    variationPath: variationPath
+    variation: variation
   }), (0, _element.createElement)(TextColorItem, {
     name: name,
     parentMenu: parentMenu,
-    variationPath: variationPath
+    variation: variation
   }), (0, _element.createElement)(LinkColorItem, {
     name: name,
     parentMenu: parentMenu,
-    variationPath: variationPath
+    variation: variation
   }), (0, _element.createElement)(HeadingColorItem, {
     name: name,
     parentMenu: parentMenu,
-    variationPath: variationPath
+    variation: variation
   }), (0, _element.createElement)(ButtonColorItem, {
     name: name,
     parentMenu: parentMenu,
-    variationPath: variationPath
+    variation: variation
   }))))));
 }
 

package/build/components/global-styles/screen-colors.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-colors.js"],"names":["variationPathToURL","variationPath","replace","slice","BackgroundColorItem","name","parentMenu","supports","hasSupport","includes","backgroundColor","gradientValue","TextColorItem","color","LinkColorItem","colorHover","HeadingColorItem","bgColor","ButtonColorItem","ScreenColors","undefined","encodeURIComponent","variationClassName"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalZStack as ZStack,\n\tFlexItem,\n\tColorIndicator,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport Palette from './palette';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { getSupportedGlobalStylesPanels, useStyle } from './hooks';\nimport Subtitle from './subtitle';\nimport ColorIndicatorWrapper from './color-indicator-wrapper';\nimport BlockPreviewPanel from './block-preview-panel';\nimport { getVariationClassNameFromPath } from './utils';\n\nfunction variationPathToURL( variationPath ) {\n\tif ( ! variationPath ) {\n\t\treturn '';\n\t}\n\t// Replace the dots with slashes, add slash at the beginning and remove the last slash.\n\treturn '/' + variationPath.replace( /\\./g, '/' ).slice( 0, -1 );\n}\n\nfunction BackgroundColorItem( { name, parentMenu, variationPath = '' } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasSupport =\n\t\tsupports.includes( 'backgroundColor' ) ||\n\t\tsupports.includes( 'background' );\n\tconst [ backgroundColor ] = useStyle(\n\t\tvariationPath + 'color.background',\n\t\tname\n\t);\n\tconst [ gradientValue ] = useStyle(\n\t\tvariationPath + 'color.gradient',\n\t\tname\n\t);\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={\n\t\t\t\tparentMenu +\n\t\t\t\tvariationPathToURL( variationPath ) +\n\t\t\t\t'/colors/background'\n\t\t\t}\n\t\t\taria-label={ __( 'Colors background styles' ) }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<ColorIndicatorWrapper expanded={ false }>\n\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\tcolorValue={ gradientValue ?? backgroundColor }\n\t\t\t\t\t\tdata-testid=\"background-color-indicator\"\n\t\t\t\t\t/>\n\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t<FlexItem className=\"edit-site-global-styles__color-label\">\n\t\t\t\t\t{ __( 'Background' ) }\n\t\t\t\t</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\nfunction TextColorItem( { name, parentMenu, variationPath = '' } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasSupport = supports.includes( 'color' );\n\tconst [ color ] = useStyle( variationPath + 'color.text', name );\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={\n\t\t\t\tparentMenu +\n\t\t\t\tvariationPathToURL( variationPath ) +\n\t\t\t\t'/colors/text'\n\t\t\t}\n\t\t\taria-label={ __( 'Colors text styles' ) }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<ColorIndicatorWrapper expanded={ false }>\n\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\tcolorValue={ color }\n\t\t\t\t\t\tdata-testid=\"text-color-indicator\"\n\t\t\t\t\t/>\n\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t<FlexItem className=\"edit-site-global-styles__color-label\">\n\t\t\t\t\t{ __( 'Text' ) }\n\t\t\t\t</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\nfunction LinkColorItem( { name, parentMenu, variationPath = '' } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasSupport = supports.includes( 'linkColor' );\n\tconst [ color ] = useStyle(\n\t\tvariationPath + 'elements.link.color.text',\n\t\tname\n\t);\n\tconst [ colorHover ] = useStyle(\n\t\tvariationPath + 'elements.link.:hover.color.text',\n\t\tname\n\t);\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={\n\t\t\t\tparentMenu +\n\t\t\t\tvariationPathToURL( variationPath ) +\n\t\t\t\t'/colors/link'\n\t\t\t}\n\t\t\taria-label={ __( 'Colors link styles' ) }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<ZStack isLayered={ false } offset={ -8 }>\n\t\t\t\t\t<ColorIndicatorWrapper expanded={ false }>\n\t\t\t\t\t\t<ColorIndicator colorValue={ color } />\n\t\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t\t<ColorIndicatorWrapper expanded={ false }>\n\t\t\t\t\t\t<ColorIndicator colorValue={ colorHover } />\n\t\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t</ZStack>\n\t\t\t\t<FlexItem className=\"edit-site-global-styles__color-label\">\n\t\t\t\t\t{ __( 'Links' ) }\n\t\t\t\t</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\nfunction HeadingColorItem( { name, parentMenu, variationPath = '' } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasSupport = supports.includes( 'color' );\n\tconst [ color ] = useStyle(\n\t\tvariationPath + 'elements.heading.color.text',\n\t\tname\n\t);\n\tconst [ bgColor ] = useStyle(\n\t\tvariationPath + 'elements.heading.color.background',\n\t\tname\n\t);\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={\n\t\t\t\tparentMenu +\n\t\t\t\tvariationPathToURL( variationPath ) +\n\t\t\t\t'/colors/heading'\n\t\t\t}\n\t\t\taria-label={ __( 'Colors heading styles' ) }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<ZStack isLayered={ false } offset={ -8 }>\n\t\t\t\t\t<ColorIndicatorWrapper expanded={ false }>\n\t\t\t\t\t\t<ColorIndicator colorValue={ bgColor } />\n\t\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t\t<ColorIndicatorWrapper expanded={ false }>\n\t\t\t\t\t\t<ColorIndicator colorValue={ color } />\n\t\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t</ZStack>\n\t\t\t\t<FlexItem>{ __( 'Headings' ) }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\nfunction ButtonColorItem( { name, parentMenu, variationPath = '' } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasSupport = supports.includes( 'buttonColor' );\n\tconst [ color ] = useStyle(\n\t\tvariationPath + 'elements.button.color.text',\n\t\tname\n\t);\n\tconst [ bgColor ] = useStyle(\n\t\tvariationPath + 'elements.button.color.background',\n\t\tname\n\t);\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={\n\t\t\t\tparentMenu +\n\t\t\t\tvariationPathToURL( variationPath ) +\n\t\t\t\t'/colors/button'\n\t\t\t}\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<ZStack isLayered={ false } offset={ -8 }>\n\t\t\t\t\t<ColorIndicatorWrapper expanded={ false }>\n\t\t\t\t\t\t<ColorIndicator colorValue={ bgColor } />\n\t\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t\t<ColorIndicatorWrapper expanded={ false }>\n\t\t\t\t\t\t<ColorIndicator colorValue={ color } />\n\t\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t</ZStack>\n\t\t\t\t<FlexItem className=\"edit-site-global-styles__color-label\">\n\t\t\t\t\t{ __( 'Buttons' ) }\n\t\t\t\t</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\nfunction ScreenColors( { name, variationPath = '' } ) {\n\tconst parentMenu =\n\t\tname === undefined ? '' : '/blocks/' + encodeURIComponent( name );\n\tconst variationClassName = getVariationClassNameFromPath( variationPath );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Colors' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Manage palettes and the default color of different global elements on the site.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<BlockPreviewPanel name={ name } variation={ variationClassName } />\n\n\t\t\t<div className=\"edit-site-global-styles-screen-colors\">\n\t\t\t\t<VStack spacing={ 10 }>\n\t\t\t\t\t<Palette name={ name } />\n\n\t\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t\t<Subtitle>{ __( 'Elements' ) }</Subtitle>\n\t\t\t\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t\t\t\t<BackgroundColorItem\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t\tvariationPath={ variationPath }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<TextColorItem\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t\tvariationPath={ variationPath }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<LinkColorItem\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t\tvariationPath={ variationPath }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<HeadingColorItem\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t\tvariationPath={ variationPath }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<ButtonColorItem\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t\tvariationPath={ variationPath }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t</VStack>\n\t\t\t\t</VStack>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenColors;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-colors.js"],"names":["useGlobalStyle","blockEditorExperiments","BackgroundColorItem","name","parentMenu","variation","prefix","urlPrefix","supports","hasSupport","includes","backgroundColor","gradientValue","TextColorItem","color","LinkColorItem","colorHover","HeadingColorItem","bgColor","ButtonColorItem","ScreenColors","undefined","encodeURIComponent","variationClassName"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalZStack as ZStack,\n\tFlexItem,\n\tColorIndicator,\n} from '@wordpress/components';\nimport { experiments as blockEditorExperiments } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport Palette from './palette';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { getSupportedGlobalStylesPanels } from './hooks';\nimport Subtitle from './subtitle';\nimport ColorIndicatorWrapper from './color-indicator-wrapper';\nimport BlockPreviewPanel from './block-preview-panel';\nimport { getVariationClassName } from './utils';\nimport { unlock } from '../../experiments';\n\nconst { useGlobalStyle } = unlock( blockEditorExperiments );\n\nfunction BackgroundColorItem( { name, parentMenu, variation = '' } ) {\n\tconst prefix = variation ? `variations.${ variation }.` : '';\n\tconst urlPrefix = variation ? `/variations/${ variation }` : '';\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasSupport =\n\t\tsupports.includes( 'backgroundColor' ) ||\n\t\tsupports.includes( 'background' );\n\tconst [ backgroundColor ] = useGlobalStyle(\n\t\tprefix + 'color.background',\n\t\tname\n\t);\n\tconst [ gradientValue ] = useGlobalStyle( prefix + 'color.gradient', name );\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ parentMenu + urlPrefix + '/colors/background' }\n\t\t\taria-label={ __( 'Colors background styles' ) }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<ColorIndicatorWrapper expanded={ false }>\n\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\tcolorValue={ gradientValue ?? backgroundColor }\n\t\t\t\t\t\tdata-testid=\"background-color-indicator\"\n\t\t\t\t\t/>\n\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t<FlexItem className=\"edit-site-global-styles__color-label\">\n\t\t\t\t\t{ __( 'Background' ) }\n\t\t\t\t</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\nfunction TextColorItem( { name, parentMenu, variation = '' } ) {\n\tconst prefix = variation ? `variations.${ variation }.` : '';\n\tconst urlPrefix = variation ? `/variations/${ variation }` : '';\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasSupport = supports.includes( 'color' );\n\tconst [ color ] = useGlobalStyle( prefix + 'color.text', name );\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ parentMenu + urlPrefix + '/colors/text' }\n\t\t\taria-label={ __( 'Colors text styles' ) }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<ColorIndicatorWrapper expanded={ false }>\n\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\tcolorValue={ color }\n\t\t\t\t\t\tdata-testid=\"text-color-indicator\"\n\t\t\t\t\t/>\n\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t<FlexItem className=\"edit-site-global-styles__color-label\">\n\t\t\t\t\t{ __( 'Text' ) }\n\t\t\t\t</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\nfunction LinkColorItem( { name, parentMenu, variation = '' } ) {\n\tconst prefix = variation ? `variations.${ variation }.` : '';\n\tconst urlPrefix = variation ? `/variations/${ variation }` : '';\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasSupport = supports.includes( 'linkColor' );\n\tconst [ color ] = useGlobalStyle(\n\t\tprefix + 'elements.link.color.text',\n\t\tname\n\t);\n\tconst [ colorHover ] = useGlobalStyle(\n\t\tprefix + 'elements.link.:hover.color.text',\n\t\tname\n\t);\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ parentMenu + urlPrefix + '/colors/link' }\n\t\t\taria-label={ __( 'Colors link styles' ) }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<ZStack isLayered={ false } offset={ -8 }>\n\t\t\t\t\t<ColorIndicatorWrapper expanded={ false }>\n\t\t\t\t\t\t<ColorIndicator colorValue={ color } />\n\t\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t\t<ColorIndicatorWrapper expanded={ false }>\n\t\t\t\t\t\t<ColorIndicator colorValue={ colorHover } />\n\t\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t</ZStack>\n\t\t\t\t<FlexItem className=\"edit-site-global-styles__color-label\">\n\t\t\t\t\t{ __( 'Links' ) }\n\t\t\t\t</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\nfunction HeadingColorItem( { name, parentMenu, variation = '' } ) {\n\tconst prefix = variation ? `variations.${ variation }.` : '';\n\tconst urlPrefix = variation ? `/variations/${ variation }` : '';\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasSupport = supports.includes( 'color' );\n\tconst [ color ] = useGlobalStyle(\n\t\tprefix + 'elements.heading.color.text',\n\t\tname\n\t);\n\tconst [ bgColor ] = useGlobalStyle(\n\t\tprefix + 'elements.heading.color.background',\n\t\tname\n\t);\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ parentMenu + urlPrefix + '/colors/heading' }\n\t\t\taria-label={ __( 'Colors heading styles' ) }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<ZStack isLayered={ false } offset={ -8 }>\n\t\t\t\t\t<ColorIndicatorWrapper expanded={ false }>\n\t\t\t\t\t\t<ColorIndicator colorValue={ bgColor } />\n\t\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t\t<ColorIndicatorWrapper expanded={ false }>\n\t\t\t\t\t\t<ColorIndicator colorValue={ color } />\n\t\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t</ZStack>\n\t\t\t\t<FlexItem>{ __( 'Headings' ) }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\nfunction ButtonColorItem( { name, parentMenu, variation = '' } ) {\n\tconst prefix = variation ? `variations.${ variation }.` : '';\n\tconst urlPrefix = variation ? `/variations/${ variation }` : '';\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasSupport = supports.includes( 'buttonColor' );\n\tconst [ color ] = useGlobalStyle(\n\t\tprefix + 'elements.button.color.text',\n\t\tname\n\t);\n\tconst [ bgColor ] = useGlobalStyle(\n\t\tprefix + 'elements.button.color.background',\n\t\tname\n\t);\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ parentMenu + urlPrefix + '/colors/button' }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<ZStack isLayered={ false } offset={ -8 }>\n\t\t\t\t\t<ColorIndicatorWrapper expanded={ false }>\n\t\t\t\t\t\t<ColorIndicator colorValue={ bgColor } />\n\t\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t\t<ColorIndicatorWrapper expanded={ false }>\n\t\t\t\t\t\t<ColorIndicator colorValue={ color } />\n\t\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t</ZStack>\n\t\t\t\t<FlexItem className=\"edit-site-global-styles__color-label\">\n\t\t\t\t\t{ __( 'Buttons' ) }\n\t\t\t\t</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\nfunction ScreenColors( { name, variation = '' } ) {\n\tconst parentMenu =\n\t\tname === undefined ? '' : '/blocks/' + encodeURIComponent( name );\n\tconst variationClassName = getVariationClassName( variation );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Colors' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Manage palettes and the default color of different global elements on the site.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<BlockPreviewPanel name={ name } variation={ variationClassName } />\n\n\t\t\t<div className=\"edit-site-global-styles-screen-colors\">\n\t\t\t\t<VStack spacing={ 10 }>\n\t\t\t\t\t<Palette name={ name } />\n\n\t\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t\t<Subtitle>{ __( 'Elements' ) }</Subtitle>\n\t\t\t\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t\t\t\t<BackgroundColorItem\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t\tvariation={ variation }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<TextColorItem\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t\tvariation={ variation }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<LinkColorItem\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t\tvariation={ variation }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<HeadingColorItem\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t\tvariation={ variation }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<ButtonColorItem\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t\tvariation={ variation }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t</VStack>\n\t\t\t\t</VStack>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenColors;\n"]}

package/build/components/global-styles/screen-css.js

@@ -13,9 +13,9 @@ var _i18n = require("@wordpress/i18n");
 
 var _components = require("@wordpress/components");
 
-var _header = _interopRequireDefault(require("./header"));
+var _blocks = require("@wordpress/blocks");
 
-var _subtitle = _interopRequireDefault(require("./subtitle"));
+var _header = _interopRequireDefault(require("./header"));
 
 var _customCss = _interopRequireDefault(require("./custom-css"));
 
@@ -26,15 +26,27 @@ var _customCss = _interopRequireDefault(require("./custom-css"));
 /**
  * Internal dependencies
  */
-function ScreenCSS() {
+function ScreenCSS(_ref) {
+  let {
+    name
+  } = _ref;
+  // If name is defined, we are customizing CSS at the block level.
+  // Display the block title in the description.
+  const blockType = (0, _blocks.getBlockType)(name);
+  const title = blockType === null || blockType === void 0 ? void 0 : blockType.title;
+  const description = title !== undefined ? (0, _i18n.sprintf)( // translators: %s: is the name of a block e.g., 'Image' or 'Table'.
+  (0, _i18n.__)('Add your own CSS to customize the appearance of the %s block.'), title) : (0, _i18n.__)('Add your own CSS to customize the appearance and layout of your site.');
   return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
     title: (0, _i18n.__)('CSS'),
-    description: (0, _i18n.__)('Add your own CSS to customize the appearance and layout of your site.')
-  }), (0, _element.createElement)("div", {
+    description: description
+  }), (0, _element.createElement)(_components.ExternalLink, {
+    href: "https://wordpress.org/support/article/css/",
+    className: "edit-site-global-styles-screen-css-help-link"
+  }, (0, _i18n.__)('Learn more about CSS')), (0, _element.createElement)("div", {
     className: "edit-site-global-styles-screen-css"
-  }, (0, _element.createElement)(_components.__experimentalVStack, {
-    spacing: 3
-  }, (0, _element.createElement)(_subtitle.default, null, (0, _i18n.__)('ADDITIONAL CSS')), (0, _element.createElement)(_customCss.default, null))));
+  }, (0, _element.createElement)(_customCss.default, {
+    blockName: name
+  })));
 }
 
 var _default = ScreenCSS;

package/build/components/global-styles/screen-css.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-css.js"],"names":["ScreenCSS"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AACA;;AAXA;AACA;AACA;;AAIA;AACA;AACA;AAKA,SAASA,SAAT,GAAqB;AACpB,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,KAAK,EAAG,cAAI,KAAJ,CADT;AAEC,IAAA,WAAW,EAAG,cACb,uEADa;AAFf,IADD,EAOC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,4BAAC,iBAAD,QAAY,cAAI,gBAAJ,CAAZ,CADD,EAEC,4BAAC,kBAAD,OAFD,CADD,CAPD,CADD;AAgBA;;eAEcA,S","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalVStack as VStack } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport Subtitle from './subtitle';\nimport CustomCSSControl from './custom-css';\n\nfunction ScreenCSS() {\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'CSS' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Add your own CSS to customize the appearance and layout of your site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<div className=\"edit-site-global-styles-screen-css\">\n\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t<Subtitle>{ __( 'ADDITIONAL CSS' ) }</Subtitle>\n\t\t\t\t\t<CustomCSSControl />\n\t\t\t\t</VStack>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenCSS;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-css.js"],"names":["ScreenCSS","name","blockType","title","description","undefined"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AACA;;AAKA;;AACA;;AAXA;AACA;AACA;;AAKA;AACA;AACA;AAIA,SAASA,SAAT,OAA+B;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AAC9B;AACA;AACA,QAAMC,SAAS,GAAG,0BAAcD,IAAd,CAAlB;AACA,QAAME,KAAK,GAAGD,SAAH,aAAGA,SAAH,uBAAGA,SAAS,CAAEC,KAAzB;AAEA,QAAMC,WAAW,GAChBD,KAAK,KAAKE,SAAV,GACG,oBACA;AACA,gBACC,+DADD,CAFA,EAKAF,KALA,CADH,GAQG,cACA,uEADA,CATJ;AAaA,SACC,qDACC,4BAAC,eAAD;AAAc,IAAA,KAAK,EAAG,cAAI,KAAJ,CAAtB;AAAoC,IAAA,WAAW,EAAGC;AAAlD,IADD,EAEC,4BAAC,wBAAD;AACC,IAAA,IAAI,EAAC,4CADN;AAEC,IAAA,SAAS,EAAC;AAFX,KAIG,cAAI,sBAAJ,CAJH,CAFD,EAQC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,4BAAC,kBAAD;AAAkB,IAAA,SAAS,EAAGH;AAA9B,IADD,CARD,CADD;AAcA;;eAEcD,S","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { sprintf, __ } from '@wordpress/i18n';\nimport { ExternalLink } from '@wordpress/components';\nimport { getBlockType } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport CustomCSSControl from './custom-css';\n\nfunction ScreenCSS( { name } ) {\n\t// If name is defined, we are customizing CSS at the block level.\n\t// Display the block title in the description.\n\tconst blockType = getBlockType( name );\n\tconst title = blockType?.title;\n\n\tconst description =\n\t\ttitle !== undefined\n\t\t\t? sprintf(\n\t\t\t\t\t// translators: %s: is the name of a block e.g., 'Image' or 'Table'.\n\t\t\t\t\t__(\n\t\t\t\t\t\t'Add your own CSS to customize the appearance of the %s block.'\n\t\t\t\t\t),\n\t\t\t\t\ttitle\n\t\t\t  )\n\t\t\t: __(\n\t\t\t\t\t'Add your own CSS to customize the appearance and layout of your site.'\n\t\t\t  );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader title={ __( 'CSS' ) } description={ description } />\n\t\t\t<ExternalLink\n\t\t\t\thref=\"https://wordpress.org/support/article/css/\"\n\t\t\t\tclassName=\"edit-site-global-styles-screen-css-help-link\"\n\t\t\t>\n\t\t\t\t{ __( 'Learn more about CSS' ) }\n\t\t\t</ExternalLink>\n\t\t\t<div className=\"edit-site-global-styles-screen-css\">\n\t\t\t\t<CustomCSSControl blockName={ name } />\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenCSS;\n"]}

package/build/components/global-styles/screen-heading-color.js

@@ -21,6 +21,8 @@ var _header = _interopRequireDefault(require("./header"));
 
 var _hooks = require("./hooks");
 
+var _experiments = require("../../experiments");
+
 /**
  * WordPress dependencies
  */
@@ -28,30 +30,34 @@ var _hooks = require("./hooks");
 /**
  * Internal dependencies
  */
+const {
+  useGlobalSetting,
+  useGlobalStyle
+} = (0, _experiments.unlock)(_blockEditor.experiments);
+
 function ScreenHeadingColor(_ref) {
   let {
     name,
-    variationPath = ''
+    variation = ''
   } = _ref;
+  const prefix = variation ? `variations.${variation}.` : '';
   const [selectedLevel, setCurrentTab] = (0, _element.useState)('heading');
   const supports = (0, _hooks.getSupportedGlobalStylesPanels)(name);
-  const [solids] = (0, _hooks.useSetting)('color.palette', name);
-  const [gradients] = (0, _hooks.useSetting)('color.gradients', name);
-  const [areCustomSolidsEnabled] = (0, _hooks.useSetting)('color.custom', name);
-  const [areCustomGradientsEnabled] = (0, _hooks.useSetting)('color.customGradient', name);
-  const [isTextEnabled] = (0, _hooks.useSetting)('color.text', name);
-  const [isBackgroundEnabled] = (0, _hooks.useSetting)('color.background', name);
+  const [areCustomSolidsEnabled] = useGlobalSetting('color.custom', name);
+  const [areCustomGradientsEnabled] = useGlobalSetting('color.customGradient', name);
+  const [isTextEnabled] = useGlobalSetting('color.text', name);
+  const [isBackgroundEnabled] = useGlobalSetting('color.background', name);
   const colorsPerOrigin = (0, _hooks.useColorsPerOrigin)(name);
   const gradientsPerOrigin = (0, _hooks.useGradientsPerOrigin)(name);
-  const hasTextColor = supports.includes('color') && isTextEnabled && (solids.length > 0 || areCustomSolidsEnabled);
-  const hasBackgroundColor = supports.includes('backgroundColor') && isBackgroundEnabled && (solids.length > 0 || areCustomSolidsEnabled);
-  const hasGradientColor = supports.includes('background') && (gradients.length > 0 || areCustomGradientsEnabled);
-  const [color, setColor] = (0, _hooks.useStyle)(variationPath + 'elements.' + selectedLevel + '.color.text', name);
-  const [userColor] = (0, _hooks.useStyle)(variationPath + 'elements.' + selectedLevel + '.color.text', name, 'user');
-  const [backgroundColor, setBackgroundColor] = (0, _hooks.useStyle)(variationPath + 'elements.' + selectedLevel + '.color.background', name);
-  const [userBackgroundColor] = (0, _hooks.useStyle)(variationPath + 'elements.' + selectedLevel + '.color.background', name, 'user');
-  const [gradient, setGradient] = (0, _hooks.useStyle)(variationPath + 'elements.' + selectedLevel + '.color.gradient', name);
-  const [userGradient] = (0, _hooks.useStyle)(variationPath + 'elements.' + selectedLevel + '.color.gradient', name, 'user');
+  const hasTextColor = supports.includes('color') && isTextEnabled && (colorsPerOrigin.length > 0 || areCustomSolidsEnabled);
+  const hasBackgroundColor = supports.includes('backgroundColor') && isBackgroundEnabled && (colorsPerOrigin.length > 0 || areCustomSolidsEnabled);
+  const hasGradientColor = supports.includes('background') && (gradientsPerOrigin.length > 0 || areCustomGradientsEnabled);
+  const [color, setColor] = useGlobalStyle(prefix + 'elements.' + selectedLevel + '.color.text', name);
+  const [userColor] = useGlobalStyle(prefix + 'elements.' + selectedLevel + '.color.text', name, 'user');
+  const [backgroundColor, setBackgroundColor] = useGlobalStyle(prefix + 'elements.' + selectedLevel + '.color.background', name);
+  const [userBackgroundColor] = useGlobalStyle(prefix + 'elements.' + selectedLevel + '.color.background', name, 'user');
+  const [gradient, setGradient] = useGlobalStyle(prefix + 'elements.' + selectedLevel + '.color.gradient', name);
+  const [userGradient] = useGlobalStyle(prefix + 'elements.' + selectedLevel + '.color.gradient', name, 'user');
 
   if (!hasTextColor && !hasBackgroundColor && !hasGradientColor) {
     return null;
@@ -92,6 +98,7 @@ function ScreenHeadingColor(_ref) {
   }), (0, _element.createElement)("div", {
     className: "edit-site-global-styles-screen-heading-color"
   }, (0, _element.createElement)("h4", null, (0, _i18n.__)('Select heading level')), (0, _element.createElement)(_components.__experimentalToggleGroupControl, {
+    __nextHasNoMarginBottom: true,
     label: (0, _i18n.__)('Select heading level'),
     hideLabelFromVision: true,
     value: selectedLevel,