Justin Tadlock
Freelance WordPress developer Aurooba Ahmed released the Super List Block plugin earlier today. Essentially, it is like the core WordPress List block — just supercharged. It is her first publicly-released extension on WordPress.org.
The primary use case for the plugin is adding other blocks within the list items. However, its options allow users to take it further by supporting grid-based layouts.
WordPress does not currently allow end-users to nest other blocks into list items via the editor. It is rich text or nothing, and it can be an irritating part of the editing experience when you need this seemingly run-of-the-mill feature. It is an issue that makes you wonder why we moved on to FSE before smoothing out the content experience. HTML list item elements are, after all, containers for other content.
For me, at least, it is not something I often need. When I do, I code it via the Custom HTML block. That works if the list’s content is simple but not when you want to nest more complex elements like other blocks.
The Super List block turns its nested Super List Item blocks into containers for pretty much anything. One typical use case would be to add multiple paragraphs or other text-based blocks like headings as single list items.
However, the plugin does not limit users to text. They can stick whatever they want in, even nesting a Super List within a Super List Item block. Unfortunately, its indentation is zeroed out in that scenario, so its items do not appear nested.
The plugin’s claim to fame may be its grid feature. The closest things in WordPress are the Columns and Gallery blocks. However, Columns are limited to a single row, and Gallery only allows images.
This is also where the Super List block needs a little refinement. When selecting the horizontal (“grid”) orientation, a new box appears to allow users to set the maximum width of all sub-list items.
Wanting to create a four-by-four grid (two rows of two columns), I immediately selected 50%. It made the most sense. However, I did not get any columns. The value was too large and did not account for the gutter space between the items. I then lowered it until I hit a number that worked: 47%. I could have looked at the page’s source code and simply did the math, but it 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 setting. Technically, this would limit the flexibility of the block in a few scenarios. However, it would cover the vast majority of cases where users just want a grid of equal-width columns that span the width of their container.
This assumes that the plugin does not eventually allow users to micro-manage each list item in grid mode. There is an open ticket in the plugin’s repository to add the option to individual Super List Item blocks.
Whatever future direction the plugin goes, an easy-to-use block for quickly setting up a grid of items will likely land in many developer and site-owner toolboxes.
Three features make this plugin simpler to use than many core WordPress or third-party blocks. The first is when the user has the Super List selected in the editor. Instead of only the “+” icon to nest another block, it appends the text label “Add Super List Item.”
It is easy to get confused about where new blocks will be inserted after clicking the “+” editor icon. Super List Block’s text label makes it dead simple to understand. I would love to see WordPress and other third-party plugins take the same or a similar approach.
The other two nice-to-have features appear in the toolbar for the Super List Item block. The first is a “Settings” button for jumping back to the parent block. The second is a circular “+” icon for appending another item to the list.
Both options seemed to reduce misclicks when selecting blocks or buttons in the editor. However, I prefer WordPress’s approach to making some parent block settings available in the child block’s toolbar. Social Links is a prime example of this, allowing users to change justification and alignment without jumping back and forth.
Overall, I am impressed with Super List Block as a first release. I will be keeping my eye on it to see how it matures. It is well worth deploying on any site that requires its features now.
I’m not sure that the “vast majority” would be equally-spaced columns across a page, though there will surely be many of those; I could imagine small images on the left, longer text descriptions on the right—even alternating the small image from left to right, which is probably impossible as a single entity.
I’m not saying the majority of grid usage is for equal-width columns across their container. I’m saying that a column setting would cover the majority of those specific types of use cases, which is all that the plugin allows.
Since equal-width grid columns is all that the plugin allows, it doesn’t make sense as a width setting.
Thanks for the feedback, Justin!
You’re absolutely right, the current custom selector for the list-item width is not very intuitive for regular users, and I’m thinking through an improvement to the feature. Perhaps utilizing the new pattern in 5.9: where you have some options to select from but you can still toggle a custom option to set your own specific size.
I definitely want to make more adjustments available within the list-item settings instead of simply providing a jump to the parent block. That was really just a quick solution.
Looking forward to developing the block more! I have a lot of ideas. 🙂
Thanks for stopping by, Aurooba. I like that idea of toggling between some defaults and setting a custom size. It kind of gives you the best of both worlds.
Looking forward to seeing what else you do with it in the future.
Agreed, that was my thought when I read Aurooba’s reply. Easy for routine things, and customizable when needed for those who want to do more.
Props to Aurooba! Now if someone could manage to come up with a better table block…
Your email address will not be published.
document.getElementById( “ak_js_1” ).setAttribute( “value”, ( new Date() ).getTime() );
This site uses Akismet to reduce spam. Learn how your comment data is processed.
Enter your email address to subscribe to this blog and receive notifications of new posts by email.
WordPress Tavern is a website about all things WordPress. We cover news and events, write plugin and theme reviews, and talk about key issues within the WordPress ecosystem…
© All Rights Reserved. Powered by WordPress, hosted by Pressable
