npm - @wordpress/edit-site - Versions diffs - 5.31.0 → 5.32.0 - Mend

@wordpress/edit-site 5.31.0 → 5.32.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (280) hide show

package/build-module/components/global-styles/root-menu.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { createElement, Fragment } from "react";
  * WordPress dependencies
  */
 import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
-import { typography, color, layout } from '@wordpress/icons';
+import { typography, color, layout, image } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
@@ -17,7 +17,8 @@ const {
   useHasTypographyPanel,
   useHasColorPanel,
   useGlobalSetting,
-  useSettingsForBlockElement
+  useSettingsForBlockElement,
+  useHasBackgroundPanel
 } = unlock(blockEditorPrivateApis);
 function RootMenu() {
   const [rawSettings] = useGlobalSetting('');
@@ -26,6 +27,7 @@ function RootMenu() {
   const hasColorPanel = useHasColorPanel(settings);
   const hasDimensionsPanel = useHasDimensionsPanel(settings);
   const hasLayoutPanel = hasDimensionsPanel;
+  const hasBackgroundPanel = useHasBackgroundPanel(settings);
   return createElement(Fragment, null, createElement(ItemGroup, null, hasTypographyPanel && createElement(NavigationButtonAsItem, {
     icon: typography,
     path: "/typography",
@@ -38,7 +40,11 @@ function RootMenu() {
     icon: layout,
     path: "/layout",
     "aria-label": __('Layout styles')
-  }, __('Layout'))));
+  }, __('Layout')), hasBackgroundPanel && createElement(NavigationButtonAsItem, {
+    icon: image,
+    path: "/background",
+    "aria-label": __('Background styles')
+  }, __('Background'))));
 }
 export default RootMenu;
 //# sourceMappingURL=root-menu.js.map

package/build-module/components/global-styles/root-menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__experimentalItemGroup","ItemGroup","typography","color","layout","__","privateApis","blockEditorPrivateApis","NavigationButtonAsItem","unlock","useHasDimensionsPanel","useHasTypographyPanel","useHasColorPanel","useGlobalSetting","useSettingsForBlockElement","RootMenu","rawSettings","settings","hasTypographyPanel","hasColorPanel","hasDimensionsPanel","hasLayoutPanel","createElement","Fragment","icon","path"],"sources":["@wordpress/edit-site/src/components/global-styles/root-menu.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __experimentalItemGroup as ItemGroup } from '@wordpress/components';\nimport { typography, color, layout } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/\n Internal dependencies\n */\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { unlock } from '../../lock-unlock';\n\nconst {\n\tuseHasDimensionsPanel,\n\tuseHasTypographyPanel,\n\tuseHasColorPanel,\n\tuseGlobalSetting,\n\tuseSettingsForBlockElement,\n} = unlock( blockEditorPrivateApis );\n\nfunction RootMenu() {\n\tconst [ rawSettings ] = useGlobalSetting( '' );\n\tconst settings = useSettingsForBlockElement( rawSettings );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( settings );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\tconst hasLayoutPanel = hasDimensionsPanel;\n\n\treturn (\n\t\t<>\n\t\t\t<ItemGroup>\n\t\t\t\t{ hasTypographyPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ typography }\n\t\t\t\t\t\tpath=\"/typography\"\n\t\t\t\t\t\taria-label={ __( 'Typography styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Typography' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasColorPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ color }\n\t\t\t\t\t\tpath=\"/colors\"\n\t\t\t\t\t\taria-label={ __( 'Colors styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Colors' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasLayoutPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ layout }\n\t\t\t\t\t\tpath=\"/layout\"\n\t\t\t\t\t\taria-label={ __( 'Layout styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Layout' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t</ItemGroup>\n\t\t</>\n\t);\n}\n\nexport default RootMenu;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,uBAAuB,IAAIC,SAAS,QAAQ,uBAAuB;AAC5E,SAASC,UAAU,EAAEC,KAAK,EAAEC,MAAM,QAAQ,kBAAkB;~~AAC5D~~,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,WAAW,IAAIC,sBAAsB,QAAQ,yBAAyB;;AAE/E;AACA;AACA;AACA,SAASC,sBAAsB,QAAQ,qBAAqB;AAC5D,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,MAAM;EACLC,qBAAqB;EACrBC,qBAAqB;EACrBC,gBAAgB;EAChBC,gBAAgB;EAChBC;AACD,CAAC,~~GAAGL~~,MAAM,CAAEF,sBAAuB,CAAC;AAEpC,~~SAASQ~~,QAAQA,CAAA,EAAG;EACnB,MAAM,CAAEC,WAAW,CAAE,~~GAAGH~~,gBAAgB,CAAE,EAAG,CAAC;EAC9C,~~MAAMI~~,QAAQ,~~GAAGH~~,0BAA0B,~~CAAEE~~,WAAY,CAAC;EAC1D,MAAME,kBAAkB,~~GAAGP~~,qBAAqB,~~CAAEM~~,QAAS,CAAC;EAC5D,MAAME,aAAa,~~GAAGP~~,gBAAgB,~~CAAEK~~,QAAS,CAAC;EAClD,MAAMG,kBAAkB,~~GAAGV~~,qBAAqB,~~CAAEO~~,QAAS,CAAC;EAC5D,MAAMI,cAAc,GAAGD,kBAAkB;~~EAEzC~~,~~OACCE~~,aAAA,CAAAC,QAAA,QACCD,aAAA,~~CAACrB~~,SAAS,~~QACPiB~~,kBAAkB,~~IACnBI~~,aAAA,~~CAACd~~,sBAAsB;~~IACtBgB~~,IAAI,~~EAAGtB~~,UAAY;~~IACnBuB~~,IAAI,EAAC,aAAa;IAClB,~~cAAapB~~,EAAE,CAAE,mBAAoB;EAAG,GAEtCA,EAAE,CAAE,YAAa,CACI,CACxB,~~EACCc~~,aAAa,~~IACdG~~,aAAA,~~CAACd~~,sBAAsB;~~IACtBgB~~,IAAI,~~EAAGrB~~,KAAO;~~IACdsB~~,IAAI,EAAC,SAAS;IACd,~~cAAapB~~,EAAE,CAAE,eAAgB;EAAG,GAElCA,EAAE,CAAE,QAAS,CACQ,CACxB,~~EACCgB~~,cAAc,~~IACfC~~,aAAA,~~CAACd~~,sBAAsB;~~IACtBgB~~,IAAI,~~EAAGpB~~,MAAQ;~~IACfqB~~,IAAI,EAAC,SAAS;IACd,~~cAAapB~~,EAAE,CAAE,eAAgB;EAAG,GAElCA,EAAE,CAAE,QAAS,CACQ,CAEf,CACV,CAAC;AAEL;AAEA,~~eAAeU~~,QAAQ"}
1	+ {"version":3,"names":["__experimentalItemGroup","ItemGroup","typography","color","layout","image","__","privateApis","blockEditorPrivateApis","NavigationButtonAsItem","unlock","useHasDimensionsPanel","useHasTypographyPanel","useHasColorPanel","useGlobalSetting","useSettingsForBlockElement","useHasBackgroundPanel","RootMenu","rawSettings","settings","hasTypographyPanel","hasColorPanel","hasDimensionsPanel","hasLayoutPanel","hasBackgroundPanel","createElement","Fragment","icon","path"],"sources":["@wordpress/edit-site/src/components/global-styles/root-menu.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __experimentalItemGroup as ItemGroup } from '@wordpress/components';\nimport { typography, color, layout, image } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/\n Internal dependencies\n */\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { unlock } from '../../lock-unlock';\n\nconst {\n\tuseHasDimensionsPanel,\n\tuseHasTypographyPanel,\n\tuseHasColorPanel,\n\tuseGlobalSetting,\n\tuseSettingsForBlockElement,\n\tuseHasBackgroundPanel,\n} = unlock( blockEditorPrivateApis );\n\nfunction RootMenu() {\n\tconst [ rawSettings ] = useGlobalSetting( '' );\n\tconst settings = useSettingsForBlockElement( rawSettings );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( settings );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\tconst hasLayoutPanel = hasDimensionsPanel;\n\tconst hasBackgroundPanel = useHasBackgroundPanel( settings );\n\n\treturn (\n\t\t<>\n\t\t\t<ItemGroup>\n\t\t\t\t{ hasTypographyPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ typography }\n\t\t\t\t\t\tpath=\"/typography\"\n\t\t\t\t\t\taria-label={ __( 'Typography styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Typography' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasColorPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ color }\n\t\t\t\t\t\tpath=\"/colors\"\n\t\t\t\t\t\taria-label={ __( 'Colors styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Colors' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasLayoutPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ layout }\n\t\t\t\t\t\tpath=\"/layout\"\n\t\t\t\t\t\taria-label={ __( 'Layout styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Layout' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasBackgroundPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ image }\n\t\t\t\t\t\tpath=\"/background\"\n\t\t\t\t\t\taria-label={ __( 'Background styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Background' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t</ItemGroup>\n\t\t</>\n\t);\n}\n\nexport default RootMenu;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,uBAAuB,IAAIC,SAAS,QAAQ,uBAAuB;AAC5E,SAASC,UAAU,EAAEC,KAAK,EAAEC,MAAM,EAAEC,KAAK,QAAQ,kBAAkB;AACnE,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,WAAW,IAAIC,sBAAsB,QAAQ,yBAAyB;;AAE/E;AACA;AACA;AACA,SAASC,sBAAsB,QAAQ,qBAAqB;AAC5D,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,MAAM;EACLC,qBAAqB;EACrBC,qBAAqB;EACrBC,gBAAgB;EAChBC,gBAAgB;EAChBC,0BAA0B;EAC1BC;AACD,CAAC,GAAGN,MAAM,CAAEF,sBAAuB,CAAC;AAEpC,SAASS,QAAQA,CAAA,EAAG;EACnB,MAAM,CAAEC,WAAW,CAAE,GAAGJ,gBAAgB,CAAE,EAAG,CAAC;EAC9C,MAAMK,QAAQ,GAAGJ,0BAA0B,CAAEG,WAAY,CAAC;EAC1D,MAAME,kBAAkB,GAAGR,qBAAqB,CAAEO,QAAS,CAAC;EAC5D,MAAME,aAAa,GAAGR,gBAAgB,CAAEM,QAAS,CAAC;EAClD,MAAMG,kBAAkB,GAAGX,qBAAqB,CAAEQ,QAAS,CAAC;EAC5D,MAAMI,cAAc,GAAGD,kBAAkB;EACzC,MAAME,kBAAkB,GAAGR,qBAAqB,CAAEG,QAAS,CAAC;EAE5D,OACCM,aAAA,CAAAC,QAAA,QACCD,aAAA,CAACxB,SAAS,QACPmB,kBAAkB,IACnBK,aAAA,CAAChB,sBAAsB;IACtBkB,IAAI,EAAGzB,UAAY;IACnB0B,IAAI,EAAC,aAAa;IAClB,cAAatB,EAAE,CAAE,mBAAoB;EAAG,GAEtCA,EAAE,CAAE,YAAa,CACI,CACxB,EACCe,aAAa,IACdI,aAAA,CAAChB,sBAAsB;IACtBkB,IAAI,EAAGxB,KAAO;IACdyB,IAAI,EAAC,SAAS;IACd,cAAatB,EAAE,CAAE,eAAgB;EAAG,GAElCA,EAAE,CAAE,QAAS,CACQ,CACxB,EACCiB,cAAc,IACfE,aAAA,CAAChB,sBAAsB;IACtBkB,IAAI,EAAGvB,MAAQ;IACfwB,IAAI,EAAC,SAAS;IACd,cAAatB,EAAE,CAAE,eAAgB;EAAG,GAElCA,EAAE,CAAE,QAAS,CACQ,CACxB,EACCkB,kBAAkB,IACnBC,aAAA,CAAChB,sBAAsB;IACtBkB,IAAI,EAAGtB,KAAO;IACduB,IAAI,EAAC,aAAa;IAClB,cAAatB,EAAE,CAAE,mBAAoB;EAAG,GAEtCA,EAAE,CAAE,YAAa,CACI,CAEf,CACV,CAAC;AAEL;AAEA,eAAeW,QAAQ"}

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

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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,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 CHANGED Viewed

@@ -30,12 +30,14 @@ function ScreenColors() {
   const settings = useSettingsForBlockElement(rawSettings);
   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: 6
-  }, createElement(ColorVariations, null), createElement(Palette, null), createElement(StylesColorPanel, {
+    spacing: 7
+  }, createElement(ColorVariations, {
+    title: __('Presets')
+  }), createElement(Palette, null), createElement(StylesColorPanel, {
     inheritedValue: inheritedStyle,
     value: style,
     onChange: setStyle,

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

	@@ -1 +1 @@
1	- {"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'~~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={ 6 }>\n\t\t\t\t\t<ColorVariations />\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,~~iFACD~~;EAAG,CACH,CAAC,EACFsB,aAAA;IAAKI,SAAS,EAAC;~~EAAuC~~,~~GACrDJ~~,aAAA,CAACpB,MAAM;IAACyB,OAAO,EAAG;EAAG,GACpBL,aAAA,CAACd,eAAe,~~MAAE~~,CAAC,~~EACnBc~~,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"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -18,14 +18,14 @@ function ScreenTypography() {
   const fontLibraryEnabled = useSelect(select => select(editorStore).getEditorSettings().fontLibraryEnabled, []);
   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
-  }, 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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"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'~~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 />\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;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,~~wDACD~~;EAAG,CACH,CAAC,EACFc,aAAA;IAAKI,SAAS,EAAC;~~EAA2C~~,~~GACzDJ~~,aAAA,CAACZ,MAAM;IAACiB,OAAO,EAAG;EAAG,GACpBL,aAAA,CAACP,oBAAoB,~~MAAE~~,~~CAAC~~,~~EACtB~~,~~CAAEa~~,~~MAAM~~,~~CAACC~~,~~gCAAgC~~,~~IAC1CP~~,~~aAAA~~,~~CAACZ,~~MAAM~~;IAACiB~~,~~OAAO~~,~~EAAG;EAAG~~,~~GAClBR~~,kBAAkB,IAAIG,aAAA,CAACN,YAAY,MAAE,~~CAChC~~,~~CACR~~,~~EACDM,~~aAAA,CAACR,kBAAkB,MAAE,CACd,CACJ,CACJ,CAAC;AAEL;AAEA,eAAeI,gBAAgB"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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/ui.js CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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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"}
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","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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"}

package/build-module/components/global-styles/variations/variations-color.js CHANGED Viewed

@@ -10,15 +10,22 @@ import { __experimentalGrid as Grid, __experimentalVStack as VStack } from '@wor
 import Variation from './variation';
 import StylesPreviewColors from '../preview-colors';
 import { useColorVariations } from '../hooks';
-export default function ColorVariations() {
+import Subtitle from '../subtitle';
+export default function ColorVariations({
+  title,
+  gap = 2
+}) {
   const colorVariations = useColorVariations();
   if (!colorVariations?.length) {
     return null;
   }
   return createElement(VStack, {
     spacing: 3
-  }, createElement(Grid, {
-    columns: 3
+  }, title && createElement(Subtitle, {
+    level: 3
+  }, title), createElement(Grid, {
+    columns: 3,
+    gap: gap
   }, colorVariations.map((variation, index) => createElement(Variation, {
     key: index,
     variation: variation

package/build-module/components/global-styles/variations/variations-color.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__experimentalGrid","Grid","__experimentalVStack","VStack","Variation","StylesPreviewColors","useColorVariations","ColorVariations","colorVariations","length","createElement","spacing","columns","map","variation","index","key"],"sources":["@wordpress/edit-site/src/components/global-styles/variations/variations-color.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport {\n\t__experimentalGrid as Grid,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\n\n/\n Internal dependencies\n */\nimport Variation from './variation';\nimport StylesPreviewColors from '../preview-colors';\nimport { useColorVariations } from '../hooks';\n\nexport default function ColorVariations() {\n\tconst colorVariations = useColorVariations();\n\n\tif ( ! colorVariations?.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<Grid columns={ 3 }>\n\t\t\t\t{ colorVariations.map( ( variation, index ) => (\n\t\t\t\t\t<Variation key={ index } variation={ variation }>\n\t\t\t\t\t\t{ () => <StylesPreviewColors /> }\n\t\t\t\t\t</Variation>\n\t\t\t\t) ) }\n\t\t\t</Grid>\n\t\t</VStack>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SACCA,kBAAkB,IAAIC,IAAI,EAC1BC,oBAAoB,IAAIC,MAAM,QACxB,uBAAuB;;AAE9B;AACA;AACA;AACA,OAAOC,SAAS,MAAM,aAAa;AACnC,OAAOC,mBAAmB,MAAM,mBAAmB;AACnD,SAASC,kBAAkB,QAAQ,UAAU;~~AAE7C~~,eAAe,SAASC,eAAeA,~~CAAA~~,EAAG;~~EACzC~~,MAAMC,eAAe,~~GAAGF~~,kBAAkB,CAAC,CAAC;EAE5C,IAAK,~~CAAEE~~,eAAe,EAAEC,MAAM,EAAG;IAChC,OAAO,IAAI;EACZ;EAEA,OACCC,aAAA,~~CAACP~~,MAAM;~~IAACQ~~,OAAO,EAAG;EAAG,~~GACpBD~~,aAAA,~~CAACT~~,IAAI;~~IAACW~~,OAAO,EAAG;~~EAAG~~,~~GAChBJ~~,eAAe,~~CAACK~~,GAAG,CAAE,CAAEC,SAAS,EAAEC,KAAK,~~KACxCL~~,aAAA,~~CAACN~~,SAAS;~~IAACY~~,GAAG,EAAGD,KAAO;IAACD,SAAS,EAAGA;EAAW,GAC7C,~~MAAMJ~~,aAAA,~~CAACL~~,mBAAmB,MAAE,CACpB,CACV,CACG,CACC,CAAC;AAEX"}
1	+ {"version":3,"names":["__experimentalGrid","Grid","__experimentalVStack","VStack","Variation","StylesPreviewColors","useColorVariations","Subtitle","ColorVariations","title","gap","colorVariations","length","createElement","spacing","level","columns","map","variation","index","key"],"sources":["@wordpress/edit-site/src/components/global-styles/variations/variations-color.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport {\n\t__experimentalGrid as Grid,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\n\n/\n Internal dependencies\n */\nimport Variation from './variation';\nimport StylesPreviewColors from '../preview-colors';\nimport { useColorVariations } from '../hooks';\nimport Subtitle from '../subtitle';\n\nexport default function ColorVariations( { title, gap = 2 } ) {\n\tconst colorVariations = useColorVariations();\n\n\tif ( ! colorVariations?.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t{ title && <Subtitle level={ 3 }>{ title }</Subtitle> }\n\t\t\t<Grid columns={ 3 } gap={ gap }>\n\t\t\t\t{ colorVariations.map( ( variation, index ) => (\n\t\t\t\t\t<Variation key={ index } variation={ variation }>\n\t\t\t\t\t\t{ () => <StylesPreviewColors /> }\n\t\t\t\t\t</Variation>\n\t\t\t\t) ) }\n\t\t\t</Grid>\n\t\t</VStack>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SACCA,kBAAkB,IAAIC,IAAI,EAC1BC,oBAAoB,IAAIC,MAAM,QACxB,uBAAuB;;AAE9B;AACA;AACA;AACA,OAAOC,SAAS,MAAM,aAAa;AACnC,OAAOC,mBAAmB,MAAM,mBAAmB;AACnD,SAASC,kBAAkB,QAAQ,UAAU;AAC7C,OAAOC,QAAQ,MAAM,aAAa;AAElC,eAAe,SAASC,eAAeA,CAAE;EAAEC,KAAK;EAAEC,GAAG,GAAG;AAAE,CAAC,EAAG;EAC7D,MAAMC,eAAe,GAAGL,kBAAkB,CAAC,CAAC;EAE5C,IAAK,CAAEK,eAAe,EAAEC,MAAM,EAAG;IAChC,OAAO,IAAI;EACZ;EAEA,OACCC,aAAA,CAACV,MAAM;IAACW,OAAO,EAAG;EAAG,GAClBL,KAAK,IAAII,aAAA,CAACN,QAAQ;IAACQ,KAAK,EAAG;EAAG,GAAGN,KAAiB,CAAC,EACrDI,aAAA,CAACZ,IAAI;IAACe,OAAO,EAAG,CAAG;IAACN,GAAG,EAAGA;EAAK,GAC5BC,eAAe,CAACM,GAAG,CAAE,CAAEC,SAAS,EAAEC,KAAK,KACxCN,aAAA,CAACT,SAAS;IAACgB,GAAG,EAAGD,KAAO;IAACD,SAAS,EAAGA;EAAW,GAC7C,MAAML,aAAA,CAACR,mBAAmB,MAAE,CACpB,CACV,CACG,CACC,CAAC;AAEX"}

package/build-module/components/global-styles/variations/variations-typography.js CHANGED Viewed

@@ -11,15 +11,22 @@ import { useTypographyVariations } from '../hooks';
 import TypographyExample from '../typography-example';
 import PreviewIframe from '../preview-iframe';
 import Variation from './variation';
-export default function TypographyVariations() {
+import Subtitle from '../subtitle';
+export default function TypographyVariations({
+  title,
+  gap = 2
+}) {
   const typographyVariations = useTypographyVariations();
   if (!typographyVariations?.length) {
     return null;
   }
   return createElement(VStack, {
     spacing: 3
-  }, createElement(Grid, {
+  }, title && createElement(Subtitle, {
+    level: 3
+  }, title), createElement(Grid, {
     columns: 3,
+    gap: gap,
     className: "edit-site-global-styles-style-variations-container"
   }, typographyVariations && typographyVariations.length && typographyVariations.map((variation, index) => createElement(Variation, {
     key: index,

package/build-module/components/global-styles/variations/variations-typography.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__experimentalGrid","Grid","__experimentalVStack","HStack","VStack","useTypographyVariations","TypographyExample","PreviewIframe","Variation","TypographyVariations","typographyVariations","length","createElement","spacing","columns","className","map","variation","index","key","isFocused","label","~~title","~~ratio","justify","style","height","overflow","fontSize"],"sources":["@wordpress/edit-site/src/components/global-styles/variations/variations-typography.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport {\n\t__experimentalGrid as Grid,\n\t__experimentalVStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\n\n/\n Internal dependencies\n /\nimport { useTypographyVariations } from '../hooks';\nimport TypographyExample from '../typography-example';\nimport PreviewIframe from '../preview-iframe';\nimport Variation from './variation';\n\nexport default function TypographyVariations() {\n\tconst typographyVariations = useTypographyVariations();\n\n\tif ( ! typographyVariations?.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<Grid\n\t\t\t\tcolumns={ 3 }\n\t\t\t\tclassName=\"edit-site-global-styles-style-variations-container\"\n\t\t\t>\n\t\t\t\t{ typographyVariations &&\n\t\t\t\t\ttypographyVariations.length &&\n\t\t\t\t\ttypographyVariations.map( ( variation, index ) => (\n\t\t\t\t\t\t<Variation key={ index } variation={ variation }>\n\t\t\t\t\t\t\t{ ( isFocused ) => (\n\t\t\t\t\t\t\t\t<PreviewIframe\n\t\t\t\t\t\t\t\t\tlabel={ variation?.title }\n\t\t\t\t\t\t\t\t\tisFocused={ isFocused }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ ( { ratio, key } ) => (\n\t\t\t\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\t\t\t\tkey={ key }\n\t\t\t\t\t\t\t\t\t\t\tspacing={ 10 ratio }\n\t\t\t\t\t\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<TypographyExample\n\t\t\t\t\t\t\t\t\t\t\t\tvariation={ variation }\n\t\t\t\t\t\t\t\t\t\t\t\tfontSize={ 85 * ratio }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</PreviewIframe>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</Variation>\n\t\t\t\t\t) ) }\n\t\t\t</Grid>\n\t\t</VStack>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SACCA,kBAAkB,IAAIC,IAAI,EAC1BC,oBAAoB,IAAIC,MAAM,EAC9BD,oBAAoB,IAAIE,MAAM,QACxB,uBAAuB;;AAE9B;AACA;AACA;AACA,SAASC,uBAAuB,QAAQ,UAAU;AAClD,OAAOC,iBAAiB,MAAM,uBAAuB;AACrD,OAAOC,aAAa,MAAM,mBAAmB;AAC7C,OAAOC,SAAS,MAAM,aAAa;~~AAEnC~~,eAAe,SAASC,oBAAoBA,~~CAAA~~,EAAG;~~EAC9C~~,MAAMC,oBAAoB,~~GAAGL~~,uBAAuB,CAAC,CAAC;EAEtD,IAAK,~~CAAEK~~,oBAAoB,EAAEC,MAAM,EAAG;IACrC,OAAO,IAAI;EACZ;EAEA,OACCC,aAAA,~~CAACR~~,MAAM;~~IAACS~~,OAAO,EAAG;EAAG,~~GACpBD~~,aAAA,~~CAACX~~,IAAI;~~IACJa~~,OAAO,EAAG,CAAG;~~IACbC~~,SAAS,EAAC;EAAoD,~~GAE5DL~~,oBAAoB,IACrBA,oBAAoB,CAACC,MAAM,IAC3BD,oBAAoB,~~CAACM~~,GAAG,CAAE,CAAEC,SAAS,EAAEC,KAAK,~~KAC3CN~~,aAAA,~~CAACJ~~,SAAS;~~IAACW~~,GAAG,EAAGD,KAAO;IAACD,SAAS,EAAGA;EAAW,GAC3CG,SAAS,~~IACZR~~,aAAA,~~CAACL~~,aAAa;~~IACbc~~,KAAK,EAAGJ,SAAS,~~EAAEK~~,KAAO;~~IAC1BF~~,SAAS,EAAGA;EAAW,GAErB,CAAE;~~IAAEG~~,KAAK;~~IAAEJ~~;EAAI,CAAC,~~KACjBP~~,aAAA,~~CAACT~~,MAAM;~~IACNgB~~,GAAG,EAAGA,GAAK;~~IACXN~~,OAAO,EAAG,EAAE,GAAGU,KAAO;IACtBC,OAAO,EAAC,QAAQ;IAChBC,KAAK,EAAG;MACPC,MAAM,EAAE,MAAM;MACdC,QAAQ,EAAE;IACX;EAAG,GAEHf,aAAA,~~CAACN~~,iBAAiB;~~IACjBW~~,SAAS,EAAGA,SAAW;~~IACvBW~~,QAAQ,EAAG,EAAE,GAAGL;EAAO,CACvB,CACM,CAEK,CAEN,CACV,CACE,CACC,CAAC;AAEX"}
1	+ {"version":3,"names":["__experimentalGrid","Grid","__experimentalVStack","HStack","VStack","useTypographyVariations","TypographyExample","PreviewIframe","Variation","Subtitle","TypographyVariations","title","gap","typographyVariations","length","createElement","spacing","level","columns","className","map","variation","index","key","isFocused","label","ratio","justify","style","height","overflow","fontSize"],"sources":["@wordpress/edit-site/src/components/global-styles/variations/variations-typography.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport {\n\t__experimentalGrid as Grid,\n\t__experimentalVStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\n\n/\n Internal dependencies\n /\nimport { useTypographyVariations } from '../hooks';\nimport TypographyExample from '../typography-example';\nimport PreviewIframe from '../preview-iframe';\nimport Variation from './variation';\nimport Subtitle from '../subtitle';\n\nexport default function TypographyVariations( { title, gap = 2 } ) {\n\tconst typographyVariations = useTypographyVariations();\n\n\tif ( ! typographyVariations?.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t{ title && <Subtitle level={ 3 }>{ title }</Subtitle> }\n\t\t\t<Grid\n\t\t\t\tcolumns={ 3 }\n\t\t\t\tgap={ gap }\n\t\t\t\tclassName=\"edit-site-global-styles-style-variations-container\"\n\t\t\t>\n\t\t\t\t{ typographyVariations &&\n\t\t\t\t\ttypographyVariations.length &&\n\t\t\t\t\ttypographyVariations.map( ( variation, index ) => (\n\t\t\t\t\t\t<Variation key={ index } variation={ variation }>\n\t\t\t\t\t\t\t{ ( isFocused ) => (\n\t\t\t\t\t\t\t\t<PreviewIframe\n\t\t\t\t\t\t\t\t\tlabel={ variation?.title }\n\t\t\t\t\t\t\t\t\tisFocused={ isFocused }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ ( { ratio, key } ) => (\n\t\t\t\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\t\t\t\tkey={ key }\n\t\t\t\t\t\t\t\t\t\t\tspacing={ 10 ratio }\n\t\t\t\t\t\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<TypographyExample\n\t\t\t\t\t\t\t\t\t\t\t\tvariation={ variation }\n\t\t\t\t\t\t\t\t\t\t\t\tfontSize={ 85 * ratio }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</PreviewIframe>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</Variation>\n\t\t\t\t\t) ) }\n\t\t\t</Grid>\n\t\t</VStack>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SACCA,kBAAkB,IAAIC,IAAI,EAC1BC,oBAAoB,IAAIC,MAAM,EAC9BD,oBAAoB,IAAIE,MAAM,QACxB,uBAAuB;;AAE9B;AACA;AACA;AACA,SAASC,uBAAuB,QAAQ,UAAU;AAClD,OAAOC,iBAAiB,MAAM,uBAAuB;AACrD,OAAOC,aAAa,MAAM,mBAAmB;AAC7C,OAAOC,SAAS,MAAM,aAAa;AACnC,OAAOC,QAAQ,MAAM,aAAa;AAElC,eAAe,SAASC,oBAAoBA,CAAE;EAAEC,KAAK;EAAEC,GAAG,GAAG;AAAE,CAAC,EAAG;EAClE,MAAMC,oBAAoB,GAAGR,uBAAuB,CAAC,CAAC;EAEtD,IAAK,CAAEQ,oBAAoB,EAAEC,MAAM,EAAG;IACrC,OAAO,IAAI;EACZ;EAEA,OACCC,aAAA,CAACX,MAAM;IAACY,OAAO,EAAG;EAAG,GAClBL,KAAK,IAAII,aAAA,CAACN,QAAQ;IAACQ,KAAK,EAAG;EAAG,GAAGN,KAAiB,CAAC,EACrDI,aAAA,CAACd,IAAI;IACJiB,OAAO,EAAG,CAAG;IACbN,GAAG,EAAGA,GAAK;IACXO,SAAS,EAAC;EAAoD,GAE5DN,oBAAoB,IACrBA,oBAAoB,CAACC,MAAM,IAC3BD,oBAAoB,CAACO,GAAG,CAAE,CAAEC,SAAS,EAAEC,KAAK,KAC3CP,aAAA,CAACP,SAAS;IAACe,GAAG,EAAGD,KAAO;IAACD,SAAS,EAAGA;EAAW,GAC3CG,SAAS,IACZT,aAAA,CAACR,aAAa;IACbkB,KAAK,EAAGJ,SAAS,EAAEV,KAAO;IAC1Ba,SAAS,EAAGA;EAAW,GAErB,CAAE;IAAEE,KAAK;IAAEH;EAAI,CAAC,KACjBR,aAAA,CAACZ,MAAM;IACNoB,GAAG,EAAGA,GAAK;IACXP,OAAO,EAAG,EAAE,GAAGU,KAAO;IACtBC,OAAO,EAAC,QAAQ;IAChBC,KAAK,EAAG;MACPC,MAAM,EAAE,MAAM;MACdC,QAAQ,EAAE;IACX;EAAG,GAEHf,aAAA,CAACT,iBAAiB;IACjBe,SAAS,EAAGA,SAAW;IACvBU,QAAQ,EAAG,EAAE,GAAGL;EAAO,CACvB,CACM,CAEK,CAEN,CACV,CACE,CACC,CAAC;AAEX"}

package/build-module/components/keyboard-shortcut-help-modal/index.js CHANGED Viewed

@@ -102,6 +102,9 @@ export default function KeyboardShortcutHelpModal() {
   }), createElement(ShortcutSection, {
     title: __('Text formatting'),
     shortcuts: textFormattingShortcuts
+  }), createElement(ShortcutCategorySection, {
+    title: __('List View shortcuts'),
+    categoryName: "list-view"
   }));
 }
 //# sourceMappingURL=index.js.map