bmd/enable-list-icons

Extension to add icons to list blocks.

Maintainers

Package info

github.com/bob-moore/enable-list-icons

Language:JavaScript

pkg:composer/bmd/enable-list-icons

Statistics

Installs: 61

Dependents: 0

Suggesters: 0

Stars: 0

Open Issues: 0

v0.5.2 2026-06-01 13:38 UTC

This package is auto-updated.

Last update: 2026-06-01 13:38:39 UTC


README

Enable List Icons

WordPress PHP Latest Release License

Lint CSS Lint JS Lint PHP

Want to give it a test drive? Try it in the WP Playground: Try it in the WordPress Playground

Add icons to the WordPress List block (core/list) in both the editor and frontend.

Features

  • Adds icon controls to core/list in the block inspector.
  • Supports icon libraries:
    • WordPress icons
    • MUI icons
    • MUI variant families, including Outlined, Rounded, and Sharp
    • Custom SVG input
  • Lets you set icon placement inside the list item or outside as an aligned marker.
  • Lets you set icon color, size, gap, and vertical offset per list block.
  • Renders sanitized inline SVG for each list item on the frontend.
  • Ships with GitHub-based plugin updates in the WordPress admin update UI.

Requirements

  • WordPress 6.9+
  • PHP 8.2+

Installation

Install as a plugin

  1. Download the latest release zip from GitHub releases.
  2. In WordPress admin, go to Plugins -> Add New Plugin -> Upload Plugin.
  3. Upload the zip and activate Enable List Icons.

Install via Composer

If you are embedding this into your own project:

composer require bmd/enable-list-icons

If your parent plugin already uses PHP-DI, you can load this package's definitions into the parent container and override only the install-specific path and URL values:

use Bmd\EnableListIcons\Controller;
use Bmd\EnableListIcons\Services\FilePathResolver;
use Bmd\EnableListIcons\Services\UrlResolver;
use function DI\autowire;
use function DI\string;

$definitions = require __DIR__ . '/vendor/bmd/enable-list-icons/inc/definitions.php';

return array_merge(
    $definitions,
    [
        FilePathResolver::class => autowire()
            ->constructorParameter(
                'path',
                string( '{path}vendor/bmd/enable-list-icons/' )
            ),

        UrlResolver::class => autowire()
            ->constructorParameter(
                'url',
                string( '{url}vendor/bmd/enable-list-icons/' )
            ),
    ]
);

Then ask your parent container for Controller::class during your plugin bootstrap. PHP-DI will call the injected hook-registration methods as it creates the controller.

If your parent plugin does not use PHP-DI, load the dependency through its Main class so the package can build its own container:

use Bmd\EnableListIcons\Main;

$enable_list_icons = new Main(
    [
        'package' => 'enable_list_icons',
        'path'    => plugin_dir_path( __FILE__ ) . 'vendor/bmd/enable-list-icons/',
        'url'     => plugin_dir_url( __FILE__ ) . 'vendor/bmd/enable-list-icons/',
    ]
);

$enable_list_icons->mount();

Both examples should point path and url at the Enable List Icons dependency root, not the parent plugin root.

Usage

  1. Add a List block.
  2. Open the block sidebar.
  3. Open the Icon panel.
  4. Choose an icon source (WordPress, MUI, or Custom SVG).
  5. Adjust icon placement, color, size, gap, and vertical offset.
  6. Save and view the post.

Custom Icon Families

Developers can add static JSON icon families with the enable_list_icons_icon_families filter. Each JSON file should contain an array of picker-compatible icon objects with name, label, and source properties.

add_filter( 'enable_list_icons_icon_families', function ( $families ) {
    $families['brand-icons'] = array(
        'label' => 'Brand Icons',
        'url'   => plugin_dir_url( __FILE__ ) . 'icons/brand-icons.json',
    );

    return $families;
} );

Icon Placement

Inside

The icon appears inline before each list item text. This is useful when the icon should feel like part of the content flow.

Outside

The icon appears in reserved space beside each list item. This is useful for aligned visual markers and larger icons.

Updates

This plugin is distributed through GitHub releases (not WordPress.org). The plugin includes a scoped GitHub updater so WordPress can detect and apply new versions from this repository.

Changelog

0.5.1

  • Changed nested list handling so parent list icons are only applied to direct list items.
  • Let nested list blocks manage their own icon settings without inheriting parent icon markup or layout styles.
  • Added regression coverage for nested list rendering.

0.5.0

  • Added current icon preview with removal button to the icon picker control.
  • Added copy/paste toolbar for icon styles, allowing icon settings to be copied from one list block and pasted to another.

0.4.1

  • Updated icon CSS for improved styling.
  • Added nested list item (li > ul, li > ol) support.
  • Fixed PHP-DI compiled container scoping to cover StringDefinition and InvalidDefinition string literals across all Compiler classes.

0.4.0

  • Refactored plugin internals into separate Main, Controller, Module, Provider, Service, and Transformer classes for a cleaner shared-architecture design.
  • Replaced monolithic Plugin class with PHP-DI definitions file and purpose-built service classes (AssetLoader, FilePathResolver, ScriptLoader, StyleLoader, UrlResolver).
  • Added Docker-based release build support via Dockerfile.build and build-plugin-release-docker.sh.
  • Added release packaging script (build-plugin-release.mjs) to automate zip assembly.
  • Added scoper.custom.php for PHP-DI namespace scoping.
  • Added .gitattributes to exclude dev-only files from Composer/git archive exports.
  • Fixed PHP lint workflow scoped dependency install step.

0.3.0

  • Refined the PHP plugin architecture around Main, Controller, service providers, transformers, and PHP-DI definitions.
  • Updated Composer autoloading for the new Bmd\EnableListIcons namespace structure.
  • Added JSON icon family loading with support for WordPress, MUI, MUI Outlined, MUI Rounded, and MUI Sharp families.
  • Added separate GitHub Actions lint workflows for CSS, JS, and PHP.
  • Added a WordPress Playground blueprint and demo list content.
  • Updated release packaging to include scoped dependencies, a compiled container, Docker build support, and production Composer files.

0.2.0

  • Added toggle-to-deselect behavior for the icon picker.
  • Added a dedicated "Icon Styles" panel grouping placement, size, gap, and vertical offset controls.
  • Improved unit/range control layout with a shared label and stacked input plus slider.
  • Fixed null handling for icon attributes throughout (IconValue properties now nullable).
  • Fixed icon outside placement removing excess left padding on list items.

0.1.0

  • Initial release as Enable List Icons.
  • Added icon picker with WordPress and MUI icon sets.
  • Added inside/outside placement toggle.
  • Added icon color, size, gap, and vertical offset controls.
  • Added server-side render filter for core/list.
  • Added scoped GitHub updater via wpify/scoper.