G2 Components, eine von Grund auf neu konzipierte WordPress-Komponente

Aktualisieren Sie einige der Dinge.

Das war das Ziel, das Jon Quach, ein leitender Designer bei Automattic, in der Roadmap für die Integration des G2-Komponenten-Projekts in Gutenberg und schließlich in das Kern-WordPress festlegte. Das Projekt ist eine Neuinterpretation der Teile, die den Blockeditor ausmachen, eine „von Grund auf“ Überarbeitung des Komponentensystems. Wenn Sie alle Dinge oder sogar viele Dinge auf einmal aktualisieren, besteht die Gefahr, dass alles kaputt geht.

„Idealerweise sollten Sie nur einige der Dinge auf sehr kontrollierte und absichtliche Weise aktualisieren“, schrieb Quach in dem Beitrag. Er verglich es damit, eine Stadt Stück für Stück auf Solarenergie umzustellen, bis die traditionelle Kraftwerksfabrik stillgelegt werden konnte. Sie konvertieren ein Stück, testen, finden Probleme und beheben sie, bevor Sie zum nächsten Abschnitt übergehen.

Das ist der Plan für die Integration von G2 Components in Gutenberg.

„G2 Components ist ein Projekt, das die Idee verkörpert, Benutzeroberflächen und Benutzererfahrungen für andere zu verbessern“, sagte Quach. „Im Moment ist es als Komponentensystem materialisiert, das so konzipiert ist, dass es im Kontext und in den Umgebungen von Gutenberg und WordPress funktioniert.“

Das Ziel ist es, die Ressourcen bereitzustellen, um die Benutzeroberfläche des Gutenberg-Projekts zu verbessern. Komponenten sollten es einfacher machen, neuere UIs zu erstellen, ohne Code zusammenzuhacken. Quach sagte, dass die Konsistenz und Erfahrungen des Komponentensystems skalieren und einen Welleneffekt auf der gesamten WordPress-Plattform haben sollten. Dies wird sich auch auf Blockentwickler von Drittanbietern erstrecken.

„Die Codekomponenten sind nur der Ausgangspunkt“, sagte er. „Mein ultimatives Ziel ist es, Code zu transzendieren und auch das Design zu beeinflussen und zu verbessern – ein einheitliches Designsystem zu schaffen, das es den Menschen ermöglicht und befähigt, zusammenhängende und funktionsreiche UI-Erlebnisse in der Welt von WordPress zu erstellen.“

Quach glaubt, dass Plattformen von ähnlichen Ansätzen profitiert haben. Er erwähnte, dass Material Design by Google die Android-Plattform verbessert und die Produkte des Unternehmens zusammengehalten hat.

Das Gutenberg-Team hat bereits damit begonnen, die G2-Komponenten in das Projekt zu integrieren. Diese Integration ersetzt WordPress-Komponenten (@wordpress/components) auf kontrollierte Weise, die bestehende Implementierungen innerhalb des Kerneditors oder von Drittanbieterprojekten nicht unterbrechen sollte. Neue Komponenten werden ausgetauscht, sobald sie fertig sind. „Als würde man einen Schalter umlegen“, sagte Quach.

Das folgende Video ist eine einstündige Komplettlösung von G2-Komponenten, die Quach auf YouTube gepostet hat:

Er veröffentlicht regelmäßig Updates im G2 Components-Blog. Daneben gibt es tiefere Einblicke in sein Design-Denken für das Projekt. Auch in seinem Twitch-Stream spricht er fast täglich über das Projekt.

Was sind Komponenten?

Komponenten sind alles von Schaltflächen über Schalter bis hin zu Kontrollkästchen. Sie sind standardisierte Teile, die die Benutzeroberfläche des Blockeditors bilden. Sie stehen sowohl Core- als auch Drittentwicklern zur Verfügung, um das zu erstellen, was Endbenutzer sehen und womit sie interagieren. Es gab jedoch ein Problem mit dem Aufbau des ursprünglichen Komponentensystems.

„Die aktuellen Komponenten werden nicht mit Blick auf ein System gebaut, sondern um einen unmittelbaren Bedarf zu decken“, sagte Quach. „Dieses besondere Designdetail ist entscheidend. Ein systemorientierter Ansatz unterstützt leichter das Hinzufügen neuer Funktionen und, was noch wichtiger ist, die Anpassung!“

Bei dem neuen Ansatz geht es darum, ein natives Designsystem für WordPress aufzubauen. Ein solches System würde es jedem ermöglichen, darauf aufzubauen und native Erfahrungen zu schaffen.

Quach sagte, eine der einfachsten Möglichkeiten, dies zu betrachten, sei aus der Backend-Theming-Perspektive – das Komponentensystem hat auch ein Theming-Subsystem. „Anstelle der traditionellen Methode, CSS als ‚Skin‘ zu schreiben, die darüber gelegt wird, kann die Ästhetik der Benutzeroberfläche durch Konfigurationswerte angepasst werden – ähnlich wie WordPress mit Definitionen in der Datei wp-config.php werden kann“, sagte er. „Diese Unterscheidung ist wichtig, da diese Werte direkt in das Style-System einfließen und es den Styles ermöglichen, am richtigen Ort und zur richtigen Zeit korrekt geladen zu werden. Und das alles, ohne die Stile der aktuellen Umgebung zu beeinflussen, und was noch wichtiger ist, ohne von den Stilen der aktuellen Umgebung beeinflusst zu werden.“

Er antwortete auf meine Frage, warum das Komponentensystem von Grund auf neu aufgebaut werden sollte. Die Idee ist, Komponenten zu haben, die in einer Umgebung wie dem WordPress-Admin „einfach funktionieren“, wie zum Beispiel sicherzustellen, dass das Stylesheet eines WordPress-Themes nicht Komponenten kaputt macht, indem es einfach geladen wird.

„Warum Eingaben, Schaltflächen, Modale, Dropdowns und andere überdenken, neu erstellen und verbessern?“ entgegnete Quach als Antwort. „Damit Sie als Entwickler das nicht müssen.“

Was bedeutet das für Entwickler?

Die Achtung der Abwärtskompatibilität ist etwas, das Quach sagte, er habe es unglaublich ernst genommen, als er die Architektur des G2-Komponenten-Projekts entworfen habe. Er sagte auch, es sei Teil der von ihm vorgeschlagenen Integrationsstrategie.

„Ich hatte erwähnt, dass dieses Projekt ‚die Idee verkörpert, Benutzerschnittstellen und Benutzererfahrungen für andere zu verbessern'“, sagte er. „Die Berücksichtigung der Abwärtskompatibilität und die Unterstützung der Migration von Drittanbietern fallen absolut in die Kategorie der Benutzererfahrung.“

Da das Gutenberg-Team weiterhin neue Komponenten integriert, sollte es nicht ändern, was die Entwickler bereits getan haben. Es könnte jedoch einige neue Möglichkeiten eröffnen.

„Das neue Komponentensystem wird der UI-Abteilung definitiv helfen“, sagte Quach. „Ein Bereich, auf den ich mich besonders freue, ist der Raum für schnelle Entwicklung/Prototyping. Da diese Komponenten eigenständige Einheiten sind, können sie in Plattformen wie CodeSandbox eingebracht werden und sie … funktionieren einfach. Sie können sofort loslegen und schnell Prototypen konstruieren und teilen (von klein, aber mächtig bis groß und verantwortlich).“

Er sagte, er habe Erfolg beim Testen von Komponentendesigns und dem Demonstrieren von Ideen für schnelles Feedback. Er hat auch aus der entgegengesetzten Richtung gearbeitet, indem er komplexe Komponenten in CodeSandbox erstellt und sie zurück in das Komponentensystem gebracht hat.

„Als Designer und Front-End-Entwickler kann ich gar nicht genug betonen, wie effizient, effektiv und kreativ befreiend dieser „Mikro-Building“-Workflow ist“, sagte er. „Es ist etwas, von dem ich mich freue, dass auch andere es erleben.“