So fügen Sie Post-Meta-Felder zur Seitenleiste von Gutenberg-Dokumenten hinzu

In diesem Beitrag sehen wir uns an, wie man benutzerdefinierte Post-Meta-Einstellungen zur Gutenberg-Seitenleiste auf der Registerkarte „Dokument” hinzufügt, anstatt sich auf das Hinzufügen von Meta-Boxen auf traditionelle (und ehrlich gesagt viel manuellere) Weise zu verlassen.

Wenn Sie schon eine Weile mit WordPress gearbeitet haben, bevor es Gutenberg gab, sind Sie wahrscheinlich mit dem Hinzufügen von benutzerdefiniertem Post-Meta mit [add_meta_box](https://developer.wordpress.org/reference/functions/add_meta_box/)(). Mit dieser Funktion können Sie beim Bearbeiten eines Beitrags entweder unten oder an der Seite eine Metabox mit Ihren benutzerdefinierten Inhalten hinzufügen. Diese Methode funktioniert immer noch, auch im Gutenberg-Editor!

Im Vergleich zum Rest des Inhalts der Gutenberg-Seitenleiste sieht es jedoch ein wenig anders aus. Und ganz zu schweigen davon, dass Sie manuell Eingabecode (Kontrollkästchen, Texteingaben usw.) mit PHP schreiben und zusätzlichen Code schreiben müssten, um sie zu speichern, wenn der Beitrag aktualisiert wird. Und wenn Sie möchten, dass Ihre Post-Meta-Einstellungen dynamisch sind (sagen wir, Sie wollten ein Feld ausblenden, es sei denn, ein anderes Feld wurde aktiviert), dann müssten Sie ein Skript manuell in die Warteschlange stellen und ja, Sie haben es erraten, die dynamische Logik manuell handhaben des Versteckens und Zeigens. Das alles ist jetzt veraltet und wird mit dem neuen Javascript-basierten Gutenberg-Editor vereinfacht. Wir können ziemlich einfach so etwas machen:

Der Prozess

Der Ablauf ist wie folgt:

• Wir registrieren jeden benutzerdefinierten Post-Meta-Schlüssel, den wir in PHP hinzufügen möchten, mit [register_post_meta](https://developer.wordpress.org/reference/functions/register_post_meta/)()und stellen ihn in der WP-REST-API als verfügbar ein. Dies ist ein notwendiger Schritt, um das Post-Meta im Gutenberg-Editor verfügbar zu machen.
• Wir erstellen eine Javascript-Datei und stellen sie speziell für den Editor (nur) in die Warteschlange.
• Innerhalb der Javascript-Datei registrieren wir ein Plugin [registerPlugin](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-plugins/#registerPlugin)(), das es anweist, unsere Komponente zu rendern.
• Innerhalb dieser Komponente können wir alles ausgeben, was wir brauchen. Wir können die integrierten Komponenten von WordPress verwenden, um verschiedene Arten von Einstellungen einfach zu rendern. Und mit dem WordPress-Datenpaket können wir die Post-Metawerte sofort abrufen und aktualisieren, wenn sie geändert werden.

Lassen Sie uns gleich loslegen, beginnend mit dem PHP-Teil; Registrierung des Post-Meta.

Registrierung von Post-Meta

Für jedes Post-Meta, das Sie zur Gutenberg-Seitenleiste hinzufügen möchten, müssen Sie sich mit registrieren [register_post_meta](https://developer.wordpress.org/reference/functions/register_post_meta/)(). Dies ist notwendig, um sie über die WP REST API (die Gutenberg verwendet) und damit in unserem Javascript verfügbar zu machen.

Fügen Sie in der Datei Ihres Themas functions.phpoder einer anderen aktiven PHP-Datei eine Funktion hinzu, die an den initHook „ ” angeschlossen ist. Innerhalb der Funktion wiederholen Sie a register_post_meta()für jedes benutzerdefinierte Post-Meta, das Sie hinzufügen möchten. Die Funktion benötigt drei Argumente; Der erste Parameter ist der Beitragstyp, für den Sie das Meta registrieren möchten (als leerer String für alle Beitragstypen festgelegt). Der zweite Parameter ist der Name des Metaschlüssels für Ihr Meta. Und die dritte ist eine Reihe von Einstellungen. Hier definieren wir, dass dieses Meta in der WP-REST-API zugänglich sein soll, indem wir „ show_in_rest” auf „true” setzen.

Nehmen wir zum Beispiel an, ich möchte einen Schalter zum Ein- und Ausschalten und eine Texteingabe zur Seitenleiste des Editors hinzufügen. Das heißt, ich fordere register_post_meta()jeweils einen booleschen und einen Zeichenfolgenwerttyp. Ich möchte diese Post-Meta auch auf den Post-Typ „Post” beschränken. Das würde in etwa so aussehen:

Jetzt habe ich einen Post-Meta-Schlüssel _my_custom_boolund _my_custom_textfertig und in Gutenberg verfügbar. Ich empfehle Ihnen, sie in etwas umzubenennen, das für Sie sinnvoll ist.

Registrierung unseres Javascript-Plugins

Für unseren nächsten Schritt fügen wir eine Javascript-Datei hinzu und stellen sicher, dass sie mit PHP in die Warteschlange gestellt wird.

Denken Sie daran, dass ich den Javascript-Code in ES6-Syntax schreibe. Das bedeutet, dass ich eine Webpack/Babel-Konfiguration eingerichtet habe, um meine Datei in eine separate lesbare Javascript-Datei für den Browser zu kompilieren.

Ich habe eine Anleitung zum Einrichten, wenn Sie sich nicht sicher sind, wie das funktioniert:

Wir müssen sicherstellen, dass WordPress unser Skript im Editor lädt. Wir tun dies, indem wir eine Funktion anhängen enqueue_block_editor_assetsund aufrufen [wp_enqueue_script](https://developer.wordpress.org/reference/functions/wp_enqueue_script/)():

add_action( 'enqueue_block_editor_assets', function() {
    wp_enqueue_script(
        'awp-custom-meta-plugin', 
        get_template_directory_uri(). '/assets/js/gutenberg/plugin-awp-custom-postmeta.js', 
        [ 'wp-edit-post' ],
        false,
        false
    );
} );

Ich gehe davon aus, dass Sie mit dem Einreihen von Skripts in die Warteschlange vertraut sind und die Werte durch Ihre eigenen ersetzen können. Als zweiten Parameter gebe ich den Pfad zur Build-Datei an (nicht die Quelldatei). Damit unser Skript nicht zu früh geladen wird, setze ich ‘ wp-edit-post‘ als Abhängigkeit. Das ist das Paket, das wir brauchen, um Post-Meta zu handhaben.

Kommen wir nun zum Javascript-Teil.

Zuerst müssen wir [registerPlugin](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-plugins/#registerPlugin)()unsere Komponente zum Rendern des Panels in der Seitenleiste des Gutenberg-Dokuments aufrufen und weitergeben. Diese Funktion ist im wp.pluginsPaket verfügbar, daher destrukturiere ich sie oben. Ich mag es, meine Dateien ordentlich zu halten, also erstelle ich eine weitere Datei; „awp-custom-postmeta-fields.js”, um die gerenderte Komponente zu enthalten und diese zu importieren.

Schreiben unserer Komponente

Beginnen wir damit, eine grundlegende Komponente zu erstellen, die nichts anderes tut, als nur an der richtigen Stelle zu sitzen, damit wir das zuerst aus dem Weg räumen. Um eine Komponente in der Dokumenten-Seitenleiste von Gutenberg zu rendern, verwenden wir die [PluginDocumentSettingPanel](https://developer.wordpress.org/block-editor/reference-guides/slotfills/plugin-document-setting-panel/)Komponente. Wir können Attribute wie a title, iconund setzen className. Und alles, was sich darin befindet, wird in der Seitenleiste des Dokuments gerendert. Im Moment gebe ich nur einen Text „Hallo” aus.

Mit dem obigen Code (kompiliert) erhalten wir Folgendes:

Genial. Wir möchten jedoch einige Eingaben hinzufügen. Aber um diese Eingaben mit unserem benutzerdefinierten Post-Meta zu verbinden, müssen wir unsere Komponente mit den Komponenten höherer Ordnung zusammenstellen withSelect(um die Post-Meta-Werte abzurufen) und withDispatch(um die Post-Meta-Werte zu aktualisieren). Es mag etwas komplex erscheinen, wenn Sie noch nie mit Komponenten höherer Ordnung gearbeitet haben, aber sobald Sie sich damit beschäftigt haben, ist es ziemlich einfach.

Wir müssen zuerst unsere exportAussage ändern. Anstatt nur unsere Komponente allein zurückzugeben, müssen wir sie mit withSelectund zusammensetzen withDispatch, beides im wp.dataPaket.

Im Inneren withSelect()haben wir Zugriff auf die leistungsstarke select()Funktion. Mit select()können wir die Metawerte des aktuellen Beitrags abrufen. Wir können auch den aktuellen Beitragstyp abrufen, wenn wir möchten. Wie ich bereits bei der Registrierung von Post-Meta erwähnt habe, können wir die Post-Metas auf einen bestimmten Post-Typ beschränken. Wenn wir den Beitragstyp des aktuellen Beitrags abrufen, können wir in unserer Komponente sicherstellen, dass unser Code nur gerendert wird, wenn wir uns beim richtigen Beitragstyp befinden. Dazu später mehr.

In withDispatch()können wir Funktionen definieren, die wir in unserer Komponente ausführen können. Wir erstellen eine Funktion, mit dispatch()der das Post-Meta aktualisiert wird.

Ändern wir die exportAussage wie folgt:

Wir müssen diese auch aus den folgenden Paketen oben in der Datei destrukturieren:

const { compose } = wp.compose;
const { withSelect, withDispatch } = wp.data;

Damit hat unsere AWP_Custom_PluginKomponente Zugriff auf drei neue Props; postMetadie alle Post-Metawerte zum aktuellen Post enthält; postTypedie den Beitragstyp des aktuellen Beitrags enthält; und schließlich die Funktion, die setPostMeta()wir erstellt withDispatch()haben, um das Meta des Beitrags zu aktualisieren.

In unserer Komponentendefinition können wir also diese drei neuen Requisiten destrukturieren;

Und jetzt können wir unserem Rendering einige Eingaben hinzufügen, um sicherzustellen, dass sie den aktuellen Wert anzeigen und dass sie das Post-Meta im On-Change-Ereignis aktualisieren. Ich habe einen booleschen Wert und einen String registriert, also füge ich als Beispiel einen ToggleControlfür einen Schalter und einen einfachen TextControlfür eine Texteingabe hinzu.

Wenn Sie sich bezüglich der integrierten Komponenten in WordPress nicht sicher sind, habe ich ein völlig kostenloses E-Book, das so ziemlich die meisten der in Gutenberg verfügbaren Komponenten abdeckt – einschließlich der Requisiten, die wir für jede festlegen können.

Hier ist ein Beispiel dafür, wie unsere Komponente aussehen könnte:

An Linie #9-10und #16-17wir finden die kritischen Teile. Wir setzen den aktuellen Wert der Eingaben auf postMeta.<your meta key here>und in ihrem onChange-Ereignis führen wir die Funktion setPostMeta( { <your meta key here>: ... } )auf den neuen aktualisierten Wert aus.

Abschließend noch ein Wort dazu, wie Sie Ihre Komponente auf einen bestimmten Beitragstyp beschränken können. In unserem withSelect()übergeben wir den Beitragstyp des aktuellen Beitrags in der Stütze postType. Alles, was wir in unserer Komponente tun müssen, ist, diesen Wert mit einem Beitragstyp zu vergleichen und null zurückzugeben, wenn er nicht übereinstimmt:

Und das ist es! Unser Code sollte jetzt funktionieren. Das Endergebnis sollte in etwa so aussehen:

Endgültiger Code

Registrieren von Post-Meta und Einreihen der Javascript-Datei:

Die beiden Javascript-Dateien: