Layout: Output of base layout rules conflicts with wide alignment of blocks in classic themes

[andrewserong]

As reported in the Gutenberg repo in ​https://github.com/WordPress/gutenberg/issues/60413 there is a bug in WordPress 6.5 with base layout rules that are applied to container blocks such as Group in Classic themes. The bug appears to have been introduced in #60130 and results in layout rules being applied to children of the Group block, with max-width rules being output that reference CSS variables that don't exist in Classic themes (or more specifically, themes that do not set settings.layout.contentSize or settings.layout.wideSize in theme.json).

A solution (also proposed in the Gutenberg repo) in ​https://github.com/WordPress/gutenberg/pull/60489 is to skip outputting the max-width rules that reference contentSize or wideSize CSS variables if the contentSize and wideSize values are not available.

This should restore the previous behaviour for Classic themes such as TwentyTwenty, without affecting block themes in any way.

For full reproduction steps of the issue, please see ​https://github.com/WordPress/gutenberg/issues/60413

A short version is:

1. Activate Twenty Twenty theme
2. Add a Group block to a post or page, set its alignment to Full
3. Add a Cover or Group block as a child of that block, and set it to an alignment of Wide
4. Notice that on the site frontend, the block extends to the full width of the container, and not the desired Wide width

This is a backport of ​https://github.com/WordPress/gutenberg/pull/60489 from the Gutenberg repo.

Skip outputting base layout rules that reference content of wide sizes CSS variables, if no layout sizes exist in the current theme.json.

🚧 🚧 🚧 This PR needs to update tests before it is ready for review 🚧 🚧 🚧

### Testing instructions

Activate Twenty Twenty theme and add the following test markup from ​https://github.com/WordPress/gutenberg/issues/60413 to a post:

Full group.

Wide group.

Save and publish the post. On the site front end, prior to this PR, the wide group block will extend to the full width of its container. With this PR applied, its max-width should be that provided by the theme (in the case of Twenty Twenty, it's 120rem).

To test against regressions, switch to a block theme and make sure that constrained layout works as expected in the post and site editors and on the site front end.

Trac ticket: https://core.trac.wordpress.org/ticket/60936

I've just added a draft for this PR — I haven't quite finished this yet (still need to update tests), but thought I'd at least push the PR to save my progress, as I've finished up for the week. I'll return to this on Monday.

I've switched the PR over to "ready for review" now that the tests have been updated. A note on the tests as the readability of the changes is not great:

• Tests that are to do with layout now have contentSize and wideSize and the output strings reflects the CSS variables being output, and the rules that use those CSS variables are present.
• For tests that have nothing to do with layout, the contentSize and wideSize settings have not been added, and the test strings have been updated to reflect that if those sizes are not present, the rules that reference them are absent in the output.

Between the above two changes to existing tests, there should be good coverage for the two states (outputting rules that reference content/wideSize and skipping the output).

[isabel_brison]

In 57948:

Editor: skip outputting base layout rules if content and wide size values don’t exist.

Skip outputting layout rules that reference content and wide sizes CSS variables, if no layout sizes exist in the current theme.json.

Props andrewserong.
Fixes #60936.

Committed in r57948.

[isabel_brison]

Reopening for commit to the release branch.

[davidbaumwald]

Milestone renamed

[isabel_brison]

Looks like this didn't get committed to the release branch so I'm updating the milestone to 6.5.3.

[jorbin]

[57948] looks good for backport to the 6.5 branch.

[isabel_brison]

In 58056:

Editor: skip outputting base layout rules if content and wide size values don’t exist.

Skip outputting layout rules that reference content and wide sizes CSS variables, if no layout sizes exist in the current theme.json.

Props andrewserong.
Reviewed by jorbin.
Merges [57948] to the 6.5 branch.
Fixes #60936.