You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
fix(debug): move the A8C Debug flag into the admin bar - #7390
While Debug Mode is on, the A8C Debug flag was a fixed-position badge at bottom: 145px; left: 20px. On themes with a left column it sat on top of page content, and we've had reports of it getting in the way.
This PR:
Moves the flag into the admin bar. Debug Mode already forces the admin bar on, so the flag is now a gold "A8C Debug" item in the secondary group, next to "Howdy". Clicking it still leaves Debug Mode. Its styles are attached to the admin-bar stylesheet with wp_add_inline_style(). At 782px and narrower, the label shortens to "A8C" so the toolbar stays on one row. Core hides non-default top-level items at that width, so the item opts back in.
Docks the fallback to the corner. Where no admin bar was drawn, such as wp-login.php or a theme that removes the admin bar (did_action( 'wp_after_admin_bar_render' )), the flag is now a 24px tab flush with the bottom-left corner. It reads "A8C" and expands to "A8C DEBUG", in the same bold monospace, on hover or keyboard focus. The non-production bar no longer needs to move up to make room for it, so that code is gone from nonprod.js.
Only shows the flag on local environments after an explicit opt-in.is_debug_mode_enabled() is always true on local environments, so the flag showed on every page there and clicking it couldn't hide it. Local environments still get the debug tools (Query Monitor access and the forced admin bar). The flag now only shows once the Debug Mode cookies are set with ?a8c-debug=true, and clicking it clears them.
Sets the Debug Mode cookies on /. They were set without a path, so browsers scoped them to the current directory. Leaving Debug Mode from a different page than the one you entered it on missed the original cookies, so you stayed in Debug Mode. Entering it on a sub-page didn't cover the rest of the site. Cookies already set on a sub-path expire within their 2-hour lifetime. Enabling and disabling now share one set of cookie options, which also adds Secure when the request is over HTTPS (is_ssl(), like core's auth cookies) and HttpOnly, since only PHP and the edge cache read these cookies.
Improves accessibility. Both versions now tell screen readers what clicking does ("turn off Debug Mode") instead of relying on the title attribute. Both draw a 2px focus ring inside the item on :focus-visible: the admin bar's own outline is transparent, and the darker gold alone was only a 1.35:1 change. The collapsed tab label stays readable to screen readers, the animation respects prefers-reduced-motion, and the tab grows with zoomed text.
Uses dark text on the gold. White text was 2.54:1 on the gold (3.45:1 on hover), below WCAG AA's 4.5:1. The admin bar item and the floating badge now use #1d2327: 6.24:1 on the gold and 4.61:1 on the hover gold.
Known limitations:
If another plugin removes the admin bar item, or a theme hides the admin bar with CSS, no flag shows.
In wp-admin on narrow phones, core shows extra toolbar icons, so the toolbar can still wrap.
Pre-review checklist
Please make sure the items below have been covered before requesting a review:
This change works and has been tested locally or in Codespaces (or has an appropriate fallback).
This change works and has been tested on a sandbox.
This change has relevant unit tests (if applicable).
This change uses a rollout method to ease with deployment (if applicable - especially for large scale actions that require writes).
This change has relevant documentation additions / updates (if applicable).
I've created a changelog description that aligns with the provided examples.
Pre-deploy checklist
VIP staff: Ensure any alerts added/updated conform to internal standards (see internal documentation).
Steps to Test
Check out this PR on a local dev environment.
Visit any front-end page. Confirm no A8C Debug flag shows, and Query Monitor is still in the admin bar.
Visit /?a8c-debug=true. Confirm a gold "A8C DEBUG" item appears in the admin bar, next to "Howdy", with vertically centred text. Confirm no badge floats over the page.
Narrow the window to 782px or less. Confirm the item reads "A8C" and the toolbar stays on one row.
Visit /wp-login.php. Confirm a small "A8C" tab sits flush in the bottom-left corner, and that it expands to "A8C DEBUG" on hover.
Press Tab until the tab or the admin bar item has focus. Confirm a dark ring appears inside it.
Go to a sub-page, such as /sample-page/, and click the flag. Confirm the flag is gone there and on /.
Enter Debug Mode on a sub-page with /sample-page/?a8c-debug=true, then visit /. Confirm the flag shows.
❌ Patch coverage is 5.71429% with 33 lines in your changes missing coverage. Please review.
✅ Project coverage is 40.53%. Comparing base (14b3ae9) to head (0561512).
Register show_admin_bar filter before core admin bar initialization
000-debug/debug-mode.php:152
For the logged-out users this feature targets, this callback will never run: the show_admin_bar filter is only registered by the init callback at priority 9999, after core's _wp_admin_bar_init() has already decided not to initialize the toolbar. Consequently no admin_bar_init/admin_bar_menu hooks fire and the flag remains the floating fallback. Register show_admin_bar immediately while enable_debug_tools() runs so core can initialize the admin bar during init.
The A8C Debug flag was a fixed-position badge near the bottom left of
the page, so it covered content on sites with a left column. Debug Mode
already forces the admin bar on, so the flag is now an admin bar item
next to "Howdy". The floating badge only renders when no admin bar was
drawn (e.g. wp-login.php). On screens 782px and narrower the label
shortens to "A8C" so the toolbar stays on one row.
Local environments are always in Debug Mode, so the flag showed on
every page and clicking it did nothing. The debug tools still run
there, but the flag now only shows once someone enters Debug Mode with
?a8c-debug=true, and clicking it hides it again.
The Debug Mode cookies were set without a path, so browsers scoped them
to the current directory. Leaving Debug Mode from a different page
missed the original cookies, and entering it on a sub-page didn't cover
the rest of the site. Set and clear both cookies on '/'.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Set and clear the Debug Mode cookies through one helper so both always
use the same attributes: path '/', secure when the request is over
HTTPS (is_ssl(), like core's auth cookies), and HttpOnly since only PHP
and the edge cache read them.
White text on the flag's gold background was 2.54:1 (3.45:1 on hover),
below WCAG AA's 4.5:1. Use #1d2327 for the admin bar item and the
floating fallback: 6.24:1 on the gold and 4.61:1 on the hover gold.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Where no admin bar is drawn (wp-login.php, or themes that remove it),
the floating badge sat 145px up the page and could cover content. It is
now a 24px tab flush with the bottom-left corner that reads "A8C" and
expands to "A8C DEBUG" in the same bold monospace on hover or keyboard
focus. The collapsed label is hidden with max-width so screen readers
still announce it, and it is uppercased in CSS so they say "Debug"
rather than spelling it out. The animation respects
prefers-reduced-motion, the tab is hidden when printing, and it uses
min-height so the background grows with zoomed text.
The non-production bar no longer needs to move up to make room for the
badge, so drop that from nonprod.js and bump its version.
Accessibility:
- Both the admin bar item and the tab now say what clicking does
("turn off Debug Mode") in screen-reader text, instead of relying on
the title attribute.
- Both draw a 2px #1d2327 focus ring inside the item on :focus-visible.
The admin bar's own outline is transparent and the darker gold alone
was a 1.35:1 change; an inset ring also can't be clipped by the
viewport edge.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
Description
While Debug Mode is on, the A8C Debug flag was a fixed-position badge at
bottom: 145px; left: 20px. On themes with a left column it sat on top of page content, and we've had reports of it getting in the way.This PR:
admin-barstylesheet withwp_add_inline_style(). At 782px and narrower, the label shortens to "A8C" so the toolbar stays on one row. Core hides non-default top-level items at that width, so the item opts back in.wp-login.phpor a theme that removes the admin bar (did_action( 'wp_after_admin_bar_render' )), the flag is now a 24px tab flush with the bottom-left corner. It reads "A8C" and expands to "A8C DEBUG", in the same bold monospace, on hover or keyboard focus. The non-production bar no longer needs to move up to make room for it, so that code is gone fromnonprod.js.is_debug_mode_enabled()is always true on local environments, so the flag showed on every page there and clicking it couldn't hide it. Local environments still get the debug tools (Query Monitor access and the forced admin bar). The flag now only shows once the Debug Mode cookies are set with?a8c-debug=true, and clicking it clears them./. They were set without a path, so browsers scoped them to the current directory. Leaving Debug Mode from a different page than the one you entered it on missed the original cookies, so you stayed in Debug Mode. Entering it on a sub-page didn't cover the rest of the site. Cookies already set on a sub-path expire within their 2-hour lifetime. Enabling and disabling now share one set of cookie options, which also addsSecurewhen the request is over HTTPS (is_ssl(), like core's auth cookies) andHttpOnly, since only PHP and the edge cache read these cookies.titleattribute. Both draw a 2px focus ring inside the item on:focus-visible: the admin bar's own outline is transparent, and the darker gold alone was only a 1.35:1 change. The collapsed tab label stays readable to screen readers, the animation respectsprefers-reduced-motion, and the tab grows with zoomed text.#1d2327: 6.24:1 on the gold and 4.61:1 on the hover gold.Known limitations:
Pre-review checklist
Please make sure the items below have been covered before requesting a review:
Pre-deploy checklist
Steps to Test
/?a8c-debug=true. Confirm a gold "A8C DEBUG" item appears in the admin bar, next to "Howdy", with vertically centred text. Confirm no badge floats over the page./wp-login.php. Confirm a small "A8C" tab sits flush in the bottom-left corner, and that it expands to "A8C DEBUG" on hover./sample-page/, and click the flag. Confirm the flag is gone there and on/./sample-page/?a8c-debug=true, then visit/. Confirm the flag shows.🤖 Generated with Claude Code