Ciprian Popescu

<p>Metro Tabs adds block-editor (Gutenberg) blocks for building tabbed content. You add a <strong>Metro Tabs: Tab Group</strong> block, then add one or more <strong>Metro Tabs: Tab Item</strong> 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.</p>
<h4>Features</h4>
<ul>
<li><strong>Tab Group block</strong> – Container for one set of tabs. You can use multiple Tab Group blocks on the same page for different tab sets.</li>
<li><strong>Tab Item block</strong> – A single tab: editable heading and a content area that supports any blocks (paragraphs, headings, images, etc.).</li>
<li><strong>No JavaScript libraries</strong> – Uses vanilla JavaScript only; no jQuery or jQuery UI.</li>
<li><strong>Block API version 3</strong> – Compatible with the current block editor (WordPress 6.3+ iframe editor).</li>
<li><strong>Lightweight styling</strong> – 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 <strong>Metro Tabs: Tab Group</strong> 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 <strong>Metro Tabs: Tab Item</strong> block and:
<ul>
<li>Edit the <strong>tab heading</strong> (the text shown on the tab).</li>
<li>Add any blocks in the <strong>tab content</strong> 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>
<p>No settings or configuration are required. The plugin enqueues its script and styles on the front end when the page contains tab blocks.</p>
<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.

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  …

Metro Tabs – Responsive Tabs Block vs Advanced Tabs Gutenberg Block