@wordpress/edit-site 5.30.0 → 5.32.0

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

@@ -0,0 +1,26 @@
+import { createElement, Fragment } from "react";
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import BackgroundPanel from './background-panel';
+import ScreenHeader from './header';
+import { unlock } from '../../lock-unlock';
+const {
+  useHasBackgroundPanel,
+  useGlobalSetting
+} = unlock(blockEditorPrivateApis);
+function ScreenBackground() {
+  const [settings] = useGlobalSetting('');
+  const hasBackgroundPanel = useHasBackgroundPanel(settings);
+  return createElement(Fragment, null, createElement(ScreenHeader, {
+    title: __('Background')
+  }), hasBackgroundPanel && createElement(BackgroundPanel, null));
+}
+export default ScreenBackground;
+//# sourceMappingURL=screen-background.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__","privateApis","blockEditorPrivateApis","BackgroundPanel","ScreenHeader","unlock","useHasBackgroundPanel","useGlobalSetting","ScreenBackground","settings","hasBackgroundPanel","createElement","Fragment","title"],"sources":["@wordpress/edit-site/src/components/global-styles/screen-background.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport BackgroundPanel from './background-panel';\nimport ScreenHeader from './header';\nimport { unlock } from '../../lock-unlock';\n\nconst { useHasBackgroundPanel, useGlobalSetting } = unlock(\n\tblockEditorPrivateApis\n);\n\nfunction ScreenBackground() {\n\tconst [ settings ] = useGlobalSetting( '' );\n\tconst hasBackgroundPanel = useHasBackgroundPanel( settings );\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader title={ __( 'Background' ) } />\n\t\t\t{ hasBackgroundPanel && <BackgroundPanel /> }\n\t\t</>\n\t);\n}\n\nexport default ScreenBackground;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,WAAW,IAAIC,sBAAsB,QAAQ,yBAAyB;;AAE/E;AACA;AACA;AACA,OAAOC,eAAe,MAAM,oBAAoB;AAChD,OAAOC,YAAY,MAAM,UAAU;AACnC,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,MAAM;EAAEC,qBAAqB;EAAEC;AAAiB,CAAC,GAAGF,MAAM,CACzDH,sBACD,CAAC;AAED,SAASM,gBAAgBA,CAAA,EAAG;EAC3B,MAAM,CAAEC,QAAQ,CAAE,GAAGF,gBAAgB,CAAE,EAAG,CAAC;EAC3C,MAAMG,kBAAkB,GAAGJ,qBAAqB,CAAEG,QAAS,CAAC;EAC5D,OACCE,aAAA,CAAAC,QAAA,QACCD,aAAA,CAACP,YAAY;IAACS,KAAK,EAAGb,EAAE,CAAE,YAAa;EAAG,CAAE,CAAC,EAC3CU,kBAAkB,IAAIC,aAAA,CAACR,eAAe,MAAE,CACzC,CAAC;AAEL;AAEA,eAAeK,gBAAgB"}

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

