Twenty Twenty-Two: WooCommerce templates might not take the full width in certain circumstances

[Aljullu]

To reproduce

1. Go to Site Editor > Templates and edit any WooCommerce template (Product Tag, for example).
2. Edit the Group block that wraps the Legacy Template block. Set it not to Inherit default layout and to have a background color.

3. Visit the product tag page in the frontend.
4. Notice the contents are aligned to the left.

Expected behavior

Contents should take the entire width.

Screenshots

Additional context

I think the issue comes from this line in WC core:

https://github.com/woocommerce/woocommerce/blob/265be6b51440b1d88d945234dc076487031a63f0/plugins/woocommerce/legacy/css/twenty-twenty-two.scss#L71

That means the fix might need to be done in WC core.

[frontdevde]

Looking into this, it seems to me that it was an intentional decision to not have the top-level group blocks' width run wider than 1000px (related WooCommerce core discussion here). Without the 1000px limit, the content gets stretched out over the entire viewport which leads to user interface elements being very far apart on large screens. Not certain about that though, so pinging @vedanshujain @jeffstieler who discussed this on the PR that introduced the 1000px limit. Can you clarify if we should change this behavior and allow for folks to go full width with top-level group blocks? Or should we keep it as is?

That said, something else is definitely broken here and needs to be fixed. When changing the background color, without even touching the "Inherit default layout" switch, the layout suddenly becomes left-aligned. This seems to be because Gutenberg sets inline styles for .wp-site-blocks > .wp-block-group.has-background with high specificity and !important for the margins that aren't accounted for in the WooCommerce styles for Twenty Twenty-Two.

[Aljullu]

Right... That's a tricky issue. I took a quick look and there are a couple of things that I consider we should do:

1. Investigate if we can add back the content wrappers. Not sure why they are removed, but they break wide/full alignment of the Legacy Template block (pull were aligment was added: Add wide and full alignment support for legacy template block #5433).

2. Remove the 1000px max-width from Group blocks. Instead of doing that, we should make it so the Legacy Template block defaults to wide width (which is exactly 1000px) in TT2. I don't know if that's possible thought (maybe with theme.json?). But that seems to be the "block-theme-way" of solving this issue.

[dinhtungdu]

Investigate if we can add back the content wrappers. Not sure why they are removed, but they break wide/full alignment of the Legacy Template block (pull were aligment was added: Add wide and full alignment support for legacy template block #5433).

I don't see any issue adding the content wrapper back. By adding it back for Twenty Twenty-Two, we will treat that theme the same way as other block themes.

Remove the 1000px max-width from Group blocks.

In addition to the group, we also need to remove the hard-coded width for inner blocks here.

Instead of doing that, we should make it so the Legacy Template block defaults to wide width (which is exactly 1000px) in TT2. I don't know if that's possible thought (maybe with theme.json?)

I think we can even set the default alignment for Classic Template blocks to wide.

[Aljullu]

I think we can even set the default alignment for Classic Template blocks to wide.

Do you think that should be done for all themes or only when TT2 is active?

[dinhtungdu]

Do you think that should be done for all themes or only when TT2 is active?

I mean setting the default value of the block for all themes. The content size and wide max width are used interchangeably when only one of them is set. And I think wide width is the appropriate default value for product grid and Single Product. We also should provide a fallback value when none of those widths is set.

[dinhtungdu]

Reopen for woocommerce/woocommerce#32840