Try responsive global block styles with states#77513
Open
tellthemachines wants to merge 13 commits intotrunkfrom
Open
Try responsive global block styles with states#77513tellthemachines wants to merge 13 commits intotrunkfrom
tellthemachines wants to merge 13 commits intotrunkfrom
Conversation
tellthemachines
requested review from
MaggieCabrera,
andrewserong,
ramonjd and
t-hamano
tellthemachines
added
[Type] Feature
|
Size Change: +1.13 kB (+0.01%) Total Size: 7.77 MB 📦 View Changed
ℹ️ View Unchanged
|
|
Flaky tests detected in e5e4f4f. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/25034626216
|
Contributor
|
Thanks for picking up this effort, looking forward to seeing it in the wild 🙇 I know it's early days but had a quick question regarding the use of "block states". These were going to be implemented across both Global Styles and block supports correct? There's a PR open for the block supports side of state styles: #76491 (comment). From memory, there were some related PRs spun up for that that potentially involved refactoring the |
Contributor
Author
This PR only implements responsive block states in global styles. Block instances will be dealt with later, building on Maggie's work in #76491. |
tellthemachines
commented
Apr 24, 2026
| const RESPONSIVE_BREAKPOINTS = array( | ||
| 'mobile' => '@media (width <= 480px)', | ||
| 'tablet' => '@media (480px < width <= 782px)', | ||
| ); |
Contributor
Author
There was a problem hiding this comment.
Currently these match the default editor responsive breakpoints, but once #75707 is done they will be configurable from theme.json.
tellthemachines
commented
Apr 24, 2026
| if ( ! empty( $options['media_query'] ) && ! empty( $block_rules ) ) { | ||
| $block_rules = $options['media_query'] . '{' . $block_rules . '}'; | ||
| } | ||
|
|
Contributor
Author
There was a problem hiding this comment.
get_layout_styles takes a new media_query option which should be one of the RESPONSIVE_BREAKPOINTS defined above.
This was referenced Apr 24, 2026
tellthemachines
commented
Apr 24, 2026
| * dimensions/width) — apply the variation class directly to it. | ||
| */ | ||
| $feature_element_selector = str_replace( $shortened_selector, '', $clean_style_variation_selector ); | ||
| $combined_selectors = str_replace( $feature_element_selector, '', $clean_style_variation_selector ); |
Contributor
Author
There was a problem hiding this comment.
Added this fix because Button width and typography styles were not being applied correctly to block style variations. This is an issue in trunk too, so potentially this fix could be extracted from here. It's a minor thing so not sure it's worth it.
tellthemachines
commented
Apr 24, 2026
| if ( is_array( $css_feature_selector ) ) { | ||
| $css_feature_selector = $css_feature_selector['root'] ?? null; | ||
| } | ||
| $css_selector = is_string( $css_feature_selector ) ? $css_feature_selector : $selector; |
Contributor
Author
There was a problem hiding this comment.
Extracted these from the condition below so we can reuse them for the responsive rules.
tellthemachines
commented
Apr 24, 2026
| : getBlockStyleVariationSelector( | ||
| styleVariationName, | ||
| baseSelector | ||
| ); |
Contributor
Author
There was a problem hiding this comment.
This is the other part of the fix for the Button variation selector issue mentioned above.
tellthemachines
commented
Apr 24, 2026
| ) { | ||
| const { user, base, merged, onChange } = useContext( GlobalStylesContext ); | ||
| const isPseudoSelectorState = state?.startsWith( ':' ); | ||
| const pseudoSelectorState = isPseudoSelectorState ? state : undefined; |
Contributor
Author
There was a problem hiding this comment.
The naming here is a bit confusing. Might we in the future have states that are neither responsive nor pseudo-selectors? If not it might not be a problem
tellthemachines
requested review from
ajitbohra,
fabiankaegy and
juanmaguitar
as code owners
|
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. |
Co-authored-by: Copilot <copilot@github.com>
Co-authored-by: Copilot <copilot@github.com>
tellthemachines
force-pushed
the
try/responsive-global-block-styles
branch
from
d4ba7e7 to
c185831
Compare
talldan
reviewed
Apr 28, 2026
Contributor
There was a problem hiding this comment.
The premise of this PR looks pretty good, though I wonder if it'd be best to sort out how the different state groups (responsive, pseudo, navigation block 'current') are going to work together first. What are your thoughts @tellthemachines ?
Another thing is support for elements. The first thing I tried testing naively was setting responsive font styles for heading, but then I realised they're really controlled by heading element styles.
Comment on lines
+58
to
+61
| export const RESPONSIVE_STATES: StateDefinition[] = [ | ||
| { value: 'mobile', label: __( 'Mobile' ) }, | ||
| { value: 'tablet', label: __( 'Tablet' ) }, | ||
| ]; |
Contributor
There was a problem hiding this comment.
When a block only has responsive styles, the dropdown looks like this:
It might better to have mobile after tablet so that the order is like desktop, tablet, mobile, the same as the dropdown here:
| // All blocks receive responsive states by default. | ||
| if ( name.includes( '/' ) ) { | ||
| const blockPseudoStates = VALID_BLOCK_STATES[ name ] ?? []; | ||
| return [ ...blockPseudoStates, ...RESPONSIVE_STATES ]; |
Contributor
There was a problem hiding this comment.
This does get interesting when a block (like button) has the pseudo states:
We did chat about it in DM (and also mentioned here), how users might want to select specific styles for mobile + focus (as an example), so this should probably end up more like two separate radio groups. The same might also apply for the navigation link's 'current' state (Navigation link: add support to style current menu item via theme.json).
Borrowing the video from #57719, the dropdown should probably look more like this:
button.mp4
I guess it might require some refactoring of how the states work in trunk.
| @@ -53,6 +53,12 @@ export function useStyle< T = any >( | |||
| state?: string | |||
Contributor
There was a problem hiding this comment.
If as per the other comment, a user is in the future able to select a combination of states, then this would need to be updated to support more than just a string. It's probably not too complicate though, and object like { responsive: 'mobile', pseudo: 'focus' } would work I think, and that would remove the need for some of the isPseudoSelectorState stuff.
Co-authored-by: Copilot <copilot@github.com>
Contributor
Author
Hmm what are you seeing? In my testing I can set the font styles in the Heading block to specific values for Tablet or Mobile and it seems to be working as expected. If the theme enables fluid typography, then the font size you chose will be inside a
Yeah better solve this sooner than later 😅 |
Contributor
Author
|
Note: because "indent all paragraphs" for Paragraph and "enlarge on click" for Image are actually settings, they don't work out of the box with these states. I've chosen to hide them on non-default breakpoints for now; we can revisit in a follow-up if we feel it's necessary. 
|
Contributor
Maybe I didn't test it correctly. I'll take another look.
Yep, I'm happy to take a look 👍 |
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
3 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?
Attempts to solve #13363 by using block states to represent "tablet" and "mobile" breakpoints for block global styles.
"tablet" and "mobile" are using the block editor defaults for now; later it might be possible to customise them.
I had considered trying container queries for this to allow blocks to respond to their container, but it is impractical to do so for global styles due to the requirement that the container be flagged with the
container-typeproperty. In global styles we of course have no way of knowing what container the block will be in, and attempting to add that property wholesale to all containers can have unpredictable effects.WIP - I haven't yet checked whether all supports are working correctly.
Testing Instructions
In theme.json
Under styles > blocks > blockname add "mobile" and "tablet" objects with styles defined as per the doc.
In the UI
Open global styles, head to Blocks and check that each block has a states dropdown with "tablet" and "mobile" states. Check that changes made with those states selected only apply to those breakpoints.
Use of AI Tools
I got copilot to write most of this, with a combination of claude sonnet 4.6 and gpt 5.3 codex. Unusually for gpt it did not add unit tests of its own accord, so I'll probs add those later once we're sure of the direction 😄