Optimise block preview via memoizing the component, and always render…

…ing a preview for each block context
WordPress · Dec 7, 2021 · cf6b844 · cf6b844
1 parent 59f7978
commit cf6b844
Showing 1 changed file with 39 additions and 16 deletions.
diff --git a/packages/block-library/src/post-template/edit.js b/packages/block-library/src/post-template/edit.js
@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useState, useMemo } from '@wordpress/element';
+import { memo, useMemo, useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import {
@@ -30,23 +30,39 @@ function PostTemplateInnerBlocks() {
 	return <li { ...innerBlocksProps } />;
 }
 
-function PostTemplateBlockPreview( { blocks, onClick } ) {
+function PostTemplateBlockPreview( {
+	blocks,
+	blockContextId,
+	isHidden,
+	setActiveBlockContextId,
+} ) {
 	const blockPreviewProps = useBlockPreview( {
 		blocks,
 	} );
 
+	const handleOnClick = () => {
+		setActiveBlockContextId( blockContextId );
+	};
+
+	const style = {
+		display: isHidden ? 'none' : undefined,
+	};
+
 	return (
 		<li
 			{ ...blockPreviewProps }
 			tabIndex={ 0 }
 			// eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
 			role="button"
-			onClick={ onClick }
-			onKeyPress={ onClick }
+			onClick={ handleOnClick }
+			onKeyPress={ handleOnClick }
+			style={ style }
 		/>
 	);
 }
 
+const MemoizedPostTemplateBlockPreview = memo( PostTemplateBlockPreview );
+
 export default function PostTemplateEdit( {
 	clientId,
 	context: {
@@ -70,7 +86,7 @@ export default function PostTemplateEdit( {
 	},
 } ) {
 	const [ { page } ] = queryContext;
-	const [ activeBlockContext, setActiveBlockContext ] = useState();
+	const [ activeBlockContextId, setActiveBlockContextId ] = useState();
 
 	const { posts, blocks } = useSelect(
 		( select ) => {
@@ -132,7 +148,6 @@ export default function PostTemplateEdit( {
 			templateSlug,
 		]
 	);
-
 	const blockContexts = useMemo(
 		() =>
 			posts?.map( ( post ) => ( {
@@ -161,6 +176,10 @@ export default function PostTemplateEdit( {
 		return <p { ...blockProps }> { __( 'No results found.' ) }</p>;
 	}
 
+	// To avoid flicker when switching active block contexts, a preview is rendered
+	// for each block context, but the preview for the active block context is hidden.
+	// This ensures that when it is displayed again, the cached rendering of the
+	// block preview is used, instead of having to re-render the preview from scratch.
 	return (
 		<ul { ...blockProps }>
 			{ blockContexts &&
@@ -169,17 +188,21 @@ export default function PostTemplateEdit( {
 						key={ blockContext.postId }
 						value={ blockContext }
 					>
-						{ blockContext ===
-						( activeBlockContext || blockContexts[ 0 ] ) ? (
+						{ blockContext.postId ===
+						( activeBlockContextId ||
+							blockContexts[ 0 ]?.postId ) ? (
 							<PostTemplateInnerBlocks />
-						) : (
-							<PostTemplateBlockPreview
-								blocks={ blocks }
-								onClick={ () =>
-									setActiveBlockContext( blockContext )
-								}
-							/>
-						) }
+						) : null }
+						<MemoizedPostTemplateBlockPreview
+							blocks={ blocks }
+							blockContextId={ blockContext.postId }
+							setActiveBlockContextId={ setActiveBlockContextId }
+							isHidden={
+								blockContext.postId ===
+								( activeBlockContextId ||
+									blockContexts[ 0 ]?.postId )
+							}
+						/>
 					</BlockContextProvider>
 				) ) }
 		</ul>