diff --git a/packages/block-library/src/post-content/edit.js b/packages/block-library/src/post-content/edit.js index 041a3b4fa02f61..582165303c0d05 100644 --- a/packages/block-library/src/post-content/edit.js +++ b/packages/block-library/src/post-content/edit.js @@ -8,19 +8,24 @@ import { RecursionProvider, useHasRecursion, Warning, + __experimentalUseBlockPreview as useBlockPreview, } from '@wordpress/block-editor'; +import { parse } from '@wordpress/blocks'; import { useEntityProp, useEntityBlockEditor, store as coreStore, } from '@wordpress/core-data'; import { useSelect } from '@wordpress/data'; +import { useMemo } from '@wordpress/element'; + /** * Internal dependencies */ import { useCanEditEntity } from '../utils/hooks'; function ReadOnlyContent( { + parentLayout, layoutClassNames, userCanEdit, postType, @@ -33,7 +38,28 @@ function ReadOnlyContent( { postId ); const blockProps = useBlockProps( { className: layoutClassNames } ); - return content?.protected && ! userCanEdit ? ( + const blocks = useMemo( () => { + return content?.raw ? parse( content.raw ) : []; + }, [ content?.raw ] ); + const blockPreviewProps = useBlockPreview( { + blocks, + props: blockProps, + layout: parentLayout, + } ); + + if ( userCanEdit ) { + /* + * Rendering the block preview using the raw content blocks allows for + * block support styles to be generated and applied by the editor. + * + * The preview using the raw blocks can only be presented to users with + * edit permissions for the post to prevent potential exposure of private + * block content. + */ + return
; + } + + return content?.protected ? (
{ __( 'This content is password protected.' ) }
@@ -96,6 +122,7 @@ function Content( props ) { ) : ( ) : (