Ciprian Popescu

Metro Tabs adds block-editor (Gutenberg) blocks for building tabbed content. You add a Metro Tabs: Tab Group block, then add one or more Metro Tabs: Tab Item blocks inside it. Each tab has a heading (the label visitors click) and a content area where you can add any blocks—paragraphs, images, lists, etc. On the front end, visitors see a simple tab bar and panes; clicking a tab switches the visible content without reloading the page.
<h4>Features</h4>
<ul>
<li>Tab Group block – Container for one set of tabs. You can use multiple Tab Group blocks on the same page for different tab sets.</li>
<li>Tab Item block – A single tab: editable heading and a content area that supports any blocks (paragraphs, headings, images, etc.).</li>
<li>No JavaScript libraries – Uses vanilla JavaScript only; no jQuery or jQuery UI.</li>
<li>Block API version 3 – Compatible with the current block editor (WordPress 6.3+ iframe editor).</li>
<li>Lightweight styling – Discrete front-end styles (underline-style active tab); you can override with your theme or custom CSS.</li>
</ul>
<h4>How to use</h4>
<ol>
<li>In the block editor, add a Metro Tabs: Tab Group block (search for “Metro Tabs” or “Tab Group”).</li>
<li>Inside the group, you’ll see placeholder Tab Items (e.g. “Tab 1”, “Tab 2”). Click each Metro Tabs: Tab Item block and:
<ul>
<li>Edit the tab heading (the text shown on the tab).</li>
<li>Add any blocks in the tab content area (paragraphs, images, etc.).</li>
</ul>
</li>
<li>Add or remove Tab Item blocks as needed. You can add more Tab Groups elsewhere on the page for separate tab sets.</li>
<li>Publish or update. On the front end, the tab bar and panes are built automatically; clicking a tab switches the visible pane.</li>
</ol>
No settings or configuration are required. The plugin enqueues its script and styles on the front end when the page contains tab blocks.
<h4>Compatibility</h4>
<ul>
<li>Requires WordPress 6.0 or higher (block editor).</li>
<li>Requires PHP 8.0 or higher.</li>
</ul>

Metro Tabs – Responsive Tabs Block

Tab blocks: multiple groups per page, any blocks in each tab. No jQuery, no dependencies.

Freemius

Abu Hayat

bPlugins

btechnologies

Md Noornabi Islam

NF Tushar

