Add back button for isolated template part editor

packages/edit-site/src/components/block-editor/back-button.js

@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { arrowLeft } from '@wordpress/icons';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+
+function BackButton() {
+	const { isTemplatePart, previousTemplateId } = useSelect( ( select ) => {
+		const { getEditedPostType, getPreviousEditedPostId } = select(
+			editSiteStore
+		);
+
+		return {
+			isTemplatePart: getEditedPostType() === 'wp_template_part',
+			previousTemplateId: getPreviousEditedPostId(),
+		};
+	}, [] );
+	const { goBack } = useDispatch( editSiteStore );
+
+	if ( ! isTemplatePart || ! previousTemplateId ) {
+		return null;
+	}
+
+	return (
+		<Button
+			className="edit-site-visual-editor__back-button"
+			icon={ arrowLeft }
+			onClick={ () => {
+				goBack();
+			} }
+		>
+			{ __( 'Back' ) }
+		</Button>
+	);
+}
+
+export default BackButton;

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

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -28,6 +33,7 @@ import { SidebarInspectorFill } from '../sidebar';
 import { store as editSiteStore } from '../../store';
 import BlockInspectorButton from './block-inspector-button';
 import EditTemplatePartMenuButton from '../edit-template-part-menu-button';
+import BackButton from './back-button';
 
 const LAYOUT = {
 	type: 'default',
@@ -44,6 +50,7 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 				getPage,
 				__experimentalGetPreviewDeviceType,
 			} = select( editSiteStore );
+
 			return {
 				settings: getSettings( setIsInserterOpen ),
 				templateType: getEditedPostType(),
@@ -63,6 +70,8 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 	const contentRef = useRef();
 	const mergedRefs = useMergeRefs( [ contentRef, useTypingObserver() ] );
 
+	const isTemplatePart = templateType === 'wp_template_part';
+
 	return (
 		<BlockEditorProvider
 			settings={ settings }
@@ -89,15 +98,19 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 				<BlockInspector />
 			</SidebarInspectorFill>
 			<BlockTools
-				className="edit-site-visual-editor"
+				className={ classnames( 'edit-site-visual-editor', {
+					'is-focus-mode': isTemplatePart,
+				} ) }
 				__unstableContentRef={ contentRef }
 			>
+				<BackButton />
 				<Iframe
 					style={ resizedCanvasStyles }
 					head={ <EditorStyles styles={ settings.styles } /> }
 					ref={ ref }
 					contentRef={ mergedRefs }
 					name="editor-canvas"
+					className="edit-site-visual-editor__editor-canvas"
 				>
 					<BlockList
 						className="edit-site-block-editor__block-list wp-site-blocks"

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

@@ -11,3 +11,29 @@
 		padding: 6px;
 	}
 }
+
+.edit-site-visual-editor {
+	position: relative;
+	background-color: $gray-800;
+
+	&.is-focus-mode {
+		padding: 48px 48px 0;
+	}
+}
+
+.edit-site-visual-editor__editor-canvas {
+	border-radius: 2px 2px 0 0;
+}
+
+.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;
+	}
+}

packages/edit-site/src/components/edit-template-part-menu-button/index.js

@@ -31,7 +31,7 @@ export default function EditTemplatePartMenuButton() {
 			);
 		}
 	}, [] );
