Builder-Grundlagen: Erkundung von Blockmustern

Die neueste Version von WordPress wird Ende des Monats am 25. Januar eintreffen. Vielleicht ist Version 5.9 zum Zeitpunkt, an dem Sie dies lesen, bereits für die Welt freigegeben worden. Ich könnte nicht aufgeregter sein. Es gibt unzählige Verbesserungen und neue Funktionen, von denen wir viele in zukünftigen Artikeln behandeln werden, aber das heutige Thema sind Block-„Muster“.

Muster sind zwar nicht neu für WordPress, erhalten jedoch aufgrund der durch Version 5.9 ermöglichten Funktionen, insbesondere blockbasierte Themen, viel neue Aufmerksamkeit. Muster werden schnell zu einer grundlegenden Komponente von WordPress selbst und scheinen bereit zu sein, die Art und Weise, wie wir Websites entwerfen und erstellen, neu zu gestalten. Gibt es also einen besseren Zeitpunkt, um zu erkunden, was Blockmuster wirklich sind und wie Sie sie verwenden können?

Die Grundlagen

Bevor wir uns mit Blockmustern befassen, beginnen wir mit den Grundlagen und stellen einige Begriffe auf. WordPress hat sich in den letzten Jahren ziemlich verändert. Es ist gut sicherzustellen, dass wir alle auf derselben Seite stehen.

Block

Ein Block ist die grundlegende „Einheit“ des Inhalts in WordPress. Von einem Textabschnitt bis hin zu einer Bildergalerie kann ein Block fast jede Form annehmen. Ich stelle mir gerne ein einzelnes Stück LEGO vor . Obwohl jeder Block anders aussehen oder eine einzigartige Funktion erfüllen kann, passen sie alle gut zusammen, um den Inhalt einer Webseite zu erstellen.

Muster

Ein Blockmuster ist einfach eine vordefinierte Sammlung von Blöcken, die ein bestimmtes Layout bilden. Ein Muster kann ein einzelner Block sein oder aus mehreren bestehen. Wie wir später sehen werden, machen Muster das Erstellen komplexer Seitenlayouts einfach und unterhaltsam.

Editor

Der Editor ist die Benutzeroberfläche, die wir verwenden, um Seiten und Beiträge aus Blöcken zu erstellen. Seit seiner Einführung in WordPress 5.0 im Jahr 2018 hat der Editor viele Namen. Dazu gehören Gutenberg, Gutenberg-Editor, Block-Editor und andere. Für die Zwecke dieses Artikels verwenden wir einfach den Begriff „Editor“.

Inserter

Innerhalb des Editors wird der Inserter verwendet, um der Seite Blöcke und Muster hinzuzufügen. Sie können auf den Inserter zugreifen, indem Sie auf das blaue (+) Zeichen in der oberen linken Ecke des Editors klicken.

Der folgende Screenshot veranschaulicht unsere definierten Begriffe.

Warum Blockmuster?

Der Editor versetzt uns in die Lage, praktisch jedes Design aus Blöcken zu erstellen, sei es ein einfacher Blog-Beitrag oder eine aufwändige Zielseite. Nehmen wir genau diesen Artikel als Beispiel. Was Sie gerade lesen, ist ein Absatzblock. Die Überschrift oben ist ein Überschriftenblock und der Screenshot ist nur ein Bildblock. Das Hinzufügen dieser Inhaltselemente zur Seite war einfach. Ich öffnete den Inserter, fand den passenden Block und klickte zum Einfügen.

Kurztipp: Wussten Sie, dass Blöcke auch mit dem Schrägstrich-Befehl eingefügt werden können? Beginnen Sie einen neuen Absatz mit der Taste „/“ und eine Liste der verfügbaren Blöcke wird angezeigt. Die Eingabe zusätzlicher Buchstaben verfeinert die Suchergebnisse. Versuche es!

Wie wäre es mit etwas komplizierterem? Betrachten Sie die folgende Preistabelle, ein Design, das häufig verwendet wird, um Produkte oder Dienstleistungen auf einer Website zu präsentieren.

Wenn Sie genau hinschauen, können Sie vielleicht die einzelnen Blöcke erkennen, die verwendet wurden, um dieses Layout zu erstellen. Die Basis ist ein Säulenblock mit drei gleich beabstandeten Säulen. In jedem Spaltenblock befindet sich ein Trennzeichen-, Überschriften-, Absatz-, Schaltflächen- und Abstandsblock. Wie viele konnten Sie entdecken?

