Clickable List with Icons

Create text lists with audio interactivity

Description

Adds a "Clickable List with Icons" block for building lists where each item has an icon, a title, and optional content underneath. The title of each item can do nothing, open a link, or play an audio file from the media library. This makes it useful for things like language/pronunciation lists where visitors click a word to hear it spoken.

Features:

• One icon set on the list is used by every item, and any item can use its own instead. An icon can be an image of any type from the media library or pasted SVG code (SVG can follow the title colour).
• Each item's title can do nothing, open a link (optionally in a new tab), or play an audio clip.
• Each item can hold any blocks as content below its title.
• The icon can sit to the left of, right of, or above the title, with adjustable icon size and spacing.
• Title and title hover colours, gaps between items, and header padding are adjustable.
• Optional accordion mode: clicking an item's title or icon shows or hides its content. Lists can start all closed or with the first item open, and opening one item can close the others in that list. Link items are never collapsible; audio items play and toggle. Items open and close with a smooth animation (adjust its speed with the --accordion-duration CSS variable; it is turned off for visitors who prefer reduced motion).
• List-wide expand and collapse SVG icons, shown right (default) or left of the title, with their own size setting.
• State classes for styling: --open, --closed and --hover on .icon-list-header-inner and .icon-list-item-content.

Usage:

1. Insert the "Clickable List with Icons" block.
2. In "Default Icon" in the block sidebar, select an image or paste SVG markup. Use currentColor in the SVG so it follows the title colour.
3. Use "+ Add item" to add items. Select an item to set its click action (link or audio) or override its icon. Turning on the override with an empty SVG hides that item's icon.

Installation

Changelog

Unreleased

• Blocks now render server-side; SVG icons are sanitised in PHP and work for users without the unfiltered_html capability.
• Fixed overlapping audio, the SVG field clearing while typing, and empty icon gaps.
• Title icons can now be an image from the media library instead of SVG.
• Added accordion mode with expand/collapse icons, initial state and close-others settings.
• Icon size now accepts units (px, em, rem, %). The default changed from 24px to 40px; lists that never changed the size will show larger icons.
• Existing lists must be opened in the editor and re-saved after updating, or their titles will be missing on the front end.