readme.txt

=== Tabs Block – Responsive Gutenberg Tabs for Block Editor ===
Contributors:      lubus, ajitbohra, punitv342, thomasnavarro
Tags:              tabs, tabs block, block editor, responsive tabs
Requires at least: 6.6
Tested up to:      7.0
Requires PHP:      7.4
Stable tag:        1.1.5
License:           MIT
License URI:       https://opensource.org/licenses/MIT

Tabs Block for Gutenberg – create responsive, accessible tabs using the WordPress Interactivity API.

== Description ==

### Build Accessible, Responsive Tabs in the Gutenberg Block Editor

**Tabs Block for Gutenberg** lets you add beautiful, responsive, and accessible tabbed content directly in the WordPress Block Editor no coding or external libraries required.  

Whether you’re building a documentation page, a product features section, or a clean tabbed layout for content organization, this plugin helps you do it quickly and natively.

### Why Choose BlaBlaBlocks Tabs Block?

The **Tabs Block** plugin combines **modern WordPress standards** with **ease of use**. Built using the **WordPress Interactivity API**, it ensures lightweight performance, accessibility, and full compatibility with the latest versions of WordPress.

#### Key Highlights
- **Accessible Tabs:** WCAG-compliant markup, ARIA roles, and keyboard navigation support.
- **Zero Dependencies:** No jQuery or heavy JS frameworks powered by the **Interactivity API**.
- **Responsive by Default:** Tabs automatically stack or scroll on smaller screens.
-  **Horizontal & Vertical Layouts:** Switch between tab orientations with one click.
- **Ready-to-Use Templates:** Choose from prebuilt designs to jump-start your layout.
- **Seamless Block Editor Integration:** Looks, feels, and behaves like a native WordPress block.

## #Key Features

#### 1. Fully Accessible
Accessibility isn’t optional — it’s built in. Tabs Block follows **WCAG 2.1** guidelines and adds:

* ARIA attributes for screen readers.
* Tab focus management for keyboard users.
* Semantic markup that works with assistive technologies.

#### 2. Responsive by Design
No need for custom CSS or media queries. Tabs automatically adapt their layout across screen sizes:

* On desktop: clean horizontal tab navigation.  
* On mobile: collapsible stacked layout or swipe-enabled scrolling.

#### 3. Horizontal & Vertical Tabs
Want sidebar-style navigation? Just toggle layout mode. You can switch between horizontal and vertical tabs at any time, perfect for documentation pages or feature lists.

#### 4. Powered by the Interactivity API
Unlike most tab plugins that rely on JavaScript frameworks, BlaBlaBlocks Tabs Block uses **WordPress’s native Interactivity API**.  
That means:

* Faster loading and rendering.
* Better Core Web Vitals scores.
* Seamless state management between editor and frontend.

#### 5. Ready-to-Use Templates
Save time with built-in templates. Choose from multiple tab styles (minimal, boxed, underlined, colored) and insert them with one click.

#### 6. Works Everywhere
Tabs Block is fully compatible with:

* Block Themes (Full Site Editing)
* Classic Themes using the Block Editor
* Reusable Blocks and Block Patterns
* Core blocks like Columns, Groups, and Cover

### How to Use the Tabs Block

#### Step 1: Add the Tabs Block
1. In the Block Editor, click the “+” icon to add a new block.  
2. Search for **“Tabs Block”**.  
3. Select it to insert into your post or page.

#### Step 2: Choose a Layout
Open the right-hand sidebar and pick from **horizontal** or **vertical** layouts. You can switch anytime.

#### Step 3: Add Tabs and Content
Add, rename, or delete tabs using the block toolbar. Each tab panel supports any block — text, images, videos, forms, etc.

#### Step 4: Customize the Look
Use the sidebar controls to adjust:

* Colors
* Typography
* Borders
* Padding and spacing

### Step 5: Preview Responsiveness
Use the Editor’s device preview to test how your tabs behave on mobile, tablet, and desktop.

