diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/edit-template.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/edit-template.js index a9c1a1110bc13..bf4645850c9bf 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/edit-template.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/edit-template.js @@ -8,6 +8,7 @@ import { BlockContextProvider, BlockPreview } from '@wordpress/block-editor'; import { Button, __experimentalVStack as VStack } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { store as coreStore } from '@wordpress/core-data'; +import { parse } from '@wordpress/blocks'; /** * Internal dependencies @@ -15,7 +16,7 @@ import { store as coreStore } from '@wordpress/core-data'; import { store as editSiteStore } from '../../../store'; export default function EditTemplate() { - const { context, hasResolved, title, blocks } = useSelect( ( select ) => { + const { context, hasResolved, title, content } = useSelect( ( select ) => { const { getEditedPostContext, getEditedPostType, getEditedPostId } = select( editSiteStore ); const { getEditedEntityRecord, hasFinishedResolution } = @@ -34,7 +35,7 @@ export default function EditTemplate() { queryArgs ), title: template?.title, - blocks: template?.blocks, + content: template?.content, }; }, [] ); @@ -45,6 +46,12 @@ export default function EditTemplate() { [ context ] ); + const blocks = useMemo( + () => + content && typeof content !== 'function' ? parse( content ) : [], + [ content ] + ); + if ( ! hasResolved ) { return null; } diff --git a/test/e2e/specs/site-editor/pages.spec.js b/test/e2e/specs/site-editor/pages.spec.js index 8c63036a60ebb..5676132824154 100644 --- a/test/e2e/specs/site-editor/pages.spec.js +++ b/test/e2e/specs/site-editor/pages.spec.js @@ -79,6 +79,11 @@ test.describe( 'Pages', () => { // Switch to template editing focus. await editor.openDocumentSettingsSidebar(); + await expect( + page.locator( + '.edit-site-page-panels__edit-template-preview iframe' + ) + ).toBeVisible(); await page .getByRole( 'region', { name: 'Editor settings' } ) .getByRole( 'button', { name: 'Edit template' } )