@@ -23,9 +23,9 @@ function ScreenColorPalette({
     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(Tabs, null, createElement(Tabs.TabList, null, createElement(Tabs.Tab, {
     tabId: "solid"
-  }, "Solid"), createElement(Tabs.Tab, {
+  }, __('Solid')), createElement(Tabs.Tab, {
     tabId: "gradient"
-  }, "Gradient")), createElement(Tabs.TabPanel, {
+  }, __('Gradient'))), createElement(Tabs.TabPanel, {
     tabId: "solid",
     focusable: false
   }, createElement(ColorPalettePanel, {

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

@@ -1 +1 @@
-{"version":3,"names":["__","privateApis","componentsPrivateApis","ColorPalettePanel","GradientPalettePanel","ScreenHeader","unlock","Tabs","ScreenColorPalette","name","createElement","Fragment","title","description","TabList","Tab","tabId","TabPanel","focusable"],"sources":["@wordpress/edit-site/src/components/global-styles/screen-color-palette.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { privateApis as componentsPrivateApis } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport ColorPalettePanel from './color-palette-panel';\nimport GradientPalettePanel from './gradients-palette-panel';\nimport ScreenHeader from './header';\nimport { unlock } from '../../lock-unlock';\n\nconst { Tabs } = unlock( componentsPrivateApis );\n\nfunction ScreenColorPalette( { name } ) {\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<Tabs>\n\t\t\t\t<Tabs.TabList>\n\t\t\t\t\t<Tabs.Tab tabId=\"solid\">Solid</Tabs.Tab>\n\t\t\t\t\t<Tabs.Tab tabId=\"gradient\">Gradient</Tabs.Tab>\n\t\t\t\t</Tabs.TabList>\n\t\t\t\t<Tabs.TabPanel tabId=\"solid\" focusable={ false }>\n\t\t\t\t\t<ColorPalettePanel name={ name } />\n\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t<Tabs.TabPanel tabId=\"gradient\" focusable={ false }>\n\t\t\t\t\t<GradientPalettePanel name={ name } />\n\t\t\t\t</Tabs.TabPanel>\n\t\t\t</Tabs>\n\t\t</>\n\t);\n}\n\nexport default ScreenColorPalette;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,WAAW,IAAIC,qBAAqB,QAAQ,uBAAuB;;AAE5E;AACA;AACA;AACA,OAAOC,iBAAiB,MAAM,uBAAuB;AACrD,OAAOC,oBAAoB,MAAM,2BAA2B;AAC5D,OAAOC,YAAY,MAAM,UAAU;AACnC,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,MAAM;EAAEC;AAAK,CAAC,GAAGD,MAAM,CAAEJ,qBAAsB,CAAC;AAEhD,SAASM,kBAAkBA,CAAE;EAAEC;AAAK,CAAC,EAAG;EACvC,OACCC,aAAA,CAAAC,QAAA,QACCD,aAAA,CAACL,YAAY;IACZO,KAAK,EAAGZ,EAAE,CAAE,SAAU,CAAG;IACzBa,WAAW,EAAGb,EAAE,CACf,yIACD;EAAG,CACH,CAAC,EACFU,aAAA,CAACH,IAAI,QACJG,aAAA,CAACH,IAAI,CAACO,OAAO,QACZJ,aAAA,CAACH,IAAI,CAACQ,GAAG;IAACC,KAAK,EAAC;EAAO,GAAC,OAAe,CAAC,EACxCN,aAAA,CAACH,IAAI,CAACQ,GAAG;IAACC,KAAK,EAAC;EAAU,GAAC,UAAkB,CAChC,CAAC,EACfN,aAAA,CAACH,IAAI,CAACU,QAAQ;IAACD,KAAK,EAAC,OAAO;IAACE,SAAS,EAAG;EAAO,GAC/CR,aAAA,CAACP,iBAAiB;IAACM,IAAI,EAAGA;EAAM,CAAE,CACpB,CAAC,EAChBC,aAAA,CAACH,IAAI,CAACU,QAAQ;IAACD,KAAK,EAAC,UAAU;IAACE,SAAS,EAAG;EAAO,GAClDR,aAAA,CAACN,oBAAoB;IAACK,IAAI,EAAGA;EAAM,CAAE,CACvB,CACV,CACL,CAAC;AAEL;AAEA,eAAeD,kBAAkB"}
+{"version":3,"names":["__","privateApis","componentsPrivateApis","ColorPalettePanel","GradientPalettePanel","ScreenHeader","unlock","Tabs","ScreenColorPalette","name","createElement","Fragment","title","description","TabList","Tab","tabId","TabPanel","focusable"],"sources":["@wordpress/edit-site/src/components/global-styles/screen-color-palette.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { privateApis as componentsPrivateApis } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport ColorPalettePanel from './color-palette-panel';\nimport GradientPalettePanel from './gradients-palette-panel';\nimport ScreenHeader from './header';\nimport { unlock } from '../../lock-unlock';\n\nconst { Tabs } = unlock( componentsPrivateApis );\n\nfunction ScreenColorPalette( { name } ) {\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<Tabs>\n\t\t\t\t<Tabs.TabList>\n\t\t\t\t\t<Tabs.Tab tabId=\"solid\">{ __( 'Solid' ) }</Tabs.Tab>\n\t\t\t\t\t<Tabs.Tab tabId=\"gradient\">{ __( 'Gradient' ) }</Tabs.Tab>\n\t\t\t\t</Tabs.TabList>\n\t\t\t\t<Tabs.TabPanel tabId=\"solid\" focusable={ false }>\n\t\t\t\t\t<ColorPalettePanel name={ name } />\n\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t<Tabs.TabPanel tabId=\"gradient\" focusable={ false }>\n\t\t\t\t\t<GradientPalettePanel name={ name } />\n\t\t\t\t</Tabs.TabPanel>\n\t\t\t</Tabs>\n\t\t</>\n\t);\n}\n\nexport default ScreenColorPalette;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,WAAW,IAAIC,qBAAqB,QAAQ,uBAAuB;;AAE5E;AACA;AACA;AACA,OAAOC,iBAAiB,MAAM,uBAAuB;AACrD,OAAOC,oBAAoB,MAAM,2BAA2B;AAC5D,OAAOC,YAAY,MAAM,UAAU;AACnC,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,MAAM;EAAEC;AAAK,CAAC,GAAGD,MAAM,CAAEJ,qBAAsB,CAAC;AAEhD,SAASM,kBAAkBA,CAAE;EAAEC;AAAK,CAAC,EAAG;EACvC,OACCC,aAAA,CAAAC,QAAA,QACCD,aAAA,CAACL,YAAY;IACZO,KAAK,EAAGZ,EAAE,CAAE,SAAU,CAAG;IACzBa,WAAW,EAAGb,EAAE,CACf,yIACD;EAAG,CACH,CAAC,EACFU,aAAA,CAACH,IAAI,QACJG,aAAA,CAACH,IAAI,CAACO,OAAO,QACZJ,aAAA,CAACH,IAAI,CAACQ,GAAG;IAACC,KAAK,EAAC;EAAO,GAAGhB,EAAE,CAAE,OAAQ,CAAa,CAAC,EACpDU,aAAA,CAACH,IAAI,CAACQ,GAAG;IAACC,KAAK,EAAC;EAAU,GAAGhB,EAAE,CAAE,UAAW,CAAa,CAC5C,CAAC,EACfU,aAAA,CAACH,IAAI,CAACU,QAAQ;IAACD,KAAK,EAAC,OAAO;IAACE,SAAS,EAAG;EAAO,GAC/CR,aAAA,CAACP,iBAAiB;IAACM,IAAI,EAAGA;EAAM,CAAE,CACpB,CAAC,EAChBC,aAAA,CAACH,IAAI,CAACU,QAAQ;IAACD,KAAK,EAAC,UAAU;IAACE,SAAS,EAAG;EAAO,GAClDR,aAAA,CAACN,oBAAoB;IAACK,IAAI,EAAGA;EAAM,CAAE,CACvB,CACV,CACL,CAAC;AAEL;AAEA,eAAeD,kBAAkB"}

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

@@ -13,7 +13,6 @@ import ScreenHeader from './header';
 import Palette from './palette';
 import { unlock } from '../../lock-unlock';
 import ColorVariations from './variations/variations-color';
-import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
 const {
   useGlobalStyle,
   useGlobalSetting,
@@ -29,19 +28,15 @@ function ScreenColors() {
   });
   const [rawSettings] = useGlobalSetting('');
   const settings = useSettingsForBlockElement(rawSettings);
-  const colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig({
-    property: 'color',
-    filter: variation => variation?.settings?.color && Object.keys(variation?.settings?.color).length
-  });
   return createElement(Fragment, null, createElement(ScreenHeader, {
     title: __('Colors'),
-    description: __('Manage palettes and the default color of different global elements on the site.')
+    description: __('Palette colors and the application of those colors on site elements.')
   }), createElement("div", {
-    className: "edit-site-global-styles-screen-colors"
+    className: "edit-site-global-styles-screen"
   }, createElement(VStack, {
-    spacing: 3
-  }, !!colorVariations.length && createElement(ColorVariations, {
-    variations: colorVariations
+    spacing: 7
+  }, createElement(ColorVariations, {
+    title: __('Presets')
   }), createElement(Palette, null), createElement(StylesColorPanel, {
     inheritedValue: inheritedStyle,
     value: style,

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

@@ -1 +1 @@
-{"version":3,"names":["__","__experimentalVStack","VStack","privateApis","blockEditorPrivateApis","ScreenHeader","Palette","unlock","ColorVariations","useCurrentMergeThemeStyleVariationsWithUserConfig","useGlobalStyle","useGlobalSetting","useSettingsForBlockElement","ColorPanel","StylesColorPanel","ScreenColors","style","undefined","shouldDecodeEncode","inheritedStyle","setStyle","rawSettings","settings","colorVariations","property","filter","variation","color","Object","keys","length","createElement","Fragment","title","description","className","spacing","variations","inheritedValue","value","onChange"],"sources":["@wordpress/edit-site/src/components/global-styles/screen-colors.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalVStack as VStack } from '@wordpress/components';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport Palette from './palette';\nimport { unlock } from '../../lock-unlock';\nimport ColorVariations from './variations/variations-color';\nimport { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';\n\nconst {\n\tuseGlobalStyle,\n\tuseGlobalSetting,\n\tuseSettingsForBlockElement,\n\tColorPanel: StylesColorPanel,\n} = unlock( blockEditorPrivateApis );\n\nfunction ScreenColors() {\n\tconst [ style ] = useGlobalStyle( '', undefined, 'user', {\n\t\tshouldDecodeEncode: false,\n\t} );\n\tconst [ inheritedStyle, setStyle ] = useGlobalStyle( '', undefined, 'all', {\n\t\tshouldDecodeEncode: false,\n\t} );\n\tconst [ rawSettings ] = useGlobalSetting( '' );\n\tconst settings = useSettingsForBlockElement( rawSettings );\n\n\tconst colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig( {\n\t\tproperty: 'color',\n\t\tfilter: ( variation ) =>\n\t\t\tvariation?.settings?.color &&\n\t\t\tObject.keys( variation?.settings?.color ).length,\n\t} );\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\t\t\t<div className=\"edit-site-global-styles-screen-colors\">\n\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t{ !! colorVariations.length && (\n\t\t\t\t\t\t<ColorVariations variations={ colorVariations } />\n\t\t\t\t\t) }\n\n\t\t\t\t\t<Palette />\n\n\t\t\t\t\t<StylesColorPanel\n\t\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\t\tvalue={ style }\n\t\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\t\tsettings={ settings }\n\t\t\t\t\t/>\n\t\t\t\t</VStack>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenColors;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,oBAAoB,IAAIC,MAAM,QAAQ,uBAAuB;AACtE,SAASC,WAAW,IAAIC,sBAAsB,QAAQ,yBAAyB;;AAE/E;AACA;AACA;AACA,OAAOC,YAAY,MAAM,UAAU;AACnC,OAAOC,OAAO,MAAM,WAAW;AAC/B,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,OAAOC,eAAe,MAAM,+BAA+B;AAC3D,SAASC,iDAAiD,QAAQ,+EAA+E;AAEjJ,MAAM;EACLC,cAAc;EACdC,gBAAgB;EAChBC,0BAA0B;EAC1BC,UAAU,EAAEC;AACb,CAAC,GAAGP,MAAM,CAAEH,sBAAuB,CAAC;AAEpC,SAASW,YAAYA,CAAA,EAAG;EACvB,MAAM,CAAEC,KAAK,CAAE,GAAGN,cAAc,CAAE,EAAE,EAAEO,SAAS,EAAE,MAAM,EAAE;IACxDC,kBAAkB,EAAE;EACrB,CAAE,CAAC;EACH,MAAM,CAAEC,cAAc,EAAEC,QAAQ,CAAE,GAAGV,cAAc,CAAE,EAAE,EAAEO,SAAS,EAAE,KAAK,EAAE;IAC1EC,kBAAkB,EAAE;EACrB,CAAE,CAAC;EACH,MAAM,CAAEG,WAAW,CAAE,GAAGV,gBAAgB,CAAE,EAAG,CAAC;EAC9C,MAAMW,QAAQ,GAAGV,0BAA0B,CAAES,WAAY,CAAC;EAE1D,MAAME,eAAe,GAAGd,iDAAiD,CAAE;IAC1Ee,QAAQ,EAAE,OAAO;IACjBC,MAAM,EAAIC,SAAS,IAClBA,SAAS,EAAEJ,QAAQ,EAAEK,KAAK,IAC1BC,MAAM,CAACC,IAAI,CAAEH,SAAS,EAAEJ,QAAQ,EAAEK,KAAM,CAAC,CAACG;EAC5C,CAAE,CAAC;EACH,OACCC,aAAA,CAAAC,QAAA,QACCD,aAAA,CAAC1B,YAAY;IACZ4B,KAAK,EAAGjC,EAAE,CAAE,QAAS,CAAG;IACxBkC,WAAW,EAAGlC,EAAE,CACf,iFACD;EAAG,CACH,CAAC,EACF+B,aAAA;IAAKI,SAAS,EAAC;EAAuC,GACrDJ,aAAA,CAAC7B,MAAM;IAACkC,OAAO,EAAG;EAAG,GAClB,CAAC,CAAEb,eAAe,CAACO,MAAM,IAC1BC,aAAA,CAACvB,eAAe;IAAC6B,UAAU,EAAGd;EAAiB,CAAE,CACjD,EAEDQ,aAAA,CAACzB,OAAO,MAAE,CAAC,EAEXyB,aAAA,CAACjB,gBAAgB;IAChBwB,cAAc,EAAGnB,cAAgB;IACjCoB,KAAK,EAAGvB,KAAO;IACfwB,QAAQ,EAAGpB,QAAU;IACrBE,QAAQ,EAAGA;EAAU,CACrB,CACM,CACJ,CACJ,CAAC;AAEL;AAEA,eAAeP,YAAY"}
+{"version":3,"names":["__","__experimentalVStack","VStack","privateApis","blockEditorPrivateApis","ScreenHeader","Palette","unlock","ColorVariations","useGlobalStyle","useGlobalSetting","useSettingsForBlockElement","ColorPanel","StylesColorPanel","ScreenColors","style","undefined","shouldDecodeEncode","inheritedStyle","setStyle","rawSettings","settings","createElement","Fragment","title","description","className","spacing","inheritedValue","value","onChange"],"sources":["@wordpress/edit-site/src/components/global-styles/screen-colors.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalVStack as VStack } from '@wordpress/components';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport Palette from './palette';\nimport { unlock } from '../../lock-unlock';\nimport ColorVariations from './variations/variations-color';\n\nconst {\n\tuseGlobalStyle,\n\tuseGlobalSetting,\n\tuseSettingsForBlockElement,\n\tColorPanel: StylesColorPanel,\n} = unlock( blockEditorPrivateApis );\n\nfunction ScreenColors() {\n\tconst [ style ] = useGlobalStyle( '', undefined, 'user', {\n\t\tshouldDecodeEncode: false,\n\t} );\n\tconst [ inheritedStyle, setStyle ] = useGlobalStyle( '', undefined, 'all', {\n\t\tshouldDecodeEncode: false,\n\t} );\n\tconst [ rawSettings ] = useGlobalSetting( '' );\n\tconst settings = useSettingsForBlockElement( rawSettings );\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'Palette colors and the application of those colors on site elements.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<div className=\"edit-site-global-styles-screen\">\n\t\t\t\t<VStack spacing={ 7 }>\n\t\t\t\t\t<ColorVariations title={ __( 'Presets' ) } />\n\t\t\t\t\t<Palette />\n\t\t\t\t\t<StylesColorPanel\n\t\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\t\tvalue={ style }\n\t\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\t\tsettings={ settings }\n\t\t\t\t\t/>\n\t\t\t\t</VStack>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenColors;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,oBAAoB,IAAIC,MAAM,QAAQ,uBAAuB;AACtE,SAASC,WAAW,IAAIC,sBAAsB,QAAQ,yBAAyB;;AAE/E;AACA;AACA;AACA,OAAOC,YAAY,MAAM,UAAU;AACnC,OAAOC,OAAO,MAAM,WAAW;AAC/B,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,OAAOC,eAAe,MAAM,+BAA+B;AAE3D,MAAM;EACLC,cAAc;EACdC,gBAAgB;EAChBC,0BAA0B;EAC1BC,UAAU,EAAEC;AACb,CAAC,GAAGN,MAAM,CAAEH,sBAAuB,CAAC;AAEpC,SAASU,YAAYA,CAAA,EAAG;EACvB,MAAM,CAAEC,KAAK,CAAE,GAAGN,cAAc,CAAE,EAAE,EAAEO,SAAS,EAAE,MAAM,EAAE;IACxDC,kBAAkB,EAAE;EACrB,CAAE,CAAC;EACH,MAAM,CAAEC,cAAc,EAAEC,QAAQ,CAAE,GAAGV,cAAc,CAAE,EAAE,EAAEO,SAAS,EAAE,KAAK,EAAE;IAC1EC,kBAAkB,EAAE;EACrB,CAAE,CAAC;EACH,MAAM,CAAEG,WAAW,CAAE,GAAGV,gBAAgB,CAAE,EAAG,CAAC;EAC9C,MAAMW,QAAQ,GAAGV,0BAA0B,CAAES,WAAY,CAAC;EAE1D,OACCE,aAAA,CAAAC,QAAA,QACCD,aAAA,CAACjB,YAAY;IACZmB,KAAK,EAAGxB,EAAE,CAAE,QAAS,CAAG;IACxByB,WAAW,EAAGzB,EAAE,CACf,sEACD;EAAG,CACH,CAAC,EACFsB,aAAA;IAAKI,SAAS,EAAC;EAAgC,GAC9CJ,aAAA,CAACpB,MAAM;IAACyB,OAAO,EAAG;EAAG,GACpBL,aAAA,CAACd,eAAe;IAACgB,KAAK,EAAGxB,EAAE,CAAE,SAAU;EAAG,CAAE,CAAC,EAC7CsB,aAAA,CAAChB,OAAO,MAAE,CAAC,EACXgB,aAAA,CAACT,gBAAgB;IAChBe,cAAc,EAAGV,cAAgB;IACjCW,KAAK,EAAGd,KAAO;IACfe,QAAQ,EAAGX,QAAU;IACrBE,QAAQ,EAAGA;EAAU,CACrB,CACM,CACJ,CACJ,CAAC;AAEL;AAEA,eAAeP,YAAY"}

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

@@ -4,9 +4,7 @@ import { createElement, Fragment } from "react";
  */
 import { Card, CardBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { useEffect, useRef } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useZoomOut } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -14,42 +12,10 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import ScreenHeader from './header';
 import StyleVariationsContainer from './style-variations-container';
 function ScreenStyleVariations() {
-  const {
-    mode
-  } = useSelect(select => {
-    return {
-      mode: select(blockEditorStore).__unstableGetEditorMode()
-    };
-  }, []);
-  const shouldRevertInitialMode = useRef(null);
-  useEffect(() => {
-    // ignore changes to zoom-out mode as we explictily change to it on mount.
-    if (mode !== 'zoom-out') {
-      shouldRevertInitialMode.current = false;
-    }
-  }, [mode]);
-
-  // Intentionality left without any dependency.
-  // This effect should only run the first time the component is rendered.
-  // The effect opens the zoom-out view if it is not open before when applying a style variation.
-  useEffect(() => {
-    if (mode !== 'zoom-out') {
-      __unstableSetEditorMode('zoom-out');
-      shouldRevertInitialMode.current = true;
-      return () => {
-        // if there were not mode changes revert to the initial mode when unmounting.
-        if (shouldRevertInitialMode.current) {
-          __unstableSetEditorMode(mode);
-        }
-      };
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  const {
-    __unstableSetEditorMode
-  } = useDispatch(blockEditorStore);
+  // Move to zoom out mode when this component is mounted
+  // and back to the previous mode when unmounted.
+  useZoomOut();
   return createElement(Fragment, null, createElement(ScreenHeader, {
-    back: "/",
     title: __('Browse styles'),
     description: __('Choose a variation to change the look of the site.')
   }), createElement(Card, {

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

@@ -1 +1 @@
-{"version":3,"names":["Card","CardBody","__","store","blockEditorStore","useEffect","useRef","useSelect","useDispatch","ScreenHeader","StyleVariationsContainer","ScreenStyleVariations","mode","select","__unstableGetEditorMode","shouldRevertInitialMode","current","__unstableSetEditorMode","createElement","Fragment","back","title","description","size","isBorderless","className"],"sources":["@wordpress/edit-site/src/components/global-styles/screen-style-variations.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Card, CardBody } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\nimport { useEffect, useRef } from '@wordpress/element';\nimport { useSelect, useDispatch } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport StyleVariationsContainer from './style-variations-container';\n\nfunction ScreenStyleVariations() {\n\tconst { mode } = useSelect( ( select ) => {\n\t\treturn {\n\t\t\tmode: select( blockEditorStore ).__unstableGetEditorMode(),\n\t\t};\n\t}, [] );\n\n\tconst shouldRevertInitialMode = useRef( null );\n\tuseEffect( () => {\n\t\t// ignore changes to zoom-out mode as we explictily change to it on mount.\n\t\tif ( mode !== 'zoom-out' ) {\n\t\t\tshouldRevertInitialMode.current = false;\n\t\t}\n\t}, [ mode ] );\n\n\t// Intentionality left without any dependency.\n\t// This effect should only run the first time the component is rendered.\n\t// The effect opens the zoom-out view if it is not open before when applying a style variation.\n\tuseEffect( () => {\n\t\tif ( mode !== 'zoom-out' ) {\n\t\t\t__unstableSetEditorMode( 'zoom-out' );\n\t\t\tshouldRevertInitialMode.current = true;\n\t\t\treturn () => {\n\t\t\t\t// if there were not mode changes revert to the initial mode when unmounting.\n\t\t\t\tif ( shouldRevertInitialMode.current ) {\n\t\t\t\t\t__unstableSetEditorMode( mode );\n\t\t\t\t}\n\t\t\t};\n\t\t}\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [] );\n\n\tconst { __unstableSetEditorMode } = useDispatch( blockEditorStore );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\tback=\"/\"\n\t\t\t\ttitle={ __( 'Browse styles' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Choose a variation to change the look of the site.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<Card\n\t\t\t\tsize=\"small\"\n\t\t\t\tisBorderless\n\t\t\t\tclassName=\"edit-site-global-styles-screen-style-variations\"\n\t\t\t>\n\t\t\t\t<CardBody>\n\t\t\t\t\t<StyleVariationsContainer />\n\t\t\t\t</CardBody>\n\t\t\t</Card>\n\t\t</>\n\t);\n}\n\nexport default ScreenStyleVariations;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,IAAI,EAAEC,QAAQ,QAAQ,uBAAuB;AACtD,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,yBAAyB;AACnE,SAASC,SAAS,EAAEC,MAAM,QAAQ,oBAAoB;AACtD,SAASC,SAAS,EAAEC,WAAW,QAAQ,iBAAiB;;AAExD;AACA;AACA;AACA,OAAOC,YAAY,MAAM,UAAU;AACnC,OAAOC,wBAAwB,MAAM,8BAA8B;AAEnE,SAASC,qBAAqBA,CAAA,EAAG;EAChC,MAAM;IAAEC;EAAK,CAAC,GAAGL,SAAS,CAAIM,MAAM,IAAM;IACzC,OAAO;MACND,IAAI,EAAEC,MAAM,CAAET,gBAAiB,CAAC,CAACU,uBAAuB,CAAC;IAC1D,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EAEP,MAAMC,uBAAuB,GAAGT,MAAM,CAAE,IAAK,CAAC;EAC9CD,SAAS,CAAE,MAAM;IAChB;IACA,IAAKO,IAAI,KAAK,UAAU,EAAG;MAC1BG,uBAAuB,CAACC,OAAO,GAAG,KAAK;IACxC;EACD,CAAC,EAAE,CAAEJ,IAAI,CAAG,CAAC;;EAEb;EACA;EACA;EACAP,SAAS,CAAE,MAAM;IAChB,IAAKO,IAAI,KAAK,UAAU,EAAG;MAC1BK,uBAAuB,CAAE,UAAW,CAAC;MACrCF,uBAAuB,CAACC,OAAO,GAAG,IAAI;MACtC,OAAO,MAAM;QACZ;QACA,IAAKD,uBAAuB,CAACC,OAAO,EAAG;UACtCC,uBAAuB,CAAEL,IAAK,CAAC;QAChC;MACD,CAAC;IACF;IACA;EACD,CAAC,EAAE,EAAG,CAAC;EAEP,MAAM;IAAEK;EAAwB,CAAC,GAAGT,WAAW,CAAEJ,gBAAiB,CAAC;EAEnE,OACCc,aAAA,CAAAC,QAAA,QACCD,aAAA,CAACT,YAAY;IACZW,IAAI,EAAC,GAAG;IACRC,KAAK,EAAGnB,EAAE,CAAE,eAAgB,CAAG;IAC/BoB,WAAW,EAAGpB,EAAE,CACf,oDACD;EAAG,CACH,CAAC,EAEFgB,aAAA,CAAClB,IAAI;IACJuB,IAAI,EAAC,OAAO;IACZC,YAAY;IACZC,SAAS,EAAC;EAAiD,GAE3DP,aAAA,CAACjB,QAAQ,QACRiB,aAAA,CAACR,wBAAwB,MAAE,CAClB,CACL,CACL,CAAC;AAEL;AAEA,eAAeC,qBAAqB"}
+{"version":3,"names":["Card","CardBody","__","useZoomOut","ScreenHeader","StyleVariationsContainer","ScreenStyleVariations","createElement","Fragment","title","description","size","isBorderless","className"],"sources":["@wordpress/edit-site/src/components/global-styles/screen-style-variations.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Card, CardBody } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useZoomOut } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport StyleVariationsContainer from './style-variations-container';\n\nfunction ScreenStyleVariations() {\n\t// Move to zoom out mode when this component is mounted\n\t// and back to the previous mode when unmounted.\n\tuseZoomOut();\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Browse styles' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Choose a variation to change the look of the site.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<Card\n\t\t\t\tsize=\"small\"\n\t\t\t\tisBorderless\n\t\t\t\tclassName=\"edit-site-global-styles-screen-style-variations\"\n\t\t\t>\n\t\t\t\t<CardBody>\n\t\t\t\t\t<StyleVariationsContainer />\n\t\t\t\t</CardBody>\n\t\t\t</Card>\n\t\t</>\n\t);\n}\n\nexport default ScreenStyleVariations;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,IAAI,EAAEC,QAAQ,QAAQ,uBAAuB;AACtD,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,UAAU,QAAQ,yBAAyB;;AAEpD;AACA;AACA;AACA,OAAOC,YAAY,MAAM,UAAU;AACnC,OAAOC,wBAAwB,MAAM,8BAA8B;AAEnE,SAASC,qBAAqBA,CAAA,EAAG;EAChC;EACA;EACAH,UAAU,CAAC,CAAC;EAEZ,OACCI,aAAA,CAAAC,QAAA,QACCD,aAAA,CAACH,YAAY;IACZK,KAAK,EAAGP,EAAE,CAAE,eAAgB,CAAG;IAC/BQ,WAAW,EAAGR,EAAE,CACf,oDACD;EAAG,CACH,CAAC,EAEFK,aAAA,CAACP,IAAI;IACJW,IAAI,EAAC,OAAO;IACZC,YAAY;IACZC,SAAS,EAAC;EAAiD,GAE3DN,aAAA,CAACN,QAAQ,QACRM,aAAA,CAACF,wBAAwB,MAAE,CAClB,CACL,CACL,CAAC;AAEL;AAEA,eAAeC,qBAAqB"}

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

@@ -14,23 +14,18 @@ import TypographyElements from './typography-elements';
 import TypographyVariations from './variations/variations-typography';
 import FontFamilies from './font-families';
 import ScreenHeader from './header';
-import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
 function ScreenTypography() {
   const fontLibraryEnabled = useSelect(select => select(editorStore).getEditorSettings().fontLibraryEnabled, []);
-  const typographyVariations = useCurrentMergeThemeStyleVariationsWithUserConfig({
-    property: 'typography',
-    filter: variation => variation?.settings?.typography?.fontFamilies && Object.keys(variation?.settings?.typography?.fontFamilies).length
-  });
   return createElement(Fragment, null, createElement(ScreenHeader, {
     title: __('Typography'),
-    description: __('Manage the typography settings for different elements.')
+    description: __('Typography styles and the application of those styles on site elements.')
   }), createElement("div", {
-    className: "edit-site-global-styles-screen-typography"
+    className: "edit-site-global-styles-screen"
   }, createElement(VStack, {
-    spacing: 6
-  }, !!typographyVariations.length && createElement(TypographyVariations, null), !window.__experimentalDisableFontLibrary && createElement(VStack, {
-    spacing: 3
-  }, fontLibraryEnabled && createElement(FontFamilies, null)), createElement(TypographyElements, null))));
+    spacing: 7
+  }, createElement(TypographyVariations, {
+    title: __('Presets')
+  }), !window.__experimentalDisableFontLibrary && fontLibraryEnabled && createElement(FontFamilies, null), createElement(TypographyElements, null))));
 }
 export default ScreenTypography;
 //# sourceMappingURL=screen-typography.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["__","__experimentalVStack","VStack","store","editorStore","useSelect","TypographyElements","TypographyVariations","FontFamilies","ScreenHeader","useCurrentMergeThemeStyleVariationsWithUserConfig","ScreenTypography","fontLibraryEnabled","select","getEditorSettings","typographyVariations","property","filter","variation","settings","typography","fontFamilies","Object","keys","length","createElement","Fragment","title","description","className","spacing","window","__experimentalDisableFontLibrary"],"sources":["@wordpress/edit-site/src/components/global-styles/screen-typography.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalVStack as VStack } from '@wordpress/components';\nimport { store as editorStore } from '@wordpress/editor';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport TypographyElements from './typography-elements';\nimport TypographyVariations from './variations/variations-typography';\nimport FontFamilies from './font-families';\nimport ScreenHeader from './header';\nimport { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';\n\nfunction ScreenTypography() {\n\tconst fontLibraryEnabled = useSelect(\n\t\t( select ) =>\n\t\t\tselect( editorStore ).getEditorSettings().fontLibraryEnabled,\n\t\t[]\n\t);\n\tconst typographyVariations =\n\t\tuseCurrentMergeThemeStyleVariationsWithUserConfig( {\n\t\t\tproperty: 'typography',\n\t\t\tfilter: ( variation ) =>\n\t\t\t\tvariation?.settings?.typography?.fontFamilies &&\n\t\t\t\tObject.keys( variation?.settings?.typography?.fontFamilies )\n\t\t\t\t\t.length,\n\t\t} );\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\t\t\t<div className=\"edit-site-global-styles-screen-typography\">\n\t\t\t\t<VStack spacing={ 6 }>\n\t\t\t\t\t{ !! typographyVariations.length && (\n\t\t\t\t\t\t<TypographyVariations />\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! window.__experimentalDisableFontLibrary && (\n\t\t\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t\t\t{ fontLibraryEnabled && <FontFamilies /> }\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t) }\n\t\t\t\t\t<TypographyElements />\n\t\t\t\t</VStack>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenTypography;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,oBAAoB,IAAIC,MAAM,QAAQ,uBAAuB;AACtE,SAASC,KAAK,IAAIC,WAAW,QAAQ,mBAAmB;AACxD,SAASC,SAAS,QAAQ,iBAAiB;;AAE3C;AACA;AACA;AACA,OAAOC,kBAAkB,MAAM,uBAAuB;AACtD,OAAOC,oBAAoB,MAAM,oCAAoC;AACrE,OAAOC,YAAY,MAAM,iBAAiB;AAC1C,OAAOC,YAAY,MAAM,UAAU;AACnC,SAASC,iDAAiD,QAAQ,+EAA+E;AAEjJ,SAASC,gBAAgBA,CAAA,EAAG;EAC3B,MAAMC,kBAAkB,GAAGP,SAAS,CACjCQ,MAAM,IACPA,MAAM,CAAET,WAAY,CAAC,CAACU,iBAAiB,CAAC,CAAC,CAACF,kBAAkB,EAC7D,EACD,CAAC;EACD,MAAMG,oBAAoB,GACzBL,iDAAiD,CAAE;IAClDM,QAAQ,EAAE,YAAY;IACtBC,MAAM,EAAIC,SAAS,IAClBA,SAAS,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,YAAY,IAC7CC,MAAM,CAACC,IAAI,CAAEL,SAAS,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,YAAa,CAAC,CAC1DG;EACJ,CAAE,CAAC;EAEJ,OACCC,aAAA,CAAAC,QAAA,QACCD,aAAA,CAAChB,YAAY;IACZkB,KAAK,EAAG3B,EAAE,CAAE,YAAa,CAAG;IAC5B4B,WAAW,EAAG5B,EAAE,CACf,wDACD;EAAG,CACH,CAAC,EACFyB,aAAA;IAAKI,SAAS,EAAC;EAA2C,GACzDJ,aAAA,CAACvB,MAAM;IAAC4B,OAAO,EAAG;EAAG,GAClB,CAAC,CAAEf,oBAAoB,CAACS,MAAM,IAC/BC,aAAA,CAAClB,oBAAoB,MAAE,CACvB,EACC,CAAEwB,MAAM,CAACC,gCAAgC,IAC1CP,aAAA,CAACvB,MAAM;IAAC4B,OAAO,EAAG;EAAG,GAClBlB,kBAAkB,IAAIa,aAAA,CAACjB,YAAY,MAAE,CAChC,CACR,EACDiB,aAAA,CAACnB,kBAAkB,MAAE,CACd,CACJ,CACJ,CAAC;AAEL;AAEA,eAAeK,gBAAgB"}
+{"version":3,"names":["__","__experimentalVStack","VStack","store","editorStore","useSelect","TypographyElements","TypographyVariations","FontFamilies","ScreenHeader","ScreenTypography","fontLibraryEnabled","select","getEditorSettings","createElement","Fragment","title","description","className","spacing","window","__experimentalDisableFontLibrary"],"sources":["@wordpress/edit-site/src/components/global-styles/screen-typography.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalVStack as VStack } from '@wordpress/components';\nimport { store as editorStore } from '@wordpress/editor';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport TypographyElements from './typography-elements';\nimport TypographyVariations from './variations/variations-typography';\nimport FontFamilies from './font-families';\nimport ScreenHeader from './header';\n\nfunction ScreenTypography() {\n\tconst fontLibraryEnabled = useSelect(\n\t\t( select ) =>\n\t\t\tselect( editorStore ).getEditorSettings().fontLibraryEnabled,\n\t\t[]\n\t);\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'Typography styles and the application of those styles on site elements.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<div className=\"edit-site-global-styles-screen\">\n\t\t\t\t<VStack spacing={ 7 }>\n\t\t\t\t\t<TypographyVariations title={ __( 'Presets' ) } />\n\t\t\t\t\t{ ! window.__experimentalDisableFontLibrary &&\n\t\t\t\t\t\tfontLibraryEnabled && <FontFamilies /> }\n\t\t\t\t\t<TypographyElements />\n\t\t\t\t</VStack>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenTypography;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,oBAAoB,IAAIC,MAAM,QAAQ,uBAAuB;AACtE,SAASC,KAAK,IAAIC,WAAW,QAAQ,mBAAmB;AACxD,SAASC,SAAS,QAAQ,iBAAiB;;AAE3C;AACA;AACA;AACA,OAAOC,kBAAkB,MAAM,uBAAuB;AACtD,OAAOC,oBAAoB,MAAM,oCAAoC;AACrE,OAAOC,YAAY,MAAM,iBAAiB;AAC1C,OAAOC,YAAY,MAAM,UAAU;AAEnC,SAASC,gBAAgBA,CAAA,EAAG;EAC3B,MAAMC,kBAAkB,GAAGN,SAAS,CACjCO,MAAM,IACPA,MAAM,CAAER,WAAY,CAAC,CAACS,iBAAiB,CAAC,CAAC,CAACF,kBAAkB,EAC7D,EACD,CAAC;EAED,OACCG,aAAA,CAAAC,QAAA,QACCD,aAAA,CAACL,YAAY;IACZO,KAAK,EAAGhB,EAAE,CAAE,YAAa,CAAG;IAC5BiB,WAAW,EAAGjB,EAAE,CACf,yEACD;EAAG,CACH,CAAC,EACFc,aAAA;IAAKI,SAAS,EAAC;EAAgC,GAC9CJ,aAAA,CAACZ,MAAM;IAACiB,OAAO,EAAG;EAAG,GACpBL,aAAA,CAACP,oBAAoB;IAACS,KAAK,EAAGhB,EAAE,CAAE,SAAU;EAAG,CAAE,CAAC,EAChD,CAAEoB,MAAM,CAACC,gCAAgC,IAC1CV,kBAAkB,IAAIG,aAAA,CAACN,YAAY,MAAE,CAAC,EACvCM,aAAA,CAACR,kBAAkB,MAAE,CACd,CACJ,CACJ,CAAC;AAEL;AAEA,eAAeI,gBAAgB"}

package/build-module/components/global-styles/style-variations-container.js

@@ -13,7 +13,9 @@ import { __ } from '@wordpress/i18n';
  */
 import PreviewStyles from './preview-styles';
 import Variation from './variations/variation';
-export default function StyleVariationsContainer() {
+export default function StyleVariationsContainer({
+  gap = 2
+}) {
   const variations = useSelect(select => {
     return select(coreStore).__experimentalGetCurrentThemeGlobalStylesVariations();
   }, []);
@@ -33,7 +35,8 @@ export default function StyleVariationsContainer() {
   }, [variations]);
   return createElement(Grid, {
     columns: 2,
-    className: "edit-site-global-styles-style-variations-container"
+    className: "edit-site-global-styles-style-variations-container",
+    gap: gap
   }, withEmptyVariation.map((variation, index) => createElement(Variation, {
     key: index,
     variation: variation

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

@@ -1 +1 @@
-{"version":3,"names":["store","coreStore","useSelect","useMemo","__experimentalGrid","Grid","__","PreviewStyles","Variation","StyleVariationsContainer","variations","select","__experimentalGetCurrentThemeGlobalStylesVariations","withEmptyVariation","title","settings","styles","map","variation","_variation$settings","_variation$styles","createElement","columns","className","index","key","isFocused","label","withHoverView"],"sources":["@wordpress/edit-site/src/components/global-styles/style-variations-container.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { useMemo } from '@wordpress/element';\nimport { __experimentalGrid as Grid } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport PreviewStyles from './preview-styles';\nimport Variation from './variations/variation';\n\nexport default function StyleVariationsContainer() {\n\tconst variations = useSelect( ( select ) => {\n\t\treturn select(\n\t\t\tcoreStore\n\t\t).__experimentalGetCurrentThemeGlobalStylesVariations();\n\t}, [] );\n\n\tconst withEmptyVariation = useMemo( () => {\n\t\treturn [\n\t\t\t{\n\t\t\t\ttitle: __( 'Default' ),\n\t\t\t\tsettings: {},\n\t\t\t\tstyles: {},\n\t\t\t},\n\t\t\t...( variations ?? [] ).map( ( variation ) => ( {\n\t\t\t\t...variation,\n\t\t\t\tsettings: variation.settings ?? {},\n\t\t\t\tstyles: variation.styles ?? {},\n\t\t\t} ) ),\n\t\t];\n\t}, [ variations ] );\n\n\treturn (\n\t\t<Grid\n\t\t\tcolumns={ 2 }\n\t\t\tclassName=\"edit-site-global-styles-style-variations-container\"\n\t\t>\n\t\t\t{ withEmptyVariation.map( ( variation, index ) => (\n\t\t\t\t<Variation key={ index } variation={ variation }>\n\t\t\t\t\t{ ( isFocused ) => (\n\t\t\t\t\t\t<PreviewStyles\n\t\t\t\t\t\t\tlabel={ variation?.title }\n\t\t\t\t\t\t\twithHoverView\n\t\t\t\t\t\t\tisFocused={ isFocused }\n\t\t\t\t\t\t\tvariation={ variation }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</Variation>\n\t\t\t) ) }\n\t\t</Grid>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,KAAK,IAAIC,SAAS,QAAQ,sBAAsB;AACzD,SAASC,SAAS,QAAQ,iBAAiB;AAC3C,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,kBAAkB,IAAIC,IAAI,QAAQ,uBAAuB;AAClE,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,OAAOC,aAAa,MAAM,kBAAkB;AAC5C,OAAOC,SAAS,MAAM,wBAAwB;AAE9C,eAAe,SAASC,wBAAwBA,CAAA,EAAG;EAClD,MAAMC,UAAU,GAAGR,SAAS,CAAIS,MAAM,IAAM;IAC3C,OAAOA,MAAM,CACZV,SACD,CAAC,CAACW,mDAAmD,CAAC,CAAC;EACxD,CAAC,EAAE,EAAG,CAAC;EAEP,MAAMC,kBAAkB,GAAGV,OAAO,CAAE,MAAM;IACzC,OAAO,CACN;MACCW,KAAK,EAAER,EAAE,CAAE,SAAU,CAAC;MACtBS,QAAQ,EAAE,CAAC,CAAC;MACZC,MAAM,EAAE,CAAC;IACV,CAAC,EACD,GAAG,CAAEN,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAI,EAAE,EAAGO,GAAG,CAAIC,SAAS;MAAA,IAAAC,mBAAA,EAAAC,iBAAA;MAAA,OAAQ;QAC/C,GAAGF,SAAS;QACZH,QAAQ,GAAAI,mBAAA,GAAED,SAAS,CAACH,QAAQ,cAAAI,mBAAA,cAAAA,mBAAA,GAAI,CAAC,CAAC;QAClCH,MAAM,GAAAI,iBAAA,GAAEF,SAAS,CAACF,MAAM,cAAAI,iBAAA,cAAAA,iBAAA,GAAI,CAAC;MAC9B,CAAC;IAAA,CAAG,CAAC,CACL;EACF,CAAC,EAAE,CAAEV,UAAU,CAAG,CAAC;EAEnB,OACCW,aAAA,CAAChB,IAAI;IACJiB,OAAO,EAAG,CAAG;IACbC,SAAS,EAAC;EAAoD,GAE5DV,kBAAkB,CAACI,GAAG,CAAE,CAAEC,SAAS,EAAEM,KAAK,KAC3CH,aAAA,CAACb,SAAS;IAACiB,GAAG,EAAGD,KAAO;IAACN,SAAS,EAAGA;EAAW,GAC3CQ,SAAS,IACZL,aAAA,CAACd,aAAa;IACboB,KAAK,EAAGT,SAAS,EAAEJ,KAAO;IAC1Bc,aAAa;IACbF,SAAS,EAAGA,SAAW;IACvBR,SAAS,EAAGA;EAAW,CACvB,CAEQ,CACV,CACG,CAAC;AAET"}
+{"version":3,"names":["store","coreStore","useSelect","useMemo","__experimentalGrid","Grid","__","PreviewStyles","Variation","StyleVariationsContainer","gap","variations","select","__experimentalGetCurrentThemeGlobalStylesVariations","withEmptyVariation","title","settings","styles","map","variation","_variation$settings","_variation$styles","createElement","columns","className","index","key","isFocused","label","withHoverView"],"sources":["@wordpress/edit-site/src/components/global-styles/style-variations-container.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { useMemo } from '@wordpress/element';\nimport { __experimentalGrid as Grid } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport PreviewStyles from './preview-styles';\nimport Variation from './variations/variation';\n\nexport default function StyleVariationsContainer( { gap = 2 } ) {\n\tconst variations = useSelect( ( select ) => {\n\t\treturn select(\n\t\t\tcoreStore\n\t\t).__experimentalGetCurrentThemeGlobalStylesVariations();\n\t}, [] );\n\n\tconst withEmptyVariation = useMemo( () => {\n\t\treturn [\n\t\t\t{\n\t\t\t\ttitle: __( 'Default' ),\n\t\t\t\tsettings: {},\n\t\t\t\tstyles: {},\n\t\t\t},\n\t\t\t...( variations ?? [] ).map( ( variation ) => ( {\n\t\t\t\t...variation,\n\t\t\t\tsettings: variation.settings ?? {},\n\t\t\t\tstyles: variation.styles ?? {},\n\t\t\t} ) ),\n\t\t];\n\t}, [ variations ] );\n\n\treturn (\n\t\t<Grid\n\t\t\tcolumns={ 2 }\n\t\t\tclassName=\"edit-site-global-styles-style-variations-container\"\n\t\t\tgap={ gap }\n\t\t>\n\t\t\t{ withEmptyVariation.map( ( variation, index ) => (\n\t\t\t\t<Variation key={ index } variation={ variation }>\n\t\t\t\t\t{ ( isFocused ) => (\n\t\t\t\t\t\t<PreviewStyles\n\t\t\t\t\t\t\tlabel={ variation?.title }\n\t\t\t\t\t\t\twithHoverView\n\t\t\t\t\t\t\tisFocused={ isFocused }\n\t\t\t\t\t\t\tvariation={ variation }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</Variation>\n\t\t\t) ) }\n\t\t</Grid>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,KAAK,IAAIC,SAAS,QAAQ,sBAAsB;AACzD,SAASC,SAAS,QAAQ,iBAAiB;AAC3C,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,kBAAkB,IAAIC,IAAI,QAAQ,uBAAuB;AAClE,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,OAAOC,aAAa,MAAM,kBAAkB;AAC5C,OAAOC,SAAS,MAAM,wBAAwB;AAE9C,eAAe,SAASC,wBAAwBA,CAAE;EAAEC,GAAG,GAAG;AAAE,CAAC,EAAG;EAC/D,MAAMC,UAAU,GAAGT,SAAS,CAAIU,MAAM,IAAM;IAC3C,OAAOA,MAAM,CACZX,SACD,CAAC,CAACY,mDAAmD,CAAC,CAAC;EACxD,CAAC,EAAE,EAAG,CAAC;EAEP,MAAMC,kBAAkB,GAAGX,OAAO,CAAE,MAAM;IACzC,OAAO,CACN;MACCY,KAAK,EAAET,EAAE,CAAE,SAAU,CAAC;MACtBU,QAAQ,EAAE,CAAC,CAAC;MACZC,MAAM,EAAE,CAAC;IACV,CAAC,EACD,GAAG,CAAEN,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAI,EAAE,EAAGO,GAAG,CAAIC,SAAS;MAAA,IAAAC,mBAAA,EAAAC,iBAAA;MAAA,OAAQ;QAC/C,GAAGF,SAAS;QACZH,QAAQ,GAAAI,mBAAA,GAAED,SAAS,CAACH,QAAQ,cAAAI,mBAAA,cAAAA,mBAAA,GAAI,CAAC,CAAC;QAClCH,MAAM,GAAAI,iBAAA,GAAEF,SAAS,CAACF,MAAM,cAAAI,iBAAA,cAAAA,iBAAA,GAAI,CAAC;MAC9B,CAAC;IAAA,CAAG,CAAC,CACL;EACF,CAAC,EAAE,CAAEV,UAAU,CAAG,CAAC;EAEnB,OACCW,aAAA,CAACjB,IAAI;IACJkB,OAAO,EAAG,CAAG;IACbC,SAAS,EAAC,oDAAoD;IAC9Dd,GAAG,EAAGA;EAAK,GAETI,kBAAkB,CAACI,GAAG,CAAE,CAAEC,SAAS,EAAEM,KAAK,KAC3CH,aAAA,CAACd,SAAS;IAACkB,GAAG,EAAGD,KAAO;IAACN,SAAS,EAAGA;EAAW,GAC3CQ,SAAS,IACZL,aAAA,CAACf,aAAa;IACbqB,KAAK,EAAGT,SAAS,EAAEJ,KAAO;IAC1Bc,aAAa;IACbF,SAAS,EAAGA,SAAW;IACvBR,SAAS,EAAGA;EAAW,CACvB,CAEQ,CACV,CACG,CAAC;AAET"}

package/build-module/components/global-styles/typography-elements.js

@@ -20,6 +20,7 @@ function ElementItem({
   element,
   label
 }) {
+  var _ref;
   const prefix = element === 'text' || !element ? '' : `elements.${element}.`;
   const extraStyles = element === 'link' ? {
     textDecoration: 'underline'
@@ -29,6 +30,7 @@ function ElementItem({
   const [fontWeight] = useGlobalStyle(prefix + 'typography.fontWeight');
   const [letterSpacing] = useGlobalStyle(prefix + 'typography.letterSpacing');
   const [backgroundColor] = useGlobalStyle(prefix + 'color.background');
+  const [fallbackBackgroundColor] = useGlobalStyle('color.background');
   const [gradientValue] = useGlobalStyle(prefix + 'color.gradient');
   const [color] = useGlobalStyle(prefix + 'color.text');
   const navigationButtonLabel = sprintf(
@@ -43,7 +45,7 @@ function ElementItem({
     className: "edit-site-global-styles-screen-typography__indicator",
     style: {
       fontFamily: fontFamily !== null && fontFamily !== void 0 ? fontFamily : 'serif',
-      background: gradientValue !== null && gradientValue !== void 0 ? gradientValue : backgroundColor,
+      background: (_ref = gradientValue !== null && gradientValue !== void 0 ? gradientValue : backgroundColor) !== null && _ref !== void 0 ? _ref : fallbackBackgroundColor,
       color,
       fontStyle,
       fontWeight,

package/build-module/components/global-styles/typography-elements.js.map

@@ -1 +1 @@
-{"version":3,"names":["__","sprintf","__experimentalItemGroup","ItemGroup","__experimentalVStack","VStack","__experimentalHStack","HStack","FlexItem","privateApis","blockEditorPrivateApis","NavigationButtonAsItem","Subtitle","unlock","useGlobalStyle","ElementItem","parentMenu","element","label","prefix","extraStyles","textDecoration","fontFamily","fontStyle","fontWeight","letterSpacing","backgroundColor","gradientValue","color","navigationButtonLabel","createElement","path","justify","className","style","background","TypographyElements","spacing","level","isBordered","isSeparated"],"sources":["@wordpress/edit-site/src/components/global-styles/typography-elements.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } 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';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { NavigationButtonAsItem } from './navigation-button';\nimport Subtitle from './subtitle';\n\nimport { unlock } from '../../lock-unlock';\nconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\n\nfunction ElementItem( { parentMenu, element, label } ) {\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 ] = useGlobalStyle( prefix + 'typography.fontFamily' );\n\tconst [ fontStyle ] = useGlobalStyle( prefix + 'typography.fontStyle' );\n\tconst [ fontWeight ] = useGlobalStyle( prefix + 'typography.fontWeight' );\n\tconst [ letterSpacing ] = useGlobalStyle(\n\t\tprefix + 'typography.letterSpacing'\n\t);\n\tconst [ backgroundColor ] = useGlobalStyle( prefix + 'color.background' );\n\tconst [ gradientValue ] = useGlobalStyle( prefix + 'color.gradient' );\n\tconst [ color ] = useGlobalStyle( prefix + 'color.text' );\n\n\tconst navigationButtonLabel = sprintf(\n\t\t// translators: %s: is a subset of Typography, e.g., 'text' or 'links'.\n\t\t__( 'Typography %s styles' ),\n\t\tlabel\n\t);\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ parentMenu + '/typography/' + element }\n\t\t\taria-label={ navigationButtonLabel }\n\t\t>\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</NavigationButtonAsItem>\n\t);\n}\n\nfunction TypographyElements() {\n\tconst parentMenu = '';\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<Subtitle level={ 3 }>{ __( 'Elements' ) }</Subtitle>\n\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t<ElementItem\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\telement=\"text\"\n\t\t\t\t\tlabel={ __( 'Text' ) }\n\t\t\t\t/>\n\t\t\t\t<ElementItem\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\telement=\"link\"\n\t\t\t\t\tlabel={ __( 'Links' ) }\n\t\t\t\t/>\n\t\t\t\t<ElementItem\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\telement=\"heading\"\n\t\t\t\t\tlabel={ __( 'Headings' ) }\n\t\t\t\t/>\n\t\t\t\t<ElementItem\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\telement=\"caption\"\n\t\t\t\t\tlabel={ __( 'Captions' ) }\n\t\t\t\t/>\n\t\t\t\t<ElementItem\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\telement=\"button\"\n\t\t\t\t\tlabel={ __( 'Buttons' ) }\n\t\t\t\t/>\n\t\t\t</ItemGroup>\n\t\t</VStack>\n\t);\n}\n\nexport default TypographyElements;\n"],"mappings":"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"}
+{"version":3,"names":["__","sprintf","__experimentalItemGroup","ItemGroup","__experimentalVStack","VStack","__experimentalHStack","HStack","FlexItem","privateApis","blockEditorPrivateApis","NavigationButtonAsItem","Subtitle","unlock","useGlobalStyle","ElementItem","parentMenu","element","label","_ref","prefix","extraStyles","textDecoration","fontFamily","fontStyle","fontWeight","letterSpacing","backgroundColor","fallbackBackgroundColor","gradientValue","color","navigationButtonLabel","createElement","path","justify","className","style","background","TypographyElements","spacing","level","isBordered","isSeparated"],"sources":["@wordpress/edit-site/src/components/global-styles/typography-elements.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } 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';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { NavigationButtonAsItem } from './navigation-button';\nimport Subtitle from './subtitle';\n\nimport { unlock } from '../../lock-unlock';\nconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\n\nfunction ElementItem( { parentMenu, element, label } ) {\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 ] = useGlobalStyle( prefix + 'typography.fontFamily' );\n\tconst [ fontStyle ] = useGlobalStyle( prefix + 'typography.fontStyle' );\n\tconst [ fontWeight ] = useGlobalStyle( prefix + 'typography.fontWeight' );\n\tconst [ letterSpacing ] = useGlobalStyle(\n\t\tprefix + 'typography.letterSpacing'\n\t);\n\tconst [ backgroundColor ] = useGlobalStyle( prefix + 'color.background' );\n\tconst [ fallbackBackgroundColor ] = useGlobalStyle( 'color.background' );\n\tconst [ gradientValue ] = useGlobalStyle( prefix + 'color.gradient' );\n\tconst [ color ] = useGlobalStyle( prefix + 'color.text' );\n\n\tconst navigationButtonLabel = sprintf(\n\t\t// translators: %s: is a subset of Typography, e.g., 'text' or 'links'.\n\t\t__( 'Typography %s styles' ),\n\t\tlabel\n\t);\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ parentMenu + '/typography/' + element }\n\t\t\taria-label={ navigationButtonLabel }\n\t\t>\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:\n\t\t\t\t\t\t\tgradientValue ??\n\t\t\t\t\t\t\tbackgroundColor ??\n\t\t\t\t\t\t\tfallbackBackgroundColor,\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</NavigationButtonAsItem>\n\t);\n}\n\nfunction TypographyElements() {\n\tconst parentMenu = '';\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<Subtitle level={ 3 }>{ __( 'Elements' ) }</Subtitle>\n\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t<ElementItem\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\telement=\"text\"\n\t\t\t\t\tlabel={ __( 'Text' ) }\n\t\t\t\t/>\n\t\t\t\t<ElementItem\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\telement=\"link\"\n\t\t\t\t\tlabel={ __( 'Links' ) }\n\t\t\t\t/>\n\t\t\t\t<ElementItem\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\telement=\"heading\"\n\t\t\t\t\tlabel={ __( 'Headings' ) }\n\t\t\t\t/>\n\t\t\t\t<ElementItem\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\telement=\"caption\"\n\t\t\t\t\tlabel={ __( 'Captions' ) }\n\t\t\t\t/>\n\t\t\t\t<ElementItem\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\telement=\"button\"\n\t\t\t\t\tlabel={ __( 'Buttons' ) }\n\t\t\t\t/>\n\t\t\t</ItemGroup>\n\t\t</VStack>\n\t);\n}\n\nexport default TypographyElements;\n"],"mappings":"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"}

package/build-module/components/global-styles/{preview-typography.js → typography-example.js}

@@ -36,7 +36,6 @@ export default function PreviewTypography({
     headingPreviewStyle.fontSize = fontSize;
   }
   return createElement(motion.div, {
-    className: "edit-site-global-styles_preview-typography",
     animate: {
       scale: 1,
       opacity: 1
@@ -48,6 +47,9 @@ export default function PreviewTypography({
     transition: {
       delay: 0.3,
       type: 'tween'
+    },
+    style: {
+      textAlign: 'center'
     }
   }, createElement("span", {
     style: headingPreviewStyle
@@ -55,4 +57,4 @@ export default function PreviewTypography({
     style: bodyPreviewStyle
   }, _x('a', 'Lowercase letter A')));
 }
-//# sourceMappingURL=preview-typography.js.map
+//# sourceMappingURL=typography-example.js.map

package/build-module/components/global-styles/typography-example.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useContext","__unstableMotion","motion","_x","privateApis","blockEditorPrivateApis","mergeBaseAndUserConfigs","unlock","getFamilyPreviewStyle","getFontFamilies","GlobalStylesContext","PreviewTypography","fontSize","variation","base","config","bodyFontFamilies","headingFontFamilies","bodyPreviewStyle","headingPreviewStyle","createElement","div","animate","scale","opacity","initial","transition","delay","type","style","textAlign"],"sources":["@wordpress/edit-site/src/components/global-styles/typography-example.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\nimport { __unstableMotion as motion } from '@wordpress/components';\nimport { _x } from '@wordpress/i18n';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { mergeBaseAndUserConfigs } from './global-styles-provider';\nimport { unlock } from '../../lock-unlock';\nimport { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles';\nimport { getFontFamilies } from './utils';\n\nconst { GlobalStylesContext } = unlock( blockEditorPrivateApis );\n\nexport default function PreviewTypography( { fontSize, variation } ) {\n\tconst { base } = useContext( GlobalStylesContext );\n\tlet config = base;\n\tif ( variation ) {\n\t\tconfig = mergeBaseAndUserConfigs( base, variation );\n\t}\n\tconst [ bodyFontFamilies, headingFontFamilies ] = getFontFamilies( config );\n\tconst bodyPreviewStyle = bodyFontFamilies\n\t\t? getFamilyPreviewStyle( bodyFontFamilies )\n\t\t: {};\n\tconst headingPreviewStyle = headingFontFamilies\n\t\t? getFamilyPreviewStyle( headingFontFamilies )\n\t\t: {};\n\n\tif ( fontSize ) {\n\t\tbodyPreviewStyle.fontSize = fontSize;\n\t\theadingPreviewStyle.fontSize = fontSize;\n\t}\n\n\treturn (\n\t\t<motion.div\n\t\t\tanimate={ {\n\t\t\t\tscale: 1,\n\t\t\t\topacity: 1,\n\t\t\t} }\n\t\t\tinitial={ {\n\t\t\t\tscale: 0.1,\n\t\t\t\topacity: 0,\n\t\t\t} }\n\t\t\ttransition={ {\n\t\t\t\tdelay: 0.3,\n\t\t\t\ttype: 'tween',\n\t\t\t} }\n\t\t\tstyle={ {\n\t\t\t\ttextAlign: 'center',\n\t\t\t} }\n\t\t>\n\t\t\t<span style={ headingPreviewStyle }>\n\t\t\t\t{ _x( 'A', 'Uppercase letter A' ) }\n\t\t\t</span>\n\t\t\t<span style={ bodyPreviewStyle }>\n\t\t\t\t{ _x( 'a', 'Lowercase letter A' ) }\n\t\t\t</span>\n\t\t</motion.div>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,UAAU,QAAQ,oBAAoB;AAC/C,SAASC,gBAAgB,IAAIC,MAAM,QAAQ,uBAAuB;AAClE,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,WAAW,IAAIC,sBAAsB,QAAQ,yBAAyB;;AAE/E;AACA;AACA;AACA,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,qBAAqB,QAAQ,2CAA2C;AACjF,SAASC,eAAe,QAAQ,SAAS;AAEzC,MAAM;EAAEC;AAAoB,CAAC,GAAGH,MAAM,CAAEF,sBAAuB,CAAC;AAEhE,eAAe,SAASM,iBAAiBA,CAAE;EAAEC,QAAQ;EAAEC;AAAU,CAAC,EAAG;EACpE,MAAM;IAAEC;EAAK,CAAC,GAAGd,UAAU,CAAEU,mBAAoB,CAAC;EAClD,IAAIK,MAAM,GAAGD,IAAI;EACjB,IAAKD,SAAS,EAAG;IAChBE,MAAM,GAAGT,uBAAuB,CAAEQ,IAAI,EAAED,SAAU,CAAC;EACpD;EACA,MAAM,CAAEG,gBAAgB,EAAEC,mBAAmB,CAAE,GAAGR,eAAe,CAAEM,MAAO,CAAC;EAC3E,MAAMG,gBAAgB,GAAGF,gBAAgB,GACtCR,qBAAqB,CAAEQ,gBAAiB,CAAC,GACzC,CAAC,CAAC;EACL,MAAMG,mBAAmB,GAAGF,mBAAmB,GAC5CT,qBAAqB,CAAES,mBAAoB,CAAC,GAC5C,CAAC,CAAC;EAEL,IAAKL,QAAQ,EAAG;IACfM,gBAAgB,CAACN,QAAQ,GAAGA,QAAQ;IACpCO,mBAAmB,CAACP,QAAQ,GAAGA,QAAQ;EACxC;EAEA,OACCQ,aAAA,CAAClB,MAAM,CAACmB,GAAG;IACVC,OAAO,EAAG;MACTC,KAAK,EAAE,CAAC;MACRC,OAAO,EAAE;IACV,CAAG;IACHC,OAAO,EAAG;MACTF,KAAK,EAAE,GAAG;MACVC,OAAO,EAAE;IACV,CAAG;IACHE,UAAU,EAAG;MACZC,KAAK,EAAE,GAAG;MACVC,IAAI,EAAE;IACP,CAAG;IACHC,KAAK,EAAG;MACPC,SAAS,EAAE;IACZ;EAAG,GAEHV,aAAA;IAAMS,KAAK,EAAGV;EAAqB,GAChChB,EAAE,CAAE,GAAG,EAAE,oBAAqB,CAC3B,CAAC,EACPiB,aAAA;IAAMS,KAAK,EAAGX;EAAkB,GAC7Bf,EAAE,CAAE,GAAG,EAAE,oBAAqB,CAC3B,CACK,CAAC;AAEf"}

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

@@ -16,6 +16,7 @@ export default function TypographyPreview({
   element,
   headingLevel
 }) {
+  var _ref;
   let prefix = '';
   if (element === 'heading') {
     prefix = `elements.${headingLevel}.`;
@@ -25,6 +26,7 @@ export default function TypographyPreview({
   const [fontFamily] = useGlobalStyle(prefix + 'typography.fontFamily', name);
   const [gradientValue] = useGlobalStyle(prefix + 'color.gradient', name);
   const [backgroundColor] = useGlobalStyle(prefix + 'color.background', name);
+  const [fallbackBackgroundColor] = useGlobalStyle('color.background');
   const [color] = useGlobalStyle(prefix + 'color.text', name);
   const [fontSize] = useGlobalStyle(prefix + 'typography.fontSize', name);
   const [fontStyle] = useGlobalStyle(prefix + 'typography.fontStyle', name);
@@ -37,7 +39,7 @@ export default function TypographyPreview({
     className: "edit-site-typography-preview",
     style: {
       fontFamily: fontFamily !== null && fontFamily !== void 0 ? fontFamily : 'serif',
-      background: gradientValue !== null && gradientValue !== void 0 ? gradientValue : backgroundColor,
+      background: (_ref = gradientValue !== null && gradientValue !== void 0 ? gradientValue : backgroundColor) !== null && _ref !== void 0 ? _ref : fallbackBackgroundColor,
       color,
       fontSize,
       fontStyle,

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

@@ -1 +1 @@
-{"version":3,"names":["privateApis","blockEditorPrivateApis","unlock","useGlobalStyle","TypographyPreview","name","element","headingLevel","prefix","fontFamily","gradientValue","backgroundColor","color","fontSize","fontStyle","fontWeight","letterSpacing","extraStyles","textDecoration","createElement","className","style","background"],"sources":["@wordpress/edit-site/src/components/global-styles/typography-preview.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\n\nexport default function TypographyPreview( { name, element, headingLevel } ) {\n\tlet prefix = '';\n\tif ( element === 'heading' ) {\n\t\tprefix = `elements.${ headingLevel }.`;\n\t} else if ( element && element !== 'text' ) {\n\t\tprefix = `elements.${ element }.`;\n\t}\n\n\tconst [ fontFamily ] = useGlobalStyle(\n\t\tprefix + 'typography.fontFamily',\n\t\tname\n\t);\n\tconst [ gradientValue ] = useGlobalStyle( prefix + 'color.gradient', name );\n\tconst [ backgroundColor ] = useGlobalStyle(\n\t\tprefix + 'color.background',\n\t\tname\n\t);\n\tconst [ color ] = useGlobalStyle( prefix + 'color.text', name );\n\tconst [ fontSize ] = useGlobalStyle( prefix + 'typography.fontSize', name );\n\tconst [ fontStyle ] = useGlobalStyle(\n\t\tprefix + 'typography.fontStyle',\n\t\tname\n\t);\n\tconst [ fontWeight ] = useGlobalStyle(\n\t\tprefix + 'typography.fontWeight',\n\t\tname\n\t);\n\tconst [ letterSpacing ] = useGlobalStyle(\n\t\tprefix + 'typography.letterSpacing',\n\t\tname\n\t);\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\n\treturn (\n\t\t<div\n\t\t\tclassName=\"edit-site-typography-preview\"\n\t\t\tstyle={ {\n\t\t\t\tfontFamily: fontFamily ?? 'serif',\n\t\t\t\tbackground: gradientValue ?? backgroundColor,\n\t\t\t\tcolor,\n\t\t\t\tfontSize,\n\t\t\t\tfontStyle,\n\t\t\t\tfontWeight,\n\t\t\t\tletterSpacing,\n\t\t\t\t...extraStyles,\n\t\t\t} }\n\t\t>\n\t\t\tAa\n\t\t</div>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,WAAW,IAAIC,sBAAsB,QAAQ,yBAAyB;;AAE/E;AACA;AACA;AACA,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,MAAM;EAAEC;AAAe,CAAC,GAAGD,MAAM,CAAED,sBAAuB,CAAC;AAE3D,eAAe,SAASG,iBAAiBA,CAAE;EAAEC,IAAI;EAAEC,OAAO;EAAEC;AAAa,CAAC,EAAG;EAC5E,IAAIC,MAAM,GAAG,EAAE;EACf,IAAKF,OAAO,KAAK,SAAS,EAAG;IAC5BE,MAAM,GAAI,YAAYD,YAAc,GAAE;EACvC,CAAC,MAAM,IAAKD,OAAO,IAAIA,OAAO,KAAK,MAAM,EAAG;IAC3CE,MAAM,GAAI,YAAYF,OAAS,GAAE;EAClC;EAEA,MAAM,CAAEG,UAAU,CAAE,GAAGN,cAAc,CACpCK,MAAM,GAAG,uBAAuB,EAChCH,IACD,CAAC;EACD,MAAM,CAAEK,aAAa,CAAE,GAAGP,cAAc,CAAEK,MAAM,GAAG,gBAAgB,EAAEH,IAAK,CAAC;EAC3E,MAAM,CAAEM,eAAe,CAAE,GAAGR,cAAc,CACzCK,MAAM,GAAG,kBAAkB,EAC3BH,IACD,CAAC;EACD,MAAM,CAAEO,KAAK,CAAE,GAAGT,cAAc,CAAEK,MAAM,GAAG,YAAY,EAAEH,IAAK,CAAC;EAC/D,MAAM,CAAEQ,QAAQ,CAAE,GAAGV,cAAc,CAAEK,MAAM,GAAG,qBAAqB,EAAEH,IAAK,CAAC;EAC3E,MAAM,CAAES,SAAS,CAAE,GAAGX,cAAc,CACnCK,MAAM,GAAG,sBAAsB,EAC/BH,IACD,CAAC;EACD,MAAM,CAAEU,UAAU,CAAE,GAAGZ,cAAc,CACpCK,MAAM,GAAG,uBAAuB,EAChCH,IACD,CAAC;EACD,MAAM,CAAEW,aAAa,CAAE,GAAGb,cAAc,CACvCK,MAAM,GAAG,0BAA0B,EACnCH,IACD,CAAC;EACD,MAAMY,WAAW,GAChBX,OAAO,KAAK,MAAM,GACf;IACAY,cAAc,EAAE;EAChB,CAAC,GACD,CAAC,CAAC;EAEN,OACCC,aAAA;IACCC,SAAS,EAAC,8BAA8B;IACxCC,KAAK,EAAG;MACPZ,UAAU,EAAEA,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAI,OAAO;MACjCa,UAAU,EAAEZ,aAAa,aAAbA,aAAa,cAAbA,aAAa,GAAIC,eAAe;MAC5CC,KAAK;MACLC,QAAQ;MACRC,SAAS;MACTC,UAAU;MACVC,aAAa;MACb,GAAGC;IACJ;EAAG,GACH,IAEI,CAAC;AAER"}
+{"version":3,"names":["privateApis","blockEditorPrivateApis","unlock","useGlobalStyle","TypographyPreview","name","element","headingLevel","_ref","prefix","fontFamily","gradientValue","backgroundColor","fallbackBackgroundColor","color","fontSize","fontStyle","fontWeight","letterSpacing","extraStyles","textDecoration","createElement","className","style","background"],"sources":["@wordpress/edit-site/src/components/global-styles/typography-preview.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\n\nexport default function TypographyPreview( { name, element, headingLevel } ) {\n\tlet prefix = '';\n\tif ( element === 'heading' ) {\n\t\tprefix = `elements.${ headingLevel }.`;\n\t} else if ( element && element !== 'text' ) {\n\t\tprefix = `elements.${ element }.`;\n\t}\n\n\tconst [ fontFamily ] = useGlobalStyle(\n\t\tprefix + 'typography.fontFamily',\n\t\tname\n\t);\n\tconst [ gradientValue ] = useGlobalStyle( prefix + 'color.gradient', name );\n\tconst [ backgroundColor ] = useGlobalStyle(\n\t\tprefix + 'color.background',\n\t\tname\n\t);\n\tconst [ fallbackBackgroundColor ] = useGlobalStyle( 'color.background' );\n\tconst [ color ] = useGlobalStyle( prefix + 'color.text', name );\n\tconst [ fontSize ] = useGlobalStyle( prefix + 'typography.fontSize', name );\n\tconst [ fontStyle ] = useGlobalStyle(\n\t\tprefix + 'typography.fontStyle',\n\t\tname\n\t);\n\tconst [ fontWeight ] = useGlobalStyle(\n\t\tprefix + 'typography.fontWeight',\n\t\tname\n\t);\n\tconst [ letterSpacing ] = useGlobalStyle(\n\t\tprefix + 'typography.letterSpacing',\n\t\tname\n\t);\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\n\treturn (\n\t\t<div\n\t\t\tclassName=\"edit-site-typography-preview\"\n\t\t\tstyle={ {\n\t\t\t\tfontFamily: fontFamily ?? 'serif',\n\t\t\t\tbackground:\n\t\t\t\t\tgradientValue ?? backgroundColor ?? fallbackBackgroundColor,\n\t\t\t\tcolor,\n\t\t\t\tfontSize,\n\t\t\t\tfontStyle,\n\t\t\t\tfontWeight,\n\t\t\t\tletterSpacing,\n\t\t\t\t...extraStyles,\n\t\t\t} }\n\t\t>\n\t\t\tAa\n\t\t</div>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,WAAW,IAAIC,sBAAsB,QAAQ,yBAAyB;;AAE/E;AACA;AACA;AACA,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,MAAM;EAAEC;AAAe,CAAC,GAAGD,MAAM,CAAED,sBAAuB,CAAC;AAE3D,eAAe,SAASG,iBAAiBA,CAAE;EAAEC,IAAI;EAAEC,OAAO;EAAEC;AAAa,CAAC,EAAG;EAAA,IAAAC,IAAA;EAC5E,IAAIC,MAAM,GAAG,EAAE;EACf,IAAKH,OAAO,KAAK,SAAS,EAAG;IAC5BG,MAAM,GAAI,YAAYF,YAAc,GAAE;EACvC,CAAC,MAAM,IAAKD,OAAO,IAAIA,OAAO,KAAK,MAAM,EAAG;IAC3CG,MAAM,GAAI,YAAYH,OAAS,GAAE;EAClC;EAEA,MAAM,CAAEI,UAAU,CAAE,GAAGP,cAAc,CACpCM,MAAM,GAAG,uBAAuB,EAChCJ,IACD,CAAC;EACD,MAAM,CAAEM,aAAa,CAAE,GAAGR,cAAc,CAAEM,MAAM,GAAG,gBAAgB,EAAEJ,IAAK,CAAC;EAC3E,MAAM,CAAEO,eAAe,CAAE,GAAGT,cAAc,CACzCM,MAAM,GAAG,kBAAkB,EAC3BJ,IACD,CAAC;EACD,MAAM,CAAEQ,uBAAuB,CAAE,GAAGV,cAAc,CAAE,kBAAmB,CAAC;EACxE,MAAM,CAAEW,KAAK,CAAE,GAAGX,cAAc,CAAEM,MAAM,GAAG,YAAY,EAAEJ,IAAK,CAAC;EAC/D,MAAM,CAAEU,QAAQ,CAAE,GAAGZ,cAAc,CAAEM,MAAM,GAAG,qBAAqB,EAAEJ,IAAK,CAAC;EAC3E,MAAM,CAAEW,SAAS,CAAE,GAAGb,cAAc,CACnCM,MAAM,GAAG,sBAAsB,EAC/BJ,IACD,CAAC;EACD,MAAM,CAAEY,UAAU,CAAE,GAAGd,cAAc,CACpCM,MAAM,GAAG,uBAAuB,EAChCJ,IACD,CAAC;EACD,MAAM,CAAEa,aAAa,CAAE,GAAGf,cAAc,CACvCM,MAAM,GAAG,0BAA0B,EACnCJ,IACD,CAAC;EACD,MAAMc,WAAW,GAChBb,OAAO,KAAK,MAAM,GACf;IACAc,cAAc,EAAE;EAChB,CAAC,GACD,CAAC,CAAC;EAEN,OACCC,aAAA;IACCC,SAAS,EAAC,8BAA8B;IACxCC,KAAK,EAAG;MACPb,UAAU,EAAEA,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAI,OAAO;MACjCc,UAAU,GAAAhB,IAAA,GACTG,aAAa,aAAbA,aAAa,cAAbA,aAAa,GAAIC,eAAe,cAAAJ,IAAA,cAAAA,IAAA,GAAIK,uBAAuB;MAC5DC,KAAK;MACLC,QAAQ;MACRC,SAAS;MACTC,UAAU;MACVC,aAAa;MACb,GAAGC;IACJ;EAAG,GACH,IAEI,CAAC;AAER"}

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

@@ -27,6 +27,7 @@ import ScreenStyleVariations from './screen-style-variations';
 import StyleBook from '../style-book';
 import ScreenCSS from './screen-css';
 import ScreenRevisions from './screen-revisions';
+import ScreenBackground from './screen-background';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 const SLOT_FILL_NAME = 'GlobalStylesMenu';
@@ -271,7 +272,9 @@ function GlobalStylesUI() {
     path: "/css"
   }, createElement(ScreenCSS, null)), createElement(GlobalStylesNavigationScreen, {
     path: '/revisions'
-  }, createElement(ScreenRevisions, null)), blocks.map(block => createElement(GlobalStylesNavigationScreen, {
+  }, createElement(ScreenRevisions, null)), createElement(GlobalStylesNavigationScreen, {
+    path: '/background'
+  }, createElement(ScreenBackground, null)), blocks.map(block => createElement(GlobalStylesNavigationScreen, {
     key: 'menu-block-' + block.name,
     path: '/blocks/' + encodeURIComponent(block.name)
   }, createElement(ScreenBlock, {

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

@@ -1 +1 @@
-{"version":3,"names":["__experimentalNavigatorProvider","NavigatorProvider","__experimentalNavigatorScreen","NavigatorScreen","__experimentalUseNavigator","useNavigator","createSlotFill","DropdownMenu","MenuGroup","MenuItem","getBlockTypes","store","blocksStore","useSelect","useDispatch","privateApis","blockEditorPrivateApis","blockEditorStore","__","preferencesStore","moreVertical","coreStore","useEffect","ScreenRoot","useBlockHasGlobalStyles","default","ScreenBlockList","ScreenBlock","ScreenTypography","ScreenTypographyElement","ScreenColors","ScreenColorPalette","ScreenLayout","ScreenStyleVariations","StyleBook","ScreenCSS","ScreenRevisions","unlock","editSiteStore","SLOT_FILL_NAME","useGlobalStylesReset","Slot","GlobalStylesMenuSlot","Fill","GlobalStylesMenuFill","GlobalStylesActionMenu","canReset","onReset","toggle","canEditCSS","select","getEntityRecord","__experimentalGetCurrentGlobalStylesId","globalStylesId","globalStyles","undefined","_links","setEditorCanvasContainerView","goTo","loadCustomCSS","createElement","icon","label","onClose","Fragment","onClick","disabled","GlobalStylesNavigationScreen","className","props","filter","Boolean","join","BlockStylesNavigationScreens","parentMenu","blockStyles","blockName","map","style","index","key","path","name","variation","ContextScreens","blockStyleVariations","getBlockStyles","length","GlobalStylesStyleBook","navigator","location","isSelected","encodeURIComponent","startsWith","onSelect","GlobalStylesBlockLink","selectedBlockName","selectedBlockClientId","getSelectedBlockClientId","getBlockName","clientId","blockHasGlobalStyles","currentPath","newPath","skipFocus","GlobalStylesEditorCanvasContainerLink","editorCanvasContainerView","getEditorCanvasContainerView","isRevisionsOpen","GlobalStylesUI","blocks","initialPath","element","block"],"sources":["@wordpress/edit-site/src/components/global-styles/ui.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalNavigatorProvider as NavigatorProvider,\n\t__experimentalNavigatorScreen as NavigatorScreen,\n\t__experimentalUseNavigator as useNavigator,\n\tcreateSlotFill,\n\tDropdownMenu,\n\tMenuGroup,\n\tMenuItem,\n} from '@wordpress/components';\nimport { getBlockTypes, store as blocksStore } from '@wordpress/blocks';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tprivateApis as blockEditorPrivateApis,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { __ } from '@wordpress/i18n';\nimport { store as preferencesStore } from '@wordpress/preferences';\nimport { moreVertical } from '@wordpress/icons';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ScreenRoot from './screen-root';\nimport {\n\tuseBlockHasGlobalStyles,\n\tdefault as ScreenBlockList,\n} from './screen-block-list';\nimport ScreenBlock from './screen-block';\nimport ScreenTypography from './screen-typography';\nimport ScreenTypographyElement from './screen-typography-element';\nimport ScreenColors from './screen-colors';\nimport ScreenColorPalette from './screen-color-palette';\nimport ScreenLayout from './screen-layout';\nimport ScreenStyleVariations from './screen-style-variations';\nimport StyleBook from '../style-book';\nimport ScreenCSS from './screen-css';\nimport ScreenRevisions from './screen-revisions';\nimport { unlock } from '../../lock-unlock';\nimport { store as editSiteStore } from '../../store';\n\nconst SLOT_FILL_NAME = 'GlobalStylesMenu';\nconst { useGlobalStylesReset } = unlock( blockEditorPrivateApis );\nconst { Slot: GlobalStylesMenuSlot, Fill: GlobalStylesMenuFill } =\n\tcreateSlotFill( SLOT_FILL_NAME );\n\nfunction GlobalStylesActionMenu() {\n\tconst [ canReset, onReset ] = useGlobalStylesReset();\n\tconst { toggle } = useDispatch( preferencesStore );\n\tconst { canEditCSS } = useSelect( ( select ) => {\n\t\tconst { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =\n\t\t\tselect( coreStore );\n\n\t\tconst globalStylesId = __experimentalGetCurrentGlobalStylesId();\n\t\tconst globalStyles = globalStylesId\n\t\t\t? getEntityRecord( 'root', 'globalStyles', globalStylesId )\n\t\t\t: undefined;\n\n\t\treturn {\n\t\t\tcanEditCSS: !! globalStyles?._links?.[ 'wp:action-edit-css' ],\n\t\t};\n\t}, [] );\n\tconst { setEditorCanvasContainerView } = unlock(\n\t\tuseDispatch( editSiteStore )\n\t);\n\tconst { goTo } = useNavigator();\n\tconst loadCustomCSS = () => {\n\t\tsetEditorCanvasContainerView( 'global-styles-css' );\n\t\tgoTo( '/css' );\n\t};\n\n\treturn (\n\t\t<GlobalStylesMenuFill>\n\t\t\t<DropdownMenu icon={ moreVertical } label={ __( 'More' ) }>\n\t\t\t\t{ ( { onClose } ) => (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<MenuGroup>\n\t\t\t\t\t\t\t{ canEditCSS && (\n\t\t\t\t\t\t\t\t<MenuItem onClick={ loadCustomCSS }>\n\t\t\t\t\t\t\t\t\t{ __( 'Additional CSS' ) }\n\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\ttoggle(\n\t\t\t\t\t\t\t\t\t\t'core/edit-site',\n\t\t\t\t\t\t\t\t\t\t'welcomeGuideStyles'\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Welcome Guide' ) }\n\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t\t<MenuGroup>\n\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\tonReset();\n\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tdisabled={ ! canReset }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Reset styles' ) }\n\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t</DropdownMenu>\n\t\t</GlobalStylesMenuFill>\n\t);\n}\n\nfunction GlobalStylesNavigationScreen( { className, ...props } ) {\n\treturn (\n\t\t<NavigatorScreen\n\t\t\tclassName={ [\n\t\t\t\t'edit-site-global-styles-sidebar__navigator-screen',\n\t\t\t\tclassName,\n\t\t\t]\n\t\t\t\t.filter( Boolean )\n\t\t\t\t.join( ' ' ) }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction BlockStylesNavigationScreens( {\n\tparentMenu,\n\tblockStyles,\n\tblockName,\n} ) {\n\treturn blockStyles.map( ( style, index ) => (\n\t\t<GlobalStylesNavigationScreen\n\t\t\tkey={ index }\n\t\t\tpath={ parentMenu + '/variations/' + style.name }\n\t\t>\n\t\t\t<ScreenBlock name={ blockName } variation={ style.name } />\n\t\t</GlobalStylesNavigationScreen>\n\t) );\n}\n\nfunction ContextScreens( { name, parentMenu = '' } ) {\n\tconst blockStyleVariations = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockStyles } = select( blocksStore );\n\t\t\treturn getBlockStyles( name );\n\t\t},\n\t\t[ name ]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/colors/palette' }\n\t\t\t>\n\t\t\t\t<ScreenColorPalette name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t{ !! blockStyleVariations?.length && (\n\t\t\t\t<BlockStylesNavigationScreens\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\tblockStyles={ blockStyleVariations }\n\t\t\t\t\tblockName={ name }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nfunction GlobalStylesStyleBook() {\n\tconst navigator = useNavigator();\n\tconst { path } = navigator.location;\n\treturn (\n\t\t<StyleBook\n\t\t\tisSelected={ ( blockName ) =>\n\t\t\t\t// Match '/blocks/core%2Fbutton' and\n\t\t\t\t// '/blocks/core%2Fbutton/typography', but not\n\t\t\t\t// '/blocks/core%2Fbuttons'.\n\t\t\t\tpath === `/blocks/${ encodeURIComponent( blockName ) }` ||\n\t\t\t\tpath.startsWith(\n\t\t\t\t\t`/blocks/${ encodeURIComponent( blockName ) }/`\n\t\t\t\t)\n\t\t\t}\n\t\t\tonSelect={ ( blockName ) => {\n\t\t\t\t// Now go to the selected block.\n\t\t\t\tnavigator.goTo( '/blocks/' + encodeURIComponent( blockName ) );\n\t\t\t} }\n\t\t/>\n\t);\n}\n\nfunction GlobalStylesBlockLink() {\n\tconst navigator = useNavigator();\n\tconst { selectedBlockName, selectedBlockClientId } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getSelectedBlockClientId, getBlockName } =\n\t\t\t\tselect( blockEditorStore );\n\t\t\tconst clientId = getSelectedBlockClientId();\n\t\t\treturn {\n\t\t\t\tselectedBlockName: getBlockName( clientId ),\n\t\t\t\tselectedBlockClientId: clientId,\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\tconst blockHasGlobalStyles = useBlockHasGlobalStyles( selectedBlockName );\n\t// When we're in the `Blocks` screen enable deep linking to the selected block.\n\tuseEffect( () => {\n\t\tif ( ! selectedBlockClientId || ! blockHasGlobalStyles ) {\n\t\t\treturn;\n\t\t}\n\t\tconst currentPath = navigator.location.path;\n\t\tif (\n\t\t\tcurrentPath !== '/blocks' &&\n\t\t\t! currentPath.startsWith( '/blocks/' )\n\t\t) {\n\t\t\treturn;\n\t\t}\n\t\tconst newPath = '/blocks/' + encodeURIComponent( selectedBlockName );\n\t\t// Avoid navigating to the same path. This can happen when selecting\n\t\t// a new block of the same type.\n\t\tif ( newPath !== currentPath ) {\n\t\t\tnavigator.goTo( newPath, { skipFocus: true } );\n\t\t}\n\t}, [ selectedBlockClientId, selectedBlockName, blockHasGlobalStyles ] );\n}\n\nfunction GlobalStylesEditorCanvasContainerLink() {\n\tconst { goTo, location } = useNavigator();\n\tconst editorCanvasContainerView = useSelect(\n\t\t( select ) =>\n\t\t\tunlock( select( editSiteStore ) ).getEditorCanvasContainerView(),\n\t\t[]\n\t);\n\tconst path = location?.path;\n\tconst isRevisionsOpen = path === '/revisions';\n\n\t// If the user switches the editor canvas container view, redirect\n\t// to the appropriate screen. This effectively allows deep linking to the\n\t// desired screens from outside the global styles navigation provider.\n\tuseEffect( () => {\n\t\tswitch ( editorCanvasContainerView ) {\n\t\t\tcase 'global-styles-revisions':\n\t\t\tcase 'global-styles-revisions:style-book':\n\t\t\t\tgoTo( '/revisions' );\n\t\t\t\tbreak;\n\t\t\tcase 'global-styles-css':\n\t\t\t\tgoTo( '/css' );\n\t\t\t\tbreak;\n\t\t\tcase 'style-book':\n\t\t\t\t/*\n\t\t\t\t * The stand-alone style book is open\n\t\t\t\t * and the revisions panel is open,\n\t\t\t\t * close the revisions panel.\n\t\t\t\t * Otherwise keep the style book open while\n\t\t\t\t * browsing global styles panel.\n\t\t\t\t */\n\t\t\t\tif ( isRevisionsOpen ) {\n\t\t\t\t\tgoTo( '/' );\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\t/*\n\t\t\t\t * Example: the user has navigated to \"Browse styles\" or elsewhere\n\t\t\t\t * and changes the editorCanvasContainerView, e.g., closes the style book.\n\t\t\t\t * The panel should not be affected.\n\t\t\t\t * Exclude revisions panel from this behavior,\n\t\t\t\t * as it should close when the editorCanvasContainerView doesn't correspond.\n\t\t\t\t */\n\t\t\t\tif ( path !== '/' && ! isRevisionsOpen ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tgoTo( '/' );\n\t\t\t\tbreak;\n\t\t}\n\t}, [ editorCanvasContainerView, isRevisionsOpen, goTo ] );\n}\n\nfunction GlobalStylesUI() {\n\tconst blocks = getBlockTypes();\n\tconst editorCanvasContainerView = useSelect(\n\t\t( select ) =>\n\t\t\tunlock( select( editSiteStore ) ).getEditorCanvasContainerView(),\n\t\t[]\n\t);\n\treturn (\n\t\t<NavigatorProvider\n\t\t\tclassName=\"edit-site-global-styles-sidebar__navigator-provider\"\n\t\t\tinitialPath=\"/\"\n\t\t>\n\t\t\t<GlobalStylesNavigationScreen path=\"/\">\n\t\t\t\t<ScreenRoot />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/variations\">\n\t\t\t\t<ScreenStyleVariations />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/blocks\">\n\t\t\t\t<ScreenBlockList />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/typography\">\n\t\t\t\t<ScreenTypography />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/typography/text\">\n\t\t\t\t<ScreenTypographyElement element=\"text\" />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/typography/link\">\n\t\t\t\t<ScreenTypographyElement element=\"link\" />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/typography/heading\">\n\t\t\t\t<ScreenTypographyElement element=\"heading\" />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/typography/caption\">\n\t\t\t\t<ScreenTypographyElement element=\"caption\" />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/typography/button\">\n\t\t\t\t<ScreenTypographyElement element=\"button\" />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/colors\">\n\t\t\t\t<ScreenColors />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/layout\">\n\t\t\t\t<ScreenLayout />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/css\">\n\t\t\t\t<ScreenCSS />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path={ '/revisions' }>\n\t\t\t\t<ScreenRevisions />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t{ blocks.map( ( block ) => (\n\t\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\t\tkey={ 'menu-block-' + block.name }\n\t\t\t\t\tpath={ '/blocks/' + encodeURIComponent( block.name ) }\n\t\t\t\t>\n\t\t\t\t\t<ScreenBlock name={ block.name } />\n\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t) ) }\n\n\t\t\t<ContextScreens />\n\n\t\t\t{ blocks.map( ( block ) => (\n\t\t\t\t<ContextScreens\n\t\t\t\t\tkey={ 'screens-block-' + block.name }\n\t\t\t\t\tname={ block.name }\n\t\t\t\t\tparentMenu={ '/blocks/' + encodeURIComponent( block.name ) }\n\t\t\t\t/>\n\t\t\t) ) }\n\n\t\t\t{ 'style-book' === editorCanvasContainerView && (\n\t\t\t\t<GlobalStylesStyleBook />\n\t\t\t) }\n\n\t\t\t<GlobalStylesActionMenu />\n\t\t\t<GlobalStylesBlockLink />\n\t\t\t<GlobalStylesEditorCanvasContainerLink />\n\t\t</NavigatorProvider>\n\t);\n}\nexport { GlobalStylesMenuSlot };\nexport default GlobalStylesUI;\n"],"mappings":"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"}
+{"version":3,"names":["__experimentalNavigatorProvider","NavigatorProvider","__experimentalNavigatorScreen","NavigatorScreen","__experimentalUseNavigator","useNavigator","createSlotFill","DropdownMenu","MenuGroup","MenuItem","getBlockTypes","store","blocksStore","useSelect","useDispatch","privateApis","blockEditorPrivateApis","blockEditorStore","__","preferencesStore","moreVertical","coreStore","useEffect","ScreenRoot","useBlockHasGlobalStyles","default","ScreenBlockList","ScreenBlock","ScreenTypography","ScreenTypographyElement","ScreenColors","ScreenColorPalette","ScreenLayout","ScreenStyleVariations","StyleBook","ScreenCSS","ScreenRevisions","ScreenBackground","unlock","editSiteStore","SLOT_FILL_NAME","useGlobalStylesReset","Slot","GlobalStylesMenuSlot","Fill","GlobalStylesMenuFill","GlobalStylesActionMenu","canReset","onReset","toggle","canEditCSS","select","getEntityRecord","__experimentalGetCurrentGlobalStylesId","globalStylesId","globalStyles","undefined","_links","setEditorCanvasContainerView","goTo","loadCustomCSS","createElement","icon","label","onClose","Fragment","onClick","disabled","GlobalStylesNavigationScreen","className","props","filter","Boolean","join","BlockStylesNavigationScreens","parentMenu","blockStyles","blockName","map","style","index","key","path","name","variation","ContextScreens","blockStyleVariations","getBlockStyles","length","GlobalStylesStyleBook","navigator","location","isSelected","encodeURIComponent","startsWith","onSelect","GlobalStylesBlockLink","selectedBlockName","selectedBlockClientId","getSelectedBlockClientId","getBlockName","clientId","blockHasGlobalStyles","currentPath","newPath","skipFocus","GlobalStylesEditorCanvasContainerLink","editorCanvasContainerView","getEditorCanvasContainerView","isRevisionsOpen","GlobalStylesUI","blocks","initialPath","element","block"],"sources":["@wordpress/edit-site/src/components/global-styles/ui.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalNavigatorProvider as NavigatorProvider,\n\t__experimentalNavigatorScreen as NavigatorScreen,\n\t__experimentalUseNavigator as useNavigator,\n\tcreateSlotFill,\n\tDropdownMenu,\n\tMenuGroup,\n\tMenuItem,\n} from '@wordpress/components';\nimport { getBlockTypes, store as blocksStore } from '@wordpress/blocks';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tprivateApis as blockEditorPrivateApis,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { __ } from '@wordpress/i18n';\nimport { store as preferencesStore } from '@wordpress/preferences';\nimport { moreVertical } from '@wordpress/icons';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ScreenRoot from './screen-root';\nimport {\n\tuseBlockHasGlobalStyles,\n\tdefault as ScreenBlockList,\n} from './screen-block-list';\nimport ScreenBlock from './screen-block';\nimport ScreenTypography from './screen-typography';\nimport ScreenTypographyElement from './screen-typography-element';\nimport ScreenColors from './screen-colors';\nimport ScreenColorPalette from './screen-color-palette';\nimport ScreenLayout from './screen-layout';\nimport ScreenStyleVariations from './screen-style-variations';\nimport StyleBook from '../style-book';\nimport ScreenCSS from './screen-css';\nimport ScreenRevisions from './screen-revisions';\nimport ScreenBackground from './screen-background';\nimport { unlock } from '../../lock-unlock';\nimport { store as editSiteStore } from '../../store';\n\nconst SLOT_FILL_NAME = 'GlobalStylesMenu';\nconst { useGlobalStylesReset } = unlock( blockEditorPrivateApis );\nconst { Slot: GlobalStylesMenuSlot, Fill: GlobalStylesMenuFill } =\n\tcreateSlotFill( SLOT_FILL_NAME );\n\nfunction GlobalStylesActionMenu() {\n\tconst [ canReset, onReset ] = useGlobalStylesReset();\n\tconst { toggle } = useDispatch( preferencesStore );\n\tconst { canEditCSS } = useSelect( ( select ) => {\n\t\tconst { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =\n\t\t\tselect( coreStore );\n\n\t\tconst globalStylesId = __experimentalGetCurrentGlobalStylesId();\n\t\tconst globalStyles = globalStylesId\n\t\t\t? getEntityRecord( 'root', 'globalStyles', globalStylesId )\n\t\t\t: undefined;\n\n\t\treturn {\n\t\t\tcanEditCSS: !! globalStyles?._links?.[ 'wp:action-edit-css' ],\n\t\t};\n\t}, [] );\n\tconst { setEditorCanvasContainerView } = unlock(\n\t\tuseDispatch( editSiteStore )\n\t);\n\tconst { goTo } = useNavigator();\n\tconst loadCustomCSS = () => {\n\t\tsetEditorCanvasContainerView( 'global-styles-css' );\n\t\tgoTo( '/css' );\n\t};\n\n\treturn (\n\t\t<GlobalStylesMenuFill>\n\t\t\t<DropdownMenu icon={ moreVertical } label={ __( 'More' ) }>\n\t\t\t\t{ ( { onClose } ) => (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<MenuGroup>\n\t\t\t\t\t\t\t{ canEditCSS && (\n\t\t\t\t\t\t\t\t<MenuItem onClick={ loadCustomCSS }>\n\t\t\t\t\t\t\t\t\t{ __( 'Additional CSS' ) }\n\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\ttoggle(\n\t\t\t\t\t\t\t\t\t\t'core/edit-site',\n\t\t\t\t\t\t\t\t\t\t'welcomeGuideStyles'\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Welcome Guide' ) }\n\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t\t<MenuGroup>\n\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\tonReset();\n\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tdisabled={ ! canReset }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Reset styles' ) }\n\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t</DropdownMenu>\n\t\t</GlobalStylesMenuFill>\n\t);\n}\n\nfunction GlobalStylesNavigationScreen( { className, ...props } ) {\n\treturn (\n\t\t<NavigatorScreen\n\t\t\tclassName={ [\n\t\t\t\t'edit-site-global-styles-sidebar__navigator-screen',\n\t\t\t\tclassName,\n\t\t\t]\n\t\t\t\t.filter( Boolean )\n\t\t\t\t.join( ' ' ) }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction BlockStylesNavigationScreens( {\n\tparentMenu,\n\tblockStyles,\n\tblockName,\n} ) {\n\treturn blockStyles.map( ( style, index ) => (\n\t\t<GlobalStylesNavigationScreen\n\t\t\tkey={ index }\n\t\t\tpath={ parentMenu + '/variations/' + style.name }\n\t\t>\n\t\t\t<ScreenBlock name={ blockName } variation={ style.name } />\n\t\t</GlobalStylesNavigationScreen>\n\t) );\n}\n\nfunction ContextScreens( { name, parentMenu = '' } ) {\n\tconst blockStyleVariations = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockStyles } = select( blocksStore );\n\t\t\treturn getBlockStyles( name );\n\t\t},\n\t\t[ name ]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\tpath={ parentMenu + '/colors/palette' }\n\t\t\t>\n\t\t\t\t<ScreenColorPalette name={ name } />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t{ !! blockStyleVariations?.length && (\n\t\t\t\t<BlockStylesNavigationScreens\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\tblockStyles={ blockStyleVariations }\n\t\t\t\t\tblockName={ name }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nfunction GlobalStylesStyleBook() {\n\tconst navigator = useNavigator();\n\tconst { path } = navigator.location;\n\treturn (\n\t\t<StyleBook\n\t\t\tisSelected={ ( blockName ) =>\n\t\t\t\t// Match '/blocks/core%2Fbutton' and\n\t\t\t\t// '/blocks/core%2Fbutton/typography', but not\n\t\t\t\t// '/blocks/core%2Fbuttons'.\n\t\t\t\tpath === `/blocks/${ encodeURIComponent( blockName ) }` ||\n\t\t\t\tpath.startsWith(\n\t\t\t\t\t`/blocks/${ encodeURIComponent( blockName ) }/`\n\t\t\t\t)\n\t\t\t}\n\t\t\tonSelect={ ( blockName ) => {\n\t\t\t\t// Now go to the selected block.\n\t\t\t\tnavigator.goTo( '/blocks/' + encodeURIComponent( blockName ) );\n\t\t\t} }\n\t\t/>\n\t);\n}\n\nfunction GlobalStylesBlockLink() {\n\tconst navigator = useNavigator();\n\tconst { selectedBlockName, selectedBlockClientId } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getSelectedBlockClientId, getBlockName } =\n\t\t\t\tselect( blockEditorStore );\n\t\t\tconst clientId = getSelectedBlockClientId();\n\t\t\treturn {\n\t\t\t\tselectedBlockName: getBlockName( clientId ),\n\t\t\t\tselectedBlockClientId: clientId,\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\tconst blockHasGlobalStyles = useBlockHasGlobalStyles( selectedBlockName );\n\t// When we're in the `Blocks` screen enable deep linking to the selected block.\n\tuseEffect( () => {\n\t\tif ( ! selectedBlockClientId || ! blockHasGlobalStyles ) {\n\t\t\treturn;\n\t\t}\n\t\tconst currentPath = navigator.location.path;\n\t\tif (\n\t\t\tcurrentPath !== '/blocks' &&\n\t\t\t! currentPath.startsWith( '/blocks/' )\n\t\t) {\n\t\t\treturn;\n\t\t}\n\t\tconst newPath = '/blocks/' + encodeURIComponent( selectedBlockName );\n\t\t// Avoid navigating to the same path. This can happen when selecting\n\t\t// a new block of the same type.\n\t\tif ( newPath !== currentPath ) {\n\t\t\tnavigator.goTo( newPath, { skipFocus: true } );\n\t\t}\n\t}, [ selectedBlockClientId, selectedBlockName, blockHasGlobalStyles ] );\n}\n\nfunction GlobalStylesEditorCanvasContainerLink() {\n\tconst { goTo, location } = useNavigator();\n\tconst editorCanvasContainerView = useSelect(\n\t\t( select ) =>\n\t\t\tunlock( select( editSiteStore ) ).getEditorCanvasContainerView(),\n\t\t[]\n\t);\n\tconst path = location?.path;\n\tconst isRevisionsOpen = path === '/revisions';\n\n\t// If the user switches the editor canvas container view, redirect\n\t// to the appropriate screen. This effectively allows deep linking to the\n\t// desired screens from outside the global styles navigation provider.\n\tuseEffect( () => {\n\t\tswitch ( editorCanvasContainerView ) {\n\t\t\tcase 'global-styles-revisions':\n\t\t\tcase 'global-styles-revisions:style-book':\n\t\t\t\tgoTo( '/revisions' );\n\t\t\t\tbreak;\n\t\t\tcase 'global-styles-css':\n\t\t\t\tgoTo( '/css' );\n\t\t\t\tbreak;\n\t\t\tcase 'style-book':\n\t\t\t\t/*\n\t\t\t\t * The stand-alone style book is open\n\t\t\t\t * and the revisions panel is open,\n\t\t\t\t * close the revisions panel.\n\t\t\t\t * Otherwise keep the style book open while\n\t\t\t\t * browsing global styles panel.\n\t\t\t\t */\n\t\t\t\tif ( isRevisionsOpen ) {\n\t\t\t\t\tgoTo( '/' );\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\t/*\n\t\t\t\t * Example: the user has navigated to \"Browse styles\" or elsewhere\n\t\t\t\t * and changes the editorCanvasContainerView, e.g., closes the style book.\n\t\t\t\t * The panel should not be affected.\n\t\t\t\t * Exclude revisions panel from this behavior,\n\t\t\t\t * as it should close when the editorCanvasContainerView doesn't correspond.\n\t\t\t\t */\n\t\t\t\tif ( path !== '/' && ! isRevisionsOpen ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tgoTo( '/' );\n\t\t\t\tbreak;\n\t\t}\n\t}, [ editorCanvasContainerView, isRevisionsOpen, goTo ] );\n}\n\nfunction GlobalStylesUI() {\n\tconst blocks = getBlockTypes();\n\tconst editorCanvasContainerView = useSelect(\n\t\t( select ) =>\n\t\t\tunlock( select( editSiteStore ) ).getEditorCanvasContainerView(),\n\t\t[]\n\t);\n\treturn (\n\t\t<NavigatorProvider\n\t\t\tclassName=\"edit-site-global-styles-sidebar__navigator-provider\"\n\t\t\tinitialPath=\"/\"\n\t\t>\n\t\t\t<GlobalStylesNavigationScreen path=\"/\">\n\t\t\t\t<ScreenRoot />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/variations\">\n\t\t\t\t<ScreenStyleVariations />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/blocks\">\n\t\t\t\t<ScreenBlockList />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/typography\">\n\t\t\t\t<ScreenTypography />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/typography/text\">\n\t\t\t\t<ScreenTypographyElement element=\"text\" />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/typography/link\">\n\t\t\t\t<ScreenTypographyElement element=\"link\" />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/typography/heading\">\n\t\t\t\t<ScreenTypographyElement element=\"heading\" />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/typography/caption\">\n\t\t\t\t<ScreenTypographyElement element=\"caption\" />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/typography/button\">\n\t\t\t\t<ScreenTypographyElement element=\"button\" />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/colors\">\n\t\t\t\t<ScreenColors />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/layout\">\n\t\t\t\t<ScreenLayout />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path=\"/css\">\n\t\t\t\t<ScreenCSS />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path={ '/revisions' }>\n\t\t\t\t<ScreenRevisions />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t<GlobalStylesNavigationScreen path={ '/background' }>\n\t\t\t\t<ScreenBackground />\n\t\t\t</GlobalStylesNavigationScreen>\n\n\t\t\t{ blocks.map( ( block ) => (\n\t\t\t\t<GlobalStylesNavigationScreen\n\t\t\t\t\tkey={ 'menu-block-' + block.name }\n\t\t\t\t\tpath={ '/blocks/' + encodeURIComponent( block.name ) }\n\t\t\t\t>\n\t\t\t\t\t<ScreenBlock name={ block.name } />\n\t\t\t\t</GlobalStylesNavigationScreen>\n\t\t\t) ) }\n\n\t\t\t<ContextScreens />\n\n\t\t\t{ blocks.map( ( block ) => (\n\t\t\t\t<ContextScreens\n\t\t\t\t\tkey={ 'screens-block-' + block.name }\n\t\t\t\t\tname={ block.name }\n\t\t\t\t\tparentMenu={ '/blocks/' + encodeURIComponent( block.name ) }\n\t\t\t\t/>\n\t\t\t) ) }\n\n\t\t\t{ 'style-book' === editorCanvasContainerView && (\n\t\t\t\t<GlobalStylesStyleBook />\n\t\t\t) }\n\n\t\t\t<GlobalStylesActionMenu />\n\t\t\t<GlobalStylesBlockLink />\n\t\t\t<GlobalStylesEditorCanvasContainerLink />\n\t\t</NavigatorProvider>\n\t);\n}\nexport { GlobalStylesMenuSlot };\nexport default GlobalStylesUI;\n"],"mappings":"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"}