@wordpress/edit-site 6.32.0 → 6.32.1-next.b8c8708f3.0

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

@@ -1,249 +1,253 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ui_exports = {};
+__export(ui_exports, {
+  GlobalStylesMenuSlot: () => GlobalStylesMenuSlot,
+  default: () => ui_default
 });
-exports.default = exports.GlobalStylesMenuSlot = void 0;
-var _components = require("@wordpress/components");
-var _blocks = require("@wordpress/blocks");
-var _data = require("@wordpress/data");
-var _blockEditor = require("@wordpress/block-editor");
-var _i18n = require("@wordpress/i18n");
-var _preferences = require("@wordpress/preferences");
-var _icons = require("@wordpress/icons");
-var _coreData = require("@wordpress/core-data");
-var _element = require("@wordpress/element");
-var _compose = require("@wordpress/compose");
-var _screenRoot = _interopRequireDefault(require("./screen-root"));
-var _screenBlockList = _interopRequireWildcard(require("./screen-block-list"));
-var _screenBlock = _interopRequireDefault(require("./screen-block"));
-var _screenTypography = _interopRequireDefault(require("./screen-typography"));
-var _screenTypographyElement = _interopRequireDefault(require("./screen-typography-element"));
-var _fontSize = _interopRequireDefault(require("./font-sizes/font-size"));
-var _fontSizes = _interopRequireDefault(require("./font-sizes/font-sizes"));
-var _screenColors = _interopRequireDefault(require("./screen-colors"));
-var _screenColorPalette = _interopRequireDefault(require("./screen-color-palette"));
-var _screenBackground = _interopRequireDefault(require("./screen-background"));
-var _screenShadows = require("./screen-shadows");
-var _screenLayout = _interopRequireDefault(require("./screen-layout"));
-var _screenStyleVariations = _interopRequireDefault(require("./screen-style-variations"));
-var _styleBook = _interopRequireDefault(require("../style-book"));
-var _screenCss = _interopRequireDefault(require("./screen-css"));
-var _screenRevisions = _interopRequireDefault(require("./screen-revisions"));
-var _lockUnlock = require("../../lock-unlock");
-var _store = require("../../store");
-var _constants = require("../style-book/constants");
-var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-const SLOT_FILL_NAME = 'GlobalStylesMenu';
-const {
-  useGlobalStylesReset
-} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
-const {
-  Slot: GlobalStylesMenuSlot,
-  Fill: GlobalStylesMenuFill
-} = (0, _components.createSlotFill)(SLOT_FILL_NAME);
-exports.GlobalStylesMenuSlot = GlobalStylesMenuSlot;
+module.exports = __toCommonJS(ui_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_components = require("@wordpress/components");
+var import_blocks = require("@wordpress/blocks");
+var import_data = require("@wordpress/data");
+var import_block_editor = require("@wordpress/block-editor");
+var import_i18n = require("@wordpress/i18n");
+var import_preferences = require("@wordpress/preferences");
+var import_icons = require("@wordpress/icons");
+var import_core_data = require("@wordpress/core-data");
+var import_element = require("@wordpress/element");
+var import_compose = require("@wordpress/compose");
+var import_screen_root = __toESM(require("./screen-root"));
+var import_screen_block_list = __toESM(require("./screen-block-list"));
+var import_screen_block = __toESM(require("./screen-block"));
+var import_screen_typography = __toESM(require("./screen-typography"));
+var import_screen_typography_element = __toESM(require("./screen-typography-element"));
+var import_font_size = __toESM(require("./font-sizes/font-size"));
+var import_font_sizes = __toESM(require("./font-sizes/font-sizes"));
+var import_screen_colors = __toESM(require("./screen-colors"));
+var import_screen_color_palette = __toESM(require("./screen-color-palette"));
+var import_screen_background = __toESM(require("./screen-background"));
+var import_screen_shadows = require("./screen-shadows");
+var import_screen_layout = __toESM(require("./screen-layout"));
+var import_screen_style_variations = __toESM(require("./screen-style-variations"));
+var import_style_book = __toESM(require("../style-book"));
+var import_screen_css = __toESM(require("./screen-css"));
+var import_screen_revisions = __toESM(require("./screen-revisions"));
+var import_lock_unlock = require("../../lock-unlock");
+var import_store = require("../../store");
+var import_constants = require("../style-book/constants");
+const SLOT_FILL_NAME = "GlobalStylesMenu";
+const { useGlobalStylesReset } = (0, import_lock_unlock.unlock)(import_block_editor.privateApis);
+const { Slot: GlobalStylesMenuSlot, Fill: GlobalStylesMenuFill } = (0, import_components.createSlotFill)(SLOT_FILL_NAME);
 function GlobalStylesActionMenu() {
   const [canReset, onReset] = useGlobalStylesReset();
-  const {
-    toggle
-  } = (0, _data.useDispatch)(_preferences.store);
-  const {
-    canEditCSS
-  } = (0, _data.useSelect)(select => {
-    const {
-      getEntityRecord,
-      __experimentalGetCurrentGlobalStylesId
-    } = select(_coreData.store);
+  const { toggle } = (0, import_data.useDispatch)(import_preferences.store);
+  const { canEditCSS } = (0, import_data.useSelect)((select) => {
+    const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } = select(import_core_data.store);
     const globalStylesId = __experimentalGetCurrentGlobalStylesId();
-    const globalStyles = globalStylesId ? getEntityRecord('root', 'globalStyles', globalStylesId) : undefined;
+    const globalStyles = globalStylesId ? getEntityRecord("root", "globalStyles", globalStylesId) : void 0;
     return {
-      canEditCSS: !!globalStyles?._links?.['wp:action-edit-css']
+      canEditCSS: !!globalStyles?._links?.["wp:action-edit-css"]
     };
   }, []);
-  const {
-    setEditorCanvasContainerView
-  } = (0, _lockUnlock.unlock)((0, _data.useDispatch)(_store.store));
+  const { setEditorCanvasContainerView } = (0, import_lock_unlock.unlock)(
+    (0, import_data.useDispatch)(import_store.store)
+  );
   const loadCustomCSS = () => {
-    setEditorCanvasContainerView('global-styles-css');
+    setEditorCanvasContainerView("global-styles-css");
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesMenuFill, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DropdownMenu, {
-      icon: _icons.moreVertical,
-      label: (0, _i18n.__)('More'),
-      toggleProps: {
-        size: 'compact'
-      },
-      children: ({
-        onClose
-      }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.MenuGroup, {
-          children: [canEditCSS && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
-            onClick: loadCustomCSS,
-            children: (0, _i18n.__)('Additional CSS')
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
-            onClick: () => {
-              toggle('core/edit-site', 'welcomeGuideStyles');
-              onClose();
-            },
-            children: (0, _i18n.__)('Welcome Guide')
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuGroup, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesMenuFill, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.DropdownMenu,
+    {
+      icon: import_icons.moreVertical,
+      label: (0, import_i18n.__)("More"),
+      toggleProps: { size: "compact" },
+      children: ({ onClose }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.MenuGroup, { children: [
+          canEditCSS && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.MenuItem, { onClick: loadCustomCSS, children: (0, import_i18n.__)("Additional CSS") }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_components.MenuItem,
+            {
+              onClick: () => {
+                toggle(
+                  "core/edit-site",
+                  "welcomeGuideStyles"
+                );
+                onClose();
+              },
+              children: (0, import_i18n.__)("Welcome Guide")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.MenuGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.MenuItem,
+          {
             onClick: () => {
               onReset();
               onClose();
             },
             disabled: !canReset,
-            children: (0, _i18n.__)('Reset styles')
-          })
-        })]
-      })
-    })
-  });
+            children: (0, import_i18n.__)("Reset styles")
+          }
+        ) })
+      ] })
+    }
+  ) });
 }
-function GlobalStylesNavigationScreen({
-  className,
-  ...props
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Navigator.Screen, {
-    className: ['edit-site-global-styles-sidebar__navigator-screen', className].filter(Boolean).join(' '),
-    ...props
-  });
+function GlobalStylesNavigationScreen({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.Navigator.Screen,
+    {
+      className: [
+        "edit-site-global-styles-sidebar__navigator-screen",
+        className
+      ].filter(Boolean).join(" "),
+      ...props
+    }
+  );
 }
 function BlockStylesNavigationScreens({
   parentMenu,
   blockStyles,
   blockName
 }) {
-  return blockStyles.map((style, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesNavigationScreen, {
-    path: parentMenu + '/variations/' + style.name,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_screenBlock.default, {
-      name: blockName,
-      variation: style.name
-    })
-  }, index));
+  return blockStyles.map((style, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    GlobalStylesNavigationScreen,
+    {
+      path: parentMenu + "/variations/" + style.name,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_block.default, { name: blockName, variation: style.name })
+    },
+    index
+  ));
 }
-function ContextScreens({
-  name,
-  parentMenu = ''
-}) {
-  const blockStyleVariations = (0, _data.useSelect)(select => {
-    const {
-      getBlockStyles
-    } = select(_blocks.store);
-    return getBlockStyles(name);
-  }, [name]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesNavigationScreen, {
-      path: parentMenu + '/colors/palette',
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_screenColorPalette.default, {
-        name: name
-      })
-    }), !!blockStyleVariations?.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(BlockStylesNavigationScreens, {
-      parentMenu: parentMenu,
-      blockStyles: blockStyleVariations,
-      blockName: name
-    })]
-  });
+function ContextScreens({ name, parentMenu = "" }) {
+  const blockStyleVariations = (0, import_data.useSelect)(
+    (select) => {
+      const { getBlockStyles } = select(import_blocks.store);
+      return getBlockStyles(name);
+    },
+    [name]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      GlobalStylesNavigationScreen,
+      {
+        path: parentMenu + "/colors/palette",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_color_palette.default, { name })
+      }
+    ),
+    !!blockStyleVariations?.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      BlockStylesNavigationScreens,
+      {
+        parentMenu,
+        blockStyles: blockStyleVariations,
+        blockName: name
+      }
+    )
+  ] });
 }
 function GlobalStylesStyleBook() {
-  const navigator = (0, _components.useNavigator)();
-  const {
-    path
-  } = navigator.location;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styleBook.default, {
-    isSelected: blockName =>
-    // Match '/blocks/core%2Fbutton' and
-    // '/blocks/core%2Fbutton/typography', but not
-    // '/blocks/core%2Fbuttons'.
-    path === `/blocks/${encodeURIComponent(blockName)}` || path.startsWith(`/blocks/${encodeURIComponent(blockName)}/`),
-    onSelect: blockName => {
-      if (_constants.STYLE_BOOK_COLOR_GROUPS.find(group => group.slug === blockName)) {
-        // Go to color palettes Global Styles.
-        navigator.goTo('/colors/palette');
-        return;
-      }
-      if (blockName === 'typography') {
-        // Go to typography Global Styles.
-        navigator.goTo('/typography');
-        return;
+  const navigator = (0, import_components.useNavigator)();
+  const { path } = navigator.location;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_style_book.default,
+    {
+      isSelected: (blockName) => (
+        // Match '/blocks/core%2Fbutton' and
+        // '/blocks/core%2Fbutton/typography', but not
+        // '/blocks/core%2Fbuttons'.
+        path === `/blocks/${encodeURIComponent(blockName)}` || path.startsWith(
+          `/blocks/${encodeURIComponent(blockName)}/`
+        )
+      ),
+      onSelect: (blockName) => {
+        if (import_constants.STYLE_BOOK_COLOR_GROUPS.find(
+          (group) => group.slug === blockName
+        )) {
+          navigator.goTo("/colors/palette");
+          return;
+        }
+        if (blockName === "typography") {
+          navigator.goTo("/typography");
+          return;
+        }
+        navigator.goTo("/blocks/" + encodeURIComponent(blockName));
       }
-
-      // Now go to the selected block.
-      navigator.goTo('/blocks/' + encodeURIComponent(blockName));
     }
-  });
+  );
 }
 function GlobalStylesBlockLink() {
-  const navigator = (0, _components.useNavigator)();
-  const {
-    selectedBlockName,
-    selectedBlockClientId
-  } = (0, _data.useSelect)(select => {
-    const {
-      getSelectedBlockClientId,
-      getBlockName
-    } = select(_blockEditor.store);
-    const clientId = getSelectedBlockClientId();
-    return {
-      selectedBlockName: getBlockName(clientId),
-      selectedBlockClientId: clientId
-    };
-  }, []);
-  const blockHasGlobalStyles = (0, _screenBlockList.useBlockHasGlobalStyles)(selectedBlockName);
-  // When we're in the `Blocks` screen enable deep linking to the selected block.
-  (0, _element.useEffect)(() => {
+  const navigator = (0, import_components.useNavigator)();
+  const { selectedBlockName, selectedBlockClientId } = (0, import_data.useSelect)(
+    (select) => {
+      const { getSelectedBlockClientId, getBlockName } = select(import_block_editor.store);
+      const clientId = getSelectedBlockClientId();
+      return {
+        selectedBlockName: getBlockName(clientId),
+        selectedBlockClientId: clientId
+      };
+    },
+    []
+  );
+  const blockHasGlobalStyles = (0, import_screen_block_list.useBlockHasGlobalStyles)(selectedBlockName);
+  (0, import_element.useEffect)(() => {
     if (!selectedBlockClientId || !blockHasGlobalStyles) {
       return;
     }
     const currentPath = navigator.location.path;
-    if (currentPath !== '/blocks' && !currentPath.startsWith('/blocks/')) {
+    if (currentPath !== "/blocks" && !currentPath.startsWith("/blocks/")) {
       return;
     }
-    const newPath = '/blocks/' + encodeURIComponent(selectedBlockName);
-    // Avoid navigating to the same path. This can happen when selecting
-    // a new block of the same type.
+    const newPath = "/blocks/" + encodeURIComponent(selectedBlockName);
     if (newPath !== currentPath) {
-      navigator.goTo(newPath, {
-        skipFocus: true
-      });
+      navigator.goTo(newPath, { skipFocus: true });
     }
   }, [selectedBlockClientId, selectedBlockName, blockHasGlobalStyles]);
 }
 function GlobalStylesEditorCanvasContainerLink() {
-  const {
-    goTo,
-    location
-  } = (0, _components.useNavigator)();
-  const editorCanvasContainerView = (0, _data.useSelect)(select => (0, _lockUnlock.unlock)(select(_store.store)).getEditorCanvasContainerView(), []);
+  const { goTo, location } = (0, import_components.useNavigator)();
+  const editorCanvasContainerView = (0, import_data.useSelect)(
+    (select) => (0, import_lock_unlock.unlock)(select(import_store.store)).getEditorCanvasContainerView(),
+    []
+  );
   const path = location?.path;
-  const isRevisionsOpen = path === '/revisions';
-
-  // If the user switches the editor canvas container view, redirect
-  // to the appropriate screen. This effectively allows deep linking to the
-  // desired screens from outside the global styles navigation provider.
-  (0, _element.useEffect)(() => {
+  const isRevisionsOpen = path === "/revisions";
+  (0, import_element.useEffect)(() => {
     switch (editorCanvasContainerView) {
-      case 'global-styles-revisions':
-      case 'global-styles-revisions:style-book':
+      case "global-styles-revisions":
+      case "global-styles-revisions:style-book":
         if (!isRevisionsOpen) {
-          goTo('/revisions');
+          goTo("/revisions");
         }
         break;
-      case 'global-styles-css':
-        goTo('/css');
+      case "global-styles-css":
+        goTo("/css");
         break;
       // The stand-alone style book is open
       // and the revisions panel is open,
@@ -252,30 +256,21 @@ function GlobalStylesEditorCanvasContainerLink() {
       // browsing global styles panel.
       //
       // Falling through as it matches the default scenario.
-      case 'style-book':
+      case "style-book":
       default:
-        // In general, if the revision screen is in view but the
-        // `editorCanvasContainerView` is not a revision view, close it.
-        // This also includes the scenario when the stand-alone style
-        // book is open, in which case we want the user to close the
-        // revisions screen and browse global styles.
         if (isRevisionsOpen) {
-          goTo('/', {
-            isBack: true
-          });
+          goTo("/", { isBack: true });
         }
         break;
     }
   }, [editorCanvasContainerView, isRevisionsOpen, goTo]);
 }
 function useNavigatorSync(parentPath, onPathChange) {
-  const navigator = (0, _components.useNavigator)();
-  const {
-    path: childPath
-  } = navigator.location;
-  const previousParentPath = (0, _compose.usePrevious)(parentPath);
-  const previousChildPath = (0, _compose.usePrevious)(childPath);
-  (0, _element.useEffect)(() => {
+  const navigator = (0, import_components.useNavigator)();
+  const { path: childPath } = navigator.location;
+  const previousParentPath = (0, import_compose.usePrevious)(parentPath);
+  const previousChildPath = (0, import_compose.usePrevious)(childPath);
+  (0, import_element.useEffect)(() => {
     if (parentPath !== childPath) {
       if (parentPath !== previousParentPath) {
         navigator.goTo(parentPath);
@@ -283,105 +278,78 @@ function useNavigatorSync(parentPath, onPathChange) {
         onPathChange(childPath);
       }
     }
-  }, [onPathChange, parentPath, previousChildPath, previousParentPath, childPath, navigator]);
+  }, [
+    onPathChange,
+    parentPath,
+    previousChildPath,
+    previousParentPath,
+    childPath,
+    navigator
+  ]);
 }
-
-// This component is used to wrap the hook in order to conditionally execute it
-// when the parent component is used on controlled mode.
-function NavigationSync({
-  path: parentPath,
-  onPathChange,
-  children
-}) {
+function NavigationSync({ path: parentPath, onPathChange, children }) {
   useNavigatorSync(parentPath, onPathChange);
   return children;
 }
-function GlobalStylesUI({
-  path,
-  onPathChange
-}) {
-  const blocks = (0, _blocks.getBlockTypes)();
-  const editorCanvasContainerView = (0, _data.useSelect)(select => (0, _lockUnlock.unlock)(select(_store.store)).getEditorCanvasContainerView(), []);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Navigator, {
-    className: "edit-site-global-styles-sidebar__navigator-provider",
-    initialPath: "/",
-    children: [path && onPathChange && /*#__PURE__*/(0, _jsxRuntime.jsx)(NavigationSync, {
-      path: path,
-      onPathChange: onPathChange
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesNavigationScreen, {
-      path: "/",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_screenRoot.default, {})
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesNavigationScreen, {
-      path: "/variations",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_screenStyleVariations.default, {})
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesNavigationScreen, {
-      path: "/blocks",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_screenBlockList.default, {})
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesNavigationScreen, {
-      path: "/typography",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_screenTypography.default, {})
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesNavigationScreen, {
-      path: "/typography/font-sizes",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontSizes.default, {})
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesNavigationScreen, {
-      path: "/typography/font-sizes/:origin/:slug",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontSize.default, {})
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesNavigationScreen, {
-      path: "/typography/text",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_screenTypographyElement.default, {
-        element: "text"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesNavigationScreen, {
-      path: "/typography/link",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_screenTypographyElement.default, {
-        element: "link"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesNavigationScreen, {
-      path: "/typography/heading",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_screenTypographyElement.default, {
-        element: "heading"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesNavigationScreen, {
-      path: "/typography/caption",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_screenTypographyElement.default, {
-        element: "caption"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesNavigationScreen, {
-      path: "/typography/button",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_screenTypographyElement.default, {
-        element: "button"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesNavigationScreen, {
-      path: "/colors",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_screenColors.default, {})
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesNavigationScreen, {
-      path: "/shadows",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_screenShadows.ScreenShadows, {})
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesNavigationScreen, {
-      path: "/shadows/edit/:category/:slug",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_screenShadows.ScreenShadowsEdit, {})
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesNavigationScreen, {
-      path: "/layout",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_screenLayout.default, {})
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesNavigationScreen, {
-      path: "/css",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_screenCss.default, {})
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesNavigationScreen, {
-      path: "/revisions",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_screenRevisions.default, {})
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesNavigationScreen, {
-      path: "/background",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_screenBackground.default, {})
-    }), blocks.map(block => /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesNavigationScreen, {
-      path: '/blocks/' + encodeURIComponent(block.name),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_screenBlock.default, {
-        name: block.name
-      })
-    }, 'menu-block-' + block.name)), /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextScreens, {}), blocks.map(block => /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextScreens, {
-      name: block.name,
-      parentMenu: '/blocks/' + encodeURIComponent(block.name)
-    }, 'screens-block-' + block.name)), 'style-book' === editorCanvasContainerView && /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesStyleBook, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesActionMenu, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesBlockLink, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesEditorCanvasContainerLink, {})]
-  });
+function GlobalStylesUI({ path, onPathChange }) {
+  const blocks = (0, import_blocks.getBlockTypes)();
+  const editorCanvasContainerView = (0, import_data.useSelect)(
+    (select) => (0, import_lock_unlock.unlock)(select(import_store.store)).getEditorCanvasContainerView(),
+    []
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_components.Navigator,
+    {
+      className: "edit-site-global-styles-sidebar__navigator-provider",
+      initialPath: "/",
+      children: [
+        path && onPathChange && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NavigationSync, { path, onPathChange }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesNavigationScreen, { path: "/", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_root.default, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesNavigationScreen, { path: "/variations", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_style_variations.default, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesNavigationScreen, { path: "/blocks", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_block_list.default, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesNavigationScreen, { path: "/typography", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_typography.default, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesNavigationScreen, { path: "/typography/font-sizes", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_font_sizes.default, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesNavigationScreen, { path: "/typography/font-sizes/:origin/:slug", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_font_size.default, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesNavigationScreen, { path: "/typography/text", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_typography_element.default, { element: "text" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesNavigationScreen, { path: "/typography/link", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_typography_element.default, { element: "link" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesNavigationScreen, { path: "/typography/heading", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_typography_element.default, { element: "heading" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesNavigationScreen, { path: "/typography/caption", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_typography_element.default, { element: "caption" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesNavigationScreen, { path: "/typography/button", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_typography_element.default, { element: "button" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesNavigationScreen, { path: "/colors", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_colors.default, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesNavigationScreen, { path: "/shadows", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_shadows.ScreenShadows, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesNavigationScreen, { path: "/shadows/edit/:category/:slug", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_shadows.ScreenShadowsEdit, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesNavigationScreen, { path: "/layout", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_layout.default, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesNavigationScreen, { path: "/css", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_css.default, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesNavigationScreen, { path: "/revisions", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_revisions.default, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesNavigationScreen, { path: "/background", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_background.default, {}) }),
+        blocks.map((block) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          GlobalStylesNavigationScreen,
+          {
+            path: "/blocks/" + encodeURIComponent(block.name),
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_block.default, { name: block.name })
+          },
+          "menu-block-" + block.name
+        )),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ContextScreens, {}),
+        blocks.map((block) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          ContextScreens,
+          {
+            name: block.name,
+            parentMenu: "/blocks/" + encodeURIComponent(block.name)
+          },
+          "screens-block-" + block.name
+        )),
+        "style-book" === editorCanvasContainerView && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesStyleBook, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesActionMenu, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesBlockLink, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalStylesEditorCanvasContainerLink, {})
+      ]
+    }
+  );
 }
-var _default = exports.default = GlobalStylesUI;
-//# sourceMappingURL=ui.js.map
+var ui_default = GlobalStylesUI;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GlobalStylesMenuSlot
+});
+//# sourceMappingURL=ui.js.map