Jamie Marsland erstellt die WordPress.org-Startseite in 20 Minuten mit dem Blockeditor neu

Als Reaktion auf die jüngste Kontroverse darüber, wie lange die Implementierung der neuen Homepage- und Download-Seiten-Designs von WordPress.org dauern sollte, beschloss Gutenberg-YouTuber Jamie Marsland, es mit dem Blockeditor neu zu erstellen.

Matt Mullenweg hatte die Pläne für die neuen Designs, die in die Entwicklung gehen, kommentiert und gesagt, dass es „Stunden und nicht Wochen zur Implementierung“ hätte dauern sollen. Seine aufrührerischsten Kommentare, die spätere Gespräche über die Realitäten der Arbeit mit dem Blockeditor entfachten, bezogen sich auf die Konkurrenten von WordPress.

„Es ist ein so einfaches Layout, dass es schwer vorstellbar ist, dass eine einzelne Person mehr als einen Tag für Squarespace, Wix, Webflow oder einen der WP-Seitenersteller benötigt“, sagte Mullenweg.

Marsland beschloss, die Herausforderung mit Gutenberg anzunehmen. Für diese Übung verwendete er das neueste Standarddesign von WordPress, Twenty Twenty-Two. Seine Ergebnisse sind nicht identisch mit den neuen Designs von WordPress, aber sehr nah dran, und er konnte die Homepage in ungefähr 20 Minuten aufpeppen.

In dem Video (unten eingebettet) geht Marsland durch die Erstellung jedes Abschnitts der Homepage. Er ist das, was man als Power-User mit dem Blockeditor bezeichnen könnte. Er kann Zeilen, Spalten und Gruppen schnell mischen, Polsterung und Ränder nach Bedarf anpassen und jedem Abschnitt die entsprechende Farbe für das Design zuweisen. Zu diesem Zeitpunkt ist dies für die meisten durchschnittlichen WordPress-Benutzer nicht möglich, weshalb das Video eine so starke Resonanz bei den Zuschauern hatte. Der YouTube-Kanal von Marsland konzentriert sich darauf, Benutzern dabei zu helfen, das Erstellen von Seiten mit Gutenberg und Shops mit WooCommerce zu meistern.

„Meine Schlussfolgerung war, dass es ziemlich einfach ist, 95 % des Designs schnell fertigzustellen, aber meiner Erfahrung nach sind es die letzten 5 %, die immer die meiste Zeit in Anspruch nehmen“, sagte Marsland. „Ich vermute, dass es eher interne Prozesse waren, die die Verzögerungen verursacht haben, aber ohne Beteiligung ist es schwer, das mit Sicherheit zu sagen. Ich wollte wirklich zeigen, dass es kein Gutenberg-Problem war, das Design zu erstellen (wie Matt Mullenweg Wix und Squarespace und andere WP-Pagebuilder erwähnte.)“

Alex Shiels, ein von Automattic gesponserter Mitarbeiter des Projekts, nannte einige Punkte, die nichts mit dem Blockeditor zu tun hatten, die die Verzögerungen verursachten, darunter die Arbeit an „angemessenen Standards für A11y, Reaktionsfähigkeit, Browserkompatibilität, SEO und Leistung“ sowie Zusammenarbeit mit Mitwirkenden auf verschiedenen Kontinenten.

Als Antwort auf den Versuch von Marsland kommentierte WordPress-Entwickler Patrick Boehner, wie wichtig die kleinen Details bleiben. „Man kann definitiv sagen, was zuerst designgetrieben war und was im Editor entworfen wurde“, sagte Boehner.

Fünf Jahre nach Gutenbergs Debüt in WordPress stehen Theme-Entwickler immer noch vor der Herausforderung, Designs zum Leben zu erwecken, die nicht mit Blick auf einen Block-First-Ansatz erstellt wurden.

„Es bleibt heute grundsätzlich schwierig bis unmöglich, ein traditionell nachgebildetes Seitendesign zu nehmen und dieses Design mithilfe von Blöcken auszuführen“, sagte WordPress-Entwickler Jon Brown. „Das ist ein Problem.

