Skip to content

Commit c4a41ae

Browse files
authored
Merge pull request #14 from BeAPI/release/1.0.4
Release 1.0.4
2 parents 3ee8406 + 2831a15 commit c4a41ae

15 files changed

Lines changed: 273 additions & 83 deletions

File tree

.github/banner-github.png

25.7 KB
Loading

.plugin-data

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
2-
"version": "1.0.3",
2+
"version": "1.0.4",
33
"slug": "blockparty-tabs"
44
}

CHANGELOG.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# Changelog
2+
3+
All notable changes to this project will be documented in this file.
4+
5+
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
6+
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7+
8+
## 1.0.4 - 2025-11-07
9+
10+
* Replacement of icon for the icon block
11+
12+
## 1.0.3 - 2025-09-05
13+
14+
* fix icon inserter
15+
16+
## 1.0.2 - 2025-02-26
17+
18+
* allow aria and tabindex attributes
19+
20+
## 1.0.1 - 2024-12-04
21+
22+
* fix tabs scripts
23+
24+
## 1.0.0- 2024-04-03
25+
26+
* Initial release

README.md

Lines changed: 141 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,141 @@
1-
# Blockparty Tabs
1+
[![Be API Github Banner](.github/banner-github.png)](https://beapi.fr)
2+
3+
# Blockparty Tabs
4+
5+
An accessible tabs block for WordPress Gutenberg editor that follows ARIA best practices.
6+
7+
## Features
8+
9+
-**Accessible**: Built with proper ARIA attributes and keyboard navigation support
10+
- 🎨 **Customizable**: Add custom colors and icons to your tabs
11+
- 🧩 **Flexible**: Nest any WordPress block inside tab panels
12+
-**Easy to use**: Simple interface to add, remove, and reorder tabs
13+
14+
## Requirements
15+
16+
- WordPress 6.2 or higher
17+
- PHP 8.1 or higher
18+
- Gutenberg editor enabled
19+
20+
## Installation
21+
22+
### Manual Installation
23+
24+
1. Download the plugin files
25+
2. Upload the `blockparty-tabs` folder to the `/wp-content/plugins/` directory
26+
3. Activate the plugin through the 'Plugins' menu in WordPress
27+
28+
### Composer Installation
29+
30+
```bash
31+
composer require beapi/blockparty-tabs
32+
```
33+
34+
## Usage
35+
36+
### Adding a Tabs Block
37+
38+
1. In the WordPress editor, click the **+** button to add a new block
39+
2. Search for "Tabs" or "Blockparty Tabs"
40+
3. Click on the block to insert it into your content
41+
42+
By default, the block comes with 3 tabs. Each tab contains a panel where you can add any content.
43+
44+
### Adding/Removing Tabs
45+
46+
- **Add a tab**: Click the "Add Item After" button in the block toolbar
47+
- **Remove a tab**: Select the tab you want to remove and click the trash icon in the toolbar
48+
49+
### Customizing Tabs
50+
51+
#### Adding Icons
52+
53+
1. Select a tab item
54+
2. In the block toolbar, click the "Icon" button
55+
3. Choose an icon from the available options
56+
57+
#### Changing Colors
58+
59+
1. Select the tabs block
60+
2. Use the color settings in the right sidebar to customize:
61+
- Tab background colors
62+
- Text colors
63+
- Active tab colors
64+
65+
### Adding Content to Tabs
66+
67+
1. Click inside a tab panel
68+
2. Add any WordPress block (paragraphs, images, buttons, etc.)
69+
3. You can nest multiple blocks within each tab panel
70+
71+
## Accessibility
72+
73+
The plugin generates semantic HTML with proper ARIA attributes:
74+
75+
- `role="tablist"` for the tabs container
76+
- `role="tab"` for each tab button
77+
- `role="tabpanel"` for each content panel
78+
- Proper `aria-controls`, `aria-labelledby`, and `aria-selected` attributes
79+
- Keyboard navigation support (Arrow keys, Tab, Enter)
80+
81+
## Generated Markup Example
82+
83+
```html
84+
<div class="wp-block-blockparty-tabs" role="tablist">
85+
<ul class="wp-block-blockparty-tabs-nav">
86+
<li class="wp-block-blockparty-tabs-nav-item is-active">
87+
<a id="block-tab-0-0" role="tab" aria-controls="block-panel-0-0"
88+
class="wp-block-blockparty-tabs-nav-link" href="#block-tab-0-0"
89+
aria-selected="true">
90+
<span>Tab 1</span>
91+
</a>
92+
</li>
93+
<!-- More tabs... -->
94+
</ul>
95+
96+
<section class="wp-block-blockparty-tabs-panels">
97+
<div role="tabpanel" tabindex="0"
98+
class="wp-block-blockparty-tabs-panel-item is-active"
99+
id="block-panel-0-0" aria-labelledby="block-tab-0-0">
100+
<div class="wp-block-blockparty-tabs-panel-item__inner">
101+
<!-- Your content here -->
102+
</div>
103+
</div>
104+
<!-- More panels... -->
105+
</section>
106+
</div>
107+
```
108+
109+
## Development
110+
111+
### Building the Plugin
112+
113+
```bash
114+
npm install
115+
npm run build
116+
```
117+
118+
### Development Mode
119+
120+
```bash
121+
npm start
122+
```
123+
124+
### Linting
125+
126+
```bash
127+
npm run lint:js
128+
npm run lint:css
129+
```
130+
131+
## Support
132+
133+
For bug reports and feature requests, please use the [GitHub issues](https://github.com/BeAPI/blockparty-tabs/issues) page.
134+
135+
## Credits
136+
137+
Developed by [Be API Technical Team](https://beapi.fr)
138+
139+
## License
140+
141+
GPL-2.0-or-later

blockparty-tabs.php

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
* Description: Accessible Tabs block for WordPress gutenberg.
55
* Requires at least: 6.2
66
* Requires PHP: 8.1
7-
* Version: 1.0.3
7+
* Version: 1.0.4
88
* Author: Be API Technical team
99
* Author URI: https://beapi.fr
1010
* License: GPL-2.0-or-later
@@ -14,7 +14,7 @@
1414

1515
namespace Blockparty\Tabs;
1616

17-
define( 'BLOCKPARTY_TABS_VERSION', '1.0.3' );
17+
define( 'BLOCKPARTY_TABS_VERSION', '1.0.4' );
1818
define( 'BLOCKPARTY_TABS_URL', plugin_dir_url( __FILE__ ) );
1919
define( 'BLOCKPARTY_TABS_DIR', plugin_dir_path( __FILE__ ) );
2020
define( 'BLOCKPARTY_TABS_PLUGIN_BASENAME', plugin_basename( __FILE__ ) );

0 commit comments

Comments
 (0)