@wordpress/edit-site 6.31.1-next.f56bd8138.0 → 6.32.1-next.47f435fc9.0

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

@@ -1 +1,7 @@
-{"version":3,"names":["store","blocksStore","privateApis","blockEditorPrivateApis","useSelect","__experimentalItemGroup","ItemGroup","NavigationButtonAsItem","unlock","jsx","_jsx","useGlobalStyle","getFilteredBlockStyles","blockStyles","variations","filter","style","source","includes","name","useBlockVariations","select","getBlockStyles","variationNames","Object","keys","VariationsPanel","coreBlockStyles","isBordered","isSeparated","children","map","index","isDefault","path","encodeURIComponent","label"],"sources":["@wordpress/edit-site/src/components/global-styles/variations/variations-panel.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { useSelect } from '@wordpress/data';\nimport { __experimentalItemGroup as ItemGroup } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { NavigationButtonAsItem } from '../navigation-button';\nimport { unlock } from '../../../lock-unlock';\n\nconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\n\n// Only core block styles (source === block) or block styles with a matching\n// theme.json style variation will be configurable via Global Styles.\nfunction getFilteredBlockStyles( blockStyles, variations ) {\n\treturn blockStyles?.filter(\n\t\t( style ) =>\n\t\t\tstyle.source === 'block' || variations.includes( style.name )\n\t);\n}\n\nexport function useBlockVariations( name ) {\n\tconst blockStyles = 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\tconst [ variations ] = useGlobalStyle( 'variations', name );\n\tconst variationNames = Object.keys( variations ?? {} );\n\n\treturn getFilteredBlockStyles( blockStyles, variationNames );\n}\n\nexport function VariationsPanel( { name } ) {\n\tconst coreBlockStyles = useBlockVariations( name );\n\n\treturn (\n\t\t<ItemGroup isBordered isSeparated>\n\t\t\t{ coreBlockStyles.map( ( style, index ) => {\n\t\t\t\tif ( style?.isDefault ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\t\t\t\treturn (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\tpath={\n\t\t\t\t\t\t\t'/blocks/' +\n\t\t\t\t\t\t\tencodeURIComponent( name ) +\n\t\t\t\t\t\t\t'/variations/' +\n\t\t\t\t\t\t\tencodeURIComponent( style.name )\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{ style.label }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</ItemGroup>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,KAAK,IAAIC,WAAW,QAAQ,mBAAmB;AACxD,SAASC,WAAW,IAAIC,sBAAsB,QAAQ,yBAAyB;AAC/E,SAASC,SAAS,QAAQ,iBAAiB;AAC3C,SAASC,uBAAuB,IAAIC,SAAS,QAAQ,uBAAuB;;AAE5E;AACA;AACA;AACA,SAASC,sBAAsB,QAAQ,sBAAsB;AAC7D,SAASC,MAAM,QAAQ,sBAAsB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE9C,MAAM;EAAEC;AAAe,CAAC,GAAGH,MAAM,CAAEL,sBAAuB,CAAC;;AAE3D;AACA;AACA,SAASS,sBAAsBA,CAAEC,WAAW,EAAEC,UAAU,EAAG;EAC1D,OAAOD,WAAW,EAAEE,MAAM,CACvBC,KAAK,IACNA,KAAK,CAACC,MAAM,KAAK,OAAO,IAAIH,UAAU,CAACI,QAAQ,CAAEF,KAAK,CAACG,IAAK,CAC9D,CAAC;AACF;AAEA,OAAO,SAASC,kBAAkBA,CAAED,IAAI,EAAG;EAC1C,MAAMN,WAAW,GAAGT,SAAS,CAC1BiB,MAAM,IAAM;IACb,MAAM;MAAEC;IAAe,CAAC,GAAGD,MAAM,CAAEpB,WAAY,CAAC;IAChD,OAAOqB,cAAc,CAAEH,IAAK,CAAC;EAC9B,CAAC,EACD,CAAEA,IAAI,CACP,CAAC;EACD,MAAM,CAAEL,UAAU,CAAE,GAAGH,cAAc,CAAE,YAAY,EAAEQ,IAAK,CAAC;EAC3D,MAAMI,cAAc,GAAGC,MAAM,CAACC,IAAI,CAAEX,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAI,CAAC,CAAE,CAAC;EAEtD,OAAOF,sBAAsB,CAAEC,WAAW,EAAEU,cAAe,CAAC;AAC7D;AAEA,OAAO,SAASG,eAAeA,CAAE;EAAEP;AAAK,CAAC,EAAG;EAC3C,MAAMQ,eAAe,GAAGP,kBAAkB,CAAED,IAAK,CAAC;EAElD,oBACCT,IAAA,CAACJ,SAAS;IAACsB,UAAU;IAACC,WAAW;IAAAC,QAAA,EAC9BH,eAAe,CAACI,GAAG,CAAE,CAAEf,KAAK,EAAEgB,KAAK,KAAM;MAC1C,IAAKhB,KAAK,EAAEiB,SAAS,EAAG;QACvB,OAAO,IAAI;MACZ;MACA,oBACCvB,IAAA,CAACH,sBAAsB;QAEtB2B,IAAI,EACH,UAAU,GACVC,kBAAkB,CAAEhB,IAAK,CAAC,GAC1B,cAAc,GACdgB,kBAAkB,CAAEnB,KAAK,CAACG,IAAK,CAC/B;QAAAW,QAAA,EAECd,KAAK,CAACoB;MAAK,GARPJ,KASiB,CAAC;IAE3B,CAAE;EAAC,CACO,CAAC;AAEd","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../../../src/components/global-styles/variations/variations-panel.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { useSelect } from '@wordpress/data';\nimport { __experimentalItemGroup as ItemGroup } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { NavigationButtonAsItem } from '../navigation-button';\nimport { unlock } from '../../../lock-unlock';\n\nconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\n\n// Only core block styles (source === block) or block styles with a matching\n// theme.json style variation will be configurable via Global Styles.\nfunction getFilteredBlockStyles( blockStyles, variations ) {\n\treturn blockStyles?.filter(\n\t\t( style ) =>\n\t\t\tstyle.source === 'block' || variations.includes( style.name )\n\t);\n}\n\nexport function useBlockVariations( name ) {\n\tconst blockStyles = 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\tconst [ variations ] = useGlobalStyle( 'variations', name );\n\tconst variationNames = Object.keys( variations ?? {} );\n\n\treturn getFilteredBlockStyles( blockStyles, variationNames );\n}\n\nexport function VariationsPanel( { name } ) {\n\tconst coreBlockStyles = useBlockVariations( name );\n\n\treturn (\n\t\t<ItemGroup isBordered isSeparated>\n\t\t\t{ coreBlockStyles.map( ( style, index ) => {\n\t\t\t\tif ( style?.isDefault ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\t\t\t\treturn (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\tpath={\n\t\t\t\t\t\t\t'/blocks/' +\n\t\t\t\t\t\t\tencodeURIComponent( name ) +\n\t\t\t\t\t\t\t'/variations/' +\n\t\t\t\t\t\t\tencodeURIComponent( style.name )\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{ style.label }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</ItemGroup>\n\t);\n}\n"],
+  "mappings": "AAiDK;AA9CL,SAAS,SAAS,mBAAmB;AACrC,SAAS,eAAe,8BAA8B;AACtD,SAAS,iBAAiB;AAC1B,SAAS,2BAA2B,iBAAiB;AAKrD,SAAS,8BAA8B;AACvC,SAAS,cAAc;AAEvB,MAAM,EAAE,eAAe,IAAI,OAAQ,sBAAuB;AAI1D,SAAS,uBAAwB,aAAa,YAAa;AAC1D,SAAO,aAAa;AAAA,IACnB,CAAE,UACD,MAAM,WAAW,WAAW,WAAW,SAAU,MAAM,IAAK;AAAA,EAC9D;AACD;AAEO,SAAS,mBAAoB,MAAO;AAC1C,QAAM,cAAc;AAAA,IACnB,CAAE,WAAY;AACb,YAAM,EAAE,eAAe,IAAI,OAAQ,WAAY;AAC/C,aAAO,eAAgB,IAAK;AAAA,IAC7B;AAAA,IACA,CAAE,IAAK;AAAA,EACR;AACA,QAAM,CAAE,UAAW,IAAI,eAAgB,cAAc,IAAK;AAC1D,QAAM,iBAAiB,OAAO,KAAM,cAAc,CAAC,CAAE;AAErD,SAAO,uBAAwB,aAAa,cAAe;AAC5D;AAEO,SAAS,gBAAiB,EAAE,KAAK,GAAI;AAC3C,QAAM,kBAAkB,mBAAoB,IAAK;AAEjD,SACC,oBAAC,aAAU,YAAU,MAAC,aAAW,MAC9B,0BAAgB,IAAK,CAAE,OAAO,UAAW;AAC1C,QAAK,OAAO,WAAY;AACvB,aAAO;AAAA,IACR;AACA,WACC;AAAA,MAAC;AAAA;AAAA,QAEA,MACC,aACA,mBAAoB,IAAK,IACzB,iBACA,mBAAoB,MAAM,IAAK;AAAA,QAG9B,gBAAM;AAAA;AAAA,MARF;AAAA,IASP;AAAA,EAEF,CAAE,GACH;AAEF;",
+  "names": []
+}

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

