@wordpress/edit-site 5.26.0 → 5.27.1

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

@@ -17,17 +17,14 @@ import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { CommandMenu, privateApis as commandsPrivateApis } from '@wordpress/commands';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { privateApis as blockEditorPrivateApis, useBlockCommands, store as blockEditorStore } from '@wordpress/block-editor';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
 
 /**
  * Internal dependencies
  */
 import Sidebar from '../sidebar';
-import Editor from '../editor';
 import ErrorBoundary from '../error-boundary';
 import { store as editSiteStore } from '../../store';
-import getIsListPage from '../../utils/get-is-list-page';
 import Header from '../header-edit-mode';
 import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
 import SiteHub from '../site-hub';
@@ -39,17 +36,14 @@ import KeyboardShortcutsRegister from '../keyboard-shortcuts/register';
 import KeyboardShortcutsGlobal from '../keyboard-shortcuts/global';
 import { useCommonCommands } from '../../hooks/commands/use-common-commands';
 import { useEditModeCommands } from '../../hooks/commands/use-edit-mode-commands';
-import PageMain from '../page-main';
 import { useIsSiteEditorLoading } from './hooks';
+import useLayoutAreas from './router';
 const {
   useCommands
 } = unlock(coreCommandsPrivateApis);
 const {
   useCommandContext
 } = unlock(commandsPrivateApis);
-const {
-  useLocation
-} = unlock(routerPrivateApis);
 const {
   useGlobalStyle
 } = unlock(blockEditorPrivateApis);
@@ -62,12 +56,7 @@ export default function Layout() {
   useEditModeCommands();
   useCommonCommands();
   useBlockCommands();
-  const {
-    params
-  } = useLocation();
   const isMobileViewport = useViewportMatch('medium', '<');
-  const isListPage = getIsListPage(params, isMobileViewport);
-  const isEditorPage = !isListPage;
   const {
     isDistractionFree,
     hasFixedToolbar,
@@ -91,19 +80,19 @@ export default function Layout() {
       hasBlockSelected: select(blockEditorStore).getBlockSelectionStart()
     };
   }, []);
-  const isEditing = canvasMode === 'edit';
   const navigateRegionsProps = useNavigateRegions({
     previous: previousShortcut,
     next: nextShortcut
   });
   const disableMotion = useReducedMotion();
-  const showSidebar = isMobileViewport && canvasMode === 'view' && !isListPage || !isMobileViewport && (canvasMode === 'view' || !isEditorPage);
-  const showCanvas = isMobileViewport && isEditorPage && isEditing || !isMobileViewport || !isEditorPage;
-  const isFullCanvas = isMobileViewport && isListPage || isEditorPage && isEditing;
   const [canvasResizer, canvasSize] = useResizeObserver();
   const [fullResizer] = useResizeObserver();
   const isEditorLoading = useIsSiteEditorLoading();
   const [isResizableFrameOversized, setIsResizableFrameOversized] = useState(false);
+  const {
+    areas,
+    widths
+  } = useLayoutAreas();
 
   // This determines which animation variant should apply to the header.
   // There is also a `isDistractionFreeHovering` state that gets priority
