@wordpress/edit-site 5.34.0 → 6.0.0

package/build/components/layout/index.js

@@ -5,8 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Layout;
-var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _data = require("@wordpress/data");
 var _components = require("@wordpress/components");
 var _compose = require("@wordpress/compose");
@@ -35,6 +34,7 @@ var _router = _interopRequireDefault(require("./router"));
 var _animation = _interopRequireDefault(require("./animation"));
 var _sidebar = _interopRequireDefault(require("../sidebar"));
 var _saveHub = _interopRequireDefault(require("../save-hub"));
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -70,7 +70,6 @@ function Layout() {
   const isMobileViewport = (0, _compose.useViewportMatch)('medium', '<');
   const {
     isDistractionFree,
-    isZoomOutMode,
     hasFixedToolbar,
     hasBlockSelected,
     canvasMode,
@@ -91,7 +90,6 @@ function Layout() {
       hasFixedToolbar: select(_preferences.store).get('core', 'fixedToolbar'),
       isDistractionFree: select(_preferences.store).get('core', 'distractionFree'),
       hasBlockBreadcrumbs: select(_preferences.store).get('core', 'showBlockBreadcrumbs'),
-      isZoomOutMode: select(_blockEditor.store).__unstableGetEditorMode() === 'zoom-out',
       hasBlockSelected: select(_blockEditor.store).getBlockSelectionStart()
     };
   }, []);
@@ -136,7 +134,7 @@ function Layout() {
   // Sets the right context for the command palette
   let commandContext = 'site-editor';
   if (canvasMode === 'edit') {
-    commandContext = 'site-editor-edit';
+    commandContext = 'entity-edit';
   }
   if (hasBlockSelected) {
     commandContext = 'block-selection-edit';
@@ -151,99 +149,115 @@ function Layout() {
   if (canvasMode === 'init') {
     return null;
   }
-  return (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_commands.CommandMenu, null), (0, _react.createElement)(_register.default, null), (0, _react.createElement)(_global.default, null), fullResizer, (0, _react.createElement)("div", {
-    ...navigateRegionsProps,
-    ref: navigateRegionsProps.ref,
-    className: (0, _classnames.default)('edit-site-layout', navigateRegionsProps.className, {
-      'is-distraction-free': isDistractionFree && canvasMode === 'edit',
-      'is-full-canvas': canvasMode === 'edit',
-      'has-fixed-toolbar': hasFixedToolbar,
-      'is-block-toolbar-visible': hasBlockSelected,
-      'is-zoom-out': isZoomOutMode,
-      'has-block-breadcrumbs': hasBlockBreadcrumbs && !isDistractionFree && canvasMode === 'edit'
-    })
-  }, (0, _react.createElement)(_components.__unstableMotion.div, {
-    className: "edit-site-layout__header-container",
-    variants: {
-      isDistractionFree: {
-        opacity: 0,
-        transition: {
-          type: 'tween',
-          delay: 0.8,
-          delayChildren: 0.8
-        } // How long to wait before the header exits
-      },
-      isDistractionFreeHovering: {
-        opacity: 1,
-        transition: {
-          type: 'tween',
-          delay: 0.2,
-          delayChildren: 0.2
-        } // How long to wait before the header shows
-      },
-      view: {
-        opacity: 1
-      },
-      edit: {
-        opacity: 1
-      }
-    },
-    whileHover: isDistractionFree ? 'isDistractionFreeHovering' : undefined,
-    animate: headerAnimationState
-  }, (0, _react.createElement)(_siteHub.default, {
-    isTransparent: isResizableFrameOversized,
-    className: "edit-site-layout__hub"
-  })), (0, _react.createElement)("div", {
-    className: "edit-site-layout__content"
-  }, (!isMobileViewport || !areas.mobile) && (0, _react.createElement)(NavigableRegion, {
-    ariaLabel: (0, _i18n.__)('Navigation'),
-    className: "edit-site-layout__sidebar-region"
-  }, (0, _react.createElement)(_components.__unstableAnimatePresence, null, canvasMode === 'view' && (0, _react.createElement)(_components.__unstableMotion.div, {
-    initial: {
-      opacity: 0
-    },
-    animate: {
-      opacity: 1
-    },
-    exit: {
-      opacity: 0
-    },
-    transition: {
-      type: 'tween',
-      duration:
-      // Disable transition in mobile to emulate a full page transition.
-      disableMotion || isMobileViewport ? 0 : ANIMATION_DURATION,
-      ease: 'easeOut'
-    },
-    className: "edit-site-layout__sidebar"
-  }, (0, _react.createElement)(_sidebar.default, {
-    routeKey: routeKey
-  }, areas.sidebar), (0, _react.createElement)(_saveHub.default, null)))), isMobileViewport && areas.mobile && (0, _react.createElement)("div", {
-    className: "edit-site-layout__mobile"
-  }, areas.mobile), !isMobileViewport && areas.content && canvasMode !== 'edit' && (0, _react.createElement)("div", {
-    className: "edit-site-layout__area",
-    style: {
-      maxWidth: widths?.content
-    }
-  }, areas.content), !isMobileViewport && areas.preview && (0, _react.createElement)("div", {
-    className: "edit-site-layout__canvas-container"
-  }, canvasResizer, !!canvasSize.width && (0, _react.createElement)("div", {
-    className: (0, _classnames.default)('edit-site-layout__canvas', {
-      'is-right-aligned': isResizableFrameOversized
-    }),
-    ref: animationRef
-  }, (0, _react.createElement)(_errorBoundary.default, null, (0, _react.createElement)(_resizableFrame.default, {
-    isReady: !isEditorLoading,
-    isFullWidth: canvasMode === 'edit',
-    defaultSize: {
-      width: canvasSize.width - 24 /* $canvas-padding */,
-      height: canvasSize.height
-    },
-    isOversized: isResizableFrameOversized,
-    setIsOversized: setIsResizableFrameOversized,
-    innerContentStyle: {
-      background: gradientValue !== null && gradientValue !== void 0 ? gradientValue : backgroundColor
-    }
-  }, areas.preview))))), (0, _react.createElement)(_savePanel.default, null)));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_commands.CommandMenu, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_register.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_global.default, {}), fullResizer, /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      ...navigateRegionsProps,
+      ref: navigateRegionsProps.ref,
+      className: (0, _clsx.default)('edit-site-layout', navigateRegionsProps.className, {
+        'is-distraction-free': isDistractionFree && canvasMode === 'edit',
+        'is-full-canvas': canvasMode === 'edit',
+        'has-fixed-toolbar': hasFixedToolbar,
+        'is-block-toolbar-visible': hasBlockSelected,
+        'has-block-breadcrumbs': hasBlockBreadcrumbs && !isDistractionFree && canvasMode === 'edit'
+      }),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__unstableMotion.div, {
+        className: "edit-site-layout__header-container",
+        variants: {
+          isDistractionFree: {
+            opacity: 0,
+            transition: {
+              type: 'tween',
+              delay: 0.8,
+              delayChildren: 0.8
+            } // How long to wait before the header exits
+          },
+          isDistractionFreeHovering: {
+            opacity: 1,
+            transition: {
+              type: 'tween',
+              delay: 0.2,
+              delayChildren: 0.2
+            } // How long to wait before the header shows
+          },
+          view: {
+            opacity: 1
+          },
+          edit: {
+            opacity: 1
+          }
+        },
+        whileHover: isDistractionFree ? 'isDistractionFreeHovering' : undefined,
+        animate: headerAnimationState,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_siteHub.default, {
+          isTransparent: isResizableFrameOversized,
+          className: "edit-site-layout__hub"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "edit-site-layout__content",
+        children: [(!isMobileViewport || !areas.mobile) && /*#__PURE__*/(0, _jsxRuntime.jsx)(NavigableRegion, {
+          ariaLabel: (0, _i18n.__)('Navigation'),
+          className: "edit-site-layout__sidebar-region",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__unstableAnimatePresence, {
+            children: canvasMode === 'view' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__unstableMotion.div, {
+              initial: {
+                opacity: 0
+              },
+              animate: {
+                opacity: 1
+              },
+              exit: {
+                opacity: 0
+              },
+              transition: {
+                type: 'tween',
+                duration:
+                // Disable transition in mobile to emulate a full page transition.
+                disableMotion || isMobileViewport ? 0 : ANIMATION_DURATION,
+                ease: 'easeOut'
+              },
+              className: "edit-site-layout__sidebar",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sidebar.default, {
+                routeKey: routeKey,
+                children: areas.sidebar
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_saveHub.default, {})]
+            })
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_editor.EditorSnackbars, {}), isMobileViewport && areas.mobile && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "edit-site-layout__mobile",
+          children: areas.mobile
+        }), !isMobileViewport && areas.content && canvasMode !== 'edit' && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "edit-site-layout__area",
+          style: {
+            maxWidth: widths?.content
+          },
+          children: areas.content
+        }), !isMobileViewport && areas.preview && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "edit-site-layout__canvas-container",
+          children: [canvasResizer, !!canvasSize.width && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: (0, _clsx.default)('edit-site-layout__canvas', {
+              'is-right-aligned': isResizableFrameOversized
+            }),
+            ref: animationRef,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_errorBoundary.default, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_resizableFrame.default, {
+                isReady: !isEditorLoading,
+                isFullWidth: canvasMode === 'edit',
+                defaultSize: {
+                  width: canvasSize.width - 24 /* $canvas-padding */,
+                  height: canvasSize.height
+                },
+                isOversized: isResizableFrameOversized,
+                setIsOversized: setIsResizableFrameOversized,
+                innerContentStyle: {
+                  background: gradientValue !== null && gradientValue !== void 0 ? gradientValue : backgroundColor
+                },
+                children: areas.preview
+              })
+            })
+          })]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_savePanel.default, {})]
+    })]
+  });
 }
 //# sourceMappingURL=index.js.map

