SPT: Set template title in large preview (#39831)

* 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 * spt: refact adding setTemplateTitle * spt: apply delay for the first-rendering cycle * spt: remove core/heading teplate title from blocks * spt: add padding top to the template title * spt: add missing template title classname * Update apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/block-iframe-preview.js Improve jsdoc. Props to @getdave :-) Co-Authored-By: Dave Smith <[email protected]> * Update apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/block-iframe-preview.js Improve jsdoc. Props to @getdave Co-Authored-By: Dave Smith <[email protected]> * Update apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/styles/starter-page-templates-editor.scss Set the CSS class name more targetted to the SPT scope. Co-Authored-By: Dave Smith <[email protected]> * spt: reduce redice hook effect requeriments * spt: remove setTimeout hack * spt: always render preview content * spt: remove unneeded id attribute * spt: removes CSS hack * spt: improve doc Co-authored-by: Dave Smith <[email protected]>
Automattic · Mar 4, 2020 · dccfbd3 · dccfbd3
1 parent 98e415c
commit dccfbd3
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 35 deletions.
diff --git a/...ting-plugin/starter-page-templates/page-template-modal/components/block-iframe-preview.js b/...ting-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,31 @@ const BlockFramePreview = ( {
 		} );
 	}, [ viewportWidth ] );
 
+	/*
+	 * Temporarily manually set the PostTitle from DOM.
+	 * It isn't currently possible to manually force the `<PostTitle />` component
+	 * to render a title provided as a prop. A Core PR will rectify this (see below).
+	 * Until then we use direct DOM manipulation to set the post title.
+	 *
+	 * See: https://github.com/WordPress/gutenberg/pull/20609/
+	 */
+	useEffect( () => {
+		const iframeBody = get( iframeRef, [ 'current', 'contentDocument', 'body' ] );
+		if ( ! iframeBody ) {
+			return;
+		}
+
+		const templateTitle = iframeBody.querySelector(
+			'.editor-post-title .editor-post-title__input'
+		);
+
+		if ( ! templateTitle ) {
+			return;
+		}
+
+		templateTitle.value = title;
+	}, [ recomputeBlockListKey ] );
+
 	// Populate iFrame styles.
 	useEffect( () => {
 		setTimeout( () => {
@@ -183,17 +209,15 @@ const BlockFramePreview = ( {
 				style={ style }
 			/>
 
-			<div ref={ renderedBlocksRef } className="block-editor" id="rendered-blocks">
+			<div ref={ renderedBlocksRef } className="block-editor">
 				<div className="edit-post-visual-editor">
 					<div className="editor-styles-wrapper">
 						<div className="editor-writing-flow">
-							{ blocks && blocks.length ? (
-								<CustomBlockPreview
-									blocks={ renderedBlocks }
-									settings={ settings }
-									recomputeBlockListKey={ recomputeBlockListKey }
-								/>
-							) : null }
+							<CustomBlockPreview
+								blocks={ renderedBlocks }
+								settings={ settings }
+								recomputeBlockListKey={ recomputeBlockListKey }
+							/>
 						</div>
 					</div>
 				</div>

diff --git a/...ite-editing-plugin/starter-page-templates/page-template-modal/components/block-preview.js b/...ite-editing-plugin/starter-page-templates/page-template-modal/components/block-preview.js
@@ -11,18 +11,24 @@
  */
 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
 // and mock the entire Block Editor isn't useful and is difficult for testing.
 // Therefore this component exists to simplify mocking out the Block Editor
 // when under test conditions.
 export default function( { blocks, settings, recomputeBlockListKey } ) {
+	/* eslint-disable wpcalypso/jsx-classname-namespace */
 	return (
 		<BlockEditorProvider value={ blocks } settings={ settings }>
 			<Disabled key={ recomputeBlockListKey }>
+				<div className="block-iframe-preview__template-title">
+					<PostTitle />
+				</div>
 				<BlockList />
 			</Disabled>
 		</BlockEditorProvider>
 	);
+	/* eslint-enable wpcalypso/jsx-classname-namespace */
 }
diff --git a/...plugin/starter-page-templates/page-template-modal/components/template-selector-preview.js b/...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 */
 	);

diff --git a/...site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/index.js b/...site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/index.js
@@ -10,7 +10,7 @@ import { compose } from '@wordpress/compose';
 import { Button, Modal, Spinner, IconButton } from '@wordpress/components';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { Component } from '@wordpress/element';
-import { parse as parseBlocks, createBlock } from '@wordpress/blocks';
+import { parse as parseBlocks } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -43,21 +43,9 @@ class PageTemplateModal extends Component {
 	getBlocksByTemplateSlugs = memoize( templates =>
 		reduce(
 			templates,
-			( prev, { slug, content, title } ) => {
+			( prev, { slug, content } ) => {
 				prev[ slug ] = content
-					? [
-							/*
-							 * Let's add the page title as a heading block.
-							 * It will be remove when inserting the template
-							 * blocks into the editor.
-							 */
-							createBlock( 'core/heading', {
-								content: title,
-								align: 'center',
-								level: 1,
-							} ),
-							...parseBlocks( replacePlaceholders( content, this.props.siteInformation ) ),
-					  ]
+					? parseBlocks( replacePlaceholders( content, this.props.siteInformation ) )
 					: [];
 				return prev;
 			},
@@ -175,9 +163,6 @@ class PageTemplateModal extends Component {
 		// Load content.
 		const blocks = this.getBlocksForSelection( slug );
 
-		// Let's pull the title before to insert blocks in the editor.
-		blocks.shift();
-
 		// Only overwrite the page title if the template is not one of the Homepage Layouts
 		const title = isHomepageTemplate ? null : this.getTitleByTemplateSlug( slug );
 

diff --git a/...ugin/starter-page-templates/page-template-modal/styles/starter-page-templates-editor.scss b/...ugin/starter-page-templates/page-template-modal/styles/starter-page-templates-editor.scss
@@ -381,7 +381,7 @@ body.admin-bar:not( .is-fullscreen-mode ) .page-template-modal-screen-overlay {
 .sidebar-modal-opener__warning-options {
 	float: right;
 	margin-top: 20px;
-	
+
 	.components-button {
 		margin-left: 12px;
 	}
@@ -439,14 +439,14 @@ body.admin-bar:not( .is-fullscreen-mode ) .page-template-modal-screen-overlay {
 	}
 
 	// Manual CSS Overrides. Remove after better solutions are in place.
-	
+
 	// Removes empty paragraph placeholders, i.e. "Write Title..."
 	[data-type='core/paragraph'] [data-rich-text-placeholder] {
 		display: none;
 	}
 
 	/*
-	* Fixes jetpack .wp-block-jetpack-slideshow styles, as the /wp-content/plugins/jetpack/_inc/blocks/vendors~swiper.[hash].css 
+	* Fixes jetpack .wp-block-jetpack-slideshow styles, as the /wp-content/plugins/jetpack/_inc/blocks/vendors~swiper.[hash].css
 	* file is loaded on block insert, not on page load. After the iframe is grabbing these styles, we can remove this code.
 	*/
 	.swiper-wrapper {
@@ -475,9 +475,8 @@ body.admin-bar:not( .is-fullscreen-mode ) .page-template-modal-screen-overlay {
 		}
 	}
 
-	// Fixes a rendering bug where the margins of the top/bottom blocks weren't contained in the iframe body
-	// For details see issue #39799
-	.block-editor-block-list__layout {
-		overflow: hidden;
+	// Tweak template title (post-title) component.
+	.block-iframe-preview__template-title {
+		padding-top: 20px;
 	}
 }