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 oldermethod_block_theme_button_iconsfilter (so child themes that only ever supplied button icons keep working), then throughmethod_theme_icons, and returns the array — orfalsewhen 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 withwp_register_icon_collection()and onewp_register_icon( 'method/<slug>' )per icon, when those functions exist. An icon with'omit' => truestays 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 inlib/blocks.php; on the front end each block callsmethod_get_theme_icons()in its render callback and prints thesvgstring 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.
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
| Consumer | Reads | Notes |
|---|---|---|
| Theme Button | methodGlobalData.icons / method_get_theme_icons() | Before and After Icon dropdowns, with an explicit None. |
| Swiper, Swiper Gallery | method_get_theme_icons(), MethodSwiperNav | Navigation arrows, chosen per block as prevIcon / nextIcon; the block’s own chevrons are the default. |
| Modal | method_get_theme_icons() | Close button icon (closeIcon); the panel only appears when icons are registered. |
| WordPress icon library | method_register_theme_icons() | The Method collection in core’s icon pickers, minus icons marked omit. |
Changelog
| Version | Description |
|---|---|
| 2.0.0-beta18 | Introduced 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). |