David Jensen

CloudCatch

<p>Simple to use block to create tabs within the block editor. Each tab supports the capability to use any type of block within the content to create robust layouts.</p>
<p>This plugin introduces minimal styling and therefore likely will require custom styling in order to achieve the desired look and feel for your tabs.</p>
<p>Supports horizontal and vertical tabs.</p>
<h3>Features</h3>
<ul>
<li>Tabs customizable using the native block editor style controls</li>
<li>Fully accessible including keyboard controls</li>
<li>Supports horizontal and vertical tabs</li>
<li>Set default open tab</li>
</ul>


Simple Tabs Block

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.

Simple Tabs Block vs Tabs Block Lite