Content · Gutenberg
Styled List block for WordPress
Fully customizable list with icons, rich text, and flexible layout options.
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
Fully customizable list with icons, rich text, and flexible layout options.
Inspector panels on this block: Layout, Icon, Item Style, Text, Item, Per-item Options. Those titles come from index.js, not from a shared template.
Behavior controls: “List Layout” options: Vertical (Stack), Two Columns, Custom Columns; “Text Alignment” options: Left, Center, Right; “Icon Type” options: Checkmark ✓, Check Circle ●✓, Arrow ›, Arrow Right →, Disc •; “Custom Character” (Enter any character or emoji, e.g. → ✦ ◆ 🔥).
Where to find it
Gutenberg inserter → Content → search “Styled List” (block name `blockenberg/styled-list` in block.json). Style it in the sidebar after insert.
How to use Styled List block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Styled List”, insert it. Category: Content.
- Configure inspector controls that exist on this block. Open Layout. Set “List Layout”, “Columns”, “Text Alignment”, “Row Gap”.
- Check the published page. The view script reads HTML data attributes: data-animate. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| List Layout | Select control; the chosen value is saved on the block. Options: Vertical (Stack); Two Columns; Custom Columns. block.json default: vertical. Saved as `listStyle`. |
| Columns | Numeric range control in the inspector. Range 2–6. block.json default: 2. Saved as `columns`. |
| Text Alignment | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: left. Saved as `alignment`. |
| Row Gap | Numeric range control in the inspector. Range 0–60. block.json default: 12. Saved as `gap`. |
| Column Gap | Numeric range control in the inspector. Range 0–80. block.json default: 32. Saved as `columnGap`. |
| Icon Type | Select control; the chosen value is saved on the block. Options: Checkmark ✓; Check Circle ●✓; Arrow ›; Arrow Right →; Disc •; Square ▪; Star ★; Sparkle ✦; Bolt ⚡; Dash —. block.json default: check. Saved as `iconType`. |
| Custom Character | Text field in the inspector. Enter any character or emoji, e.g. → ✦ ◆ 🔥. block.json default: →. Saved as `customChar`. |
| Icon Shape | Select control; the chosen value is saved on the block. Options: None (icon only); Circle — Filled; Circle — Outline; Square — Filled; Square — Outline; Rounded Square — Filled; Rounded Square — Outline. block.json default: none. Saved as `iconShape`. |
| Icon Position | Select control; the chosen value is saved on the block. Options: Left; Right. block.json default: left. Saved as `iconPosition`. |
| Align icon to top | On/off toggle in the inspector. By default icon aligns to the first line of text. Off by default. Saved as `iconAlignTop`. |
| Icon Size | Numeric range control in the inspector. Range 10–60. block.json default: 18. Saved as `iconSize`. |
| Icon Container Size | Numeric range control in the inspector. Range 20–80. block.json default: 34. Saved as `iconBgSize`. |
| Container Radius | Numeric range control in the inspector. Range 0–50. block.json default: 50. Saved as `iconBgRadius`. |
| Item Style — Top | Numeric range control in the inspector. Range 0–40. block.json default: 10. Saved as `itemPaddingTop`. |
| Item Style — Right | Numeric range control in the inspector. Range 0–40. block.json default: 14. Saved as `itemPaddingRight`. |
| Item Style — Bottom | Numeric range control in the inspector. Range 0–40. block.json default: 10. Saved as `itemPaddingBottom`. |
| Item Style — Left | Numeric range control in the inspector. Range 0–40. block.json default: 14. Saved as `itemPaddingLeft`. |
| Border Width | Numeric range control in the inspector. Range 0–6. block.json default: 0. Saved as `itemBorderWidth`. |
| Border Style | Select control; the chosen value is saved on the block. Options: Solid; Dashed; Dotted. block.json default: solid. Saved as `itemBorderStyle`. |
| Border Radius | Numeric range control in the inspector. Range 0–32. block.json default: 0. Saved as `itemBorderRadius`. |
| Item Shadow | On/off toggle in the inspector. Off by default. Saved as `itemShadow`. |
| Divider between items | On/off toggle in the inspector. Off by default. Saved as `dividerEnabled`. |
| Divider Height | Numeric range control in the inspector. Range 1–4. block.json default: 1. Saved as `dividerWidth`. |
| Show description line | On/off toggle in the inspector. Add a secondary text beneath each item. Off by default. Saved as `showDescription`. |
| Icon Color | Color control in the inspector. block.json default: #3b82f6. Saved as `iconColor`. |
| Icon Background | Color control in the inspector. block.json default: #dbeafe. Saved as `iconBgColor`. |
| Text Color | Color control in the inspector. block.json default: #374151. Saved as `textColor`. |
| Description Color | Color control in the inspector. block.json default: #6b7280. Saved as `descColor`. |
| Item Background | Color control in the inspector. block.json default: transparent. Saved as `itemBg`. |
| Item Border Color | Color control in the inspector. block.json default: #e2e8f0. Saved as `itemBorderColor`. |
| Divider Color | Color control in the inspector. block.json default: #e2e8f0. Saved as `dividerColor`. |
| Enable per-item icon color | On/off toggle in the inspector. Set a custom icon color per item in the canvas. Off by default. Saved as `perItemColor`. |
| Enable per-item icon override | On/off toggle in the inspector. Set a custom icon type / image for individual items. Off by default. Saved as `perItemIcon`. |
| Icon Type | Select control; the chosen value is saved on the block. Options: — Use Global Icon —. |
| Character | Text field in the inspector. |
What the front-end script actually does
- The view script reads HTML data attributes: data-animate.
When this is the right block
- Fully customizable list with icons, rich text, and flexible layout options — that is the job of Styled List, not a generic content block.
- Use it when you need the editor control labeled “List Layout”, which exists on this block’s inspector.
- It matches pages about list, icon, checklist.
- 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 Styled List block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Styled List”. It sits under Content. After insert, open Layout and set “List Layout”, “Columns”, “Text Alignment”, “Row Gap”.
What makes Styled List different from other Blockenberg blocks?
Fully customizable list with icons, rich text, and flexible layout options. Inspector labels on this block include “List Layout”, “Columns”, “Text Alignment”, “Row Gap”.
Is the Styled List Gutenberg block free?
Yes. Styled List ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Styled List 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: Layout, Icon, Item Style, Text).
Related content blocks
Icon Accordion
Visually rich accordion with per-item icons, badges and custom colours — great for FAQs, feature lists and onboarding flows.
Interactive Checklist
A fully interactive checklist with progress tracking, emoji icons, add/remove items, and optional persistence via localStorage. Rich color and layout controls.
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.
Icon
Standalone styled icon with label, link, shape, animation, and rich customization.
Icon Box
Single card with icon, title, text, and optional link button. Perfect for feature lists inside Row/Column.
Icon Stats
Statistics displayed with large decorative icons, bold numbers, and descriptive labels.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Styled List from the Gutenberg inserter.