Make WordPress Core

Opened 4 months ago

Closed 3 months ago

Last modified 3 months ago

#60936 closed defect (bug) (fixed)

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

Reported by: andrewserong's profile andrewserong Owned by: isabel_brison's profile isabel_brison
Milestone: 6.5.3 Priority: normal
Severity: normal Version: 6.6
Component: Editor Keywords: gutenberg-merge has-patch dev-reviewed fixed-major
Focuses: Cc:

Description

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

Change History (15)

This ticket was mentioned in PR #6362 on WordPress/wordpress-develop by @andrewserong.


4 months ago
#1

  • Keywords has-patch added

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

@andrewserong commented on PR #6362:


4 months ago
#2

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.

@andrewserong commented on PR #6362:


4 months ago
#3

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

#4 @isabel_brison
4 months ago

  • Owner set to isabel_brison
  • Resolution set to fixed
  • Status changed from new to closed

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.

@isabel_brison commented on PR #6362:


4 months ago
#5

Committed in r57948.

#6 @isabel_brison
4 months ago

  • Keywords dev-feedback added
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening for commit to the release branch.

#7 @davidbaumwald
4 months ago

  • Milestone changed from 6.5.1 to 6.5.2

Milestone renamed

#8 @isabel_brison
4 months ago

  • Milestone changed from 6.5.2 to 6.5.3

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

This ticket was mentioned in Slack in #core by jorbin. View the logs.


3 months ago

#10 @jorbin
3 months ago

  • Keywords dev-reviewed added; dev-feedback removed

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

This ticket was mentioned in Slack in #core by jorbin. View the logs.


3 months ago

This ticket was mentioned in Slack in #core by jorbin. View the logs.


3 months ago

#13 @jorbin
3 months ago

  • Keywords fixed-major added

#14 @isabel_brison
3 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

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.

This ticket was mentioned in Slack in #core by jorbin. View the logs.


3 months ago

Note: See TracTickets for help on using tickets.