Keep buttons steady on focus and align the 404 search form - #92
henriqueiamarino wants to merge 2 commits into
Conversation
The button element gained a 1px dotted border on focus that its resting state never had, so every focused button grew two pixels and the search input stretched with it. The dotted focus signal moves to the outline, which never affects layout, with the ink color so the ring reads on the page ground. The Button block keeps its dotted focus border, which is safe there: its resting state already carries a border of the same width. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Same placeholder, same button-inside layout — the two forms should not differ. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
github-actions
Bot
added
[Area] Global Styles
|
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. |
Screenshots after the changeSubmit button with focus Search block with button inside, and the focus is on the button Small problem here due to the lack of spacingWith button only, the focus is on the button: Focus is only visible on one side. With button only, once the button has been activated so that the search field shows, and the focus is on the button: There is an overlap with the input element: |
2 participants
Closes #90.
Two commits, both from @carolinan's report:
The layout shift — reproduced and pinned down:
styles.elements.buttondeclared a 1px dotted border on its focus states while the resting button has no border. WordPress only emits border/outline for the:focus-visiblepseudo (the:focusrule emits colors alone), which is why the shift appears on keyboard focus and click-focus in browsers that promote it — matching the 'mouse and keyboard' repro steps. Measured on trunk: tabbing to the search button grows it 47→49px and the input stretches with it. The dotted focus signal now lives on the outline — dotted 1px at the existing 4px offset, in the ink color — which never affects layout. Measured on this branch under the same keyboard focus: dotted ring renders, border stays 0, shift is 0. The Button block's dotted focus border is untouched; it is metric-safe there because that block's resting state already carries a 1px border.Form parity: the 404 template's search block now matches the search results form — placeholder and button-inside layout — answering the question raised in the issue. (Design change made by @henriqueiamarino in the editor, merged to the pattern.)
🤖 Generated with Claude Code