Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
liviopv opened this issue Jun 12, 2024 · 5 comments
Labels
[Feature] Layout Layout block support, its UI controls, and style output. [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. [Type] Bug An existing feature does not function as intended

Comments

@liviopv
Copy link

liviopv commented Jun 12, 2024

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

CleanShot 2024-06-12 at 18 27 45@2x

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

@liviopv liviopv added the [Type] Bug An existing feature does not function as intended label Jun 12, 2024
@jordesign jordesign added [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. [Feature] Layout Layout block support, its UI controls, and style output. labels Jun 14, 2024
@mrfoxtalbot
Copy link

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

Note that group block options and styles are also missing.

Screen Shot 2024-06-19 at 10 56 40 Screen Shot 2024-06-19 at 10 59 02
@talldan
Copy link
Contributor

talldan commented Jun 20, 2024

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
Copy link

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
Copy link
Contributor

talldan commented Jun 21, 2024

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
Copy link
Contributor

talldan commented Jun 24, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Layout Layout block support, its UI controls, and style output. [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. [Type] Bug An existing feature does not function as intended
4 participants