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

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

@@ -0,0 +1,57 @@
+"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);
+
+// packages/editor/src/components/global-styles-renderer/index.js
+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,68 @@
+"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);
+
+// packages/editor/src/components/global-styles-sidebar/default-sidebar.js
+var default_sidebar_exports = {};
+__export(default_sidebar_exports, {
+  default: () => DefaultSidebar
+});
+module.exports = __toCommonJS(default_sidebar_exports);
+var import_interface = require("@wordpress/interface");
+var import_jsx_runtime = require("react/jsx-runtime");
+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;AAGA,uBAGO;AAeL;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,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,184 @@
+"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);
+
+// packages/editor/src/components/global-styles-sidebar/index.js
+var global_styles_sidebar_exports = {};
+__export(global_styles_sidebar_exports, {
+  default: () => GlobalStylesSidebar
+});
+module.exports = __toCommonJS(global_styles_sidebar_exports);
+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"));
+var import_jsx_runtime = require("react/jsx-runtime");
+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"]
+}

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

@@ -0,0 +1,39 @@
+"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);
+
+// packages/editor/src/components/global-styles-sidebar/welcome-guide-image.js
+var welcome_guide_image_exports = {};
+__export(welcome_guide_image_exports, {
+  default: () => WelcomeGuideImage
+});
+module.exports = __toCommonJS(welcome_guide_image_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+function WelcomeGuideImage({ nonAnimatedSrc, animatedSrc }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("picture", { className: "editor-welcome-guide__image", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "source",
+      {
+        srcSet: nonAnimatedSrc,
+        media: "(prefers-reduced-motion: reduce)"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: animatedSrc, width: "312", height: "240", alt: "" })
+  ] });
+}
+//# sourceMappingURL=welcome-guide-image.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/global-styles-sidebar/welcome-guide-image.js"],
+  "sourcesContent": ["export default function WelcomeGuideImage( { nonAnimatedSrc, animatedSrc } ) {\n\treturn (\n\t\t<picture className=\"editor-welcome-guide__image\">\n\t\t\t<source\n\t\t\t\tsrcSet={ nonAnimatedSrc }\n\t\t\t\tmedia=\"(prefers-reduced-motion: reduce)\"\n\t\t\t/>\n\t\t\t<img src={ animatedSrc } width=\"312\" height=\"240\" alt=\"\" />\n\t\t</picture>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEE;AAFa,SAAR,kBAAoC,EAAE,gBAAgB,YAAY,GAAI;AAC5E,SACC,6CAAC,aAAQ,WAAU,+BAClB;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,QAAS;AAAA,QACT,OAAM;AAAA;AAAA,IACP;AAAA,IACA,4CAAC,SAAI,KAAM,aAAc,OAAM,OAAM,QAAO,OAAM,KAAI,IAAG;AAAA,KAC1D;AAEF;",
+  "names": []
+}

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

