Share
Der neue WordPress-Editor (Codename Gutenberg) wird in Version 5.0 veröffentlicht. Jetzt ist der perfekte Zeitpunkt, um sich damit vertraut zu machen, 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 Posts und Seiten erstellen können.
Im vorigen Beitrag haben wir gesehen, wie man die Create-guten-Block Toolkit zum Erstellen eines Plugins, das einen Beispielblock enthält, mit dem wir arbeiten können. Wir können dies bei Bedarf problemlos erweitern, aber es ist eine gute Idee zu wissen, wie man einen Block von Grund auf erstellt, um alle Aspekte der Gutenberg-Blockentwicklung vollständig zu verstehen.
In diesem Beitrag erstellen wir einen zweiten Block in unserem Mein-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.
Zunächst lernen wir jedoch, wie Block-Skripts und -Stile in die Warteschlange gestellt werden, bevor wir uns dem wichtigsten widmen registerBlockType () Funktion, die für die Erstellung von Blöcken in Gutenberg von grundlegender Bedeutung ist.
Um das für unsere Blöcke erforderliche JavaScript und CSS hinzuzufügen, können wir zwei neue von Gutenberg bereitgestellte WordPress-Hooks verwenden:
Accentsconagua
enqueue_block_editor_assetsenqueue_block_assetsDiese sind nur verfügbar, wenn das Gutenberg-Plugin aktiv ist, und sie funktionieren auf ähnliche Weise wie Standard-WordPress-Hooks für Enqueueing-Skripts. Sie sind jedoch speziell für die Arbeit mit Gutenberg-Blöcken vorgesehen.
Das enqueue_block_editor_assets hook fügt dem Admin-Editor nur Skripte und Stile hinzu. Dies macht es ideal für das Einreihen von JavaScript, um Blöcke und CSS zu registrieren, um Elemente der Benutzeroberfläche für Blockeinstellungen zu gestalten.
Für die Blockausgabe möchten Sie jedoch, dass Ihre Blöcke im Editor das gleiche darstellen wie am Frontend. Verwenden enqueue_block_assets macht dies einfach, da Stile automatisch sowohl im Editor als auch im 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 Skripts und Stile in die Warteschlange stellen nur am vorderen Ende. Es gibt keinen WordPress-Hook, mit dem Sie dies direkt ausführen können, aber Sie können dies umgehen, indem Sie eine bedingte Anweisung in der enqueue_block_assets Hook Callback-Funktion.
add_action ('enqueue_block_assets', 'load_front_end-Skripts'); function load_front_end scripts () if (! is_admin () // Enqueue-Frontend nur Skripts und Stile hierUm Skripte und Stile mit diesen beiden neuen Hooks tatsächlich in die Warteschlange zu stellen, können Sie den Standard verwenden wp_enqueue_style () und wp_enqueue_scripts () funktioniert wie gewohnt.
Sie müssen jedoch sicherstellen, dass Sie die korrekten Skriptabhängigkeiten verwenden. Für das Einreihen von Skripts in den Editor können Sie die folgenden Abhängigkeiten verwenden:
Array ('WP-Blöcke', 'WP-I18n', 'WP-Element', 'WP-Komponenten') Array ('WP-Edit-Blöcke') Wenn Sie Stile sowohl für den Editor als auch für das Frontend einreihen, können Sie diese Abhängigkeit verwenden:
Array ('WP-Blöcke')Erwähnenswert ist hier, dass die eigentlichen Dateien in unserer Mein-Custom-Block Plugin sind die kompiliert Versionen von JavaScript und CSS und nicht die Dateien, die den JSX- und Sass-Quellcode enthalten.
Dies ist nur zu beachten, wenn Sie Dateien manuell einreihen. Wenn Sie versuchen, rohen Quellcode zu erfassen, der React, ES6 + oder Sass enthält, treten zahlreiche Fehler auf.
Aus diesem Grund ist es nützlich, ein Toolkit wie z Create-guten-Block da es Skripte automatisch verarbeitet und in eine Warteschlange stellt!
Um einen neuen Block zu erstellen, müssen wir ihn bei Gutenberg durch Aufruf registrieren registerBlockType () und Übergeben des Blocknamens plus eines Konfigurationsobjekts. Dieses Objekt verfügt über einige Eigenschaften, die einer korrekten Erklärung bedürfen.
Zunächst wollen wir uns jedoch den Blocknamen ansehen. Dies ist der erste Parameter und ist eine Zeichenfolge, die aus zwei Teilen besteht, einem Namensraum und dem Blocknamen selbst, getrennt durch einen Schrägstrich.
Zum Beispiel:
registerBlockType ('block-namespace / blockname', // Konfigurationsobjekt);Wenn Sie mehrere Blöcke in einem Plugin registrieren, können Sie den gleichen Namespace verwenden, um alle Ihre Blöcke zu organisieren. Der Namespace muss jedoch für Ihr Plugin eindeutig sein, wodurch Namenskonflikte vermieden werden. Dies kann vorkommen, wenn ein Block mit demselben Namen bereits über ein anderes Plugin registriert wurde.
Der Zweite registerBlockType () Parameter ist ein Einstellungsobjekt und erfordert die Angabe einer Reihe von Eigenschaften:
Titel (Zeichenfolge): wird im Editor als durchsuchbarer Blockbezeichner angezeigtBeschreibung (optionale Zeichenfolge): Beschreibt den Zweck eines BlocksSymbol (optionales Dashicon- oder JSX-Element): Symbol, das einem Block zugeordnet istKategorie (Zeichenfolge): wo der Block im erscheint Blöcke hinzufügen DialogSchlüsselwörter (optionales Array): bis zu drei Schlüsselwörter, die bei Block-Suchen verwendet werdenAttribute (optionales Objekt): behandelt die dynamischen Blockdatenbearbeiten (Funktion): Eine Funktion, die Markierungen zurückgibt, die im Editor gerendert werden sollensparen (Funktion): Eine Funktion, die Markup zurückgibt, das auf dem Frontend wiedergegeben werden solluseOnce (optional boolean): Beschränken, dass der Block mehrmals hinzugefügt wirdunterstützt (optionales Objekt): Definiert blockunterstützte FunktionenAngenommen, wir verwenden JSX für die Blockentwicklung. Hier ein Beispiel registerBlockType () Aufruf könnte für einen sehr einfachen Block aussehen:
registerBlockType ('my-unique-namespace / ultimate-block'), title: __ ('The Best Block Ever', 'domain'), Symbol: 'wordpress', Kategorie: 'common', Schlüsselwörter: [__ ('sample ',' domain '), __ (' Gutenberg ',' domain '), __ (' block ',' domain '))], edit: () => Willkommen im Gutenberg-Editor!
, save: () => Wie schaue ich mir das Frontend an??
);Beachten Sie, dass wir keinen Eintrag für die aufgenommen haben Beschreibung, Attribute, useOnce, und unterstützt Eigenschaften? 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 keine Gedanken um die Angabe von Attributen machen.
Lassen Sie uns jetzt die registerBlockType () Konfigurationsobjekteigenschaften nacheinander detaillierter.
Beim Einfügen oder Suchen eines Blocks im Editor wird der Titel in der Liste der verfügbaren Blöcke angezeigt.
Sie wird auch zusammen mit der Blockbeschreibung, falls definiert, im Blockinspektorfenster angezeigt. Wenn der Blockinspektor momentan nicht sichtbar ist, können Sie das Zahnradsymbol in der oberen rechten Ecke des Gutenberg-Editors verwenden, um die Sichtbarkeit umzuschalten.
Sowohl das Titel- als auch das Beschreibungsfeld sollten idealerweise in i18n-Funktionen eingeschlossen sein, um die Übersetzung in andere Sprachen zu ermöglichen.
Derzeit sind fünf Blockkategorien verfügbar:
verbreitetFormatierungLayoutWidgetseinbettenDiese bestimmen den Kategoriebereich, in dem Ihr Block in der Liste aufgeführt ist Block hinzufügen Fenster.
Das Blöcke Tab enthält Gemeinsame Blöcke, Formatierung, Layout-Elemente, und Widgets Kategorien, während die Bettet ein Kategorie hat eine eigene Registerkarte.
Die Kategorien sind derzeit in Gutenberg festgelegt, dies kann sich jedoch in Zukunft ändern. Dies ist beispielsweise nützlich, wenn Sie mehrere Blöcke in einem einzigen Plugin entwickeln und möchten, dass alle unter einer gemeinsamen Kategorie aufgeführt werden, damit Benutzer sie leichter finden können.
Standardmäßig wird Ihrem Block das Schild-Dashicon zugewiesen. Sie können dieses jedoch überschreiben, indem Sie im Dashboard ein benutzerdefiniertes Dashicon angeben Symbol Feld.
Jedem Dashicon wird ein Präfix vorangestellt Dashicons- gefolgt von einer eindeutigen Zeichenfolge. Das Zahnradsymbol hat beispielsweise den Namen dashicons-admin-generic. Um dies als Blocksymbol zu verwenden, entfernen Sie einfach das Symbol Dashicons- Präfix, damit es erkannt wird, z. icon: 'admin-generic'.
Sie können Dashicons jedoch nicht nur als icon -Eigenschaft verwenden. Die Funktion akzeptiert auch ein JSX-Element. Dies bedeutet, dass Sie ein beliebiges Bild oder SVG-Element als Bausteinsymbol verwenden können.
Stellen Sie nur sicher, dass die Symbolgröße mit den anderen Blocksymbolen übereinstimmt (standardmäßig 20 x 20 Pixel).
Wählen Sie bis zu drei übersetzbare Schlüsselwörter aus, um Ihren Block hervorzuheben, wenn Benutzer nach einem Block suchen. Es empfiehlt sich, Schlüsselwörter zu wählen, die für die besten Ergebnisse eng mit der Funktionalität Ihres Blocks zusammenhängen.
Schlüsselwörter: [__ ('Suche', 'Domain'), __ ('für', 'Domain'), __ ('Ich', 'Domain'),]Sie können sogar den Namen Ihres Unternehmens und / oder Plugins als Schlüsselwörter angeben. Wenn Sie also mehrere Blöcke haben, können Benutzer mit der Eingabe Ihres Firmennamens beginnen und alle Ihre Blöcke werden in den Suchergebnissen angezeigt.
Das Hinzufügen von Schlüsselwörtern ist zwar völlig optional, aber es ist eine großartige Möglichkeit, um Benutzern das Auffinden von Blöcken zu erleichtern.
Attribute helfen bei der Verwaltung dynamischer Daten in einem Block. Diese Eigenschaft ist optional, da sie für sehr einfache Blöcke, die statischen Inhalt ausgeben, nicht benötigt wird.
Wenn sich Ihr Block jedoch mit Daten befasst, die geändert werden könnten (z. B. der Inhalt eines bearbeitbaren Textbereichs) oder Sie Blockeinstellungen speichern müssen, ist die Verwendung von Attributen der richtige Weg.
Attribute funktionieren, indem dynamische Blockdaten entweder in den in der Datenbank gespeicherten Post-Inhalten oder in Post-Meta gespeichert werden. In diesem Lernprogramm werden nur Attribute verwendet, die Daten zusammen mit dem Post-Inhalt speichern.
Um Attributdaten abzurufen, die im Post-Inhalt gespeichert sind, müssen wir angeben, wo sich diese im Markup befinden. Wir können dies tun, indem wir einen CSS-Selektor angeben, der auf die Attributdaten zeigt.
Wenn unser Block beispielsweise ein Ankertag enthielt, können wir dessen verwenden Titel Feld als unser Attribut wie folgt:
Attribute: Linktitel: Quelle: 'Attribut', Selektor: 'a', Attribut: 'Titel'
Hier ist der Attributname Linktitel, Dies ist eine beliebige Zeichenfolge und kann beliebig sein.
Beispielsweise können wir dieses Attribut verwenden, um den Linktitel zu speichern das wurde über ein Textfeld in den Blockeinstellungen eingegeben. Auf diese Weise wird das Titelfeld plötzlich dynamisch, und Sie können seinen Wert im Editor ändern.
Wenn der Beitrag gespeichert wird, wird der Attributwert in die Links eingefügt Titel Feld. Ähnlich ist beim Laden des Editors der Wert von Titel Das Tag wird aus dem Inhalt abgerufen und in das eingefügt Linktitel Attribut.
Es gibt mehrere Möglichkeiten, die Sie verwenden können Quelle um zu bestimmen, wie Blockinhalt über Attribute gespeichert oder abgerufen wird. Zum Beispiel können Sie die 'Text' Quelle, um den inneren Text aus einem Absatzelement zu extrahieren.
Attribute: Absatz: Quelle: 'Text', Selektor: 'P'
Sie können auch die Kinder source, um alle untergeordneten Knoten eines Elements in ein Array zu extrahieren und in einem Attribut zu speichern.
Attribute: editablecontent: source: 'children', Selektor: '.parent'
Dadurch wird das Element mit der Klasse ausgewählt .Elternteil und speichert alle untergeordneten Knoten in der bearbeitbarer Inhalt Attribut.
Wenn Sie keine Quelle angeben, wird der Attributwert in HTML-Kommentaren als Teil des Post-Markups gespeichert, wenn Sie in der Datenbank gespeichert werden. Diese Kommentare werden entfernt, bevor der Beitrag am Frontend dargestellt 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 empfehle einen Blick auf die Attributabschnitte des Gutenberg-Handbuchs, um weitere Informationen und Beispiele zu erhalten.
Das bearbeiten Diese Funktion steuert, wie Ihr Block in der Editoroberfläche angezeigt wird. Dynamische Daten werden an jeden Block als übergeben Requisiten, einschließlich aller benutzerdefinierten Attribute, die definiert wurden.
Es ist üblich, hinzuzufügen className = props.className an das Hauptblockelement, um eine für Ihren Block spezifische CSS-Klasse auszugeben. WordPress fügt dies nicht für Sie in den Editor ein. Es muss also manuell für jeden Block hinzugefügt werden, wenn Sie es einfügen möchten.
Verwenden props.className Dies ist Standard und wird empfohlen, da es die Möglichkeit bietet, CSS-Stile für jeden einzelnen Block anzupassen. Das Format der generierten CSS-Klasse lautet .wp-block- namespace - name. Wie Sie sehen, basiert dies auf dem Blocknamensraum / -namen und ist daher ideal, um als eindeutiger Blockbezeichner verwendet zu werden.
Für die Editierfunktion müssen Sie eine gültige Markup-Funktion über das Symbol zurückgeben machen() Methode, die dann verwendet wird, um Ihren Block im Editor zu rendern.
Ähnlich wie bearbeiten Funktion, sparen zeigt eine visuelle Darstellung Ihres Blocks an, jedoch am Frontend. Es empfängt auch dynamische Blockdaten (falls definiert) über Requisiten.
Ein Hauptunterschied ist das props.className ist innen nicht verfügbar sparen, Dies ist jedoch kein Problem, da es automatisch von Gutenberg eingefügt wird.
Das unterstützt Die Eigenschaft akzeptiert ein Objekt mit booleschen Werten, um zu bestimmen, ob Ihr Block bestimmte Kernfunktionen unterstützt.
Die verfügbaren Objekteigenschaften können Sie wie folgt einstellen.
Anker (Standardwert false): Ermöglicht das direkte Verknüpfen mit einem bestimmten BlockcustomClassName (true): Fügt im Blockinspektor ein Feld hinzu, um einen benutzerdefinierten Wert zu definieren Klassenname für den Block Klassenname (true): fügt a hinzu Klassenname auf das Blockwurzelelement basierend auf dem Blocknamenhtml (true): Ermöglicht die direkte Bearbeitung des BlockmarkupsuseOnce EigentumDies ist eine nützliche Eigenschaft, mit der Sie verhindern können, dass ein Block einer Seite mehrmals hinzugefügt wird. Ein Beispiel dafür ist der Kern Mehr block, der einer Seite nicht hinzugefügt werden kann, wenn bereits vorhanden.
Wie Sie sehen können, einmal die Mehr Block wurde hinzugefügt, das Blocksymbol ist ausgegraut und kann nicht ausgewählt werden. Das useOnce Eigenschaft ist auf gesetzt falsch standardmäßig.
Es ist jetzt an der Zeit, das Wissen, das wir bisher erworben haben, zu nutzen, um ein solides Arbeitsbeispiel eines Blocks zu implementieren, der etwas interessanter macht, als nur statische Inhalte auszugeben.
Wir werden einen Block erstellen, um ein über eine externe Anforderung erhaltenes Zufallsbild an die PlaceIMG-Website auszugeben, die ein Zufallsbild zurückgibt. Außerdem können Sie die Bildkategorie auswählen, die über ein Auswahl-Dropdown-Steuerelement zurückgegeben wird.
Der Einfachheit halber fügen wir unseren neuen Block hinzu Mein-Custom-Block Plugin, anstatt ein brandneues Plugin zu erstellen. Der Code für den Standardblock befindet sich im / src / block Ordner hinzufügen, fügen Sie einen weiteren Ordner hinzu / src namens Zufälliges Bild und fügen Sie drei neue Dateien hinzu:
Alternativ können Sie das kopieren / src / block Ordner und benennen Sie es um, wenn Sie nicht alles von Hand eingeben möchten. Stellen Sie jedoch sicher, dass Sie umbenennen block.js zu index.js im neuen Blockordner.
Wir benutzen index.js Für den Dateinamen des Hauptblocks können wir die import-Anweisung darin vereinfachen blocks.js. Anstatt den Pfad und den vollständigen Dateinamen des Blocks anzugeben, können Sie einfach den Pfad zum Blockordner und angeben einführen sucht automatisch nach einem index.js Datei.
Aufmachen /src/blocks.js und fügen Sie einen Verweis auf unseren neuen Block oben in der Datei direkt unter der vorhandenen import-Anweisung ein.
import './random-image';
Innerhalb /src/random-image/index.js, Fügen Sie den folgenden Code hinzu, um unseren neuen Block zu starten.
// CSS importieren. import './style.scss'; import './editor.scss'; const __ = wp.i18n; const registerBlockType, query = wp.blocks; registerBlockType ('cgb / block-random-image', title: __ ('Random Image')), icon: 'format-image', Kategorie: 'common', Schlüsselwörter: [__ ('random') image ')], edit: Funktion (Requisiten) return ( Zufälliger Bildblock (Editor)
); , speichern: Funktion (Requisiten) Return ( Zufälliger Bildblock (Frontend)
); );Dies legt das Framework unseres Blocks fest und ähnelt dem Boilerplate-Blockcode, der vom erzeugt wird Create-guten-Block Werkzeugkasten.
Wir importieren zunächst den Editor und die Front-End-Stylesheets und extrahieren anschließend einige häufig verwendete Funktionen wp.i18n und wp.blöcke in lokale Variablen.
Innerhalb registerBlockType (), Werte wurden für die eingegeben Titel, Symbol, Kategorie, und Schlüsselwörter Eigenschaften, während die bearbeiten und sparen Funktionen geben derzeit nur statische Inhalte aus.
Fügen Sie den Zufallsbildblock einer neuen Seite hinzu, um die bisher generierte Ausgabe anzuzeigen.
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.
Sie fragen sich vielleicht, warum wir keinen PHP-Code hinzufügen mussten, um zusätzliche Block-Skripts aufzunehmen. Die Blockskripte für die Mein-Custom-Block Block werden über init.php, Wir müssen jedoch keine Skripte speziell für unseren neuen Block einfangen, da dies von uns erledigt wird Create-guten-Block.
Solange wir unsere Hauptblockdatei in importieren src / blocks.js (wie oben) dann müssen wir keine zusätzliche Arbeit erledigen. Der gesamte JSX-, ES6 + - und Sass-Code wird automatisch in die folgenden Dateien kompiliert:
Diese Dateien enthalten JavaScript und CSS für alle Blöcke. Daher muss nur ein Satz von Dateien in die Warteschlange aufgenommen werden, unabhängig von der Anzahl der erstellten Blöcke!
Wir sind jetzt bereit, unserem Block ein wenig Interaktivität hinzuzufügen. Dazu können Sie zunächst ein Attribut zum Speichern der Bildkategorie hinzufügen.
Attribute: Kategorie: Typ: 'Zeichenfolge', Standard: 'Natur'
Dadurch wird ein Attribut erstellt Kategorie, die speichert eine Zeichenfolge mit einem Standardwert von 'Natur'. Wir haben im Markup keinen Ort 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, die wir über ein Auswahl-Dropdown-Steuerelement ausführen können. Aktualisieren Sie die bearbeiten Funktion auf Folgendes:
edit: Funktion (Requisiten) const Attribute: Kategorie, SetAttributes = Requisiten; function setCategory (event) const selected = event.target.querySelector ('option: checked'); setAttributes (category: selected.value); event.preventDefault (); Rückkehr ( Aktuelle Kategorie ist: Kategorie ); So wird es aussehen:
Dies unterscheidet sich ziemlich von der vorherigen Statik bearbeiten Funktion, also lassen Sie uns die Änderungen durchlaufen.
Zuerst haben wir ein Auswahl-Dropdown-Steuerelement mit mehreren Auswahlmöglichkeiten hinzugefügt, die den auf der PlaceIMG-Site verfügbaren Bildkategorien entsprechen.
Wenn sich der Dropdown-Wert ändert, wird der setCategory Funktion wird aufgerufen, die die aktuell ausgewählte Kategorie findet und dann die setAttributes Funktion. 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 zurückgegeben bearbeiten Funktion, die die Ausgabenachricht aktualisiert.
Wir müssen einen letzten Schritt ausführen, um das Zufallsbild anzuzeigen. Wir müssen eine einfache Komponente erstellen, die die aktuelle Kategorie übernimmt und eine ausgibt
Die Anfrage, die wir an PlaceIMG richten müssen, hat folgende Form: https://placeimg.de/
Wir behalten die Breite und Höhe für jetzt fest, sodass wir nur die aktuelle Kategorie am Ende der Anforderungs-URL hinzufügen müssen. Zum Beispiel, wenn die Kategorie war 'Natur' Dann lautet die vollständige Anforderungs-URL: https://placeimg.com/320/220/nature.
Füge hinzu ein Zufälliges Bild Komponente oben registerBlockType ():
function RandomImage (category) const src = 'https://placeimg.com/320/220/' + Kategorie; Rückkehr;
Um es zu verwenden, fügen Sie es einfach in die Bearbeitungsfunktion ein und entfernen Sie die statische Ausgabenachricht. Wenn wir gerade dabei sind, machen Sie dasselbe für die Speicherfunktion.
Die volle index.js Die Datei sollte jetzt so aussehen:
// CSS importieren. import './style.scss'; import './editor.scss'; const __ = wp.i18n; const registerBlockType, query = wp.blocks; function RandomImage (category) const src = 'https://placeimg.com/320/220/' + Kategorie; Rückkehr); , save: Funktion (Requisiten) const Attribute: Kategorie = Requisiten; Rückkehr (
Fügen Sie schließlich (für jetzt) die folgenden Stile hinzu editor.scss um einen farbigen Rahmen um das Bild zu setzen.
.wp-block-cgb-block-random-image select padding: 2px; Marge: 7px 0 5px 2px; Grenzradius: 3px;
Sie benötigen auch einige Stile in style.css.
.wp-block-cgb-block-random-image background: # f3e88e; Farbe: #fff; Grenze: 2px fest # ead9a6; Grenzradius: 10px; Polsterung: 5px; Breite: -webkit-fit-content; Breite: -moz-fit-content; Breite: Fit-Inhalt; img border-radius: vererben; Rand: 1px gepunktet # caac69; Anzeige: Raster;
Immer wenn die Seite im Editor oder im Frontend aktualisiert wird, wird ein neues Zufallsbild angezeigt.
Wenn dasselbe Bild immer wieder angezeigt wird, können Sie eine erneute Aktualisierung durchführen, um zu verhindern, dass das Bild aus Ihrem Browser-Cache geliefert wird.
In diesem Tutorial haben wir eine ganze Reihe von Themen behandelt. Wenn Sie den ganzen Weg geschafft haben, sollten Sie sich den wohlverdienten Rücken klopfen! Die Entwicklung von Gutenberg-Blöcken kann sehr viel Spaß machen, aber es ist definitiv eine Herausforderung, jedes Konzept beim ersten Kontakt zu begreifen.
Auf dem Weg haben wir gelernt, wie man Block-Skripte und -Stile in die Warteschlange packt registerBlockType () Funktion in der Tiefe.
Wir folgten dem, indem wir die Theorie in die Praxis umsetzten und einen benutzerdefinierten Block von Grund auf erstellen, um ein zufälliges Bild aus einer bestimmten Kategorie mithilfe des PlaceIMG-Webservice anzuzeigen.
Im nächsten und letzten Teil dieser Lernprogrammreihe fügen wir über das Einstellungsfeld im Blockinspektor weitere Funktionen zu unserem Zufallsbildblock hinzu.
Wenn Sie dieses Tutorial mitverfolgt haben und nur mit dem Code experimentieren möchten, ohne alles einzugeben, können Sie das Finale herunterladen Mein-Custom-Block Plugin im nächsten Tutorial.
