Blockparty Tabs

An accessible tabs block for WordPress Gutenberg editor that follows ARIA best practices.

Features

• ✅ Accessible: Built with proper ARIA attributes and keyboard navigation support
• 🎨 Customizable: Add custom colors and icons to your tabs
• 🧩 Flexible: Nest any WordPress block inside tab panels
• ⚡ Easy to use: Simple interface to add, remove, and reorder tabs

Requirements

• WordPress 6.4 or higher
• PHP 8.1 or higher
• Gutenberg editor enabled

Installation

Manual Installation

1. Download the plugin files
2. Upload the blockparty-tabs folder to the /wp-content/plugins/ directory
3. Activate the plugin through the 'Plugins' menu in WordPress

Composer Installation

composer require beapi/blockparty-tabs

Usage

Adding a Tabs Block

1. In the WordPress editor, click the + button to add a new block
2. Search for "Tabs" or "Blockparty Tabs"
3. Click on the block to insert it into your content

By default, the block comes with 3 tabs. Each tab contains a panel where you can add any content.

Adding/Removing Tabs

• Add a tab: Click the "Add Item After" button in the block toolbar
• Remove a tab: Select the tab you want to remove and click the trash icon in the toolbar

Customizing Tabs

Adding Icons

1. Select a tab item
2. In the block toolbar, click the "Icon" button
3. Choose an icon from a registered icon block

By default the plugin allows, in order:

1. core/icon (WordPress 7.0+)
2. blockparty/icon
3. beapi/icon-block

Only registered blocks are kept, so on WordPress 6.4–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_tabs_allowed_icon_blocks filter:

add_filter(
	'blockparty_tabs_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 tab.

Changing Colors

1. Select the tabs block
2. Use the color settings in the right sidebar to customize:
   • Tab background colors
   • Text colors
   • Active tab colors

Adding Content to Tabs

1. Click inside a tab panel
2. Add any WordPress block (paragraphs, images, buttons, etc.)
3. You can nest multiple blocks within each tab panel

Accessibility

The plugin generates semantic HTML with proper ARIA attributes:

• role="tablist" for the tabs container
• role="tab" for each tab button
• role="tabpanel" for each content panel
• Proper aria-controls, aria-labelledby, and aria-selected attributes
• Keyboard navigation support (Arrow keys, Tab, Enter)

Generated Markup Example

<div class="wp-block-blockparty-tabs" role="tablist">
	<ul class="wp-block-blockparty-tabs-nav">
		<li class="wp-block-blockparty-tabs-nav-item is-active">
			<a
				id="block-tab-0-0"
				role="tab"
				aria-controls="block-panel-0-0"
				class="wp-block-blockparty-tabs-nav-link"
				href="#block-tab-0-0"
				aria-selected="true"
			>
				<span>Tab 1</span>
			</a>
		</li>
		<!-- More tabs... -->
	</ul>

	<section class="wp-block-blockparty-tabs-panels">
		<div
			role="tabpanel"
			tabindex="0"
			class="wp-block-blockparty-tabs-panel-item is-active"
			id="block-panel-0-0"
			aria-labelledby="block-tab-0-0"
		>
			<div class="wp-block-blockparty-tabs-panel-item__inner">
				<!-- Your content here -->
			</div>
		</div>
		<!-- More panels... -->
	</section>
</div>

Development

Building the Plugin

npm install
npm run build

Development Mode

npm start

Linting

npm run lint:js
npm run lint:css

Testing

PHP 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-tests

JavaScript unit tests (Jest via @wordpress/scripts):

npm run test:unit:js

End-to-end tests (Playwright — editor insertion + frontend ARIA/keyboard):

npx playwright install chromium
npm run build
npm run test:e2e

Support

For bug reports and feature requests, please use the GitHub issues page.

Changelog

See readme.txt and CHANGELOG.md for the full version history.

Developed with ❤️ by Be API

License

GPL-2.0-or-later