@@ -0,0 +1,145 @@
+"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);
+
+// packages/editor/src/components/global-styles-sidebar/welcome-guide.js
+var welcome_guide_exports = {};
+__export(welcome_guide_exports, {
+  default: () => WelcomeGuideStyles
+});
+module.exports = __toCommonJS(welcome_guide_exports);
+var import_data = require("@wordpress/data");
+var import_components = require("@wordpress/components");
+var import_i18n = require("@wordpress/i18n");
+var import_preferences = require("@wordpress/preferences");
+var import_interface = require("@wordpress/interface");
+var import_welcome_guide_image = __toESM(require("./welcome-guide-image"));
+var import_jsx_runtime = require("react/jsx-runtime");
+function WelcomeGuideStyles() {
+  const { toggle } = (0, import_data.useDispatch)(import_preferences.store);
+  const { isActive, isStylesOpen } = (0, import_data.useSelect)((select) => {
+    const sidebar = select(import_interface.store).getActiveComplementaryArea("core");
+    return {
+      isActive: !!select(import_preferences.store).get(
+        "core/edit-site",
+        "welcomeGuideStyles"
+      ),
+      isStylesOpen: sidebar === "edit-site/global-styles"
+    };
+  }, []);
+  if (!isActive || !isStylesOpen) {
+    return null;
+  }
+  const welcomeLabel = (0, import_i18n.__)("Welcome to Styles");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.Guide,
+    {
+      className: "editor-welcome-guide guide-styles",
+      contentLabel: welcomeLabel,
+      finishButtonText: (0, import_i18n.__)("Get started"),
+      onFinish: () => toggle("core/edit-site", "welcomeGuideStyles"),
+      pages: [
+        {
+          image: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_welcome_guide_image.default,
+            {
+              nonAnimatedSrc: "https://s.w.org/images/block-editor/welcome-to-styles.svg?1",
+              animatedSrc: "https://s.w.org/images/block-editor/welcome-to-styles.gif?1"
+            }
+          ),
+          content: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { className: "editor-welcome-guide__heading", children: welcomeLabel }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "editor-welcome-guide__text", children: (0, import_i18n.__)(
+              "Tweak your site, or give it a whole new look! Get creative \u2014 how about a new color palette for your buttons, or choosing a new font? Take a look at what you can do here."
+            ) })
+          ] })
+        },
+        {
+          image: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_welcome_guide_image.default,
+            {
+              nonAnimatedSrc: "https://s.w.org/images/block-editor/set-the-design.svg?1",
+              animatedSrc: "https://s.w.org/images/block-editor/set-the-design.gif?1"
+            }
+          ),
+          content: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { className: "editor-welcome-guide__heading", children: (0, import_i18n.__)("Set the design") }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "editor-welcome-guide__text", children: (0, import_i18n.__)(
+              "You can customize your site as much as you like with different colors, typography, and layouts. Or if you prefer, just leave it up to your theme to handle!"
+            ) })
+          ] })
+        },
+        {
+          image: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_welcome_guide_image.default,
+            {
+              nonAnimatedSrc: "https://s.w.org/images/block-editor/personalize-blocks.svg?1",
+              animatedSrc: "https://s.w.org/images/block-editor/personalize-blocks.gif?1"
+            }
+          ),
+          content: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { className: "editor-welcome-guide__heading", children: (0, import_i18n.__)("Personalize blocks") }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "editor-welcome-guide__text", children: (0, import_i18n.__)(
+              "You can adjust your blocks to ensure a cohesive experience across your site \u2014 add your unique colors to a branded Button block, or adjust the Heading block to your preferred size."
+            ) })
+          ] })
+        },
+        {
+          image: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_welcome_guide_image.default,
+            {
+              nonAnimatedSrc: "https://s.w.org/images/block-editor/welcome-documentation.svg",
+              animatedSrc: "https://s.w.org/images/block-editor/welcome-documentation.gif"
+            }
+          ),
+          content: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { className: "editor-welcome-guide__heading", children: (0, import_i18n.__)("Learn more") }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "editor-welcome-guide__text", children: [
+              (0, import_i18n.__)(
+                "New to block themes and styling your site?"
+              ),
+              " ",
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_components.ExternalLink,
+                {
+                  href: (0, import_i18n.__)(
+                    "https://wordpress.org/documentation/article/styles-overview/"
+                  ),
+                  children: (0, import_i18n.__)(
+                    "Here\u2019s a detailed guide to learn how to make the most of it."
+                  )
+                }
+              )
+            ] })
+          ] })
+        }
+      ]
+    }
+  );
+}
+//# sourceMappingURL=welcome-guide.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/global-styles-sidebar/welcome-guide.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { ExternalLink, Guide } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { store as preferencesStore } from '@wordpress/preferences';\nimport { store as interfaceStore } from '@wordpress/interface';\n\n/**\n * Internal dependencies\n */\nimport WelcomeGuideImage from './welcome-guide-image';\n\nexport default function WelcomeGuideStyles() {\n\tconst { toggle } = useDispatch( preferencesStore );\n\n\tconst { isActive, isStylesOpen } = useSelect( ( select ) => {\n\t\tconst sidebar =\n\t\t\tselect( interfaceStore ).getActiveComplementaryArea( 'core' );\n\n\t\treturn {\n\t\t\tisActive: !! select( preferencesStore ).get(\n\t\t\t\t'core/edit-site',\n\t\t\t\t'welcomeGuideStyles'\n\t\t\t),\n\t\t\tisStylesOpen: sidebar === 'edit-site/global-styles',\n\t\t};\n\t}, [] );\n\n\tif ( ! isActive || ! isStylesOpen ) {\n\t\treturn null;\n\t}\n\n\tconst welcomeLabel = __( 'Welcome to Styles' );\n\n\treturn (\n\t\t<Guide\n\t\t\tclassName=\"editor-welcome-guide guide-styles\"\n\t\t\tcontentLabel={ welcomeLabel }\n\t\t\tfinishButtonText={ __( 'Get started' ) }\n\t\t\tonFinish={ () => toggle( 'core/edit-site', 'welcomeGuideStyles' ) }\n\t\t\tpages={ [\n\t\t\t\t{\n\t\t\t\t\timage: (\n\t\t\t\t\t\t<WelcomeGuideImage\n\t\t\t\t\t\t\tnonAnimatedSrc=\"https://s.w.org/images/block-editor/welcome-to-styles.svg?1\"\n\t\t\t\t\t\t\tanimatedSrc=\"https://s.w.org/images/block-editor/welcome-to-styles.gif?1\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t),\n\t\t\t\t\tcontent: (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<h1 className=\"editor-welcome-guide__heading\">\n\t\t\t\t\t\t\t\t{ welcomeLabel }\n\t\t\t\t\t\t\t</h1>\n\t\t\t\t\t\t\t<p className=\"editor-welcome-guide__text\">\n\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t'Tweak your site, or give it a whole new look! Get creative \u2014 how about a new color palette for your buttons, or choosing a new font? Take a look at what you can do here.'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</>\n\t\t\t\t\t),\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\timage: (\n\t\t\t\t\t\t<WelcomeGuideImage\n\t\t\t\t\t\t\tnonAnimatedSrc=\"https://s.w.org/images/block-editor/set-the-design.svg?1\"\n\t\t\t\t\t\t\tanimatedSrc=\"https://s.w.org/images/block-editor/set-the-design.gif?1\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t),\n\t\t\t\t\tcontent: (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<h1 className=\"editor-welcome-guide__heading\">\n\t\t\t\t\t\t\t\t{ __( 'Set the design' ) }\n\t\t\t\t\t\t\t</h1>\n\t\t\t\t\t\t\t<p className=\"editor-welcome-guide__text\">\n\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t'You can customize your site as much as you like with different colors, typography, and layouts. Or if you prefer, just leave it up to your theme to handle!'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</>\n\t\t\t\t\t),\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\timage: (\n\t\t\t\t\t\t<WelcomeGuideImage\n\t\t\t\t\t\t\tnonAnimatedSrc=\"https://s.w.org/images/block-editor/personalize-blocks.svg?1\"\n\t\t\t\t\t\t\tanimatedSrc=\"https://s.w.org/images/block-editor/personalize-blocks.gif?1\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t),\n\t\t\t\t\tcontent: (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<h1 className=\"editor-welcome-guide__heading\">\n\t\t\t\t\t\t\t\t{ __( 'Personalize blocks' ) }\n\t\t\t\t\t\t\t</h1>\n\t\t\t\t\t\t\t<p className=\"editor-welcome-guide__text\">\n\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t'You can adjust your blocks to ensure a cohesive experience across your site \u2014 add your unique colors to a branded Button block, or adjust the Heading block to your preferred size.'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</>\n\t\t\t\t\t),\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\timage: (\n\t\t\t\t\t\t<WelcomeGuideImage\n\t\t\t\t\t\t\tnonAnimatedSrc=\"https://s.w.org/images/block-editor/welcome-documentation.svg\"\n\t\t\t\t\t\t\tanimatedSrc=\"https://s.w.org/images/block-editor/welcome-documentation.gif\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t),\n\t\t\t\t\tcontent: (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<h1 className=\"editor-welcome-guide__heading\">\n\t\t\t\t\t\t\t\t{ __( 'Learn more' ) }\n\t\t\t\t\t\t\t</h1>\n\t\t\t\t\t\t\t<p className=\"editor-welcome-guide__text\">\n\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t'New to block themes and styling your site?'\n\t\t\t\t\t\t\t\t) }{ ' ' }\n\t\t\t\t\t\t\t\t<ExternalLink\n\t\t\t\t\t\t\t\t\thref={ __(\n\t\t\t\t\t\t\t\t\t\t'https://wordpress.org/documentation/article/styles-overview/'\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t\t'Here\u2019s a detailed guide to learn how to make the most of it.'\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</ExternalLink>\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</>\n\t\t\t\t\t),\n\t\t\t\t},\n\t\t\t] }\n\t\t/>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAuC;AACvC,wBAAoC;AACpC,kBAAmB;AACnB,yBAA0C;AAC1C,uBAAwC;AAKxC,iCAA8B;AAiCxB;AA/BS,SAAR,qBAAsC;AAC5C,QAAM,EAAE,OAAO,QAAI,yBAAa,mBAAAA,KAAiB;AAEjD,QAAM,EAAE,UAAU,aAAa,QAAI,uBAAW,CAAE,WAAY;AAC3D,UAAM,UACL,OAAQ,iBAAAC,KAAe,EAAE,2BAA4B,MAAO;AAE7D,WAAO;AAAA,MACN,UAAU,CAAC,CAAE,OAAQ,mBAAAD,KAAiB,EAAE;AAAA,QACvC;AAAA,QACA;AAAA,MACD;AAAA,MACA,cAAc,YAAY;AAAA,IAC3B;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,MAAK,CAAE,YAAY,CAAE,cAAe;AACnC,WAAO;AAAA,EACR;AAEA,QAAM,mBAAe,gBAAI,mBAAoB;AAE7C,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,cAAe;AAAA,MACf,sBAAmB,gBAAI,aAAc;AAAA,MACrC,UAAW,MAAM,OAAQ,kBAAkB,oBAAqB;AAAA,MAChE,OAAQ;AAAA,QACP;AAAA,UACC,OACC;AAAA,YAAC,2BAAAE;AAAA,YAAA;AAAA,cACA,gBAAe;AAAA,cACf,aAAY;AAAA;AAAA,UACb;AAAA,UAED,SACC,4EACC;AAAA,wDAAC,QAAG,WAAU,iCACX,wBACH;AAAA,YACA,4CAAC,OAAE,WAAU,8BACV;AAAA,cACD;AAAA,YACD,GACD;AAAA,aACD;AAAA,QAEF;AAAA,QACA;AAAA,UACC,OACC;AAAA,YAAC,2BAAAA;AAAA,YAAA;AAAA,cACA,gBAAe;AAAA,cACf,aAAY;AAAA;AAAA,UACb;AAAA,UAED,SACC,4EACC;AAAA,wDAAC,QAAG,WAAU,iCACX,8BAAI,gBAAiB,GACxB;AAAA,YACA,4CAAC,OAAE,WAAU,8BACV;AAAA,cACD;AAAA,YACD,GACD;AAAA,aACD;AAAA,QAEF;AAAA,QACA;AAAA,UACC,OACC;AAAA,YAAC,2BAAAA;AAAA,YAAA;AAAA,cACA,gBAAe;AAAA,cACf,aAAY;AAAA;AAAA,UACb;AAAA,UAED,SACC,4EACC;AAAA,wDAAC,QAAG,WAAU,iCACX,8BAAI,oBAAqB,GAC5B;AAAA,YACA,4CAAC,OAAE,WAAU,8BACV;AAAA,cACD;AAAA,YACD,GACD;AAAA,aACD;AAAA,QAEF;AAAA,QACA;AAAA,UACC,OACC;AAAA,YAAC,2BAAAA;AAAA,YAAA;AAAA,cACA,gBAAe;AAAA,cACf,aAAY;AAAA;AAAA,UACb;AAAA,UAED,SACC,4EACC;AAAA,wDAAC,QAAG,WAAU,iCACX,8BAAI,YAAa,GACpB;AAAA,YACA,6CAAC,OAAE,WAAU,8BACV;AAAA;AAAA,gBACD;AAAA,cACD;AAAA,cAAK;AAAA,cACL;AAAA,gBAAC;AAAA;AAAA,kBACA,UAAO;AAAA,oBACN;AAAA,kBACD;AAAA,kBAEE;AAAA,oBACD;AAAA,kBACD;AAAA;AAAA,cACD;AAAA,eACD;AAAA,aACD;AAAA,QAEF;AAAA,MACD;AAAA;AAAA,EACD;AAEF;",
+  "names": ["preferencesStore", "interfaceStore", "WelcomeGuideImage"]
+}

