Content · Gutenberg
Interactive Checklist block for WordPress
A fully interactive checklist with progress tracking, emoji icons, add/remove items, and optional persistence via localStorage. Rich color and layout controls.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
A fully interactive checklist with progress tracking, emoji icons, add/remove items, and optional persistence via localStorage. Rich color and layout controls.
Inspector panels on this block: Checklist Settings, Sizing. Those titles come from index.js, not from a shared template.
Behavior controls: “Checkbox style” options: Circle, Square.
Where to find it
Gutenberg inserter → Content → search “Interactive Checklist” (block name `blockenberg/checklist` in block.json). Style it in the sidebar after insert.
How to use Interactive Checklist block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Interactive Checklist”, insert it. Category: Content.
- Configure inspector controls that exist on this block. Open Checklist Settings. Set “Show title”, “Show subtitle”, “Show progress bar”, “Allow adding items”.
- Check the published page. The view script reads HTML data attributes: data-opts. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Show title | On/off toggle in the inspector. On by default. Saved as `showTitle`. |
| Show subtitle | On/off toggle in the inspector. On by default. Saved as `showSubtitle`. |
| Show progress bar | On/off toggle in the inspector. On by default. Saved as `showProgress`. |
| Allow adding items | On/off toggle in the inspector. On by default. Saved as `showAddItem`. |
| Allow deleting items | On/off toggle in the inspector. On by default. Saved as `allowDelete`. |
| Remember checked state (localStorage) | On/off toggle in the inspector. On by default. Saved as `rememberState`. |
| Checkbox style | Select control; the chosen value is saved on the block. Options: Circle; Square. block.json default: circle. Saved as `checkStyle`. |
| Max width (px) | Numeric range control in the inspector. Range 320–1000. block.json default: 600. Saved as `contentMaxWidth`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
- It writes to localStorage in the visitor’s browser, not to wp_options.
- Keyboard handlers move focus between items.
When this is the right block
- A fully interactive checklist with progress tracking, emoji icons, add/remove items, and optional persistence via localStorage. Rich color and layout controls — that is the job of Interactive Checklist, not a generic content block.
- Use it when you need the editor control labeled “Show title”, which exists on this block’s inspector.
- It matches pages about checklist, todo, tasks.
- Inserter grouping: articles, cards, lists, and long-form layouts.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Interactive Checklist block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Interactive Checklist”. It sits under Content. After insert, open Checklist Settings and set “Show title”, “Show subtitle”, “Show progress bar”, “Allow adding items”.
Where does Interactive Checklist store visitor state?
In localStorage on that browser. Clearing site data resets it. It is not a WordPress user meta field unless render.php says so.
Is the Interactive Checklist Gutenberg block free?
Yes. Interactive Checklist ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Interactive Checklist to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Checklist Settings, Sizing).
Related content blocks
Styled List
Fully customizable list with icons, rich text, and flexible layout options.
Link List
An organized, styled list of links with icons, titles, descriptions, and optional badges.
Numbered List
Visual numbered or icon section — each item has a styled badge, heading, description, optional image and optional link. Ideal for steps, benefits, and 'why choose us' sections.
Progress Bar
Display animated progress bars with customizable styles and labels.
Progress Circle
Animated SVG circular progress rings — perfect for skills, stats, and KPIs.
Resource Links
Curated resource / link list with section heading, items (icon, title, description, URL, type tag), list or grid layout, and full color/style controls.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Interactive Checklist from the Gutenberg inserter.