WP Manifestindependent plugin directory
manifest / editor / accordionblock

Neilson Accordion Block

An accordion (collapsible content) block for the WordPress block editor

by Ryan Neilson · github.com/ryanneilson/accordionblock

0stars
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/ryanneilson/accordionblock/archive/refs/heads/main.zip

WordPress Neilson Accordion Block plugin

A WordPress plugin that adds a Gutenberg block for creating collapsible content.

Features

The Neilson Accordion Block includes the following features:

  • A heading section in which the HTML tag, text color and background color can be customized.
  • A collapsible content section that can use virtually any combination of blocks to populate the content, including accordion blocks.
  • ARIA-compliant attributes and controls, for navigation of the accordion block and toggling of the open/closed state.
  • Options for enabling and disabling any of the custom styling options, making it easy to override the block styles with your own custom CSS.

Using this block

When selecting this block for use in the block editor, the header will automatically appear, and below the header there will be the option to add any number of blocks as collapsible content.

In the right sidebar, you'll find various controls for managing the block styles and attributes.

  • Accordion ID allows the assignment of a custom id to the main accordion element.
  • Accordion Open State allows the user to select whether the accordion content should be open or closed when the page loads.
  • Accordion Spacings allows the user to define custom margin and padding values for the block. This is disabled by default, and must be toggled to the active state to be used.
  • Accordion Borders allows the user to define custom borders(width, color, border-radius) for the block. This is disabled by default, and must be toggled to the active state to be used.
  • Accordion Headers allows the user to define the HTML tag used for the heading text, and allows for customization of the text color and background color for the header area. The custom colors are disabled by default, and must be toggled to the active state to be used.
  • Accordion Body allows the user to apply custom text colors and background colors to the accordion content. This is disabled by default, and must be toggled to the active state to be used.