Benutzerdefinierten Gutenberg-Block erstellen – Teil 3: Requisiten und WordPress-Komponenten

Im vorherigen Schritt dieser Tutorial-Serie wurde beschrieben, wie ein benutzerdefinierter Block sowohl in Javascript als auch in PHP registriert wird. In diesem Schritt lernen wir, wie man die Komponenten von WordPress verwendet, um verschiedene Arten von Feldern und Einstellungen hinzuzufügen.

Um die Komponenten von WordPress in unserem Block nutzen zu können, müssen wir zuerst etwas über Requisiten wissen.

Requisiten

Props ist ein Hauptmerkmal in React und im Grunde eine Möglichkeit, Variablen oder Funktionen an andere Komponenten weiterzugeben. Wenn Sie mit React-Requisiten nicht vertraut sind, können Sie das offizielle Tutorial von React dazu lesen.

WordPress bietet einige Requisiten für die editund save-Funktionen in registerBlockType(). Innerhalb dieser Requisiten erhalten wir Zugriff auf kritische Dinge, wie z. B. Attribute und eine Methode zum Aktualisieren unserer Attribute. Wir werden Attribute im nächsten Schritt im Detail durchgehen !

Bisher haben wir in unserem Block die Funktion für editund saveso geschrieben:

Sie sollten sich daran gewöhnen, den Parameter propssowohl zu editals auch hinzuzufügen save, etwa so:

Jetzt haben Sie innerhalb von und vollen Zugriff auf die Variable propsund alles, was sie enthält. Wenn Sie neugierig sind, können Sie ein in die Funktion vor der Anweisung einfügen. Sie sollten sehen, welche Requisiten im Konsolen-Debugger verfügbar sind.edit``save``console.log(props);``edit``return

Verwenden von WordPress-Komponenten

Wie bereits erwähnt, haben wir Zugriff auf eine riesige Bibliothek von Komponenten und nützlichen Funktionen innerhalb des globalen Pakets wp. Sie finden gebrauchsfertige Komponenten für jede Art von eingabebezogenen Komponenten, die Sie sich vorstellen können. Beispiele sind Texteingaben, Rich-Text-Eingaben, Dropdowns, Umschalter, Kontrollkästchen, Schaltflächen in verschiedenen Stilen, Medien-Uploader und Farbwähler. Es gibt auch Funktionen und Komponenten für erweiterte Funktionalität. Beispielsweise das Abfragen von Inhalten (Beiträge, Kategorien usw.) von WordPress mit integrierten Funktionen oder Abrufen mit der REST-API.

Es ist sowohl einfacher als auch empfehlenswert, die UI-Komponenten von WordPress zu verwenden. Dadurch soll sichergestellt werden, dass das Design und die Funktionalität so rationalisiert wie möglich sind, um die Benutzer nicht zu verwirren oder zu ärgern.

Aber leider ist zum Zeitpunkt des Schreibens die Dokumentation für Gutenberg sehr spärlich. Ich habe herausgefunden, dass der beste Weg, um zu erfahren, was in dem wpPaket enthalten ist und wie die Komponenten tatsächlich funktionieren, darin besteht, in ihrem offiziellen Gutenberg Github-Repo nachzusehen. Einige der Pakete (Ordner) haben einen Readme-Text, der ein wenig Dokumentation bietet. Schauen Sie sich zum Beispiel die Readme für einen Button oder den Toggle an.

Das Github-Repo sollte dem entsprechen, was im wpPaket enthalten ist (je nachdem, welche Version Sie haben und welchen Zweig Sie in Github betrachten). Das bedeutet, dass sich jeder Ordner, den Sie im Stammverzeichnis packagesvon Github sehen, im globalen wpPaket befindet. Denken Sie als Beispiel daran, dass die Funktion, die wir im vorherigen Schritt verwendet haben registerBlockType(), innerhalb von war wp.blocks, was bedeutet, dass Sie den Quellcode für diese Funktion in exportiert finden packages/blocks/.

Da ich eine Reihe von benutzerdefinierten Gutenberg-Blöcken entwickelt und ziemlich viel im Github-Repository gegraben habe, habe ich festgestellt, dass es einige Pakete gibt, die die gängigsten Funktionen enthalten, die zum Erstellen benutzerdefinierter Blöcke verwendet werden. Ich werde sie unten einschließen.

Für einen vollständigeren Überblick über die verfügbaren Komponenten empfehle ich, mein kostenloses eBook herunterzuladen, das die verfügbaren Komponenten in Gutenberg behandelt! Es enthält die gebräuchlichsten und nützlichsten Komponenten mit Dokumentation zu Requisiten und Codebeispielen:

Ein kurzer Überblick über die gängigsten Pakete, die Sie für Blöcke verwenden werden

Offensichtlich sind noch viel mehr verfügbar, aber das Folgende ist das, was für die Blockentwicklung am häufigsten verwendet wird. Wir werden die meisten, wenn nicht alle davon in dieser Tutorial-Serie verwenden. Wann immer Sie eine Komponente verwenden möchten, müssen Sie wissen, in welchem ​​Paket sie sich befindet.

wp.components

