So machen Sie Ihr Plugin mit Gutenberg kompatibel: Teil 2 (Sidebar API)

So machen Sie Ihr Plugin mit Gutenberg kompatibel: Teil 2 (Sidebar API)

So machen Sie Ihr Plugin mit Gutenberg kompatibel: Teil 2 (Sidebar API)
СОДЕРЖАНИЕ
02 июня 2020

Wenn Sie versuchen, Ihr Plugin mit Gutenberg kompatibel zu machen, haben Sie einige Möglichkeiten, die Sie einschlagen können / sollten – je nachdem, was Ihr Plugin tut und wie es dem Benutzer seine Funktionen bietet.


Im ersten Teil dieser Miniserie haben wir uns mit der Block-API von Gutenberg befasst – was die meisten Plugins im Hinblick auf die Gutenberg-Kompatibilität benötigen. Dieses Mal werden wir ein weiteres Stück des Gutenberg-Puzzles untersuchen – Gutenbergs Sidebar-API.

Um sicherzugehen, dass wir uns auf derselben Seite befinden, eine kurze Erklärung:

  • Die Block-API von Gutenberg ist sehr umfangreich und ermöglicht es Ihnen, fast alles als Blöcke zu erstellen, aber manchmal reicht dies nicht aus.
  • Die Sidebar-API hingegen ermöglicht es Plugins, eine Sidebar zu registrieren, in der sie ihre Funktionalität über Blöcke hinaus nutzen können. Die Seitenleiste ähnelt dem Block Inspector.

Machen Sie Ihr Plugin kompatibel mit Gutenberg - Sidebar API

Beispiel: Gutenberg Sidebar API im Einsatz, wie von Yoast SEO demonstriert:

Gutenberg Sidebar API

Wo können Sie die Sidebar-API verwenden??

Wir haben kürzlich an unserem Plugin gearbeitet – WP Produktbewertung – bereit für Gutenberg. WP Product Review verwendete Metafelder zum Hinzufügen von Überprüfungsdaten zum Beitrag. Aus verschiedenen Gründen der Abwärtskompatibilität konnten wir keinen Block erstellen. Daher haben wir die Sidebar-API verwendet.

So haben wir WP Product Review in den Gutenberg-Editor integriert:WP Produktbewertung Gutenberg

Wenn Benutzer angeben, dass es sich bei dem Beitrag um eine Überprüfung mit einem Seitenleisten-Umschalter handelt, können sie über die Seitenleistenoptionen alles an ihrem Überprüfungsfeld konfigurieren.

WP Product Review ist eines der Beispiele, bei denen die Sidebar-API hilfreich sein kann. Ein weiteres gutes Beispiel ist das Lass es fallen Plugin, mit dem Benutzer über die Seitenleiste Bilder von Unsplash und Giphy einfügen können.

In diesem Beitrag werde ich Sie durch den Prozess führen, etwas Ähnliches zu implementieren und Ihr Plugin über die Sidebar-API Gutenberg-kompatibel zu machen.

Meta-Boxen sind standardmäßig für Gutenberg bereit, aber nicht ganz

Beginnen wir mit Meta-Boxen. Nehmen wir ein Plugin, das eine einfache Meta-Box verwendet, um dem Benutzer auf dem Editor-Bildschirm einige Funktionen bereitzustellen.

Dies kann im klassischen Editor wie folgt aussehen:

Meta Box im klassischen Editor

Sie können den folgenden Code verwenden, um eine solche Meta-Box zu erstellen – sie ist auch in der verfügbar Hallo Gutenberg Repository:

/ **
* Registrieren Sie Hallo Gutenbert Meta Box
* /
Funktion hello_gutenberg_add_meta_box () {
add_meta_box (‘hello_gutenberg_meta_box’, __ (‘Hallo Gutenberg Meta Box’, ‘hallo-gutenberg’), ‘hello_gutenberg_metabox_callback’, ‘post’);
}}
add_action (‘add_meta_boxes’, ‘hello_gutenberg_add_meta_box’);

/ **
* Hallo Gutenberg Metabox Callback
* /
Funktion hello_gutenberg_metabox_callback ($ post) {
$ value = get_post_meta ($ post->ID, ‘_hello_gutenberg_field’, true);
?>
<?php _e (‘Wie heißt du?’, ‘Hallo-Gutenberg’) ?>

<?php
}}

/ **
* Speichern Hallo Hallo Gutenberg Metabox
* /
Funktion hello_gutenberg_save_postdata ($ post_id) {
if (array_key_exists (‘hello_gutenberg_field’, $ _POST)) {
update_post_meta ($ post_id, ‘_hello_gutenberg_field’, $ _POST [‘hello_gutenberg_field’]);
}}
}}
add_action (‘save_post’, ‘hello_gutenberg_save_postdata’);

Die hier zu stellende Frage lautet also:

Müssen wir diesen Gutenberg überhaupt kompatibel machen??

An dieser Stelle sollten wir uns fragen, was Gutenberg-kompatibel ist. Wenn Sie beispielsweise genau diese Meta-Box in Gutenberg verwenden, ohne Änderungen daran vorzunehmen, funktioniert sie weiterhin.

Wenn wir jedoch über die Gutenberg-Kompatibilität sprechen, sprechen wir nicht nur über das Plugin, das in der Gutenberg-Umgebung funktioniert, sondern über das Plugin, das * wie Gutenberg * funktioniert..

"Warum?" – Sie würden fragen. Ganz einfach, Benutzer, die WordPress verwenden, nachdem Gutenberg der Standardeditor ist, werden die alten Methoden als kontraintuitiv empfinden. Darüber hinaus erwarten sie für alles im Editor einen Gutenberg-ähnlichen Stil.

Wenn Sie den Benutzern kein natives Gefühl vermitteln, werden sie sicherlich nach Alternativen suchen, die mit Gutenberg besser funktionieren.

Lassen Sie uns zum Schluss unsere Hände mit etwas Code schmutzig machen!

Erste Schritte mit der Sidebar-API

Wir werden damit beginnen, unsere Seitenleiste in Gutenberg so zu codieren, dass sie unser Metafeld enthält. Sie können die weiterhin verwenden Gutenberg Boilerplate Repository als Ausgangspunkt.

Bereiten Sie Ihre Meta-Box für Gutenberg vor

Bevor wir beginnen, müssen wir Gutenberg zunächst mitteilen, dass wir unsere Meta-Box in Gutenberg nicht verwenden werden. Sie können dies tun, indem Sie das Argument __back_compat_meta_box wie folgt an die Funktion add_meta_box übergeben:

/ **
* Registrieren Sie Hallo Gutenberg Metabox
* /
Funktion hello_gutenberg_add_meta_box () {
add_meta_box (‘hello_gutenberg_meta_box’, __ (‘Hallo Gutenberg Meta Box’, ‘hallo-gutenberg’), ‘hello_gutenberg_metabox_callback’, ‘post’, array (
‘__back_compat_meta_box’ => falsch,
));
}}
add_action (‘add_meta_boxes’, ‘hello_gutenberg_add_meta_box’);

Das Gutenberg-Handbuch enthält weitere Informationen zum Portieren von PHP-Meta-Boxen nach Gutenberg (Hier).

Dadurch wird sichergestellt, dass unsere alten PHP-Meta-Boxen nicht mehr in Gutenberg angezeigt werden. Jetzt müssen wir auch unser Meta-Feld für Gutenberg vorbereiten, indem wir es der WordPress-REST-API hinzufügen. Sie können den folgenden Code hinzufügen, um das Metafeld bei der REST-API zu registrieren:

/ **
* Registrieren Sie Hello Gutenberg Meta Field to Rest API
* /
Funktion hello_gutenberg_register_meta () {
register_meta (
‘post’, ‘_hello_gutenberg_field’, array (
‘Typ’ => ‘string’,
‘single’ => wahr,
‘show_in_rest’ => wahr,
)
);
}}
add_action (‘init’, ‘hello_gutenberg_register_meta’);

Dies fügt das _hello_gutenberg_field zum hinzu Meta Objekt in der REST-API.

Diese Funktion übernimmt nur die Anzeige unseres Werts in der REST-API. Jetzt müssen wir auch eine Methode hinzufügen, um unser Metafeld mithilfe der REST-API zu aktualisieren.

Der folgende Code fügt unsere benutzerdefinierte Route zur WordPress REST-API hinzu / hallo-gutenberg / v1 / update-meta /::

/ **
* Registrieren Sie Hello Gutenberg Metabox to Rest API
* /
Funktion hello_gutenberg_api_posts_meta_field () {
register_rest_route (
‘hallo-gutenberg / v1’, ‘/ update-meta’, array (
‘Methoden’ => ‘POST’,
‘Rückruf’ => ‘hello_gutenberg_update_callback’,
‘args’ => Array (
‘id’ => Array (
‘sanitize_callback’ => “Absinth”,
),
),
)
);
}}
add_action (‘rest_api_init’, ‘hello_gutenberg_api_posts_meta_field’);

/ **
* Hallo Gutenberg REST API Callback für Gutenberg
* /
Funktion hello_gutenberg_update_callback ($ data) {
return update_post_meta ($ data [‘id’], $ data [‘key’], $ data [‘value’]);
}}

Diese REST-API-Route wird verwendet, um unser Metafeld in der Gutenberg-Seitenleiste zu ändern. Sie können mehr über die WordPress REST API und deren Vorgehensweise erfahren Registrieren Sie von hier aus benutzerdefinierte Routen.

Wenn Sie wissen möchten, was WordPress REST API ist und wie Sie beginnen, können Sie auch unseren Blog-Beitrag lesen: WordPress REST API: Was es ist und wie Sie damit beginnen.

Gutenberg einen Seitenleistenblock hinzufügen

Beginnen wir mit dem Sidebar-Code von Gutenberg Boilerplate::

/ **
* Interne Blockbibliotheken
* /
const {__} = wp.i18n;

const {Fragment} = wp.element;

const {
PluginSidebar,
PluginSidebarMoreMenuItem,
} = wp.editPost;

const {registerPlugin} = wp.plugins;

const Component = () => (

{__ (‘Gutenberg Boilerplate’)}

{ __( ‘Hallo Welt!’ ) }

);

registerPlugin (‘gutenberg-boilerplate’, {
Symbol: ‘Admin-Site’,
Rendern: Komponente,
});

Dadurch wird eine sehr einfache Seitenleiste in den Gutenberg-Editor eingefügt. Wir werden dies als Ausgangspunkt nehmen und unser Projekt darauf aufbauen.

Der Beispielcode stammt aus unserem Gutenberg Boilerplate-Repository. Daher müssen wir alle Vorkommen von ersetzen "Gutenberg Boilerplate" mit "Hallo Gutenberg".

Verwendete Komponenten

Während unsere Seitenleiste bereits viele Komponenten importiert, werden wir mehr benötigen. Sie können den oberen Teil des Codes durch Folgendes ersetzen:

/ **
* Interne Blockbibliotheken
* /

const {__} = wp.i18n;

const {
PluginSidebar,
PluginSidebarMoreMenuItem
} = wp.editPost;

const {
PanelBody,
TextControl
} = wp.components;

const {
Komponente,
Fragment
} = wp.element;

const {withSelect} = wp.data;

const {registerPlugin} = wp.plugins;

