@wordpress/edit-site 6.0.4 → 6.0.6

package/build-module/components/site-hub/index.js

@@ -11,11 +11,12 @@ import { Button, __experimentalHStack as HStack } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
-import { memo, forwardRef } from '@wordpress/element';
+import { memo, forwardRef, useContext } from '@wordpress/element';
 import { search } from '@wordpress/icons';
 import { store as commandsStore } from '@wordpress/commands';
 import { displayShortcut } from '@wordpress/keycodes';
 import { filterURLForDisplay } from '@wordpress/url';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
@@ -23,6 +24,10 @@ import { filterURLForDisplay } from '@wordpress/url';
 import { store as editSiteStore } from '../../store';
 import SiteIcon from '../site-icon';
 import { unlock } from '../../lock-unlock';
+const {
+  useHistory
+} = unlock(routerPrivateApis);
+import { SidebarNavigationContext } from '../sidebar';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const SiteHub = memo(forwardRef(({
@@ -99,4 +104,79 @@ const SiteHub = memo(forwardRef(({
   });
 }));
 export default SiteHub;
+export const SiteHubMobile = memo(forwardRef(({
+  isTransparent
+}, ref) => {
+  const history = useHistory();
+  const {
+    navigate
+  } = useContext(SidebarNavigationContext);
+  const {
+    homeUrl,
+    siteTitle
+  } = useSelect(select => {
+    const {
+      getSite,
+      getUnstableBase // Site index.
+    } = select(coreStore);
+    const _site = getSite();
+    return {
+      homeUrl: getUnstableBase()?.home,
+      siteTitle: !_site?.title && !!_site?.url ? filterURLForDisplay(_site?.url) : _site?.title
+    };
+  }, []);
+  const {
+    open: openCommandCenter
+  } = useDispatch(commandsStore);
+  return /*#__PURE__*/_jsx("div", {
+    className: "edit-site-site-hub",
+    children: /*#__PURE__*/_jsxs(HStack, {
+      justify: "flex-start",
+      spacing: "0",
+      children: [/*#__PURE__*/_jsx("div", {
+        className: clsx('edit-site-site-hub__view-mode-toggle-container', {
+          'has-transparent-background': isTransparent
+        }),
+        children: /*#__PURE__*/_jsx(Button, {
+          ref: ref,
+          label: __('Go to Site Editor'),
+          className: "edit-site-layout__view-mode-toggle",
+          style: {
+            transform: 'scale(0.5)',
+            borderRadius: 4
+          },
+          onClick: () => {
+            history.push({});
+            navigate('back');
+          },
+          children: /*#__PURE__*/_jsx(SiteIcon, {
+            className: "edit-site-layout__view-mode-toggle-icon"
+          })
+        })
+      }), /*#__PURE__*/_jsxs(HStack, {
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "edit-site-site-hub__title",
+          children: /*#__PURE__*/_jsx(Button, {
+            variant: "link",
+            href: homeUrl,
+            target: "_blank",
+            label: __('View site (opens in a new tab)'),
+            children: decodeEntities(siteTitle)
+          })
+        }), /*#__PURE__*/_jsx(HStack, {
+          spacing: 0,
+          expanded: false,
+          className: "edit-site-site-hub__actions",
+          children: /*#__PURE__*/_jsx(Button, {
+            className: "edit-site-site-hub_toggle-command-center",
+            icon: search,
+            onClick: () => openCommandCenter(),
+            label: __('Open command palette'),
+            shortcut: displayShortcut.primary('k')
+          })
+        })]
+      })]
+    })
+  });
+}));
 //# sourceMappingURL=index.js.map

