Add support for layout responsive styles#78543
Merged
Merged
Conversation
tellthemachines
added
[Type] Enhancement
26 tasks
|
Size Change: +1.18 kB (+0.01%) Total Size: 8.13 MB 📦 View Changed
ℹ️ View Unchanged
|
talldan
reviewed
May 22, 2026
|
Flaky tests detected in d3ba307. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/26426745884
|
tellthemachines
force-pushed
the
add/responsive-layout-support
branch
from
36c55e2 to
ef7d14c
Compare
|
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
talldan
reviewed
May 25, 2026
Contributor
talldan
left a comment
talldan
left a comment
There was a problem hiding this comment.
It's a lot of code, so I'm not sure I'm able to take it all in, but it looks pretty reasonable in terms of changes.
A lot of the code seems to be concerned with gating output (shouldOutputX), which does add a bit of complexity to existing code.
Other than that it's mostly looping over the responsive style, plus some other refactoring/supportive changes, so while a big diff, nothing really unexpected.
I think I spotted one bug when allowSwitching is enabled (mentioned in a comment).
| function gutenberg_normalize_state_style_for_css_output( $style ) { | ||
| return gutenberg_normalize_state_preset_vars( $style ); | ||
| $style = gutenberg_normalize_state_preset_vars( $style ); | ||
| unset( $style['layout'] ); |
Contributor
There was a problem hiding this comment.
Could probably swap lines 46 & 47, so that gutenberg_normalize_state_preset_vars doesn't have to loop over the layout property.
| return ''; | ||
| } | ||
|
|
||
| const layoutType = getLayoutType( layout?.type || 'default' ); |
Contributor
There was a problem hiding this comment.
Have we tested how it works if allowSwitching is true? In that situation, could the user set say a flex layout by default, but grid on mobile?
Here it seems like the base layout is always passed in, so I would guess it's not supported, but I'm wondering if there are UI changes needed to support that.
Edit: I tested by enabling switching on the group block, and it looks like this might be a bug. I think when a responsive state is selected, the layout type switcher could be hidden.
Contributor
Author
There was a problem hiding this comment.
I've now disabled switching when states are enabled, thanks for spotting this!
tellthemachines
commented
May 26, 2026
| * | ||
| * @param mixed $layout Layout object. | ||
| * @return array Child layout values, or an empty array. | ||
| */ |
Contributor
Author
There was a problem hiding this comment.
This function and the one below are necessary because in a viewport state object, both child layout and layout properties are under "layout".
This is because in the default state, "layout" contains layout properties and "style > layout" contains child layout ones. In retrospect, we might have differentiated them better from the start 😅 but not much can be done now.
Contributor
Author
|
OK I've addressed the feedback and done a bit more simplification on the PHP side.
Would it be better to leave the duplicated styles in though? |
talldan
approved these changes
May 26, 2026
Contributor
talldan
left a comment
talldan
left a comment
There was a problem hiding this comment.
Nice work, this tests well for me!
Would it be better to leave the duplicated styles in though?
I don't really have a preference, I think stick with how it is for now. 👍
This was referenced May 27, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
Part of #77817.
Adds support for setting responsive layout, block spacing and child layout styles.
Testing Instructions
Known issues: Navigation block layout styles not being applied correctly. Working on it :)
Use of AI Tools
Used gpt 5.5/codex and opus 4.7/claude