React auf einer eigenen WordPress-Seite verwenden

Veröffentlicht: 5. Dezember 2022 – Kommentar hinterlassen

Die Verwendung von React im Block-Editor ist selbsterklärend, da alle Anforderungen bereits gegeben sind. Aber was, wenn du React auf einer individuellen Seite verwenden willst? In meinem Fall wollte ich React auf einer individuellen Einstellungsseite verwenden. Da ich darüber keine Informationen finden konnte, wie das funktioniert, habe ich mir das einmal näher angesehen.

Einstellungsseite einrichten

Wenn du React bereits in anderen Projekten benutzt hast, wird dir die Vorgehensweise bekannt vorkommen. Zuerst musst du das Wurzelelement definieren, worin du deine React-Anwendung renderst. Für eine individuelle Einstellungsseite sieht das beispielsweise so aus:

add_action( 'admin_menu', function() {
	add_submenu_page(
		'options-general.php',
		__( 'My Settings', 'textdomain' ),
		__( 'My Settings', 'textdomain' ),
		'manage_options',
		'my-settings',
		function() {
			return '<div id="react-app"></div>';
		}
	);
} );
Code-Sprache: PHP (php)

Dies erstellt einen Untermenü-Eintrag im „Einstellungen“-Menüpunkt und platziert ein <div id="react-app"></div> als Inhalt.

Assets erstellen

Jetzt müssen wir sicherstellen, dass unsere Assets auf dieser Seite verfügbar werden. Dazu empfehle ich das npm-Paket @wordpress/scripts, um die Assets aus dem React-Code zu erstellen, da es auch automatisch alle Abhängigkeiten generiert. Installiere es über den Befehl npm -i @wordpress/scripts --save in deiner Kommandozeile. Erstelle danach eine JavaScript-Datei unter src/index.js in deinem Projektordner.

Um die Assets nun zu erstellen, führe den Befehl wp-scripts start aus. Es wird nun ein Ordner build mit einer index.js und einer index.asset.php erstellt. Letztere beinhaltet alle Abhängigkeiten.

Assets laden

Jetzt müssen die Assets geladen werden. Dies ist im Grunde identisch dazu, wie es in anderen Plugins und Themes passiert:

add_action( 'admin_enqueue_scripts', function() {
	if ( get_current_screen()->id !== 'appearance_page_my-settings' ) {
		return;
	}
	
	$asset_file = include_once plugin_dir_path( __FILE__ ) . 'build/index.asset.php';
	
	wp_enqueue_script( 'my-handle', plugin_dir_url( __FILE__ ) . 'build/index.js', $asset_file['dependencies'], $asset_file['version'], true );
	wp_set_script_translations( 'my-handle', 'textdomain', plugin_dir_path( __FILE__ ) . 'languages' );
	wp_enqueue_style( 'my-handle', plugin_dir_url( __FILE__ ) . 'build/style-index.css', [], $asset_file['version'] );
} );
Code-Sprache: PHP (php)

Da ich den Code nur im Backend verwende, benutze ich den Hook admin_enqueue_scripts. Wenn du ihn im Frontend verwenden willst, ist wp_enqueue_scripts der richtige Hook. Außerdem habe ich die Ausführung der Funktion auf meine erstellte Einstellungsseite via get_current_screen beschränkt. Diese Funktion ist aber im Frontend nicht verfügbar.

Wie du sehen kannst, verwende ich die generierte Asset-Datei, um deren Daten innerhalb der Funktion wp_enqueue_script auszugeben. Dadurch werden automatisch alle abhängigen Core-Skripte geladen, wodurch React auf der Seite verwendbar wird. Außerdem habe ich direkt die Skript-Übersetzung für den React-Code aktiviert und eine Stildatei eingebunden.

React verwenden

Zuletzt muss noch unser individueller React-Code in das Element gerendert werden, den wir auf der individuellen Einstellungsseite hinzugefügt haben:

import { render } from '@wordpress/element';
import './style.scss';

render(
	<p>Hello, World</p>,
	document.getElementById( 'react-app' )
);
Code-Sprache: JavaScript (javascript)

Dies gibt einen Absatz mit dem Inhalt „Hello, World“ aus.

Bonus: Snackbar verwenden

Während der Entwicklung bemerkte ich, dass die Snackbar-Funktionalität auf meiner individuellen Einstellungsseite nicht funktioniert, um Hinweise unten links anzuzeigen. Nachdem ich mir den Quellcode des Block-Editors angesehen habe, konnte ich den Grund dafür finden: Die Snackbar wird via EditorSnackbars aus dem Paket @wordpress/editor eingebunden. Durch Einfügen selbiger in meinen React-Code konnte ich auch die Snackbar funktional bekommen:

import { EditorSnackbars } from '@wordpress/editor';
import { render } from '@wordpress/element';
import './style.scss';

render(
	<>
		<p>Hello, World</p>

		<EditorSnackbars />
	</>,
	document.getElementById( 'react-app' )
);
Code-Sprache: JavaScript (javascript)