WordPress.org
Get WordPress

Make WordPress Core

Opened 6 weeks ago

Last modified 5 weeks ago

#65029 new enhancement

Add Keyboard Shortcut to Hide and Show Toolbar on Frontend

Reported by: apermo's profile apermo Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Toolbar Keywords: has-patch 2nd-opinion
Focuses: accessibility Cc:

Description (last modified by sabernhardt)

Add a keyboard shortcut (access+w) to temporarily hide and show the toolbar on the frontend. This gives logged-in users a quick way to preview their site without the toolbar, without navigating to Profile settings or logging out.

Description

When working on a site's frontend, the toolbar covers the top 32px (46px on mobile) of the page. Designers, content editors, and developers frequently need to see the page without it — for screenshots, visual testing, or checking how fixed headers behave. Today the only options are:

  1. Uncheck "Show Toolbar when viewing site" in the user profile (requires a page reload)
  2. Use show_admin_bar( false ) in code (requires a code change and reload)
  3. Use browser DevTools to hide the element manually
  4. Install a plugin (e.g. ​https://wordpress.org/plugins/apermo-adminbar-toggle/)

None of these are fast or convenient for a quick toggle.

Proposed Solution

A keyboard shortcut using the WordPress access modifier pattern:

  • Windows/Linux: Alt+Shift+W
  • Mac: Ctrl+Option+W

The "W" key is mnemonic for "WordPress toolbar." This follows the same modifier pattern used by all existing WordPress keyboard shortcuts (e.g. access+h for help, access+d for strikethrough), ensuring consistency.

Behavior
  • Toggle only: The shortcut hides the toolbar; pressing it again brings it back.
  • No persistence: The state resets on page navigation. This is intentional — the feature is for quick previews, not a permanent setting.
  • Frontend only: The shortcut does not work in wp-admin, where the toolbar is part of the fixed layout and is not optional by design (see #19685).
  • Smooth animation: The toolbar slides up/down with a 200ms CSS transition.
  • Page spacing adjusts: The --wp-admin--admin-bar--height custom property is set to 0px when hidden, so scroll-padding-top and the bump margin-top adjust automatically. No content jump.
  • Accessible: An aria-live region announces "Toolbar hidden." / "Toolbar visible." for screen reader users. The toolbar element gets aria-hidden="true" when hidden.

Shortcut Conflict Analysis

The access+w shortcut was chosen after an audit of all existing shortcuts:

WordPress: The letter w is completely free in both the classic editor and block editor access modifier space. No WordPress core shortcut uses access+w.

Browsers: Alt+Shift+W / Ctrl+Option+W has no known conflicts in Chrome, Firefox, Safari, or Edge on any platform. (By contrast, access+b — "B for Bar" — conflicts with Chrome/Edge's "focus bookmarks bar" on Windows/Linux.)

Historical note: WordPress previously used Alt+Shift+W for "Distraction Free Writing" mode, which was removed years ago. The association with "toggling a UI element for focus" is fitting.

Prior Art

Implementation

The patch modifies three files:

  1. src/js/_enqueues/lib/admin-bar.js — Adds a keydown listener for access+w (frontend only), a toggleToolbar() function that toggles the wp-toolbar-hidden class on <html>, and screen reader announcements via a live region.
  2. src/wp-includes/css/admin-bar.css — Adds the html.wp-toolbar-hidden rules: sets --wp-admin--admin-bar--height: 0px, overrides the bump margin-top, and uses transform: translateY(-100%) with visibility: hidden to slide the bar out.
  3. src/wp-includes/class-wp-admin-bar.php — Adds wp_localize_script for the two screen reader strings (toolbarHidden, toolbarVisible).

Theme Compatibility

Themes that use var(--wp-admin--admin-bar--height) for their toolbar offset will adjust automatically. Themes that hardcode a 32px top offset based on the .admin-bar body class will not adjust, but this is the same limitation that exists when users disable the toolbar via Profile settings today.

Themes can also use the html.wp-toolbar-hidden selector to apply custom styles when the toolbar is hidden.

Change History (5)

This ticket was mentioned in ​PR #11456 on ​WordPress/wordpress-develop by ​@apermo.
6 weeks ago #1

  • Keywords has-patch added

Add a keyboard shortcut (access+w) to temporarily hide and show the toolbar on the frontend. This gives logged-in users a quick way to preview their site without the toolbar, without navigating to Profile settings or logging out.

Shortcut: Alt+Shift+W (Windows/Linux) / Ctrl+Option+W (Mac)

### Behavior

  • Toggle only: Hide the toolbar; press again to bring it back.
  • No persistence: Resets on page navigation — designed for quick previews.
  • Frontend only: Does not work in wp-admin (toolbar is not optional there, see #19685).
  • Smooth animation: 200ms CSS transition (slide up/down).
  • Page spacing adjusts: Sets --wp-admin--admin-bar--height: 0px when hidden, so scroll-padding-top and bump margin-top adjust automatically.
  • Accessible: aria-live region announces state changes; aria-hidden set on the toolbar element.

### Changes

  1. src/js/_enqueues/lib/admin-bar.js — keydown listener for access+w, toggleToolbar() function, screen reader announcements.
  2. src/wp-includes/css/admin-bar.css — html.wp-toolbar-hidden rules: CSS variable reset, margin override, transform: translateY(-100%) + visibility: hidden.
  3. src/wp-includes/class-wp-admin-bar.php — wp_localize_script for screen reader strings.

### Prior Art

This PR is based on the keyboard toggle feature from ​Apermo AdminBar (​GitHub) by @apermo. The toggle is also available as a standalone lightweight version: ​Apermo AdminBar Toggle. The human author of this PR is the plugin author.

## Use of AI Tools

This PR was authored collaboratively with Claude Code (Anthropic Claude Opus 4.6). The AI was used for:

  • Research: Auditing existing WordPress keyboard shortcuts, browser shortcut conflicts, and Trac history for prior proposals.
  • Implementation: Writing the JavaScript toggle logic, CSS hidden state rules, and PHP localization. All code was reviewed and directed by the human author.
  • Trac ticket draft: The ticket description was drafted by AI and reviewed by the human author.

The human author (@apermo) is also the author of the Apermo AdminBar / Apermo AdminBar Toggle plugins that this PR is based on. All code has been reviewed and the human author takes full responsibility for the contents of this PR.

#2 @apermo
6 weeks ago

Update: Shortcut changed from access+w to Ctrl+Shift+F

After further analysis, the initially proposed access+w shortcut (Ctrl+Option+W on Mac / Alt+Shift+W on Windows) has been replaced with Ctrl+Shift+F — unified across all platforms.

TL;DR of dead ends:

  • access+w (Ctrl+Option / Alt+Shift): Ctrl+Option on macOS is the default modifier for the temporary accessibility Display zoom feature. Which is as inconvenience, as there are Developers using the feature to temporarily magnify their work. I do, and it's a gem I regularly share.
  • Ctrl+Shift+H ("H for Hide"): Firefox uses Ctrl+Shift+H for the History sidebar.
  • primaryShift+\ (reuse Gutenberg's distraction-free shortcut): \ is not directly accessible on non-US keyboard layouts — e.g. on German keyboards it requires Alt+Shift+7 on Mac or AltGr+ß on Windows, making the combo effectively unusable.


Why Ctrl+Shift+F:

  • Free across all major browsers (Chrome, Firefox, Safari, Edge) on all platforms
  • Works on every keyboard layout (letter key, no special characters)
  • Follows the ctrlShift modifier pattern already established in WordPress for region navigation (Ctrl+Shift+`)
  • Same physical keys on Mac, Windows, and Linux — no per-platform branching
  • "F" for "Frontend view" as mnemonic
  • Ergonomic single hand use for quick access

Note at maintainer: Please update initial ticket by striking through the changed Keyboard shortcut with reference to comment.

Last edited 6 weeks ago by apermo (previous) (diff)

#3 @sabernhardt
6 weeks ago

  • Description modified (diff)
  • Focuses accessibility added
  • Summary changed from Trac Ticket: Keyboard Shortcut to Toggle Toolbar on Frontend to Add Keyboard Shortcut to Hide and Show Toolbar on Frontend

This ticket was mentioned in ​Slack in #accessibility by joedolson. ​View the logs.
5 weeks ago

#5 @joedolson
5 weeks ago

  • Keywords 2nd-opinion added

This seems worth discussing. I have a couple concerns about adding it.

First, the actual functionality is relatively trivial for a developer to handle on their own - e.g., via a bookmarklet to hide the adminbar or by maintaining a private window without it.

Second, adding a keyboard-only control that can't be used on mobile devices or with a mouse, even if it's a relatively minor convenience feature, seems like an issue. I generally would prefer that a keyboard shortcut is a shortcut for using some existing feature, rather than adding a wholly new feature. (I guess I'm saying that it's not a shortcut, in this case...)

Looking for 2nd opinions...

Note: See TracTickets for help on using tickets.