From af1950de32e6c00a2fb9617a77f5be0c2eb34ef4 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 13 Apr 2021 09:23:37 +0100
Subject: [PATCH] Updates the template mode canvas padding and adds a back link
 (#30658)

---
 packages/base-styles/_colors.scss             |  1 -
 .../block-selection-clearer/index.js          |  7 ++--
 .../src/components/use-resize-canvas/index.js |  1 +
 .../header/template-save-button/index.js      |  3 --
 .../components/header/template-title/index.js |  9 +++++-
 .../src/components/layout/style.scss          |  2 +-
 .../components/sidebar/post-template/index.js | 18 ++++++-----
 .../src/components/visual-editor/index.js     | 32 ++++++++++++++++---
 .../src/components/visual-editor/style.scss   | 15 +++++++++
 packages/edit-post/src/store/selectors.js     |  2 +-
 10 files changed, 69 insertions(+), 21 deletions(-)

diff --git a/packages/base-styles/_colors.scss b/packages/base-styles/_colors.scss
index f76fc60eb2fa3..792672ba66ddc 100644
--- a/packages/base-styles/_colors.scss
+++ b/packages/base-styles/_colors.scss
@@ -7,7 +7,6 @@ $black: #000;			// Use only when you truly need pure black. For UI, use $gray-90
 $gray-900: #1e1e1e;
 $gray-700: #757575;		// Meets 4.6:1 text contrast against white.
 $gray-600: #949494;		// Meets 3:1 UI or large text contrast against white.
-$gray-500: #bbb;
 $gray-400: #ccc;
 $gray-300: #ddd;		// Used for most borders.
 $gray-200: #e0e0e0;		// Used sparingly for light borders.
diff --git a/packages/block-editor/src/components/block-selection-clearer/index.js b/packages/block-editor/src/components/block-selection-clearer/index.js
index 0db9331183425..10e1209cad46a 100644
--- a/packages/block-editor/src/components/block-selection-clearer/index.js
+++ b/packages/block-editor/src/components/block-selection-clearer/index.js
@@ -9,7 +9,7 @@ import { useRefEffect } from '@wordpress/compose';
  */
 import { store as blockEditorStore } from '../../store';
 
-export function useBlockSelectionClearer() {
+export function useBlockSelectionClearer( onlySelfClicks = false ) {
 	const hasSelection = useSelect( ( select ) => {
 		const { hasSelectedBlock, hasMultiSelection } = select(
 			blockEditorStore
@@ -27,7 +27,10 @@ export function useBlockSelectionClearer() {
 
 			function onMouseDown( event ) {
 				// Only handle clicks on the canvas, not the content.
-				if ( event.target.closest( '.wp-block' ) ) {
+				if (
+					event.target.closest( '.wp-block' ) ||
+					( onlySelfClicks && event.target !== node )
+				) {
 					return;
 				}
 
diff --git a/packages/block-editor/src/components/use-resize-canvas/index.js b/packages/block-editor/src/components/use-resize-canvas/index.js
index 776b1b9ecdf6f..587a151c3b946 100644
--- a/packages/block-editor/src/components/use-resize-canvas/index.js
+++ b/packages/block-editor/src/components/use-resize-canvas/index.js
@@ -68,6 +68,7 @@ export default function useResizeCanvas(
 					maxHeight: height,
 					overflowY: 'auto',
 					borderRadius: '2px',
+					border: '1px solid #ddd',
 				};
 			default:
 				return null;
diff --git a/packages/edit-post/src/components/header/template-save-button/index.js b/packages/edit-post/src/components/header/template-save-button/index.js
index 48089eb55df50..0556607ec4117 100644
--- a/packages/edit-post/src/components/header/template-save-button/index.js
+++ b/packages/edit-post/src/components/header/template-save-button/index.js
@@ -21,9 +21,6 @@ function TemplateSaveButton() {
 	const { setIsEditingTemplate } = useDispatch( editPostStore );
 	return (
 		<>
-			<Button onClick={ () => setIsEditingTemplate( false ) } isTertiary>
-				{ __( 'Cancel' ) }
-			</Button>
 			<Button
 				isPrimary
 				onClick={ () => setIsEntitiesReviewPanelOpen( true ) }
diff --git a/packages/edit-post/src/components/header/template-title/index.js b/packages/edit-post/src/components/header/template-title/index.js
index 877c48ccf50da..4cc78782ab620 100644
--- a/packages/edit-post/src/components/header/template-title/index.js
+++ b/packages/edit-post/src/components/header/template-title/index.js
@@ -25,11 +25,18 @@ function TemplateTitle() {
 		return null;
 	}
 
+	let templateTitle = __( 'Default' );
+	if ( template?.title?.raw ) {
+		templateTitle = template.title.raw;
+	} else if ( !! template ) {
+		templateTitle = template.slug;
+	}
+
 	return (
 		<span className="edit-post-template-title">
 			{
 				/* translators: 1: Template name. */
-				sprintf( __( 'Editing template: %s' ), template.slug )
+				sprintf( __( 'Editing template: %s' ), templateTitle )
 			}
 		</span>
 	);
diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
index f1d29371aad63..bbc5fe56c3ebb 100644
--- a/packages/edit-post/src/components/layout/style.scss
+++ b/packages/edit-post/src/components/layout/style.scss
@@ -87,7 +87,7 @@
 }
 
 .edit-post-layout .interface-interface-skeleton__content {
-	background-color: $gray-500;
+	background-color: $gray-100;
 }
 
 .edit-post-layout__inserter-panel {
diff --git a/packages/edit-post/src/components/sidebar/post-template/index.js b/packages/edit-post/src/components/sidebar/post-template/index.js
index 05eef4febd9b8..83ff73a780593 100644
--- a/packages/edit-post/src/components/sidebar/post-template/index.js
+++ b/packages/edit-post/src/components/sidebar/post-template/index.js
@@ -59,18 +59,20 @@ function PostTemplate() {
 		return null;
 	}
 
+	const templateTitle = (
+		<>
+			{ !! template && template?.title?.raw }
+			{ !! template && ! template?.title?.raw && template.slug }
+			{ ! template && __( 'Default' ) }
+		</>
+	);
+
 	return (
 		<PanelRow className="edit-post-post-template">
 			<span>{ __( 'Template' ) }</span>
 			{ ! isEditing && (
 				<div className="edit-post-post-template__value">
-					<div>
-						{ !! template && template?.title?.raw }
-						{ !! template &&
-							! template?.title?.raw &&
-							template.slug }
-						{ ! template && __( 'Default' ) }
-					</div>
+					<div>{ templateTitle }</div>
 					<div className="edit-post-post-template__actions">
 						{ !! template && (
 							<Button
@@ -90,7 +92,7 @@ function PostTemplate() {
 			) }
 			{ isEditing && (
 				<span className="edit-post-post-template__value">
-					{ template?.slug }
+					{ templateTitle }
 				</span>
 			) }
 			{ isModalOpen && (
diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
index e452498fbd98d..a78806557eb6e 100644
--- a/packages/edit-post/src/components/visual-editor/index.js
+++ b/packages/edit-post/src/components/visual-editor/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -20,10 +25,12 @@ import {
 	__experimentalUseEditorFeature as useEditorFeature,
 	__experimentalLayoutStyle as LayoutStyle,
 } from '@wordpress/block-editor';
-import { Popover } from '@wordpress/components';
+import { Popover, Button } from '@wordpress/components';
 import { useRef } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { useMergeRefs } from '@wordpress/compose';
+import { arrowLeft } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -51,6 +58,7 @@ export default function VisualEditor( { styles } ) {
 		const { getSettings } = select( blockEditorStore );
 		return getSettings().supportsLayout;
 	}, [] );
+	const { setIsEditingTemplate } = useDispatch( editPostStore );
 	const desktopCanvasStyles = {
 		height: '100%',
 		// Add a constant padding for the typewritter effect. When typing at the
@@ -70,12 +78,19 @@ export default function VisualEditor( { styles } ) {
 		useClipboardHandler(),
 		useCanvasClickRedirect(),
 		useTypewriter(),
-		useBlockSelectionClearer(),
 		useTypingObserver(),
+		useBlockSelectionClearer(),
 	] );
 
+	const blockSelectionClearerRef = useBlockSelectionClearer( true );
+
 	return (
-		<div className="edit-post-visual-editor">
+		<div
+			className={ classnames( 'edit-post-visual-editor', {
+				'is-template-mode': isTemplateMode,
+			} ) }
+			ref={ blockSelectionClearerRef }
+		>
 			{ themeSupportsLayout && (
 				<LayoutStyle
 					selector=".edit-post-visual-editor__post-title-wrapper, .block-editor-block-list__layout.is-root-container"
@@ -85,6 +100,15 @@ export default function VisualEditor( { styles } ) {
 			<EditorStyles styles={ styles } />
 			<VisualEditorGlobalKeyboardShortcuts />
 			<Popover.Slot name="block-toolbar" />
+			{ isTemplateMode && (
+				<Button
+					className="edit-post-visual-editor__exit-template-mode"
+					icon={ arrowLeft }
+					onClick={ () => setIsEditingTemplate( false ) }
+				>
+					{ __( 'Back' ) }
+				</Button>
+			) }
 			<div
 				ref={ mergedRefs }
 				className="editor-styles-wrapper"
diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss
index 6894839d78b0b..6a687b1d454f0 100644
--- a/packages/edit-post/src/components/visual-editor/style.scss
+++ b/packages/edit-post/src/components/visual-editor/style.scss
@@ -23,6 +23,15 @@
 	@supports (position: sticky) {
 		flex-basis: 100%;
 	}
+
+	&.is-template-mode {
+		padding: $grid-unit-60;
+
+		.editor-styles-wrapper {
+			border-radius: 2px;
+			border: 1px solid $gray-300;
+		}
+	}
 }
 
 .editor-styles-wrapper {
@@ -55,3 +64,9 @@
 		margin-bottom: $default-block-margin;
 	}
 }
+
+.edit-post-visual-editor__exit-template-mode {
+	position: absolute;
+	top: $grid-unit-10;
+	left: $grid-unit-10;
+}
diff --git a/packages/edit-post/src/store/selectors.js b/packages/edit-post/src/store/selectors.js
index 940ad34517ac8..b734484b21395 100644
--- a/packages/edit-post/src/store/selectors.js
+++ b/packages/edit-post/src/store/selectors.js
@@ -313,7 +313,7 @@ export function isSavingMetaBoxes( state ) {
  * @return {string} Device type.
  */
 export function __experimentalGetPreviewDeviceType( state ) {
-	return state.deviceType;
+	return state.isEditingTemplate ? 'Desktop' : state.deviceType;
 }
 
 /**