Layout: Skip outputting base layout rules that reference content or wide sizes if no layout sizes exist

[andrewserong]

This is a backport of WordPress/gutenberg#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.

Testing instructions

Activate Twenty Twenty theme and add the following test markup from WordPress/gutenberg#60413 to a post:

<!-- wp:group {"align":"full","backgroundColor":"primary","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-primary-background-color has-background"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Full group.</p>
<!-- /wp:paragraph -->

<!-- wp:group {"align":"wide","backgroundColor":"accent","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide has-accent-background-color has-background"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Wide group.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp: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

---

This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

[andrewserong]

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.

[github-actions]

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

• The Plugin and Theme Directories cannot be accessed within Playground.
• All changes will be lost when closing a tab with a Playground instance.
• All changes will be lost when refreshing the page.
• A fresh instance is created each time the link below is clicked.
• Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
  it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props andrewserong.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[andrewserong]

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).

[tellthemachines]

Thanks for the PR! Changes LGTM and work as expected.

[tellthemachines]

Committed in r57948.