@wordpress/edit-site 5.0.0 → 5.2.0

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

@@ -25,6 +25,10 @@ var _subtitle = _interopRequireDefault(require("./subtitle"));
 
 var _colorIndicatorWrapper = _interopRequireDefault(require("./color-indicator-wrapper"));
 
+var _blockPreviewPanel = _interopRequireDefault(require("./block-preview-panel"));
+
+var _utils = require("./utils");
+
 /**
  * WordPress dependencies
  */
@@ -32,22 +36,32 @@ var _colorIndicatorWrapper = _interopRequireDefault(require("./color-indicator-w
 /**
  * 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);
+}
+
 function BackgroundColorItem(_ref) {
   let {
     name,
-    parentMenu
+    parentMenu,
+    variationPath = ''
   } = _ref;
   const supports = (0, _hooks.getSupportedGlobalStylesPanels)(name);
   const hasSupport = supports.includes('backgroundColor') || supports.includes('background');
-  const [backgroundColor] = (0, _hooks.useStyle)('color.background', name);
-  const [gradientValue] = (0, _hooks.useStyle)('color.gradient', name);
+  const [backgroundColor] = (0, _hooks.useStyle)(variationPath + 'color.background', name);
+  const [gradientValue] = (0, _hooks.useStyle)(variationPath + 'color.gradient', name);
 
   if (!hasSupport) {
     return null;
   }
 
   return (0, _element.createElement)(_navigationButton.NavigationButtonAsItem, {
-    path: parentMenu + '/colors/background',
+    path: parentMenu + variationPathToURL(variationPath) + '/colors/background',
     "aria-label": (0, _i18n.__)('Colors background styles')
   }, (0, _element.createElement)(_components.__experimentalHStack, {
     justify: "flex-start"
@@ -64,18 +78,19 @@ function BackgroundColorItem(_ref) {
 function TextColorItem(_ref2) {
   let {
     name,
-    parentMenu
+    parentMenu,
+    variationPath = ''
   } = _ref2;
   const supports = (0, _hooks.getSupportedGlobalStylesPanels)(name);
   const hasSupport = supports.includes('color');
-  const [color] = (0, _hooks.useStyle)('color.text', name);
+  const [color] = (0, _hooks.useStyle)(variationPath + 'color.text', name);
 
   if (!hasSupport) {
     return null;
   }
 
   return (0, _element.createElement)(_navigationButton.NavigationButtonAsItem, {
-    path: parentMenu + '/colors/text',
+    path: parentMenu + variationPathToURL(variationPath) + '/colors/text',
     "aria-label": (0, _i18n.__)('Colors text styles')
   }, (0, _element.createElement)(_components.__experimentalHStack, {
     justify: "flex-start"
@@ -92,19 +107,20 @@ function TextColorItem(_ref2) {
 function LinkColorItem(_ref3) {
   let {
     name,
-    parentMenu
+    parentMenu,
+    variationPath = ''
   } = _ref3;
   const supports = (0, _hooks.getSupportedGlobalStylesPanels)(name);
   const hasSupport = supports.includes('linkColor');
-  const [color] = (0, _hooks.useStyle)('elements.link.color.text', name);
-  const [colorHover] = (0, _hooks.useStyle)('elements.link.:hover.color.text', name);
+  const [color] = (0, _hooks.useStyle)(variationPath + 'elements.link.color.text', name);
+  const [colorHover] = (0, _hooks.useStyle)(variationPath + 'elements.link.:hover.color.text', name);
 
   if (!hasSupport) {
     return null;
   }
 
   return (0, _element.createElement)(_navigationButton.NavigationButtonAsItem, {
-    path: parentMenu + '/colors/link',
+    path: parentMenu + variationPathToURL(variationPath) + '/colors/link',
     "aria-label": (0, _i18n.__)('Colors link styles')
   }, (0, _element.createElement)(_components.__experimentalHStack, {
     justify: "flex-start"
@@ -127,19 +143,20 @@ function LinkColorItem(_ref3) {
 function HeadingColorItem(_ref4) {
   let {
     name,
-    parentMenu
+    parentMenu,
+    variationPath = ''
   } = _ref4;
   const supports = (0, _hooks.getSupportedGlobalStylesPanels)(name);
   const hasSupport = supports.includes('color');
-  const [color] = (0, _hooks.useStyle)('elements.heading.color.text', name);
-  const [bgColor] = (0, _hooks.useStyle)('elements.heading.color.background', name);
+  const [color] = (0, _hooks.useStyle)(variationPath + 'elements.heading.color.text', name);
+  const [bgColor] = (0, _hooks.useStyle)(variationPath + 'elements.heading.color.background', name);
 
   if (!hasSupport) {
     return null;
   }
 
   return (0, _element.createElement)(_navigationButton.NavigationButtonAsItem, {
-    path: parentMenu + '/colors/heading',
+    path: parentMenu + variationPathToURL(variationPath) + '/colors/heading',
     "aria-label": (0, _i18n.__)('Colors heading styles')
   }, (0, _element.createElement)(_components.__experimentalHStack, {
     justify: "flex-start"
@@ -160,19 +177,20 @@ function HeadingColorItem(_ref4) {
 function ButtonColorItem(_ref5) {
   let {
     name,
-    parentMenu
+    parentMenu,
+    variationPath = ''
   } = _ref5;
   const supports = (0, _hooks.getSupportedGlobalStylesPanels)(name);
   const hasSupport = supports.includes('buttonColor');
-  const [color] = (0, _hooks.useStyle)('elements.button.color.text', name);
-  const [bgColor] = (0, _hooks.useStyle)('elements.button.color.background', name);
+  const [color] = (0, _hooks.useStyle)(variationPath + 'elements.button.color.text', name);
+  const [bgColor] = (0, _hooks.useStyle)(variationPath + 'elements.button.color.background', name);
 
   if (!hasSupport) {
     return null;
   }
 
   return (0, _element.createElement)(_navigationButton.NavigationButtonAsItem, {
-    path: parentMenu + '/colors/button'
+    path: parentMenu + variationPathToURL(variationPath) + '/colors/button'
   }, (0, _element.createElement)(_components.__experimentalHStack, {
     justify: "flex-start"
   }, (0, _element.createElement)(_components.__experimentalZStack, {
@@ -193,12 +211,17 @@ function ButtonColorItem(_ref5) {
 
 function ScreenColors(_ref6) {
   let {
-    name
+    name,
+    variationPath = ''
   } = _ref6;
   const parentMenu = name === undefined ? '' : '/blocks/' + encodeURIComponent(name);
+  const variationClassName = (0, _utils.getVariationClassNameFromPath)(variationPath);
   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.')
+  }), (0, _element.createElement)(_blockPreviewPanel.default, {
+    name: name,
+    variation: variationClassName
   }), (0, _element.createElement)("div", {
     className: "edit-site-global-styles-screen-colors"
   }, (0, _element.createElement)(_components.__experimentalVStack, {
@@ -212,19 +235,24 @@ function ScreenColors(_ref6) {
     isSeparated: true
   }, (0, _element.createElement)(BackgroundColorItem, {
     name: name,
-    parentMenu: parentMenu
+    parentMenu: parentMenu,
+    variationPath: variationPath
   }), (0, _element.createElement)(TextColorItem, {
     name: name,
-    parentMenu: parentMenu
+    parentMenu: parentMenu,
+    variationPath: variationPath
   }), (0, _element.createElement)(LinkColorItem, {
     name: name,
-    parentMenu: parentMenu
+    parentMenu: parentMenu,
+    variationPath: variationPath
   }), (0, _element.createElement)(HeadingColorItem, {
     name: name,
-    parentMenu: parentMenu
+    parentMenu: parentMenu,
+    variationPath: variationPath
   }), (0, _element.createElement)(ButtonColorItem, {
     name: name,
-    parentMenu: parentMenu
+    parentMenu: parentMenu,
+    variationPath: variationPath
   }))))));
 }
 

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":["BackgroundColorItem","name","parentMenu","supports","hasSupport","includes","backgroundColor","gradientValue","TextColorItem","color","LinkColorItem","colorHover","HeadingColorItem","bgColor","ButtonColorItem","ScreenColors","undefined","encodeURIComponent"],"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';\n\nfunction BackgroundColorItem( { name, parentMenu } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasSupport =\n\t\tsupports.includes( 'backgroundColor' ) ||\n\t\tsupports.includes( 'background' );\n\tconst [ backgroundColor ] = useStyle( 'color.background', name );\n\tconst [ gradientValue ] = useStyle( '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 + '/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 } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasSupport = supports.includes( 'color' );\n\tconst [ color ] = useStyle( '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 + '/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 } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasSupport = supports.includes( 'linkColor' );\n\tconst [ color ] = useStyle( 'elements.link.color.text', name );\n\tconst [ colorHover ] = useStyle( 'elements.link.:hover.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 + '/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 } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasSupport = supports.includes( 'color' );\n\tconst [ color ] = useStyle( 'elements.heading.color.text', name );\n\tconst [ bgColor ] = useStyle( 'elements.heading.color.background', name );\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ parentMenu + '/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 } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst hasSupport = supports.includes( 'buttonColor' );\n\tconst [ color ] = useStyle( 'elements.button.color.text', name );\n\tconst [ bgColor ] = useStyle( 'elements.button.color.background', name );\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButtonAsItem path={ parentMenu + '/colors/button' }>\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 } ) {\n\tconst parentMenu =\n\t\tname === undefined ? '' : '/blocks/' + encodeURIComponent( name );\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<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/>\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/>\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/>\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/>\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/>\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":["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"]}

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

@@ -30,7 +30,8 @@ var _hooks = require("./hooks");
  */
 function ScreenHeadingColor(_ref) {
   let {
-    name
+    name,
+    variationPath = ''
   } = _ref;
   const [selectedLevel, setCurrentTab] = (0, _element.useState)('heading');
   const supports = (0, _hooks.getSupportedGlobalStylesPanels)(name);
@@ -45,12 +46,12 @@ function ScreenHeadingColor(_ref) {
   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)('elements.' + selectedLevel + '.color.text', name);
-  const [userColor] = (0, _hooks.useStyle)('elements.' + selectedLevel + '.color.text', name, 'user');
-  const [backgroundColor, setBackgroundColor] = (0, _hooks.useStyle)('elements.' + selectedLevel + '.color.background', name);
-  const [userBackgroundColor] = (0, _hooks.useStyle)('elements.' + selectedLevel + '.color.background', name, 'user');
-  const [gradient, setGradient] = (0, _hooks.useStyle)('elements.' + selectedLevel + '.color.gradient', name);
-  const [userGradient] = (0, _hooks.useStyle)('elements.' + selectedLevel + '.color.gradient', name, 'user');
+  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');
 
   if (!hasTextColor && !hasBackgroundColor && !hasGradientColor) {
     return null;
@@ -98,7 +99,7 @@ function ScreenHeadingColor(_ref) {
     isBlock: true
   }, (0, _element.createElement)(_components.__experimentalToggleGroupControlOption, {
     value: "heading"
-    /* translators: 'All' refers to selecting all heading levels 
+    /* translators: 'All' refers to selecting all heading levels
     and applying the same style to h1-h6. */
     ,
     label: (0, _i18n.__)('All')
@@ -128,7 +129,6 @@ function ScreenHeadingColor(_ref) {
     className: "edit-site-screen-heading-text-color__control",
     colors: colorsPerOrigin,
     disableCustomColors: !areCustomSolidsEnabled,
-    __experimentalHasMultipleOrigins: true,
     showTitle: false,
     enableAlpha: true,
     __experimentalIsRenderedInSidebar: true,
@@ -145,7 +145,6 @@ function ScreenHeadingColor(_ref) {
     gradients: gradientsPerOrigin,
     disableCustomColors: !areCustomSolidsEnabled,
     disableCustomGradients: !areCustomGradientsEnabled,
-    __experimentalHasMultipleOrigins: true,
     showTitle: false,
     enableAlpha: true,
     __experimentalIsRenderedInSidebar: true

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-heading-color.js"],"names":["ScreenHeadingColor","name","selectedLevel","setCurrentTab","supports","solids","gradients","areCustomSolidsEnabled","areCustomGradientsEnabled","isTextEnabled","isBackgroundEnabled","colorsPerOrigin","gradientsPerOrigin","hasTextColor","includes","length","hasBackgroundColor","hasGradientColor","color","setColor","userColor","backgroundColor","setBackgroundColor","userBackgroundColor","gradient","setGradient","userGradient","backgroundSettings","colorValue","onColorChange","clearable","gradientSettings","gradientValue","onGradientChange","controlProps","toUpperCase"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { sprintf, __ } from '@wordpress/i18n';\nimport {\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n} from '@wordpress/components';\nimport { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport {\n\tgetSupportedGlobalStylesPanels,\n\tuseSetting,\n\tuseStyle,\n\tuseColorsPerOrigin,\n\tuseGradientsPerOrigin,\n} from './hooks';\n\nfunction ScreenHeadingColor( { name } ) {\n\tconst [ selectedLevel, setCurrentTab ] = useState( 'heading' );\n\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\tconst [ isTextEnabled ] = useSetting( 'color.text', name );\n\tconst [ isBackgroundEnabled ] = useSetting( 'color.background', name );\n\n\tconst colorsPerOrigin = useColorsPerOrigin( name );\n\tconst gradientsPerOrigin = useGradientsPerOrigin( name );\n\n\tconst hasTextColor =\n\t\tsupports.includes( 'color' ) &&\n\t\tisTextEnabled &&\n\t\t( solids.length > 0 || areCustomSolidsEnabled );\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\n\tconst [ color, setColor ] = useStyle(\n\t\t'elements.' + selectedLevel + '.color.text',\n\t\tname\n\t);\n\tconst [ userColor ] = useStyle(\n\t\t'elements.' + selectedLevel + '.color.text',\n\t\tname,\n\t\t'user'\n\t);\n\n\tconst [ backgroundColor, setBackgroundColor ] = useStyle(\n\t\t'elements.' + selectedLevel + '.color.background',\n\t\tname\n\t);\n\tconst [ userBackgroundColor ] = useStyle(\n\t\t'elements.' + selectedLevel + '.color.background',\n\t\tname,\n\t\t'user'\n\t);\n\tconst [ gradient, setGradient ] = useStyle(\n\t\t'elements.' + selectedLevel + '.color.gradient',\n\t\tname\n\t);\n\tconst [ userGradient ] = useStyle(\n\t\t'elements.' + selectedLevel + '.color.gradient',\n\t\tname,\n\t\t'user'\n\t);\n\n\tif ( ! hasTextColor && ! 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={ __( 'Headings' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Set the default color used for headings across the site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<div className=\"edit-site-global-styles-screen-heading-color\">\n\t\t\t\t<h4>{ __( 'Select heading level' ) }</h4>\n\n\t\t\t\t<ToggleGroupControl\n\t\t\t\t\tlabel={ __( 'Select heading level' ) }\n\t\t\t\t\thideLabelFromVision={ true }\n\t\t\t\t\tvalue={ selectedLevel }\n\t\t\t\t\tonChange={ setCurrentTab }\n\t\t\t\t\tisBlock\n\t\t\t\t>\n\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\tvalue=\"heading\"\n\t\t\t\t\t\t/* translators: 'All' refers to selecting all heading levels \n\t\t\t\t\t\tand applying the same style to h1-h6. */\n\t\t\t\t\t\tlabel={ __( 'All' ) }\n\t\t\t\t\t/>\n\t\t\t\t\t<ToggleGroupControlOption value=\"h1\" label={ __( 'H1' ) } />\n\t\t\t\t\t<ToggleGroupControlOption value=\"h2\" label={ __( 'H2' ) } />\n\t\t\t\t\t<ToggleGroupControlOption value=\"h3\" label={ __( 'H3' ) } />\n\t\t\t\t\t<ToggleGroupControlOption value=\"h4\" label={ __( 'H4' ) } />\n\t\t\t\t\t<ToggleGroupControlOption value=\"h5\" label={ __( 'H5' ) } />\n\t\t\t\t\t<ToggleGroupControlOption value=\"h6\" label={ __( 'H6' ) } />\n\t\t\t\t</ToggleGroupControl>\n\t\t\t</div>\n\t\t\t{ hasTextColor && (\n\t\t\t\t<div className=\"edit-site-global-styles-screen-heading-color\">\n\t\t\t\t\t<h4>\n\t\t\t\t\t\t{ selectedLevel === 'heading'\n\t\t\t\t\t\t\t? __( 'Text color for all heading levels' )\n\t\t\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t\t\t/* translators: %s: heading level (h1-h6) */\n\t\t\t\t\t\t\t\t\t__( 'Text color for %s' ),\n\t\t\t\t\t\t\t\t\tselectedLevel.toUpperCase()\n\t\t\t\t\t\t\t  ) }\n\t\t\t\t\t</h4>\n\t\t\t\t\t<ColorGradientControl\n\t\t\t\t\t\tclassName=\"edit-site-screen-heading-text-color__control\"\n\t\t\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t\tshowTitle={ false }\n\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\tcolorValue={ color }\n\t\t\t\t\t\tonColorChange={ setColor }\n\t\t\t\t\t\tclearable={ color === userColor }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ hasBackgroundColor && (\n\t\t\t\t<div className=\"edit-site-global-styles-screen-heading-color\">\n\t\t\t\t\t<h4>\n\t\t\t\t\t\t{ selectedLevel === 'heading'\n\t\t\t\t\t\t\t? __( 'Background color for all heading levels' )\n\t\t\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t\t\t/* translators: %s: heading level (h1-h6) */\n\t\t\t\t\t\t\t\t\t__( 'Background color for %s' ),\n\t\t\t\t\t\t\t\t\tselectedLevel.toUpperCase()\n\t\t\t\t\t\t\t  ) }\n\t\t\t\t\t</h4>\n\t\t\t\t\t<ColorGradientControl\n\t\t\t\t\t\tclassName=\"edit-site-screen-heading-background-color__control\"\n\t\t\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\t\t\tgradients={ gradientsPerOrigin }\n\t\t\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\t\t\tdisableCustomGradients={ ! areCustomGradientsEnabled }\n\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t\tshowTitle={ false }\n\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t{ ...controlProps }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default ScreenHeadingColor;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-heading-color.js"],"names":["ScreenHeadingColor","name","variationPath","selectedLevel","setCurrentTab","supports","solids","gradients","areCustomSolidsEnabled","areCustomGradientsEnabled","isTextEnabled","isBackgroundEnabled","colorsPerOrigin","gradientsPerOrigin","hasTextColor","includes","length","hasBackgroundColor","hasGradientColor","color","setColor","userColor","backgroundColor","setBackgroundColor","userBackgroundColor","gradient","setGradient","userGradient","backgroundSettings","colorValue","onColorChange","clearable","gradientSettings","gradientValue","onGradientChange","controlProps","toUpperCase"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { sprintf, __ } from '@wordpress/i18n';\nimport {\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n} from '@wordpress/components';\nimport { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport {\n\tgetSupportedGlobalStylesPanels,\n\tuseSetting,\n\tuseStyle,\n\tuseColorsPerOrigin,\n\tuseGradientsPerOrigin,\n} from './hooks';\n\nfunction ScreenHeadingColor( { name, variationPath = '' } ) {\n\tconst [ selectedLevel, setCurrentTab ] = useState( 'heading' );\n\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\tconst [ isTextEnabled ] = useSetting( 'color.text', name );\n\tconst [ isBackgroundEnabled ] = useSetting( 'color.background', name );\n\n\tconst colorsPerOrigin = useColorsPerOrigin( name );\n\tconst gradientsPerOrigin = useGradientsPerOrigin( name );\n\n\tconst hasTextColor =\n\t\tsupports.includes( 'color' ) &&\n\t\tisTextEnabled &&\n\t\t( solids.length > 0 || areCustomSolidsEnabled );\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\n\tconst [ color, setColor ] = useStyle(\n\t\tvariationPath + 'elements.' + selectedLevel + '.color.text',\n\t\tname\n\t);\n\tconst [ userColor ] = useStyle(\n\t\tvariationPath + 'elements.' + selectedLevel + '.color.text',\n\t\tname,\n\t\t'user'\n\t);\n\n\tconst [ backgroundColor, setBackgroundColor ] = useStyle(\n\t\tvariationPath + 'elements.' + selectedLevel + '.color.background',\n\t\tname\n\t);\n\tconst [ userBackgroundColor ] = useStyle(\n\t\tvariationPath + 'elements.' + selectedLevel + '.color.background',\n\t\tname,\n\t\t'user'\n\t);\n\tconst [ gradient, setGradient ] = useStyle(\n\t\tvariationPath + 'elements.' + selectedLevel + '.color.gradient',\n\t\tname\n\t);\n\tconst [ userGradient ] = useStyle(\n\t\tvariationPath + 'elements.' + selectedLevel + '.color.gradient',\n\t\tname,\n\t\t'user'\n\t);\n\n\tif ( ! hasTextColor && ! 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={ __( 'Headings' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Set the default color used for headings across the site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<div className=\"edit-site-global-styles-screen-heading-color\">\n\t\t\t\t<h4>{ __( 'Select heading level' ) }</h4>\n\n\t\t\t\t<ToggleGroupControl\n\t\t\t\t\tlabel={ __( 'Select heading level' ) }\n\t\t\t\t\thideLabelFromVision={ true }\n\t\t\t\t\tvalue={ selectedLevel }\n\t\t\t\t\tonChange={ setCurrentTab }\n\t\t\t\t\tisBlock\n\t\t\t\t>\n\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\tvalue=\"heading\"\n\t\t\t\t\t\t/* translators: 'All' refers to selecting all heading levels\n\t\t\t\t\t\tand applying the same style to h1-h6. */\n\t\t\t\t\t\tlabel={ __( 'All' ) }\n\t\t\t\t\t/>\n\t\t\t\t\t<ToggleGroupControlOption value=\"h1\" label={ __( 'H1' ) } />\n\t\t\t\t\t<ToggleGroupControlOption value=\"h2\" label={ __( 'H2' ) } />\n\t\t\t\t\t<ToggleGroupControlOption value=\"h3\" label={ __( 'H3' ) } />\n\t\t\t\t\t<ToggleGroupControlOption value=\"h4\" label={ __( 'H4' ) } />\n\t\t\t\t\t<ToggleGroupControlOption value=\"h5\" label={ __( 'H5' ) } />\n\t\t\t\t\t<ToggleGroupControlOption value=\"h6\" label={ __( 'H6' ) } />\n\t\t\t\t</ToggleGroupControl>\n\t\t\t</div>\n\t\t\t{ hasTextColor && (\n\t\t\t\t<div className=\"edit-site-global-styles-screen-heading-color\">\n\t\t\t\t\t<h4>\n\t\t\t\t\t\t{ selectedLevel === 'heading'\n\t\t\t\t\t\t\t? __( 'Text color for all heading levels' )\n\t\t\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t\t\t/* translators: %s: heading level (h1-h6) */\n\t\t\t\t\t\t\t\t\t__( 'Text color for %s' ),\n\t\t\t\t\t\t\t\t\tselectedLevel.toUpperCase()\n\t\t\t\t\t\t\t  ) }\n\t\t\t\t\t</h4>\n\t\t\t\t\t<ColorGradientControl\n\t\t\t\t\t\tclassName=\"edit-site-screen-heading-text-color__control\"\n\t\t\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\t\t\tshowTitle={ false }\n\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\tcolorValue={ color }\n\t\t\t\t\t\tonColorChange={ setColor }\n\t\t\t\t\t\tclearable={ color === userColor }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ hasBackgroundColor && (\n\t\t\t\t<div className=\"edit-site-global-styles-screen-heading-color\">\n\t\t\t\t\t<h4>\n\t\t\t\t\t\t{ selectedLevel === 'heading'\n\t\t\t\t\t\t\t? __( 'Background color for all heading levels' )\n\t\t\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t\t\t/* translators: %s: heading level (h1-h6) */\n\t\t\t\t\t\t\t\t\t__( 'Background color for %s' ),\n\t\t\t\t\t\t\t\t\tselectedLevel.toUpperCase()\n\t\t\t\t\t\t\t  ) }\n\t\t\t\t\t</h4>\n\t\t\t\t\t<ColorGradientControl\n\t\t\t\t\t\tclassName=\"edit-site-screen-heading-background-color__control\"\n\t\t\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\t\t\tgradients={ gradientsPerOrigin }\n\t\t\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\t\t\tdisableCustomGradients={ ! areCustomGradientsEnabled }\n\t\t\t\t\t\tshowTitle={ false }\n\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t{ ...controlProps }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default ScreenHeadingColor;\n"]}

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

@@ -15,6 +15,10 @@ var _dimensionsPanel = _interopRequireWildcard(require("./dimensions-panel"));
 
 var _header = _interopRequireDefault(require("./header"));
 
+var _blockPreviewPanel = _interopRequireDefault(require("./block-preview-panel"));
+
+var _utils = require("./utils");
+
 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; }
@@ -28,13 +32,19 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  */
 function ScreenLayout(_ref) {
   let {
-    name
+    name,
+    variationPath = ''
   } = _ref;
   const hasDimensionsPanel = (0, _dimensionsPanel.useHasDimensionsPanel)(name);
+  const variationClassName = (0, _utils.getVariationClassNameFromPath)(variationPath);
   return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
     title: (0, _i18n.__)('Layout')
+  }), (0, _element.createElement)(_blockPreviewPanel.default, {
+    name: name,
+    variation: variationClassName
   }), hasDimensionsPanel && (0, _element.createElement)(_dimensionsPanel.default, {
-    name: name
+    name: name,
+    variationPath: variationPath
   }));
 }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-layout.js"],"names":["ScreenLayout","name","hasDimensionsPanel"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;;;;;AATA;AACA;AACA;;AAGA;AACA;AACA;AAIA,SAASA,YAAT,OAAkC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACjC,QAAMC,kBAAkB,GAAG,4CAAuBD,IAAvB,CAA3B;AAEA,SACC,qDACC,4BAAC,eAAD;AAAc,IAAA,KAAK,EAAG,cAAI,QAAJ;AAAtB,IADD,EAEGC,kBAAkB,IAAI,4BAAC,wBAAD;AAAiB,IAAA,IAAI,EAAGD;AAAxB,IAFzB,CADD;AAMA;;eAEcD,Y","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport DimensionsPanel, { useHasDimensionsPanel } from './dimensions-panel';\nimport ScreenHeader from './header';\n\nfunction ScreenLayout( { name } ) {\n\tconst hasDimensionsPanel = useHasDimensionsPanel( name );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader title={ __( 'Layout' ) } />\n\t\t\t{ hasDimensionsPanel && <DimensionsPanel name={ name } /> }\n\t\t</>\n\t);\n}\n\nexport default ScreenLayout;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-layout.js"],"names":["ScreenLayout","name","variationPath","hasDimensionsPanel","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,kBAAkB,GAAG,4CAAuBF,IAAvB,CAA3B;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,kBAAkB,IACnB,4BAAC,wBAAD;AACC,IAAA,IAAI,EAAGF,IADR;AAEC,IAAA,aAAa,EAAGC;AAFjB,IAJF,CADD;AAYA;;eAEcF,Y","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport DimensionsPanel, { useHasDimensionsPanel } from './dimensions-panel';\nimport ScreenHeader from './header';\nimport BlockPreviewPanel from './block-preview-panel';\nimport { getVariationClassNameFromPath } from './utils';\n\nfunction ScreenLayout( { name, variationPath = '' } ) {\n\tconst hasDimensionsPanel = useHasDimensionsPanel( name );\n\tconst variationClassName = getVariationClassNameFromPath( variationPath );\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader title={ __( 'Layout' ) } />\n\t\t\t<BlockPreviewPanel name={ name } variation={ variationClassName } />\n\t\t\t{ hasDimensionsPanel && (\n\t\t\t\t<DimensionsPanel\n\t\t\t\t\tname={ name }\n\t\t\t\t\tvariationPath={ variationPath }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default ScreenLayout;\n"]}

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

@@ -28,7 +28,8 @@ var _hooks = require("./hooks");
  */
 function ScreenLinkColor(_ref) {
   let {
-    name
+    name,
+    variationPath = ''
   } = _ref;
   const supports = (0, _hooks.getSupportedGlobalStylesPanels)(name);
   const [solids] = (0, _hooks.useSetting)('color.palette', name);
@@ -39,15 +40,15 @@ function ScreenLinkColor(_ref) {
   const pseudoStates = {
     default: {
       label: (0, _i18n.__)('Default'),
-      value: (0, _hooks.useStyle)('elements.link.color.text', name)[0],
-      handler: (0, _hooks.useStyle)('elements.link.color.text', name)[1],
-      userValue: (0, _hooks.useStyle)('elements.link.color.text', name, 'user')[0]
+      value: (0, _hooks.useStyle)(variationPath + 'elements.link.color.text', name)[0],
+      handler: (0, _hooks.useStyle)(variationPath + 'elements.link.color.text', name)[1],
+      userValue: (0, _hooks.useStyle)(variationPath + 'elements.link.color.text', name, 'user')[0]
     },
     hover: {
       label: (0, _i18n.__)('Hover'),
-      value: (0, _hooks.useStyle)('elements.link.:hover.color.text', name)[0],
-      handler: (0, _hooks.useStyle)('elements.link.:hover.color.text', name)[1],
-      userValue: (0, _hooks.useStyle)('elements.link.:hover.color.text', name, 'user')[0]
+      value: (0, _hooks.useStyle)(variationPath + 'elements.link.:hover.color.text', name)[0],
+      handler: (0, _hooks.useStyle)(variationPath + 'elements.link.:hover.color.text', name)[1],
+      userValue: (0, _hooks.useStyle)(variationPath + 'elements.link.:hover.color.text', name, 'user')[0]
     }
   };
 
@@ -81,7 +82,6 @@ function ScreenLinkColor(_ref) {
       className: "edit-site-screen-link-color__control",
       colors: colorsPerOrigin,
       disableCustomColors: !areCustomSolidsEnabled,
-      __experimentalHasMultipleOrigins: true,
       showTitle: false,
       enableAlpha: true,
       __experimentalIsRenderedInSidebar: true,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-link-color.js"],"names":["ScreenLinkColor","name","supports","solids","areCustomSolidsEnabled","colorsPerOrigin","isLinkEnabled","hasLinkColor","includes","length","pseudoStates","default","label","value","handler","userValue","hover","tabs","Object","entries","map","selector","config","title","className","tab","pseudoSelectorConfig"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';\nimport { TabPanel } from '@wordpress/components';\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport {\n\tgetSupportedGlobalStylesPanels,\n\tuseSetting,\n\tuseStyle,\n\tuseColorsPerOrigin,\n} from './hooks';\n\nfunction ScreenLinkColor( { name } ) {\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 [ isLinkEnabled ] = useSetting( 'color.link', name );\n\n\tconst hasLinkColor =\n\t\tsupports.includes( 'linkColor' ) &&\n\t\tisLinkEnabled &&\n\t\t( solids.length > 0 || areCustomSolidsEnabled );\n\n\tconst pseudoStates = {\n\t\tdefault: {\n\t\t\tlabel: __( 'Default' ),\n\t\t\tvalue: useStyle( 'elements.link.color.text', name )[ 0 ],\n\t\t\thandler: useStyle( 'elements.link.color.text', name )[ 1 ],\n\t\t\tuserValue: useStyle(\n\t\t\t\t'elements.link.color.text',\n\t\t\t\tname,\n\t\t\t\t'user'\n\t\t\t)[ 0 ],\n\t\t},\n\t\thover: {\n\t\t\tlabel: __( 'Hover' ),\n\t\t\tvalue: useStyle( 'elements.link.:hover.color.text', name )[ 0 ],\n\t\t\thandler: useStyle( 'elements.link.:hover.color.text', name )[ 1 ],\n\t\t\tuserValue: useStyle(\n\t\t\t\t'elements.link.:hover.color.text',\n\t\t\t\tname,\n\t\t\t\t'user'\n\t\t\t)[ 0 ],\n\t\t},\n\t};\n\n\tif ( ! hasLinkColor ) {\n\t\treturn null;\n\t}\n\n\tconst tabs = Object.entries( pseudoStates ).map(\n\t\t( [ selector, config ] ) => {\n\t\t\treturn {\n\t\t\t\tname: selector,\n\t\t\t\ttitle: config.label,\n\t\t\t\tclassName: `color-text-${ selector }`,\n\t\t\t};\n\t\t}\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Links' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Set the colors used for links across the site.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<TabPanel tabs={ tabs }>\n\t\t\t\t{ ( tab ) => {\n\t\t\t\t\tconst pseudoSelectorConfig =\n\t\t\t\t\t\tpseudoStates[ tab.name ] ?? null;\n\n\t\t\t\t\tif ( ! pseudoSelectorConfig ) {\n\t\t\t\t\t\treturn null;\n\t\t\t\t\t}\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<ColorGradientControl\n\t\t\t\t\t\t\t\tclassName=\"edit-site-screen-link-color__control\"\n\t\t\t\t\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\t\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t\t\t\tshowTitle={ false }\n\t\t\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\t\tcolorValue={ pseudoSelectorConfig.value }\n\t\t\t\t\t\t\t\tonColorChange={ pseudoSelectorConfig.handler }\n\t\t\t\t\t\t\t\tclearable={\n\t\t\t\t\t\t\t\t\tpseudoSelectorConfig.value ===\n\t\t\t\t\t\t\t\t\tpseudoSelectorConfig.userValue\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</>\n\t\t\t\t\t);\n\t\t\t\t} }\n\t\t\t</TabPanel>\n\t\t</>\n\t);\n}\n\nexport default ScreenLinkColor;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-link-color.js"],"names":["ScreenLinkColor","name","variationPath","supports","solids","areCustomSolidsEnabled","colorsPerOrigin","isLinkEnabled","hasLinkColor","includes","length","pseudoStates","default","label","value","handler","userValue","hover","tabs","Object","entries","map","selector","config","title","className","tab","pseudoSelectorConfig"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';\nimport { TabPanel } from '@wordpress/components';\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport {\n\tgetSupportedGlobalStylesPanels,\n\tuseSetting,\n\tuseStyle,\n\tuseColorsPerOrigin,\n} from './hooks';\n\nfunction ScreenLinkColor( { 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 [ isLinkEnabled ] = useSetting( 'color.link', name );\n\n\tconst hasLinkColor =\n\t\tsupports.includes( 'linkColor' ) &&\n\t\tisLinkEnabled &&\n\t\t( solids.length > 0 || areCustomSolidsEnabled );\n\n\tconst pseudoStates = {\n\t\tdefault: {\n\t\t\tlabel: __( 'Default' ),\n\t\t\tvalue: useStyle(\n\t\t\t\tvariationPath + 'elements.link.color.text',\n\t\t\t\tname\n\t\t\t)[ 0 ],\n\t\t\thandler: useStyle(\n\t\t\t\tvariationPath + 'elements.link.color.text',\n\t\t\t\tname\n\t\t\t)[ 1 ],\n\t\t\tuserValue: useStyle(\n\t\t\t\tvariationPath + 'elements.link.color.text',\n\t\t\t\tname,\n\t\t\t\t'user'\n\t\t\t)[ 0 ],\n\t\t},\n\t\thover: {\n\t\t\tlabel: __( 'Hover' ),\n\t\t\tvalue: useStyle(\n\t\t\t\tvariationPath + 'elements.link.:hover.color.text',\n\t\t\t\tname\n\t\t\t)[ 0 ],\n\t\t\thandler: useStyle(\n\t\t\t\tvariationPath + 'elements.link.:hover.color.text',\n\t\t\t\tname\n\t\t\t)[ 1 ],\n\t\t\tuserValue: useStyle(\n\t\t\t\tvariationPath + 'elements.link.:hover.color.text',\n\t\t\t\tname,\n\t\t\t\t'user'\n\t\t\t)[ 0 ],\n\t\t},\n\t};\n\n\tif ( ! hasLinkColor ) {\n\t\treturn null;\n\t}\n\n\tconst tabs = Object.entries( pseudoStates ).map(\n\t\t( [ selector, config ] ) => {\n\t\t\treturn {\n\t\t\t\tname: selector,\n\t\t\t\ttitle: config.label,\n\t\t\t\tclassName: `color-text-${ selector }`,\n\t\t\t};\n\t\t}\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Links' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Set the colors used for links across the site.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<TabPanel tabs={ tabs }>\n\t\t\t\t{ ( tab ) => {\n\t\t\t\t\tconst pseudoSelectorConfig =\n\t\t\t\t\t\tpseudoStates[ tab.name ] ?? null;\n\n\t\t\t\t\tif ( ! pseudoSelectorConfig ) {\n\t\t\t\t\t\treturn null;\n\t\t\t\t\t}\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<ColorGradientControl\n\t\t\t\t\t\t\t\tclassName=\"edit-site-screen-link-color__control\"\n\t\t\t\t\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\t\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\t\t\t\t\tshowTitle={ false }\n\t\t\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\t\tcolorValue={ pseudoSelectorConfig.value }\n\t\t\t\t\t\t\t\tonColorChange={ pseudoSelectorConfig.handler }\n\t\t\t\t\t\t\t\tclearable={\n\t\t\t\t\t\t\t\t\tpseudoSelectorConfig.value ===\n\t\t\t\t\t\t\t\t\tpseudoSelectorConfig.userValue\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</>\n\t\t\t\t\t);\n\t\t\t\t} }\n\t\t\t</TabPanel>\n\t\t</>\n\t);\n}\n\nexport default ScreenLinkColor;\n"]}

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

@@ -35,6 +35,8 @@ var _preview = _interopRequireDefault(require("./preview"));
  * Internal dependencies
  */
 function ScreenRoot() {
+  var _window;
+
   const {
     variations
   } = (0, _data.useSelect)(select => {
@@ -42,6 +44,9 @@ function ScreenRoot() {
       variations: select(_coreData.store).__experimentalGetCurrentThemeGlobalStylesVariations()
     };
   }, []);
+
+  const __experimentalGlobalStylesCustomCSS = (_window = window) === null || _window === void 0 ? void 0 : _window.__experimentalEnableGlobalStylesCustomCSS;
+
   return (0, _element.createElement)(_components.Card, {
     size: "small"
   }, (0, _element.createElement)(_components.CardBody, null, (0, _element.createElement)(_components.__experimentalVStack, {
@@ -71,7 +76,7 @@ function ScreenRoot() {
     justify: "space-between"
   }, (0, _element.createElement)(_components.FlexItem, null, (0, _i18n.__)('Blocks')), (0, _element.createElement)(_iconWithCurrentColor.IconWithCurrentColor, {
     icon: (0, _i18n.isRTL)() ? _icons.chevronLeft : _icons.chevronRight
-  }))))), (0, _element.createElement)(_components.CardDivider, null), (0, _element.createElement)(_components.CardBody, null, (0, _element.createElement)(_components.__experimentalSpacer, {
+  }))))), __experimentalGlobalStylesCustomCSS && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.CardDivider, null), (0, _element.createElement)(_components.CardBody, null, (0, _element.createElement)(_components.__experimentalSpacer, {
     as: "p",
     paddingTop: 2,
     paddingX: "13px",
@@ -83,7 +88,7 @@ function ScreenRoot() {
     justify: "space-between"
   }, (0, _element.createElement)(_components.FlexItem, null, (0, _i18n.__)('Custom')), (0, _element.createElement)(_iconWithCurrentColor.IconWithCurrentColor, {
     icon: (0, _i18n.isRTL)() ? _icons.chevronLeft : _icons.chevronRight
-  }))))));
+  })))))));
 }
 
 var _default = ScreenRoot;

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-root.js"],"names":["ScreenRoot","variations","select","coreStore","__experimentalGetCurrentThemeGlobalStylesVariations","length","chevronLeft","chevronRight"],"mappings":";;;;;;;;;;;AAGA;;AAWA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AAzBA;AACA;AACA;;AAiBA;AACA;AACA;AAMA,SAASA,UAAT,GAAsB;AACrB,QAAM;AAAEC,IAAAA;AAAF,MAAiB,qBAAaC,MAAF,IAAc;AAC/C,WAAO;AACND,MAAAA,UAAU,EACTC,MAAM,CACLC,eADK,CAAN,CAEEC,mDAFF;AAFK,KAAP;AAMA,GAPsB,EAOpB,EAPoB,CAAvB;AASA,SACC,4BAAC,gBAAD;AAAM,IAAA,IAAI,EAAC;AAAX,KACC,4BAAC,oBAAD,QACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,4BAAC,gBAAD,QACC,4BAAC,qBAAD,QACC,4BAAC,gBAAD,OADD,CADD,CADD,EAMG,CAAC,EAAEH,UAAF,aAAEA,UAAF,eAAEA,UAAU,CAAEI,MAAd,CAAD,IACD,4BAAC,mCAAD,QACC,4BAAC,wCAAD;AACC,IAAA,IAAI,EAAC,aADN;AAEC,kBAAa,cAAI,eAAJ;AAFd,KAIC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,4BAAC,oBAAD,QACG,cAAI,eAAJ,CADH,CADD,EAIC,4BAAC,0CAAD;AACC,IAAA,IAAI,EACH,qBAAUC,kBAAV,GAAwBC;AAF1B,IAJD,CAJD,CADD,CAPF,EAyBC,4BAAC,oBAAD,OAzBD,CADD,CADD,EA+BC,4BAAC,uBAAD,OA/BD,EAiCC,4BAAC,oBAAD,QACC,4BAAC,gCAAD;AACC,IAAA,EAAE,EAAC,GADJ;AAEC,IAAA,UAAU,EAAG;AACb;AACL;AACA;AACA;AACA;AAPI;AAQC,IAAA,QAAQ,EAAC,MARV;AASC,IAAA,YAAY,EAAG;AAThB,KAWG,cACD,iEADC,CAXH,CADD,EAgBC,4BAAC,mCAAD,QACC,4BAAC,wCAAD;AACC,IAAA,IAAI,EAAC,SADN;AAEC,kBAAa,cAAI,eAAJ;AAFd,KAIC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,4BAAC,oBAAD,QAAY,cAAI,QAAJ,CAAZ,CADD,EAEC,4BAAC,0CAAD;AACC,IAAA,IAAI,EAAG,qBAAUD,kBAAV,GAAwBC;AADhC,IAFD,CAJD,CADD,CAhBD,CAjCD,EAgEC,4BAAC,uBAAD,OAhED,EAkEC,4BAAC,oBAAD,QACC,4BAAC,gCAAD;AACC,IAAA,EAAE,EAAC,GADJ;AAEC,IAAA,UAAU,EAAG,CAFd;AAGC,IAAA,QAAQ,EAAC,MAHV;AAIC,IAAA,YAAY,EAAG;AAJhB,KAMG,cACD,uEADC,CANH,CADD,EAWC,4BAAC,mCAAD,QACC,4BAAC,wCAAD;AACC,IAAA,IAAI,EAAC,MADN;AAEC,kBAAa,cAAI,gBAAJ;AAFd,KAIC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,4BAAC,oBAAD,QAAY,cAAI,QAAJ,CAAZ,CADD,EAEC,4BAAC,0CAAD;AACC,IAAA,IAAI,EAAG,qBAAUD,kBAAV,GAAwBC;AADhC,IAFD,CAJD,CADD,CAXD,CAlED,CADD;AA8FA;;eAEcP,U","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalHStack as HStack,\n\t__experimentalSpacer as Spacer,\n\t__experimentalVStack as VStack,\n\tFlexItem,\n\tCardBody,\n\tCard,\n\tCardDivider,\n\tCardMedia,\n} from '@wordpress/components';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { chevronLeft, chevronRight } from '@wordpress/icons';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { IconWithCurrentColor } from './icon-with-current-color';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport ContextMenu from './context-menu';\nimport StylesPreview from './preview';\n\nfunction ScreenRoot() {\n\tconst { variations } = useSelect( ( select ) => {\n\t\treturn {\n\t\t\tvariations:\n\t\t\t\tselect(\n\t\t\t\t\tcoreStore\n\t\t\t\t).__experimentalGetCurrentThemeGlobalStylesVariations(),\n\t\t};\n\t}, [] );\n\n\treturn (\n\t\t<Card size=\"small\">\n\t\t\t<CardBody>\n\t\t\t\t<VStack spacing={ 4 }>\n\t\t\t\t\t<Card>\n\t\t\t\t\t\t<CardMedia>\n\t\t\t\t\t\t\t<StylesPreview />\n\t\t\t\t\t\t</CardMedia>\n\t\t\t\t\t</Card>\n\t\t\t\t\t{ !! variations?.length && (\n\t\t\t\t\t\t<ItemGroup>\n\t\t\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\t\t\tpath=\"/variations\"\n\t\t\t\t\t\t\t\taria-label={ __( 'Browse styles' ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Browse styles' ) }\n\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t<IconWithCurrentColor\n\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\tisRTL() ? chevronLeft : chevronRight\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t) }\n\t\t\t\t\t<ContextMenu />\n\t\t\t\t</VStack>\n\t\t\t</CardBody>\n\n\t\t\t<CardDivider />\n\n\t\t\t<CardBody>\n\t\t\t\t<Spacer\n\t\t\t\t\tas=\"p\"\n\t\t\t\t\tpaddingTop={ 2 }\n\t\t\t\t\t/*\n\t\t\t\t\t * 13px matches the text inset of the NavigationButton (12px padding, plus the width of the button's border).\n\t\t\t\t\t * This is an ad hoc override for this instance and the Addtional CSS option below. Other options for matching the\n\t\t\t\t\t * the nav button inset should be looked at before reusing further.\n\t\t\t\t\t */\n\t\t\t\t\tpaddingX=\"13px\"\n\t\t\t\t\tmarginBottom={ 4 }\n\t\t\t\t>\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'Customize the appearance of specific blocks for the whole site.'\n\t\t\t\t\t) }\n\t\t\t\t</Spacer>\n\t\t\t\t<ItemGroup>\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\tpath=\"/blocks\"\n\t\t\t\t\t\taria-label={ __( 'Blocks styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t<FlexItem>{ __( 'Blocks' ) }</FlexItem>\n\t\t\t\t\t\t\t<IconWithCurrentColor\n\t\t\t\t\t\t\t\ticon={ isRTL() ? chevronLeft : chevronRight }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t</ItemGroup>\n\t\t\t</CardBody>\n\n\t\t\t<CardDivider />\n\n\t\t\t<CardBody>\n\t\t\t\t<Spacer\n\t\t\t\t\tas=\"p\"\n\t\t\t\t\tpaddingTop={ 2 }\n\t\t\t\t\tpaddingX=\"13px\"\n\t\t\t\t\tmarginBottom={ 4 }\n\t\t\t\t>\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'Add your own CSS to customize the appearance and layout of your site.'\n\t\t\t\t\t) }\n\t\t\t\t</Spacer>\n\t\t\t\t<ItemGroup>\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\tpath=\"/css\"\n\t\t\t\t\t\taria-label={ __( 'Additional CSS' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t<FlexItem>{ __( 'Custom' ) }</FlexItem>\n\t\t\t\t\t\t\t<IconWithCurrentColor\n\t\t\t\t\t\t\t\ticon={ isRTL() ? chevronLeft : chevronRight }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t</ItemGroup>\n\t\t\t</CardBody>\n\t\t</Card>\n\t);\n}\n\nexport default ScreenRoot;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-root.js"],"names":["ScreenRoot","variations","select","coreStore","__experimentalGetCurrentThemeGlobalStylesVariations","__experimentalGlobalStylesCustomCSS","window","__experimentalEnableGlobalStylesCustomCSS","length","chevronLeft","chevronRight"],"mappings":";;;;;;;;;;;AAGA;;AAWA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AAzBA;AACA;AACA;;AAiBA;AACA;AACA;AAMA,SAASA,UAAT,GAAsB;AAAA;;AACrB,QAAM;AAAEC,IAAAA;AAAF,MAAiB,qBAAaC,MAAF,IAAc;AAC/C,WAAO;AACND,MAAAA,UAAU,EACTC,MAAM,CACLC,eADK,CAAN,CAEEC,mDAFF;AAFK,KAAP;AAMA,GAPsB,EAOpB,EAPoB,CAAvB;;AASA,QAAMC,mCAAmC,cACxCC,MADwC,4CACxC,QAAQC,yCADT;;AAEA,SACC,4BAAC,gBAAD;AAAM,IAAA,IAAI,EAAC;AAAX,KACC,4BAAC,oBAAD,QACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,4BAAC,gBAAD,QACC,4BAAC,qBAAD,QACC,4BAAC,gBAAD,OADD,CADD,CADD,EAMG,CAAC,EAAEN,UAAF,aAAEA,UAAF,eAAEA,UAAU,CAAEO,MAAd,CAAD,IACD,4BAAC,mCAAD,QACC,4BAAC,wCAAD;AACC,IAAA,IAAI,EAAC,aADN;AAEC,kBAAa,cAAI,eAAJ;AAFd,KAIC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,4BAAC,oBAAD,QACG,cAAI,eAAJ,CADH,CADD,EAIC,4BAAC,0CAAD;AACC,IAAA,IAAI,EACH,qBAAUC,kBAAV,GAAwBC;AAF1B,IAJD,CAJD,CADD,CAPF,EAyBC,4BAAC,oBAAD,OAzBD,CADD,CADD,EA+BC,4BAAC,uBAAD,OA/BD,EAiCC,4BAAC,oBAAD,QACC,4BAAC,gCAAD;AACC,IAAA,EAAE,EAAC,GADJ;AAEC,IAAA,UAAU,EAAG;AACb;AACL;AACA;AACA;AACA;AAPI;AAQC,IAAA,QAAQ,EAAC,MARV;AASC,IAAA,YAAY,EAAG;AAThB,KAWG,cACD,iEADC,CAXH,CADD,EAgBC,4BAAC,mCAAD,QACC,4BAAC,wCAAD;AACC,IAAA,IAAI,EAAC,SADN;AAEC,kBAAa,cAAI,eAAJ;AAFd,KAIC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,4BAAC,oBAAD,QAAY,cAAI,QAAJ,CAAZ,CADD,EAEC,4BAAC,0CAAD;AACC,IAAA,IAAI,EAAG,qBAAUD,kBAAV,GAAwBC;AADhC,IAFD,CAJD,CADD,CAhBD,CAjCD,EAgEGL,mCAAmC,IACpC,qDACC,4BAAC,uBAAD,OADD,EAEC,4BAAC,oBAAD,QACC,4BAAC,gCAAD;AACC,IAAA,EAAE,EAAC,GADJ;AAEC,IAAA,UAAU,EAAG,CAFd;AAGC,IAAA,QAAQ,EAAC,MAHV;AAIC,IAAA,YAAY,EAAG;AAJhB,KAMG,cACD,uEADC,CANH,CADD,EAWC,4BAAC,mCAAD,QACC,4BAAC,wCAAD;AACC,IAAA,IAAI,EAAC,MADN;AAEC,kBAAa,cAAI,gBAAJ;AAFd,KAIC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,4BAAC,oBAAD,QAAY,cAAI,QAAJ,CAAZ,CADD,EAEC,4BAAC,0CAAD;AACC,IAAA,IAAI,EACH,qBAAUI,kBAAV,GAAwBC;AAF1B,IAFD,CAJD,CADD,CAXD,CAFD,CAjEF,CADD;AAmGA;;eAEcV,U","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalHStack as HStack,\n\t__experimentalSpacer as Spacer,\n\t__experimentalVStack as VStack,\n\tFlexItem,\n\tCardBody,\n\tCard,\n\tCardDivider,\n\tCardMedia,\n} from '@wordpress/components';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { chevronLeft, chevronRight } from '@wordpress/icons';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { IconWithCurrentColor } from './icon-with-current-color';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport ContextMenu from './context-menu';\nimport StylesPreview from './preview';\n\nfunction ScreenRoot() {\n\tconst { variations } = useSelect( ( select ) => {\n\t\treturn {\n\t\t\tvariations:\n\t\t\t\tselect(\n\t\t\t\t\tcoreStore\n\t\t\t\t).__experimentalGetCurrentThemeGlobalStylesVariations(),\n\t\t};\n\t}, [] );\n\n\tconst __experimentalGlobalStylesCustomCSS =\n\t\twindow?.__experimentalEnableGlobalStylesCustomCSS;\n\treturn (\n\t\t<Card size=\"small\">\n\t\t\t<CardBody>\n\t\t\t\t<VStack spacing={ 4 }>\n\t\t\t\t\t<Card>\n\t\t\t\t\t\t<CardMedia>\n\t\t\t\t\t\t\t<StylesPreview />\n\t\t\t\t\t\t</CardMedia>\n\t\t\t\t\t</Card>\n\t\t\t\t\t{ !! variations?.length && (\n\t\t\t\t\t\t<ItemGroup>\n\t\t\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\t\t\tpath=\"/variations\"\n\t\t\t\t\t\t\t\taria-label={ __( 'Browse styles' ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Browse styles' ) }\n\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t<IconWithCurrentColor\n\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\tisRTL() ? chevronLeft : chevronRight\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t) }\n\t\t\t\t\t<ContextMenu />\n\t\t\t\t</VStack>\n\t\t\t</CardBody>\n\n\t\t\t<CardDivider />\n\n\t\t\t<CardBody>\n\t\t\t\t<Spacer\n\t\t\t\t\tas=\"p\"\n\t\t\t\t\tpaddingTop={ 2 }\n\t\t\t\t\t/*\n\t\t\t\t\t * 13px matches the text inset of the NavigationButton (12px padding, plus the width of the button's border).\n\t\t\t\t\t * This is an ad hoc override for this instance and the Addtional CSS option below. Other options for matching the\n\t\t\t\t\t * the nav button inset should be looked at before reusing further.\n\t\t\t\t\t */\n\t\t\t\t\tpaddingX=\"13px\"\n\t\t\t\t\tmarginBottom={ 4 }\n\t\t\t\t>\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'Customize the appearance of specific blocks for the whole site.'\n\t\t\t\t\t) }\n\t\t\t\t</Spacer>\n\t\t\t\t<ItemGroup>\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\tpath=\"/blocks\"\n\t\t\t\t\t\taria-label={ __( 'Blocks styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t<FlexItem>{ __( 'Blocks' ) }</FlexItem>\n\t\t\t\t\t\t\t<IconWithCurrentColor\n\t\t\t\t\t\t\t\ticon={ isRTL() ? chevronLeft : chevronRight }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t</ItemGroup>\n\t\t\t</CardBody>\n\n\t\t\t{ __experimentalGlobalStylesCustomCSS && (\n\t\t\t\t<>\n\t\t\t\t\t<CardDivider />\n\t\t\t\t\t<CardBody>\n\t\t\t\t\t\t<Spacer\n\t\t\t\t\t\t\tas=\"p\"\n\t\t\t\t\t\t\tpaddingTop={ 2 }\n\t\t\t\t\t\t\tpaddingX=\"13px\"\n\t\t\t\t\t\t\tmarginBottom={ 4 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t'Add your own CSS to customize the appearance and layout of your site.'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t\t<ItemGroup>\n\t\t\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\t\t\tpath=\"/css\"\n\t\t\t\t\t\t\t\taria-label={ __( 'Additional CSS' ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t\t\t<FlexItem>{ __( 'Custom' ) }</FlexItem>\n\t\t\t\t\t\t\t\t\t<IconWithCurrentColor\n\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\tisRTL() ? chevronLeft : chevronRight\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t</CardBody>\n\t\t\t\t</>\n\t\t\t) }\n\t\t</Card>\n\t);\n}\n\nexport default ScreenRoot;\n"]}

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