Lassen Sie uns schnell alle von uns importierten Komponenten kennenlernen.

  1. Wie im vorherigen Artikel besprochen, ist die __ __ Komponente wird verwendet, um unseren Text übersetzbar zu machen.
  2. Das PluginSidebar Komponente wird verwendet, um unsere Seitenleiste zu Gutenberg hinzuzufügen.
  3. PluginSidebarMoreMenuItem wird verwendet, um dem Gutenberg-Menü eine Schaltfläche hinzuzufügen, mit der die Sichtbarkeit der Seitenleiste umgeschaltet wird.
  4. Das PanelBody Komponente wird verwendet, um ein Panel zu unserer Seitenleiste hinzuzufügen.
  5. TextControl wird für unser Eingabefeld verwendet.
  6. Danach haben wir die importiert Komponente und Fragment Komponenten. Beide sind React-Komponenten, die wir in unserer Seitenleiste verwenden.
    • Die Fragment-Komponente wird verwendet, um eine Liste von untergeordneten Elementen zu gruppieren, ohne dem DOM zusätzliche Knoten hinzuzufügen. Wir müssen die Fragment-Komponente in unserem Code verwenden, da JSX nicht zulässt, dass mehr als ein übergeordneter Knoten vorhanden ist.
  7. withSelect ist eine Komponente höherer Ordnung. Um zu erfahren, was Komponenten höherer Ordnung sind, empfehle ich Ihnen, diese zu lesen diese Dokumentation.
  8. Und schließlich importieren wir registerPlugin, Dies ähnelt dem RegisterBlockType, den wir im vorherigen Artikel verwendet haben. Anstatt einen Block zu registrieren, registriert registerPlugin Ihr Plugin.

Hinzufügen von Steuerelementen

Bisher ist unsere Seitenleiste nur eine Komponentenfunktion. Da wir jedoch die Lebenszyklusmethoden von React verwenden, werden wir sie wie folgt in eine React-Komponente umwandeln:

Klasse Hello_Gutenberg erweitert Component {
render () {
Rückkehr (

{__ (‘Hallo Gutenberg’)}

{ __( ‘Hallo Welt!’ ) }

)
}}
}}

registerPlugin (‘Hallo-Gutenberg’, {
Symbol: ‘Admin-Site’,
Rendern: Hello_Gutenberg,
});

Dadurch sollte Ihre Seitenleiste mit einfachem Text arbeiten.

Fügen wir nun unser Feld zur Seitenleiste hinzu. Dadurch sollte unsere Komponente folgendermaßen aussehen:

Klasse Hello_Gutenberg erweitert Component {
render () {
Rückkehr (

{__ (‘Hallo Gutenberg’)}

)
}}
}}

Zunächst haben wir einen Anfangszustand definiert, der im Grunde der Schlüssel und der Wert unseres Metafelds ist. Danach verwenden wir apiFetch, um die Daten aus unserem aktuellen Beitrag abzurufen.

Wir übergeben die ID unseres aktuellen Beitrags mit der Variablen $ {this.props.postId}. Wir werden später auf diesen Punkt zurückkommen.

Sobald die Daten abgerufen wurden, aktualisieren wir unseren Status mit dem Wert aus unserer REST-API.

Kehren wir nun zur Variablen postId zurück. Derzeit kennen wir die ID unseres aktuellen Beitrags nicht. Daher verwenden wir die withSelect-Komponente höherer Ordnung wie folgt:

const HOC = withSelect ((select) => {
const {getCurrentPostId} = select (‘core / editor’);
Rückkehr {
postId: getCurrentPostId (),
};
}) (Hello_Gutenberg);

registerPlugin (‘Hallo-Gutenberg’, {
Symbol: ‘Admin-Site’,
Rendern: HOC,
});

Dadurch wird die ID unseres aktuellen Beitrags als postId-Variable übergeben. Jetzt können Sie einen älteren Beitrag ausführen, und in unserer Gutenberg-Seitenleiste wird der Wert Ihres Metafelds angezeigt.

Aktualisieren Sie den Metawert

Jetzt müssen wir zulassen, dass unsere Seitenleiste auch den Metawert aktualisiert. Ähnlich wie beim Abrufen der Details werden wir die verwenden wp.apiRequest Nützlichkeit.

Jedes Mal, wenn sich der Wert unseres Status ändert, werden wir ihn mit der REST-API aktualisieren. Dazu müssen wir unserem TextControl zunächst ein onChange-Ereignis hinzufügen:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector