Advertisement
  1. Code
  2. WordPress Gutenberg

WordPress Gutenberg Block API: Benutzerdefinierte Blöcke erstellen

Scroll to top
Read Time: 17 min
This post is part of a series called WordPress Gutenberg Block API.
WordPress Gutenberg Block API: Block Look and Feel
WordPress Gutenberg Block API: Extending Blocks

German (Deutsch) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)

Der neue WordPress-Editor (Codename Gutenberg) soll in Version 5.0 veröffentlicht werden. Jetzt ist der perfekte Zeitpunkt, um sich damit auseinanderzusetzen, bevor es im WordPress-Kern landet. In dieser Serie zeige ich Ihnen, wie Sie mit der Block-API arbeiten und Ihre eigenen Inhaltsblöcke erstellen, mit denen Sie Ihre Beiträge und Seiten erstellen können.

Im vorherigen Beitrag haben wir gesehen, wie Sie mit dem Toolkit create-guten-block ein Plugin erstellen, das einen Beispielblock enthält, mit dem wir arbeiten können. Wir können dies problemlos nach Bedarf erweitern, aber es ist eine gute Idee, zu wissen, wie ein Block von Grund auf neu erstellt wird, um alle Aspekte der Gutenberg-Blockentwicklung vollständig zu verstehen.

  • WordPress
    WordPress Gutenberg Block API: Block Look und Feel
    David Gwyer

In diesem Beitrag erstellen wir einen zweiten Block in unserem my-custom-block-Plugin, um ein zufälliges Bild vom PlaceIMG-Webdienst anzuzeigen. Sie können den Block auch anpassen, indem Sie die Bildkategorie aus einem Dropdown-Auswahlsteuerelement auswählen.

Aber zuerst lernen wir, wie Block-Skripte und -Stile in die Warteschlange gestellt werden, bevor wir zur wichtigen registerBlockType()-Funktion übergehen, die für das Erstellen von Blöcken in Gutenberg von grundlegender Bedeutung ist.

Block-Skripte und -Stile in die Warteschlange stellen

Um das für unsere Blöcke erforderliche JavaScript und CSS hinzuzufügen, können wir zwei neue WordPress-Hooks verwenden, die von Gutenberg bereitgestellt werden:

  • enqueue_block_editor_assets
  • enqueue_block_assets

Diese sind nur verfügbar, wenn das Gutenberg-Plugin aktiv ist, und sie funktionieren ähnlich wie Standard-WordPress-Hooks zum Einreihen von Skripten. Sie sind jedoch speziell für die Arbeit mit Gutenberg-Blöcken vorgesehen.

Der enqueue_block_editor_assets-Hook fügt nur dem Admin-Editor Skripte und Stile hinzu. Dies macht es ideal, um JavaScript in die Warteschlange zu stellen, um Blöcke zu registrieren, und CSS, um Benutzeroberflächenelemente für Blockeinstellungen zu formatieren.

Für die Blockausgabe möchten Sie jedoch, dass Ihre Blöcke im Editor die gleiche Zeit wie im Frontend gerendert werden. Die Verwendung von enqueue_block_assets macht dies einfach, da Stile automatisch sowohl dem Editor als auch dem Frontend hinzugefügt werden. Sie können diesen Hook auch verwenden, um bei Bedarf JavaScript zu laden.

Möglicherweise fragen Sie sich jedoch, wie Sie Skripte und Stile nur am Frontend in die Warteschlange stellen können. Es gibt keinen WordPress-Hook, mit dem Sie dies direkt tun können. Sie können dies jedoch umgehen, indem Sie eine bedingte Anweisung in die Hook-Rückruffunktion enqueue_block_assets einfügen.

Um Skripte und Stile mithilfe dieser beiden neuen Hooks tatsächlich in die Warteschlange zu stellen, können Sie die Standardfunktionen wp_enqueue_style() und wp_enqueue_scripts() wie gewohnt verwenden.

Sie müssen jedoch sicherstellen, dass Sie die richtigen Skriptabhängigkeiten verwenden. Zum Einreihen von Skripten in den Editor können Sie die folgenden Abhängigkeiten verwenden:

  • Skripte: array ('wp-blocks', 'wp-i18n', 'wp-element', 'wp-components' )
  • Stile: array('wp-edit-blocks')

Wenn Sie Stile sowohl für den Editor als auch für das Front-End in die Warteschlange stellen, können Sie diese Abhängigkeit verwenden:

  • array('wp-blocks')

