diff --git a/packages/core-data/src/selectors.js b/packages/core-data/src/selectors.js index 80acd04cc15b12..3dad25c0794dfc 100644 --- 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 index 8c507f665c221f..b2122c946d3fba 100644 --- 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 index 907badf27de95d..d3d95f8d30b494 100644 --- 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 ( - ( - <> -
- { __( 'About' ) } -
- - - ) } - renderContent={ () => ( - <> - - - - ) } - /> + + { ( toolbarItemHTMLProps ) => { + return ( + ( + <> +
{ __( 'About' ) }
+ + + ) } + renderContent={ () => ( + <> + + + + ) } + /> + ); + } } +
); } diff --git a/packages/edit-post/src/components/header/template-title/style.scss b/packages/edit-post/src/components/header/template-title/style.scss index 40262e0573ee87..5403b3d08d9a28 100644 --- 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 {