When I read WP Tavern’s review of the new Super List Block plugin from Aurooba Ahmed, I was excited.
From the review and plugin description, it sounded like the plugin would provide exactly what I’ve been needing for my blog posts: the ability to nest blocks within an ordered or unordered list item.
Which is the use case for my weekly roundup posts of web design and development news.
Before the block editor was released, I could easily nest paragraphs, images, videos, and other content within list items.
Because I used code view, I would write HTML.
With the release of the block editor, it wasn’t as easy for me to do.
I found writing in the Custom HTML block clumsy and a frustrating experience.
Frankly, it surprised me. Why couldn’t you nesting blocks within list items within WordPress core?
I don’t think I’m the only WordPress user asking that question.
Enter the Super List Block plugin with the features I need to easily compose my weekly roundup posts. I had to explore it!
Super List Block
The first publicly-released plugin by Aurooba Ahmed, the free Super List Block plugin provides the ability to nest other blocks within list items.
In addition, the plugin allows you to create simple grid layouts.
From the plugin description, key features include:
- Nest blocks within ordered and unordered lists
- Nest blocks within lists without any markers
- Create single column content or grid like content with the horizontal orientation setting
- Supports native color, padding, and margin settings
- The
addbutton in the toolbar of list items to easily add more items while you’re in the flow
How it Works
You’ll need to have WordPress 5.9 installed to use Super List Block.
Once you’re installed and activated it, you’ll find a new block available on your site.
To add it, choose Super List Block from whatever method you use to add blocks.
By default, Super List Block will add an unordered list with two paragraph list items.
The toolbar allows you to change the list:
- Alignment
- Style (ordered, unordered, no marker)
- Orientation (vertical or horizontal)
From the block side panel, you can customize text color and background color.
One you add a list item to your list, you can append additional content to that list item. Or choose to add a new list item.
If you’re looking for help, check out Ahmed’s ten-minute YouTube tutorial video where she walks you through adding a Super List Block.
Shoutout to Ahmed for her captioned video: excellent caption timing and well-paced.
Testing Super List Block
I tested Super List Block by recreating a list from content of one of my web design and development roundup posts.
I copied content from part of the user experience section of last week’s roundup post.
Here’s the result.
-
This week, I gave a UX win to State Senator Dayna Polehanki for her email newsletter. I wish more email newsletter producers would follow her lead.
-
Considering a transition from your current role to service design? Amina Omar talks about her journey from technology policy advisor to service designer at Government Digital Services.
My mentor helped me understand what a service designer does day-to-day and what skills I needed to develop further.
Success!
I was able to nest the image within the list item. And nest the quote within the next list item.
But I have to admit, I did get a bit confused with the “+” editor icons used throughout the interface.
I had to think twice about which “+” icon to choose.
To clarify, there’s a
- Circular “+” black icon on a transparent background in the Super List Block Item toolbar
- White “+” icon on a black square background in the bottom right corner of the Super List Block Item
- The “regular” red + icon for adding a new block after the Super List Block
I think my confusion will disappear once I work with Super Block List more often.
Summary
For WordPress users like me looking to nest blocks within lists, Super Block List fits your needs.
You can add multiple blocks to a single list item and customize the output with the various options in the block.
I’m glad Ahmed recognized the need for this feature, appreciate her work on the block!
I didn’t explore the grid mode options in the block, that’s something for a future post.
Have you tried Super Block List yet? If yes, share your thoughts in the comments.
