-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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.
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
Query blocks - Support wide alignments in editor. #24229
Conversation
Size Change: +80 B (0%) Total Size: 1.16 MB
ℹ️ View Unchanged
|
I'm not sure technically how, but it sounds like the query loop and post content blocks need to get the same behavior as the normal wrappers for post content on the front end.... I wonder if there are any classnames for that? I also wonder if alignment settings are important in that case -- i.e. it just acts as the "normal" wrapper around the post, if that makes sense |
That makes sense as I don't think the query blocks have a wrapper on the front end, however re:
I noticed the Post Content works in a funky way across site editor and front end as well. That is, with no alignment settings for Post Content block the full width child blocks are properly full width on the front end. If you run this PR to test the index template, you will find adding full width to the query block is not enough. You must also add full width to the Post Content block for its nested blocks to have the full width effect inside the site editor. 🤔 |
I see... :/ I think the alignment settings made more sense in a world without nested blocks like this. I don't have any idea what the "correct" behavior would be in this case 🙃 |
OK, I think this (621fb98) makes a bit more sense than adding the align hook. These blocks don't have actual wrappers on the front end (or in the case of post-content has a 'pseudo-wrapper' with only the "entry-content" class name). But the editor will treat them as a block and give them a wrapper regardless. Since these given wrappers in the editor have no specified align settings, they are given the What I have done is given these blocks a You may ask "don't we want align settings for post-content?" |
@@ -37,7 +41,7 @@ export default function QueryEdit( { | |||
<QueryProvider> | |||
<InnerBlocks template={ TEMPLATE } /> | |||
</QueryProvider> | |||
</> | |||
</Block.div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm not familiar with this block and I don't see that toolbar, but I wonder if it makes sense to move the BlockControls
outside the wrapper.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good catch! It should probably not be wrapping the BlockControls
as well.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't see that toolbar
I moved BlockControls
outside of the wrapper, but I had the toolbar working the same in either case. Is it better for you now?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This works great!
I'll pre-approve, in the off-chance my question doesn't matter.
Updated again - Im leaving the Post-Content block alone for now. So for testing this you would need to go to the index template and set the post content inside the query blocks to 'full' alignment. Previously the width would be restricted in the editor but with these changes to the query blocks it should now show full width as expected. Since it is listed on the FSE block parity issue, Post Content probably should have settings for alignment, colors, etc. Furthermore, I noticed that here the group block does not restrict the width of its children on the front-end (only in the editor?), so my previous assumption about that working as the alignment controller for nested post content does not work at this point in time either. |
Description
EDIT - Updated #24229 (comment)
Currently in the site editor, the Query Loop, Query, and Post Content blocks are given a default wrapper that causes their width to be restricted. A post may have a block with a wide of full block alignment setting. The post editor, the front end for the post, and the homepage (if set to render current posts) will render the content at full width:
While in the site editor the width is restricted by the Query Loop and Post Content blocks:
If we add styles to set the max-width for these blocks inside the editor, or allow for supporting alignment in the Query and Query Loop blocks, they can be less restrictive and in the editor we would have:
How has this been tested?
Tested on local docker environment.
Screenshots
Types of changes
Checklist: