Query blocks - Support wide alignments in editor. #24229
Conversation
Addison-Stavlo
added
the
[Status] In Progress
|
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?" |
Addison-Stavlo
changed the title
Addison-Stavlo
removed
the
[Status] In Progress
Addison-Stavlo
requested review from
ajitbohra,
Soean and
talldan
as code owners
| @@ -37,7 +41,7 @@ export default function QueryEdit( { | |||
| <QueryProvider> | |||
| <InnerBlocks template={ TEMPLATE } /> | |||
| </QueryProvider> | |||
| </> | |||
| </Block.div> | |||
There was a problem hiding this comment.
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.
Good catch! It should probably not be wrapping the BlockControls as well.
There was a problem hiding this comment.
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?
|
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. |
Addison-Stavlo
changed the title
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: