easy_svg_panel_enqueue

Action · Easy SVG · Status: Stabil

easy_svg_panel_enqueue ist der Moment, in dem du dein eigenes JavaScript und CSS ins Icons-Panel lädst. Die Action läuft nur auf der Icons-Seite, direkt nachdem Easy SVG sein eigenes Panel-Script eingereiht hat, und gibt dir dessen Handle mit. Trag das Handle als Abhängigkeit deines Scripts ein, dann läuft deins nach dem Panel, wenn window.EasySvgPanel schon existiert.

Verwendung

do_action( 'easy_svg_panel_enqueue', string $handle );

add_action( 'easy_svg_panel_enqueue', 'myaddon_enqueue_panel' );

Wann du es brauchst

• Du lieferst ein Script aus, das window.EasySvgPanel.registerTab() oder window.EasySvgPanel.registerCollections() aufruft.
• Dein Tab braucht ein Stylesheet, Übersetzungen (wp_set_script_translations()) oder ein paar Werte aus PHP (wp_add_inline_script()), und zwar nur auf der Icons-Seite.
• Du willst den Bildschirm nicht selbst prüfen. Die Action beantwortet schon die Frage „Ist das das Icons-Panel, und ist das Panel-Bundle da?“

Wann nicht:

• Für Assets auf anderen Admin-Seiten. Dafür nimmst du admin_enqueue_scripts und prüfst dort das Hook-Suffix.
• Als Rechteprüfung. Dass die Action läuft, heißt nur, dass der aktuelle Benutzer mindestens einen Panel-Tab sehen darf. Über deine eigenen REST-Routen sagt das nichts.
• Im Frontend, im Block-Editor oder bei REST-Anfragen. Dort wird die Action nie ausgelöst.

Parameter

Rückgabewert

Beispiele

Ein Bundle ins Panel laden

Der kleinste sinnvolle Callback: Dein Script hängt vom Panel-Handle ab, lädt im Footer und bekommt eine Version fürs 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, Übersetzungen und Daten zusammen

Ein echtes Add-on braucht meist mehr als eine Datei. Alles unten hängt an deinen eigenen Handles, die Daten des Panels bleiben unangetastet.

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 aus __() in panel.js, aus languages/myaddon-<locale>-<md5>.json.
	wp_set_script_translations( 'myaddon-panel', 'myaddon', $dir . 'languages' );

	// Werte, die der Tab braucht, als JSON, ausgegeben bevor das Script läuft.
	wp_add_inline_script(
		'myaddon-panel',
		'window.myaddonPanel = ' . wp_json_encode(
			array(
				'route'   => 'myaddon/v1/report',
				'maxRows' => 50,
			)
		) . ';',
		'before'
	);

	// Das Style-Handle des Panels als Abhängigkeit: Deine Regeln kommen nach seinen.
	wp_enqueue_style(
		'myaddon-panel',
		plugins_url( 'assets/panel.css', __FILE__ ),
		array( $handle ),
		(string) filemtime( $dir . 'assets/panel.css' )
	);
}

Nur einhängen, wenn das Panel neu genug ist

Häng die Action erst ein, wenn alle Plugins geladen sind, und nur wenn der Panel-Vertrag hat, was dein Script nutzt. Stufe 2 brachte area und icon für Tabs, Stufe 3 brachte 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' );
}

Eine winzige Inline-Registrierung

Für einen schnellen Test oder ein Snippet kannst du die Datei weglassen und Code an das Panel-Handle hängen. 'after' gibt ihn direkt nach dem Panel-Bundle aus, wo die Registry schon existiert.

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

So funktioniert es

Die Action sitzt am Ende von easy_svg_panel_assets() in includes/panel.php, das an admin_enqueue_scripts mit der Standardpriorität 10 hängt. Der Reihe nach:

1. Die Seitenprüfung. Nur das Hook-Suffix toplevel_page_easy-svg-icons kommt durch. Jeder Menüeintrag des Panels ist genau diese eine Seite mit angehängtem &tab=, alle teilen also dieses Suffix.
2. Die Build-Prüfung. Ist build/panel.js nicht lesbar (etwa bei einem Entwicklungs-Checkout, der nie gebaut wurde), kehrt die Funktion zurück und die Action läuft nicht.
3. wp_enqueue_media(), damit das Panel den Medien-Dialog öffnen kann.
4. Das Panel-Script easy-svg-panel wird im Footer eingereiht, mit den Abhängigkeiten react, react-dom, react-jsx-runtime und wp-i18n und der Änderungszeit der Datei als Version.
5. Script-Übersetzungen für die Textdomain easy-svg, danach gibt wp_localize_script() window.EasySvgPanelData aus (Vertragsstufe, Berechtigungen, REST-Root, eine wp_rest-Nonce und ein paar Feature-Schalter).
6. Das Style-Handle easy-svg-panel bekommt das Inline-CSS des Panels.
7. do_action( 'easy_svg_panel_enqueue', 'easy-svg-panel' ).

Im Browser läuft zuerst das Panel-Bundle. Seine allererste Anweisung legt window.EasySvgPanel an, danach hängt es React in das div#easy-svg-panel ein, das easy_svg_panel_render() ausgegeben hat. Dein Script läuft wegen der Abhängigkeit danach, die Registry ist also immer da. Ob du vor oder nach dem ersten Rendern des Panels registrierst, ist egal: Das Panel liest die Registry beim Rendern und rendert bei jeder Registrierung neu.

Wer diese Seite überhaupt erreicht, entscheidet easy_svg_panel_menu_tabs: Ein Benutzer, der keinen Tab sehen darf, bekommt kein Menü, keine Seite und damit auch keine Action.

Stolperfallen

• Lade dein Script im Footer. Das Panel-Script ist ein Footer-Script. Ist deins ein Header-Script, das davon abhängt, zieht WordPress das Panel-Script mit in den Head. Dort läuft es, bevor div#easy-svg-panel existiert, findet kein Element zum Einhängen, und das ganze Panel bleibt leer.
• Nimm das Handle, das du bekommst. easy-svg-panel fest einzutragen klappt heute, versprochen ist aber der Parameter.
• Registriere die Action früh. Häng sie ein, während die Plugins laden (plugins_loaded oder direkt beim Laden der Datei). Ein add_action(), das erst nach admin_enqueue_scripts läuft, verpasst das Ereignis für diese Anfrage.
• Kein Build, keine Action. Ohne build/panel.js wird die Action nie ausgelöst, dein Add-on tut auf so einer Installation still gar nichts.
• Lokalisiere die Panel-Daten nicht neu. window.EasySvgPanelData gehört dem Panel. Leg deine eigenen Werte an dein eigenes Handle.
• Die readme sagt „registriert“, der Code reiht ein. Das Script steht schon in der Warteschlange, wenn die Action läuft, und genau deshalb kannst du dich als Abhängigkeit darauf verlassen.

Siehe auch

• easy_svg_panel_menu_tabs
• window.EasySvgPanel
• window.EasySvgPanel.registerTab()
• window.EasySvgPanel.registerCollections()
• window.EasySvgPanel.api
• EASY_SVG_PANEL_API
• window.EasySvgPanelData
• Ein Add-on für das Icons-Panel bauen