The structural blocks I use in WordPress to organize a page or post
All of the block collections ((default ones, JetPack, Advanced Gutenberg, Atomic Blocks, Kadence, Qodeblock, Stackable, and Ultimate Addons) come with multiple block options that let you better organize text on the page. There are lists, tables, columns, forms, tabs, accordions, and speciality tools. Let’s get started, as this is a big area.
Lists
For lists, the default block is called simply List. Not much you can do with it — it’s either bullets or numbers, and if it is numbers, all you can do is change the starting value. If it is bullets, you can’t even change the look or feel.
Advanced Gutenberg has its Advanced List. At first, I thought it was going to give me more control over numbered lists, but alas, no. It is about icons — 14 very basic ones, in fact. I can change the colour and sizes, but that’s about it. AG also has one called Advanced Icon, but all it does is let you put in a very large icon as a sort of clip art. The list of choices is huge, but it’s exact use eludes me unless you wrap it next to other text or image blocks. Pass.
Kadence also has an icon-based list, called Icon List. It is quite well done in my view. You can choose the number of items in the list, as per normal, but you can easily reorder them using arrows or delete individual entries afterwards too. More importantly, you can decide how many COLUMNS you want them in. That’s pretty sweet. Of course, you can also adjust the colours and sizing, padding and margins, but when it comes to the icon itself, you have about 1600 choices. That sounds really impressive, but most of them you would never have a use for, so the real value is if they have one that you DO want. If I wanted a computer one, there is none per se, but searching for monitor pulls up two (light outline, dark outline). There are also save icons, CD icons, tablets, and smartphones. You can likely find SOMETHING that will work. Checkmark pulls up about 10 different choices that are viable for me. Nothing exciting, but workable. And I really like the two columns. Kadence also has an option for a single big icon, but I honestly don’t know what the advantage of it would be over coloured clipart in your media library.
Ultimate Addons has a neat option in their Icon List block — you can insert an IMAGE as your icon. It makes it incredibly SMALL, sure, but you can do it. You can also turn list items into links. But their icons are rather rudimentary with about 1200, and things like computers or monitors turn up nothing…many of the icons seem to be company logos (like Amazon or Twitter). Pass.
That leaves me with Stackable as the last one (Icon List). Once again, starting a list in Stackable is like all the others combined. It starts with two columns as its default, a six-item list with nice checkmarks for each icon. In the design options, you quickly see the power of the block — you can have a title row, descriptions, and then the list in multiple columns. I paid for Stackable’s premium collection and there are some absolutely stunning layouts. I have no idea when I would ever want such a list, but it’s nice to know I have that power. But back to the basics.
You can have up to four columns of items, and turn on / off whether you want them evenly spaced or item-dependent for the size of the columns. The icons are it’s limitation — it only has five to choose from (checkmark, plus sign, greater than symbol angling right, an X, and a star. You can have three different flavours of each — by itself, inside a hollow circle, or inside a filled circle. All three are “nice”, but hardly the power of 1200 or 1600 icons, even if you wouldn’t use most of them. The colour is selectable of course, and size can go up to 50 px. You have Stackable’s standard power for its text and typography, spacing between items, background for the block, and all of the options for the advanced spacing / alignment / padding.
But overall? While it gives a lot of power, I’m disappointed there’s no option to add other icons nor is there a possibility of inserting an image as an icon. There are blocks that do that on a larger scale, sure, like the pricing box, but I was expecting more.
And what disappoints me most is that none of the blocks handle the simple option of ordered lists. Would it be so hard to give me one that does letters or numbers in stylized fonts? Or that adds Roman numerals?
For now, I have to keep three blocks — default to handle numbered lists; Kadence to give me 1600 icons; and Stackable for the great formatting options. Sigh.
Tables
I generally like tables because it makes things easier for layout of data and information. Unfortunately, it is not very mobile-friendly. For larger data sets, I have no choice, I use Table Press. It’s the only way to use the information easily. If only I had a really good table block that would make those overhead choices less required (but wouldn’t be searchable, I know). There are basically only two blocks available.
First and foremost is the default Table block, and it has the obvious starting point of asking how many columns and rows. But something weird happens when I click on a table, and I’m not sure where the conflict lies.
Let’s imagine I create a simple two by two table. If I click on cell one, column one, it goes wonky for the first row. It “appears” that there are three cells in the first row because it shifts my first cell into the second column, and the second into the third. Almost like it is giving me a “pop-out” cell to allow me to edit. Similarly, for column 2, when I click on the cell it shows me the second cell out in column 3. Maybe it is designed to do that, maybe it’s a conflict, doesn’t really matter, it’s just annoying. The choices for the table are pretty basic — I can have fixed width ones, add a header section or footer section, and change colours or add/delete rows and columns. Not that I need to be able to do much ELSE with a table, but it’s pretty basic. Oh, I forgot, I can add alternating strips and a caption too. It does NOT, however, seem to let me change the colour of an individual cell as I used to be able to do in Classic Editor.
Advanced Gutenberg is the only collection that includes a table alternative, and it too starts with asking me how many columns or rows. Again, I have choices of striped rows; fixed-width cells; footers; and headers. But I can also have collapsed borders, change the overall width of the table in px, change the colours for an individual cell (text and background), borders on every cell, width of the table, paddings, and margins.
Everything the default can do and way more. There’s really no reason to keep the default Table block if I have the Advanced Table block installed, right? Wrong. Because while I can find any example of a Table block if it is in normal blocks, if there are any still wrapped inside a Classic Paragraph block, those are more like “inline” tables, and my searching doesn’t pick all of them up! Dang it. Plus, just for fun? If WP encounters a block with a table, and I convert all of it to blocks, the default block is, well, the default Table block that it has to convert to. Which makes me realize the same for quotes. I disabled Quote and PullQuote but I can’t, I need those there for WP’s internal defaults to find. Double dang.
Columns
One of the things that Gutenberg allowed was an easy way to do columns on the fly, and without resorting to tables to do it. The default block has five main options:
- Two columns equal;
- Two columns with left as more of a sidebar;
- Two columns with right as a sidebar;
- Three equal columns; and,
- Three columns, centre is large and the left and right are like sidebars.
If you skip this step, the block defaults to two equal columns and you can modify the number of columns up to six equal ones. Some people do a series of columns to give an almost page-builder field…so three columns, one column, two columns can give you almost a star look to your layout.
But other than that, there isn’t a lot you can do to the columns themselves other than change percentages. However, you can put almost any other block INSIDE them. So, for example, if you had a block that didn’t come with sizing options, you can stick it inside a column, and BAM!, you can control the width. You can also control vertical alignment within a block or change the background of the whole block.
Kadence’s block is oddly called Row Layout, which I guess in many ways it is — a single row of a table with multiple columns. And the initial layout options make the default one look like a Word table compared to an Excel spreadsheet. Kadence has:
- Single column (why????)
- Two columns (equal or sidebars left and right)
- Three columns (equal, sidebars left and right, narrower sidebars left and right, really narrow sidebars left and right, two side bars left, and two sidebars right)
- Four columns (equal, 3 sidebars left or 3 right)
- Five equal columns
- Six equal columns
But if you click on the box, they even add another layout option to the settings on the right — rows stacked above each other! Plus they have a Prebuilt Library with some options like three columns, with staff info boxes in them, or three columns with images in each. Perfect “alignment” already done, and the ability to colour backgrounds, etc. You can play with alignments, colours, percentage widths by dragging boxes, adding background colours/video/sliders to the block, etc. It’s a pretty decent option.
Advanced Gutenberg calls their block Columns Manager, and they start with the same options as Kadence with some extra narrow sidebar options with only two blocks. You can add space between columns, or do some sort of column wrap if you go over a maximum height (appears to be like wrapping in columns in Word). I couldn’t get it to work. I also set a maximum “height” on the block, and while it “sort of” held to it, what that meant was it held the main block to that and let the next block come right up to that limit, but since my block went past that, it just overlapped the text. Umm…I guess that could be useful. Maybe? I dunno. It’s not really doing anything for me.
Atomic Blocks has a columns option called Advanced Columns. You know, the same as three other plugins, cuz that won’t be confusing. It starts off much simpler — you choose the number of columns you want, from 1 to 6. Then once you do that, you get to see the sub-options. Once created, you can adjust number of columns, switch layouts, size of gaps between columns, size of the overall three columns together (an internal width so they don’t have to go all the way from side margin to side margin), make them responsive, adjust margins, padding, colours and even stick a background image on the whole block. Like Kadence, highly functional.
As an aside, as this isn’t entirely the place to do it, AB also includes an option called Layouts. While it handles way more than columns, several of the layouts are with columns, nice backgrounds, pleasing palettes, etc. But when I see these, I feel like most of them are more about pseudo-theme building, and I already have a theme I like. Pass.
Moving on to QodeBlock, it’s the “Advanced Columns” block again. It has decent tools, similar to the rest, but here’s the thing…it handles the editing through stacked blocks. So you don’t “see” it vertically the way the other blocks do, it shows you them in the edit window one above the other. WTH? Pass. (Okay, I just realized they are likely doing that to show you what it will look like on mobile where it would likely stack. Hmm, I guess it’s okay, but I’m still passing.)
Ultimate uses the same naming convention, Advanced Columns, and it has some nice features. For example, it outlines the whole block and the columns in the edit window with dotted lines so you can SEE your boxes. (Are you listening, Qodeblock?) It even has options to reverse the columns on certain devices. You can also change the container (inner) width, colours, borders, shadows, dividers, etc. All decent, functional. And very little “wow” factor. Pass.
As you’ll have seen from previous posts, I’m kind of in love with Stackable. So for each category, I tend to save them to the last option hoping they will blow me away. Right from the start, they don’t disappoint. I am mostly testing the options with three columns, and theirs starts off looking pretty bland. Once you click into the block options, you can adjust from 1-6 blocks (standard), choose some layouts (standard), and then, adjust any column to any percent you want (NOT standard). Do you want a 20-70-10 split? Done. Do you want a 15-70-15 split? Done. Do you want a 40-40-20 split? Also done. Done, done and done. Sweet.
Then they go nuts on layout options. Honestly, I have never even thought of these options, at least not for a website! They have five options — plain (obvious), grid (three columns, two rows = up to six blocks), uneven 1 (the first column is full height, the rest are evenly stacked in columns two and three), uneven 2 (the first column is full height, and some of the rows span columns 2 and 3), and Tiled (the first column is full height and then the other two columns are mixed-width with some spanning two columns, one only one). The options depend on whether you choose one to six “columns” (or rather one to six sub-blocks). If you’ve ever made a photo book online where it asked you if you wanted layout options with 3 or 4 photos, and then showed you various layout options that would fit them all in, this is the look and feel they have for the Stackable block. Lightyears beyond the controls of the other options, which is likely why they called it “Advanced Columns AND GRID“. Once you click into the Style tab, things take the volume dial to 11 instantly. You get more ways to control the widths of the sub-blocks, adjust their heights, change spacings within and between, align them vertically and horizontally, change text colours, add a header/title and description, and of course, as with all Stackable blocks, add background options (image, video, colour, gradients, whatever you want). Holy snicker-doodles. Yeah, I can keep this one and dump the rest. By a country mile.
Before exiting this area, I’ll throw in another Stackable block called Number Box. It isn’t quite a normal box like some of the other testimonial ones, it almost acts like a column or table, so I’m including it here. It allows you to choose a series of side-by-side blocks, and it adds numbers to the top. Think of it like a numbered list but horizontal with a lot more styling. Nobody else has anything quite like it. You’re limited to just 1, 2, 3 and if you want, you can even turn the numbers off (I don’t know why you would use a number box and turn the numbers off, but whatever tickles your fancy. While it seems like a simple variation on the team boxes, and to some extent it is, the styling options that come with it raise it WAY above that simple config. One gives you three bright orange circles; another puts funky mosaic tile shapes around an image of phone; another swaps out numbers and puts in letters (although to be fair, it’s just manually edited). You can change the number text, and if you wanted to, stack them to give a series of steps. Which is why I’m going to keep it around. I have lots of places in my site where I need to show steps in a sequence. But wait, there’s more! You can add a title for the block AND a description too. A fully contained block that lets you create sweet 1-3 column layouts with everything already styled for you with awesome choices, or swap out the backgrounds and colours with your own choices (it has all the Stackable default options for styling and layout). It’s awesome.
Forms
It might seem a little odd to include this option in the list, but it is essentially a tool for defining rows and columns in a set grid to create content structure.
Kadence has its Form button, and it’s pretty basic. By default, it gives you an option for a contact form — name, email, and a message, with a submit button. Regardless of the defaults, it basically is a data capture tool with text fields, email, textareas, telephone and accept or select options. You can change defaults, alter widths, add help boxes, etc. There are settings for the name, email, messages, what happens after you press submit, technical email options, spam and Recaptcha options, field styles, button styles, label styles, and success messages. All pretty basic but decent tools. And most seem irrelevant if you have something like Contact Form 7 installed.
Advanced Gutenberg has one called Contact Form and it does the same thing. It has a few less styling options, but same basic functionality. They also include one for login / registration. Since I don’t allow registration, the purpose would be solely to add a bit more look and feel styling to my normal login screen. Useful for some, nothing to offer me.
Ultimate goes one step further…they offer a styler that works directly with Contact Form 7. This is a GREAT tool, and since I use Contact Form 7, no reason for me to keep the other ones. This lets me adjust my CF7 form for a number of look and feel / style options as well as adding things like radio buttons. If you do enough data fields, you could turn it into almost a survey tool. Nice. I’ll keep it.
Tabs
Under the Classic Editor, I only ever used tabs once on a report page where I had different sections and it seemed the best way to do it. Under the Block Editor, I recently used it for a page for my HR Guide, but just once. It isn’t a tool that I reach for regularly in my toolbox, but when I need it, I need a tool that will do it.
Kadence is the one I used for my HR guide, and the opening to the Tabs block is the reason why — you have different styles of tabs to choose from, one of which is vertical tabs going down the side (which is what I used for my HR Guide). They also come with responsive choices for tablet and phone so that the tabs switch to vertical on smaller devices and potentially even to stacked accordions if it is on a phone. However, unlike the Columns options that limited you to up to six, tabs are relatively unlimited. Equally, each tab can have a totally different content block…images, text, whatever you want. You could, in theory, create a photo gallery using tabs. You can even choose which tab “opens” first when you open the page. And since it is Kadence, they include 1600 icons as possible additions to your tabs and text, even after you style the tabs out the wazoo for colour and text and borders, oh my! There are another 5-8 options I’ll never use, but they’re there.
Advanced Gutenberg has its Advanced Tabs option, and I like the initial look. The tabs are crisp and bright. You can make them vertical or horizontal, adjust colours and text. But way fewer options than the
Accordions
The sister block to “tabs” is an accordion block. Rather than having you “page” between sub-tabs, accordions expand when you click on them. There is no default one, but just about everyone else does one:
- Kadence has an “accordion” block with some basic styling and layout options, and gives you a chance to add a title to the overall block, plus lots of basic options for reach “pane”…the only part that stood out as different from standard styling was the option to have panes only open one at a time i.e., if one opened, the others would close, rather than allowing them all open until manually closed;
- Advanced Gutenberg uses their normal nomenclature to have Advanced Accordion, with set icons to identify expansion, standard colours and text styling options, etc…nothing “advanced”, pass;
- Atomic Blocks calls its block simply “Accordion”, and it is indeed simple. A single block that expands and collapses, with almost no styling. Yawn;
- QodeBlocks does almost the same as AB, although it has nicer colours on the Title. Double yawn;
Which leaves me completely underwhelmed. Will Stackable wake me up? Not really. They too only go with a single one, although they have some options to do things based on what the adjacent one does (like close if the other opens). But overall, they’re pretty tame by Stackable standards. They have lots of basic stylings, but even the premium options are non-existent. I’ll keep it around for some features, but I’ll have to keep the Kadence one too.
More / read more / page break
The default “more” block allows you to basically separate an opening excerpt from the rest of the text, so if you are looking at the page on the main blog page for example, you’ll see up to the More take, and not past. Click it and it will expand the page. Except I don’t use custom excerpts and have no use for it.
Stackable has an option that is a lot like accordions. There is some short text, and when you click on the “show more”, it expands the text. Except it doesn’t “expand” so much as completely replace that first text with all new text. So if you had a short sentence, and click on it, you can replace the short version with the full explanation. Some people like to use it for short and long instructions — if you know how to do what it tells you, just go with the short; if you need detailed sub-instructions, click for the longer version of the instruction. Often the first sentence is repeated in the longer text so it LOOKS like an expansion, but it really is two totally different text fields. It’s useful, so I’ll keep it around.
Default also includes a “page break” block. If you think of it a different way, it is kind of like adding tabs to the bottom of a page. Wherever you put a page break block, the visible page will break there, and you will get a view of the subsequent pages to click on. There are some styling issues as to where that block appears (for example, on my default page here, it put them after a bunch of after-post stylings instead of before them. There are no styling options, and I can’t think of where I would use it except perhaps in some sort of long fiction post. Otherwise, I’m more likely to break it into multiple posts, use tabs, or even accordions. I’ll leave it running but I doubt I’ll use it.
And that’s a wrap on structural blocks for styling my pages and posts.
Update: To see my current collection of blocks, check out the blocks I use.