FSE: Provide a way for Gutenberg to provide alignment styles for the front end.

[kjellr]

At the moment, the largest boilerplate part of any block-based theme CSS is its alignment styles. Here's an example from Twenty Twenty-One Blocks:

https://github.com/WordPress/theme-experiments/blob/0984b1edf41d4d525c1d241b52423e21fc234e34/twentytwentyone-blocks/style.css#L35-L109

These styles are only present to mirror the default, wide, and full alignments that are present in the editor. In the editor, those styles are provided to themes by default. This should be the case for the front end as well.

[aristath]

These styles are only present to mirror the default, wide, and full alignments that are present in the editor. In the editor, those styles are provided to themes by default. This should be the case for the front end as well.

+1 to this. Getting layout & alignment styles correct for blocks is still one of the most complicated and underrated issues in themes dealing with blocks. FSE themes shouldn't have to reinvent the wheel every time, we should come up with some basic styles (maybe opt-in) so that theming becomes a bit easier.
Related: #25160 where I am attempting to do just that: figure out the bare minimum styles for block-based themes layouts.

[mrwweb]

I just want to note that there are two pretty different approaches to alignwide and alignfull I see.

• Constrain the content width with a container and use negative margin and viewport-width units for alignwide and alignfull. Bill Erickson and Justin Tadlock both have good articles on this technique.
• Constrain all content blocks with max-width and align with margin-left: auto; and margin-right: auto;. Adjust max-width for alignfull and alignwide. Justin Tadlock also covered this technique.

I mostly see people using the first technique. I prefer the second, and I think the linked article makes a good point about it's flexibility in a block-centric future where alignfull might not necessarily equal 100vw.

I'm not 100% sure what the implications of this are for this ticket, other than that it seems that it's only possible to provide one way or the other and so it should probably provide a way to opt-out of styles for people who want to use the other technique.

[kjellr]

I think for the purposes of this issue, the goal would be to just replicate the method used in the editor (which is more or less the second bullet above).

From there, if a theme author wanted to re-write that for some reason, they could do so, and the same code would presumably work in both the editor and the front end.

[paaljoachim]

In relation to these things talked about in the issue...
For instance boxed themes. Where the content is 80% with a white/grey background. 1px black border. Border radius to round all the content. An image background. I did a quick mockup to show what I mean.

This shows a boxed layout.
Content is perhaps 80%.
Greyish content background color.
Content has a border color and border radius.
An individual page/post background image.

[scruffian]

I think this closed by #29335.