Spawned from #20771

I started building a block-based theme from scratch today, and was surprised by how hard it still is to do some things.
The hardest part when creating a theme for use with the editor is figuring out how to handle the following:

• Add max-width to blocks so they are limited to a pre-defined content-width
• Handle alignwide
• Handle alignfull

Writing the CSS for these things is an absolute nightmare, especially in FSE where the user can add a sidebar, 2 sidebars, have nested columns within groups that are nested in columns and so on.

Generating these styles automatically would be ideal, and if done properly would solve a lot of issues.

theme.json

In theme.json we could use 2 options:

• contentWidth: (string) can use any CSS value (90%, 1000px, 60em etc)
• alignWideWidth: (string|number) If string then any CSS value. If number then assume proportionate to the contentWidth (1.25 would be 1.25 times the contentWidth).

Global Styles

In global-styles we'd need a setting for the content-width.
Adding the align-wide-width option would be of secondary importance and not really necessary. Good to have, but not a requirement.

EDIT: After further experimentation I realized that what we need is not a site-width as this original post was stating, but a content-width.
Site-width would be useful when building a "boxed" layout, which is not what most people will want. Content-width on the other hand describes more accurately what this is about: Setting a max-width for the actual blocks.
The site-width can be accomplished with columns if needed (3 columns, with the middle one set to 900px and the other 2 left to auto-calc)