WP 6.3 Full Site Editing Area Group Block has no alignment option

[patrickwc]

Description

If I add a group block to a template part area in the full site editor, I cannot add any alignment option to the block. I have tested on my own hybrid theme and in the Twenty Twenty Three theme using WP 6.3.2.

On a page I have the group block alignment options:

In the full site editor I do not:

I have to group the group block again, and the child group block has alignment options:

Is this expected behaviour for the full site editor area? It may happen on other blocks too I've only tested Group so far.

Step-by-step reproduction instructions

Go to wp-admin -> Appearance -> Editor -> Click Patterns (template parts) -> Edit a template part e.g. Header/Footer -> Add a group block or click on the existing group block, there are no alignment options. You only get them if you add a second group block inside of it and group all content within that.

Screenshots, screen recording, code snippet

Already added screenshots in description.

Environment info

WP 6.3.2, Twenty Twenty Three. Mac OS Brave.

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

[jordesign]

Hey @patrickwc - my understanding is that is the expected behaviour for top level groups in the Site Editor - but I'll leave this issue open for others to weigh in.

[patrickwc]

@jordesign thanks. It does seem strange that they behave differently in the FSE vs a post/page.

[carolinan]

It has been brought up many times by users that this is confusing, so in that sense it is unexpected. But it is not a bug because it is intentional. I think the question remains, "How can we make it easier for users" ?

[patrickwc]

If it's intentional without any information about it being intentional that's where the confusion lies. I think a little tooltip message in the FSE parent group block, explaining that alignment options aren't available on this one so they need to make a child group block would be good. I think this may also happen on other blocks.

[tellthemachines]

The root level block in the template or template part editors never has alignment options, because alignment options are always relative to a parent block's layout. By default, your root-level Group will be full width. In the post editor, root-level blocks have alignment because they get it from the Post Content block, which is their parent.

I understand that this isn't intuitive, and nesting Groups is a cumbersome workaround. Another option is to leave the template part contents full width (not adding the nested Group) and instead align the whole template part to the desired width. This would require that the template part be inside a Group though, so it probably only makes sense if you already have a Group block at the root level of your template.

A tooltip or message explaining why alignments aren't available could help mitigate the issue! @WordPress/gutenberg-design might have ideas on how best to do this.

[jasmussen]

One of the main challenges here is that the block editor started its life as a post editor, where the traditional layout is that of a centered column, and wide/fullwide were options to break out of that column. In a site editor context, that's quaint, and turned on its head: groups are not width-constrained by default, they fill all available space, and the centered column context is a property of a top level group.

To that end, some of the complexity here is because the post and page editors are still technically separate from the site editor. I would think that if you are editing pages through the site editor, there is enough context around the layout aspect that the question is less moot, suggesting this is mainly a dedicated post/page editor question, and that any affordances to explain this should be added there, less so in the site editor context. The problem may even start to disappear as some of the underying tech gets unified and simplified as a result. So I'd suggest any solutions here start simple.

One idea: always show the alignment button for the Group block, but show it disabled when no alignments are available. That can afford a tooltip explaining what @tellthemachines suggested above.

[patrickwc]

Hi @tellthemachines and @jasmussen. Thanks for your replies, I now understand why there is no alignment option in the FSE.

I think having them shown but disabled with a tool tip would be brilliant and would make it a lot easier for everyone to add content. If it helps I could create a ticket for that. I have not contributed to WordPress yet but I am eager to give it a try some time soon. I just need a bit of guidance on the correct procedure. Thanks

[tellthemachines]

@patrickwc thanks, it should be fine to use this issue to track the work as it already has a description of what's needed.

What kind of contribution would you be interested in? You can find some info on the different types of contributions here. Also welcome to WordPress 😄

[Humanify-nl]

I ended up here searching for group + root + align, for a problem that I've encountered since 6.5.?, where all my root level groups in the post/page editors have lost their alignment controls. For all my FSE sites. Nothing broke yet, because the block markup with aligns set to full is still intact on the groups.

In the site editor I have been used to set all templates with a core/group on root level (with main tag). This has a core/content inside with align: full and and its content set to "inner blocks use content width".

Yet, the page editor does not respect this at all and just centers all the content, there is no way to make a full width group with a centered text inside (anymore). Did I miss some big change in the group block? Or is there a new theme.json setting I need to be aware of?

Groups functioned as my container sections within the page editor, usually as a full width group with a background color or image and have their content inside use wide / content alignments.

