Theme Icons

 
 
 
 

A theme icon is an SVG a child theme registers once and every Method block with an icon picker can use: the Theme Button’s before/after icons, the Swiper’s navigation arrows, the Modal’s close button. The set is assembled on demand by method_get_theme_icons() (lib/blocks.php), handed to the editor as methodGlobalData.icons, and registered with WordPress’s own icon library when that exists, so the icons also show up in core’s pickers.


How it works

  • method_get_theme_icons() starts from an empty array, runs it through the older method_block_theme_button_icons filter (so child themes that only ever supplied button icons keep working), then through method_theme_icons, and returns the array — or false when it is empty, which is what blocks test to decide whether to show an icon picker at all.
  • On init, method_register_theme_icons() registers a Method collection with wp_register_icon_collection() and one wp_register_icon( 'method/<slug>' ) per icon, when those functions exist. An icon with 'omit' => true stays out of the WordPress collection but remains available to Method’s own controls.
  • In the editor the set is read from methodGlobalData.icons, localised by the global data script in lib/blocks.php; on the front end each block calls method_get_theme_icons() in its render callback and prints the svg string of the slug it stored.

Registering icons

Keys are the slugs blocks store in their attributes, so renaming one orphans every block that chose it. Each entry needs a label and an inline svg; omit is optional.

PHP
add_filter( 'method_theme_icons', function ( $icons ) {
    $icons['arrow-right'] = array(
        'label' => __( 'Arrow right', 'cortlandt' ),
        'svg'   => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>',
    );
    $icons['cross'] = array(
        'label' => __( 'Cross', 'cortlandt' ),
        'svg'   => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M6 6l12 12M18 6L6 18"/></svg>',
        'omit'  => true, // Method's pickers only; not added to the WordPress icon library
    );
    return $icons;
} );

Use currentColor in the SVG so the icon follows the text or button color it sits in. Slugs are free-form: blocks store whichever slug the author picks, so there are no reserved names.


Where icons are used

ConsumerReadsNotes
Theme ButtonmethodGlobalData.icons / method_get_theme_icons()Before and After Icon dropdowns, with an explicit None.
Swiper, Swiper Gallerymethod_get_theme_icons(), MethodSwiperNavNavigation arrows, chosen per block as prevIcon / nextIcon; the block’s own chevrons are the default.
Modalmethod_get_theme_icons()Close button icon (closeIcon); the panel only appears when icons are registered.
WordPress icon librarymethod_register_theme_icons()The Method collection in core’s icon pickers, minus icons marked omit.

Changelog

VersionDescription
2.0.0-beta18Introduced as a theme-level set: method_get_theme_icons(), the method_theme_icons filter merging method_block_theme_button_icons, methodGlobalData.icons, and registration with the WordPress icon library (3064cd9).