@@ -1,47 +1,48 @@
-/**
- * WordPress dependencies
- */
-import { __experimentalGrid as Grid, __experimentalVStack as VStack } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import StylesPreviewTypography from '../preview-typography';
-import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
-import Subtitle from '../subtitle';
-import Variation from './variation';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function TypographyVariations({
-  title,
-  gap = 2
-}) {
-  const propertiesToFilter = ['typography'];
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  __experimentalGrid as Grid,
+  __experimentalVStack as VStack
+} from "@wordpress/components";
+import StylesPreviewTypography from "../preview-typography";
+import { useCurrentMergeThemeStyleVariationsWithUserConfig } from "../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property";
+import Subtitle from "../subtitle";
+import Variation from "./variation";
+function TypographyVariations({ title, gap = 2 }) {
+  const propertiesToFilter = ["typography"];
   const typographyVariations = useCurrentMergeThemeStyleVariationsWithUserConfig(propertiesToFilter);
-
-  // Return null if there is only one variation (the default).
   if (typographyVariations?.length <= 1) {
     return null;
   }
-  return /*#__PURE__*/_jsxs(VStack, {
-    spacing: 3,
-    children: [title && /*#__PURE__*/_jsx(Subtitle, {
-      level: 3,
-      children: title
-    }), /*#__PURE__*/_jsx(Grid, {
-      columns: 3,
-      gap: gap,
-      className: "edit-site-global-styles-style-variations-container",
-      children: typographyVariations.map((variation, index) => {
-        return /*#__PURE__*/_jsx(Variation, {
-          variation: variation,
-          properties: propertiesToFilter,
-          showTooltip: true,
-          children: () => /*#__PURE__*/_jsx(StylesPreviewTypography, {
-            variation: variation
-          })
-        }, index);
-      })
-    })]
-  });
+  return /* @__PURE__ */ jsxs(VStack, { spacing: 3, children: [
+    title && /* @__PURE__ */ jsx(Subtitle, { level: 3, children: title }),
+    /* @__PURE__ */ jsx(
+      Grid,
+      {
+        columns: 3,
+        gap,
+        className: "edit-site-global-styles-style-variations-container",
+        children: typographyVariations.map((variation, index) => {
+          return /* @__PURE__ */ jsx(
+            Variation,
+            {
+              variation,
+              properties: propertiesToFilter,
+              showTooltip: true,
+              children: () => /* @__PURE__ */ jsx(
+                StylesPreviewTypography,
+                {
+                  variation
+                }
+              )
+            },
+            index
+          );
+        })
+      }
+    )
+  ] });
 }
