Gutenberg lernen: Einführung in die Serie

Hallo CSS-Tricksters! 👋 Wir starten hier eine spezielle Langform-Serie, die sich ganz Gutenberg widmet, einer großen Veränderung im WordPress-Editor. Ich habe ein dynamisches Duo von Autoren eingeladen, Ihnen diese Serie zu präsentieren, die Sie auf den neuesten Stand bringt, was Gutenberg ist, was es für Ihre Website tun kann und wie Sie tatsächlich *dafür* entwickeln können.

Für wen ist das?

Diese Serie richtet sich eher an **Entwickler, die neugierig sind**, auf diese neue Welt und damit beginnen möchten. Diese Serie ist nicht unbedingt für Website-Besitzer gedacht, die wissen wollen, wie sie sich auf ihre Website auswirken wird oder die sich aus irgendeinem Grund Sorgen machen.

Es ist klar, dass Gutenberg *viel Potenzial* birgt. Ja, es zielt darauf ab, eine bessere Bearbeitungserfahrung zu bieten, aber es wird wahrscheinlich auch die Art und Weise verändern, wie Menschen darüber denken, was mit WordPress möglich ist. Mit den benutzerdefinierten "Blöcken", aus denen Inhalte aufgebaut werden (keine Sorge, wir werden uns damit befassen), wird der WordPress-Editor fast zu einem Drag-and-Drop-Website-Builder.

Ich empfehle Ihnen, diese Episode von ShopTalk anzuhören, um mehr über dieses Potenzial zu erfahren.

Wie diese Serie zustande kam

Eine lustige Geschichte eigentlich. Es ergab sich, dass zwei Autoren, mit denen ich regelmäßig zusammenarbeite, beide unabhängig voneinander Langform-Serien zu genau diesem Thema zur gleichen Zeit erstellten. Meine Schuld, denn ich habe 2 und 2 nicht zusammengezählt, bis beide signifikante Fortschritte gemacht hatten. Es wäre zu seltsam gewesen, beide Serien unabhängig voneinander zu veröffentlichen, also haben wir uns zusammengesetzt und einen Weg gefunden, die Serien zu kombinieren und zu überarbeiten, um eine einzige Serie zu schaffen, die das Beste aus beiden ist.

Hier ist sie!

Voraussetzungen

Mit diesen Fähigkeiten werden Sie am besten mit dieser Serie zurechtkommen

• WordPress-Entwicklungskonzepte wie Aktionen, Filter und Template-Tags
• Grundlegende (nicht tiefgreifende) JavaScript-Kenntnisse, z. B. das Verständnis des Unterschieds zwischen einem Objekt und einem Array und was Callback-Funktionen sind.
• Verwendung der Kommandozeile zum Navigieren in Verzeichnissen und Ausführen von Build-Aufgaben

Wenn Sie Ihre eigenen npm-Module geschrieben haben, sich beim Schreiben von Commit-Nachrichten in Vim wohlfühlen oder ein alter Hase in React sind, dann wird diese Serie vielleicht etwas langsam für Sie sein.

Lernen Sie Ihre Lehrer kennen

Von nun an übergebe ich diese Serie an die Autoren und Ihre Gutenberg-Lehrer: Lara Schenck und Andy Bell.

Ein paar Worte von Lara

Hallo! Im Jahr 2015 forderte Matt Mullenweg, der Mitbegründer von WordPress, einen Raum voller über tausend WordPress-Entwickler, Geschäftsinhaber, Endbenutzer, Designer und wer weiß wie viele mehr, die live oder nachträglich zusahen, auf: „lernt JavaScript tiefgreifend.“

Ich war in diesem Raum und erinnere mich, wie ich dachte

Das kann ich! Ich bin mir nicht sicher warum, jQuery hat mir immer gut gedient und ich mag CSS am liebsten, aber okay, Matt, ich werde das auf meine To-Do-Liste setzen…
— Ich, im Jahr 2015

Die Sache ist die, es ist durchaus möglich, ziemlich beeindruckende und robuste WordPress-Themes zu erstellen, ohne auch nur ein Byte JavaScript anzufassen. Unnötig zu erwähnen, dass ich das tiefgreifende Erlernen von JavaScript erst anderthalb Jahre später angegangen bin, also bin ich jetzt dabei, aufzuholen... und ich bin sicher, ich bin nicht der einzige WordPress-Entwickler, der in dieser Situation ist.

Zurück in die Gegenwart. Nicht nur, dass JavaScript das Web in großem Stil übernommen hat, JavaScript – in all seiner gebündelten, destrukturierten, Spread-Operator-Glory – hat sich durch die Überarbeitung des Editors namens Gutenberg seinen Weg in das Innere von WordPress gebahnt.

Wenn Sie das hier lesen, gehe ich davon aus, dass Sie zumindest von Gutenberg gehört haben, aber wenn nicht, hier ist eine Zusammenfassung von Chris von vor ein paar Monaten, die Ihnen helfen sollte, sich zu orientieren. Ich gehe auch davon aus, dass Sie eine Mischung aus Unwissenheit, Neugier, Aufregung und Panik empfinden, wenn Sie an Gutenberg denken und was es für WordPress bedeutet, ergo ~30% der Websites. Ich bin hier, um Ihnen zu sagen, dass Sie die Panik streichen und die Aufregung und Neugier beibehalten sollen, denn das ist *sehr* aufregend, sowohl für uns Entwickler *als auch* für WordPress selbst.

Ich prognostiziere, dass die Einführung von Gutenberg in den kommenden Jahren dazu führen wird, dass WordPress seinen unglücklichen Ruf als veraltete, unsichere, entwicklerunfreundliche Blog-Engine überwinden wird. Ein Beleg dafür:

Ich glaube, ich werde meine persönliche Website wieder zu einer WordPress-Website machen. Nach 6 Jahren schließt sich der Kreis 😊

— Rach Smith 🌈 (@rachsmithtweets) 20. Februar 2018

Das kleine WordPress holt auf und bringt all die JavaScript-Schönheit mit, die man sich vorstellen kann: Gutenberg ist ein React-gesteuertes SPA-Bearbeitungserlebnis, das noch in diesem Jahr mit Version 5.0 in den WordPress-Core aufgenommen wird. Es wird das WordPress-Ökosystem auf den Kopf stellen und hoffentlich den Weg für eine neue Generation von Themes und Plugins ebnen, die von Blöcken angetrieben werden – ein Phänomen, das andere Content-Management-Systeme schon seit einiger Zeit nutzen.

Das bedeutet zwei Dinge für Entwickler wie mich, die 2015 versäumt haben, "JavaScript tiefgreifend zu lernen":

1. Es gibt immer noch Zeit.
2. Wir haben jetzt einen sehr spezifischen, realen Kontext für unser Lernen.

Das sind tolle Neuigkeiten! Ich spreche für mich selbst, aber ich finde es viel einfacher, eine Technologie zu lernen, wenn ich eine konkrete Anwendung dafür habe. Damit lade ich Sie ein, mich auf einer Reise zu begleiten, um "Gutenberg tiefgreifend zu lernen" und, in Ermangelung dessen, einen soliden Teil von JavaScript und React.

Das Thema dieser Serie ist nicht neu. Die WordPress-Community hat sich bereits der Erstellung hervorragender Ressourcen für die Gutenberg-Entwicklung angenommen, und ich empfehle Ihnen, so viele wie möglich zu lesen und anzusehen! Während diese Serie einige der gleichen Informationen abdeckt, ist das Ziel hier, den Inhalt so zu strukturieren, dass Sie, der Leser, ein wenig arbeiten müssen, um die Antworten zu erhalten — ähnlich wie in einem Kurs oder Handbuch mit Fragen und Hausaufgaben.

Ja, wir werden einen Block erstellen, aber auf dem Weg werden wir vom Blockbau abweichen und uns mit der Umgebungsaufstellung, mit APIs und anderen Entwicklungskonzepten und Terminologien befassen, deren Verständnis mich eine ganze Weile gedauert hat. Am Ende hoffe ich, Ihnen zu helfen, sich sicherer beim Experimentieren mit Code zu fühlen, wenn es keine lückenlose Dokumentation oder Unmengen von Stack Overflow-Beiträgen gibt, auf die Sie zurückgreifen können.

Ein paar Worte von Andy