Eine erwähnenswerte Sache ist, dass die tatsächlichen Dateien, die von unserem my-custom-block-Plugin in die Warteschlange gestellt werden, die kompilierten Versionen von JavaScript und CSS sind und nicht die Dateien, die den JSX- und Sass-Quellcode enthalten.

Dies ist nur zu beachten, wenn Sie Dateien manuell in die Warteschlange stellen. Wenn Sie versuchen, Rohquellcode in die Warteschlange zu stellen, der React, ES6+ oder Sass enthält, treten zahlreiche Fehler auf.

Aus diesem Grund ist es nützlich, ein Toolkit wie create-guten-block zu verwenden, da es Skripte automatisch für Sie verarbeitet und in die Warteschlange stellt!

Registrieren von Gutenberg-Blöcken

Um einen neuen Block zu erstellen, müssen Sie ihn bei Gutenberg registrieren, indem Sie registerBlockType() aufrufen und den Blocknamen sowie ein Konfigurationsobjekt übergeben. Dieses Objekt hat einige Eigenschaften, die einer angemessenen Erklärung bedürfen.

Schauen wir uns zunächst den Blocknamen an. Dies ist der erste Parameter und eine Zeichenfolge, die aus zwei Teilen besteht, einem Namespace und dem Blocknamen selbst, die durch einen Schrägstrich getrennt sind.

Zum Beispiel:

Wenn Sie mehrere Blöcke in einem Plugin registrieren, können Sie denselben Namespace verwenden, um alle Ihre Blöcke zu organisieren. Der Namespace muss jedoch für Ihr Plugin eindeutig sein, um Namenskonflikte zu vermeiden. Dies kann passieren, wenn ein gleichnamiger Block bereits über ein anderes Plugin registriert wurde.

Der zweite Parameter registerBlockType() ist ein Einstellungsobjekt und erfordert die Angabe einer Reihe von Eigenschaften:

  • title (Zeichenfolge): wird im Editor als durchsuchbare Blockbezeichnung angezeigt
  • description (optionale Zeichenfolge): beschreibt den Zweck eines Blocks
  • icon (optionales Dashicon- oder JSX-Element): Symbol, das einem Block zugeordnet ist
  • category (Zeichenfolge): hier wird der Block im Dialogfeld "Blöcke hinzufügen" angezeigt
  • keywords (optionales Array): bis zu drei Schlüsselwörter, die bei der Blocksuche verwendet werden
  • attributes (optionales Objekt): behandelt die dynamischen Blockdaten
  • edit (Funktion): eine Funktion, die Markups zurückgibt, die im Editor gerendert werden sollen
  • save (Funktion): eine Funktion, die Markups zurückgibt, die am Frontend gerendert werden sollen
  • useOnce (optionaler Boolescher Wert): verhindert, dass der Block mehrmals hinzugefügt wird
  • supports (optionales Objekt): definiert blockunterstützte Funktionen

Angenommen, wir verwenden JSX für die Blockentwicklung, so könnte ein Beispiel für einen Aufruf von registerBlockType() für einen sehr einfachen Block aussehen:

Beachten Sie, dass wir keinen Eintrag für die description-, attributes-, useOnce- und die supports-Eigenschaften eingefügt haben. Alle Felder, die optional sind (und für Ihren Block nicht relevant sind), können sicher weggelassen werden. Da dieser Block beispielsweise keine dynamischen Daten enthielt, müssen wir uns nicht um die Angabe von Attributen kümmern.

Lassen Sie uns nun die Eigenschaften des Konfigurationsobjekts registerBlockType() nacheinander genauer behandeln.

Titel und Beschreibung

Beim Einfügen oder Suchen eines Blocks im Editor wird der Titel in der Liste der verfügbaren Blöcke angezeigt.

Es wird auch im Blockinspektorfenster zusammen mit der Blockbeschreibung angezeigt, falls definiert. Wenn der Blockinspektor derzeit nicht sichtbar ist, können Sie das Zahnradsymbol in der oberen rechten Ecke des Gutenberg-Editors verwenden, um die Sichtbarkeit umzuschalten.

Block title and descriptionBlock title and descriptionBlock title and description

Sowohl das Titel- als auch das Beschreibungsfeld sollten idealerweise in i18n-Funktionen eingeschlossen sein, um eine Übersetzung in andere Sprachen zu ermöglichen.

Kategorie

Derzeit sind fünf Blockkategorien verfügbar:

  • common
  • formatting
  • layout
  • widgets
  • embed

