Move the template mode edit and new links to the post attributes panel (

#30900)
WordPress · Apr 21, 2021 · 1fd4a92 · 1fd4a92
1 parent 79707b4
commit 1fd4a92
Show file tree

Hide file tree

Showing 14 changed files with 207 additions and 149 deletions.
diff --git a/packages/e2e-tests/specs/experiments/post-editor-template-mode.test.js b/packages/e2e-tests/specs/experiments/post-editor-template-mode.test.js
@@ -11,6 +11,13 @@ import {
 	openDocumentSettingsSidebar,
 } from '@wordpress/e2e-test-utils';
 
+const openSidebarPanelWithTitle = async ( title ) => {
+	const panel = await page.waitForXPath(
+		`//div[contains(@class,"edit-post-sidebar")]//button[@class="components-button components-panel__body-toggle"][contains(text(),"${ title }")]`
+	);
+	await panel.click();
+};
+
 describe( 'Post Editor Template mode', () => {
 	beforeAll( async () => {
 		await trashAllPosts( 'wp_template' );
@@ -42,8 +49,9 @@ describe( 'Post Editor Template mode', () => {
 
 		// Switch to template mode.
 		await openDocumentSettingsSidebar();
+		await openSidebarPanelWithTitle( 'Template' );
 		const editTemplateXPath =
-			"//*[contains(@class, 'edit-post-post-template__actions')]//button[contains(text(), 'Edit')]";
+			"//*[contains(@class, 'edit-post-template__actions')]//button[contains(text(), 'Edit')]";
 		const switchLink = await page.waitForXPath( editTemplateXPath );
 		await switchLink.click();
 
@@ -101,14 +109,15 @@ describe( 'Post Editor Template mode', () => {
 
 		// Create a new custom template.
 		await openDocumentSettingsSidebar();
+		await openSidebarPanelWithTitle( 'Template' );
 		const newTemplateXPath =
-			"//*[contains(@class, 'edit-post-post-template__actions')]//button[contains(text(), 'New')]";
+			"//*[contains(@class, 'edit-post-template__actions')]//button[contains(text(), 'New')]";
 		const newButton = await page.waitForXPath( newTemplateXPath );
 		await newButton.click();
 
 		// Fill the template title and submit.
 		const templateNameInputSelector =
-			'.edit-post-post-template__modal .components-text-control__input';
+			'.edit-post-template__modal .components-text-control__input';
 		await page.click( templateNameInputSelector );
 		await page.keyboard.type( 'Blank Template' );
 		await page.keyboard.press( 'Enter' );

diff --git a/packages/edit-post/src/components/preferences-modal/index.js b/packages/edit-post/src/components/preferences-modal/index.js
@@ -185,6 +185,12 @@ export default function PreferencesModal() {
 									panelName="post-link"
 								/>
 							) }
+							{ isViewable && (
+								<EnablePanelOption
+									label={ __( 'Template' ) }
+									panelName="template"
+								/>
+							) }
 							<PostTaxonomies
 								taxonomyWrapper={ ( content, taxonomy ) => (
 									<EnablePanelOption

diff --git a/packages/edit-post/src/components/sidebar/page-attributes/index.js b/packages/edit-post/src/components/sidebar/page-attributes/index.js
@@ -8,14 +8,14 @@ import { get, partial } from 'lodash';
  */
 import { __ } from '@wordpress/i18n';
 import { PanelBody, PanelRow } from '@wordpress/components';
-import { compose } from '@wordpress/compose';
 import {
+	store as editorStore,
 	PageAttributesCheck,
 	PageAttributesOrder,
 	PageAttributesParent,
-	PageTemplate,
 } from '@wordpress/editor';
-import { withSelect, withDispatch } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -27,15 +27,28 @@ import { store as editPostStore } from '../../../store';
  */
 const PANEL_NAME = 'page-attributes';
 
-export function PageAttributes( {
-	isEnabled,
-	isOpened,
-	onTogglePanel,
-	postType,
-} ) {
+export function PageAttributes() {
+	const { isEnabled, isOpened, postType } = useSelect( ( select ) => {
+		const { getEditedPostAttribute } = select( editorStore );
+		const { isEditorPanelEnabled, isEditorPanelOpened } = select(
+			editPostStore
+		);
+		const { getPostType } = select( coreStore );
+		return {
+			isEnabled: isEditorPanelEnabled( PANEL_NAME ),
+			isOpened: isEditorPanelOpened( PANEL_NAME ),
+			postType: getPostType( getEditedPostAttribute( 'type' ) ),
+		};
+	}, [] );
+
+	const { toggleEditorPanelOpened } = useDispatch( editPostStore );
+
 	if ( ! isEnabled || ! postType ) {
 		return null;
 	}
+
+	const onTogglePanel = partial( toggleEditorPanelOpened, PANEL_NAME );
+
 	return (
 		<PageAttributesCheck>
 			<PanelBody
@@ -47,7 +60,6 @@ export function PageAttributes( {
 				opened={ isOpened }
 				onToggle={ onTogglePanel }
 			>
-				<PageTemplate />
 				<PageAttributesParent />
 				<PanelRow>
 					<PageAttributesOrder />
@@ -57,25 +69,4 @@ export function PageAttributes( {
 	);
 }
 
-const applyWithSelect = withSelect( ( select ) => {
-	const { getEditedPostAttribute } = select( 'core/editor' );
-	const { isEditorPanelEnabled, isEditorPanelOpened } = select(
-		editPostStore
-	);
-	const { getPostType } = select( 'core' );
-	return {
-		isEnabled: isEditorPanelEnabled( PANEL_NAME ),
-		isOpened: isEditorPanelOpened( PANEL_NAME ),
-		postType: getPostType( getEditedPostAttribute( 'type' ) ),
-	};
-} );
-
-const applyWithDispatch = withDispatch( ( dispatch ) => {
-	const { toggleEditorPanelOpened } = dispatch( editPostStore );
-
-	return {
-		onTogglePanel: partial( toggleEditorPanelOpened, PANEL_NAME ),
-	};
-} );
-
-export default compose( applyWithSelect, applyWithDispatch )( PageAttributes );
+export default PageAttributes;
diff --git a/packages/edit-post/src/components/sidebar/post-status/index.js b/packages/edit-post/src/components/sidebar/post-status/index.js
@@ -18,7 +18,6 @@ import PostSlug from '../post-slug';
 import PostFormat from '../post-format';
 import PostPendingStatus from '../post-pending-status';
 import PluginPostStatusInfo from '../plugin-post-status-info';
-import PostTemplate from '../post-template';
 import { store as editPostStore } from '../../../store';
 
 /**
@@ -37,7 +36,6 @@ function PostStatus( { isOpened, onTogglePanel } ) {
 			<PluginPostStatusInfo.Slot>
 				{ ( fills ) => (
 					<>
-						<PostTemplate />
 						<PostVisibility />
 						<PostSchedule />
 						<PostFormat />

diff --git a/packages/edit-post/src/components/sidebar/post-template/style.scss b/packages/edit-post/src/components/sidebar/post-template/style.scss
diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
@@ -22,6 +22,7 @@ import PageAttributes from '../page-attributes';
 import MetaBoxes from '../../meta-boxes';
 import PluginDocumentSettingPanel from '../plugin-document-setting-panel';
 import PluginSidebarEditPost from '../plugin-sidebar';
+import Template from '../template';
 import TemplateSummary from '../template-summary';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
@@ -82,6 +83,7 @@ const SettingsSidebar = () => {
 			{ ! isTemplateMode && sidebarName === 'edit-post/document' && (
 				<>
 					<PostStatus />
+					<Template />
 					<PluginDocumentSettingPanel.Slot />
 					<LastRevision />
 					<PostLink />

diff --git a/...components/sidebar/post-template/index.js → ...rc/components/sidebar/template/actions.js b/...components/sidebar/post-template/index.js → ...rc/components/sidebar/template/actions.js
@@ -8,7 +8,6 @@ import { kebabCase } from 'lodash';
  */
 import { __ } from '@wordpress/i18n';
 import {
-	PanelRow,
 	Button,
 	Modal,
 	TextControl,
@@ -26,73 +25,46 @@ import { store as coreStore } from '@wordpress/core-data';
 import { store as editPostStore } from '../../../store';
 import { createBlock, serialize } from '@wordpress/blocks';
 
-function PostTemplate() {
+function PostTemplateActions() {
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const [ title, setTitle ] = useState( '' );
-	const { template, isEditing, supportsTemplateMode } = useSelect(
-		( select ) => {
-			const { getCurrentPostType } = select( editorStore );
-			const { getPostType } = select( coreStore );
-			const { isEditingTemplate, getEditedPostTemplate } = select(
-				editPostStore
-			);
+	const { template, supportsTemplateMode } = useSelect( ( select ) => {
+		const { getCurrentPostType } = select( editorStore );
+		const { getPostType } = select( coreStore );
+		const { getEditedPostTemplate } = select( editPostStore );
 
-			const isViewable =
-				getPostType( getCurrentPostType() )?.viewable ?? false;
-			const _supportsTemplateMode =
-				select( editorStore ).getEditorSettings()
-					.supportsTemplateMode && isViewable;
+		const isViewable =
+			getPostType( getCurrentPostType() )?.viewable ?? false;
+		const _supportsTemplateMode =
+			select( editorStore ).getEditorSettings().supportsTemplateMode &&
+			isViewable;
 
-			return {
-				template: _supportsTemplateMode && getEditedPostTemplate(),
-				isEditing: isEditingTemplate(),
-				supportsTemplateMode: _supportsTemplateMode,
-			};
-		},
-		[]
-	);
+		return {
+			template: _supportsTemplateMode && getEditedPostTemplate(),
+			supportsTemplateMode: _supportsTemplateMode,
+		};
+	}, [] );
 	const { __unstableSwitchToTemplateMode } = useDispatch( editPostStore );
 
 	if ( ! supportsTemplateMode ) {
 		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>{ templateTitle }</div>
-					<div className="edit-post-post-template__actions">
-						{ !! template && (
-							<Button
-								isLink
-								onClick={ () =>
-									__unstableSwitchToTemplateMode()
-								}
-							>
-								{ __( 'Edit' ) }
-							</Button>
-						) }
-						<Button isLink onClick={ () => setIsModalOpen( true ) }>
-							{ __( 'New' ) }
-						</Button>
-					</div>
-				</div>
-			) }
-			{ isEditing && (
-				<span className="edit-post-post-template__value">
-					{ templateTitle }
-				</span>
-			) }
+		<>
+			<div className="edit-post-template__actions">
+				{ !! template && (
+					<Button
+						isLink
+						onClick={ () => __unstableSwitchToTemplateMode() }
+					>
+						{ __( 'Edit' ) }
+					</Button>
+				) }
+				<Button isLink onClick={ () => setIsModalOpen( true ) }>
+					{ __( 'New' ) }
+				</Button>
+			</div>
 			{ isModalOpen && (
 				<Modal
 					title={ __( 'Create a custom template' ) }
@@ -101,7 +73,7 @@ function PostTemplate() {
 						setIsModalOpen( false );
 						setTitle( '' );
 					} }
-					overlayClassName="edit-post-post-template__modal"
+					overlayClassName="edit-post-template__modal"
 				>
 					<form
 						onSubmit={ ( event ) => {
@@ -153,8 +125,8 @@ function PostTemplate() {
 					</form>
 				</Modal>
 			) }
-		</PanelRow>
+		</>
 	);
 }
 
-export default PostTemplate;
+export default PostTemplateActions;