Super List Block Supercharges Lists in WordPress – WP Tavern

Freelance WordPress developer Aurooba Ahmed posted the Super List Block Plugin earlier today. Essentially, it’s like the main WordPress listing block – just supercharged. This is its first publicly released plugin on WordPress.org.

The main use case of the plugin is to add other blocks in list items. However, its options allow users to go further by supporting grid-based layouts.

WordPress does not currently allow end users to nest other blocks within list items through the editor. It’s rich text or nothing, and it can be an irritating part of the editing experience when you need this seemingly mundane feature. It’s an issue that makes you wonder why we switched to FSE before smoothing out the content experience. HTML list item items are, after all, containers for other content.

For me, at least, it’s not something I often need. When I do, I code it through the custom HTML block. This works if the content of the list is simple but not when you want to nest more complex items like other blocks.

The Super List block turns its nested Super List item blocks into containers for just about anything. A typical use case would be to add multiple paragraphs or other text blocks such as headings as single list items.

Headings and multiple paragraphs under single list items.

However, the plugin does not limit users to text. They can paste whatever they want, even nest a super list inside a super list item block. Unfortunately, its indentation is set to zero in this scenario, so its elements do not appear nested.

The fame of the plugin may be its grid functionality. The elements closest to WordPress are the Columns and Gallery blocks. However, the columns are limited to a single row and the gallery only allows images.

This is also where the Super List block needs a bit of refinement. When selecting horizontal (“grid”) orientation, a new box appears to allow users to set the maximum width of all sublist items.

A four by four grid of squares in the WordPress editor.  The first and last squares have a demo image.  The second and third squares have demo quote text.
Four by four grid of quotes and images.

Wanting to create a four by four grid (two rows of two columns), I immediately selected 50%. It was the most logical. However, I did not receive any columns. The value was too high and did not take into account the gutter space between elements. I then lowered it until I hit a number that worked: 47%. I could have looked at the source code of the page and simply did the mathbut that would be a guessing game for the average end user.

A more intuitive interface would be to switch the max-width option to a column number parameter. Technically, this would limit the flexibility of the block in a few scenarios. However, this would cover the vast majority of cases where users simply want a grid of equal-width columns that span the width of their container.

This assumes that the plugin may not allow users to micro-manage each list item in grid mode. There is an open ticket in the plugin repository for add option to individual super list item blocks.

Whatever the future direction of the plugin, an easy-to-use block for quickly setting up an element grid will likely land in many developer and site owner toolkits.

Three features make this plugin easier to use than many WordPress or third-party core blocks. The first is when the user has selected the Super List in the editor. Instead of the “+” icon to nest another block, it adds the “Add Super List Item” text label.

An unordered list in the WordPress editor.  At the bottom right it has a button that reads, "+ Add super list item."
Add new super list item button.

It’s easy to not know where the new blocks will be inserted after clicking the “+” editor icon. Super List Block’s text label makes it very simple to understand. I would like to see WordPress and other third-party plugins take the same or a similar approach.

The other two cool features appear in the toolbar of the Super List Item block. The first is a “Settings” button to return to the parent block. The second is a circular “+” icon to add another item to the list.

Unordered list in WordPress editor with one of the items highlighted.  On the toolbar there is a link to the parent list settings and a button to add another item to the list.
Parameters and add buttons in the toolbar.

Both options seemed to reduce click errors when selecting blocks or buttons in the editor. However, I prefer WordPress’ approach to making certain parent block settings available in the child block’s toolbar. Social Links is a great example, allowing users to change justification and alignment without jumping back and forth.

Overall, I’m impressed with Super List Block as a first release. I’ll keep an eye on it to see how it matures. It is worth deploying to any site that requires its functionality now.

Esther L. Gunn