package/build/components/layout/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_classnames","_interopRequireDefault","require","_data","_components","_compose","_i18n","_element","_keyboardShortcuts","_commands","_preferences","_blockEditor","_coreCommands","_editor","_errorBoundary","_store","_useInitEditedEntityFromUrl","_siteHub","_resizableFrame","_useSyncCanvasModeWithUrl","_lockUnlock","_savePanel","_register","_global","_useCommonCommands","_useEditModeCommands","_hooks","_router","_animation","_sidebar","_saveHub","useCommands","unlock","coreCommandsPrivateApis","useCommandContext","commandsPrivateApis","useGlobalStyle","blockEditorPrivateApis","NavigableRegion","editorPrivateApis","ANIMATION_DURATION","Layout","useInitEditedEntityFromURL","useSyncCanvasModeWithURL","useEditModeCommands","useCommonCommands","isMobileViewport","useViewportMatch","isDistractionFree","isZoomOutMode","hasFixedToolbar","hasBlockSelected","canvasMode","previousShortcut","nextShortcut","hasBlockBreadcrumbs","useSelect","select","getAllShortcutKeyCombinations","keyboardShortcutsStore","getCanvasMode","editSiteStore","preferencesStore","get","blockEditorStore","__unstableGetEditorMode","getBlockSelectionStart","navigateRegionsProps","useNavigateRegions","previous","next","disableMotion","useReducedMotion","canvasResizer","canvasSize","useResizeObserver","fullResizer","isEditorLoading","useIsSiteEditorLoading","isResizableFrameOversized","setIsResizableFrameOversized","useState","key","routeKey","areas","widths","useLayoutAreas","animationRef","useMovingAnimation","triggerAnimationOnChange","headerAnimationState","commandContext","backgroundColor","gradientValue","_react","createElement","Fragment","CommandMenu","default","ref","className","classnames","__unstableMotion","div","variants","opacity","transition","type","delay","delayChildren","isDistractionFreeHovering","view","edit","whileHover","undefined","animate","isTransparent","mobile","ariaLabel","__","__unstableAnimatePresence","initial","exit","duration","ease","sidebar","content","style","maxWidth","preview","width","isReady","isFullWidth","defaultSize","height","isOversized","setIsOversized","innerContentStyle","background"],"sources":["@wordpress/edit-site/src/components/layout/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport {\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n\t__unstableUseNavigateRegions as useNavigateRegions,\n} from '@wordpress/components';\nimport {\n\tuseReducedMotion,\n\tuseViewportMatch,\n\tuseResizeObserver,\n} from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';\nimport {\n\tCommandMenu,\n\tprivateApis as commandsPrivateApis,\n} from '@wordpress/commands';\nimport { store as preferencesStore } from '@wordpress/preferences';\nimport {\n\tprivateApis as blockEditorPrivateApis,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';\nimport { privateApis as editorPrivateApis } from '@wordpress/editor';\n\n/**\n * Internal dependencies\n */\nimport ErrorBoundary from '../error-boundary';\nimport { store as editSiteStore } from '../../store';\nimport useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';\nimport SiteHub from '../site-hub';\nimport ResizableFrame from '../resizable-frame';\nimport useSyncCanvasModeWithURL from '../sync-state-with-url/use-sync-canvas-mode-with-url';\nimport { unlock } from '../../lock-unlock';\nimport SavePanel from '../save-panel';\nimport KeyboardShortcutsRegister from '../keyboard-shortcuts/register';\nimport KeyboardShortcutsGlobal from '../keyboard-shortcuts/global';\nimport { useCommonCommands } from '../../hooks/commands/use-common-commands';\nimport { useEditModeCommands } from '../../hooks/commands/use-edit-mode-commands';\nimport { useIsSiteEditorLoading } from './hooks';\nimport useLayoutAreas from './router';\nimport useMovingAnimation from './animation';\nimport SidebarContent from '../sidebar';\nimport SaveHub from '../save-hub';\n\nconst { useCommands } = unlock( coreCommandsPrivateApis );\nconst { useCommandContext } = unlock( commandsPrivateApis );\nconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\nconst { NavigableRegion } = unlock( editorPrivateApis );\n\nconst ANIMATION_DURATION = 0.3;\n\nexport default function Layout() {\n\t// This ensures the edited entity id and type are initialized properly.\n\tuseInitEditedEntityFromURL();\n\tuseSyncCanvasModeWithURL();\n\tuseCommands();\n\tuseEditModeCommands();\n\tuseCommonCommands();\n\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\n\tconst {\n\t\tisDistractionFree,\n\t\tisZoomOutMode,\n\t\thasFixedToolbar,\n\t\thasBlockSelected,\n\t\tcanvasMode,\n\t\tpreviousShortcut,\n\t\tnextShortcut,\n\t\thasBlockBreadcrumbs,\n\t} = useSelect( ( select ) => {\n\t\tconst { getAllShortcutKeyCombinations } = select(\n\t\t\tkeyboardShortcutsStore\n\t\t);\n\t\tconst { getCanvasMode } = unlock( select( editSiteStore ) );\n\t\treturn {\n\t\t\tcanvasMode: getCanvasMode(),\n\t\t\tpreviousShortcut: getAllShortcutKeyCombinations(\n\t\t\t\t'core/editor/previous-region'\n\t\t\t),\n\t\t\tnextShortcut: getAllShortcutKeyCombinations(\n\t\t\t\t'core/editor/next-region'\n\t\t\t),\n\t\t\thasFixedToolbar: select( preferencesStore ).get(\n\t\t\t\t'core',\n\t\t\t\t'fixedToolbar'\n\t\t\t),\n\t\t\tisDistractionFree: select( preferencesStore ).get(\n\t\t\t\t'core',\n\t\t\t\t'distractionFree'\n\t\t\t),\n\t\t\thasBlockBreadcrumbs: select( preferencesStore ).get(\n\t\t\t\t'core',\n\t\t\t\t'showBlockBreadcrumbs'\n\t\t\t),\n\t\t\tisZoomOutMode:\n\t\t\t\tselect( blockEditorStore ).__unstableGetEditorMode() ===\n\t\t\t\t'zoom-out',\n\t\t\thasBlockSelected:\n\t\t\t\tselect( blockEditorStore ).getBlockSelectionStart(),\n\t\t};\n\t}, [] );\n\tconst navigateRegionsProps = useNavigateRegions( {\n\t\tprevious: previousShortcut,\n\t\tnext: nextShortcut,\n\t} );\n\tconst disableMotion = useReducedMotion();\n\tconst [ canvasResizer, canvasSize ] = useResizeObserver();\n\tconst [ fullResizer ] = useResizeObserver();\n\tconst isEditorLoading = useIsSiteEditorLoading();\n\tconst [ isResizableFrameOversized, setIsResizableFrameOversized ] =\n\t\tuseState( false );\n\tconst { key: routeKey, areas, widths } = useLayoutAreas();\n\tconst animationRef = useMovingAnimation( {\n\t\ttriggerAnimationOnChange: canvasMode + '__' + routeKey,\n\t} );\n\n\t// This determines which animation variant should apply to the header.\n\t// There is also a `isDistractionFreeHovering` state that gets priority\n\t// when hovering the `edit-site-layout__header-container` in distraction\n\t// free mode. It's set via framer and trickles down to all the children\n\t// so they can use this variant state too.\n\t//\n\t// TODO: The issue with this is we want to have the hover state stick when hovering\n\t// a popover opened via the header. We'll probably need to lift this state to\n\t// handle it ourselves. Also, focusWithin the header needs to be handled.\n\tlet headerAnimationState;\n\n\tif ( canvasMode === 'view' ) {\n\t\t// We need 'view' to always take priority so 'isDistractionFree'\n\t\t// doesn't bleed over into the view (sidebar) state\n\t\theaderAnimationState = 'view';\n\t} else if ( isDistractionFree ) {\n\t\theaderAnimationState = 'isDistractionFree';\n\t} else {\n\t\theaderAnimationState = canvasMode; // edit, view, init\n\t}\n\n\t// Sets the right context for the command palette\n\tlet commandContext = 'site-editor';\n\n\tif ( canvasMode === 'edit' ) {\n\t\tcommandContext = 'site-editor-edit';\n\t}\n\tif ( hasBlockSelected ) {\n\t\tcommandContext = 'block-selection-edit';\n\t}\n\tuseCommandContext( commandContext );\n\n\tconst [ backgroundColor ] = useGlobalStyle( 'color.background' );\n\tconst [ gradientValue ] = useGlobalStyle( 'color.gradient' );\n\n\t// Synchronizing the URL with the store value of canvasMode happens in an effect\n\t// This condition ensures the component is only rendered after the synchronization happens\n\t// which prevents any animations due to potential canvasMode value change.\n\tif ( canvasMode === 'init' ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<CommandMenu />\n\t\t\t<KeyboardShortcutsRegister />\n\t\t\t<KeyboardShortcutsGlobal />\n\t\t\t{ fullResizer }\n\t\t\t<div\n\t\t\t\t{ ...navigateRegionsProps }\n\t\t\t\tref={ navigateRegionsProps.ref }\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'edit-site-layout',\n\t\t\t\t\tnavigateRegionsProps.className,\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-distraction-free':\n\t\t\t\t\t\t\tisDistractionFree && canvasMode === 'edit',\n\t\t\t\t\t\t'is-full-canvas': canvasMode === 'edit',\n\t\t\t\t\t\t'has-fixed-toolbar': hasFixedToolbar,\n\t\t\t\t\t\t'is-block-toolbar-visible': hasBlockSelected,\n\t\t\t\t\t\t'is-zoom-out': isZoomOutMode,\n\t\t\t\t\t\t'has-block-breadcrumbs':\n\t\t\t\t\t\t\thasBlockBreadcrumbs &&\n\t\t\t\t\t\t\t! isDistractionFree &&\n\t\t\t\t\t\t\tcanvasMode === 'edit',\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t>\n\t\t\t\t<motion.div\n\t\t\t\t\tclassName=\"edit-site-layout__header-container\"\n\t\t\t\t\tvariants={ {\n\t\t\t\t\t\tisDistractionFree: {\n\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\ttransition: {\n\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\tdelay: 0.8,\n\t\t\t\t\t\t\t\tdelayChildren: 0.8,\n\t\t\t\t\t\t\t}, // How long to wait before the header exits\n\t\t\t\t\t\t},\n\t\t\t\t\t\tisDistractionFreeHovering: {\n\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\ttransition: {\n\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\tdelay: 0.2,\n\t\t\t\t\t\t\t\tdelayChildren: 0.2,\n\t\t\t\t\t\t\t}, // How long to wait before the header shows\n\t\t\t\t\t\t},\n\t\t\t\t\t\tview: { opacity: 1 },\n\t\t\t\t\t\tedit: { opacity: 1 },\n\t\t\t\t\t} }\n\t\t\t\t\twhileHover={\n\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t? 'isDistractionFreeHovering'\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tanimate={ headerAnimationState }\n\t\t\t\t>\n\t\t\t\t\t<SiteHub\n\t\t\t\t\t\tisTransparent={ isResizableFrameOversized }\n\t\t\t\t\t\tclassName=\"edit-site-layout__hub\"\n\t\t\t\t\t/>\n\t\t\t\t</motion.div>\n\n\t\t\t\t<div className=\"edit-site-layout__content\">\n\t\t\t\t\t{ /*\n\t\t\t\t\t\tThe NavigableRegion must always be rendered and not use\n\t\t\t\t\t\t`inert` otherwise `useNavigateRegions` will fail.\n\t\t\t\t\t*/ }\n\t\t\t\t\t{ ( ! isMobileViewport || ! areas.mobile ) && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tariaLabel={ __( 'Navigation' ) }\n\t\t\t\t\t\t\tclassName=\"edit-site-layout__sidebar-region\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<AnimatePresence>\n\t\t\t\t\t\t\t\t{ canvasMode === 'view' && (\n\t\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\t\tinitial={ { opacity: 0 } }\n\t\t\t\t\t\t\t\t\t\tanimate={ { opacity: 1 } }\n\t\t\t\t\t\t\t\t\t\texit={ { opacity: 0 } }\n\t\t\t\t\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\t\t\t\tduration:\n\t\t\t\t\t\t\t\t\t\t\t\t// Disable transition in mobile to emulate a full page transition.\n\t\t\t\t\t\t\t\t\t\t\t\tdisableMotion ||\n\t\t\t\t\t\t\t\t\t\t\t\tisMobileViewport\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t\t\t\t\t\t\t: ANIMATION_DURATION,\n\t\t\t\t\t\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\tclassName=\"edit-site-layout__sidebar\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<SidebarContent routeKey={ routeKey }>\n\t\t\t\t\t\t\t\t\t\t\t{ areas.sidebar }\n\t\t\t\t\t\t\t\t\t\t</SidebarContent>\n\t\t\t\t\t\t\t\t\t\t<SaveHub />\n\t\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</AnimatePresence>\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ isMobileViewport && areas.mobile && (\n\t\t\t\t\t\t<div className=\"edit-site-layout__mobile\">\n\t\t\t\t\t\t\t{ areas.mobile }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ ! isMobileViewport &&\n\t\t\t\t\t\tareas.content &&\n\t\t\t\t\t\tcanvasMode !== 'edit' && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName=\"edit-site-layout__area\"\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tmaxWidth: widths?.content,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ areas.content }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\n\t\t\t\t\t{ ! isMobileViewport && areas.preview && (\n\t\t\t\t\t\t<div className=\"edit-site-layout__canvas-container\">\n\t\t\t\t\t\t\t{ canvasResizer }\n\t\t\t\t\t\t\t{ !! canvasSize.width && (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t\t\t'edit-site-layout__canvas',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'is-right-aligned':\n\t\t\t\t\t\t\t\t\t\t\t\tisResizableFrameOversized,\n\t\t\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\tref={ animationRef }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<ErrorBoundary>\n\t\t\t\t\t\t\t\t\t\t<ResizableFrame\n\t\t\t\t\t\t\t\t\t\t\tisReady={ ! isEditorLoading }\n\t\t\t\t\t\t\t\t\t\t\tisFullWidth={\n\t\t\t\t\t\t\t\t\t\t\t\tcanvasMode === 'edit'\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tdefaultSize={ {\n\t\t\t\t\t\t\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\t\t\t\t\t\t\tcanvasSize.width -\n\t\t\t\t\t\t\t\t\t\t\t\t\t24 /* $canvas-padding */,\n\t\t\t\t\t\t\t\t\t\t\t\theight: canvasSize.height,\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\tisOversized={\n\t\t\t\t\t\t\t\t\t\t\t\tisResizableFrameOversized\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tsetIsOversized={\n\t\t\t\t\t\t\t\t\t\t\t\tsetIsResizableFrameOversized\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tinnerContentStyle={ {\n\t\t\t\t\t\t\t\t\t\t\t\tbackground:\n\t\t\t\t\t\t\t\t\t\t\t\t\tgradientValue ??\n\t\t\t\t\t\t\t\t\t\t\t\t\tbackgroundColor,\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ areas.preview }\n\t\t\t\t\t\t\t\t\t\t</ResizableFrame>\n\t\t\t\t\t\t\t\t\t</ErrorBoundary>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\n\t\t\t\t<SavePanel />\n\t\t\t</div>\n\t\t</>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AAKA,IAAAG,QAAA,GAAAH,OAAA;AAKA,IAAAI,KAAA,GAAAJ,OAAA;AACA,IAAAK,QAAA,GAAAL,OAAA;AACA,IAAAM,kBAAA,GAAAN,OAAA;AACA,IAAAO,SAAA,GAAAP,OAAA;AAIA,IAAAQ,YAAA,GAAAR,OAAA;AACA,IAAAS,YAAA,GAAAT,OAAA;AAIA,IAAAU,aAAA,GAAAV,OAAA;AACA,IAAAW,OAAA,GAAAX,OAAA;AAKA,IAAAY,cAAA,GAAAb,sBAAA,CAAAC,OAAA;AACA,IAAAa,MAAA,GAAAb,OAAA;AACA,IAAAc,2BAAA,GAAAf,sBAAA,CAAAC,OAAA;AACA,IAAAe,QAAA,GAAAhB,sBAAA,CAAAC,OAAA;AACA,IAAAgB,eAAA,GAAAjB,sBAAA,CAAAC,OAAA;AACA,IAAAiB,yBAAA,GAAAlB,sBAAA,CAAAC,OAAA;AACA,IAAAkB,WAAA,GAAAlB,OAAA;AACA,IAAAmB,UAAA,GAAApB,sBAAA,CAAAC,OAAA;AACA,IAAAoB,SAAA,GAAArB,sBAAA,CAAAC,OAAA;AACA,IAAAqB,OAAA,GAAAtB,sBAAA,CAAAC,OAAA;AACA,IAAAsB,kBAAA,GAAAtB,OAAA;AACA,IAAAuB,oBAAA,GAAAvB,OAAA;AACA,IAAAwB,MAAA,GAAAxB,OAAA;AACA,IAAAyB,OAAA,GAAA1B,sBAAA,CAAAC,OAAA;AACA,IAAA0B,UAAA,GAAA3B,sBAAA,CAAAC,OAAA;AACA,IAAA2B,QAAA,GAAA5B,sBAAA,CAAAC,OAAA;AACA,IAAA4B,QAAA,GAAA7B,sBAAA,CAAAC,OAAA;AArDA;AACA;AACA;;AAGA;AACA;AACA;;AA2BA;AACA;AACA;;AAmBA,MAAM;EAAE6B;AAAY,CAAC,GAAG,IAAAC,kBAAM,EAAEC,yBAAwB,CAAC;AACzD,MAAM;EAAEC;AAAkB,CAAC,GAAG,IAAAF,kBAAM,EAAEG,qBAAoB,CAAC;AAC3D,MAAM;EAAEC;AAAe,CAAC,GAAG,IAAAJ,kBAAM,EAAEK,wBAAuB,CAAC;AAC3D,MAAM;EAAEC;AAAgB,CAAC,GAAG,IAAAN,kBAAM,EAAEO,mBAAkB,CAAC;AAEvD,MAAMC,kBAAkB,GAAG,GAAG;AAEf,SAASC,MAAMA,CAAA,EAAG;EAChC;EACA,IAAAC,mCAA0B,EAAC,CAAC;EAC5B,IAAAC,iCAAwB,EAAC,CAAC;EAC1BZ,WAAW,CAAC,CAAC;EACb,IAAAa,wCAAmB,EAAC,CAAC;EACrB,IAAAC,oCAAiB,EAAC,CAAC;EAEnB,MAAMC,gBAAgB,GAAG,IAAAC,yBAAgB,EAAE,QAAQ,EAAE,GAAI,CAAC;EAE1D,MAAM;IACLC,iBAAiB;IACjBC,aAAa;IACbC,eAAe;IACfC,gBAAgB;IAChBC,UAAU;IACVC,gBAAgB;IAChBC,YAAY;IACZC;EACD,CAAC,GAAG,IAAAC,eAAS,EAAIC,MAAM,IAAM;IAC5B,MAAM;MAAEC;IAA8B,CAAC,GAAGD,MAAM,CAC/CE,wBACD,CAAC;IACD,MAAM;MAAEC;IAAc,CAAC,GAAG,IAAA5B,kBAAM,EAAEyB,MAAM,CAAEI,YAAc,CAAE,CAAC;IAC3D,OAAO;MACNT,UAAU,EAAEQ,aAAa,CAAC,CAAC;MAC3BP,gBAAgB,EAAEK,6BAA6B,CAC9C,6BACD,CAAC;MACDJ,YAAY,EAAEI,6BAA6B,CAC1C,yBACD,CAAC;MACDR,eAAe,EAAEO,MAAM,CAAEK,kBAAiB,CAAC,CAACC,GAAG,CAC9C,MAAM,EACN,cACD,CAAC;MACDf,iBAAiB,EAAES,MAAM,CAAEK,kBAAiB,CAAC,CAACC,GAAG,CAChD,MAAM,EACN,iBACD,CAAC;MACDR,mBAAmB,EAAEE,MAAM,CAAEK,kBAAiB,CAAC,CAACC,GAAG,CAClD,MAAM,EACN,sBACD,CAAC;MACDd,aAAa,EACZQ,MAAM,CAAEO,kBAAiB,CAAC,CAACC,uBAAuB,CAAC,CAAC,KACpD,UAAU;MACXd,gBAAgB,EACfM,MAAM,CAAEO,kBAAiB,CAAC,CAACE,sBAAsB,CAAC;IACpD,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EACP,MAAMC,oBAAoB,GAAG,IAAAC,wCAAkB,EAAE;IAChDC,QAAQ,EAAEhB,gBAAgB;IAC1BiB,IAAI,EAAEhB;EACP,CAAE,CAAC;EACH,MAAMiB,aAAa,GAAG,IAAAC,yBAAgB,EAAC,CAAC;EACxC,MAAM,CAAEC,aAAa,EAAEC,UAAU,CAAE,GAAG,IAAAC,0BAAiB,EAAC,CAAC;EACzD,MAAM,CAAEC,WAAW,CAAE,GAAG,IAAAD,0BAAiB,EAAC,CAAC;EAC3C,MAAME,eAAe,GAAG,IAAAC,6BAAsB,EAAC,CAAC;EAChD,MAAM,CAAEC,yBAAyB,EAAEC,4BAA4B,CAAE,GAChE,IAAAC,iBAAQ,EAAE,KAAM,CAAC;EAClB,MAAM;IAAEC,GAAG,EAAEC,QAAQ;IAAEC,KAAK;IAAEC;EAAO,CAAC,GAAG,IAAAC,eAAc,EAAC,CAAC;EACzD,MAAMC,YAAY,GAAG,IAAAC,kBAAkB,EAAE;IACxCC,wBAAwB,EAAErC,UAAU,GAAG,IAAI,GAAG+B;EAC/C,CAAE,CAAC;;EAEH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,IAAIO,oBAAoB;EAExB,IAAKtC,UAAU,KAAK,MAAM,EAAG;IAC5B;IACA;IACAsC,oBAAoB,GAAG,MAAM;EAC9B,CAAC,MAAM,IAAK1C,iBAAiB,EAAG;IAC/B0C,oBAAoB,GAAG,mBAAmB;EAC3C,CAAC,MAAM;IACNA,oBAAoB,GAAGtC,UAAU,CAAC,CAAC;EACpC;;EAEA;EACA,IAAIuC,cAAc,GAAG,aAAa;EAElC,IAAKvC,UAAU,KAAK,MAAM,EAAG;IAC5BuC,cAAc,GAAG,kBAAkB;EACpC;EACA,IAAKxC,gBAAgB,EAAG;IACvBwC,cAAc,GAAG,sBAAsB;EACxC;EACAzD,iBAAiB,CAAEyD,cAAe,CAAC;EAEnC,MAAM,CAAEC,eAAe,CAAE,GAAGxD,cAAc,CAAE,kBAAmB,CAAC;EAChE,MAAM,CAAEyD,aAAa,CAAE,GAAGzD,cAAc,CAAE,gBAAiB,CAAC;;EAE5D;EACA;EACA;EACA,IAAKgB,UAAU,KAAK,MAAM,EAAG;IAC5B,OAAO,IAAI;EACZ;EAEA,OACC,IAAA0C,MAAA,CAAAC,aAAA,EAAAD,MAAA,CAAAE,QAAA,QACC,IAAAF,MAAA,CAAAC,aAAA,EAACtF,SAAA,CAAAwF,WAAW,MAAE,CAAC,EACf,IAAAH,MAAA,CAAAC,aAAA,EAACzE,SAAA,CAAA4E,OAAyB,MAAE,CAAC,EAC7B,IAAAJ,MAAA,CAAAC,aAAA,EAACxE,OAAA,CAAA2E,OAAuB,MAAE,CAAC,EACzBtB,WAAW,EACb,IAAAkB,MAAA,CAAAC,aAAA;IAAA,GACM5B,oBAAoB;IACzBgC,GAAG,EAAGhC,oBAAoB,CAACgC,GAAK;IAChCC,SAAS,EAAG,IAAAC,mBAAU,EACrB,kBAAkB,EAClBlC,oBAAoB,CAACiC,SAAS,EAC9B;MACC,qBAAqB,EACpBpD,iBAAiB,IAAII,UAAU,KAAK,MAAM;MAC3C,gBAAgB,EAAEA,UAAU,KAAK,MAAM;MACvC,mBAAmB,EAAEF,eAAe;MACpC,0BAA0B,EAAEC,gBAAgB;MAC5C,aAAa,EAAEF,aAAa;MAC5B,uBAAuB,EACtBM,mBAAmB,IACnB,CAAEP,iBAAiB,IACnBI,UAAU,KAAK;IACjB,CACD;EAAG,GAEH,IAAA0C,MAAA,CAAAC,aAAA,EAAC3F,WAAA,CAAAkG,gBAAM,CAACC,GAAG;IACVH,SAAS,EAAC,oCAAoC;IAC9CI,QAAQ,EAAG;MACVxD,iBAAiB,EAAE;QAClByD,OAAO,EAAE,CAAC;QACVC,UAAU,EAAE;UACXC,IAAI,EAAE,OAAO;UACbC,KAAK,EAAE,GAAG;UACVC,aAAa,EAAE;QAChB,CAAC,CAAE;MACJ,CAAC;MACDC,yBAAyB,EAAE;QAC1BL,OAAO,EAAE,CAAC;QACVC,UAAU,EAAE;UACXC,IAAI,EAAE,OAAO;UACbC,KAAK,EAAE,GAAG;UACVC,aAAa,EAAE;QAChB,CAAC,CAAE;MACJ,CAAC;MACDE,IAAI,EAAE;QAAEN,OAAO,EAAE;MAAE,CAAC;MACpBO,IAAI,EAAE;QAAEP,OAAO,EAAE;MAAE;IACpB,CAAG;IACHQ,UAAU,EACTjE,iBAAiB,GACd,2BAA2B,GAC3BkE,SACH;IACDC,OAAO,EAAGzB;EAAsB,GAEhC,IAAAI,MAAA,CAAAC,aAAA,EAAC9E,QAAA,CAAAiF,OAAO;IACPkB,aAAa,EAAGrC,yBAA2B;IAC3CqB,SAAS,EAAC;EAAuB,CACjC,CACU,CAAC,EAEb,IAAAN,MAAA,CAAAC,aAAA;IAAKK,SAAS,EAAC;EAA2B,GAKvC,CAAE,CAAEtD,gBAAgB,IAAI,CAAEsC,KAAK,CAACiC,MAAM,KACvC,IAAAvB,MAAA,CAAAC,aAAA,EAACzD,eAAe;IACfgF,SAAS,EAAG,IAAAC,QAAE,EAAE,YAAa,CAAG;IAChCnB,SAAS,EAAC;EAAkC,GAE5C,IAAAN,MAAA,CAAAC,aAAA,EAAC3F,WAAA,CAAAoH,yBAAe,QACbpE,UAAU,KAAK,MAAM,IACtB,IAAA0C,MAAA,CAAAC,aAAA,EAAC3F,WAAA,CAAAkG,gBAAM,CAACC,GAAG;IACVkB,OAAO,EAAG;MAAEhB,OAAO,EAAE;IAAE,CAAG;IAC1BU,OAAO,EAAG;MAAEV,OAAO,EAAE;IAAE,CAAG;IAC1BiB,IAAI,EAAG;MAAEjB,OAAO,EAAE;IAAE,CAAG;IACvBC,UAAU,EAAG;MACZC,IAAI,EAAE,OAAO;MACbgB,QAAQ;MACP;MACApD,aAAa,IACbzB,gBAAgB,GACb,CAAC,GACDN,kBAAkB;MACtBoF,IAAI,EAAE;IACP,CAAG;IACHxB,SAAS,EAAC;EAA2B,GAErC,IAAAN,MAAA,CAAAC,aAAA,EAAClE,QAAA,CAAAqE,OAAc;IAACf,QAAQ,EAAGA;EAAU,GAClCC,KAAK,CAACyC,OACO,CAAC,EACjB,IAAA/B,MAAA,CAAAC,aAAA,EAACjE,QAAA,CAAAoE,OAAO,MAAE,CACC,CAEG,CACD,CACjB,EAECpD,gBAAgB,IAAIsC,KAAK,CAACiC,MAAM,IACjC,IAAAvB,MAAA,CAAAC,aAAA;IAAKK,SAAS,EAAC;EAA0B,GACtChB,KAAK,CAACiC,MACJ,CACL,EAEC,CAAEvE,gBAAgB,IACnBsC,KAAK,CAAC0C,OAAO,IACb1E,UAAU,KAAK,MAAM,IACpB,IAAA0C,MAAA,CAAAC,aAAA;IACCK,SAAS,EAAC,wBAAwB;IAClC2B,KAAK,EAAG;MACPC,QAAQ,EAAE3C,MAAM,EAAEyC;IACnB;EAAG,GAED1C,KAAK,CAAC0C,OACJ,CACL,EAEA,CAAEhF,gBAAgB,IAAIsC,KAAK,CAAC6C,OAAO,IACpC,IAAAnC,MAAA,CAAAC,aAAA;IAAKK,SAAS,EAAC;EAAoC,GAChD3B,aAAa,EACb,CAAC,CAAEC,UAAU,CAACwD,KAAK,IACpB,IAAApC,MAAA,CAAAC,aAAA;IACCK,SAAS,EAAG,IAAAC,mBAAU,EACrB,0BAA0B,EAC1B;MACC,kBAAkB,EACjBtB;IACF,CACD,CAAG;IACHoB,GAAG,EAAGZ;EAAc,GAEpB,IAAAO,MAAA,CAAAC,aAAA,EAACjF,cAAA,CAAAoF,OAAa,QACb,IAAAJ,MAAA,CAAAC,aAAA,EAAC7E,eAAA,CAAAgF,OAAc;IACdiC,OAAO,EAAG,CAAEtD,eAAiB;IAC7BuD,WAAW,EACVhF,UAAU,KAAK,MACf;IACDiF,WAAW,EAAG;MACbH,KAAK,EACJxD,UAAU,CAACwD,KAAK,GAChB,EAAE,CAAC;MACJI,MAAM,EAAE5D,UAAU,CAAC4D;IACpB,CAAG;IACHC,WAAW,EACVxD,yBACA;IACDyD,cAAc,EACbxD,4BACA;IACDyD,iBAAiB,EAAG;MACnBC,UAAU,EACT7C,aAAa,aAAbA,aAAa,cAAbA,aAAa,GACbD;IACF;EAAG,GAEDR,KAAK,CAAC6C,OACO,CACF,CACX,CAEF,CAEF,CAAC,EAEN,IAAAnC,MAAA,CAAAC,aAAA,EAAC1E,UAAA,CAAA6E,OAAS,MAAE,CACR,CACJ,CAAC;AAEL","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_data","_components","_compose","_i18n","_element","_keyboardShortcuts","_commands","_preferences","_blockEditor","_coreCommands","_editor","_errorBoundary","_store","_useInitEditedEntityFromUrl","_siteHub","_resizableFrame","_useSyncCanvasModeWithUrl","_lockUnlock","_savePanel","_register","_global","_useCommonCommands","_useEditModeCommands","_hooks","_router","_animation","_sidebar","_saveHub","_jsxRuntime","useCommands","unlock","coreCommandsPrivateApis","useCommandContext","commandsPrivateApis","useGlobalStyle","blockEditorPrivateApis","NavigableRegion","editorPrivateApis","ANIMATION_DURATION","Layout","useInitEditedEntityFromURL","useSyncCanvasModeWithURL","useEditModeCommands","useCommonCommands","isMobileViewport","useViewportMatch","isDistractionFree","hasFixedToolbar","hasBlockSelected","canvasMode","previousShortcut","nextShortcut","hasBlockBreadcrumbs","useSelect","select","getAllShortcutKeyCombinations","keyboardShortcutsStore","getCanvasMode","editSiteStore","preferencesStore","get","blockEditorStore","getBlockSelectionStart","navigateRegionsProps","useNavigateRegions","previous","next","disableMotion","useReducedMotion","canvasResizer","canvasSize","useResizeObserver","fullResizer","isEditorLoading","useIsSiteEditorLoading","isResizableFrameOversized","setIsResizableFrameOversized","useState","key","routeKey","areas","widths","useLayoutAreas","animationRef","useMovingAnimation","triggerAnimationOnChange","headerAnimationState","commandContext","backgroundColor","gradientValue","jsxs","Fragment","children","jsx","CommandMenu","default","ref","className","clsx","__unstableMotion","div","variants","opacity","transition","type","delay","delayChildren","isDistractionFreeHovering","view","edit","whileHover","undefined","animate","isTransparent","mobile","ariaLabel","__","__unstableAnimatePresence","initial","exit","duration","ease","sidebar","EditorSnackbars","content","style","maxWidth","preview","width","isReady","isFullWidth","defaultSize","height","isOversized","setIsOversized","innerContentStyle","background"],"sources":["@wordpress/edit-site/src/components/layout/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport {\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n\t__unstableUseNavigateRegions as useNavigateRegions,\n} from '@wordpress/components';\nimport {\n\tuseReducedMotion,\n\tuseViewportMatch,\n\tuseResizeObserver,\n} from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';\nimport {\n\tCommandMenu,\n\tprivateApis as commandsPrivateApis,\n} from '@wordpress/commands';\nimport { store as preferencesStore } from '@wordpress/preferences';\nimport {\n\tprivateApis as blockEditorPrivateApis,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';\nimport {\n\tEditorSnackbars,\n\tprivateApis as editorPrivateApis,\n} from '@wordpress/editor';\n\n/**\n * Internal dependencies\n */\nimport ErrorBoundary from '../error-boundary';\nimport { store as editSiteStore } from '../../store';\nimport useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';\nimport SiteHub from '../site-hub';\nimport ResizableFrame from '../resizable-frame';\nimport useSyncCanvasModeWithURL from '../sync-state-with-url/use-sync-canvas-mode-with-url';\nimport { unlock } from '../../lock-unlock';\nimport SavePanel from '../save-panel';\nimport KeyboardShortcutsRegister from '../keyboard-shortcuts/register';\nimport KeyboardShortcutsGlobal from '../keyboard-shortcuts/global';\nimport { useCommonCommands } from '../../hooks/commands/use-common-commands';\nimport { useEditModeCommands } from '../../hooks/commands/use-edit-mode-commands';\nimport { useIsSiteEditorLoading } from './hooks';\nimport useLayoutAreas from './router';\nimport useMovingAnimation from './animation';\nimport SidebarContent from '../sidebar';\nimport SaveHub from '../save-hub';\n\nconst { useCommands } = unlock( coreCommandsPrivateApis );\nconst { useCommandContext } = unlock( commandsPrivateApis );\nconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\nconst { NavigableRegion } = unlock( editorPrivateApis );\n\nconst ANIMATION_DURATION = 0.3;\n\nexport default function Layout() {\n\t// This ensures the edited entity id and type are initialized properly.\n\tuseInitEditedEntityFromURL();\n\tuseSyncCanvasModeWithURL();\n\tuseCommands();\n\tuseEditModeCommands();\n\tuseCommonCommands();\n\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\n\tconst {\n\t\tisDistractionFree,\n\t\thasFixedToolbar,\n\t\thasBlockSelected,\n\t\tcanvasMode,\n\t\tpreviousShortcut,\n\t\tnextShortcut,\n\t\thasBlockBreadcrumbs,\n\t} = useSelect( ( select ) => {\n\t\tconst { getAllShortcutKeyCombinations } = select(\n\t\t\tkeyboardShortcutsStore\n\t\t);\n\t\tconst { getCanvasMode } = unlock( select( editSiteStore ) );\n\t\treturn {\n\t\t\tcanvasMode: getCanvasMode(),\n\t\t\tpreviousShortcut: getAllShortcutKeyCombinations(\n\t\t\t\t'core/editor/previous-region'\n\t\t\t),\n\t\t\tnextShortcut: getAllShortcutKeyCombinations(\n\t\t\t\t'core/editor/next-region'\n\t\t\t),\n\t\t\thasFixedToolbar: select( preferencesStore ).get(\n\t\t\t\t'core',\n\t\t\t\t'fixedToolbar'\n\t\t\t),\n\t\t\tisDistractionFree: select( preferencesStore ).get(\n\t\t\t\t'core',\n\t\t\t\t'distractionFree'\n\t\t\t),\n\t\t\thasBlockBreadcrumbs: select( preferencesStore ).get(\n\t\t\t\t'core',\n\t\t\t\t'showBlockBreadcrumbs'\n\t\t\t),\n\t\t\thasBlockSelected:\n\t\t\t\tselect( blockEditorStore ).getBlockSelectionStart(),\n\t\t};\n\t}, [] );\n\tconst navigateRegionsProps = useNavigateRegions( {\n\t\tprevious: previousShortcut,\n\t\tnext: nextShortcut,\n\t} );\n\tconst disableMotion = useReducedMotion();\n\tconst [ canvasResizer, canvasSize ] = useResizeObserver();\n\tconst [ fullResizer ] = useResizeObserver();\n\tconst isEditorLoading = useIsSiteEditorLoading();\n\tconst [ isResizableFrameOversized, setIsResizableFrameOversized ] =\n\t\tuseState( false );\n\tconst { key: routeKey, areas, widths } = useLayoutAreas();\n\tconst animationRef = useMovingAnimation( {\n\t\ttriggerAnimationOnChange: canvasMode + '__' + routeKey,\n\t} );\n\n\t// This determines which animation variant should apply to the header.\n\t// There is also a `isDistractionFreeHovering` state that gets priority\n\t// when hovering the `edit-site-layout__header-container` in distraction\n\t// free mode. It's set via framer and trickles down to all the children\n\t// so they can use this variant state too.\n\t//\n\t// TODO: The issue with this is we want to have the hover state stick when hovering\n\t// a popover opened via the header. We'll probably need to lift this state to\n\t// handle it ourselves. Also, focusWithin the header needs to be handled.\n\tlet headerAnimationState;\n\n\tif ( canvasMode === 'view' ) {\n\t\t// We need 'view' to always take priority so 'isDistractionFree'\n\t\t// doesn't bleed over into the view (sidebar) state\n\t\theaderAnimationState = 'view';\n\t} else if ( isDistractionFree ) {\n\t\theaderAnimationState = 'isDistractionFree';\n\t} else {\n\t\theaderAnimationState = canvasMode; // edit, view, init\n\t}\n\n\t// Sets the right context for the command palette\n\tlet commandContext = 'site-editor';\n\n\tif ( canvasMode === 'edit' ) {\n\t\tcommandContext = 'entity-edit';\n\t}\n\tif ( hasBlockSelected ) {\n\t\tcommandContext = 'block-selection-edit';\n\t}\n\tuseCommandContext( commandContext );\n\n\tconst [ backgroundColor ] = useGlobalStyle( 'color.background' );\n\tconst [ gradientValue ] = useGlobalStyle( 'color.gradient' );\n\n\t// Synchronizing the URL with the store value of canvasMode happens in an effect\n\t// This condition ensures the component is only rendered after the synchronization happens\n\t// which prevents any animations due to potential canvasMode value change.\n\tif ( canvasMode === 'init' ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<CommandMenu />\n\t\t\t<KeyboardShortcutsRegister />\n\t\t\t<KeyboardShortcutsGlobal />\n\t\t\t{ fullResizer }\n\t\t\t<div\n\t\t\t\t{ ...navigateRegionsProps }\n\t\t\t\tref={ navigateRegionsProps.ref }\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\t'edit-site-layout',\n\t\t\t\t\tnavigateRegionsProps.className,\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-distraction-free':\n\t\t\t\t\t\t\tisDistractionFree && canvasMode === 'edit',\n\t\t\t\t\t\t'is-full-canvas': canvasMode === 'edit',\n\t\t\t\t\t\t'has-fixed-toolbar': hasFixedToolbar,\n\t\t\t\t\t\t'is-block-toolbar-visible': hasBlockSelected,\n\t\t\t\t\t\t'has-block-breadcrumbs':\n\t\t\t\t\t\t\thasBlockBreadcrumbs &&\n\t\t\t\t\t\t\t! isDistractionFree &&\n\t\t\t\t\t\t\tcanvasMode === 'edit',\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t>\n\t\t\t\t<motion.div\n\t\t\t\t\tclassName=\"edit-site-layout__header-container\"\n\t\t\t\t\tvariants={ {\n\t\t\t\t\t\tisDistractionFree: {\n\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\ttransition: {\n\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\tdelay: 0.8,\n\t\t\t\t\t\t\t\tdelayChildren: 0.8,\n\t\t\t\t\t\t\t}, // How long to wait before the header exits\n\t\t\t\t\t\t},\n\t\t\t\t\t\tisDistractionFreeHovering: {\n\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\ttransition: {\n\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\tdelay: 0.2,\n\t\t\t\t\t\t\t\tdelayChildren: 0.2,\n\t\t\t\t\t\t\t}, // How long to wait before the header shows\n\t\t\t\t\t\t},\n\t\t\t\t\t\tview: { opacity: 1 },\n\t\t\t\t\t\tedit: { opacity: 1 },\n\t\t\t\t\t} }\n\t\t\t\t\twhileHover={\n\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t? 'isDistractionFreeHovering'\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tanimate={ headerAnimationState }\n\t\t\t\t>\n\t\t\t\t\t<SiteHub\n\t\t\t\t\t\tisTransparent={ isResizableFrameOversized }\n\t\t\t\t\t\tclassName=\"edit-site-layout__hub\"\n\t\t\t\t\t/>\n\t\t\t\t</motion.div>\n\n\t\t\t\t<div className=\"edit-site-layout__content\">\n\t\t\t\t\t{ /*\n\t\t\t\t\t\tThe NavigableRegion must always be rendered and not use\n\t\t\t\t\t\t`inert` otherwise `useNavigateRegions` will fail.\n\t\t\t\t\t*/ }\n\t\t\t\t\t{ ( ! isMobileViewport || ! areas.mobile ) && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tariaLabel={ __( 'Navigation' ) }\n\t\t\t\t\t\t\tclassName=\"edit-site-layout__sidebar-region\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<AnimatePresence>\n\t\t\t\t\t\t\t\t{ canvasMode === 'view' && (\n\t\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\t\tinitial={ { opacity: 0 } }\n\t\t\t\t\t\t\t\t\t\tanimate={ { opacity: 1 } }\n\t\t\t\t\t\t\t\t\t\texit={ { opacity: 0 } }\n\t\t\t\t\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\t\t\t\tduration:\n\t\t\t\t\t\t\t\t\t\t\t\t// Disable transition in mobile to emulate a full page transition.\n\t\t\t\t\t\t\t\t\t\t\t\tdisableMotion ||\n\t\t\t\t\t\t\t\t\t\t\t\tisMobileViewport\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t\t\t\t\t\t\t: ANIMATION_DURATION,\n\t\t\t\t\t\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\tclassName=\"edit-site-layout__sidebar\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<SidebarContent routeKey={ routeKey }>\n\t\t\t\t\t\t\t\t\t\t\t{ areas.sidebar }\n\t\t\t\t\t\t\t\t\t\t</SidebarContent>\n\t\t\t\t\t\t\t\t\t\t<SaveHub />\n\t\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</AnimatePresence>\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\n\t\t\t\t\t<EditorSnackbars />\n\n\t\t\t\t\t{ isMobileViewport && areas.mobile && (\n\t\t\t\t\t\t<div className=\"edit-site-layout__mobile\">\n\t\t\t\t\t\t\t{ areas.mobile }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ ! isMobileViewport &&\n\t\t\t\t\t\tareas.content &&\n\t\t\t\t\t\tcanvasMode !== 'edit' && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName=\"edit-site-layout__area\"\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tmaxWidth: widths?.content,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ areas.content }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\n\t\t\t\t\t{ ! isMobileViewport && areas.preview && (\n\t\t\t\t\t\t<div className=\"edit-site-layout__canvas-container\">\n\t\t\t\t\t\t\t{ canvasResizer }\n\t\t\t\t\t\t\t{ !! canvasSize.width && (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t\t'edit-site-layout__canvas',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'is-right-aligned':\n\t\t\t\t\t\t\t\t\t\t\t\tisResizableFrameOversized,\n\t\t\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\tref={ animationRef }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<ErrorBoundary>\n\t\t\t\t\t\t\t\t\t\t<ResizableFrame\n\t\t\t\t\t\t\t\t\t\t\tisReady={ ! isEditorLoading }\n\t\t\t\t\t\t\t\t\t\t\tisFullWidth={\n\t\t\t\t\t\t\t\t\t\t\t\tcanvasMode === 'edit'\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tdefaultSize={ {\n\t\t\t\t\t\t\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\t\t\t\t\t\t\tcanvasSize.width -\n\t\t\t\t\t\t\t\t\t\t\t\t\t24 /* $canvas-padding */,\n\t\t\t\t\t\t\t\t\t\t\t\theight: canvasSize.height,\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\tisOversized={\n\t\t\t\t\t\t\t\t\t\t\t\tisResizableFrameOversized\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tsetIsOversized={\n\t\t\t\t\t\t\t\t\t\t\t\tsetIsResizableFrameOversized\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tinnerContentStyle={ {\n\t\t\t\t\t\t\t\t\t\t\t\tbackground:\n\t\t\t\t\t\t\t\t\t\t\t\t\tgradientValue ??\n\t\t\t\t\t\t\t\t\t\t\t\t\tbackgroundColor,\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ areas.preview }\n\t\t\t\t\t\t\t\t\t\t</ResizableFrame>\n\t\t\t\t\t\t\t\t\t</ErrorBoundary>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\n\t\t\t\t<SavePanel />\n\t\t\t</div>\n\t\t</>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/build/components/layout/router.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = useLayoutAreas;
-var _react = require("react");
 var _router = require("@wordpress/router");
 var _i18n = require("@wordpress/i18n");
