Post Content: Fix display of block support styles

packages/block-library/src/post-content/edit.js

@@ -8,13 +8,17 @@ 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
  */
@@ -33,7 +37,27 @@ 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,
+	} );
+
+	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 <div { ...blockPreviewProps }></div>;
+	}
+
+	return content?.protected ? (
 		<div { ...blockProps }>
 			<Warning>{ __( 'This content is password protected.' ) }</Warning>
 		</div>