Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Post Content: Fix display of block support styles #66003

Merged
merged 2 commits into from
Oct 11, 2024
Merged

Post Content: Fix display of block support styles #66003

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
84ffeeb
Query Loop: Fix display of block support styles
aaronrobertshaw Oct 10, 2024
0a7e557
pass parent layout to block preview
ntsekouras Oct 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 30 additions & 1 deletion packages/block-library/src/post-content/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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 <div { ...blockPreviewProps }></div>;
}

return content?.protected ? (
<div { ...blockProps }>
<Warning>{ __( 'This content is password protected.' ) }</Warning>
</div>
Expand Down Expand Up @@ -96,6 +122,7 @@ function Content( props ) {
<EditableContent { ...props } />
) : (
<ReadOnlyContent
parentLayout={ props.parentLayout }
layoutClassNames={ layoutClassNames }
userCanEdit={ userCanEdit }
postType={ postType }
Expand Down Expand Up @@ -141,6 +168,7 @@ function RecursionError() {
export default function PostContentEdit( {
context,
__unstableLayoutClassNames: layoutClassNames,
__unstableParentLayout: parentLayout,
} ) {
const { postId: contextPostId, postType: contextPostType } = context;
const hasAlreadyRendered = useHasRecursion( contextPostId );
Expand All @@ -154,6 +182,7 @@ export default function PostContentEdit( {
{ contextPostId && contextPostType ? (
<Content
context={ context }
parentLayout={ parentLayout }
layoutClassNames={ layoutClassNames }
/>
) : (
Expand Down
Loading