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.

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.

Everything Tab vs Metro Tabs – Responsive Tabs Block