package/build-module/components/site-hub/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["clsx","useSelect","useDispatch","Button","__experimentalHStack","HStack","__","store","coreStore","decodeEntities","memo","forwardRef","search","commandsStore","displayShortcut","filterURLForDisplay","editSiteStore","SiteIcon","unlock","jsx","_jsx","jsxs","_jsxs","SiteHub","isTransparent","ref","dashboardLink","homeUrl","siteTitle","select","getSettings","getSite","getUnstableBase","_site","__experimentalDashboardLink","home","title","url","open","openCommandCenter","className","children","justify","spacing","href","label","style","transform","borderRadius","variant","target","expanded","icon","onClick","shortcut","primary"],"sources":["@wordpress/edit-site/src/components/site-hub/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { Button, __experimentalHStack as HStack } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { decodeEntities } from '@wordpress/html-entities';\nimport { memo, forwardRef } from '@wordpress/element';\nimport { search } from '@wordpress/icons';\nimport { store as commandsStore } from '@wordpress/commands';\nimport { displayShortcut } from '@wordpress/keycodes';\nimport { filterURLForDisplay } from '@wordpress/url';\n\n/**\n * Internal dependencies\n */\nimport { store as editSiteStore } from '../../store';\nimport SiteIcon from '../site-icon';\nimport { unlock } from '../../lock-unlock';\n\nconst SiteHub = memo(\n\tforwardRef( ( { isTransparent }, ref ) => {\n\t\tconst { dashboardLink, homeUrl, siteTitle } = useSelect( ( select ) => {\n\t\t\tconst { getSettings } = unlock( select( editSiteStore ) );\n\n\t\t\tconst {\n\t\t\t\tgetSite,\n\t\t\t\tgetUnstableBase, // Site index.\n\t\t\t} = select( coreStore );\n\t\t\tconst _site = getSite();\n\t\t\treturn {\n\t\t\t\tdashboardLink:\n\t\t\t\t\tgetSettings().__experimentalDashboardLink || 'index.php',\n\t\t\t\thomeUrl: getUnstableBase()?.home,\n\t\t\t\tsiteTitle:\n\t\t\t\t\t! _site?.title && !! _site?.url\n\t\t\t\t\t\t? filterURLForDisplay( _site?.url )\n\t\t\t\t\t\t: _site?.title,\n\t\t\t};\n\t\t}, [] );\n\t\tconst { open: openCommandCenter } = useDispatch( commandsStore );\n\n\t\treturn (\n\t\t\t<div className=\"edit-site-site-hub\">\n\t\t\t\t<HStack justify=\"flex-start\" spacing=\"0\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'edit-site-site-hub__view-mode-toggle-container',\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'has-transparent-background': isTransparent,\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\t<Button\n\t\t\t\t\t\t\tref={ ref }\n\t\t\t\t\t\t\thref={ dashboardLink }\n\t\t\t\t\t\t\tlabel={ __( 'Go to the Dashboard' ) }\n\t\t\t\t\t\t\tclassName=\"edit-site-layout__view-mode-toggle\"\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\ttransform: 'scale(0.5)',\n\t\t\t\t\t\t\t\tborderRadius: 4,\n\t\t\t\t\t\t\t} }\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</div>\n\n\t\t\t\t\t<HStack>\n\t\t\t\t\t\t<div className=\"edit-site-site-hub__title\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t\t\t\thref={ homeUrl }\n\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t\tlabel={ __( 'View site (opens in a new tab)' ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ decodeEntities( siteTitle ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\t\texpanded={ false }\n\t\t\t\t\t\t\tclassName=\"edit-site-site-hub__actions\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tclassName=\"edit-site-site-hub_toggle-command-center\"\n\t\t\t\t\t\t\t\ticon={ search }\n\t\t\t\t\t\t\t\tonClick={ () => openCommandCenter() }\n\t\t\t\t\t\t\t\tlabel={ __( 'Open command palette' ) }\n\t\t\t\t\t\t\t\tshortcut={ displayShortcut.primary( 'k' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</HStack>\n\t\t\t\t</HStack>\n\t\t\t</div>\n\t\t);\n\t} )\n);\n\nexport default SiteHub;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["clsx","useSelect","useDispatch","Button","__experimentalHStack","HStack","__","store","coreStore","decodeEntities","memo","forwardRef","useContext","search","commandsStore","displayShortcut","filterURLForDisplay","privateApis","routerPrivateApis","editSiteStore","SiteIcon","unlock","useHistory","SidebarNavigationContext","jsx","_jsx","jsxs","_jsxs","SiteHub","isTransparent","ref","dashboardLink","homeUrl","siteTitle","select","getSettings","getSite","getUnstableBase","_site","__experimentalDashboardLink","home","title","url","open","openCommandCenter","className","children","justify","spacing","href","label","style","transform","borderRadius","variant","target","expanded","icon","onClick","shortcut","primary","SiteHubMobile","history","navigate","push"],"sources":["@wordpress/edit-site/src/components/site-hub/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { Button, __experimentalHStack as HStack } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { decodeEntities } from '@wordpress/html-entities';\nimport { memo, forwardRef, useContext } from '@wordpress/element';\nimport { search } from '@wordpress/icons';\nimport { store as commandsStore } from '@wordpress/commands';\nimport { displayShortcut } from '@wordpress/keycodes';\nimport { filterURLForDisplay } from '@wordpress/url';\nimport { privateApis as routerPrivateApis } from '@wordpress/router';\n\n/**\n * Internal dependencies\n */\nimport { store as editSiteStore } from '../../store';\nimport SiteIcon from '../site-icon';\nimport { unlock } from '../../lock-unlock';\nconst { useHistory } = unlock( routerPrivateApis );\nimport { SidebarNavigationContext } from '../sidebar';\n\nconst SiteHub = memo(\n\tforwardRef( ( { isTransparent }, ref ) => {\n\t\tconst { dashboardLink, homeUrl, siteTitle } = useSelect( ( select ) => {\n\t\t\tconst { getSettings } = unlock( select( editSiteStore ) );\n\n\t\t\tconst {\n\t\t\t\tgetSite,\n\t\t\t\tgetUnstableBase, // Site index.\n\t\t\t} = select( coreStore );\n\t\t\tconst _site = getSite();\n\t\t\treturn {\n\t\t\t\tdashboardLink:\n\t\t\t\t\tgetSettings().__experimentalDashboardLink || 'index.php',\n\t\t\t\thomeUrl: getUnstableBase()?.home,\n\t\t\t\tsiteTitle:\n\t\t\t\t\t! _site?.title && !! _site?.url\n\t\t\t\t\t\t? filterURLForDisplay( _site?.url )\n\t\t\t\t\t\t: _site?.title,\n\t\t\t};\n\t\t}, [] );\n\t\tconst { open: openCommandCenter } = useDispatch( commandsStore );\n\n\t\treturn (\n\t\t\t<div className=\"edit-site-site-hub\">\n\t\t\t\t<HStack justify=\"flex-start\" spacing=\"0\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'edit-site-site-hub__view-mode-toggle-container',\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'has-transparent-background': isTransparent,\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\t<Button\n\t\t\t\t\t\t\tref={ ref }\n\t\t\t\t\t\t\thref={ dashboardLink }\n\t\t\t\t\t\t\tlabel={ __( 'Go to the Dashboard' ) }\n\t\t\t\t\t\t\tclassName=\"edit-site-layout__view-mode-toggle\"\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\ttransform: 'scale(0.5)',\n\t\t\t\t\t\t\t\tborderRadius: 4,\n\t\t\t\t\t\t\t} }\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</div>\n\n\t\t\t\t\t<HStack>\n\t\t\t\t\t\t<div className=\"edit-site-site-hub__title\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t\t\t\thref={ homeUrl }\n\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t\tlabel={ __( 'View site (opens in a new tab)' ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ decodeEntities( siteTitle ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\t\texpanded={ false }\n\t\t\t\t\t\t\tclassName=\"edit-site-site-hub__actions\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tclassName=\"edit-site-site-hub_toggle-command-center\"\n\t\t\t\t\t\t\t\ticon={ search }\n\t\t\t\t\t\t\t\tonClick={ () => openCommandCenter() }\n\t\t\t\t\t\t\t\tlabel={ __( 'Open command palette' ) }\n\t\t\t\t\t\t\t\tshortcut={ displayShortcut.primary( 'k' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</HStack>\n\t\t\t\t</HStack>\n\t\t\t</div>\n\t\t);\n\t} )\n);\n\nexport default SiteHub;\n\nexport const SiteHubMobile = memo(\n\tforwardRef( ( { isTransparent }, ref ) => {\n\t\tconst history = useHistory();\n\t\tconst { navigate } = useContext( SidebarNavigationContext );\n\n\t\tconst { homeUrl, siteTitle } = useSelect( ( select ) => {\n\t\t\tconst {\n\t\t\t\tgetSite,\n\t\t\t\tgetUnstableBase, // Site index.\n\t\t\t} = select( coreStore );\n\t\t\tconst _site = getSite();\n\t\t\treturn {\n\t\t\t\thomeUrl: getUnstableBase()?.home,\n\t\t\t\tsiteTitle:\n\t\t\t\t\t! _site?.title && !! _site?.url\n\t\t\t\t\t\t? filterURLForDisplay( _site?.url )\n\t\t\t\t\t\t: _site?.title,\n\t\t\t};\n\t\t}, [] );\n\t\tconst { open: openCommandCenter } = useDispatch( commandsStore );\n\n\t\treturn (\n\t\t\t<div className=\"edit-site-site-hub\">\n\t\t\t\t<HStack justify=\"flex-start\" spacing=\"0\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'edit-site-site-hub__view-mode-toggle-container',\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'has-transparent-background': isTransparent,\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\t<Button\n\t\t\t\t\t\t\tref={ ref }\n\t\t\t\t\t\t\tlabel={ __( 'Go to Site Editor' ) }\n\t\t\t\t\t\t\tclassName=\"edit-site-layout__view-mode-toggle\"\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\ttransform: 'scale(0.5)',\n\t\t\t\t\t\t\t\tborderRadius: 4,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\thistory.push( {} );\n\t\t\t\t\t\t\t\tnavigate( 'back' );\n\t\t\t\t\t\t\t} }\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</div>\n\n\t\t\t\t\t<HStack>\n\t\t\t\t\t\t<div className=\"edit-site-site-hub__title\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t\t\t\thref={ homeUrl }\n\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t\tlabel={ __( 'View site (opens in a new tab)' ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ decodeEntities( siteTitle ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\t\texpanded={ false }\n\t\t\t\t\t\t\tclassName=\"edit-site-site-hub__actions\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tclassName=\"edit-site-site-hub_toggle-command-center\"\n\t\t\t\t\t\t\t\ticon={ search }\n\t\t\t\t\t\t\t\tonClick={ () => openCommandCenter() }\n\t\t\t\t\t\t\t\tlabel={ __( 'Open command palette' ) }\n\t\t\t\t\t\t\t\tshortcut={ displayShortcut.primary( 'k' ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</HStack>\n\t\t\t\t</HStack>\n\t\t\t</div>\n\t\t);\n\t} )\n);\n"],"mappings":"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","ignoreList":[]}

package/build-module/store/private-actions.js

@@ -14,9 +14,9 @@ export const setCanvasMode = mode => ({
   registry,
   dispatch
 }) => {
+  const isMediumOrBigger = window.matchMedia('(min-width: 782px)').matches;
   const switchCanvasMode = () => {
     registry.batch(() => {
-      const isMediumOrBigger = window.matchMedia('(min-width: 782px)').matches;
       registry.dispatch(blockEditorStore).clearSelectedBlock();
       registry.dispatch(editorStore).setDeviceType('Desktop');
       registry.dispatch(blockEditorStore).__unstableSetEditorMode('edit');
@@ -41,7 +41,12 @@ export const setCanvasMode = mode => ({
       registry.dispatch(editorStore).setIsInserterOpened(false);
     });
   };
-  if (!document.startViewTransition) {
+
+  /*
+   * Skip transition in mobile, otherwise it crashes the browser.
+   * See: https://github.com/WordPress/gutenberg/pull/63002.
+   */
+  if (!isMediumOrBigger || !document.startViewTransition) {
     switchCanvasMode();
   } else {
     document.documentElement.classList.add(`canvas-mode-${mode}-transition`);

package/build-module/store/private-actions.js.map

@@ -1 +1 @@
-{"version":3,"names":["store","blockEditorStore","preferencesStore","editorStore","setCanvasMode","mode","registry","dispatch","switchCanvasMode","batch","isMediumOrBigger","window","matchMedia","matches","clearSelectedBlock","setDeviceType","__unstableSetEditorMode","isPublishSidebarOpened","select","type","isEditMode","closePublishSidebar","get","setIsListViewOpened","setIsInserterOpened","document","startViewTransition","documentElement","classList","add","transition","finished","finally","remove","setEditorCanvasContainerView","view"],"sources":["@wordpress/edit-site/src/store/private-actions.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { store as blockEditorStore } from '@wordpress/block-editor';\nimport { store as preferencesStore } from '@wordpress/preferences';\nimport { store as editorStore } from '@wordpress/editor';\n\n/**\n * Action that switches the canvas mode.\n *\n * @param {?string} mode Canvas mode.\n */\nexport const setCanvasMode =\n\t( mode ) =>\n\t( { registry, dispatch } ) => {\n\t\tconst switchCanvasMode = () => {\n\t\t\tregistry.batch( () => {\n\t\t\t\tconst isMediumOrBigger =\n\t\t\t\t\twindow.matchMedia( '(min-width: 782px)' ).matches;\n\t\t\t\tregistry.dispatch( blockEditorStore ).clearSelectedBlock();\n\t\t\t\tregistry.dispatch( editorStore ).setDeviceType( 'Desktop' );\n\t\t\t\tregistry\n\t\t\t\t\t.dispatch( blockEditorStore )\n\t\t\t\t\t.__unstableSetEditorMode( 'edit' );\n\t\t\t\tconst isPublishSidebarOpened = registry\n\t\t\t\t\t.select( editorStore )\n\t\t\t\t\t.isPublishSidebarOpened();\n\t\t\t\tdispatch( {\n\t\t\t\t\ttype: 'SET_CANVAS_MODE',\n\t\t\t\t\tmode,\n\t\t\t\t} );\n\t\t\t\tconst isEditMode = mode === 'edit';\n\t\t\t\tif ( isPublishSidebarOpened && ! isEditMode ) {\n\t\t\t\t\tregistry.dispatch( editorStore ).closePublishSidebar();\n\t\t\t\t}\n\n\t\t\t\t// Check if the block list view should be open by default.\n\t\t\t\t// If `distractionFree` mode is enabled, the block list view should not be open.\n\t\t\t\t// This behavior is disabled for small viewports.\n\t\t\t\tif (\n\t\t\t\t\tisMediumOrBigger &&\n\t\t\t\t\tisEditMode &&\n\t\t\t\t\tregistry\n\t\t\t\t\t\t.select( preferencesStore )\n\t\t\t\t\t\t.get( 'core', 'showListViewByDefault' ) &&\n\t\t\t\t\t! registry\n\t\t\t\t\t\t.select( preferencesStore )\n\t\t\t\t\t\t.get( 'core', 'distractionFree' )\n\t\t\t\t) {\n\t\t\t\t\tregistry\n\t\t\t\t\t\t.dispatch( editorStore )\n\t\t\t\t\t\t.setIsListViewOpened( true );\n\t\t\t\t} else {\n\t\t\t\t\tregistry\n\t\t\t\t\t\t.dispatch( editorStore )\n\t\t\t\t\t\t.setIsListViewOpened( false );\n\t\t\t\t}\n\t\t\t\tregistry.dispatch( editorStore ).setIsInserterOpened( false );\n\t\t\t} );\n\t\t};\n\n\t\tif ( ! document.startViewTransition ) {\n\t\t\tswitchCanvasMode();\n\t\t} else {\n\t\t\tdocument.documentElement.classList.add(\n\t\t\t\t`canvas-mode-${ mode }-transition`\n\t\t\t);\n\t\t\tconst transition = document.startViewTransition( () =>\n\t\t\t\tswitchCanvasMode()\n\t\t\t);\n\t\t\ttransition.finished.finally( () => {\n\t\t\t\tdocument.documentElement.classList.remove(\n\t\t\t\t\t`canvas-mode-${ mode }-transition`\n\t\t\t\t);\n\t\t\t} );\n\t\t}\n\t};\n\n/**\n * Action that switches the editor canvas container view.\n *\n * @param {?string} view Editor canvas container view.\n */\nexport const setEditorCanvasContainerView =\n\t( view ) =>\n\t( { dispatch } ) => {\n\t\tdispatch( {\n\t\t\ttype: 'SET_EDITOR_CANVAS_CONTAINER_VIEW',\n\t\t\tview,\n\t\t} );\n\t};\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,KAAK,IAAIC,gBAAgB,QAAQ,yBAAyB;AACnE,SAASD,KAAK,IAAIE,gBAAgB,QAAQ,wBAAwB;AAClE,SAASF,KAAK,IAAIG,WAAW,QAAQ,mBAAmB;;AAExD;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,aAAa,GACvBC,IAAI,IACN,CAAE;EAAEC,QAAQ;EAAEC;AAAS,CAAC,KAAM;EAC7B,MAAMC,gBAAgB,GAAGA,CAAA,KAAM;IAC9BF,QAAQ,CAACG,KAAK,CAAE,MAAM;MACrB,MAAMC,gBAAgB,GACrBC,MAAM,CAACC,UAAU,CAAE,oBAAqB,CAAC,CAACC,OAAO;MAClDP,QAAQ,CAACC,QAAQ,CAAEN,gBAAiB,CAAC,CAACa,kBAAkB,CAAC,CAAC;MAC1DR,QAAQ,CAACC,QAAQ,CAAEJ,WAAY,CAAC,CAACY,aAAa,CAAE,SAAU,CAAC;MAC3DT,QAAQ,CACNC,QAAQ,CAAEN,gBAAiB,CAAC,CAC5Be,uBAAuB,CAAE,MAAO,CAAC;MACnC,MAAMC,sBAAsB,GAAGX,QAAQ,CACrCY,MAAM,CAAEf,WAAY,CAAC,CACrBc,sBAAsB,CAAC,CAAC;MAC1BV,QAAQ,CAAE;QACTY,IAAI,EAAE,iBAAiB;QACvBd;MACD,CAAE,CAAC;MACH,MAAMe,UAAU,GAAGf,IAAI,KAAK,MAAM;MAClC,IAAKY,sBAAsB,IAAI,CAAEG,UAAU,EAAG;QAC7Cd,QAAQ,CAACC,QAAQ,CAAEJ,WAAY,CAAC,CAACkB,mBAAmB,CAAC,CAAC;MACvD;;MAEA;MACA;MACA;MACA,IACCX,gBAAgB,IAChBU,UAAU,IACVd,QAAQ,CACNY,MAAM,CAAEhB,gBAAiB,CAAC,CAC1BoB,GAAG,CAAE,MAAM,EAAE,uBAAwB,CAAC,IACxC,CAAEhB,QAAQ,CACRY,MAAM,CAAEhB,gBAAiB,CAAC,CAC1BoB,GAAG,CAAE,MAAM,EAAE,iBAAkB,CAAC,EACjC;QACDhB,QAAQ,CACNC,QAAQ,CAAEJ,WAAY,CAAC,CACvBoB,mBAAmB,CAAE,IAAK,CAAC;MAC9B,CAAC,MAAM;QACNjB,QAAQ,CACNC,QAAQ,CAAEJ,WAAY,CAAC,CACvBoB,mBAAmB,CAAE,KAAM,CAAC;MAC/B;MACAjB,QAAQ,CAACC,QAAQ,CAAEJ,WAAY,CAAC,CAACqB,mBAAmB,CAAE,KAAM,CAAC;IAC9D,CAAE,CAAC;EACJ,CAAC;EAED,IAAK,CAAEC,QAAQ,CAACC,mBAAmB,EAAG;IACrClB,gBAAgB,CAAC,CAAC;EACnB,CAAC,MAAM;IACNiB,QAAQ,CAACE,eAAe,CAACC,SAAS,CAACC,GAAG,CACpC,eAAexB,IAAM,aACvB,CAAC;IACD,MAAMyB,UAAU,GAAGL,QAAQ,CAACC,mBAAmB,CAAE,MAChDlB,gBAAgB,CAAC,CAClB,CAAC;IACDsB,UAAU,CAACC,QAAQ,CAACC,OAAO,CAAE,MAAM;MAClCP,QAAQ,CAACE,eAAe,CAACC,SAAS,CAACK,MAAM,CACvC,eAAe5B,IAAM,aACvB,CAAC;IACF,CAAE,CAAC;EACJ;AACD,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA,OAAO,MAAM6B,4BAA4B,GACtCC,IAAI,IACN,CAAE;EAAE5B;AAAS,CAAC,KAAM;EACnBA,QAAQ,CAAE;IACTY,IAAI,EAAE,kCAAkC;IACxCgB;EACD,CAAE,CAAC;AACJ,CAAC","ignoreList":[]}
+{"version":3,"names":["store","blockEditorStore","preferencesStore","editorStore","setCanvasMode","mode","registry","dispatch","isMediumOrBigger","window","matchMedia","matches","switchCanvasMode","batch","clearSelectedBlock","setDeviceType","__unstableSetEditorMode","isPublishSidebarOpened","select","type","isEditMode","closePublishSidebar","get","setIsListViewOpened","setIsInserterOpened","document","startViewTransition","documentElement","classList","add","transition","finished","finally","remove","setEditorCanvasContainerView","view"],"sources":["@wordpress/edit-site/src/store/private-actions.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { store as blockEditorStore } from '@wordpress/block-editor';\nimport { store as preferencesStore } from '@wordpress/preferences';\nimport { store as editorStore } from '@wordpress/editor';\n\n/**\n * Action that switches the canvas mode.\n *\n * @param {?string} mode Canvas mode.\n */\nexport const setCanvasMode =\n\t( mode ) =>\n\t( { registry, dispatch } ) => {\n\t\tconst isMediumOrBigger =\n\t\t\twindow.matchMedia( '(min-width: 782px)' ).matches;\n\t\tconst switchCanvasMode = () => {\n\t\t\tregistry.batch( () => {\n\t\t\t\tregistry.dispatch( blockEditorStore ).clearSelectedBlock();\n\t\t\t\tregistry.dispatch( editorStore ).setDeviceType( 'Desktop' );\n\t\t\t\tregistry\n\t\t\t\t\t.dispatch( blockEditorStore )\n\t\t\t\t\t.__unstableSetEditorMode( 'edit' );\n\t\t\t\tconst isPublishSidebarOpened = registry\n\t\t\t\t\t.select( editorStore )\n\t\t\t\t\t.isPublishSidebarOpened();\n\t\t\t\tdispatch( {\n\t\t\t\t\ttype: 'SET_CANVAS_MODE',\n\t\t\t\t\tmode,\n\t\t\t\t} );\n\t\t\t\tconst isEditMode = mode === 'edit';\n\t\t\t\tif ( isPublishSidebarOpened && ! isEditMode ) {\n\t\t\t\t\tregistry.dispatch( editorStore ).closePublishSidebar();\n\t\t\t\t}\n\n\t\t\t\t// Check if the block list view should be open by default.\n\t\t\t\t// If `distractionFree` mode is enabled, the block list view should not be open.\n\t\t\t\t// This behavior is disabled for small viewports.\n\t\t\t\tif (\n\t\t\t\t\tisMediumOrBigger &&\n\t\t\t\t\tisEditMode &&\n\t\t\t\t\tregistry\n\t\t\t\t\t\t.select( preferencesStore )\n\t\t\t\t\t\t.get( 'core', 'showListViewByDefault' ) &&\n\t\t\t\t\t! registry\n\t\t\t\t\t\t.select( preferencesStore )\n\t\t\t\t\t\t.get( 'core', 'distractionFree' )\n\t\t\t\t) {\n\t\t\t\t\tregistry\n\t\t\t\t\t\t.dispatch( editorStore )\n\t\t\t\t\t\t.setIsListViewOpened( true );\n\t\t\t\t} else {\n\t\t\t\t\tregistry\n\t\t\t\t\t\t.dispatch( editorStore )\n\t\t\t\t\t\t.setIsListViewOpened( false );\n\t\t\t\t}\n\t\t\t\tregistry.dispatch( editorStore ).setIsInserterOpened( false );\n\t\t\t} );\n\t\t};\n\n\t\t/*\n\t\t * Skip transition in mobile, otherwise it crashes the browser.\n\t\t * See: https://github.com/WordPress/gutenberg/pull/63002.\n\t\t */\n\t\tif ( ! isMediumOrBigger || ! document.startViewTransition ) {\n\t\t\tswitchCanvasMode();\n\t\t} else {\n\t\t\tdocument.documentElement.classList.add(\n\t\t\t\t`canvas-mode-${ mode }-transition`\n\t\t\t);\n\t\t\tconst transition = document.startViewTransition( () =>\n\t\t\t\tswitchCanvasMode()\n\t\t\t);\n\t\t\ttransition.finished.finally( () => {\n\t\t\t\tdocument.documentElement.classList.remove(\n\t\t\t\t\t`canvas-mode-${ mode }-transition`\n\t\t\t\t);\n\t\t\t} );\n\t\t}\n\t};\n\n/**\n * Action that switches the editor canvas container view.\n *\n * @param {?string} view Editor canvas container view.\n */\nexport const setEditorCanvasContainerView =\n\t( view ) =>\n\t( { dispatch } ) => {\n\t\tdispatch( {\n\t\t\ttype: 'SET_EDITOR_CANVAS_CONTAINER_VIEW',\n\t\t\tview,\n\t\t} );\n\t};\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,KAAK,IAAIC,gBAAgB,QAAQ,yBAAyB;AACnE,SAASD,KAAK,IAAIE,gBAAgB,QAAQ,wBAAwB;AAClE,SAASF,KAAK,IAAIG,WAAW,QAAQ,mBAAmB;;AAExD;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,aAAa,GACvBC,IAAI,IACN,CAAE;EAAEC,QAAQ;EAAEC;AAAS,CAAC,KAAM;EAC7B,MAAMC,gBAAgB,GACrBC,MAAM,CAACC,UAAU,CAAE,oBAAqB,CAAC,CAACC,OAAO;EAClD,MAAMC,gBAAgB,GAAGA,CAAA,KAAM;IAC9BN,QAAQ,CAACO,KAAK,CAAE,MAAM;MACrBP,QAAQ,CAACC,QAAQ,CAAEN,gBAAiB,CAAC,CAACa,kBAAkB,CAAC,CAAC;MAC1DR,QAAQ,CAACC,QAAQ,CAAEJ,WAAY,CAAC,CAACY,aAAa,CAAE,SAAU,CAAC;MAC3DT,QAAQ,CACNC,QAAQ,CAAEN,gBAAiB,CAAC,CAC5Be,uBAAuB,CAAE,MAAO,CAAC;MACnC,MAAMC,sBAAsB,GAAGX,QAAQ,CACrCY,MAAM,CAAEf,WAAY,CAAC,CACrBc,sBAAsB,CAAC,CAAC;MAC1BV,QAAQ,CAAE;QACTY,IAAI,EAAE,iBAAiB;QACvBd;MACD,CAAE,CAAC;MACH,MAAMe,UAAU,GAAGf,IAAI,KAAK,MAAM;MAClC,IAAKY,sBAAsB,IAAI,CAAEG,UAAU,EAAG;QAC7Cd,QAAQ,CAACC,QAAQ,CAAEJ,WAAY,CAAC,CAACkB,mBAAmB,CAAC,CAAC;MACvD;;MAEA;MACA;MACA;MACA,IACCb,gBAAgB,IAChBY,UAAU,IACVd,QAAQ,CACNY,MAAM,CAAEhB,gBAAiB,CAAC,CAC1BoB,GAAG,CAAE,MAAM,EAAE,uBAAwB,CAAC,IACxC,CAAEhB,QAAQ,CACRY,MAAM,CAAEhB,gBAAiB,CAAC,CAC1BoB,GAAG,CAAE,MAAM,EAAE,iBAAkB,CAAC,EACjC;QACDhB,QAAQ,CACNC,QAAQ,CAAEJ,WAAY,CAAC,CACvBoB,mBAAmB,CAAE,IAAK,CAAC;MAC9B,CAAC,MAAM;QACNjB,QAAQ,CACNC,QAAQ,CAAEJ,WAAY,CAAC,CACvBoB,mBAAmB,CAAE,KAAM,CAAC;MAC/B;MACAjB,QAAQ,CAACC,QAAQ,CAAEJ,WAAY,CAAC,CAACqB,mBAAmB,CAAE,KAAM,CAAC;IAC9D,CAAE,CAAC;EACJ,CAAC;;EAED;AACF;AACA;AACA;EACE,IAAK,CAAEhB,gBAAgB,IAAI,CAAEiB,QAAQ,CAACC,mBAAmB,EAAG;IAC3Dd,gBAAgB,CAAC,CAAC;EACnB,CAAC,MAAM;IACNa,QAAQ,CAACE,eAAe,CAACC,SAAS,CAACC,GAAG,CACpC,eAAexB,IAAM,aACvB,CAAC;IACD,MAAMyB,UAAU,GAAGL,QAAQ,CAACC,mBAAmB,CAAE,MAChDd,gBAAgB,CAAC,CAClB,CAAC;IACDkB,UAAU,CAACC,QAAQ,CAACC,OAAO,CAAE,MAAM;MAClCP,QAAQ,CAACE,eAAe,CAACC,SAAS,CAACK,MAAM,CACvC,eAAe5B,IAAM,aACvB,CAAC;IACF,CAAE,CAAC;EACJ;AACD,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA,OAAO,MAAM6B,4BAA4B,GACtCC,IAAI,IACN,CAAE;EAAE5B;AAAS,CAAC,KAAM;EACnBA,QAAQ,CAAE;IACTY,IAAI,EAAE,kCAAkC;IACxCgB;EACD,CAAE,CAAC;AACJ,CAAC","ignoreList":[]}

package/build-style/style-rtl.css

@@ -434,7 +434,6 @@
   aspect-ratio: 1/1;
   background-color: #f0f0f0;
   border-radius: 4px;
-  overflow: hidden;
   position: relative;
 }
 .dataviews-view-grid .dataviews-view-grid__media img {
@@ -826,7 +825,7 @@
   padding: 0 12px;
   height: 32px;
   background: #f0f0f0;
-  color: #757575;
+  color: #2f2f2f;
   position: relative;
   display: flex;
   align-items: center;
@@ -1704,7 +1703,7 @@
   overflow: hidden;
   height: 100%;
   width: 100%;
-  border-radius: 3px 3px 0 0;
+  border-radius: 4px;
 }
 .page-pages-preview-field__button:focus-visible {
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
@@ -1754,10 +1753,6 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-  border-radius: 3px 3px 0 0;
-}
-.edit-site-page-patterns-dataviews .page-patterns-preview-field.is-viewtype-grid .block-editor-block-preview__container {
-  border-radius: 3px 3px 0 0;
 }
 .edit-site-page-patterns-dataviews .page-patterns-preview-field.is-viewtype-table {
   width: 96px;
@@ -1776,7 +1771,7 @@
   cursor: pointer;
   overflow: hidden;
   height: 100%;
-  border-radius: 3px 3px 0 0;
+  border-radius: 4px;
 }
 .edit-site-page-patterns-dataviews .page-patterns-preview-field .page-patterns-preview-field__button:focus-visible {
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
@@ -1868,7 +1863,6 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-  border-radius: 3px 3px 0 0;
 }
 .page-templates-preview-field .page-templates-preview-field__button {
   box-shadow: none;
@@ -1879,7 +1873,7 @@
   cursor: pointer;
   overflow: hidden;
   height: 100%;
-  border-radius: 3px;
+  border-radius: 4px;
 }
 .page-templates-preview-field .page-templates-preview-field__button:focus-visible {
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
@@ -1891,9 +1885,6 @@
 .page-templates-preview-field.is-viewtype-grid .block-editor-block-preview__container {
   height: 100%;
 }
-.page-templates-preview-field.is-viewtype-grid .page-templates-preview-field__button {
-  border-radius: 3px 3px 0 0;
-}
 .page-templates-preview-field.is-viewtype-table {
   border-radius: 2px;
   position: relative;
@@ -2129,6 +2120,17 @@
   position: relative;
   width: 100%;
   z-index: 2;
+  /*
+   * The SiteHubMobile component is displayed
+   * for pages that do not have a sidebar,
+   * yet it needs the Sidebar component for the React context.
+   *
+   * This removes the padding in this scenario.
+   * See https://github.com/WordPress/gutenberg/pull/63118
+   */
+}
+.edit-site-layout__mobile .edit-site-sidebar__screen-wrapper {
+  padding: 0;
 }
 
 .edit-site-layout__canvas-container {
@@ -2332,6 +2334,8 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 .edit-site-sidebar__content {
   flex-grow: 1;
   overflow-y: auto;
+  overflow-x: hidden;
+  contain: content;
 }
 
 @keyframes slide-from-right {

package/build-style/style.css

@@ -434,7 +434,6 @@
   aspect-ratio: 1/1;
   background-color: #f0f0f0;
   border-radius: 4px;
-  overflow: hidden;
   position: relative;
 }
 .dataviews-view-grid .dataviews-view-grid__media img {
@@ -826,7 +825,7 @@
   padding: 0 12px;
   height: 32px;
   background: #f0f0f0;
-  color: #757575;
+  color: #2f2f2f;
   position: relative;
   display: flex;
   align-items: center;
@@ -1705,7 +1704,7 @@
   overflow: hidden;
   height: 100%;
   width: 100%;
-  border-radius: 3px 3px 0 0;
+  border-radius: 4px;
 }
 .page-pages-preview-field__button:focus-visible {
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
@@ -1755,10 +1754,6 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-  border-radius: 3px 3px 0 0;
-}
-.edit-site-page-patterns-dataviews .page-patterns-preview-field.is-viewtype-grid .block-editor-block-preview__container {
-  border-radius: 3px 3px 0 0;
 }
 .edit-site-page-patterns-dataviews .page-patterns-preview-field.is-viewtype-table {
   width: 96px;
@@ -1777,7 +1772,7 @@
   cursor: pointer;
   overflow: hidden;
   height: 100%;
-  border-radius: 3px 3px 0 0;
+  border-radius: 4px;
 }
 .edit-site-page-patterns-dataviews .page-patterns-preview-field .page-patterns-preview-field__button:focus-visible {
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
@@ -1869,7 +1864,6 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-  border-radius: 3px 3px 0 0;
 }
 .page-templates-preview-field .page-templates-preview-field__button {
   box-shadow: none;
@@ -1880,7 +1874,7 @@
   cursor: pointer;
   overflow: hidden;
   height: 100%;
-  border-radius: 3px;
+  border-radius: 4px;
 }
 .page-templates-preview-field .page-templates-preview-field__button:focus-visible {
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
@@ -1892,9 +1886,6 @@
 .page-templates-preview-field.is-viewtype-grid .block-editor-block-preview__container {
   height: 100%;
 }
-.page-templates-preview-field.is-viewtype-grid .page-templates-preview-field__button {
-  border-radius: 3px 3px 0 0;
-}
 .page-templates-preview-field.is-viewtype-table {
   border-radius: 2px;
   position: relative;
@@ -2130,6 +2121,17 @@
   position: relative;
   width: 100%;
   z-index: 2;
+  /*
+   * The SiteHubMobile component is displayed
+   * for pages that do not have a sidebar,
+   * yet it needs the Sidebar component for the React context.
+   *
+   * This removes the padding in this scenario.
+   * See https://github.com/WordPress/gutenberg/pull/63118
+   */
+}
+.edit-site-layout__mobile .edit-site-sidebar__screen-wrapper {
+  padding: 0;
 }
 
 .edit-site-layout__canvas-container {
@@ -2333,6 +2335,8 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 .edit-site-sidebar__content {
   flex-grow: 1;
   overflow-y: auto;
+  overflow-x: hidden;
+  contain: content;
 }
 
 @keyframes slide-from-right {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.0.4",
+	"version": "6.0.6",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -32,20 +32,20 @@
 		"@wordpress/a11y": "^4.0.1",
 		"@wordpress/api-fetch": "^7.0.1",
 		"@wordpress/blob": "^4.0.1",
-		"@wordpress/block-editor": "^13.0.3",
-		"@wordpress/block-library": "^9.0.4",
+		"@wordpress/block-editor": "^13.0.5",
+		"@wordpress/block-library": "^9.0.6",
 		"@wordpress/blocks": "^13.0.3",
 		"@wordpress/commands": "^1.0.3",
 		"@wordpress/components": "^28.0.3",
 		"@wordpress/compose": "^7.0.1",
-		"@wordpress/core-commands": "^1.0.3",
-		"@wordpress/core-data": "^7.0.3",
+		"@wordpress/core-commands": "^1.0.5",
+		"@wordpress/core-data": "^7.0.5",
 		"@wordpress/data": "^10.0.2",
-		"@wordpress/dataviews": "^2.0.3",
+		"@wordpress/dataviews": "^2.0.4",
 		"@wordpress/date": "^5.0.1",
 		"@wordpress/deprecated": "^4.0.1",
 		"@wordpress/dom": "^4.0.1",
-		"@wordpress/editor": "^14.0.3",
+		"@wordpress/editor": "^14.0.5",
 		"@wordpress/element": "^6.0.1",
 		"@wordpress/escape-html": "^3.0.1",
 		"@wordpress/hooks": "^4.0.1",
@@ -55,18 +55,18 @@
 		"@wordpress/keyboard-shortcuts": "^5.0.2",
 		"@wordpress/keycodes": "^4.0.1",
 		"@wordpress/notices": "^5.0.2",
-		"@wordpress/patterns": "^2.0.3",
+		"@wordpress/patterns": "^2.0.5",
 		"@wordpress/plugins": "^7.0.3",
 		"@wordpress/preferences": "^4.0.3",
 		"@wordpress/primitives": "^4.0.1",
 		"@wordpress/priority-queue": "^3.0.1",
 		"@wordpress/private-apis": "^1.0.2",
-		"@wordpress/reusable-blocks": "^5.0.3",
+		"@wordpress/reusable-blocks": "^5.0.5",
 		"@wordpress/router": "^1.0.2",
 		"@wordpress/style-engine": "^2.0.2",
 		"@wordpress/url": "^4.0.1",
 		"@wordpress/viewport": "^6.0.2",
-		"@wordpress/widgets": "^4.0.3",
+		"@wordpress/widgets": "^4.0.5",
 		"@wordpress/wordcount": "^4.0.1",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
@@ -82,5 +82,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "9dd5f8dcfa4fc7242e5d48be20ee789ad087b432"
+	"gitHead": "38063ae466e1b62d400b910136757a4cafdbe7fa"
 }

package/src/components/editor/index.js

@@ -41,6 +41,7 @@ import {
 	useHasEditorCanvasContainer,
 } from '../editor-canvas-container';
 import SaveButton from '../save-button';
+import SavePanel from '../save-panel';
 import SiteEditorMoreMenu from '../more-menu';
 import SiteIcon from '../site-icon';
 import useEditorIframeProps from '../block-editor/use-editor-iframe-props';
@@ -205,6 +206,7 @@ export default function EditSiteEditor( { isLoading } ) {
 					customSaveButton={
 						_isPreviewingTheme && <SaveButton size="compact" />
 					}
+					customSavePanel={ _isPreviewingTheme && <SavePanel /> }
 					forceDisableBlockTools={ ! hasDefaultEditorCanvasView }
 					title={
 						! hasDefaultEditorCanvasView

package/src/components/global-styles/shadows-edit-panel.js

@@ -371,8 +371,7 @@ function ShadowItem( { shadow, onChange, canRemove, onRemove } ) {
 						'edit-site-global-styles__shadow-editor__remove-button',
 						{ 'is-open': isOpen }
 					),
-					ariaLabel: __( 'Remove shadow' ),
-					tooltip: __( 'Remove shadow' ),
+					label: __( 'Remove shadow' ),
 				};
 
 				return (

package/src/components/layout/index.js

@@ -42,11 +42,10 @@ import {
 import ErrorBoundary from '../error-boundary';
 import { store as editSiteStore } from '../../store';
 import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
-import SiteHub from '../site-hub';
+import { default as SiteHub, SiteHubMobile } from '../site-hub';
 import ResizableFrame from '../resizable-frame';
 import useSyncCanvasModeWithURL from '../sync-state-with-url/use-sync-canvas-mode-with-url';
 import { unlock } from '../../lock-unlock';
-import SavePanel from '../save-panel';
 import KeyboardShortcutsRegister from '../keyboard-shortcuts/register';
 import KeyboardShortcutsGlobal from '../keyboard-shortcuts/global';
 import { useCommonCommands } from '../../hooks/commands/use-common-commands';
@@ -56,6 +55,7 @@ import useLayoutAreas from './router';
 import useMovingAnimation from './animation';
 import SidebarContent from '../sidebar';
 import SaveHub from '../save-hub';
+import SavePanel from '../save-panel';
 
 const { useCommands } = unlock( coreCommandsPrivateApis );
 const { useCommandContext } = unlock( commandsPrivateApis );
@@ -209,6 +209,7 @@ export default function Layout() {
 											{ areas.sidebar }
 										</SidebarContent>
 										<SaveHub />
+										<SavePanel />
 									</motion.div>
 								) }
 							</AnimatePresence>
@@ -219,6 +220,16 @@ export default function Layout() {
 
 					{ isMobileViewport && areas.mobile && (
 						<div className="edit-site-layout__mobile">
+							{ canvasMode !== 'edit' && (
+								<SidebarContent routeKey={ routeKey }>
+									<SiteHubMobile
+										ref={ toggleRef }
+										isTransparent={
+											isResizableFrameOversized
+										}
+									/>
+								</SidebarContent>
+							) }
 							{ areas.mobile }
 						</div>
 					) }
@@ -282,8 +293,6 @@ export default function Layout() {
 						</div>
 					) }
 				</div>
-
-				<SavePanel />
 			</div>
 		</>
 	);

package/src/components/layout/router.js

@@ -77,6 +77,7 @@ export default function useLayoutAreas() {
 	const isSiteEditorLoading = useIsSiteEditorLoading();
 	const { params } = useLocation();
 	const { postType, postId, path, layout, isCustom, canvas } = params;
+	const hasEditCanvasMode = canvas === 'edit';
 	useRedirectOldPaths();
 
 	// Page list
@@ -93,15 +94,14 @@ export default function useLayoutAreas() {
 					/>
 				),
 				content: <PagePages />,
-				preview: ( isListLayout || canvas === 'edit' ) && (
+				preview: ( isListLayout || hasEditCanvasMode ) && (
 					<Editor isLoading={ isSiteEditorLoading } />
 				),
-				mobile:
-					canvas === 'edit' ? (
-						<Editor isLoading={ isSiteEditorLoading } />
-					) : (
-						<PagePages />
-					),
+				mobile: hasEditCanvasMode ? (
+					<Editor isLoading={ isSiteEditorLoading } />
+				) : (
+					<PagePages />
+				),
 			},
 			widths: {
 				content: isListLayout ? 380 : undefined,
@@ -119,10 +119,14 @@ export default function useLayoutAreas() {
 					<SidebarNavigationScreenTemplatesBrowse backPath={ {} } />
 				),
 				content: <PageTemplates />,
-				preview: ( isListLayout || canvas === 'edit' ) && (
+				preview: ( isListLayout || hasEditCanvasMode ) && (
 					<Editor isLoading={ isSiteEditorLoading } />
 				),
-				mobile: <PageTemplates />,
+				mobile: hasEditCanvasMode ? (
+					<Editor isLoading={ isSiteEditorLoading } />
+				) : (
+					<PageTemplates />
+				),
 			},
 			widths: {
 				content: isListLayout ? 380 : undefined,
@@ -139,8 +143,12 @@ export default function useLayoutAreas() {
 			areas: {
 				sidebar: <SidebarNavigationScreenPatterns backPath={ {} } />,
 				content: <PagePatterns />,
-				mobile: <PagePatterns />,
-				preview: canvas === 'edit' && (
+				mobile: hasEditCanvasMode ? (
+					<Editor isLoading={ isSiteEditorLoading } />
+				) : (
+					<PagePatterns />
+				),
+				preview: hasEditCanvasMode && (
 					<Editor isLoading={ isSiteEditorLoading } />
 				),
 			},
@@ -156,7 +164,7 @@ export default function useLayoutAreas() {
 					<SidebarNavigationScreenGlobalStyles backPath={ {} } />
 				),
 				preview: <Editor isLoading={ isSiteEditorLoading } />,
-				mobile: canvas === 'edit' && (
+				mobile: hasEditCanvasMode && (
 					<Editor isLoading={ isSiteEditorLoading } />
 				),
 			},
@@ -175,7 +183,7 @@ export default function useLayoutAreas() {
 						/>
 					),
 					preview: <Editor isLoading={ isSiteEditorLoading } />,
-					mobile: canvas === 'edit' && (
+					mobile: hasEditCanvasMode && (
 						<Editor isLoading={ isSiteEditorLoading } />
 					),
 				},
@@ -188,7 +196,7 @@ export default function useLayoutAreas() {
 					<SidebarNavigationScreenNavigationMenus backPath={ {} } />
 				),
 				preview: <Editor isLoading={ isSiteEditorLoading } />,
-				mobile: canvas === 'edit' && (
+				mobile: hasEditCanvasMode && (
 					<Editor isLoading={ isSiteEditorLoading } />
 				),
 			},
@@ -201,7 +209,7 @@ export default function useLayoutAreas() {
 		areas: {
 			sidebar: <SidebarNavigationScreenMain />,
 			preview: <Editor isLoading={ isSiteEditorLoading } />,
-			mobile: canvas === 'edit' && (
+			mobile: hasEditCanvasMode && (
 				<Editor isLoading={ isSiteEditorLoading } />
 			),
 		},

package/src/components/layout/style.scss

@@ -56,6 +56,18 @@
 	position: relative;
 	width: 100%;
 	z-index: z-index(".edit-site-layout__canvas-container");
+
+	/*
+	 * The SiteHubMobile component is displayed
+	 * for pages that do not have a sidebar,
+	 * yet it needs the Sidebar component for the React context.
+	 *
+	 * This removes the padding in this scenario.
+	 * See https://github.com/WordPress/gutenberg/pull/63118
+	 */
+	.edit-site-sidebar__screen-wrapper {
+		padding: 0;
+	}
 }
 
 .edit-site-layout__canvas-container {