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

Block Group: Missing alignment options and styles when using a Classic theme #62326

Open
arpadkdweb opened this issue Jun 5, 2024 · 13 comments
Labels
Backwards Compatibility Issues or PRs that impact backwards compatability [Block] Group Affects the Group Block (and row, stack and grid variants) [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. [Type] Discussion For issues that are high-level and not yet ready to implement.

Comments

@arpadkdweb
Copy link

arpadkdweb commented Jun 5, 2024

Description

Pattern editor in classic theme does not allow wide and full alignment options whether it's a synced or unsynced pattern. I expect the same block supports settings to be available in the pattern editor as in the post editor.

Also, it makes sense to create patterns or even complex full page pattern templates that go full width.

The pattern in my classic theme is constrained to container width.

Step-by-step reproduction instructions

  1. Go to appearance > patterns
  2. Add a group block or any block that supports wide or full alignment
  3. The settings are missing from the icon toolbar
  4. If you try to add the same block in a post editor, the alignment options appear

Screenshots, screen recording, code snippet

Pattern editor
image

Post editor
image

Environment info

  • WordPress 6.5.3
  • Using a custom classic theme (site editor is disabled), but reproducable in twentytwentyfour as well
  • Tried with Gutenberg 18.4.1 and without as well

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

@arpadkdweb arpadkdweb added the [Type] Bug An existing feature does not function as intended label Jun 5, 2024
@talldan talldan added the [Feature] Patterns A collection of blocks that can be synced (previously reusable blocks) or unsynced label Jun 6, 2024
@mrfoxtalbot mrfoxtalbot changed the title Missing full and wide alignment options in the pattern editor Block Group: Missing alignment options and styles when using a Classic theme Jun 19, 2024
@mrfoxtalbot
Copy link

mrfoxtalbot commented Jun 19, 2024

I can confirm this. When used with a classic theme, the Group block does not have alignment options or styles.

This is what I see in block themes:
Screen Shot 2024-06-19 at 10 59 02

This is what I see on classic themes.
Screen Shot 2024-06-19 at 10 56 40

I am adding the "regression" label tentatively but perhaps classic themes never supported these settings on the group block?

@mrfoxtalbot mrfoxtalbot added [Block] Group Affects the Group Block (and row, stack and grid variants) Backwards Compatibility Issues or PRs that impact backwards compatability [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. [Type] Regression Related to a regression in the latest release and removed [Feature] Patterns A collection of blocks that can be synced (previously reusable blocks) or unsynced labels Jun 19, 2024
@MatzeKitt
Copy link
Contributor

I stumbled upon the same issue. It’s working for me as long as there is no theme.json available.

Test theme:

style.css:

/*
Theme Name: TEST
Description: Test
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: test
Update URI: false

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

functions.php:

<?php
function test_setup() {
	// add Gutenberg wide and full content support
	add_theme_support( 'align-wide' );
}

add_action( 'after_setup_theme', 'test_setup' );

As soon as you add a theme.json, the alignment controls are missing for patterns, even if it just contains this:

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2
}

@arpadkdweb
Copy link
Author

I can confirm this. When used with a classic theme, the Group block does not have alignment options or styles.

This is what I see in block themes: Screen Shot 2024-06-19 at 10 59 02

This is what I see on classic themes. Screen Shot 2024-06-19 at 10 56 40

I am adding the "regression" label tentatively but perhaps classic themes never supported these settings on the group block?

Even if I create a new block that is supposed to have support for wide and full alignment, that new block still doesn't work. So I believe this is a buggy behaviour.

@mrfoxtalbot mrfoxtalbot removed the [Type] Regression Related to a regression in the latest release label Jun 21, 2024
@mrfoxtalbot
Copy link

Ok so, I could be wrong but this seems to be expected https://developer.wordpress.org/themes/global-settings-and-styles/settings/appearance-tools/

Classic themes will not have support for this unless they state it explicitly. I do not have the full context but I imagine this was done to prevent unintended layout consequences. In this sense, I would not consider it a bug.

@mrfoxtalbot
Copy link

I suggest closing this issue as "wont fix", but I would like to hear from you all first.

@mrfoxtalbot mrfoxtalbot added [Type] Discussion For issues that are high-level and not yet ready to implement. and removed [Type] Bug An existing feature does not function as intended labels Jun 21, 2024
@MatzeKitt
Copy link
Contributor

It’s at least a regression since we use this system as is quite a while and I guess it was in WordPress 6.5 when the appearance tools got removed from the toolbar in such cases. Before that, it worked fine.

And I would assume that using add_theme_support for align-wide should be considered to override the default of the theme.json, since it does it in the regular editor and solely does not for patterns. That would be inconsistent.

@MatzeKitt
Copy link
Contributor

MatzeKitt commented Jun 21, 2024

And, unfortunately, explicitly setting appearanceTools to true doesn’t change the behavior whatsoever. 😞

At least when it comes to the alignment setting in the block toolbar.

@arpadkdweb
Copy link
Author

I believe this is a weird inconsistency and makes using the pattern editor in classic themes simply a bad experience, as the admin view will not reflect how the pattern will behave on the frontend or even when inserted in a page in the backend.

I think the expected behaviour should be the same as in the post editor. So if a block supports wide or full alignment the pattern editor should reflect that.

@mrfoxtalbot
Copy link

Thank you for checking and re-testing @MatzeKitt & @arpadkdweb. I will admit I am a bit out of my depth here. @MaggieCabrera, could you help us get some more context here?

@ccharel
Copy link

ccharel commented Jul 8, 2024

I have the same problem,

I want to use wordpress patterns. However, I don’t have the alignwide and alignfull options on blocks (including native blocks like the gallery).

Our WordPress themes work with theme.json, so the add_theme_support( ‘align-wide’ ) function is not interpreted.
And if I delete the theme.json and implement this function, the alignfull and alignwide options are available again.

Also, when testing with the Twenty Twenty-Four theme, the options are available. FSE themes don’t seem to have this problem.

In fact, the custom post type ‘wp_block’ is considered like a DESIGN_POST_TYPES. Cf comment: https://github.com/WordPress/WordPress/blob/6.5.5/wp-includes/js/dist/editor.js#L15463
To have the alignwide and alignfull alignment options, the layout must be of type ‘constrained’ or it is of type ‘default’.

@mrfoxtalbot
Copy link

Considering we are going to enable patterns on Classic themes in 6.6, it would be good to get some clarity on this one

Could you help us here, @jasmussen? Thank you!

@jasmussen
Copy link
Contributor

Is this issue similar to #62516? If yes, there's some discussion there that might be useful to dive into. Otherwise I would recommend a broader ping, along the lines of gutenberg-core.

@cbirdsong
Copy link

Is this issue similar to #62516?

I think this is the same issue described here, though the name is deceptive - it applies to any pattern created in a classic theme with theme.json.

And, unfortunately, explicitly setting appearanceTools to true doesn’t change the behavior whatsoever. 😞

The documentation on that page lists the following as affected by setting "appearanceTools": true: border, color, dimensions, position, spacing, typography. Layout is not included. Elsewhere, the docs imply that setting the content/wide size in the layout key should opt you into using it. However, in my testing, this bug still occurs in a classic theme with a layout key present in theme.json.

Reiterating, it is very confusing that if you select a block with an alignment and create a synced pattern with it then the alignment is preserved and displayed on the front end, but there is no longer a way to edit it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Backwards Compatibility Issues or PRs that impact backwards compatability [Block] Group Affects the Group Block (and row, stack and grid variants) [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. [Type] Discussion For issues that are high-level and not yet ready to implement.
Projects
None yet
Development

No branches or pull requests

7 participants