Mostafa Shahiri

The Everything Tab is a simple widget that shows wordpress widgets, posts and pages in an pretty tabs. It enables you to control:
<ol>
<li>displaying the widgets</li>
<li>displaying the separated posts</li>
<li>displaying the pages</li>
<li>displaying posts of some specific categories</li>
<li>different filters for posts and pages</li>
<li>Ordering posts and pages based on created date, modified date, views, comments count and random.</li>
<li>Showing pages and posts in two different modes: 1)Introtext includes featured image+inro content+readmore link. 2)Fulltext mode</li>
<li>Custom text for readmore links.</li>
<li>Some other filters for showing the categories, author, published date, modified date and comments count of the pages or posts.</li>
</ol>
If you like to apply your style to this widget, you can edit everythingtab.css file. The ID of this widget is everything_tab.
Now we explain about CSS classes are used in Everything Tab :
.tabhead: CSS class for styling tabs headers 
.tab_widget: CSS class for styling widgets 
.tab_content: CSS class for styling tab panel 
.tabinfo: CSS class for styling info small tags 
.tabinfoblock: All small tags have been placed in a div with this CSS class. (Parent div class for small tags) 
.tab_img: CSS class for featured images divs 
.tab_post: CSS class for styling posts or pages content divs 
.tab_readmore: CSS class for parent divs of readmore links.

Everything Tab

The Everything Tab is a simple widget that shows wordpress widgets, posts and pages in pretty tabs.

Binsaifullah

Advnaced Tabs Block is a custom Gutenberg Block developed with Gutenberg Native Components. You can easily showcase your contents in Tabs Style using this block. It has come with a lot of customization and styling options.
<h3>Overview</h3>
<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>
<h3>Key Features</h3>
<ul>
<li>Simple, light-weight, and super-fast</li>
<li>Built with only Gutenberg Native Components</li>
<li>Load scripts only the page where the block is used</li>
<li>No Block Builder at all</li>
<li>100% Responsive</li>
<li>Advanced Customization options</li>
<li>Easy to Use in Gutenberg Editor</li>
<li>Drag & Drop Use</li>
<li>All types of contents are allowed as Tabs Content</li>
</ul>
<h4>Update Notice</h4>
<blockquote>
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.
</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  …

Everything Tab vs Advanced Tabs Gutenberg Block