Share
Willkommen bei unserer Serie zum Erstellen benutzerdefinierter Blöcke mit der WordPress Gutenberg Block API. In diesem Tutorial geht es um die Erweiterung des im letzten Beitrag erstellten Zufallsbildblocks. Wir haben es so weit gebracht, ein Dropdown-Steuerelement hinzuzufügen, um eine Bildkategorie auszuwählen. Wir werden damit fortfahren, indem wir weitere Blockoptionen hinzufügen, um weitere Anpassungen zu ermöglichen.
Wir werden insbesondere sehen, wie Sie Blockeinstellungen in verschiedenen Teilen des Editors hinzufügen. Das ist richtig, Sie können nicht nur Blocksteuerungen direkt am Block selbst hinzufügen!
Die endgültige Mein-Custom-Block Plugin-Code steht zum Download zur Verfügung. Klicken Sie einfach auf den Link in der Seitenleiste auf der rechten Seite, laden Sie die ZIP-Datei auf Ihren Computer herunter und installieren Sie sie wie jedes andere WordPress-Plugin. Den Quellcode finden Sie auch in unserem GitHub-Repo.
Die Entwicklung von Gutenberg schreitet in einem angemessenen Tempo voran, und seit dem Erscheinen des letzten Tutorials gibt es eine neue wichtige Veröffentlichung. Die in diesem Lernprogramm verwendete Version von Gutenberg wurde auf Version 3.0.1 aktualisiert. Einige Benutzeroberflächen des Editors sehen möglicherweise etwas anders aus als in den vorherigen Lernprogrammen dieser Serie gezeigten Screenshots.
Das Dropdown-Steuerelement, das wir im vorherigen Lernprogramm hinzugefügt haben, befand sich im Editor direkt unter der Markierung für das Zufallsbild. Das war praktisch, aber wir haben auch andere Möglichkeiten.
Wir können auch Blocksteuerelemente zu einer Popup-Symbolleiste (die angezeigt wird, wenn ein Block ausgewählt wird) und einem Blockinspektorfenster hinzufügen.
In der Abbildung oben sehen Sie die Symbolleisten-Steuerelemente für den Absatzblock [1] sowie die zugehörigen Steuerelemente im Panel-Inspector [3]. Position [2] zeigt die Dropdown-Steuerung für unseren Zufallsbildblock.
Möglicherweise denken Sie bereits darüber nach, welchen Standort Sie für Ihre eigenen Blockeinstellungen wählen würden, aber Sie müssen nicht nur einen dieser Standorte auswählen. Sie schließen sich nicht gegenseitig aus. Für den Absatzblock (siehe oben) können Sie beispielsweise sehen, dass die Einstellungen zwischen dem Blockinspektor und der Symbolleiste aufgeteilt sind.
Darüber hinaus ist es absolut in Ordnung, zwei separate Steuerelemente an verschiedenen Stellen im Editor zu haben, die sich auf die gleich Rahmen. Möglicherweise möchten Sie dies nicht zu oft tun, aber es ist nützlich zu wissen, wie Sie es implementieren können. Wir werden also später sehen, wie das geht.
Beginnen wir mit der einfachsten Möglichkeit, Ihrem Block Funktionalität hinzuzufügen, die sich direkt im Block befindet bearbeiten Funktion. Wir haben diesen Ansatz bereits verwendet, um unsere Dropdown-Steuerung für Zufallsbilder hinzuzufügen, da dies sehr wenig zusätzlichen Aufwand erfordert.
Wir werden nicht über das Hinzufügen neuer Steuerelemente zum Block selbst gehen, aber wir können das Verhalten des Dropdown-Steuerelements optimieren, um intuitiver zu sein. Um das Rendern so nahe wie möglich am Frontend zu rendern, können wir die Anzeige des Dropdown-Menüs einschränken, sofern der Block nicht ausgewählt ist.
Lass uns diese Änderung jetzt vornehmen. Wenn Sie dieses Tutorial vom letzten Mal befolgen, dann öffnen Sie sich /my-custom-block/src/random-image/index.js in Ihrem Lieblingseditor. Dies ist die Haupt-JavaScript-Datei für unseren Zufallsbildblock.
Eine der Requisiten, die an alle Blöcke übergeben wurde, ist ist ausgewählt, das hält den Status der Sichtbarkeit des Blocks. Wir können dies verwenden, um die Dropdown-Steuerung der Kategorie bedingt anzuzeigen.
Erstens herausziehen ist ausgewählt von dem Requisiten Objekt und fügen Sie es der Liste der Konstanten im hinzu bearbeiten Funktion. Dies ist nützlich, damit wir mit einem verkürzten Namen darauf verweisen können (d. H. ist ausgewählt eher, als props.isAusgewählt).
const attributes: category, setAttributes, isSelected = Requisiten;
Als Nächstes können Sie diese Eigenschaft verwenden, um zu bestimmen, ob das Dropdown-Steuerelement angezeigt werden soll:
ist ausgewählt && ()
Dies ist eine Kurzform, um das zu testen ist ausgewählt ist wahr, da wir kein ausgewachsenes JavaScript verwenden können ob Anweisung im JSX-Code.
Stellen Sie sicher, dass Sie die Dateien weiterhin auf Änderungen überprüfen, sodass jeder Blockquellcode (JSX, ES6 +, Sass usw.) in gültiges JavaScript und CSS umgewandelt wird. Wenn Sie derzeit keine Dateien auf Änderungen überprüfen, öffnen Sie ein Befehlszeilenfenster im Mein-Custom-Block Plugin-Stammverzeichnis und geben Sie ein npm starten.
Öffnen Sie den Gutenberg-Editor und fügen Sie den Zufallsbildblock hinzu. Dieses Mal ist das Dropdown-Steuerelement nicht sichtbar, wenn der Block noch nicht angeklickt wurde.
Dies gibt dem Block ein viel interaktiveres Gefühl.
Wenn Sie einen der wichtigsten Gutenberg-Blöcke verwendet haben (z. B. den Absatzblock), sind Sie mit den Einstellungen der Symbolleiste vertraut. Sobald der Absatzblock ausgewählt ist, erscheint eine Popup-Symbolleiste mit Schaltflächen zum Formatieren des Textes. Diese Art von Steuerelement eignet sich hervorragend für Blockeinstellungen, die einen Ein / Aus-Status aufweisen - beispielsweise Textausrichtung oder Formatierung wie Fett oder Kursiv.
Wir verwenden das integrierte Steuerelement für die Ausrichtungssymbolleiste, damit das Dropdown-Bildkategorie-Steuerelement links (Standardeinstellung), rechts oder mittig ausgerichtet werden kann.
Zuerst müssen wir das herausziehen AlignmentToolBar und BlockControls Komponenten aus wp.blöcke. Dadurch können wir Ausrichtungssteuerelemente in einer verschiebbaren Symbolleiste über unserem Block anzeigen, wenn dieser ausgewählt ist. Dies ist Teil der Kernkomponenten, die wir in unseren eigenen Blöcken verwenden können.
const AlignmentToolbar, BlockControls, registerBlockType = wp.blocks;
Das BlockControls Komponente fungiert als Symbolleistencontainer und AlignmentToolbar ist innen platziert.
Das Verhalten der Ausrichtungssymbolleiste muss noch manuell eingestellt werden. Dazu können Sie eine neue hinzufügen categoryAlign Attribut zum Speichern des Blockausrichtungsstatus (links, rechts oder in der Mitte).
Unsere Attribute Objekt enthält jetzt zwei Einstellungen.
Attribute: Kategorie: Typ: 'Zeichenfolge', Standard: 'Natur', KategorieAlign: Typ: 'Zeichenfolge' Standard: "
Der Standard für die categoryAlign Attribut ist eine leere Zeichenfolge, die dazu führt, dass standardmäßig keine Ausrichtung angewendet wird.
Um auf das neue Attribut zu verweisen, können wir diesen Wert auf dieselbe Weise in seine eigene konstante Variable ziehen, wie wir es für das Dropdown-Menü getan haben Kategorie Attribut.
const Attribute: category, categoryAlign, setAttributes, isSelected = Requisiten;
Jetzt müssen wir nur noch die beiden neuen Komponenten in die bearbeiten Funktion und konfigurieren Sie die Eigenschaften.
setAttributes (categoryAlign: value) />
Wie Sie sehen können, mussten wir nur das zuweisen Wert Attribut von Ausrichtungswerkzeugleiste zu categoryAlign Attribut und rufen Sie die setAttributes Funktion, wenn eine neue Symbolleistenschaltfläche angeklickt wurde. Diese Funktion wiederum aktualisiert das categoryAlign Attribut und hält alles synchron.
Um den Ausrichtungsstil des Dropdown-Steuerelements anzuwenden, müssen wir unserem Formelement eine Stileigenschaft hinzufügen.
);Diese Funktion kann dann immer dann referenziert werden, wenn das Dropdown-Steuerelement der Kategorie gerendert werden muss. Das Markup für das Block-Inspector-Panel muss sich außerhalb des Block-Markups befinden, damit wir das verwenden können
Als Nächstes müssen Sie die Blockinspektor-Komponenten für die Dropdown-Listen für Kategorie- und Bildfilter hinzufügen. Diese müssen innen definiert werden bei Änderung Veranstaltung. Dies ist dem Dropdown-Code für die Kategorie aus dem letzten Lernprogramm sehr ähnlich und sollte Ihnen daher bekannt sein.
Alles zusammen, das bearbeiten Methode Rückkehr Funktion sieht jetzt so aus:
Rückkehr (); showForm () setAttributes (categoryAlign: value) /> isSelected && (showForm ())
Und das SetFilter Rückruf ist definiert als:
Accentsconagua
function setFilter (event) const selected = event.target.querySelector ('# Image-Filteroption: markiert'); setAttributes (imageFilter: selected.value); event.preventDefault (); Um das gefilterte Bild zu erhalten, müssen wir das aktualisieren Zufälliges Bild Komponente, um den neuen Filterwert bei jeder Änderung des Dropdown-Menüs zu übernehmen.
Funktion RandomImage (Kategorie, Filter) If (Filter) Filter = '/' + Filter; const src = 'https://placeimg.com/320/220/' + category + filter; Rückkehr;
Beachten Sie, wie wir diese neue Komponenteneigenschaft in verwenden bearbeiten Methode, um den neuen Filterwert an PlaceIMG zu senden.
Alle diese Codeänderungen führen dazu, dass ein neues Blockinspektorfenster mit zwei Dropdown-Steuerelementen erstellt wird, um die Bildkategorie und den Filter zu ändern.
Damit die neue Filtereigenschaft auch für das Frontend funktioniert, müssen Sie nur die sparen Methode.
save: Funktion (Requisiten) const Attribute: category, imageFilter = Requisiten; Rückkehr ();
In diesem Beitrag haben wir drei verschiedene Methoden zum Hinzufügen von Einstellungen zu einem Block behandelt:
Wir haben nur grundlegende Einstellungen für jeden Block hinzugefügt, aber wir können dies noch einfacher machen, indem wir Unterstützung für mehrere Bilder hinzufügen, Bildunterschriften hinzufügen und Stile wie die Randfarbe, den Radius oder die Größe des zufälligen Bildes steuern.
Ich bin mir sicher, dass Sie jetzt wahrscheinlich einige Ideen haben, wie Sie Ihre eigenen Blöcke erstellen können. Ich würde gerne hören, welche Art von Blockaden Sie in Ihren eigenen Projekten nützlich finden würden!
Wir haben gerade erst mit Envato Tuts + angefangen, mit Gutenberg zu beginnen. Wenn Sie also bestimmte Aspekte der Entwicklung von Gutenberg-Blöcken in zukünftigen Tutorials erfahren möchten, teilen Sie uns dies bitte über die Kommentare mit.
