Lernen Gutenberg: Serie Einführung

0
31

Hey CSS-Betrüger! 👋 Wir haben eine spezielle long-form-Serie wir beginnen hier ganz im Zeichen Gutenbergs, eine wesentliche änderung an der WordPress-editor. Ich habe eingeladen, eine dynamische Autoren-duo bringen Sie diese Serie, die bringen Sie bis zu Geschwindigkeit auf, was Gutenberg ist, was Sie tun können, für Ihre Website, und wie Sie tatsächlich zu entwickeln.

Wer sich dazu für

Diese Serie ist mehr für Entwickler, die neugierig sind, über diese neue Welt und möchte mit ihm arbeitete. Diese Serie ist nicht unbedingt für Website-Besitzer, die wissen wollen, wie es geht, um auf Ihre Website oder, wer sind besorgt über es aus irgendeinem Grund.

Es ist klar, es gibt eine Menge Möglichkeit, mit Gutenberg. Ja, es ist Ziel, ein besseres editing-Erfahrung, aber es ist auch wahrscheinlich, um zu ändern, wie Menschen denken, was ist möglich mit WordPress. Mit dem custom – “Blöcke”, die Inhalte werden noch gebaut (keine Sorge, wir werden alle diese) es ist fast der WordPress-editor wird ein drag-und-drop Website builder.

Ich würde empfehlen das hören dieser episode von ShopTalk zu hören, mehr über dieses Potenzial.

Wie diese Serie zustande kam

Witzige Geschichte, wirklich. Es ist einfach so passiert, dass zwei Autoren, die ich regelmäßig mit waren beide unabhängig voneinander erstellen von long-form-Serie über genau dieses Thema an der exakt gleichen Zeit. Schande über mich, weil ich nicht 2 und 2 zusammen, bis Sie beide große Fortschritte gemacht hatte. Es wäre zu seltsam, um beide Serien unabhängig voneinander, so dass anstelle hatten wir alle zusammen und arbeitete einen Weg finden, zu kombinieren und Nacharbeit der Serie und eine einzige Serie, die das beste aus beiden.

Hier sind wir!

Voraussetzungen

Du wirst wahrscheinlich am besten, mit dieser Serie mit diesen Fähigkeiten:

  • WordPress-Entwicklung Konzepte wie Aktionen, Filter und template-tags
  • Grundlegende (nicht tief) JavaScript-Kenntnisse, z.B. das Verständnis der Unterschied zwischen einem Objekt und einem array und welche callback-Funktionen sind.
  • Über die Befehlszeile zu navigieren Verzeichnisse und führen Sie build-Aufgaben

Wenn Sie geschrieben haben, Ihre eigenen npm-Module, fühlen Sie sich Total wohl schreiben commit-Nachrichten in Vim, oder man ist ein Alter Hut ist, zu Reagieren, dann ist diese Serie möglicherweise verschoben werden, ein wenig langsam für Sie.

Treffen Sie Ihren Lehrer

Von hier aus auf, ich bin der Weitergabe dieser Serie über die Autoren und Ihre Gutenberg-Lehrer: Lara Schenck und Andy Bell.

Ein bisschen von Lara

Hi! Zurück im Jahr 2015, Matt Mullenweg, der co-Schöpfer von WordPress, wies einem Raum voll von mehr als tausend WordPress-Entwickler, Unternehmer, Endverbraucher, Designer, und wer weiß, wie viele weitere live-stream-und-nach-der-Tatsache-Zuschauer zu “lernen JavaScript tief.”

Ich war in diesem Raum, und ich erinnere mich denken:

Kann ich das tun! Ich bin mir nicht sicher, warum, jQuery hat mir passte ganz gut und ich mag CSS die beste, aber okay, Matt, ich werde setzen, dass auf meiner Liste der Dinge zu tun…
—Ich, 2015

Die Sache ist die, es ist durchaus möglich, zu bauen ziemlich genial und robust WordPress-themes ohne Sie zu berühren, ein byte von JavaScript. Unnötig zu sagen, habe ich nicht bekommen, um zu lernen JavaScript tief für ein gutes Jahr und eine Hälfte, so dass ich jetzt aufzuholen… und ich bin mir sicher ich bin nicht der einzige WordPress-Entwickler im Boot.

Zurück in die Gegenwart. Es hat nicht nur weiterhin über das web in einem sehr großen Weg, JavaScript—in allen es ist gebündelt, destructured, spread-operator-ed-Ruhm hat seinen Weg in das Innenleben von WordPress durch die editor-Umbau namens Gutenberg.

Wenn Sie dies Lesen, ich nehme an, Sie haben zumindest davon gehört Gutenberg, aber wenn nicht, hier ist ein überblick von Chris von ein paar Monate zurück, das sollte helfen, orientieren Sie. Ich bin auch vorausgesetzt, Sie fühlen eine Mischung aus Ignoranz, Intrigen, Spannung und Panik, wenn man über Gutenberg und was es bedeutet für WordPress, ergo ~30% der websites. Ich bin hier um Ihnen zu sagen Schrott, der Panik und halten Sie die Spannung und Intrigen, denn das ist sehr spannend, sowohl für uns als Entwickler und WordPress selbst.

Ich sage Voraus, dass in den kommenden Jahren, die Annahme von Gutenberg verursachen WordPress, um aus Ihren unglücklichen Ruf als ältere, unsichere, Entwickler-unfreundlich, blogging-engine. Case in point:

Ich glaube, ich bin gonna meinen persönlichen website ein WordPress-Website wieder. Ein Kreis schließt sich nach 6 Jahren 😊

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

Ich springe hier zu und sagen, dass Gutenberg gezogen hat, der mich wieder in WordPress, da der stack ist mehr freundlich zu mir, einem front-end-Entwickler. Vor, ich würde fumble durch Anpassungen in der Erwägung, dass werde ich jetzt sehr glücklich roll-out benutzerdefinierte Blöcke. Zu mir, Gutenberg ist mehr als ein editor—es ist eine Bewegung, und das macht Leute wie mich wirklich aufgeregt über die Zukunft von WordPress.

Wenig ol’ WordPress holt und es bringt alles mit JavaScript Güte, die man sich so vorstellen: Gutenberg ist ein Reagieren-driven SPA-editing-Erfahrung, bereit zu sein veröffentlicht in WordPress Core noch in diesem Jahr in der version 5.0. Es spiegeln wird das WordPress-ökosystem Kopf nach unten und, hoffentlich, den Weg frei machen für eine neue generation von themes und plugins powered by blocks—ein Phänomen, das andere content-management-Systeme angenommen haben, für einige Zeit.

Dies bedeutet, dass zwei Dinge für die Entwickler wie ich, vernachlässigt zu “lernen JavaScript-tief” wieder in 2015:

  1. Es ist noch Zeit.
  2. Wir haben jetzt einen ganz konkreten, realen Kontext für unser lernen.

Dies ist eine gute Nachricht! Ich werde für mich selbst sprechen, aber ich finde es viel einfacher zu lernen, eine Technik, wenn ich eine spezielle Anwendung für Sie. Mit,, ich lade Sie ein, gemeinsam mit mir auf eine Reise zu “lernen Gutenberg-tief” und, anstelle, dass ein solides Stück von JavaScript und Reagieren.

Das Thema dieser Serie ist nicht original. Die WordPress-community hat sich bereits erhoben, um die Aufgabe der Schaffung von hervorragenden Ressourcen, die für die Gutenberg-Entwicklung, und ich empfehle Ihnen, Lesen Sie und sehen Sie, wie viele, wie Sie können! Während diese Serie umfasst einige der gleichen Informationen, das Ziel hier ist die Struktur, die Inhalte in einer Weise, wo Sie, die Leser, müssen ein wenig arbeiten, um die Antworten bekommen, die—so in der Art wie Klasse oder ein Handbuch mit Fragen und Hausaufgaben.

Ja, werden wir einen block erstellen, aber auf dem Weg wir werden stray from the block-Gebäude und erfahren Sie mehr über die Umgebung, über APIs und andere Entwicklung der Konzepte und Terminologie, die dauerte eine gute Weile, um zu verstehen. Am Ende des Tages, ich hoffe, dass ich Ihnen helfen, sich sicherer fühlen, Experimentieren mit code, wenn es nicht luftdicht Dokumentation oder Belastungen von Stack-Overflow-Beiträge zurückgreifen.

Ein bisschen von Andy

Die neue, kommende WordPress-editor bringt eine fülle von Möglichkeiten, um content-Produzenten und Entwickler gleichermaßen, aber mit diesem, es bringt eine ganz neue JavaScript-powered-stack zu lernen. Für einige, verursacht einige sorgen, so dass ich dachte, ich würde zu engagieren und versuchen zu helfen. Wir gehen Tauchen Sie ein in einige core-JavaScript-Konzepte und erstellen einen benutzerdefinierten block, macht ein klassisches design-Muster—eine Karte. Dieses design-Muster gibt uns viel zu denken, wie variable Inhalte und Medien.

Bevor wir Tauchen Sie ein in, wir Blick auf die neue JavaScript-stack und die Werkzeuge, die es uns schenkt. Wir sind auch dabei, schauen Sie einem Reagieren Komponente, die geben uns einer Grundierung, der reaktiven, state-driven JavaScript und JSX.

Mit all das wissen und die Werkzeuge, die wir gearbeitet haben, am Ende dieser tutorial-Serie haben wir eine solide benutzerdefinierte Karte zu blockieren. Dies kann auch als Basis für so viele andere Arten von sperren für die Pflege Ihrer website-Inhalte.

Bevor wir Graben, wir machen uns die Maschinen einrichten-mit den richtigen tools für den job. Da sind wir mit den modernen JavaScript-stack, es gibt einige Browser, die das noch nicht unterstützen, die Funktionen der Sprache. Denn von diesem werden wir einige Knoten JS-basierte Werkzeuge, um diesen code zu kompilieren in eine weitere cross-kompatible form.

Get Node JS läuft

Unsere setups variieren Wild, so werde ich Ihnen das offizielle Node JS Internetseite, dort finden Sie praktische Installateure. Es ist eine wirklich nützliche Seite, die erklärt, wie Sie verwenden können beliebtesten Paket-Manager ist auch hier.

Holen Sie sich Ihr terminal ausführen

Wir werden mit unseren terminals die Ausführung einiger Befehle, die später in der Serie, so erhalten Sie Ihr setup. Ich mag iTerm, aber das ist nur für Mac also hier sind einige Ressourcen, die für Mac und Windows-Benutzer:

  • Mac: verwenden Sie die Standard-terminal befindet sich unter Anwendungen > Terminal
  • Windows: Sie können entweder das Linux-subsystem ausgeführt wird, verwenden Sie die Eingabeaufforderung oder software wie Hyper

Holen Sie sich eine lokale WordPress-Instanz laufen

Da sind wir mit den modernen JavaScript-stack, es ist wichtig, um eine Instanz von WordPress läuft lokal auf Ihrem Rechner. Wenn Sie nicht getan haben, bevor, Lesen Sie in diesem guide. Ich empfehle, dass Sie etwas herunterladen wie MAMP, XAMP oder ähnliches, wenn Sie neu sind.

Sobald Sie einen lokalen Instanz ausgeführt wird, ein Thema bereit, um mit zu spielen, da werden wir Tauchen in ein wenig von Thema code später auf.

Moderne JavaScript kann entmutigend sein, wenn Sie nicht arbeiten, mit ihm der Tag-zu-Tag, so dass wir gemeinsam gehen, um zu Graben in einige der grundlegenden Elemente der modernen version von JavaScript: allgemein bekannt als ES6.

Wir sind dann zu nehmen wissen und es verwenden, um zu bauen ein Reagieren Komponente. Reagieren ist ein sehr beliebtes framework, aber wieder, es ist ziemlich entmutigend, so werden wir zu Graben, in sich zusammen und versuchen zu reduzieren. Die Gutenberg-JavaScript-setup ähnelt sehr viel Reagieren, es ist also auch eine übung in, vertraut mit component based, reaktive JavaScript-frameworks im Allgemeinen.

Sobald wir haben, dass abgedeckt, ich hoffe, Sie gehen, um sein Gefühl ziemlich genial, so dass wir jetzt in Schwung und Tauchen Sie ein in die manchmal gefürchtete, webpack, das ist ein Werkzeug, das wir verwenden, um unseren Prozess JavaScript und smoosh Sie zusammen. Wir gehen auch zu bekommen Babel ausführen, die auf Magische Weise unser ES6-code in besser unterstützt ES5-code.

An diesem Punkt, ich denke, Sie werden voller Vertrauen, in diesem stack, also werden wir nicht weiterkommen in der main natürlich—wir bauen unsere benutzerdefinierte Karte zu blockieren.

Klingt gut? Genial. Lassen Sie uns Tauchen Sie ein!

Artikel-Serie:

  1. Serie Einführung (Dieser Beitrag)
  2. Was ist Gutenberg, Eh?
  3. Eine Grundierung mit erstellen-guten-block (Kommt Bald!)
  4. Moderne JavaScript-Syntax (Kommt Bald!)
  5. Reagieren 101 (Kommt Bald!)
  6. Einrichten einer Benutzerdefinierten webpack (Kommt Bald!)
  7. Eine Eigene “Karte” Block (Kommt Bald!)