Diese bestimmen den Kategorieabschnitt, in dem Ihr Block im Fenster Block hinzufügen aufgeführt ist.

Block categoriesBlock categoriesBlock categories

Die Registerkarte "Blöcke" enthält die Kategorien "Allgemeine Blöcke", "Formatierung", "Layoutelemente" und "Widgets", während die Kategorie "Einbetten" über eine eigene Registerkarte verfügt.

Kategorien sind derzeit in Gutenberg festgelegt, dies kann sich jedoch in Zukunft ändern. Dies wäre beispielsweise nützlich, wenn Sie mehrere Blöcke in einem einzigen Plugin entwickeln und möchten, dass sie alle unter einer gemeinsamen Kategorie aufgelistet werden, damit Benutzer sie leichter finden können.

Symbol

Standardmäßig wird Ihrem Block das Schild-Dashicon zugewiesen. Sie können dies jedoch überschreiben, indem Sie im icon-Feld ein benutzerdefiniertes Dashicon angeben.

DashiconsDashiconsDashicons

Jedem Dashicon werden dashicons- vorangestellt, gefolgt von einer eindeutigen Zeichenfolge. Das Zahnradsymbol hat beispielsweise den Namen dashicons-admin-generic. Um dies als Blocksymbol zu verwenden, entfernen Sie einfach das dashicons-Präfix, damit es erkannt wird, z. B. icon:'admin-generic'.

Sie können jedoch nicht nur Dashicons als Symboleigenschaft verwenden. Die Funktion akzeptiert auch ein JSX-Element, dh Sie können jedes Bild oder SVG-Element als Blocksymbol verwenden.

Stellen Sie einfach sicher, dass die Symbolgröße mit anderen Blocksymbolen übereinstimmt, die standardmäßig 20 x 20 Pixel beträgt.

Schlüsselwörter

Wählen Sie bis zu drei übersetzbare Schlüsselwörter aus, um Ihren Block hervorzuheben, wenn Benutzer nach einem Block suchen. Wählen Sie am besten Schlüsselwörter aus, die eng mit der Funktionalität Ihres Blocks zusammenhängen, um optimale Ergebnisse zu erzielen.

Sie können sogar Ihren Firmen- und/oder Plugin-Namen als Schlüsselwörter deklarieren, sodass Benutzer bei mehreren Blöcken Ihren Firmennamen eingeben können und alle Ihre Blöcke in den Suchergebnissen angezeigt werden.

Das Hinzufügen von Schlüsselwörtern ist zwar völlig optional, bietet Benutzern jedoch eine hervorragende Möglichkeit, Ihre Blöcke leichter zu finden.

Attribute

Attribute helfen bei der Verwaltung dynamischer Daten in einem Block. Diese Eigenschaft ist optional, da Sie sie nicht für sehr einfache Blöcke benötigen, die statischen Inhalt ausgeben.

Wenn sich Ihr Block jedoch mit Daten befasst, die sich ändern könnten (z. B. der Inhalt eines bearbeitbaren Textbereichs) oder Sie Blockeinstellungen speichern müssen, ist die Verwendung von Attributen der richtige Weg.

Attribute speichern dynamische Blockdaten entweder im in der Datenbank gespeicherten Post-Inhalt oder im Post-Meta. In diesem Tutorial werden nur Attribute verwendet, die Daten zusammen mit dem Beitragsinhalt speichern.

Um im Post-Inhalt gespeicherte Attributdaten abzurufen, müssen Sie angeben, wo sie sich im Markup befinden. Wir können dies tun, indem wir einen CSS-Selektor angeben, der auf die Attributdaten verweist.

Wenn unser Block beispielsweise ein anchor-Tag enthielt, können wir sein title-Feld wie folgt als Attribut verwenden:

Hier lautet der Attributname linktitle, eine beliebige Zeichenfolge, die beliebig sein kann.

Mit diesem Attribut können wir beispielsweise den Link-Titel <a title="some title"> speichern, der über ein Textfeld in den Blockeinstellungen eingegeben wurde. Wenn Sie dies plötzlich tun, wird das Titelfeld dynamisch und Sie können seinen Wert im Editor ändern.

Wenn der Beitrag gespeichert wird, wird der Attributwert in das Link-title-Feld eingefügt. In ähnlicher Weise wird beim Laden des Editors der Wert des title-Tags aus dem Inhalt abgerufen und in das linktitle-Attribut eingefügt.

