@wordpress/editor 14.33.5 → 14.34.1-next.2f1c7c01b.0

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

@@ -0,0 +1,113 @@
+// packages/editor/src/components/global-styles/index.js
+import { store as coreStore } from "@wordpress/core-data";
+import { useSelect } from "@wordpress/data";
+import { useMemo } from "@wordpress/element";
+import { GlobalStylesUI } from "@wordpress/global-styles-ui";
+import { uploadMedia } from "@wordpress/media-utils";
+import { store as editorStore } from "../../store";
+import { GlobalStylesBlockLink } from "./block-link";
+import { useGlobalStyles } from "./hooks";
+import { useGlobalStyles as useGlobalStyles2, useStyle, useSetting } from "./hooks";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function useServerData() {
+  const {
+    styles,
+    __unstableResolvedAssets,
+    colors,
+    gradients,
+    __experimentalDiscussionSettings,
+    mediaUploadHandler,
+    fontLibraryEnabled
+  } = useSelect((select) => {
+    const { getEditorSettings } = select(editorStore);
+    const { canUser } = select(coreStore);
+    const editorSettings = getEditorSettings();
+    const canUserUploadMedia = canUser("create", {
+      kind: "root",
+      name: "media"
+    });
+    return {
+      styles: editorSettings?.styles || [],
+      __unstableResolvedAssets: editorSettings?.__unstableResolvedAssets || {},
+      colors: editorSettings?.colors || [],
+      gradients: editorSettings?.gradients || [],
+      __experimentalDiscussionSettings: editorSettings?.__experimentalDiscussionSettings,
+      mediaUploadHandler: canUserUploadMedia ? uploadMedia : void 0,
+      fontLibraryEnabled: editorSettings?.fontLibraryEnabled ?? true
+    };
+  }, []);
+  const serverCSS = useMemo(() => {
+    if (!styles) {
+      return [];
+    }
+    return styles.filter((style) => !style.isGlobalStyles);
+  }, [styles]);
+  const serverSettings = useMemo(() => {
+    return {
+      __unstableResolvedAssets,
+      settings: {
+        color: {
+          palette: {
+            theme: colors
+          },
+          gradients: {
+            theme: gradients
+          },
+          duotone: {
+            theme: []
+          }
+        }
+      },
+      __experimentalDiscussionSettings,
+      mediaUpload: mediaUploadHandler
+    };
+  }, [
+    __unstableResolvedAssets,
+    colors,
+    gradients,
+    __experimentalDiscussionSettings,
+    mediaUploadHandler
+  ]);
+  return { serverCSS, serverSettings, fontLibraryEnabled };
+}
+function GlobalStylesUIWrapper({ path, onPathChange }) {
+  const {
+    user: userConfig,
+    base: baseConfig,
+    setUser: setUserConfig,
+    isReady
+  } = useGlobalStyles();
+  const { serverCSS, serverSettings, fontLibraryEnabled } = useServerData();
+  if (!isReady) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      GlobalStylesUI,
+      {
+        value: userConfig,
+        baseValue: baseConfig || {},
+        onChange: setUserConfig,
+        path,
+        onPathChange,
+        fontLibraryEnabled,
+        serverCSS,
+        serverSettings
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      GlobalStylesBlockLink,
+      {
+        path,
+        onPathChange
+      }
+    )
+  ] });
+}
+export {
+  GlobalStylesUIWrapper as default,
+  useGlobalStyles2 as useGlobalStyles,
+  useSetting,
+  useStyle
+};
+//# sourceMappingURL=index.js.map

package/build-module/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": ";AAGA,SAAS,SAAS,iBAAiB;AACnC,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AACxB,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAK5B,SAAS,SAAS,mBAAmB;AACrC,SAAS,6BAA6B;AACtC,SAAS,uBAAuB;AA8GhC,SAAS,mBAAAA,kBAAiB,UAAU,kBAAkB;AAnBpD,mBACC,KADD;AAtFF,SAAS,gBAAgB;AACxB,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI,UAAW,CAAE,WAAY;AAC5B,UAAM,EAAE,kBAAkB,IAAI,OAAQ,WAAY;AAClD,UAAM,EAAE,QAAQ,IAAI,OAAQ,SAAU;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,cAAc;AAAA,MACvD,oBAAoB,gBAAgB,sBAAsB;AAAA,IAC3D;AAAA,EACD,GAAG,CAAC,CAAE;AAGN,QAAM,YAAY,QAAS,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,iBAAiB,QAAS,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,IAAI,gBAAgB;AACpB,QAAM,EAAE,WAAW,gBAAgB,mBAAmB,IAAI,cAAc;AAGxE,MAAK,CAAE,SAAU;AAChB,WAAO;AAAA,EACR;AAEA,SACC,iCACC;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": ["useGlobalStyles"]
+}

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

@@ -0,0 +1,72 @@
+// packages/editor/src/components/global-styles/menu.js
+import { DropdownMenu, MenuGroup, MenuItem } from "@wordpress/components";
+import { useSelect, useDispatch } from "@wordpress/data";
+import { __ } from "@wordpress/i18n";
+import { store as preferencesStore } from "@wordpress/preferences";
+import { moreVertical } from "@wordpress/icons";
+import { store as coreStore } from "@wordpress/core-data";
+import { useGlobalStyles } from "./hooks";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function GlobalStylesActionMenu({
+  hideWelcomeGuide = false,
+  onChangePath
+}) {
+  const { user, setUser } = useGlobalStyles();
+  const canReset = !!user && (Object.keys(user?.styles ?? {}).length > 0 || Object.keys(user?.settings ?? {}).length > 0);
+  const onReset = () => {
+    setUser({ styles: {}, settings: {} });
+  };
+  const { toggle } = useDispatch(preferencesStore);
+  const { canEditCSS } = useSelect((select) => {
+    const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } = select(coreStore);
+    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__ */ jsx(
+    DropdownMenu,
+    {
+      icon: moreVertical,
+      label: __("More"),
+      toggleProps: { size: "compact" },
+      children: ({ onClose }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(MenuGroup, { children: [
+          canEditCSS && /* @__PURE__ */ jsx(MenuItem, { onClick: loadCustomCSS, children: __("Additional CSS") }),
+          !hideWelcomeGuide && /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              onClick: () => {
+                toggle(
+                  "core/edit-site",
+                  "welcomeGuideStyles"
+                );
+                onClose();
+              },
+              children: __("Welcome Guide")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(MenuGroup, { children: /* @__PURE__ */ jsx(
+          MenuItem,
+          {
+            onClick: () => {
+              onReset();
+              onClose();
+            },
+            disabled: !canReset,
+            children: __("Reset styles")
+          }
+        ) })
+      ] })
+    }
+  );
+}
+export {
+  GlobalStylesActionMenu
+};
+//# sourceMappingURL=menu.js.map

package/build-module/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": ";AAGA,SAAS,cAAc,WAAW,gBAAgB;AAClD,SAAS,WAAW,mBAAmB;AACvC,SAAS,UAAU;AACnB,SAAS,SAAS,wBAAwB;AAC1C,SAAS,oBAAoB;AAC7B,SAAS,SAAS,iBAAiB;AAKnC,SAAS,uBAAuB;AAmD5B,mBAGG,KAFF,YADD;AAzCG,SAAS,uBAAwB;AAAA,EACvC,mBAAmB;AAAA,EACnB;AACD,GAAI;AACH,QAAM,EAAE,MAAM,QAAQ,IAAI,gBAAgB;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,IAAI,YAAa,gBAAiB;AACjD,QAAM,EAAE,WAAW,IAAI,UAAW,CAAE,WAAY;AAC/C,UAAM,EAAE,iBAAiB,uCAAuC,IAC/D,OAAQ,SAAU;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,OAAQ,GAAI,MAAO;AAAA,MACnB,aAAc,EAAE,MAAM,UAAU;AAAA,MAE9B,WAAE,EAAE,QAAQ,MACb,iCACC;AAAA,6BAAC,aACE;AAAA,wBACD,oBAAC,YAAS,SAAU,eACjB,aAAI,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,aAAI,eAAgB;AAAA;AAAA,UACvB;AAAA,WAEF;AAAA,QACA,oBAAC,aACA;AAAA,UAAC;AAAA;AAAA,YACA,SAAU,MAAM;AACf,sBAAQ;AACR,sBAAQ;AAAA,YACT;AAAA,YACA,UAAW,CAAE;AAAA,YAEX,aAAI,cAAe;AAAA;AAAA,QACtB,GACD;AAAA,SACD;AAAA;AAAA,EAEF;AAEF;",
+  "names": []
+}

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

@@ -1,35 +1,11 @@
-import { jsx } from "react/jsx-runtime";
-import deepmerge from "deepmerge";
-import { isPlainObject } from "is-plain-object";
+// packages/editor/src/components/global-styles-provider/index.js
 import { privateApis as blockEditorPrivateApis } from "@wordpress/block-editor";
 import { store as coreStore } from "@wordpress/core-data";
 import { useSelect, useDispatch } from "@wordpress/data";
 import { useMemo, useCallback } from "@wordpress/element";
+import { mergeGlobalStyles } from "@wordpress/global-styles-engine";
 import { unlock } from "../../lock-unlock";
-const { GlobalStylesContext, cleanEmptyObject } = unlock(
-  blockEditorPrivateApis
-);
-function mergeBaseAndUserConfigs(base, user) {
-  return deepmerge(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: 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;
-    }
-  });
-}
+var { cleanEmptyObject } = unlock(blockEditorPrivateApis);
 function useGlobalStylesUserConfig() {
   const { globalStylesId, isReady, settings, styles, _links } = useSelect(
     (select) => {
@@ -154,7 +130,7 @@ function useGlobalStylesContext() {
     if (!baseConfig || !userConfig) {
       return {};
     }
-    return mergeBaseAndUserConfigs(baseConfig, userConfig);
+    return mergeGlobalStyles(baseConfig, userConfig);
   }, [userConfig, baseConfig]);
   const context = useMemo(() => {
     return {
@@ -174,16 +150,7 @@ function useGlobalStylesContext() {
   ]);
   return context;
 }
-function GlobalStylesProvider({ children }) {
-  const context = useGlobalStylesContext();
-  if (!context.isReady) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(GlobalStylesContext.Provider, { value: context, children });
-}
 export {
-  GlobalStylesProvider,
-  mergeBaseAndUserConfigs,
   useGlobalStylesContext
 };
 //# sourceMappingURL=index.js.map

package/build-module/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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",
+  "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": ["getEditedEntityRecord"]
 }

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

@@ -0,0 +1,32 @@
+// packages/editor/src/components/global-styles-renderer/index.js
+import { useEffect } from "@wordpress/element";
+import { useSelect, useDispatch } from "@wordpress/data";
+import { store as editorStore } from "../../store";
+import { useGlobalStylesOutput } from "../../hooks/use-global-styles-output";
+function useGlobalStylesRenderer(disableRootPadding) {
+  const [styles, settings] = useGlobalStylesOutput(disableRootPadding);
+  const { getEditorSettings } = useSelect(editorStore);
+  const { updateEditorSettings } = useDispatch(editorStore);
+  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;
+}
+export {
+  GlobalStylesRenderer
+};
+//# sourceMappingURL=index.js.map

package/build-module/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": ";AAGA,SAAS,iBAAiB;AAC1B,SAAS,WAAW,mBAAmB;AAKvC,SAAS,SAAS,mBAAmB;AACrC,SAAS,6BAA6B;AAEtC,SAAS,wBAAyB,oBAAqB;AACtD,QAAM,CAAE,QAAQ,QAAS,IAAI,sBAAuB,kBAAmB;AACvE,QAAM,EAAE,kBAAkB,IAAI,UAAW,WAAY;AACrD,QAAM,EAAE,qBAAqB,IAAI,YAAa,WAAY;AAE1D,YAAW,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": []
+}

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

@@ -0,0 +1,50 @@
+// packages/editor/src/components/global-styles-sidebar/default-sidebar.js
+import {
+  ComplementaryArea,
+  ComplementaryAreaMoreMenuItem
+} from "@wordpress/interface";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function DefaultSidebar({
+  className,
+  identifier,
+  title,
+  icon,
+  children,
+  closeLabel,
+  header,
+  headerClassName,
+  panelClassName,
+  isActiveByDefault
+}) {
+  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
+      }
+    )
+  ] });
+}
+export {
+  DefaultSidebar as default
+};
+//# sourceMappingURL=default-sidebar.js.map

package/build-module/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": ";AAGA;AAAA,EACC;AAAA,EACA;AAAA,OACM;AAeL,mBACC,KADD;AAba,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

@@ -0,0 +1,153 @@
+// packages/editor/src/components/global-styles-sidebar/index.js
+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 } from "@wordpress/element";
+import { store as preferencesStore } from "@wordpress/preferences";
+import { useViewportMatch, usePrevious } from "@wordpress/compose";
+import { store as coreStore } from "@wordpress/core-data";
+import { store as interfaceStore } from "@wordpress/interface";
+import GlobalStylesUI from "../global-styles";
+import { GlobalStylesActionMenu } from "../global-styles/menu";
+import { store as editorStore } from "../../store";
+import { unlock } from "../../lock-unlock";
+import DefaultSidebar from "./default-sidebar";
+import WelcomeGuideStyles from "./welcome-guide";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function GlobalStylesSidebar() {
+  const {
+    shouldResetNavigation,
+    stylesPath,
+    showStylebook,
+    showListViewByDefault,
+    hasRevisions,
+    activeComplementaryArea
+  } = useSelect((select) => {
+    const { getActiveComplementaryArea } = select(interfaceStore);
+    const { getStylesPath, getShowStylebook } = unlock(
+      select(editorStore)
+    );
+    const _isVisualEditorMode = "visual" === select(editorStore).getEditorMode();
+    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 {
+      stylesPath: getStylesPath(),
+      showStylebook: getShowStylebook(),
+      shouldResetNavigation: "edit-site/global-styles" !== getActiveComplementaryArea("core") || !_isVisualEditorMode,
+      showListViewByDefault: _showListViewByDefault,
+      hasRevisions: !!globalStyles?._links?.["version-history"]?.[0]?.count,
+      activeComplementaryArea: select(interfaceStore).getActiveComplementaryArea("core")
+    };
+  }, []);
+  const { setStylesPath, setShowStylebook, resetStylesNavigation } = unlock(
+    useDispatch(editorStore)
+  );
+  const isMobileViewport = useViewportMatch("medium", "<");
+  const isRevisionsOpened = stylesPath.startsWith("/revisions") && !showStylebook;
+  const isRevisionsStyleBookOpened = stylesPath.startsWith("/revisions") && showStylebook;
+  const previousActiveArea = usePrevious(activeComplementaryArea);
+  useEffect(() => {
+    if (activeComplementaryArea === "edit-site/global-styles" && previousActiveArea !== "edit-site/global-styles") {
+      resetStylesNavigation();
+    }
+  }, [activeComplementaryArea, previousActiveArea, resetStylesNavigation]);
+  useEffect(() => {
+    if (shouldResetNavigation) {
+      resetStylesNavigation();
+    }
+  }, [shouldResetNavigation, resetStylesNavigation]);
+  const { setIsListViewOpened } = useDispatch(editorStore);
+  const toggleRevisions = () => {
+    setIsListViewOpened(false);
+    if (isRevisionsOpened || isRevisionsStyleBookOpened) {
+      setStylesPath("/");
+    } else {
+      setStylesPath("/revisions");
+    }
+  };
+  const toggleStyleBook = () => {
+    setIsListViewOpened(showStylebook && showListViewByDefault);
+    setShowStylebook(!showStylebook);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      DefaultSidebar,
+      {
+        className: "editor-global-styles-sidebar",
+        identifier: "edit-site/global-styles",
+        title: __("Styles"),
+        icon: styles,
+        closeLabel: __("Close Styles"),
+        panelClassName: "editor-global-styles-sidebar__panel",
+        header: /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            className: "editor-global-styles-sidebar__header",
+            gap: 1,
+            children: [
+              /* @__PURE__ */ jsx(FlexItem, { children: /* @__PURE__ */ jsx("h2", { className: "editor-global-styles-sidebar__header-title", children: __("Styles") }) }),
+              /* @__PURE__ */ jsxs(
+                Flex,
+                {
+                  justify: "flex-end",
+                  gap: 1,
+                  className: "editor-global-styles-sidebar__header-actions",
+                  children: [
+                    !isMobileViewport && /* @__PURE__ */ jsx(FlexItem, { children: /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        icon: seen,
+                        label: __("Style Book"),
+                        isPressed: showStylebook,
+                        accessibleWhenDisabled: true,
+                        disabled: shouldResetNavigation,
+                        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(
+                      GlobalStylesActionMenu,
+                      {
+                        onChangePath: setStylesPath
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        children: /* @__PURE__ */ jsx(
+          GlobalStylesUI,
+          {
+            path: stylesPath,
+            onPathChange: setStylesPath
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(WelcomeGuideStyles, {})
+  ] });
+}
+export {
+  GlobalStylesSidebar as default
+};
+//# sourceMappingURL=index.js.map

package/build-module/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": ";AAGA,SAAS,UAAU,MAAM,cAAc;AACvC,SAAS,UAAU;AACnB,SAAS,QAAQ,MAAM,cAAc;AACrC,SAAS,WAAW,mBAAmB;AACvC,SAAS,iBAAiB;AAC1B,SAAS,SAAS,wBAAwB;AAC1C,SAAS,kBAAkB,mBAAmB;AAC9C,SAAS,SAAS,iBAAiB;AACnC,SAAS,SAAS,sBAAsB;AAKxC,OAAO,oBAAoB;AAC3B,SAAS,8BAA8B;AACvC,SAAS,SAAS,mBAAmB;AACrC,SAAS,cAAc;AACvB,OAAO,oBAAoB;AAC3B,OAAO,wBAAwB;AA0F7B,mBAcK,KAID,YAlBJ;AAxFa,SAAR,sBAAuC;AAC7C,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI,UAAW,CAAE,WAAY;AAC5B,UAAM,EAAE,2BAA2B,IAAI,OAAQ,cAAe;AAC9D,UAAM,EAAE,eAAe,iBAAiB,IAAI;AAAA,MAC3C,OAAQ,WAAY;AAAA,IACrB;AACA,UAAM,sBACL,aAAa,OAAQ,WAAY,EAAE,cAAc;AAClD,UAAM,yBAAyB,OAAQ,gBAAiB,EAAE;AAAA,MACzD;AAAA,MACA;AAAA,IACD;AACA,UAAM,EAAE,iBAAiB,uCAAuC,IAC/D,OAAQ,SAAU;AAEnB,UAAM,iBAAiB,uCAAuC;AAC9D,UAAM,eAAe,iBAClB,gBAAiB,QAAQ,gBAAgB,cAAe,IACxD;AAEH,WAAO;AAAA,MACN,YAAY,cAAc;AAAA,MAC1B,eAAe,iBAAiB;AAAA,MAChC,uBACC,8BACC,2BAA4B,MAAO,KACpC,CAAE;AAAA,MACH,uBAAuB;AAAA,MACvB,cACC,CAAC,CAAE,cAAc,SAAU,iBAAkB,IAAK,CAAE,GAAG;AAAA,MACxD,yBACC,OAAQ,cAAe,EAAE,2BAA4B,MAAO;AAAA,IAC9D;AAAA,EACD,GAAG,CAAC,CAAE;AACN,QAAM,EAAE,eAAe,kBAAkB,sBAAsB,IAAI;AAAA,IAClE,YAAa,WAAY;AAAA,EAC1B;AACA,QAAM,mBAAmB,iBAAkB,UAAU,GAAI;AAGzD,QAAM,oBACL,WAAW,WAAY,YAAa,KAAK,CAAE;AAC5C,QAAM,6BACL,WAAW,WAAY,YAAa,KAAK;AAE1C,QAAM,qBAAqB,YAAa,uBAAwB;AAGhE,YAAW,MAAM;AAChB,QACC,4BAA4B,6BAC5B,uBAAuB,2BACtB;AACD,4BAAsB;AAAA,IACvB;AAAA,EACD,GAAG,CAAE,yBAAyB,oBAAoB,qBAAsB,CAAE;AAE1E,YAAW,MAAM;AAChB,QAAK,uBAAwB;AAC5B,4BAAsB;AAAA,IACvB;AAAA,EACD,GAAG,CAAE,uBAAuB,qBAAsB,CAAE;AAEpD,QAAM,EAAE,oBAAoB,IAAI,YAAa,WAAY;AAEzD,QAAM,kBAAkB,MAAM;AAC7B,wBAAqB,KAAM;AAC3B,QAAK,qBAAqB,4BAA6B;AAEtD,oBAAe,GAAI;AAAA,IACpB,OAAO;AAEN,oBAAe,YAAa;AAAA,IAC7B;AAAA,EACD;AACA,QAAM,kBAAkB,MAAM;AAC7B,wBAAqB,iBAAiB,qBAAsB;AAC5D,qBAAkB,CAAE,aAAc;AAAA,EACnC;AAEA,SACC,iCACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,YAAW;AAAA,QACX,OAAQ,GAAI,QAAS;AAAA,QACrB,MAAO;AAAA,QACP,YAAa,GAAI,cAAe;AAAA,QAChC,gBAAe;AAAA,QACf,QACC;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,KAAM;AAAA,YAEN;AAAA,kCAAC,YACA,8BAAC,QAAG,WAAU,8CACX,aAAI,QAAS,GAChB,GACD;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACA,SAAQ;AAAA,kBACR,KAAM;AAAA,kBACN,WAAU;AAAA,kBAER;AAAA,qBAAE,oBACH,oBAAC,YACA;AAAA,sBAAC;AAAA;AAAA,wBACA,MAAO;AAAA,wBACP,OAAQ,GAAI,YAAa;AAAA,wBACzB,WAAY;AAAA,wBACZ,wBAAsB;AAAA,wBACtB,UAAW;AAAA,wBACX,SAAU;AAAA,wBACV,MAAK;AAAA;AAAA,oBACN,GACD;AAAA,oBAED,oBAAC,YACA;AAAA,sBAAC;AAAA;AAAA,wBACA,OAAQ,GAAI,WAAY;AAAA,wBACxB,MAAO;AAAA,wBACP,SAAU;AAAA,wBACV,wBAAsB;AAAA,wBACtB,UAAW,CAAE;AAAA,wBACb,WACC,qBACA;AAAA,wBAED,MAAK;AAAA;AAAA,oBACN,GACD;AAAA,oBACA;AAAA,sBAAC;AAAA;AAAA,wBACA,cAAe;AAAA;AAAA,oBAChB;AAAA;AAAA;AAAA,cACD;AAAA;AAAA;AAAA,QACD;AAAA,QAGD;AAAA,UAAC;AAAA;AAAA,YACA,MAAO;AAAA,YACP,cAAe;AAAA;AAAA,QAChB;AAAA;AAAA,IACD;AAAA,IACA,oBAAC,sBAAmB;AAAA,KACrB;AAEF;",
+  "names": []
+}

package/build-module/components/global-styles-sidebar/welcome-guide-image.js

@@ -0,0 +1,18 @@
+// packages/editor/src/components/global-styles-sidebar/welcome-guide-image.js
+import { jsx, jsxs } from "react/jsx-runtime";
+function WelcomeGuideImage({ nonAnimatedSrc, animatedSrc }) {
+  return /* @__PURE__ */ jsxs("picture", { className: "editor-welcome-guide__image", children: [
+    /* @__PURE__ */ jsx(
+      "source",
+      {
+        srcSet: nonAnimatedSrc,
+        media: "(prefers-reduced-motion: reduce)"
+      }
+    ),
+    /* @__PURE__ */ jsx("img", { src: animatedSrc, width: "312", height: "240", alt: "" })
+  ] });
+}
+export {
+  WelcomeGuideImage as default
+};
+//# sourceMappingURL=welcome-guide-image.js.map