Toggle Block

Add a toggle in the WordPress block editor to show and hide another block.

Usage

Toggle Block is a very rudimentary block. It renders as a <button> element on the front-end that is used to show or hide another target element (via its ID) on the page. It uses aria-controls and aria-label in an attempt to make it compatible with assistive technology.

The intended use is in a site's template, through the site editor or your theme files, rather than as a block that is frequently used in content.

When the toggle block is selected in the editor, toggle settings appear in the sidebar panel:

The "Controls ID" entered in this panel must match the "HTML anchor" assigned to another block through its advanced panel:

Changelog

0.5.0

• Wrap button text in a <span> element to help with styling.
• Move editor styles to an editor-only stylesheet.
• Update to latest dependencies, build process, and code standards.

0.4.0

• Add an attribute to toggle a toggle block-specific class on the body element.
• Allow the toggle block to be placed inside the core/navigation block.
• Add transform support from/to core/navigation-link blocks.
• Update to latest dependencies, build process, and code standards.

0.3.1

• Add persisting toggle-block-has-been-toggled class to toggled element when first toggled.

0.3.0

• Add persisting toggle-block-has-toggled class to toggle button when first clicked.
• Update @wordpress/scripts to 27.7.0.
• Update project dependencies.