Cover block regression: impossible to set the width of the inner blocks when using a block theme

[briceduclos]

Description

When using a classic theme, the user can set the alignment of the Cover inner blocks: None, Wide width, Full width.

When using a block theme, the alignment controls for the inner blocks disappear. The content is full width which creates readability issues as the line length is too wide.

Step-by-step reproduction instructions

1. Activate the Twenty Twenty-Two theme.
2. Inside the block editor, paste the following code (pattern available at https://wordpress.org/patterns/pattern/header-with-hatched-pattern/)

<!-- wp:cover {"url":"https://s.w.org/patterns/files/2021/06/pattern-squares-scaled-1.jpg","id":514,"dimRatio":0,"overlayColor":"gray","minHeight":100,"minHeightUnit":"vh","isDark":false,"align":"full"} -->
<div class="wp-block-cover alignfull is-light" style="min-height:100vh"><span aria-hidden="true" class="has-gray-background-color has-background-dim-0 wp-block-cover__gradient-background has-background-dim"></span><img class="wp-block-cover__image-background wp-image-514" alt="" src="https://s.w.org/patterns/files/2021/06/pattern-squares-scaled-1.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"style":{"color":{"background":"#16244a","text":"#f8f8f8"},"spacing":{"padding":{"top":"6rem","right":"2rem","bottom":"6rem","left":"2rem"}},"elements":{"link":{"color":{"text":"#f8f8f8"}}}}} -->
<div class="wp-block-column has-text-color has-background has-link-color" style="background-color:#16244a;color:#f8f8f8;padding-top:6rem;padding-right:2rem;padding-bottom:6rem;padding-left:2rem"><!-- wp:heading {"style":{"typography":{"fontSize":"48px","lineHeight":"1.2"}}} -->
<h2 id="art-beaute-2" style="font-size:48px;line-height:1.2"><strong>Art &amp; Beauté</strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Fashion that influences modern culture</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:cover -->

3. Select the Columns block.
4. Observe that you can’t change its alignment.

Screenshots, screen recording, code snippet

Twenty Twenty-Two (block theme): no alignment controls	Twenty Twenty-One (classic theme) : alignment controls

Environment info

• WordPress 5.9 Beta 1, Twenty Twenty-Two theme (same issue with Gutenberg 12.0.1 activated/not activated).

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[skorasaurus]

Hi,

Thank you for the detailed report. Unfortunately, (disabling width of inner blocks) is currently an intentional design for block-based themes (or any theme that has a theme.json file in it) although as far as I understand, it's not completely set in stone yet.

More information is at #33374 where you can share your opinions about it as well.

[briceduclos]

Hi @skorasaurus,

Thanks for the link, I've seen it. However, I believe that my issue is different as it concerns the Cover block. The Group block has an option to control the layout of the inner blocks, whereas the Cover block has no control.

[skorasaurus]

Good point, I'll reopen it.

[ryelle]

Seconding this — it would be great to get the "Inherit default layout" toggle onto the Cover block, so that content can be added without it going full-width across the site.

For example, the top block here is a cover, and the second is a group. It's possible to contain the group content to the normal, readable, content width, but the cover content is full width.

(For a short-term fix, this can be worked around by adding a group block inside the cover.)

[supernovia]

Just chiming in in case anyone else is trying to figure this out, and in favor of letting inner blocks have widths without this workaround.

I wanted:

A full-width cover
- A wide header
-- logo on the left
-- navigation on the right

To get wide header content over a full width cover, I needed this combo:
header > group > cover > group > cover > content of header blocks

I'd also like to utilize wide-width for my archive page layout, but haven't figured that out yet. I'd love for this to be less complicated.

[bradhogan]

Just want to see what the status of this issue it. It seems odd that alignwide and alignfull are removed from blocks inside a cover. If, for example, I have two price boxes inside a cover block, I wouldn't want them to take up the entire width inside of the cover block.

[NicoHood]

This is possibly related to:
#33374

It is an absolutely nogo. Can anyone from the gutenberg community please help? So many people are lost.

[JiveDig]

+1. This is strange that we don't have control over inner content on a Cover block like we do on a Group block.