Repository navigation
Conversation
The default `#949494` border does not reach 3:1 contrast with the page background in most style variations. Add a custom `inputBorderColor` setting with a default of `#757575`. The `textInput` element, the Login/out block, and the Search block wrapper for the "Button inside" layout use this setting. The Maelstrom variation overrides the setting with its `contrast-3` color, because `#757575` has less contrast on the Maelstrom background. See #66190.
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. Core Committers: Use this line as a base for the props when committing in SVN: To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. Props Bot commandsYou can trigger Props Bot actions by commenting on this PR:
|
Test using WordPress PlaygroundThe changes in this pull request can previewed and tested using a WordPress Playground instance. WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser. Some things to be aware of
For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation. |
The
#949494input border in Twenty Twenty-Four does not reach 3:1 contrast with the page background in most style variations. This PR adds one color setting for input borders. The fix also covers the Search block "Button inside" layout, where the border is on the wrapper and not on the input.This PR continues #13764 and addresses the review comments on that PR:
textInputelement, so the color also applies to the comment form and to other text inputs.Changes
theme.jsonaddssettings.custom.inputBorderColorwith the value#757575.textInputelement, thecore/loginoutinput, and thecore/search"Button inside" wrapper use this setting.styles/maelstrom.jsonoverrides the setting with thecontrast-3color.The setting keeps each color in one place. Maelstrom changes one value and does not copy the block CSS.
Maelstrom color
#757575has only 1.33:1 contrast on the Maelstrom background,#38629F. The ticket discusses two lighter colors:#38629F#b9b9b9#D5E0F0(contrast-3)This PR uses
contrast-3, because the color is already in the Maelstrom palette and has the higher contrast. If you prefer#b9b9b9, change the one value instyles/maelstrom.json.Test results
The test measured the computed border color in a browser, as a logged-out visitor, on these elements:
WordPress 7.1.4: All six elements had the same border color in each style variation.
#F9F9F9#949494#757575#F9F8F5#949494#757575#D6D2CE#949494#757575#EBEBEF#949494#757575#38629F#949494#D5E0F0#E4EFEB#949494#757575#272727#949494#757575#F3F0E7#949494#757575The "Before" color is the measured value for the default style. For the other styles, "Before" is the value from
theme.jsonand the block styles. The "Contrast before" values are calculated from these colors.Onyx has less contrast after this change, but it stays above 3:1.
WordPress 6.4.14 (the theme requires 6.4): The test covered the default and Maelstrom styles. No PHP errors occurred.
#949494, because thetextInputelement requires WordPress 6.9.Not tested:
trunk. The results above use the released versions.Reviewer notes
textInputelement. This is later than the theme's$schemaversion (6.5). WordPress 6.4.14 showed no errors with the element intheme.json.core/loginoutCSS applies to allinputelements in the block, as it did before this PR. This includes the submit button.Trac ticket: https://core.trac.wordpress.org/ticket/66190
Use of AI Tools
AI assistance: Yes
Tool(s): Claude Code
Model(s): Claude Opus 5.5
Used for: The code change, the browser tests, and the draft of this description.
This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.