package/build/components/header/back-button.js

@@ -16,22 +16,24 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/editor/src/components/header/back-button.js
 var back_button_exports = {};
 __export(back_button_exports, {
   default: () => back_button_default,
   useHasBackButton: () => useHasBackButton
 });
 module.exports = __toCommonJS(back_button_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
 var import_components = require("@wordpress/components");
-const slotName = "__experimentalMainDashboardButton";
-const useHasBackButton = () => {
+var import_jsx_runtime = require("react/jsx-runtime");
+var slotName = "__experimentalMainDashboardButton";
+var useHasBackButton = () => {
   const fills = (0, import_components.__experimentalUseSlotFills)(slotName);
   return Boolean(fills && fills.length);
 };
-const { Fill, Slot } = (0, import_components.createSlotFill)(slotName);
-const BackButton = Fill;
-const BackButtonSlot = () => {
+var { Fill, Slot } = (0, import_components.createSlotFill)(slotName);
+var BackButton = Fill;
+var BackButtonSlot = () => {
   const fills = (0, import_components.__experimentalUseSlotFills)(slotName);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     Slot,

package/build/components/header/back-button.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/components/header/back-button.js"],
   "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalUseSlotFills as useSlotFills,\n\tcreateSlotFill,\n} from '@wordpress/components';\n\n// Keeping an old name for backward compatibility.\nconst slotName = '__experimentalMainDashboardButton';\n\nexport const useHasBackButton = () => {\n\tconst fills = useSlotFills( slotName );\n\treturn Boolean( fills && fills.length );\n};\n\nconst { Fill, Slot } = createSlotFill( slotName );\n\nconst BackButton = Fill;\nconst BackButtonSlot = () => {\n\tconst fills = useSlotFills( slotName );\n\n\treturn (\n\t\t<Slot\n\t\t\tbubblesVirtually\n\t\t\tfillProps={ { length: ! fills ? 0 : fills.length } }\n\t\t/>\n\t);\n};\nBackButton.Slot = BackButtonSlot;\n\nexport default BackButton;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBE;AApBF,wBAGO;AAGP,MAAM,WAAW;AAEV,MAAM,mBAAmB,MAAM;AACrC,QAAM,YAAQ,kBAAAA,4BAAc,QAAS;AACrC,SAAO,QAAS,SAAS,MAAM,MAAO;AACvC;AAEA,MAAM,EAAE,MAAM,KAAK,QAAI,kCAAgB,QAAS;AAEhD,MAAM,aAAa;AACnB,MAAM,iBAAiB,MAAM;AAC5B,QAAM,YAAQ,kBAAAA,4BAAc,QAAS;AAErC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,kBAAgB;AAAA,MAChB,WAAY,EAAE,QAAQ,CAAE,QAAQ,IAAI,MAAM,OAAO;AAAA;AAAA,EAClD;AAEF;AACA,WAAW,OAAO;AAElB,IAAO,sBAAQ;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAGO;AAiBL;AAdF,IAAM,WAAW;AAEV,IAAM,mBAAmB,MAAM;AACrC,QAAM,YAAQ,kBAAAA,4BAAc,QAAS;AACrC,SAAO,QAAS,SAAS,MAAM,MAAO;AACvC;AAEA,IAAM,EAAE,MAAM,KAAK,QAAI,kCAAgB,QAAS;AAEhD,IAAM,aAAa;AACnB,IAAM,iBAAiB,MAAM;AAC5B,QAAM,YAAQ,kBAAAA,4BAAc,QAAS;AAErC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,kBAAgB;AAAA,MAChB,WAAY,EAAE,QAAQ,CAAE,QAAQ,IAAI,MAAM,OAAO;AAAA;AAAA,EAClD;AAEF;AACA,WAAW,OAAO;AAElB,IAAO,sBAAQ;",
   "names": ["useSlotFills"]
 }