Update "focus mode" to consistently use the Document Bar's Back button (

#58528)

* Update focus mode to consisetntly use the document bar's back button

* Update e2e test

* Revert DocumentBar

Co-authored-by: noisysocks <[email protected]>
Co-authored-by: andrewserong <[email protected]>
Co-authored-by: youknowriad <[email protected]>
Co-authored-by: SaxonF <[email protected]>

packages/block-editor/src/components/block-canvas/style.scss

@@ -9,5 +9,5 @@ iframe[name="editor-canvas"]:not(.has-editor-padding) {
 }
 
 iframe[name="editor-canvas"].has-editor-padding {
-	padding: $grid-unit-60 $grid-unit-60 0;
+	padding: $grid-unit-30 $grid-unit-30 0;
 }

packages/edit-post/src/components/visual-editor/style.scss

@@ -11,7 +11,7 @@
 	// Gray preview overlay (desktop/tablet/mobile) is intentionally not set on an element with scrolling content like
 	// interface-interface-skeleton__content. This causes graphical glitches (flashes of the background color)
 	// when scrolling in Safari due to incorrect ordering of large compositing layers (GPU acceleration).
-	background-color: $gray-900;
+	background-color: $gray-300;
 
 	// The button element easily inherits styles that are meant for the editor style.
 	// These rules enhance the specificity to reduce that inheritance.

packages/edit-site/src/components/block-editor/site-editor-canvas.js

@@ -11,7 +11,6 @@ import { useViewportMatch, useResizeObserver } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import BackButton from './back-button';
 import ResizableEditor from './resizable-editor';
 import EditorCanvas from './editor-canvas';
 import EditorCanvasContainer from '../editor-canvas-container';
@@ -20,6 +19,7 @@ import { store as editSiteStore } from '../../store';
 import {
 	FOCUSABLE_ENTITIES,
 	NAVIGATION_POST_TYPE,
+	TEMPLATE_POST_TYPE,
 } from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
@@ -54,7 +54,9 @@ export default function SiteEditorCanvas() {
 		isFocusMode &&
 		! isViewMode &&
 		// Disable resizing in mobile viewport.
-		! isMobileViewport;
+		! isMobileViewport &&
+		// Disable resizing when editing a template in focus mode.
+		templateType !== TEMPLATE_POST_TYPE;
 
 	const isTemplateTypeNavigation = templateType === NAVIGATION_POST_TYPE;
 	const isNavigationFocusMode = isTemplateTypeNavigation && isFocusMode;
@@ -74,7 +76,6 @@ export default function SiteEditorCanvas() {
 							'is-view-mode': isViewMode,
 						} ) }
 					>
-						<BackButton />
 						<ResizableEditor
 							enableResizing={ enableResizing }
 							height={

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

@@ -23,7 +23,7 @@
 	height: 100%;
 	display: block;
 	overflow: hidden;
-	background-color: $gray-900;
+	background-color: $gray-300;
 	// Centralize the editor horizontally (flex-direction is column).
 	align-items: center;
 
@@ -45,7 +45,7 @@
 
 	&.is-focus-mode {
 		.edit-site-layout.is-full-canvas & {
-			padding: $grid-unit-60;
+			padding: $grid-unit-30;
 		}
 
 		.edit-site-visual-editor__editor-canvas {
@@ -71,24 +71,6 @@
 	}
 }
 
-.edit-site-visual-editor__back-button {
-	position: absolute;
-	top: $grid-unit-10;
-	left: $grid-unit-10;
-	color: $white;
-
-	&:active:not([aria-disabled="true"]),
-	&:focus:not([aria-disabled="true"]),
-	&:hover {
-		color: $gray-100;
-	}
-}
-
-// The toolbar header in distraction mode sits over the back button, which renders it unreachable.
-.is-distraction-free .edit-site-visual-editor__back-button {
-	display: none;
-}
-
 .resizable-editor__drag-handle {
 	position: absolute;
 	top: 0;

packages/edit-site/src/components/block-editor/use-site-editor-settings.js

@@ -5,15 +5,18 @@ import { useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import { usePostLinkProps } from './use-post-link-props';
+import { FOCUSABLE_ENTITIES } from '../../utils/constants';
 
 const { useBlockEditorSettings } = unlock( editorPrivateApis );
+const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 function useArchiveLabel( templateSlug ) {
 	const taxonomyMatches = templateSlug?.match(
@@ -87,6 +90,18 @@ function useArchiveLabel( templateSlug ) {
 	);
 }
 
+function useGoBack() {
+	const location = useLocation();
+	const history = useHistory();
+	const goBack = useMemo( () => {
+		const isFocusMode =
+			location.params.focusMode ||
+			FOCUSABLE_ENTITIES.includes( location.params.postType );
+		return isFocusMode ? () => history.back() : undefined;
+	}, [ location.params.focusMode, location.params.postType, history ] );
+	return goBack;
+}
+
 export function useSpecificEditorSettings() {
 	const getPostLinkProps = usePostLinkProps();
 	const { templateSlug, canvasMode, settings, postWithTemplate } = useSelect(
@@ -118,6 +133,7 @@ export function useSpecificEditorSettings() {
 	);
 	const archiveLabels = useArchiveLabel( templateSlug );
 	const defaultRenderingMode = postWithTemplate ? 'template-locked' : 'all';
+	const goBack = useGoBack();
 	const defaultEditorSettings = useMemo( () => {
 		return {
 			...settings,
@@ -127,6 +143,7 @@ export function useSpecificEditorSettings() {
 			focusMode: canvasMode !== 'view',
 			defaultRenderingMode,
 			getPostLinkProps,
+			goBack,
 			// I wonder if they should be set in the post editor too
 			__experimentalArchiveTitleTypeLabel: archiveLabels.archiveTypeLabel,
 			__experimentalArchiveTitleNameLabel: archiveLabels.archiveNameLabel,
@@ -136,6 +153,7 @@ export function useSpecificEditorSettings() {
 		canvasMode,
 		defaultRenderingMode,
 		getPostLinkProps,
+		goBack,
 		archiveLabels.archiveTypeLabel,
 		archiveLabels.archiveNameLabel,
 	] );

test/e2e/specs/site-editor/pages.spec.js

@@ -150,7 +150,7 @@ test.describe( 'Pages', () => {
 
 		// Go back to page editing focus.
 		await page
-			.getByRole( 'region', { name: 'Editor content' } )
+			.getByRole( 'region', { name: 'Editor top bar' } )
 			.getByRole( 'button', { name: 'Back' } )
 			.click();