@wordpress/editor 14.33.3-next.36001005c.0 → 14.34.0

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/global-styles/index.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 { GlobalStylesUI } from '@wordpress/global-styles-ui';\nimport { uploadMedia } from '@wordpress/media-utils';\n\n/**\n * Internal dependencies\n */\nimport { store as editorStore } from '../../store';\nimport { GlobalStylesBlockLink } from './block-link';\nimport { useGlobalStyles } from './hooks';\n\n/**\n * Hook to fetch server CSS and settings for BlockEditorProvider that are not Global Styles.\n */\nfunction useServerData() {\n\tconst {\n\t\tstyles,\n\t\t__unstableResolvedAssets,\n\t\tcolors,\n\t\tgradients,\n\t\t__experimentalDiscussionSettings,\n\t\tmediaUploadHandler,\n\t\tfontLibraryEnabled,\n\t} = useSelect( ( select ) => {\n\t\tconst { getEditorSettings } = select( editorStore );\n\t\tconst { canUser } = select( coreStore );\n\t\tconst editorSettings = getEditorSettings();\n\n\t\tconst canUserUploadMedia = canUser( 'create', {\n\t\t\tkind: 'root',\n\t\t\tname: 'media',\n\t\t} );\n\n\t\treturn {\n\t\t\tstyles: editorSettings?.styles || [],\n\t\t\t__unstableResolvedAssets:\n\t\t\t\teditorSettings?.__unstableResolvedAssets || {},\n\t\t\tcolors: editorSettings?.colors || [],\n\t\t\tgradients: editorSettings?.gradients || [],\n\t\t\t__experimentalDiscussionSettings:\n\t\t\t\teditorSettings?.__experimentalDiscussionSettings,\n\t\t\tmediaUploadHandler: canUserUploadMedia ? uploadMedia : undefined,\n\t\t\tfontLibraryEnabled: editorSettings?.fontLibraryEnabled ?? true,\n\t\t};\n\t}, [] );\n\n\t// Filter out global styles to get only server-provided styles\n\tconst serverCSS = useMemo( () => {\n\t\tif ( ! styles ) {\n\t\t\treturn [];\n\t\t}\n\t\treturn styles.filter( ( style ) => ! style.isGlobalStyles );\n\t}, [ styles ] );\n\n\t// Create server settings object\n\tconst serverSettings = useMemo( () => {\n\t\treturn {\n\t\t\t__unstableResolvedAssets,\n\t\t\tsettings: {\n\t\t\t\tcolor: {\n\t\t\t\t\tpalette: {\n\t\t\t\t\t\ttheme: colors,\n\t\t\t\t\t},\n\t\t\t\t\tgradients: {\n\t\t\t\t\t\ttheme: gradients,\n\t\t\t\t\t},\n\t\t\t\t\tduotone: {\n\t\t\t\t\t\ttheme: [],\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t},\n\t\t\t__experimentalDiscussionSettings,\n\t\t\tmediaUpload: mediaUploadHandler,\n\t\t};\n\t}, [\n\t\t__unstableResolvedAssets,\n\t\tcolors,\n\t\tgradients,\n\t\t__experimentalDiscussionSettings,\n\t\tmediaUploadHandler,\n\t] );\n\n\treturn { serverCSS, serverSettings, fontLibraryEnabled };\n}\n\nexport default function GlobalStylesUIWrapper( { path, onPathChange } ) {\n\tconst {\n\t\tuser: userConfig,\n\t\tbase: baseConfig,\n\t\tsetUser: setUserConfig,\n\t\tisReady,\n\t} = useGlobalStyles();\n\tconst { serverCSS, serverSettings, fontLibraryEnabled } = useServerData();\n\n\t// Show loading state while data is being fetched\n\tif ( ! isReady ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<GlobalStylesUI\n\t\t\t\tvalue={ userConfig }\n\t\t\t\tbaseValue={ baseConfig || {} }\n\t\t\t\tonChange={ setUserConfig }\n\t\t\t\tpath={ path }\n\t\t\t\tonPathChange={ onPathChange }\n\t\t\t\tfontLibraryEnabled={ fontLibraryEnabled }\n\t\t\t\tserverCSS={ serverCSS }\n\t\t\t\tserverSettings={ serverSettings }\n\t\t\t/>\n\t\t\t<GlobalStylesBlockLink\n\t\t\t\tpath={ path }\n\t\t\t\tonPathChange={ onPathChange }\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nexport { useGlobalStyles, useStyle, useSetting } from './hooks';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyGE;AAtGF,uBAAmC;AACnC,kBAA0B;AAC1B,qBAAwB;AACxB,8BAA+B;AAC/B,yBAA4B;AAK5B,mBAAqC;AACrC,wBAAsC;AACtC,mBAAgC;AA8GhC,IAAAA,gBAAsD;AAzGtD,SAAS,gBAAgB;AACxB,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,QAAI,uBAAW,CAAE,WAAY;AAC5B,UAAM,EAAE,kBAAkB,IAAI,OAAQ,aAAAC,KAAY;AAClD,UAAM,EAAE,QAAQ,IAAI,OAAQ,iBAAAC,KAAU;AACtC,UAAM,iBAAiB,kBAAkB;AAEzC,UAAM,qBAAqB,QAAS,UAAU;AAAA,MAC7C,MAAM;AAAA,MACN,MAAM;AAAA,IACP,CAAE;AAEF,WAAO;AAAA,MACN,QAAQ,gBAAgB,UAAU,CAAC;AAAA,MACnC,0BACC,gBAAgB,4BAA4B,CAAC;AAAA,MAC9C,QAAQ,gBAAgB,UAAU,CAAC;AAAA,MACnC,WAAW,gBAAgB,aAAa,CAAC;AAAA,MACzC,kCACC,gBAAgB;AAAA,MACjB,oBAAoB,qBAAqB,iCAAc;AAAA,MACvD,oBAAoB,gBAAgB,sBAAsB;AAAA,IAC3D;AAAA,EACD,GAAG,CAAC,CAAE;AAGN,QAAM,gBAAY,wBAAS,MAAM;AAChC,QAAK,CAAE,QAAS;AACf,aAAO,CAAC;AAAA,IACT;AACA,WAAO,OAAO,OAAQ,CAAE,UAAW,CAAE,MAAM,cAAe;AAAA,EAC3D,GAAG,CAAE,MAAO,CAAE;AAGd,QAAM,qBAAiB,wBAAS,MAAM;AACrC,WAAO;AAAA,MACN;AAAA,MACA,UAAU;AAAA,QACT,OAAO;AAAA,UACN,SAAS;AAAA,YACR,OAAO;AAAA,UACR;AAAA,UACA,WAAW;AAAA,YACV,OAAO;AAAA,UACR;AAAA,UACA,SAAS;AAAA,YACR,OAAO,CAAC;AAAA,UACT;AAAA,QACD;AAAA,MACD;AAAA,MACA;AAAA,MACA,aAAa;AAAA,IACd;AAAA,EACD,GAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AAEF,SAAO,EAAE,WAAW,gBAAgB,mBAAmB;AACxD;AAEe,SAAR,sBAAwC,EAAE,MAAM,aAAa,GAAI;AACvE,QAAM;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA,IACT;AAAA,EACD,QAAI,8BAAgB;AACpB,QAAM,EAAE,WAAW,gBAAgB,mBAAmB,IAAI,cAAc;AAGxE,MAAK,CAAE,SAAU;AAChB,WAAO;AAAA,EACR;AAEA,SACC,4EACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ;AAAA,QACR,WAAY,cAAc,CAAC;AAAA,QAC3B,UAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD;AAAA,KACD;AAEF;",
+  "names": ["import_hooks", "editorStore", "coreStore"]
+}

package/build/components/global-styles/menu.js

@@ -0,0 +1,95 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var menu_exports = {};
+__export(menu_exports, {
+  GlobalStylesActionMenu: () => GlobalStylesActionMenu
+});
+module.exports = __toCommonJS(menu_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_components = require("@wordpress/components");
+var import_data = require("@wordpress/data");
+var import_i18n = require("@wordpress/i18n");
+var import_preferences = require("@wordpress/preferences");
+var import_icons = require("@wordpress/icons");
+var import_core_data = require("@wordpress/core-data");
+var import_hooks = require("./hooks");
+function GlobalStylesActionMenu({
+  hideWelcomeGuide = false,
+  onChangePath
+}) {
+  const { user, setUser } = (0, import_hooks.useGlobalStyles)();
+  const canReset = !!user && (Object.keys(user?.styles ?? {}).length > 0 || Object.keys(user?.settings ?? {}).length > 0);
+  const onReset = () => {
+    setUser({ styles: {}, settings: {} });
+  };
+  const { toggle } = (0, import_data.useDispatch)(import_preferences.store);
+  const { canEditCSS } = (0, import_data.useSelect)((select) => {
+    const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } = select(import_core_data.store);
+    const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+    const globalStyles = globalStylesId ? getEntityRecord("root", "globalStyles", globalStylesId) : void 0;
+    return {
+      canEditCSS: !!globalStyles?._links?.["wp:action-edit-css"]
+    };
+  }, []);
+  const loadCustomCSS = () => {
+    onChangePath("/css");
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.DropdownMenu,
+    {
+      icon: import_icons.moreVertical,
+      label: (0, import_i18n.__)("More"),
+      toggleProps: { size: "compact" },
+      children: ({ onClose }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.MenuGroup, { children: [
+          canEditCSS && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.MenuItem, { onClick: loadCustomCSS, children: (0, import_i18n.__)("Additional CSS") }),
+          !hideWelcomeGuide && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_components.MenuItem,
+            {
+              onClick: () => {
+                toggle(
+                  "core/edit-site",
+                  "welcomeGuideStyles"
+                );
+                onClose();
+              },
+              children: (0, import_i18n.__)("Welcome Guide")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.MenuGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.MenuItem,
+          {
+            onClick: () => {
+              onReset();
+              onClose();
+            },
+            disabled: !canReset,
+            children: (0, import_i18n.__)("Reset styles")
+          }
+        ) })
+      ] })
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GlobalStylesActionMenu
+});
+//# sourceMappingURL=menu.js.map

package/build/components/global-styles/menu.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/global-styles/menu.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\nimport { store as preferencesStore } from '@wordpress/preferences';\nimport { moreVertical } from '@wordpress/icons';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { useGlobalStyles } from './hooks';\n\n/**\n * Action menu with Reset, Welcome Guide, and Additional CSS.\n *\n * @param {Object}   props                  Component props.\n * @param {boolean}  props.hideWelcomeGuide Whether to hide the Welcome Guide option.\n * @param {Function} props.onChangePath     Callback for navigation to different paths (e.g., '/css').\n * @return {JSX.Element} The Global Styles Action Menu component.\n */\nexport function GlobalStylesActionMenu( {\n\thideWelcomeGuide = false,\n\tonChangePath,\n} ) {\n\tconst { user, setUser } = useGlobalStyles();\n\n\t// Check if there are user customizations that can be reset\n\tconst canReset =\n\t\t!! user &&\n\t\t( Object.keys( user?.styles ?? {} ).length > 0 ||\n\t\t\tObject.keys( user?.settings ?? {} ).length > 0 );\n\n\t// Reset function to clear all user customizations\n\tconst onReset = () => {\n\t\tsetUser( { styles: {}, settings: {} } );\n\t};\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 loadCustomCSS = () => {\n\t\tonChangePath( '/css' );\n\t};\n\n\treturn (\n\t\t<DropdownMenu\n\t\t\ticon={ moreVertical }\n\t\t\tlabel={ __( 'More' ) }\n\t\t\ttoggleProps={ { size: 'compact' } }\n\t\t>\n\t\t\t{ ( { onClose } ) => (\n\t\t\t\t<>\n\t\t\t\t\t<MenuGroup>\n\t\t\t\t\t\t{ canEditCSS && (\n\t\t\t\t\t\t\t<MenuItem onClick={ loadCustomCSS }>\n\t\t\t\t\t\t\t\t{ __( 'Additional CSS' ) }\n\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ ! hideWelcomeGuide && (\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) }\n\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t<MenuGroup>\n\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tonReset();\n\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tdisabled={ ! canReset }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Reset styles' ) }\n\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t</MenuGroup>\n\t\t\t\t</>\n\t\t\t) }\n\t\t</DropdownMenu>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgEI;AA7DJ,wBAAkD;AAClD,kBAAuC;AACvC,kBAAmB;AACnB,yBAA0C;AAC1C,mBAA6B;AAC7B,uBAAmC;AAKnC,mBAAgC;AAUzB,SAAS,uBAAwB;AAAA,EACvC,mBAAmB;AAAA,EACnB;AACD,GAAI;AACH,QAAM,EAAE,MAAM,QAAQ,QAAI,8BAAgB;AAG1C,QAAM,WACL,CAAC,CAAE,SACD,OAAO,KAAM,MAAM,UAAU,CAAC,CAAE,EAAE,SAAS,KAC5C,OAAO,KAAM,MAAM,YAAY,CAAC,CAAE,EAAE,SAAS;AAG/C,QAAM,UAAU,MAAM;AACrB,YAAS,EAAE,QAAQ,CAAC,GAAG,UAAU,CAAC,EAAE,CAAE;AAAA,EACvC;AACA,QAAM,EAAE,OAAO,QAAI,yBAAa,mBAAAA,KAAiB;AACjD,QAAM,EAAE,WAAW,QAAI,uBAAW,CAAE,WAAY;AAC/C,UAAM,EAAE,iBAAiB,uCAAuC,IAC/D,OAAQ,iBAAAC,KAAU;AAEnB,UAAM,iBAAiB,uCAAuC;AAC9D,UAAM,eAAe,iBAClB,gBAAiB,QAAQ,gBAAgB,cAAe,IACxD;AAEH,WAAO;AAAA,MACN,YAAY,CAAC,CAAE,cAAc,SAAU,oBAAqB;AAAA,IAC7D;AAAA,EACD,GAAG,CAAC,CAAE;AACN,QAAM,gBAAgB,MAAM;AAC3B,iBAAc,MAAO;AAAA,EACtB;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,MAAO;AAAA,MACP,WAAQ,gBAAI,MAAO;AAAA,MACnB,aAAc,EAAE,MAAM,UAAU;AAAA,MAE9B,WAAE,EAAE,QAAQ,MACb,4EACC;AAAA,qDAAC,+BACE;AAAA,wBACD,4CAAC,8BAAS,SAAU,eACjB,8BAAI,gBAAiB,GACxB;AAAA,UAEC,CAAE,oBACH;AAAA,YAAC;AAAA;AAAA,cACA,SAAU,MAAM;AACf;AAAA,kBACC;AAAA,kBACA;AAAA,gBACD;AACA,wBAAQ;AAAA,cACT;AAAA,cAEE,8BAAI,eAAgB;AAAA;AAAA,UACvB;AAAA,WAEF;AAAA,QACA,4CAAC,+BACA;AAAA,UAAC;AAAA;AAAA,YACA,SAAU,MAAM;AACf,sBAAQ;AACR,sBAAQ;AAAA,YACT;AAAA,YACA,UAAW,CAAE;AAAA,YAEX,8BAAI,cAAe;AAAA;AAAA,QACtB,GACD;AAAA,SACD;AAAA;AAAA,EAEF;AAEF;",
+  "names": ["preferencesStore", "coreStore"]
+}

package/build/components/global-styles-provider/index.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,54 +15,19 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var global_styles_provider_exports = {};
 __export(global_styles_provider_exports, {
-  GlobalStylesProvider: () => GlobalStylesProvider,
-  mergeBaseAndUserConfigs: () => mergeBaseAndUserConfigs,
   useGlobalStylesContext: () => useGlobalStylesContext
 });
 module.exports = __toCommonJS(global_styles_provider_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_deepmerge = __toESM(require("deepmerge"));
-var import_is_plain_object = require("is-plain-object");
 var import_block_editor = require("@wordpress/block-editor");
 var import_core_data = require("@wordpress/core-data");
 var import_data = require("@wordpress/data");
 var import_element = require("@wordpress/element");
+var import_global_styles_engine = require("@wordpress/global-styles-engine");
 var import_lock_unlock = require("../../lock-unlock");
-const { GlobalStylesContext, cleanEmptyObject } = (0, import_lock_unlock.unlock)(
-  import_block_editor.privateApis
-);
-function mergeBaseAndUserConfigs(base, user) {
-  return (0, import_deepmerge.default)(base, user, {
-    /*
-     * We only pass as arrays the presets,
-     * in which case we want the new array of values
-     * to override the old array (no merging).
-     */
-    isMergeableObject: import_is_plain_object.isPlainObject,
-    /*
-     * Exceptions to the above rule.
-     * Background images should be replaced, not merged,
-     * as they themselves are specific object definitions for the style.
-     */
-    customMerge: (key) => {
-      if (key === "backgroundImage") {
-        return (baseConfig, userConfig) => userConfig;
-      }
-      return void 0;
-    }
-  });
-}
+const { cleanEmptyObject } = (0, import_lock_unlock.unlock)(import_block_editor.privateApis);
 function useGlobalStylesUserConfig() {
   const { globalStylesId, isReady, settings, styles, _links } = (0, import_data.useSelect)(
     (select) => {
@@ -189,7 +152,7 @@ function useGlobalStylesContext() {
     if (!baseConfig || !userConfig) {
       return {};
     }
-    return mergeBaseAndUserConfigs(baseConfig, userConfig);
+    return (0, import_global_styles_engine.mergeGlobalStyles)(baseConfig, userConfig);
   }, [userConfig, baseConfig]);
   const context = (0, import_element.useMemo)(() => {
     return {
@@ -209,17 +172,8 @@ function useGlobalStylesContext() {
   ]);
   return context;
 }
-function GlobalStylesProvider({ children }) {
-  const context = useGlobalStylesContext();
-  if (!context.isReady) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesContext.Provider, { value: context, children });
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  GlobalStylesProvider,
-  mergeBaseAndUserConfigs,
   useGlobalStylesContext
 });
 //# sourceMappingURL=index.js.map

package/build/components/global-styles-provider/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/global-styles-provider/index.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport deepmerge from 'deepmerge';\nimport { isPlainObject } from 'is-plain-object';\n\n/**\n * WordPress dependencies\n */\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useMemo, useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { GlobalStylesContext, cleanEmptyObject } = unlock(\n\tblockEditorPrivateApis\n);\n\nexport function mergeBaseAndUserConfigs( base, user ) {\n\treturn deepmerge( base, user, {\n\t\t/*\n\t\t * We only pass as arrays the presets,\n\t\t * in which case we want the new array of values\n\t\t * to override the old array (no merging).\n\t\t */\n\t\tisMergeableObject: isPlainObject,\n\t\t/*\n\t\t * Exceptions to the above rule.\n\t\t * Background images should be replaced, not merged,\n\t\t * as they themselves are specific object definitions for the style.\n\t\t */\n\t\tcustomMerge: ( key ) => {\n\t\t\tif ( key === 'backgroundImage' ) {\n\t\t\t\treturn ( baseConfig, userConfig ) => userConfig;\n\t\t\t}\n\t\t\treturn undefined;\n\t\t},\n\t} );\n}\n\nfunction useGlobalStylesUserConfig() {\n\tconst { globalStylesId, isReady, settings, styles, _links } = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetEntityRecord,\n\t\t\t\tgetEditedEntityRecord,\n\t\t\t\thasFinishedResolution,\n\t\t\t\tcanUser,\n\t\t\t} = select( coreStore );\n\t\t\tconst _globalStylesId =\n\t\t\t\tselect( coreStore ).__experimentalGetCurrentGlobalStylesId();\n\n\t\t\tlet record;\n\n\t\t\t/*\n\t\t\t * Ensure that the global styles ID request is complete by testing `_globalStylesId`,\n\t\t\t * before firing off the `canUser` OPTIONS request for user capabilities, otherwise it will\n\t\t\t * fetch `/wp/v2/global-styles` instead of `/wp/v2/global-styles/{id}`.\n\t\t\t * NOTE: Please keep in sync any preload paths sent to `block_editor_rest_api_preload()`,\n\t\t\t * or set using the `block_editor_rest_api_preload_paths` filter, if this changes.\n\t\t\t */\n\t\t\tconst userCanEditGlobalStyles = _globalStylesId\n\t\t\t\t? canUser( 'update', {\n\t\t\t\t\t\tkind: 'root',\n\t\t\t\t\t\tname: 'globalStyles',\n\t\t\t\t\t\tid: _globalStylesId,\n\t\t\t\t  } )\n\t\t\t\t: null;\n\n\t\t\tif (\n\t\t\t\t_globalStylesId &&\n\t\t\t\t/*\n\t\t\t\t * Test that the OPTIONS request for user capabilities is complete\n\t\t\t\t * before fetching the global styles entity record.\n\t\t\t\t * This is to avoid fetching the global styles entity unnecessarily.\n\t\t\t\t */\n\t\t\t\ttypeof userCanEditGlobalStyles === 'boolean'\n\t\t\t) {\n\t\t\t\t/*\n\t\t\t\t * Fetch the global styles entity record based on the user's capabilities.\n\t\t\t\t * The default context is `edit` for users who can edit global styles.\n\t\t\t\t * Otherwise, the context is `view`.\n\t\t\t\t * NOTE: There is an equivalent conditional check using `current_user_can()` in the backend\n\t\t\t\t * to preload the global styles entity. Please keep in sync any preload paths sent to `block_editor_rest_api_preload()`,\n\t\t\t\t * or set using `block_editor_rest_api_preload_paths` filter, if this changes.\n\t\t\t\t */\n\t\t\t\tif ( userCanEditGlobalStyles ) {\n\t\t\t\t\trecord = getEditedEntityRecord(\n\t\t\t\t\t\t'root',\n\t\t\t\t\t\t'globalStyles',\n\t\t\t\t\t\t_globalStylesId\n\t\t\t\t\t);\n\t\t\t\t} else {\n\t\t\t\t\trecord = getEntityRecord(\n\t\t\t\t\t\t'root',\n\t\t\t\t\t\t'globalStyles',\n\t\t\t\t\t\t_globalStylesId,\n\t\t\t\t\t\t{ context: 'view' }\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tlet hasResolved = false;\n\t\t\tif (\n\t\t\t\thasFinishedResolution(\n\t\t\t\t\t'__experimentalGetCurrentGlobalStylesId'\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\tif ( _globalStylesId ) {\n\t\t\t\t\thasResolved = userCanEditGlobalStyles\n\t\t\t\t\t\t? hasFinishedResolution( 'getEditedEntityRecord', [\n\t\t\t\t\t\t\t\t'root',\n\t\t\t\t\t\t\t\t'globalStyles',\n\t\t\t\t\t\t\t\t_globalStylesId,\n\t\t\t\t\t\t  ] )\n\t\t\t\t\t\t: hasFinishedResolution( 'getEntityRecord', [\n\t\t\t\t\t\t\t\t'root',\n\t\t\t\t\t\t\t\t'globalStyles',\n\t\t\t\t\t\t\t\t_globalStylesId,\n\t\t\t\t\t\t\t\t{ context: 'view' },\n\t\t\t\t\t\t  ] );\n\t\t\t\t} else {\n\t\t\t\t\thasResolved = true;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tglobalStylesId: _globalStylesId,\n\t\t\t\tisReady: hasResolved,\n\t\t\t\tsettings: record?.settings,\n\t\t\t\tstyles: record?.styles,\n\t\t\t\t_links: record?._links,\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\n\tconst { getEditedEntityRecord } = useSelect( coreStore );\n\tconst { editEntityRecord } = useDispatch( coreStore );\n\tconst config = useMemo( () => {\n\t\treturn {\n\t\t\tsettings: settings ?? {},\n\t\t\tstyles: styles ?? {},\n\t\t\t_links: _links ?? {},\n\t\t};\n\t}, [ settings, styles, _links ] );\n\n\tconst setConfig = useCallback(\n\t\t/**\n\t\t * Set the global styles config.\n\t\t * @param {Function|Object} callbackOrObject If the callbackOrObject is a function, pass the current config to the callback so the consumer can merge values.\n\t\t *                                           Otherwise, overwrite the current config with the incoming object.\n\t\t * @param {Object}          options          Options for editEntityRecord Core selector.\n\t\t */\n\t\t( callbackOrObject, options = {} ) => {\n\t\t\tconst record = getEditedEntityRecord(\n\t\t\t\t'root',\n\t\t\t\t'globalStyles',\n\t\t\t\tglobalStylesId\n\t\t\t);\n\n\t\t\tconst currentConfig = {\n\t\t\t\tstyles: record?.styles ?? {},\n\t\t\t\tsettings: record?.settings ?? {},\n\t\t\t\t_links: record?._links ?? {},\n\t\t\t};\n\n\t\t\tconst updatedConfig =\n\t\t\t\ttypeof callbackOrObject === 'function'\n\t\t\t\t\t? callbackOrObject( currentConfig )\n\t\t\t\t\t: callbackOrObject;\n\n\t\t\teditEntityRecord(\n\t\t\t\t'root',\n\t\t\t\t'globalStyles',\n\t\t\t\tglobalStylesId,\n\t\t\t\t{\n\t\t\t\t\tstyles: cleanEmptyObject( updatedConfig.styles ) || {},\n\t\t\t\t\tsettings: cleanEmptyObject( updatedConfig.settings ) || {},\n\t\t\t\t\t_links: cleanEmptyObject( updatedConfig._links ) || {},\n\t\t\t\t},\n\t\t\t\toptions\n\t\t\t);\n\t\t},\n\t\t[ globalStylesId, editEntityRecord, getEditedEntityRecord ]\n\t);\n\n\treturn [ isReady, config, setConfig ];\n}\n\nfunction useGlobalStylesBaseConfig() {\n\tconst baseConfig = useSelect(\n\t\t( select ) =>\n\t\t\tselect( coreStore ).__experimentalGetCurrentThemeBaseGlobalStyles(),\n\t\t[]\n\t);\n\treturn [ !! baseConfig, baseConfig ];\n}\n\nexport function useGlobalStylesContext() {\n\tconst [ isUserConfigReady, userConfig, setUserConfig ] =\n\t\tuseGlobalStylesUserConfig();\n\tconst [ isBaseConfigReady, baseConfig ] = useGlobalStylesBaseConfig();\n\n\tconst mergedConfig = useMemo( () => {\n\t\tif ( ! baseConfig || ! userConfig ) {\n\t\t\treturn {};\n\t\t}\n\n\t\treturn mergeBaseAndUserConfigs( baseConfig, userConfig );\n\t}, [ userConfig, baseConfig ] );\n\n\tconst context = useMemo( () => {\n\t\treturn {\n\t\t\tisReady: isUserConfigReady && isBaseConfigReady,\n\t\t\tuser: userConfig,\n\t\t\tbase: baseConfig,\n\t\t\tmerged: mergedConfig,\n\t\t\tsetUserConfig,\n\t\t};\n\t}, [\n\t\tmergedConfig,\n\t\tuserConfig,\n\t\tbaseConfig,\n\t\tsetUserConfig,\n\t\tisUserConfigReady,\n\t\tisBaseConfigReady,\n\t] );\n\n\treturn context;\n}\n\nexport function GlobalStylesProvider( { children } ) {\n\tconst context = useGlobalStylesContext();\n\tif ( ! context.isReady ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<GlobalStylesContext.Provider value={ context }>\n\t\t\t{ children }\n\t\t</GlobalStylesContext.Provider>\n\t);\n}\n"],
-  "mappings": "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",
-  "names": ["blockEditorPrivateApis", "deepmerge", "getEditedEntityRecord", "coreStore"]
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useMemo, useCallback } from '@wordpress/element';\nimport { mergeGlobalStyles } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { cleanEmptyObject } = unlock( blockEditorPrivateApis );\n\nfunction useGlobalStylesUserConfig() {\n\tconst { globalStylesId, isReady, settings, styles, _links } = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetEntityRecord,\n\t\t\t\tgetEditedEntityRecord,\n\t\t\t\thasFinishedResolution,\n\t\t\t\tcanUser,\n\t\t\t} = select( coreStore );\n\t\t\tconst _globalStylesId =\n\t\t\t\tselect( coreStore ).__experimentalGetCurrentGlobalStylesId();\n\n\t\t\tlet record;\n\n\t\t\t/*\n\t\t\t * Ensure that the global styles ID request is complete by testing `_globalStylesId`,\n\t\t\t * before firing off the `canUser` OPTIONS request for user capabilities, otherwise it will\n\t\t\t * fetch `/wp/v2/global-styles` instead of `/wp/v2/global-styles/{id}`.\n\t\t\t * NOTE: Please keep in sync any preload paths sent to `block_editor_rest_api_preload()`,\n\t\t\t * or set using the `block_editor_rest_api_preload_paths` filter, if this changes.\n\t\t\t */\n\t\t\tconst userCanEditGlobalStyles = _globalStylesId\n\t\t\t\t? canUser( 'update', {\n\t\t\t\t\t\tkind: 'root',\n\t\t\t\t\t\tname: 'globalStyles',\n\t\t\t\t\t\tid: _globalStylesId,\n\t\t\t\t  } )\n\t\t\t\t: null;\n\n\t\t\tif (\n\t\t\t\t_globalStylesId &&\n\t\t\t\t/*\n\t\t\t\t * Test that the OPTIONS request for user capabilities is complete\n\t\t\t\t * before fetching the global styles entity record.\n\t\t\t\t * This is to avoid fetching the global styles entity unnecessarily.\n\t\t\t\t */\n\t\t\t\ttypeof userCanEditGlobalStyles === 'boolean'\n\t\t\t) {\n\t\t\t\t/*\n\t\t\t\t * Fetch the global styles entity record based on the user's capabilities.\n\t\t\t\t * The default context is `edit` for users who can edit global styles.\n\t\t\t\t * Otherwise, the context is `view`.\n\t\t\t\t * NOTE: There is an equivalent conditional check using `current_user_can()` in the backend\n\t\t\t\t * to preload the global styles entity. Please keep in sync any preload paths sent to `block_editor_rest_api_preload()`,\n\t\t\t\t * or set using `block_editor_rest_api_preload_paths` filter, if this changes.\n\t\t\t\t */\n\t\t\t\tif ( userCanEditGlobalStyles ) {\n\t\t\t\t\trecord = getEditedEntityRecord(\n\t\t\t\t\t\t'root',\n\t\t\t\t\t\t'globalStyles',\n\t\t\t\t\t\t_globalStylesId\n\t\t\t\t\t);\n\t\t\t\t} else {\n\t\t\t\t\trecord = getEntityRecord(\n\t\t\t\t\t\t'root',\n\t\t\t\t\t\t'globalStyles',\n\t\t\t\t\t\t_globalStylesId,\n\t\t\t\t\t\t{ context: 'view' }\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tlet hasResolved = false;\n\t\t\tif (\n\t\t\t\thasFinishedResolution(\n\t\t\t\t\t'__experimentalGetCurrentGlobalStylesId'\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\tif ( _globalStylesId ) {\n\t\t\t\t\thasResolved = userCanEditGlobalStyles\n\t\t\t\t\t\t? hasFinishedResolution( 'getEditedEntityRecord', [\n\t\t\t\t\t\t\t\t'root',\n\t\t\t\t\t\t\t\t'globalStyles',\n\t\t\t\t\t\t\t\t_globalStylesId,\n\t\t\t\t\t\t  ] )\n\t\t\t\t\t\t: hasFinishedResolution( 'getEntityRecord', [\n\t\t\t\t\t\t\t\t'root',\n\t\t\t\t\t\t\t\t'globalStyles',\n\t\t\t\t\t\t\t\t_globalStylesId,\n\t\t\t\t\t\t\t\t{ context: 'view' },\n\t\t\t\t\t\t  ] );\n\t\t\t\t} else {\n\t\t\t\t\thasResolved = true;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tglobalStylesId: _globalStylesId,\n\t\t\t\tisReady: hasResolved,\n\t\t\t\tsettings: record?.settings,\n\t\t\t\tstyles: record?.styles,\n\t\t\t\t_links: record?._links,\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\n\tconst { getEditedEntityRecord } = useSelect( coreStore );\n\tconst { editEntityRecord } = useDispatch( coreStore );\n\tconst config = useMemo( () => {\n\t\treturn {\n\t\t\tsettings: settings ?? {},\n\t\t\tstyles: styles ?? {},\n\t\t\t_links: _links ?? {},\n\t\t};\n\t}, [ settings, styles, _links ] );\n\n\tconst setConfig = useCallback(\n\t\t/**\n\t\t * Set the global styles config.\n\t\t * @param {Function|Object} callbackOrObject If the callbackOrObject is a function, pass the current config to the callback so the consumer can merge values.\n\t\t *                                           Otherwise, overwrite the current config with the incoming object.\n\t\t * @param {Object}          options          Options for editEntityRecord Core selector.\n\t\t */\n\t\t( callbackOrObject, options = {} ) => {\n\t\t\tconst record = getEditedEntityRecord(\n\t\t\t\t'root',\n\t\t\t\t'globalStyles',\n\t\t\t\tglobalStylesId\n\t\t\t);\n\n\t\t\tconst currentConfig = {\n\t\t\t\tstyles: record?.styles ?? {},\n\t\t\t\tsettings: record?.settings ?? {},\n\t\t\t\t_links: record?._links ?? {},\n\t\t\t};\n\n\t\t\tconst updatedConfig =\n\t\t\t\ttypeof callbackOrObject === 'function'\n\t\t\t\t\t? callbackOrObject( currentConfig )\n\t\t\t\t\t: callbackOrObject;\n\n\t\t\teditEntityRecord(\n\t\t\t\t'root',\n\t\t\t\t'globalStyles',\n\t\t\t\tglobalStylesId,\n\t\t\t\t{\n\t\t\t\t\tstyles: cleanEmptyObject( updatedConfig.styles ) || {},\n\t\t\t\t\tsettings: cleanEmptyObject( updatedConfig.settings ) || {},\n\t\t\t\t\t_links: cleanEmptyObject( updatedConfig._links ) || {},\n\t\t\t\t},\n\t\t\t\toptions\n\t\t\t);\n\t\t},\n\t\t[ globalStylesId, editEntityRecord, getEditedEntityRecord ]\n\t);\n\n\treturn [ isReady, config, setConfig ];\n}\n\nfunction useGlobalStylesBaseConfig() {\n\tconst baseConfig = useSelect(\n\t\t( select ) =>\n\t\t\tselect( coreStore ).__experimentalGetCurrentThemeBaseGlobalStyles(),\n\t\t[]\n\t);\n\treturn [ !! baseConfig, baseConfig ];\n}\n\nexport function useGlobalStylesContext() {\n\tconst [ isUserConfigReady, userConfig, setUserConfig ] =\n\t\tuseGlobalStylesUserConfig();\n\tconst [ isBaseConfigReady, baseConfig ] = useGlobalStylesBaseConfig();\n\n\tconst mergedConfig = useMemo( () => {\n\t\tif ( ! baseConfig || ! userConfig ) {\n\t\t\treturn {};\n\t\t}\n\n\t\treturn mergeGlobalStyles( baseConfig, userConfig );\n\t}, [ userConfig, baseConfig ] );\n\n\tconst context = useMemo( () => {\n\t\treturn {\n\t\t\tisReady: isUserConfigReady && isBaseConfigReady,\n\t\t\tuser: userConfig,\n\t\t\tbase: baseConfig,\n\t\t\tmerged: mergedConfig,\n\t\t\tsetUserConfig,\n\t\t};\n\t}, [\n\t\tmergedConfig,\n\t\tuserConfig,\n\t\tbaseConfig,\n\t\tsetUserConfig,\n\t\tisUserConfigReady,\n\t\tisBaseConfigReady,\n\t] );\n\n\treturn context;\n}\n"],
+  "mappings": "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",
+  "names": ["blockEditorPrivateApis", "getEditedEntityRecord", "coreStore"]
 }

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

@@ -0,0 +1,55 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var global_styles_renderer_exports = {};
+__export(global_styles_renderer_exports, {
+  GlobalStylesRenderer: () => GlobalStylesRenderer
+});
+module.exports = __toCommonJS(global_styles_renderer_exports);
+var import_element = require("@wordpress/element");
+var import_data = require("@wordpress/data");
+var import_store = require("../../store");
+var import_use_global_styles_output = require("../../hooks/use-global-styles-output");
+function useGlobalStylesRenderer(disableRootPadding) {
+  const [styles, settings] = (0, import_use_global_styles_output.useGlobalStylesOutput)(disableRootPadding);
+  const { getEditorSettings } = (0, import_data.useSelect)(import_store.store);
+  const { updateEditorSettings } = (0, import_data.useDispatch)(import_store.store);
+  (0, import_element.useEffect)(() => {
+    if (!styles || !settings) {
+      return;
+    }
+    const currentStoreSettings = getEditorSettings();
+    const nonGlobalStyles = Object.values(
+      currentStoreSettings.styles ?? []
+    ).filter((style) => !style.isGlobalStyles);
+    updateEditorSettings({
+      ...currentStoreSettings,
+      styles: [...nonGlobalStyles, ...styles],
+      __experimentalFeatures: settings
+    });
+  }, [styles, settings, updateEditorSettings, getEditorSettings]);
+}
+function GlobalStylesRenderer({ disableRootPadding }) {
+  useGlobalStylesRenderer(disableRootPadding);
+  return null;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GlobalStylesRenderer
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "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';\n\n/**\n * Internal dependencies\n */\nimport { store as editorStore } from '../../store';\nimport { useGlobalStylesOutput } from '../../hooks/use-global-styles-output';\n\nfunction useGlobalStylesRenderer( disableRootPadding ) {\n\tconst [ styles, settings ] = useGlobalStylesOutput( disableRootPadding );\n\tconst { getEditorSettings } = useSelect( editorStore );\n\tconst { updateEditorSettings } = useDispatch( editorStore );\n\n\tuseEffect( () => {\n\t\tif ( ! styles || ! settings ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst currentStoreSettings = getEditorSettings();\n\t\tconst nonGlobalStyles = Object.values(\n\t\t\tcurrentStoreSettings.styles ?? []\n\t\t).filter( ( style ) => ! style.isGlobalStyles );\n\t\tupdateEditorSettings( {\n\t\t\t...currentStoreSettings,\n\t\t\tstyles: [ ...nonGlobalStyles, ...styles ],\n\t\t\t__experimentalFeatures: settings,\n\t\t} );\n\t}, [ styles, settings, updateEditorSettings, getEditorSettings ] );\n}\n\nexport function GlobalStylesRenderer( { disableRootPadding } ) {\n\tuseGlobalStylesRenderer( disableRootPadding );\n\n\treturn null;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA0B;AAC1B,kBAAuC;AAKvC,mBAAqC;AACrC,sCAAsC;AAEtC,SAAS,wBAAyB,oBAAqB;AACtD,QAAM,CAAE,QAAQ,QAAS,QAAI,uDAAuB,kBAAmB;AACvE,QAAM,EAAE,kBAAkB,QAAI,uBAAW,aAAAA,KAAY;AACrD,QAAM,EAAE,qBAAqB,QAAI,yBAAa,aAAAA,KAAY;AAE1D,gCAAW,MAAM;AAChB,QAAK,CAAE,UAAU,CAAE,UAAW;AAC7B;AAAA,IACD;AAEA,UAAM,uBAAuB,kBAAkB;AAC/C,UAAM,kBAAkB,OAAO;AAAA,MAC9B,qBAAqB,UAAU,CAAC;AAAA,IACjC,EAAE,OAAQ,CAAE,UAAW,CAAE,MAAM,cAAe;AAC9C,yBAAsB;AAAA,MACrB,GAAG;AAAA,MACH,QAAQ,CAAE,GAAG,iBAAiB,GAAG,MAAO;AAAA,MACxC,wBAAwB;AAAA,IACzB,CAAE;AAAA,EACH,GAAG,CAAE,QAAQ,UAAU,sBAAsB,iBAAkB,CAAE;AAClE;AAEO,SAAS,qBAAsB,EAAE,mBAAmB,GAAI;AAC9D,0BAAyB,kBAAmB;AAE5C,SAAO;AACR;",
+  "names": ["editorStore"]
+}

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

@@ -0,0 +1,66 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var default_sidebar_exports = {};
+__export(default_sidebar_exports, {
+  default: () => DefaultSidebar
+});
+module.exports = __toCommonJS(default_sidebar_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_interface = require("@wordpress/interface");
+function DefaultSidebar({
+  className,
+  identifier,
+  title,
+  icon,
+  children,
+  closeLabel,
+  header,
+  headerClassName,
+  panelClassName,
+  isActiveByDefault
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_interface.ComplementaryArea,
+      {
+        className,
+        scope: "core",
+        identifier,
+        title,
+        icon,
+        closeLabel,
+        header,
+        headerClassName,
+        panelClassName,
+        isActiveByDefault,
+        children
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_interface.ComplementaryAreaMoreMenuItem,
+      {
+        scope: "core",
+        identifier,
+        icon,
+        children: title
+      }
+    )
+  ] });
+}
+//# sourceMappingURL=default-sidebar.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/global-styles-sidebar/default-sidebar.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tComplementaryArea,\n\tComplementaryAreaMoreMenuItem,\n} from '@wordpress/interface';\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;AAAA;AAAA;AAAA;AAAA;AAqBE;AAlBF,uBAGO;AAEQ,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,4EACC;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/components/global-styles-sidebar/index.js

@@ -0,0 +1,182 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var global_styles_sidebar_exports = {};
+__export(global_styles_sidebar_exports, {
+  default: () => GlobalStylesSidebar
+});
+module.exports = __toCommonJS(global_styles_sidebar_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_components = require("@wordpress/components");
+var import_i18n = require("@wordpress/i18n");
+var import_icons = require("@wordpress/icons");
+var import_data = require("@wordpress/data");
+var import_element = require("@wordpress/element");
+var import_preferences = require("@wordpress/preferences");
+var import_compose = require("@wordpress/compose");
+var import_core_data = require("@wordpress/core-data");
+var import_interface = require("@wordpress/interface");
+var import_global_styles = __toESM(require("../global-styles"));
+var import_menu = require("../global-styles/menu");
+var import_store = require("../../store");
+var import_lock_unlock = require("../../lock-unlock");
+var import_default_sidebar = __toESM(require("./default-sidebar"));
+var import_welcome_guide = __toESM(require("./welcome-guide"));
+function GlobalStylesSidebar() {
+  const {
+    shouldResetNavigation,
+    stylesPath,
+    showStylebook,
+    showListViewByDefault,
+    hasRevisions,
+    activeComplementaryArea
+  } = (0, import_data.useSelect)((select) => {
+    const { getActiveComplementaryArea } = select(import_interface.store);
+    const { getStylesPath, getShowStylebook } = (0, import_lock_unlock.unlock)(
+      select(import_store.store)
+    );
+    const _isVisualEditorMode = "visual" === select(import_store.store).getEditorMode();
+    const _showListViewByDefault = select(import_preferences.store).get(
+      "core",
+      "showListViewByDefault"
+    );
+    const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } = select(import_core_data.store);
+    const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+    const globalStyles = globalStylesId ? getEntityRecord("root", "globalStyles", globalStylesId) : void 0;
+    return {
+      stylesPath: getStylesPath(),
+      showStylebook: getShowStylebook(),
+      shouldResetNavigation: "edit-site/global-styles" !== getActiveComplementaryArea("core") || !_isVisualEditorMode,
+      showListViewByDefault: _showListViewByDefault,
+      hasRevisions: !!globalStyles?._links?.["version-history"]?.[0]?.count,
+      activeComplementaryArea: select(import_interface.store).getActiveComplementaryArea("core")
+    };
+  }, []);
+  const { setStylesPath, setShowStylebook, resetStylesNavigation } = (0, import_lock_unlock.unlock)(
+    (0, import_data.useDispatch)(import_store.store)
+  );
+  const isMobileViewport = (0, import_compose.useViewportMatch)("medium", "<");
+  const isRevisionsOpened = stylesPath.startsWith("/revisions") && !showStylebook;
+  const isRevisionsStyleBookOpened = stylesPath.startsWith("/revisions") && showStylebook;
+  const previousActiveArea = (0, import_compose.usePrevious)(activeComplementaryArea);
+  (0, import_element.useEffect)(() => {
+    if (activeComplementaryArea === "edit-site/global-styles" && previousActiveArea !== "edit-site/global-styles") {
+      resetStylesNavigation();
+    }
+  }, [activeComplementaryArea, previousActiveArea, resetStylesNavigation]);
+  (0, import_element.useEffect)(() => {
+    if (shouldResetNavigation) {
+      resetStylesNavigation();
+    }
+  }, [shouldResetNavigation, resetStylesNavigation]);
+  const { setIsListViewOpened } = (0, import_data.useDispatch)(import_store.store);
+  const toggleRevisions = () => {
+    setIsListViewOpened(false);
+    if (isRevisionsOpened || isRevisionsStyleBookOpened) {
+      setStylesPath("/");
+    } else {
+      setStylesPath("/revisions");
+    }
+  };
+  const toggleStyleBook = () => {
+    setIsListViewOpened(showStylebook && showListViewByDefault);
+    setShowStylebook(!showStylebook);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_default_sidebar.default,
+      {
+        className: "editor-global-styles-sidebar",
+        identifier: "edit-site/global-styles",
+        title: (0, import_i18n.__)("Styles"),
+        icon: import_icons.styles,
+        closeLabel: (0, import_i18n.__)("Close Styles"),
+        panelClassName: "editor-global-styles-sidebar__panel",
+        header: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_components.Flex,
+          {
+            className: "editor-global-styles-sidebar__header",
+            gap: 1,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "editor-global-styles-sidebar__header-title", children: (0, import_i18n.__)("Styles") }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                import_components.Flex,
+                {
+                  justify: "flex-end",
+                  gap: 1,
+                  className: "editor-global-styles-sidebar__header-actions",
+                  children: [
+                    !isMobileViewport && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_components.Button,
+                      {
+                        icon: import_icons.seen,
+                        label: (0, import_i18n.__)("Style Book"),
+                        isPressed: showStylebook,
+                        accessibleWhenDisabled: true,
+                        disabled: shouldResetNavigation,
+                        onClick: toggleStyleBook,
+                        size: "compact"
+                      }
+                    ) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_components.Button,
+                      {
+                        label: (0, import_i18n.__)("Revisions"),
+                        icon: import_icons.backup,
+                        onClick: toggleRevisions,
+                        accessibleWhenDisabled: true,
+                        disabled: !hasRevisions,
+                        isPressed: isRevisionsOpened || isRevisionsStyleBookOpened,
+                        size: "compact"
+                      }
+                    ) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_menu.GlobalStylesActionMenu,
+                      {
+                        onChangePath: setStylesPath
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_global_styles.default,
+          {
+            path: stylesPath,
+            onPathChange: setStylesPath
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_welcome_guide.default, {})
+  ] });
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/global-styles-sidebar/index.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { FlexItem, Flex, Button } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { styles, seen, backup } from '@wordpress/icons';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useEffect } from '@wordpress/element';\nimport { store as preferencesStore } from '@wordpress/preferences';\nimport { useViewportMatch, usePrevious } from '@wordpress/compose';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { store as interfaceStore } from '@wordpress/interface';\n\n/**\n * Internal dependencies\n */\nimport GlobalStylesUI from '../global-styles';\nimport { GlobalStylesActionMenu } from '../global-styles/menu';\nimport { store as editorStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\nimport DefaultSidebar from './default-sidebar';\nimport WelcomeGuideStyles from './welcome-guide';\n\nexport default function GlobalStylesSidebar() {\n\tconst {\n\t\tshouldResetNavigation,\n\t\tstylesPath,\n\t\tshowStylebook,\n\t\tshowListViewByDefault,\n\t\thasRevisions,\n\t\tactiveComplementaryArea,\n\t} = useSelect( ( select ) => {\n\t\tconst { getActiveComplementaryArea } = select( interfaceStore );\n\t\tconst { getStylesPath, getShowStylebook } = unlock(\n\t\t\tselect( editorStore )\n\t\t);\n\t\tconst _isVisualEditorMode =\n\t\t\t'visual' === select( editorStore ).getEditorMode();\n\t\tconst _showListViewByDefault = select( preferencesStore ).get(\n\t\t\t'core',\n\t\t\t'showListViewByDefault'\n\t\t);\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\tstylesPath: getStylesPath(),\n\t\t\tshowStylebook: getShowStylebook(),\n\t\t\tshouldResetNavigation:\n\t\t\t\t'edit-site/global-styles' !==\n\t\t\t\t\tgetActiveComplementaryArea( 'core' ) ||\n\t\t\t\t! _isVisualEditorMode,\n\t\t\tshowListViewByDefault: _showListViewByDefault,\n\t\t\thasRevisions:\n\t\t\t\t!! globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count,\n\t\t\tactiveComplementaryArea:\n\t\t\t\tselect( interfaceStore ).getActiveComplementaryArea( 'core' ),\n\t\t};\n\t}, [] );\n\tconst { setStylesPath, setShowStylebook, resetStylesNavigation } = unlock(\n\t\tuseDispatch( editorStore )\n\t);\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\n\t// Derive state from path and showStylebook\n\tconst isRevisionsOpened =\n\t\tstylesPath.startsWith( '/revisions' ) && ! showStylebook;\n\tconst isRevisionsStyleBookOpened =\n\t\tstylesPath.startsWith( '/revisions' ) && showStylebook;\n\n\tconst previousActiveArea = usePrevious( activeComplementaryArea );\n\n\t// Reset navigation when sidebar opens\n\tuseEffect( () => {\n\t\tif (\n\t\t\tactiveComplementaryArea === 'edit-site/global-styles' &&\n\t\t\tpreviousActiveArea !== 'edit-site/global-styles'\n\t\t) {\n\t\t\tresetStylesNavigation();\n\t\t}\n\t}, [ activeComplementaryArea, previousActiveArea, resetStylesNavigation ] );\n\n\tuseEffect( () => {\n\t\tif ( shouldResetNavigation ) {\n\t\t\tresetStylesNavigation();\n\t\t}\n\t}, [ shouldResetNavigation, resetStylesNavigation ] );\n\n\tconst { setIsListViewOpened } = useDispatch( editorStore );\n\n\tconst toggleRevisions = () => {\n\t\tsetIsListViewOpened( false );\n\t\tif ( isRevisionsOpened || isRevisionsStyleBookOpened ) {\n\t\t\t// Close revisions, go back to root\n\t\t\tsetStylesPath( '/' );\n\t\t} else {\n\t\t\t// Open revisions\n\t\t\tsetStylesPath( '/revisions' );\n\t\t}\n\t};\n\tconst toggleStyleBook = () => {\n\t\tsetIsListViewOpened( showStylebook && showListViewByDefault );\n\t\tsetShowStylebook( ! showStylebook );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<DefaultSidebar\n\t\t\t\tclassName=\"editor-global-styles-sidebar\"\n\t\t\t\tidentifier=\"edit-site/global-styles\"\n\t\t\t\ttitle={ __( 'Styles' ) }\n\t\t\t\ticon={ styles }\n\t\t\t\tcloseLabel={ __( 'Close Styles' ) }\n\t\t\t\tpanelClassName=\"editor-global-styles-sidebar__panel\"\n\t\t\t\theader={\n\t\t\t\t\t<Flex\n\t\t\t\t\t\tclassName=\"editor-global-styles-sidebar__header\"\n\t\t\t\t\t\tgap={ 1 }\n\t\t\t\t\t>\n\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t<h2 className=\"editor-global-styles-sidebar__header-title\">\n\t\t\t\t\t\t\t\t{ __( 'Styles' ) }\n\t\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\tjustify=\"flex-end\"\n\t\t\t\t\t\t\tgap={ 1 }\n\t\t\t\t\t\t\tclassName=\"editor-global-styles-sidebar__header-actions\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ ! isMobileViewport && (\n\t\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\ticon={ seen }\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Style Book' ) }\n\t\t\t\t\t\t\t\t\t\tisPressed={ showStylebook }\n\t\t\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\t\t\tdisabled={ shouldResetNavigation }\n\t\t\t\t\t\t\t\t\t\tonClick={ toggleStyleBook }\n\t\t\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Revisions' ) }\n\t\t\t\t\t\t\t\t\ticon={ backup }\n\t\t\t\t\t\t\t\t\tonClick={ toggleRevisions }\n\t\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\t\tdisabled={ ! hasRevisions }\n\t\t\t\t\t\t\t\t\tisPressed={\n\t\t\t\t\t\t\t\t\t\tisRevisionsOpened ||\n\t\t\t\t\t\t\t\t\t\tisRevisionsStyleBookOpened\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t<GlobalStylesActionMenu\n\t\t\t\t\t\t\t\tonChangePath={ setStylesPath }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</Flex>\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t<GlobalStylesUI\n\t\t\t\t\tpath={ stylesPath }\n\t\t\t\t\tonPathChange={ setStylesPath }\n\t\t\t\t/>\n\t\t\t</DefaultSidebar>\n\t\t\t<WelcomeGuideStyles />\n\t\t</>\n\t);\n}\n"],
+  "mappings": "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",
+  "names": ["interfaceStore", "editorStore", "preferencesStore", "coreStore", "DefaultSidebar", "GlobalStylesUI", "WelcomeGuideStyles"]
+}