Tabs Block – Responsive Gutenberg Tabs for Block Editor
Tabs Block for Gutenberg – create responsive, accessible tabs using the WordPress Interactivity API.
Solid choice
Tabs Block is a solid plugin choice in 2026, with a few things worth checking first. It runs on 700+ sites, is rated 5/5 and was last updated 3 weeks ago, and scores 77/100 on our health check.
- Actively developed — last update 3 weeks ago
- Tested with the latest WordPress (7.1)
- Small user base (700+ active installs)
- Very few reviews so far
How does it stack up?
Side-by-side on installs, updates, ratings & support
Daily downloads
Download spikes usually follow a new release — each site that auto-updates counts as a download.
Rankings
Where Tabs Block stands todayWordPress.org search rankings
Live position in the plugin search, top 100| Keyword | Position |
|---|---|
| block-editor | #41 |
| responsive tabs | #9 |
| tabs | #10 |
| tabs block | #3 |
Version adoption
Share of active sites per release.
Rating breakdown
★★★★★★★★★★ 5 from 1 reviews
About Tabs Block
From the official readme · v1.1.5Description
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
- In the Block Editor, click the “+” icon to add a new block.
- Search for “Tabs Block”.
- 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 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 -
Report Issues:
https://github.com/lubusIN/blablablocks-tabs-block/issues -
Documentation:
https://github.com/lubusIN/blablablocks-tabs-block/wiki
Installation
Automatic
- Log in to your WordPress dashboard.
- Navigate to Plugins > Add New.
- In the search field, type “Tabs Block for Gutenberg”, then click Search Plugins.
- Click Install Now, then Activate.
Manual
- Download the BlaBlaBlocks Tabs Block plugin.
- Upload it to your server via FTP under
/wp-content/plugins/. - Activate it through the Plugins screen in WordPress.
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.
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 usetabindex="-1"#40 - Fix: Restored visible keyboard focus indicator for tab buttons by removing focus outline suppression #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
1.1.1
- Fix: Escape special characters in tab titles to prevent block crash #30
1.1.0
- Fix: Site Editor constantly showing “Review changes” after inserting Tabs block #27
- Bump plugin version to 1.1.0.
- Update “Tested up to” to 6.9.
Screenshots
For developers
Is this your plugin? Show off the numbers.
Add a live badge to your site, docs or GitHub README. It updates on its own — no account needed.
Best Tabs Block alternatives
All block-editor plugins →
FAQ
Tabs Block: quick answers
Straight answers, pulled from live WordPress.org data.
Live data from WordPress.org · checked Oct 2, 2026
Is Tabs Block free?
Yes. Tabs Block is free to download and use from the official WordPress.org plugin directory.
Is Tabs Block safe to use in 2026?
Tabs Block is a solid plugin choice in 2026, with a few things worth checking first. It runs on 700+ sites, is rated 5/5 and was last updated 3 weeks ago, and scores 77/100 on our health check.
How many websites use Tabs Block?
Tabs Block is active on 700+ WordPress websites and has been downloaded 6,488 times since it launched in August 2025. It was downloaded 392 times in the last 30 days.
Does Tabs Block work with WordPress 7.1?
Yes. The developer has tested Tabs Block up to WordPress 7.1.2, the latest release. It requires WordPress 6.6 or newer.
What PHP version does Tabs Block need?
Tabs Block requires PHP 7.4 or higher. Most hosts run PHP 8.x today, so it works on any modern WordPress hosting.
When was Tabs Block last updated?
The latest version, 1.1.5, was released on September 9, 2026 (3 weeks ago).
Who makes Tabs Block?
Tabs Block is developed and maintained by lubus.
What are the best alternatives to Tabs Block?
The most popular alternatives to Tabs Block are Classic Editor (8M+ installs), Advanced Editor Tools (1M+ installs) and Disable Gutenberg (500K+ installs).
Powered by PageForge
Want thousands of pages that rank like these? Build them in an afternoon.
This directory runs on the same engine as PageForge. Turn any spreadsheet, CSV or API into thousands of fast, SEO-ready WordPress pages — with schema, internal links and AI-written copy baked in.
- CSV, Google Sheets & API data sources
- AI content, schema & internal links per page
- Works with Elementor, Gutenberg, Yoast & Rank Math
- Free on WordPress.org — no credit card
