Widgets: Keep the widget Edit/Add text link visible when JavaScript is available#12686
Widgets: Keep the widget Edit/Add text link visible when JavaScript is available#12686irozum wants to merge 3 commits 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. |
There was a problem hiding this comment.
Pull request overview
Keeps the classic Widgets screen’s plain-text widget “Edit/Add” link visible even when JavaScript is enabled, preserving an always-available path to the accessible single-widget edit screen.
Changes:
- Remove
hide-if-jsfrom the.widget-control-editlink markup inwp_widget_control(). - Add a CSS override to keep the link aligned beside the JS toggle (instead of stacking below it).
- Add/refactor PHPUnit coverage for
wp_widget_control(), including a regression test for the edit link visibility.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
src/wp-admin/includes/widgets.php |
Makes the widget edit/add text link visible when JS is available by removing hide-if-js. |
src/wp-admin/css/widgets.css |
Ensures .widget-control-edit sits inline next to the toggle inside .widget-title-action. |
tests/phpunit/tests/widgets.php |
Refactors widget-control rendering into a helper and adds regression coverage for the edit link class. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| $this->assertStringContainsString( 'class="widget-control-edit"', $control, 'The Edit/Add text link should remain visible when JavaScript is available, as a plain-text path to the accessible single-widget edit screen.' ); | ||
| $this->assertStringNotContainsString( 'widget-control-edit hide-if-js', $control ); |
This is Phase 1 of the phased plan proposed by @sanketparmar in comment:16 and endorsed by @joedolson in comment:17. It does not remove Accessibility Mode itself — that depends on Phases 2 and 3 landing first.
The problem: On the classic Widgets screen (
wp-admin/widgets.php), each widget already renders a plain-text "Edit"/"Add" link (.widget-control-edit) pointing at the accessible single-widget edit screen, alongside the JS-only expand/collapse toggle button. That text link was hidden whenever JavaScript is available (via thehide-if-jsclass), so keyboard and assistive-technology users had no way to reach the accessible single-widget edit screen without first switching into Accessibility Mode.The fix:
hide-if-jsfrom the link inwp_widget_control(), so it stays visible alongside the toggle button..widget-title-actioncontainer and the link'sdisplay: blockforced a line break. Added a small CSS rule scoping the link todisplay: inline-blockwhen rendered next to the toggle button..widgets_access #wpwrap .widget-control-edit { display: block; }) is unaffected, since that mode hides the toggle button entirely.Verification:
tests/phpunit/tests/widgets.php.Trac ticket: https://core.trac.wordpress.org/ticket/52399
Use of AI Tools
AI assistance: Yes
Tool(s): Claude Code
Model(s): Claude Sonnet 5
Used for: Implementation, tests, browser verification, and PR description. Reviewed by Igor Rozum.
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.