[WordPress] 外掛分享： Tabs Block – Responsive Gutenberg Tabs for Block Editor

WordPress 外掛 Tabs Block – Responsive Gutenberg Tabs for Block Editor 的封面圖片。

前言介紹

  • 這款 WordPress 外掛「Tabs Block – Responsive Gutenberg Tabs for Block Editor」是 2025-08-24 上架。
  • 目前有 100 個安裝啟用數。
  • 上一次更新是 2025-12-18，距離現在已有 70 天。
  • 外掛最低要求 WordPress 6.6 以上版本才可以安裝。
  • 外掛要求網站主機運作至少需要 PHP 版本 7.4 以上。
  • 尚未有人給過這款外掛評分。
  • 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。

外掛協作開發者

lubus | ajitbohra | punitv342 | thomasnavarro |

外掛標籤

tabs | tabs block | block-editor | responsive tabs |

內容簡介

**總結：**
Tabs Block 是專為 WordPress 區塊編輯器製作的外掛程式，讓您輕鬆地建立具有響應式功能的標籤。

**問題與答案：**
- **特色是什麼？**
- 可存取性高 - 符合 WCAG 標準，具有 ARIA 角色、鍵盤導覽和螢幕閱讀器支援。
- 零依賴 - 使用 WordPress 互動性 API。
- 響應式 - 自動調整標籤和佈局以適應任何螢幕大小。
- 橫向和垂直支援 - 輕鬆切換水平或垂直標籤佈局。
- 準備就緒的範本 - 內建多個預製佈局，可插入並進行自訂。
- 編輯器相容性 - 完全整合區塊編輯器的使用者介面和伺服器端渲染流程。

- **是開源且免費的嗎？**
- 是的，BlaBlaBlocks Tabs Block 是開源的。除了免費使用外，歡迎您共同協作和貢獻至其發展。

**相關連結：**
- [原始碼碼：](https://github.com/lubusIN/blablablocks-tabs-block)
- [回報問題：](https://github.com/lubusIN/blablablocks-tabs-block/issues)
- [文件：](https://github.com/lubusIN/blablablocks-tabs-block/wiki)

原文外掛簡介

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

各版本下載點

  • 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
  • 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Tabs Block – Responsive Gutenberg Tabs for Block Editor」來進行安裝。

（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。

1.0.0 | 1.1.0 | 1.1.1 | 1.1.2 | trunk |

延伸相關外掛（你可能也想知道）

文章
Filter
Apply Filters
Close
Mastodon