@wordpress/edit-site 6.0.4 → 6.0.6

package/src/components/page-pages/style.scss

@@ -43,7 +43,7 @@
 	overflow: hidden;
 	height: 100%;
 	width: 100%;
-	border-radius: 3px 3px 0 0;
+	border-radius: $grid-unit-05;
 
 	&:focus-visible {
 		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);

package/src/components/page-patterns/style.scss

@@ -35,13 +35,6 @@
 		display: flex;
 		flex-direction: column;
 		height: 100%;
-		border-radius: 3px 3px 0 0;
-
-		&.is-viewtype-grid {
-			.block-editor-block-preview__container {
-				border-radius: 3px 3px 0 0;
-			}
-		}
 
 		&.is-viewtype-table {
 			width: 96px;
@@ -62,7 +55,7 @@
 			cursor: pointer;
 			overflow: hidden;
 			height: 100%;
-			border-radius: 3px 3px 0 0;
+			border-radius: $grid-unit-05;
 
 			&:focus-visible {
 				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);

package/src/components/page-templates/style.scss

@@ -2,7 +2,6 @@
 	display: flex;
 	flex-direction: column;
 	height: 100%;
-	border-radius: 3px 3px 0 0;
 
 	.page-templates-preview-field__button {
 		box-shadow: none;
@@ -13,7 +12,7 @@
 		cursor: pointer;
 		overflow: hidden;
 		height: 100%;
-		border-radius: 3px;
+		border-radius: $grid-unit-05;
 
 		&:focus-visible {
 			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
@@ -32,10 +31,6 @@
 		.block-editor-block-preview__container {
 			height: 100%;
 		}
-
-		.page-templates-preview-field__button {
-			border-radius: 3px 3px 0 0;
-		}
 	}
 
 	&.is-viewtype-table {

package/src/components/revisions/index.js

@@ -25,6 +25,7 @@ const {
 	ExperimentalBlockEditorProvider,
 	GlobalStylesContext,
 	useGlobalStylesOutputWithConfig,
+	__unstableBlockStyleVariationOverridesWithConfig,
 } = unlock( blockEditorPrivateApis );
 const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
 
@@ -74,7 +75,6 @@ function Revisions( { userConfig, blocks } ) {
 				name="revisions"
 				tabIndex={ 0 }
 			>
-				<EditorStyles styles={ editorStyles } />
 				<style>
 					{
 						// Forming a "block formatting context" to prevent margin collapsing.
@@ -88,6 +88,14 @@ function Revisions( { userConfig, blocks } ) {
 						settings={ settings }
 					>
 						<BlockList renderAppender={ false } />
+						{ /*
+						 * Styles are printed inside the block editor provider,
+						 * so they can access any registered style overrides.
+						 */ }
+						<EditorStyles styles={ editorStyles } />
+						<__unstableBlockStyleVariationOverridesWithConfig
+							config={ mergedConfig }
+						/>
 					</ExperimentalBlockEditorProvider>
 				</Disabled>
 			</Iframe>

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>
+		);
+	} )
+);

package/src/store/private-actions.js

@@ -13,10 +13,10 @@ import { store as editorStore } from '@wordpress/editor';
 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
@@ -59,7 +59,11 @@ export const setCanvasMode =
 			} );
 		};
 
-		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(