Customize: Fix visual/DOM order mismatch of Widgets panel buttons - #13135
Customize: Fix visual/DOM order mismatch of Widgets panel buttons#13135itzmekhokan wants to merge 1 commit into
Conversation
|
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 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. |
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. |
| display: flex; | ||
| justify-content: flex-end; | ||
| align-items: center; | ||
| } |
There was a problem hiding this comment.
I think it should use a gap: 8px; for consistency with the Nav menus buttons.
Also, we should clean up a little and remove the float: right; for these buttons that is set in customize-controls.css.
afercia
left a comment
afercia
left a comment
There was a problem hiding this comment.
Nice PR, thank you.
Just needs a few minor adjustments to the CSS.
In the Widgets panel, the 'Add a Widget' and 'Reorder' buttons were floated right, which visually reversed their DOM order and left them misaligned. Wrap both buttons in a flex container so their DOM order matches the visual order and they align vertically, consistent with the Menus panel. Fixes #65902.
a8d2626 to
d5a91eb
Compare
Both done. Added gap: 8px to match the Nav menus buttons, and removed float: right from .add-new-widget/.add-new-menu-item and .reorder-toggle. I also reduced the add buttons' margin: 0 0 0 10px to margin: 0, since that margin only existed for the floats — with it in place the Nav menus buttons were actually 18px apart (10px margin + 8px gap), so both panels now sit at a real 8px. |
afercia
added
the
props-bot
github-actions
Bot
removed
the
props-bot
…tons. In the Customizer > Widgets panel, the visual order of the 'Reorder' and 'Add a Widget' buttons didn't match the DOM order. For accessibility, the visual order and DOM order must match when they impact tab sequence, interaction, and meaning. Also, improves the alignment of the buttons. Developed in #13135 Props khokansardar, joedolson, afercia. Fixes #65902. git-svn-id: https://develop.svn.wordpress.org/trunk@63332 602fd350-edb4-49c9-b593-d223f7449a82
…tons. In the Customizer > Widgets panel, the visual order of the 'Reorder' and 'Add a Widget' buttons didn't match the DOM order. For accessibility, the visual order and DOM order must match when they impact tab sequence, interaction, and meaning. Also, improves the alignment of the buttons. Developed in WordPress/wordpress-develop#13135 Props khokansardar, joedolson, afercia. Fixes #65902. Built from https://develop.svn.wordpress.org/trunk@63332 git-svn-id: http://core.svn.wordpress.org/trunk@62525 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2 participants
In the Customizer's Widgets panel, the "Add a Widget" and "Reorder" buttons are laid out with CSS floats, so their DOM order (Add, then Reorder) doesn't match their visual order (Reorder, then Add); this breaks keyboard tab order, and the buttons also sit slightly out of vertical alignment.
WP_Widget_Area_Customize_Control::render_content()now wraps both buttons in a.customize-control-widgets-buttonscontainer and outputsReorderbeforeAdd a Widget, matching the visual order; a new flex rule incustomize-controls.cssreplaces the floats, right-aligning and vertically centering the pair the same way the Menus panel does.The equivalent Menus buttons have the same float-based mismatch, but that's already covered by a separate ticket and PR, so this change is limited to the Widgets panel.
Trac ticket: https://core.trac.wordpress.org/ticket/65902
Use of AI Tools
AI assistance: Yes
Tool(s): Claude Code
Model(s): Claude Opus 5
Used for: implementing the CSS/markup fix and verifying the DOM/visual order and button alignment against the running Customizer. All changes were reviewed and validated by me.
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.