A WordPress plugin that adds accessible accordion blocks to the Gutenberg editor and frontend. Markup uses headings, buttons, and regions with ARIA-appropriate behavior; interactivity is provided by @beapi/be-a11y’s Accordion helper and a small view script on page load.
Blockparty Accordion is a WordPress plugin that provides a set of nested blocks to build an accordion: a root Accordion block contains Item blocks; each item is made of a Summary (the visible title and button trigger) and a Panel (the expandable content region). You can open the first item by default from the parent block, and the Summary block can host an icon block next to the label when you need a visual marker.
- Native Gutenberg blocks: Accordion, Item, Summary, and Panel blocks, registered from
block.json - Accessible behavior: Triggers, panels, and focus management through
@beapi/be-a11yaccessible accordion (see the view script on the main accordion block) - Editor options (root Accordion): e.g. “Open first item by default”
- Summary block: icon support via
core/icon(WordPress 7.0+), blockparty/icon, or beapi/icon-block when registered - Internationalized with text domain
blockparty-accordion(e.g. French inlanguages/) andwp_set_script_translationsfor the editor - Frontend view script on the main accordion block for expand/collapse behavior
- Configurable via the
beapi_accordion_block_configfilter (see below)
- WordPress: 6.2 or higher
- PHP: 8.1 or higher
- PHP extension:
ext-json
composer require beapi/blockparty-accordion- Download the latest release or zip from this repository
- Extract the plugin to
/wp-content/plugins/blockparty-accordion - Activate Blockparty Accordion in Plugins in the WordPress admin
git clone https://github.com/BeAPI/blockparty-accordion.git
cd blockparty-accordion
composer install
npm install
npm run build- In the block editor, insert an Accordion block (e.g. under the Widgets category, search for Accordion).
- Add Item blocks inside the accordion. Each item contains a Summary and a Panel:
- Summary — the clickable title line (optional icon via the block toolbar).
- Panel — the collapsible content (InnerBlocks as defined by the block).
- Select the Accordion block to toggle Open first item by default if you want the first item open on page load.
- On the frontend, the accordion uses the same structure; behavior is provided by the bundled view script and
@beapi/be-a11y.
- Select a Summary block inside an item.
- In the block toolbar, click Icon.
- Choose an icon from a registered icon block.
By default the plugin allows, in order:
core/icon(WordPress 7.0+)blockparty/iconbeapi/icon-block
Only registered blocks are kept, so on WordPress 6.2–6.9 icons work when Blockparty Icons or BeAPI Icon Block is active. On WordPress 7.0+, core/icon is preferred when present.
Customize the list with the blockparty_accordion_allowed_icon_blocks filter:
add_filter(
'blockparty_accordion_allowed_icon_blocks',
static function (): array {
return [ 'core/icon' ];
}
);The first registered block in the list is used as the default template when enabling an icon on a summary.
You can change accordion behavior (single vs multiple open panels, animation, selectors, etc.) from a theme or plugin. Defaults are set in the main plugin file; override them with the filter. See the be-a11y accessible-accordion example for the options supported by the underlying script.
add_filter( 'beapi_accordion_block_config', function ( $config ) {
$config = [
'allowMultiple' => true,
'closedDefault' => true,
'forceExpand' => false,
'hasAnimation' => true,
];
return $config;
} );blockparty-accordion/
├── src/ # Block source (build output in build/)
│ ├── blockparty-accordion/ # Parent accordion (edit, save, view script, styles)
│ ├── blockparty-accordion-item/ # Item container
│ ├── blockparty-accordion-summary/
│ └── blockparty-accordion-panel/
├── build/ # Compiled block assets
├── languages/ # .pot, .po, .mo, and Jed .json
├── .wordpress-org/blueprints/ # WordPress Playground blueprint
├── blockparty-accordion.php
├── composer.json
└── package.json
npm start # @wordpress/scripts dev
npm run build
npm run lint:js
npm run lint:css
npm run format
npm run plugin-zip
npm run env:start # @wordpress/env (dev, port 8888)
npm run env:stopPHP integration tests run inside an isolated wp-env instance (port 8889):
composer install
npm install
npm run build
npm run env:start-tests
npm run test:php
npm run env:stop-testsJavaScript unit tests (Jest via @wordpress/scripts):
npm run test:unit:jsEnd-to-end tests (Playwright — editor insertion + frontend accordion behavior):
npx playwright install chromium
npm run build
npm run test:e2enpm run make-pot # Regenerate blockparty-accordion.pot
npm run make-json # Regenerate Jed JSON from .poRegenerate the .mo with WP-CLI after editing .po files, for example: wp i18n make-mo languages/
composer cs # PHPCS
composer cb # PHPCBF
composer psalmCoding standards: WordPress Coding Standards (WPCS) for PHP, @wordpress/eslint-plugin for JavaScript, Psalm for static analysis, GrumPHP hooks where configured in grumphp.yml.
- PHP_CodeSniffer (WPCS)
- Psalm for static analysis
- PHPCS PHPCompatibility (see
composer.json) - ESLint and Stylelint via
wp-scriptsfor front-end code
- Text domain:
blockparty-accordion - Template:
languages/blockparty-accordion.pot - Bundled example:
languages/blockparty-accordion-fr_FR.*
- Fork the repository
- Create a branch:
git checkout -b feature/your-feature - Commit with clear messages (e.g. Conventional Commits)
- Open a pull request
Ensure code follows WPCS, passes linters, and that string changes are reflected in languages/ when needed.
This project is released under the GPL-2.0-or-later license. See LICENSE.
Be API Technical team
- Email: technical@beapi.fr
- Website: https://beapi.fr
- Block Editor documentation
- WAI-ARIA Accordion Pattern (accessibility background)
- be-a11y (Be API)
See readme.txt and CHANGELOG.md for the full version history.
Developed with ❤️ by Be API