Site Editor: Image Block lacks alignment controls

[annezazu]

Description

This came up as part of the FSE Outreach Program's All Things Media exploration:

When adjusting images on FSE, there is no settings for alignment, which was present in Post editor.

Possibly related: #38557

Step-by-step reproduction instructions

1. Open the site editor
2. Add an image
3. Notice in the toolbar there's no option to change alignment.

Screenshots, screen recording, code snippet

Environment info

• WordPress 5.9
• TT2
• Chrome
• MacOS

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

[Mamaduka]

I think inside the template, individual blocks need containers (Group or similar) for alignment.

We need to document the Layout and Alignment relation somewhere. I don't remember if there was a "Make/Core" post related to this change.

Cc @youknowriad, @ntsekouras.

[ntsekouras]

I think inside the template, individual blocks need containers (Group or similar) for alignment.

That's true. The alignments depend on their container and in site editor we assume there is no container because that's the whole page in front end. What this means is that by default root level blocks take all the available space which is 100%.

In post editor we already have a container and the layout config is used. So if a theme defines layout: { contentWidth: something, wideWidth: something } in theme.json, that's the layout config that gets applied in the post editor.

The dev note for layouts is here: https://make.wordpress.org/core/2021/06/29/on-layout-and-content-width-in-wordpress-5-8/

[Mamaduka]

Thanks, Nik.

[annezazu]

Hmm this definitely seems to result in a confusing experience! The same person also reported the following:

When inserting YouTube block over a cover image, right align doesn’t work. Same happens with other media contents over the cover image. /imgur /image

It's not quite intuitive that one needs to add a Group block > Cover block > Image block in order to have this work properly.

Is this "working as expected" and more of a design experience to help guide folks to know what to do? Curious how to move this forward but that seems best from what I'm seeing :) One thought is to just defer to this issue on simplifying the layout concept but that doesn't help the initial problem of folks not knowing they need to add a container block in the first place: #36082

[annezazu]

Going to close this out and defer to the simplifying layout controls issue.