@wordpress/edit-site 5.0.0 → 5.2.0

package/build-module/components/header-edit-mode/document-actions/index.js

@@ -15,16 +15,13 @@ import { Dropdown, Button, VisuallyHidden, __experimentalText as Text } from '@w
 import { chevronDown } from '@wordpress/icons';
 import { useState, useMemo } from '@wordpress/element';
 import { store as blockEditorStore, useBlockDisplayInformation, BlockIcon } from '@wordpress/block-editor';
-import { store as coreStore } from '@wordpress/core-data';
-import { store as editorStore } from '@wordpress/editor';
 import { store as preferencesStore } from '@wordpress/preferences';
-import { decodeEntities } from '@wordpress/html-entities';
 /**
  * Internal dependencies
  */
 
 import TemplateDetails from '../../template-details';
-import { store as editSiteStore } from '../../../store';
+import useEditedEntityRecord from '../../use-edited-entity-record';
 
 function getBlockDisplayText(block) {
   if (block) {
@@ -54,38 +51,12 @@ function useSecondaryText() {
 }
 
 export default function DocumentActions() {
+  const showIconLabels = useSelect(select => select(preferencesStore).get('core/edit-site', 'showIconLabels'), []);
   const {
-    showIconLabels,
-    entityTitle,
-    template,
-    templateType,
-    isLoaded
-  } = useSelect(select => {
-    const {
-      getEditedPostType,
-      getEditedPostId
-    } = select(editSiteStore);
-    const {
-      getEditedEntityRecord
-    } = select(coreStore);
-    const {
-      __experimentalGetTemplateInfo: getTemplateInfo
-    } = select(editorStore);
-    const postType = getEditedPostType();
-    const postId = getEditedPostId();
-    const record = getEditedEntityRecord('postType', postType, postId);
-
-    const _isLoaded = !!postId;
-
-    return {
-      showIconLabels: select(preferencesStore).get('core/edit-site', 'showIconLabels'),
-      entityTitle: getTemplateInfo(record).title,
-      isLoaded: _isLoaded,
-      template: record,
-      templateType: postType
-    };
-  }, []);
-  const entityLabel = templateType === 'wp_template_part' ? 'template part' : 'template';
+    isLoaded,
+    record,
+    getTitle
+  } = useEditedEntityRecord();
   const {
     label,
     icon
@@ -107,12 +78,13 @@ export default function DocumentActions() {
   } // Return feedback that the template does not seem to exist.
 
 
-  if (!entityTitle) {
+  if (!record) {
     return createElement("div", {
       className: "edit-site-document-actions"
     }, __('Template not found'));
   }
 
+  const entityLabel = record.type === 'wp_template_part' ? __('template part') : __('template');
   return createElement("div", {
     className: classnames('edit-site-document-actions', {
       'has-secondary-label': !!label
@@ -128,7 +100,7 @@ export default function DocumentActions() {
     as: "span"
   }, sprintf(
   /* translators: %s: the entity being edited, like "template"*/
-  __('Editing %s: '), entityLabel)), decodeEntities(entityTitle)), createElement("div", {
+  __('Editing %s: '), entityLabel)), getTitle()), createElement("div", {
     className: "edit-site-document-actions__secondary-item"
   }, createElement(BlockIcon, {
     icon: icon,
@@ -161,7 +133,7 @@ export default function DocumentActions() {
         onClose
       } = _ref2;
       return createElement(TemplateDetails, {
-        template: template,
+        template: record,
         onClose: onClose
       });
     }

package/build-module/components/header-edit-mode/document-actions/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/header-edit-mode/document-actions/index.js"],"names":["classnames","sprintf","__","__experimentalGetBlockLabel","getBlockLabel","getBlockType","useSelect","Dropdown","Button","VisuallyHidden","__experimentalText","Text","chevronDown","useState","useMemo","store","blockEditorStore","useBlockDisplayInformation","BlockIcon","coreStore","editorStore","preferencesStore","decodeEntities","TemplateDetails","editSiteStore","getBlockDisplayText","block","blockType","name","attributes","useSecondaryText","getBlock","activeEntityBlockId","select","__experimentalGetActiveBlockIdByBlockNames","blockInformation","label","isActive","icon","DocumentActions","showIconLabels","entityTitle","template","templateType","isLoaded","getEditedPostType","getEditedPostId","getEditedEntityRecord","__experimentalGetTemplateInfo","getTemplateInfo","postType","postId","record","_isLoaded","get","title","entityLabel","popoverAnchor","setPopoverAnchor","popoverProps","anchor","isOpen","onToggle","undefined","onClose"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { sprintf, __ } from '@wordpress/i18n';\nimport {\n\t__experimentalGetBlockLabel as getBlockLabel,\n\tgetBlockType,\n} from '@wordpress/blocks';\nimport { useSelect } from '@wordpress/data';\nimport {\n\tDropdown,\n\tButton,\n\tVisuallyHidden,\n\t__experimentalText as Text,\n} from '@wordpress/components';\nimport { chevronDown } from '@wordpress/icons';\nimport { useState, useMemo } from '@wordpress/element';\nimport {\n\tstore as blockEditorStore,\n\tuseBlockDisplayInformation,\n\tBlockIcon,\n} from '@wordpress/block-editor';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { store as editorStore } from '@wordpress/editor';\nimport { store as preferencesStore } from '@wordpress/preferences';\nimport { decodeEntities } from '@wordpress/html-entities';\n\n/**\n * Internal dependencies\n */\nimport TemplateDetails from '../../template-details';\nimport { store as editSiteStore } from '../../../store';\n\nfunction getBlockDisplayText( block ) {\n\tif ( block ) {\n\t\tconst blockType = getBlockType( block.name );\n\t\treturn blockType ? getBlockLabel( blockType, block.attributes ) : null;\n\t}\n\treturn null;\n}\n\nfunction useSecondaryText() {\n\tconst { getBlock } = useSelect( blockEditorStore );\n\tconst activeEntityBlockId = useSelect(\n\t\t( select ) =>\n\t\t\tselect(\n\t\t\t\tblockEditorStore\n\t\t\t).__experimentalGetActiveBlockIdByBlockNames( [\n\t\t\t\t'core/template-part',\n\t\t\t] ),\n\t\t[]\n\t);\n\n\tconst blockInformation = useBlockDisplayInformation( activeEntityBlockId );\n\n\tif ( activeEntityBlockId ) {\n\t\treturn {\n\t\t\tlabel: getBlockDisplayText( getBlock( activeEntityBlockId ) ),\n\t\t\tisActive: true,\n\t\t\ticon: blockInformation?.icon,\n\t\t};\n\t}\n\n\treturn {};\n}\n\nexport default function DocumentActions() {\n\tconst { showIconLabels, entityTitle, template, templateType, isLoaded } =\n\t\tuseSelect( ( select ) => {\n\t\t\tconst { getEditedPostType, getEditedPostId } =\n\t\t\t\tselect( editSiteStore );\n\t\t\tconst { getEditedEntityRecord } = select( coreStore );\n\t\t\tconst { __experimentalGetTemplateInfo: getTemplateInfo } =\n\t\t\t\tselect( editorStore );\n\t\t\tconst postType = getEditedPostType();\n\t\t\tconst postId = getEditedPostId();\n\t\t\tconst record = getEditedEntityRecord(\n\t\t\t\t'postType',\n\t\t\t\tpostType,\n\t\t\t\tpostId\n\t\t\t);\n\t\t\tconst _isLoaded = !! postId;\n\n\t\t\treturn {\n\t\t\t\tshowIconLabels: select( preferencesStore ).get(\n\t\t\t\t\t'core/edit-site',\n\t\t\t\t\t'showIconLabels'\n\t\t\t\t),\n\t\t\t\tentityTitle: getTemplateInfo( record ).title,\n\t\t\t\tisLoaded: _isLoaded,\n\t\t\t\ttemplate: record,\n\t\t\t\ttemplateType: postType,\n\t\t\t};\n\t\t}, [] );\n\n\tconst entityLabel =\n\t\ttemplateType === 'wp_template_part' ? 'template part' : 'template';\n\tconst { label, icon } = useSecondaryText();\n\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the popover's anchor updates.\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState( null );\n\n\t// Memoize popoverProps to avoid returning a new object every time.\n\tconst popoverProps = useMemo(\n\t\t() => ( {\n\t\t\t// Use the title wrapper as the popover anchor so that the dropdown is\n\t\t\t// centered over the whole title area rather than just one part of it.\n\t\t\tanchor: popoverAnchor,\n\t\t} ),\n\t\t[ popoverAnchor ]\n\t);\n\n\t// Return a simple loading indicator until we have information to show.\n\tif ( ! isLoaded ) {\n\t\treturn (\n\t\t\t<div className=\"edit-site-document-actions\">\n\t\t\t\t{ __( 'Loading…' ) }\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Return feedback that the template does not seem to exist.\n\tif ( ! entityTitle ) {\n\t\treturn (\n\t\t\t<div className=\"edit-site-document-actions\">\n\t\t\t\t{ __( 'Template not found' ) }\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames( 'edit-site-document-actions', {\n\t\t\t\t'has-secondary-label': !! label,\n\t\t\t} ) }\n\t\t>\n\t\t\t<div\n\t\t\t\tref={ setPopoverAnchor }\n\t\t\t\tclassName=\"edit-site-document-actions__title-wrapper\"\n\t\t\t>\n\t\t\t\t<Text\n\t\t\t\t\tsize=\"body\"\n\t\t\t\t\tclassName=\"edit-site-document-actions__title\"\n\t\t\t\t\tas=\"h1\"\n\t\t\t\t>\n\t\t\t\t\t<VisuallyHidden as=\"span\">\n\t\t\t\t\t\t{ sprintf(\n\t\t\t\t\t\t\t/* translators: %s: the entity being edited, like \"template\"*/\n\t\t\t\t\t\t\t__( 'Editing %s: ' ),\n\t\t\t\t\t\t\tentityLabel\n\t\t\t\t\t\t) }\n\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t{ decodeEntities( entityTitle ) }\n\t\t\t\t</Text>\n\t\t\t\t<div className=\"edit-site-document-actions__secondary-item\">\n\t\t\t\t\t<BlockIcon icon={ icon } showColors />\n\t\t\t\t\t<Text size=\"body\">{ label ?? '' }</Text>\n\t\t\t\t</div>\n\n\t\t\t\t<Dropdown\n\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\tposition=\"bottom center\"\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"edit-site-document-actions__get-info\"\n\t\t\t\t\t\t\ticon={ chevronDown }\n\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\tvariant={ showIconLabels ? 'tertiary' : undefined }\n\t\t\t\t\t\t\tlabel={ sprintf(\n\t\t\t\t\t\t\t\t/* translators: %s: the entity to see details about, like \"template\"*/\n\t\t\t\t\t\t\t\t__( 'Show %s details' ),\n\t\t\t\t\t\t\t\tentityLabel\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ showIconLabels && __( 'Details' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\tcontentClassName=\"edit-site-document-actions__info-dropdown\"\n\t\t\t\t\trenderContent={ ( { onClose } ) => (\n\t\t\t\t\t\t<TemplateDetails\n\t\t\t\t\t\t\ttemplate={ template }\n\t\t\t\t\t\t\tonClose={ onClose }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/header-edit-mode/document-actions/index.js"],"names":["classnames","sprintf","__","__experimentalGetBlockLabel","getBlockLabel","getBlockType","useSelect","Dropdown","Button","VisuallyHidden","__experimentalText","Text","chevronDown","useState","useMemo","store","blockEditorStore","useBlockDisplayInformation","BlockIcon","preferencesStore","TemplateDetails","useEditedEntityRecord","getBlockDisplayText","block","blockType","name","attributes","useSecondaryText","getBlock","activeEntityBlockId","select","__experimentalGetActiveBlockIdByBlockNames","blockInformation","label","isActive","icon","DocumentActions","showIconLabels","get","isLoaded","record","getTitle","popoverAnchor","setPopoverAnchor","popoverProps","anchor","entityLabel","type","isOpen","onToggle","undefined","onClose"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { sprintf, __ } from '@wordpress/i18n';\nimport {\n\t__experimentalGetBlockLabel as getBlockLabel,\n\tgetBlockType,\n} from '@wordpress/blocks';\nimport { useSelect } from '@wordpress/data';\nimport {\n\tDropdown,\n\tButton,\n\tVisuallyHidden,\n\t__experimentalText as Text,\n} from '@wordpress/components';\nimport { chevronDown } from '@wordpress/icons';\nimport { useState, useMemo } from '@wordpress/element';\nimport {\n\tstore as blockEditorStore,\n\tuseBlockDisplayInformation,\n\tBlockIcon,\n} from '@wordpress/block-editor';\nimport { store as preferencesStore } from '@wordpress/preferences';\n\n/**\n * Internal dependencies\n */\nimport TemplateDetails from '../../template-details';\nimport useEditedEntityRecord from '../../use-edited-entity-record';\n\nfunction getBlockDisplayText( block ) {\n\tif ( block ) {\n\t\tconst blockType = getBlockType( block.name );\n\t\treturn blockType ? getBlockLabel( blockType, block.attributes ) : null;\n\t}\n\treturn null;\n}\n\nfunction useSecondaryText() {\n\tconst { getBlock } = useSelect( blockEditorStore );\n\tconst activeEntityBlockId = useSelect(\n\t\t( select ) =>\n\t\t\tselect(\n\t\t\t\tblockEditorStore\n\t\t\t).__experimentalGetActiveBlockIdByBlockNames( [\n\t\t\t\t'core/template-part',\n\t\t\t] ),\n\t\t[]\n\t);\n\n\tconst blockInformation = useBlockDisplayInformation( activeEntityBlockId );\n\n\tif ( activeEntityBlockId ) {\n\t\treturn {\n\t\t\tlabel: getBlockDisplayText( getBlock( activeEntityBlockId ) ),\n\t\t\tisActive: true,\n\t\t\ticon: blockInformation?.icon,\n\t\t};\n\t}\n\n\treturn {};\n}\n\nexport default function DocumentActions() {\n\tconst showIconLabels = useSelect(\n\t\t( select ) =>\n\t\t\tselect( preferencesStore ).get(\n\t\t\t\t'core/edit-site',\n\t\t\t\t'showIconLabels'\n\t\t\t),\n\t\t[]\n\t);\n\tconst { isLoaded, record, getTitle } = useEditedEntityRecord();\n\tconst { label, icon } = useSecondaryText();\n\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the popover's anchor updates.\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState( null );\n\n\t// Memoize popoverProps to avoid returning a new object every time.\n\tconst popoverProps = useMemo(\n\t\t() => ( {\n\t\t\t// Use the title wrapper as the popover anchor so that the dropdown is\n\t\t\t// centered over the whole title area rather than just one part of it.\n\t\t\tanchor: popoverAnchor,\n\t\t} ),\n\t\t[ popoverAnchor ]\n\t);\n\n\t// Return a simple loading indicator until we have information to show.\n\tif ( ! isLoaded ) {\n\t\treturn (\n\t\t\t<div className=\"edit-site-document-actions\">\n\t\t\t\t{ __( 'Loading…' ) }\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Return feedback that the template does not seem to exist.\n\tif ( ! record ) {\n\t\treturn (\n\t\t\t<div className=\"edit-site-document-actions\">\n\t\t\t\t{ __( 'Template not found' ) }\n\t\t\t</div>\n\t\t);\n\t}\n\n\tconst entityLabel =\n\t\trecord.type === 'wp_template_part'\n\t\t\t? __( 'template part' )\n\t\t\t: __( 'template' );\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames( 'edit-site-document-actions', {\n\t\t\t\t'has-secondary-label': !! label,\n\t\t\t} ) }\n\t\t>\n\t\t\t<div\n\t\t\t\tref={ setPopoverAnchor }\n\t\t\t\tclassName=\"edit-site-document-actions__title-wrapper\"\n\t\t\t>\n\t\t\t\t<Text\n\t\t\t\t\tsize=\"body\"\n\t\t\t\t\tclassName=\"edit-site-document-actions__title\"\n\t\t\t\t\tas=\"h1\"\n\t\t\t\t>\n\t\t\t\t\t<VisuallyHidden as=\"span\">\n\t\t\t\t\t\t{ sprintf(\n\t\t\t\t\t\t\t/* translators: %s: the entity being edited, like \"template\"*/\n\t\t\t\t\t\t\t__( 'Editing %s: ' ),\n\t\t\t\t\t\t\tentityLabel\n\t\t\t\t\t\t) }\n\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t{ getTitle() }\n\t\t\t\t</Text>\n\t\t\t\t<div className=\"edit-site-document-actions__secondary-item\">\n\t\t\t\t\t<BlockIcon icon={ icon } showColors />\n\t\t\t\t\t<Text size=\"body\">{ label ?? '' }</Text>\n\t\t\t\t</div>\n\n\t\t\t\t<Dropdown\n\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\tposition=\"bottom center\"\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"edit-site-document-actions__get-info\"\n\t\t\t\t\t\t\ticon={ chevronDown }\n\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\tvariant={ showIconLabels ? 'tertiary' : undefined }\n\t\t\t\t\t\t\tlabel={ sprintf(\n\t\t\t\t\t\t\t\t/* translators: %s: the entity to see details about, like \"template\"*/\n\t\t\t\t\t\t\t\t__( 'Show %s details' ),\n\t\t\t\t\t\t\t\tentityLabel\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ showIconLabels && __( 'Details' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\tcontentClassName=\"edit-site-document-actions__info-dropdown\"\n\t\t\t\t\trenderContent={ ( { onClose } ) => (\n\t\t\t\t\t\t<TemplateDetails\n\t\t\t\t\t\t\ttemplate={ record }\n\t\t\t\t\t\t\tonClose={ onClose }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}

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

@@ -9,18 +9,18 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 
-import { useSelect, useDispatch } from '@wordpress/data';
-import { Button, __experimentalHStack as HStack, __unstableMotion as motion, __unstableAnimatePresence as AnimatePresence } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { __unstableMotion as motion, __unstableAnimatePresence as AnimatePresence, __unstableUseNavigateRegions as useNavigateRegions, ResizableBox } from '@wordpress/components';
 import { useReducedMotion, useViewportMatch, useResizeObserver } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { useState, useEffect } from '@wordpress/element';
+import { useState, useEffect, useRef } from '@wordpress/element';
 import { NavigableRegion } from '@wordpress/interface';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 /**
  * Internal dependencies
  */
 
-import { Sidebar } from '../sidebar';
+import Sidebar from '../sidebar';
 import Editor from '../editor';
 import ListPage from '../list';
 import ErrorBoundary from '../error-boundary';
@@ -28,16 +28,30 @@ import { store as editSiteStore } from '../../store';
 import { useLocation } from '../routes';
 import getIsListPage from '../../utils/get-is-list-page';
 import Header from '../header-edit-mode';
-import SiteIcon from '../site-icon';
-import SiteTitle from '../site-title';
 import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
+import SiteHub from '../site-hub';
+import ResizeHandle from '../block-editor/resize-handle';
+import useSyncCanvasModeWithURL from '../sync-state-with-url/use-sync-canvas-mode-with-url';
 const ANIMATION_DURATION = 0.5;
+const emptyResizeHandleStyles = {
+  position: undefined,
+  userSelect: undefined,
+  cursor: undefined,
+  width: undefined,
+  height: undefined,
+  top: undefined,
+  right: undefined,
+  bottom: undefined,
+  left: undefined
+};
 export default function Layout(_ref) {
   let {
     onError
   } = _ref;
   // This ensures the edited entity id and type are initialized properly.
   useInitEditedEntityFromURL();
+  useSyncCanvasModeWithURL();
+  const hubRef = useRef();
   const {
     params
   } = useLocation();
@@ -45,17 +59,25 @@ export default function Layout(_ref) {
   const isEditorPage = !isListPage;
   const {
     canvasMode,
-    dashboardLink
-  } = useSelect(select => ({
-    canvasMode: select(editSiteStore).__unstableGetCanvasMode(),
-    dashboardLink: select(editSiteStore).getSettings().__experimentalDashboardLink
-  }), []);
-  const {
-    __unstableSetCanvasMode
-  } = useDispatch(editSiteStore);
-  const {
-    clearSelectedBlock
-  } = useDispatch(blockEditorStore);
+    previousShortcut,
+    nextShortcut
+  } = useSelect(select => {
+    const {
+      getAllShortcutKeyCombinations
+    } = select(keyboardShortcutsStore);
+    const {
+      __unstableGetCanvasMode
+    } = select(editSiteStore);
+    return {
+      canvasMode: __unstableGetCanvasMode(),
+      previousShortcut: getAllShortcutKeyCombinations('core/edit-site/previous-region'),
+      nextShortcut: getAllShortcutKeyCombinations('core/edit-site/next-region')
+    };
+  }, []);
+  const navigateRegionsProps = useNavigateRegions({
+    previous: previousShortcut,
+    next: nextShortcut
+  });
   const disableMotion = useReducedMotion();
   const isMobileViewport = useViewportMatch('medium', '<');
   const [isMobileCanvasVisible, setIsMobileCanvasVisible] = useState(false);
@@ -63,11 +85,20 @@ export default function Layout(_ref) {
   const showSidebar = isMobileViewport && !isMobileCanvasVisible || !isMobileViewport && (canvasMode === 'view' || !isEditorPage);
   const showCanvas = isMobileViewport && isMobileCanvasVisible || !isMobileViewport;
   const showFrame = !isEditorPage || canvasMode === 'view' && !isMobileViewport;
-  const showEditButton = isEditorPage && isMobileViewport && canvasMode === 'view' && isMobileCanvasVisible;
-  const isBackToDashboardButton = !isMobileViewport && canvasMode === 'view' || isMobileViewport && !isMobileCanvasVisible; // Ideally this effect could be removed if we move the "isMobileCanvasVisible" into the store.
+  const isFullCanvas = isEditorPage && canvasMode === 'edit' && !isMobileViewport || isMobileCanvasVisible; // Ideally this effect could be removed if we move the "isMobileCanvasVisible" into the store.
 
   const [canvasResizer, canvasSize] = useResizeObserver();
   const [fullResizer, fullSize] = useResizeObserver();
+  const [forcedWidth, setForcedWidth] = useState(null);
+  const [isResizing, setIsResizing] = useState(false);
+  const isResizingEnabled = !isMobileViewport && canvasMode === 'view';
+  const defaultSidebarWidth = isMobileViewport ? '100vw' : 360;
+  let canvasWidth = isResizing ? '100%' : fullSize.width;
+
+  if (showFrame && !isResizing) {
+    canvasWidth = canvasSize.width - canvasPadding;
+  }
+
   useEffect(() => {
     if (canvasMode === 'view' && isMobileViewport) {
       setIsMobileCanvasVisible(false);
@@ -76,80 +107,54 @@ export default function Layout(_ref) {
     if (canvasMode === 'edit' && isMobileViewport) {
       setIsMobileCanvasVisible(true);
     }
-  }, [canvasMode, isMobileViewport]);
-  const siteIconButtonProps = isBackToDashboardButton ? {
-    href: dashboardLink || 'index.php',
-    'aria-label': __('Go back to the dashboard')
-  } : {
-    label: __('Open Navigation Sidebar'),
-    onClick: () => {
-      clearSelectedBlock();
-      setIsMobileCanvasVisible(false);
+  }, [canvasMode, isMobileViewport]); // Synchronizing the URL with the store value of canvasMode happens in an effect
+  // This condition ensures the component is only rendered after the synchronization happens
+  // which prevents any animations due to potential canvasMode value change.
 
-      __unstableSetCanvasMode('view');
-    }
-  };
-  return createElement(Fragment, null, fullResizer, createElement("div", {
-    className: classnames('edit-site-layout', {
-      'is-full-canvas': isEditorPage && canvasMode === 'edit' && !isMobileViewport || isMobileCanvasVisible
+  if (canvasMode === 'init') {
+    return null;
+  }
+
+  return createElement(Fragment, null, fullResizer, createElement("div", _extends({}, navigateRegionsProps, {
+    ref: navigateRegionsProps.ref,
+    className: classnames('edit-site-layout', navigateRegionsProps.className, {
+      'is-full-canvas': isFullCanvas,
+      'is-edit-mode': canvasMode === 'edit'
     })
-  }, createElement("div", {
-    className: "edit-site-layout__header"
-  }, createElement("div", {
-    className: "edit-site-layout__logo"
-  }, createElement(Button, _extends({}, siteIconButtonProps, {
-    className: "edit-site-layout__view-mode-toggle"
-  }), createElement(SiteIcon, {
-    className: "edit-site-layout__view-mode-toggle-icon"
-  })), createElement(AnimatePresence, {
-    initial: false
-  }, (isBackToDashboardButton || showEditButton) && createElement(motion.div, {
-    initial: {
-      opacity: 0
-    },
-    exit: {
-      opacity: 0
-    },
-    animate: {
-      opacity: 1
-    },
-    style: {
-      position: 'absolute',
-      left: 60
-    }
-  }, createElement(HStack, null, isBackToDashboardButton && createElement(SiteTitle, null), showEditButton && createElement(Button, {
-    className: "edit-site-layout__edit-button",
-    label: __('Open the editor'),
-    onClick: () => {
-      __unstableSetCanvasMode('edit');
-    }
-  }, __('Edit'))))), isMobileViewport && !isMobileCanvasVisible && createElement(Button, {
-    onClick: () => setIsMobileCanvasVisible(true),
+  }), createElement(SiteHub, {
+    ref: hubRef,
+    className: "edit-site-layout__hub",
     style: {
-      position: 'fixed',
-      right: 0
-    }
-  }, __('View Editor'))), createElement(AnimatePresence, null, isEditorPage && canvasMode === 'edit' && createElement(NavigableRegion, {
-    as: motion.div,
-    initial: {
-      y: -60
+      width: isResizingEnabled && forcedWidth ? forcedWidth - 48 : undefined
     },
+    isMobileCanvasVisible: isMobileCanvasVisible,
+    setIsMobileCanvasVisible: setIsMobileCanvasVisible
+  }), createElement(AnimatePresence, {
+    initial: false
+  }, isEditorPage && (canvasMode === 'edit' || isMobileCanvasVisible) && createElement(NavigableRegion, {
+    className: "edit-site-layout__header",
+    ariaLabel: __('Editor top bar'),
+    as: motion.div,
     animate: {
       y: 0
     },
+    initial: {
+      y: '-100%'
+    },
     exit: {
-      y: -60
+      y: '-100%'
     },
     transition: {
       type: 'tween',
       duration: disableMotion ? 0 : ANIMATION_DURATION,
       ease: 'easeOut'
-    },
-    className: "edit-site-layout__editor-header",
-    ariaLabel: __('Editor top bar')
-  }, createElement(Header, null)))), createElement(AnimatePresence, {
+    }
+  }, canvasMode === 'edit' && createElement(Header, null))), createElement("div", {
+    className: "edit-site-layout__content"
+  }, createElement(AnimatePresence, {
     initial: false
-  }, showSidebar && createElement(motion.div, {
+  }, showSidebar && createElement(ResizableBox, {
+    as: motion.div,
     initial: {
       opacity: 0
     },
@@ -161,12 +166,48 @@ export default function Layout(_ref) {
     },
     transition: {
       type: 'tween',
-      duration: disableMotion ? 0 : ANIMATION_DURATION,
+      duration: disableMotion || isResizing ? 0 : ANIMATION_DURATION,
       ease: 'easeOut'
     },
-    className: "edit-site-layout__sidebar"
-  }, createElement(Sidebar, null))), showCanvas && createElement("div", {
-    className: "edit-site-layout__canvas-container",
+    size: {
+      height: '100%',
+      width: isResizingEnabled && forcedWidth ? forcedWidth : defaultSidebarWidth
+    },
+    className: "edit-site-layout__sidebar",
+    enable: {
+      right: isResizingEnabled
+    },
+    onResizeStop: (event, direction, elt) => {
+      setForcedWidth(elt.clientWidth);
+      setIsResizing(false);
+    },
+    onResizeStart: () => {
+      setIsResizing(true);
+    },
+    onResize: (event, direction, elt) => {
+      // This is a performance optimization
+      // We set the width imperatively to avoid re-rendering
+      // the whole component while resizing.
+      hubRef.current.style.width = elt.clientWidth - 48 + 'px';
+    },
+    handleComponent: {
+      right: createElement(ResizeHandle, {
+        direction: "right",
+        variation: "separator"
+      })
+    },
+    handleClasses: undefined,
+    handleStyles: {
+      right: emptyResizeHandleStyles
+    },
+    minWidth: isResizingEnabled ? 320 : undefined,
+    maxWidth: isResizingEnabled && fullSize ? fullSize.width - 360 : undefined
+  }, createElement(NavigableRegion, {
+    ariaLabel: __('Navigation sidebar')
+  }, createElement(Sidebar, null)))), showCanvas && createElement("div", {
+    className: classnames('edit-site-layout__canvas-container', {
+      'is-resizing': isResizing
+    }),
     style: {
       paddingTop: showFrame ? canvasPadding : 0,
       paddingBottom: showFrame ? canvasPadding : 0
@@ -177,7 +218,7 @@ export default function Layout(_ref) {
     className: "edit-site-layout__canvas",
     transition: {
       type: 'tween',
-      duration: disableMotion ? 0 : ANIMATION_DURATION,
+      duration: disableMotion || isResizing ? 0 : ANIMATION_DURATION,
       ease: 'easeOut'
     }
   }, createElement(motion.div, {
@@ -189,15 +230,15 @@ export default function Layout(_ref) {
     },
     initial: false,
     animate: {
-      width: showFrame ? canvasSize.width - canvasPadding : fullSize.width
+      width: canvasWidth
     },
     transition: {
       type: 'tween',
-      duration: disableMotion ? 0 : ANIMATION_DURATION,
+      duration: disableMotion || isResizing ? 0 : ANIMATION_DURATION,
       ease: 'easeOut'
     }
   }, createElement(ErrorBoundary, {
     onError: onError
-  }, isEditorPage && createElement(Editor, null), isListPage && createElement(ListPage, null)))))));
+  }, isEditorPage && createElement(Editor, null), isListPage && createElement(ListPage, null))))))));
 }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/layout/index.js"],"names":["classnames","useSelect","useDispatch","Button","__experimentalHStack","HStack","__unstableMotion","motion","__unstableAnimatePresence","AnimatePresence","useReducedMotion","useViewportMatch","useResizeObserver","__","store","blockEditorStore","useState","useEffect","NavigableRegion","Sidebar","Editor","ListPage","ErrorBoundary","editSiteStore","useLocation","getIsListPage","Header","SiteIcon","SiteTitle","useInitEditedEntityFromURL","ANIMATION_DURATION","Layout","onError","params","isListPage","isEditorPage","canvasMode","dashboardLink","select","__unstableGetCanvasMode","getSettings","__experimentalDashboardLink","__unstableSetCanvasMode","clearSelectedBlock","disableMotion","isMobileViewport","isMobileCanvasVisible","setIsMobileCanvasVisible","canvasPadding","showSidebar","showCanvas","showFrame","showEditButton","isBackToDashboardButton","canvasResizer","canvasSize","fullResizer","fullSize","siteIconButtonProps","href","label","onClick","opacity","position","left","right","div","y","type","duration","ease","paddingTop","paddingBottom","width","top","bottom"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tButton,\n\t__experimentalHStack as HStack,\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n} from '@wordpress/components';\nimport {\n\tuseReducedMotion,\n\tuseViewportMatch,\n\tuseResizeObserver,\n} from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\nimport { useState, useEffect } from '@wordpress/element';\nimport { NavigableRegion } from '@wordpress/interface';\n\n/**\n * Internal dependencies\n */\nimport { Sidebar } from '../sidebar';\nimport Editor from '../editor';\nimport ListPage from '../list';\nimport ErrorBoundary from '../error-boundary';\nimport { store as editSiteStore } from '../../store';\nimport { useLocation } from '../routes';\nimport getIsListPage from '../../utils/get-is-list-page';\nimport Header from '../header-edit-mode';\nimport SiteIcon from '../site-icon';\nimport SiteTitle from '../site-title';\nimport useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';\n\nconst ANIMATION_DURATION = 0.5;\n\nexport default function Layout( { onError } ) {\n\t// This ensures the edited entity id and type are initialized properly.\n\tuseInitEditedEntityFromURL();\n\n\tconst { params } = useLocation();\n\tconst isListPage = getIsListPage( params );\n\tconst isEditorPage = ! isListPage;\n\tconst { canvasMode, dashboardLink } = useSelect(\n\t\t( select ) => ( {\n\t\t\tcanvasMode: select( editSiteStore ).__unstableGetCanvasMode(),\n\t\t\tdashboardLink:\n\t\t\t\tselect( editSiteStore ).getSettings()\n\t\t\t\t\t.__experimentalDashboardLink,\n\t\t} ),\n\t\t[]\n\t);\n\tconst { __unstableSetCanvasMode } = useDispatch( editSiteStore );\n\tconst { clearSelectedBlock } = useDispatch( blockEditorStore );\n\tconst disableMotion = useReducedMotion();\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\tconst [ isMobileCanvasVisible, setIsMobileCanvasVisible ] =\n\t\tuseState( false );\n\tconst canvasPadding = isMobileViewport ? 0 : 24;\n\tconst showSidebar =\n\t\t( isMobileViewport && ! isMobileCanvasVisible ) ||\n\t\t( ! isMobileViewport && ( canvasMode === 'view' || ! isEditorPage ) );\n\tconst showCanvas =\n\t\t( isMobileViewport && isMobileCanvasVisible ) || ! isMobileViewport;\n\tconst showFrame =\n\t\t! isEditorPage || ( canvasMode === 'view' && ! isMobileViewport );\n\tconst showEditButton =\n\t\tisEditorPage &&\n\t\tisMobileViewport &&\n\t\tcanvasMode === 'view' &&\n\t\tisMobileCanvasVisible;\n\tconst isBackToDashboardButton =\n\t\t( ! isMobileViewport && canvasMode === 'view' ) ||\n\t\t( isMobileViewport && ! isMobileCanvasVisible );\n\t// Ideally this effect could be removed if we move the \"isMobileCanvasVisible\" into the store.\n\tconst [ canvasResizer, canvasSize ] = useResizeObserver();\n\tconst [ fullResizer, fullSize ] = useResizeObserver();\n\tuseEffect( () => {\n\t\tif ( canvasMode === 'view' && isMobileViewport ) {\n\t\t\tsetIsMobileCanvasVisible( false );\n\t\t}\n\n\t\tif ( canvasMode === 'edit' && isMobileViewport ) {\n\t\t\tsetIsMobileCanvasVisible( true );\n\t\t}\n\t}, [ canvasMode, isMobileViewport ] );\n\tconst siteIconButtonProps = isBackToDashboardButton\n\t\t? {\n\t\t\t\thref: dashboardLink || 'index.php',\n\t\t\t\t'aria-label': __( 'Go back to the dashboard' ),\n\t\t  }\n\t\t: {\n\t\t\t\tlabel: __( 'Open Navigation Sidebar' ),\n\t\t\t\tonClick: () => {\n\t\t\t\t\tclearSelectedBlock();\n\t\t\t\t\tsetIsMobileCanvasVisible( false );\n\t\t\t\t\t__unstableSetCanvasMode( 'view' );\n\t\t\t\t},\n\t\t  };\n\n\treturn (\n\t\t<>\n\t\t\t{ fullResizer }\n\t\t\t<div\n\t\t\t\tclassName={ classnames( 'edit-site-layout', {\n\t\t\t\t\t'is-full-canvas':\n\t\t\t\t\t\t( isEditorPage &&\n\t\t\t\t\t\t\tcanvasMode === 'edit' &&\n\t\t\t\t\t\t\t! isMobileViewport ) ||\n\t\t\t\t\t\tisMobileCanvasVisible,\n\t\t\t\t} ) }\n\t\t\t>\n\t\t\t\t<div className=\"edit-site-layout__header\">\n\t\t\t\t\t<div className=\"edit-site-layout__logo\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t{ ...siteIconButtonProps }\n\t\t\t\t\t\t\tclassName=\"edit-site-layout__view-mode-toggle\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<SiteIcon className=\"edit-site-layout__view-mode-toggle-icon\" />\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t<AnimatePresence initial={ false }>\n\t\t\t\t\t\t\t{ ( isBackToDashboardButton || showEditButton ) && (\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\texit={ { opacity: 0 } }\n\t\t\t\t\t\t\t\t\tanimate={ { opacity: 1 } }\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\t\t\t\tleft: 60,\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<HStack>\n\t\t\t\t\t\t\t\t\t\t{ isBackToDashboardButton && (\n\t\t\t\t\t\t\t\t\t\t\t<SiteTitle />\n\t\t\t\t\t\t\t\t\t\t) }\n\n\t\t\t\t\t\t\t\t\t\t{ showEditButton && (\n\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"edit-site-layout__edit-button\"\n\t\t\t\t\t\t\t\t\t\t\t\tlabel={ __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t'Open the editor'\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\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t__unstableSetCanvasMode(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t'edit'\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>\n\t\t\t\t\t\t\t\t\t\t\t\t{ __( 'Edit' ) }\n\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t</HStack>\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\n\t\t\t\t\t\t{ isMobileViewport && ! isMobileCanvasVisible && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\tsetIsMobileCanvasVisible( true )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tstyle={ { position: 'fixed', right: 0 } }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'View Editor' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</div>\n\t\t\t\t\t<AnimatePresence>\n\t\t\t\t\t\t{ isEditorPage && canvasMode === 'edit' && (\n\t\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\t\tas={ motion.div }\n\t\t\t\t\t\t\t\tinitial={ { y: -60 } }\n\t\t\t\t\t\t\t\tanimate={ { y: 0 } }\n\t\t\t\t\t\t\t\texit={ { y: -60 } }\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\n\t\t\t\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t\t\t\t: ANIMATION_DURATION,\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\tclassName=\"edit-site-layout__editor-header\"\n\t\t\t\t\t\t\t\tariaLabel={ __( 'Editor top bar' ) }\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</div>\n\n\t\t\t\t<AnimatePresence initial={ false }>\n\t\t\t\t\t{ showSidebar && (\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tinitial={ {\n\t\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tanimate={ {\n\t\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\texit={ {\n\t\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\t} }\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\tduration: disableMotion\n\t\t\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t\t\t: ANIMATION_DURATION,\n\t\t\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tclassName=\"edit-site-layout__sidebar\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Sidebar />\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t) }\n\t\t\t\t</AnimatePresence>\n\n\t\t\t\t{ showCanvas && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"edit-site-layout__canvas-container\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\tpaddingTop: showFrame ? canvasPadding : 0,\n\t\t\t\t\t\t\tpaddingBottom: showFrame ? canvasPadding : 0,\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ canvasResizer }\n\t\t\t\t\t\t{ !! canvasSize.width && (\n\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\tinitial={ false }\n\t\t\t\t\t\t\t\tlayout=\"position\"\n\t\t\t\t\t\t\t\tclassName=\"edit-site-layout__canvas\"\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\n\t\t\t\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t\t\t\t: ANIMATION_DURATION,\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<motion.div\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\t\t\t\t\tleft: 0,\n\t\t\t\t\t\t\t\t\t\tbottom: 0,\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\tanimate={ {\n\t\t\t\t\t\t\t\t\t\twidth: showFrame\n\t\t\t\t\t\t\t\t\t\t\t? canvasSize.width - canvasPadding\n\t\t\t\t\t\t\t\t\t\t\t: fullSize.width,\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 onError={ onError }>\n\t\t\t\t\t\t\t\t\t\t{ isEditorPage && <Editor /> }\n\t\t\t\t\t\t\t\t\t\t{ isListPage && <ListPage /> }\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</motion.div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/layout/index.js"],"names":["classnames","useSelect","__unstableMotion","motion","__unstableAnimatePresence","AnimatePresence","__unstableUseNavigateRegions","useNavigateRegions","ResizableBox","useReducedMotion","useViewportMatch","useResizeObserver","__","useState","useEffect","useRef","NavigableRegion","store","keyboardShortcutsStore","Sidebar","Editor","ListPage","ErrorBoundary","editSiteStore","useLocation","getIsListPage","Header","useInitEditedEntityFromURL","SiteHub","ResizeHandle","useSyncCanvasModeWithURL","ANIMATION_DURATION","emptyResizeHandleStyles","position","undefined","userSelect","cursor","width","height","top","right","bottom","left","Layout","onError","hubRef","params","isListPage","isEditorPage","canvasMode","previousShortcut","nextShortcut","select","getAllShortcutKeyCombinations","__unstableGetCanvasMode","navigateRegionsProps","previous","next","disableMotion","isMobileViewport","isMobileCanvasVisible","setIsMobileCanvasVisible","canvasPadding","showSidebar","showCanvas","showFrame","isFullCanvas","canvasResizer","canvasSize","fullResizer","fullSize","forcedWidth","setForcedWidth","isResizing","setIsResizing","isResizingEnabled","defaultSidebarWidth","canvasWidth","ref","className","div","y","type","duration","ease","opacity","event","direction","elt","clientWidth","current","style","paddingTop","paddingBottom"],"mappings":"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","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\tResizableBox,\n} from '@wordpress/components';\nimport {\n\tuseReducedMotion,\n\tuseViewportMatch,\n\tuseResizeObserver,\n} from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { useState, useEffect, useRef } from '@wordpress/element';\nimport { NavigableRegion } from '@wordpress/interface';\nimport { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';\n\n/**\n * Internal dependencies\n */\nimport Sidebar from '../sidebar';\nimport Editor from '../editor';\nimport ListPage from '../list';\nimport ErrorBoundary from '../error-boundary';\nimport { store as editSiteStore } from '../../store';\nimport { useLocation } from '../routes';\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 ResizeHandle from '../block-editor/resize-handle';\nimport useSyncCanvasModeWithURL from '../sync-state-with-url/use-sync-canvas-mode-with-url';\n\nconst ANIMATION_DURATION = 0.5;\nconst emptyResizeHandleStyles = {\n\tposition: undefined,\n\tuserSelect: undefined,\n\tcursor: undefined,\n\twidth: undefined,\n\theight: undefined,\n\ttop: undefined,\n\tright: undefined,\n\tbottom: undefined,\n\tleft: undefined,\n};\n\nexport default function Layout( { onError } ) {\n\t// This ensures the edited entity id and type are initialized properly.\n\tuseInitEditedEntityFromURL();\n\tuseSyncCanvasModeWithURL();\n\n\tconst hubRef = useRef();\n\tconst { params } = useLocation();\n\tconst isListPage = getIsListPage( params );\n\tconst isEditorPage = ! isListPage;\n\tconst { canvasMode, previousShortcut, nextShortcut } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getAllShortcutKeyCombinations } = select(\n\t\t\t\tkeyboardShortcutsStore\n\t\t\t);\n\t\t\tconst { __unstableGetCanvasMode } = select( editSiteStore );\n\t\t\treturn {\n\t\t\t\tcanvasMode: __unstableGetCanvasMode(),\n\t\t\t\tpreviousShortcut: getAllShortcutKeyCombinations(\n\t\t\t\t\t'core/edit-site/previous-region'\n\t\t\t\t),\n\t\t\t\tnextShortcut: getAllShortcutKeyCombinations(\n\t\t\t\t\t'core/edit-site/next-region'\n\t\t\t\t),\n\t\t\t};\n\t\t},\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 isMobileViewport = useViewportMatch( 'medium', '<' );\n\tconst [ isMobileCanvasVisible, setIsMobileCanvasVisible ] =\n\t\tuseState( false );\n\tconst canvasPadding = isMobileViewport ? 0 : 24;\n\tconst showSidebar =\n\t\t( isMobileViewport && ! isMobileCanvasVisible ) ||\n\t\t( ! isMobileViewport && ( canvasMode === 'view' || ! isEditorPage ) );\n\tconst showCanvas =\n\t\t( isMobileViewport && isMobileCanvasVisible ) || ! isMobileViewport;\n\tconst showFrame =\n\t\t! isEditorPage || ( canvasMode === 'view' && ! isMobileViewport );\n\n\tconst isFullCanvas =\n\t\t( isEditorPage && canvasMode === 'edit' && ! isMobileViewport ) ||\n\t\tisMobileCanvasVisible;\n\t// Ideally this effect could be removed if we move the \"isMobileCanvasVisible\" into the store.\n\tconst [ canvasResizer, canvasSize ] = useResizeObserver();\n\tconst [ fullResizer, fullSize ] = useResizeObserver();\n\tconst [ forcedWidth, setForcedWidth ] = useState( null );\n\tconst [ isResizing, setIsResizing ] = useState( false );\n\tconst isResizingEnabled = ! isMobileViewport && canvasMode === 'view';\n\tconst defaultSidebarWidth = isMobileViewport ? '100vw' : 360;\n\tlet canvasWidth = isResizing ? '100%' : fullSize.width;\n\tif ( showFrame && ! isResizing ) {\n\t\tcanvasWidth = canvasSize.width - canvasPadding;\n\t}\n\tuseEffect( () => {\n\t\tif ( canvasMode === 'view' && isMobileViewport ) {\n\t\t\tsetIsMobileCanvasVisible( false );\n\t\t}\n\n\t\tif ( canvasMode === 'edit' && isMobileViewport ) {\n\t\t\tsetIsMobileCanvasVisible( true );\n\t\t}\n\t}, [ canvasMode, isMobileViewport ] );\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{ 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-full-canvas': isFullCanvas,\n\t\t\t\t\t\t'is-edit-mode': canvasMode === 'edit',\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t>\n\t\t\t\t<SiteHub\n\t\t\t\t\tref={ hubRef }\n\t\t\t\t\tclassName=\"edit-site-layout__hub\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\tisResizingEnabled && forcedWidth\n\t\t\t\t\t\t\t\t? forcedWidth - 48\n\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t} }\n\t\t\t\t\tisMobileCanvasVisible={ isMobileCanvasVisible }\n\t\t\t\t\tsetIsMobileCanvasVisible={ setIsMobileCanvasVisible }\n\t\t\t\t/>\n\n\t\t\t\t<AnimatePresence initial={ false }>\n\t\t\t\t\t{ isEditorPage &&\n\t\t\t\t\t\t( canvasMode === 'edit' || isMobileCanvasVisible ) && (\n\t\t\t\t\t\t\t<NavigableRegion\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\tanimate={ {\n\t\t\t\t\t\t\t\t\ty: 0,\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\ty: '-100%',\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\ttransition={ {\n\t\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\t\tduration: disableMotion\n\t\t\t\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t\t\t\t: ANIMATION_DURATION,\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{ canvasMode === 'edit' && <Header /> }\n\t\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t\t) }\n\t\t\t\t</AnimatePresence>\n\n\t\t\t\t<div className=\"edit-site-layout__content\">\n\t\t\t\t\t<AnimatePresence initial={ false }>\n\t\t\t\t\t\t{ showSidebar && (\n\t\t\t\t\t\t\t<ResizableBox\n\t\t\t\t\t\t\t\tas={ motion.div }\n\t\t\t\t\t\t\t\tinitial={ {\n\t\t\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tanimate={ {\n\t\t\t\t\t\t\t\t\topacity: 1,\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\topacity: 0,\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:\n\t\t\t\t\t\t\t\t\t\tdisableMotion || isResizing\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\tease: 'easeOut',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tsize={ {\n\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\t\t\t\tisResizingEnabled && forcedWidth\n\t\t\t\t\t\t\t\t\t\t\t? forcedWidth\n\t\t\t\t\t\t\t\t\t\t\t: defaultSidebarWidth,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tclassName=\"edit-site-layout__sidebar\"\n\t\t\t\t\t\t\t\tenable={ {\n\t\t\t\t\t\t\t\t\tright: isResizingEnabled,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tonResizeStop={ ( event, direction, elt ) => {\n\t\t\t\t\t\t\t\t\tsetForcedWidth( elt.clientWidth );\n\t\t\t\t\t\t\t\t\tsetIsResizing( false );\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tonResizeStart={ () => {\n\t\t\t\t\t\t\t\t\tsetIsResizing( true );\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tonResize={ ( event, direction, elt ) => {\n\t\t\t\t\t\t\t\t\t// This is a performance optimization\n\t\t\t\t\t\t\t\t\t// We set the width imperatively to avoid re-rendering\n\t\t\t\t\t\t\t\t\t// the whole component while resizing.\n\t\t\t\t\t\t\t\t\thubRef.current.style.width =\n\t\t\t\t\t\t\t\t\t\telt.clientWidth - 48 + 'px';\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\thandleComponent={ {\n\t\t\t\t\t\t\t\t\tright: (\n\t\t\t\t\t\t\t\t\t\t<ResizeHandle\n\t\t\t\t\t\t\t\t\t\t\tdirection=\"right\"\n\t\t\t\t\t\t\t\t\t\t\tvariation=\"separator\"\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} }\n\t\t\t\t\t\t\t\thandleClasses={ undefined }\n\t\t\t\t\t\t\t\thandleStyles={ {\n\t\t\t\t\t\t\t\t\tright: emptyResizeHandleStyles,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tminWidth={ isResizingEnabled ? 320 : undefined }\n\t\t\t\t\t\t\t\tmaxWidth={\n\t\t\t\t\t\t\t\t\tisResizingEnabled && fullSize\n\t\t\t\t\t\t\t\t\t\t? fullSize.width - 360\n\t\t\t\t\t\t\t\t\t\t: undefined\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<NavigableRegion\n\t\t\t\t\t\t\t\t\tariaLabel={ __( 'Navigation 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</NavigableRegion>\n\t\t\t\t\t\t\t</ResizableBox>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</AnimatePresence>\n\n\t\t\t\t\t{ showCanvas && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t'edit-site-layout__canvas-container',\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t'is-resizing': isResizing,\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tpaddingTop: showFrame ? canvasPadding : 0,\n\t\t\t\t\t\t\t\tpaddingBottom: showFrame ? canvasPadding : 0,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\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\tinitial={ false }\n\t\t\t\t\t\t\t\t\tlayout=\"position\"\n\t\t\t\t\t\t\t\t\tclassName=\"edit-site-layout__canvas\"\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\tdisableMotion || isResizing\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>\n\t\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\t\t\t\t\t\tleft: 0,\n\t\t\t\t\t\t\t\t\t\t\tbottom: 0,\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\tinitial={ false }\n\t\t\t\t\t\t\t\t\t\tanimate={ {\n\t\t\t\t\t\t\t\t\t\t\twidth: canvasWidth,\n\t\t\t\t\t\t\t\t\t\t} }\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\tdisableMotion || isResizing\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>\n\t\t\t\t\t\t\t\t\t\t<ErrorBoundary onError={ onError }>\n\t\t\t\t\t\t\t\t\t\t\t{ isEditorPage && <Editor /> }\n\t\t\t\t\t\t\t\t\t\t\t{ isListPage && <ListPage /> }\n\t\t\t\t\t\t\t\t\t\t</ErrorBoundary>\n\t\t\t\t\t\t\t\t\t</motion.div>\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"]}

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

@@ -3,6 +3,7 @@ import { createElement, Fragment } from "@wordpress/element";
 /**
  * WordPress dependencies
  */
+import { memo } from '@wordpress/element';
 import { __experimentalNavigatorProvider as NavigatorProvider } from '@wordpress/components';
 /**
  * Internal dependencies
@@ -21,10 +22,12 @@ function SidebarScreens() {
   }));
 }
 
-export function Sidebar() {
+function Sidebar() {
   return createElement(NavigatorProvider, {
     className: "edit-site-sidebar__content",
     initialPath: "/"
   }, createElement(SidebarScreens, null));
 }
+
+export default memo(Sidebar);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar/index.js"],"names":["__experimentalNavigatorProvider","NavigatorProvider","SidebarNavigationScreenMain","SidebarNavigationScreenTemplates","useSyncSidebarPathWithURL","SidebarScreens","Sidebar"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,+BAA+B,IAAIC,iBAA5C,QAAqE,uBAArE;AAEA;AACA;AACA;;AACA,OAAOC,2BAAP,MAAwC,mCAAxC;AACA,OAAOC,gCAAP,MAA6C,wCAA7C;AACA,OAAOC,yBAAP,MAAsC,uDAAtC;;AAEA,SAASC,cAAT,GAA0B;AACzBD,EAAAA,yBAAyB;AAEzB,SACC,8BACC,cAAC,2BAAD,OADD,EAEC,cAAC,gCAAD;AAAkC,IAAA,QAAQ,EAAC;AAA3C,IAFD,EAGC,cAAC,gCAAD;AAAkC,IAAA,QAAQ,EAAC;AAA3C,IAHD,CADD;AAOA;;AAED,OAAO,SAASE,OAAT,GAAmB;AACzB,SACC,cAAC,iBAAD;AACC,IAAA,SAAS,EAAC,4BADX;AAEC,IAAA,WAAW,EAAC;AAFb,KAIC,cAAC,cAAD,OAJD,CADD;AAQA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalNavigatorProvider as NavigatorProvider } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';\nimport SidebarNavigationScreenTemplates from '../sidebar-navigation-screen-templates';\nimport useSyncSidebarPathWithURL from '../sync-state-with-url/use-sync-sidebar-path-with-url';\n\nfunction SidebarScreens() {\n\tuseSyncSidebarPathWithURL();\n\n\treturn (\n\t\t<>\n\t\t\t<SidebarNavigationScreenMain />\n\t\t\t<SidebarNavigationScreenTemplates postType=\"wp_template\" />\n\t\t\t<SidebarNavigationScreenTemplates postType=\"wp_template_part\" />\n\t\t</>\n\t);\n}\n\nexport function Sidebar() {\n\treturn (\n\t\t<NavigatorProvider\n\t\t\tclassName=\"edit-site-sidebar__content\"\n\t\t\tinitialPath=\"/\"\n\t\t>\n\t\t\t<SidebarScreens />\n\t\t</NavigatorProvider>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/sidebar/index.js"],"names":["memo","__experimentalNavigatorProvider","NavigatorProvider","SidebarNavigationScreenMain","SidebarNavigationScreenTemplates","useSyncSidebarPathWithURL","SidebarScreens","Sidebar"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,IAAT,QAAqB,oBAArB;AACA,SAASC,+BAA+B,IAAIC,iBAA5C,QAAqE,uBAArE;AAEA;AACA;AACA;;AACA,OAAOC,2BAAP,MAAwC,mCAAxC;AACA,OAAOC,gCAAP,MAA6C,wCAA7C;AACA,OAAOC,yBAAP,MAAsC,uDAAtC;;AAEA,SAASC,cAAT,GAA0B;AACzBD,EAAAA,yBAAyB;AAEzB,SACC,8BACC,cAAC,2BAAD,OADD,EAEC,cAAC,gCAAD;AAAkC,IAAA,QAAQ,EAAC;AAA3C,IAFD,EAGC,cAAC,gCAAD;AAAkC,IAAA,QAAQ,EAAC;AAA3C,IAHD,CADD;AAOA;;AAED,SAASE,OAAT,GAAmB;AAClB,SACC,cAAC,iBAAD;AACC,IAAA,SAAS,EAAC,4BADX;AAEC,IAAA,WAAW,EAAC;AAFb,KAIC,cAAC,cAAD,OAJD,CADD;AAQA;;AAED,eAAeP,IAAI,CAAEO,OAAF,CAAnB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { memo } from '@wordpress/element';\nimport { __experimentalNavigatorProvider as NavigatorProvider } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';\nimport SidebarNavigationScreenTemplates from '../sidebar-navigation-screen-templates';\nimport useSyncSidebarPathWithURL from '../sync-state-with-url/use-sync-sidebar-path-with-url';\n\nfunction SidebarScreens() {\n\tuseSyncSidebarPathWithURL();\n\n\treturn (\n\t\t<>\n\t\t\t<SidebarNavigationScreenMain />\n\t\t\t<SidebarNavigationScreenTemplates postType=\"wp_template\" />\n\t\t\t<SidebarNavigationScreenTemplates postType=\"wp_template_part\" />\n\t\t</>\n\t);\n}\n\nfunction Sidebar() {\n\treturn (\n\t\t<NavigatorProvider\n\t\t\tclassName=\"edit-site-sidebar__content\"\n\t\t\tinitialPath=\"/\"\n\t\t>\n\t\t\t<SidebarScreens />\n\t\t</NavigatorProvider>\n\t);\n}\n\nexport default memo( Sidebar );\n"]}

package/build-module/components/sidebar-edit-mode/index.js

@@ -28,6 +28,8 @@ const {
 } = createSlotFill('EditSiteSidebarInspector');
 export const SidebarInspectorFill = InspectorFill;
 export function SidebarComplementaryAreaFills() {
+  var _window;
+
   const {
     sidebar,
     isEditorSidebarOpened,
@@ -69,7 +71,7 @@ export function SidebarComplementaryAreaFills() {
 
   let MaybeNavigationMenuSidebar = Fragment;
 
-  if (process.env.IS_GUTENBERG_PLUGIN) {
+  if (((_window = window) === null || _window === void 0 ? void 0 : _window.__experimentalEnableOffCanvasNavigationEditor) === true) {
     MaybeNavigationMenuSidebar = NavigationMenuSidebar;
   }