Checkout out [documentation](https://github.com/lubusIN/blablablocks-tabs-block/wiki) for more details

## Customization Options

Tabs Block integrates seamlessly with WordPress’s design tools, so you can:

* Change background and text colors using global styles.  
* Adjust spacing, borders, and radii.  
* Apply block style variations for a unified site look.

For developers, advanced customization can be done via CSS custom properties or theme JSON overrides.

### Common Use Cases

- **Product Features Tabs:** Highlight product details, specifications, and reviews.
- **Documentation Pages:** Organize setup instructions and API references.
- **FAQs:** Group related questions under topic-based tabs.
- **Pricing Comparisons:** Present plan details side by side.
- **Portfolio Showcases:** Display projects or case studies by category.


###  Integration and Compatibility

Tabs Block integrates smoothly with:

- **Core WordPress Blocks:** Columns, Groups, Cover, Image, Paragraph, Buttons, etc.
- **Full Site Editing (FSE):** Works in templates and template parts.
- **Reusable Blocks:** Create once, reuse anywhere.
- **Translation Plugins:** WPML, Polylang, Loco Translate.
- **Caching & Optimization Plugins:** No conflicts with WP Rocket, LiteSpeed Cache, or Autoptimize.

### Troubleshooting

#### Tabs Not Switching?

- Check for JavaScript errors in your browser console.
- Ensure WordPress 6.5 or higher is installed (Interactivity API required).

#### Styles Not Applying?
Your theme’s CSS may override tab styles. Try adding a higher specificity rule or using the block’s built-in design controls.

### Open Source and Free

**BlaBlaBlocks Tabs Block** is open source under the **MIT License**.  
You can freely use, modify, and contribute to its development.

- **Source Code:**  
  [https://github.com/lubusIN/blablablocks-tabs-block](https://github.com/lubusIN/blablablocks-tabs-block)

- **Report Issues:**  
  [https://github.com/lubusIN/blablablocks-tabs-block/issues](https://github.com/lubusIN/blablablocks-tabs-block/issues)

- **Documentation:**  
  [https://github.com/lubusIN/blablablocks-tabs-block/wiki](https://github.com/lubusIN/blablablocks-tabs-block/wiki)

== Frequently Asked Questions ==

### 1. Does this plugin work with Full Site Editing?
Yes. Tabs Block works perfectly with block themes and the Site Editor.

### 2. Can I add blocks inside tabs?
Absolutely. Each tab panel is a container for any core or third-party block.

### 3. Is this plugin mobile-friendly?
Yes. Tabs automatically become scrollable or stacked on small screens.

### 4. Can I use the Tabs Block inside Columns or Groups?
Yes. It supports full nesting and alignment control.

### 5. Does it require JavaScript libraries?
No. Tabs Block uses **WordPress’s Interactivity API**, eliminating dependency on jQuery.

### 6. How do I change colors and typography?
Use the built-in WordPress color, typography, and border tools under the block sidebar.

### 7. Can I create my own tab templates?
Yes. You can save a Tabs Block setup as a Reusable Block or pattern and reuse it across posts.

### 8. How do I make vertical tabs?
Select the Tabs Block → under Layout settings → choose “Vertical”.

### 9. Why aren’t my tabs switching?
Ensure you’re on WordPress 6.5+ and your theme doesn’t override Interactivity API features.

### 10. Can I style tabs using CSS?
Yes. Each tab and panel has a unique class name for custom styling.

### 11. Is it compatible with caching plugins?
Yes. Tabs Block doesn’t rely on AJAX or dynamic requests, so caching won’t affect functionality.

== Screenshots ==
1. **Editor Settings** – Customize tab layouts in the Block Editor sidebar.  
2. **Responsive Preview** – Tabs adapt automatically for mobile, tablet, and desktop.  
3. **Template Library** – Choose from multiple ready-to-use tab designs.  
4. **Frontend Example** – See how responsive tabs render beautifully on your site.

== Installation ==

= Automatic =
1. Log in to your WordPress dashboard.
2. Navigate to Plugins > Add New.
3. In the search field, type “Tabs Block for Gutenberg”, then click Search Plugins.
4. Click Install Now, then Activate.

= Manual =
1. Download the BlaBlaBlocks Tabs Block plugin.
2. Upload it to your server via FTP under `/wp-content/plugins/`.
3. Activate it through the Plugins screen in WordPress.

== Changelog ==

= 1.1.5 =
* Chore: Update Tested up to 7.0.

= 1.1.4 =
* Fix: Corrected keyboard roving tabindex behavior so only the selected tab is focusable via `Tab`, and unselected tabs use `tabindex="-1"` [#40](https://github.com/lubusIN/blablablocks-tabs-block/issues/40)
* Fix: Restored visible keyboard focus indicator for tab buttons by removing focus outline suppression [#41](https://github.com/lubusIN/blablablocks-tabs-block/issues/41)

= 1.1.3 =
* Fix: Resolved issue where Tabs gap was not applied when using spacing presets (e.g. small, medium, large). Preset values are now correctly converted to valid CSS variables like var(--wp--preset--spacing--*).
* Fix: Corrected rendering of rich text formats inside Tabs content. Rich formatting is now properly applied on the frontend instead of being output as raw HTML strings.

= 1.1.2 =
* Fix: Ensure tabId is always synced with clientId to prevent duplication issues by @thomasnavarro in [#32](https://github.com/lubusIN/blablablocks-tabs-block/pull/32)

= 1.1.1 =
* Fix: Escape special characters in tab titles to prevent block crash [#30](https://github.com/lubusIN/blablablocks-tabs-block/pull/30)

= 1.1.0 =
* Fix: Site Editor constantly showing "Review changes" after inserting Tabs block [#27](https://github.com/lubusIN/blablablocks-tabs-block/issues/27)
* Bump plugin version to 1.1.0.
* Update "Tested up to" to 6.9.

= 1.0.0 =
* Initial release of Tabs Block for Gutenberg.
* Added responsive horizontal and vertical tab layouts.
* Built using WordPress Interactivity API for zero-dependency performance.
* Includes ready-to-use templates and accessible WCAG-compliant markup.