Themes: Support providing border radius presets #67544
Merged
Conversation
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
|
Size Change: +1.46 kB (+0.08%) Total Size: 1.91 MB
ℹ️ View Unchanged
|
addbac0 to
01db75a
Compare
youknowriad
commented
Dec 4, 2024
youknowriad
commented
Dec 4, 2024
|
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 Unlinked AccountsThe following contributors have not linked their GitHub and WordPress.org accounts: @WebWrotter. Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases. 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. |
youknowriad
commented
Dec 4, 2024
This comment was marked as resolved.
This comment was marked as resolved.
Contributor
Author
I have no idea why they look different :P I just copied the code :)
I'll check again but it's also possible that the CSS you had was outdated/cached no? |
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
977ec8b to
e0b81a9
Compare
Contributor
|
I've updated the constants as suggested, given the PR a rebase and quick smoke test. I think this is good to merge.
This is the same issue as referenced. The I played a little with the earlier idea of being able to pre-determine placement for the |
Member
|
It may be fine to "back port" the auto-flipping behavior of |
Contributor
|
Thanks @mirka 👍
I think this might be an improvement overall. In some scenarios, it still feels a bit clunky, like when there's still plenty of space in the normal position for the select popover if it just shrank a little bit. It'd be great if there were a way for the popover to shrink to a defined minimum height before flipping. Screen.Recording.2025-08-11.at.8.40.30.pm.mp4 |
justintadlock
added a commit
to x3p0-dev/x3p0-ideas
that referenced
this pull request
Sep 11, 2025
6 tasks
24 tasks
Contributor
|
Hi hi! How's the dev note for this PR going? Is any help needed? |
Member
|
@priethor Here's a draft. @aaronrobertshaw feel free to tighten it up/correct any assumptions: Dev note: Border Radius Presets Support in theme.jsonWordPress now supports defining border radius presets in theme.json, allowing theme authors to provide a curated set of border radius values that users can select from in the Block Editor's border controls. The ProblemPreviously, users could only input custom border radius values manually through the text input and unit picker controls. This made it difficult for theme authors to maintain consistent border radius values across a site's design system and provided no guidance to users about which border radius values fit the theme's design language. The SolutionFollowing the pattern established by spacing sizes, WordPress now supports defining border radius presets in theme.json. These presets appear as visual options in the border radius control, allowing users to quickly select from predefined values while maintaining the ability to enter custom values when needed. How to Use Border Radius PresetsTheme authors can define border radius presets in their theme.json file under {
"version": 3,
"settings": {
"border": {
"radiusSizes": [
{
"name": "None",
"slug": "none",
"size": "0"
},
{
"name": "Small",
"slug": "small",
"size": "4px"
},
{
"name": "Medium",
"slug": "medium",
"size": "8px"
},
{
"name": "Large",
"slug": "large",
"size": "16px"
},
{
"name": "Full",
"slug": "full",
"size": "9999px"
}
]
}
}
}User Experience
Backwards CompatibilityThis is a purely additive feature. Existing themes without border radius presets will continue to work as before, showing only the custom input controls. Themes can opt into this feature by adding border radius presets to their theme.json. GitHub Pull Request #67544 Props: youknowriad, aaronrobertshaw for implementation. |
Contributor
|
Thanks for putting that dev note together @ramonjd 🙇 I've tweaked a couple of things and it now LGTM. |
Contributor
|
Thanks all, it looks great! I'll mark it as done; feel free to publish it on make/core before RC1 |
Contributor
|
With WP 6.9 RC1 already released, please go ahead and publish the Dev Note on make.wordpress.org/core 🙏 |
Member
@aaronrobertshaw Are you able to get this up to Make Core? I can if not. |
Contributor
|
Thanks, Aaron! I marked it as fully done ✅ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Fixes #64041
What
This PR adds support for "border radius presets" to theme.json and allow picking border radius using these presets in the different controls. It uses the "spacing sizes" as a model to implement this.
It looks like this for the moment (pending the addition of icons)
Testing instructions
Example presets (place this in the
settingsobject in yourtheme.json):Example larger set of presets (9 in total) to display a dropdown list