Der vollständige Leitfaden für Gutenberg-Blockmuster (I)

Letzte Woche hielt Matt Mullenweg, wie es jedes Jahr Tradition ist, seine (in diesem Fall virtuelle) Präsentation State of The Word , in der er eine kurze Zusammenfassung des aktuellen Stands und neuer Funktionen von WordPress vorstellte.

Matt konzentriert sich mehr denn je darauf, dass wir uns in die Erfahrung verlieben, die der Gutenberg-Blockeditor bietet. Eine der neuen Funktionen, die Matt hervorgehoben hat und die mit WordPress Version 5.5 geliefert wurde, sind Blockmuster . Ich dachte, es wäre interessant, diesen vollständigen Leitfaden für sie zu erstellen.

Der Leitfaden ist in drei Beiträge unterteilt und wir werden uns mit den folgenden Themen befassen:

1. Einführung in Blockmuster
2. Fügen Sie ein Muster auf einer Seite ein
3. Vordefinierte Muster und andere in Verzeichnissen verfügbar
4. Fügen Sie Ihrer Website Muster hinzu, die in Verzeichnissen verfügbar sind
5. So erstellen Sie ein Muster von Grund auf neu
6. So erstellen Sie ein Muster, wenn Sie kein Entwickler sind
7. So konvertieren Sie wiederverwendbare Blöcke in Blockmuster
8. Themen mit Blockmustern
9. Offizielle Dokumentation.

Also, ohne weitere Verzögerung, fangen wir an!

1. Einführung in Blockmuster

Als Gutenberg ankam, war die große Veränderung gegenüber dem klassischen Editor, den wir früher in WordPress hatten, die Einführung des „Block“-Konzepts. Alles sollte ein Block sein: der Beitragstitel, seine Absätze, Listen, Bilder … jeder von ihnen war ein Block mit eigenen Anpassungseigenschaften, um Schriftgröße, Titel, Ausrichtung usw. festzulegen.

Die Blöcke wurden schnell ausgefeilter und jetzt haben wir Bildergalerien, Medien-/Textblöcke oder sogar Blöcke, die andere Blöcke enthalten.

Gleichzeitig haben viele Entwickler auch eine große Anzahl von Blöcken mit einzigartigen Funktionen bereitgestellt, damit Sie das Design Ihrer Seiten verbessern können. Zum Beispiel haben wir bei Nelio den Nelio Compare Images entwickelt, um zwei Bilder mit einem einfachen Schieberegler zu vergleichen:

Es gab nicht nur eine Explosion von Blöcken, die in Plugins und Themes zu finden sind, ihre Fähigkeiten haben sich auch mit den verschiedenen Versionen von WordPress weiterentwickelt. So können Sie derzeit wiederverwendbare Blöcke erstellen und damit sogar eine Seiten- oder Beitragsvorlage erstellen.

In Fortführung der Idee, vordefinierte Designs zu haben, die schnell und einfach wiederverwendet werden können, sind mit WordPress Version 5.5 die Blockmuster angekommen. Die Idee eines Blockmusters ist sehr einfach: Es handelt sich um vordefinierte Abschnitte oder Fragmente, die aus einer Gruppe von Blöcken bestehen, die Sie bei der Erstellung von Seiten und Beiträgen verwenden können. Diese Muster können so einfach sein wie ein Abschnitt mit zwei Knöpfen oder ein Preisabschnitt mit auffälligen und komplexen Designs.

2. Fügen Sie ein Muster auf einer Seite ein

Beginnen wir mit den Grundlagen, wie fügt man ein neues Muster auf einer Seite ein? Sehr leicht! Wie bei den Blöcken müssen Sie zum Einfügen eines Musters nur auf die Schaltfläche + oben links in Ihrem Editor klicken und, anstatt einen Block hinzuzufügen, die Registerkarte Muster auswählen. Dort sehen Sie ein kleines Dropdown-Menü mit den Mustertypen, die Sie auswählen können, den vordefinierten von WordPress, denen des von Ihnen installierten Designs und allen anderen, die Sie mit einem Plugin installiert haben.

Wählen Sie das Muster aus, das Ihnen am besten gefällt, und sehen Sie, wie die Blöcke, aus denen es besteht, in Ihre Seite eingefügt werden:

Nachdem Sie das Muster eingefügt haben, können Sie jeden der Blöcke wie bisher ändern. Auch wenn die Blöcke dieses Musters gruppiert sind, können Sie auch die Eigenschaften der Gruppe als Ganzes ändern. Einfach, oder?

3. Standardmuster und weitere Muster aus Verzeichnissen von Drittanbietern

Die Version WordPress 5.5 enthält eine Reihe vordefinierter Blockmuster, die Sie jetzt zum Erstellen Ihrer Seiten verwenden können. Sie müssen nur auf die oben erwähnte Schaltfläche + klicken, um die auf Ihrer Website verfügbaren Muster zu sehen.

Außerdem kann Ihr aktives Thema auch seine eigenen Blockmuster definieren. Zum Beispiel enthält das WordPress-Theme Twenty Seventeen oder Twenty Twenty-One einige Blockmuster, ebenso GoDaddys und Genesis Blocks, um nur einige Beispiele zu nennen.

Nach der Veröffentlichung von WordPress 5.0 hatten wir eine Explosion von Blöcken, und wir sehen jetzt das gleiche Ergebnis bei Blockmustern: Sie können Blöcke und Muster sehr einfach herunterladen und auf Ihrer Website installieren, wie ich später erklären werde. Hier stehen Ihnen zwei Netze von Blöcken und Mustern zur Verfügung, obwohl ich sicher bin, dass es bald mehr geben wird:

• Shareablock Patterns von Jeffrey Carandang – Eine fantastische Website, auf der Sie viele Blöcke, Vorlagen und Muster teilen und erhalten können, die Sie herunterladen und auf Ihrer Website installieren können.

• Munir Kamal’s Gutenberg Hub – wo Sie auch eine Reihe von Blöcken, Vorlagen und Mustern finden.

Es gibt auch das Redux Framework-Plugin , das eine Bibliothek mit über 1000 Blöcken, Vorlagen und Mustern von Drittanbietern (einschließlich der in den obigen Verzeichnissen verfügbaren) zum Einfügen in Ihre Seiten bietet. Mit dem Plugin können Sie bis zu 5 kostenlose Muster herunterladen und dann auf die kostenpflichtige Version upgraden.

4. Fügen Sie Ihrer Site Muster hinzu, die in Verzeichnissen verfügbar sind

Wie ich bereits erwähnt habe, kannst du das Redux Framework Plugin verwenden, um Muster von Shareablock und GutenbergHub einfach hinzuzufügen. Wenn Sie ein professioneller WordPress-Website-Designer sind, ist es sicherlich eine gute Option, immer sehr schnell so viele Muster zu finden, wie Sie möchten. Sie können aber auch neue Blockmuster verwenden, ohne ein Premium-Plugin zu benötigen. Mal sehen wie.

Fügen Sie ein Shareablock-Muster hinzu

Im Fall von Shareablock müssen Sie zum Installieren eines Musters (und natürlich eines Blocks oder einer Vorlage) es nur aus dem Internet auswählen und auf die Schaltfläche Jetzt herunterladen klicken.

Beim ersten Mal werden Sie nach einer E-Mail-Adresse gefragt, damit Sie einen Benutzernamen und ein Passwort erhalten.

In der E-Mail befindet sich ein Link, um sich auf ihrer Website anzumelden; Melden Sie sich an und Sie können jetzt das Muster herunterladen, an dem Sie interessiert sind. Wählen Sie es einfach aus und klicken Sie erneut auf Jetzt herunterladen , damit Sie das Blockmuster in Ihrer E-Mail erhalten.

Nachdem Sie auf den in der E-Mail bereitgestellten Link geklickt haben, können Sie auf das Internet zugreifen, um die .json -Datei des Musters herunterzuladen. Ziehen Sie es nach dem Herunterladen einfach in den WordPress-Blockeditor und Sie sehen automatisch alle Blöcke, aus denen das Muster besteht.

Es ist ein umständlicher Prozess, aber es erledigt die Arbeit. Leider werden Sie feststellen, dass das Blockmuster nicht in Ihrer Bibliothek angezeigt wird …

Fügen Sie ein Gutenberg-Hub-Muster hinzu

Das Hinzufügen eines Musters aus Gutenberg Hub ist einfacher. Wählen Sie wie zuvor zuerst das Muster aus, das Sie kopieren möchten.

Rechts neben dem Muster sehen Sie die Schaltfläche Code kopieren . Klicken Sie auf die Schaltfläche, um sie in Ihre Zwischenablage zu kopieren, und fügen Sie sie dann in Ihren Gutenberg-Editor ein. Dadurch wird der Block in Ihren Editor eingefügt, die Bibliothek jedoch übersprungen.

Aber warte! Nicht so schnell. Wenn Sie die resultierenden Blöcke vollständig anpassen möchten, empfiehlt Munir Kamal die Installation des kostenlosen Plugins EditorPlus, das dem Editor neue Blöcke hinzufügt und Gutenberg mit erweiterten Designsteuerelementen, Schriftarten, Symbolen, Trennlinien, Animationen und vielem mehr erweitert Merkmale.

Wenn Sie dies tun, sehen Sie in der rechten Seitenleiste des Editors, dass Sie über erweiterte Steuerelemente verfügen, um das Design des kopierten Musters zu ändern.

Jetzt wissen Sie, was Blockmuster sind, wo Sie sie finden und wie Sie sie in Ihre Website einfügen, um großartige Designs zu erstellen. Verpassen Sie nicht den nächsten Beitrag, in dem Sie lernen, wie Sie Ihre eigenen Muster erstellen!

Vorgestelltes Bild von Raul Cacho Oses auf Unsplash .