Es gibt weitere Möglichkeiten, wie Sie mithilfe source bestimmen können, wie Blockinhalte über Attribute gespeichert oder abgerufen werden. Beispielsweise können Sie die 'text'-Quelle verwenden, um den inneren Text aus einem Absatzelement zu extrahieren.

Sie können auch die children-Quelle verwenden, um alle untergeordneten Knoten eines Elements in ein Array zu extrahieren und in einem Attribut zu speichern.

Dadurch wird das Element mit der Klasse .parent ausgewählt und alle untergeordneten Knoten im Attribut editablecontent gespeichert.

Wenn Sie keine Quelle angeben, wird der Attributwert in HTML-Kommentaren als Teil des Post-Markups gespeichert, wenn er in der Datenbank gespeichert wird. Diese Kommentare werden entfernt, bevor der Beitrag im Frontend gerendert wird.

Wir werden ein spezielles Beispiel für diese Art von Attributen sehen, wenn wir später in diesem Tutorial mit der Implementierung unseres Zufallsbildblocks beginnen.

Attribute können etwas gewöhnungsbedürftig sein. Machen Sie sich also keine Sorgen, wenn Sie sie beim ersten Mal nicht vollständig verstehen. Ich würde empfehlen, einen Blick in den Attribut-Abschnitt des Gutenberg-Handbuchs zu werfen, um weitere Details und Beispiele zu erhalten.

Bearbeiten

Die edit-Funktion steuert, wie Ihr Block in der Editoroberfläche angezeigt wird. Dynamische Daten werden als props an jeden Block übergeben, einschließlich aller definierten benutzerdefinierten Attribute.

Es ist üblich, dem Hauptblockelement className= {props.className} hinzuzufügen, um eine für Ihren Block spezifische CSS-Klasse auszugeben. WordPress fügt dies nicht für Sie im Editor hinzu, daher muss es für jeden Block manuell hinzugefügt werden, wenn Sie es einschließen möchten.

Die Verwendung von props.className ist Standard und wird empfohlen, da hiermit die CSS-Stile für jeden einzelnen Block angepasst werden können. Das Format der generierten CSS-Klasse lautet .wp-block- {namespace}-{name}. Wie Sie sehen können, basiert dies auf dem Blocknamensraum/-namen und ist daher ideal für die Verwendung als eindeutige Blockkennung.

Für die Bearbeitungsfunktion müssen Sie ein gültiges Markup über die render()-Methode zurückgeben, mit der Sie Ihren Block im Editor rendern.

Speichern

Ähnlich wie bei der edit-Funktion zeigt save eine visuelle Darstellung Ihres Blocks an, jedoch im Frontend. Es empfängt auch dynamische Blockdaten (falls definiert) über Requisiten.

Ein Hauptunterschied besteht darin, dass props.className in save nicht verfügbar ist. Dies ist jedoch kein Problem, da es von Gutenberg automatisch eingefügt wird.

Unterstützt

Die Eigenschaft support akzeptiert ein Objekt mit booleschen Werten, um zu bestimmen, ob Ihr Block bestimmte Kernfunktionen unterstützt.

Folgende Objekteigenschaften können Sie einstellen.

  • anchor (Standardwert false): ermöglicht die direkte Verknüpfung mit einem bestimmten Block
  • customClassName (true): fügt im Blockinspektor ein Feld hinzu, um einen benutzerdefinierten className für den Block zu definieren
  • className (true): fügt dem Blockstammelement basierend auf dem Blocknamen einen className hinzu
  • html (true): ermöglicht die direkte Bearbeitung des Block-Markups

Die useOnce-Eigenschaft

Dies ist eine nützliche Eigenschaft, mit der Sie verhindern können, dass ein Block mehr als einmal zu einer Seite hinzugefügt wird. Ein Beispiel hierfür ist der Kernblock More, der nicht zu einer Seite hinzugefügt werden kann, wenn er bereits vorhanden ist.

useOnce propertyuseOnce propertyuseOnce property

Wie Sie sehen, ist das Blocksymbol nach dem Hinzufügen des Blocks More abgeblendet und kann nicht ausgewählt werden. Die useOnce-Eigenschaft ist standardmäßig auf false festgelegt.

Lassen Sie uns kreativ werden!

Es ist jetzt an der Zeit, das bisher gewonnene Wissen zu nutzen, um ein solides Arbeitsbeispiel für einen Block zu implementieren, der etwas Interessanteres tut, als nur statischen Inhalt auszugeben.

