WordPress.org

Make WordPress Core

Opened 4 months ago

Closed 4 months ago

#53398 closed defect (bug) (fixed)

Twenty Twenty-One: Polish new blocks added in 5.8

Reported by: desrosj Owned by:
Milestone: 5.8 Priority: normal
Severity: normal Version: 5.8
Component: Bundled Theme Keywords: has-screenshots has-patch
Focuses: Cc:

Description

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

Attachments (7)

scenario-1-editor.png (111.0 KB) - added by desrosj 4 months ago.
scenario-1-front.png (97.0 KB) - added by desrosj 4 months ago.
scenario-1b-editor.png (147.2 KB) - added by desrosj 4 months ago.
scenario-1b-front.png (107.7 KB) - added by desrosj 4 months ago.
query-block-not-full-width.png (1.6 MB) - added by desrosj 4 months ago.
Screen Shot 2021-06-17 at 15.28.52.png (63.6 KB) - added by desrosj 4 months ago.
Screenshot 2021-06-23 at 10.42.46.png (121.9 KB) - added by scruffian 4 months ago.
Image on left pattern

Change History (28)

#1 @desrosj
4 months ago

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.

#2 @Joen
4 months ago

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.

#3 @desrosj
4 months ago

  • Summary changed from Twenty Twenty-One to Twenty Twenty-One: Polish new blocks added in 5.8

#4 @desrosj
4 months ago

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.

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.


4 months ago

#6 @poena
4 months ago

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?

#7 @desrosj
4 months ago

  • Keywords needs-patch has-screenshots added

@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.

This ticket was mentioned in PR #1402 on WordPress/wordpress-develop by ryelle.


4 months ago

  • Keywords has-patch added; needs-patch removed

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

#9 @ryelle
4 months ago

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

#10 @scruffian
4 months ago

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

#11 @ryelle
4 months ago

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.

#12 @ryelle
4 months ago

In 51201:

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

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

#13 @prbot
4 months ago

scruffian commented on PR #1402:

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

#14 @scruffian
4 months ago

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
4 months ago

Image on left pattern

#15 @ryelle
4 months ago

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.

#16 @prbot
4 months ago

ryelle commented on PR #1402:

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

#17 @prbot
4 months ago

scruffian commented on PR #1402:

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">

#18 @prbot
4 months ago

ryelle commented on PR #1402:

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.

#19 @prbot
4 months ago

scruffian commented on PR #1402:

LGTM

#20 @ryelle
4 months ago

  • Keywords close reporter-feedback added

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 :)

#21 @desrosj
4 months ago

  • Keywords close reporter-feedback removed
  • Resolution set to fixed
  • Status changed from new to closed

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

Note: See TracTickets for help on using tickets.