Title: Tabs Block – Responsive Gutenberg Tabs for Block Editor Author: lubus Published: 25 august 2025 Last modified: 23 martie 2026 --- Caută module ![](https://ps.w.org/blablablocks-tabs-block/assets/banner-772x250.png?rev=3349524) ![](https://ps.w.org/blablablocks-tabs-block/assets/icon-256x256.png?rev=3349524) # Tabs Block – Responsive Gutenberg Tabs for Block Editor De [lubus](https://profiles.wordpress.org/lubus/) [Descarcă](https://downloads.wordpress.org/plugin/blablablocks-tabs-block.1.1.3.zip) [Previzualizează live](https://ro.wordpress.org/plugins/blablablocks-tabs-block/?preview=1) * [Detalii](https://ro.wordpress.org/plugins/blablablocks-tabs-block/#description) * [Recenzii](https://ro.wordpress.org/plugins/blablablocks-tabs-block/#reviews) * [Instalare](https://ro.wordpress.org/plugins/blablablocks-tabs-block/#installation) * [Dezvoltare](https://ro.wordpress.org/plugins/blablablocks-tabs-block/#developers) [Suport](https://wordpress.org/support/plugin/blablablocks-tabs-block/) ## Descriere ### 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) ## Capturi ecran * [[ * **Editor Settings** – Customize tab layouts in the Block Editor sidebar. * [[ * **Responsive Preview** – Tabs adapt automatically for mobile, tablet, and desktop. * [[ * **Template Library** – Choose from multiple ready-to-use tab designs. * [[ * **Frontend Example** – See how responsive tabs render beautifully on your site. ## Blocuri Acest modul oferă 2 blocuri. * Tabs A dynamic tab block that lets you organize content into interactive, customizable tabs. Easily manage and display information in a clean, user-friendly layout. * Tab A single tab within a tabs block. ## Instalare #### 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. ## Întrebări frecvente ### 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. ## Recenzii ![](https://secure.gravatar.com/avatar/807225c3ea3b68a06bf38e9eeb36b47654652b4ba16c8f1148036daa3e649d0b? s=60&d=retro&r=g) ### 󠀁[Amazing plugin for block theme](https://wordpress.org/support/topic/amazing-plugin-for-block-theme/)󠁿 [DeepBlue](https://profiles.wordpress.org/deepblue5/) 22 martie 2026 Works like a charm with block theme Thank you for this 🙂 [ Citește o recenzie ](https://wordpress.org/support/plugin/blablablocks-tabs-block/reviews/) ## Contributori și dezvoltatori „Tabs Block – Responsive Gutenberg Tabs for Block Editor” este un software open- source. La acest modul au contribuit următoarele persoane. Contributori * [ lubus ](https://profiles.wordpress.org/lubus/) * [ Ajit Bohra ](https://profiles.wordpress.org/ajitbohra/) * [ Punit Verma ](https://profiles.wordpress.org/punitv342/) * [ Thomas Navarro ](https://profiles.wordpress.org/thomasnavarro/) [Tradu „Tabs Block – Responsive Gutenberg Tabs for Block Editor” în limba ta.](https://translate.wordpress.org/projects/wp-plugins/blablablocks-tabs-block) ### Te interesează dezvoltarea? [Răsfoiește codul](https://plugins.trac.wordpress.org/browser/blablablocks-tabs-block/), vezi [depozitarul SVN](https://plugins.svn.wordpress.org/blablablocks-tabs-block/), sau abonează-te la [jurnalul de dezvoltare](https://plugins.trac.wordpress.org/log/blablablocks-tabs-block/) prin [RSS](https://plugins.trac.wordpress.org/log/blablablocks-tabs-block/?limit=100&mode=stop_on_copy&format=rss). ## Istoric modificări #### 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. ## Meta * Versiunea **1.1.3** * Ultima actualizare **Acum 2 săptămâni** * Instalări active: **400+** * Versiune WordPress ** 6.6 sau mai recentă ** * Testat până la **6.9.4** * Versiune PHP ** 7.4 sau mai recentă ** * Limbă * [English (US)](https://wordpress.org/plugins/blablablocks-tabs-block/) * Etichete * [block-editor](https://ro.wordpress.org/plugins/tags/block-editor/)[responsive tabs](https://ro.wordpress.org/plugins/tags/responsive-tabs/) [tabs](https://ro.wordpress.org/plugins/tags/tabs/)[tabs block](https://ro.wordpress.org/plugins/tags/tabs-block/) * [Vizualizare avansată](https://ro.wordpress.org/plugins/blablablocks-tabs-block/advanced/) ## Evaluări 5 din 5 stele. * [ 1 5 – recenzie (stele) ](https://wordpress.org/support/plugin/blablablocks-tabs-block/reviews/?filter=5) * [ 0 4 – recenzii (stele) ](https://wordpress.org/support/plugin/blablablocks-tabs-block/reviews/?filter=4) * [ 0 3 – recenzii (stele) ](https://wordpress.org/support/plugin/blablablocks-tabs-block/reviews/?filter=3) * [ 0 2 – recenzii (stele) ](https://wordpress.org/support/plugin/blablablocks-tabs-block/reviews/?filter=2) * [ 0 1 – recenzii (stele) ](https://wordpress.org/support/plugin/blablablocks-tabs-block/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/blablablocks-tabs-block/reviews/#new-post) [Vezi toate recenziile](https://wordpress.org/support/plugin/blablablocks-tabs-block/reviews/) ## Contributori * [ lubus ](https://profiles.wordpress.org/lubus/) * [ Ajit Bohra ](https://profiles.wordpress.org/ajitbohra/) * [ Punit Verma ](https://profiles.wordpress.org/punitv342/) * [ Thomas Navarro ](https://profiles.wordpress.org/thomasnavarro/) ## Suport Ai ceva de zis? Ai nevoie de ajutor? [Vezi forumul pentru suport](https://wordpress.org/support/plugin/blablablocks-tabs-block/)