Pattern previews do not include alignment class on parent block

[mrwweb]

Description

I have many patterns where a Group, Columns, or Media & Text block is the "top level" block in the pattern and has alignwide or alignfull classes applied.

However, I have realized that these classes are not included in the pattern preview markup, often breaking styles.

For instance, I'm working on a site where the Group block has a border-radius by default but removes it from full width Group blocks with the selector .wp-block-group.alignfull. This works great, but the preview shows the containing Group block with the border radius applied because the alignfull is not applied.

I'm sure there is a reason for doing this, but it's definitely causing problems for me and I don't see any current potential workarounds for now.

Step-by-step reproduction instructions

1. Make a block pattern where the first block has an alignment class applied. Could just be this:

   <!-- wp:group {"align":"wide","layout":{"type":"constrained"}} -->
       <div class="wp-block-group alignwide"></div>
   <!-- /wp:group -->

2. Apply a style with CSS that runs in the editor that styles a group of such alignment. Maybe:

   .wp-block-group.alignwide { background: rebeccapurple; }

3. The result is that the pattern is not purple in the preview, but is purple in the editor.

Screenshots, screen recording, code snippet

Preview of current use-case where the missing alignfull class results in rounded corners on a full-width group block in a pattern:

Environment info

• WP 6.7.1
• No Gutenberg
• Custom hybrid theme

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

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[carolinan]

In the previewer, the block does not have a parent that has "Inner blocks use content width", so it can't be full width.
It is the first block on the page, just like in the view where you create and edit patterns, it is standalone.

I don't know enough about this part of the editor to know if this layout setting can be turned on:
But I'm thinking it can't be turned on, because then the other set of patterns, that are designed to work without it, will break instead.
What I am trying to say is that I don't believe that both type of layout settings can be supported at the same time. So it may be best to use yet another group or other container block.

[stokesman]

This seems like a legit bug to me.

In the previewer, the block does not have a parent that has "Inner blocks use content width", so it can't be full width.

Visually that’s true but not because the alignment class has been removed from the markup. For example, if I nest a block with an existing alignment into a parent that is not constrained layout (i.e. not "inner blocks use content width") then the alignment class is still present in the editor and the front end.