@wordpress/edit-site 5.34.0 → 6.0.0

package/build-module/components/layout/index.js

@@ -1,8 +1,7 @@
-import { createElement, Fragment } from "react";
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -17,7 +16,7 @@ import { CommandMenu, privateApis as commandsPrivateApis } from '@wordpress/comm
 import { store as preferencesStore } from '@wordpress/preferences';
 import { privateApis as blockEditorPrivateApis, store as blockEditorStore } from '@wordpress/block-editor';
 import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
-import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import { EditorSnackbars, privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -39,6 +38,9 @@ import useLayoutAreas from './router';
 import useMovingAnimation from './animation';
 import SidebarContent from '../sidebar';
 import SaveHub from '../save-hub';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 const {
   useCommands
 } = unlock(coreCommandsPrivateApis);
@@ -62,7 +64,6 @@ export default function Layout() {
   const isMobileViewport = useViewportMatch('medium', '<');
   const {
     isDistractionFree,
-    isZoomOutMode,
     hasFixedToolbar,
     hasBlockSelected,
     canvasMode,
@@ -83,7 +84,6 @@ export default function Layout() {
       hasFixedToolbar: select(preferencesStore).get('core', 'fixedToolbar'),
       isDistractionFree: select(preferencesStore).get('core', 'distractionFree'),
       hasBlockBreadcrumbs: select(preferencesStore).get('core', 'showBlockBreadcrumbs'),
-      isZoomOutMode: select(blockEditorStore).__unstableGetEditorMode() === 'zoom-out',
       hasBlockSelected: select(blockEditorStore).getBlockSelectionStart()
     };
   }, []);
@@ -128,7 +128,7 @@ export default 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';
@@ -143,99 +143,115 @@ export default function Layout() {
   if (canvasMode === 'init') {
     return null;
   }
-  return createElement(Fragment, null, createElement(CommandMenu, null), createElement(KeyboardShortcutsRegister, null), createElement(KeyboardShortcutsGlobal, null), fullResizer, createElement("div", {
-    ...navigateRegionsProps,
-    ref: navigateRegionsProps.ref,
-    className: classnames('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'
-    })
-  }, createElement(motion.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
-  }, createElement(SiteHub, {
-    isTransparent: isResizableFrameOversized,
-    className: "edit-site-layout__hub"
-  })), createElement("div", {
-    className: "edit-site-layout__content"
-  }, (!isMobileViewport || !areas.mobile) && createElement(NavigableRegion, {
-    ariaLabel: __('Navigation'),
-    className: "edit-site-layout__sidebar-region"
-  }, createElement(AnimatePresence, null, canvasMode === 'view' && createElement(motion.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"
-  }, createElement(SidebarContent, {
-    routeKey: routeKey
-  }, areas.sidebar), createElement(SaveHub, null)))), isMobileViewport && areas.mobile && createElement("div", {
-    className: "edit-site-layout__mobile"
-  }, areas.mobile), !isMobileViewport && areas.content && canvasMode !== 'edit' && createElement("div", {
-    className: "edit-site-layout__area",
-    style: {
-      maxWidth: widths?.content
-    }
-  }, areas.content), !isMobileViewport && areas.preview && createElement("div", {
-    className: "edit-site-layout__canvas-container"
-  }, canvasResizer, !!canvasSize.width && createElement("div", {
-    className: classnames('edit-site-layout__canvas', {
-      'is-right-aligned': isResizableFrameOversized
-    }),
-    ref: animationRef
-  }, createElement(ErrorBoundary, null, createElement(ResizableFrame, {
-    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))))), createElement(SavePanel, null)));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(CommandMenu, {}), /*#__PURE__*/_jsx(KeyboardShortcutsRegister, {}), /*#__PURE__*/_jsx(KeyboardShortcutsGlobal, {}), fullResizer, /*#__PURE__*/_jsxs("div", {
+      ...navigateRegionsProps,
+      ref: navigateRegionsProps.ref,
+      className: clsx('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__*/_jsx(motion.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__*/_jsx(SiteHub, {
+          isTransparent: isResizableFrameOversized,
+          className: "edit-site-layout__hub"
+        })
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "edit-site-layout__content",
+        children: [(!isMobileViewport || !areas.mobile) && /*#__PURE__*/_jsx(NavigableRegion, {
+          ariaLabel: __('Navigation'),
+          className: "edit-site-layout__sidebar-region",
+          children: /*#__PURE__*/_jsx(AnimatePresence, {
+            children: canvasMode === 'view' && /*#__PURE__*/_jsxs(motion.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__*/_jsx(SidebarContent, {
+                routeKey: routeKey,
+                children: areas.sidebar
+              }), /*#__PURE__*/_jsx(SaveHub, {})]
+            })
+          })
+        }), /*#__PURE__*/_jsx(EditorSnackbars, {}), isMobileViewport && areas.mobile && /*#__PURE__*/_jsx("div", {
+          className: "edit-site-layout__mobile",
+          children: areas.mobile
+        }), !isMobileViewport && areas.content && canvasMode !== 'edit' && /*#__PURE__*/_jsx("div", {
+          className: "edit-site-layout__area",
+          style: {
+            maxWidth: widths?.content
+          },
+          children: areas.content
+        }), !isMobileViewport && areas.preview && /*#__PURE__*/_jsxs("div", {
+          className: "edit-site-layout__canvas-container",
+          children: [canvasResizer, !!canvasSize.width && /*#__PURE__*/_jsx("div", {
+            className: clsx('edit-site-layout__canvas', {
+              'is-right-aligned': isResizableFrameOversized
+            }),
+            ref: animationRef,
+            children: /*#__PURE__*/_jsx(ErrorBoundary, {
+              children: /*#__PURE__*/_jsx(ResizableFrame, {
+                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__*/_jsx(SavePanel, {})]
+    })]
+  });
 }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["classnames","useSelect","__unstableMotion","motion","__unstableAnimatePresence","AnimatePresence","__unstableUseNavigateRegions","useNavigateRegions","useReducedMotion","useViewportMatch","useResizeObserver","__","useState","store","keyboardShortcutsStore","CommandMenu","privateApis","commandsPrivateApis","preferencesStore","blockEditorPrivateApis","blockEditorStore","coreCommandsPrivateApis","editorPrivateApis","ErrorBoundary","editSiteStore","useInitEditedEntityFromURL","SiteHub","ResizableFrame","useSyncCanvasModeWithURL","unlock","SavePanel","KeyboardShortcutsRegister","KeyboardShortcutsGlobal","useCommonCommands","useEditModeCommands","useIsSiteEditorLoading","useLayoutAreas","useMovingAnimation","SidebarContent","SaveHub","useCommands","useCommandContext","useGlobalStyle","NavigableRegion","ANIMATION_DURATION","Layout","isMobileViewport","isDistractionFree","isZoomOutMode","hasFixedToolbar","hasBlockSelected","canvasMode","previousShortcut","nextShortcut","hasBlockBreadcrumbs","select","getAllShortcutKeyCombinations","getCanvasMode","get","__unstableGetEditorMode","getBlockSelectionStart","navigateRegionsProps","previous","next","disableMotion","canvasResizer","canvasSize","fullResizer","isEditorLoading","isResizableFrameOversized","setIsResizableFrameOversized","key","routeKey","areas","widths","animationRef","triggerAnimationOnChange","headerAnimationState","commandContext","backgroundColor","gradientValue","createElement","Fragment","ref","className","div","variants","opacity","transition","type","delay","delayChildren","isDistractionFreeHovering","view","edit","whileHover","undefined","animate","isTransparent","mobile","ariaLabel","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":"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","ignoreList":[]}
+{"version":3,"names":["clsx","useSelect","__unstableMotion","motion","__unstableAnimatePresence","AnimatePresence","__unstableUseNavigateRegions","useNavigateRegions","useReducedMotion","useViewportMatch","useResizeObserver","__","useState","store","keyboardShortcutsStore","CommandMenu","privateApis","commandsPrivateApis","preferencesStore","blockEditorPrivateApis","blockEditorStore","coreCommandsPrivateApis","EditorSnackbars","editorPrivateApis","ErrorBoundary","editSiteStore","useInitEditedEntityFromURL","SiteHub","ResizableFrame","useSyncCanvasModeWithURL","unlock","SavePanel","KeyboardShortcutsRegister","KeyboardShortcutsGlobal","useCommonCommands","useEditModeCommands","useIsSiteEditorLoading","useLayoutAreas","useMovingAnimation","SidebarContent","SaveHub","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","useCommands","useCommandContext","useGlobalStyle","NavigableRegion","ANIMATION_DURATION","Layout","isMobileViewport","isDistractionFree","hasFixedToolbar","hasBlockSelected","canvasMode","previousShortcut","nextShortcut","hasBlockBreadcrumbs","select","getAllShortcutKeyCombinations","getCanvasMode","get","getBlockSelectionStart","navigateRegionsProps","previous","next","disableMotion","canvasResizer","canvasSize","fullResizer","isEditorLoading","isResizableFrameOversized","setIsResizableFrameOversized","key","routeKey","areas","widths","animationRef","triggerAnimationOnChange","headerAnimationState","commandContext","backgroundColor","gradientValue","children","ref","className","div","variants","opacity","transition","type","delay","delayChildren","isDistractionFreeHovering","view","edit","whileHover","undefined","animate","isTransparent","mobile","ariaLabel","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 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-module/components/layout/router.js

@@ -1,10 +1,9 @@
-import { createElement } from "react";
 /**
  * WordPress dependencies
  */
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { __ } from '@wordpress/i18n';
-
+import { useEffect } from '@wordpress/element';
 /**
  * Internal dependencies
  */
@@ -18,20 +17,61 @@ import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles';
 import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
 import SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus';
-import SidebarNavigationScreenPage from '../sidebar-navigation-screen-page';
 import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
-import SidebarNavigationScreenTemplate from '../sidebar-navigation-screen-template';
-import SidebarNavigationScreenPattern from '../sidebar-navigation-screen-pattern';
 import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns';
 import SidebarNavigationScreenNavigationMenu from '../sidebar-navigation-screen-navigation-menu';
 import DataViewsSidebarContent from '../sidebar-dataviews';
+import { NAVIGATION_POST_TYPE, PATTERN_TYPES, TEMPLATE_PART_POST_TYPE, TEMPLATE_POST_TYPE } from '../../utils/constants';
+import { jsx as _jsx } from "react/jsx-runtime";
 const {
   useLocation,
   useHistory
 } = unlock(routerPrivateApis);
+function useRedirectOldPaths() {
+  const history = useHistory();
+  const {
+    params
+  } = useLocation();
+  useEffect(() => {
+    const {
+      postType,
+      path,
+      categoryType,
+      ...rest
+    } = params;
+    if (path === '/wp_template_part/all') {
+      history.replace({
+        postType: TEMPLATE_PART_POST_TYPE
+      });
+    }
+    if (path === '/page') {
+      history.replace({
+        postType: 'page',
+        ...rest
+      });
+    }
+    if (path === '/wp_template') {
+      history.replace({
+        postType: TEMPLATE_POST_TYPE,
+        ...rest
+      });
+    }
+    if (path === '/patterns') {
+      history.replace({
+        postType: categoryType === TEMPLATE_PART_POST_TYPE ? TEMPLATE_PART_POST_TYPE : PATTERN_TYPES.user,
+        ...rest
+      });
+    }
+    if (path === '/navigation') {
+      history.replace({
+        postType: NAVIGATION_POST_TYPE,
+        ...rest
+      });
+    }
+  }, [history, params]);
+}
 export default function useLayoutAreas() {
   const isSiteEditorLoading = useIsSiteEditorLoading();
-  const history = useHistory();
   const {
     params
   } = useLocation();
@@ -42,33 +82,27 @@ export default 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: createElement(SidebarNavigationScreen, {
-          title: __('Manage pages'),
-          content: createElement(DataViewsSidebarContent, null)
+        sidebar: /*#__PURE__*/_jsx(SidebarNavigationScreen, {
+          title: __('Pages'),
+          backPath: {},
+          content: /*#__PURE__*/_jsx(DataViewsSidebarContent, {})
         }),
-        content: createElement(PagePages, null),
-        preview: isListLayout && createElement(Editor, {
-          isLoading: isSiteEditorLoading,
-          onClick: () => history.push({
-            postType: 'page',
-            postId,
-            canvas: 'edit'
-          })
+        content: /*#__PURE__*/_jsx(PagePages, {}),
+        preview: (isListLayout || canvas === 'edit') && /*#__PURE__*/_jsx(Editor, {
+          isLoading: isSiteEditorLoading
         }),
-        mobile: canvas === 'edit' ? createElement(Editor, {
+        mobile: canvas === 'edit' ? /*#__PURE__*/_jsx(Editor, {
           isLoading: isSiteEditorLoading
-        }) : createElement(PagePages, null)
+        }) : /*#__PURE__*/_jsx(PagePages, {})
       },
       widths: {
         content: isListLayout ? 380 : undefined
@@ -76,44 +110,20 @@ export default function useLayoutAreas() {
     };
   }
 
-  // Regular other post types
-  if (postType && postId) {
-    let sidebar;
-    if (postType === 'wp_template_part' || postType === 'wp_block') {
-      sidebar = createElement(SidebarNavigationScreenPattern, null);
-    } else if (postType === 'wp_template') {
-      sidebar = createElement(SidebarNavigationScreenTemplate, null);
-    } else if (postType === 'page') {
-      sidebar = createElement(SidebarNavigationScreenPage, null);
-    } else {
-      sidebar = createElement(SidebarNavigationScreenNavigationMenu, null);
-    }
-    return {
-      key: 'page',
-      areas: {
-        sidebar,
-        preview: createElement(Editor, {
-          isLoading: isSiteEditorLoading
-        }),
-        mobile: canvas === 'edit' && createElement(Editor, {
-          isLoading: isSiteEditorLoading
-        })
-      }
-    };
-  }
-
   // Templates
-  if (path === '/wp_template') {
+  if (postType === TEMPLATE_POST_TYPE) {
     const isListLayout = isCustom !== 'true' && layout === 'list';
     return {
-      key: 'templates-list',
+      key: 'templates',
       areas: {
-        sidebar: createElement(SidebarNavigationScreenTemplatesBrowse, null),
-        content: createElement(PageTemplates, null),
-        preview: isListLayout && createElement(Editor, {
+        sidebar: /*#__PURE__*/_jsx(SidebarNavigationScreenTemplatesBrowse, {
+          backPath: {}
+        }),
+        content: /*#__PURE__*/_jsx(PageTemplates, {}),
+        preview: (isListLayout || canvas === 'edit') && /*#__PURE__*/_jsx(Editor, {
           isLoading: isSiteEditorLoading
         }),
-        mobile: createElement(PageTemplates, null)
+        mobile: /*#__PURE__*/_jsx(PageTemplates, {})
       },
       widths: {
         content: isListLayout ? 380 : undefined
@@ -121,17 +131,19 @@ export default 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 ([TEMPLATE_PART_POST_TYPE, PATTERN_TYPES.user].includes(postType)) {
     return {
       key: 'patterns',
       areas: {
-        sidebar: createElement(SidebarNavigationScreenPatterns, null),
-        content: createElement(PagePatterns, null),
-        mobile: createElement(PagePatterns, null)
+        sidebar: /*#__PURE__*/_jsx(SidebarNavigationScreenPatterns, {
+          backPath: {}
+        }),
+        content: /*#__PURE__*/_jsx(PagePatterns, {}),
+        mobile: /*#__PURE__*/_jsx(PagePatterns, {}),
+        preview: canvas === 'edit' && /*#__PURE__*/_jsx(Editor, {
+          isLoading: isSiteEditorLoading
+        })
       }
     };
   }
@@ -141,11 +153,13 @@ export default function useLayoutAreas() {
     return {
       key: 'styles',
       areas: {
-        sidebar: createElement(SidebarNavigationScreenGlobalStyles, null),
-        preview: createElement(Editor, {
+        sidebar: /*#__PURE__*/_jsx(SidebarNavigationScreenGlobalStyles, {
+          backPath: {}
+        }),
+        preview: /*#__PURE__*/_jsx(Editor, {
           isLoading: isSiteEditorLoading
         }),
-        mobile: canvas === 'edit' && createElement(Editor, {
+        mobile: canvas === 'edit' && /*#__PURE__*/_jsx(Editor, {
           isLoading: isSiteEditorLoading
         })
       }
@@ -153,15 +167,35 @@ export default function useLayoutAreas() {
   }
 
   // Navigation
-  if (path === '/navigation') {
+  if (postType === NAVIGATION_POST_TYPE) {
+    if (postId) {
+      return {
+        key: 'navigation',
+        areas: {
+          sidebar: /*#__PURE__*/_jsx(SidebarNavigationScreenNavigationMenu, {
+            backPath: {
+              postType: NAVIGATION_POST_TYPE
+            }
+          }),
+          preview: /*#__PURE__*/_jsx(Editor, {
+            isLoading: isSiteEditorLoading
+          }),
+          mobile: canvas === 'edit' && /*#__PURE__*/_jsx(Editor, {
+            isLoading: isSiteEditorLoading
+          })
+        }
+      };
+    }
     return {
-      key: 'styles',
+      key: 'navigation',
       areas: {
-        sidebar: createElement(SidebarNavigationScreenNavigationMenus, null),
-        preview: createElement(Editor, {
+        sidebar: /*#__PURE__*/_jsx(SidebarNavigationScreenNavigationMenus, {
+          backPath: {}
+        }),
+        preview: /*#__PURE__*/_jsx(Editor, {
           isLoading: isSiteEditorLoading
         }),
-        mobile: canvas === 'edit' && createElement(Editor, {
+        mobile: canvas === 'edit' && /*#__PURE__*/_jsx(Editor, {
           isLoading: isSiteEditorLoading
         })
       }
@@ -172,11 +206,11 @@ export default function useLayoutAreas() {
   return {
     key: 'default',
     areas: {
-      sidebar: createElement(SidebarNavigationScreenMain, null),
-      preview: createElement(Editor, {
+      sidebar: /*#__PURE__*/_jsx(SidebarNavigationScreenMain, {}),
+      preview: /*#__PURE__*/_jsx(Editor, {
         isLoading: isSiteEditorLoading
       }),
-      mobile: canvas === 'edit' && createElement(Editor, {
+      mobile: canvas === 'edit' && /*#__PURE__*/_jsx(Editor, {
         isLoading: isSiteEditorLoading
       })
     }