Sie finden die meisten UI-Eingabekomponenten in wp.components. Beispiele sind verschiedene Texteingaben, Auswählen, Kontrollkästchen, Optionsfelder, ziehbare Komponenten, Schaltflächen, Farbwähler, Datumswähler und so weiter. Sie finden auch UI-Komponenten, die Sie für die Blocksymbolleiste und den Inhalt der Einstellungsseitenleiste (als InspectorControls bezeichnet) im Editor verwenden können.

Sehen Sie sich die Ordner im Github-Repo an .

wp.blockEditor und wp.editor

In diesen beiden Paketen finden Sie nützliche Komponenten für Rich-Text, Umgang mit Bildern/Medien-Uploader und Komponenten zum tatsächlichen Hinzufügen von Symbolleisten oder benutzerdefinierten Inspektor- (Seitenleisten-) Panels.

Am Ende dieser Serie sehen wir uns das Erstellen dynamischer Blöcke an, in denen wir PHP zum Rendern der Blockausgabe verwenden, und dafür verwenden wir eine Komponente von wp.editor.

Soweit ich weiß, begannen die meisten Komponenten wp.editorin den frühen Gutenberg-Tagen, aber insbesondere nach WordPress 5.3 wurden viele von ihnen in wp.blockEditor. Wenn Sie eine Komponente verwenden, in wp.editordie WordPress einziehen wp.blockEditormöchte, wird dies ab sofort nicht mehr fehlschlagen, aber im Konsolen-Debugger erhalten Sie Warnungen, dass sie veraltet ist und dass Sie wechseln sollten, wp.blockEditorwenn Sie können. Und reversibel, wenn Sie diese Serie mit einer älteren WordPress-Version aus irgendeinem Grund verfolgen, können beim Aufrufen von Komponenten, in die wp.blockEditornoch nicht verschoben wurde, Fehler auftreten.

wp.element

Darin wp.elementfinden Sie Komponenten, die React-Komponenten entsprechen. Zum Beispiel Component(entspricht React.Component) und Fragment( React.Fragment). Wir werden diese verwenden, wenn wir beginnen, unseren Code in separate Komponenten aufzuteilen.

wp.i18n

Wie der Name schon sagt wp.i18n, enthält das Paket Funktionen zur Handhabung der Übersetzung. Es enthält die gleichen Übersetzungsfunktionen, wie wir sie in PHP kennen; zum Beispiel __()und _e(). Wir werden uns das ausführlich in <<<>>>> ansehen, wenn wir erfahren, wie wir unseren Block übersetzen.

wp.data

Das wp.dataPaket dient zum Abfragen von WordPress nach Daten außerhalb des Editors. Es gibt Komponenten zum Versenden von Nachrichten, withSelectdie selectwir später in dieser Serie zum Abfragen von Posts innerhalb unseres Blocks verwenden werden.

wp.compose

Das vorherige Paket und wp.composesind für den fortgeschritteneren Blockaufbau vorgesehen. In diesem Paket finden wir Komponenten und Funktionen, um sogenannte Komponenten höherer Ordnung zu erstellen. Komponenten höherer Ordnung sind eine Mustertechnik in React zur Wiederverwendung von Komponenten und Logik, und wir werden dies in Kombination mit wp.dataverwenden, um Beiträge abzufragen.

Genug geredet – wie setzen Sie einige dieser Komponenten in der Praxis ein?

Wie bereits erwähnt; Um die Komponenten von WordPress zu verwenden, müssen Sie wissen, wo sie sich befinden. Hoffentlich gibt Ihnen meine obige Übersicht in Kombination mit dem Github-Repo eine Vorstellung davon, wo Sie sie bekommen können.

Vergessen Sie nicht, dass Sie jederzeit alle normalen HTML-Tags wie div, span, Überschriften usw. hinzufügen können. Denken Sie nur daran, die Richtlinien von React in Attributen zu befolgen. Zum Beispiel classist ein reserviertes Schlüsselwort in React (zum Erstellen von klassenbasierten Komponenten). Wenn Sie also eine Klasse zu einem HTML-Element hinzufügen möchten, müssen Sie className.

Hinweis: Vergessen Sie während der Entwicklung nicht, die npm run startKompilierung Ihres Codes zu initiieren.

Lassen Sie uns als einfaches Beispiel ein paar Komponenten ausprobieren, um zu sehen, wie sie aussehen. Wir destrukturieren sie aus ihren entsprechenden Paketen und verwenden sie in unserer editFunktion.

Dies führt zum Beispiel dazu, dass unser Block im Editor so aussieht.

Sie werden feststellen, dass Sie Fehlermeldungen in der Konsole erhalten, wenn Sie sie eingeben, und dass Ihre Eingaben beim Aktualisieren des Beitrags (und Aktualisieren) nicht gespeichert werden. Dies liegt daran, dass uns Requisiten an den Komponenten fehlen, die die Verbindung zu Attributen darstellen, in denen alle unsere Blockdaten gespeichert sind. Die Requisiten sind dafür verantwortlich, die gespeicherten Werte und Funktionen zu übergeben, die für die Aktualisierung unserer Attribute verantwortlich sind, wenn sich etwas in unseren Eingaben ändert. Dies werden wir im nächsten Schritt tun, wo wir endlich anfangen werden, echten Code zu schreiben.