Fix: bug on template name display; Update: template end to end test. (#…

…32035)
WordPress · May 20, 2021 · 82876a0 · 82876a0
1 parent b30ddf8
commit 82876a0
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 37 deletions.
diff --git a/packages/core-data/src/selectors.js b/packages/core-data/src/selectors.js
@@ -730,5 +730,14 @@ export function __experimentalGetTemplateForLink( state, link ) {
 		'find-template': link,
 	} );
 
-	return records?.length ? records[ 0 ] : null;
+	const template = records?.length ? records[ 0 ] : null;
+	if ( template ) {
+		return getEditedEntityRecord(
+			state,
+			'postType',
+			'wp_template',
+			template.id
+		);
+	}
+	return template;
 }
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
@@ -48,10 +48,10 @@ const switchToTemplateMode = async () => {
 		'//*[contains(@class, "components-snackbar")]/*[text()="Editing template. Changes made here affect all posts and pages that use the template."]'
 	);
 	const title = await page.$eval(
-		'.edit-post-template-title',
+		'.edit-post-template-top-area',
 		( el ) => el.innerText
 	);
-	expect( title ).toContain( 'Editing template:' );
+	expect( title ).toContain( 'About\n' );
 
 	await disableTemplateWelcomeGuide();
 };
@@ -80,7 +80,7 @@ const createNewTemplate = async ( templateName ) => {
 	await disableTemplateWelcomeGuide();
 };
 
-describe.skip( 'Post Editor Template mode', () => {
+describe( 'Post Editor Template mode', () => {
 	beforeAll( async () => {
 		await trashAllPosts( 'wp_template' );
 		await trashAllPosts( 'wp_template_part' );

diff --git a/packages/edit-post/src/components/header/template-title/index.js b/packages/edit-post/src/components/header/template-title/index.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
-import { Button, Dropdown } from '@wordpress/components';
+import { Dropdown, ToolbarItem, Button } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -36,32 +36,37 @@ function TemplateTitle() {
 	}
 
 	return (
-		<Dropdown
-			position="bottom center"
-			className="edit-post-template-top-area"
-			contentClassName="edit-post-template-top-area__popover"
-			renderToggle={ ( { onToggle } ) => (
-				<>
-					<div className="edit-post-template-title">
-						{ __( 'About' ) }
-					</div>
-					<Button
-						isSmall
-						isTertiary
-						onClick={ onToggle }
-						aria-label={ __( 'Template Options' ) }
-					>
-						{ templateTitle }
-					</Button>
-				</>
-			) }
-			renderContent={ () => (
-				<>
-					<EditTemplateTitle />
-					<DeleteTemplate />
-				</>
-			) }
-		/>
+		<ToolbarItem>
+			{ ( toolbarItemHTMLProps ) => {
+				return (
+					<Dropdown
+						className="edit-post-template-top-area"
+						position="bottom center"
+						contentClassName="edit-post-template-top-area__popover"
+						renderToggle={ ( { onToggle } ) => (
+							<>
+								<div>{ __( 'About' ) }</div>
+								<Button
+									{ ...toolbarItemHTMLProps }
+									isSmall
+									isTertiary
+									onClick={ onToggle }
+									aria-label={ __( 'Template Options' ) }
+								>
+									{ templateTitle }
+								</Button>
+							</>
+						) }
+						renderContent={ () => (
+							<>
+								<EditTemplateTitle />
+								<DeleteTemplate />
+							</>
+						) }
+					/>
+				);
+			} }
+		</ToolbarItem>
 	);
 }
 

diff --git a/packages/edit-post/src/components/header/template-title/style.scss b/packages/edit-post/src/components/header/template-title/style.scss
@@ -1,15 +1,12 @@
-.edit-post-template-title {
-	display: inline-flex;
-	flex-grow: 1;
-	justify-content: center;
-}
-
 .edit-post-template-top-area {
 	display: flex;
 	flex-direction: column;
 	align-content: space-between;
 	width: 100%;
 	align-items: center;
+	.components-button.is-small {
+		height: $button-size-small;
+	}
 }
 
 .edit-post-template-top-area__popover .components-popover__content {