WordPress now supports defining border radius presets in theme.json JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML., allowing theme authors to provide a curated set of border radius values that users can select from in the Block Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. Editor’s border controls.
The Problem
Previously, 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 Solution
Following 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 Presets
Theme authors can define border radius presets in their theme.json file under settings.border.radiusSizes :
{
"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
- With 1-8 presets: Users see a slider with stops for each border radius preset
- With 9 or more presets: The control displays as a dropdown select menu
- Users can always access custom value input through the custom button to the right of the control
- The interface automatically adapts based on the number of presets defined
Backwards Compatibility
This 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
Related Issue #64041
Props to @youknowriad and @aaronrobertshaw for implementation, @ramonopoly and @priethor for dev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include a description of the change, the decision that led to this change, and a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase. and reviews.
#dev-notes,
#dev-notes-6-9#6-9