+var _element = require("@wordpress/element");
 var _lockUnlock = require("../../lock-unlock");
 var _hooks = require("./hooks");
 var _editor = _interopRequireDefault(require("../editor"));
@@ -18,13 +18,12 @@ var _sidebarNavigationScreen = _interopRequireDefault(require("../sidebar-naviga
 var _sidebarNavigationScreenGlobalStyles = _interopRequireDefault(require("../sidebar-navigation-screen-global-styles"));
 var _sidebarNavigationScreenMain = _interopRequireDefault(require("../sidebar-navigation-screen-main"));
 var _sidebarNavigationScreenNavigationMenus = _interopRequireDefault(require("../sidebar-navigation-screen-navigation-menus"));
-var _sidebarNavigationScreenPage = _interopRequireDefault(require("../sidebar-navigation-screen-page"));
 var _sidebarNavigationScreenTemplatesBrowse = _interopRequireDefault(require("../sidebar-navigation-screen-templates-browse"));
-var _sidebarNavigationScreenTemplate = _interopRequireDefault(require("../sidebar-navigation-screen-template"));
-var _sidebarNavigationScreenPattern = _interopRequireDefault(require("../sidebar-navigation-screen-pattern"));
 var _sidebarNavigationScreenPatterns = _interopRequireDefault(require("../sidebar-navigation-screen-patterns"));
 var _sidebarNavigationScreenNavigationMenu = _interopRequireDefault(require("../sidebar-navigation-screen-navigation-menu"));
 var _sidebarDataviews = _interopRequireDefault(require("../sidebar-dataviews"));
+var _constants = require("../../utils/constants");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
@@ -37,9 +36,51 @@ const {
   useLocation,
   useHistory
 } = (0, _lockUnlock.unlock)(_router.privateApis);
+function useRedirectOldPaths() {
+  const history = useHistory();
+  const {
+    params
+  } = useLocation();
+  (0, _element.useEffect)(() => {
+    const {
+      postType,
+      path,
+      categoryType,
+      ...rest
+    } = params;
+    if (path === '/wp_template_part/all') {
+      history.replace({
+        postType: _constants.TEMPLATE_PART_POST_TYPE
+      });
+    }
+    if (path === '/page') {
+      history.replace({
+        postType: 'page',
+        ...rest
+      });
+    }
+    if (path === '/wp_template') {
+      history.replace({
+        postType: _constants.TEMPLATE_POST_TYPE,
+        ...rest
+      });
+    }
+    if (path === '/patterns') {
+      history.replace({
+        postType: categoryType === _constants.TEMPLATE_PART_POST_TYPE ? _constants.TEMPLATE_PART_POST_TYPE : _constants.PATTERN_TYPES.user,
+        ...rest
+      });
+    }
+    if (path === '/navigation') {
+      history.replace({
+        postType: _constants.NAVIGATION_POST_TYPE,
+        ...rest
+      });
+    }
+  }, [history, params]);
+}
 function useLayoutAreas() {
   const isSiteEditorLoading = (0, _hooks.useIsSiteEditorLoading)();
-  const history = useHistory();
   const {
     params
   } = useLocation();
@@ -50,33 +91,27 @@ function useLayoutAreas() {
     layout,
     isCustom,
     canvas
-  } = params !== null && params !== void 0 ? params : {};
-
-  // Note: Since "sidebar" is not yet supported here,
-  // returning undefined from "mobile" means show the sidebar.
+  } = params;
+  useRedirectOldPaths();
 
   // Page list
-  if (path === '/page') {
+  if (postType === 'page') {
     const isListLayout = layout === 'list' || !layout;
     return {
-      key: 'pages-list',
+      key: 'pages',
       areas: {
-        sidebar: (0, _react.createElement)(_sidebarNavigationScreen.default, {
-          title: (0, _i18n.__)('Manage pages'),
-          content: (0, _react.createElement)(_sidebarDataviews.default, null)
+        sidebar: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sidebarNavigationScreen.default, {
+          title: (0, _i18n.__)('Pages'),
+          backPath: {},
+          content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sidebarDataviews.default, {})
         }),
-        content: (0, _react.createElement)(_pagePages.default, null),
-        preview: isListLayout && (0, _react.createElement)(_editor.default, {
-          isLoading: isSiteEditorLoading,
-          onClick: () => history.push({
-            postType: 'page',
-            postId,
-            canvas: 'edit'
-          })
+        content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_pagePages.default, {}),
+        preview: (isListLayout || canvas === 'edit') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_editor.default, {
+          isLoading: isSiteEditorLoading
         }),
-        mobile: canvas === 'edit' ? (0, _react.createElement)(_editor.default, {
+        mobile: canvas === 'edit' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_editor.default, {
           isLoading: isSiteEditorLoading
-        }) : (0, _react.createElement)(_pagePages.default, null)
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_pagePages.default, {})
       },
       widths: {
         content: isListLayout ? 380 : undefined
@@ -84,44 +119,20 @@ function useLayoutAreas() {
     };
   }
 
-  // Regular other post types
-  if (postType && postId) {
-    let sidebar;
-    if (postType === 'wp_template_part' || postType === 'wp_block') {
-      sidebar = (0, _react.createElement)(_sidebarNavigationScreenPattern.default, null);
-    } else if (postType === 'wp_template') {
-      sidebar = (0, _react.createElement)(_sidebarNavigationScreenTemplate.default, null);
-    } else if (postType === 'page') {
-      sidebar = (0, _react.createElement)(_sidebarNavigationScreenPage.default, null);
-    } else {
-      sidebar = (0, _react.createElement)(_sidebarNavigationScreenNavigationMenu.default, null);
-    }
-    return {
-      key: 'page',
-      areas: {
-        sidebar,
-        preview: (0, _react.createElement)(_editor.default, {
-          isLoading: isSiteEditorLoading
-        }),
-        mobile: canvas === 'edit' && (0, _react.createElement)(_editor.default, {
-          isLoading: isSiteEditorLoading
-        })
-      }
-    };
-  }
-
   // Templates
-  if (path === '/wp_template') {
+  if (postType === _constants.TEMPLATE_POST_TYPE) {
     const isListLayout = isCustom !== 'true' && layout === 'list';
     return {
-      key: 'templates-list',
+      key: 'templates',
       areas: {
-        sidebar: (0, _react.createElement)(_sidebarNavigationScreenTemplatesBrowse.default, null),
-        content: (0, _react.createElement)(_pageTemplates.default, null),
-        preview: isListLayout && (0, _react.createElement)(_editor.default, {
+        sidebar: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sidebarNavigationScreenTemplatesBrowse.default, {
+          backPath: {}
+        }),
+        content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_pageTemplates.default, {}),
+        preview: (isListLayout || canvas === 'edit') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_editor.default, {
           isLoading: isSiteEditorLoading
         }),
-        mobile: (0, _react.createElement)(_pageTemplates.default, null)
+        mobile: /*#__PURE__*/(0, _jsxRuntime.jsx)(_pageTemplates.default, {})
       },
       widths: {
         content: isListLayout ? 380 : undefined
@@ -129,17 +140,19 @@ function useLayoutAreas() {
     };
   }
 
-  /* Patterns and Template Parts
-   * `/wp_template_part/all` path is no longer used, but uses Patterns page screens for
-   * backwards compatibility.
-   */
-  if (path === '/patterns' || path === '/wp_template_part/all') {
+  // Patterns
+  if ([_constants.TEMPLATE_PART_POST_TYPE, _constants.PATTERN_TYPES.user].includes(postType)) {
     return {
       key: 'patterns',
       areas: {
-        sidebar: (0, _react.createElement)(_sidebarNavigationScreenPatterns.default, null),
-        content: (0, _react.createElement)(_pagePatterns.default, null),
-        mobile: (0, _react.createElement)(_pagePatterns.default, null)
+        sidebar: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sidebarNavigationScreenPatterns.default, {
+          backPath: {}
+        }),
+        content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_pagePatterns.default, {}),
+        mobile: /*#__PURE__*/(0, _jsxRuntime.jsx)(_pagePatterns.default, {}),
+        preview: canvas === 'edit' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_editor.default, {
+          isLoading: isSiteEditorLoading
+        })
       }
     };
   }
@@ -149,11 +162,13 @@ function useLayoutAreas() {
     return {
       key: 'styles',
       areas: {
-        sidebar: (0, _react.createElement)(_sidebarNavigationScreenGlobalStyles.default, null),
-        preview: (0, _react.createElement)(_editor.default, {
+        sidebar: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sidebarNavigationScreenGlobalStyles.default, {
+          backPath: {}
+        }),
+        preview: /*#__PURE__*/(0, _jsxRuntime.jsx)(_editor.default, {
           isLoading: isSiteEditorLoading
         }),
-        mobile: canvas === 'edit' && (0, _react.createElement)(_editor.default, {
+        mobile: canvas === 'edit' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_editor.default, {
           isLoading: isSiteEditorLoading
         })
       }
@@ -161,15 +176,35 @@ function useLayoutAreas() {
   }
 
   // Navigation
-  if (path === '/navigation') {
+  if (postType === _constants.NAVIGATION_POST_TYPE) {
+    if (postId) {
+      return {
+        key: 'navigation',
+        areas: {
+          sidebar: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sidebarNavigationScreenNavigationMenu.default, {
+            backPath: {
+              postType: _constants.NAVIGATION_POST_TYPE
+            }
+          }),
+          preview: /*#__PURE__*/(0, _jsxRuntime.jsx)(_editor.default, {
+            isLoading: isSiteEditorLoading
+          }),
+          mobile: canvas === 'edit' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_editor.default, {
+            isLoading: isSiteEditorLoading
+          })
+        }
+      };
+    }
     return {
-      key: 'styles',
+      key: 'navigation',
       areas: {
-        sidebar: (0, _react.createElement)(_sidebarNavigationScreenNavigationMenus.default, null),
-        preview: (0, _react.createElement)(_editor.default, {
+        sidebar: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sidebarNavigationScreenNavigationMenus.default, {
+          backPath: {}
+        }),
+        preview: /*#__PURE__*/(0, _jsxRuntime.jsx)(_editor.default, {
           isLoading: isSiteEditorLoading
         }),
-        mobile: canvas === 'edit' && (0, _react.createElement)(_editor.default, {
+        mobile: canvas === 'edit' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_editor.default, {
           isLoading: isSiteEditorLoading
         })
       }
@@ -180,11 +215,11 @@ function useLayoutAreas() {
   return {
     key: 'default',
     areas: {
-      sidebar: (0, _react.createElement)(_sidebarNavigationScreenMain.default, null),
-      preview: (0, _react.createElement)(_editor.default, {
+      sidebar: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sidebarNavigationScreenMain.default, {}),
+      preview: /*#__PURE__*/(0, _jsxRuntime.jsx)(_editor.default, {
         isLoading: isSiteEditorLoading
       }),
-      mobile: canvas === 'edit' && (0, _react.createElement)(_editor.default, {
+      mobile: canvas === 'edit' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_editor.default, {
         isLoading: isSiteEditorLoading
       })
     }