Benutzerdefinierten Gutenberg-Block erstellen – Teil 7: Erstellen Sie Ihre eigenen benutzerdefinierten Komponenten

Bisher haben wir in dieser Tutorial-Reihe den gesamten Code innerhalb registerBlockType()der editFunktion von geschrieben. Es ist durchaus möglich und wird oft empfohlen, die Bearbeitung stattdessen einer separaten Komponente zuzuweisen. Auf diese Weise können wir Funktionen wie Komponentenzustand und Lebenszyklusmethoden nutzen. Es ist auch viel sauberer, lesbarer und bietet wiederverwendbaren Code!

Wenn Sie mit dem Erstellen von React-Komponenten oder den Zustands- und Lebenszyklusmethoden nicht vertraut sind, empfehle ich, zuerst den offiziellen Leitfaden von React zu diesem Thema zu lesen .

Definieren einer Klassenkomponente füredit

Sie können eine Komponente entweder als Funktion oder als Klasse definieren. Mit einer Klassenkomponente können Sie Funktionen wie zum Beispiel Zustands- und Lebenszyklusmethoden verwenden. In neueren React-Versionen (16+) können Sie jedoch React-Hooks verwenden, um Zustands- und Lebenszyklusmethoden innerhalb von Funktionskomponenten zu simulieren. In diesem Tutorial konzentrieren wir uns jedoch auf das Erstellen einer Klassenkomponente. Was wir bisher in dieser Reihe „inline” in registerBlockType()for editund erstellt savehaben, sind Funktionskomponenten.

Um eine Klassenkomponente zu definieren, erweitern wir WordPress’ Component(im wp.elementPaket), genau wie Sie eine Klassenkomponente auf React.Component.

Denken Sie daran, dass Ihre Klassenkomponente die Funktion enthalten muss render(). Und wegen der Funktionsweise von Javascript muss Ihre Klasse vor Ihrem registerBlockType()Aufruf definiert werden (schreiben Sie Ihre Klassenkomponente zuerst in die Datei und behalten registerBlockType()Sie sie danach bei. Später in diesem Beitrag werden wir lernen, wie Sie Komponenten in separate Dateien trennen, exportieren und einschließen Sie).

Kurz gesagt so:

Die Requisiten von editwerden automatisch auf unsere Komponente angewendet. Vergessen Sie nicht, dass eine Klassenkomponente, mit der Sie auf Requisiten verweisen müssen this.props. Im WordPress Gutenberg-Kern ist es üblich, separate Komponenten für die editFunktionen zu verwenden, da sie meistens viel mehr Code enthalten. Die saveFunktion kann oft belassen werden, registerBlockType()es sei denn, sie enthält auch viel Code.

Auf diese Weise können Sie Ihre Komponente jetzt so schreiben, wie Sie es mit React tun würden. Sie können Funktionen, Konstruktoren, Zustands- und Lebenszyklusmethoden hinzufügen.

Dies ist der Code, den wir im letzten Schritt erhalten haben, konvertiert in eine Klassenkomponente:

Wenn Sie wie wir von Requisiten destrukturiert attributeshaben setAttributes, müssen Sie nur eine Zeile ändern, wenn Sie in eine separate Klassenkomponente wechseln. #9von propsbis this.props. Der gesamte Code funktioniert wie zuvor, ohne etwas anderes zu reparieren. Das ist das Schöne an der Destrukturierung. Wenn Sie es nicht destrukturiert und zB props.attributesdirekt darauf verwiesen haben, müssten Sie this.vor allen einzelnen Verweisen auf attributesund setAttributesüberall hinzufügen.

Beginnen wir mit den Dingen, die wir jetzt mit einer Klassenkomponente tun können!

Funktionen definieren uthis

Zugegeben, ja, Sie können Funktionen innerhalb der editFunktionskomponente definieren, bevor Sie aufrufen return. Aber ich persönlich habe es immer vorgezogen, Funktionalität nach Logik zu trennen. Ich finde es besser, Funktionen für Logik und andere Zwecke außerhalb der Funktion zu trennen, die für das Rendern der Ausgabe verantwortlich ist. Einige Leute ziehen es auch vor, Funktionen in Ereignissen aufzurufen, anstatt sie inline auszuführen, wie wir es bisher getan haben (setAttributes()zum onChangeBeispiel).

