Tab Blocks: a comparison

Last Updated on

Historically tab blocks have been something relatively tricky to do, requiring fiddling around with shortcodes or, worse even, inserting them into theme templates (I have a dark past, I will admit that).

Fortunately there are many block collections which come with built in tab blocks and that will make it a lot simpler to manage your tabs.

Here are a few ordered from the most basic ones to those with more options/settings. I plan to add more blocks in the future as I review more block collections:

Tabs Block by Ghost Kit

The tabs block included in the Ghost Kit collection could not be simpler: It only offers tab alignment in its settings:

And this is what the block looks in action:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

SECOND: Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

THIRD: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tabs Block by Ultimate Blocks

The “tabbed content” block by Ultimate Blocks is very basic, only offering the option to customize color for the active tab:

Here’s the block in action:

First Tab
Second Tab
Third Tab

FIRST: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

FIRST: Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

THIRD: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tabs Block by Advanced Gutenberg

This block is still pretty simple but it offers basic styling, colors and borders options.

Filler text (also placeholder text or dummy text) is text that shares some characteristics of a real written text, but is random or otherwise generated.

Filler text (also placeholder text or dummy text) is text that shares some characteristics of a real written text, but is random or otherwise generated.

Filler text (also placeholder text or dummy text) is text that shares some characteristics of a real written text, but is random or otherwise generated.

Getwid – Gutenberg Blocks

This block does not offer any styling (which is trivial if you know a little CSS) but it does offer a couple of interesting options, such as placing the tabs on the side (both to the left and to the right) and selecting the markup for the text in the tabs:

Here is the block in action:

FIRST: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
SECOND: Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
THIRD: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tabs Block by Kioken Blocks

This block offers a lot more options to style your tabs. Changing the number of tabs using a slider feels a bit odd at first, but I guess it is consistent with the way columns work

I particularly like the way it nests options for the title and the content separately:

Here is the block in action:

FIRST: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

SECOND: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

THRID: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tabs Block by Kadence Blocks

Kadence’s block is by far the one with the most options when it comes to customizing both the style and the layout of this type of block. Including sidetabs, which no other block offers, except Getwid.

When adding this block you will first get a splash with 4 layout options, making it easier for the user to choose the style they like best:

Once selected you can edit the tabs and their content very easily from the block itself. I would say this is 100% intuitive. You can insert any type of block inside each tab, as you would expect.

FIRST: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

SECOND: Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

THIRD: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

The amount of option this block provides is staggering:

Published by Alvaro Gómez Velasco

Alvaro is widely known for his skills at copy-pasting code, activity at which he has excelled since 1997. After ten years freelancing as a WordPress consultant and teacher Alvaro currently works as a Happiness Engineer at Automattic. It is said that in another life he was a professional photographer. Bilbaíno and father of Julia & Clara.

Leave a comment

Leave a Reply

%d bloggers like this: