Readers love lists. In this post, we’ll cover how to create three different kinds of lists using the Gutenberg Editor: bullet lists (also known as “unordered lists;” numbered lists (also called “ordered lists”) and “nested lists” —when you want a mix of numbers and bullets. This requires custom HTML –which is often a pain to use and a bigger pain if you need to use it often. Gutenberg has this GREAT TRICK for creating re-usable custom HTML blocks. This walk through gives you a quick and easy introduction.
The List Block
Over on Second Helpings, I’m working on creating a blog for the “dirty, lazy keto” ways of eating — and that means recipes. And recipes mean lists: lists for ingredients, lists for directions. I like to use “nested” lists. The “list” block in the Gutenberg editor gives you a choice of “ordered lists (1,2,3, etc.) or unordered lists (bullet lists) but not both. You’ll need to know a little HTML, but it’s easy-peasy–I show you how below.
As you can see in the screenshot below you can choose to make the paragraph into a list by choosing the LIST transformation instead of the Header transformation.
- Here’s what happens.
And now we have a block with one sentence in an UNORDERED (bullet) list.
Suppose you want to have an ordered list. First thing, second thing, third thing, but with numbers. This gets a little bit tricker.
First, start typing as you normally would, then after a word or two, use your mouse to click on the block you just created. You’ll get the paragraph attribute for the block, like so.
Then, click on List.
Gutenberg defaults to the ordered list. You have to click on the block a SECOND time to bring up the option for the ordered list. But first, Gutenberg gives you the option of changing to an entirely different kind of block.
Click on block that a SECOND time to get the option of the ordered list.
Choose the numbered list.
And now you have a numbered list!
Using Custom HTML for Nested Lists in Gutenberg
You can create your OWN CUSTOM HTML in Gutenberg by choosing the CUSTOM HTML type of block. It’s right after the “list” function when you choose a new kind of block from the list.
Next I put in my custom HTML for a mixed ordered and unordered list.
Above is the screen capture of what I put in, below is the actual result of this in the blog:
- Line 1
- Line 2
- Bullet one
- Bullet two
And here below is what the CUSTOM HTML block looks like in the Gutenberg editor!
Creating a Reusable HTML Block
I’m going to be creating lots of nested lists for my recipe and food blog. I can make this block of HTML “reusable” — giving it a name and being able to call it up without having to write all that tedious HTML! I just use the 3 little dots to call up these options to select the Add to Reusable Blocks choice. Click outside of the block, then on the block to pull up this menu, then click on the three dots on the right.
Next, Gutenberg asks for a name for the block.
I’m giving mine the name “Nested List”
Click save and I’m done!
Editing a Reusable Block
Now, whenever I want to include a nested list, instead of a regular list, I just have to call it up like so.
I add a new block, either using the plus symbol at the top left of the screen or when I get the plus sign that starts a new block.
Next I can either SCROLL DOWN to find the reusable blocks option (at the very end of the list), OR if I know the name of the block, I can put the name in the “search for a block” box at the top. “Nested List” pops up — and I can choose it!
Next, I can edit the list without having to fool with all the code.
But then I need to stop! I shouldn’t save it as Nested List. In fact, I don’t want it to be a reusable block at all!
Click on the block to pull up the “three little dots” option. Then choose CONVERT TO REGULAR BLOCK!
Now I have a piece of custom HTML for nested lists that I can use again and again.
My mind boggles at all the things I can use re-usable blocks for. More on this soon.
~ Have fun! ~Lola