Im Moment hat unser Code zwei Dinge, die nützlich sein könnten, um zu Funktionen zu wechseln; InspectorControlsund BlockControls. Dies wird unsere erheblich verkürzen returnund unseren Code leichter lesbar machen.

Wir definieren zwei Funktionen, die den ganzen InspectorControlsBlock und den ganzen BlockControlsBlock zurückgeben. Durch die Verwendung von Pfeilfunktionen (functionName =() => { ... }) haben wir vollen Zugriff auf Props. thisWenn Sie den letzten Teil von Schritt 1 – das Einrichten von Babel mit den neuesten Syntaxen – nicht durchgeführt haben, erhalten Sie Kompilierungsfehler. Sie müssten thisfür jede Funktion einen Konstruktor und eine Bindung erstellen. Sie können mehr über die Handhabung thisam Anfang der FAQ-Seite von React lesen .

Denken Sie auch daran, dass Sie, da wir uns jetzt in einer Klasse befinden, alle ihre Funktionen mit this.voranstellen müssen.

Beachten Sie, dass ich den eigentlichen Inhalt von InspectorControlsund ausgeschlossen habe BlockControls, um den Code kürzer zu halten. Nichts in ihrem Code muss geändert werden.

Wir nutzen auch die Tatsache, dass die returnAnweisung auch ein Array zurückgeben kann. Alles im Array wird wie gewohnt in der Reihenfolge gerendert, in der es steht. Das macht es uns leicht, Funktionen direkt innerhalb der returnAnweisung aufzurufen.

Sie können natürlich auch Lifecycle-Methoden definieren, wie z componentDidMount(). Es gibt keinen Unterschied, dies in Gutenberg-Komponenten zu tun als in React.

Konstruktor und Verwendungsstatus

Versuchen wir, state in unserer Komponente zu implementieren. Denken Sie daran, dass der Status nur temporär in unserer Klassenkomponente gespeichert wird und nirgendwo gespeichert wird – beispielsweise in Attributen. Es geht nur darum, die Kontrolle über – nun ja – den Zustand Ihrer Komponente zu behalten. Häufige Verwendungszwecke des Zustands sind die Verwendung des Zustands als Statusflag, während auf die Rückkehr eines asynchronen Aufrufs gewartet wird, das Speichern einer vorübergehenden Bewertung vor dem Speichern in einem Attribut oder das Implementieren von Block-„Vorschau-/Bearbeitungsmodi”.

Sie beziehen sich auf Zustand und Aktualisierungszustand genau wie in React; mit this.stateund setState(). Normalerweise würden Sie den Zustand im Konstruktor initialisieren. Und was das Definieren eines Konstruktors betrifft – es ist genau wie in React – vergessen Sie nicht, auch zu übergeben propsund zu tun super(props). Zusamenfassend:

class FirstBlockEdit extends Component {
    constructor(props) {
        super(props);
 
        this.state = {
            example: 1
        }
    }
 