-//# sourceMappingURL=variations-typography.js.map
+export {
+  TypographyVariations as default
+};
+//# sourceMappingURL=variations-typography.js.map

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

@@ -1 +1,7 @@
-{"version":3,"names":["__experimentalGrid","Grid","__experimentalVStack","VStack","StylesPreviewTypography","useCurrentMergeThemeStyleVariationsWithUserConfig","Subtitle","Variation","jsx","_jsx","jsxs","_jsxs","TypographyVariations","title","gap","propertiesToFilter","typographyVariations","length","spacing","children","level","columns","className","map","variation","index","properties","showTooltip"],"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 VStack,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport StylesPreviewTypography from '../preview-typography';\nimport { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';\nimport Subtitle from '../subtitle';\nimport Variation from './variation';\n\nexport default function TypographyVariations( { title, gap = 2 } ) {\n\tconst propertiesToFilter = [ 'typography' ];\n\tconst typographyVariations =\n\t\tuseCurrentMergeThemeStyleVariationsWithUserConfig( propertiesToFilter );\n\n\t// Return null if there is only one variation (the default).\n\tif ( typographyVariations?.length <= 1 ) {\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.map( ( variation, index ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Variation\n\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\tvariation={ variation }\n\t\t\t\t\t\t\tproperties={ propertiesToFilter }\n\t\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ () => (\n\t\t\t\t\t\t\t\t<StylesPreviewTypography\n\t\t\t\t\t\t\t\t\tvariation={ variation }\n\t\t\t\t\t\t\t\t/>\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\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,uBAAuB,MAAM,uBAAuB;AAC3D,SAASC,iDAAiD,QAAQ,kFAAkF;AACpJ,OAAOC,QAAQ,MAAM,aAAa;AAClC,OAAOC,SAAS,MAAM,aAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEpC,eAAe,SAASC,oBAAoBA,CAAE;EAAEC,KAAK;EAAEC,GAAG,GAAG;AAAE,CAAC,EAAG;EAClE,MAAMC,kBAAkB,GAAG,CAAE,YAAY,CAAE;EAC3C,MAAMC,oBAAoB,GACzBX,iDAAiD,CAAEU,kBAAmB,CAAC;;EAExE;EACA,IAAKC,oBAAoB,EAAEC,MAAM,IAAI,CAAC,EAAG;IACxC,OAAO,IAAI;EACZ;EAEA,oBACCN,KAAA,CAACR,MAAM;IAACe,OAAO,EAAG,CAAG;IAAAC,QAAA,GAClBN,KAAK,iBAAIJ,IAAA,CAACH,QAAQ;MAACc,KAAK,EAAG,CAAG;MAAAD,QAAA,EAAGN;IAAK,CAAY,CAAC,eACrDJ,IAAA,CAACR,IAAI;MACJoB,OAAO,EAAG,CAAG;MACbP,GAAG,EAAGA,GAAK;MACXQ,SAAS,EAAC,oDAAoD;MAAAH,QAAA,EAE5DH,oBAAoB,CAACO,GAAG,CAAE,CAAEC,SAAS,EAAEC,KAAK,KAAM;QACnD,oBACChB,IAAA,CAACF,SAAS;UAETiB,SAAS,EAAGA,SAAW;UACvBE,UAAU,EAAGX,kBAAoB;UACjCY,WAAW;UAAAR,QAAA,EAETA,CAAA,kBACDV,IAAA,CAACL,uBAAuB;YACvBoB,SAAS,EAAGA;UAAW,CACvB;QACD,GATKC,KAUI,CAAC;MAEd,CAAE;IAAC,CACE,CAAC;EAAA,CACA,CAAC;AAEX","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../../../src/components/global-styles/variations/variations-typography.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 StylesPreviewTypography from '../preview-typography';\nimport { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';\nimport Subtitle from '../subtitle';\nimport Variation from './variation';\n\nexport default function TypographyVariations( { title, gap = 2 } ) {\n\tconst propertiesToFilter = [ 'typography' ];\n\tconst typographyVariations =\n\t\tuseCurrentMergeThemeStyleVariationsWithUserConfig( propertiesToFilter );\n\n\t// Return null if there is only one variation (the default).\n\tif ( typographyVariations?.length <= 1 ) {\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.map( ( variation, index ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Variation\n\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\tvariation={ variation }\n\t\t\t\t\t\t\tproperties={ propertiesToFilter }\n\t\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ () => (\n\t\t\t\t\t\t\t\t<StylesPreviewTypography\n\t\t\t\t\t\t\t\t\tvariation={ variation }\n\t\t\t\t\t\t\t\t/>\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\t} ) }\n\t\t\t</Grid>\n\t\t</VStack>\n\t);\n}\n"],
+  "mappings": "AA2BE,SACY,KADZ;AAxBF;AAAA,EACC,sBAAsB;AAAA,EACtB,wBAAwB;AAAA,OAClB;AAKP,OAAO,6BAA6B;AACpC,SAAS,yDAAyD;AAClE,OAAO,cAAc;AACrB,OAAO,eAAe;AAEP,SAAR,qBAAuC,EAAE,OAAO,MAAM,EAAE,GAAI;AAClE,QAAM,qBAAqB,CAAE,YAAa;AAC1C,QAAM,uBACL,kDAAmD,kBAAmB;AAGvE,MAAK,sBAAsB,UAAU,GAAI;AACxC,WAAO;AAAA,EACR;AAEA,SACC,qBAAC,UAAO,SAAU,GACf;AAAA,aAAS,oBAAC,YAAS,OAAQ,GAAM,iBAAO;AAAA,IAC1C;AAAA,MAAC;AAAA;AAAA,QACA,SAAU;AAAA,QACV;AAAA,QACA,WAAU;AAAA,QAER,+BAAqB,IAAK,CAAE,WAAW,UAAW;AACnD,iBACC;AAAA,YAAC;AAAA;AAAA,cAEA;AAAA,cACA,YAAa;AAAA,cACb,aAAW;AAAA,cAET,gBACD;AAAA,gBAAC;AAAA;AAAA,kBACA;AAAA;AAAA,cACD;AAAA;AAAA,YARK;AAAA,UAUP;AAAA,QAEF,CAAE;AAAA;AAAA,IACH;AAAA,KACD;AAEF;",
+  "names": []
+}

package/build-module/components/global-styles-renderer/index.js

@@ -1,33 +1,21 @@
-/**
- * WordPress dependencies
- */
-import { useEffect } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../store';
-import { unlock } from '../../lock-unlock';
-const {
-  useGlobalStylesOutput
-} = unlock(blockEditorPrivateApis);
+import { useEffect } from "@wordpress/element";
+import { useSelect, useDispatch } from "@wordpress/data";
+import { privateApis as blockEditorPrivateApis } from "@wordpress/block-editor";
+import { store as editSiteStore } from "../../store";
+import { unlock } from "../../lock-unlock";
+const { useGlobalStylesOutput } = unlock(blockEditorPrivateApis);
 function useGlobalStylesRenderer(disableRootPadding) {
   const [styles, settings] = useGlobalStylesOutput(disableRootPadding);
-  const {
-    getSettings
-  } = useSelect(editSiteStore);
-  const {
-    updateSettings
-  } = useDispatch(editSiteStore);
+  const { getSettings } = useSelect(editSiteStore);
+  const { updateSettings } = useDispatch(editSiteStore);
   useEffect(() => {
-    var _currentStoreSettings;
     if (!styles || !settings) {
       return;
     }
     const currentStoreSettings = getSettings();
-    const nonGlobalStyles = Object.values((_currentStoreSettings = currentStoreSettings.styles) !== null && _currentStoreSettings !== void 0 ? _currentStoreSettings : []).filter(style => !style.isGlobalStyles);
+    const nonGlobalStyles = Object.values(
+      currentStoreSettings.styles ?? []
+    ).filter((style) => !style.isGlobalStyles);
     updateSettings({
       ...currentStoreSettings,
       styles: [...nonGlobalStyles, ...styles],
@@ -35,10 +23,11 @@ function useGlobalStylesRenderer(disableRootPadding) {
     });
   }, [styles, settings, updateSettings, getSettings]);
 }
-export function GlobalStylesRenderer({
-  disableRootPadding
-}) {
+function GlobalStylesRenderer({ disableRootPadding }) {
   useGlobalStylesRenderer(disableRootPadding);
   return null;
 }
-//# sourceMappingURL=index.js.map
+export {
+  GlobalStylesRenderer
+};
+//# sourceMappingURL=index.js.map

package/build-module/components/global-styles-renderer/index.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["useEffect","useSelect","useDispatch","privateApis","blockEditorPrivateApis","store","editSiteStore","unlock","useGlobalStylesOutput","useGlobalStylesRenderer","disableRootPadding","styles","settings","getSettings","updateSettings","_currentStoreSettings","currentStoreSettings","nonGlobalStyles","Object","values","filter","style","isGlobalStyles","__experimentalFeatures","GlobalStylesRenderer"],"sources":["@wordpress/edit-site/src/components/global-styles-renderer/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { store as editSiteStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\n\nconst { useGlobalStylesOutput } = unlock( blockEditorPrivateApis );\n\nfunction useGlobalStylesRenderer( disableRootPadding ) {\n\tconst [ styles, settings ] = useGlobalStylesOutput( disableRootPadding );\n\tconst { getSettings } = useSelect( editSiteStore );\n\tconst { updateSettings } = useDispatch( editSiteStore );\n\n\tuseEffect( () => {\n\t\tif ( ! styles || ! settings ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst currentStoreSettings = getSettings();\n\t\tconst nonGlobalStyles = Object.values(\n\t\t\tcurrentStoreSettings.styles ?? []\n\t\t).filter( ( style ) => ! style.isGlobalStyles );\n\t\tupdateSettings( {\n\t\t\t...currentStoreSettings,\n\t\t\tstyles: [ ...nonGlobalStyles, ...styles ],\n\t\t\t__experimentalFeatures: settings,\n\t\t} );\n\t}, [ styles, settings, updateSettings, getSettings ] );\n}\n\nexport function GlobalStylesRenderer( { disableRootPadding } ) {\n\tuseGlobalStylesRenderer( disableRootPadding );\n\n\treturn null;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,QAAQ,oBAAoB;AAC9C,SAASC,SAAS,EAAEC,WAAW,QAAQ,iBAAiB;AACxD,SAASC,WAAW,IAAIC,sBAAsB,QAAQ,yBAAyB;;AAE/E;AACA;AACA;AACA,SAASC,KAAK,IAAIC,aAAa,QAAQ,aAAa;AACpD,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,MAAM;EAAEC;AAAsB,CAAC,GAAGD,MAAM,CAAEH,sBAAuB,CAAC;AAElE,SAASK,uBAAuBA,CAAEC,kBAAkB,EAAG;EACtD,MAAM,CAAEC,MAAM,EAAEC,QAAQ,CAAE,GAAGJ,qBAAqB,CAAEE,kBAAmB,CAAC;EACxE,MAAM;IAAEG;EAAY,CAAC,GAAGZ,SAAS,CAAEK,aAAc,CAAC;EAClD,MAAM;IAAEQ;EAAe,CAAC,GAAGZ,WAAW,CAAEI,aAAc,CAAC;EAEvDN,SAAS,CAAE,MAAM;IAAA,IAAAe,qBAAA;IAChB,IAAK,CAAEJ,MAAM,IAAI,CAAEC,QAAQ,EAAG;MAC7B;IACD;IAEA,MAAMI,oBAAoB,GAAGH,WAAW,CAAC,CAAC;IAC1C,MAAMI,eAAe,GAAGC,MAAM,CAACC,MAAM,EAAAJ,qBAAA,GACpCC,oBAAoB,CAACL,MAAM,cAAAI,qBAAA,cAAAA,qBAAA,GAAI,EAChC,CAAC,CAACK,MAAM,CAAIC,KAAK,IAAM,CAAEA,KAAK,CAACC,cAAe,CAAC;IAC/CR,cAAc,CAAE;MACf,GAAGE,oBAAoB;MACvBL,MAAM,EAAE,CAAE,GAAGM,eAAe,EAAE,GAAGN,MAAM,CAAE;MACzCY,sBAAsB,EAAEX;IACzB,CAAE,CAAC;EACJ,CAAC,EAAE,CAAED,MAAM,EAAEC,QAAQ,EAAEE,cAAc,EAAED,WAAW,CAAG,CAAC;AACvD;AAEA,OAAO,SAASW,oBAAoBA,CAAE;EAAEd;AAAmB,CAAC,EAAG;EAC9DD,uBAAuB,CAAEC,kBAAmB,CAAC;EAE7C,OAAO,IAAI;AACZ","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../../src/components/global-styles-renderer/index.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { store as editSiteStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\n\nconst { useGlobalStylesOutput } = unlock( blockEditorPrivateApis );\n\nfunction useGlobalStylesRenderer( disableRootPadding ) {\n\tconst [ styles, settings ] = useGlobalStylesOutput( disableRootPadding );\n\tconst { getSettings } = useSelect( editSiteStore );\n\tconst { updateSettings } = useDispatch( editSiteStore );\n\n\tuseEffect( () => {\n\t\tif ( ! styles || ! settings ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst currentStoreSettings = getSettings();\n\t\tconst nonGlobalStyles = Object.values(\n\t\t\tcurrentStoreSettings.styles ?? []\n\t\t).filter( ( style ) => ! style.isGlobalStyles );\n\t\tupdateSettings( {\n\t\t\t...currentStoreSettings,\n\t\t\tstyles: [ ...nonGlobalStyles, ...styles ],\n\t\t\t__experimentalFeatures: settings,\n\t\t} );\n\t}, [ styles, settings, updateSettings, getSettings ] );\n}\n\nexport function GlobalStylesRenderer( { disableRootPadding } ) {\n\tuseGlobalStylesRenderer( disableRootPadding );\n\n\treturn null;\n}\n"],
+  "mappings": "AAGA,SAAS,iBAAiB;AAC1B,SAAS,WAAW,mBAAmB;AACvC,SAAS,eAAe,8BAA8B;AAKtD,SAAS,SAAS,qBAAqB;AACvC,SAAS,cAAc;AAEvB,MAAM,EAAE,sBAAsB,IAAI,OAAQ,sBAAuB;AAEjE,SAAS,wBAAyB,oBAAqB;AACtD,QAAM,CAAE,QAAQ,QAAS,IAAI,sBAAuB,kBAAmB;AACvE,QAAM,EAAE,YAAY,IAAI,UAAW,aAAc;AACjD,QAAM,EAAE,eAAe,IAAI,YAAa,aAAc;AAEtD,YAAW,MAAM;AAChB,QAAK,CAAE,UAAU,CAAE,UAAW;AAC7B;AAAA,IACD;AAEA,UAAM,uBAAuB,YAAY;AACzC,UAAM,kBAAkB,OAAO;AAAA,MAC9B,qBAAqB,UAAU,CAAC;AAAA,IACjC,EAAE,OAAQ,CAAE,UAAW,CAAE,MAAM,cAAe;AAC9C,mBAAgB;AAAA,MACf,GAAG;AAAA,MACH,QAAQ,CAAE,GAAG,iBAAiB,GAAG,MAAO;AAAA,MACxC,wBAAwB;AAAA,IACzB,CAAE;AAAA,EACH,GAAG,CAAE,QAAQ,UAAU,gBAAgB,WAAY,CAAE;AACtD;AAEO,SAAS,qBAAsB,EAAE,mBAAmB,GAAI;AAC9D,0BAAyB,kBAAmB;AAE5C,SAAO;AACR;",
+  "names": []
+}

package/build-module/components/global-styles-sidebar/default-sidebar.js

@@ -1,18 +1,8 @@
-/**
- * WordPress dependencies
- */
-import { privateApis as editorPrivateApis } from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  ComplementaryArea,
-  ComplementaryAreaMoreMenuItem
-} = unlock(editorPrivateApis);
-export default function DefaultSidebar({
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { privateApis as editorPrivateApis } from "@wordpress/editor";
+import { unlock } from "../../lock-unlock";
+const { ComplementaryArea, ComplementaryAreaMoreMenuItem } = unlock(editorPrivateApis);
+function DefaultSidebar({
   className,
   identifier,
   title,
@@ -24,25 +14,35 @@ export default function DefaultSidebar({
   panelClassName,
   isActiveByDefault
 }) {
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(ComplementaryArea, {
-      className: className,
-      scope: "core",
-      identifier: identifier,
-      title: title,
-      icon: icon,
-      closeLabel: closeLabel,
-      header: header,
-      headerClassName: headerClassName,
-      panelClassName: panelClassName,
-      isActiveByDefault: isActiveByDefault,
-      children: children
-    }), /*#__PURE__*/_jsx(ComplementaryAreaMoreMenuItem, {
-      scope: "core",
-      identifier: identifier,
-      icon: icon,
-      children: title
-    })]
-  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ComplementaryArea,
+      {
+        className,
+        scope: "core",
+        identifier,
+        title,
+        icon,
+        closeLabel,
+        header,
+        headerClassName,
+        panelClassName,
+        isActiveByDefault,
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ComplementaryAreaMoreMenuItem,
+      {
+        scope: "core",
+        identifier,
+        icon,
+        children: title
+      }
+    )
+  ] });
 }
