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.

Troy Templeman

<p>Tabs Block Lite adds an accessible and responsive Tabs block to the block editor inserter that can be added to display horizontal list items that can be selected to show their associated sections of content.</p>
<p>Ideal for condensing longform or complex content. Also useful for reducing page scrolling.</p>
<p>Upgrade to Pro at <a href="https://troytempleman.com/wordpress/blocks/tabs-block/" rel="nofollow ugc">https://troytempleman.com/wordpress/blocks/tabs-block/</a>.</p>
<h4>Features</h4>
<ul>
<li>Accessible</li>
<li>Responsive</li>
<li>Inserter button for adding tabs</li>
<li>Settings
<ul>
<li>Block alignment</li>
<li>Text alignment</li>
<li>Item justification</li>
</ul>
</li>
<li>Styles
<ul>
<li>Color
<ul>
<li>Text</li>
<li>Background</li>
<li>Link</li>
<li>Button text <strong>[Pro]</strong> </li>
<li>Button text hover <strong>[Pro]</strong> </li>
<li>Button text active <strong>[Pro]</strong> </li>
<li>Button background <strong>[Pro]</strong> </li>
<li>Button background hover <strong>[Pro]</strong> </li>
<li>Header background active <strong>[Pro]</strong> </li>
<li>Panel text <strong>[Pro]</strong> </li>
<li>Panel background <strong>[Pro]</strong> </li>
</ul>
</li>
<li>Typography
<ul>
<li>Font family</li>
<li>Font size</li>
<li>Appearance</li>
<li>Line height</li>
<li>Letter spacing</li>
<li>Text decoration</li>
<li>Letter case</li>
</ul>
</li>
<li>Dimensions
<ul>
<li>Padding</li>
<li>Margin</li>
<li>Header padding <strong>[Pro]</strong> </li>
<li>Header margin <strong>[Pro]</strong> </li>
<li>Button padding <strong>[Pro]</strong> </li>
<li>Button margin <strong>[Pro]</strong> </li>
<li>Panel padding <strong>[Pro]</strong> </li>
<li>Panel margin <strong>[Pro]</strong> </li>
</ul>
</li>
<li>Border <strong>[Pro]</strong>
<ul>
<li>Button border <strong>[Pro]</strong> </li>
<li>Button border hover <strong>[Pro]</strong> </li>
<li>Button border active <strong>[Pro]</strong> </li>
<li>Button border radius <strong>[Pro]</strong> </li>
<li>Panel border <strong>[Pro]</strong> </li>
<li>Panel border radius <strong>[Pro]</strong> </li>
</ul>
</li>
</ul>
</li>
<li>Variations <strong>[Pro]</strong>
<ul>
<li>Folder <strong>[Pro]</strong> </li>
<li>Pills <strong>[Pro]</strong> </li>
<li>Underline <strong>[Pro]</strong> </li>
</ul>
</li>
</ul>
<h4>Demo</h4>
<p><a href="https://troytempleman.com/wordpress/blocks/tabs-block/" rel="nofollow ugc">https://troytempleman.com/wordpress/blocks/tabs-block/</a></p>
<h4>HTML</h4>
<p>Tabs Block Lite will output a Tabs block with the following HTML structure:</p>
<pre><code><div class="wp-block-tt-tabs wp-block-tt-tabs-1 wp-block-tt-tabs-folder">
    <ul class="wp-block-tt-tabs-header" role="tablist">
        <li class="wp-block-tt-tab-header" role="presentation">
            <button class="wp-block-tt-tab-header-button" id="wp-block-tt-tab-header-button-df856e31-e01a-46c3-bca3-be8041d3c416" aria-controls="wp-block-tt-tab-panel-df856e31-e01a-46c3-bca3-be8041d3c416" type="button" role="tab" aria-selected="true">
                <span class="wp-block-tt-tab-header-button-text">Tab</span>
            </button>
        </li>
    </ul>
    <div class="wp-block-tt-tab-panel wp-block-tt-tab-panel-1” id="wp-block-tt-tab-panel-df856e31-e01a-46c3-bca3-be8041d3c416" role="tabpanel" tabindex="0" aria-labelledby="wp-block-tt-tab-header-button-df856e31-e01a-46c3-bca3-be8041d3c416">
        <p>Panel</p>
    </div>
</div>
</code></pre>
<h3>Support</h3>
<p>If you need help with Tabs Block Lite, please submit a ticket on the <a href="https://wordpress.org/support/plugin/tabs-block-lite" rel="ugc">Support</a> forum.</p>
<h3>Donate</h3>
<p>If you like Tabs Block Lite and would like to support it’s future development, how about <a href="https://www.buymeacoffee.com/troytempleman" rel="nofollow ugc">buying me a coffee</a>?</p>
<h3>Contribute</h3>
<p>If you would like to contribute to the development of Tabs Block Lite, the repository is located on <a href="https://github.com/troytempleman/tabs-block-lite" rel="nofollow ugc">GitHub</a>.</p>
<h3>License</h3>
<p>Tabs Block Lite is released under the <a href="https://www.gnu.org/licenses/gpl-2.0.html" rel="nofollow ugc">GNU General Public License, version 2 (GPLv2)</a>.</p>
<h3>Requirements</h3>
<ul>
<li>WordPress 6.0 or greater</li>
<li>PHP version 7.4 or greater</li>
<li>MySQL version 5.7 or greater or MariaDB version 10.3 or greater.</li>
</ul>
<h3>Credits</h3>
<ul>
<li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/tabs/" rel="nofollow ugc">W3C Tabs Pattern</a></li>
<li><a href="https://css-tricks.com/tabs-its-complicated/" rel="nofollow ugc">Tabs: It’s Complicated™</a></li>
<li><a href="https://inclusive-components.design/tabbed-interfaces/" rel="nofollow ugc">Tabbed Interfaces</a></li>
<li><a href="https://blog.logrocket.com/build-accessible-user-interface-tabs-javascript/" rel="nofollow ugc">Building accessible user interface tabs in JavaScript</a></li>
<li><a href="https://medium.com/@naumanahmed19/wordpress-gutenberg-tabs-block-aee06970b128" rel="nofollow ugc">WordPress Gutenberg Tabs</a></li>
<li><a href="https://www.amberalter.com/2021/11/20/building-a-gutenberg-block-for-tabbed-content/" rel="nofollow ugc">Building a Gutenberg Block for Tabbed Content</a></li>
</ul>


Tabs Block Lite

A block that displays horizontal list items that can be selected to show their associated sections of content.

Metro Tabs – Responsive Tabs Block vs Tabs Block Lite