Toggle Block
A button that shows and hides another block, with accessibility handled.
WordPress 6.9 or later · PHP 7.4 or later · GPL v2 or later
What it does
Toggle Block is a button. Press it and another block on the page is shown or hidden. The button carries aria-controls pointing at that block and aria-expanded saying which state it’s in, so assistive technology knows what it does and what just happened. Optional screen reader text names the button when its visible text isn’t enough, as with an icon.
It is meant for a site’s templates, through the site editor or theme files, rather than for everyday content. The menu button at the top of this page on a phone is one.
How it works
- Give the block you want to show and hide an HTML anchor, in its Advanced panel:
primary-navigation, say. - Add a Toggle Block where the button should be. In its sidebar, pick that block from the list, or type the anchor as the Controls ID.
- Write the button’s text, and screen reader text if the visible text doesn’t say what the button does.
The button comes out as plain HTML:
<button class="wp-block-happyprime-toggle-block" aria-controls="primary-navigation" aria-expanded="false">
<span>Menu</span>
</button>Code language: HTML, XML (xml)Two options go further. A body class is added to the page while the toggle is open, so a theme can style the whole page for an open menu. And toggles inside a container with the class toggle-block-group close each other: open one and the rest close, with one marked as the default.
Good for
- The menu button on a phone.
- A panel of filters or settings that stays out of the way until it’s wanted.
- Tabs, by putting several toggles in a group.
What to know
- It works best in templates. A menu button or a panel belongs to the site, not to one post, and that is where the block is at home.
- The target needs an anchor. Without a matching Controls ID the button does nothing.
- It takes the same styles as a paragraph: font, color, spacing, border, and background are all in the block’s settings.
- It can sit inside a Navigation block, and a Navigation Link can be turned into one.