-//# sourceMappingURL=default-sidebar.js.map
+export {
+  DefaultSidebar as default
+};
+//# sourceMappingURL=default-sidebar.js.map

package/build-module/components/global-styles-sidebar/default-sidebar.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["privateApis","editorPrivateApis","unlock","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","ComplementaryArea","ComplementaryAreaMoreMenuItem","DefaultSidebar","className","identifier","title","icon","children","closeLabel","header","headerClassName","panelClassName","isActiveByDefault","scope"],"sources":["@wordpress/edit-site/src/components/global-styles-sidebar/default-sidebar.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { privateApis as editorPrivateApis } from '@wordpress/editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { ComplementaryArea, ComplementaryAreaMoreMenuItem } =\n\tunlock( editorPrivateApis );\n\nexport default function DefaultSidebar( {\n\tclassName,\n\tidentifier,\n\ttitle,\n\ticon,\n\tchildren,\n\tcloseLabel,\n\theader,\n\theaderClassName,\n\tpanelClassName,\n\tisActiveByDefault,\n} ) {\n\treturn (\n\t\t<>\n\t\t\t<ComplementaryArea\n\t\t\t\tclassName={ className }\n\t\t\t\tscope=\"core\"\n\t\t\t\tidentifier={ identifier }\n\t\t\t\ttitle={ title }\n\t\t\t\ticon={ icon }\n\t\t\t\tcloseLabel={ closeLabel }\n\t\t\t\theader={ header }\n\t\t\t\theaderClassName={ headerClassName }\n\t\t\t\tpanelClassName={ panelClassName }\n\t\t\t\tisActiveByDefault={ isActiveByDefault }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</ComplementaryArea>\n\t\t\t<ComplementaryAreaMoreMenuItem\n\t\t\t\tscope=\"core\"\n\t\t\t\tidentifier={ identifier }\n\t\t\t\ticon={ icon }\n\t\t\t>\n\t\t\t\t{ title }\n\t\t\t</ComplementaryAreaMoreMenuItem>\n\t\t</>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,WAAW,IAAIC,iBAAiB,QAAQ,mBAAmB;;AAEpE;AACA;AACA;AACA,SAASC,MAAM,QAAQ,mBAAmB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA,EAAAC,IAAA,IAAAC,KAAA;AAE3C,MAAM;EAAEC,iBAAiB;EAAEC;AAA8B,CAAC,GACzDR,MAAM,CAAED,iBAAkB,CAAC;AAE5B,eAAe,SAASU,cAAcA,CAAE;EACvCC,SAAS;EACTC,UAAU;EACVC,KAAK;EACLC,IAAI;EACJC,QAAQ;EACRC,UAAU;EACVC,MAAM;EACNC,eAAe;EACfC,cAAc;EACdC;AACD,CAAC,EAAG;EACH,oBACCb,KAAA,CAAAF,SAAA;IAAAU,QAAA,gBACCZ,IAAA,CAACK,iBAAiB;MACjBG,SAAS,EAAGA,SAAW;MACvBU,KAAK,EAAC,MAAM;MACZT,UAAU,EAAGA,UAAY;MACzBC,KAAK,EAAGA,KAAO;MACfC,IAAI,EAAGA,IAAM;MACbE,UAAU,EAAGA,UAAY;MACzBC,MAAM,EAAGA,MAAQ;MACjBC,eAAe,EAAGA,eAAiB;MACnCC,cAAc,EAAGA,cAAgB;MACjCC,iBAAiB,EAAGA,iBAAmB;MAAAL,QAAA,EAErCA;IAAQ,CACQ,CAAC,eACpBZ,IAAA,CAACM,6BAA6B;MAC7BY,KAAK,EAAC,MAAM;MACZT,UAAU,EAAGA,UAAY;MACzBE,IAAI,EAAGA,IAAM;MAAAC,QAAA,EAEXF;IAAK,CACuB,CAAC;EAAA,CAC/B,CAAC;AAEL","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../../src/components/global-styles-sidebar/default-sidebar.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { privateApis as editorPrivateApis } from '@wordpress/editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { ComplementaryArea, ComplementaryAreaMoreMenuItem } =\n\tunlock( editorPrivateApis );\n\nexport default function DefaultSidebar( {\n\tclassName,\n\tidentifier,\n\ttitle,\n\ticon,\n\tchildren,\n\tcloseLabel,\n\theader,\n\theaderClassName,\n\tpanelClassName,\n\tisActiveByDefault,\n} ) {\n\treturn (\n\t\t<>\n\t\t\t<ComplementaryArea\n\t\t\t\tclassName={ className }\n\t\t\t\tscope=\"core\"\n\t\t\t\tidentifier={ identifier }\n\t\t\t\ttitle={ title }\n\t\t\t\ticon={ icon }\n\t\t\t\tcloseLabel={ closeLabel }\n\t\t\t\theader={ header }\n\t\t\t\theaderClassName={ headerClassName }\n\t\t\t\tpanelClassName={ panelClassName }\n\t\t\t\tisActiveByDefault={ isActiveByDefault }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</ComplementaryArea>\n\t\t\t<ComplementaryAreaMoreMenuItem\n\t\t\t\tscope=\"core\"\n\t\t\t\tidentifier={ identifier }\n\t\t\t\ticon={ icon }\n\t\t\t>\n\t\t\t\t{ title }\n\t\t\t</ComplementaryAreaMoreMenuItem>\n\t\t</>\n\t);\n}\n"],
+  "mappings": "AA0BE,mBACC,KADD;AAvBF,SAAS,eAAe,yBAAyB;AAKjD,SAAS,cAAc;AAEvB,MAAM,EAAE,mBAAmB,8BAA8B,IACxD,OAAQ,iBAAkB;AAEZ,SAAR,eAAiC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,SACC,iCACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,OAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEE;AAAA;AAAA,IACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACA,OAAM;AAAA,QACN;AAAA,QACA;AAAA,QAEE;AAAA;AAAA,IACH;AAAA,KACD;AAEF;",
+  "names": []
+}