-	const { setTemplatePart } = useDispatch( editSiteStore );
+	const { pushTemplatePart } = useDispatch( editSiteStore );
 
 	if ( ! selectedTemplatePart ) {
 		return null;
@@ -42,7 +42,7 @@ export default function EditTemplatePartMenuButton() {
 			{ ( { onClose } ) => (
 				<MenuItem
 					onClick={ () => {
-						setTemplatePart( selectedTemplatePart.id );
+						pushTemplatePart( selectedTemplatePart.id );
 						onClose();
 					} }
 				>

packages/edit-site/src/store/actions.js

@@ -122,7 +122,7 @@ export function* removeTemplate( templateId ) {
 /**
  * Returns an action object used to set a template part.
  *
- * @param {number} templatePartId The template part ID.
+ * @param {string} templatePartId The template part ID.
  *
  * @return {Object} Action object.
  */
@@ -133,6 +133,20 @@ export function setTemplatePart( templatePartId ) {
 	};
 }
 
+/**
+ * Returns an action object used to push a template part to navigation history.
+ *
+ * @param {string} templatePartId The template part ID.
+ *
+ * @return {Object} Action object.
+ */
+export function pushTemplatePart( templatePartId ) {
+	return {
+		type: 'PUSH_TEMPLATE_PART',
+		templatePartId,
+	};
+}
+
 /**
  * Updates the homeTemplateId state with the templateId of the page resolved
  * from the given path.
@@ -191,6 +205,15 @@ export function* setPage( page ) {
 	return templateId;
 }
 
+/**
+ * Go back to the current editing page.
+ */
+export function goBack() {
+	return {
+		type: 'GO_BACK',
+	};
+}
+
 /**
  * Displays the site homepage for editing in the editor.
  */

packages/edit-site/src/store/reducer.js

@@ -72,25 +72,39 @@ export function settings( state = {}, action ) {
  * Reducer keeping track of the currently edited Post Type,
  * Post Id and the context provided to fill the content of the block editor.
  *
- * @param {Object} state  Current state.
+ * @param {Array}  state  Current state history.
  * @param {Object} action Dispatched action.
  *
- * @return {Object} Updated state.
+ * @return {Array} Updated state.
  */
-export function editedPost( state = {}, action ) {
+export function editedPost( state = [], action ) {
 	switch ( action.type ) {
 		case 'SET_TEMPLATE':
 		case 'SET_PAGE':
-			return {
-				type: 'wp_template',
-				id: action.templateId,
-				page: action.page,
-			};
+			return [
+				{
+					type: 'wp_template',
+					id: action.templateId,
+					page: action.page,
+				},
+			];
 		case 'SET_TEMPLATE_PART':
-			return {
-				type: 'wp_template_part',
-				id: action.templatePartId,
-			};
+			return [
+				{
+					type: 'wp_template_part',
+					id: action.templatePartId,
+				},
+			];
+		case 'PUSH_TEMPLATE_PART':
+			return [
+				...state,
+				{
+					type: 'wp_template_part',
+					id: action.templatePartId,
+				},
+			];
+		case 'GO_BACK':
+			return state.slice( 0, -1 );
 	}
 
 	return state;

packages/edit-site/src/store/selectors.js

@@ -25,6 +25,10 @@ import {
 	isTemplateSuperseded,
 } from '../components/navigation-sidebar/navigation-panel/template-hierarchy';
 
+/**
+ * @typedef {'template'|'template_type'} TemplateType Template type.
+ */
+
 /**
  * Returns whether the given feature is enabled or not.
  *
@@ -110,26 +114,56 @@ export function getHomeTemplateId( state ) {
 	return state.homeTemplateId;
 }
 
+function getCurrentEditedPost( state ) {
+	return state.editedPost[ state.editedPost.length - 1 ] || {};
+}
+
+function getPreviousEditedPost( state ) {
+	return state.editedPost[ state.editedPost.length - 2 ] || {};
+}
+
 /**
  * Returns the current edited post type (wp_template or wp_template_part).
  *
  * @param {Object} state Global application state.
  *
- * @return {number?} Template ID.
+ * @return {TemplateType?} Template type.
  */
 export function getEditedPostType( state ) {
-	return state.editedPost.type;
+	return getCurrentEditedPost( state ).type;
 }
 
 /**
  * Returns the ID of the currently edited template or template part.
  *
  * @param {Object} state Global application state.
  *
- * @return {number?} Post ID.
+ * @return {string?} Post ID.
  */
 export function getEditedPostId( state ) {
-	return state.editedPost.id;
+	return getCurrentEditedPost( state ).id;
+}
+
+/**
+ * Returns the previous edited post type (wp_template or wp_template_part).
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {TemplateType?} Template type.
+ */
+export function getPreviousEditedPostType( state ) {
+	return getPreviousEditedPost( state ).type;
+}
+
+/**
+ * Returns the ID of the previous edited template or template part.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {string?} Post ID.
+ */
+export function getPreviousEditedPostId( state ) {
+	return getPreviousEditedPost( state ).id;
 }
 
 /**
@@ -140,7 +174,7 @@ export function getEditedPostId( state ) {
  * @return {Object} Page.
  */
 export function getPage( state ) {
-	return state.editedPost.page;
+	return getCurrentEditedPost( state ).page;
 }
 
 /**