From 96b214014422a751346c4437e171b6e0cd4cec55 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Maneiro?=
<583546+oandregal@users.noreply.github.com>
Date: Thu, 4 Jul 2024 11:36:22 +0200
Subject: [PATCH 1/2] Create a SiteHubMobile only available for Pages,
Patterns, and Templates
---
.../edit-site/src/components/layout/index.js | 12 ++-
.../src/components/site-hub/index.js | 85 ++++++++++++++++++-
2 files changed, 95 insertions(+), 2 deletions(-)
diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
index 443ca04ebd03e..a609f616471db 100644
--- a/packages/edit-site/src/components/layout/index.js
+++ b/packages/edit-site/src/components/layout/index.js
@@ -34,7 +34,7 @@ import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands
*/
import ErrorBoundary from '../error-boundary';
import { store as editSiteStore } from '../../store';
-import SiteHub from '../site-hub';
+import { default as SiteHub, SiteHubMobile } from '../site-hub';
import ResizableFrame from '../resizable-frame';
import { unlock } from '../../lock-unlock';
import KeyboardShortcutsRegister from '../keyboard-shortcuts/register';
@@ -174,6 +174,16 @@ export default function Layout( { route } ) {
{ isMobileViewport && areas.mobile && (
+ { canvasMode !== 'edit' && (
+
+
+
+ ) }
{ areas.mobile }
) }
diff --git a/packages/edit-site/src/components/site-hub/index.js b/packages/edit-site/src/components/site-hub/index.js
index b53fed2d7a94f..301f7165d5935 100644
--- a/packages/edit-site/src/components/site-hub/index.js
+++ b/packages/edit-site/src/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,8 @@ 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';
const SiteHub = memo(
forwardRef( ( { isTransparent }, ref ) => {
@@ -103,3 +106,83 @@ const SiteHub = memo(
);
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 (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ } )
+);
From 29123181d26357ab13b97be2d256cef124b70437 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Maneiro?=
<583546+oandregal@users.noreply.github.com>
Date: Thu, 4 Jul 2024 13:41:23 +0200
Subject: [PATCH 2/2] Fix spacing issues
---
packages/edit-site/src/components/layout/style.scss | 12 ++++++++++++
1 file changed, 12 insertions(+)
diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
index 01c31de0d65d6..a7539ccdca79b 100644
--- a/packages/edit-site/src/components/layout/style.scss
+++ b/packages/edit-site/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 {