Responsive block instance styles#78384
Open
talldan wants to merge 12 commits into
Open
Conversation
talldan
requested review from
ellatrix,
spacedmonkey and
tellthemachines
as code owners
talldan
added
[Type] Enhancement
github-actions
Bot
added
[Package] Editor
|
Size Change: +935 B (+0.01%) Total Size: 7.97 MB 📦 View Changed
ℹ️ View Unchanged
|
Contributor
|
Hmm can we tell whether the responsive preview has been enabled from a block state or set by the user? Because it switches straight back to desktop if we select another block regardless of how it was enabled 😬 so would be good to ensure that doesn't happen if user set the preview. resizing_screen.mp4 |
|
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. |
Contributor
Author
Yeah, that behavior seems to be a bit tricky to get right. Not helped by the separate states being in two different stores. Will look into this bug. |
ramonjd
reviewed
May 18, 2026
| // `.$unique_class:hover` match directly without needing a descendant. | ||
| // If the block declares selectors.root with a descendant (e.g. the button | ||
| // block's ".wp-block-button .wp-block-button__link"), we extract the last | ||
| // class and walk to that element. Otherwise we fall back to the wrapper. |
Member
There was a problem hiding this comment.
This is working excellently. I'm really excited about this feature.
Kapture.2026-05-18.at.15.46.15.mp4
Otherwise we fall back to the wrapper.
I think I found an edge case (at least on the frontend) for the Icon block.
The root is .wp-block-icon svg, but the state class falls back to the wrapper element, e.g., .wp-states-9fbee793 instead of the svg. It's most obvious when you play around with width for that block.
The editor seems to behave properly.
| Editor | Frontend |
|---|---|
 |
 |
Maybe it affects other such blocks, like table as well (.wp-block-table > table)
Contributor
There was a problem hiding this comment.
Contributor
There was a problem hiding this comment.
I just ran a local test with #78326 on top of this PR and it fixes:
- Button width and text orientation
- Icon color/width
- Search color, with the interesting side-effect of applying to the input (I rather like it! any reason not to do this?)
default:
mobile:
- Accordion header letter-spacing/decoration
- Min-width on Group
- Shadow on Image
All the remaining issues listed here aren't just selector-related. Most are due to either a custom implementation for that block or being tied to markup changes, and we'll likely have to address them individually in follow-ups.
Contributor
There was a problem hiding this comment.
If anyone wants to test, I pushed the branch with the two PRs and made a draft here.
Contributor
tellthemachines
left a comment
tellthemachines
left a comment
There was a problem hiding this comment.
This is looking pretty good so far! The biggest thing is to work out how the preview should behave 😅
| // `.$unique_class:hover` match directly without needing a descendant. | ||
| // If the block declares selectors.root with a descendant (e.g. the button | ||
| // block's ".wp-block-button .wp-block-button__link"), we extract the last | ||
| // class and walk to that element. Otherwise we fall back to the wrapper. |
Contributor
There was a problem hiding this comment.
Contributor
There was a problem hiding this comment.
Very cool! Some non-blocking impressions from playing around with it, I believe these aren't directly about this PR in particular so nothing that needs actioning right here:
With a state active, for some reason I found myself wanting to click on the "Tablet" badge to switch the active state off and go back. Would it be worth adding a close button / cross icon to the badges?
In the above screenshot I added pink as a background color on the Tablet viewport, and when I went back to the desktop view, I couldn't immediately see which other viewports I'd customised. I.e. back in desktop, I can't see that this will be pink in the Tablet viewport:
I wonder if there's an opportunity to expose in the UI somewhere that there are viewport / states styles added for this block? I.e. so that somewhere here there's a dot or something that indicates what's been modified 🤔
Otherwise, working nicely for me so far! I did find myself wondering if there was a way to copy from Tablet to Mobile, too (or clear out customisations for a particular viewport), but I think that's sort of "nice to have" territory 😄
Contributor
Author
I've tried a different approach to this now. Let me know if it works better for you. |
talldan
commented
May 18, 2026
| return ( | ||
| <> | ||
| { selectedState !== 'default' && ( | ||
| <BlockInspectorPreTabsFill> |
Contributor
Author
There was a problem hiding this comment.
It should be possible to completely remove this slotfill, UI is rendered directly in the inspector now instead.
talldan
commented
May 18, 2026
| </Spacer> | ||
| </BlockInspectorPreTabsFill> | ||
| ) } | ||
| <BlockStyleStateProvider value={ selectedState }> |
Contributor
Author
There was a problem hiding this comment.
BlockStyleStateProvider can possibly be removed as well now, but I might leave it to a follow-up.
Contributor
Yeah it's definitely less disconcerting if using the preview for anything other than defining responsive styles. If you are defining responsive styles, it now feels like being in the responsive preview and selecting a different block should enable the corresponding state on it 😅 Should we just show mobile state for all blocks when mobile view is enabled? The risk with this approach is that users might think they can also change markup/block positions (or anything outside the block inspector controls) per breakpoint. Also, ideally it should be possible to style different breakpoints from a phone. This is something to think of for a follow-up, but currently we don't show either the settings sidebar or the preview dropdown on small screens. What's worse, they disappear at different breakpoints 😕
|
Contributor
Author
|
@tellthemachines An option I was considering - default 'Show state on canvas' to off, and when a user selects a state display a block preview in the inspector. If a user toggles 'Show state on canvas' on, the preview hides and the canvas works like it does now in this PR. That might lead to it being less jarring, and offer better support for styling breakpoints larger than the current size. Block previews would need to be fixed though as they don't work correctly in trunk (they're stuck at tablet size). |
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
4 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?
See #77817
Adds responsive style states for block instances. Allows users to add tablet / mobile styles for any block that supports styles.
How?
Roughly follows the same path laid by pseudo styles, except more block types are supported.
Testing Instructions
Screenshots or screencast
Use of AI Tools
Codex / OpenCode. I've manually reviewed quite a lot of the code, but need to do another self-review pass.