Super List Block Supercharges Lists in WordPress – WP Tavern


Freelance WordPress developer Aurooba Ahmed launched the Super List Block plugin earlier at present. Basically, it’s just like the core WordPress Listing block — simply supercharged. It’s her first publicly-released extension on WordPress.org.

The first use case for the plugin is including different blocks inside the checklist gadgets. Nevertheless, its choices enable customers to take it additional by supporting grid-based layouts.

WordPress doesn’t at present enable end-users to nest different blocks into checklist gadgets by way of the editor. It’s wealthy textual content or nothing, and it may be an irritating a part of the modifying expertise once you want this seemingly run-of-the-mill function. It is a matter that makes you marvel why we moved on to FSE earlier than smoothing out the content material expertise. HTML checklist merchandise components are, in any case, containers for different content material.

For me, not less than, it’s not one thing I usually want. Once I do, I code it by way of the Customized HTML block. That works if the checklist’s content material is easy however not once you wish to nest extra advanced components like different blocks.

The Tremendous Listing block turns its nested Tremendous Listing Merchandise blocks into containers for just about something. One typical use case can be so as to add a number of paragraphs or different text-based blocks like headings as single checklist gadgets.

Ordered list in the WordPress editor with three items.  Each has a heading and faux demo content in paragraphs.
Headings and a number of paragraphs beneath single checklist gadgets.

Nevertheless, the plugin doesn’t restrict customers to textual content. They will stick no matter they need in, even nesting a Tremendous Listing inside a Tremendous Listing Merchandise block. Sadly, its indentation is zeroed out in that state of affairs, so its gadgets don’t seem nested.

The plugin’s declare to fame could also be its grid function. The closest issues in WordPress are the Columns and Gallery blocks. Nevertheless, Columns are restricted to a single row, and Gallery solely permits pictures.

That is additionally the place the Tremendous Listing block wants a bit refinement. When choosing the horizontal (“grid”) orientation, a brand new field seems to permit customers to set the utmost width of all sub-list gadgets.

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.
4-by-four grid of quotes and pictures.

Desirous to create a four-by-four grid (two rows of two columns), I instantly chosen 50%. It made probably the most sense. Nevertheless, I didn’t get any columns. The worth was too massive and didn’t account for the gutter area between the gadgets. I then lowered it till I hit a quantity that labored: 47%. I might have regarded on the web page’s supply code and easily did the maths, however it will be a guessing recreation for the typical end-user.

A extra intuitive interface can be to change the max-width choice to a column-number setting. Technically, this may restrict the flexibleness of the block in a couple of situations. Nevertheless, it will cowl the overwhelming majority of circumstances the place customers simply desire a grid of equal-width columns that span the width of their container.

This assumes that the plugin doesn’t ultimately enable customers to micro-manage every checklist merchandise in grid mode. There’s an open ticket within the plugin’s repository to add the option to particular person Tremendous Listing Merchandise blocks.

No matter future route the plugin goes, an easy-to-use block for shortly establishing a grid of things will seemingly land in lots of developer and site-owner toolboxes.

Three options make this plugin less complicated to make use of than many core WordPress or third-party blocks. The primary is when the consumer has the Tremendous Listing chosen within the editor. As an alternative of solely the “+” icon to nest one other block, it appends the textual content label “Add Tremendous Listing Merchandise.”

An unordered list in the WordPress editor.  In the bottom right, it has a button that reads, "+ Add Super List Item."
Add new Tremendous Listing Merchandise button.

It’s straightforward to get confused about the place new blocks can be inserted after clicking the “+” editor icon. Tremendous Listing Block’s textual content label makes it useless easy to know. I’d like to see WordPress and different third-party plugins take the identical or an analogous strategy.

The opposite two nice-to-have options seem within the toolbar for the Tremendous Listing Merchandise block. The primary is a “Settings” button for leaping again to the father or mother block. The second is a round “+” icon for appending one other merchandise to the checklist.

Unordered list in the WordPress editor with one of the items highlighted.  In the toolbar, there is a link to the parent list's settings and a button for appending another item to the list.
Settings and append buttons within the toolbar.

Each choices appeared to cut back misclicks when choosing blocks or buttons within the editor. Nevertheless, I want WordPress’s strategy to creating some father or mother block settings out there within the little one block’s toolbar. Social Hyperlinks is a main instance of this, permitting customers to alter justification and alignment with out leaping forwards and backwards.

General, I’m impressed with Tremendous Listing Block as a primary launch. I can be retaining my eye on it to see the way it matures. It’s effectively value deploying on any website that requires its options now.


Leave a Reply

Your email address will not be published.