Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added .github/banner-github.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion .plugin-data
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{
"version": "1.0.3",
"version": "1.0.4",
"slug": "blockparty-tabs"
}
26 changes: 26 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
# Changelog

All notable changes to this project will be documented in this file.

The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

## 1.0.4 - 2025-11-07

* Replacement of icon for the icon block

## 1.0.3 - 2025-09-05

* fix icon inserter

## 1.0.2 - 2025-02-26

* allow aria and tabindex attributes

## 1.0.1 - 2024-12-04

* fix tabs scripts

## 1.0.0- 2024-04-03

* Initial release
142 changes: 141 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1 +1,141 @@
# Blockparty Tabs
[![Be API Github Banner](.github/banner-github.png)](https://beapi.fr)

# 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.2 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

```bash
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 the available options

#### 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

```html
<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

```bash
npm install
npm run build
```

### Development Mode

```bash
npm start
```

### Linting

```bash
npm run lint:js
npm run lint:css
```

## Support

For bug reports and feature requests, please use the [GitHub issues](https://github.com/BeAPI/blockparty-tabs/issues) page.

## Credits

Developed by [Be API Technical Team](https://beapi.fr)

## License

GPL-2.0-or-later
4 changes: 2 additions & 2 deletions blockparty-tabs.php
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* Description: Accessible Tabs block for WordPress gutenberg.
* Requires at least: 6.2
* Requires PHP: 8.1
* Version: 1.0.3
* Version: 1.0.4
* Author: Be API Technical team
* Author URI: https://beapi.fr
* License: GPL-2.0-or-later
Expand All @@ -14,7 +14,7 @@

namespace Blockparty\Tabs;

define( 'BLOCKPARTY_TABS_VERSION', '1.0.3' );
define( 'BLOCKPARTY_TABS_VERSION', '1.0.4' );
define( 'BLOCKPARTY_TABS_URL', plugin_dir_url( __FILE__ ) );
define( 'BLOCKPARTY_TABS_DIR', plugin_dir_path( __FILE__ ) );
define( 'BLOCKPARTY_TABS_PLUGIN_BASENAME', plugin_basename( __FILE__ ) );
Expand Down
Loading
Loading