@wordpress/edit-site 3.0.26 → 3.1.0

package/build-module/components/global-styles/palette.js

@@ -11,7 +11,7 @@ import { useMemo } from '@wordpress/element';
  */
 
 import Subtitle from './subtitle';
-import NavigationButton from './navigation-button';
+import { NavigationButton } from './navigation-button';
 import { useSetting } from './hooks';
 const EMPTY_COLORS = [];
 

package/build-module/components/global-styles/palette.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/palette.js"],"names":["__experimentalItemGroup","ItemGroup","FlexItem","__experimentalHStack","HStack","__experimentalZStack","ZStack","__experimentalVStack","VStack","FlexBlock","ColorIndicator","__","_n","sprintf","useMemo","Subtitle","NavigationButton","useSetting","EMPTY_COLORS","Palette","name","customColors","themeColors","defaultColors","defaultPaletteEnabled","colors","screenPath","paletteButtonText","length","slice","map","color"],"mappings":";;AAAA;AACA;AACA;AACA,SACCA,uBAAuB,IAAIC,SAD5B,EAECC,QAFD,EAGCC,oBAAoB,IAAIC,MAHzB,EAICC,oBAAoB,IAAIC,MAJzB,EAKCC,oBAAoB,IAAIC,MALzB,EAMCC,SAND,EAOCC,cAPD,QAQO,uBARP;AASA,SAASC,EAAT,EAAaC,EAAb,EAAiBC,OAAjB,QAAgC,iBAAhC;AACA,SAASC,OAAT,QAAwB,oBAAxB;AAEA;AACA;AACA;;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,gBAAP,MAA6B,qBAA7B;AACA,SAASC,UAAT,QAA2B,SAA3B;AAEA,MAAMC,YAAY,GAAG,EAArB;;AAEA,SAASC,OAAT,OAA6B;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AAC5B,QAAM,CAAEC,YAAF,IAAmBJ,UAAU,CAAE,sBAAF,CAAnC;AACA,QAAM,CAAEK,WAAF,IAAkBL,UAAU,CAAE,qBAAF,CAAlC;AACA,QAAM,CAAEM,aAAF,IAAoBN,UAAU,CAAE,uBAAF,CAApC;AAEA,QAAM,CAAEO,qBAAF,IAA4BP,UAAU,CAC3C,sBAD2C,EAE3CG,IAF2C,CAA5C;AAIA,QAAMK,MAAM,GAAGX,OAAO,CACrB,MAAM,CACL,IAAKO,YAAY,IAAIH,YAArB,CADK,EAEL,IAAKI,WAAW,IAAIJ,YAApB,CAFK,EAGL,IAAKK,aAAa,IAAIC,qBAAjB,GACFD,aADE,GAEFL,YAFH,CAHK,CADe,EAQrB,CAAEG,YAAF,EAAgBC,WAAhB,EAA6BC,aAA7B,EAA4CC,qBAA5C,CARqB,CAAtB;AAWA,QAAME,UAAU,GAAG,CAAEN,IAAF,GAChB,iBADgB,GAEhB,aAAaA,IAAb,GAAoB,iBAFvB;AAGA,QAAMO,iBAAiB,GACtBF,MAAM,CAACG,MAAP,GAAgB,CAAhB,GACGf,OAAO,EACP;AACAD,EAAAA,EAAE,CAAE,UAAF,EAAc,WAAd,EAA2Ba,MAAM,CAACG,MAAlC,CAFK,EAGPH,MAAM,CAACG,MAHA,CADV,GAMGjB,EAAE,CAAE,mBAAF,CAPN;AASA,SACC,cAAC,MAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,cAAC,QAAD,QAAYA,EAAE,CAAE,SAAF,CAAd,CADD,EAEC,cAAC,SAAD;AAAW,IAAA,UAAU,MAArB;AAAsB,IAAA,WAAW;AAAjC,KACC,cAAC,gBAAD;AAAkB,IAAA,IAAI,EAAGe;AAAzB,KACC,cAAC,MAAD;AAAQ,IAAA,UAAU,EAAGD,MAAM,CAACG,MAAP,KAAkB;AAAvC,KACC,cAAC,SAAD,QACC,cAAC,MAAD;AAAQ,IAAA,SAAS,EAAG,KAApB;AAA4B,IAAA,MAAM,EAAG,CAAC;AAAtC,KACGH,MAAM,CAACI,KAAP,CAAc,CAAd,EAAiB,CAAjB,EAAqBC,GAArB,CAA0B;AAAA,QAAE;AAAEC,MAAAA;AAAF,KAAF;AAAA,WAC3B,cAAC,cAAD;AACC,MAAA,GAAG,EAAGA,KADP;AAEC,MAAA,UAAU,EAAGA;AAFd,MAD2B;AAAA,GAA1B,CADH,CADD,CADD,EAWC,cAAC,QAAD,QAAYJ,iBAAZ,CAXD,CADD,CADD,CAFD,CADD;AAsBA;;AAED,eAAeR,OAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\tFlexItem,\n\t__experimentalHStack as HStack,\n\t__experimentalZStack as ZStack,\n\t__experimentalVStack as VStack,\n\tFlexBlock,\n\tColorIndicator,\n} from '@wordpress/components';\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Subtitle from './subtitle';\nimport NavigationButton from './navigation-button';\nimport { useSetting } from './hooks';\n\nconst EMPTY_COLORS = [];\n\nfunction Palette( { name } ) {\n\tconst [ customColors ] = useSetting( 'color.palette.custom' );\n\tconst [ themeColors ] = useSetting( 'color.palette.theme' );\n\tconst [ defaultColors ] = useSetting( 'color.palette.default' );\n\n\tconst [ defaultPaletteEnabled ] = useSetting(\n\t\t'color.defaultPalette',\n\t\tname\n\t);\n\tconst colors = useMemo(\n\t\t() => [\n\t\t\t...( customColors || EMPTY_COLORS ),\n\t\t\t...( themeColors || EMPTY_COLORS ),\n\t\t\t...( defaultColors && defaultPaletteEnabled\n\t\t\t\t? defaultColors\n\t\t\t\t: EMPTY_COLORS ),\n\t\t],\n\t\t[ customColors, themeColors, defaultColors, defaultPaletteEnabled ]\n\t);\n\n\tconst screenPath = ! name\n\t\t? '/colors/palette'\n\t\t: '/blocks/' + name + '/colors/palette';\n\tconst paletteButtonText =\n\t\tcolors.length > 0\n\t\t\t? sprintf(\n\t\t\t\t\t// Translators: %d: Number of palette colors.\n\t\t\t\t\t_n( '%d color', '%d colors', colors.length ),\n\t\t\t\t\tcolors.length\n\t\t\t  )\n\t\t\t: __( 'Add custom colors' );\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<Subtitle>{ __( 'Palette' ) }</Subtitle>\n\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t<NavigationButton path={ screenPath }>\n\t\t\t\t\t<HStack isReversed={ colors.length === 0 }>\n\t\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t\t<ZStack isLayered={ false } offset={ -8 }>\n\t\t\t\t\t\t\t\t{ colors.slice( 0, 5 ).map( ( { color } ) => (\n\t\t\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\t\t\tkey={ color }\n\t\t\t\t\t\t\t\t\t\tcolorValue={ color }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t</ZStack>\n\t\t\t\t\t\t</FlexBlock>\n\t\t\t\t\t\t<FlexItem>{ paletteButtonText }</FlexItem>\n\t\t\t\t\t</HStack>\n\t\t\t\t</NavigationButton>\n\t\t\t</ItemGroup>\n\t\t</VStack>\n\t);\n}\n\nexport default Palette;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/palette.js"],"names":["__experimentalItemGroup","ItemGroup","FlexItem","__experimentalHStack","HStack","__experimentalZStack","ZStack","__experimentalVStack","VStack","FlexBlock","ColorIndicator","__","_n","sprintf","useMemo","Subtitle","NavigationButton","useSetting","EMPTY_COLORS","Palette","name","customColors","themeColors","defaultColors","defaultPaletteEnabled","colors","screenPath","paletteButtonText","length","slice","map","color"],"mappings":";;AAAA;AACA;AACA;AACA,SACCA,uBAAuB,IAAIC,SAD5B,EAECC,QAFD,EAGCC,oBAAoB,IAAIC,MAHzB,EAICC,oBAAoB,IAAIC,MAJzB,EAKCC,oBAAoB,IAAIC,MALzB,EAMCC,SAND,EAOCC,cAPD,QAQO,uBARP;AASA,SAASC,EAAT,EAAaC,EAAb,EAAiBC,OAAjB,QAAgC,iBAAhC;AACA,SAASC,OAAT,QAAwB,oBAAxB;AAEA;AACA;AACA;;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,SAASC,gBAAT,QAAiC,qBAAjC;AACA,SAASC,UAAT,QAA2B,SAA3B;AAEA,MAAMC,YAAY,GAAG,EAArB;;AAEA,SAASC,OAAT,OAA6B;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AAC5B,QAAM,CAAEC,YAAF,IAAmBJ,UAAU,CAAE,sBAAF,CAAnC;AACA,QAAM,CAAEK,WAAF,IAAkBL,UAAU,CAAE,qBAAF,CAAlC;AACA,QAAM,CAAEM,aAAF,IAAoBN,UAAU,CAAE,uBAAF,CAApC;AAEA,QAAM,CAAEO,qBAAF,IAA4BP,UAAU,CAC3C,sBAD2C,EAE3CG,IAF2C,CAA5C;AAIA,QAAMK,MAAM,GAAGX,OAAO,CACrB,MAAM,CACL,IAAKO,YAAY,IAAIH,YAArB,CADK,EAEL,IAAKI,WAAW,IAAIJ,YAApB,CAFK,EAGL,IAAKK,aAAa,IAAIC,qBAAjB,GACFD,aADE,GAEFL,YAFH,CAHK,CADe,EAQrB,CAAEG,YAAF,EAAgBC,WAAhB,EAA6BC,aAA7B,EAA4CC,qBAA5C,CARqB,CAAtB;AAWA,QAAME,UAAU,GAAG,CAAEN,IAAF,GAChB,iBADgB,GAEhB,aAAaA,IAAb,GAAoB,iBAFvB;AAGA,QAAMO,iBAAiB,GACtBF,MAAM,CAACG,MAAP,GAAgB,CAAhB,GACGf,OAAO,EACP;AACAD,EAAAA,EAAE,CAAE,UAAF,EAAc,WAAd,EAA2Ba,MAAM,CAACG,MAAlC,CAFK,EAGPH,MAAM,CAACG,MAHA,CADV,GAMGjB,EAAE,CAAE,mBAAF,CAPN;AASA,SACC,cAAC,MAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,cAAC,QAAD,QAAYA,EAAE,CAAE,SAAF,CAAd,CADD,EAEC,cAAC,SAAD;AAAW,IAAA,UAAU,MAArB;AAAsB,IAAA,WAAW;AAAjC,KACC,cAAC,gBAAD;AAAkB,IAAA,IAAI,EAAGe;AAAzB,KACC,cAAC,MAAD;AAAQ,IAAA,UAAU,EAAGD,MAAM,CAACG,MAAP,KAAkB;AAAvC,KACC,cAAC,SAAD,QACC,cAAC,MAAD;AAAQ,IAAA,SAAS,EAAG,KAApB;AAA4B,IAAA,MAAM,EAAG,CAAC;AAAtC,KACGH,MAAM,CAACI,KAAP,CAAc,CAAd,EAAiB,CAAjB,EAAqBC,GAArB,CAA0B;AAAA,QAAE;AAAEC,MAAAA;AAAF,KAAF;AAAA,WAC3B,cAAC,cAAD;AACC,MAAA,GAAG,EAAGA,KADP;AAEC,MAAA,UAAU,EAAGA;AAFd,MAD2B;AAAA,GAA1B,CADH,CADD,CADD,EAWC,cAAC,QAAD,QAAYJ,iBAAZ,CAXD,CADD,CADD,CAFD,CADD;AAsBA;;AAED,eAAeR,OAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\tFlexItem,\n\t__experimentalHStack as HStack,\n\t__experimentalZStack as ZStack,\n\t__experimentalVStack as VStack,\n\tFlexBlock,\n\tColorIndicator,\n} from '@wordpress/components';\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Subtitle from './subtitle';\nimport { NavigationButton } from './navigation-button';\nimport { useSetting } from './hooks';\n\nconst EMPTY_COLORS = [];\n\nfunction Palette( { name } ) {\n\tconst [ customColors ] = useSetting( 'color.palette.custom' );\n\tconst [ themeColors ] = useSetting( 'color.palette.theme' );\n\tconst [ defaultColors ] = useSetting( 'color.palette.default' );\n\n\tconst [ defaultPaletteEnabled ] = useSetting(\n\t\t'color.defaultPalette',\n\t\tname\n\t);\n\tconst colors = useMemo(\n\t\t() => [\n\t\t\t...( customColors || EMPTY_COLORS ),\n\t\t\t...( themeColors || EMPTY_COLORS ),\n\t\t\t...( defaultColors && defaultPaletteEnabled\n\t\t\t\t? defaultColors\n\t\t\t\t: EMPTY_COLORS ),\n\t\t],\n\t\t[ customColors, themeColors, defaultColors, defaultPaletteEnabled ]\n\t);\n\n\tconst screenPath = ! name\n\t\t? '/colors/palette'\n\t\t: '/blocks/' + name + '/colors/palette';\n\tconst paletteButtonText =\n\t\tcolors.length > 0\n\t\t\t? sprintf(\n\t\t\t\t\t// Translators: %d: Number of palette colors.\n\t\t\t\t\t_n( '%d color', '%d colors', colors.length ),\n\t\t\t\t\tcolors.length\n\t\t\t  )\n\t\t\t: __( 'Add custom colors' );\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<Subtitle>{ __( 'Palette' ) }</Subtitle>\n\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t<NavigationButton path={ screenPath }>\n\t\t\t\t\t<HStack isReversed={ colors.length === 0 }>\n\t\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t\t<ZStack isLayered={ false } offset={ -8 }>\n\t\t\t\t\t\t\t\t{ colors.slice( 0, 5 ).map( ( { color } ) => (\n\t\t\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\t\t\tkey={ color }\n\t\t\t\t\t\t\t\t\t\tcolorValue={ color }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t</ZStack>\n\t\t\t\t\t\t</FlexBlock>\n\t\t\t\t\t\t<FlexItem>{ paletteButtonText }</FlexItem>\n\t\t\t\t\t</HStack>\n\t\t\t\t</NavigationButton>\n\t\t\t</ItemGroup>\n\t\t</VStack>\n\t);\n}\n\nexport default Palette;\n"]}

package/build-module/components/global-styles/preview.js

@@ -3,38 +3,68 @@ import { createElement } from "@wordpress/element";
 /**
  * WordPress dependencies
  */
-import { __experimentalHStack as HStack, __experimentalVStack as VStack, Card, ColorIndicator } from '@wordpress/components';
+import { __unstableIframe as Iframe, __unstableEditorStyles as EditorStyles } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
 
 import { useStyle } from './hooks';
+import { useGlobalStylesOutput } from './use-global-styles-output';
 
-const StylesPreview = () => {
+const StylesPreview = _ref => {
+  let {
+    height = 150
+  } = _ref;
   const [fontFamily = 'serif'] = useStyle('typography.fontFamily');
   const [textColor = 'black'] = useStyle('color.text');
   const [linkColor = 'blue'] = useStyle('elements.link.color.text');
   const [backgroundColor = 'white'] = useStyle('color.background');
   const [gradientValue] = useStyle('color.gradient');
-  return createElement(Card, {
-    className: "edit-site-global-styles-preview",
+  const [styles] = useGlobalStylesOutput();
+  return createElement(Iframe, {
+    className: "edit-site-global-styles-preview__iframe",
+    head: createElement(EditorStyles, {
+      styles: styles
+    }),
     style: {
-      background: gradientValue !== null && gradientValue !== void 0 ? gradientValue : backgroundColor
+      height
+    }
+  }, createElement("div", {
+    style: {
+      display: 'flex',
+      gap: 20,
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: '100%',
+      transform: `scale(${height / 150})`,
+      background: gradientValue !== null && gradientValue !== void 0 ? gradientValue : backgroundColor,
+      cursor: 'pointer'
     }
-  }, createElement(HStack, {
-    spacing: 5
   }, createElement("div", {
     style: {
       fontFamily,
-      fontSize: '80px',
-      color: textColor
+      fontSize: '80px'
+    }
+  }, "Aa"), createElement("div", {
+    style: {
+      display: 'flex',
+      gap: 20,
+      flexDirection: 'column'
+    }
+  }, createElement("div", {
+    style: {
+      height: 40,
+      width: 40,
+      background: textColor,
+      borderRadius: 20
+    }
+  }), ' ', createElement("div", {
+    style: {
+      height: 40,
+      width: 40,
+      background: linkColor,
+      borderRadius: 20
     }
-  }, "Aa"), createElement(VStack, {
-    spacing: 2
-  }, createElement(ColorIndicator, {
-    colorValue: textColor
-  }), createElement(ColorIndicator, {
-    colorValue: linkColor
   }))));
 };
 

package/build-module/components/global-styles/preview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/preview.js"],"names":["__experimentalHStack","HStack","__experimentalVStack","VStack","Card","ColorIndicator","useStyle","StylesPreview","fontFamily","textColor","linkColor","backgroundColor","gradientValue","background","fontSize","color"],"mappings":";;AAAA;AACA;AACA;AACA,SACCA,oBAAoB,IAAIC,MADzB,EAECC,oBAAoB,IAAIC,MAFzB,EAGCC,IAHD,EAICC,cAJD,QAKO,uBALP;AAOA;AACA;AACA;;AACA,SAASC,QAAT,QAAyB,SAAzB;;AAEA,MAAMC,aAAa,GAAG,MAAM;AAC3B,QAAM,CAAEC,UAAU,GAAG,OAAf,IAA2BF,QAAQ,CAAE,uBAAF,CAAzC;AACA,QAAM,CAAEG,SAAS,GAAG,OAAd,IAA0BH,QAAQ,CAAE,YAAF,CAAxC;AACA,QAAM,CAAEI,SAAS,GAAG,MAAd,IAAyBJ,QAAQ,CAAE,0BAAF,CAAvC;AACA,QAAM,CAAEK,eAAe,GAAG,OAApB,IAAgCL,QAAQ,CAAE,kBAAF,CAA9C;AACA,QAAM,CAAEM,aAAF,IAAoBN,QAAQ,CAAE,gBAAF,CAAlC;AAEA,SACC,cAAC,IAAD;AACC,IAAA,SAAS,EAAC,iCADX;AAEC,IAAA,KAAK,EAAG;AAAEO,MAAAA,UAAU,EAAED,aAAF,aAAEA,aAAF,cAAEA,aAAF,GAAmBD;AAA/B;AAFT,KAIC,cAAC,MAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC;AACC,IAAA,KAAK,EAAG;AAAEH,MAAAA,UAAF;AAAcM,MAAAA,QAAQ,EAAE,MAAxB;AAAgCC,MAAAA,KAAK,EAAEN;AAAvC;AADT,UADD,EAMC,cAAC,MAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,cAAC,cAAD;AAAgB,IAAA,UAAU,EAAGA;AAA7B,IADD,EAEC,cAAC,cAAD;AAAgB,IAAA,UAAU,EAAGC;AAA7B,IAFD,CAND,CAJD,CADD;AAkBA,CAzBD;;AA2BA,eAAeH,aAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tCard,\n\tColorIndicator,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { useStyle } from './hooks';\n\nconst StylesPreview = () => {\n\tconst [ fontFamily = 'serif' ] = useStyle( 'typography.fontFamily' );\n\tconst [ textColor = 'black' ] = useStyle( 'color.text' );\n\tconst [ linkColor = 'blue' ] = useStyle( 'elements.link.color.text' );\n\tconst [ backgroundColor = 'white' ] = useStyle( 'color.background' );\n\tconst [ gradientValue ] = useStyle( 'color.gradient' );\n\n\treturn (\n\t\t<Card\n\t\t\tclassName=\"edit-site-global-styles-preview\"\n\t\t\tstyle={ { background: gradientValue ?? backgroundColor } }\n\t\t>\n\t\t\t<HStack spacing={ 5 }>\n\t\t\t\t<div\n\t\t\t\t\tstyle={ { fontFamily, fontSize: '80px', color: textColor } }\n\t\t\t\t>\n\t\t\t\t\tAa\n\t\t\t\t</div>\n\t\t\t\t<VStack spacing={ 2 }>\n\t\t\t\t\t<ColorIndicator colorValue={ textColor } />\n\t\t\t\t\t<ColorIndicator colorValue={ linkColor } />\n\t\t\t\t</VStack>\n\t\t\t</HStack>\n\t\t</Card>\n\t);\n};\n\nexport default StylesPreview;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/preview.js"],"names":["__unstableIframe","Iframe","__unstableEditorStyles","EditorStyles","useStyle","useGlobalStylesOutput","StylesPreview","height","fontFamily","textColor","linkColor","backgroundColor","gradientValue","styles","display","gap","alignItems","justifyContent","transform","background","cursor","fontSize","flexDirection","width","borderRadius"],"mappings":";;AAAA;AACA;AACA;AACA,SACCA,gBAAgB,IAAIC,MADrB,EAECC,sBAAsB,IAAIC,YAF3B,QAGO,yBAHP;AAKA;AACA;AACA;;AACA,SAASC,QAAT,QAAyB,SAAzB;AACA,SAASC,qBAAT,QAAsC,4BAAtC;;AAEA,MAAMC,aAAa,GAAG,QAAwB;AAAA,MAAtB;AAAEC,IAAAA,MAAM,GAAG;AAAX,GAAsB;AAC7C,QAAM,CAAEC,UAAU,GAAG,OAAf,IAA2BJ,QAAQ,CAAE,uBAAF,CAAzC;AACA,QAAM,CAAEK,SAAS,GAAG,OAAd,IAA0BL,QAAQ,CAAE,YAAF,CAAxC;AACA,QAAM,CAAEM,SAAS,GAAG,MAAd,IAAyBN,QAAQ,CAAE,0BAAF,CAAvC;AACA,QAAM,CAAEO,eAAe,GAAG,OAApB,IAAgCP,QAAQ,CAAE,kBAAF,CAA9C;AACA,QAAM,CAAEQ,aAAF,IAAoBR,QAAQ,CAAE,gBAAF,CAAlC;AACA,QAAM,CAAES,MAAF,IAAaR,qBAAqB,EAAxC;AAEA,SACC,cAAC,MAAD;AACC,IAAA,SAAS,EAAC,yCADX;AAEC,IAAA,IAAI,EAAG,cAAC,YAAD;AAAc,MAAA,MAAM,EAAGQ;AAAvB,MAFR;AAGC,IAAA,KAAK,EAAG;AAAEN,MAAAA;AAAF;AAHT,KAKC;AACC,IAAA,KAAK,EAAG;AACPO,MAAAA,OAAO,EAAE,MADF;AAEPC,MAAAA,GAAG,EAAE,EAFE;AAGPC,MAAAA,UAAU,EAAE,QAHL;AAIPC,MAAAA,cAAc,EAAE,QAJT;AAKPV,MAAAA,MAAM,EAAE,MALD;AAMPW,MAAAA,SAAS,EAAG,SAASX,MAAM,GAAG,GAAK,GAN5B;AAOPY,MAAAA,UAAU,EAAEP,aAAF,aAAEA,aAAF,cAAEA,aAAF,GAAmBD,eAPtB;AAQPS,MAAAA,MAAM,EAAE;AARD;AADT,KAYC;AAAK,IAAA,KAAK,EAAG;AAAEZ,MAAAA,UAAF;AAAca,MAAAA,QAAQ,EAAE;AAAxB;AAAb,UAZD,EAaC;AACC,IAAA,KAAK,EAAG;AACPP,MAAAA,OAAO,EAAE,MADF;AAEPC,MAAAA,GAAG,EAAE,EAFE;AAGPO,MAAAA,aAAa,EAAE;AAHR;AADT,KAOC;AACC,IAAA,KAAK,EAAG;AACPf,MAAAA,MAAM,EAAE,EADD;AAEPgB,MAAAA,KAAK,EAAE,EAFA;AAGPJ,MAAAA,UAAU,EAAEV,SAHL;AAIPe,MAAAA,YAAY,EAAE;AAJP;AADT,IAPD,EAcK,GAdL,EAeC;AACC,IAAA,KAAK,EAAG;AACPjB,MAAAA,MAAM,EAAE,EADD;AAEPgB,MAAAA,KAAK,EAAE,EAFA;AAGPJ,MAAAA,UAAU,EAAET,SAHL;AAIPc,MAAAA,YAAY,EAAE;AAJP;AADT,IAfD,CAbD,CALD,CADD;AA8CA,CAtDD;;AAwDA,eAAelB,aAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__unstableIframe as Iframe,\n\t__unstableEditorStyles as EditorStyles,\n} from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { useStyle } from './hooks';\nimport { useGlobalStylesOutput } from './use-global-styles-output';\n\nconst StylesPreview = ( { height = 150 } ) => {\n\tconst [ fontFamily = 'serif' ] = useStyle( 'typography.fontFamily' );\n\tconst [ textColor = 'black' ] = useStyle( 'color.text' );\n\tconst [ linkColor = 'blue' ] = useStyle( 'elements.link.color.text' );\n\tconst [ backgroundColor = 'white' ] = useStyle( 'color.background' );\n\tconst [ gradientValue ] = useStyle( 'color.gradient' );\n\tconst [ styles ] = useGlobalStylesOutput();\n\n\treturn (\n\t\t<Iframe\n\t\t\tclassName=\"edit-site-global-styles-preview__iframe\"\n\t\t\thead={ <EditorStyles styles={ styles } /> }\n\t\t\tstyle={ { height } }\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={ {\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tgap: 20,\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\theight: '100%',\n\t\t\t\t\ttransform: `scale(${ height / 150 })`,\n\t\t\t\t\tbackground: gradientValue ?? backgroundColor,\n\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<div style={ { fontFamily, fontSize: '80px' } }>Aa</div>\n\t\t\t\t<div\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tgap: 20,\n\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: 40,\n\t\t\t\t\t\t\twidth: 40,\n\t\t\t\t\t\t\tbackground: textColor,\n\t\t\t\t\t\t\tborderRadius: 20,\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>{ ' ' }\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: 40,\n\t\t\t\t\t\t\twidth: 40,\n\t\t\t\t\t\t\tbackground: linkColor,\n\t\t\t\t\t\t\tborderRadius: 20,\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</Iframe>\n\t);\n};\n\nexport default StylesPreview;\n"]}

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

@@ -1,10 +1,11 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement, Fragment } from "@wordpress/element";
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { __experimentalPanelColorGradientSettings as PanelColorGradientSettings } from '@wordpress/block-editor';
+import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
@@ -16,7 +17,6 @@ function ScreenBackgroundColor(_ref) {
   let {
     name
   } = _ref;
-  const parentMenu = name === undefined ? '' : '/blocks/' + name;
   const supports = getSupportedGlobalStylesPanels(name);
   const [solids] = useSetting('color.palette', name);
   const [gradients] = useSetting('color.gradients', name);
@@ -36,7 +36,6 @@ function ScreenBackgroundColor(_ref) {
     return null;
   }
 
-  const settings = [];
   let backgroundSettings = {};
 
   if (hasBackgroundColor) {
@@ -63,17 +62,14 @@ function ScreenBackgroundColor(_ref) {
     }
   }
 
-  settings.push({ ...backgroundSettings,
-    ...gradientSettings,
-    label: __('Background color')
-  });
+  const controlProps = { ...backgroundSettings,
+    ...gradientSettings
+  };
   return createElement(Fragment, null, createElement(ScreenHeader, {
-    back: parentMenu + '/colors',
     title: __('Background'),
-    description: __('Set a background color or gradient for the whole website.')
-  }), createElement(PanelColorGradientSettings, {
-    title: __('Color'),
-    settings: settings,
+    description: __('Set a background color or gradient for the whole site.')
+  }), createElement(ColorGradientControl, _extends({
+    className: "edit-site-screen-background-color__control",
     colors: colorsPerOrigin,
     gradients: gradientsPerOrigin,
     disableCustomColors: !areCustomSolidsEnabled,
@@ -82,7 +78,7 @@ function ScreenBackgroundColor(_ref) {
     showTitle: false,
     enableAlpha: true,
     __experimentalIsRenderedInSidebar: true
-  }));
+  }, controlProps)));
 }
 
 export default ScreenBackgroundColor;

package/build-module/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":["__","__experimentalPanelColorGradientSettings","PanelColorGradientSettings","ScreenHeader","getSupportedGlobalStylesPanels","useColorsPerOrigin","useGradientsPerOrigin","useSetting","useStyle","ScreenBackgroundColor","name","parentMenu","undefined","supports","solids","gradients","areCustomSolidsEnabled","areCustomGradientsEnabled","colorsPerOrigin","gradientsPerOrigin","isBackgroundEnabled","hasBackgroundColor","includes","length","hasGradientColor","backgroundColor","setBackgroundColor","userBackgroundColor","gradient","setGradient","userGradient","settings","backgroundSettings","colorValue","onColorChange","clearable","gradientSettings","gradientValue","onGradientChange","push","label"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalPanelColorGradientSettings as PanelColorGradientSettings } 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 } ) {\n\tconst parentMenu = name === undefined ? '' : '/blocks/' + name;\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\t'color.background',\n\t\tname\n\t);\n\tconst [ userBackgroundColor ] = useStyle(\n\t\t'color.background',\n\t\tname,\n\t\t'user'\n\t);\n\tconst [ gradient, setGradient ] = useStyle( 'color.gradient', name );\n\tconst [ userGradient ] = useStyle( 'color.gradient', name, 'user' );\n\n\tif ( ! hasBackgroundColor && ! hasGradientColor ) {\n\t\treturn null;\n\t}\n\n\tconst settings = [];\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\tsettings.push( {\n\t\t...backgroundSettings,\n\t\t...gradientSettings,\n\t\tlabel: __( 'Background color' ),\n\t} );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\tback={ parentMenu + '/colors' }\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 website.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<PanelColorGradientSettings\n\t\t\t\ttitle={ __( 'Color' ) }\n\t\t\t\tsettings={ settings }\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\t__experimentalHasMultipleOrigins\n\t\t\t\tshowTitle={ false }\n\t\t\t\tenableAlpha\n\t\t\t\t__experimentalIsRenderedInSidebar\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":["__","__experimentalColorGradientControl","ColorGradientControl","ScreenHeader","getSupportedGlobalStylesPanels","useColorsPerOrigin","useGradientsPerOrigin","useSetting","useStyle","ScreenBackgroundColor","name","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 } ) {\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\t'color.background',\n\t\tname\n\t);\n\tconst [ userBackgroundColor ] = useStyle(\n\t\t'color.background',\n\t\tname,\n\t\t'user'\n\t);\n\tconst [ gradient, setGradient ] = useStyle( 'color.gradient', name );\n\tconst [ userGradient ] = useStyle( 'color.gradient', name, 'user' );\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\t__experimentalHasMultipleOrigins\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-module/components/global-styles/screen-block-list.js

@@ -16,7 +16,7 @@ import { useHasColorPanel } from './color-utils';
 import { useHasDimensionsPanel } from './dimensions-panel';
 import { useHasTypographyPanel } from './typography-panel';
 import ScreenHeader from './header';
-import NavigationButton from './navigation-button';
+import { NavigationButton } from './navigation-button';
 
 function BlockMenuItem(_ref) {
   let {
@@ -44,7 +44,6 @@ function BlockMenuItem(_ref) {
 
 function ScreenBlockList() {
   return createElement(Fragment, null, createElement(ScreenHeader, {
-    back: "/",
     title: __('Blocks'),
     description: __('Customize the appearance of specific blocks and for the whole site.')
   }), getBlockTypes().map(block => createElement(BlockMenuItem, {

package/build-module/components/global-styles/screen-block-list.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-block-list.js"],"names":["getBlockTypes","__","FlexItem","__experimentalHStack","HStack","BlockIcon","useHasBorderPanel","useHasColorPanel","useHasDimensionsPanel","useHasTypographyPanel","ScreenHeader","NavigationButton","BlockMenuItem","block","hasTypographyPanel","name","hasColorPanel","hasBorderPanel","hasDimensionsPanel","hasLayoutPanel","hasBlockMenuItem","icon","title","ScreenBlockList","map"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,aAAT,QAA8B,mBAA9B;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SACCC,QADD,EAECC,oBAAoB,IAAIC,MAFzB,QAGO,uBAHP;AAIA,SAASC,SAAT,QAA0B,yBAA1B;AAEA;AACA;AACA;;AACA,SAASC,iBAAT,QAAkC,gBAAlC;AACA,SAASC,gBAAT,QAAiC,eAAjC;AACA,SAASC,qBAAT,QAAsC,oBAAtC;AACA,SAASC,qBAAT,QAAsC,oBAAtC;AACA,OAAOC,YAAP,MAAyB,UAAzB;AACA,OAAOC,gBAAP,MAA6B,qBAA7B;;AAEA,SAASC,aAAT,OAAoC;AAAA,MAAZ;AAAEC,IAAAA;AAAF,GAAY;AACnC,QAAMC,kBAAkB,GAAGL,qBAAqB,CAAEI,KAAK,CAACE,IAAR,CAAhD;AACA,QAAMC,aAAa,GAAGT,gBAAgB,CAAEM,KAAK,CAACE,IAAR,CAAtC;AACA,QAAME,cAAc,GAAGX,iBAAiB,CAAEO,KAAK,CAACE,IAAR,CAAxC;AACA,QAAMG,kBAAkB,GAAGV,qBAAqB,CAAEK,KAAK,CAACE,IAAR,CAAhD;AACA,QAAMI,cAAc,GAAGF,cAAc,IAAIC,kBAAzC;AACA,QAAME,gBAAgB,GACrBN,kBAAkB,IAAIE,aAAtB,IAAuCG,cADxC;;AAGA,MAAK,CAAEC,gBAAP,EAA0B;AACzB,WAAO,IAAP;AACA;;AAED,SACC,cAAC,gBAAD;AAAkB,IAAA,IAAI,EAAG,aAAaP,KAAK,CAACE;AAA5C,KACC,cAAC,MAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,cAAC,QAAD,QACC,cAAC,SAAD;AAAW,IAAA,IAAI,EAAGF,KAAK,CAACQ;AAAxB,IADD,CADD,EAIC,cAAC,QAAD,QAAYR,KAAK,CAACS,KAAlB,CAJD,CADD,CADD;AAUA;;AAED,SAASC,eAAT,GAA2B;AAC1B,SACC,8BACC,cAAC,YAAD;AACC,IAAA,IAAI,EAAC,GADN;AAEC,IAAA,KAAK,EAAGtB,EAAE,CAAE,QAAF,CAFX;AAGC,IAAA,WAAW,EAAGA,EAAE,CACf,qEADe;AAHjB,IADD,EAQGD,aAAa,GAAGwB,GAAhB,CAAuBX,KAAF,IACtB,cAAC,aAAD;AACC,IAAA,KAAK,EAAGA,KADT;AAEC,IAAA,GAAG,EAAG,oBAAoBA,KAAK,CAACE;AAFjC,IADC,CARH,CADD;AAiBA;;AAED,eAAeQ,eAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { getBlockTypes } from '@wordpress/blocks';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tFlexItem,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { BlockIcon } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { useHasBorderPanel } from './border-panel';\nimport { useHasColorPanel } from './color-utils';\nimport { useHasDimensionsPanel } from './dimensions-panel';\nimport { useHasTypographyPanel } from './typography-panel';\nimport ScreenHeader from './header';\nimport NavigationButton from './navigation-button';\n\nfunction BlockMenuItem( { block } ) {\n\tconst hasTypographyPanel = useHasTypographyPanel( block.name );\n\tconst hasColorPanel = useHasColorPanel( block.name );\n\tconst hasBorderPanel = useHasBorderPanel( block.name );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( block.name );\n\tconst hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;\n\tconst hasBlockMenuItem =\n\t\thasTypographyPanel || hasColorPanel || hasLayoutPanel;\n\n\tif ( ! hasBlockMenuItem ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButton path={ '/blocks/' + block.name }>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<BlockIcon icon={ block.icon } />\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>{ block.title }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButton>\n\t);\n}\n\nfunction ScreenBlockList() {\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\tback=\"/\"\n\t\t\t\ttitle={ __( 'Blocks' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Customize the appearance of specific blocks and for the whole site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t{ getBlockTypes().map( ( block ) => (\n\t\t\t\t<BlockMenuItem\n\t\t\t\t\tblock={ block }\n\t\t\t\t\tkey={ 'menu-itemblock-' + block.name }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</>\n\t);\n}\n\nexport default ScreenBlockList;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-block-list.js"],"names":["getBlockTypes","__","FlexItem","__experimentalHStack","HStack","BlockIcon","useHasBorderPanel","useHasColorPanel","useHasDimensionsPanel","useHasTypographyPanel","ScreenHeader","NavigationButton","BlockMenuItem","block","hasTypographyPanel","name","hasColorPanel","hasBorderPanel","hasDimensionsPanel","hasLayoutPanel","hasBlockMenuItem","icon","title","ScreenBlockList","map"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,aAAT,QAA8B,mBAA9B;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SACCC,QADD,EAECC,oBAAoB,IAAIC,MAFzB,QAGO,uBAHP;AAIA,SAASC,SAAT,QAA0B,yBAA1B;AAEA;AACA;AACA;;AACA,SAASC,iBAAT,QAAkC,gBAAlC;AACA,SAASC,gBAAT,QAAiC,eAAjC;AACA,SAASC,qBAAT,QAAsC,oBAAtC;AACA,SAASC,qBAAT,QAAsC,oBAAtC;AACA,OAAOC,YAAP,MAAyB,UAAzB;AACA,SAASC,gBAAT,QAAiC,qBAAjC;;AAEA,SAASC,aAAT,OAAoC;AAAA,MAAZ;AAAEC,IAAAA;AAAF,GAAY;AACnC,QAAMC,kBAAkB,GAAGL,qBAAqB,CAAEI,KAAK,CAACE,IAAR,CAAhD;AACA,QAAMC,aAAa,GAAGT,gBAAgB,CAAEM,KAAK,CAACE,IAAR,CAAtC;AACA,QAAME,cAAc,GAAGX,iBAAiB,CAAEO,KAAK,CAACE,IAAR,CAAxC;AACA,QAAMG,kBAAkB,GAAGV,qBAAqB,CAAEK,KAAK,CAACE,IAAR,CAAhD;AACA,QAAMI,cAAc,GAAGF,cAAc,IAAIC,kBAAzC;AACA,QAAME,gBAAgB,GACrBN,kBAAkB,IAAIE,aAAtB,IAAuCG,cADxC;;AAGA,MAAK,CAAEC,gBAAP,EAA0B;AACzB,WAAO,IAAP;AACA;;AAED,SACC,cAAC,gBAAD;AAAkB,IAAA,IAAI,EAAG,aAAaP,KAAK,CAACE;AAA5C,KACC,cAAC,MAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,cAAC,QAAD,QACC,cAAC,SAAD;AAAW,IAAA,IAAI,EAAGF,KAAK,CAACQ;AAAxB,IADD,CADD,EAIC,cAAC,QAAD,QAAYR,KAAK,CAACS,KAAlB,CAJD,CADD,CADD;AAUA;;AAED,SAASC,eAAT,GAA2B;AAC1B,SACC,8BACC,cAAC,YAAD;AACC,IAAA,KAAK,EAAGtB,EAAE,CAAE,QAAF,CADX;AAEC,IAAA,WAAW,EAAGA,EAAE,CACf,qEADe;AAFjB,IADD,EAOGD,aAAa,GAAGwB,GAAhB,CAAuBX,KAAF,IACtB,cAAC,aAAD;AACC,IAAA,KAAK,EAAGA,KADT;AAEC,IAAA,GAAG,EAAG,oBAAoBA,KAAK,CAACE;AAFjC,IADC,CAPH,CADD;AAgBA;;AAED,eAAeQ,eAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { getBlockTypes } from '@wordpress/blocks';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tFlexItem,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { BlockIcon } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { useHasBorderPanel } from './border-panel';\nimport { useHasColorPanel } from './color-utils';\nimport { useHasDimensionsPanel } from './dimensions-panel';\nimport { useHasTypographyPanel } from './typography-panel';\nimport ScreenHeader from './header';\nimport { NavigationButton } from './navigation-button';\n\nfunction BlockMenuItem( { block } ) {\n\tconst hasTypographyPanel = useHasTypographyPanel( block.name );\n\tconst hasColorPanel = useHasColorPanel( block.name );\n\tconst hasBorderPanel = useHasBorderPanel( block.name );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( block.name );\n\tconst hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;\n\tconst hasBlockMenuItem =\n\t\thasTypographyPanel || hasColorPanel || hasLayoutPanel;\n\n\tif ( ! hasBlockMenuItem ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButton path={ '/blocks/' + block.name }>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<BlockIcon icon={ block.icon } />\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>{ block.title }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButton>\n\t);\n}\n\nfunction ScreenBlockList() {\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Blocks' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Customize the appearance of specific blocks and for the whole site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t{ getBlockTypes().map( ( block ) => (\n\t\t\t\t<BlockMenuItem\n\t\t\t\t\tblock={ block }\n\t\t\t\t\tkey={ 'menu-itemblock-' + block.name }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</>\n\t);\n}\n\nexport default ScreenBlockList;\n"]}

package/build-module/components/global-styles/screen-block.js

@@ -17,7 +17,6 @@ function ScreenBlock(_ref) {
   } = _ref;
   const blockType = getBlockType(name);
   return createElement(Fragment, null, createElement(ScreenHeader, {
-    back: "/blocks",
     title: blockType.title
   }), createElement(ContextMenu, {
     parentMenu: '/blocks/' + name,

package/build-module/components/global-styles/screen-block.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-block.js"],"names":["getBlockType","ContextMenu","ScreenHeader","ScreenBlock","name","blockType","title"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,YAAT,QAA6B,mBAA7B;AAEA;AACA;AACA;;AACA,OAAOC,WAAP,MAAwB,gBAAxB;AACA,OAAOC,YAAP,MAAyB,UAAzB;;AAEA,SAASC,WAAT,OAAiC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AAChC,QAAMC,SAAS,GAAGL,YAAY,CAAEI,IAAF,CAA9B;AAEA,SACC,8BACC,cAAC,YAAD;AAAc,IAAA,IAAI,EAAC,SAAnB;AAA6B,IAAA,KAAK,EAAGC,SAAS,CAACC;AAA/C,IADD,EAEC,cAAC,WAAD;AAAa,IAAA,UAAU,EAAG,aAAaF,IAAvC;AAA8C,IAAA,IAAI,EAAGA;AAArD,IAFD,CADD;AAMA;;AAED,eAAeD,WAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { getBlockType } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport ContextMenu from './context-menu';\nimport ScreenHeader from './header';\n\nfunction ScreenBlock( { name } ) {\n\tconst blockType = getBlockType( name );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader back=\"/blocks\" title={ blockType.title } />\n\t\t\t<ContextMenu parentMenu={ '/blocks/' + name } name={ name } />\n\t\t</>\n\t);\n}\n\nexport default ScreenBlock;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-block.js"],"names":["getBlockType","ContextMenu","ScreenHeader","ScreenBlock","name","blockType","title"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,YAAT,QAA6B,mBAA7B;AAEA;AACA;AACA;;AACA,OAAOC,WAAP,MAAwB,gBAAxB;AACA,OAAOC,YAAP,MAAyB,UAAzB;;AAEA,SAASC,WAAT,OAAiC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AAChC,QAAMC,SAAS,GAAGL,YAAY,CAAEI,IAAF,CAA9B;AAEA,SACC,8BACC,cAAC,YAAD;AAAc,IAAA,KAAK,EAAGC,SAAS,CAACC;AAAhC,IADD,EAEC,cAAC,WAAD;AAAa,IAAA,UAAU,EAAG,aAAaF,IAAvC;AAA8C,IAAA,IAAI,EAAGA;AAArD,IAFD,CADD;AAMA;;AAED,eAAeD,WAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { getBlockType } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport ContextMenu from './context-menu';\nimport ScreenHeader from './header';\n\nfunction ScreenBlock( { name } ) {\n\tconst blockType = getBlockType( name );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader title={ blockType.title } />\n\t\t\t<ContextMenu parentMenu={ '/blocks/' + name } name={ name } />\n\t\t</>\n\t);\n}\n\nexport default ScreenBlock;\n"]}

package/build-module/components/global-styles/screen-color-palette.js

@@ -19,9 +19,7 @@ function ScreenColorPalette(_ref) {
     name
   } = _ref;
   const [currentTab, setCurrentTab] = useState('solid');
-  const parentMenu = name === undefined ? '' : '/blocks/' + name;
   return createElement(Fragment, null, createElement(ScreenHeader, {
-    back: parentMenu + '/colors',
     title: __('Palette'),
     description: __('Palettes are used to provide default color options for blocks and various design tools. Here you can edit the colors with their labels.')
   }), createElement(ToggleGroupControl, {

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-color-palette.js"],"names":["__","__experimentalToggleGroupControl","ToggleGroupControl","__experimentalToggleGroupControlOption","ToggleGroupControlOption","useState","ColorPalettePanel","GradientPalettePanel","ScreenHeader","ScreenColorPalette","name","currentTab","setCurrentTab","parentMenu","undefined"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SACCC,gCAAgC,IAAIC,kBADrC,EAECC,sCAAsC,IAAIC,wBAF3C,QAGO,uBAHP;AAIA,SAASC,QAAT,QAAyB,oBAAzB;AAEA;AACA;AACA;;AACA,OAAOC,iBAAP,MAA8B,uBAA9B;AACA,OAAOC,oBAAP,MAAiC,2BAAjC;AACA,OAAOC,YAAP,MAAyB,UAAzB;;AAEA,SAASC,kBAAT,OAAwC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACvC,QAAM,CAAEC,UAAF,EAAcC,aAAd,IAAgCP,QAAQ,CAAE,OAAF,CAA9C;AACA,QAAMQ,UAAU,GAAGH,IAAI,KAAKI,SAAT,GAAqB,EAArB,GAA0B,aAAaJ,IAA1D;AAEA,SACC,8BACC,cAAC,YAAD;AACC,IAAA,IAAI,EAAGG,UAAU,GAAG,SADrB;AAEC,IAAA,KAAK,EAAGb,EAAE,CAAE,SAAF,CAFX;AAGC,IAAA,WAAW,EAAGA,EAAE,CACf,yIADe;AAHjB,IADD,EAQC,cAAC,kBAAD;AACC,IAAA,SAAS,EAAC,uCADX;AAEC,IAAA,KAAK,EAAGW,UAFT;AAGC,IAAA,QAAQ,EAAGC,aAHZ;AAIC,IAAA,KAAK,EAAGZ,EAAE,CAAE,qBAAF,CAJX;AAKC,IAAA,mBAAmB,MALpB;AAMC,IAAA,OAAO;AANR,KAQC,cAAC,wBAAD;AACC,IAAA,KAAK,EAAC,OADP;AAEC,IAAA,KAAK,EAAGA,EAAE,CAAE,OAAF;AAFX,IARD,EAYC,cAAC,wBAAD;AACC,IAAA,KAAK,EAAC,UADP;AAEC,IAAA,KAAK,EAAGA,EAAE,CAAE,UAAF;AAFX,IAZD,CARD,EAyBGW,UAAU,KAAK,OAAf,IAA0B,cAAC,iBAAD;AAAmB,IAAA,IAAI,EAAGD;AAA1B,IAzB7B,EA0BGC,UAAU,KAAK,UAAf,IACD,cAAC,oBAAD;AAAsB,IAAA,IAAI,EAAGD;AAA7B,IA3BF,CADD;AAgCA;;AAED,eAAeD,kBAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n} from '@wordpress/components';\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ColorPalettePanel from './color-palette-panel';\nimport GradientPalettePanel from './gradients-palette-panel';\nimport ScreenHeader from './header';\n\nfunction ScreenColorPalette( { name } ) {\n\tconst [ currentTab, setCurrentTab ] = useState( 'solid' );\n\tconst parentMenu = name === undefined ? '' : '/blocks/' + name;\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\tback={ parentMenu + '/colors' }\n\t\t\t\ttitle={ __( 'Palette' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Palettes are used to provide default color options for blocks and various design tools. Here you can edit the colors with their labels.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<ToggleGroupControl\n\t\t\t\tclassName=\"edit-site-screen-color-palette-toggle\"\n\t\t\t\tvalue={ currentTab }\n\t\t\t\tonChange={ setCurrentTab }\n\t\t\t\tlabel={ __( 'Select palette type' ) }\n\t\t\t\thideLabelFromVision\n\t\t\t\tisBlock\n\t\t\t>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tvalue=\"solid\"\n\t\t\t\t\tlabel={ __( 'Solid' ) }\n\t\t\t\t/>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tvalue=\"gradient\"\n\t\t\t\t\tlabel={ __( 'Gradient' ) }\n\t\t\t\t/>\n\t\t\t</ToggleGroupControl>\n\t\t\t{ currentTab === 'solid' && <ColorPalettePanel name={ name } /> }\n\t\t\t{ currentTab === 'gradient' && (\n\t\t\t\t<GradientPalettePanel name={ name } />\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default ScreenColorPalette;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-color-palette.js"],"names":["__","__experimentalToggleGroupControl","ToggleGroupControl","__experimentalToggleGroupControlOption","ToggleGroupControlOption","useState","ColorPalettePanel","GradientPalettePanel","ScreenHeader","ScreenColorPalette","name","currentTab","setCurrentTab"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SACCC,gCAAgC,IAAIC,kBADrC,EAECC,sCAAsC,IAAIC,wBAF3C,QAGO,uBAHP;AAIA,SAASC,QAAT,QAAyB,oBAAzB;AAEA;AACA;AACA;;AACA,OAAOC,iBAAP,MAA8B,uBAA9B;AACA,OAAOC,oBAAP,MAAiC,2BAAjC;AACA,OAAOC,YAAP,MAAyB,UAAzB;;AAEA,SAASC,kBAAT,OAAwC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACvC,QAAM,CAAEC,UAAF,EAAcC,aAAd,IAAgCP,QAAQ,CAAE,OAAF,CAA9C;AAEA,SACC,8BACC,cAAC,YAAD;AACC,IAAA,KAAK,EAAGL,EAAE,CAAE,SAAF,CADX;AAEC,IAAA,WAAW,EAAGA,EAAE,CACf,yIADe;AAFjB,IADD,EAOC,cAAC,kBAAD;AACC,IAAA,SAAS,EAAC,uCADX;AAEC,IAAA,KAAK,EAAGW,UAFT;AAGC,IAAA,QAAQ,EAAGC,aAHZ;AAIC,IAAA,KAAK,EAAGZ,EAAE,CAAE,qBAAF,CAJX;AAKC,IAAA,mBAAmB,MALpB;AAMC,IAAA,OAAO;AANR,KAQC,cAAC,wBAAD;AACC,IAAA,KAAK,EAAC,OADP;AAEC,IAAA,KAAK,EAAGA,EAAE,CAAE,OAAF;AAFX,IARD,EAYC,cAAC,wBAAD;AACC,IAAA,KAAK,EAAC,UADP;AAEC,IAAA,KAAK,EAAGA,EAAE,CAAE,UAAF;AAFX,IAZD,CAPD,EAwBGW,UAAU,KAAK,OAAf,IAA0B,cAAC,iBAAD;AAAmB,IAAA,IAAI,EAAGD;AAA1B,IAxB7B,EAyBGC,UAAU,KAAK,UAAf,IACD,cAAC,oBAAD;AAAsB,IAAA,IAAI,EAAGD;AAA7B,IA1BF,CADD;AA+BA;;AAED,eAAeD,kBAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n} from '@wordpress/components';\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ColorPalettePanel from './color-palette-panel';\nimport GradientPalettePanel from './gradients-palette-panel';\nimport ScreenHeader from './header';\n\nfunction ScreenColorPalette( { name } ) {\n\tconst [ currentTab, setCurrentTab ] = useState( 'solid' );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Palette' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Palettes are used to provide default color options for blocks and various design tools. Here you can edit the colors with their labels.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<ToggleGroupControl\n\t\t\t\tclassName=\"edit-site-screen-color-palette-toggle\"\n\t\t\t\tvalue={ currentTab }\n\t\t\t\tonChange={ setCurrentTab }\n\t\t\t\tlabel={ __( 'Select palette type' ) }\n\t\t\t\thideLabelFromVision\n\t\t\t\tisBlock\n\t\t\t>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tvalue=\"solid\"\n\t\t\t\t\tlabel={ __( 'Solid' ) }\n\t\t\t\t/>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tvalue=\"gradient\"\n\t\t\t\t\tlabel={ __( 'Gradient' ) }\n\t\t\t\t/>\n\t\t\t</ToggleGroupControl>\n\t\t\t{ currentTab === 'solid' && <ColorPalettePanel name={ name } /> }\n\t\t\t{ currentTab === 'gradient' && (\n\t\t\t\t<GradientPalettePanel name={ name } />\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default ScreenColorPalette;\n"]}

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

@@ -11,7 +11,7 @@ import { __experimentalItemGroup as ItemGroup, __experimentalHStack as HStack, _
 
 import ScreenHeader from './header';
 import Palette from './palette';
-import NavigationButton from './navigation-button';
+import { NavigationButton } from './navigation-button';
 import { getSupportedGlobalStylesPanels, useStyle } from './hooks';
 import Subtitle from './subtitle';
 
@@ -88,9 +88,8 @@ function ScreenColors(_ref4) {
   } = _ref4;
   const parentMenu = name === undefined ? '' : '/blocks/' + name;
   return createElement(Fragment, null, createElement(ScreenHeader, {
-    back: parentMenu ? parentMenu : '/',
     title: __('Colors'),
-    description: __('Manage palettes and the default color of different global elements on the website.')
+    description: __('Manage palettes and the default color of different global elements on the site.')
   }), createElement("div", {
     className: "edit-site-global-styles-screen-colors"
   }, createElement(VStack, {

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-colors.js"],"names":["__","__experimentalItemGroup","ItemGroup","__experimentalHStack","HStack","__experimentalVStack","VStack","FlexItem","ColorIndicator","ScreenHeader","Palette","NavigationButton","getSupportedGlobalStylesPanels","useStyle","Subtitle","BackgroundColorItem","name","parentMenu","supports","hasSupport","includes","backgroundColor","gradientValue","TextColorItem","color","LinkColorItem","ScreenColors","undefined"],"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\tFlexItem,\n\tColorIndicator,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport Palette from './palette';\nimport NavigationButton from './navigation-button';\nimport { getSupportedGlobalStylesPanels, useStyle } from './hooks';\nimport Subtitle from './subtitle';\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<NavigationButton path={ parentMenu + '/colors/background' }>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\tcolorValue={ gradientValue ?? backgroundColor }\n\t\t\t\t\t/>\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>{ __( 'Background' ) }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButton>\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<NavigationButton path={ parentMenu + '/colors/text' }>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<ColorIndicator colorValue={ color } />\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>{ __( 'Text' ) }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButton>\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\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButton path={ parentMenu + '/colors/link' }>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<ColorIndicator colorValue={ color } />\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>{ __( 'Links' ) }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButton>\n\t);\n}\n\nfunction ScreenColors( { name } ) {\n\tconst parentMenu = name === undefined ? '' : '/blocks/' + name;\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\tback={ parentMenu ? parentMenu : '/' }\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 website.'\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</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":["__","__experimentalItemGroup","ItemGroup","__experimentalHStack","HStack","__experimentalVStack","VStack","FlexItem","ColorIndicator","ScreenHeader","Palette","NavigationButton","getSupportedGlobalStylesPanels","useStyle","Subtitle","BackgroundColorItem","name","parentMenu","supports","hasSupport","includes","backgroundColor","gradientValue","TextColorItem","color","LinkColorItem","ScreenColors","undefined"],"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\tFlexItem,\n\tColorIndicator,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport Palette from './palette';\nimport { NavigationButton } from './navigation-button';\nimport { getSupportedGlobalStylesPanels, useStyle } from './hooks';\nimport Subtitle from './subtitle';\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<NavigationButton path={ parentMenu + '/colors/background' }>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\tcolorValue={ gradientValue ?? backgroundColor }\n\t\t\t\t\t/>\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>{ __( 'Background' ) }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButton>\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<NavigationButton path={ parentMenu + '/colors/text' }>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<ColorIndicator colorValue={ color } />\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>{ __( 'Text' ) }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButton>\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\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButton path={ parentMenu + '/colors/link' }>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<ColorIndicator colorValue={ color } />\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>{ __( 'Links' ) }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButton>\n\t);\n}\n\nfunction ScreenColors( { name } ) {\n\tconst parentMenu = name === undefined ? '' : '/blocks/' + 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</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-module/components/global-styles/screen-layout.js

@@ -16,11 +16,9 @@ function ScreenLayout(_ref) {
   let {
     name
   } = _ref;
-  const parentMenu = name === undefined ? '' : '/blocks/' + name;
   const hasBorderPanel = useHasBorderPanel(name);
   const hasDimensionsPanel = useHasDimensionsPanel(name);
   return createElement(Fragment, null, createElement(ScreenHeader, {
-    back: parentMenu ? parentMenu : '/',
     title: __('Layout')
   }), hasDimensionsPanel && createElement(DimensionsPanel, {
     name: name

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-layout.js"],"names":["__","BorderPanel","useHasBorderPanel","DimensionsPanel","useHasDimensionsPanel","ScreenHeader","ScreenLayout","name","parentMenu","undefined","hasBorderPanel","hasDimensionsPanel"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,WAAP,IAAsBC,iBAAtB,QAA+C,gBAA/C;AACA,OAAOC,eAAP,IAA0BC,qBAA1B,QAAuD,oBAAvD;AACA,OAAOC,YAAP,MAAyB,UAAzB;;AAEA,SAASC,YAAT,OAAkC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACjC,QAAMC,UAAU,GAAGD,IAAI,KAAKE,SAAT,GAAqB,EAArB,GAA0B,aAAaF,IAA1D;AACA,QAAMG,cAAc,GAAGR,iBAAiB,CAAEK,IAAF,CAAxC;AACA,QAAMI,kBAAkB,GAAGP,qBAAqB,CAAEG,IAAF,CAAhD;AAEA,SACC,8BACC,cAAC,YAAD;AACC,IAAA,IAAI,EAAGC,UAAU,GAAGA,UAAH,GAAgB,GADlC;AAEC,IAAA,KAAK,EAAGR,EAAE,CAAE,QAAF;AAFX,IADD,EAKGW,kBAAkB,IAAI,cAAC,eAAD;AAAiB,IAAA,IAAI,EAAGJ;AAAxB,IALzB,EAMGG,cAAc,IAAI,cAAC,WAAD;AAAa,IAAA,IAAI,EAAGH;AAApB,IANrB,CADD;AAUA;;AAED,eAAeD,YAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport BorderPanel, { useHasBorderPanel } from './border-panel';\nimport DimensionsPanel, { useHasDimensionsPanel } from './dimensions-panel';\nimport ScreenHeader from './header';\n\nfunction ScreenLayout( { name } ) {\n\tconst parentMenu = name === undefined ? '' : '/blocks/' + name;\n\tconst hasBorderPanel = useHasBorderPanel( name );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( name );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\tback={ parentMenu ? parentMenu : '/' }\n\t\t\t\ttitle={ __( 'Layout' ) }\n\t\t\t/>\n\t\t\t{ hasDimensionsPanel && <DimensionsPanel name={ name } /> }\n\t\t\t{ hasBorderPanel && <BorderPanel 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":["__","BorderPanel","useHasBorderPanel","DimensionsPanel","useHasDimensionsPanel","ScreenHeader","ScreenLayout","name","hasBorderPanel","hasDimensionsPanel"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,WAAP,IAAsBC,iBAAtB,QAA+C,gBAA/C;AACA,OAAOC,eAAP,IAA0BC,qBAA1B,QAAuD,oBAAvD;AACA,OAAOC,YAAP,MAAyB,UAAzB;;AAEA,SAASC,YAAT,OAAkC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACjC,QAAMC,cAAc,GAAGN,iBAAiB,CAAEK,IAAF,CAAxC;AACA,QAAME,kBAAkB,GAAGL,qBAAqB,CAAEG,IAAF,CAAhD;AAEA,SACC,8BACC,cAAC,YAAD;AAAc,IAAA,KAAK,EAAGP,EAAE,CAAE,QAAF;AAAxB,IADD,EAEGS,kBAAkB,IAAI,cAAC,eAAD;AAAiB,IAAA,IAAI,EAAGF;AAAxB,IAFzB,EAGGC,cAAc,IAAI,cAAC,WAAD;AAAa,IAAA,IAAI,EAAGD;AAApB,IAHrB,CADD;AAOA;;AAED,eAAeD,YAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport BorderPanel, { useHasBorderPanel } from './border-panel';\nimport DimensionsPanel, { useHasDimensionsPanel } from './dimensions-panel';\nimport ScreenHeader from './header';\n\nfunction ScreenLayout( { name } ) {\n\tconst hasBorderPanel = useHasBorderPanel( 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\t{ hasBorderPanel && <BorderPanel name={ name } /> }\n\t\t</>\n\t);\n}\n\nexport default ScreenLayout;\n"]}

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

@@ -4,7 +4,7 @@ import { createElement, Fragment } from "@wordpress/element";
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { __experimentalPanelColorGradientSettings as PanelColorGradientSettings } from '@wordpress/block-editor';
+import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
@@ -16,7 +16,6 @@ function ScreenLinkColor(_ref) {
   let {
     name
   } = _ref;
-  const parentMenu = name === undefined ? '' : '/blocks/' + name;
   const supports = getSupportedGlobalStylesPanels(name);
   const [solids] = useSetting('color.palette', name);
   const [areCustomSolidsEnabled] = useSetting('color.custom', name);
@@ -30,25 +29,20 @@ function ScreenLinkColor(_ref) {
     return null;
   }
 
-  const settings = [{
-    colorValue: linkColor,
-    onColorChange: setLinkColor,
-    label: __('Link color'),
-    clearable: linkColor === userLinkColor
-  }];
   return createElement(Fragment, null, createElement(ScreenHeader, {
-    back: parentMenu + '/colors',
     title: __('Links'),
     description: __('Set the default color used for links across the site.')
-  }), createElement(PanelColorGradientSettings, {
-    title: __('Color'),
-    settings: settings,
+  }), createElement(ColorGradientControl, {
+    className: "edit-site-screen-link-color__control",
     colors: colorsPerOrigin,
     disableCustomColors: !areCustomSolidsEnabled,
     __experimentalHasMultipleOrigins: true,
     showTitle: false,
     enableAlpha: true,
-    __experimentalIsRenderedInSidebar: true
+    __experimentalIsRenderedInSidebar: true,
+    colorValue: linkColor,
+    onColorChange: setLinkColor,
+    clearable: linkColor === userLinkColor
   }));
 }
 

package/build-module/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":["__","__experimentalPanelColorGradientSettings","PanelColorGradientSettings","ScreenHeader","getSupportedGlobalStylesPanels","useSetting","useStyle","useColorsPerOrigin","ScreenLinkColor","name","parentMenu","undefined","supports","solids","areCustomSolidsEnabled","colorsPerOrigin","isLinkEnabled","hasLinkColor","includes","length","linkColor","setLinkColor","userLinkColor","settings","colorValue","onColorChange","label","clearable"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SAASC,wCAAwC,IAAIC,0BAArD,QAAuF,yBAAvF;AAEA;AACA;AACA;;AACA,OAAOC,YAAP,MAAyB,UAAzB;AACA,SACCC,8BADD,EAECC,UAFD,EAGCC,QAHD,EAICC,kBAJD,QAKO,SALP;;AAOA,SAASC,eAAT,OAAqC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACpC,QAAMC,UAAU,GAAGD,IAAI,KAAKE,SAAT,GAAqB,EAArB,GAA0B,aAAaF,IAA1D;AACA,QAAMG,QAAQ,GAAGR,8BAA8B,CAAEK,IAAF,CAA/C;AACA,QAAM,CAAEI,MAAF,IAAaR,UAAU,CAAE,eAAF,EAAmBI,IAAnB,CAA7B;AACA,QAAM,CAAEK,sBAAF,IAA6BT,UAAU,CAAE,cAAF,EAAkBI,IAAlB,CAA7C;AAEA,QAAMM,eAAe,GAAGR,kBAAkB,CAAEE,IAAF,CAA1C;AAEA,QAAM,CAAEO,aAAF,IAAoBX,UAAU,CAAE,YAAF,EAAgBI,IAAhB,CAApC;AAEA,QAAMQ,YAAY,GACjBL,QAAQ,CAACM,QAAT,CAAmB,WAAnB,KACAF,aADA,KAEEH,MAAM,CAACM,MAAP,GAAgB,CAAhB,IAAqBL,sBAFvB,CADD;AAKA,QAAM,CAAEM,SAAF,EAAaC,YAAb,IAA8Bf,QAAQ,CAC3C,0BAD2C,EAE3CG,IAF2C,CAA5C;AAIA,QAAM,CAAEa,aAAF,IAAoBhB,QAAQ,CACjC,0BADiC,EAEjCG,IAFiC,EAGjC,MAHiC,CAAlC;;AAMA,MAAK,CAAEQ,YAAP,EAAsB;AACrB,WAAO,IAAP;AACA;;AAED,QAAMM,QAAQ,GAAG,CAChB;AACCC,IAAAA,UAAU,EAAEJ,SADb;AAECK,IAAAA,aAAa,EAAEJ,YAFhB;AAGCK,IAAAA,KAAK,EAAE1B,EAAE,CAAE,YAAF,CAHV;AAIC2B,IAAAA,SAAS,EAAEP,SAAS,KAAKE;AAJ1B,GADgB,CAAjB;AASA,SACC,8BACC,cAAC,YAAD;AACC,IAAA,IAAI,EAAGZ,UAAU,GAAG,SADrB;AAEC,IAAA,KAAK,EAAGV,EAAE,CAAE,OAAF,CAFX;AAGC,IAAA,WAAW,EAAGA,EAAE,CACf,uDADe;AAHjB,IADD,EASC,cAAC,0BAAD;AACC,IAAA,KAAK,EAAGA,EAAE,CAAE,OAAF,CADX;AAEC,IAAA,QAAQ,EAAGuB,QAFZ;AAGC,IAAA,MAAM,EAAGR,eAHV;AAIC,IAAA,mBAAmB,EAAG,CAAED,sBAJzB;AAKC,IAAA,gCAAgC,MALjC;AAMC,IAAA,SAAS,EAAG,KANb;AAOC,IAAA,WAAW,MAPZ;AAQC,IAAA,iCAAiC;AARlC,IATD,CADD;AAsBA;;AAED,eAAeN,eAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalPanelColorGradientSettings as PanelColorGradientSettings } 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 ScreenLinkColor( { name } ) {\n\tconst parentMenu = name === undefined ? '' : '/blocks/' + 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 [ linkColor, setLinkColor ] = useStyle(\n\t\t'elements.link.color.text',\n\t\tname\n\t);\n\tconst [ userLinkColor ] = useStyle(\n\t\t'elements.link.color.text',\n\t\tname,\n\t\t'user'\n\t);\n\n\tif ( ! hasLinkColor ) {\n\t\treturn null;\n\t}\n\n\tconst settings = [\n\t\t{\n\t\t\tcolorValue: linkColor,\n\t\t\tonColorChange: setLinkColor,\n\t\t\tlabel: __( 'Link color' ),\n\t\t\tclearable: linkColor === userLinkColor,\n\t\t},\n\t];\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\tback={ parentMenu + '/colors' }\n\t\t\t\ttitle={ __( 'Links' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Set the default color used for links across the site.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<PanelColorGradientSettings\n\t\t\t\ttitle={ __( 'Color' ) }\n\t\t\t\tsettings={ settings }\n\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\tshowTitle={ false }\n\t\t\t\tenableAlpha\n\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t/>\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":["__","__experimentalColorGradientControl","ColorGradientControl","ScreenHeader","getSupportedGlobalStylesPanels","useSetting","useStyle","useColorsPerOrigin","ScreenLinkColor","name","supports","solids","areCustomSolidsEnabled","colorsPerOrigin","isLinkEnabled","hasLinkColor","includes","length","linkColor","setLinkColor","userLinkColor"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SAASC,kCAAkC,IAAIC,oBAA/C,QAA2E,yBAA3E;AAEA;AACA;AACA;;AACA,OAAOC,YAAP,MAAyB,UAAzB;AACA,SACCC,8BADD,EAECC,UAFD,EAGCC,QAHD,EAICC,kBAJD,QAKO,SALP;;AAOA,SAASC,eAAT,OAAqC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACpC,QAAMC,QAAQ,GAAGN,8BAA8B,CAAEK,IAAF,CAA/C;AACA,QAAM,CAAEE,MAAF,IAAaN,UAAU,CAAE,eAAF,EAAmBI,IAAnB,CAA7B;AACA,QAAM,CAAEG,sBAAF,IAA6BP,UAAU,CAAE,cAAF,EAAkBI,IAAlB,CAA7C;AAEA,QAAMI,eAAe,GAAGN,kBAAkB,CAAEE,IAAF,CAA1C;AAEA,QAAM,CAAEK,aAAF,IAAoBT,UAAU,CAAE,YAAF,EAAgBI,IAAhB,CAApC;AAEA,QAAMM,YAAY,GACjBL,QAAQ,CAACM,QAAT,CAAmB,WAAnB,KACAF,aADA,KAEEH,MAAM,CAACM,MAAP,GAAgB,CAAhB,IAAqBL,sBAFvB,CADD;AAKA,QAAM,CAAEM,SAAF,EAAaC,YAAb,IAA8Bb,QAAQ,CAC3C,0BAD2C,EAE3CG,IAF2C,CAA5C;AAIA,QAAM,CAAEW,aAAF,IAAoBd,QAAQ,CACjC,0BADiC,EAEjCG,IAFiC,EAGjC,MAHiC,CAAlC;;AAMA,MAAK,CAAEM,YAAP,EAAsB;AACrB,WAAO,IAAP;AACA;;AAED,SACC,8BACC,cAAC,YAAD;AACC,IAAA,KAAK,EAAGf,EAAE,CAAE,OAAF,CADX;AAEC,IAAA,WAAW,EAAGA,EAAE,CACf,uDADe;AAFjB,IADD,EAOC,cAAC,oBAAD;AACC,IAAA,SAAS,EAAC,sCADX;AAEC,IAAA,MAAM,EAAGa,eAFV;AAGC,IAAA,mBAAmB,EAAG,CAAED,sBAHzB;AAIC,IAAA,gCAAgC,MAJjC;AAKC,IAAA,SAAS,EAAG,KALb;AAMC,IAAA,WAAW,MANZ;AAOC,IAAA,iCAAiC,MAPlC;AAQC,IAAA,UAAU,EAAGM,SARd;AASC,IAAA,aAAa,EAAGC,YATjB;AAUC,IAAA,SAAS,EAAGD,SAAS,KAAKE;AAV3B,IAPD,CADD;AAsBA;;AAED,eAAeZ,eAAf","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 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 [ linkColor, setLinkColor ] = useStyle(\n\t\t'elements.link.color.text',\n\t\tname\n\t);\n\tconst [ userLinkColor ] = useStyle(\n\t\t'elements.link.color.text',\n\t\tname,\n\t\t'user'\n\t);\n\n\tif ( ! hasLinkColor ) {\n\t\treturn null;\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 default color used for links across the site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<ColorGradientControl\n\t\t\t\tclassName=\"edit-site-screen-link-color__control\"\n\t\t\t\tcolors={ colorsPerOrigin }\n\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\tshowTitle={ false }\n\t\t\t\tenableAlpha\n\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\tcolorValue={ linkColor }\n\t\t\t\tonColorChange={ setLinkColor }\n\t\t\t\tclearable={ linkColor === userLinkColor }\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nexport default ScreenLinkColor;\n"]}

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

@@ -3,21 +3,38 @@ import { createElement } from "@wordpress/element";
 /**
  * WordPress dependencies
  */
-import { __experimentalItemGroup as ItemGroup, __experimentalItem as Item, __experimentalHStack as HStack, FlexItem, CardBody, Card, CardDivider } from '@wordpress/components';
+import { __experimentalItemGroup as ItemGroup, __experimentalItem as Item, __experimentalHStack as HStack, __experimentalVStack as VStack, FlexItem, CardBody, Card, CardDivider } from '@wordpress/components';
 import { isRTL, __ } from '@wordpress/i18n';
 import { chevronLeft, chevronRight, Icon } from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 /**
  * Internal dependencies
  */
 
-import StylesPreview from './preview';
-import NavigationButton from './navigation-button';
+import { NavigationButton } from './navigation-button';
 import ContextMenu from './context-menu';
+import StylesPreview from './preview';
 
 function ScreenRoot() {
+  const {
+    variations
+  } = useSelect(select => {
+    return {
+      variations: select(coreStore).__experimentalGetCurrentThemeGlobalStylesVariations()
+    };
+  }, []);
   return createElement(Card, {
     size: "small"
-  }, createElement(CardBody, null, createElement(StylesPreview, null)), createElement(CardBody, null, createElement(ContextMenu, null)), createElement(CardDivider, null), createElement(CardBody, null, createElement(ItemGroup, null, createElement(Item, null, __('Customize the appearance of specific blocks for the whole site.')), createElement(NavigationButton, {
+  }, createElement(CardBody, null, createElement(VStack, {
+    spacing: 2
+  }, createElement(Card, null, createElement(StylesPreview, null)), !!(variations !== null && variations !== void 0 && variations.length) && createElement(NavigationButton, {
+    path: "/variations"
+  }, createElement(HStack, {
+    justify: "space-between"
+  }, createElement(FlexItem, null, __('Other styles')), createElement(FlexItem, null, createElement(Icon, {
+    icon: isRTL() ? chevronLeft : chevronRight
+  })))))), createElement(CardBody, null, createElement(ContextMenu, null)), createElement(CardDivider, null), createElement(CardBody, null, createElement(ItemGroup, null, createElement(Item, null, __('Customize the appearance of specific blocks for the whole site.')), createElement(NavigationButton, {
     path: "/blocks"
   }, createElement(HStack, {
     justify: "space-between"

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-root.js"],"names":["__experimentalItemGroup","ItemGroup","__experimentalItem","Item","__experimentalHStack","HStack","FlexItem","CardBody","Card","CardDivider","isRTL","__","chevronLeft","chevronRight","Icon","StylesPreview","NavigationButton","ContextMenu","ScreenRoot"],"mappings":";;AAAA;AACA;AACA;AACA,SACCA,uBAAuB,IAAIC,SAD5B,EAECC,kBAAkB,IAAIC,IAFvB,EAGCC,oBAAoB,IAAIC,MAHzB,EAICC,QAJD,EAKCC,QALD,EAMCC,IAND,EAOCC,WAPD,QAQO,uBARP;AASA,SAASC,KAAT,EAAgBC,EAAhB,QAA0B,iBAA1B;AACA,SAASC,WAAT,EAAsBC,YAAtB,EAAoCC,IAApC,QAAgD,kBAAhD;AAEA;AACA;AACA;;AACA,OAAOC,aAAP,MAA0B,WAA1B;AACA,OAAOC,gBAAP,MAA6B,qBAA7B;AACA,OAAOC,WAAP,MAAwB,gBAAxB;;AAEA,SAASC,UAAT,GAAsB;AACrB,SACC,cAAC,IAAD;AAAM,IAAA,IAAI,EAAC;AAAX,KACC,cAAC,QAAD,QACC,cAAC,aAAD,OADD,CADD,EAKC,cAAC,QAAD,QACC,cAAC,WAAD,OADD,CALD,EASC,cAAC,WAAD,OATD,EAWC,cAAC,QAAD,QACC,cAAC,SAAD,QACC,cAAC,IAAD,QACGP,EAAE,CACH,iEADG,CADL,CADD,EAMC,cAAC,gBAAD;AAAkB,IAAA,IAAI,EAAC;AAAvB,KACC,cAAC,MAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,cAAC,QAAD,QAAYA,EAAE,CAAE,QAAF,CAAd,CADD,EAEC,cAAC,QAAD,QACC,cAAC,IAAD;AACC,IAAA,IAAI,EACHD,KAAK,KAAKE,WAAL,GAAmBC;AAF1B,IADD,CAFD,CADD,CAND,CADD,CAXD,CADD;AAmCA;;AAED,eAAeK,UAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalItem as Item,\n\t__experimentalHStack as HStack,\n\tFlexItem,\n\tCardBody,\n\tCard,\n\tCardDivider,\n} from '@wordpress/components';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { chevronLeft, chevronRight, Icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport StylesPreview from './preview';\nimport NavigationButton from './navigation-button';\nimport ContextMenu from './context-menu';\n\nfunction ScreenRoot() {\n\treturn (\n\t\t<Card size=\"small\">\n\t\t\t<CardBody>\n\t\t\t\t<StylesPreview />\n\t\t\t</CardBody>\n\n\t\t\t<CardBody>\n\t\t\t\t<ContextMenu />\n\t\t\t</CardBody>\n\n\t\t\t<CardDivider />\n\n\t\t\t<CardBody>\n\t\t\t\t<ItemGroup>\n\t\t\t\t\t<Item>\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'Customize the appearance of specific blocks for the whole site.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Item>\n\t\t\t\t\t<NavigationButton path=\"/blocks\">\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<FlexItem>\n\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\tisRTL() ? chevronLeft : chevronRight\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</NavigationButton>\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":["__experimentalItemGroup","ItemGroup","__experimentalItem","Item","__experimentalHStack","HStack","__experimentalVStack","VStack","FlexItem","CardBody","Card","CardDivider","isRTL","__","chevronLeft","chevronRight","Icon","useSelect","store","coreStore","NavigationButton","ContextMenu","StylesPreview","ScreenRoot","variations","select","__experimentalGetCurrentThemeGlobalStylesVariations","length"],"mappings":";;AAAA;AACA;AACA;AACA,SACCA,uBAAuB,IAAIC,SAD5B,EAECC,kBAAkB,IAAIC,IAFvB,EAGCC,oBAAoB,IAAIC,MAHzB,EAICC,oBAAoB,IAAIC,MAJzB,EAKCC,QALD,EAMCC,QAND,EAOCC,IAPD,EAQCC,WARD,QASO,uBATP;AAUA,SAASC,KAAT,EAAgBC,EAAhB,QAA0B,iBAA1B;AACA,SAASC,WAAT,EAAsBC,YAAtB,EAAoCC,IAApC,QAAgD,kBAAhD;AACA,SAASC,SAAT,QAA0B,iBAA1B;AACA,SAASC,KAAK,IAAIC,SAAlB,QAAmC,sBAAnC;AAEA;AACA;AACA;;AACA,SAASC,gBAAT,QAAiC,qBAAjC;AACA,OAAOC,WAAP,MAAwB,gBAAxB;AACA,OAAOC,aAAP,MAA0B,WAA1B;;AAEA,SAASC,UAAT,GAAsB;AACrB,QAAM;AAAEC,IAAAA;AAAF,MAAiBP,SAAS,CAAIQ,MAAF,IAAc;AAC/C,WAAO;AACND,MAAAA,UAAU,EAAEC,MAAM,CACjBN,SADiB,CAAN,CAEVO,mDAFU;AADN,KAAP;AAKA,GAN+B,EAM7B,EAN6B,CAAhC;AAQA,SACC,cAAC,IAAD;AAAM,IAAA,IAAI,EAAC;AAAX,KACC,cAAC,QAAD,QACC,cAAC,MAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,cAAC,IAAD,QACC,cAAC,aAAD,OADD,CADD,EAIG,CAAC,EAAEF,UAAF,aAAEA,UAAF,eAAEA,UAAU,CAAEG,MAAd,CAAD,IACD,cAAC,gBAAD;AAAkB,IAAA,IAAI,EAAC;AAAvB,KACC,cAAC,MAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,cAAC,QAAD,QAAYd,EAAE,CAAE,cAAF,CAAd,CADD,EAEC,cAAC,QAAD,QACC,cAAC,IAAD;AACC,IAAA,IAAI,EACHD,KAAK,KAAKE,WAAL,GAAmBC;AAF1B,IADD,CAFD,CADD,CALF,CADD,CADD,EAuBC,cAAC,QAAD,QACC,cAAC,WAAD,OADD,CAvBD,EA2BC,cAAC,WAAD,OA3BD,EA6BC,cAAC,QAAD,QACC,cAAC,SAAD,QACC,cAAC,IAAD,QACGF,EAAE,CACH,iEADG,CADL,CADD,EAMC,cAAC,gBAAD;AAAkB,IAAA,IAAI,EAAC;AAAvB,KACC,cAAC,MAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,cAAC,QAAD,QAAYA,EAAE,CAAE,QAAF,CAAd,CADD,EAEC,cAAC,QAAD,QACC,cAAC,IAAD;AACC,IAAA,IAAI,EACHD,KAAK,KAAKE,WAAL,GAAmBC;AAF1B,IADD,CAFD,CADD,CAND,CADD,CA7BD,CADD;AAqDA;;AAED,eAAeQ,UAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalItem as Item,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tFlexItem,\n\tCardBody,\n\tCard,\n\tCardDivider,\n} from '@wordpress/components';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { chevronLeft, chevronRight, Icon } from '@wordpress/icons';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { NavigationButton } 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: select(\n\t\t\t\tcoreStore\n\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={ 2 }>\n\t\t\t\t\t<Card>\n\t\t\t\t\t\t<StylesPreview />\n\t\t\t\t\t</Card>\n\t\t\t\t\t{ !! variations?.length && (\n\t\t\t\t\t\t<NavigationButton path=\"/variations\">\n\t\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t\t<FlexItem>{ __( 'Other styles' ) }</FlexItem>\n\t\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t\t<Icon\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</FlexItem>\n\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t</NavigationButton>\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\n\t\t\t</CardBody>\n\n\t\t\t<CardBody>\n\t\t\t\t<ContextMenu />\n\t\t\t</CardBody>\n\n\t\t\t<CardDivider />\n\n\t\t\t<CardBody>\n\t\t\t\t<ItemGroup>\n\t\t\t\t\t<Item>\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'Customize the appearance of specific blocks for the whole site.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Item>\n\t\t\t\t\t<NavigationButton path=\"/blocks\">\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<FlexItem>\n\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\tisRTL() ? chevronLeft : chevronRight\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</NavigationButton>\n\t\t\t\t</ItemGroup>\n\t\t\t</CardBody>\n\t\t</Card>\n\t);\n}\n\nexport default ScreenRoot;\n"]}