Skip to content

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

Notifications You must be signed in to change notification settings

happyprime/toggle-block

Repository files navigation

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:

A screenshot of the sidebar panel in the block editor with text input fields for Controls ID and screen reader text.

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

A screenshot of the sidebar panel in the block editor with a text input for HTML anchor

Changelog

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.