The #1 No-Code Tabbed Contents Block Plugin – Trusted by 900+ Websites Worldwide
<a href="https://bplugins.com/products/tabbed-contents-block" rel="nofollow ugc">Tabbed Contents Block</a> | <a href="https://bplugins.com/docs/tabbed-contents-block/" rel="nofollow ugc">Documentation</a> | <a href="https://bplugins.com/products/tabbed-contents-block/#pricing" rel="nofollow ugc">Pricing</a> | <a href="https://bplugins.com/support/" rel="nofollow ugc">Support</a> | <a href="https://bplugins.com/products/tabbed-contents-block/#demos" rel="nofollow ugc">Demo</a>
<a href="https://bplugins.com/docs/tabbed-contents-block/" rel="nofollow ugc">Tabbed Contents Block</a> lets you organize your WordPress content into clean, responsive tab sections. Now comes with both Basic Tabs and Advanced Tabs layouts — choose your preferred style instantly from the block or shortcode generator.
<h3>Tabbed Contents Block Features</h3>
<ul>
<li>Tabbed Content Layout: Easily organize and display content in a structured, tabbed interface.</li>
<li>Multiple Tab Designs: Choose from various tab styles and layouts to match your website’s design.</li>
<li>Fully Customizable Tabs: Personalize tab colors, fonts, sizes, and borders to align with your branding.</li>
<li>Dynamic Tab Icon: Add icon to individual tabs for enhanced visual appeal and user clarity.</li>
<li>Dynamic Content Loading: Load content dynamically via shortcodes or custom blocks.</li>
<li>Active Tab Highlighting: Automatically highlight the active tab for better user navigation.</li>
<li>Responsive Design: Tabs adapt seamlessly to different screen sizes and devices for a flawless experience.</li>
<li>Predefined Themes: Choose from a variety of professionally designed themes to style your tabs instantly.</li>
<li>Responsive Themes: All themes are fully responsive and adapt perfectly to any screen size.</li>
<li>Quick Themes Options: Instantly switch between predefined themes to update the tabbed contents block appearance.</li>
<li>Shortcode Support: Use shortcodes to add custom content to your tabs.</li>
<li>Layout Switcher: Choose between basic and advanced tab layouts easily.</li>
<li>Advanced Tabs Support: Create more dynamic and flexible tab sections with enhanced controls.</li>
<li>Shortcode Layout Selection: Select your tab layout directly while generating shortcodes.</li>
</ul>
<h3>🚀 Upgrade to Tabbed Contents Pro:</h3>
<ul>
<li>Choose Your Preferred Theme: Select the theme of your choice to personalize your experience and give your website the look and feel that suits your style.</li>
<li>Hide/Show Tabbed Background: Easily toggle background visibility for tabbed sections with the Hide/Show Tabbed Background feature.</li>
<li>Background On tabbed: Manage tab-specific backgrounds effortlessly with Background on Tabbed. Customize each tab for a dynamic user experience!</li>
<li>Padding On tabbed: Easily adjust padding for each tab with Padding on Tabbed. Customize spacing for a seamless and polished layout!</li>
<li>Hide/Show Tabbed Icon: Toggle icons for each tab effortlessly with Hide/Show Tabbed Icon. Customize visibility for a clean and dynamic design!</li>
<li>Hide/Show Tabbed Title: Easily toggle the visibility of tab titles with Hide/Show Tabbed Title for a cleaner, customized design!</li>
<li>Active Tab Customize The Variant Styles: Highlight your active tab with a customizable border using Active Tab Border. Enhance navigation and user focus effortlessly!</li>
<li>Tabbed Menu Styles: Users can easily variant apply to styles for customization.</li>
<li>Responsive Settings: Optimize font size, alignment, and appearance for mobile, tablet, and desktop.</li>
<li>Premium Animations: Exclusive smooth effects available only in Pro.</li>
<li>Sortable Items: Drag individual items to quickly adjust their position and customize the order as you like.</li>
<li>Start building beautiful tabbed layouts in seconds — no coding required!</li>
</ul>
<h3>✨ New: Multiple Tab Layouts</h3>
Now you can choose between: 
– Tabbed Contents (Simple & Clean) 
– Advanced Tabs (More Powerful & Customizable)
Select your preferred layout directly from the block or shortcode generator.
<h4>How to use Tabbed Contents Block</h4>
<ul>
<li>First, install the Tabbed Content Block plugin from the WordPress dashboard.</li>
<li>Add the Tabbed Content from the block category called “widgets” in the Gutenberg editor.</li>
<li>You can change block settings from the right-side settings sidebar.</li>
<li>
Enjoy!
</li>
<li>
For installation help click on Installation Tab
</li>
</ul>
<h3>User Feedback</h3>
<h4>⭐⭐⭐⭐⭐ <a href="https://wordpress.org/support/topic/it-fully-met-my-expectations/" rel="ugc">It fully met my expectations</a></h4>
❛❛This plugin is excellent for displaying tabbed content. The visual editing screen in the Gutenberg editor was easy to edit content effectively.❜❜
–<a href="https://wordpress.org/support/users/ksthannan/" rel="ugc">Abdul Hannan</a>
<h4>– Did you like this plugin? Dislike it? Have a feature request? <a href="mailto:support@bplugins.com" title="Send feedback" rel="nofollow ugc">Please share your feedback with us</a></h4>
<h3>⭐ Check out the Parent Plugin of this plugin-</h3>
🔥 <a href="https://bblockswp.com" rel="nofollow ugc">B Blocks</a> – Best gutenberg blocks collections for WordPress.
<h3>⭐ Check out our other WordPress Plugins-</h3>
🔥 <a href="https://bplugins.com/products/html5-audio-player" rel="nofollow ugc">Html5 Audio Player</a> – Best audio player plugin for WordPress.
🔥 <a href="https://bplugins.com/products/html5-video-player" rel="nofollow ugc">Html5 Video Player</a> – Best video player plugin for WordPress.
🔥 <a href="https://bplugins.com/products/pdf-poster" rel="nofollow ugc">PDF Poster</a> – A fully-featured PDF Viewer Plugin for WordPress.
🔥 <a href="https://bplugins.com/products/document-embedder" rel="nofollow ugc">Document Embedder</a> – Best WordPress Document Embedder Plugin.
🔥 <a href="https://bplugins.com/products/3d-viewer" rel="nofollow ugc">3D Viewer</a> – Display interactive 3D models on the webs.
🔥 <a href="https://bplugins.com/products/advanced-post-block" rel="nofollow ugc">Advanced Post Block</a> – Best Post Display Plugin for WordPress.

Tabbed Contents Block – Display Content in Tabbed Layout


This plugin is excellent for displaying tabbed content. The visual editing screen in the Gutenberg editor was easy to edit content effectively.


It fully met my expectations

Display responsive, accessible tabs featuring dynamic content.

Metro Tabs – Responsive Tabs Block vs Tabbed Contents Block – Display Content in Tabbed Layout