If I understand these latest replies, I can fix this by adding another group (so, template-part>group (no alignment) > group, in the site editor, and then on root in the page: group>groups(-as-section) ?

Or do I misunderstand this?

[tellthemachines]

all my root level groups in the post/page editors have lost their alignment controls

@Humanify-nl have you checked if the layout of your Post Content block has "Inner blocks use content width" enabled? If it doesn't, it's expected that root blocks in posts won't have the alignment controls, for the same reason I mentioned above regarding root level blocks in templates.

[paaljoachim]

I happen to meet a similar issue yesterday. I noticed that I could not access the Full Width alignment controls in any post or page. I had no idea what I had done "wrong".

With Isabels @tellthemachines above response I went to a Page template - Post Content block has "Inner blocks use content width". Noticed it was enabled. Disabled it then checked a post and noticed even more limited alignment controls. Went back to "Inner blocks use content width" enabled it. Refreshed the site and noticed that Full Width alignment controls were back again.

This was very confusing. I am glad I asked Isabel as well as came across her very helpful above response to Humanify.

Powerful controls need to be marked better perhaps with a notification saying exactly how it will impact the site. As it is easy to make a mistake and not know how to fix it. For me I had to disable and then enable again to get full width controls back again.

[Humanify-nl]

all my root level groups in the post/page editors have lost their alignment controls

@Humanify-nl have you checked if the layout of your Post Content block has "Inner blocks use content width" enabled? If it doesn't, it's expected that root blocks in posts won't have the alignment controls, for the same reason I mentioned above regarding root level blocks in templates.

I have set it on that (inner blocks use content width), but whatever I do, there are no controls for width when I switch in the page editor. The same issue exists in twentytwentyfour. Just look at the full width group on homepage, how it is right now, is not possible from a fresh install.

Only way to fix this is to make my own dedicated full width section block with hardcoded alignfull.

Secondly, I think what you set the width to in a template (constricted), should be the same as the content width of the page editor. So when I set a group to constrict (= don't use content width) and set the group on alignwide, the content in the page editor of that template should be aligned wide. But it isn't. Everything placed (heading, paragraph, group) is centered to the default content width and can't be aligned wide or full.

The issue seems to be that the page editors have no clue what their template widths are (either set in group or the content block). And imho this is a big issue as it kills many layouts for existing sites.

[paaljoachim]

When using controls that have an greater impact than one might think there needs to be somekind of warning system in place making it very obvious what one has done.

Disabling the Post Content block has "Inner blocks use content width" has a greater impact than one likely would understand. It could be helpful to have a warning alerting the user what happens when disabling as well as enabling this option. Giving clarity through the warning either in the sidebar or perhaps a notification.

Here is a good example from the Color panel.

It gives a warning because the contrast of the Background and text makes the text hard to read. It would be helpful to do something similar when disabling the Post Content block has "Inner blocks use content width. As it would bring a needed hint/alert to the impact of disabling this toggle.

[Humanify-nl]

I've contributed to quite a few issues here over the past years, but I'm still unsure how all my broken websites (and to me personal: broken wordpress) are going to be fixed.

The problem? There is no way to make any group block alignwide inside page editor. Am I the only one experiencing this? Is this the end of full aligned groups that act as sections?

Even hardcoded alignfull inside a group code is not responding. It is all pushed into centered content in the page editor. Irregardless of layout setting constricted or not (!!!)

I've been working on FSE sites since 5.9, kept a very close watch to changes every update, and its extremely strange to me that something so impactful can just slip through without anyone noticing (who's actively building and maintaining block sites)? There is no alignwide nor alignfull controls available, only left,right,center (which is even more strange).

Adding a (previously working) js based block filter to add align controls to group block also is unresponsive (it just empties all the values)

[carolinan]

It is very difficult to follow the conversation in this issue, because it seems a different problem is brought up in every comment.

Can we please have:

• Separate GitHub issues for separate problems
• Clear descriptions of what is the expected behavior, what about it exactly is not working, including step by step instructions on how to reproduce the issues, with screenshots or videos to help assist troubleshooting.

[carolinan]

This is a screenshot of a new page, only containing a single group block, with none, wide, full width available. I am not able to reproduce "There is no way to make any group block alignwide inside page editor."

[patrickwc]

Hi @carolinan ,

I am happy to create a new issue for this. I think different problems being brought up while discussing issues comes with the territory when contributing to open source web development.

When I initially created this ticket, I didn't understand why I could not add an alignment control to a group block within the new full site editor (FSE) or a block template part area (I'll refer to this area as the Site Editor from now on to cover both scenarios). Now, thanks to @tellthemachines and @jasmussen, I understand the reasons for this as mentioned above. So I think a new solution which would better inform all editors in the WP community would be this new issue I have just created - Add a tooltip to alignment controls which have been removed from blocks in the site editor - https://github.com/WordPress/gutenberg/issues/61680

I'm now closing this issue and I encourage other users to create separate issues for other problems as requested by @carolinan . Cheers all!

[patrickwc]

Not closing as completed, closing as not planned - hopefully something will be planned in https://github.com/WordPress/gutenberg/issues/61680.