lubus

Ajit Bohra

Punit Verma

<h3>Build Accessible, Responsive Tabs in the Gutenberg Block Editor</h3>
<p><strong>Tabs Block for Gutenberg</strong> lets you add beautiful, responsive, and accessible tabbed content directly in the WordPress Block Editor no coding or external libraries required.</p>
<p>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.</p>
<h3>Why Choose BlaBlaBlocks Tabs Block?</h3>
<p>The <strong>Tabs Block</strong> plugin combines <strong>modern WordPress standards</strong> with <strong>ease of use</strong>. Built using the <strong>WordPress Interactivity API</strong>, it ensures lightweight performance, accessibility, and full compatibility with the latest versions of WordPress.</p>
<h4>Key Highlights</h4>
<ul>
<li><strong>Accessible Tabs:</strong> WCAG-compliant markup, ARIA roles, and keyboard navigation support.</li>
<li><strong>Zero Dependencies:</strong> No jQuery or heavy JS frameworks powered by the <strong>Interactivity API</strong>.</li>
<li><strong>Responsive by Default:</strong> Tabs automatically stack or scroll on smaller screens.</li>
<li><strong>Horizontal & Vertical Layouts:</strong> Switch between tab orientations with one click.</li>
<li><strong>Ready-to-Use Templates:</strong> Choose from prebuilt designs to jump-start your layout.</li>
<li><strong>Seamless Block Editor Integration:</strong> Looks, feels, and behaves like a native WordPress block.</li>
</ul>
<h3>Key Features</h3>
<h4>1. Fully Accessible</h4>
<p>Accessibility isn’t optional — it’s built in. Tabs Block follows <strong>WCAG 2.1</strong> guidelines and adds:</p>
<ul>
<li>ARIA attributes for screen readers.</li>
<li>Tab focus management for keyboard users.</li>
<li>Semantic markup that works with assistive technologies.</li>
</ul>
<h4>2. Responsive by Design</h4>
<p>No need for custom CSS or media queries. Tabs automatically adapt their layout across screen sizes:</p>
<ul>
<li>On desktop: clean horizontal tab navigation.  </li>
<li>On mobile: collapsible stacked layout or swipe-enabled scrolling.</li>
</ul>
<h4>3. Horizontal & Vertical Tabs</h4>
<p>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.</p>
<h4>4. Powered by the Interactivity API</h4>
<p>Unlike most tab plugins that rely on JavaScript frameworks, BlaBlaBlocks Tabs Block uses <strong>WordPress’s native Interactivity API</strong>.<br />
That means:</p>
<ul>
<li>Faster loading and rendering.</li>
<li>Better Core Web Vitals scores.</li>
<li>Seamless state management between editor and frontend.</li>
</ul>
<h4>5. Ready-to-Use Templates</h4>
<p>Save time with built-in templates. Choose from multiple tab styles (minimal, boxed, underlined, colored) and insert them with one click.</p>
<h4>6. Works Everywhere</h4>
<p>Tabs Block is fully compatible with:</p>
<ul>
<li>Block Themes (Full Site Editing)</li>
<li>Classic Themes using the Block Editor</li>
<li>Reusable Blocks and Block Patterns</li>
<li>Core blocks like Columns, Groups, and Cover</li>
</ul>
<h3>How to Use the Tabs Block</h3>
<h4>Step 1: Add the Tabs Block</h4>
<ol>
<li>In the Block Editor, click the “+” icon to add a new block.  </li>
<li>Search for <strong>“Tabs Block”</strong>.  </li>
<li>Select it to insert into your post or page.</li>
</ol>
<h4>Step 2: Choose a Layout</h4>
<p>Open the right-hand sidebar and pick from <strong>horizontal</strong> or <strong>vertical</strong> layouts. You can switch anytime.</p>
<h4>Step 3: Add Tabs and Content</h4>
<p>Add, rename, or delete tabs using the block toolbar. Each tab panel supports any block — text, images, videos, forms, etc.</p>
<h4>Step 4: Customize the Look</h4>
<p>Use the sidebar controls to adjust:</p>
<ul>
<li>Colors</li>
<li>Typography</li>
<li>Borders</li>
<li>Padding and spacing</li>
</ul>
<h3>Step 5: Preview Responsiveness</h3>
<p>Use the Editor’s device preview to test how your tabs behave on mobile, tablet, and desktop.</p>
<p>Checkout out <a href="https://github.com/lubusIN/blablablocks-tabs-block/wiki" rel="nofollow ugc">documentation</a> for more details</p>
<h3>Customization Options</h3>
<p>Tabs Block integrates seamlessly with WordPress’s design tools, so you can:</p>
<ul>
<li>Change background and text colors using global styles.  </li>
<li>Adjust spacing, borders, and radii.  </li>
<li>Apply block style variations for a unified site look.</li>
</ul>
<p>For developers, advanced customization can be done via CSS custom properties or theme JSON overrides.</p>
<h3>Common Use Cases</h3>
<ul>
<li><strong>Product Features Tabs:</strong> Highlight product details, specifications, and reviews.</li>
<li><strong>Documentation Pages:</strong> Organize setup instructions and API references.</li>
<li><strong>FAQs:</strong> Group related questions under topic-based tabs.</li>
<li><strong>Pricing Comparisons:</strong> Present plan details side by side.</li>
<li><strong>Portfolio Showcases:</strong> Display projects or case studies by category.</li>
</ul>
<h3>Integration and Compatibility</h3>
<p>Tabs Block integrates smoothly with:</p>
<ul>
<li><strong>Core WordPress Blocks:</strong> Columns, Groups, Cover, Image, Paragraph, Buttons, etc.</li>
<li><strong>Full Site Editing (FSE):</strong> Works in templates and template parts.</li>
<li><strong>Reusable Blocks:</strong> Create once, reuse anywhere.</li>
<li><strong>Translation Plugins:</strong> WPML, Polylang, Loco Translate.</li>
<li><strong>Caching & Optimization Plugins:</strong> No conflicts with WP Rocket, LiteSpeed Cache, or Autoptimize.</li>
</ul>
<h3>Troubleshooting</h3>
<h4>Tabs Not Switching?</h4>
<ul>
<li>Check for JavaScript errors in your browser console.</li>
<li>Ensure WordPress 6.5 or higher is installed (Interactivity API required).</li>
</ul>
<h4>Styles Not Applying?</h4>
<p>Your theme’s CSS may override tab styles. Try adding a higher specificity rule or using the block’s built-in design controls.</p>
<h3>Open Source and Free</h3>
<p><strong>BlaBlaBlocks Tabs Block</strong> is open source under the <strong>MIT License</strong>.<br />
You can freely use, modify, and contribute to its development.</p>
<ul>
<li>
<p><strong>Source Code:</strong><br />
<a href="https://github.com/lubusIN/blablablocks-tabs-block" rel="nofollow ugc">https://github.com/lubusIN/blablablocks-tabs-block</a></p>
</li>
<li>
<p><strong>Report Issues:</strong><br />
<a href="https://github.com/lubusIN/blablablocks-tabs-block/issues" rel="nofollow ugc">https://github.com/lubusIN/blablablocks-tabs-block/issues</a></p>
</li>
<li>
<p><strong>Documentation:</strong><br />
<a href="https://github.com/lubusIN/blablablocks-tabs-block/wiki" rel="nofollow ugc">https://github.com/lubusIN/blablablocks-tabs-block/wiki</a></p>
</li>
</ul>


