Block Supports: Add min width support to dimensions#76949
Merged
aaronrobertshaw merged 6 commits intotrunkfrom Apr 17, 2026
Merged
Block Supports: Add min width support to dimensions#76949aaronrobertshaw merged 6 commits intotrunkfrom
aaronrobertshaw merged 6 commits intotrunkfrom
Conversation
aaronrobertshaw
added
[Type] Enhancement
github-actions
Bot
added
[Package] Blocks
|
Size Change: +158 B (0%) Total Size: 7.75 MB 📦 View Changed
ℹ️ View Unchanged
|
|
Flaky tests detected in 182ea51. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/24495256938
|
30 tasks
aaronrobertshaw
force-pushed
the
add/min-width-support
branch
from
37a509a to
d7173bd
Compare
aaronrobertshaw
requested review from
ajitbohra,
ellatrix,
fabiankaegy,
juanmaguitar,
spacedmonkey and
tellthemachines
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. |
Member
|
Gave this a quick run today - looking nice and working as described so far. I'll dive more deeply next week. Just noticed one small thing so far - should the hasDimensionsSupport also check for |
Contributor
Author
Thanks for catching that, now sure how I missed it. Tired eyes trawling through all the config spots in the code I guess 🤷 . Fixed now. |
Member
|
I finally came back to go through the testing steps (didn't look at the code) and it's all working as advertised: theme.json, global styles, presets, block styles. 
Looking good - I think it's a logical addition to block supports next to min height! |
Contributor
Author
|
Thanks for re-testing this one. I'll get it rebased and resolve the new conflict then. We can a final code review before merge |
aaronrobertshaw
force-pushed
the
add/min-width-support
branch
from
97803be to
182ea51
Compare
Contributor
Author
|
I've rebased this and given it a quick smoke test locally. I think it's ready for a final code review with a view to merge soon. |
tellthemachines
approved these changes
Apr 17, 2026
Contributor
tellthemachines
left a comment
tellthemachines
left a comment
There was a problem hiding this comment.
LGTM! I'm glad we're finally allowing a way to create horizontally scrolling blocks.
UI-wise, we might want to have another look at the dimensions panel as a whole when flex child controls are enabled:
especially because fixing #53766 will require adding something like a "max-width" option in those flex width controls 😅 but that shouldn't block this PR.
| } | ||
|
|
||
| function useHasSpacingPresets( settings ) { | ||
| function hasSpacingPresets( settings ) { |
Contributor
There was a problem hiding this comment.
I wonder why these were named as if they were hooks when they're not.
Contributor
Author
There was a problem hiding this comment.
Not sure but after rebasing, these throw linting errors so I was forced to update them here. I chose to contain the updates here to the dimensions panel for now.
Addressing all block supports could be a follow up or left to be updated whenever each block support gets touched next
| const minimumMargin = -Infinity; | ||
| const [ minMarginValue, setMinMarginValue ] = useState( minimumMargin ); | ||
|
|
||
| const resetAllFilter = useCallback( ( previousValue ) => { |
Contributor
There was a problem hiding this comment.
Was this change needed? It seems to have just been moved up from below.
Contributor
Author
There was a problem hiding this comment.
I tried to avoid this but no matter what, I was getting a conditional call error by the linter. Couldn't for the life of me see a conditional in the code above the useCallback call.
I wonder if the linter's control flow graph was somehow messed up with the fake hook naming and renaming them. Either way, I didn't think it hurt to group all the hook calls together neatly.
Contributor
Author
|
Thanks for the reviews and testing
Agreed. A holistic re-think here is definitely needed. With the text gradient block support work and the recent |
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.
Related to: #76525
What?
Adds
minWidthas a new dimension block support, following the same pattern as the existingminHeightsupport.Why?
Blocks currently support
height,minHeight, andwidthas dimension properties, but there is no way to set a minimum width. This is a common CSS need, for example, ensuring a container or layout element doesn't collapse below a usable size on smaller viewports.How?
The implementation mirrors the existing
minHeightsupport across all layers:Style Engine (JS + PHP)
minWidthCSS rule generator andmin-widthproperty mapping with dimension preset (dimensionSizes) CSS variable support.Block Supports
minWidthas a supported dimension feature in the block supports system.__EXPERIMENTAL_STYLE_PROPERTYconstants.Block Editor
minWidthto the dimensions panel UI with its ownDimensionControl(supports presets viadimensionSizes).useSettingsForBlockElementanduseSettings.__experimentalDefaultControls. The global styles panel shows all controls by default.Theme JSON
minWidthto valid settings, valid styles, CSS property mappings, and appearance tools feature list.Schemas
theme.jsonandblock.jsonschemas.Blocks
minWidthsupport on the Group block.Linting
useHas*helper functions in the dimensions panel to drop theuseprefix, since they are plain functions (not hooks). This avoids false positives from thereact-hooks/rules-of-hookslint rule.useCallbackcall above non-hook function calls to resolve a pre-existing conditional hook lint error.Testing Instructions
Setup
appearanceToolsis enabled in the theme'stheme.json, or manually add"minWidth": trueundersettings.dimensions.1. Block inspector -- min width control
400px.2. Dimension presets
dimensionSizespresets intheme.json, confirm the min width control offers those presets in its dropdown.--wp--preset--dimension--{slug}) is applied.3. Global styles -- min width
4. Block styles override global styles
200pxvs a global500px).5. Theme.json support
minWidthvalues directly intheme.jsonunderstyles.blocks.core/group.dimensions.minWidthorstyles.dimensions.minWidth.Automated Tests
Run the automated tests:
Screenshots
(after adopting min width support for Pullquote block)