Der neue, kommende WordPress-Editor bringt eine Fülle von Möglichkeiten für Content-Ersteller und Entwickler mit sich, aber damit auch einen völlig neuen JavaScript-gesteuerten Stack zum Lernen. Für einige verursacht das Sorgen, also dachte ich, ich helfe mit. Wir werden einige Kernkonzepte von JavaScript untersuchen und einen benutzerdefinierten Block erstellen, der ein klassisches Designmuster – eine Karte – antreibt. Dieses Designmuster bietet viel zu bedenken, wie z. B. variable Inhalte und Medien.

Bevor wir uns damit befassen, werden wir uns den neuen JavaScript-Stack und die Werkzeuge ansehen, die er uns bietet. Wir werden uns auch eine React-Komponente ansehen, um uns eine Einführung in reaktives, zustandsgesteuertes JavaScript und JSX zu geben.

Mit all dem Wissen und den Werkzeugen, mit denen wir gearbeitet haben, werden wir am Ende dieser Tutorial-Serie einen soliden benutzerdefinierten Kartenblock haben. Dieser kann auch als Basis für viele andere Arten von Blöcken zur Verwaltung von Website-Inhalten dienen.

Bevor wir loslegen, richten wir unsere Rechner mit den richtigen Werkzeugen ein. Da wir den modernen JavaScript-Stack verwenden, gibt es einige Browser, die die Sprachfunktionen noch nicht unterstützen. Aus diesem Grund werden wir einige Node.js-basierte Tools verwenden, um diesen Code in ein besser kompatibles Format zu kompilieren.

Node.js zum Laufen bringen

Unsere Setups variieren stark, daher verweise ich Sie auf die offizielle Node.js-Website, wo Sie praktische Installer finden. Es gibt eine sehr nützliche Seite, die erklärt, wie Sie beliebte Paketmanager verwenden können, hier.

Ihr Terminal zum Laufen bringen

Wir werden unsere Terminals verwenden, um später in der Serie einige Befehle auszuführen. Richten Sie Ihr Terminal ein. Ich mag iTerm, aber das ist nur für Mac. Hier sind einige Ressourcen für Mac- und Windows-Benutzer:

• Mac: Sie können das Standardterminal verwenden, das sich unter Programme > Terminal befindet.
• Windows: Sie können entweder das Linux-Subsystem zum Laufen bringen, die Eingabeaufforderung verwenden oder Software wie Hyper herunterladen.

Eine lokale WordPress-Instanz zum Laufen bringen

Da wir den modernen JavaScript-Stack verwenden, ist es wichtig, eine Instanz von WordPress lokal auf Ihrem Rechner laufen zu lassen. Wenn Sie das noch nicht getan haben, lesen Sie diese Anleitung. Ich empfehle Ihnen dringend, etwas wie MAMP, XAMP oder Ähnliches herunterzuladen, wenn Sie neu hier sind.

Sobald Sie eine lokale Instanz laufen haben, halten Sie ein Theme bereit, mit dem Sie arbeiten können, da wir später ein wenig Theme-Code bearbeiten werden.

Modernes JavaScript kann einschüchternd sein, wenn Sie nicht täglich damit arbeiten. Gemeinsam werden wir uns einige Kernelemente der modernen Version von JavaScript ansehen, die allgemein als ES6 bekannt ist.

Dann werden wir dieses Wissen nutzen, um eine React-Komponente zu erstellen. React ist ein unglaublich beliebtes Framework, aber auch hier ist es recht einschüchternd, also werden wir es gemeinsam erarbeiten, um es zu reduzieren. Das JavaScript-Setup von Gutenberg ähnelt stark React, daher ist es auch eine Übung, sich mit komponentenbasierten, reaktiven JavaScript-Frameworks im Allgemeinen vertraut zu machen.

Sobald wir das abgedeckt haben, hoffe ich, dass Sie sich ziemlich gut fühlen werden. Wir werden diese Dynamik nutzen und uns dem manchmal gefürchteten webpack widmen, einem Werkzeug, das wir verwenden werden, um unser JavaScript zu verarbeiten und zusammenzufügen. Wir werden auch Babel zum Laufen bringen, das magisch unseren ES6-Code in besser unterstützten ES5-Code umwandelt.

An diesem Punkt denke ich, dass Sie mit diesem Stack vertraut sein werden, also werden wir uns dem Hauptgericht widmen — wir werden unseren benutzerdefinierten Kartenblock erstellen.

Klingt gut? Hervorragend. Legen wir los!