@wordpress/edit-site 6.0.5 → 6.0.6

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 {

package/src/components/sidebar/style.scss

@@ -1,6 +1,12 @@
 .edit-site-sidebar__content {
 	flex-grow: 1;
 	overflow-y: auto;
+	// Prevents horizontal overflow while animating screen transitions
+	overflow-x: hidden;
+	// Mark this section of the DOM as isolated, providing performance benefits
+	// by limiting calculations of layout, style and paint to a DOM subtree rather
+	// than the entire page.
+	contain: content;
 }
 
 @keyframes slide-from-right {

package/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 (
+			<div className="edit-site-site-hub">
+				<HStack justify="flex-start" spacing="0">
+					<div
+						className={ clsx(
+							'edit-site-site-hub__view-mode-toggle-container',
+							{
+								'has-transparent-background': isTransparent,
+							}
+						) }
+					>
+						<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' );
+							} }
+						>
+							<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
+						</Button>
+					</div>
+
+					<HStack>
+						<div className="edit-site-site-hub__title">
+							<Button
+								variant="link"
+								href={ homeUrl }
+								target="_blank"
+								label={ __( 'View site (opens in a new tab)' ) }
+							>
+								{ decodeEntities( siteTitle ) }
+							</Button>
+						</div>
+						<HStack
+							spacing={ 0 }
+							expanded={ false }
+							className="edit-site-site-hub__actions"
+						>
+							<Button
+								className="edit-site-site-hub_toggle-command-center"
+								icon={ search }
+								onClick={ () => openCommandCenter() }
+								label={ __( 'Open command palette' ) }
+								shortcut={ displayShortcut.primary( 'k' ) }
+							/>
+						</HStack>
+					</HStack>
+				</HStack>
+			</div>
+		);
+	} )
+);