Site Editor: Fix BlockPreview in Template panel when editing a page (#…

…53550)

packages/edit-site/src/components/sidebar-edit-mode/page-panels/edit-template.js

@@ -8,14 +8,15 @@ 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
  */
 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;
 	}

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' } )