Tatsächlich besteht diese Preistabelle aus 25 einzelnen Blöcken. Unabhängig von Ihrem Kenntnisstand mit WordPress wäre es sowohl mühsam als auch ein bisschen herausfordernd, dieses Layout von Grund auf neu zu replizieren.

Stellen Sie sich nun vor, diese Gruppe von 25 Blöcken wäre bereits für Sie konfiguriert. Mit einem Klick können Sie die komplette Preistabelle einfügen und an Ihre individuellen Bedürfnisse anpassen. Noch besser, was wäre, wenn Ihnen eine riesige Sammlung von Designs zur Verfügung stünde, von denen jedes zur Ästhetik Ihres Themas passt? Denken Sie an kreative Bild- und Textlayouts, Handlungsaufforderungen, Kopfzeilen, Fußzeilen und sogar ganzseitige Layouts. Diese Art von „Starter-Content“ würde viel Zeit sparen und den Editor sogar für neuere WordPress-Benutzer zugänglicher machen.

Hier kommen Blockmuster ins Spiel. Die obige Preistabelle ist eigentlich ein Muster, das im kommenden Twenty Twenty-Two-Theme enthalten ist, das zusammen mit WordPress 5.9 veröffentlicht wird!

Hoffentlich hat diese kleine Übung gezeigt, warum ich so begeistert von dem Potenzial von Blockmustern bin, aber wie verwenden wir sie tatsächlich?

So verwenden Sie Muster

Ähnlich wie Blöcke können Muster mit dem Inserter zu einer Seite hinzugefügt werden. Navigieren Sie bei geöffnetem Inserter zur Registerkarte „Muster“, die alle verfügbaren Muster nach Kategorien unterteilt anzeigt. Wählen Sie das für Sie passende Layout aus und klicken Sie zum Einfügen. Sie können dann die einzelnen Blöcke, aus denen das Muster besteht, genau wie jeden anderen Block bearbeiten. Die Anzahl der Muster, die Sie einfügen können, ist unbegrenzt. Mischen und kombinieren Sie, um einzigartige Seitendesigns zu erstellen.

Während der Inserter einfachen Zugriff auf Blockmuster bietet, werden Sie feststellen, dass die Vorschau jedes Musters ziemlich klein ist und sie alle in einer einzigen Spalte gestapelt sind. Es kann schwierig sein, Layouts zu visualisieren und zu vergleichen, was die Auswahl des richtigen Layouts schwierig macht.

Um dieses Problem zu beheben, enthält WordPress 5.9 den Pattern Explorer. Auf diese aufregende neue Funktion können Sie zugreifen, indem Sie auf die Schaltfläche „Erkunden“ neben dem Dropdown-Menü „Kategorien“ auf der Registerkarte „Muster“ klicken.

Der Explorer öffnet ein modales Fenster, das ein verbessertes Browsing-Erlebnis mit den in einem Raster angezeigten Mustern bietet. Sie können auch einfach nach Kategorien durchsucht oder gefiltert werden.

Der obige Screenshot ist die erste Iteration des Muster-Explorers. Zukünftige WordPress-Versionen werden voraussichtlich die Funktionalität des Explorers erweitern. Aktuelle Experimente fügen Vorschauen für Mobilgeräte/Tablets und die Option hinzu, Muster einzeln im Gegensatz zum Rasterlayout zu demonstrieren. Auch wenn noch nichts bestätigt ist, halten Sie ab Mitte 2022 Ausschau nach zusätzlichen Verbesserungen in WordPress 6.0.

Bei all dieser Diskussion über Muster fragen Sie sich vielleicht, woher sie eigentlich kommen?

Wo sie zu finden sind

Muster können auf eine von drei Arten registriert werden, entweder über Ihr aktuelles Design, ein Plugin eines Drittanbieters oder WordPress selbst über das Musterverzeichnis. Lassen Sie uns jede Methode untersuchen.

Thema

Ihr Thema wird wahrscheinlich der direkteste Weg sein, Muster auf Ihrer Website verfügbar zu machen. Wie wir in der obigen Preistabelle gesehen haben, enthalten viele blockbasierte Themen ihre eigenen maßgeschneiderten Musterkollektionen. Dies ist nur eine weitere Möglichkeit für Themen, sich zu differenzieren, und ein robuster Satz von Layoutoptionen wird für die Benutzer ein großer Vorteil sein. Zum Zeitpunkt des Schreibens wird das Thema Twenty Twenty-Two mit über 60 ausgeliefert!

Musterverzeichnis (WordPress)

Beginnend mit der Veröffentlichung von WordPress 5.9 wird WordPress seine eigenen Muster über das Musterverzeichnis bereitstellen.

Das Pattern-Verzeichnis ist ein von der Community betriebenes Repository von Mustern, ähnlich wie das WordPress-Plugin und die Themen-Repositorys, und wird ab der Version 5.9 für öffentliche Einreichungen geöffnet sein. Alle eingereichten und genehmigten Muster stehen Ihnen direkt zum Durchsuchen und Einfügen im Muster-Explorer zur Verfügung. Dies bedeutet, dass WordPress-Benutzer Zugriff auf Hunderte, wenn nicht Tausende von Blockmustern haben.

Schneller Tipp: Einige Themes können Muster deaktivieren, die von WordPress aus dem Musterverzeichnis enthalten sind. Dies geschieht häufig, wenn Theme-Entwickler ihre eigenen Mustersammlungen einbinden und eine besser kuratierte Benutzererfahrung bieten möchten.

Plugins von Drittanbietern

Endlich haben wir Plugins. Da es Muster schon seit einigen Jahren gibt, haben viele Plugins von Drittanbietern, wie Genesis Blocks und Redux, umfangreiche Musterbibliotheken erstellt. Oft sind diese Bibliotheken nicht direkt in Funktionen wie den Muster-Explorer integriert und verfügen über benutzerdefinierte Blöcke, die im WordPress-Kern nicht zu finden sind. Sie neigen auch dazu, ihre eigenen Methoden zum Einfügen von Mustern zu verwenden, aber ich gehe davon aus, dass viele mit der Zeit anfangen werden, sich an den neuen standardisierten Ansatz von WordPress anzupassen.

Wenn Sie nach Nischenblöcken und -layouts suchen, während das Musterverzeichnis weiter reift, oder Sie kein Thema mit eigenen Mustern verwenden, empfehle ich auf jeden Fall, zu erkunden, was Plugins von Drittanbietern zu bieten haben.

Die Zukunft der Muster

WordPress 5.9 wird viele Verbesserungen für Blockmuster bringen. Wie wir bereits besprochen haben, erleichtert der Muster-Explorer die Auswahl des richtigen Designs für Ihre Website. Das Pattern-Verzeichnis gibt Ihnen Zugriff auf eine riesige Sammlung von Community-erstellten Patterns, die sich nahtlos in Ihr Design integrieren lassen.

Während Sie immer in der Lage sein werden, einzigartige Designs aus einzelnen Blöcken zu erstellen, glaube ich, dass die meisten von uns direkt zum Muster-Explorer gehen werden. Wir werden ein Layout auswählen, entweder eines, das von unserem Thema oder aus dem Verzeichnis bereitgestellt wird, und dann nach Bedarf optimieren. Ich weiss dass ich werde.

Darüber hinaus können wir davon ausgehen, dass neue blockbasierte Themen danach beurteilt werden, wie umfangreich ihre Sammlung integrierter Blockmuster ist. Themen mit über hundert Mustern, die alle ordentlich kategorisiert sind und eine breite Palette von Anwendungsfällen abdecken, werden wahrscheinlich zur Norm werden. Während die Ästhetik eines Themas wichtig ist, ist es von größter Bedeutung, den Benutzern die Tools zur Verfügung zu stellen, die sie benötigen, um mühelos schöne Webseiten zu erstellen.

Muster sind die Zukunft von WordPress, und die Zukunft ist rosig.

Einpacken

In diesem Artikel haben wir uns angesehen, was Blockmuster sind, wie Sie sie verwenden können und warum sie die Art und Weise, wie wir WordPress-Websites erstellen, grundlegend verändern werden. Im nächsten Builder Basics-Artikel werden wir etwas tiefer eintauchen und Ihnen beibringen, wie Sie tatsächlich Ihre eigenen Muster erstellen!

Also, was hältst du von Mustern? Verwenden Sie sie auf Ihrer Website? Haben Sie Fragen, die in diesem Artikel nicht behandelt wurden? Lass es uns in den Kommentaren wissen.