spt: set template using post-title component

It implements a hacky solution to propagate the template title to the <PostTitle /> component, since it isn't possible to do it in thr current implementation of the component. I've created a PR, but in the meanwhile we can take this patch in order to give a quick solution. We can iterate later once the code PR is ship? WordPress/gutenberg#20609

apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/block-iframe-preview.js

@@ -84,6 +84,7 @@ const BlockFramePreview = ( {
 	blocks,
 	settings,
 	setTimeout = noop,
+	title,
 } ) => {
 	const frameContainerRef = useRef();
 	const renderedBlocksRef = useRef();
@@ -121,6 +122,21 @@ const BlockFramePreview = ( {
 		} );
 	}, [ viewportWidth ] );
 
+	// Set template title.
+	useEffect( () => {
+		const iframeBody = get( iframeRef, [ 'current', 'contentDocument', 'body' ] );
+		if ( ! iframeBody ) {
+			return;
+		}
+
+		const templateTitle = iframeBody.querySelector(
+			'.editor-post-title .editor-post-title__input'
+		);
+		if ( templateTitle ) {
+			templateTitle.value = title;
+		}
+	}, [ recomputeBlockListKey, iframeRef, title ] );
+
 	// Populate iFrame styles.
 	useEffect( () => {
 		setTimeout( () => {

apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/block-preview.js

@@ -11,6 +11,7 @@
  */
 import { BlockEditorProvider, BlockList } from '@wordpress/block-editor';
 import { Disabled } from '@wordpress/components';
+import { PostTitle } from '@wordpress/editor';
 
 // Exists as a pass through component to simplify automatted testing of
 // components which need to `BlockEditorProvider`. Setting up JSDom to handle
@@ -21,6 +22,7 @@ export default function( { blocks, settings, recomputeBlockListKey } ) {
 	return (
 		<BlockEditorProvider value={ blocks } settings={ settings }>
 			<Disabled key={ recomputeBlockListKey }>
+				<PostTitle />
 				<BlockList />
 			</Disabled>
 		</BlockEditorProvider>

apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector-preview.js

@@ -10,7 +10,7 @@ import { __ } from '@wordpress/i18n';
  */
 import BlockIframePreview from './block-iframe-preview';
 
-const TemplateSelectorPreview = ( { blocks = [], viewportWidth } ) => {
+const TemplateSelectorPreview = ( { blocks = [], viewportWidth, title } ) => {
 	const noBlocks = ! blocks.length;
 	return (
 		/* eslint-disable wpcalypso/jsx-classname-namespace */
@@ -26,7 +26,7 @@ const TemplateSelectorPreview = ( { blocks = [], viewportWidth } ) => {
 			{ /* Always render preview iframe to ensure it's ready to populate with Blocks. */
 			/* Without this some browsers will experience a noticavle delay
 			/* before Blocks are populated into the iframe. */ }
-			<BlockIframePreview blocks={ blocks } viewportWidth={ viewportWidth } />
+			<BlockIframePreview blocks={ blocks } viewportWidth={ viewportWidth } title={ title } />
 		</div>
 		/* eslint-enable wpcalypso/jsx-classname-namespace */
 	);