Benutzerdefinierten Gutenberg-Block erstellen – Teil 5: Inspector-Einstellungen

In den vorherigen Schritten haben wir die Grundlagen zum Rendern von Komponenten und Attributen in einem Block gelernt. In diesem Schritt konzentrieren wir uns auf das, was WordPress (zumindest im Code) Inspector nennt: die Seitenleiste auf der rechten Seite im Editor. Wir werden einige neue Komponenten ansprechen, die sinnvollerweise in der Seitenleiste platziert werden können, und wie man damit umgeht.

Inspektor/Seitenleistenkomponente

Um Ihre benutzerdefinierten Einstellungen und HTML in die Inspector-Seitenleiste einzufügen, packen Sie alles in eine Komponente namens InspectorControls. Was auch immer Sie in diese Komponente einfügen, wird in der Seitenleiste ausgegeben und nicht im Block/Editor selbst. Sie können die Komponente und ihren Inhalt grundsätzlich überall in die Rückgabe der editFunktion einfügen.

Abgesehen davon würden Sie die Einstellungen in der Seitenleiste so behandeln, als wären sie innerhalb des Blocks. Jede Einstellung erfordert ein Attribut, und Sie laden und aktualisieren die Attribute auf die gleiche Weise.

Lassen Sie uns zunächst einen kurzen Blick darauf werfen, wie die Seitenleiste unseres Blocks aussieht (wenn unser Block im Editor aktiv ist), basierend auf dem Code, den wir im vorherigen Schritt erhalten haben.

Alle Blöcke zeigen standardmäßig das Symbol, den Namen und die Beschreibung des Blocks und den Abschnitt Erweitert – reduziert. In Advanced finden Sie eine Texteingabe zum Bereitstellen der CSS-Klasse für den Block.

Hinzufügen eines Seitenleistenabschnitts und einiger Einstellungen

Die Seitenleiste ist in Abschnitte unterteilt (im Code als Panels bezeichnet), und für ein optimales Design und eine optimale Funktionalität (einschließlich der Open-Collapse-Funktionalität) sollten wir die WordPress-Komponenten für die ordnungsgemäße Ausgabe von Panels verwenden.

Verwenden Sie die Komponente PanelBodyzum Hinzufügen eines Abschnitts (die Sie öffnen oder reduzieren können), die sich im wp.componentsPaket befindet. Die Komponente akzeptiert einige Props, zum Beispiel für den Titel und ob das Panel standardmäßig geöffnet oder geschlossen sein soll. Sie können auch benutzerdefinierte Klassen und Symbole bereitstellen und eine Ereignisfunktion an den Öffnen-Schließen-Trigger anhängen.

Innerhalb PanelBodyvon WordPress wird dann empfohlen, die PanelRowKomponente zu verwenden, die sich wie generische Container innerhalb des Panels verhält – um sicherzustellen, dass das Design rationalisiert wird. Diese Komponente wendet automatisch ein gewisses Margin- und Flex-Row-Styling auf Ihre Inhalte an. Wegen des „ flex-direction: row” Stylings sollten Sie jede Einstellung in eine einpacken PanelRow. Oder Sie können sie ganz überspringen und die Verantwortung dafür übernehmen, sie mit Divs und dergleichen zu stylen.

Panel und Einstellungen hinzufügen

Lassen Sie uns ein Seitenleistenfeld für unseren Block mit einigen Einstellungen hinzufügen, nur um es in der Praxis zu sehen. Wir fügen ein Umschaltsteuerelement, eine Auswahleingabe, einen Farbwähler und ein Kontrollkästchen hinzu – nur um etwas Erfahrung mit verschiedenen Arten von Eingabekomponenten zu sammeln. Den Blockinhalt (mit den beiden RichTexts) und die saveFunktion habe ich so belassen wie zuvor.

Wie immer beginnen wir mit der Destrukturierung der Komponenten und Funktionen, die wir verwenden möchten. In attributesinside registerBlockType()definieren wir ein Attribut pro Eingabe und passen den Typ an – zum Beispiel erwartet das Toggle-Steuerelement einen booleschen Wert und da die Werte des Dropdowns Strings sind, sollte dieses Attribut auch ein Typ String sein.

Bei line #41starten wir die InspectorControlsKomponente, und alles von diesem Punkt bis line #80erscheint in der Seitenleiste. Der Rest erscheint im Editor selbst, und ich habe dort keine Änderungen vorgenommen.

Im Inneren erstellen wir zuerst ein Panel mit PanelBodyund mit dem auf true gesetzten Prop initialOpenteilen wir Gutenberg mit, dass dieses Panel standardmäßig geöffnet werden soll. Und dann liegt es an uns, was wir in jedem hinzufügen PanelRow.

Für die Komponente ToggleControlverwenden wir dieselben Requisiten wie zuvor mit Texteingaben, außer dass valuewir anstelle des Props den Attributwert innerhalb des Props angeben checked. Dies gilt für alle Eingaben, die in reinem HTML ein aktiviertes Attribut erwarten, z. B. Kontrollkästchen. Für Optionsfelder würden Sie die Prop verwenden selected, da Sie dies auch in einfachem HTML verwenden würden. Beachten Sie, dass das Attribut für diese Eingabe vom Typ sein muss boolean.

Was die CheckboxControlBehandlung eines singulären Kontrollkästchens betrifft, funktioniert es genauso wie ToggleControl– es gibt einen booleschen Wert zurück, unabhängig davon, ob es aktiviert ist oder nicht.

Der SelectControlgeneriert ein Auswahl-Dropdown und erwartet die Auswahlmöglichkeiten als Array im Prop options. Jedes Element muss ein Objekt mit den Eigenschaften labelund sein value. Gleiches gilt für Checkboxen und Radiobuttons (RadioControl). Unter normalen Umständen würden Sie die Auswahl wahrscheinlich als Variable außerhalb der HTML-Ausgabe generieren.

Möglicherweise stellen Sie fest, dass die ColorPickeretwas anders funktioniert als die anderen, da dies eine komplexere Komponente und keine Standard-HTML-Eingabe ist. Geben Sie die Requisite colorfür die gespeicherte Farbe an und verwenden Sie anstelle von onChange(feuert einmal beim Klicken, aber auch jedes Mal, wenn der Wert beim Ziehen geändert wird – was zu vielen Feuern führen kann) onChangeComplete. Die in diesem Ereignis zurückgegebene Requisite ist auch ein Objekt, bei dem wir entscheiden müssen, welchen Teil wir in unserem Attribut speichern möchten. In diesem Beispiel möchten wir den Hex-Wert (ohne Alpha/Opazität) speichern, also setAttributes()extrahieren wir die hexEigenschaft des colorzurückgegebenen Objekts. Aus diesem Grund fügen wir auch die Eigenschaft hinzudisableAlphaB. die Alphakanal-Benutzeroberfläche (zur Steuerung der Deckkraft) zu entfernen, da es keinen Sinn macht, dem Benutzer dies anzubieten, wenn wir den Deckkraftwert nie speichern.

Für jede der Komponenten ist eine labelRequisite verfügbar, mit Ausnahme des Farbwählers. Wenn Sie eine Beschriftung oder einen Text davor ausgeben möchten, müssen Sie mit HTML oder Styling herumspielen, um sicherzustellen, dass es gut aussieht.

Sie können natürlich so viele Panels hinzufügen, wie Sie möchten, fügen Sie einfach eine weitere PanelBodyKomponente nach der vorherigen hinzu.

Wenn Sie mehr über das Hinzufügen von Blockeinstellungen erfahren möchten, habe ich separate Tutorials für komplexere Einstellungen und Komponenten für Inspector. So fügen Sie eine Bildauswahl hinzu und wie fügen Sie ein Farbeinstellungsfeld hinzu.

Handhabungsave

Ich habe die saveFunktion so belassen, wie sie vorher war. Es liegt an Ihnen und alles hängt davon ab, was die Einstellungen in der Ausgabe steuern. Sie wissen bereits, wie Sie die Werte der einzelnen Einstellungen erhalten. Nehmen wir als Beispiel an, dass das boolesche Attribut activateLaserssteuert, ob ein benutzerdefiniertes HTML-Element gerendert wird oder nicht. Wenn das Attribut trueein div sein soll, sonst nicht. Sie können dies mit der herkömmlichen if-Prüfung tun oder JSXs Inline ifund &&Operator verwenden. Lesen Sie mehr dazu in Reacts Anleitung für bedingtes Rendering.

Da wir RichTextdiese Ausgabe verwenden, wäre sie im Editor nicht sichtbar, aber sie erscheint im Frontend.

Weitere Komponenten finden Sie im wp.components Github-Repo. Die meisten dieser Ordner sollten Ihnen eine Readme-Datei mit einer Dokumentation zur Verwendung bereitstellen. Ich habe das meiste davon gelernt, indem ich in dieses Repo und auch in die Kernkomponenten von WordPress geschaut habe, wie sie es gemacht haben.

Im nächsten Schritt der Serie konzentrieren wir uns darauf, wie die Symbolleiste des Blocks gesteuert wird. Wir werden lernen, wie man beispielsweise die Ausrichtung eines Blocks handhabt und benutzerdefinierte Schaltflächen zur Symbolleiste hinzufügt.