How to Create a Clickable Checklist Block in WordPress Gutenberg

For the life of me, I wasn’t able to find a pre-made Gutenberg block for making checklists. I’ve had more than a few occasions for clients and for my own sites, where I’ve wanted to embed a checklist into WordPress. Usually, I ended up doing it in raw HTML. Not ideal for clients.

So, I decided how to make my own Gutenberg checklist block with the help of the Lazy Blocks plugin. This wonderful plugin helps you make your own Gutenberg blocks using a simple editor plus some PHP code (no React!)


The Finished Product

Here’s a sample of the result (try clicking the items):

Things You Should Bring When You Go Hiking

Here’s what that looks like in the Gutenberg editor:

Screenshot of Checklist Gutenberg Block
Screenshot of Checklist Gutenberg Block

If this looks like something you’d like to have on a WordPress page, keep reading! Note, this solution doesn’t have any local storage; the assumption is that the user will use this checklist while they view the page this one time and not need it a week later.


Setting Up the Gutenberg Block

First, install and activate the Lazy Blocks plugin. Then create a new block by going to Lazy Blocks -> Add New. Next, follow these steps:

  1. Enter “Checklist” for the Block Name at the top of the editor.
  2. In the right sidebar, enter “checklist” for the Slug.
  3. Below that, for the icon, choose the clipboard with the check mark.
  4. Below that, select “Lazy Blocks” for the Category.
  5. Below that, you can entera brief Description if you wish (optional).
  6. Select “Content Controls” instead of “Inspector Controls” in the selector. That makes the controls for this block appear in the content area of the editor instead of the sidebar.
  7. Click on the plus sign to create your first control.

Creating the Repeater

OK, you’ve created the block; now you need to create the repeater:

  1. Click the plus sign to add a Control and click on it to select it.
  2. In the right column, leave Label blank and enter “checklist” for Name.
  3. Below that, for Type, select “Repeater”.
  4. Below that, for Row Label, enter “List Item {{#}}”.
  5. Below that, for Collapsible Rows, select “No”. Leave the rest of the items in their default values.
  6. Back to the main section, click “Show Child Controls”.
Gutenberg Lazy Blocks plugin screenshot

Creating the List Items

You have the repeater, now you need to create the individual list items in the repeater:

  1. Click the plus sign under the Repeater to create a field inside the Repeater.
  2. In the right column, leave the Label blank. For the Name in the right column, enter “checklist_item”.
Gutenberg Lazy Blocks plugin screenshot

Adding the Template Code

The block is created, but no front end code is output until you add this template code:

  1. In the Code section, select “PHP”.
  2. For the Frontend code, paste in the following:
<ul class="lazy-block-checklist">
<?php foreach( $attributes['checklist'] as $inner ): ?>
    <li>
      <label><input type="checkbox"> <div class="label"><?php echo $inner['checklist_item']; ?></div></label>
    </li>
<?php endforeach; ?>
</ul>
Screenshot of Gutenberg Lazy Blocks plugin

Go ahead and publish your block! Now, if you go into the Gutenberg editor, you should be able to add the “Checklist” block and add checklist items by pressing the “+ Add Row” button! If not, go back and check your work.


Styling the Checklist

We aren’t done yet because if you look at the front end, the checklist will look pretty bad. We need to get rid of the bullet points and do some other things.

So, copy this CSS into your Customizer or child theme CSS file:

/* LAZY BLOCK CHECKLIST */
ul.lazy-block-checklist {
	margin-bottom: 1em !important;
	padding-left: 20px;
	margin-left: 0px;
}
ul.lazy-block-checklist li {
	list-style: none;
	font-size: large;
	margin-bottom: 1em;
}
ul.lazy-block-checklist li label {
	cursor: pointer;
	user-select:none;
	font-weight: bold;
}
ul.lazy-block-checklist li input {
	width: 22px;
	height: 22px;
	vertical-align: top;
	margin-right: 10px;
	cursor: pointer;
}
ul.lazy-block-checklist li label .label {
	display: inline-block;
	width: calc(100% - 50px);
}
ul.lazy-block-checklist li .label div {
	font-weight: normal;
}

This should make your checklist look a lot better, although it might not be perfect depending on your theme.

Make sure to check on mobile. If your labels are falling below the checkboxes, adjust the width of the .label div by increasing the 50px value in this line: “width: calc(100% – 50px);”

Improvements

When I posted this article on Facebook, several folks suggested adding local storage. That wouldn’t be too hard, but for my applications such as this travel checklist, it wasn’t needed, as the list would only be used for one session and not needed two weeks later or whatever. I leave it as an exercise for the reader to implement if needed.

Also, you can make the rendered checklist appear in the Gutenberg editor with some more settings in Lazy Blocks and by adding the CSS to the admin. Another exercise for the reader!

I hope this was helpful. Did it work for you? Any questions? Let me know in the comments below! – Brian

Leave a Comment



This site uses Akismet to reduce spam. Learn how your comment data is processed.

Shares
%d bloggers like this: