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

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

@@ -1,238 +1,232 @@
-/**
- * WordPress dependencies
- */
-import { Navigator, useNavigator, createSlotFill, DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
-import { getBlockTypes, store as blocksStore } from '@wordpress/blocks';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { privateApis as blockEditorPrivateApis, store as blockEditorStore } from '@wordpress/block-editor';
-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 { useEffect } from '@wordpress/element';
-import { usePrevious } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import ScreenRoot from './screen-root';
-import { useBlockHasGlobalStyles, default as ScreenBlockList } from './screen-block-list';
-import ScreenBlock from './screen-block';
-import ScreenTypography from './screen-typography';
-import ScreenTypographyElement from './screen-typography-element';
-import FontSize from './font-sizes/font-size';
-import FontSizes from './font-sizes/font-sizes';
-import ScreenColors from './screen-colors';
-import ScreenColorPalette from './screen-color-palette';
-import ScreenBackground from './screen-background';
-import { ScreenShadows, ScreenShadowsEdit } from './screen-shadows';
-import ScreenLayout from './screen-layout';
-import ScreenStyleVariations from './screen-style-variations';
-import StyleBook from '../style-book';
-import ScreenCSS from './screen-css';
-import ScreenRevisions from './screen-revisions';
-import { unlock } from '../../lock-unlock';
-import { store as editSiteStore } from '../../store';
-import { STYLE_BOOK_COLOR_GROUPS } from '../style-book/constants';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const SLOT_FILL_NAME = 'GlobalStylesMenu';
-const {
-  useGlobalStylesReset
-} = unlock(blockEditorPrivateApis);
-const {
-  Slot: GlobalStylesMenuSlot,
-  Fill: GlobalStylesMenuFill
-} = createSlotFill(SLOT_FILL_NAME);
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  Navigator,
+  useNavigator,
+  createSlotFill,
+  DropdownMenu,
+  MenuGroup,
+  MenuItem
+} from "@wordpress/components";
+import { getBlockTypes, store as blocksStore } from "@wordpress/blocks";
+import { useSelect, useDispatch } from "@wordpress/data";
+import {
+  privateApis as blockEditorPrivateApis,
+  store as blockEditorStore
+} from "@wordpress/block-editor";
+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 { useEffect } from "@wordpress/element";
+import { usePrevious } from "@wordpress/compose";
+import ScreenRoot from "./screen-root";
+import {
+  useBlockHasGlobalStyles,
+  default as ScreenBlockList
+} from "./screen-block-list";
+import ScreenBlock from "./screen-block";
+import ScreenTypography from "./screen-typography";
+import ScreenTypographyElement from "./screen-typography-element";
+import FontSize from "./font-sizes/font-size";
+import FontSizes from "./font-sizes/font-sizes";
+import ScreenColors from "./screen-colors";
+import ScreenColorPalette from "./screen-color-palette";
+import ScreenBackground from "./screen-background";
+import { ScreenShadows, ScreenShadowsEdit } from "./screen-shadows";
+import ScreenLayout from "./screen-layout";
+import ScreenStyleVariations from "./screen-style-variations";
+import StyleBook from "../style-book";
+import ScreenCSS from "./screen-css";
+import ScreenRevisions from "./screen-revisions";
+import { unlock } from "../../lock-unlock";
+import { store as editSiteStore } from "../../store";
+import { STYLE_BOOK_COLOR_GROUPS } from "../style-book/constants";
+const SLOT_FILL_NAME = "GlobalStylesMenu";
+const { useGlobalStylesReset } = unlock(blockEditorPrivateApis);
+const { Slot: GlobalStylesMenuSlot, Fill: GlobalStylesMenuFill } = createSlotFill(SLOT_FILL_NAME);
 function GlobalStylesActionMenu() {
   const [canReset, onReset] = useGlobalStylesReset();
-  const {
-    toggle
-  } = useDispatch(preferencesStore);
-  const {
-    canEditCSS
-  } = useSelect(select => {
-    const {
-      getEntityRecord,
-      __experimentalGetCurrentGlobalStylesId
-    } = select(coreStore);
+  const { toggle } = useDispatch(preferencesStore);
+  const { canEditCSS } = useSelect((select) => {
+    const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } = select(coreStore);
     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
-  } = unlock(useDispatch(editSiteStore));
+  const { setEditorCanvasContainerView } = unlock(
+    useDispatch(editSiteStore)
+  );
   const loadCustomCSS = () => {
-    setEditorCanvasContainerView('global-styles-css');
+    setEditorCanvasContainerView("global-styles-css");
   };
-  return /*#__PURE__*/_jsx(GlobalStylesMenuFill, {
-    children: /*#__PURE__*/_jsx(DropdownMenu, {
+  return /* @__PURE__ */ jsx(GlobalStylesMenuFill, { children: /* @__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')
-          }), /*#__PURE__*/_jsx(MenuItem, {
-            onClick: () => {
-              toggle('core/edit-site', 'welcomeGuideStyles');
-              onClose();
-            },
-            children: __('Welcome Guide')
-          })]
-        }), /*#__PURE__*/_jsx(MenuGroup, {
-          children: /*#__PURE__*/_jsx(MenuItem, {
+      label: __("More"),
+      toggleProps: { size: "compact" },
+      children: ({ onClose }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(MenuGroup, { children: [
+          canEditCSS && /* @__PURE__ */ jsx(MenuItem, { onClick: loadCustomCSS, children: __("Additional CSS") }),
+          /* @__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')
-          })
-        })]
-      })
-    })
-  });
+            children: __("Reset styles")
+          }
+        ) })
+      ] })
+    }
+  ) });
 }
-function GlobalStylesNavigationScreen({
-  className,
-  ...props
-}) {
-  return /*#__PURE__*/_jsx(Navigator.Screen, {
-    className: ['edit-site-global-styles-sidebar__navigator-screen', className].filter(Boolean).join(' '),
-    ...props
-  });
+function GlobalStylesNavigationScreen({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    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__*/_jsx(GlobalStylesNavigationScreen, {
-    path: parentMenu + '/variations/' + style.name,
-    children: /*#__PURE__*/_jsx(ScreenBlock, {
-      name: blockName,
-      variation: style.name
-    })
-  }, index));
+  return blockStyles.map((style, index) => /* @__PURE__ */ jsx(
+    GlobalStylesNavigationScreen,
+    {
+      path: parentMenu + "/variations/" + style.name,
+      children: /* @__PURE__ */ jsx(ScreenBlock, { name: blockName, variation: style.name })
+    },
+    index
+  ));
 }
-function ContextScreens({
-  name,
-  parentMenu = ''
-}) {
-  const blockStyleVariations = useSelect(select => {
-    const {
-      getBlockStyles
-    } = select(blocksStore);
-    return getBlockStyles(name);
-  }, [name]);
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(GlobalStylesNavigationScreen, {
-      path: parentMenu + '/colors/palette',
-      children: /*#__PURE__*/_jsx(ScreenColorPalette, {
-        name: name
-      })
-    }), !!blockStyleVariations?.length && /*#__PURE__*/_jsx(BlockStylesNavigationScreens, {
-      parentMenu: parentMenu,
-      blockStyles: blockStyleVariations,
-      blockName: name
-    })]
-  });
+function ContextScreens({ name, parentMenu = "" }) {
+  const blockStyleVariations = useSelect(
+    (select) => {
+      const { getBlockStyles } = select(blocksStore);
+      return getBlockStyles(name);
+    },
+    [name]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      GlobalStylesNavigationScreen,
+      {
+        path: parentMenu + "/colors/palette",
+        children: /* @__PURE__ */ jsx(ScreenColorPalette, { name })
+      }
+    ),
+    !!blockStyleVariations?.length && /* @__PURE__ */ jsx(
+      BlockStylesNavigationScreens,
+      {
+        parentMenu,
+        blockStyles: blockStyleVariations,
+        blockName: name
+      }
+    )
+  ] });
 }
 function GlobalStylesStyleBook() {
   const navigator = useNavigator();
-  const {
-    path
-  } = navigator.location;
-  return /*#__PURE__*/_jsx(StyleBook, {
-    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 (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 { path } = navigator.location;
+  return /* @__PURE__ */ jsx(
+    StyleBook,
+    {
+      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 (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 = useNavigator();
-  const {
-    selectedBlockName,
-    selectedBlockClientId
-  } = useSelect(select => {
-    const {
-      getSelectedBlockClientId,
-      getBlockName
-    } = select(blockEditorStore);
-    const clientId = getSelectedBlockClientId();
-    return {
-      selectedBlockName: getBlockName(clientId),
-      selectedBlockClientId: clientId
-    };
-  }, []);
+  const { selectedBlockName, selectedBlockClientId } = useSelect(
+    (select) => {
+      const { getSelectedBlockClientId, getBlockName } = select(blockEditorStore);
+      const clientId = getSelectedBlockClientId();
+      return {
+        selectedBlockName: getBlockName(clientId),
+        selectedBlockClientId: clientId
+      };
+    },
+    []
+  );
   const blockHasGlobalStyles = useBlockHasGlobalStyles(selectedBlockName);
-  // When we're in the `Blocks` screen enable deep linking to the selected block.
   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
-  } = useNavigator();
-  const editorCanvasContainerView = useSelect(select => unlock(select(editSiteStore)).getEditorCanvasContainerView(), []);
+  const { goTo, location } = useNavigator();
+  const editorCanvasContainerView = useSelect(
+    (select) => unlock(select(editSiteStore)).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.
+  const isRevisionsOpen = path === "/revisions";
   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,
@@ -241,17 +235,10 @@ 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;
     }
@@ -259,9 +246,7 @@ function GlobalStylesEditorCanvasContainerLink() {
 }
 function useNavigatorSync(parentPath, onPathChange) {
   const navigator = useNavigator();
-  const {
-    path: childPath
-  } = navigator.location;
+  const { path: childPath } = navigator.location;
   const previousParentPath = usePrevious(parentPath);
   const previousChildPath = usePrevious(childPath);
   useEffect(() => {
@@ -272,106 +257,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
-}) {
+function GlobalStylesUI({ path, onPathChange }) {
   const blocks = getBlockTypes();
-  const editorCanvasContainerView = useSelect(select => unlock(select(editSiteStore)).getEditorCanvasContainerView(), []);
-  return /*#__PURE__*/_jsxs(Navigator, {
-    className: "edit-site-global-styles-sidebar__navigator-provider",
-    initialPath: "/",
-    children: [path && onPathChange && /*#__PURE__*/_jsx(NavigationSync, {
-      path: path,
-      onPathChange: onPathChange
-    }), /*#__PURE__*/_jsx(GlobalStylesNavigationScreen, {
-      path: "/",
-      children: /*#__PURE__*/_jsx(ScreenRoot, {})
-    }), /*#__PURE__*/_jsx(GlobalStylesNavigationScreen, {
-      path: "/variations",
-      children: /*#__PURE__*/_jsx(ScreenStyleVariations, {})
-    }), /*#__PURE__*/_jsx(GlobalStylesNavigationScreen, {
-      path: "/blocks",
-      children: /*#__PURE__*/_jsx(ScreenBlockList, {})
-    }), /*#__PURE__*/_jsx(GlobalStylesNavigationScreen, {
-      path: "/typography",
-      children: /*#__PURE__*/_jsx(ScreenTypography, {})
-    }), /*#__PURE__*/_jsx(GlobalStylesNavigationScreen, {
-      path: "/typography/font-sizes",
-      children: /*#__PURE__*/_jsx(FontSizes, {})
-    }), /*#__PURE__*/_jsx(GlobalStylesNavigationScreen, {
-      path: "/typography/font-sizes/:origin/:slug",
-      children: /*#__PURE__*/_jsx(FontSize, {})
-    }), /*#__PURE__*/_jsx(GlobalStylesNavigationScreen, {
-      path: "/typography/text",
-      children: /*#__PURE__*/_jsx(ScreenTypographyElement, {
-        element: "text"
-      })
-    }), /*#__PURE__*/_jsx(GlobalStylesNavigationScreen, {
-      path: "/typography/link",
-      children: /*#__PURE__*/_jsx(ScreenTypographyElement, {
-        element: "link"
-      })
-    }), /*#__PURE__*/_jsx(GlobalStylesNavigationScreen, {
-      path: "/typography/heading",
-      children: /*#__PURE__*/_jsx(ScreenTypographyElement, {
-        element: "heading"
-      })
-    }), /*#__PURE__*/_jsx(GlobalStylesNavigationScreen, {
-      path: "/typography/caption",
-      children: /*#__PURE__*/_jsx(ScreenTypographyElement, {
-        element: "caption"
-      })
-    }), /*#__PURE__*/_jsx(GlobalStylesNavigationScreen, {
-      path: "/typography/button",
-      children: /*#__PURE__*/_jsx(ScreenTypographyElement, {
-        element: "button"
-      })
-    }), /*#__PURE__*/_jsx(GlobalStylesNavigationScreen, {
-      path: "/colors",
-      children: /*#__PURE__*/_jsx(ScreenColors, {})
-    }), /*#__PURE__*/_jsx(GlobalStylesNavigationScreen, {
-      path: "/shadows",
-      children: /*#__PURE__*/_jsx(ScreenShadows, {})
-    }), /*#__PURE__*/_jsx(GlobalStylesNavigationScreen, {
-      path: "/shadows/edit/:category/:slug",
-      children: /*#__PURE__*/_jsx(ScreenShadowsEdit, {})
-    }), /*#__PURE__*/_jsx(GlobalStylesNavigationScreen, {
-      path: "/layout",
-      children: /*#__PURE__*/_jsx(ScreenLayout, {})
-    }), /*#__PURE__*/_jsx(GlobalStylesNavigationScreen, {
-      path: "/css",
-      children: /*#__PURE__*/_jsx(ScreenCSS, {})
-    }), /*#__PURE__*/_jsx(GlobalStylesNavigationScreen, {
-      path: "/revisions",
-      children: /*#__PURE__*/_jsx(ScreenRevisions, {})
-    }), /*#__PURE__*/_jsx(GlobalStylesNavigationScreen, {
-      path: "/background",
-      children: /*#__PURE__*/_jsx(ScreenBackground, {})
-    }), blocks.map(block => /*#__PURE__*/_jsx(GlobalStylesNavigationScreen, {
-      path: '/blocks/' + encodeURIComponent(block.name),
-      children: /*#__PURE__*/_jsx(ScreenBlock, {
-        name: block.name
-      })
-    }, 'menu-block-' + block.name)), /*#__PURE__*/_jsx(ContextScreens, {}), blocks.map(block => /*#__PURE__*/_jsx(ContextScreens, {
-      name: block.name,
-      parentMenu: '/blocks/' + encodeURIComponent(block.name)
-    }, 'screens-block-' + block.name)), 'style-book' === editorCanvasContainerView && /*#__PURE__*/_jsx(GlobalStylesStyleBook, {}), /*#__PURE__*/_jsx(GlobalStylesActionMenu, {}), /*#__PURE__*/_jsx(GlobalStylesBlockLink, {}), /*#__PURE__*/_jsx(GlobalStylesEditorCanvasContainerLink, {})]
-  });
+  const editorCanvasContainerView = useSelect(
+    (select) => unlock(select(editSiteStore)).getEditorCanvasContainerView(),
+    []
+  );
+  return /* @__PURE__ */ jsxs(
+    Navigator,
+    {
+      className: "edit-site-global-styles-sidebar__navigator-provider",
+      initialPath: "/",
+      children: [
+        path && onPathChange && /* @__PURE__ */ jsx(NavigationSync, { path, onPathChange }),
+        /* @__PURE__ */ jsx(GlobalStylesNavigationScreen, { path: "/", children: /* @__PURE__ */ jsx(ScreenRoot, {}) }),
+        /* @__PURE__ */ jsx(GlobalStylesNavigationScreen, { path: "/variations", children: /* @__PURE__ */ jsx(ScreenStyleVariations, {}) }),
+        /* @__PURE__ */ jsx(GlobalStylesNavigationScreen, { path: "/blocks", children: /* @__PURE__ */ jsx(ScreenBlockList, {}) }),
+        /* @__PURE__ */ jsx(GlobalStylesNavigationScreen, { path: "/typography", children: /* @__PURE__ */ jsx(ScreenTypography, {}) }),
+        /* @__PURE__ */ jsx(GlobalStylesNavigationScreen, { path: "/typography/font-sizes", children: /* @__PURE__ */ jsx(FontSizes, {}) }),
+        /* @__PURE__ */ jsx(GlobalStylesNavigationScreen, { path: "/typography/font-sizes/:origin/:slug", children: /* @__PURE__ */ jsx(FontSize, {}) }),
+        /* @__PURE__ */ jsx(GlobalStylesNavigationScreen, { path: "/typography/text", children: /* @__PURE__ */ jsx(ScreenTypographyElement, { element: "text" }) }),
+        /* @__PURE__ */ jsx(GlobalStylesNavigationScreen, { path: "/typography/link", children: /* @__PURE__ */ jsx(ScreenTypographyElement, { element: "link" }) }),
+        /* @__PURE__ */ jsx(GlobalStylesNavigationScreen, { path: "/typography/heading", children: /* @__PURE__ */ jsx(ScreenTypographyElement, { element: "heading" }) }),
+        /* @__PURE__ */ jsx(GlobalStylesNavigationScreen, { path: "/typography/caption", children: /* @__PURE__ */ jsx(ScreenTypographyElement, { element: "caption" }) }),
+        /* @__PURE__ */ jsx(GlobalStylesNavigationScreen, { path: "/typography/button", children: /* @__PURE__ */ jsx(ScreenTypographyElement, { element: "button" }) }),
+        /* @__PURE__ */ jsx(GlobalStylesNavigationScreen, { path: "/colors", children: /* @__PURE__ */ jsx(ScreenColors, {}) }),
+        /* @__PURE__ */ jsx(GlobalStylesNavigationScreen, { path: "/shadows", children: /* @__PURE__ */ jsx(ScreenShadows, {}) }),
+        /* @__PURE__ */ jsx(GlobalStylesNavigationScreen, { path: "/shadows/edit/:category/:slug", children: /* @__PURE__ */ jsx(ScreenShadowsEdit, {}) }),
+        /* @__PURE__ */ jsx(GlobalStylesNavigationScreen, { path: "/layout", children: /* @__PURE__ */ jsx(ScreenLayout, {}) }),
+        /* @__PURE__ */ jsx(GlobalStylesNavigationScreen, { path: "/css", children: /* @__PURE__ */ jsx(ScreenCSS, {}) }),
+        /* @__PURE__ */ jsx(GlobalStylesNavigationScreen, { path: "/revisions", children: /* @__PURE__ */ jsx(ScreenRevisions, {}) }),
+        /* @__PURE__ */ jsx(GlobalStylesNavigationScreen, { path: "/background", children: /* @__PURE__ */ jsx(ScreenBackground, {}) }),
+        blocks.map((block) => /* @__PURE__ */ jsx(
+          GlobalStylesNavigationScreen,
+          {
+            path: "/blocks/" + encodeURIComponent(block.name),
+            children: /* @__PURE__ */ jsx(ScreenBlock, { name: block.name })
+          },
+          "menu-block-" + block.name
+        )),
+        /* @__PURE__ */ jsx(ContextScreens, {}),
+        blocks.map((block) => /* @__PURE__ */ jsx(
+          ContextScreens,
+          {
+            name: block.name,
+            parentMenu: "/blocks/" + encodeURIComponent(block.name)
+          },
+          "screens-block-" + block.name
+        )),
+        "style-book" === editorCanvasContainerView && /* @__PURE__ */ jsx(GlobalStylesStyleBook, {}),
+        /* @__PURE__ */ jsx(GlobalStylesActionMenu, {}),
+        /* @__PURE__ */ jsx(GlobalStylesBlockLink, {}),
+        /* @__PURE__ */ jsx(GlobalStylesEditorCanvasContainerLink, {})
+      ]
+    }
+  );
 }
-export { GlobalStylesMenuSlot };
-export default GlobalStylesUI;
-//# sourceMappingURL=ui.js.map
+var ui_default = GlobalStylesUI;
+export {
+  GlobalStylesMenuSlot,
+  ui_default as default
+};
+//# sourceMappingURL=ui.js.map