@wordpress/edit-site 3.0.22 → 3.1.0

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

@@ -17,7 +17,7 @@ var _header = _interopRequireDefault(require("./header"));
 
 var _palette = _interopRequireDefault(require("./palette"));
 
-var _navigationButton = _interopRequireDefault(require("./navigation-button"));
+var _navigationButton = require("./navigation-button");
 
 var _hooks = require("./hooks");
 
@@ -44,7 +44,7 @@ function BackgroundColorItem(_ref) {
     return null;
   }
 
-  return (0, _element.createElement)(_navigationButton.default, {
+  return (0, _element.createElement)(_navigationButton.NavigationButton, {
     path: parentMenu + '/colors/background'
   }, (0, _element.createElement)(_components.__experimentalHStack, {
     justify: "flex-start"
@@ -66,7 +66,7 @@ function TextColorItem(_ref2) {
     return null;
   }
 
-  return (0, _element.createElement)(_navigationButton.default, {
+  return (0, _element.createElement)(_navigationButton.NavigationButton, {
     path: parentMenu + '/colors/text'
   }, (0, _element.createElement)(_components.__experimentalHStack, {
     justify: "flex-start"
@@ -88,7 +88,7 @@ function LinkColorItem(_ref3) {
     return null;
   }
 
-  return (0, _element.createElement)(_navigationButton.default, {
+  return (0, _element.createElement)(_navigationButton.NavigationButton, {
     path: parentMenu + '/colors/link'
   }, (0, _element.createElement)(_components.__experimentalHStack, {
     justify: "flex-start"
@@ -103,9 +103,8 @@ function ScreenColors(_ref4) {
   } = _ref4;
   const parentMenu = name === undefined ? '' : '/blocks/' + name;
   return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
-    back: parentMenu ? parentMenu : '/',
     title: (0, _i18n.__)('Colors'),
-    description: (0, _i18n.__)('Manage palettes and the default color of different global elements on the website.')
+    description: (0, _i18n.__)('Manage palettes and the default color of different global elements on the site.')
   }), (0, _element.createElement)("div", {
     className: "edit-site-global-styles-screen-colors"
   }, (0, _element.createElement)(_components.__experimentalVStack, {

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","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":["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/components/global-styles/screen-layout.js

@@ -32,11 +32,9 @@ function ScreenLayout(_ref) {
   let {
     name
   } = _ref;
-  const parentMenu = name === undefined ? '' : '/blocks/' + name;
   const hasBorderPanel = (0, _borderPanel.useHasBorderPanel)(name);
   const hasDimensionsPanel = (0, _dimensionsPanel.useHasDimensionsPanel)(name);
   return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
-    back: parentMenu ? parentMenu : '/',
     title: (0, _i18n.__)('Layout')
   }), hasDimensionsPanel && (0, _element.createElement)(_dimensionsPanel.default, {
     name: name

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","parentMenu","undefined","hasBorderPanel","hasDimensionsPanel"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;;;;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAKA,SAASA,YAAT,OAAkC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACjC,QAAMC,UAAU,GAAGD,IAAI,KAAKE,SAAT,GAAqB,EAArB,GAA0B,aAAaF,IAA1D;AACA,QAAMG,cAAc,GAAG,oCAAmBH,IAAnB,CAAvB;AACA,QAAMI,kBAAkB,GAAG,4CAAuBJ,IAAvB,CAA3B;AAEA,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,IAAI,EAAGC,UAAU,GAAGA,UAAH,GAAgB,GADlC;AAEC,IAAA,KAAK,EAAG,cAAI,QAAJ;AAFT,IADD,EAKGG,kBAAkB,IAAI,4BAAC,wBAAD;AAAiB,IAAA,IAAI,EAAGJ;AAAxB,IALzB,EAMGG,cAAc,IAAI,4BAAC,oBAAD;AAAa,IAAA,IAAI,EAAGH;AAApB,IANrB,CADD;AAUA;;eAEcD,Y","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":["ScreenLayout","name","hasBorderPanel","hasDimensionsPanel"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;;;;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAKA,SAASA,YAAT,OAAkC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACjC,QAAMC,cAAc,GAAG,oCAAmBD,IAAnB,CAAvB;AACA,QAAME,kBAAkB,GAAG,4CAAuBF,IAAvB,CAA3B;AAEA,SACC,qDACC,4BAAC,eAAD;AAAc,IAAA,KAAK,EAAG,cAAI,QAAJ;AAAtB,IADD,EAEGE,kBAAkB,IAAI,4BAAC,wBAAD;AAAiB,IAAA,IAAI,EAAGF;AAAxB,IAFzB,EAGGC,cAAc,IAAI,4BAAC,oBAAD;AAAa,IAAA,IAAI,EAAGD;AAApB,IAHrB,CADD;AAOA;;eAEcD,Y","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/components/global-styles/screen-link-color.js

@@ -28,7 +28,6 @@ function ScreenLinkColor(_ref) {
   let {
     name
   } = _ref;
-  const parentMenu = name === undefined ? '' : '/blocks/' + name;
   const supports = (0, _hooks.getSupportedGlobalStylesPanels)(name);
   const [solids] = (0, _hooks.useSetting)('color.palette', name);
   const [areCustomSolidsEnabled] = (0, _hooks.useSetting)('color.custom', name);
@@ -42,25 +41,20 @@ function ScreenLinkColor(_ref) {
     return null;
   }
 
-  const settings = [{
-    colorValue: linkColor,
-    onColorChange: setLinkColor,
-    label: (0, _i18n.__)('Link color'),
-    clearable: linkColor === userLinkColor
-  }];
   return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
-    back: parentMenu + '/colors',
     title: (0, _i18n.__)('Links'),
     description: (0, _i18n.__)('Set the default color used for links across the site.')
-  }), (0, _element.createElement)(_blockEditor.__experimentalPanelColorGradientSettings, {
-    title: (0, _i18n.__)('Color'),
-    settings: settings,
+  }), (0, _element.createElement)(_blockEditor.__experimentalColorGradientControl, {
+    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/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","parentMenu","undefined","supports","solids","areCustomSolidsEnabled","colorsPerOrigin","isLinkEnabled","hasLinkColor","includes","length","linkColor","setLinkColor","userLinkColor","settings","colorValue","onColorChange","label","clearable"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AAVA;AACA;AACA;;AAIA;AACA;AACA;AASA,SAASA,eAAT,OAAqC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACpC,QAAMC,UAAU,GAAGD,IAAI,KAAKE,SAAT,GAAqB,EAArB,GAA0B,aAAaF,IAA1D;AACA,QAAMG,QAAQ,GAAG,2CAAgCH,IAAhC,CAAjB;AACA,QAAM,CAAEI,MAAF,IAAa,uBAAY,eAAZ,EAA6BJ,IAA7B,CAAnB;AACA,QAAM,CAAEK,sBAAF,IAA6B,uBAAY,cAAZ,EAA4BL,IAA5B,CAAnC;AAEA,QAAMM,eAAe,GAAG,+BAAoBN,IAApB,CAAxB;AAEA,QAAM,CAAEO,aAAF,IAAoB,uBAAY,YAAZ,EAA0BP,IAA1B,CAA1B;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,IAA8B,qBACnC,0BADmC,EAEnCZ,IAFmC,CAApC;AAIA,QAAM,CAAEa,aAAF,IAAoB,qBACzB,0BADyB,EAEzBb,IAFyB,EAGzB,MAHyB,CAA1B;;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,EAAE,cAAI,YAAJ,CAHR;AAICC,IAAAA,SAAS,EAAEP,SAAS,KAAKE;AAJ1B,GADgB,CAAjB;AASA,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,IAAI,EAAGZ,UAAU,GAAG,SADrB;AAEC,IAAA,KAAK,EAAG,cAAI,OAAJ,CAFT;AAGC,IAAA,WAAW,EAAG,cACb,uDADa;AAHf,IADD,EASC,4BAAC,qDAAD;AACC,IAAA,KAAK,EAAG,cAAI,OAAJ,CADT;AAEC,IAAA,QAAQ,EAAGa,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;;eAEcN,e","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":["ScreenLinkColor","name","supports","solids","areCustomSolidsEnabled","colorsPerOrigin","isLinkEnabled","hasLinkColor","includes","length","linkColor","setLinkColor","userLinkColor"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AAVA;AACA;AACA;;AAIA;AACA;AACA;AASA,SAASA,eAAT,OAAqC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACpC,QAAMC,QAAQ,GAAG,2CAAgCD,IAAhC,CAAjB;AACA,QAAM,CAAEE,MAAF,IAAa,uBAAY,eAAZ,EAA6BF,IAA7B,CAAnB;AACA,QAAM,CAAEG,sBAAF,IAA6B,uBAAY,cAAZ,EAA4BH,IAA5B,CAAnC;AAEA,QAAMI,eAAe,GAAG,+BAAoBJ,IAApB,CAAxB;AAEA,QAAM,CAAEK,aAAF,IAAoB,uBAAY,YAAZ,EAA0BL,IAA1B,CAA1B;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,IAA8B,qBACnC,0BADmC,EAEnCV,IAFmC,CAApC;AAIA,QAAM,CAAEW,aAAF,IAAoB,qBACzB,0BADyB,EAEzBX,IAFyB,EAGzB,MAHyB,CAA1B;;AAMA,MAAK,CAAEM,YAAP,EAAsB;AACrB,WAAO,IAAP;AACA;;AAED,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,KAAK,EAAG,cAAI,OAAJ,CADT;AAEC,IAAA,WAAW,EAAG,cACb,uDADa;AAFf,IADD,EAOC,4BAAC,+CAAD;AACC,IAAA,SAAS,EAAC,sCADX;AAEC,IAAA,MAAM,EAAGF,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;;eAEcZ,e","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/components/global-styles/screen-root.js

@@ -15,12 +15,16 @@ var _i18n = require("@wordpress/i18n");
 
 var _icons = require("@wordpress/icons");
 
-var _preview = _interopRequireDefault(require("./preview"));
+var _data = require("@wordpress/data");
+
+var _coreData = require("@wordpress/core-data");
 
-var _navigationButton = _interopRequireDefault(require("./navigation-button"));
+var _navigationButton = require("./navigation-button");
 
 var _contextMenu = _interopRequireDefault(require("./context-menu"));
 
+var _preview = _interopRequireDefault(require("./preview"));
+
 /**
  * WordPress dependencies
  */
@@ -29,9 +33,24 @@ var _contextMenu = _interopRequireDefault(require("./context-menu"));
  * Internal dependencies
  */
 function ScreenRoot() {
+  const {
+    variations
+  } = (0, _data.useSelect)(select => {
+    return {
+      variations: select(_coreData.store).__experimentalGetCurrentThemeGlobalStylesVariations()
+    };
+  }, []);
   return (0, _element.createElement)(_components.Card, {
     size: "small"
-  }, (0, _element.createElement)(_components.CardBody, null, (0, _element.createElement)(_preview.default, null)), (0, _element.createElement)(_components.CardBody, null, (0, _element.createElement)(_contextMenu.default, null)), (0, _element.createElement)(_components.CardDivider, null), (0, _element.createElement)(_components.CardBody, null, (0, _element.createElement)(_components.__experimentalItemGroup, null, (0, _element.createElement)(_components.__experimentalItem, null, (0, _i18n.__)('Customize the appearance of specific blocks for the whole site.')), (0, _element.createElement)(_navigationButton.default, {
+  }, (0, _element.createElement)(_components.CardBody, null, (0, _element.createElement)(_components.__experimentalVStack, {
+    spacing: 2
+  }, (0, _element.createElement)(_components.Card, null, (0, _element.createElement)(_preview.default, null)), !!(variations !== null && variations !== void 0 && variations.length) && (0, _element.createElement)(_navigationButton.NavigationButton, {
+    path: "/variations"
+  }, (0, _element.createElement)(_components.__experimentalHStack, {
+    justify: "space-between"
+  }, (0, _element.createElement)(_components.FlexItem, null, (0, _i18n.__)('Other styles')), (0, _element.createElement)(_components.FlexItem, null, (0, _element.createElement)(_icons.Icon, {
+    icon: (0, _i18n.isRTL)() ? _icons.chevronLeft : _icons.chevronRight
+  })))))), (0, _element.createElement)(_components.CardBody, null, (0, _element.createElement)(_contextMenu.default, null)), (0, _element.createElement)(_components.CardDivider, null), (0, _element.createElement)(_components.CardBody, null, (0, _element.createElement)(_components.__experimentalItemGroup, null, (0, _element.createElement)(_components.__experimentalItem, null, (0, _i18n.__)('Customize the appearance of specific blocks for the whole site.')), (0, _element.createElement)(_navigationButton.NavigationButton, {
     path: "/blocks"
   }, (0, _element.createElement)(_components.__experimentalHStack, {
     justify: "space-between"

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","chevronLeft","chevronRight"],"mappings":";;;;;;;;;;;AAGA;;AASA;;AACA;;AAKA;;AACA;;AACA;;AApBA;AACA;AACA;;AAaA;AACA;AACA;AAKA,SAASA,UAAT,GAAsB;AACrB,SACC,4BAAC,gBAAD;AAAM,IAAA,IAAI,EAAC;AAAX,KACC,4BAAC,oBAAD,QACC,4BAAC,gBAAD,OADD,CADD,EAKC,4BAAC,oBAAD,QACC,4BAAC,oBAAD,OADD,CALD,EASC,4BAAC,uBAAD,OATD,EAWC,4BAAC,oBAAD,QACC,4BAAC,mCAAD,QACC,4BAAC,8BAAD,QACG,cACD,iEADC,CADH,CADD,EAMC,4BAAC,yBAAD;AAAkB,IAAA,IAAI,EAAC;AAAvB,KACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,4BAAC,oBAAD,QAAY,cAAI,QAAJ,CAAZ,CADD,EAEC,4BAAC,oBAAD,QACC,4BAAC,WAAD;AACC,IAAA,IAAI,EACH,qBAAUC,kBAAV,GAAwBC;AAF1B,IADD,CAFD,CADD,CAND,CADD,CAXD,CADD;AAmCA;;eAEcF,U","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":["ScreenRoot","variations","select","coreStore","__experimentalGetCurrentThemeGlobalStylesVariations","length","chevronLeft","chevronRight"],"mappings":";;;;;;;;;;;AAGA;;AAUA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AAvBA;AACA;AACA;;AAgBA;AACA;AACA;AAKA,SAASA,UAAT,GAAsB;AACrB,QAAM;AAAEC,IAAAA;AAAF,MAAiB,qBAAaC,MAAF,IAAc;AAC/C,WAAO;AACND,MAAAA,UAAU,EAAEC,MAAM,CACjBC,eADiB,CAAN,CAEVC,mDAFU;AADN,KAAP;AAKA,GANsB,EAMpB,EANoB,CAAvB;AAQA,SACC,4BAAC,gBAAD;AAAM,IAAA,IAAI,EAAC;AAAX,KACC,4BAAC,oBAAD,QACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,4BAAC,gBAAD,QACC,4BAAC,gBAAD,OADD,CADD,EAIG,CAAC,EAAEH,UAAF,aAAEA,UAAF,eAAEA,UAAU,CAAEI,MAAd,CAAD,IACD,4BAAC,kCAAD;AAAkB,IAAA,IAAI,EAAC;AAAvB,KACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,4BAAC,oBAAD,QAAY,cAAI,cAAJ,CAAZ,CADD,EAEC,4BAAC,oBAAD,QACC,4BAAC,WAAD;AACC,IAAA,IAAI,EACH,qBAAUC,kBAAV,GAAwBC;AAF1B,IADD,CAFD,CADD,CALF,CADD,CADD,EAuBC,4BAAC,oBAAD,QACC,4BAAC,oBAAD,OADD,CAvBD,EA2BC,4BAAC,uBAAD,OA3BD,EA6BC,4BAAC,oBAAD,QACC,4BAAC,mCAAD,QACC,4BAAC,8BAAD,QACG,cACD,iEADC,CADH,CADD,EAMC,4BAAC,kCAAD;AAAkB,IAAA,IAAI,EAAC;AAAvB,KACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,4BAAC,oBAAD,QAAY,cAAI,QAAJ,CAAZ,CADD,EAEC,4BAAC,oBAAD,QACC,4BAAC,WAAD;AACC,IAAA,IAAI,EACH,qBAAUD,kBAAV,GAAwBC;AAF1B,IADD,CAFD,CADD,CAND,CADD,CA7BD,CADD;AAqDA;;eAEcP,U","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"]}

package/build/components/global-styles/screen-style-variations.js

@@ -0,0 +1,138 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _element = require("@wordpress/element");
+
+var _lodash = require("lodash");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _coreData = require("@wordpress/core-data");
+
+var _data = require("@wordpress/data");
+
+var _keycodes = require("@wordpress/keycodes");
+
+var _components = require("@wordpress/components");
+
+var _i18n = require("@wordpress/i18n");
+
+var _globalStylesProvider = require("./global-styles-provider");
+
+var _context = require("./context");
+
+var _preview = _interopRequireDefault(require("./preview"));
+
+var _header = _interopRequireDefault(require("./header"));
+
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+function compareVariations(a, b) {
+  return (0, _lodash.isEqual)(a.styles, b.styles) && (0, _lodash.isEqual)(a.settings, b.settings);
+}
+
+function Variation(_ref) {
+  let {
+    variation
+  } = _ref;
+  const {
+    base,
+    user,
+    setUserConfig
+  } = (0, _element.useContext)(_context.GlobalStylesContext);
+  const context = (0, _element.useMemo)(() => {
+    var _variation$settings, _variation$styles;
+
+    return {
+      user: {
+        settings: (_variation$settings = variation.settings) !== null && _variation$settings !== void 0 ? _variation$settings : {},
+        styles: (_variation$styles = variation.styles) !== null && _variation$styles !== void 0 ? _variation$styles : {}
+      },
+      base,
+      merged: (0, _globalStylesProvider.mergeBaseAndUserConfigs)(base, variation),
+      setUserConfig: () => {}
+    };
+  }, [variation, base]);
+
+  const selectVariation = () => {
+    setUserConfig(() => {
+      return {
+        settings: variation.settings,
+        styles: variation.styles
+      };
+    });
+  };
+
+  const selectOnEnter = event => {
+    if (event.keyCode === _keycodes.ENTER) {
+      event.preventDefault();
+      selectVariation();
+    }
+  };
+
+  const isActive = (0, _element.useMemo)(() => {
+    return compareVariations(user, variation);
+  }, [user, variation]);
+  return (0, _element.createElement)(_context.GlobalStylesContext.Provider, {
+    value: context
+  }, (0, _element.createElement)("div", {
+    className: (0, _classnames.default)('edit-site-global-styles-variations_item', {
+      'is-active': isActive
+    }),
+    role: "button",
+    onClick: selectVariation,
+    onKeyDown: selectOnEnter,
+    tabIndex: "0"
+  }, (0, _element.createElement)(_preview.default, {
+    height: 100
+  })));
+}
+
+function ScreenStyleVariations() {
+  const {
+    variations
+  } = (0, _data.useSelect)(select => {
+    return {
+      variations: select(_coreData.store).__experimentalGetCurrentThemeGlobalStylesVariations()
+    };
+  }, []);
+  const withEmptyVariation = (0, _element.useMemo)(() => {
+    return [{
+      name: (0, _i18n.__)('Default'),
+      settings: {},
+      styles: {}
+    }, ...variations];
+  }, [variations]);
+  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
+    back: "/",
+    title: (0, _i18n.__)('Other styles'),
+    description: (0, _i18n.__)('Choose a different style combination for the theme styles')
+  }), (0, _element.createElement)(_components.Card, {
+    size: "small",
+    isBorderless: true
+  }, (0, _element.createElement)(_components.CardBody, null, (0, _element.createElement)(_components.__experimentalGrid, {
+    columns: 2
+  }, withEmptyVariation === null || withEmptyVariation === void 0 ? void 0 : withEmptyVariation.map((variation, index) => (0, _element.createElement)(Variation, {
+    key: index,
+    variation: variation
+  }))))));
+}
+
+var _default = ScreenStyleVariations;
+exports.default = _default;
+//# sourceMappingURL=screen-style-variations.js.map

package/build/components/global-styles/screen-style-variations.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-style-variations.js"],"names":["compareVariations","a","b","styles","settings","Variation","variation","base","user","setUserConfig","GlobalStylesContext","context","merged","selectVariation","selectOnEnter","event","keyCode","ENTER","preventDefault","isActive","ScreenStyleVariations","variations","select","coreStore","__experimentalGetCurrentThemeGlobalStylesVariations","withEmptyVariation","name","map","index"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { isEqual } from 'lodash';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { useMemo, useContext } from '@wordpress/element';\nimport { ENTER } from '@wordpress/keycodes';\nimport {\n\t__experimentalGrid as Grid,\n\tCard,\n\tCardBody,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { mergeBaseAndUserConfigs } from './global-styles-provider';\nimport { GlobalStylesContext } from './context';\nimport StylesPreview from './preview';\nimport ScreenHeader from './header';\n\nfunction compareVariations( a, b ) {\n\treturn isEqual( a.styles, b.styles ) && isEqual( a.settings, b.settings );\n}\n\nfunction Variation( { variation } ) {\n\tconst { base, user, setUserConfig } = useContext( GlobalStylesContext );\n\tconst context = useMemo( () => {\n\t\treturn {\n\t\t\tuser: {\n\t\t\t\tsettings: variation.settings ?? {},\n\t\t\t\tstyles: variation.styles ?? {},\n\t\t\t},\n\t\t\tbase,\n\t\t\tmerged: mergeBaseAndUserConfigs( base, variation ),\n\t\t\tsetUserConfig: () => {},\n\t\t};\n\t}, [ variation, base ] );\n\n\tconst selectVariation = () => {\n\t\tsetUserConfig( () => {\n\t\t\treturn {\n\t\t\t\tsettings: variation.settings,\n\t\t\t\tstyles: variation.styles,\n\t\t\t};\n\t\t} );\n\t};\n\n\tconst selectOnEnter = ( event ) => {\n\t\tif ( event.keyCode === ENTER ) {\n\t\t\tevent.preventDefault();\n\t\t\tselectVariation();\n\t\t}\n\t};\n\n\tconst isActive = useMemo( () => {\n\t\treturn compareVariations( user, variation );\n\t}, [ user, variation ] );\n\n\treturn (\n\t\t<GlobalStylesContext.Provider value={ context }>\n\t\t\t<div\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'edit-site-global-styles-variations_item',\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-active': isActive,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t\trole=\"button\"\n\t\t\t\tonClick={ selectVariation }\n\t\t\t\tonKeyDown={ selectOnEnter }\n\t\t\t\ttabIndex=\"0\"\n\t\t\t>\n\t\t\t\t<StylesPreview height={ 100 } />\n\t\t\t</div>\n\t\t</GlobalStylesContext.Provider>\n\t);\n}\n\nfunction ScreenStyleVariations() {\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\tconst withEmptyVariation = useMemo( () => {\n\t\treturn [\n\t\t\t{\n\t\t\t\tname: __( 'Default' ),\n\t\t\t\tsettings: {},\n\t\t\t\tstyles: {},\n\t\t\t},\n\t\t\t...variations,\n\t\t];\n\t}, [ variations ] );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\tback=\"/\"\n\t\t\t\ttitle={ __( 'Other styles' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Choose a different style combination for the theme styles'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<Card size=\"small\" isBorderless>\n\t\t\t\t<CardBody>\n\t\t\t\t\t<Grid columns={ 2 }>\n\t\t\t\t\t\t{ withEmptyVariation?.map( ( variation, index ) => (\n\t\t\t\t\t\t\t<Variation key={ index } variation={ variation } />\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</Grid>\n\t\t\t\t</CardBody>\n\t\t\t</Card>\n\t\t</>\n\t);\n}\n\nexport default ScreenStyleVariations;\n"]}

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

@@ -28,7 +28,6 @@ function ScreenTextColor(_ref) {
   let {
     name
   } = _ref;
-  const parentMenu = name === undefined ? '' : '/blocks/' + name;
   const supports = (0, _hooks.getSupportedGlobalStylesPanels)(name);
   const [solids] = (0, _hooks.useSetting)('color.palette', name);
   const [areCustomSolidsEnabled] = (0, _hooks.useSetting)('color.custom', name);
@@ -42,25 +41,20 @@ function ScreenTextColor(_ref) {
     return null;
   }
 
-  const settings = [{
-    colorValue: color,
-    onColorChange: setColor,
-    label: (0, _i18n.__)('Text color'),
-    clearable: color === userColor
-  }];
   return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
-    back: parentMenu + '/colors',
     title: (0, _i18n.__)('Text'),
     description: (0, _i18n.__)('Set the default color used for text across the site.')
-  }), (0, _element.createElement)(_blockEditor.__experimentalPanelColorGradientSettings, {
-    title: (0, _i18n.__)('Color'),
-    settings: settings,
+  }), (0, _element.createElement)(_blockEditor.__experimentalColorGradientControl, {
+    className: "edit-site-screen-text-color__control",
     colors: colorsPerOrigin,
     disableCustomColors: !areCustomSolidsEnabled,
     __experimentalHasMultipleOrigins: true,
     showTitle: false,
     enableAlpha: true,
-    __experimentalIsRenderedInSidebar: true
+    __experimentalIsRenderedInSidebar: true,
+    colorValue: color,
+    onColorChange: setColor,
+    clearable: color === userColor
   }));
 }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-text-color.js"],"names":["ScreenTextColor","name","parentMenu","undefined","supports","solids","areCustomSolidsEnabled","isTextEnabled","colorsPerOrigin","hasTextColor","includes","length","color","setColor","userColor","settings","colorValue","onColorChange","label","clearable"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AAVA;AACA;AACA;;AAIA;AACA;AACA;AASA,SAASA,eAAT,OAAqC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACpC,QAAMC,UAAU,GAAGD,IAAI,KAAKE,SAAT,GAAqB,EAArB,GAA0B,aAAaF,IAA1D;AACA,QAAMG,QAAQ,GAAG,2CAAgCH,IAAhC,CAAjB;AACA,QAAM,CAAEI,MAAF,IAAa,uBAAY,eAAZ,EAA6BJ,IAA7B,CAAnB;AACA,QAAM,CAAEK,sBAAF,IAA6B,uBAAY,cAAZ,EAA4BL,IAA5B,CAAnC;AACA,QAAM,CAAEM,aAAF,IAAoB,uBAAY,YAAZ,EAA0BN,IAA1B,CAA1B;AAEA,QAAMO,eAAe,GAAG,+BAAoBP,IAApB,CAAxB;AAEA,QAAMQ,YAAY,GACjBL,QAAQ,CAACM,QAAT,CAAmB,OAAnB,KACAH,aADA,KAEEF,MAAM,CAACM,MAAP,GAAgB,CAAhB,IAAqBL,sBAFvB,CADD;AAKA,QAAM,CAAEM,KAAF,EAASC,QAAT,IAAsB,qBAAU,YAAV,EAAwBZ,IAAxB,CAA5B;AACA,QAAM,CAAEa,SAAF,IAAgB,qBAAU,YAAV,EAAwBb,IAAxB,EAA8B,MAA9B,CAAtB;;AAEA,MAAK,CAAEQ,YAAP,EAAsB;AACrB,WAAO,IAAP;AACA;;AAED,QAAMM,QAAQ,GAAG,CAChB;AACCC,IAAAA,UAAU,EAAEJ,KADb;AAECK,IAAAA,aAAa,EAAEJ,QAFhB;AAGCK,IAAAA,KAAK,EAAE,cAAI,YAAJ,CAHR;AAICC,IAAAA,SAAS,EAAEP,KAAK,KAAKE;AAJtB,GADgB,CAAjB;AASA,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,IAAI,EAAGZ,UAAU,GAAG,SADrB;AAEC,IAAA,KAAK,EAAG,cAAI,MAAJ,CAFT;AAGC,IAAA,WAAW,EAAG,cACb,sDADa;AAHf,IADD,EASC,4BAAC,qDAAD;AACC,IAAA,KAAK,EAAG,cAAI,OAAJ,CADT;AAEC,IAAA,QAAQ,EAAGa,QAFZ;AAGC,IAAA,MAAM,EAAGP,eAHV;AAIC,IAAA,mBAAmB,EAAG,CAAEF,sBAJzB;AAKC,IAAA,gCAAgC,MALjC;AAMC,IAAA,SAAS,EAAG,KANb;AAOC,IAAA,WAAW,MAPZ;AAQC,IAAA,iCAAiC;AARlC,IATD,CADD;AAsBA;;eAEcN,e","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 ScreenTextColor( { 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\tconst [ isTextEnabled ] = useSetting( 'color.text', name );\n\n\tconst colorsPerOrigin = useColorsPerOrigin( name );\n\n\tconst hasTextColor =\n\t\tsupports.includes( 'color' ) &&\n\t\tisTextEnabled &&\n\t\t( solids.length > 0 || areCustomSolidsEnabled );\n\n\tconst [ color, setColor ] = useStyle( 'color.text', name );\n\tconst [ userColor ] = useStyle( 'color.text', name, 'user' );\n\n\tif ( ! hasTextColor ) {\n\t\treturn null;\n\t}\n\n\tconst settings = [\n\t\t{\n\t\t\tcolorValue: color,\n\t\t\tonColorChange: setColor,\n\t\t\tlabel: __( 'Text color' ),\n\t\t\tclearable: color === userColor,\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={ __( 'Text' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Set the default color used for text 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 ScreenTextColor;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-text-color.js"],"names":["ScreenTextColor","name","supports","solids","areCustomSolidsEnabled","isTextEnabled","colorsPerOrigin","hasTextColor","includes","length","color","setColor","userColor"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AAVA;AACA;AACA;;AAIA;AACA;AACA;AASA,SAASA,eAAT,OAAqC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACpC,QAAMC,QAAQ,GAAG,2CAAgCD,IAAhC,CAAjB;AACA,QAAM,CAAEE,MAAF,IAAa,uBAAY,eAAZ,EAA6BF,IAA7B,CAAnB;AACA,QAAM,CAAEG,sBAAF,IAA6B,uBAAY,cAAZ,EAA4BH,IAA5B,CAAnC;AACA,QAAM,CAAEI,aAAF,IAAoB,uBAAY,YAAZ,EAA0BJ,IAA1B,CAA1B;AAEA,QAAMK,eAAe,GAAG,+BAAoBL,IAApB,CAAxB;AAEA,QAAMM,YAAY,GACjBL,QAAQ,CAACM,QAAT,CAAmB,OAAnB,KACAH,aADA,KAEEF,MAAM,CAACM,MAAP,GAAgB,CAAhB,IAAqBL,sBAFvB,CADD;AAKA,QAAM,CAAEM,KAAF,EAASC,QAAT,IAAsB,qBAAU,YAAV,EAAwBV,IAAxB,CAA5B;AACA,QAAM,CAAEW,SAAF,IAAgB,qBAAU,YAAV,EAAwBX,IAAxB,EAA8B,MAA9B,CAAtB;;AAEA,MAAK,CAAEM,YAAP,EAAsB;AACrB,WAAO,IAAP;AACA;;AAED,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,KAAK,EAAG,cAAI,MAAJ,CADT;AAEC,IAAA,WAAW,EAAG,cACb,sDADa;AAFf,IADD,EAOC,4BAAC,+CAAD;AACC,IAAA,SAAS,EAAC,sCADX;AAEC,IAAA,MAAM,EAAGD,eAFV;AAGC,IAAA,mBAAmB,EAAG,CAAEF,sBAHzB;AAIC,IAAA,gCAAgC,MAJjC;AAKC,IAAA,SAAS,EAAG,KALb;AAMC,IAAA,WAAW,MANZ;AAOC,IAAA,iCAAiC,MAPlC;AAQC,IAAA,UAAU,EAAGM,KARd;AASC,IAAA,aAAa,EAAGC,QATjB;AAUC,IAAA,SAAS,EAAGD,KAAK,KAAKE;AAVvB,IAPD,CADD;AAsBA;;eAEcZ,e","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 ScreenTextColor( { name } ) {\n\tconst supports = getSupportedGlobalStylesPanels( name );\n\tconst [ solids ] = useSetting( 'color.palette', name );\n\tconst [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );\n\tconst [ isTextEnabled ] = useSetting( 'color.text', name );\n\n\tconst colorsPerOrigin = useColorsPerOrigin( name );\n\n\tconst hasTextColor =\n\t\tsupports.includes( 'color' ) &&\n\t\tisTextEnabled &&\n\t\t( solids.length > 0 || areCustomSolidsEnabled );\n\n\tconst [ color, setColor ] = useStyle( 'color.text', name );\n\tconst [ userColor ] = useStyle( 'color.text', name, 'user' );\n\n\tif ( ! hasTextColor ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Text' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Set the default color used for text 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-text-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={ color }\n\t\t\t\tonColorChange={ setColor }\n\t\t\t\tclearable={ color === userColor }\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nexport default ScreenTextColor;\n"]}

package/build/components/global-styles/screen-typography-element.js

@@ -38,9 +38,7 @@ function ScreenTypographyElement(_ref) {
     name,
     element
   } = _ref;
-  const parentMenu = name === undefined ? '/typography' : '/blocks/' + name + '/typography';
   return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
-    back: parentMenu,
     title: elements[element].title,
     description: elements[element].description
   }), (0, _element.createElement)(_typographyPanel.default, {

package/build/components/global-styles/screen-typography-element.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-typography-element.js"],"names":["elements","text","description","title","link","ScreenTypographyElement","name","element","parentMenu","undefined"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;AAIA,MAAMA,QAAQ,GAAG;AAChBC,EAAAA,IAAI,EAAE;AACLC,IAAAA,WAAW,EAAE,cAAI,oCAAJ,CADR;AAELC,IAAAA,KAAK,EAAE,cAAI,MAAJ;AAFF,GADU;AAKhBC,EAAAA,IAAI,EAAE;AACLF,IAAAA,WAAW,EAAE,cAAI,oDAAJ,CADR;AAELC,IAAAA,KAAK,EAAE,cAAI,OAAJ;AAFF;AALU,CAAjB;;AAWA,SAASE,uBAAT,OAAsD;AAAA,MAApB;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAoB;AACrD,QAAMC,UAAU,GACfF,IAAI,KAAKG,SAAT,GAAqB,aAArB,GAAqC,aAAaH,IAAb,GAAoB,aAD1D;AAGA,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,IAAI,EAAGE,UADR;AAEC,IAAA,KAAK,EAAGR,QAAQ,CAAEO,OAAF,CAAR,CAAoBJ,KAF7B;AAGC,IAAA,WAAW,EAAGH,QAAQ,CAAEO,OAAF,CAAR,CAAoBL;AAHnC,IADD,EAMC,4BAAC,wBAAD;AAAiB,IAAA,IAAI,EAAGI,IAAxB;AAA+B,IAAA,OAAO,EAAGC;AAAzC,IAND,CADD;AAUA;;eAEcF,uB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport TypographyPanel from './typography-panel';\nimport ScreenHeader from './header';\n\nconst elements = {\n\ttext: {\n\t\tdescription: __( 'Manage the fonts used on the site.' ),\n\t\ttitle: __( 'Text' ),\n\t},\n\tlink: {\n\t\tdescription: __( 'Manage the fonts and typography used on the links.' ),\n\t\ttitle: __( 'Links' ),\n\t},\n};\n\nfunction ScreenTypographyElement( { name, element } ) {\n\tconst parentMenu =\n\t\tname === undefined ? '/typography' : '/blocks/' + name + '/typography';\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\tback={ parentMenu }\n\t\t\t\ttitle={ elements[ element ].title }\n\t\t\t\tdescription={ elements[ element ].description }\n\t\t\t/>\n\t\t\t<TypographyPanel name={ name } element={ element } />\n\t\t</>\n\t);\n}\n\nexport default ScreenTypographyElement;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-typography-element.js"],"names":["elements","text","description","title","link","ScreenTypographyElement","name","element"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;AAIA,MAAMA,QAAQ,GAAG;AAChBC,EAAAA,IAAI,EAAE;AACLC,IAAAA,WAAW,EAAE,cAAI,oCAAJ,CADR;AAELC,IAAAA,KAAK,EAAE,cAAI,MAAJ;AAFF,GADU;AAKhBC,EAAAA,IAAI,EAAE;AACLF,IAAAA,WAAW,EAAE,cAAI,oDAAJ,CADR;AAELC,IAAAA,KAAK,EAAE,cAAI,OAAJ;AAFF;AALU,CAAjB;;AAWA,SAASE,uBAAT,OAAsD;AAAA,MAApB;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAoB;AACrD,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,KAAK,EAAGP,QAAQ,CAAEO,OAAF,CAAR,CAAoBJ,KAD7B;AAEC,IAAA,WAAW,EAAGH,QAAQ,CAAEO,OAAF,CAAR,CAAoBL;AAFnC,IADD,EAKC,4BAAC,wBAAD;AAAiB,IAAA,IAAI,EAAGI,IAAxB;AAA+B,IAAA,OAAO,EAAGC;AAAzC,IALD,CADD;AASA;;eAEcF,uB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport TypographyPanel from './typography-panel';\nimport ScreenHeader from './header';\n\nconst elements = {\n\ttext: {\n\t\tdescription: __( 'Manage the fonts used on the site.' ),\n\t\ttitle: __( 'Text' ),\n\t},\n\tlink: {\n\t\tdescription: __( 'Manage the fonts and typography used on the links.' ),\n\t\ttitle: __( 'Links' ),\n\t},\n};\n\nfunction ScreenTypographyElement( { name, element } ) {\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ elements[ element ].title }\n\t\t\t\tdescription={ elements[ element ].description }\n\t\t\t/>\n\t\t\t<TypographyPanel name={ name } element={ element } />\n\t\t</>\n\t);\n}\n\nexport default ScreenTypographyElement;\n"]}

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

@@ -15,7 +15,7 @@ var _components = require("@wordpress/components");
 
 var _header = _interopRequireDefault(require("./header"));
 
-var _navigationButton = _interopRequireDefault(require("./navigation-button"));
+var _navigationButton = require("./navigation-button");
 
 var _hooks = require("./hooks");
 
@@ -54,7 +54,7 @@ function Item(_ref) {
     return null;
   }
 
-  return (0, _element.createElement)(_navigationButton.default, {
+  return (0, _element.createElement)(_navigationButton.NavigationButton, {
     path: parentMenu + '/typography/' + element
   }, (0, _element.createElement)(_components.__experimentalHStack, {
     justify: "flex-start"
@@ -78,7 +78,6 @@ function ScreenTypography(_ref2) {
   } = _ref2;
   const parentMenu = name === undefined ? '' : '/blocks/' + name;
   return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
-    back: parentMenu ? parentMenu : '/',
     title: (0, _i18n.__)('Typography'),
     description: (0, _i18n.__)('Manage the typography settings for different elements.')
   }), !name && (0, _element.createElement)("div", {

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-typography.js"],"names":["Item","name","parentMenu","element","label","hasSupport","prefix","extraStyles","textDecoration","fontFamily","fontStyle","fontWeight","letterSpacing","backgroundColor","gradientValue","color","background","ScreenTypography","undefined"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\tFlexItem,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport NavigationButton from './navigation-button';\nimport { useStyle } from './hooks';\nimport Subtitle from './subtitle';\nimport TypographyPanel from './typography-panel';\n\nfunction Item( { name, parentMenu, element, label } ) {\n\tconst hasSupport = ! name;\n\tconst prefix =\n\t\telement === 'text' || ! element ? '' : `elements.${ element }.`;\n\tconst extraStyles =\n\t\telement === 'link'\n\t\t\t? {\n\t\t\t\t\ttextDecoration: 'underline',\n\t\t\t  }\n\t\t\t: {};\n\tconst [ fontFamily ] = useStyle( prefix + 'typography.fontFamily', name );\n\tconst [ fontStyle ] = useStyle( prefix + 'typography.fontStyle', name );\n\tconst [ fontWeight ] = useStyle( prefix + 'typography.fontWeight', name );\n\tconst [ letterSpacing ] = useStyle(\n\t\tprefix + 'typography.letterSpacing',\n\t\tname\n\t);\n\tconst [ backgroundColor ] = useStyle( prefix + 'color.background', name );\n\tconst [ gradientValue ] = useStyle( prefix + 'color.gradient', name );\n\tconst [ color ] = useStyle( prefix + 'color.text', name );\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButton path={ parentMenu + '/typography/' + element }>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem\n\t\t\t\t\tclassName=\"edit-site-global-styles-screen-typography__indicator\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tfontFamily: fontFamily ?? 'serif',\n\t\t\t\t\t\tbackground: gradientValue ?? backgroundColor,\n\t\t\t\t\t\tcolor,\n\t\t\t\t\t\tfontStyle,\n\t\t\t\t\t\tfontWeight,\n\t\t\t\t\t\tletterSpacing,\n\t\t\t\t\t\t...extraStyles,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Aa' ) }\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>{ label }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButton>\n\t);\n}\n\nfunction ScreenTypography( { 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={ __( 'Typography' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Manage the typography settings for different elements.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t{ ! name && (\n\t\t\t\t<div className=\"edit-site-global-styles-screen-typography\">\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<Item\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\telement=\"text\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Text' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Item\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\telement=\"link\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Links' ) }\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</div>\n\t\t\t) }\n\n\t\t\t{ /* no typogrpahy elements support yet for blocks */ }\n\t\t\t{ !! name && <TypographyPanel name={ name } element=\"text\" /> }\n\t\t</>\n\t);\n}\n\nexport default ScreenTypography;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-typography.js"],"names":["Item","name","parentMenu","element","label","hasSupport","prefix","extraStyles","textDecoration","fontFamily","fontStyle","fontWeight","letterSpacing","backgroundColor","gradientValue","color","background","ScreenTypography","undefined"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\tFlexItem,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport { NavigationButton } from './navigation-button';\nimport { useStyle } from './hooks';\nimport Subtitle from './subtitle';\nimport TypographyPanel from './typography-panel';\n\nfunction Item( { name, parentMenu, element, label } ) {\n\tconst hasSupport = ! name;\n\tconst prefix =\n\t\telement === 'text' || ! element ? '' : `elements.${ element }.`;\n\tconst extraStyles =\n\t\telement === 'link'\n\t\t\t? {\n\t\t\t\t\ttextDecoration: 'underline',\n\t\t\t  }\n\t\t\t: {};\n\tconst [ fontFamily ] = useStyle( prefix + 'typography.fontFamily', name );\n\tconst [ fontStyle ] = useStyle( prefix + 'typography.fontStyle', name );\n\tconst [ fontWeight ] = useStyle( prefix + 'typography.fontWeight', name );\n\tconst [ letterSpacing ] = useStyle(\n\t\tprefix + 'typography.letterSpacing',\n\t\tname\n\t);\n\tconst [ backgroundColor ] = useStyle( prefix + 'color.background', name );\n\tconst [ gradientValue ] = useStyle( prefix + 'color.gradient', name );\n\tconst [ color ] = useStyle( prefix + 'color.text', name );\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButton path={ parentMenu + '/typography/' + element }>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem\n\t\t\t\t\tclassName=\"edit-site-global-styles-screen-typography__indicator\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tfontFamily: fontFamily ?? 'serif',\n\t\t\t\t\t\tbackground: gradientValue ?? backgroundColor,\n\t\t\t\t\t\tcolor,\n\t\t\t\t\t\tfontStyle,\n\t\t\t\t\t\tfontWeight,\n\t\t\t\t\t\tletterSpacing,\n\t\t\t\t\t\t...extraStyles,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Aa' ) }\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>{ label }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButton>\n\t);\n}\n\nfunction ScreenTypography( { name } ) {\n\tconst parentMenu = name === undefined ? '' : '/blocks/' + name;\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Typography' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Manage the typography settings for different elements.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t{ ! name && (\n\t\t\t\t<div className=\"edit-site-global-styles-screen-typography\">\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<Item\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\telement=\"text\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Text' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Item\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\telement=\"link\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Links' ) }\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</div>\n\t\t\t) }\n\n\t\t\t{ /* no typography elements support yet for blocks */ }\n\t\t\t{ !! name && <TypographyPanel name={ name } element=\"text\" /> }\n\t\t</>\n\t);\n}\n\nexport default ScreenTypography;\n"]}