package/build-module/components/global-styles-sidebar/index.js

@@ -1,40 +1,27 @@
-/**
- * WordPress dependencies
- */
-import { FlexItem, Flex, Button } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { styles, seen, backup } from '@wordpress/icons';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useEffect, useRef } from '@wordpress/element';
-import { store as preferencesStore } from '@wordpress/preferences';
-import { store as editorStore, privateApis as editorPrivateApis } from '@wordpress/editor';
-import { useViewportMatch } from '@wordpress/compose';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-
-/**
- * Internal dependencies
- */
-import { GlobalStylesUI } from '../global-styles';
-import { store as editSiteStore } from '../../store';
-import { GlobalStylesMenuSlot } from '../global-styles/ui';
-import { unlock } from '../../lock-unlock';
-import { store as coreStore } from '@wordpress/core-data';
-import DefaultSidebar from './default-sidebar';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  interfaceStore
-} = unlock(editorPrivateApis);
-const {
-  useLocation
-} = unlock(routerPrivateApis);
-export default function GlobalStylesSidebar() {
-  const {
-    query
-  } = useLocation();
-  const {
-    canvas = 'view',
-    name
-  } = query;
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FlexItem, Flex, Button } from "@wordpress/components";
+import { __ } from "@wordpress/i18n";
+import { styles, seen, backup } from "@wordpress/icons";
+import { useSelect, useDispatch } from "@wordpress/data";
+import { useEffect, useRef } from "@wordpress/element";
+import { store as preferencesStore } from "@wordpress/preferences";
+import {
+  store as editorStore,
+  privateApis as editorPrivateApis
+} from "@wordpress/editor";
+import { useViewportMatch } from "@wordpress/compose";
+import { privateApis as routerPrivateApis } from "@wordpress/router";
+import { GlobalStylesUI } from "../global-styles";
+import { store as editSiteStore } from "../../store";
+import { GlobalStylesMenuSlot } from "../global-styles/ui";
+import { unlock } from "../../lock-unlock";
+import { store as coreStore } from "@wordpress/core-data";
+import DefaultSidebar from "./default-sidebar";
+const { interfaceStore } = unlock(editorPrivateApis);
+const { useLocation } = unlock(routerPrivateApis);
+function GlobalStylesSidebar() {
+  const { query } = useLocation();
+  const { canvas = "view", name } = query;
   const {
     shouldClearCanvasContainerView,
     isStyleBookOpened,
@@ -42,130 +29,147 @@ export default function GlobalStylesSidebar() {
     hasRevisions,
     isRevisionsOpened,
     isRevisionsStyleBookOpened
-  } = useSelect(select => {
-    const {
-      getActiveComplementaryArea
-    } = select(interfaceStore);
-    const {
-      getEditorCanvasContainerView
-    } = unlock(select(editSiteStore));
-    const canvasContainerView = getEditorCanvasContainerView();
-    const _isVisualEditorMode = 'visual' === select(editorStore).getEditorMode();
-    const _isEditCanvasMode = 'edit' === canvas;
-    const _showListViewByDefault = select(preferencesStore).get('core', 'showListViewByDefault');
-    const {
-      getEntityRecord,
-      __experimentalGetCurrentGlobalStylesId
-    } = select(coreStore);
-    const globalStylesId = __experimentalGetCurrentGlobalStylesId();
-    const globalStyles = globalStylesId ? getEntityRecord('root', 'globalStyles', globalStylesId) : undefined;
-    return {
-      isStyleBookOpened: 'style-book' === canvasContainerView,
-      shouldClearCanvasContainerView: 'edit-site/global-styles' !== getActiveComplementaryArea('core') || !_isVisualEditorMode || !_isEditCanvasMode,
-      showListViewByDefault: _showListViewByDefault,
-      hasRevisions: !!globalStyles?._links?.['version-history']?.[0]?.count,
-      isRevisionsStyleBookOpened: 'global-styles-revisions:style-book' === canvasContainerView,
-      isRevisionsOpened: 'global-styles-revisions' === canvasContainerView
-    };
-  }, [canvas]);
-  const {
-    setEditorCanvasContainerView
-  } = unlock(useDispatch(editSiteStore));
-  const isMobileViewport = useViewportMatch('medium', '<');
+  } = useSelect(
+    (select) => {
+      const { getActiveComplementaryArea: getActiveComplementaryArea2 } = select(interfaceStore);
+      const { getEditorCanvasContainerView } = unlock(
+        select(editSiteStore)
+      );
+      const canvasContainerView = getEditorCanvasContainerView();
+      const _isVisualEditorMode = "visual" === select(editorStore).getEditorMode();
+      const _isEditCanvasMode = "edit" === canvas;
+      const _showListViewByDefault = select(preferencesStore).get(
+        "core",
+        "showListViewByDefault"
+      );
+      const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } = select(coreStore);
+      const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+      const globalStyles = globalStylesId ? getEntityRecord("root", "globalStyles", globalStylesId) : void 0;
+      return {
+        isStyleBookOpened: "style-book" === canvasContainerView,
+        shouldClearCanvasContainerView: "edit-site/global-styles" !== getActiveComplementaryArea2("core") || !_isVisualEditorMode || !_isEditCanvasMode,
+        showListViewByDefault: _showListViewByDefault,
+        hasRevisions: !!globalStyles?._links?.["version-history"]?.[0]?.count,
+        isRevisionsStyleBookOpened: "global-styles-revisions:style-book" === canvasContainerView,
+        isRevisionsOpened: "global-styles-revisions" === canvasContainerView
+      };
+    },
+    [canvas]
+  );
+  const { setEditorCanvasContainerView } = unlock(
+    useDispatch(editSiteStore)
+  );
+  const isMobileViewport = useViewportMatch("medium", "<");
   useEffect(() => {
     if (shouldClearCanvasContainerView) {
-      setEditorCanvasContainerView(undefined);
+      setEditorCanvasContainerView(void 0);
     }
   }, [shouldClearCanvasContainerView, setEditorCanvasContainerView]);
