easy_svg_panel_enqueue

Fires right after the Icons panel script is enqueued, so an add-on can load its own bundle into the panel with the panel script as a dependency.

Action · Easy SVG · Status: Stable

easy_svg_panel_enqueue is the moment to load your own JavaScript and CSS into the Icons panel. It fires only on the Icons screen, right after Easy SVG has queued its own panel script, and it hands you that script's handle. Make the handle a dependency of your script and yours runs after the panel, when window.EasySvgPanel already exists.

Usage

do_action( 'easy_svg_panel_enqueue', string $handle );

add_action( 'easy_svg_panel_enqueue', 'myaddon_enqueue_panel' );

When to use it

You ship a script that calls window.EasySvgPanel.registerTab() or window.EasySvgPanel.registerCollections().
Your tab needs a stylesheet, translations (wp_set_script_translations()) or a few values from PHP (wp_add_inline_script()), and you want them on the Icons screen only.
You want to avoid checking the screen yourself. The hook already answers "is this the Icons panel, and is the panel bundle there?"

When not to use it:

For assets on any other admin screen. Use admin_enqueue_scripts and check the hook suffix there.
As a permission check. Reaching this hook only means the current user may see at least one panel tab. It says nothing about what your own REST routes should allow.
For the front end, the block editor or REST requests. The hook never fires there.

Parameters

body

$handlestring

Required

The script handle of the panel bundle. Today it is always easy-svg-panel. Use the value you receive instead of typing the string, so your code keeps working if the handle ever changes. A style handle with the same name exists too: it carries the panel's inline CSS, so it is a good dependency for your own stylesheet.

Return value

returnvoid

Nothing. It is an action, so whatever your callback returns is ignored.

Examples

Load a bundle into the panel

The smallest useful callback: your script depends on the panel handle, loads in the footer and gets a version for cache busting.

add_action( 'easy_svg_panel_enqueue', 'myaddon_enqueue_panel' );

function myaddon_enqueue_panel( $handle ) {
	wp_enqueue_script(
		'myaddon-panel',
		plugins_url( 'assets/panel.js', __FILE__ ),
		array( $handle, 'wp-element', 'wp-i18n' ),
		'1.0.0',
		true
	);
}

Script, styles, translations and data together

A real add-on usually needs more than one file. Everything below is attached to your own handles, so the panel's data stays untouched.

add_action( 'easy_svg_panel_enqueue', 'myaddon_enqueue_panel' );

function myaddon_enqueue_panel( $handle ) {
	$dir = plugin_dir_path( __FILE__ );

	wp_enqueue_script(
		'myaddon-panel',
		plugins_url( 'assets/panel.js', __FILE__ ),
		array( $handle, 'wp-element', 'wp-i18n' ),
		(string) filemtime( $dir . 'assets/panel.js' ),
		true
	);

	// Strings from __() in panel.js, from languages/myaddon-<locale>-<md5>.json.
	wp_set_script_translations( 'myaddon-panel', 'myaddon', $dir . 'languages' );

	// Values the tab needs, as JSON, printed before the script runs.
	wp_add_inline_script(
		'myaddon-panel',
		'window.myaddonPanel = ' . wp_json_encode(
			array(
				'route'   => 'myaddon/v1/report',
				'maxRows' => 50,
			)
		) . ';',
		'before'
	);

	// The panel's own style handle as a dependency: your rules print after its rules.
	wp_enqueue_style(
		'myaddon-panel',
		plugins_url( 'assets/panel.css', __FILE__ ),
		array( $handle ),
		(string) filemtime( $dir . 'assets/panel.css' )
	);
}

Hook in only when the panel is new enough

Add the action once all plugins are loaded and only when the panel contract has what your script uses. Level 2 brought area and icon for tabs, level 3 brought registerCollections().

add_action( 'plugins_loaded', 'myaddon_boot' );

function myaddon_boot() {
	if ( ! defined( 'EASY_SVG_PANEL_API' ) || 3 > (int) EASY_SVG_PANEL_API ) {
		return;
	}
	add_action( 'easy_svg_panel_enqueue', 'myaddon_enqueue_panel' );
}

A tiny inline registration

For a quick test or a site snippet you can skip the file and append code to the panel handle. 'after' prints it right after the panel bundle, where the registry exists.

add_action(
	'easy_svg_panel_enqueue',
	function ( $handle ) {
		wp_add_inline_script(
			$handle,
			'console.log( "Icons panel contract level", window.EasySvgPanel.api );',
			'after'
		);
	}
);

How it works

The hook lives at the end of easy_svg_panel_assets() in includes/panel.php, which runs on admin_enqueue_scripts at the default priority 10. In order:

The screen check. Only the hook suffix toplevel_page_easy-svg-icons passes. Every menu entry of the panel is that one page with &tab= added, so all of them share this suffix.
The build check. If build/panel.js is not readable (for example a development checkout that was never built), the function returns and the action does not fire.
wp_enqueue_media(), so the panel can open the media frame.
The panel script easy-svg-panel is enqueued in the footer with the dependencies react, react-dom, react-jsx-runtime and wp-i18n, versioned by the file's modification time.
Script translations for the easy-svg text domain, then wp_localize_script() prints window.EasySvgPanelData (contract level, capabilities, REST root, a wp_rest nonce and a few feature flags).
The style handle easy-svg-panel gets the panel's inline CSS.
do_action( 'easy_svg_panel_enqueue', 'easy-svg-panel' ).

In the browser the panel bundle runs first. Its very first statement installs window.EasySvgPanel, then it mounts React into the div#easy-svg-panel that easy_svg_panel_render() printed. Your script runs after it because of the dependency, so the registry is always there. Whether you register before or after the panel's first render does not matter: the panel reads the registry when it renders and re-renders on every registration.

Who reaches this screen at all is decided by easy_svg_panel_menu_tabs: a user who may see no tab gets no menu, no page and therefore no hook.

Pitfalls

Load your script in the footer. The panel script is a footer script. If yours is a header script that depends on it, WordPress moves the panel script into the head as well. It then runs before div#easy-svg-panel exists, finds no element to mount into, and the whole panel stays empty.
Use the handle you are given. Hard-coding easy-svg-panel works today, but the parameter is what the contract promises.
Register the action early. Add it while plugins load (plugins_loaded or at file load). An add_action() that runs after admin_enqueue_scripts has fired misses the event for that request.
No build, no hook. Without build/panel.js the action never fires, so your add-on silently does nothing on such an install.
Do not re-localize the panel's data. window.EasySvgPanelData belongs to the panel. Put your own values on your own handle.
The readme says "registered", the code enqueues. The script is already in the queue when the hook fires, which is what makes it safe to depend on.

Anything you print with wp_add_inline_script() or wp_localize_script() ends up in the page source for every user who can open the Icons panel. Once a tab grants its own capability, that can include editors or authors. Never put secrets, API keys or other users' data there, and let each REST route your script calls check current_user_can() itself.

Was this page helpful?