SPT: immediately render modal with empty thumbnails

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

@@ -11,21 +11,26 @@
  */
 /* eslint-disable import/no-extraneous-dependencies */
 import { BlockPreview } from '@wordpress/block-editor';
+import { Disabled } from '@wordpress/components';
 /* eslint-enable import/no-extraneous-dependencies */
 
 const BlockTemplatePreview = ( { blocks = [], viewportWidth } ) => {
-	if ( ! blocks || ! blocks.length ) {
-		return null;
-	}
-
 	return (
 		/* eslint-disable wpcalypso/jsx-classname-namespace */
-		<div className="edit-post-visual-editor">
-			<div className="editor-styles-wrapper">
-				<div className="editor-writing-flow">
-					<BlockPreview blocks={ blocks } viewportWidth={ viewportWidth } />
+		<div className="template-selector-item__preview-wrap">
+			<Disabled>
+				<div className="editor-styles-wrapper">
+					<div className="edit-post-visual-editor">
+						<div className="editor-writing-flow">
+							<BlockPreview
+								blocks={ blocks }
+								viewportWidth={ viewportWidth }
+								__experimentalScalingDelay={ 0 }
+							/>
+						</div>
+					</div>
 				</div>
-			</div>
+			</Disabled>
 		</div>
 		/* eslint-enable wpcalypso/jsx-classname-namespace */
 	);

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

@@ -27,7 +27,6 @@ export const TemplateSelectorControl = ( {
 	help,
 	instanceId,
 	templates = [],
-	blocksByTemplates = {},
 	useDynamicPreview = false,
 	onTemplateSelect = noop,
 	siteInformation = {},
@@ -38,12 +37,7 @@ export const TemplateSelectorControl = ( {
 		return null;
 	}
 
-	if ( true === useDynamicPreview && isEmpty( blocksByTemplates ) ) {
-		return null;
-	}
-
 	const id = `template-selector-control-${ instanceId }`;
-
 	return (
 		<BaseControl
 			label={ label }
@@ -65,7 +59,6 @@ export const TemplateSelectorControl = ( {
 							onSelect={ onTemplateSelect }
 							staticPreviewImg={ preview }
 							staticPreviewImgAlt={ previewAlt }
-							blocks={ blocksByTemplates.hasOwnProperty( slug ) ? blocksByTemplates[ slug ] : [] }
 							useDynamicPreview={ useDynamicPreview }
 							isSelected={ slug === selectedTemplate }
 							handleTemplateConfirmation={ handleTemplateConfirmation }

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

@@ -2,52 +2,86 @@
  * External dependencies
  */
 /* eslint-disable import/no-extraneous-dependencies */
-import { isNil, isEmpty } from 'lodash';
-/* eslint-enable import/no-extraneous-dependencies */
+import { isNil, get } from 'lodash';
 import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
-import BlockPreview from './block-template-preview';
-/* eslint-disable import/no-extraneous-dependencies */
-import { Disabled } from '@wordpress/components';
+import { Spinner } from '@wordpress/components';
+import { useState, useEffect } from '@wordpress/element';
 /* eslint-enable import/no-extraneous-dependencies */
 
+/**
+ * Internal dependencies
+ */
+import BlockPreview from './block-template-preview';
+import { getBlocksByTemplateSlug, getTemplateBySlug } from '../utils/templates-parser';
+
 const TemplateSelectorItem = props => {
 	const {
 		id,
 		value,
 		onSelect,
 		label,
-		useDynamicPreview = false,
+		useDynamicPreview,
 		staticPreviewImg,
 		staticPreviewImgAlt = '',
-		blocks = [],
 		isSelected,
 		handleTemplateConfirmation,
 	} = props;
+	const template = getTemplateBySlug( value );
+	const [ isParsing, setIsParsing ] = useState( true );
+
+	const onTemplatesParseListener = event => {
+		const parsedTemplate = get( event, [ 'detail', 'template' ] );
+		if ( value !== parsedTemplate.slug ) {
+			return;
+		}
+		setIsParsing( false );
+	};
+	window.addEventListener( 'onTemplateParse', onTemplatesParseListener );
+
+	useEffect( () => {
+		return () => {
+			window.removeEventListener( 'resize', onTemplatesParseListener );
+		};
+	}, [] );
 
 	if ( isNil( id ) || isNil( label ) || isNil( value ) ) {
 		return null;
 	}
 
-	if ( useDynamicPreview && ( isNil( blocks ) || isEmpty( blocks ) ) ) {
-		return null;
-	}
+	const { isEmpty } = template;
 
-	// Define static or dynamic preview.
-	const innerPreview = useDynamicPreview ? (
-		<Disabled>
-			<BlockPreview blocks={ blocks } viewportWidth={ 960 } />
-		</Disabled>
-	) : (
-		<img
-			className="template-selector-item__media"
-			src={ staticPreviewImg }
-			alt={ staticPreviewImgAlt }
-		/>
-	);
+	const renderInnerPreview = () => {
+		/* eslint-disable wpcalypso/jsx-classname-namespace */
+		if ( isParsing && ! isEmpty ) {
+			return (
+				<div className="editor-styles-wrapper">
+					<div className="template-selector-item__preview-wrap is-parsing">
+						<Spinner />;
+					</div>
+				</div>
+			);
+		}
+		/* eslint-enable wpcalypso/jsx-classname-namespace */
+
+		if ( useDynamicPreview ) {
+			return <BlockPreview blocks={ getBlocksByTemplateSlug( value ) } viewportWidth={ 960 } />;
+		}
+
+		return (
+			<div className="template-selector-item__preview-wrap">
+				<img
+					className="template-selector-item__media"
+					src={ staticPreviewImg }
+					alt={ staticPreviewImgAlt }
+				/>
+			</div>
+		);
+		/* eslint-enable wpcalypso/jsx-classname-namespace */
+	};
 
 	const labelId = `label-${ id }-${ value }`;
 
@@ -67,20 +101,23 @@ const TemplateSelectorItem = props => {
 	};
 
 	return (
+		/* eslint-disable wpcalypso/jsx-classname-namespace */
 		<button
 			type="button"
 			className={ classnames( 'template-selector-item__label', {
 				'is-selected': isSelected,
+				'is-parsing': isParsing,
 			} ) }
 			value={ value }
 			onClick={ handleLabelClick }
 			aria-labelledby={ `${ id } ${ labelId }` }
 		>
-			<div className="template-selector-item__preview-wrap">{ innerPreview }</div>
+			{ renderInnerPreview() }
 			<span className="template-selector-item__template-title" id={ labelId }>
-				{ label }
+				<div className="editor-styles-wrapper">{ label }</div>
 			</span>
 		</button>
+		/* eslint-enable wpcalypso/jsx-classname-namespace */
 	);
 };
 

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

@@ -104,7 +104,12 @@ const TemplateSelectorPreview = ( { blocks, viewportWidth, title } ) => {
 					<div className="editor-styles-wrapper" style={ { visibility } }>
 						<div className="editor-writing-flow">
 							<PreviewTemplateTitle title={ title } transform={ transform } />
-							<BlockPreview key={ recompute } blocks={ blocks } viewportWidth={ viewportWidth } />
+							<BlockPreview
+								key={ recompute }
+								blocks={ blocks }
+								viewportWidth={ viewportWidth }
+								__experimentalScalingDelay={ 0 }
+							/>
 						</div>
 					</div>
 				</div>

apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/index.js

@@ -1,8 +1,16 @@
 /* eslint-disable import/no-extraneous-dependencies */
+import {
+	getBlocksByTemplateSlug,
+	getTitleByTemplateSlug,
+	hasTemplates,
+	getFirstTemplateSlug,
+	getAllTemplateSlugs,
+} from './utils/templates-parser';
+
 /**
  * External dependencies
  */
-import { isEmpty, reduce, get, keyBy, mapValues } from 'lodash';
+import { isEmpty } from 'lodash';
 import classnames from 'classnames';
 import '@wordpress/nux';
 import { __, sprintf } from '@wordpress/i18n';
@@ -11,7 +19,6 @@ import { Button, Modal, Spinner } from '@wordpress/components';
 import { registerPlugin } from '@wordpress/plugins';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { Component } from '@wordpress/element';
-import { parse as parseBlocks } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -20,13 +27,10 @@ import './styles/starter-page-templates-editor.scss';
 import TemplateSelectorControl from './components/template-selector-control';
 import TemplateSelectorPreview from './components/template-selector-preview';
 import { trackDismiss, trackSelection, trackView, initializeWithIdentity } from './utils/tracking';
-import replacePlaceholders from './utils/replace-placeholders';
 import ensureAssets from './utils/ensure-assets';
-/* eslint-enable import/no-extraneous-dependencies */
 
 // Load config passed from backend.
 const {
-	templates = [],
 	vertical,
 	segment,
 	tracksUserData,
@@ -36,44 +40,15 @@ const {
 class PageTemplateModal extends Component {
 	state = {
 		isLoading: false,
-		previewedTemplate: null,
-		blocksByTemplateSlug: {},
-		titlesByTemplateSlug: {},
+		previewedTemplate: getFirstTemplateSlug(),
 		error: null,
-		isOpen: false,
+		isOpen: hasTemplates(),
 	};
 
-	constructor( props ) {
-		super();
-		const hasTemplates = ! isEmpty( props.templates );
-		this.state.isOpen = hasTemplates;
-		if ( hasTemplates ) {
-			// Select the first template automatically.
-			this.state.previewedTemplate = get( props.templates, [ 0, 'slug' ] );
-			// Extract titles for faster lookup.
-			this.state.titlesByTemplateSlug = mapValues( keyBy( props.templates, 'slug' ), 'title' );
-		}
-	}
-
 	componentDidMount() {
 		if ( this.state.isOpen ) {
 			trackView( this.props.segment.id, this.props.vertical.id );
 		}
-
-		// Parse templates blocks and store them into the state.
-		const blocksByTemplateSlug = reduce(
-			templates,
-			( prev, { slug, content } ) => {
-				prev[ slug ] = content
-					? parseBlocks( replacePlaceholders( content, siteInformation ) )
-					: [];
-				return prev;
-			},
-			{}
-		);
-
-		// eslint-disable-next-line react/no-did-mount-set-state
-		this.setState( { blocksByTemplateSlug } );
 	}
 
 	setTemplate = slug => {
@@ -82,8 +57,8 @@ class PageTemplateModal extends Component {
 		this.props.saveTemplateChoice( slug );
 
 		// Load content.
-		const blocks = this.getBlocksByTemplateSlug( slug );
-		const title = this.getTitleByTemplateSlug( slug );
+		const blocks = getBlocksByTemplateSlug( slug );
+		const title = getTitleByTemplateSlug( slug );
 
 		// Skip inserting if there's nothing to insert.
 		if ( ! blocks || ! blocks.length ) {
@@ -121,9 +96,9 @@ class PageTemplateModal extends Component {
 		return this.props.shouldPrefetchAssets ? ensureAssets( blocks ) : Promise.resolve( blocks );
 	};
 
-	handleConfirmation = ( slug = this.state.previewedTemplate ) => this.setTemplate( slug );
+	// handleConfirmation = ( slug = this.state.previewedTemplate ) => this.setTemplate( slug );
 
-	previewTemplate = slug => this.setState( { previewedTemplate: slug } );
+	previewTemplate = previewedTemplate => this.setState( { previewedTemplate } );
 
 	closeModal = event => {
 		// Check to see if the Blur event occurred on the buttons inside of the Modal.
@@ -135,17 +110,9 @@ class PageTemplateModal extends Component {
 		trackDismiss( this.props.segment.id, this.props.vertical.id );
 	};
 
-	getBlocksByTemplateSlug( slug ) {
-		return get( this.state.blocksByTemplateSlug, [ slug ], [] );
-	}
-
-	getTitleByTemplateSlug( slug ) {
-		return get( this.state.titlesByTemplateSlug, [ slug ], '' );
-	}
-
 	render() {
-		const { previewedTemplate, isOpen, isLoading, blocksByTemplateSlug } = this.state;
 		/* eslint-disable no-shadow */
+		const { previewedTemplate, isOpen, isLoading } = this.state;
 		const { templates } = this.props;
 		/* eslint-enable no-shadow */
 
@@ -176,19 +143,19 @@ class PageTemplateModal extends Component {
 									<TemplateSelectorControl
 										label={ __( 'Template', 'full-site-editing' ) }
 										templates={ templates }
-										blocksByTemplates={ blocksByTemplateSlug }
 										onTemplateSelect={ this.previewTemplate }
-										useDynamicPreview={ false }
+										useDynamicPreview={ true }
 										siteInformation={ siteInformation }
 										selectedTemplate={ previewedTemplate }
 										handleTemplateConfirmation={ this.handleConfirmation }
+										isLoading={ isLoading }
 									/>
 								</fieldset>
 							</form>
 							<TemplateSelectorPreview
-								blocks={ this.getBlocksByTemplateSlug( previewedTemplate ) }
+								blocks={ getBlocksByTemplateSlug( previewedTemplate ) }
 								viewportWidth={ 960 }
-								title={ this.getTitleByTemplateSlug( previewedTemplate ) }
+								title={ getTitleByTemplateSlug( previewedTemplate ) }
 							/>
 						</>
 					) }
@@ -206,7 +173,7 @@ class PageTemplateModal extends Component {
 					>
 						{ sprintf(
 							__( 'Use %s template', 'full-site-editing' ),
-							this.getTitleByTemplateSlug( previewedTemplate )
+							getTitleByTemplateSlug( previewedTemplate )
 						) }
 					</Button>
 				</div>
@@ -264,7 +231,7 @@ registerPlugin( 'page-templates', {
 		return (
 			<PageTemplatesPlugin
 				shouldPrefetchAssets={ false }
-				templates={ templates }
+				templates={ getAllTemplateSlugs() }
 				vertical={ vertical }
 				segment={ segment }
 			/>