-  const {
-    setIsListViewOpened
-  } = useDispatch(editorStore);
+  const { setIsListViewOpened } = useDispatch(editorStore);
   const toggleRevisions = () => {
     setIsListViewOpened(false);
     if (isRevisionsStyleBookOpened) {
-      setEditorCanvasContainerView('style-book');
+      setEditorCanvasContainerView("style-book");
       return;
     }
     if (isRevisionsOpened) {
-      setEditorCanvasContainerView(undefined);
+      setEditorCanvasContainerView(void 0);
       return;
     }
     if (isStyleBookOpened) {
-      setEditorCanvasContainerView('global-styles-revisions:style-book');
+      setEditorCanvasContainerView(
+        "global-styles-revisions:style-book"
+      );
     } else {
-      setEditorCanvasContainerView('global-styles-revisions');
+      setEditorCanvasContainerView("global-styles-revisions");
     }
   };
   const toggleStyleBook = () => {
     if (isRevisionsOpened) {
-      setEditorCanvasContainerView('global-styles-revisions:style-book');
+      setEditorCanvasContainerView(
+        "global-styles-revisions:style-book"
+      );
       return;
     }
     if (isRevisionsStyleBookOpened) {
-      setEditorCanvasContainerView('global-styles-revisions');
+      setEditorCanvasContainerView("global-styles-revisions");
       return;
     }
     setIsListViewOpened(isStyleBookOpened && showListViewByDefault);
-    setEditorCanvasContainerView(isStyleBookOpened ? undefined : 'style-book');
+    setEditorCanvasContainerView(
+      isStyleBookOpened ? void 0 : "style-book"
+    );
   };