Wir werden einen Block erstellen, um ein zufälliges Bild auszugeben, das über eine externe Anfrage an die PlaceIMG-Website erhalten wurde und ein zufälliges Bild zurückgibt. Darüber hinaus können Sie die zurückgegebene Bildkategorie über ein Dropdown-Steuerelement auswählen.

Our random image blockOur random image blockOur random image block

Der Einfachheit halber fügen wir unseren neuen Block demselben my-custom-block-Plugin hinzu, anstatt ein brandneues Plugin zu erstellen. Der Code für den Standardblock befindet sich im Ordner /src/block. Fügen Sie also einen weiteren Ordner in /src mit dem Namen random-image hinzu und fügen Sie drei neue Dateien hinzu:

  • index.js: registriert unseren neuen Block
  • editor.scss: für Editorstile
  • style.scss: Stile für den Editor und das Frontend

Alternativ können Sie den Ordner /src/block kopieren und umbenennen, wenn Sie nicht alles manuell eingeben möchten. Stellen Sie jedoch sicher, dass Sie block.js im neuen Blockordner in index.js umbenennen.

Wir verwenden index.js für den Dateinamen des Hauptblocks, da dies uns ermöglicht, die Importanweisung in blocks.js zu vereinfachen. Anstatt den Pfad und den vollständigen Dateinamen des Blocks angeben zu müssen, können wir einfach den Pfad zum Blockordner angeben, und import sucht automatisch nach einer index.js-Datei.

Öffnen Sie /src/blocks.js und fügen Sie einen Verweis auf unseren neuen Block oben in der Datei direkt unter der vorhandenen Importanweisung hinzu.

Fügen Sie in /src/random-image/index.js den folgenden Code hinzu, um unseren neuen Block zu starten.

Dies bildet das Framework unseres Blocks und ist dem Boilerplate-Blockcode ziemlich ähnlich, der vom Toolkit create-guten-block generiert wird.

Wir importieren zunächst den Editor und die Front-End-Stylesheets und extrahieren dann einige häufig verwendete Funktionen aus wp.i18n und wp.blocks in lokale Variablen.

In registerBlockType() wurden Werte für die Eigenschaften von titleiconcategory und keywords eingegeben, während die edit- und save-Funktionen derzeit nur statischen Inhalt ausgeben.

Fügen Sie den zufälligen Bildblock zu einer neuen Seite hinzu, um die bisher generierte Ausgabe anzuzeigen.

Bare bones block outputBare bones block outputBare bones block output

Stellen Sie sicher, dass Sie weiterhin Dateien auf Änderungen überwachen, damit der Blockquellcode (JSX, ES6+, Sass usw.) in gültiges JavaScript und CSS übertragen wird. Wenn Sie derzeit keine Dateien auf Änderungen überwachen, öffnen Sie ein Befehlszeilenfenster im Stammordner des Plugins my-custom-block und geben Sie npm start ein.

Sie fragen sich vielleicht, warum wir keinen PHP-Code hinzufügen mussten, um zusätzliche Block-Skripte in die Warteschlange zu stellen. Die Block-Skripte für den my-custom-block-Block werden über init.php in die Warteschlange gestellt, aber wir müssen keine Skripte speziell für unseren neuen Block in die Warteschlange stellen, da dies von create-guten-block für uns erledigt wird.

Solange wir unsere Hauptblockdatei in src/blocks.js importieren (wie oben beschrieben), müssen wir keine zusätzlichen Arbeiten ausführen. Alle JSX-, ES6+- und Sass-Codes werden automatisch in die folgenden Dateien kompiliert:

  • dist/blocks.style.build.css: Stile für Editor und Frontend
  • dist/blocks.build.js: JavaScript nur für den Editor
  • dist/blocks.editor.build.css: Stile nur für den Editor

Diese Dateien enthalten JavaScript und CSS für alle Blöcke, sodass nur ein Satz von Dateien in die Warteschlange gestellt werden muss, unabhängig von der Anzahl der erstellten Blöcke!

Wir sind jetzt bereit, unserem Block ein wenig Interaktivität hinzuzufügen, und wir können dies tun, indem wir zuerst ein Attribut hinzufügen, um die Bildkategorie zu speichern.

Dadurch wird ein Attribut namens category erstellt, in dem eine Zeichenfolge mit dem Standardwert 'nature' gespeichert wird. Wir haben im Markup keine Position zum Speichern und Abrufen des Attributwerts angegeben, daher werden stattdessen spezielle HTML-Kommentare verwendet. Dies ist das Standardverhalten, wenn Sie eine Attributquelle weglassen.

