From 4ab6f3b3f13bfa1e1bd0c81bfd128e7f49c651ca Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 15 Apr 2021 14:12:59 +0100
Subject: [PATCH] Replace the document tab with a template tab in template mode
 (#30860)

---
 .../sidebar/settings-header/index.js          | 59 +++++++++++------
 .../sidebar/settings-sidebar/index.js         | 63 +++++++++++--------
 .../sidebar/template-summary/index.js         | 41 ++++++++++++
 .../sidebar/template-summary/style.scss       |  4 ++
 packages/edit-post/src/style.scss             |  1 +
 5 files changed, 124 insertions(+), 44 deletions(-)
 create mode 100644 packages/edit-post/src/components/sidebar/template-summary/index.js
 create mode 100644 packages/edit-post/src/components/sidebar/template-summary/style.scss

diff --git a/packages/edit-post/src/components/sidebar/settings-header/index.js b/packages/edit-post/src/components/sidebar/settings-header/index.js
index b614ec0ebaf102..3f5a03ad901345 100644
--- a/packages/edit-post/src/components/sidebar/settings-header/index.js
+++ b/packages/edit-post/src/components/sidebar/settings-header/index.js
@@ -16,18 +16,20 @@ const SettingsHeader = ( { sidebarName } ) => {
 		openGeneralSidebar( 'edit-post/document' );
 	const openBlockSettings = () => openGeneralSidebar( 'edit-post/block' );
 
-	const documentLabel = useSelect( ( select ) => {
+	const { documentLabel, isTemplateMode } = useSelect( ( select ) => {
 		const currentPostType = select( 'core/editor' ).getCurrentPostType();
 		const postType = select( 'core' ).getPostType( currentPostType );
 
-		return (
-			// Disable reason: Post type labels object is shaped like this.
-			// eslint-disable-next-line camelcase
-			postType?.labels?.singular_name ??
-			// translators: Default label for the Document sidebar tab, not selected.
-			__( 'Document' )
-		);
-	} );
+		return {
+			documentLabel:
+				// Disable reason: Post type labels object is shaped like this.
+				// eslint-disable-next-line camelcase
+				postType?.labels?.singular_name ??
+				// translators: Default label for the Document sidebar tab, not selected.
+				__( 'Document' ),
+			isTemplateMode: select( editPostStore ).isEditingTemplate(),
+		};
+	}, [] );
 
 	const [ documentAriaLabel, documentActiveClass ] =
 		sidebarName === 'edit-post/document'
@@ -42,19 +44,38 @@ const SettingsHeader = ( { sidebarName } ) => {
 			: // translators: ARIA label for the Block Settings Sidebar tab, not selected.
 			  [ __( 'Block' ), '' ];
 
+	const [ templateAriaLabel, templateActiveClass ] =
+		sidebarName === 'edit-post/document'
+			? [ __( 'Template (selected)' ), 'is-active' ]
+			: [ __( 'Template' ), '' ];
+
 	/* Use a list so screen readers will announce how many tabs there are. */
 	return (
 		<ul>
-			<li>
-				<Button
-					onClick={ openDocumentSettings }
-					className={ `edit-post-sidebar__panel-tab ${ documentActiveClass }` }
-					aria-label={ documentAriaLabel }
-					data-label={ documentLabel }
-				>
-					{ documentLabel }
-				</Button>
-			</li>
+			{ ! isTemplateMode && (
+				<li>
+					<Button
+						onClick={ openDocumentSettings }
+						className={ `edit-post-sidebar__panel-tab ${ documentActiveClass }` }
+						aria-label={ documentAriaLabel }
+						data-label={ documentLabel }
+					>
+						{ documentLabel }
+					</Button>
+				</li>
+			) }
+			{ isTemplateMode && (
+				<li>
+					<Button
+						onClick={ openDocumentSettings }
+						className={ `edit-post-sidebar__panel-tab ${ templateActiveClass }` }
+						aria-label={ templateAriaLabel }
+						data-label={ __( 'Template' ) }
+					>
+						{ __( 'Template' ) }
+					</Button>
+				</li>
+			) }
 			<li>
 				<Button
 					onClick={ openBlockSettings }
diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
index eb4f5b37135d99..87996b7fa98ddd 100644
--- a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
+++ b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
@@ -21,7 +21,8 @@ import DiscussionPanel from '../discussion-panel';
 import PageAttributes from '../page-attributes';
 import MetaBoxes from '../../meta-boxes';
 import PluginDocumentSettingPanel from '../plugin-document-setting-panel';
-import PluginSidebarEditPost from '../../sidebar/plugin-sidebar';
+import PluginSidebarEditPost from '../plugin-sidebar';
+import TemplateSummary from '../template-summary';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { store as editPostStore } from '../../../store';
@@ -32,30 +33,39 @@ const SIDEBAR_ACTIVE_BY_DEFAULT = Platform.select( {
 } );
 
 const SettingsSidebar = () => {
-	const { sidebarName, keyboardShortcut } = useSelect( ( select ) => {
-		// The settings sidebar is used by the edit-post/document and edit-post/block sidebars.
-		// sidebarName represents the sidebar that is active or that should be active when the SettingsSidebar toggle button is pressed.
-		// If one of the two sidebars is active the component will contain the content of that sidebar.
-		// When neither of the the two sidebars is active we can not simply return null, because the PluginSidebarEditPost
-		// component, besides being used to render the sidebar, also renders the toggle button. In that case sidebarName
-		// should contain the sidebar that will be active when the toggle button is pressed. If a block
-		// is selected, that should be edit-post/block otherwise it's edit-post/document.
-		let sidebar = select( interfaceStore ).getActiveComplementaryArea(
-			editPostStore.name
-		);
-		if (
-			! [ 'edit-post/document', 'edit-post/block' ].includes( sidebar )
-		) {
-			if ( select( 'core/block-editor' ).getBlockSelectionStart() ) {
-				sidebar = 'edit-post/block';
+	const { sidebarName, keyboardShortcut, isTemplateMode } = useSelect(
+		( select ) => {
+			// The settings sidebar is used by the edit-post/document and edit-post/block sidebars.
+			// sidebarName represents the sidebar that is active or that should be active when the SettingsSidebar toggle button is pressed.
+			// If one of the two sidebars is active the component will contain the content of that sidebar.
+			// When neither of the the two sidebars is active we can not simply return null, because the PluginSidebarEditPost
+			// component, besides being used to render the sidebar, also renders the toggle button. In that case sidebarName
+			// should contain the sidebar that will be active when the toggle button is pressed. If a block
+			// is selected, that should be edit-post/block otherwise it's edit-post/document.
+			let sidebar = select( interfaceStore ).getActiveComplementaryArea(
+				editPostStore.name
+			);
+			if (
+				! [ 'edit-post/document', 'edit-post/block' ].includes(
+					sidebar
+				)
+			) {
+				if ( select( 'core/block-editor' ).getBlockSelectionStart() ) {
+					sidebar = 'edit-post/block';
+				}
+				sidebar = 'edit-post/document';
 			}
-			sidebar = 'edit-post/document';
-		}
-		const shortcut = select(
-			keyboardShortcutsStore
-		).getShortcutRepresentation( 'core/edit-post/toggle-sidebar' );
-		return { sidebarName: sidebar, keyboardShortcut: shortcut };
-	}, [] );
+			const shortcut = select(
+				keyboardShortcutsStore
+			).getShortcutRepresentation( 'core/edit-post/toggle-sidebar' );
+			return {
+				sidebarName: sidebar,
+				keyboardShortcut: shortcut,
+				isTemplateMode: select( editPostStore ).isEditingTemplate(),
+			};
+		},
+		[]
+	);
 
 	return (
 		<PluginSidebarEditPost
@@ -69,7 +79,7 @@ const SettingsSidebar = () => {
 			icon={ cog }
 			isActiveByDefault={ SIDEBAR_ACTIVE_BY_DEFAULT }
 		>
-			{ sidebarName === 'edit-post/document' && (
+			{ ! isTemplateMode && sidebarName === 'edit-post/document' && (
 				<>
 					<PostStatus />
 					<PluginDocumentSettingPanel.Slot />
@@ -83,6 +93,9 @@ const SettingsSidebar = () => {
 					<MetaBoxes location="side" />
 				</>
 			) }
+			{ isTemplateMode && sidebarName === 'edit-post/document' && (
+				<TemplateSummary />
+			) }
 			{ sidebarName === 'edit-post/block' && <BlockInspector /> }
 		</PluginSidebarEditPost>
 	);
diff --git a/packages/edit-post/src/components/sidebar/template-summary/index.js b/packages/edit-post/src/components/sidebar/template-summary/index.js
new file mode 100644
index 00000000000000..ec29d428f0ac84
--- /dev/null
+++ b/packages/edit-post/src/components/sidebar/template-summary/index.js
@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { Icon, layout } from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
+import { Flex, FlexItem, FlexBlock, PanelBody } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { store as editPostStore } from '../../../store';
+
+function TemplateSummary() {
+	const template = useSelect( ( select ) => {
+		const { getEditedPostTemplate } = select( editPostStore );
+		return getEditedPostTemplate();
+	}, [] );
+
+	if ( ! template ) {
+		return null;
+	}
+
+	return (
+		<PanelBody>
+			<Flex align="flex-start">
+				<FlexItem>
+					<Icon icon={ layout } />
+				</FlexItem>
+
+				<FlexBlock>
+					<h2 className="edit-post-template-summary__title">
+						{ template?.title?.raw || template?.slug }
+					</h2>
+					<p>{ template?.description }</p>
+				</FlexBlock>
+			</Flex>
+		</PanelBody>
+	);
+}
+
+export default TemplateSummary;
diff --git a/packages/edit-post/src/components/sidebar/template-summary/style.scss b/packages/edit-post/src/components/sidebar/template-summary/style.scss
new file mode 100644
index 00000000000000..993c5bcbbc7adf
--- /dev/null
+++ b/packages/edit-post/src/components/sidebar/template-summary/style.scss
@@ -0,0 +1,4 @@
+h2.edit-post-template-summary__title {
+	margin: 0;
+	line-height: $icon-size;
+}
diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
index 22ed97d362d86c..bf5d7b578570ae 100644
--- a/packages/edit-post/src/style.scss
+++ b/packages/edit-post/src/style.scss
@@ -19,6 +19,7 @@
 @import "./components/sidebar/post-template/style.scss";
 @import "./components/sidebar/post-visibility/style.scss";
 @import "./components/sidebar/settings-header/style.scss";
+@import "./components/sidebar/template-summary/style.scss";
 @import "./components/text-editor/style.scss";
 @import "./components/visual-editor/style.scss";
 @import "./components/welcome-guide/style.scss";