-  const {
-    getActiveComplementaryArea
-  } = useSelect(interfaceStore);
-  const {
-    enableComplementaryArea
-  } = useDispatch(interfaceStore);
+  const { getActiveComplementaryArea } = useSelect(interfaceStore);
+  const { enableComplementaryArea } = useDispatch(interfaceStore);
   const previousActiveAreaRef = useRef(null);
   useEffect(() => {
-    if (name === 'styles' && canvas === 'edit') {
-      previousActiveAreaRef.current = getActiveComplementaryArea('core');
-      enableComplementaryArea('core', 'edit-site/global-styles');
+    if (name === "styles" && canvas === "edit") {
+      previousActiveAreaRef.current = getActiveComplementaryArea("core");
+      enableComplementaryArea("core", "edit-site/global-styles");
     } else if (previousActiveAreaRef.current) {
-      enableComplementaryArea('core', previousActiveAreaRef.current);
+      enableComplementaryArea("core", previousActiveAreaRef.current);
     }
   }, [name, enableComplementaryArea, canvas, getActiveComplementaryArea]);
-  return /*#__PURE__*/_jsx(DefaultSidebar, {
-    className: "edit-site-global-styles-sidebar",
-    identifier: "edit-site/global-styles",
-    title: __('Styles'),
-    icon: styles,
-    closeLabel: __('Close Styles'),
-    panelClassName: "edit-site-global-styles-sidebar__panel",
-    header: /*#__PURE__*/_jsxs(Flex, {
-      className: "edit-site-global-styles-sidebar__header",
-      gap: 1,
-      children: [/*#__PURE__*/_jsx(FlexItem, {
-        children: /*#__PURE__*/_jsx("h2", {
-          className: "edit-site-global-styles-sidebar__header-title",
-          children: __('Styles')
-        })
-      }), /*#__PURE__*/_jsxs(Flex, {
-        justify: "flex-end",
-        gap: 1,
-        className: "edit-site-global-styles-sidebar__header-actions",
-        children: [!isMobileViewport && /*#__PURE__*/_jsx(FlexItem, {
-          children: /*#__PURE__*/_jsx(Button, {
-            icon: seen,
-            label: __('Style Book'),
-            isPressed: isStyleBookOpened || isRevisionsStyleBookOpened,
-            accessibleWhenDisabled: true,
-            disabled: shouldClearCanvasContainerView,
-            onClick: toggleStyleBook,
-            size: "compact"
-          })
-        }), /*#__PURE__*/_jsx(FlexItem, {
-          children: /*#__PURE__*/_jsx(Button, {
-            label: __('Revisions'),
-            icon: backup,
-            onClick: toggleRevisions,
-            accessibleWhenDisabled: true,
-            disabled: !hasRevisions,
-            isPressed: isRevisionsOpened || isRevisionsStyleBookOpened,
-            size: "compact"
-          })
-        }), /*#__PURE__*/_jsx(GlobalStylesMenuSlot, {})]
-      })]
-    }),
-    children: /*#__PURE__*/_jsx(GlobalStylesUI, {})
-  });
+  return /* @__PURE__ */ jsx(
+    DefaultSidebar,
+    {
+      className: "edit-site-global-styles-sidebar",
+      identifier: "edit-site/global-styles",
+      title: __("Styles"),
+      icon: styles,
+      closeLabel: __("Close Styles"),
+      panelClassName: "edit-site-global-styles-sidebar__panel",
+      header: /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          className: "edit-site-global-styles-sidebar__header",
+          gap: 1,
+          children: [
+            /* @__PURE__ */ jsx(FlexItem, { children: /* @__PURE__ */ jsx("h2", { className: "edit-site-global-styles-sidebar__header-title", children: __("Styles") }) }),
+            /* @__PURE__ */ jsxs(
+              Flex,
+              {
+                justify: "flex-end",
+                gap: 1,
+                className: "edit-site-global-styles-sidebar__header-actions",
+                children: [
+                  !isMobileViewport && /* @__PURE__ */ jsx(FlexItem, { children: /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      icon: seen,
+                      label: __("Style Book"),
+                      isPressed: isStyleBookOpened || isRevisionsStyleBookOpened,
+                      accessibleWhenDisabled: true,
+                      disabled: shouldClearCanvasContainerView,
+                      onClick: toggleStyleBook,
+                      size: "compact"
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(FlexItem, { children: /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      label: __("Revisions"),
+                      icon: backup,
+                      onClick: toggleRevisions,
+                      accessibleWhenDisabled: true,
+                      disabled: !hasRevisions,
+                      isPressed: isRevisionsOpened || isRevisionsStyleBookOpened,
+                      size: "compact"
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(GlobalStylesMenuSlot, {})
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      children: /* @__PURE__ */ jsx(GlobalStylesUI, {})
+    }
+  );
 }
-//# sourceMappingURL=index.js.map
+export {
+  GlobalStylesSidebar as default
+};
+//# sourceMappingURL=index.js.map