@wordpress/edit-site 5.34.0 → 5.35.0

package/build-module/components/{sidebar-edit-mode/global-styles-sidebar.js → global-styles-sidebar/index.js}

@@ -13,12 +13,12 @@ import { store as editorStore, privateApis as editorPrivateApis } from '@wordpre
 /**
  * Internal dependencies
  */
-import DefaultSidebar from './default-sidebar';
 import { GlobalStylesUI } from '../global-styles';
 import { store as editSiteStore } from '../../store';
 import { GlobalStylesMenuSlot } from '../global-styles/ui';
 import { unlock } from '../../lock-unlock';
 import { store as coreStore } from '@wordpress/core-data';
+import DefaultSidebar from './default-sidebar';
 const {
   interfaceStore
 } = unlock(editorPrivateApis);
@@ -110,7 +110,8 @@ export default function GlobalStylesSidebar() {
     closeLabel: __('Close Styles'),
     panelClassName: "edit-site-global-styles-sidebar__panel",
     header: createElement(Flex, {
-      className: "edit-site-global-styles-sidebar__header"
+      className: "edit-site-global-styles-sidebar__header",
+      gap: 1
     }, createElement(FlexBlock, {
       style: {
         minWidth: 'min-content'
@@ -122,14 +123,16 @@ export default function GlobalStylesSidebar() {
       label: __('Style Book'),
       isPressed: isStyleBookOpened || isRevisionsStyleBookOpened,
       disabled: shouldClearCanvasContainerView,
-      onClick: toggleStyleBook
+      onClick: toggleStyleBook,
+      size: "compact"
     })), createElement(FlexItem, null, createElement(Button, {
       label: __('Revisions'),
       icon: backup,
       onClick: toggleRevisions,
       disabled: !hasRevisions,
-      isPressed: isRevisionsOpened || isRevisionsStyleBookOpened
+      isPressed: isRevisionsOpened || isRevisionsStyleBookOpened,
+      size: "compact"
     })), createElement(GlobalStylesMenuSlot, null))
   }, createElement(GlobalStylesUI, null));
 }
-//# sourceMappingURL=global-styles-sidebar.js.map
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["FlexItem","FlexBlock","Flex","Button","__experimentalUseNavigator","useNavigator","__","styles","seen","backup","useSelect","useDispatch","useEffect","store","preferencesStore","editorStore","privateApis","editorPrivateApis","GlobalStylesUI","editSiteStore","GlobalStylesMenuSlot","unlock","coreStore","DefaultSidebar","interfaceStore","GlobalStylesSidebar","shouldClearCanvasContainerView","isStyleBookOpened","showListViewByDefault","hasRevisions","isRevisionsOpened","isRevisionsStyleBookOpened","select","getActiveComplementaryArea","getEditorCanvasContainerView","getCanvasMode","canvasContainerView","_isVisualEditorMode","getEditorMode","_isEditCanvasMode","_showListViewByDefault","get","getEntityRecord","__experimentalGetCurrentGlobalStylesId","globalStylesId","globalStyles","undefined","_links","count","setEditorCanvasContainerView","setIsListViewOpened","goTo","toggleRevisions","toggleStyleBook","createElement","className","identifier","title","icon","closeLabel","panelClassName","header","gap","style","minWidth","label","isPressed","disabled","onClick","size"],"sources":["@wordpress/edit-site/src/components/global-styles-sidebar/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tFlexItem,\n\tFlexBlock,\n\tFlex,\n\tButton,\n\t__experimentalUseNavigator as useNavigator,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { styles, seen, backup } from '@wordpress/icons';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useEffect } from '@wordpress/element';\nimport { store as preferencesStore } from '@wordpress/preferences';\nimport {\n\tstore as editorStore,\n\tprivateApis as editorPrivateApis,\n} from '@wordpress/editor';\n\n/**\n * Internal dependencies\n */\nimport { GlobalStylesUI } from '../global-styles';\nimport { store as editSiteStore } from '../../store';\nimport { GlobalStylesMenuSlot } from '../global-styles/ui';\nimport { unlock } from '../../lock-unlock';\nimport { store as coreStore } from '@wordpress/core-data';\nimport DefaultSidebar from './default-sidebar';\n\nconst { interfaceStore } = unlock( editorPrivateApis );\n\nexport default function GlobalStylesSidebar() {\n\tconst {\n\t\tshouldClearCanvasContainerView,\n\t\tisStyleBookOpened,\n\t\tshowListViewByDefault,\n\t\thasRevisions,\n\t\tisRevisionsOpened,\n\t\tisRevisionsStyleBookOpened,\n\t} = useSelect( ( select ) => {\n\t\tconst { getActiveComplementaryArea } = select( interfaceStore );\n\t\tconst { getEditorCanvasContainerView, getCanvasMode } = unlock(\n\t\t\tselect( editSiteStore )\n\t\t);\n\t\tconst canvasContainerView = getEditorCanvasContainerView();\n\t\tconst _isVisualEditorMode =\n\t\t\t'visual' === select( editorStore ).getEditorMode();\n\t\tconst _isEditCanvasMode = 'edit' === getCanvasMode();\n\t\tconst _showListViewByDefault = select( preferencesStore ).get(\n\t\t\t'core',\n\t\t\t'showListViewByDefault'\n\t\t);\n\t\tconst { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =\n\t\t\tselect( coreStore );\n\n\t\tconst globalStylesId = __experimentalGetCurrentGlobalStylesId();\n\t\tconst globalStyles = globalStylesId\n\t\t\t? getEntityRecord( 'root', 'globalStyles', globalStylesId )\n\t\t\t: undefined;\n\n\t\treturn {\n\t\t\tisStyleBookOpened: 'style-book' === canvasContainerView,\n\t\t\tshouldClearCanvasContainerView:\n\t\t\t\t'edit-site/global-styles' !==\n\t\t\t\t\tgetActiveComplementaryArea( 'core' ) ||\n\t\t\t\t! _isVisualEditorMode ||\n\t\t\t\t! _isEditCanvasMode,\n\t\t\tshowListViewByDefault: _showListViewByDefault,\n\t\t\thasRevisions:\n\t\t\t\t!! globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count,\n\t\t\tisRevisionsStyleBookOpened:\n\t\t\t\t'global-styles-revisions:style-book' === canvasContainerView,\n\t\t\tisRevisionsOpened:\n\t\t\t\t'global-styles-revisions' === canvasContainerView,\n\t\t};\n\t}, [] );\n\tconst { setEditorCanvasContainerView } = unlock(\n\t\tuseDispatch( editSiteStore )\n\t);\n\n\tuseEffect( () => {\n\t\tif ( shouldClearCanvasContainerView ) {\n\t\t\tsetEditorCanvasContainerView( undefined );\n\t\t}\n\t}, [ shouldClearCanvasContainerView ] );\n\n\tconst { setIsListViewOpened } = useDispatch( editorStore );\n\tconst { goTo } = useNavigator();\n\n\tconst toggleRevisions = () => {\n\t\tsetIsListViewOpened( false );\n\t\tif ( isRevisionsStyleBookOpened ) {\n\t\t\tgoTo( '/' );\n\t\t\tsetEditorCanvasContainerView( 'style-book' );\n\t\t\treturn;\n\t\t}\n\t\tif ( isRevisionsOpened ) {\n\t\t\tgoTo( '/' );\n\t\t\tsetEditorCanvasContainerView( undefined );\n\t\t\treturn;\n\t\t}\n\t\tgoTo( '/revisions' );\n\n\t\tif ( isStyleBookOpened ) {\n\t\t\tsetEditorCanvasContainerView(\n\t\t\t\t'global-styles-revisions:style-book'\n\t\t\t);\n\t\t} else {\n\t\t\tsetEditorCanvasContainerView( 'global-styles-revisions' );\n\t\t}\n\t};\n\tconst toggleStyleBook = () => {\n\t\tif ( isRevisionsOpened ) {\n\t\t\tsetEditorCanvasContainerView(\n\t\t\t\t'global-styles-revisions:style-book'\n\t\t\t);\n\t\t\treturn;\n\t\t}\n\t\tif ( isRevisionsStyleBookOpened ) {\n\t\t\tsetEditorCanvasContainerView( 'global-styles-revisions' );\n\t\t\treturn;\n\t\t}\n\t\tsetIsListViewOpened( isStyleBookOpened && showListViewByDefault );\n\t\tsetEditorCanvasContainerView(\n\t\t\tisStyleBookOpened ? undefined : 'style-book'\n\t\t);\n\t};\n\n\treturn (\n\t\t<DefaultSidebar\n\t\t\tclassName=\"edit-site-global-styles-sidebar\"\n\t\t\tidentifier=\"edit-site/global-styles\"\n\t\t\ttitle={ __( 'Styles' ) }\n\t\t\ticon={ styles }\n\t\t\tcloseLabel={ __( 'Close Styles' ) }\n\t\t\tpanelClassName=\"edit-site-global-styles-sidebar__panel\"\n\t\t\theader={\n\t\t\t\t<Flex\n\t\t\t\t\tclassName=\"edit-site-global-styles-sidebar__header\"\n\t\t\t\t\tgap={ 1 }\n\t\t\t\t>\n\t\t\t\t\t<FlexBlock style={ { minWidth: 'min-content' } }>\n\t\t\t\t\t\t<h2 className=\"edit-site-global-styles-sidebar__header-title\">\n\t\t\t\t\t\t\t{ __( 'Styles' ) }\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t</FlexBlock>\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\ticon={ seen }\n\t\t\t\t\t\t\tlabel={ __( 'Style Book' ) }\n\t\t\t\t\t\t\tisPressed={\n\t\t\t\t\t\t\t\tisStyleBookOpened || isRevisionsStyleBookOpened\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tdisabled={ shouldClearCanvasContainerView }\n\t\t\t\t\t\t\tonClick={ toggleStyleBook }\n\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tlabel={ __( 'Revisions' ) }\n\t\t\t\t\t\t\ticon={ backup }\n\t\t\t\t\t\t\tonClick={ toggleRevisions }\n\t\t\t\t\t\t\tdisabled={ ! hasRevisions }\n\t\t\t\t\t\t\tisPressed={\n\t\t\t\t\t\t\t\tisRevisionsOpened || isRevisionsStyleBookOpened\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t\t<GlobalStylesMenuSlot />\n\t\t\t\t</Flex>\n\t\t\t}\n\t\t>\n\t\t\t<GlobalStylesUI />\n\t\t</DefaultSidebar>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,142 +1,42 @@
 import { createElement } from "react";
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
-import { useViewportMatch, useReducedMotion } from '@wordpress/compose';
-import { store as blockEditorStore } from '@wordpress/block-editor';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { useSelect } from '@wordpress/data';
-import { useState } from '@wordpress/element';
-import { __unstableMotion as motion } from '@wordpress/components';
-import { store as preferencesStore } from '@wordpress/preferences';
-import { DocumentBar, PostSavedState, store as editorStore, privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-import SiteEditorMoreMenuItems from './more-menu';
-import SaveButton from '../save-button';
-import DocumentTools from './document-tools';
-import { store as editSiteStore } from '../../store';
-import { getEditorCanvasContainerTitle, useHasEditorCanvasContainer } from '../editor-canvas-container';
+import SiteEditorMoreMenu from './more-menu';
 import { unlock } from '../../lock-unlock';
-import { FOCUSABLE_ENTITIES } from '../../utils/constants';
+import SaveButton from '../save-button';
 import { isPreviewingTheme } from '../../utils/is-previewing-theme';
+import { getEditorCanvasContainerTitle, useHasEditorCanvasContainer } from '../editor-canvas-container';
+import { store as editSiteStore } from '../../store';
 const {
-  CollapsableBlockToolbar,
-  MoreMenu,
-  PostViewLink,
-  PreviewDropdown,
-  PinnedItems,
-  PostPublishButtonOrToggle
+  Header: EditorHeader
 } = unlock(editorPrivateApis);
-export default function HeaderEditMode({
+function Header({
   setEntitiesSavedStatesCallback
 }) {
+  const _isPreviewingTheme = isPreviewingTheme();
+  const hasDefaultEditorCanvasView = !useHasEditorCanvasContainer();
   const {
-    templateType,
-    isDistractionFree,
-    blockEditorMode,
-    showIconLabels,
-    editorCanvasView,
-    isFixedToolbar,
-    isPublishSidebarOpened
+    editorCanvasView
   } = useSelect(select => {
-    const {
-      getEditedPostType
-    } = select(editSiteStore);
-    const {
-      __unstableGetEditorMode
-    } = select(blockEditorStore);
-    const {
-      get: getPreference
-    } = select(preferencesStore);
-    const {
-      getDeviceType
-    } = select(editorStore);
     return {
-      deviceType: getDeviceType(),
-      templateType: getEditedPostType(),
-      blockEditorMode: __unstableGetEditorMode(),
-      showIconLabels: getPreference('core', 'showIconLabels'),
-      editorCanvasView: unlock(select(editSiteStore)).getEditorCanvasContainerView(),
-      isDistractionFree: getPreference('core', 'distractionFree'),
-      isFixedToolbar: getPreference('core', 'fixedToolbar'),
-      isPublishSidebarOpened: select(editorStore).isPublishSidebarOpened()
+      editorCanvasView: unlock(select(editSiteStore)).getEditorCanvasContainerView()
     };
   }, []);
-  const isLargeViewport = useViewportMatch('medium');
-  const showTopToolbar = isLargeViewport && isFixedToolbar && blockEditorMode !== 'zoom-out';
-  const disableMotion = useReducedMotion();
-  const hasDefaultEditorCanvasView = !useHasEditorCanvasContainer();
-  const isFocusMode = FOCUSABLE_ENTITIES.includes(templateType);
-  const isZoomedOutView = blockEditorMode === 'zoom-out';
-  const [isBlockToolsCollapsed, setIsBlockToolsCollapsed] = useState(true);
-  const toolbarVariants = {
-    isDistractionFree: {
-      y: '-50px'
-    },
-    isDistractionFreeHovering: {
-      y: 0
-    },
-    view: {
-      y: 0
-    },
-    edit: {
-      y: 0
-    }
-  };
-  const toolbarTransition = {
-    type: 'tween',
-    duration: disableMotion ? 0 : 0.2,
-    ease: 'easeOut'
-  };
-  const _isPreviewingTheme = isPreviewingTheme();
-  return createElement("div", {
-    className: classnames('edit-site-header-edit-mode', {
-      'show-icon-labels': showIconLabels,
-      'show-block-toolbar': !isBlockToolsCollapsed && showTopToolbar
-    })
-  }, hasDefaultEditorCanvasView && createElement(motion.div, {
-    className: "edit-site-header-edit-mode__start",
-    variants: toolbarVariants,
-    transition: toolbarTransition
-  }, createElement(DocumentTools, {
-    blockEditorMode: blockEditorMode,
-    isDistractionFree: isDistractionFree
-  }), showTopToolbar && createElement(CollapsableBlockToolbar, {
-    isCollapsed: isBlockToolsCollapsed,
-    onToggle: setIsBlockToolsCollapsed
-  })), !isDistractionFree && createElement("div", {
-    className: "edit-site-header-edit-mode__center"
-  }, !hasDefaultEditorCanvasView ? getEditorCanvasContainerTitle(editorCanvasView) : createElement(DocumentBar, null)), createElement("div", {
-    className: "edit-site-header-edit-mode__end"
-  }, createElement(motion.div, {
-    className: "edit-site-header-edit-mode__actions",
-    variants: toolbarVariants,
-    transition: toolbarTransition
-  }, isLargeViewport && createElement("div", {
-    className: classnames('edit-site-header-edit-mode__preview-options', {
-      'is-zoomed-out': isZoomedOutView
-    })
-  }, createElement(PreviewDropdown, {
-    disabled: isFocusMode || !hasDefaultEditorCanvasView
-  })), createElement(PostViewLink, null), !_isPreviewingTheme && !isPublishSidebarOpened &&
-  // This button isn't completely hidden by the publish sidebar.
-  // We can't hide the whole toolbar when the publish sidebar is open because
-  // we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node.
-  // We track that DOM node to return focus to the PostPublishButtonOrToggle
-  // when the publish sidebar has been closed.
-  createElement(PostSavedState, null), !_isPreviewingTheme && createElement(PostPublishButtonOrToggle, {
-    setEntitiesSavedStatesCallback: setEntitiesSavedStatesCallback
-  }), _isPreviewingTheme && createElement(SaveButton, {
-    size: "compact"
-  }), !isDistractionFree && createElement(PinnedItems.Slot, {
-    scope: "core"
-  }), createElement(MoreMenu, null), createElement(SiteEditorMoreMenuItems, null))));
+  return createElement(EditorHeader, {
+    setEntitiesSavedStatesCallback: setEntitiesSavedStatesCallback,
+    customSaveButton: _isPreviewingTheme && createElement(SaveButton, {
+      size: "compact"
+    }),
+    forceDisableBlockTools: !hasDefaultEditorCanvasView,
+    title: !hasDefaultEditorCanvasView ? getEditorCanvasContainerTitle(editorCanvasView) : undefined
+  }, createElement(SiteEditorMoreMenu, null));
 }
+export default Header;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["classnames","useViewportMatch","useReducedMotion","store","blockEditorStore","useSelect","useState","__unstableMotion","motion","preferencesStore","DocumentBar","PostSavedState","editorStore","privateApis","editorPrivateApis","SiteEditorMoreMenuItems","SaveButton","DocumentTools","editSiteStore","getEditorCanvasContainerTitle","useHasEditorCanvasContainer","unlock","FOCUSABLE_ENTITIES","isPreviewingTheme","CollapsableBlockToolbar","MoreMenu","PostViewLink","PreviewDropdown","PinnedItems","PostPublishButtonOrToggle","HeaderEditMode","setEntitiesSavedStatesCallback","templateType","isDistractionFree","blockEditorMode","showIconLabels","editorCanvasView","isFixedToolbar","isPublishSidebarOpened","select","getEditedPostType","__unstableGetEditorMode","get","getPreference","getDeviceType","deviceType","getEditorCanvasContainerView","isLargeViewport","showTopToolbar","disableMotion","hasDefaultEditorCanvasView","isFocusMode","includes","isZoomedOutView","isBlockToolsCollapsed","setIsBlockToolsCollapsed","toolbarVariants","y","isDistractionFreeHovering","view","edit","toolbarTransition","type","duration","ease","_isPreviewingTheme","createElement","className","div","variants","transition","isCollapsed","onToggle","disabled","size","Slot","scope"],"sources":["@wordpress/edit-site/src/components/header-edit-mode/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useViewportMatch, useReducedMotion } from '@wordpress/compose';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\nimport { useSelect } from '@wordpress/data';\nimport { useState } from '@wordpress/element';\nimport { __unstableMotion as motion } from '@wordpress/components';\nimport { store as preferencesStore } from '@wordpress/preferences';\nimport {\n\tDocumentBar,\n\tPostSavedState,\n\tstore as editorStore,\n\tprivateApis as editorPrivateApis,\n} from '@wordpress/editor';\n\n/**\n * Internal dependencies\n */\nimport SiteEditorMoreMenuItems from './more-menu';\nimport SaveButton from '../save-button';\nimport DocumentTools from './document-tools';\nimport { store as editSiteStore } from '../../store';\nimport {\n\tgetEditorCanvasContainerTitle,\n\tuseHasEditorCanvasContainer,\n} from '../editor-canvas-container';\nimport { unlock } from '../../lock-unlock';\nimport { FOCUSABLE_ENTITIES } from '../../utils/constants';\nimport { isPreviewingTheme } from '../../utils/is-previewing-theme';\n\nconst {\n\tCollapsableBlockToolbar,\n\tMoreMenu,\n\tPostViewLink,\n\tPreviewDropdown,\n\tPinnedItems,\n\tPostPublishButtonOrToggle,\n} = unlock( editorPrivateApis );\n\nexport default function HeaderEditMode( { setEntitiesSavedStatesCallback } ) {\n\tconst {\n\t\ttemplateType,\n\t\tisDistractionFree,\n\t\tblockEditorMode,\n\t\tshowIconLabels,\n\t\teditorCanvasView,\n\t\tisFixedToolbar,\n\t\tisPublishSidebarOpened,\n\t} = useSelect( ( select ) => {\n\t\tconst { getEditedPostType } = select( editSiteStore );\n\t\tconst { __unstableGetEditorMode } = select( blockEditorStore );\n\t\tconst { get: getPreference } = select( preferencesStore );\n\t\tconst { getDeviceType } = select( editorStore );\n\n\t\treturn {\n\t\t\tdeviceType: getDeviceType(),\n\t\t\ttemplateType: getEditedPostType(),\n\t\t\tblockEditorMode: __unstableGetEditorMode(),\n\t\t\tshowIconLabels: getPreference( 'core', 'showIconLabels' ),\n\t\t\teditorCanvasView: unlock(\n\t\t\t\tselect( editSiteStore )\n\t\t\t).getEditorCanvasContainerView(),\n\t\t\tisDistractionFree: getPreference( 'core', 'distractionFree' ),\n\t\t\tisFixedToolbar: getPreference( 'core', 'fixedToolbar' ),\n\t\t\tisPublishSidebarOpened:\n\t\t\t\tselect( editorStore ).isPublishSidebarOpened(),\n\t\t};\n\t}, [] );\n\n\tconst isLargeViewport = useViewportMatch( 'medium' );\n\tconst showTopToolbar =\n\t\tisLargeViewport && isFixedToolbar && blockEditorMode !== 'zoom-out';\n\tconst disableMotion = useReducedMotion();\n\n\tconst hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer();\n\n\tconst isFocusMode = FOCUSABLE_ENTITIES.includes( templateType );\n\n\tconst isZoomedOutView = blockEditorMode === 'zoom-out';\n\n\tconst [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] =\n\t\tuseState( true );\n\n\tconst toolbarVariants = {\n\t\tisDistractionFree: { y: '-50px' },\n\t\tisDistractionFreeHovering: { y: 0 },\n\t\tview: { y: 0 },\n\t\tedit: { y: 0 },\n\t};\n\n\tconst toolbarTransition = {\n\t\ttype: 'tween',\n\t\tduration: disableMotion ? 0 : 0.2,\n\t\tease: 'easeOut',\n\t};\n\n\tconst _isPreviewingTheme = isPreviewingTheme();\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames( 'edit-site-header-edit-mode', {\n\t\t\t\t'show-icon-labels': showIconLabels,\n\t\t\t\t'show-block-toolbar': ! isBlockToolsCollapsed && showTopToolbar,\n\t\t\t} ) }\n\t\t>\n\t\t\t{ hasDefaultEditorCanvasView && (\n\t\t\t\t<motion.div\n\t\t\t\t\tclassName=\"edit-site-header-edit-mode__start\"\n\t\t\t\t\tvariants={ toolbarVariants }\n\t\t\t\t\ttransition={ toolbarTransition }\n\t\t\t\t>\n\t\t\t\t\t<DocumentTools\n\t\t\t\t\t\tblockEditorMode={ blockEditorMode }\n\t\t\t\t\t\tisDistractionFree={ isDistractionFree }\n\t\t\t\t\t/>\n\t\t\t\t\t{ showTopToolbar && (\n\t\t\t\t\t\t<CollapsableBlockToolbar\n\t\t\t\t\t\t\tisCollapsed={ isBlockToolsCollapsed }\n\t\t\t\t\t\t\tonToggle={ setIsBlockToolsCollapsed }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</motion.div>\n\t\t\t) }\n\n\t\t\t{ ! isDistractionFree && (\n\t\t\t\t<div className=\"edit-site-header-edit-mode__center\">\n\t\t\t\t\t{ ! hasDefaultEditorCanvasView ? (\n\t\t\t\t\t\tgetEditorCanvasContainerTitle( editorCanvasView )\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<DocumentBar />\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t) }\n\n\t\t\t<div className=\"edit-site-header-edit-mode__end\">\n\t\t\t\t<motion.div\n\t\t\t\t\tclassName=\"edit-site-header-edit-mode__actions\"\n\t\t\t\t\tvariants={ toolbarVariants }\n\t\t\t\t\ttransition={ toolbarTransition }\n\t\t\t\t>\n\t\t\t\t\t{ isLargeViewport && (\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-header-edit-mode__preview-options',\n\t\t\t\t\t\t\t\t{ 'is-zoomed-out': isZoomedOutView }\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<PreviewDropdown\n\t\t\t\t\t\t\t\tdisabled={\n\t\t\t\t\t\t\t\t\tisFocusMode || ! hasDefaultEditorCanvasView\n\t\t\t\t\t\t\t\t}\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\t<PostViewLink />\n\t\t\t\t\t{\n\t\t\t\t\t\t// TODO: For now we conditionally render the Save/Publish buttons based on\n\t\t\t\t\t\t// some specific site editor extra handling. Examples are when we're previewing\n\t\t\t\t\t\t// a theme, handling of global styles changes or when we're in 'view' mode,\n\t\t\t\t\t\t// which opens the save panel in a Modal.\n\t\t\t\t\t }\n\t\t\t\t\t{ ! _isPreviewingTheme && ! isPublishSidebarOpened && (\n\t\t\t\t\t\t// This button isn't completely hidden by the publish sidebar.\n\t\t\t\t\t\t// We can't hide the whole toolbar when the publish sidebar is open because\n\t\t\t\t\t\t// we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node.\n\t\t\t\t\t\t// We track that DOM node to return focus to the PostPublishButtonOrToggle\n\t\t\t\t\t\t// when the publish sidebar has been closed.\n\t\t\t\t\t\t<PostSavedState />\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! _isPreviewingTheme && (\n\t\t\t\t\t\t<PostPublishButtonOrToggle\n\t\t\t\t\t\t\tsetEntitiesSavedStatesCallback={\n\t\t\t\t\t\t\t\tsetEntitiesSavedStatesCallback\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\t{ _isPreviewingTheme && <SaveButton size=\"compact\" /> }\n\t\t\t\t\t{ ! isDistractionFree && <PinnedItems.Slot scope=\"core\" /> }\n\t\t\t\t\t<MoreMenu />\n\t\t\t\t\t<SiteEditorMoreMenuItems />\n\t\t\t\t</motion.div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["privateApis","editorPrivateApis","useSelect","SiteEditorMoreMenu","unlock","SaveButton","isPreviewingTheme","getEditorCanvasContainerTitle","useHasEditorCanvasContainer","store","editSiteStore","Header","EditorHeader","setEntitiesSavedStatesCallback","_isPreviewingTheme","hasDefaultEditorCanvasView","editorCanvasView","select","getEditorCanvasContainerView","createElement","customSaveButton","size","forceDisableBlockTools","title","undefined"],"sources":["@wordpress/edit-site/src/components/header-edit-mode/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { privateApis as editorPrivateApis } from '@wordpress/editor';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport SiteEditorMoreMenu from './more-menu';\nimport { unlock } from '../../lock-unlock';\nimport SaveButton from '../save-button';\nimport { isPreviewingTheme } from '../../utils/is-previewing-theme';\nimport {\n\tgetEditorCanvasContainerTitle,\n\tuseHasEditorCanvasContainer,\n} from '../editor-canvas-container';\nimport { store as editSiteStore } from '../../store';\n\nconst { Header: EditorHeader } = unlock( editorPrivateApis );\n\nfunction Header( { setEntitiesSavedStatesCallback } ) {\n\tconst _isPreviewingTheme = isPreviewingTheme();\n\tconst hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer();\n\tconst { editorCanvasView } = useSelect( ( select ) => {\n\t\treturn {\n\t\t\teditorCanvasView: unlock(\n\t\t\t\tselect( editSiteStore )\n\t\t\t).getEditorCanvasContainerView(),\n\t\t};\n\t}, [] );\n\n\treturn (\n\t\t<EditorHeader\n\t\t\tsetEntitiesSavedStatesCallback={ setEntitiesSavedStatesCallback }\n\t\t\tcustomSaveButton={\n\t\t\t\t_isPreviewingTheme && <SaveButton size=\"compact\" />\n\t\t\t}\n\t\t\tforceDisableBlockTools={ ! hasDefaultEditorCanvasView }\n\t\t\ttitle={\n\t\t\t\t! hasDefaultEditorCanvasView\n\t\t\t\t\t? getEditorCanvasContainerTitle( editorCanvasView )\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t>\n\t\t\t<SiteEditorMoreMenu />\n\t\t</EditorHeader>\n\t);\n}\n\nexport default Header;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,WAAW,IAAIC,iBAAiB,QAAQ,mBAAmB;AACpE,SAASC,SAAS,QAAQ,iBAAiB;;AAE3C;AACA;AACA;AACA,OAAOC,kBAAkB,MAAM,aAAa;AAC5C,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,OAAOC,UAAU,MAAM,gBAAgB;AACvC,SAASC,iBAAiB,QAAQ,iCAAiC;AACnE,SACCC,6BAA6B,EAC7BC,2BAA2B,QACrB,4BAA4B;AACnC,SAASC,KAAK,IAAIC,aAAa,QAAQ,aAAa;AAEpD,MAAM;EAAEC,MAAM,EAAEC;AAAa,CAAC,GAAGR,MAAM,CAAEH,iBAAkB,CAAC;AAE5D,SAASU,MAAMA,CAAE;EAAEE;AAA+B,CAAC,EAAG;EACrD,MAAMC,kBAAkB,GAAGR,iBAAiB,CAAC,CAAC;EAC9C,MAAMS,0BAA0B,GAAG,CAAEP,2BAA2B,CAAC,CAAC;EAClE,MAAM;IAAEQ;EAAiB,CAAC,GAAGd,SAAS,CAAIe,MAAM,IAAM;IACrD,OAAO;MACND,gBAAgB,EAAEZ,MAAM,CACvBa,MAAM,CAAEP,aAAc,CACvB,CAAC,CAACQ,4BAA4B,CAAC;IAChC,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EAEP,OACCC,aAAA,CAACP,YAAY;IACZC,8BAA8B,EAAGA,8BAAgC;IACjEO,gBAAgB,EACfN,kBAAkB,IAAIK,aAAA,CAACd,UAAU;MAACgB,IAAI,EAAC;IAAS,CAAE,CAClD;IACDC,sBAAsB,EAAG,CAAEP,0BAA4B;IACvDQ,KAAK,EACJ,CAAER,0BAA0B,GACzBR,6BAA6B,CAAES,gBAAiB,CAAC,GACjDQ;EACH,GAEDL,aAAA,CAAChB,kBAAkB,MAAE,CACR,CAAC;AAEjB;AAEA,eAAeQ,MAAM","ignoreList":[]}

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

@@ -2,7 +2,7 @@ import { createElement, Fragment } from "react";
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -62,7 +62,6 @@ export default function Layout() {
   const isMobileViewport = useViewportMatch('medium', '<');
   const {
     isDistractionFree,
-    isZoomOutMode,
     hasFixedToolbar,
     hasBlockSelected,
     canvasMode,
@@ -83,7 +82,6 @@ export default function Layout() {
       hasFixedToolbar: select(preferencesStore).get('core', 'fixedToolbar'),
       isDistractionFree: select(preferencesStore).get('core', 'distractionFree'),
       hasBlockBreadcrumbs: select(preferencesStore).get('core', 'showBlockBreadcrumbs'),
-      isZoomOutMode: select(blockEditorStore).__unstableGetEditorMode() === 'zoom-out',
       hasBlockSelected: select(blockEditorStore).getBlockSelectionStart()
     };
   }, []);
@@ -146,12 +144,11 @@ export default function Layout() {
   return createElement(Fragment, null, createElement(CommandMenu, null), createElement(KeyboardShortcutsRegister, null), createElement(KeyboardShortcutsGlobal, null), fullResizer, createElement("div", {
     ...navigateRegionsProps,
     ref: navigateRegionsProps.ref,
-    className: classnames('edit-site-layout', navigateRegionsProps.className, {
+    className: clsx('edit-site-layout', navigateRegionsProps.className, {
       'is-distraction-free': isDistractionFree && canvasMode === 'edit',
       'is-full-canvas': canvasMode === 'edit',
       'has-fixed-toolbar': hasFixedToolbar,
       'is-block-toolbar-visible': hasBlockSelected,
-      'is-zoom-out': isZoomOutMode,
       'has-block-breadcrumbs': hasBlockBreadcrumbs && !isDistractionFree && canvasMode === 'edit'
     })
   }, createElement(motion.div, {
@@ -220,7 +217,7 @@ export default function Layout() {
   }, areas.content), !isMobileViewport && areas.preview && createElement("div", {
     className: "edit-site-layout__canvas-container"
   }, canvasResizer, !!canvasSize.width && createElement("div", {
-    className: classnames('edit-site-layout__canvas', {
+    className: clsx('edit-site-layout__canvas', {
       'is-right-aligned': isResizableFrameOversized
     }),
     ref: animationRef

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

@@ -1 +1 @@
-{"version":3,"names":["classnames","useSelect","__unstableMotion","motion","__unstableAnimatePresence","AnimatePresence","__unstableUseNavigateRegions","useNavigateRegions","useReducedMotion","useViewportMatch","useResizeObserver","__","useState","store","keyboardShortcutsStore","CommandMenu","privateApis","commandsPrivateApis","preferencesStore","blockEditorPrivateApis","blockEditorStore","coreCommandsPrivateApis","editorPrivateApis","ErrorBoundary","editSiteStore","useInitEditedEntityFromURL","SiteHub","ResizableFrame","useSyncCanvasModeWithURL","unlock","SavePanel","KeyboardShortcutsRegister","KeyboardShortcutsGlobal","useCommonCommands","useEditModeCommands","useIsSiteEditorLoading","useLayoutAreas","useMovingAnimation","SidebarContent","SaveHub","useCommands","useCommandContext","useGlobalStyle","NavigableRegion","ANIMATION_DURATION","Layout","isMobileViewport","isDistractionFree","isZoomOutMode","hasFixedToolbar","hasBlockSelected","canvasMode","previousShortcut","nextShortcut","hasBlockBreadcrumbs","select","getAllShortcutKeyCombinations","getCanvasMode","get","__unstableGetEditorMode","getBlockSelectionStart","navigateRegionsProps","previous","next","disableMotion","canvasResizer","canvasSize","fullResizer","isEditorLoading","isResizableFrameOversized","setIsResizableFrameOversized","key","routeKey","areas","widths","animationRef","triggerAnimationOnChange","headerAnimationState","commandContext","backgroundColor","gradientValue","createElement","Fragment","ref","className","div","variants","opacity","transition","type","delay","delayChildren","isDistractionFreeHovering","view","edit","whileHover","undefined","animate","isTransparent","mobile","ariaLabel","initial","exit","duration","ease","sidebar","content","style","maxWidth","preview","width","isReady","isFullWidth","defaultSize","height","isOversized","setIsOversized","innerContentStyle","background"],"sources":["@wordpress/edit-site/src/components/layout/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport {\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n\t__unstableUseNavigateRegions as useNavigateRegions,\n} from '@wordpress/components';\nimport {\n\tuseReducedMotion,\n\tuseViewportMatch,\n\tuseResizeObserver,\n} from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';\nimport {\n\tCommandMenu,\n\tprivateApis as commandsPrivateApis,\n} from '@wordpress/commands';\nimport { store as preferencesStore } from '@wordpress/preferences';\nimport {\n\tprivateApis as blockEditorPrivateApis,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';\nimport { privateApis as editorPrivateApis } from '@wordpress/editor';\n\n/**\n * Internal dependencies\n */\nimport ErrorBoundary from '../error-boundary';\nimport { store as editSiteStore } from '../../store';\nimport useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';\nimport SiteHub from '../site-hub';\nimport ResizableFrame from '../resizable-frame';\nimport useSyncCanvasModeWithURL from '../sync-state-with-url/use-sync-canvas-mode-with-url';\nimport { unlock } from '../../lock-unlock';\nimport SavePanel from '../save-panel';\nimport KeyboardShortcutsRegister from '../keyboard-shortcuts/register';\nimport KeyboardShortcutsGlobal from '../keyboard-shortcuts/global';\nimport { useCommonCommands } from '../../hooks/commands/use-common-commands';\nimport { useEditModeCommands } from '../../hooks/commands/use-edit-mode-commands';\nimport { useIsSiteEditorLoading } from './hooks';\nimport useLayoutAreas from './router';\nimport useMovingAnimation from './animation';\nimport SidebarContent from '../sidebar';\nimport SaveHub from '../save-hub';\n\nconst { useCommands } = unlock( coreCommandsPrivateApis );\nconst { useCommandContext } = unlock( commandsPrivateApis );\nconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\nconst { NavigableRegion } = unlock( editorPrivateApis );\n\nconst ANIMATION_DURATION = 0.3;\n\nexport default function Layout() {\n\t// This ensures the edited entity id and type are initialized properly.\n\tuseInitEditedEntityFromURL();\n\tuseSyncCanvasModeWithURL();\n\tuseCommands();\n\tuseEditModeCommands();\n\tuseCommonCommands();\n\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\n\tconst {\n\t\tisDistractionFree,\n\t\tisZoomOutMode,\n\t\thasFixedToolbar,\n\t\thasBlockSelected,\n\t\tcanvasMode,\n\t\tpreviousShortcut,\n\t\tnextShortcut,\n\t\thasBlockBreadcrumbs,\n\t} = useSelect( ( select ) => {\n\t\tconst { getAllShortcutKeyCombinations } = select(\n\t\t\tkeyboardShortcutsStore\n\t\t);\n\t\tconst { getCanvasMode } = unlock( select( editSiteStore ) );\n\t\treturn {\n\t\t\tcanvasMode: getCanvasMode(),\n\t\t\tpreviousShortcut: getAllShortcutKeyCombinations(\n\t\t\t\t'core/editor/previous-region'\n\t\t\t),\n\t\t\tnextShortcut: getAllShortcutKeyCombinations(\n\t\t\t\t'core/editor/next-region'\n\t\t\t),\n\t\t\thasFixedToolbar: select( preferencesStore ).get(\n\t\t\t\t'core',\n\t\t\t\t'fixedToolbar'\n\t\t\t),\n\t\t\tisDistractionFree: select( preferencesStore ).get(\n\t\t\t\t'core',\n\t\t\t\t'distractionFree'\n\t\t\t),\n\t\t\thasBlockBreadcrumbs: select( preferencesStore ).get(\n\t\t\t\t'core',\n\t\t\t\t'showBlockBreadcrumbs'\n\t\t\t),\n\t\t\tisZoomOutMode:\n\t\t\t\tselect( blockEditorStore ).__unstableGetEditorMode() ===\n\t\t\t\t'zoom-out',\n\t\t\thasBlockSelected:\n\t\t\t\tselect( blockEditorStore ).getBlockSelectionStart(),\n\t\t};\n\t}, [] );\n\tconst navigateRegionsProps = useNavigateRegions( {\n\t\tprevious: previousShortcut,\n\t\tnext: nextShortcut,\n\t} );\n\tconst disableMotion = useReducedMotion();\n\tconst [ canvasResizer, canvasSize ] = useResizeObserver();\n\tconst [ fullResizer ] = useResizeObserver();\n\tconst isEditorLoading = useIsSiteEditorLoading();\n\tconst [ isResizableFrameOversized, setIsResizableFrameOversized ] =\n\t\tuseState( false );\n\tconst { key: routeKey, areas, widths } = useLayoutAreas();\n\tconst animationRef = useMovingAnimation( {\n\t\ttriggerAnimationOnChange: canvasMode + '__' + routeKey,\n\t} );\n\n\t// This determines which animation variant should apply to the header.\n\t// There is also a `isDistractionFreeHovering` state that gets priority\n\t// when hovering the `edit-site-layout__header-container` in distraction\n\t// free mode. It's set via framer and trickles down to all the children\n\t// so they can use this variant state too.\n\t//\n\t// TODO: The issue with this is we want to have the hover state stick when hovering\n\t// a popover opened via the header. We'll probably need to lift this state to\n\t// handle it ourselves. Also, focusWithin the header needs to be handled.\n\tlet headerAnimationState;\n\n\tif ( canvasMode === 'view' ) {\n\t\t// We need 'view' to always take priority so 'isDistractionFree'\n\t\t// doesn't bleed over into the view (sidebar) state\n\t\theaderAnimationState = 'view';\n\t} else if ( isDistractionFree ) {\n\t\theaderAnimationState = 'isDistractionFree';\n\t} else {\n\t\theaderAnimationState = canvasMode; // edit, view, init\n\t}\n\n\t// Sets the right context for the command palette\n\tlet commandContext = 'site-editor';\n\n\tif ( canvasMode === 'edit' ) {\n\t\tcommandContext = 'site-editor-edit';\n\t}\n\tif ( hasBlockSelected ) {\n\t\tcommandContext = 'block-selection-edit';\n\t}\n\tuseCommandContext( commandContext );\n\n\tconst [ backgroundColor ] = useGlobalStyle( 'color.background' );\n\tconst [ gradientValue ] = useGlobalStyle( 'color.gradient' );\n\n\t// Synchronizing the URL with the store value of canvasMode happens in an effect\n\t// This condition ensures the component is only rendered after the synchronization happens\n\t// which prevents any animations due to potential canvasMode value change.\n\tif ( canvasMode === 'init' ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<CommandMenu />\n\t\t\t<KeyboardShortcutsRegister />\n\t\t\t<KeyboardShortcutsGlobal />\n\t\t\t{ fullResizer }\n\t\t\t<div\n\t\t\t\t{ ...navigateRegionsProps }\n\t\t\t\tref={ navigateRegionsProps.ref }\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'edit-site-layout',\n\t\t\t\t\tnavigateRegionsProps.className,\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-distraction-free':\n\t\t\t\t\t\t\tisDistractionFree && canvasMode === 'edit',\n\t\t\t\t\t\t'is-full-canvas': canvasMode === 'edit',\n\t\t\t\t\t\t'has-fixed-toolbar': hasFixedToolbar,\n\t\t\t\t\t\t'is-block-toolbar-visible': hasBlockSelected,\n\t\t\t\t\t\t'is-zoom-out': isZoomOutMode,\n\t\t\t\t\t\t'has-block-breadcrumbs':\n\t\t\t\t\t\t\thasBlockBreadcrumbs &&\n\t\t\t\t\t\t\t! isDistractionFree &&\n\t\t\t\t\t\t\tcanvasMode === 'edit',\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t>\n\t\t\t\t<motion.div\n\t\t\t\t\tclassName=\"edit-site-layout__header-container\"\n\t\t\t\t\tvariants={ {\n\t\t\t\t\t\tisDistractionFree: {\n\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\ttransition: {\n\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\tdelay: 0.8,\n\t\t\t\t\t\t\t\tdelayChildren: 0.8,\n\t\t\t\t\t\t\t}, // How long to wait before the header exits\n\t\t\t\t\t\t},\n\t\t\t\t\t\tisDistractionFreeHovering: {\n\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\ttransition: {\n\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\tdelay: 0.2,\n\t\t\t\t\t\t\t\tdelayChildren: 0.2,\n\t\t\t\t\t\t\t}, // How long to wait before the header shows\n\t\t\t\t\t\t},\n\t\t\t\t\t\tview: { opacity: 1 },\n\t\t\t\t\t\tedit: { opacity: 1 },\n\t\t\t\t\t} }\n\t\t\t\t\twhileHover={\n\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t? 'isDistractionFreeHovering'\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tanimate={ headerAnimationState }\n\t\t\t\t>\n\t\t\t\t\t<SiteHub\n\t\t\t\t\t\tisTransparent={ isResizableFrameOversized }\n\t\t\t\t\t\tclassName=\"edit-site-layout__hub\"\n\t\t\t\t\t/>\n\t\t\t\t</motion.div>\n\n\t\t\t\t<div className=\"edit-site-layout__content\">\n\t\t\t\t\t{ /*\n\t\t\t\t\t\tThe NavigableRegion must always be rendered and not use\n\t\t\t\t\t\t`inert` otherwise `useNavigateRegions` will fail.\n\t\t\t\t\t*/ }\n\t\t\t\t\t{ ( ! isMobileViewport || ! areas.mobile ) && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tariaLabel={ __( 'Navigation' ) }\n\t\t\t\t\t\t\tclassName=\"edit-site-layout__sidebar-region\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<AnimatePresence>\n\t\t\t\t\t\t\t\t{ canvasMode === 'view' && (\n\t\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\t\tinitial={ { opacity: 0 } }\n\t\t\t\t\t\t\t\t\t\tanimate={ { opacity: 1 } }\n\t\t\t\t\t\t\t\t\t\texit={ { opacity: 0 } }\n\t\t\t\t\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\t\t\t\tduration:\n\t\t\t\t\t\t\t\t\t\t\t\t// Disable transition in mobile to emulate a full page transition.\n\t\t\t\t\t\t\t\t\t\t\t\tdisableMotion ||\n\t\t\t\t\t\t\t\t\t\t\t\tisMobileViewport\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t\t\t\t\t\t\t: ANIMATION_DURATION,\n\t\t\t\t\t\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\tclassName=\"edit-site-layout__sidebar\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<SidebarContent routeKey={ routeKey }>\n\t\t\t\t\t\t\t\t\t\t\t{ areas.sidebar }\n\t\t\t\t\t\t\t\t\t\t</SidebarContent>\n\t\t\t\t\t\t\t\t\t\t<SaveHub />\n\t\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</AnimatePresence>\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ isMobileViewport && areas.mobile && (\n\t\t\t\t\t\t<div className=\"edit-site-layout__mobile\">\n\t\t\t\t\t\t\t{ areas.mobile }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ ! isMobileViewport &&\n\t\t\t\t\t\tareas.content &&\n\t\t\t\t\t\tcanvasMode !== 'edit' && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName=\"edit-site-layout__area\"\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tmaxWidth: widths?.content,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ areas.content }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\n\t\t\t\t\t{ ! isMobileViewport && areas.preview && (\n\t\t\t\t\t\t<div className=\"edit-site-layout__canvas-container\">\n\t\t\t\t\t\t\t{ canvasResizer }\n\t\t\t\t\t\t\t{ !! canvasSize.width && (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t\t\t'edit-site-layout__canvas',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'is-right-aligned':\n\t\t\t\t\t\t\t\t\t\t\t\tisResizableFrameOversized,\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\tref={ animationRef }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<ErrorBoundary>\n\t\t\t\t\t\t\t\t\t\t<ResizableFrame\n\t\t\t\t\t\t\t\t\t\t\tisReady={ ! isEditorLoading }\n\t\t\t\t\t\t\t\t\t\t\tisFullWidth={\n\t\t\t\t\t\t\t\t\t\t\t\tcanvasMode === 'edit'\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tdefaultSize={ {\n\t\t\t\t\t\t\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\t\t\t\t\t\t\tcanvasSize.width -\n\t\t\t\t\t\t\t\t\t\t\t\t\t24 /* $canvas-padding */,\n\t\t\t\t\t\t\t\t\t\t\t\theight: canvasSize.height,\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\tisOversized={\n\t\t\t\t\t\t\t\t\t\t\t\tisResizableFrameOversized\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tsetIsOversized={\n\t\t\t\t\t\t\t\t\t\t\t\tsetIsResizableFrameOversized\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tinnerContentStyle={ {\n\t\t\t\t\t\t\t\t\t\t\t\tbackground:\n\t\t\t\t\t\t\t\t\t\t\t\t\tgradientValue ??\n\t\t\t\t\t\t\t\t\t\t\t\t\tbackgroundColor,\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ areas.preview }\n\t\t\t\t\t\t\t\t\t\t</ResizableFrame>\n\t\t\t\t\t\t\t\t\t</ErrorBoundary>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\n\t\t\t\t<SavePanel />\n\t\t\t</div>\n\t\t</>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["clsx","useSelect","__unstableMotion","motion","__unstableAnimatePresence","AnimatePresence","__unstableUseNavigateRegions","useNavigateRegions","useReducedMotion","useViewportMatch","useResizeObserver","__","useState","store","keyboardShortcutsStore","CommandMenu","privateApis","commandsPrivateApis","preferencesStore","blockEditorPrivateApis","blockEditorStore","coreCommandsPrivateApis","editorPrivateApis","ErrorBoundary","editSiteStore","useInitEditedEntityFromURL","SiteHub","ResizableFrame","useSyncCanvasModeWithURL","unlock","SavePanel","KeyboardShortcutsRegister","KeyboardShortcutsGlobal","useCommonCommands","useEditModeCommands","useIsSiteEditorLoading","useLayoutAreas","useMovingAnimation","SidebarContent","SaveHub","useCommands","useCommandContext","useGlobalStyle","NavigableRegion","ANIMATION_DURATION","Layout","isMobileViewport","isDistractionFree","hasFixedToolbar","hasBlockSelected","canvasMode","previousShortcut","nextShortcut","hasBlockBreadcrumbs","select","getAllShortcutKeyCombinations","getCanvasMode","get","getBlockSelectionStart","navigateRegionsProps","previous","next","disableMotion","canvasResizer","canvasSize","fullResizer","isEditorLoading","isResizableFrameOversized","setIsResizableFrameOversized","key","routeKey","areas","widths","animationRef","triggerAnimationOnChange","headerAnimationState","commandContext","backgroundColor","gradientValue","createElement","Fragment","ref","className","div","variants","opacity","transition","type","delay","delayChildren","isDistractionFreeHovering","view","edit","whileHover","undefined","animate","isTransparent","mobile","ariaLabel","initial","exit","duration","ease","sidebar","content","style","maxWidth","preview","width","isReady","isFullWidth","defaultSize","height","isOversized","setIsOversized","innerContentStyle","background"],"sources":["@wordpress/edit-site/src/components/layout/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport {\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n\t__unstableUseNavigateRegions as useNavigateRegions,\n} from '@wordpress/components';\nimport {\n\tuseReducedMotion,\n\tuseViewportMatch,\n\tuseResizeObserver,\n} from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';\nimport {\n\tCommandMenu,\n\tprivateApis as commandsPrivateApis,\n} from '@wordpress/commands';\nimport { store as preferencesStore } from '@wordpress/preferences';\nimport {\n\tprivateApis as blockEditorPrivateApis,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';\nimport { privateApis as editorPrivateApis } from '@wordpress/editor';\n\n/**\n * Internal dependencies\n */\nimport ErrorBoundary from '../error-boundary';\nimport { store as editSiteStore } from '../../store';\nimport useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';\nimport SiteHub from '../site-hub';\nimport ResizableFrame from '../resizable-frame';\nimport useSyncCanvasModeWithURL from '../sync-state-with-url/use-sync-canvas-mode-with-url';\nimport { unlock } from '../../lock-unlock';\nimport SavePanel from '../save-panel';\nimport KeyboardShortcutsRegister from '../keyboard-shortcuts/register';\nimport KeyboardShortcutsGlobal from '../keyboard-shortcuts/global';\nimport { useCommonCommands } from '../../hooks/commands/use-common-commands';\nimport { useEditModeCommands } from '../../hooks/commands/use-edit-mode-commands';\nimport { useIsSiteEditorLoading } from './hooks';\nimport useLayoutAreas from './router';\nimport useMovingAnimation from './animation';\nimport SidebarContent from '../sidebar';\nimport SaveHub from '../save-hub';\n\nconst { useCommands } = unlock( coreCommandsPrivateApis );\nconst { useCommandContext } = unlock( commandsPrivateApis );\nconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\nconst { NavigableRegion } = unlock( editorPrivateApis );\n\nconst ANIMATION_DURATION = 0.3;\n\nexport default function Layout() {\n\t// This ensures the edited entity id and type are initialized properly.\n\tuseInitEditedEntityFromURL();\n\tuseSyncCanvasModeWithURL();\n\tuseCommands();\n\tuseEditModeCommands();\n\tuseCommonCommands();\n\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\n\tconst {\n\t\tisDistractionFree,\n\t\thasFixedToolbar,\n\t\thasBlockSelected,\n\t\tcanvasMode,\n\t\tpreviousShortcut,\n\t\tnextShortcut,\n\t\thasBlockBreadcrumbs,\n\t} = useSelect( ( select ) => {\n\t\tconst { getAllShortcutKeyCombinations } = select(\n\t\t\tkeyboardShortcutsStore\n\t\t);\n\t\tconst { getCanvasMode } = unlock( select( editSiteStore ) );\n\t\treturn {\n\t\t\tcanvasMode: getCanvasMode(),\n\t\t\tpreviousShortcut: getAllShortcutKeyCombinations(\n\t\t\t\t'core/editor/previous-region'\n\t\t\t),\n\t\t\tnextShortcut: getAllShortcutKeyCombinations(\n\t\t\t\t'core/editor/next-region'\n\t\t\t),\n\t\t\thasFixedToolbar: select( preferencesStore ).get(\n\t\t\t\t'core',\n\t\t\t\t'fixedToolbar'\n\t\t\t),\n\t\t\tisDistractionFree: select( preferencesStore ).get(\n\t\t\t\t'core',\n\t\t\t\t'distractionFree'\n\t\t\t),\n\t\t\thasBlockBreadcrumbs: select( preferencesStore ).get(\n\t\t\t\t'core',\n\t\t\t\t'showBlockBreadcrumbs'\n\t\t\t),\n\t\t\thasBlockSelected:\n\t\t\t\tselect( blockEditorStore ).getBlockSelectionStart(),\n\t\t};\n\t}, [] );\n\tconst navigateRegionsProps = useNavigateRegions( {\n\t\tprevious: previousShortcut,\n\t\tnext: nextShortcut,\n\t} );\n\tconst disableMotion = useReducedMotion();\n\tconst [ canvasResizer, canvasSize ] = useResizeObserver();\n\tconst [ fullResizer ] = useResizeObserver();\n\tconst isEditorLoading = useIsSiteEditorLoading();\n\tconst [ isResizableFrameOversized, setIsResizableFrameOversized ] =\n\t\tuseState( false );\n\tconst { key: routeKey, areas, widths } = useLayoutAreas();\n\tconst animationRef = useMovingAnimation( {\n\t\ttriggerAnimationOnChange: canvasMode + '__' + routeKey,\n\t} );\n\n\t// This determines which animation variant should apply to the header.\n\t// There is also a `isDistractionFreeHovering` state that gets priority\n\t// when hovering the `edit-site-layout__header-container` in distraction\n\t// free mode. It's set via framer and trickles down to all the children\n\t// so they can use this variant state too.\n\t//\n\t// TODO: The issue with this is we want to have the hover state stick when hovering\n\t// a popover opened via the header. We'll probably need to lift this state to\n\t// handle it ourselves. Also, focusWithin the header needs to be handled.\n\tlet headerAnimationState;\n\n\tif ( canvasMode === 'view' ) {\n\t\t// We need 'view' to always take priority so 'isDistractionFree'\n\t\t// doesn't bleed over into the view (sidebar) state\n\t\theaderAnimationState = 'view';\n\t} else if ( isDistractionFree ) {\n\t\theaderAnimationState = 'isDistractionFree';\n\t} else {\n\t\theaderAnimationState = canvasMode; // edit, view, init\n\t}\n\n\t// Sets the right context for the command palette\n\tlet commandContext = 'site-editor';\n\n\tif ( canvasMode === 'edit' ) {\n\t\tcommandContext = '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={ clsx(\n\t\t\t\t\t'edit-site-layout',\n\t\t\t\t\tnavigateRegionsProps.className,\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-distraction-free':\n\t\t\t\t\t\t\tisDistractionFree && canvasMode === 'edit',\n\t\t\t\t\t\t'is-full-canvas': canvasMode === 'edit',\n\t\t\t\t\t\t'has-fixed-toolbar': hasFixedToolbar,\n\t\t\t\t\t\t'is-block-toolbar-visible': hasBlockSelected,\n\t\t\t\t\t\t'has-block-breadcrumbs':\n\t\t\t\t\t\t\thasBlockBreadcrumbs &&\n\t\t\t\t\t\t\t! isDistractionFree &&\n\t\t\t\t\t\t\tcanvasMode === 'edit',\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t>\n\t\t\t\t<motion.div\n\t\t\t\t\tclassName=\"edit-site-layout__header-container\"\n\t\t\t\t\tvariants={ {\n\t\t\t\t\t\tisDistractionFree: {\n\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\ttransition: {\n\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\tdelay: 0.8,\n\t\t\t\t\t\t\t\tdelayChildren: 0.8,\n\t\t\t\t\t\t\t}, // How long to wait before the header exits\n\t\t\t\t\t\t},\n\t\t\t\t\t\tisDistractionFreeHovering: {\n\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\ttransition: {\n\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\tdelay: 0.2,\n\t\t\t\t\t\t\t\tdelayChildren: 0.2,\n\t\t\t\t\t\t\t}, // How long to wait before the header shows\n\t\t\t\t\t\t},\n\t\t\t\t\t\tview: { opacity: 1 },\n\t\t\t\t\t\tedit: { opacity: 1 },\n\t\t\t\t\t} }\n\t\t\t\t\twhileHover={\n\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t? 'isDistractionFreeHovering'\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tanimate={ headerAnimationState }\n\t\t\t\t>\n\t\t\t\t\t<SiteHub\n\t\t\t\t\t\tisTransparent={ isResizableFrameOversized }\n\t\t\t\t\t\tclassName=\"edit-site-layout__hub\"\n\t\t\t\t\t/>\n\t\t\t\t</motion.div>\n\n\t\t\t\t<div className=\"edit-site-layout__content\">\n\t\t\t\t\t{ /*\n\t\t\t\t\t\tThe NavigableRegion must always be rendered and not use\n\t\t\t\t\t\t`inert` otherwise `useNavigateRegions` will fail.\n\t\t\t\t\t*/ }\n\t\t\t\t\t{ ( ! isMobileViewport || ! areas.mobile ) && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tariaLabel={ __( 'Navigation' ) }\n\t\t\t\t\t\t\tclassName=\"edit-site-layout__sidebar-region\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<AnimatePresence>\n\t\t\t\t\t\t\t\t{ canvasMode === 'view' && (\n\t\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\t\tinitial={ { opacity: 0 } }\n\t\t\t\t\t\t\t\t\t\tanimate={ { opacity: 1 } }\n\t\t\t\t\t\t\t\t\t\texit={ { opacity: 0 } }\n\t\t\t\t\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\t\t\t\tduration:\n\t\t\t\t\t\t\t\t\t\t\t\t// Disable transition in mobile to emulate a full page transition.\n\t\t\t\t\t\t\t\t\t\t\t\tdisableMotion ||\n\t\t\t\t\t\t\t\t\t\t\t\tisMobileViewport\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t\t\t\t\t\t\t: ANIMATION_DURATION,\n\t\t\t\t\t\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\tclassName=\"edit-site-layout__sidebar\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<SidebarContent routeKey={ routeKey }>\n\t\t\t\t\t\t\t\t\t\t\t{ areas.sidebar }\n\t\t\t\t\t\t\t\t\t\t</SidebarContent>\n\t\t\t\t\t\t\t\t\t\t<SaveHub />\n\t\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</AnimatePresence>\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ isMobileViewport && areas.mobile && (\n\t\t\t\t\t\t<div className=\"edit-site-layout__mobile\">\n\t\t\t\t\t\t\t{ areas.mobile }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ ! isMobileViewport &&\n\t\t\t\t\t\tareas.content &&\n\t\t\t\t\t\tcanvasMode !== 'edit' && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName=\"edit-site-layout__area\"\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tmaxWidth: widths?.content,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ areas.content }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\n\t\t\t\t\t{ ! isMobileViewport && areas.preview && (\n\t\t\t\t\t\t<div className=\"edit-site-layout__canvas-container\">\n\t\t\t\t\t\t\t{ canvasResizer }\n\t\t\t\t\t\t\t{ !! canvasSize.width && (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t\t'edit-site-layout__canvas',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'is-right-aligned':\n\t\t\t\t\t\t\t\t\t\t\t\tisResizableFrameOversized,\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\tref={ animationRef }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<ErrorBoundary>\n\t\t\t\t\t\t\t\t\t\t<ResizableFrame\n\t\t\t\t\t\t\t\t\t\t\tisReady={ ! isEditorLoading }\n\t\t\t\t\t\t\t\t\t\t\tisFullWidth={\n\t\t\t\t\t\t\t\t\t\t\t\tcanvasMode === 'edit'\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tdefaultSize={ {\n\t\t\t\t\t\t\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\t\t\t\t\t\t\tcanvasSize.width -\n\t\t\t\t\t\t\t\t\t\t\t\t\t24 /* $canvas-padding */,\n\t\t\t\t\t\t\t\t\t\t\t\theight: canvasSize.height,\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\tisOversized={\n\t\t\t\t\t\t\t\t\t\t\t\tisResizableFrameOversized\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tsetIsOversized={\n\t\t\t\t\t\t\t\t\t\t\t\tsetIsResizableFrameOversized\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tinnerContentStyle={ {\n\t\t\t\t\t\t\t\t\t\t\t\tbackground:\n\t\t\t\t\t\t\t\t\t\t\t\t\tgradientValue ??\n\t\t\t\t\t\t\t\t\t\t\t\t\tbackgroundColor,\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ areas.preview }\n\t\t\t\t\t\t\t\t\t\t</ResizableFrame>\n\t\t\t\t\t\t\t\t\t</ErrorBoundary>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\n\t\t\t\t<SavePanel />\n\t\t\t</div>\n\t\t</>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,SAAS,QAAQ,iBAAiB;AAC3C,SACCC,gBAAgB,IAAIC,MAAM,EAC1BC,yBAAyB,IAAIC,eAAe,EAC5CC,4BAA4B,IAAIC,kBAAkB,QAC5C,uBAAuB;AAC9B,SACCC,gBAAgB,EAChBC,gBAAgB,EAChBC,iBAAiB,QACX,oBAAoB;AAC3B,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,KAAK,IAAIC,sBAAsB,QAAQ,+BAA+B;AAC/E,SACCC,WAAW,EACXC,WAAW,IAAIC,mBAAmB,QAC5B,qBAAqB;AAC5B,SAASJ,KAAK,IAAIK,gBAAgB,QAAQ,wBAAwB;AAClE,SACCF,WAAW,IAAIG,sBAAsB,EACrCN,KAAK,IAAIO,gBAAgB,QACnB,yBAAyB;AAChC,SAASJ,WAAW,IAAIK,uBAAuB,QAAQ,0BAA0B;AACjF,SAASL,WAAW,IAAIM,iBAAiB,QAAQ,mBAAmB;;AAEpE;AACA;AACA;AACA,OAAOC,aAAa,MAAM,mBAAmB;AAC7C,SAASV,KAAK,IAAIW,aAAa,QAAQ,aAAa;AACpD,OAAOC,0BAA0B,MAAM,wDAAwD;AAC/F,OAAOC,OAAO,MAAM,aAAa;AACjC,OAAOC,cAAc,MAAM,oBAAoB;AAC/C,OAAOC,wBAAwB,MAAM,sDAAsD;AAC3F,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,OAAOC,SAAS,MAAM,eAAe;AACrC,OAAOC,yBAAyB,MAAM,gCAAgC;AACtE,OAAOC,uBAAuB,MAAM,8BAA8B;AAClE,SAASC,iBAAiB,QAAQ,0CAA0C;AAC5E,SAASC,mBAAmB,QAAQ,6CAA6C;AACjF,SAASC,sBAAsB,QAAQ,SAAS;AAChD,OAAOC,cAAc,MAAM,UAAU;AACrC,OAAOC,kBAAkB,MAAM,aAAa;AAC5C,OAAOC,cAAc,MAAM,YAAY;AACvC,OAAOC,OAAO,MAAM,aAAa;AAEjC,MAAM;EAAEC;AAAY,CAAC,GAAGX,MAAM,CAAER,uBAAwB,CAAC;AACzD,MAAM;EAAEoB;AAAkB,CAAC,GAAGZ,MAAM,CAAEZ,mBAAoB,CAAC;AAC3D,MAAM;EAAEyB;AAAe,CAAC,GAAGb,MAAM,CAAEV,sBAAuB,CAAC;AAC3D,MAAM;EAAEwB;AAAgB,CAAC,GAAGd,MAAM,CAAEP,iBAAkB,CAAC;AAEvD,MAAMsB,kBAAkB,GAAG,GAAG;AAE9B,eAAe,SAASC,MAAMA,CAAA,EAAG;EAChC;EACApB,0BAA0B,CAAC,CAAC;EAC5BG,wBAAwB,CAAC,CAAC;EAC1BY,WAAW,CAAC,CAAC;EACbN,mBAAmB,CAAC,CAAC;EACrBD,iBAAiB,CAAC,CAAC;EAEnB,MAAMa,gBAAgB,GAAGrC,gBAAgB,CAAE,QAAQ,EAAE,GAAI,CAAC;EAE1D,MAAM;IACLsC,iBAAiB;IACjBC,eAAe;IACfC,gBAAgB;IAChBC,UAAU;IACVC,gBAAgB;IAChBC,YAAY;IACZC;EACD,CAAC,GAAGpD,SAAS,CAAIqD,MAAM,IAAM;IAC5B,MAAM;MAAEC;IAA8B,CAAC,GAAGD,MAAM,CAC/CxC,sBACD,CAAC;IACD,MAAM;MAAE0C;IAAc,CAAC,GAAG3B,MAAM,CAAEyB,MAAM,CAAE9B,aAAc,CAAE,CAAC;IAC3D,OAAO;MACN0B,UAAU,EAAEM,aAAa,CAAC,CAAC;MAC3BL,gBAAgB,EAAEI,6BAA6B,CAC9C,6BACD,CAAC;MACDH,YAAY,EAAEG,6BAA6B,CAC1C,yBACD,CAAC;MACDP,eAAe,EAAEM,MAAM,CAAEpC,gBAAiB,CAAC,CAACuC,GAAG,CAC9C,MAAM,EACN,cACD,CAAC;MACDV,iBAAiB,EAAEO,MAAM,CAAEpC,gBAAiB,CAAC,CAACuC,GAAG,CAChD,MAAM,EACN,iBACD,CAAC;MACDJ,mBAAmB,EAAEC,MAAM,CAAEpC,gBAAiB,CAAC,CAACuC,GAAG,CAClD,MAAM,EACN,sBACD,CAAC;MACDR,gBAAgB,EACfK,MAAM,CAAElC,gBAAiB,CAAC,CAACsC,sBAAsB,CAAC;IACpD,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EACP,MAAMC,oBAAoB,GAAGpD,kBAAkB,CAAE;IAChDqD,QAAQ,EAAET,gBAAgB;IAC1BU,IAAI,EAAET;EACP,CAAE,CAAC;EACH,MAAMU,aAAa,GAAGtD,gBAAgB,CAAC,CAAC;EACxC,MAAM,CAAEuD,aAAa,EAAEC,UAAU,CAAE,GAAGtD,iBAAiB,CAAC,CAAC;EACzD,MAAM,CAAEuD,WAAW,CAAE,GAAGvD,iBAAiB,CAAC,CAAC;EAC3C,MAAMwD,eAAe,GAAG/B,sBAAsB,CAAC,CAAC;EAChD,MAAM,CAAEgC,yBAAyB,EAAEC,4BAA4B,CAAE,GAChExD,QAAQ,CAAE,KAAM,CAAC;EAClB,MAAM;IAAEyD,GAAG,EAAEC,QAAQ;IAAEC,KAAK;IAAEC;EAAO,CAAC,GAAGpC,cAAc,CAAC,CAAC;EACzD,MAAMqC,YAAY,GAAGpC,kBAAkB,CAAE;IACxCqC,wBAAwB,EAAExB,UAAU,GAAG,IAAI,GAAGoB;EAC/C,CAAE,CAAC;;EAEH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,IAAIK,oBAAoB;EAExB,IAAKzB,UAAU,KAAK,MAAM,EAAG;IAC5B;IACA;IACAyB,oBAAoB,GAAG,MAAM;EAC9B,CAAC,MAAM,IAAK5B,iBAAiB,EAAG;IAC/B4B,oBAAoB,GAAG,mBAAmB;EAC3C,CAAC,MAAM;IACNA,oBAAoB,GAAGzB,UAAU,CAAC,CAAC;EACpC;;EAEA;EACA,IAAI0B,cAAc,GAAG,aAAa;EAElC,IAAK1B,UAAU,KAAK,MAAM,EAAG;IAC5B0B,cAAc,GAAG,kBAAkB;EACpC;EACA,IAAK3B,gBAAgB,EAAG;IACvB2B,cAAc,GAAG,sBAAsB;EACxC;EACAnC,iBAAiB,CAAEmC,cAAe,CAAC;EAEnC,MAAM,CAAEC,eAAe,CAAE,GAAGnC,cAAc,CAAE,kBAAmB,CAAC;EAChE,MAAM,CAAEoC,aAAa,CAAE,GAAGpC,cAAc,CAAE,gBAAiB,CAAC;;EAE5D;EACA;EACA;EACA,IAAKQ,UAAU,KAAK,MAAM,EAAG;IAC5B,OAAO,IAAI;EACZ;EAEA,OACC6B,aAAA,CAAAC,QAAA,QACCD,aAAA,CAAChE,WAAW,MAAE,CAAC,EACfgE,aAAA,CAAChD,yBAAyB,MAAE,CAAC,EAC7BgD,aAAA,CAAC/C,uBAAuB,MAAE,CAAC,EACzBiC,WAAW,EACbc,aAAA;IAAA,GACMpB,oBAAoB;IACzBsB,GAAG,EAAGtB,oBAAoB,CAACsB,GAAK;IAChCC,SAAS,EAAGlF,IAAI,CACf,kBAAkB,EAClB2D,oBAAoB,CAACuB,SAAS,EAC9B;MACC,qBAAqB,EACpBnC,iBAAiB,IAAIG,UAAU,KAAK,MAAM;MAC3C,gBAAgB,EAAEA,UAAU,KAAK,MAAM;MACvC,mBAAmB,EAAEF,eAAe;MACpC,0BAA0B,EAAEC,gBAAgB;MAC5C,uBAAuB,EACtBI,mBAAmB,IACnB,CAAEN,iBAAiB,IACnBG,UAAU,KAAK;IACjB,CACD;EAAG,GAEH6B,aAAA,CAAC5E,MAAM,CAACgF,GAAG;IACVD,SAAS,EAAC,oCAAoC;IAC9CE,QAAQ,EAAG;MACVrC,iBAAiB,EAAE;QAClBsC,OAAO,EAAE,CAAC;QACVC,UAAU,EAAE;UACXC,IAAI,EAAE,OAAO;UACbC,KAAK,EAAE,GAAG;UACVC,aAAa,EAAE;QAChB,CAAC,CAAE;MACJ,CAAC;MACDC,yBAAyB,EAAE;QAC1BL,OAAO,EAAE,CAAC;QACVC,UAAU,EAAE;UACXC,IAAI,EAAE,OAAO;UACbC,KAAK,EAAE,GAAG;UACVC,aAAa,EAAE;QAChB,CAAC,CAAE;MACJ,CAAC;MACDE,IAAI,EAAE;QAAEN,OAAO,EAAE;MAAE,CAAC;MACpBO,IAAI,EAAE;QAAEP,OAAO,EAAE;MAAE;IACpB,CAAG;IACHQ,UAAU,EACT9C,iBAAiB,GACd,2BAA2B,GAC3B+C,SACH;IACDC,OAAO,EAAGpB;EAAsB,GAEhCI,aAAA,CAACrD,OAAO;IACPsE,aAAa,EAAG7B,yBAA2B;IAC3Ce,SAAS,EAAC;EAAuB,CACjC,CACU,CAAC,EAEbH,aAAA;IAAKG,SAAS,EAAC;EAA2B,GAKvC,CAAE,CAAEpC,gBAAgB,IAAI,CAAEyB,KAAK,CAAC0B,MAAM,KACvClB,aAAA,CAACpC,eAAe;IACfuD,SAAS,EAAGvF,EAAE,CAAE,YAAa,CAAG;IAChCuE,SAAS,EAAC;EAAkC,GAE5CH,aAAA,CAAC1E,eAAe,QACb6C,UAAU,KAAK,MAAM,IACtB6B,aAAA,CAAC5E,MAAM,CAACgF,GAAG;IACVgB,OAAO,EAAG;MAAEd,OAAO,EAAE;IAAE,CAAG;IAC1BU,OAAO,EAAG;MAAEV,OAAO,EAAE;IAAE,CAAG;IAC1Be,IAAI,EAAG;MAAEf,OAAO,EAAE;IAAE,CAAG;IACvBC,UAAU,EAAG;MACZC,IAAI,EAAE,OAAO;MACbc,QAAQ;MACP;MACAvC,aAAa,IACbhB,gBAAgB,GACb,CAAC,GACDF,kBAAkB;MACtB0D,IAAI,EAAE;IACP,CAAG;IACHpB,SAAS,EAAC;EAA2B,GAErCH,aAAA,CAACzC,cAAc;IAACgC,QAAQ,EAAGA;EAAU,GAClCC,KAAK,CAACgC,OACO,CAAC,EACjBxB,aAAA,CAACxC,OAAO,MAAE,CACC,CAEG,CACD,CACjB,EAECO,gBAAgB,IAAIyB,KAAK,CAAC0B,MAAM,IACjClB,aAAA;IAAKG,SAAS,EAAC;EAA0B,GACtCX,KAAK,CAAC0B,MACJ,CACL,EAEC,CAAEnD,gBAAgB,IACnByB,KAAK,CAACiC,OAAO,IACbtD,UAAU,KAAK,MAAM,IACpB6B,aAAA;IACCG,SAAS,EAAC,wBAAwB;IAClCuB,KAAK,EAAG;MACPC,QAAQ,EAAElC,MAAM,EAAEgC;IACnB;EAAG,GAEDjC,KAAK,CAACiC,OACJ,CACL,EAEA,CAAE1D,gBAAgB,IAAIyB,KAAK,CAACoC,OAAO,IACpC5B,aAAA;IAAKG,SAAS,EAAC;EAAoC,GAChDnB,aAAa,EACb,CAAC,CAAEC,UAAU,CAAC4C,KAAK,IACpB7B,aAAA;IACCG,SAAS,EAAGlF,IAAI,CACf,0BAA0B,EAC1B;MACC,kBAAkB,EACjBmE;IACF,CACD,CAAG;IACHc,GAAG,EAAGR;EAAc,GAEpBM,aAAA,CAACxD,aAAa,QACbwD,aAAA,CAACpD,cAAc;IACdkF,OAAO,EAAG,CAAE3C,eAAiB;IAC7B4C,WAAW,EACV5D,UAAU,KAAK,MACf;IACD6D,WAAW,EAAG;MACbH,KAAK,EACJ5C,UAAU,CAAC4C,KAAK,GAChB,EAAE,CAAC;MACJI,MAAM,EAAEhD,UAAU,CAACgD;IACpB,CAAG;IACHC,WAAW,EACV9C,yBACA;IACD+C,cAAc,EACb9C,4BACA;IACD+C,iBAAiB,EAAG;MACnBC,UAAU,EACTtC,aAAa,aAAbA,aAAa,cAAbA,aAAa,GACbD;IACF;EAAG,GAEDN,KAAK,CAACoC,OACO,CACF,CACX,CAEF,CAEF,CAAC,EAEN5B,aAAA,CAACjD,SAAS,MAAE,CACR,CACJ,CAAC;AAEL","ignoreList":[]}

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

@@ -4,7 +4,7 @@ import { createElement } from "react";
  */
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { __ } from '@wordpress/i18n';
-
+import { useEffect } from '@wordpress/element';
 /**
  * Internal dependencies
  */
@@ -42,7 +42,16 @@ export default function useLayoutAreas() {
     layout,
     isCustom,
     canvas
-  } = params !== null && params !== void 0 ? params : {};
+  } = params;
+  useEffect(() => {
+    // `/wp_template_part/all` path is no longer used and redirects to
+    // Patterns page for backward compatibility.
+    if (path === '/wp_template_part/all') {
+      history.replace({
+        path: '/patterns'
+      });
+    }
+  }, [history, path]);
 
   // Note: Since "sidebar" is not yet supported here,
   // returning undefined from "mobile" means show the sidebar.
@@ -55,6 +64,7 @@ export default function useLayoutAreas() {
       areas: {
         sidebar: createElement(SidebarNavigationScreen, {
           title: __('Manage pages'),
+          backPath: {},
           content: createElement(DataViewsSidebarContent, null)
         }),
         content: createElement(PagePages, null),
@@ -80,13 +90,32 @@ export default function useLayoutAreas() {
   if (postType && postId) {
     let sidebar;
     if (postType === 'wp_template_part' || postType === 'wp_block') {
-      sidebar = createElement(SidebarNavigationScreenPattern, null);
+      sidebar = createElement(SidebarNavigationScreenPattern, {
+        backPath: {
+          path: '/patterns',
+          categoryId: params.categoryId,
+          categoryType: params.categoryType
+        }
+      });
     } else if (postType === 'wp_template') {
-      sidebar = createElement(SidebarNavigationScreenTemplate, null);
+      sidebar = createElement(SidebarNavigationScreenTemplate, {
+        backPath: {
+          path: '/wp_template'
+        }
+      });
     } else if (postType === 'page') {
-      sidebar = createElement(SidebarNavigationScreenPage, null);
+      sidebar = createElement(SidebarNavigationScreenPage, {
+        backPath: {
+          path: '/page',
+          postId
+        }
+      });
     } else {
-      sidebar = createElement(SidebarNavigationScreenNavigationMenu, null);
+      sidebar = createElement(SidebarNavigationScreenNavigationMenu, {
+        backPath: {
+          path: '/navigation'
+        }
+      });
     }
     return {
       key: 'page',
@@ -108,7 +137,9 @@ export default function useLayoutAreas() {
     return {
       key: 'templates-list',
       areas: {
-        sidebar: createElement(SidebarNavigationScreenTemplatesBrowse, null),
+        sidebar: createElement(SidebarNavigationScreenTemplatesBrowse, {
+          backPath: {}
+        }),
         content: createElement(PageTemplates, null),
         preview: isListLayout && createElement(Editor, {
           isLoading: isSiteEditorLoading
@@ -121,15 +152,16 @@ export default function useLayoutAreas() {
     };
   }
 
-  /* Patterns and Template Parts
-   * `/wp_template_part/all` path is no longer used, but uses Patterns page screens for
-   * backwards compatibility.
-   */
+  // Patterns
+  // `/wp_template_part/all` path is no longer used and redirects to
+  // Patterns page for backward compatibility.
   if (path === '/patterns' || path === '/wp_template_part/all') {
     return {
       key: 'patterns',
       areas: {
-        sidebar: createElement(SidebarNavigationScreenPatterns, null),
+        sidebar: createElement(SidebarNavigationScreenPatterns, {
+          backPath: {}
+        }),
         content: createElement(PagePatterns, null),
         mobile: createElement(PagePatterns, null)
       }
@@ -141,7 +173,9 @@ export default function useLayoutAreas() {
     return {
       key: 'styles',
       areas: {
-        sidebar: createElement(SidebarNavigationScreenGlobalStyles, null),
+        sidebar: createElement(SidebarNavigationScreenGlobalStyles, {
+          backPath: {}
+        }),
         preview: createElement(Editor, {
           isLoading: isSiteEditorLoading
         }),
@@ -154,10 +188,30 @@ export default function useLayoutAreas() {
 
   // Navigation
   if (path === '/navigation') {
+    if (postId) {
+      return {
+        key: 'navigation',
+        areas: {
+          sidebar: createElement(SidebarNavigationScreenNavigationMenu, {
+            backPath: {
+              path: '/navigation'
+            }
+          }),
+          preview: createElement(Editor, {
+            isLoading: isSiteEditorLoading
+          }),
+          mobile: canvas === 'edit' && createElement(Editor, {
+            isLoading: isSiteEditorLoading
+          })
+        }
+      };
+    }
     return {
-      key: 'styles',
+      key: 'navigation',
       areas: {
-        sidebar: createElement(SidebarNavigationScreenNavigationMenus, null),
+        sidebar: createElement(SidebarNavigationScreenNavigationMenus, {
+          backPath: {}
+        }),
         preview: createElement(Editor, {
           isLoading: isSiteEditorLoading
         }),