diff --git a/packages/block-library/src/post-template/edit.js b/packages/block-library/src/post-template/edit.js index 72f5afb4803c6..59a3e306dd247 100644 --- 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
; } -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 ( ); } +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{ __( 'No results found.' ) }
; } + // 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 (