make.wordpress.org [01k9w4k3b0xxqse6n5a8k2fwy5]

make.wordpress.org 🔗 **Source:** [make.wordpress.org](https://make.wordpress.org/core/2025/11/12/theme-json-border-radius-presets-support-in-wordpress-6-9/) > [!note]+ Document Notes > tags: [wordpress, theme-development, border-radius, block-editor] > author: Aaron Robertshaw > source: Make WordPress Core > reference: https://make.wordpress.org/core/2025/11/12/theme-json-border-radius-presets-support-in-wordpress-6-9/ > date created: 2025-01-02 15:30 > > # 🏷️ Title: Theme.json Border Radius Presets Support in WordPress 6.9 >  ## 🧰 Action Inbox - [H1] Implement border radius presets in theme.json — new feature for WP 6.9 #wordpress - [H2] Update theme design systems with consistent radius values — improved UX #theme-development - [H3] Test preset control adaptability (slider vs dropdown) — 1-8 vs 9+ presets #testing ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - [GitHub Pull Request #67544](https://github.com/WordPress/wordpress-develop/pull/67544) - [Related Issue #64041](https://github.com/WordPress/gutenberg/issues/64041) ## 📝 Summary - WordPress 6.9 introduces border radius presets in theme.json, allowing theme authors to define curated border radius values - Addresses the previous limitation where users could only input custom border radius values manually - Provides a consistent design system approach similar to spacing sizes presets - The feature is backward compatible and purely additive - Enhances user experience with visual preset selection while maintaining custom input options ## 📖 Main Content WordPress 6.9 introduces support for border radius presets in theme.json, addressing a significant gap in the Block Editor's design system capabilities. Previously, users were limited to manually entering border radius values through text inputs, making it challenging for theme authors to maintain design consistency. The new feature follows the established pattern of spacing sizes presets, allowing theme authors to define a curated set of border radius values in their theme.json file. Users can then select from these visual presets while retaining the ability to enter custom values when needed. The implementation adapts to different numbers of presets: 1-8 presets display as a slider with stops, while 9 or more presets show as a dropdown menu. This adaptive interface ensures optimal user experience regardless of the preset count. ## 🗒️ Notes #### ⏱️ [00:00](https://make.wordpress.org/core/2025/11/12/theme-json-border-radius-presets-support-in-wordpress-6-9/#introduction) — [H1] Border Radius Presets Introduction - Key idea: WordPress 6.9 adds border radius presets to theme.json for curated design system values - Evidence: "WordPress now supports defining border radius presets in theme.json, allowing theme authors to provide a curated set of border radius values" #### ⏱️ [01:00](https://make.wordpress.org/core/2025/11/12/theme-json-border-radius-presets-support-in-wordpress-6-9/#problem) — [H2] The Problem Statement - Key idea: Previous manual input limitation prevented consistent design systems - Evidence: "Previously, users could only input custom border radius values manually through the text input and unit picker controls" #### ⏱️ [02:00](https://make.wordpress.org/core/2025/11/12/theme-json-border-radius-presets-support-in-wordpress-6-9/#solution) — [H2] Solution Following Spacing Pattern - Key idea: New feature follows established spacing sizes preset pattern - Evidence: "Following the pattern established by spacing sizes, WordPress now supports defining border radius presets in theme.json" #### ⏱️ [03:00](https://make.wordpress.org/core/2025/11/12/theme-json-border-radius-presets-support-in-wordpress-6-9/#usage) — [H1] Implementation in Theme.json - Key idea: Presets defined under settings.border.radiusSizes with name, slug, and size properties - Evidence: Example shows radiusSizes array with None, Small, Medium, Large, and Full presets #### ⏱️ [04:00](https://make.wordpress.org/core/2025/11/12/theme-json-border-radius-presets-support-in-wordpress-6-9/#ux-slider) — [H2] Adaptive UI with Slider Interface - Key idea: 1-8 presets display as slider with visual stops for easy selection - Evidence: "With 1-8 presets: Users see a slider with stops for each border radius preset" #### ⏱️ [05:00](https://make.wordpress.org/core/2025/11/12/theme-json-border-radius-presets-support-in-wordpress-6-9/#ux-dropdown) — [H2] Dropdown for Many Presets - Key idea: 9+ presets automatically switch to dropdown menu for better usability - Evidence: "With 9 or more presets: The control displays as a dropdown select menu" #### ⏱️ [06:00](https://make.wordpress.org/core/2025/11/12/theme-json-border-radius-presets-support-in-wordpress-6-9/#custom-input) — [H3] Custom Value Accessibility - Key idea: Custom input remains available through dedicated button for flexibility - Evidence: "Users can always access custom value input through the custom button to the right of the control" #### ⏱️ [07:00](https://make.wordpress.org/core/2025/11/12/theme-json-border-radius-presets-support-in-wordpress-6-9/#backwards-compatibility) — [H1] Backwards Compatibility Guarantee - Key idea: Existing themes continue working unchanged with optional opt-in enhancement - Evidence: "This is a purely additive feature. Existing themes without border radius presets will continue to work as before" ## 📚 References - [GitHub Pull Request #67544](https://github.com/WordPress/wordpress-develop/pull/67544) - [Related Issue #64041](https://github.com/WordPress/gutenberg/issues/64041) - [WordPress Developer Documentation](https://developer.wordpress.org/) - [Theme.json Documentation](https://developer.wordpress.org/themes/advanced-topics/theme-json/) ## 🗣️ Paraphrase - WordPress 6.9 enables theme creators to define preset border radius values in their theme.json configuration, giving users visual options instead of requiring manual input - The interface intelligently adapts between slider and dropdown presentations based on the number of presets, optimizing usability for different scenarios - This enhancement maintains full backward compatibility while following established design patterns from spacing presets, ensuring consistency across WordPress's design system ## 📰 Newsletter WordPress 6.9 brings an exciting enhancement for theme developers and site builders! The new border radius presets feature in theme.json allows you to create consistent, brand-aligned corner radius options that users can easily select from visual controls. Instead of users guessing at pixel values, you can now define presets like "Small (4px)", "Medium (8px)", and "Large (16px)" that appear as clickable options in the Block Editor. The interface smartly adapts - showing a slider for fewer presets and a dropdown for larger collections. This follows the same proven pattern as spacing presets, making it familiar for existing WordPress developers. Best of all, it's completely backward compatible, so existing themes continue working while new themes can opt into this enhanced design system capability. Resources: [Learn WordPress](https://learn.wordpress.org/), [Developer Docs](https://developer.wordpress.org/), [WP-CLI](https://wp-cli.org/) ## ✅ Action Items #### WordPress - Core: Add border radius presets to default themes for demonstration - Documentation: Update theme.json documentation with radiusSizes examples - Training: Create tutorials for theme developers on design system presets - Design: Ensure UI consistency between spacing and border radius controls - Accessibility: Test preset controls with screen readers and keyboard navigation #### Community - Contributors: Test the adaptive UI behavior with various preset counts - Maintainers: Update existing theme frameworks to support new preset format - Sponsors: Fund documentation and educational content for new feature adoption ## 🧪 Hypotheses - Theme developers will adopt border radius presets to maintain design consistency across their themes - Users will prefer visual preset selection over manual input when presets are available - The adaptive UI (slider vs dropdown) will improve usability for different preset quantities - Adoption will follow similar patterns to spacing presets implementation ### 📊 Methodology - Usage analytics comparing custom input vs preset selection rates - User testing of slider vs dropdown interfaces with different preset counts - Theme adoption tracking through WordPress.org theme directory analysis - Developer feedback collection through Make WordPress Core channels ### ❓ Questions - How will popular theme frameworks integrate border radius presets into their design systems? - What preset naming conventions will emerge as community best practices? - Will this feature encourage more sophisticated design system thinking in WordPress themes? ### 🔮 Future Research - Performance impact analysis of preset rendering in the Block Editor - User behavior studies comparing design system consistency before and after preset adoption - Investigation of potential similar preset systems for other CSS properties ### 💡 Implications - Practice: Theme developers need to consider design system approaches for border radius values - Education: Training materials should cover the relationship between spacing and border radius presets - Design: UI consistency becomes more important as preset controls proliferate - Community: Shared preset conventions could emerge across theme collections ### 🧠 Learning Styles Assessment Reading level estimate: 10th Grade (technical documentation with clear examples) #### 👀 Visual learners - Present: Code examples with clear JSON structure, UI descriptions - Improve: Screenshots of slider vs dropdown interfaces, visual preset examples #### 🔊 Aural learners - Present: Not available in current format - Improve: Audio walkthrough of implementation process, spoken code explanation #### 🗣️ Verbal learners - Present: Clear definitions of presets, naming conventions explained - Improve: Analogies to existing spacing presets, metaphors for design system thinking #### 🧩 Kinesthetic learners - Present: Step-by-step implementation guide with code examples - Improve: Interactive theme.json builder, hands-on preset testing environment #### 🧠 Logical learners - Present: Clear cause-effect relationships, structured JSON examples - Improve: Decision tree for slider vs dropdown logic, preset optimization guidelines #### 🧑‍🤝‍🧑 Social learners - Present: Attribution to multiple contributors, community development context - Improve: Discussion prompts for theme developer communities, collaboration examples #### 🧘‍♀️ Solitary learners - Present: Self-contained implementation instructions, backward compatibility notes - Improve: Self-assessment checklist, independent testing scenarios #### 🌿 Naturalistic learners - Present: Pattern recognition references to spacing presets - Improve: Design system ecosystem connections, natural progression explanations ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Structured headings, clear section organization - Improve: Alt text for future UI screenshots, ARIA labels for code examples #### Keyboard navigation - Present: Standard web navigation structure - Improve: Skip links for code sections, keyboard-accessible code copying #### Contrast and readability - Present: Standard WordPress.org styling meets contrast requirements - Improve: Syntax highlighting with sufficient contrast in code blocks #### Text resizing and reflow - Present: Responsive design supports text scaling - Improve: Ensure code blocks remain readable at 200% zoom #### Media and captions - Present: No current media content - Improve: Future video tutorials should include captions #### Forms and interactions - Present: Standard comment form with proper labeling - Improve: Enhanced error messaging for code validation ### 🌍 DEIB Assessment #### Cultural breadth - Present: Technical content is culturally neutral - Improve: Examples could include diverse design aesthetics, international design patterns #### Inclusive language - Present: Clear technical language without exclusionary terms - Improve: Consider non-developer audience in explanations #### Neurodiversity support - Present: Well-structured content with clear headings - Improve: Visual break-up of large code blocks, summary sections #### Representation - Present: Technical focus limits representation opportunities - Improve: Diverse contributor acknowledgment, varied use case examples #### Psychological safety - Present: Professional, respectful technical documentation tone - Improve: Beginner-friendly disclaimers, error normalization ### ✅ Logical Validity #### Strong reasoning - Deductive strength: Clear progression from problem identification to solution implementation - Inductive strength: Pattern recognition from spacing presets to border radius presets - Causal reasoning: Manual input limitations directly addressed by preset system - Analogical strength: Strong parallel drawn to established spacing preset patterns #### Fallacies - None identified: Technical documentation maintains logical consistency #### Tone of voice - Overall tone: Professional, informative, developer-focused with clear implementation guidance ### 🛡️ DARVO Analysis - Deny: No defensive patterns present in technical documentation - Attack: No adversarial content toward users or competing approaches - Reverse victim/offender: Not applicable to technical feature documentation - Emotional cues and rhetoric: Neutral, factual presentation focused on capability enhancement ## 🎯 Conclusion WordPress 6.9's border radius presets represent a significant enhancement to the platform's design system capabilities, providing theme authors with tools to maintain visual consistency while improving user experience through intuitive preset selection. The feature's backward compatibility and adaptive interface design demonstrate thoughtful implementation that respects existing workflows while enabling more sophisticated design system approaches. This addition positions WordPress themes to offer more curated, professional design experiences that align with modern web design practices. ## 🧱 Refactor Appendix ### 📚 Literature Split Pad ### [H1] WordPress introduces border radius presets in theme.json > [!quote] [Theme.json Border Radius Presets Support in WordPress 6.9](https://make.wordpress.org/core/2025/11/12/theme-json-border-radius-presets-support-in-wordpress-6-9/) by [[Aaron Robertshaw]] via [[Make WordPress Core]]. Published 2025-11-12. Accessed 2025-01-02. > "WordPress now supports defining border radius presets in theme.json, allowing theme authors to provide a curated set of border radius values" New design system capability for WordPress 6.9 enabling consistent border styling across themes. [view highlight](https://make.wordpress.org/core/2025/11/12/theme-json-border-radius-presets-support-in-wordpress-6-9/#H1) #wordpress #theme-development #articleseed ID:rw_border_radius_presets ### [H2] Adaptive UI changes based on preset quantity > [!quote] [Theme.json Border Radius Presets Support in WordPress 6.9](https://make.wordpress.org/core/2025/11/12/theme-json-border-radius-presets-support-in-wordpress-6-9/) > "With 1-8 presets: Users see a slider with stops for each border radius preset" Interface optimization that switches between slider and dropdown based on preset count for better usability. [view highlight](https://make.wordpress.org/core/2025/11/12/theme-json-border-radius-presets-support-in-wordpress-6-9/#H2) #ux-design ID:rw_adaptive_ui_presets --- ### 🔖 Atomic Split Pad (Zettel Candidates) #### [Z1] Theme.json presets follow consistent patterns - Applies to spacing, border radius, and future CSS property presets - Pointer to radiusSizes structure example - Links: [[WordPress-Design-System]] [[Theme-JSON-Architecture]] #### [Z2] Backward compatibility enables gradual feature adoption - WordPress feature development prioritizes existing theme preservation - Pointer to additive feature explanation - Links: [[WordPress-Development-Philosophy]] [[Theme-Migration-Strategies]]