Patterns in Classic Themes: full-width alignment doesn't display in the editor for patterns created in Block Themes

[liviopv]

Description

Possibly related to #62326

When a pattern created in a Block Theme with a full-width block is inserted in a page or post after switching to a Classic Theme, the full-width block in the pattern will display in content width in the editor. It maintains the correct alignment on the front end, though.

Step-by-step reproduction instructions

1. Activate TT4
2. Create a Pattern with a Cover Block with full-width alignment
3. Switch theme to TT1
4. Insert the patter in a post or page
5. The editor will display the Cover Block in the pattern as if it had no alignment, while the front end will display the correct alignmentpattern

Screenshots, screen recording, code snippet

Environment info

• WordPress 6.6 Beta 2
• Gutenberg 18.5

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

[mrfoxtalbot]

I was able to reproduce this in dotcom and dotorg using several classic themes.

Note that group block options and styles are also missing.

[talldan]

I'm noticing that the classic themes have a layout type of default, and the fix that made alignments work for patterns from WP6.4 (#54416) will only work for constrained layouts.

(Quick primer: In block themes it seems that only constrained layouts support alignment, and default layouts don't support them. In classic themes I'm not sure how it's supposed to work, but it looks like they only have a default layout, but that it should also support alignments, probably because all the styles come from css).

I tested in WordPress 6.4 and it was also an issue back then, so it seems like it has always been a bug, and not something specific to 6.6. I guess the fix only worked for block themes.

It'd probably be quite easy to fix if I knew how to detect that the default layout is from a classic theme. The regular block alignments work in classic themes, so I guess there is a way to determine this. I will look into it!

[mrfoxtalbot]

Ok so, it appears this is coming from the Appearance Tools settings. Classic themes do not have this option active by default. In this sense, this is expected.

[talldan]

I made some progress. This is almost easily solvable, but not quite. It's possible to add the correct alignment classes to the pattern block, but there's an extra step. In classic themes, blocks have an extra <div> wrapper with a data-align attribute when aligned:

<div class="wp-block" data-align="full">
<div class="block-editor-block-list__block wp-block-group" id="block-57d4791e-0755-4274-8148-201f0f3c669b" role="document" aria-label="Block: Group" data-block="57d4791e-0755-4274-8148-201f0f3c669b" data-type="core/group" data-title="Group" data-is-drop-zone="true"><div class="wp-block-group__inner-container block-editor-block-list__layout is-layout-constrained wp-block-group-is-layout-constrained">
</div>
</div>

This part isn't easy to achieve. I'll have a think about it, but if it's a big task it might sadly not be worth the effort.

[talldan]

Removing this from the 6.6 board given the conversation above about how it's not a new issue.

[cbirdsong]

This issue is not isolated to patterns created in block themes, it's any pattern created with a classic theme that has theme.json. If you select some blocks with alignment and create a synced pattern, the existing alignment is kept and displays in the front end, but there is no longer a way to edit it. Needless to say, this is very confusing.

It may make sense to consolidate discussion in #62326, as the title there is more accurate.

[mwhiteley16]

Is there any additional movement on this? It is difficult to use synced patterns when using classic themes with theme.json when there is no ability to use the alignment options after the pattern is created.