Aufbau einer Musterbibliothek von Gutenberg-Blöcken
Veröffentlicht: 2021-07-19Gutenberg steht für einen großen Wandel hin zu musterbasiertem Webdesign. In diesem Artikel werde ich die Ansätze diskutieren, die wir bei der Erstellung unserer eigenen flexiblen Bibliothek benutzerdefinierter Gutenberg-Blöcke verfolgt haben.
Hintergrund
Die Veröffentlichung von Gutenberg im Dezember 2018 stellte die größte Änderung in WordPress seit seiner Einführung dar. Die neue blockbasierte „Drag & Drop“-Oberfläche ändert die Art und Weise, wie Entwickler Themes erstellen, wie Designer die Aufteilung von Websites in Komponenten in Betracht ziehen und wie Content-Editoren die Content-Erstellung verwalten und planen.
Dies ist ein grundlegender Wandel hin zum musterbasierten Website-Design; ein System von wiederverwendbaren Elementen, die konsistent auf einer Website angewendet werden können, um die bestmögliche Benutzererfahrung zu schaffen und den Arbeitsablauf zu rationalisieren. Während viele von uns bereits mit Mustern arbeiteten, treibt Gutenberg diesen Wandel beschleunigt voran. Da WordPress ein Drittel der Websites weltweit betreibt, können die Auswirkungen dieser Änderung nicht hoch genug eingeschätzt werden.
Dieser Artikel beleuchtet einige der Probleme, mit denen wir als Entwickler zu Beginn der Planung und Erstellung einer Musterbibliothek konfrontiert waren, wie wir die mit Gutenberg inhärenten Einschränkungen überwunden haben und wie wir unser flexibles System benutzerdefinierter Blöcke erstellt haben.
Unser Ziel
Als Spezialist für maßgeschneiderte WordPress-Websites hat Gutenberg uns die perfekte Gelegenheit gegeben, eine einheitliche Musterbibliothek zu erstellen. eine Reihe von anpassbaren Blöcken zur Verwendung mit vielen unserer benutzerdefinierten Website-Builds.
Wir wollten nicht nur diese neue Bearbeitungserfahrung nutzen, sondern auch eine Lösung mit unserem eigenen System anbieten können, ohne auf eine begrenzte Anzahl von Gutenberg-Kernblöcken oder ein Flickwerk von Standardlösungen von Drittanbietern angewiesen zu sein.
Ein umfassendes Set an Blöcken bedeutet auch, dass wir nicht jeden Block für neue Gutenberg-Website-Builds von Grund auf neu erstellen müssen. Dies würde es uns ermöglichen, noch mehr Zeit damit zu verbringen, die Ästhetik einer Website zu verfeinern und die Art von Feinschliff und Optimierungen hinzuzufügen, die dazu beitragen, eine Website von ihrer Konkurrenz abzuheben.
Herausforderungen
Design-Flexibilität
Wir brauchten ein vielseitiges Designsystem mit mehreren Mustern, das uns die Flexibilität gibt, eine Vielzahl von maßgeschneiderten Themen zu erstellen.
Eine gute Balance zwischen einer endlichen und realistischen Anzahl von Mustern zu finden, ohne Kompromisse beim Themendesign einzugehen, war eine Herausforderung.
Eine Verschiebung der Themenentwicklung
Vor Gutenberg haben wir verschiedene Ansätze zur Themenentwicklung verfolgt. Am häufigsten wurden einzelne Seitenvorlagen für separate Teile einer Site erstellt. Vorlagen wären sehr präskriptiv und enthalten benutzerdefinierte Felder für jeden entworfenen Abschnitt. Eine Vorlage „Fallstudien“ kann beispielsweise Felder für einen Texteditor, eine Bildergalerie, Erfahrungsberichte usw. enthalten. Sobald sie jedoch in die Vorlage aufgenommen wurden, können sie nicht einfach geändert werden.
Dieser Ansatz ist nicht nur in Bezug auf das Seitenlayout restriktiv, sondern bedeutete normalerweise auch, dass bei jeder neuen vorlagenbasierten Site wiederholte Bemühungen erforderlich waren. Felder müssen erstellt, Vorlagen erstellt und einzelne Komponenten für die Anzeige im Frontend codiert werden.
Um uns an Gutenberg anzupassen, mussten wir unseren Entwicklungsansatz ändern, verstehen, wie wir wiederverwendbare Komponenten erstellen und die Flexibilität nutzen, die uns Gutenberg jetzt für neue Website-Builds bietet.
Gutenberg ist nicht so flexibel
Out of the Box hat Gutenberg über 30 Kernblöcke zur Verfügung. Alles von grundlegenden Inhaltskomponenten wie Absatz-, Überschriften- und Listenelementen bis hin zu komplexeren Widgets und Einbettungen.
Für viele unserer Website-Builds sind viele dieser Kernblöcke entweder nicht relevant oder haben nicht die Funktionalität, die unsere Themes von ihnen verlangen würden. Wir brauchten eine Möglichkeit, unsere eigenen Muster zu erstellen, die sehr spezifische Funktionen ausführen, die dem Design des Themas entsprechen.
Ein weiteres Problem, das wir bei Gutenberg bald festgestellt haben, ist, dass es weder einfach noch intuitiv ist, komplexere Layouts mit Kernblöcken zu erstellen.
Ein Muster für einen „Inhalt und Bild“-Block kann beispielsweise erfordern, dass eine Überschrift, ein Absatz, eine Liste und eine Schaltfläche neben einem Bild angezeigt werden, mit der Option, das Bild links oder rechts von diesem Inhalt anzuzeigen, und dass diese Elemente in einem einheitlichen Layout angezeigt.
Diese Freiheit ist bei Gutenberg nicht leicht. Obwohl es mehrere Blöcke gibt, die Text, Bilder und Schaltflächen hinzufügen können, sind diese von Natur aus ziemlich atomar und erscheinen, wenn sie einzeln hinzugefügt werden, als separate gestapelte Blöcke. Es wurde früh klar, dass Gutenberg nicht flexibel genug war und wir in der Lage sein mussten, unsere eigenen benutzerdefinierten Blöcke zu bauen.
Unsere Lösung
Ein vielseitiges Designsystem
Vor der Veröffentlichung von Gutenberg hatten wir bereits viel Zeit in die Recherche und Visualisierung von Mustern für unsere Musterbibliothek investiert.
Dies beinhaltete die Prüfung mehrerer unserer bestehenden Websites und Prototypen, um eine Wireframe-Bibliothek häufig verwendeter Elemente zusammenzustellen.
Unsere Designer und Entwickler arbeiteten weiterhin zusammen, um zu verstehen, wie diese Elemente zu Gutenberg-Blöcken kombiniert werden können und wie ein bestimmter Blocktyp erstellt werden kann, sodass mit begrenzten Anpassungsoptionen ein einzelner Block von Thema zu Thema deutlich anders aussieht.
Nachdem wir unsere Muster in Blöcke eingeteilt hatten, konnten wir mit dem Bauen beginnen.
Bausteine mit erweiterten benutzerdefinierten Feldern
Jeder Theme-Entwickler ist mit ziemlicher Sicherheit irgendwann auf Advanced Custom Fields (ACF) gestoßen. Über eine intuitive Benutzeroberfläche können eine Vielzahl unterschiedlicher Feldtypen erstellt werden; alles von einfachen Textfeldern und Inhaltseditoren bis hin zu Datumsauswahlen, Karteneinbettungen und Galeriefeldern. Diese können ganz einfach verschiedenen Bereichen einer Site wie Beitragstypen, Seitenvorlagen, Kategorien und Benutzerseiten zugeordnet werden.
Die neueste Version von ACF, ACF Blocks, erweitert diese bekannte Funktionalität auf Gutenberg. Feldgruppen können auf die gleiche Weise wie bei anderen Bereichen der Site erstellt und verschiedenen ACF-basierten Blöcken zugewiesen werden.
Mit wenigen Codezeilen, die zum Registrieren eines Blocks und von Ausgabefeldern erforderlich sind, ist es möglich, innerhalb weniger Minuten einen einfachen benutzerdefinierten Block zu erstellen. Die Leichtigkeit, mit der Blöcke mit diesem Ansatz erstellt werden können, ermöglichte es uns, uns auf die Blockkonfiguration, die Ausgabe und das Styling zu konzentrieren.
Wir waren jetzt in der Lage, eine Reihe benutzerdefinierter Blöcke zu erstellen, die die gesamte Flexibilität von Gutenberg bieten, aber auf das Design des Themas beschränkt sind, was zu konsistenten Layouts beitragen würde.
Musterbibliothek-Plugin
Nachdem wir einige Beispielblöcke erstellt hatten, entschieden wir uns, unsere Blöcke mit Hilfe des Engineering-Teams in ein benutzerdefiniertes Plugin zu packen.
Dieses blockbasierte Plugin ermöglicht die schnelle Bereitstellung benutzerdefinierter Muster für neue Website-Builds. Diese werden dann auf Themenebene weiter angepasst.
Unser Pattern Library-Plugin enthält einige nützliche Funktionen:
- Einfache Blockvorlagendateien, damit wir schnell neue Blöcke hinzufügen können;
- Funktionen, die es ermöglichen, Kernblöcke und benutzerdefinierte Blöcke zu initialisieren und in benutzerdefinierte Kategorien aufzunehmen;
- Ein Bildschirm mit Administratoreinstellungen, auf dem jeder Block aktiviert oder deaktiviert werden kann;
- Möglichkeit, das Layout und die Struktur eines Blocks innerhalb des Themas zu überschreiben;
- Die Möglichkeit, Blockstile auf Designebene zu überschreiben;
- Laden von Stylesheets auf Theme-Ebene in Gutenberg, damit die Block-Admin-Vorschau genauso aussieht wie die Front-End-Blöcke. Die Verwendung von CSS-Raster half uns, die Flexibilität in Ästhetik und Layout zu maximieren und gleichzeitig strukturelle Änderungen zu minimieren.
- Bestimmte Blöcke können auf bestimmte Beitragstypen beschränkt werden, um die Konsistenz zu wahren.
Die Entwicklung des Pattern Library-Plugins wird eine kontinuierliche Weiterentwicklung sein, aber wir haben jetzt über 15 Blöcke, die verwendet werden können, um einen erheblichen Teil unserer flexiblen Theme-Designs zu erstellen.
Unsere Reihe von Blöcken umfasst Inhalts- und Bildmuster, Testimonials, verwandte Artikel und Teamblöcke sowie weitere Muster im „Schaufenster“-Stil, darunter Galerien, Statistiken und Schieberegler.
Zusammenfassung
Wir freuen uns sehr über die Möglichkeiten, die Gutenberg und unsere benutzerdefinierte Musterbibliothek eröffnet haben.
Wir können nicht nur unser maßgeschneidertes Website-Angebot mit der neuesten Bearbeitungserfahrung weiter vorantreiben, sondern auch hochflexible Websites mit einem einheitlichen Entwicklungsansatz erstellen, der uns hilft, reichhaltige Erlebnisse für Endbenutzer zu schaffen.
Es ist fast 2 Monate her, seit wir zum ersten Mal unsere Musterbibliothek von Gutenberg-Blöcken verwendet haben, die wir jetzt für viele neue Site-Builds verwenden. Die Kunden waren begierig darauf, Gutenberg zu nutzen, und das Kundenfeedback war bisher wirklich positiv.
„Matt und Pammy haben ein Tutorial zu den von Ihnen erstellten Site-Elementen geliefert und sie sind unglaublich! Die Flexibilität und Professionalität ist fantastisch und ich bin so dankbar für all Ihre großartige Arbeit bisher.. Ich bin jetzt wirklich begeistert von der Website. Vielen Dank"
– Rachel Smith, YMCA Nottingham
Wir werden unsere Musterbibliothek mit benutzerdefinierten Blöcken weiter erweitern und mit weiteren Verbesserungen verfeinern, während wir mehr Zeit mit Gutenberg verbringen. Wir arbeiten derzeit an unserer 5. Gutenberg-basierten Website, also haltet bald Ausschau nach einer Fallstudie!
Wenn Sie Hilfe bei Ihrer WordPress-Entwicklung benötigen, zögern Sie nicht, uns zu kontaktieren.