@@ -127,7 +116,7 @@ export default function Layout() {
 
   // Sets the right context for the command palette
   let commandContext = 'site-editor';
-  if (canvasMode === 'edit' && isEditorPage) {
+  if (canvasMode === 'edit') {
     commandContext = 'site-editor-edit';
   }
   if (hasBlockSelected) {
@@ -147,9 +136,8 @@ export default function Layout() {
     ...navigateRegionsProps,
     ref: navigateRegionsProps.ref,
     className: classnames('edit-site-layout', navigateRegionsProps.className, {
-      'is-distraction-free': isDistractionFree && isEditing,
-      'is-full-canvas': isFullCanvas,
-      'is-edit-mode': isEditing,
+      'is-distraction-free': isDistractionFree && canvasMode === 'edit',
+      'is-full-canvas': canvasMode === 'edit',
       'has-fixed-toolbar': hasFixedToolbar,
       'is-block-toolbar-visible': hasBlockSelected
     })
@@ -188,7 +176,7 @@ export default function Layout() {
     className: "edit-site-layout__hub"
   }), createElement(AnimatePresence, {
     initial: false
-  }, isEditorPage && isEditing && createElement(NavigableRegion, {
+  }, canvasMode === 'edit' && createElement(NavigableRegion, {
     key: "header",
     className: "edit-site-layout__header",
     ariaLabel: __('Editor top bar'),
@@ -228,7 +216,7 @@ export default function Layout() {
   }, createElement(NavigableRegion, {
     ariaLabel: __('Navigation'),
     className: "edit-site-layout__sidebar-region"
-  }, createElement(AnimatePresence, null, showSidebar && createElement(motion.div, {
+  }, createElement(AnimatePresence, null, canvasMode === 'view' && createElement(motion.div, {
     initial: {
       opacity: 0
     },
@@ -246,10 +234,15 @@ export default function Layout() {
       ease: 'easeOut'
     },
     className: "edit-site-layout__sidebar"
-  }, createElement(Sidebar, null)))), createElement(SavePanel, null), showCanvas && createElement(Fragment, null, isListPage && createElement(PageMain, null), isEditorPage && createElement("div", {
+  }, createElement(Sidebar, null)))), createElement(SavePanel, null), areas.content && canvasMode !== 'edit' && createElement("div", {
+    className: "edit-site-layout__area",
+    style: {
+      maxWidth: widths?.content
+    }
+  }, areas.content), areas.preview && createElement("div", {
     className: "edit-site-layout__canvas-container"
   }, canvasResizer, !!canvasSize.width && createElement(motion.div, {
-    whileHover: isEditorPage && canvasMode === 'view' ? {
+    whileHover: canvasMode === 'view' ? {
       scale: 1.005,
       transition: {
         duration: disableMotion ? 0 : 0.5,
@@ -268,7 +261,7 @@ export default function Layout() {
     }
   }, createElement(ErrorBoundary, null, createElement(ResizableFrame, {
     isReady: !isEditorLoading,
-    isFullWidth: isEditing,
+    isFullWidth: canvasMode === 'edit',
     defaultSize: {
       width: canvasSize.width - 24 /* $canvas-padding */,
       height: canvasSize.height
@@ -278,8 +271,6 @@ export default function Layout() {
     innerContentStyle: {
       background: gradientValue !== null && gradientValue !== void 0 ? gradientValue : backgroundColor
     }
-  }, createElement(Editor, {
-    isLoading: isEditorLoading
-  })))))))));
+  }, areas.preview)))))));
 }
 //# 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","NavigableRegion","store","keyboardShortcutsStore","CommandMenu","privateApis","commandsPrivateApis","preferencesStore","blockEditorPrivateApis","useBlockCommands","blockEditorStore","routerPrivateApis","coreCommandsPrivateApis","Sidebar","Editor","ErrorBoundary","editSiteStore","getIsListPage","Header","useInitEditedEntityFromURL","SiteHub","ResizableFrame","useSyncCanvasModeWithURL","unlock","SavePanel","KeyboardShortcutsRegister","KeyboardShortcutsGlobal","useCommonCommands","useEditModeCommands","PageMain","useIsSiteEditorLoading","useCommands","useCommandContext","useLocation","useGlobalStyle","ANIMATION_DURATION","Layout","params","isMobileViewport","isListPage","isEditorPage","isDistractionFree","hasFixedToolbar","hasBlockSelected","canvasMode","previousShortcut","nextShortcut","select","getAllShortcutKeyCombinations","getCanvasMode","get","getBlockSelectionStart","isEditing","navigateRegionsProps","previous","next","disableMotion","showSidebar","showCanvas","isFullCanvas","canvasResizer","canvasSize","fullResizer","isEditorLoading","isResizableFrameOversized","setIsResizableFrameOversized","headerAnimationState","commandContext","backgroundColor","gradientValue","createElement","Fragment","ref","className","div","variants","opacity","transition","type","delay","delayChildren","isDistractionFreeHovering","view","edit","whileHover","undefined","animate","isTransparent","initial","key","ariaLabel","as","y","exit","duration","ease","width","scale","layout","isReady","isFullWidth","defaultSize","height","isOversized","setIsOversized","innerContentStyle","background","isLoading"],"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 { NavigableRegion } from '@wordpress/interface';\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\tuseBlockCommands,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { privateApis as routerPrivateApis } from '@wordpress/router';\nimport { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';\n\n/**\n * Internal dependencies\n */\nimport Sidebar from '../sidebar';\nimport Editor from '../editor';\nimport ErrorBoundary from '../error-boundary';\nimport { store as editSiteStore } from '../../store';\nimport getIsListPage from '../../utils/get-is-list-page';\nimport Header from '../header-edit-mode';\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 PageMain from '../page-main';\nimport { useIsSiteEditorLoading } from './hooks';\n\nconst { useCommands } = unlock( coreCommandsPrivateApis );\nconst { useCommandContext } = unlock( commandsPrivateApis );\nconst { useLocation } = unlock( routerPrivateApis );\nconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\n\nconst ANIMATION_DURATION = 0.5;\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\tuseBlockCommands();\n\n\tconst { params } = useLocation();\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\tconst isListPage = getIsListPage( params, isMobileViewport );\n\tconst isEditorPage = ! isListPage;\n\n\tconst {\n\t\tisDistractionFree,\n\t\thasFixedToolbar,\n\t\thasBlockSelected,\n\t\tcanvasMode,\n\t\tpreviousShortcut,\n\t\tnextShortcut,\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/edit-site/previous-region'\n\t\t\t),\n\t\t\tnextShortcut: getAllShortcutKeyCombinations(\n\t\t\t\t'core/edit-site/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\thasBlockSelected:\n\t\t\t\tselect( blockEditorStore ).getBlockSelectionStart(),\n\t\t};\n\t}, [] );\n\tconst isEditing = canvasMode === 'edit';\n\tconst navigateRegionsProps = useNavigateRegions( {\n\t\tprevious: previousShortcut,\n\t\tnext: nextShortcut,\n\t} );\n\tconst disableMotion = useReducedMotion();\n\tconst showSidebar =\n\t\t( isMobileViewport && canvasMode === 'view' && ! isListPage ) ||\n\t\t( ! isMobileViewport && ( canvasMode === 'view' || ! isEditorPage ) );\n\tconst showCanvas =\n\t\t( isMobileViewport && isEditorPage && isEditing ) ||\n\t\t! isMobileViewport ||\n\t\t! isEditorPage;\n\tconst isFullCanvas =\n\t\t( isMobileViewport && isListPage ) || ( isEditorPage && isEditing );\n\tconst [ canvasResizer, canvasSize ] = useResizeObserver();\n\tconst [ fullResizer ] = useResizeObserver();\n\tconst isEditorLoading = useIsSiteEditorLoading();\n\tconst [ isResizableFrameOversized, setIsResizableFrameOversized ] =\n\t\tuseState( false );\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' && isEditorPage ) {\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': isDistractionFree && isEditing,\n\t\t\t\t\t\t'is-full-canvas': isFullCanvas,\n\t\t\t\t\t\t'is-edit-mode': isEditing,\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}\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\n\t\t\t\t\t<AnimatePresence initial={ false }>\n\t\t\t\t\t\t{ isEditorPage && isEditing && (\n\t\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\t\tkey=\"header\"\n\t\t\t\t\t\t\t\tclassName=\"edit-site-layout__header\"\n\t\t\t\t\t\t\t\tariaLabel={ __( 'Editor top bar' ) }\n\t\t\t\t\t\t\t\tas={ motion.div }\n\t\t\t\t\t\t\t\tvariants={ {\n\t\t\t\t\t\t\t\t\tisDistractionFree: { opacity: 0, y: 0 },\n\t\t\t\t\t\t\t\t\tisDistractionFreeHovering: {\n\t\t\t\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\t\t\t\ty: 0,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\tview: { opacity: 1, y: '-100%' },\n\t\t\t\t\t\t\t\t\tedit: { opacity: 1, y: 0 },\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\texit={ {\n\t\t\t\t\t\t\t\t\ty: '-100%',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tinitial={ {\n\t\t\t\t\t\t\t\t\topacity: isDistractionFree ? 1 : 0,\n\t\t\t\t\t\t\t\t\ty: isDistractionFree ? 0 : '-100%',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\t\tduration: disableMotion ? 0 : 0.2,\n\t\t\t\t\t\t\t\t\tease: 'easeOut',\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<Header />\n\t\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</AnimatePresence>\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<NavigableRegion\n\t\t\t\t\t\tariaLabel={ __( 'Navigation' ) }\n\t\t\t\t\t\tclassName=\"edit-site-layout__sidebar-region\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<AnimatePresence>\n\t\t\t\t\t\t\t{ showSidebar && (\n\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\tinitial={ { opacity: 0 } }\n\t\t\t\t\t\t\t\t\tanimate={ { opacity: 1 } }\n\t\t\t\t\t\t\t\t\texit={ { opacity: 0 } }\n\t\t\t\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\t\t\tduration:\n\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\tdisableMotion || isMobileViewport\n\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: ANIMATION_DURATION,\n\t\t\t\t\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tclassName=\"edit-site-layout__sidebar\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Sidebar />\n\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</AnimatePresence>\n\t\t\t\t\t</NavigableRegion>\n\n\t\t\t\t\t<SavePanel />\n\n\t\t\t\t\t{ showCanvas && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{ isListPage && <PageMain /> }\n\t\t\t\t\t\t\t{ isEditorPage && (\n\t\t\t\t\t\t\t\t<div className=\"edit-site-layout__canvas-container\">\n\t\t\t\t\t\t\t\t\t{ canvasResizer }\n\t\t\t\t\t\t\t\t\t{ !! canvasSize.width && (\n\t\t\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\t\t\twhileHover={\n\t\t\t\t\t\t\t\t\t\t\t\tisEditorPage &&\n\t\t\t\t\t\t\t\t\t\t\t\tcanvasMode === 'view'\n\t\t\t\t\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tscale: 1.005,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttransition: {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tduration:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdisableMotion\n\t\t\t\t\t\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\t\t\t\t\t: 0.5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t\t\t\t\t\t\t: {}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tinitial={ false }\n\t\t\t\t\t\t\t\t\t\t\tlayout=\"position\"\n\t\t\t\t\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\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\t\t{\n\t\t\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\t\t\tisResizableFrameOversized,\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\t\t\t\t\tduration: disableMotion\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\t\tease: 'easeOut',\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<ErrorBoundary>\n\t\t\t\t\t\t\t\t\t\t\t\t<ResizableFrame\n\t\t\t\t\t\t\t\t\t\t\t\t\tisReady={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t! isEditorLoading\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tisFullWidth={ isEditing }\n\t\t\t\t\t\t\t\t\t\t\t\t\tdefaultSize={ {\n\t\t\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\t\t\tcanvasSize.width -\n\t\t\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\t\t\theight: canvasSize.height,\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\tisOversized={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tisResizableFrameOversized\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsOversized={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsResizableFrameOversized\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tinnerContentStyle={ {\n\t\t\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\t\t\tgradientValue ??\n\t\t\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\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Editor\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tisLoading={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tisEditorLoading\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t</ResizableFrame>\n\t\t\t\t\t\t\t\t\t\t\t</ErrorBoundary>\n\t\t\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t\t\t) }\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</>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n"],"mappings":"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"}
