Verwendung des WordPress-Blockeditors (Gutenberg) mit der REST-API
In meinem vorherigen Artikel habe ich darüber gesprochen, wie man Beiträge und benutzerdefinierte Beitragstypen innerhalb von Gutenberg durchläuft. In diesem Beitrag spreche ich über das Empfangen und Verwenden benutzerdefinierter Daten in Gutenberg von WordPress-REST-API-Endpunkten.
In diesem Beispiel gehen wir wie folgt vor:
REST API ist nicht immer der richtige Weg.
*Wir verwenden get_optiondie REST-API nur als Beispiel. Wenn Sie nur Zugriff auf eine Option benötigen und nicht beabsichtigen, ihren Status zu ändern, können Sie stattdessen verwenden wp_localize_script, um die Optionen an JavaScript zu übergeben.
Wenn Sie auf eine Option zugreifen UND ihren Zustand ändern möchten, würde ich empfehlen, meinen Leitfaden zum Speichern von Einstellungen und Daten in der Optionstabelle mit Gutenberg unter Verwendung der Einstellungs-API zu lesen .*
Erstellen eines REST-API-Endpunkts
Wir werden einen einfachen REST-API-Endpunkt erstellen, der den Wert einer WordPress-Option (mithilfe von get_option) zurückgibt.
function wcltd_get_option() {
register_rest_route(
'wcltd/wholesome-plugin/v1',
'/get/option/(?P<option>([A-Za-z0-9_])+)/',
array(
'callback' => function ($request) {
$option = isset( $request['option'] )? esc_attr( $request['option'] ): null;
$value = get_option( $option, '' );
return $value;
},
'methods' => 'GET',) );
}
add_action( 'rest_api_init', 'wcltd_get_option' );
Nachdem Sie diesen Endpunkt erstellt haben, müssen Sie Ihre Permalinksflush_rewrite_rules() erneut speichern, damit sie aktiviert werden. Beachten Sie, dass es bessere Möglichkeiten gibt, dies zu tun (z register_activation_hook.
Wenn wir nun die URL /wp-json/wcltd/wholesome-plugin/v1/get/option/test/(natürlich nach Ihrer eigenen Domain) an unseren Browser übergeben, wird ein Wert zurückgegeben, der entweder ein leerer String ''oder der Wert der Option ist, falls gesetzt.
Unser Endpunkt, der einen leeren String zurückgibt Unser Endpunkt, der einen leeren String zurückgibt
Beachten Sie, dass ich die Zeilen 12-14 absichtlich auskommentiert habe, was sicherstellen würde, dass nur jemand mit edit_postRechten den Code ausführen kann, wenn er darin gelassen wird. Allerdings können wir den Code mit diesem auskommentierten Code nicht in unserem Browser testen.
Versuchen Sie, Code hinzuzufügen, um Ihrer Option einen Wert zu geben, und sehen Sie, was sie zurückgibt. Wenn ich zum Beispiel den folgenden Code vor meiner Funktion ausführen würde:
update_option( 'wcltd_example_option', 'Hello World' );
Wenn ich jetzt den Endpunkt /wp-json/wcltd/wholesome-plugin/v1/get/option/wcltd_example_option/erreiche, erhalte ich die folgende Ausgabe:
Unser Endpunkt, der einige Daten zurückgibt.
Registrieren eines Datenspeichers
Da wir nun einen REST-API-Endpunkt haben, können wir einen Datenspeicher mit registerStore.
registerStorebietet einen Redux-ähnlichen Datenspeicher, der es uns ermöglicht, den Status unserer gesamten Anwendung zu verwalten. Es unterstützt auch Resolver, die es uns ermöglichen, den Status aus einer externen Quelle (z. B. unserer REST-API) zu füllen.
Weitere Informationen zum REACT -Zustand finden Sie in der offiziellen Dokumentation.
So können wir einen Speicher erstellen (wie store.jsin unserem Projekt, der es uns ermöglicht, Daten von unserem REST-API-Endpunkt abzurufen.
Abhängigkeiten
Wir müssen apiFetchund registerStoreaus unseren WordPress-Abhängigkeiten extrahieren.
import apiFetch from '@wordpress/api-fetch';
import { registerStore } from '@wordpress/data';
Selektoren
Als erstes wollen wir eine Auswahlfunktion in einem Objekt namens „Selektoren“ erstellen.
Alles, was dies tut, ist, die ‚Option‘ aus dem Zustand zu extrahieren und sie zurückzugeben.
const selectors = {
getOption( state, optionKey) {
const { option } = state;
return option;
},
};
Resolver
Der Resolver ist ein Nebeneffekt des Selektors und leistet etwas mehr.
Hier erstellen wir unsere Funktion, die unseren optionKey übernimmt und einen REST-API-Endpunkt an unsere Aktionen übergibt (die wir als Nächstes definieren werden).
Dies setzt dann die Option mit einem weiteren Aufruf zu unseren Aktionen.
const resolvers = {
*getOption( optionKey) {
const option = yield actions.getOption(
'/wcltd/wholesome-plugin/v1/get/option/' + optionKey + '/',
);
return actions.setOption( option );
},
};
Aktionen
Die zwei Funktionen in einem Objekt namens actions, das wir zuvor aufgerufen haben, werden hier definiert.
Sie geben an, mit welchem Regler oder Reduzierer wir den Wert einstellen oder abrufen werden.
const actions = {
setOption( option) {
return {
type: 'SET_OPTION',
option,
};
},
getOption( path) {
return {
type: 'GET_OPTION',
path,
};
},
};
Kontrollen
In unseren Steuerelementen haben wir GET_OPTIONdie Verwendung des API-Aufrufs apiFetchund den Pfad, den wir zuvor definiert haben.
const controls = {
GET_OPTION( action) {
return apiFetch( { path: action.path } );
},
};
Reduzierer
In unserer Reducer-Funktion haben wir, SET_OPTIONdie unseren Wert nimmt (in diesem Fall option, und setzt seinen Zustand.
function reducer( state = { option: '' }, action) {
switch (action.type) {
case 'SET_OPTION':
return {
...state,
option: action.option,
};
}
return state;
};
Registrierung des Shops
Schließlich registrieren wir einen Speicher, geben ihm einen Namensraum, damit wir darauf zugreifen können, und übergeben ein Objekt aller oben genannten Objekte und Funktionen.
const store = registerStore(
'wcltd/wholesome-plugin/data',
{
actions,
controls,
reducer,
resolvers,
selectors,
}
);
export default store;
Standardspeicher exportieren;
Verwenden der Daten mit einem Block
Lassen Sie uns den vom Skript erstellten Block erweitern, über den @wordpress/create-blockich zuvor geschrieben habe, damit wir eine Verbindung zu einem REST-API-Endpunkt herstellen können.
Erstellen Sie eine Datei im /srcaufgerufenen Ordner store.jsund kopieren Sie den gesamten obigen Code hinein:
import apiFetch from '@wordpress/api-fetch';
import { registerStore } from '@wordpress/data';
const selectors = {
getOption( state, optionKey) {
const { option } = state;
return option;
},
};
const resolvers = {
*getOption( optionKey) {
const option = yield actions.getOption(
'/wcltd/wholesome-plugin/v1/get/option/' + optionKey + '/',
);
return actions.setOption( option );
},
};
const actions = {
setOption( option) {
return {
type: 'SET_OPTION',
option,
};
},
getOption( path) {
return {
type: 'GET_OPTION',
path,
};
},
};
const controls = {
GET_OPTION( action) {
return apiFetch( { path: action.path } );
},
};
function reducer( state = { option: '' }, action) {
switch (action.type) {
case 'SET_OPTION':
return {
...state,
option: action.option,
};
}
return state;
};
const store = registerStore(
'wcltd/wholesome-plugin/data',
{
actions,
controls,
reducer,
resolvers,
selectors,
}
);
export default store;
Bearbeiten Sie nun unsere /src/index.jsDatei, um die store.jsDatei einzuschließen:
import store from './store';
import Edit from './edit';
import save from './save';
Wir müssen auch sicherstellen, dass wir withSelectam Anfang unserer Datei Folgendes eingefügt haben:
import { withSelect } from '@wordpress/data';
Lassen Sie uns dann unser Bearbeitungsmodul mit umschließen withSelect, um den REST-API-Aufruf an unsere Option zu senden, etwa so:
edit: withSelect( (select) => {
const option = select( 'wcltd/wholesome-plugin/data' ).getOption( 'wcltd_example_option' );
return {
option,
};
} )( Edit ),
optionJetzt können wir wie folgt auf unsere Requisiten zugreifen edit.js:
export default function Edit( { className, option }) {
return (<p className={ className }>
{ option }
</p>
);
}
Sehen wir uns zum Schluss unseren Block im Editor an und sehen, was wir bekommen:
Die Ausgabe im Blockeditor. Die Ausgabe im Blockeditor.