@@ -26,7 +26,8 @@ var _hooks = require("./hooks");
  */
 function ScreenTextColor(_ref) {
   let {
-    name
+    name,
+    variationPath = ''
   } = _ref;
   const supports = (0, _hooks.getSupportedGlobalStylesPanels)(name);
   const [solids] = (0, _hooks.useSetting)('color.palette', name);
@@ -34,8 +35,8 @@ function ScreenTextColor(_ref) {
   const [isTextEnabled] = (0, _hooks.useSetting)('color.text', name);
   const colorsPerOrigin = (0, _hooks.useColorsPerOrigin)(name);
   const hasTextColor = supports.includes('color') && isTextEnabled && (solids.length > 0 || areCustomSolidsEnabled);
-  const [color, setColor] = (0, _hooks.useStyle)('color.text', name);
-  const [userColor] = (0, _hooks.useStyle)('color.text', name, 'user');
+  const [color, setColor] = (0, _hooks.useStyle)(variationPath + 'color.text', name);
+  const [userColor] = (0, _hooks.useStyle)(variationPath + 'color.text', name, 'user');
 
   if (!hasTextColor) {
     return null;
@@ -48,7 +49,6 @@ function ScreenTextColor(_ref) {
     className: "edit-site-screen-text-color__control",
     colors: colorsPerOrigin,
     disableCustomColors: !areCustomSolidsEnabled,
-    __experimentalHasMultipleOrigins: true,
     showTitle: false,
     enableAlpha: true,
     __experimentalIsRenderedInSidebar: true,