Title: Tabs Block – Responsive Gutenberg Tabs for Block Editor Author: lubus Published: 2025年8月25日 Last modified: 2026年5月26日 --- プラグインを検索 ![](https://ps.w.org/blablablocks-tabs-block/assets/banner-772x250.png?rev=3548869) ![](https://ps.w.org/blablablocks-tabs-block/assets/icon-256x256.png?rev=3548869) # Tabs Block – Responsive Gutenberg Tabs for Block Editor 作者: [lubus](https://profiles.wordpress.org/lubus/) [ダウンロード](https://downloads.wordpress.org/plugin/blablablocks-tabs-block.1.1.5.zip) [ライブプレビュー](https://ja.wordpress.org/plugins/blablablocks-tabs-block/?preview=1) * [詳細](https://ja.wordpress.org/plugins/blablablocks-tabs-block/#description) * [レビュー](https://ja.wordpress.org/plugins/blablablocks-tabs-block/#reviews) * [インストール](https://ja.wordpress.org/plugins/blablablocks-tabs-block/#installation) * [開発](https://ja.wordpress.org/plugins/blablablocks-tabs-block/#developers) [サポート](https://wordpress.org/support/plugin/blablablocks-tabs-block/) ## 説明 ### 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) ## スクリーンショット * [[ * **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. ## ブロック このプラグインは2個のブロックを提供します。 * 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. ## インストール #### 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. ## FAQ ### 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. ## 評価 ![](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/) 2026年3月22日 Works like a charm with block theme Thank you for this 🙂 [ 1件のレビューをすべて表示 ](https://wordpress.org/support/plugin/blablablocks-tabs-block/reviews/) ## 貢献者と開発者 Tabs Block – Responsive Gutenberg Tabs for Block Editor はオープンソースソフトウェア です。以下の人々がこのプラグインに貢献しています。 貢献者 * [ 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/) “Tabs Block – Responsive Gutenberg Tabs for Block Editor” は1ロケールに翻訳されてい ます。 [翻訳者](https://translate.wordpress.org/projects/wp-plugins/blablablocks-tabs-block/contributors) のみなさん、翻訳へのご協力ありがとうございます。 [“Tabs Block – Responsive Gutenberg Tabs for Block Editor” をあなたの言語に翻訳しましょう。](https://translate.wordpress.org/projects/wp-plugins/blablablocks-tabs-block) ### 開発に興味がありますか ? [コードを閲覧](https://plugins.trac.wordpress.org/browser/blablablocks-tabs-block/) するか、[SVN リポジトリ](https://plugins.svn.wordpress.org/blablablocks-tabs-block/) をチェックするか、[開発ログ](https://plugins.trac.wordpress.org/log/blablablocks-tabs-block/) を [RSS](https://plugins.trac.wordpress.org/log/blablablocks-tabs-block/?limit=100&mode=stop_on_copy&format=rss) で購読してみてください。 ## 変更履歴 #### 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. ## メタ * バージョン **1.1.5** * 最終更新日 **1週間前** * 有効インストール数 **500+** * WordPress バージョン ** 6.6またはそれ以降 ** * 検証済み最新バージョン: **7.0** * PHP バージョン ** 7.4またはそれ以降 ** * 言語 * [English (US)](https://wordpress.org/plugins/blablablocks-tabs-block/)、[Spanish (Costa Rica)](https://es-cr.wordpress.org/plugins/blablablocks-tabs-block/). * [プラグインを翻訳](https://translate.wordpress.org/projects/wp-plugins/blablablocks-tabs-block) * タグ * [block-editor](https://ja.wordpress.org/plugins/tags/block-editor/)[responsive tabs](https://ja.wordpress.org/plugins/tags/responsive-tabs/) [tabs](https://ja.wordpress.org/plugins/tags/tabs/)[tabs block](https://ja.wordpress.org/plugins/tags/tabs-block/) * [詳細を表示](https://ja.wordpress.org/plugins/blablablocks-tabs-block/advanced/) ## 評価 5つ星中5つ星 * [ 1 5-星レビュー ](https://wordpress.org/support/plugin/blablablocks-tabs-block/reviews/?filter=5) * [ 0 4-星レビュー ](https://wordpress.org/support/plugin/blablablocks-tabs-block/reviews/?filter=4) * [ 0 3-星レビュー ](https://wordpress.org/support/plugin/blablablocks-tabs-block/reviews/?filter=3) * [ 0 2-星レビュー ](https://wordpress.org/support/plugin/blablablocks-tabs-block/reviews/?filter=2) * [ 0 1-星レビュー ](https://wordpress.org/support/plugin/blablablocks-tabs-block/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/blablablocks-tabs-block/reviews/#new-post) [すべてのレビューを見る](https://wordpress.org/support/plugin/blablablocks-tabs-block/reviews/) ## 貢献者 * [ 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/) ## サポート 意見や質問がありますか ? [サポートフォーラムを表示](https://wordpress.org/support/plugin/blablablocks-tabs-block/)