20.5.4. Nutzung der REST API mit dem Data-Modul

Eine weitere Möglichkeit ist, die REST-API mit dem neuen Data-Modul zu nutzen. Es ist Teil von WordPress 5.0 und im Zuge des neuen Editors (getauft „Gutenberg“) eingeführt worden.

Allerdings handelt es sich dabei „nur“ um eine Speicherverwaltung, die erst einmal nicht direkt zur Kommunikation mit der REST-API genutzt werden kann. Trotzdem lässt es sich in den eigenen Plugins bzw. Gutenberg-Blöcken nutzen, wie wir dann in den nächsten Kapiteln sehen werden.

An dieser Stelle möchte ich daher beschreiben, was das Data-Modul ist, damit Sie ein Grundverständnis davon haben, wie es funktioniert.

Modul oder Script-Abhängigkeit

Das @wordpress/data Modul kann mittels npm installiert werden:

npm install @wordpress/data --save

Es setzt allerdings eine ES2015+ JavaScript-Umgebung voraus. Wer das nicht gewährleisten kann, benötigt einen Compiler wie zum Beispiel BabelJS der den Code so umsetzt, dass auch ältere Browser ihn verstehen können.

Oder aber Sie nutzen das Paket im Browser im WordPress-Dashboard als Abhängigkeit:

<?php
wp_register_script(
	'ihr-script',
	plugin_dir_url( __FILE__ ) . 'js/backend.js',
	array( 'wp-data' ),
	filemtime( plugin_dir_path( __FILE__ ) . 'js/backend.js' )
);
?>

Im Script backend.js können Sie dann darauf zugreifen:

var data = wp.data;

Redux-Ähnlichkeit

Das Data-Modul funktioniert im inneren nach den selben Prinzipien wie ReduxJS. Damit ist es möglich, den kompletten Zustand einer App im Speicher (dem so genannten „Store“) zu halten.

Um den Zustand der App zu ändern, können (oder müssen) bestimmte Aktionen an die Store geschickt werden. Nur über diese Aktionen kann der Store bzw. Der Zustand geändert werden. Die Aktionen im inneren des Moduls entscheiden dann, wie die Veränderung genau aussieht. Die Funktion, die diese Änderungen vornimmt, wird im englischen auch Reducer genannt.

Aufbau einer Data-Store

Zum besseren Verständnis hier das offizielle Beispiel aus der Dokumentation von ReduxJS im ES.Next-Format:

You’re not allowed to see this content. Please log in first.