„Sicher, Blöcke sind in Ordnung, um eine Seite im Browser zu entwerfen und zu akzeptieren, was Sie aus Blöcken herausholen, aber Blöcken fehlt es weiterhin an der Flexibilität und den Kontrollmöglichkeiten, die erforderlich sind, um ein ansprechendes, zugängliches, pixelgenaues Layout basierend auf einem Mock-up zu erstellen .

„Was früher einen Tag und ein Dutzend PHP-Zeilen und ein Dutzend CSS-Zeilen erforderte, dauert jetzt wochenlang, um benutzerdefinierte Blöcke zu erstellen, da die Kernblöcke nicht einfach über Hooks optimiert werden können und die grundlegenden Steuerelemente fehlen.“

Gutenberg-Mitarbeiter machen Fortschritte, indem sie fließende Typografie einführen, und verfolgen eine Vielzahl von Problemen im Zusammenhang mit der Verbesserung der Konsistenz von Designwerkzeugen. In der Zwischenzeit ertragen Theme-Entwickler die notwendigen Wachstumsschmerzen, während der Blockeditor reift, um denjenigen entgegenzukommen, die hoffen, ihre Designs sofort reaktionsfähig zu machen.

„Ich habe ein vollständiges FSE-Design von Grund auf neu erstellt und war überrascht, wie viel von meinem Design ich erfolgreich mit dem Editor, theme.json und minimalem bis gar keinem benutzerdefinierten CSS replizieren konnte“, sagte der erfahrene Designentwickler Mike McAlister . „Sicher, es hat viel gebastelt, aber ich war trotzdem beeindruckt.

„Jedoch, wie Jon erwähnt, stößt man in der Sekunde, in der man etwas für einen kleineren Bildschirm anpassen muss (oder einen größeren Bildschirm, wenn man es wagt, Mobile-First-Design im Editor auszuprobieren), an eine Wand. Dies ist besonders deutlich bei Margin, Padding und Block Gap, die noch keine reaktionsschnellen Steuerelemente haben. Sie können dies per CSS angepasst im neuen Design auf .org sehen.“

Reaktionsschnelligkeit ist eines der Probleme, die Shiels anführte, warum die Implementierung der Designs mehr Zeit in Anspruch nahm als die einfache Neuerstellung des Designs im Blockeditor.

„Es gibt jedoch Hinweise auf Verbesserungen in Bezug auf die Reaktionsfähigkeit“, kommentierte McAlister. „Fluid Typography und clamp() haben sicherlich dazu beigetragen, die Typografie in Schach zu halten, aber es wird immer Situationen geben, in denen Sie eine noch feinere Kontrolle benötigen. Jeder andere Site-Builder hat dies gelöst, es gibt keinen Grund zu der Annahme, dass WordPress dies nicht kann oder will. (Das hoffe ich natürlich, denn heutzutage kommen ca. 50–60 % des Traffics von Mobilgeräten!)

„Eine der besten Möglichkeiten, diese Wachstumsschmerzen zu überwinden, besteht darin, so viel Hundefutter wie möglich zu verwenden – indem Sie den Editor und FSE verwenden, um so viele reale Szenarien wie möglich zu erstellen, um diese blinden Flecken aufzudecken.“

Die kurze Übung von Marsland zeigt, wie nahe Sie dem Design von WordPress.org in kurzer Zeit kommen können, wenn Sie sich mit dem Blockeditor auskennen. Er konnte erfolgreich beweisen, dass die Gutenberg-Benutzeroberfläche zum Erstellen von Seiten nicht das Hindernis bei der Reproduktion von Designs ist, die in anderen Anwendungen erstellt wurden. Vielmehr sind es all die anderen verwandten Checklistenpunkte, die Entwickler im Allgemeinen außerhalb des Editors lösen müssen – einschließlich Zugänglichkeit, Reaktionsfähigkeit und SEO-Überlegungen. Je näher Gutenberg der Reduzierung zusätzlicher Arbeit in Bezug auf Reaktionsfähigkeit und Zugänglichkeit kommen kann, desto zugänglicher wird es für normale Benutzer, die versuchen, die Designs, die sie sich ausdenken, selbst zu produzieren.