Twenty Twenty-One: Polish new blocks added in 5.8

[desrosj]

This is a continuation of #53389 for Twenty Twenty-One issues only.

[desrosj]

Scenario 1:

• Insert a Query Loop block.
• Use all default options and layouts.
• Select "full width" on the Query Loop block.

The text has no margin on the sides.

Scenario 1b:

• Insert a Query Loop block.
• Select the grid view and then "grid".
• Select full width on the Query Loop block.
• Toggle between list view and grid view in the toolbar.

You'll notice that there is a margin appropriately when starting with the grid view.

It looks like a different template is used when this is the case.

[Joen]

Thanks for the added context. This seems to be a related issue to the one reported in https://core.trac.wordpress.org/ticket/53389#comment:2. Essentially it appears that the rule for assigning top and bottom margins is simply not reaching any blocks inside the query block. So the linked referenced needs to be expanded to do that.

[desrosj]

In the screenshot above, I tested using another available template. I have selected full width in the editor but on the front end, it does not expand full width. and actually displays the same as if it were wide width.

[poena]

For the planet example, would it be possible for you to share the block markup used to generate the screenshot?
When you say "template" do you mean a template created with the template editor?

[desrosj]

@poena I'm afraid I've reset my local install since trying that out.

To clarify template (sorry, should have been more clear). I've attached a screenshot of what I was referring to as "templates". When you first insert a Query Loop block, you are presented with multiple patterns/templates/layouts? I was testing with different ones.

Before:

| Editor | Frontend |

|

| <img width="632" alt="Screen Shot 2021-06-21 at 12 38 49 PM" src="​https://user-images.githubusercontent.com/541093/122797648-b1320880-d28d-11eb-95f8-310476a002af.png"> | <img width="645" alt="Screen Shot 2021-06-21 at 12 39 08 PM" src="​https://user-images.githubusercontent.com/541093/122797638-ae371800-d28d-11eb-9823-f1ffd31fc7a7.png"> |

After

| Editor | Frontend |

|

| <img width="655" alt="Screen Shot 2021-06-21 at 12 41 14 PM" src="​https://user-images.githubusercontent.com/541093/122797899-f8b89480-d28d-11eb-94b3-3fdafdb07ddd.png"> | <img width="634" alt="Screen Shot 2021-06-21 at 12 40 46 PM" src="​https://user-images.githubusercontent.com/541093/122797851-e8a0b500-d28d-11eb-8cc8-b07a8642cd11.png"> |

Trac ticket: https://core.trac.wordpress.org/ticket/53398

[ryelle]

Scenario 1: The text has no margin on the sides.

This seems to happen with full-width headings too, so I think we could consider this “expected”? There’s still no spacing around the sides with a background color, which is not the same as other blocks. I've attached a PR which just adds a little space for Query Loops with background colors.

Scenario 1b: You’ll notice that there is a margin appropriately when starting with the grid view.

I think @joen’s patch from #53389 fixes this issue.

Last scenario: Full width query loop is not full width on frontend.

I’m able to replicate this, and it seems to be that the columns block in this pattern is set to wide width, so it maxes out at wide even if the container Query Loop is set to full width. I don't know what the best solution would be here - maybe remove the alignment on those columns, and add it to the Query Loop?

Steps to replicate this one:

• Add a Query Loop block
• Click the grid icon to view all patterns
• Click "Image at left"
• Make the Query Loop full width

[scruffian]

Proposed fix to the Post Template block here: ​https://github.com/WordPress/gutenberg/pull/32883

[ryelle]

It looks like that PR fixes the Post Template width when Query Loop is full width, but the same thing still happens when it's wide.

The PR also adds padding around the container at full width, which I think should be left up to the theme - for example, if I want to add a full-width featured image, I would expect it to expand edge to edge if that's how the rest of the theme's blocks work.

[ryelle]

In 51201:

Twenty Twenty-One: Add margins around content in Post Template block.

Props desrosj, joen.
See #53389, #53398.

This looks good. What do you think about also adding the padding when the block is alignfull?

[scruffian]

Last scenario: Full width query loop is not full width on frontend.

I think this is the expected behaviour as the columns in that pattern are set to wide with. If you change them to full width then it works as expected.

[scruffian]

Image on left pattern

[ryelle]

I think this is the expected behaviour as the columns in that pattern are set to wide with. If you change them to full width then it works as expected.

I don't really think this is expected but I see what you mean. It's tricky to backtrack up each level to make sure each (Columns, Post Template, Query Block etc) have the right alignments set. So my preference would be for the alignment to be removed from columns and set instead on the Query Block.

@scruffian It should, did it not work for you?

It does when it has a background color, but I mean even if it doesn't:

<img width="1440" alt="Screenshot 2021-06-23 at 16 10 21" src="​https://user-images.githubusercontent.com/275961/123122064-9b634580-d43d-11eb-8009-49b33db5aebe.png">

No, to match the behavior of other blocks (and so people can use full-width images), I think it would be best to only add the padding when there's a background color. If someone wants to add space, they can make a group block and control the space themselves with the padding control.

LGTM

[ryelle]

The alignment issue ("Full width query loop is not full width on frontend.") seems to be a larger gutenberg problem, also mentioned in #53389. I think the rest of the issues here are fixed, and I haven't seen any other issues with blocks in Twenty Twenty-One. Marking for close, but would like some extra feedback just to be sure :)

[desrosj]

Let's close this out for new, more targeted tickets should any new issues be found. Thanks everyone!