@wordpress/edit-site 5.8.0 → 5.10.0

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

@@ -13,9 +13,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import ScreenHeader from './header';
 import { NavigationButtonAsItem } from './navigation-button';
 import Subtitle from './subtitle';
-import TypographyPanel from './typography-panel';
 import BlockPreviewPanel from './block-preview-panel';
-import { getVariationClassName } from './utils';
 import { unlock } from '../../private-apis';
 const {
   useGlobalStyle
@@ -23,28 +21,21 @@ const {
 
 function Item(_ref) {
   let {
-    name,
     parentMenu,
     element,
     label
   } = _ref;
-  const hasSupport = !name;
   const prefix = element === 'text' || !element ? '' : `elements.${element}.`;
   const extraStyles = element === 'link' ? {
     textDecoration: 'underline'
   } : {};
-  const [fontFamily] = useGlobalStyle(prefix + 'typography.fontFamily', name);
-  const [fontStyle] = useGlobalStyle(prefix + 'typography.fontStyle', name);
-  const [fontWeight] = useGlobalStyle(prefix + 'typography.fontWeight', name);
-  const [letterSpacing] = useGlobalStyle(prefix + 'typography.letterSpacing', name);
-  const [backgroundColor] = useGlobalStyle(prefix + 'color.background', name);
-  const [gradientValue] = useGlobalStyle(prefix + 'color.gradient', name);
-  const [color] = useGlobalStyle(prefix + 'color.text', name);
-
-  if (!hasSupport) {
-    return null;
-  }
-
+  const [fontFamily] = useGlobalStyle(prefix + 'typography.fontFamily');
+  const [fontStyle] = useGlobalStyle(prefix + 'typography.fontStyle');
+  const [fontWeight] = useGlobalStyle(prefix + 'typography.fontWeight');
+  const [letterSpacing] = useGlobalStyle(prefix + 'typography.letterSpacing');
+  const [backgroundColor] = useGlobalStyle(prefix + 'color.background');
+  const [gradientValue] = useGlobalStyle(prefix + 'color.gradient');
+  const [color] = useGlobalStyle(prefix + 'color.text');
   const navigationButtonLabel = sprintf( // translators: %s: is a subset of Typography, e.g., 'text' or 'links'.
   __('Typography %s styles'), label);
   return createElement(NavigationButtonAsItem, {
@@ -66,20 +57,12 @@ function Item(_ref) {
   }, __('Aa')), createElement(FlexItem, null, label)));
 }
 
-function ScreenTypography(_ref2) {
-  let {
-    name,
-    variation = ''
-  } = _ref2;
-  const parentMenu = name === undefined ? '' : '/blocks/' + name;
-  const variationClassName = getVariationClassName(variation);
+function ScreenTypography() {
+  const parentMenu = '';
   return createElement(Fragment, null, createElement(ScreenHeader, {
     title: __('Typography'),
     description: __('Manage the typography settings for different elements.')
-  }), createElement(BlockPreviewPanel, {
-    name: name,
-    variation: variationClassName
-  }), !name && createElement("div", {
+  }), createElement(BlockPreviewPanel, null), createElement("div", {
     className: "edit-site-global-styles-screen-typography"
   }, createElement(VStack, {
     spacing: 3
@@ -89,35 +72,26 @@ function ScreenTypography(_ref2) {
     isBordered: true,
     isSeparated: true
   }, createElement(Item, {
-    name: name,
     parentMenu: parentMenu,
     element: "text",
     label: __('Text')
   }), createElement(Item, {
-    name: name,
     parentMenu: parentMenu,
     element: "link",
     label: __('Links')
   }), createElement(Item, {
-    name: name,
     parentMenu: parentMenu,
     element: "heading",
     label: __('Headings')
   }), createElement(Item, {
-    name: name,
     parentMenu: parentMenu,
     element: "caption",
     label: __('Captions')
   }), createElement(Item, {
-    name: name,
     parentMenu: parentMenu,
     element: "button",
     label: __('Buttons')
-  })))), !!name && createElement(TypographyPanel, {
-    name: name,
-    variation: variation,
-    element: "text"
-  }));
+  })))));
 }
 
 export default ScreenTypography;

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-typography.js"],"names":["__","sprintf","__experimentalItemGroup","ItemGroup","__experimentalVStack","VStack","__experimentalHStack","HStack","FlexItem","privateApis","blockEditorPrivateApis","ScreenHeader","NavigationButtonAsItem","Subtitle","TypographyPanel","BlockPreviewPanel","getVariationClassName","unlock","useGlobalStyle","Item","name","parentMenu","element","label","hasSupport","prefix","extraStyles","textDecoration","fontFamily","fontStyle","fontWeight","letterSpacing","backgroundColor","gradientValue","color","navigationButtonLabel","background","ScreenTypography","variation","undefined","variationClassName"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\tFlexItem,\n} from '@wordpress/components';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport Subtitle from './subtitle';\nimport TypographyPanel from './typography-panel';\nimport BlockPreviewPanel from './block-preview-panel';\nimport { getVariationClassName } from './utils';\nimport { unlock } from '../../private-apis';\n\nconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\n\nfunction Item( { name, parentMenu, element, label } ) {\n\tconst hasSupport = ! name;\n\tconst prefix =\n\t\telement === 'text' || ! element ? '' : `elements.${ element }.`;\n\tconst extraStyles =\n\t\telement === 'link'\n\t\t\t? {\n\t\t\t\t\ttextDecoration: 'underline',\n\t\t\t  }\n\t\t\t: {};\n\tconst [ fontFamily ] = useGlobalStyle(\n\t\tprefix + 'typography.fontFamily',\n\t\tname\n\t);\n\tconst [ fontStyle ] = useGlobalStyle(\n\t\tprefix + 'typography.fontStyle',\n\t\tname\n\t);\n\tconst [ fontWeight ] = useGlobalStyle(\n\t\tprefix + 'typography.fontWeight',\n\t\tname\n\t);\n\tconst [ letterSpacing ] = useGlobalStyle(\n\t\tprefix + 'typography.letterSpacing',\n\t\tname\n\t);\n\tconst [ backgroundColor ] = useGlobalStyle(\n\t\tprefix + 'color.background',\n\t\tname\n\t);\n\tconst [ gradientValue ] = useGlobalStyle( prefix + 'color.gradient', name );\n\tconst [ color ] = useGlobalStyle( prefix + 'color.text', name );\n\n\tif ( ! hasSupport ) {\n\t\treturn null;\n\t}\n\n\tconst navigationButtonLabel = sprintf(\n\t\t// translators: %s: is a subset of Typography, e.g., 'text' or 'links'.\n\t\t__( 'Typography %s styles' ),\n\t\tlabel\n\t);\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ parentMenu + '/typography/' + element }\n\t\t\taria-label={ navigationButtonLabel }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem\n\t\t\t\t\tclassName=\"edit-site-global-styles-screen-typography__indicator\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tfontFamily: fontFamily ?? 'serif',\n\t\t\t\t\t\tbackground: gradientValue ?? backgroundColor,\n\t\t\t\t\t\tcolor,\n\t\t\t\t\t\tfontStyle,\n\t\t\t\t\t\tfontWeight,\n\t\t\t\t\t\tletterSpacing,\n\t\t\t\t\t\t...extraStyles,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Aa' ) }\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>{ label }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\nfunction ScreenTypography( { name, variation = '' } ) {\n\tconst parentMenu = name === undefined ? '' : '/blocks/' + name;\n\tconst variationClassName = getVariationClassName( variation );\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Typography' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Manage the typography settings for different elements.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<BlockPreviewPanel name={ name } variation={ variationClassName } />\n\n\t\t\t{ ! name && (\n\t\t\t\t<div className=\"edit-site-global-styles-screen-typography\">\n\t\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t\t<Subtitle level={ 3 }>{ __( 'Elements' ) }</Subtitle>\n\t\t\t\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t\t\t\t<Item\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t\telement=\"text\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Text' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Item\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t\telement=\"link\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Links' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Item\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t\telement=\"heading\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Headings' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Item\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t\telement=\"caption\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Captions' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Item\n\t\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\t\telement=\"button\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Buttons' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t</VStack>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ /* No typography elements support yet for blocks. */ }\n\t\t\t{ !! name && (\n\t\t\t\t<TypographyPanel\n\t\t\t\t\tname={ name }\n\t\t\t\t\tvariation={ variation }\n\t\t\t\t\telement=\"text\"\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default ScreenTypography;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-typography.js"],"names":["__","sprintf","__experimentalItemGroup","ItemGroup","__experimentalVStack","VStack","__experimentalHStack","HStack","FlexItem","privateApis","blockEditorPrivateApis","ScreenHeader","NavigationButtonAsItem","Subtitle","BlockPreviewPanel","unlock","useGlobalStyle","Item","parentMenu","element","label","prefix","extraStyles","textDecoration","fontFamily","fontStyle","fontWeight","letterSpacing","backgroundColor","gradientValue","color","navigationButtonLabel","background","ScreenTypography"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,EAAaC,OAAb,QAA4B,iBAA5B;AACA,SACCC,uBAAuB,IAAIC,SAD5B,EAECC,oBAAoB,IAAIC,MAFzB,EAGCC,oBAAoB,IAAIC,MAHzB,EAICC,QAJD,QAKO,uBALP;AAMA,SAASC,WAAW,IAAIC,sBAAxB,QAAsD,yBAAtD;AAEA;AACA;AACA;;AACA,OAAOC,YAAP,MAAyB,UAAzB;AACA,SAASC,sBAAT,QAAuC,qBAAvC;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,iBAAP,MAA8B,uBAA9B;AACA,SAASC,MAAT,QAAuB,oBAAvB;AAEA,MAAM;AAAEC,EAAAA;AAAF,IAAqBD,MAAM,CAAEL,sBAAF,CAAjC;;AAEA,SAASO,IAAT,OAAgD;AAAA,MAAjC;AAAEC,IAAAA,UAAF;AAAcC,IAAAA,OAAd;AAAuBC,IAAAA;AAAvB,GAAiC;AAC/C,QAAMC,MAAM,GACXF,OAAO,KAAK,MAAZ,IAAsB,CAAEA,OAAxB,GAAkC,EAAlC,GAAwC,YAAYA,OAAS,GAD9D;AAEA,QAAMG,WAAW,GAChBH,OAAO,KAAK,MAAZ,GACG;AACAI,IAAAA,cAAc,EAAE;AADhB,GADH,GAIG,EALJ;AAMA,QAAM,CAAEC,UAAF,IAAiBR,cAAc,CAAEK,MAAM,GAAG,uBAAX,CAArC;AACA,QAAM,CAAEI,SAAF,IAAgBT,cAAc,CAAEK,MAAM,GAAG,sBAAX,CAApC;AACA,QAAM,CAAEK,UAAF,IAAiBV,cAAc,CAAEK,MAAM,GAAG,uBAAX,CAArC;AACA,QAAM,CAAEM,aAAF,IAAoBX,cAAc,CACvCK,MAAM,GAAG,0BAD8B,CAAxC;AAGA,QAAM,CAAEO,eAAF,IAAsBZ,cAAc,CAAEK,MAAM,GAAG,kBAAX,CAA1C;AACA,QAAM,CAAEQ,aAAF,IAAoBb,cAAc,CAAEK,MAAM,GAAG,gBAAX,CAAxC;AACA,QAAM,CAAES,KAAF,IAAYd,cAAc,CAAEK,MAAM,GAAG,YAAX,CAAhC;AAEA,QAAMU,qBAAqB,GAAG9B,OAAO,EACpC;AACAD,EAAAA,EAAE,CAAE,sBAAF,CAFkC,EAGpCoB,KAHoC,CAArC;AAMA,SACC,cAAC,sBAAD;AACC,IAAA,IAAI,EAAGF,UAAU,GAAG,cAAb,GAA8BC,OADtC;AAEC,kBAAaY;AAFd,KAIC,cAAC,MAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,cAAC,QAAD;AACC,IAAA,SAAS,EAAC,sDADX;AAEC,IAAA,KAAK,EAAG;AACPP,MAAAA,UAAU,EAAEA,UAAF,aAAEA,UAAF,cAAEA,UAAF,GAAgB,OADnB;AAEPQ,MAAAA,UAAU,EAAEH,aAAF,aAAEA,aAAF,cAAEA,aAAF,GAAmBD,eAFtB;AAGPE,MAAAA,KAHO;AAIPL,MAAAA,SAJO;AAKPC,MAAAA,UALO;AAMPC,MAAAA,aANO;AAOP,SAAGL;AAPI;AAFT,KAYGtB,EAAE,CAAE,IAAF,CAZL,CADD,EAeC,cAAC,QAAD,QAAYoB,KAAZ,CAfD,CAJD,CADD;AAwBA;;AAED,SAASa,gBAAT,GAA4B;AAC3B,QAAMf,UAAU,GAAG,EAAnB;AAEA,SACC,8BACC,cAAC,YAAD;AACC,IAAA,KAAK,EAAGlB,EAAE,CAAE,YAAF,CADX;AAEC,IAAA,WAAW,EAAGA,EAAE,CACf,wDADe;AAFjB,IADD,EAQC,cAAC,iBAAD,OARD,EAUC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,cAAC,MAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,cAAC,QAAD;AAAU,IAAA,KAAK,EAAG;AAAlB,KAAwBA,EAAE,CAAE,UAAF,CAA1B,CADD,EAEC,cAAC,SAAD;AAAW,IAAA,UAAU,MAArB;AAAsB,IAAA,WAAW;AAAjC,KACC,cAAC,IAAD;AACC,IAAA,UAAU,EAAGkB,UADd;AAEC,IAAA,OAAO,EAAC,MAFT;AAGC,IAAA,KAAK,EAAGlB,EAAE,CAAE,MAAF;AAHX,IADD,EAMC,cAAC,IAAD;AACC,IAAA,UAAU,EAAGkB,UADd;AAEC,IAAA,OAAO,EAAC,MAFT;AAGC,IAAA,KAAK,EAAGlB,EAAE,CAAE,OAAF;AAHX,IAND,EAWC,cAAC,IAAD;AACC,IAAA,UAAU,EAAGkB,UADd;AAEC,IAAA,OAAO,EAAC,SAFT;AAGC,IAAA,KAAK,EAAGlB,EAAE,CAAE,UAAF;AAHX,IAXD,EAgBC,cAAC,IAAD;AACC,IAAA,UAAU,EAAGkB,UADd;AAEC,IAAA,OAAO,EAAC,SAFT;AAGC,IAAA,KAAK,EAAGlB,EAAE,CAAE,UAAF;AAHX,IAhBD,EAqBC,cAAC,IAAD;AACC,IAAA,UAAU,EAAGkB,UADd;AAEC,IAAA,OAAO,EAAC,QAFT;AAGC,IAAA,KAAK,EAAGlB,EAAE,CAAE,SAAF;AAHX,IArBD,CAFD,CADD,CAVD,CADD;AA6CA;;AAED,eAAeiC,gBAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\tFlexItem,\n} from '@wordpress/components';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport Subtitle from './subtitle';\nimport BlockPreviewPanel from './block-preview-panel';\nimport { unlock } from '../../private-apis';\n\nconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\n\nfunction Item( { parentMenu, element, label } ) {\n\tconst prefix =\n\t\telement === 'text' || ! element ? '' : `elements.${ element }.`;\n\tconst extraStyles =\n\t\telement === 'link'\n\t\t\t? {\n\t\t\t\t\ttextDecoration: 'underline',\n\t\t\t  }\n\t\t\t: {};\n\tconst [ fontFamily ] = useGlobalStyle( prefix + 'typography.fontFamily' );\n\tconst [ fontStyle ] = useGlobalStyle( prefix + 'typography.fontStyle' );\n\tconst [ fontWeight ] = useGlobalStyle( prefix + 'typography.fontWeight' );\n\tconst [ letterSpacing ] = useGlobalStyle(\n\t\tprefix + 'typography.letterSpacing'\n\t);\n\tconst [ backgroundColor ] = useGlobalStyle( prefix + 'color.background' );\n\tconst [ gradientValue ] = useGlobalStyle( prefix + 'color.gradient' );\n\tconst [ color ] = useGlobalStyle( prefix + 'color.text' );\n\n\tconst navigationButtonLabel = sprintf(\n\t\t// translators: %s: is a subset of Typography, e.g., 'text' or 'links'.\n\t\t__( 'Typography %s styles' ),\n\t\tlabel\n\t);\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ parentMenu + '/typography/' + element }\n\t\t\taria-label={ navigationButtonLabel }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem\n\t\t\t\t\tclassName=\"edit-site-global-styles-screen-typography__indicator\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tfontFamily: fontFamily ?? 'serif',\n\t\t\t\t\t\tbackground: gradientValue ?? backgroundColor,\n\t\t\t\t\t\tcolor,\n\t\t\t\t\t\tfontStyle,\n\t\t\t\t\t\tfontWeight,\n\t\t\t\t\t\tletterSpacing,\n\t\t\t\t\t\t...extraStyles,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Aa' ) }\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>{ label }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\nfunction ScreenTypography() {\n\tconst parentMenu = '';\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Typography' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Manage the typography settings for different elements.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<BlockPreviewPanel />\n\n\t\t\t<div className=\"edit-site-global-styles-screen-typography\">\n\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t<Subtitle level={ 3 }>{ __( 'Elements' ) }</Subtitle>\n\t\t\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t\t\t<Item\n\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\telement=\"text\"\n\t\t\t\t\t\t\tlabel={ __( 'Text' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Item\n\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\telement=\"link\"\n\t\t\t\t\t\t\tlabel={ __( 'Links' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Item\n\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\telement=\"heading\"\n\t\t\t\t\t\t\tlabel={ __( 'Headings' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Item\n\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\telement=\"caption\"\n\t\t\t\t\t\t\tlabel={ __( 'Captions' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Item\n\t\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\t\telement=\"button\"\n\t\t\t\t\t\t\tlabel={ __( 'Buttons' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ItemGroup>\n\t\t\t\t</VStack>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenTypography;\n"]}

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

@@ -4,7 +4,6 @@ import { createElement, Fragment } from "@wordpress/element";
  * External dependencies
  */
 import classnames from 'classnames';
-import fastDeepEqual from 'fast-deep-equal/es6';
 /**
  * WordPress dependencies
  */
@@ -24,13 +23,10 @@ import { mergeBaseAndUserConfigs } from './global-styles-provider';
 import StylesPreview from './preview';
 import { unlock } from '../../private-apis';
 const {
-  GlobalStylesContext
+  GlobalStylesContext,
+  areGlobalStyleConfigsEqual
 } = unlock(blockEditorPrivateApis);
 
-function compareVariations(a, b) {
-  return fastDeepEqual(a.styles, b.styles) && fastDeepEqual(a.settings, b.settings);
-}
-
 function Variation(_ref) {
   let {
     variation
@@ -72,7 +68,7 @@ function Variation(_ref) {
   };
 
   const isActive = useMemo(() => {
-    return compareVariations(user, variation);
+    return areGlobalStyleConfigsEqual(user, variation);
   }, [user, variation]);
   return createElement(GlobalStylesContext.Provider, {
     value: context

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/style-variations-container.js"],"names":["classnames","fastDeepEqual","store","coreStore","useSelect","useMemo","useContext","useState","ENTER","__experimentalGrid","Grid","__","privateApis","blockEditorPrivateApis","mergeBaseAndUserConfigs","StylesPreview","unlock","GlobalStylesContext","compareVariations","a","b","styles","settings","Variation","variation","isFocused","setIsFocused","base","user","setUserConfig","context","merged","selectVariation","selectOnEnter","event","keyCode","preventDefault","isActive","title","StyleVariationsContainer","variations","select","__experimentalGetCurrentThemeGlobalStylesVariations","withEmptyVariation","map","index"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport fastDeepEqual from 'fast-deep-equal/es6';\n\n/**\n * WordPress dependencies\n */\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { useMemo, useContext, useState } from '@wordpress/element';\nimport { ENTER } from '@wordpress/keycodes';\nimport { __experimentalGrid as Grid } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { mergeBaseAndUserConfigs } from './global-styles-provider';\nimport StylesPreview from './preview';\nimport { unlock } from '../../private-apis';\n\nconst { GlobalStylesContext } = unlock( blockEditorPrivateApis );\n\nfunction compareVariations( a, b ) {\n\treturn (\n\t\tfastDeepEqual( a.styles, b.styles ) &&\n\t\tfastDeepEqual( a.settings, b.settings )\n\t);\n}\n\nfunction Variation( { variation } ) {\n\tconst [ isFocused, setIsFocused ] = useState( false );\n\tconst { base, user, setUserConfig } = useContext( GlobalStylesContext );\n\tconst context = useMemo( () => {\n\t\treturn {\n\t\t\tuser: {\n\t\t\t\tsettings: variation.settings ?? {},\n\t\t\t\tstyles: variation.styles ?? {},\n\t\t\t},\n\t\t\tbase,\n\t\t\tmerged: mergeBaseAndUserConfigs( base, variation ),\n\t\t\tsetUserConfig: () => {},\n\t\t};\n\t}, [ variation, base ] );\n\n\tconst selectVariation = () => {\n\t\tsetUserConfig( () => {\n\t\t\treturn {\n\t\t\t\tsettings: variation.settings,\n\t\t\t\tstyles: variation.styles,\n\t\t\t};\n\t\t} );\n\t};\n\n\tconst selectOnEnter = ( event ) => {\n\t\tif ( event.keyCode === ENTER ) {\n\t\t\tevent.preventDefault();\n\t\t\tselectVariation();\n\t\t}\n\t};\n\n\tconst isActive = useMemo( () => {\n\t\treturn compareVariations( user, variation );\n\t}, [ user, variation ] );\n\n\treturn (\n\t\t<GlobalStylesContext.Provider value={ context }>\n\t\t\t<div\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'edit-site-global-styles-variations_item',\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-active': isActive,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t\trole=\"button\"\n\t\t\t\tonClick={ selectVariation }\n\t\t\t\tonKeyDown={ selectOnEnter }\n\t\t\t\ttabIndex=\"0\"\n\t\t\t\taria-label={ variation?.title }\n\t\t\t\taria-current={ isActive }\n\t\t\t\tonFocus={ () => setIsFocused( true ) }\n\t\t\t\tonBlur={ () => setIsFocused( false ) }\n\t\t\t>\n\t\t\t\t<div className=\"edit-site-global-styles-variations_item-preview\">\n\t\t\t\t\t<StylesPreview\n\t\t\t\t\t\tlabel={ variation?.title }\n\t\t\t\t\t\tisFocused={ isFocused }\n\t\t\t\t\t\twithHoverView\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</GlobalStylesContext.Provider>\n\t);\n}\n\nexport default function StyleVariationsContainer() {\n\tconst { variations } = useSelect( ( select ) => {\n\t\treturn {\n\t\t\tvariations:\n\t\t\t\tselect(\n\t\t\t\t\tcoreStore\n\t\t\t\t).__experimentalGetCurrentThemeGlobalStylesVariations() || [],\n\t\t};\n\t}, [] );\n\n\tconst 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<>\n\t\t\t<Grid\n\t\t\t\tcolumns={ 2 }\n\t\t\t\tclassName=\"edit-site-global-styles-style-variations-container\"\n\t\t\t>\n\t\t\t\t{ withEmptyVariation?.map( ( variation, index ) => (\n\t\t\t\t\t<Variation key={ index } variation={ variation } />\n\t\t\t\t) ) }\n\t\t\t</Grid>\n\t\t</>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/style-variations-container.js"],"names":["classnames","store","coreStore","useSelect","useMemo","useContext","useState","ENTER","__experimentalGrid","Grid","__","privateApis","blockEditorPrivateApis","mergeBaseAndUserConfigs","StylesPreview","unlock","GlobalStylesContext","areGlobalStyleConfigsEqual","Variation","variation","isFocused","setIsFocused","base","user","setUserConfig","context","settings","styles","merged","selectVariation","selectOnEnter","event","keyCode","preventDefault","isActive","title","StyleVariationsContainer","variations","select","__experimentalGetCurrentThemeGlobalStylesVariations","withEmptyVariation","map","index"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { useMemo, useContext, useState } from '@wordpress/element';\nimport { ENTER } from '@wordpress/keycodes';\nimport { __experimentalGrid as Grid } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { mergeBaseAndUserConfigs } from './global-styles-provider';\nimport StylesPreview from './preview';\nimport { unlock } from '../../private-apis';\n\nconst { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(\n\tblockEditorPrivateApis\n);\n\nfunction Variation( { variation } ) {\n\tconst [ isFocused, setIsFocused ] = useState( false );\n\tconst { base, user, setUserConfig } = useContext( GlobalStylesContext );\n\tconst context = useMemo( () => {\n\t\treturn {\n\t\t\tuser: {\n\t\t\t\tsettings: variation.settings ?? {},\n\t\t\t\tstyles: variation.styles ?? {},\n\t\t\t},\n\t\t\tbase,\n\t\t\tmerged: mergeBaseAndUserConfigs( base, variation ),\n\t\t\tsetUserConfig: () => {},\n\t\t};\n\t}, [ variation, base ] );\n\n\tconst selectVariation = () => {\n\t\tsetUserConfig( () => {\n\t\t\treturn {\n\t\t\t\tsettings: variation.settings,\n\t\t\t\tstyles: variation.styles,\n\t\t\t};\n\t\t} );\n\t};\n\n\tconst selectOnEnter = ( event ) => {\n\t\tif ( event.keyCode === ENTER ) {\n\t\t\tevent.preventDefault();\n\t\t\tselectVariation();\n\t\t}\n\t};\n\n\tconst isActive = useMemo( () => {\n\t\treturn areGlobalStyleConfigsEqual( user, variation );\n\t}, [ user, variation ] );\n\n\treturn (\n\t\t<GlobalStylesContext.Provider value={ context }>\n\t\t\t<div\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'edit-site-global-styles-variations_item',\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-active': isActive,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t\trole=\"button\"\n\t\t\t\tonClick={ selectVariation }\n\t\t\t\tonKeyDown={ selectOnEnter }\n\t\t\t\ttabIndex=\"0\"\n\t\t\t\taria-label={ variation?.title }\n\t\t\t\taria-current={ isActive }\n\t\t\t\tonFocus={ () => setIsFocused( true ) }\n\t\t\t\tonBlur={ () => setIsFocused( false ) }\n\t\t\t>\n\t\t\t\t<div className=\"edit-site-global-styles-variations_item-preview\">\n\t\t\t\t\t<StylesPreview\n\t\t\t\t\t\tlabel={ variation?.title }\n\t\t\t\t\t\tisFocused={ isFocused }\n\t\t\t\t\t\twithHoverView\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</GlobalStylesContext.Provider>\n\t);\n}\n\nexport default function StyleVariationsContainer() {\n\tconst { variations } = useSelect( ( select ) => {\n\t\treturn {\n\t\t\tvariations:\n\t\t\t\tselect(\n\t\t\t\t\tcoreStore\n\t\t\t\t).__experimentalGetCurrentThemeGlobalStylesVariations() || [],\n\t\t};\n\t}, [] );\n\n\tconst 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<>\n\t\t\t<Grid\n\t\t\t\tcolumns={ 2 }\n\t\t\t\tclassName=\"edit-site-global-styles-style-variations-container\"\n\t\t\t>\n\t\t\t\t{ withEmptyVariation?.map( ( variation, index ) => (\n\t\t\t\t\t<Variation key={ index } variation={ variation } />\n\t\t\t\t) ) }\n\t\t\t</Grid>\n\t\t</>\n\t);\n}\n"]}

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

@@ -17,10 +17,8 @@ const {
 } = unlock(blockEditorPrivateApis);
 export default function TypographyPanel(_ref) {
   let {
-    name,
     element,
-    headingLevel,
-    variation = ''
+    headingLevel
   } = _ref;
   let prefixParts = [];
 
@@ -30,18 +28,16 @@ export default function TypographyPanel(_ref) {
     prefixParts = prefixParts.concat(['elements', element]);
   }
 
-  if (variation) {
-    prefixParts = ['variations', variation].concat(prefixParts);
-  }
-
   const prefix = prefixParts.join('.');
-  const [style] = useGlobalStyle(prefix, name, 'user', false);
-  const [inheritedStyle, setStyle] = useGlobalStyle(prefix, name, 'all', {
+  const [style] = useGlobalStyle(prefix, undefined, 'user', {
+    shouldDecodeEncode: false
+  });
+  const [inheritedStyle, setStyle] = useGlobalStyle(prefix, undefined, 'all', {
     shouldDecodeEncode: false
   });
-  const [rawSettings] = useGlobalSetting('', name);
+  const [rawSettings] = useGlobalSetting('');
   const usedElement = element === 'heading' ? headingLevel : element;
-  const settings = useSettingsForBlockElement(rawSettings, name, usedElement);
+  const settings = useSettingsForBlockElement(rawSettings, undefined, usedElement);
   return createElement(StylesTypographyPanel, {
     inheritedValue: inheritedStyle,
     value: style,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/typography-panel.js"],"names":["privateApis","blockEditorPrivateApis","unlock","useGlobalStyle","useGlobalSetting","useSettingsForBlockElement","TypographyPanel","StylesTypographyPanel","name","element","headingLevel","variation","prefixParts","concat","prefix","join","style","inheritedStyle","setStyle","shouldDecodeEncode","rawSettings","usedElement","settings"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,WAAW,IAAIC,sBAAxB,QAAsD,yBAAtD;AAEA;AACA;AACA;;AACA,SAASC,MAAT,QAAuB,oBAAvB;AAEA,MAAM;AACLC,EAAAA,cADK;AAELC,EAAAA,gBAFK;AAGLC,EAAAA,0BAHK;AAILC,EAAAA,eAAe,EAAEC;AAJZ,IAKFL,MAAM,CAAED,sBAAF,CALV;AAOA,eAAe,SAASK,eAAT,OAKX;AAAA,MALqC;AACxCE,IAAAA,IADwC;AAExCC,IAAAA,OAFwC;AAGxCC,IAAAA,YAHwC;AAIxCC,IAAAA,SAAS,GAAG;AAJ4B,GAKrC;AACH,MAAIC,WAAW,GAAG,EAAlB;;AACA,MAAKH,OAAO,KAAK,SAAjB,EAA6B;AAC5BG,IAAAA,WAAW,GAAGA,WAAW,CAACC,MAAZ,CAAoB,CAAE,UAAF,EAAcH,YAAd,CAApB,CAAd;AACA,GAFD,MAEO,IAAKD,OAAO,IAAIA,OAAO,KAAK,MAA5B,EAAqC;AAC3CG,IAAAA,WAAW,GAAGA,WAAW,CAACC,MAAZ,CAAoB,CAAE,UAAF,EAAcJ,OAAd,CAApB,CAAd;AACA;;AACD,MAAKE,SAAL,EAAiB;AAChBC,IAAAA,WAAW,GAAG,CAAE,YAAF,EAAgBD,SAAhB,EAA4BE,MAA5B,CAAoCD,WAApC,CAAd;AACA;;AACD,QAAME,MAAM,GAAGF,WAAW,CAACG,IAAZ,CAAkB,GAAlB,CAAf;AAEA,QAAM,CAAEC,KAAF,IAAYb,cAAc,CAAEW,MAAF,EAAUN,IAAV,EAAgB,MAAhB,EAAwB,KAAxB,CAAhC;AACA,QAAM,CAAES,cAAF,EAAkBC,QAAlB,IAA+Bf,cAAc,CAAEW,MAAF,EAAUN,IAAV,EAAgB,KAAhB,EAAuB;AACzEW,IAAAA,kBAAkB,EAAE;AADqD,GAAvB,CAAnD;AAGA,QAAM,CAAEC,WAAF,IAAkBhB,gBAAgB,CAAE,EAAF,EAAMI,IAAN,CAAxC;AACA,QAAMa,WAAW,GAAGZ,OAAO,KAAK,SAAZ,GAAwBC,YAAxB,GAAuCD,OAA3D;AACA,QAAMa,QAAQ,GAAGjB,0BAA0B,CAC1Ce,WAD0C,EAE1CZ,IAF0C,EAG1Ca,WAH0C,CAA3C;AAMA,SACC,cAAC,qBAAD;AACC,IAAA,cAAc,EAAGJ,cADlB;AAEC,IAAA,KAAK,EAAGD,KAFT;AAGC,IAAA,QAAQ,EAAGE,QAHZ;AAIC,IAAA,QAAQ,EAAGI;AAJZ,IADD;AAQA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../private-apis';\n\nconst {\n\tuseGlobalStyle,\n\tuseGlobalSetting,\n\tuseSettingsForBlockElement,\n\tTypographyPanel: StylesTypographyPanel,\n} = unlock( blockEditorPrivateApis );\n\nexport default function TypographyPanel( {\n\tname,\n\telement,\n\theadingLevel,\n\tvariation = '',\n} ) {\n\tlet prefixParts = [];\n\tif ( element === 'heading' ) {\n\t\tprefixParts = prefixParts.concat( [ 'elements', headingLevel ] );\n\t} else if ( element && element !== 'text' ) {\n\t\tprefixParts = prefixParts.concat( [ 'elements', element ] );\n\t}\n\tif ( variation ) {\n\t\tprefixParts = [ 'variations', variation ].concat( prefixParts );\n\t}\n\tconst prefix = prefixParts.join( '.' );\n\n\tconst [ style ] = useGlobalStyle( prefix, name, 'user', false );\n\tconst [ inheritedStyle, setStyle ] = useGlobalStyle( prefix, name, 'all', {\n\t\tshouldDecodeEncode: false,\n\t} );\n\tconst [ rawSettings ] = useGlobalSetting( '', name );\n\tconst usedElement = element === 'heading' ? headingLevel : element;\n\tconst settings = useSettingsForBlockElement(\n\t\trawSettings,\n\t\tname,\n\t\tusedElement\n\t);\n\n\treturn (\n\t\t<StylesTypographyPanel\n\t\t\tinheritedValue={ inheritedStyle }\n\t\t\tvalue={ style }\n\t\t\tonChange={ setStyle }\n\t\t\tsettings={ settings }\n\t\t/>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/typography-panel.js"],"names":["privateApis","blockEditorPrivateApis","unlock","useGlobalStyle","useGlobalSetting","useSettingsForBlockElement","TypographyPanel","StylesTypographyPanel","element","headingLevel","prefixParts","concat","prefix","join","style","undefined","shouldDecodeEncode","inheritedStyle","setStyle","rawSettings","usedElement","settings"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,WAAW,IAAIC,sBAAxB,QAAsD,yBAAtD;AAEA;AACA;AACA;;AACA,SAASC,MAAT,QAAuB,oBAAvB;AAEA,MAAM;AACLC,EAAAA,cADK;AAELC,EAAAA,gBAFK;AAGLC,EAAAA,0BAHK;AAILC,EAAAA,eAAe,EAAEC;AAJZ,IAKFL,MAAM,CAAED,sBAAF,CALV;AAOA,eAAe,SAASK,eAAT,OAAsD;AAAA,MAA5B;AAAEE,IAAAA,OAAF;AAAWC,IAAAA;AAAX,GAA4B;AACpE,MAAIC,WAAW,GAAG,EAAlB;;AACA,MAAKF,OAAO,KAAK,SAAjB,EAA6B;AAC5BE,IAAAA,WAAW,GAAGA,WAAW,CAACC,MAAZ,CAAoB,CAAE,UAAF,EAAcF,YAAd,CAApB,CAAd;AACA,GAFD,MAEO,IAAKD,OAAO,IAAIA,OAAO,KAAK,MAA5B,EAAqC;AAC3CE,IAAAA,WAAW,GAAGA,WAAW,CAACC,MAAZ,CAAoB,CAAE,UAAF,EAAcH,OAAd,CAApB,CAAd;AACA;;AACD,QAAMI,MAAM,GAAGF,WAAW,CAACG,IAAZ,CAAkB,GAAlB,CAAf;AAEA,QAAM,CAAEC,KAAF,IAAYX,cAAc,CAAES,MAAF,EAAUG,SAAV,EAAqB,MAArB,EAA6B;AAC5DC,IAAAA,kBAAkB,EAAE;AADwC,GAA7B,CAAhC;AAGA,QAAM,CAAEC,cAAF,EAAkBC,QAAlB,IAA+Bf,cAAc,CAClDS,MADkD,EAElDG,SAFkD,EAGlD,KAHkD,EAIlD;AACCC,IAAAA,kBAAkB,EAAE;AADrB,GAJkD,CAAnD;AAQA,QAAM,CAAEG,WAAF,IAAkBf,gBAAgB,CAAE,EAAF,CAAxC;AACA,QAAMgB,WAAW,GAAGZ,OAAO,KAAK,SAAZ,GAAwBC,YAAxB,GAAuCD,OAA3D;AACA,QAAMa,QAAQ,GAAGhB,0BAA0B,CAC1Cc,WAD0C,EAE1CJ,SAF0C,EAG1CK,WAH0C,CAA3C;AAMA,SACC,cAAC,qBAAD;AACC,IAAA,cAAc,EAAGH,cADlB;AAEC,IAAA,KAAK,EAAGH,KAFT;AAGC,IAAA,QAAQ,EAAGI,QAHZ;AAIC,IAAA,QAAQ,EAAGG;AAJZ,IADD;AAQA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../private-apis';\n\nconst {\n\tuseGlobalStyle,\n\tuseGlobalSetting,\n\tuseSettingsForBlockElement,\n\tTypographyPanel: StylesTypographyPanel,\n} = unlock( blockEditorPrivateApis );\n\nexport default function TypographyPanel( { element, headingLevel } ) {\n\tlet prefixParts = [];\n\tif ( element === 'heading' ) {\n\t\tprefixParts = prefixParts.concat( [ 'elements', headingLevel ] );\n\t} else if ( element && element !== 'text' ) {\n\t\tprefixParts = prefixParts.concat( [ 'elements', element ] );\n\t}\n\tconst prefix = prefixParts.join( '.' );\n\n\tconst [ style ] = useGlobalStyle( prefix, undefined, 'user', {\n\t\tshouldDecodeEncode: false,\n\t} );\n\tconst [ inheritedStyle, setStyle ] = useGlobalStyle(\n\t\tprefix,\n\t\tundefined,\n\t\t'all',\n\t\t{\n\t\t\tshouldDecodeEncode: false,\n\t\t}\n\t);\n\tconst [ rawSettings ] = useGlobalSetting( '' );\n\tconst usedElement = element === 'heading' ? headingLevel : element;\n\tconst settings = useSettingsForBlockElement(\n\t\trawSettings,\n\t\tundefined,\n\t\tusedElement\n\t);\n\n\treturn (\n\t\t<StylesTypographyPanel\n\t\t\tinheritedValue={ inheritedStyle }\n\t\t\tvalue={ style }\n\t\t\tonChange={ setStyle }\n\t\t\tsettings={ settings }\n\t\t/>\n\t);\n}\n"]}

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

@@ -8,7 +8,7 @@ import { __experimentalNavigatorProvider as NavigatorProvider, __experimentalNav
 import { getBlockTypes, store as blocksStore } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { privateApis as blockEditorPrivateApis, store as blockEditorStore } from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf, _n } from '@wordpress/i18n';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { moreVertical } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
@@ -22,17 +22,15 @@ import { useBlockHasGlobalStyles, default as ScreenBlockList } from './screen-bl
 import ScreenBlock from './screen-block';
 import ScreenTypography from './screen-typography';
 import ScreenTypographyElement from './screen-typography-element';
-import ScreenFilters from './screen-filters';
 import ScreenColors from './screen-colors';
 import ScreenColorPalette from './screen-color-palette';
 import ScreenLayout from './screen-layout';
 import ScreenStyleVariations from './screen-style-variations';
-import { ScreenVariation } from './screen-variations';
-import ScreenBorder from './screen-border';
 import StyleBook from '../style-book';
 import ScreenCSS from './screen-css';
+import ScreenRevisions from './screen-revisions';
 import { unlock } from '../../private-apis';
-import ScreenEffects from './screen-effects';
+import { store as editSiteStore } from '../../store';
 const SLOT_FILL_NAME = 'GlobalStylesMenu';
 const {
   Slot: GlobalStylesMenuSlot,
@@ -44,9 +42,10 @@ function GlobalStylesActionMenu() {
     toggle
   } = useDispatch(preferencesStore);
   const {
-    canEditCSS
+    canEditCSS,
+    revisionsCount
   } = useSelect(select => {
-    var _globalStyles$_links$, _globalStyles$_links;
+    var _globalStyles$_links$, _globalStyles$_links, _globalStyles$_links$2, _globalStyles$_links2, _globalStyles$_links3, _globalStyles$_links4;
 
     const {
       getEntityRecord,
@@ -57,7 +56,8 @@ function GlobalStylesActionMenu() {
 
     const globalStyles = globalStylesId ? getEntityRecord('root', 'globalStyles', globalStylesId) : undefined;
     return {
-      canEditCSS: (_globalStyles$_links$ = !!(globalStyles !== null && globalStyles !== void 0 && (_globalStyles$_links = globalStyles._links) !== null && _globalStyles$_links !== void 0 && _globalStyles$_links['wp:action-edit-css'])) !== null && _globalStyles$_links$ !== void 0 ? _globalStyles$_links$ : false
+      canEditCSS: (_globalStyles$_links$ = !!(globalStyles !== null && globalStyles !== void 0 && (_globalStyles$_links = globalStyles._links) !== null && _globalStyles$_links !== void 0 && _globalStyles$_links['wp:action-edit-css'])) !== null && _globalStyles$_links$ !== void 0 ? _globalStyles$_links$ : false,
+      revisionsCount: (_globalStyles$_links$2 = globalStyles === null || globalStyles === void 0 ? void 0 : (_globalStyles$_links2 = globalStyles._links) === null || _globalStyles$_links2 === void 0 ? void 0 : (_globalStyles$_links3 = _globalStyles$_links2['version-history']) === null || _globalStyles$_links3 === void 0 ? void 0 : (_globalStyles$_links4 = _globalStyles$_links3[0]) === null || _globalStyles$_links4 === void 0 ? void 0 : _globalStyles$_links4.count) !== null && _globalStyles$_links$2 !== void 0 ? _globalStyles$_links$2 : 0
     };
   }, []);
   const {
@@ -67,9 +67,18 @@ function GlobalStylesActionMenu() {
   const {
     goTo
   } = useNavigator();
+  const {
+    setEditorCanvasContainerView
+  } = unlock(useDispatch(editSiteStore));
 
   const loadCustomCSS = () => goTo('/css');
 
+  const loadRevisions = () => {
+    goTo('/revisions');
+    setEditorCanvasContainerView('global-styles-revisions');
+  };
+
+  const hasRevisions = revisionsCount >= 2;
   return createElement(GlobalStylesMenuFill, null, createElement(DropdownMenu, {
     icon: moreVertical,
     label: __('Styles actions'),
@@ -83,6 +92,11 @@ function GlobalStylesActionMenu() {
     }, ...(canEditCSS ? [{
       title: __('Additional CSS'),
       onClick: loadCustomCSS
+    }] : []), ...(hasRevisions ? [{
+      title: sprintf(
+      /* translators: %d: number of revisions */
+      _n('%d Revision', '%d Revisions', revisionsCount), revisionsCount),
+      onClick: loadRevisions
     }] : [])]
   }));
 }
@@ -97,50 +111,26 @@ function GlobalStylesNavigationScreen(_ref) {
   }, props));
 }
 
-function BlockStyleVariationsScreens(_ref2) {
-  let {
-    name
-  } = _ref2;
-  const blockStyleVariations = useSelect(select => {
-    const {
-      getBlockStyles
-    } = select(blocksStore);
-    return getBlockStyles(name);
-  }, [name]);
-
-  if (!(blockStyleVariations !== null && blockStyleVariations !== void 0 && blockStyleVariations.length)) {
-    return null;
-  }
-
-  return blockStyleVariations.map(variation => createElement(ContextScreens, {
-    key: variation.name + name,
-    name: name,
-    parentMenu: '/blocks/' + encodeURIComponent(name) + '/variations/' + encodeURIComponent(variation.name),
-    variation: variation.name
-  }));
-}
-
-function BlockStylesNavigationScreens(_ref3) {
+function BlockStylesNavigationScreens(_ref2) {
   let {
     parentMenu,
     blockStyles,
     blockName
-  } = _ref3;
+  } = _ref2;
   return blockStyles.map((style, index) => createElement(GlobalStylesNavigationScreen, {
     key: index,
     path: parentMenu + '/variations/' + style.name
-  }, createElement(ScreenVariation, {
-    blockName: blockName,
-    style: style
+  }, createElement(ScreenBlock, {
+    name: blockName,
+    variation: style.name
   })));
 }
 
-function ContextScreens(_ref4) {
+function ContextScreens(_ref3) {
   let {
     name,
-    parentMenu = '',
-    variation = ''
-  } = _ref4;
+    parentMenu = ''
+  } = _ref3;
   const blockStyleVariations = useSelect(select => {
     const {
       getBlockStyles
@@ -148,67 +138,9 @@ function ContextScreens(_ref4) {
     return getBlockStyles(name);
   }, [name]);
   return createElement(Fragment, null, createElement(GlobalStylesNavigationScreen, {
-    path: parentMenu + '/typography'
-  }, createElement(ScreenTypography, {
-    name: name,
-    variation: variation
-  })), createElement(GlobalStylesNavigationScreen, {
-    path: parentMenu + '/typography/text'
-  }, createElement(ScreenTypographyElement, {
-    name: name,
-    element: "text"
-  })), createElement(GlobalStylesNavigationScreen, {
-    path: parentMenu + '/typography/link'
-  }, createElement(ScreenTypographyElement, {
-    name: name,
-    element: "link"
-  })), createElement(GlobalStylesNavigationScreen, {
-    path: parentMenu + '/typography/heading'
-  }, createElement(ScreenTypographyElement, {
-    name: name,
-    element: "heading"
-  })), createElement(GlobalStylesNavigationScreen, {
-    path: parentMenu + '/typography/caption'
-  }, createElement(ScreenTypographyElement, {
-    name: name,
-    element: "caption"
-  })), createElement(GlobalStylesNavigationScreen, {
-    path: parentMenu + '/typography/button'
-  }, createElement(ScreenTypographyElement, {
-    name: name,
-    element: "button"
-  })), createElement(GlobalStylesNavigationScreen, {
-    path: parentMenu + '/colors'
-  }, createElement(ScreenColors, {
-    name: name,
-    variation: variation
-  })), createElement(GlobalStylesNavigationScreen, {
     path: parentMenu + '/colors/palette'
   }, createElement(ScreenColorPalette, {
     name: name
-  })), createElement(GlobalStylesNavigationScreen, {
-    path: parentMenu + '/filters'
-  }, createElement(ScreenFilters, {
-    name: name
-  })), createElement(GlobalStylesNavigationScreen, {
-    path: parentMenu + '/border'
-  }, createElement(ScreenBorder, {
-    name: name,
-    variation: variation
-  })), createElement(GlobalStylesNavigationScreen, {
-    path: parentMenu + '/effects'
-  }, createElement(ScreenEffects, {
-    name: name,
-    variation: variation
-  })), createElement(GlobalStylesNavigationScreen, {
-    path: parentMenu + '/layout'
-  }, createElement(ScreenLayout, {
-    name: name,
-    variation: variation
-  })), createElement(GlobalStylesNavigationScreen, {
-    path: parentMenu + '/css'
-  }, createElement(ScreenCSS, {
-    name: name
   })), !!(blockStyleVariations !== null && blockStyleVariations !== void 0 && blockStyleVariations.length) && createElement(BlockStylesNavigationScreens, {
     parentMenu: parentMenu,
     blockStyles: blockStyleVariations,
@@ -216,10 +148,7 @@ function ContextScreens(_ref4) {
   }));
 }
 
-function GlobalStylesStyleBook(_ref5) {
-  let {
-    onClose
-  } = _ref5;
+function GlobalStylesStyleBook() {
   const navigator = useNavigator();
   const {
     path
@@ -232,8 +161,7 @@ function GlobalStylesStyleBook(_ref5) {
     onSelect: blockName => {
       // Now go to the selected block.
       navigator.goTo('/blocks/' + encodeURIComponent(blockName));
-    },
-    onClose: onClose
+    }
   });
 }
 
@@ -277,12 +205,9 @@ function GlobalStylesBlockLink() {
   }, [selectedBlockClientId, selectedBlockName, blockHasGlobalStyles]);
 }
 
-function GlobalStylesUI(_ref6) {
-  let {
-    isStyleBookOpened,
-    onCloseStyleBook
-  } = _ref6;
+function GlobalStylesUI() {
   const blocks = getBlockTypes();
+  const editorCanvasContainerView = useSelect(select => unlock(select(editSiteStore)).getEditorCanvasContainerView(), []);
   return createElement(NavigatorProvider, {
     className: "edit-site-global-styles-sidebar__navigator-provider",
     initialPath: "/"
@@ -292,7 +217,37 @@ function GlobalStylesUI(_ref6) {
     path: "/variations"
   }, createElement(ScreenStyleVariations, null)), createElement(GlobalStylesNavigationScreen, {
     path: "/blocks"
-  }, createElement(ScreenBlockList, null)), blocks.map(block => createElement(GlobalStylesNavigationScreen, {
+  }, createElement(ScreenBlockList, null)), createElement(GlobalStylesNavigationScreen, {
+    path: "/typography"
+  }, createElement(ScreenTypography, null)), createElement(GlobalStylesNavigationScreen, {
+    path: "/typography/text"
+  }, createElement(ScreenTypographyElement, {
+    element: "text"
+  })), createElement(GlobalStylesNavigationScreen, {
+    path: "/typography/link"
+  }, createElement(ScreenTypographyElement, {
+    element: "link"
+  })), createElement(GlobalStylesNavigationScreen, {
+    path: "/typography/heading"
+  }, createElement(ScreenTypographyElement, {
+    element: "heading"
+  })), createElement(GlobalStylesNavigationScreen, {
+    path: "/typography/caption"
+  }, createElement(ScreenTypographyElement, {
+    element: "caption"
+  })), createElement(GlobalStylesNavigationScreen, {
+    path: "/typography/button"
+  }, createElement(ScreenTypographyElement, {
+    element: "button"
+  })), createElement(GlobalStylesNavigationScreen, {
+    path: "/colors"
+  }, createElement(ScreenColors, null)), createElement(GlobalStylesNavigationScreen, {
+    path: "/layout"
+  }, createElement(ScreenLayout, null)), createElement(GlobalStylesNavigationScreen, {
+    path: "/css"
+  }, createElement(ScreenCSS, null)), createElement(GlobalStylesNavigationScreen, {
+    path: '/revisions'
+  }, createElement(ScreenRevisions, null)), blocks.map(block => createElement(GlobalStylesNavigationScreen, {
     key: 'menu-block-' + block.name,
     path: '/blocks/' + encodeURIComponent(block.name)
   }, createElement(ScreenBlock, {
@@ -301,14 +256,7 @@ function GlobalStylesUI(_ref6) {
     key: 'screens-block-' + block.name,
     name: block.name,
     parentMenu: '/blocks/' + encodeURIComponent(block.name)
-  })), blocks.map((block, index) => {
-    return createElement(BlockStyleVariationsScreens, {
-      key: 'screens-block-styles-' + block.name + index,
-      name: block.name
-    });
-  }), isStyleBookOpened && createElement(GlobalStylesStyleBook, {
-    onClose: onCloseStyleBook
-  }), createElement(GlobalStylesActionMenu, null), createElement(GlobalStylesBlockLink, null));
+  })), 'style-book' === editorCanvasContainerView && createElement(GlobalStylesStyleBook, null), createElement(GlobalStylesActionMenu, null), createElement(GlobalStylesBlockLink, null));
 }
 
 export { GlobalStylesMenuSlot };