Tabs Block – Responsive Gutenberg Tabs for Block Editor

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

Binsaifullah

<p><strong>Advnaced Tabs Block</strong> is a custom Gutenberg Block developed with <strong>Gutenberg Native Components</strong>. You can easily showcase your contents in <strong>Tabs Style</strong> using this block. It has come with a lot of customization and styling options.</p>
<h3>Overview</h3>
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/ZqCh5G-FMSU?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span>
<h3>Key Features</h3>
<ul>
<li>Simple, light-weight, and super-fast</li>
<li><strong>Built with only Gutenberg Native Components</strong></li>
<li><strong>Load scripts only the page where the block is used</strong></li>
<li><strong>No Block Builder at all</strong></li>
<li><strong>100% Responsive</strong></li>
<li>Advanced Customization options</li>
<li><strong>Easy to Use in Gutenberg Editor</strong></li>
<li><strong>Drag & Drop Use</strong></li>
<li><strong>All types of contents are allowed as Tabs Content</strong></li>
</ul>
<h4>Update Notice</h4>
<blockquote>
<p>This is a major stable update. So, the old version will be broken. Please redesign your tabs using the new version. Sorry for the inconvenience.</p>
</blockquote>


Advanced Tabs Gutenberg Block

When I try to create Tabs without any border color set, the editor doesn't display the block content after refreshing (after clicking on the restore link it works again, so only a little bug I guess). Also when adding columns inside a tab, the block list appender gets stretched over the content - some CSS issue maybe.

Works, it's just a little buggy

This is a super easy tab block with just one js file of less than 1kb, lots of colors, and other settings also available.

Excellent Tab block , lightweight and easy to use

Amazing!


Once I add this tabs block ( mind you, it is only a horizontal tabs block and NOT vertical, you cannot change that ), my page just froze. I had to disable and remove the plugin to make it work again.


Broke my page

Advnaced Tabs Block is a custom Gutenberg Block developed with Gutenberg Native Components. You can easily showcase your contents in Tabs Style using  …

Tabs Block – Responsive Gutenberg Tabs for Block Editor vs Advanced Tabs Gutenberg Block