    render() {
        this.setState({ example: 2 });
        console.log(this.state.example);
        ...

Bearbeitungs-/Vorschau-Umschalter für Blockmodus

Lassen Sie uns das, was wir im vorherigen Schritt in Symbolleisten gelernt haben, verwenden, um einen „Modusumschalter” für unseren Block zu erstellen. Wir implementieren eine Symbolleiste mit einer Schaltfläche, die zwischen Vorschau- und Bearbeitungsmodus umschaltet. Im Bearbeitungsmodus erhält der Block wie gewohnt die beiden RichText-Komponenten. Aber beim Umschalten in den Vorschaumodus haben wir die Bearbeitung deaktiviert und die Blockausgabe gerendert.

Zuerst erstellen wir einen Konstruktor und richten den Zustand mit einer booleschen Eigenschaft ein; editModewas beginnt als true. Das super(props)ist notwendig, wenn ein Konstruktor in einer klassenbasierten React-Komponente definiert wird.

class FirstBlockEdit extends Component {
    constructor(props) {
        super(props);
        this.state = {
            editMode: true
        }
    }
    ...

In unserer Funktion zum Ausgeben der Symbolleisten ändern wir die zuvor erstellte benutzerdefinierte Schaltfläche (die nur console.logetwas bewirkt, wenn Sie darauf klicken). An seiner onClickStütze rufen wir setState()den aktuellen editModebooleschen Wert auf und negieren ihn. Um das Verständnis für den Benutzer zu erleichtern, schalten wir auch zwischen dem Symbol und der Beschriftung der Schaltfläche um. Wenn zB der Vorschaumodus aktiv ist, zeigt die Schaltfläche die Beschriftung „Bearbeiten” und ein Stiftsymbol, das allgemein als Bearbeitung akzeptiert wird.

Und schließlich können wir in der Hauptrendermethode für unseren Block tun, was wir wollen. Dieser Teil liegt wirklich bei Ihnen – Sie machen dasselbe wie wir mit dem Label und dem Symbol auf der Schaltfläche oben. Wir fügen zwei Ausgabeblöcke hinzu, einen if this.state.editModeis true(was die üblichen editierbaren RichTextKomponenten sein sollten) und einen weiteren if it’s false.

Als Beispiel verwende ich zwei WordPress-Komponenten von wp.components; Placeholderund Disabledfür den Vorschaumodus. Die PlaceholderKomponente fügt Ihren Block in ein schönes graues Feld ein, wodurch deutlich wird, dass er nicht bearbeitet werden kann. Denken Sie daran, dass es mit Styling versehen ist. Wenn Sie also eine perfekte Vorschau haben möchten, ist dies möglicherweise nicht das Richtige für Sie. Und ich verpacke auch alles in eine DisabledKomponente, die alles darin unbearbeitbar, nicht anklickbar und nicht verschiebbar macht. Dies ist unsere neue render()Funktion in unserer Komponente:

Ich verwende auch eine Komponente Fragment( wp.elementPaket), die mit React.Fragment. Wenn Sie damit nicht vertraut sind, wickeln wir die Ausgabe darin ein, wenn wir keine zusätzlichen unnötigen HTML-Wrapper hinzufügen möchten. In React muss alles einen Root-Knoten haben. Wenn der Bearbeitungsmodus aktiv ist (Zeile #13), geben wir zwei RichTextKomponenten direkt hintereinander aus, also brauchen wir einen Wurzelknoten um sie herum.

Bei aktivem Vorschaumodus (Zeile #29) geben wir RichTextdie Werte der beiden Komponenten aus. Wie wir es in tun save, verwenden wir RichText.Content, um ihre Werte anstelle des kleinen Editors zurückzugeben.

Die Komponente Placeholderkommt im Flex-Styling und standardmäßig mit Flex-Direction-Zeile. Das Bereitstellen truein der Requisite isColumnLayoutändert sie in eine Flex-Richtungsspalte (also stapelt sich alles). Aber wie bereits erwähnt – vielleicht möchten Sie diese Komponente überspringen und Ihre Vorschau lieber genau so generieren, wie sie im Frontend wäre.

Und damit haben wir einen Vorschau-/Bearbeitungs-Umschalter für den Blockmodus. Natürlich können Sie den Inhalt des „Bearbeitungsmodus” anpassen, um zB Steuereingänge oder so weiter anzuzeigen.

Sie können so viele Komponenten erstellen, wie Sie möchten, Sie sind nicht darauf beschränkt, nur eine für die editFunktion zu haben! Erstellen Sie einfach weitere Komponenten und fügen Sie sie in eine returnAnweisung ein. Das ist eigentlich die Idee von React – das Erstellen gekapselter Codeteile, von denen möglicherweise jeder seinen eigenen Zustand handhabt und sie zu komplexen UIs kombiniert.