Colored pencils

Spectra Item List

Spectra (formerly Ultimate Addons for Gutenberg) has a block called Icon List. You use it for making lists that have icons (or images, or nothing) instead of the typical bullets or numbers.

Below are some examples of its use. The first uses a Spectra Container block, which Spectra seems to think is best to employ before adding any other block to your page or post. The Icon List is then added “inside” that Container.

The second example just uses a “naked” Icon List without benefit of Container.

Spectra Icon List in Container

Fancy-schmancy list item the first
Just as fancy list item the second
Final fancy list item in the first Icon List

Spectra Icon List Sans Container

List item showing another icon (with color)
List item showing a different icon
List item showing yet another different icon

You might be able to see, if you look closely, that the first list is slightly indented compared to the second one. That’s the effect of the Container block. I don’t see that it’s necessary. It does allow more flexibility, if you need it though.

Icon List with Images

Here’s something just a bit fancier. I don’t have the greatest pictures to use as list icons, but that’s what you’re seeing below. The icons are automatically downsized from full-sized images. I didn’t have to do anything to them to make them “work”.

Rich SchemaList item with a simple image
List item with an image and a little color
List item with all the above and more space (margin)

Now, I probably would never add extra margin space on just one item like that. (You can change the padding too.) But I just did it here to highlight the possibility.

You get 3 list items by default when adding a Spectra Icon List. Adding more is a little wonky and took me some time to figure out.

Adding an item between the first and second or the second and third is easy enough. You just hover between them in the center (left to right) and look for the ubiquitous plus sign to pop up.

It’s adding one after the third item that’s a little trickier. To accomplish this (at least, as far as I can tell), you must click the popup menu item to switch from a specific List Item to the Item List as a whole. When you do, a plus sign will appear at the lower right corner of the third List Item. When you hover over that sign, you get popup text that suggests you’re about to add a List Item.

If there’s another way to do this, let me know.

Leave a Comment

Your email address will not be published. Required fields are marked *