Post Content: Ensure layout classnames are applied in readonly preview #53864
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
andrewserong
added
[Type] Bug
|
Size Change: -5 B (0%) Total Size: 1.51 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in 5db52f1. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5935646834
|
andrewserong
commented
Aug 23, 2023
| @@ -147,7 +152,10 @@ export default function PostContentEdit( { | |||
| return ( | |||
| <RecursionProvider uniqueId={ contextPostId }> | |||
| { contextPostId && contextPostType ? ( | |||
| <Content context={ context } layout={ layout } /> | |||
There was a problem hiding this comment.
Note: the removal of passing down layout is safe, as the usage of the passed down prop was removed in #47477 — for the EditableContent state of the Post Content block, the layout classnames are already handled by useInnerBlocksProps.
andrewserong
changed the title
andrewserong
force-pushed
the
fix/post-content-block-read-only-layout-classnames
branch
from
5db52f1 to
f0bec3b
Compare
tellthemachines
approved these changes
Sep 8, 2023
|
Thanks for reviewing @tellthemachines! 🙇 I'll merge this in now. |
andrewserong
deleted the
fix/post-content-block-read-only-layout-classnames
branch
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Fixes #53752
Ensure that layout classnames are output for the readonly preview of the Post Content block by passing them in to
useBlockProps.Why?
The Placeholder state already uses these layout classnames, and the editable view should already be getting the layout classnames via
useInnerBlocksProps. Because the read only preview is a bit of a special case, we need to manually pass the layout classnames in order for them to be applied to the preview. (The preview / read only state does not useuseInnerBlocksPropsso does not receive layout classnames automatically without wiring them up like in this PR).How?
edit.jsso that the layout classnames are passed down to and output for the read only content state of the block.layoutprop being passed toContentas it was a leftover after Always pass layout to inner blocks #47477 landed.Testing Instructions
In a site's home template, at the following at the root level to add a Query Loop block where the Content block within Post Template is set to use constrained layout:
Query Loop markup
Then, add a post containing a few blocks, one at content width, one at wide width, and one at full-wide width. For example, here's a few cover blocks:
Cover block markup
trunkthe post will display in the site editor's content preview as full width, with no spacing between blocks, due to the lack of layout classnames being output.Inner blocks use content widthat the Content block level should update and reflect in the site editor, along with any custom values entered forContentandWidesizes.Screenshots or screencast
Before
After