Wir brauchen eine Möglichkeit, die Bildkategorie zu ändern, was wir über ein ausgewähltes Dropdown-Steuerelement tun können. Aktualisieren Sie die edit-Funktion auf Folgendes:

So wird es aussehen:

Adding a block select drop down controlAdding a block select drop down controlAdding a block select drop down control

Dies unterscheidet sich erheblich von der vorherigen statischen edit-Funktion. Lassen Sie uns die Änderungen durchgehen.

Zuerst haben wir ein Auswahl-Dropdown-Steuerelement mit mehreren Auswahlmöglichkeiten hinzugefügt, die den auf der PlaceIMG-Site verfügbaren Bildkategorien entsprechen.

PlaceIMG image categoriesPlaceIMG image categoriesPlaceIMG image categories

Wenn sich der Dropdown-Wert ändert, wird die Funktion setCategory aufgerufen, die die aktuell ausgewählte Kategorie findet und anschließend die Funktion setAttributes aufruft. Dies ist eine Kernfunktion von Gutenberg und aktualisiert einen Attributwert korrekt. Es wird empfohlen, ein Attribut nur mit dieser Funktion zu aktualisieren.

Wenn nun eine neue Kategorie ausgewählt wird, wird der Attributwert aktualisiert und an die edit-Funktion zurückgegeben, die die Ausgabenachricht aktualisiert.

Image category updatedImage category updatedImage category updated

Wir müssen einen letzten Schritt ausführen, damit das zufällige Bild angezeigt wird. Wir müssen eine einfache Komponente erstellen, die die aktuelle Kategorie aufnimmt und ein <img>-Tag mit einem zufälligen Bild ausgibt, das von der PlaceIMG-Site erhalten wurde.

Die Anfrage, die wir an PlaceIMG stellen müssen, hat folgende Form: https://placeimg.com/[width‹/[height‹/[category]

Wir behalten die Breite und Höhe vorerst bei, sodass wir nur die aktuelle Kategorie am Ende der Anforderungs-URL hinzufügen müssen. Wenn die Kategorie beispielsweise 'nature' lautet, lautet die vollständige Anforderungs-URL: https://placeimg.com/320/220/nature.

Fügen Sie über registerBlockType() eine RandomImage-Komponente hinzu:

Um es zu verwenden, fügen Sie es einfach in die Bearbeitungsfunktion ein und entfernen Sie die statische Ausgabemeldung. Wenn wir schon dabei sind, machen Sie dasselbe für die Speicherfunktion.

Die vollständige Datei index.js sollte nun folgendermaßen aussehen:

Fügen Sie abschließend (vorerst) die folgenden Stile zu editor.scss hinzu, um einen farbigen Rand um das Bild hinzuzufügen.

Sie benötigen auch einige Stile in style.css.

Immer wenn die Seite im Editor oder im Frontend aktualisiert wird, wird ein neues zufälliges Bild angezeigt.

Finished editor viewFinished editor viewFinished editor view
Final front end viewFinal front end viewFinal front end view

Wenn immer wieder dasselbe Bild angezeigt wird, können Sie eine harte Aktualisierung durchführen, um zu verhindern, dass das Bild aus Ihrem Browser-Cache bereitgestellt wird.

Schlussfolgerung

In diesem Tutorial haben wir viel behandelt. Wenn Sie es bis zum Ende geschafft haben, klopfen Sie sich wohlverdient auf den Rücken! Die Entwicklung von Gutenberg-Blöcken kann viel Spaß machen, aber es ist definitiv eine Herausforderung, jedes Konzept bei der ersten Belichtung zu erfassen.

Auf dem Weg haben wir gelernt, wie man Block-Skripte und -Stile in die Warteschlange stellt, und die Funktion registerBlockType() ausführlich behandelt.

Anschließend haben wir die Theorie in die Praxis umgesetzt und einen benutzerdefinierten Block von Grund auf neu erstellt, um mithilfe des PlaceIMG-Webdienstes ein zufälliges Bild aus einer bestimmten Kategorie anzuzeigen.

Im nächsten und letzten Teil dieser Tutorialreihe werden wir unserem zufälligen Bildblock über das Einstellungsfeld im Blockinspektor weitere Funktionen hinzufügen.

Wenn Sie diesem Tutorial gefolgt sind und nur mit dem Code experimentieren möchten, ohne alles einzugeben, können Sie das endgültige my-custom-block-Plugin im nächsten Tutorial herunterladen.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.