Edit site: Restore animations on site hub and canvas

packages/edit-site/src/components/block-editor/style.scss

@@ -1,15 +1,4 @@
-/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
-::view-transition-old(frame),
-::view-transition-new(frame) {
-  animation-duration: 0;
-}
-/* stylelint-enable */
-
 .edit-site-visual-editor__editor-canvas {
-	/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
-	view-transition-name: frame;
-	/* stylelint-enable */
-
 	&.is-focused {
 		outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
 		outline-offset: calc(-2 * var(--wp-admin-border-width-focus));

packages/edit-site/src/components/editor/index.js

@@ -7,7 +7,6 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { useDispatch, useSelect } from '@wordpress/data';
-import { Button } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import {
 	EditorKeyboardShortcutsRegister,
@@ -41,11 +40,10 @@ import {
 } from '../editor-canvas-container';
 import SaveButton from '../save-button';
 import SiteEditorMoreMenu from '../more-menu';
-import SiteIcon from '../site-icon';
 import useEditorIframeProps from '../block-editor/use-editor-iframe-props';
 import useEditorTitle from './use-editor-title';
 
-const { Editor, BackButton } = unlock( editorPrivateApis );
+const { Editor } = unlock( editorPrivateApis );
 const { useHistory } = unlock( routerPrivateApis );
 const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
 
@@ -122,7 +120,6 @@ export default function EditSiteEditor( { isLoading } ) {
 		],
 		[ settings.styles, canvasMode, currentPostIsTrashed ]
 	);
-	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const { createSuccessNotice } = useDispatch( noticesStore );
 	const history = useHistory();
 	const onActionPerformed = useCallback(
@@ -210,23 +207,6 @@ export default function EditSiteEditor( { isLoading } ) {
 						! isEditingPage && <PluginTemplateSettingPanel.Slot />
 					}
 				>
-					{ isEditMode && (
-						<BackButton>
-							{ ( { length } ) =>
-								length <= 1 && (
-									<Button
-										label={ __( 'Open Navigation' ) }
-										className="edit-site-layout__view-mode-toggle"
-										onClick={ () =>
-											setCanvasMode( 'view' )
-										}
-									>
-										<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
-									</Button>
-								)
-							}
-						</BackButton>
-					) }
 					<SiteEditorMoreMenu />
 					{ supportsGlobalStyles && <GlobalStylesSidebar /> }
 				</Editor>

packages/edit-site/src/components/layout/index.js

@@ -16,10 +16,9 @@ import {
 	useReducedMotion,
 	useViewportMatch,
 	useResizeObserver,
-	usePrevious,
 } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { useState, useRef, useEffect } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { CommandMenu } from '@wordpress/commands';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
@@ -56,7 +55,6 @@ export default function Layout( { route } ) {
 	useSyncCanvasModeWithURL();
 	useCommands();
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const toggleRef = useRef();
 	const { canvasMode, previousShortcut, nextShortcut } = useSelect(
 		( select ) => {
 			const { getAllShortcutKeyCombinations } = select(
@@ -79,7 +77,7 @@ export default function Layout( { route } ) {
 		previous: previousShortcut,
 		next: nextShortcut,
 	} );
-	const disableMotion = useReducedMotion();
+	const reduceMotion = useReducedMotion();
 	const [ canvasResizer, canvasSize ] = useResizeObserver();
 	const [ fullResizer ] = useResizeObserver();
 	const isEditorLoading = useIsSiteEditorLoading();
@@ -92,14 +90,6 @@ export default function Layout( { route } ) {
 
 	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
 	const [ gradientValue ] = useGlobalStyle( 'color.gradient' );
-	const previousCanvaMode = usePrevious( canvasMode );
-	useEffect( () => {
-		if ( previousCanvaMode === 'edit' ) {
-			toggleRef.current?.focus();
-		}
-		// Should not depend on the previous canvas mode value but the next.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ canvasMode ] );
 
 	// Synchronizing the URL with the store value of canvasMode happens in an effect
 	// This condition ensures the component is only rendered after the synchronization happens
@@ -135,6 +125,10 @@ export default function Layout( { route } ) {
 							ariaLabel={ __( 'Navigation' ) }
 							className="edit-site-layout__sidebar-region"
 						>
+							<SiteHub
+								isTransparent={ isResizableFrameOversized }
+								canvasMode={ canvasMode }
+							/>
 							<AnimatePresence>
 								{ canvasMode === 'view' && (
 									<motion.div
@@ -145,20 +139,15 @@ export default function Layout( { route } ) {
 											type: 'tween',
 											duration:
 												// Disable transition in mobile to emulate a full page transition.
-												disableMotion ||
-												isMobileViewport
+												reduceMotion || isMobileViewport
 													? 0
 													: ANIMATION_DURATION,
-											ease: 'easeOut',
+											ease: 'linear',
+											delay:
+												canvasMode === 'view' ? 0.2 : 0,
 										} }
 										className="edit-site-layout__sidebar"
 									>
-										<SiteHub
-											ref={ toggleRef }
-											isTransparent={
-												isResizableFrameOversized
-											}
-										/>
 										<SidebarContent routeKey={ routeKey }>
 											{ areas.sidebar }
 										</SidebarContent>

packages/edit-site/src/components/layout/style.scss

@@ -18,26 +18,31 @@
 }
 
 .edit-site-layout__sidebar-region {
-	z-index: z-index(".edit-site-layout__sidebar");
+	/* z-index: z-index(".edit-site-layout__sidebar"); */
 	width: 100vw;
 	flex-shrink: 0;
+	display: flex;
+	flex-direction: column;
 
-	@include break-medium {
-		width: $nav-sidebar-width;
+	&,
+	// Direct children’s width is also specified so they maintain it when the
+	// sidebar region collapses for full screen canvas.
+	& > * {
+		@include break-medium {
+			width: $nav-sidebar-width;
+		}
 	}
 
-	// This is only necessary for the exit animation
 	.edit-site-layout.is-full-canvas & {
-		position: fixed !important;
-		height: 100vh;
-		left: 0;
-		top: 0;
+		// Frees the space for the canvas.
+		width: 0;
 	}
 
 	.edit-site-layout__sidebar {
 		display: flex;
 		flex-direction: column;
-		height: 100%;
+		flex: 1;
+		overflow: hidden;
 	}
 
 	.resizable-editor__drag-handle {
@@ -81,7 +86,7 @@
 .edit-site-layout__canvas {
 	position: absolute;
 	top: 0;
-	left: 0;
+	left: auto;
 	bottom: 0;
 	width: 100%;
 	display: flex;
@@ -103,7 +108,8 @@
 
 		.edit-site-resizable-frame__inner-content {
 			box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);
-			transition: border-radius 0.4s;
+			transition: border-radius 0.6s linear;
+			@include reduce-motion("transition");
 			// This ensure the radius work properly.
 			overflow: hidden;
 
@@ -132,20 +138,7 @@
 	height: 100%;
 }
 
-/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
-html.canvas-mode-edit-transition::view-transition-group(toggle) {
-	animation-delay: 255ms;
-}
-/* stylelint-enable  */
-
-.edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region .edit-site-layout__view-mode-toggle {
-	display: none;
-}
-
 .edit-site-layout__view-mode-toggle.components-button {
-	/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
-	view-transition-name: toggle;
-	/* stylelint-enable  */
 	position: relative;
 	color: $white;
 	height: $header-height;
@@ -168,24 +161,23 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 	}
 
 	&::before {
-		transition: box-shadow 0.1s ease;
+		opacity: 0;
+		transition: opacity 0.1s linear;
 		@include reduce-motion("transition");
 		content: "";
 		display: block;
 		position: absolute;
-		top: 9px;
-		right: 9px;
-		bottom: 9px;
-		left: 9px;
+		z-index: 1;
+		inset: 7px;
 		border-radius: $radius-block-ui + $border-width + $border-width;
-		box-shadow: none;
 	}
 
-	// Lightened spot color focus.
-	&:focus::before {
+	&:focus-visible::before {
+		opacity: 1;
 		box-shadow:
-			inset 0 0 0 var(--wp-admin-border-width-focus) rgba($white, 0.1),
-			inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color),
+			inset 0 0 0 calc(var(--wp-admin-border-width-focus) + 0.5px) rgba($white, 0.5),
+			0 0 0 calc(var(--wp-admin-border-width-focus) - 1px) rgba($white, 0.5);
 	}
 
 	.edit-site-layout__view-mode-toggle-icon {
@@ -197,6 +189,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 	}
 }
 
+.edit-site-editor__editor-interface .editor-header {
+	padding-inline: $header-height 0;
+}
+
 .edit-site-layout__actions {
 	z-index: z-index(".edit-site-layout__actions");
 	position: fixed !important; // Need to override the default relative positioning