+{"version":3,"names":["classnames","useSelect","__unstableMotion","motion","__unstableAnimatePresence","AnimatePresence","__unstableUseNavigateRegions","useNavigateRegions","useReducedMotion","useViewportMatch","useResizeObserver","__","useState","NavigableRegion","store","keyboardShortcutsStore","CommandMenu","privateApis","commandsPrivateApis","preferencesStore","blockEditorPrivateApis","useBlockCommands","blockEditorStore","coreCommandsPrivateApis","Sidebar","ErrorBoundary","editSiteStore","Header","useInitEditedEntityFromURL","SiteHub","ResizableFrame","useSyncCanvasModeWithURL","unlock","SavePanel","KeyboardShortcutsRegister","KeyboardShortcutsGlobal","useCommonCommands","useEditModeCommands","useIsSiteEditorLoading","useLayoutAreas","useCommands","useCommandContext","useGlobalStyle","ANIMATION_DURATION","Layout","isMobileViewport","isDistractionFree","hasFixedToolbar","hasBlockSelected","canvasMode","previousShortcut","nextShortcut","select","getAllShortcutKeyCombinations","getCanvasMode","get","getBlockSelectionStart","navigateRegionsProps","previous","next","disableMotion","canvasResizer","canvasSize","fullResizer","isEditorLoading","isResizableFrameOversized","setIsResizableFrameOversized","areas","widths","headerAnimationState","commandContext","backgroundColor","gradientValue","createElement","Fragment","ref","className","div","variants","opacity","transition","type","delay","delayChildren","isDistractionFreeHovering","view","edit","whileHover","undefined","animate","isTransparent","initial","key","ariaLabel","as","y","exit","duration","ease","content","style","maxWidth","preview","width","scale","layout","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 { NavigableRegion } from '@wordpress/interface';\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\tuseBlockCommands,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';\n\n/**\n * Internal dependencies\n */\nimport Sidebar from '../sidebar';\nimport ErrorBoundary from '../error-boundary';\nimport { store as editSiteStore } from '../../store';\nimport Header from '../header-edit-mode';\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';\n\nconst { useCommands } = unlock( coreCommandsPrivateApis );\nconst { useCommandContext } = unlock( commandsPrivateApis );\nconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\n\nconst ANIMATION_DURATION = 0.5;\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\tuseBlockCommands();\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} = 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/edit-site/previous-region'\n\t\t\t),\n\t\t\tnextShortcut: getAllShortcutKeyCombinations(\n\t\t\t\t'core/edit-site/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\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 { areas, widths } = useLayoutAreas();\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}\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\n\t\t\t\t\t<AnimatePresence initial={ false }>\n\t\t\t\t\t\t{ canvasMode === 'edit' && (\n\t\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\t\tkey=\"header\"\n\t\t\t\t\t\t\t\tclassName=\"edit-site-layout__header\"\n\t\t\t\t\t\t\t\tariaLabel={ __( 'Editor top bar' ) }\n\t\t\t\t\t\t\t\tas={ motion.div }\n\t\t\t\t\t\t\t\tvariants={ {\n\t\t\t\t\t\t\t\t\tisDistractionFree: { opacity: 0, y: 0 },\n\t\t\t\t\t\t\t\t\tisDistractionFreeHovering: {\n\t\t\t\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\t\t\t\ty: 0,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\tview: { opacity: 1, y: '-100%' },\n\t\t\t\t\t\t\t\t\tedit: { opacity: 1, y: 0 },\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\texit={ {\n\t\t\t\t\t\t\t\t\ty: '-100%',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tinitial={ {\n\t\t\t\t\t\t\t\t\topacity: isDistractionFree ? 1 : 0,\n\t\t\t\t\t\t\t\t\ty: isDistractionFree ? 0 : '-100%',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\t\tduration: disableMotion ? 0 : 0.2,\n\t\t\t\t\t\t\t\t\tease: 'easeOut',\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<Header />\n\t\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</AnimatePresence>\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<NavigableRegion\n\t\t\t\t\t\tariaLabel={ __( 'Navigation' ) }\n\t\t\t\t\t\tclassName=\"edit-site-layout__sidebar-region\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<AnimatePresence>\n\t\t\t\t\t\t\t{ canvasMode === 'view' && (\n\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\tinitial={ { opacity: 0 } }\n\t\t\t\t\t\t\t\t\tanimate={ { opacity: 1 } }\n\t\t\t\t\t\t\t\t\texit={ { opacity: 0 } }\n\t\t\t\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\t\t\tduration:\n\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\tdisableMotion || isMobileViewport\n\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: ANIMATION_DURATION,\n\t\t\t\t\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tclassName=\"edit-site-layout__sidebar\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Sidebar />\n\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</AnimatePresence>\n\t\t\t\t\t</NavigableRegion>\n\n\t\t\t\t\t<SavePanel />\n\n\t\t\t\t\t{ areas.content && canvasMode !== 'edit' && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"edit-site-layout__area\"\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tmaxWidth: widths?.content,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ areas.content }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ 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<motion.div\n\t\t\t\t\t\t\t\t\twhileHover={\n\t\t\t\t\t\t\t\t\t\tcanvasMode === 'view'\n\t\t\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t\t\tscale: 1.005,\n\t\t\t\t\t\t\t\t\t\t\t\t\ttransition: {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tduration: disableMotion\n\t\t\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\t\t: 0.5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t  }\n\t\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\tinitial={ false }\n\t\t\t\t\t\t\t\t\tlayout=\"position\"\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\ttransition={ {\n\t\t\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\t\t\tduration: disableMotion\n\t\t\t\t\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t\t\t\t\t: ANIMATION_DURATION,\n\t\t\t\t\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<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</motion.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\t\t\t</div>\n\t\t</>\n\t);\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,127 @@
+import { createElement } from "react";
+/**
+ * WordPress dependencies
+ */
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { useIsSiteEditorLoading } from './hooks';
+import Editor from '../editor';
+import PagePages from '../page-pages';
+import PagePatterns from '../page-patterns';
+import PageTemplatesTemplateParts from '../page-templates-template-parts';
+import { TEMPLATE_POST_TYPE, TEMPLATE_PART_POST_TYPE } from '../../utils/constants';
+const {
+  useLocation
+} = unlock(routerPrivateApis);
+export default function useLayoutAreas() {
+  const isSiteEditorLoading = useIsSiteEditorLoading();
+  const {
+    params
+  } = useLocation();
+  const {
+    postType,
+    postId,
+    path,
+    layout,
+    isCustom
+  } = params !== null && params !== void 0 ? params : {};
+  // Regular page
+  if (path === '/page') {
+    return {
+      areas: {
+        content: undefined,
+        preview: createElement(Editor, {
+          isLoading: isSiteEditorLoading
+        })
+      },
+      widths: {
+        content: undefined
+      }
+    };
+  }
+
+  // List layout is still experimental.
+  // Extracted it here out of the conditionals so it doesn't unintentionally becomes stable.
+  const isListLayout = isCustom !== 'true' && layout === 'list' && window?.__experimentalAdminViews;
+  if (path === '/pages') {
+    return {
+      areas: {
+        content: createElement(PagePages, null),
+        preview: isListLayout && createElement(Editor, {
+          isLoading: isSiteEditorLoading
+        })
+      },
+      widths: {
+        content: isListLayout ? 380 : undefined
+      }
+    };
+  }
+
+  // Regular other post types
+  if (postType && postId) {
+    return {
+      areas: {
+        preview: createElement(Editor, {
+          isLoading: isSiteEditorLoading
+        })
+      }
+    };
+  }
+
+  // Templates
+  if (path === '/wp_template/all') {
+    return {
+      areas: {
+        content: createElement(PageTemplatesTemplateParts, {
+          postType: TEMPLATE_POST_TYPE
+        }),
+        preview: isListLayout && createElement(Editor, {
+          isLoading: isSiteEditorLoading
+        })
+      },
+      widths: {
+        content: isListLayout ? 380 : undefined
+      }
+    };
+  }
+
+  // Template parts
+  if (path === '/wp_template_part/all') {
+    return {
+      areas: {
+        content: createElement(PageTemplatesTemplateParts, {
+          postType: TEMPLATE_PART_POST_TYPE
+        }),
+        preview: isListLayout && createElement(Editor, {
+          isLoading: isSiteEditorLoading
+        })
+      },
+      widths: {
+        content: isListLayout ? 380 : undefined
+      }
+    };
+  }
+
+  // Patterns
+  if (path === '/patterns') {
+    return {
+      areas: {
+        content: createElement(PagePatterns, null)
+      }
+    };
+  }
+
+  // Fallback shows the home page preview
+  return {
+    areas: {
+      preview: createElement(Editor, {
+        isLoading: isSiteEditorLoading
+      })
+    }
+  };
+}
+//# sourceMappingURL=router.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["privateApis","routerPrivateApis","unlock","useIsSiteEditorLoading","Editor","PagePages","PagePatterns","PageTemplatesTemplateParts","TEMPLATE_POST_TYPE","TEMPLATE_PART_POST_TYPE","useLocation","useLayoutAreas","isSiteEditorLoading","params","postType","postId","path","layout","isCustom","areas","content","undefined","preview","createElement","isLoading","widths","isListLayout","window","__experimentalAdminViews"],"sources":["@wordpress/edit-site/src/components/layout/router.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { privateApis as routerPrivateApis } from '@wordpress/router';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { useIsSiteEditorLoading } from './hooks';\nimport Editor from '../editor';\nimport PagePages from '../page-pages';\nimport PagePatterns from '../page-patterns';\nimport PageTemplatesTemplateParts from '../page-templates-template-parts';\n\nimport {\n\tTEMPLATE_POST_TYPE,\n\tTEMPLATE_PART_POST_TYPE,\n} from '../../utils/constants';\n\nconst { useLocation } = unlock( routerPrivateApis );\n\nexport default function useLayoutAreas() {\n\tconst isSiteEditorLoading = useIsSiteEditorLoading();\n\tconst { params } = useLocation();\n\tconst { postType, postId, path, layout, isCustom } = params ?? {};\n\t// Regular page\n\tif ( path === '/page' ) {\n\t\treturn {\n\t\t\tareas: {\n\t\t\t\tcontent: undefined,\n\t\t\t\tpreview: <Editor isLoading={ isSiteEditorLoading } />,\n\t\t\t},\n\t\t\twidths: {\n\t\t\t\tcontent: undefined,\n\t\t\t},\n\t\t};\n\t}\n\n\t// List layout is still experimental.\n\t// Extracted it here out of the conditionals so it doesn't unintentionally becomes stable.\n\tconst isListLayout =\n\t\tisCustom !== 'true' &&\n\t\tlayout === 'list' &&\n\t\twindow?.__experimentalAdminViews;\n\n\tif ( path === '/pages' ) {\n\t\treturn {\n\t\t\tareas: {\n\t\t\t\tcontent: <PagePages />,\n\t\t\t\tpreview: isListLayout && (\n\t\t\t\t\t<Editor isLoading={ isSiteEditorLoading } />\n\t\t\t\t),\n\t\t\t},\n\t\t\twidths: {\n\t\t\t\tcontent: isListLayout ? 380 : undefined,\n\t\t\t},\n\t\t};\n\t}\n\n\t// Regular other post types\n\tif ( postType && postId ) {\n\t\treturn {\n\t\t\tareas: {\n\t\t\t\tpreview: <Editor isLoading={ isSiteEditorLoading } />,\n\t\t\t},\n\t\t};\n\t}\n\n\t// Templates\n\tif ( path === '/wp_template/all' ) {\n\t\treturn {\n\t\t\tareas: {\n\t\t\t\tcontent: (\n\t\t\t\t\t<PageTemplatesTemplateParts\n\t\t\t\t\t\tpostType={ TEMPLATE_POST_TYPE }\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t\tpreview: isListLayout && (\n\t\t\t\t\t<Editor isLoading={ isSiteEditorLoading } />\n\t\t\t\t),\n\t\t\t},\n\t\t\twidths: {\n\t\t\t\tcontent: isListLayout ? 380 : undefined,\n\t\t\t},\n\t\t};\n\t}\n\n\t// Template parts\n\tif ( path === '/wp_template_part/all' ) {\n\t\treturn {\n\t\t\tareas: {\n\t\t\t\tcontent: (\n\t\t\t\t\t<PageTemplatesTemplateParts\n\t\t\t\t\t\tpostType={ TEMPLATE_PART_POST_TYPE }\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t\tpreview: isListLayout && (\n\t\t\t\t\t<Editor isLoading={ isSiteEditorLoading } />\n\t\t\t\t),\n\t\t\t},\n\t\t\twidths: {\n\t\t\t\tcontent: isListLayout ? 380 : undefined,\n\t\t\t},\n\t\t};\n\t}\n\n\t// Patterns\n\tif ( path === '/patterns' ) {\n\t\treturn {\n\t\t\tareas: {\n\t\t\t\tcontent: <PagePatterns />,\n\t\t\t},\n\t\t};\n\t}\n\n\t// Fallback shows the home page preview\n\treturn {\n\t\tareas: { preview: <Editor isLoading={ isSiteEditorLoading } /> },\n\t};\n}\n"],"mappings":"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"}

package/build-module/components/page-pages/index.js

@@ -2,7 +2,7 @@ import { createElement, Fragment } from "react";
 /**
  * WordPress dependencies
  */
-import { __experimentalView as View, __experimentalVStack as VStack, Button } from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -11,17 +11,15 @@ import { dateI18n, getDate, getSettings } from '@wordpress/date';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { DataViews } from '@wordpress/dataviews';
-import { ENTER, SPACE } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
  */
 import Page from '../page';
-import Link from '../routes/link';
+import { default as Link, useLink } from '../routes/link';
 import { DEFAULT_VIEWS, DEFAULT_CONFIG_PER_VIEW_TYPE } from '../sidebar-dataviews/default-views';
 import { ENUMERATION_TYPE, LAYOUT_GRID, LAYOUT_TABLE, LAYOUT_LIST, OPERATOR_IN, OPERATOR_NOT_IN } from '../../utils/constants';
 import { trashPostAction, usePermanentlyDeletePostAction, useRestorePostAction, postRevisionsAction, viewPostAction, useEditPostAction } from '../actions';
-import PostPreview from '../post-preview';
 import AddNewPageModal from '../add-new-page';
 import Media from '../media';
 import { unlock } from '../../lock-unlock';
@@ -30,16 +28,29 @@ const {
   useHistory
 } = unlock(routerPrivateApis);
 const EMPTY_ARRAY = [];
-function useView(type) {
+const SUPPORTED_LAYOUTS = window?.__experimentalAdminViews ? [LAYOUT_GRID, LAYOUT_TABLE, LAYOUT_LIST] : [LAYOUT_GRID, LAYOUT_TABLE];
+function useView(postType) {
   const {
-    params: {
-      activeView = 'all',
-      isCustom = 'false'
-    }
+    params
   } = useLocation();
-  const selectedDefaultView = isCustom === 'false' && DEFAULT_VIEWS[type].find(({
-    slug
-  }) => slug === activeView)?.view;
+  const {
+    activeView = 'all',
+    isCustom = 'false',
+    layout
+  } = params;
+  const history = useHistory();
+  const selectedDefaultView = useMemo(() => {
+    const defaultView = isCustom === 'false' && DEFAULT_VIEWS[postType].find(({
+      slug
+    }) => slug === activeView)?.view;
+    if (isCustom === 'false' && layout) {
+      return {
+        ...defaultView,
+        type: layout
+      };
+    }
+    return defaultView;
+  }, [isCustom, activeView, layout, postType]);
   const [view, setView] = useState(selectedDefaultView);
   useEffect(() => {
     if (selectedDefaultView) {
@@ -60,20 +71,38 @@ function useView(type) {
     editEntityRecord
   } = useDispatch(coreStore);
   const customView = useMemo(() => {
-    return editedViewRecord?.content && JSON.parse(editedViewRecord?.content);
+    const storedView = editedViewRecord?.content && JSON.parse(editedViewRecord?.content);
+    if (!storedView) {
+      return storedView;
+    }
+    return {
+      ...storedView,
+      layout: {
+        ...(DEFAULT_CONFIG_PER_VIEW_TYPE[storedView?.type] || {})
+      }
+    };
   }, [editedViewRecord?.content]);
   const setCustomView = useCallback(viewToSet => {
     editEntityRecord('postType', 'wp_dataviews', editedViewRecord?.id, {
       content: JSON.stringify(viewToSet)
     });
   }, [editEntityRecord, editedViewRecord?.id]);
+  const setDefaultViewAndUpdateUrl = useCallback(viewToSet => {
+    if (viewToSet.type !== view?.type) {
+      history.push({
+        ...params,
+        layout: viewToSet.type
+      });
+    }
+    setView(viewToSet);
+  }, [params, view?.type, history]);
   if (isCustom === 'false') {
-    return [view, setView];
+    return [view, setDefaultViewAndUpdateUrl];
   } else if (isCustom === 'true' && customView) {
     return [customView, setCustomView];
   }
   // Loading state where no the view was not found on custom views or default views.
-  return [DEFAULT_VIEWS[type][0].view, setView];
+  return [DEFAULT_VIEWS[postType][0].view, setDefaultViewAndUpdateUrl];
 }
 
 // See https://github.com/WordPress/gutenberg/issues/55886
@@ -99,20 +128,51 @@ const STATUSES = [{
 }];
 const DEFAULT_STATUSES = 'draft,future,pending,private,publish'; // All but 'trash'.
 
+function FeaturedImage({
+  item,
+  viewType
+}) {
+  const {
+    onClick
+  } = useLink({
+    postId: item.id,
+    postType: item.type,
+    canvas: 'edit'
+  });
+  const hasMedia = !!item.featured_media;
+  return createElement("span", {
+    className: {
+      'edit-site-page-pages__media-wrapper': viewType === LAYOUT_TABLE
+    }
+  }, createElement("button", {
+    className: "page-pages-preview-field__button",
+    type: "button",
+    onClick: onClick,
+    "aria-label": item.title?.rendered || __('(no title)')
+  }, hasMedia && createElement(Media, {
+    className: "edit-site-page-pages__featured-image",
+    id: item.featured_media,
+    size: viewType === LAYOUT_GRID ? ['large', 'full', 'medium', 'thumbnail'] : ['thumbnail', 'medium', 'large', 'full']
+  })));
+}
 export default function PagePages() {
   const postType = 'page';
   const [view, setView] = useView(postType);
-  const [pageId, setPageId] = useState(null);
   const history = useHistory();
-  const onSelectionChange = useCallback(items => setPageId(items?.length === 1 ? items[0].id : null), [setPageId]);
-  const onDetailsChange = useCallback(items => {
-    if (!!postType && items?.length === 1) {
+  const {
+    params
+  } = useLocation();
+  const {
+    isCustom = 'false'
+  } = params;
+  const onSelectionChange = useCallback(items => {
+    if (isCustom === 'false' && view?.type === LAYOUT_LIST) {
       history.push({
-        postId: items[0].id,
-        postType
+        ...params,
+        postId: items.length === 1 ? items[0].id : undefined
       });
     }
-  }, [history, postType]);
+  }, [history, params, view?.type, isCustom]);
   const queryArgs = useMemo(() => {
     const filters = {};
     view.filters.forEach(filter => {
@@ -162,11 +222,10 @@ export default function PagePages() {
     }) => item.featured_media,
     render: ({
       item
-    }) => !!item.featured_media ? createElement(Media, {
-      className: "edit-site-page-pages__featured-image",
-      id: item.featured_media,
-      size: view.type === LAYOUT_GRID ? ['large', 'full', 'medium', 'thumbnail'] : ['thumbnail', 'medium', 'large', 'full']
-    }) : null,
+    }) => createElement(FeaturedImage, {
+      item: item,
+      viewType: view.type
+    }),
     enableSorting: false
   }, {
     header: __('Title'),
@@ -177,18 +236,13 @@ export default function PagePages() {
     render: ({
       item
     }) => {
-      return createElement(VStack, {
-        spacing: 1
-      }, createElement(View, {
-        as: "span",
-        className: "dataviews-view-grid__title-field"
-      }, [LAYOUT_TABLE, LAYOUT_GRID].includes(view.type) ? createElement(Link, {
+      return [LAYOUT_TABLE, LAYOUT_GRID].includes(view.type) ? createElement(Link, {
         params: {
           postId: item.id,
           postType: item.type,
           canvas: 'edit'
         }
-      }, decodeEntities(item.title?.rendered) || __('(no title)')) : decodeEntities(item.title?.rendered) || __('(no title)')));
+      }, decodeEntities(item.title?.rendered) || __('(no title)')) : decodeEntities(item.title?.rendered) || __('(no title)');
     },
     maxWidth: 400,
     enableHiding: false
@@ -275,8 +329,7 @@ export default function PagePages() {
   }, [history]);
 
   // TODO: we need to handle properly `data={ data || EMPTY_ARRAY }` for when `isLoading`.
-  return createElement(Fragment, null, createElement(Page, {
-    className: view.type === LAYOUT_LIST ? 'edit-site-page-pages-list-view' : null,
+  return createElement(Page, {
     title: __('Pages'),
     actions: createElement(Fragment, null, createElement(Button, {
       variant: "primary",
@@ -294,39 +347,7 @@ export default function PagePages() {
     view: view,
     onChangeView: onChangeView,
     onSelectionChange: onSelectionChange,
-    onDetailsChange: onDetailsChange
-  })), view.type === LAYOUT_LIST && createElement(Page, null, createElement("div", {
-    className: "edit-site-page-pages-preview",
-    tabIndex: 0,
-    role: "button",
-    onKeyDown: event => {
-      const {
-        keyCode
-      } = event;
-      if (keyCode === ENTER || keyCode === SPACE) {
-        history.push({
-          postId: pageId,
-          postType,
-          canvas: 'edit'
-        });
-      }
-    },
-    onClick: () => history.push({
-      postId: pageId,
-      postType,
-      canvas: 'edit'
-    })
-  }, pageId !== null ? createElement(PostPreview, {
-    postId: pageId,
-    postType: postType
-  }) : createElement("div", {
-    style: {
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-      textAlign: 'center',
-      height: '100%'
-    }
-  }, createElement("p", null, __('Select a page to preview'))))));
+    supportedLayouts: SUPPORTED_LAYOUTS
+  }));
 }
 //# sourceMappingURL=index.js.map