Lernen Gutenberg: Was ist Gutenberg, Eh?

0
30

Gutenberg ist der neue Reagieren-driven SPA-editing-Erfahrung in WordPress. Oh, warten Sie, eine Reihe von Schlagworten zählt nicht für eine brauchbare Erklärung der software? Wir gehen zu entpacken, dass die string-von Schlagworten wie erklären wir das, was Gutenberg ist.

Artikel-Serie:

  1. Serie Einführung
  2. Was ist Gutenberg, Eh? (Dieser Beitrag)
  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!)

Zuerst ein vorher-und nachher-screenshot könnte Fahrt nach Hause die Idee für Sie:

Auf der linken Seite der editor, wie Sie existiert, pre-Gutenberg. Auf der rechten Seite, mit Gutenberg aktiviert über ein plugin.

Schlagwort #1: Editing-Erfahrung

Gutenberg ist ein redesign des WordPress-WYSIWYG-editor.

Der editor in WordPress ist traditionell, die einzigen WYSIWYG-Feld (blob-Inhalte) , speichert den gesamten Inhalt der post an den post_content-Datenbank-Tabelle. Gutenberg ändert sich nicht: es speichert alle Inhalte veröffentlichen, um die post_content Tabelle abgerufen werden durch aufrufen von the_content() in den PHP-Vorlagen.

Also ja, Guttenberg ist nur ein redesign der editor… aber es ist eine Farce zu nennen, Gutenberg nur ein redesign der editor! Es ist so viel mehr als das!

Gutenberg führt zu einem ganz neuen nachdenken über Inhalte in WordPress. Es gibt nicht nur Entwickler, die eine native Möglichkeit zum verarbeiten von Inhalten in Blöcken (wir werden auf diese als Blöcke, das ist Ihr offizieller name), es ermöglicht die end-Benutzer zu erstellen reichhaltiger, dynamischer Seitenlayouts mit WordPress aus der box. Ohne Gutenberg, dies würde wahrscheinlich erfordern eine Horde von Drittanbieter-Plug-ins (lies: shortcode Erbrechen und server-Belastung), als es derzeit der Fall ist mit dem, was bekannt ist als die WordPress – “Classic” – editor.

Für die Zwecke dieses Artikels und unser lernen, wissen dies: Gutenberg nicht ändern, wie WordPress-Funktionen in seinem innersten Kern. Es ist zu 99% ein ändern der editor-Benutzeroberfläche. Klicken auf “Veröffentlichen” noch speichert Inhalte zu post_content—es gibt einfach viel mehr Möglichkeiten zur Gestaltung der user experience von schreiben und Bearbeiten von Inhalten.

Schlagwort #2: SPA

Übersetzung: Gutenberg ist eine Single-Page-Anwendung innerhalb von WordPress.

In einer Single Page Application (SPA) ist eine Anwendung, die läuft auf eine einzelne Seite zu laden, und der nachfolgenden Wechselwirkungen angetrieben werden zu 100% von JavaScript-und Ajax-Anfragen.

Der Hinweis “innerhalb von WordPress” Teil der obigen Aussage—Gutenberg nicht (derzeit) Auswirkungen jeder Teil des WordPress-jenseits, wo man normalerweise sehen Sie den editor. Im wesentlichen Gutenberg-ersetzt den WYSIWYG TinyMCE editor mit einem SPA.

Dies bedeutet, dass das schreiben von Inhalten in Gutenberg ist schnell und zufriedenstellend, und ich wünschte, ich könnte sagen, meine (begrenzte) Erfahrung mit der Entwicklung von Blöcken die gleiche. Für unsere Reise, das WELLNESS-business bedeutet, dass langsame laden der Seite während der Entwicklung (wir laden viele JavaScript) undurchsichtig und frustrierend Konsole Fehler-und npm-Module für Tage.

Natürlich, das ist ein Glas-halb-leer Blick auf die situation. Glas-halb-voll? Es fühlt sich wirklich gut an, wenn etwas funktioniert. Die Gewinne sind wenige und weit zwischen auf den ersten, aber bleiben Sie dabei!

Schlagwort #3: Reagieren-driven

Übersetzung: ja, Gutenberg, errichtet wird, Reagieren. Das ist wahrscheinlich nicht gehen, um sich die Situation bald ändern, wenn überhaupt.

Es gab einige #hotdrama wieder im September-Oktober 2017, über die Wahl eines framework für WordPress Hinzugefügt, da eine patent-Klausel zu Reagieren. Aber nach den großen Spielraum von open-source-Gemeinschaften, einschließlich WordPress (die, ähem, Kräfte ~30% der websites), änderte es wieder.

Als im Januar dieses Jahres (2018) gab es noch flüstert, dass ein Rahmenbeschluss für core anhängig ist, aber bis wir offizielle Wort von den Mächten, die sein, lassen Sie uns die Fakten betrachten.

  • Gutenberg ist in der aktiven Entwicklung.
  • Themes und plugins sind in der aktiven Entwicklung, die Vorbereitung für Gutenberg.
  • All das geschieht in Reagieren.

Ich setze mein Geld auf Sie Reagieren, und wenn das ändert sich, toll! Werde ich haben, Reagieren auf meine Bewerbung bekommen und lernen, was seine Ersatz sein kann.

Wichtige Ressourcen

  1. Die GitHub-repo — Dies ist vor allem für die Suche nach Fragen, Wann Sie kommen während der Entwicklung zu sehen, wenn Sie bereits eingereicht.
  2. Die Gutenberg-Handbuch — hier der offizielle Gutenberg-Dokumentation zu Leben.

Vorsicht!

Während das Gutenberg-Projekt ist weit genug Fortgeschritten, dass es keine große infrastrukturelle Veränderungen, wir müssen uns daran erinnern, dass Gutenberg ist Marke neue software in der aktiven Entwicklung ist und alles passieren könnte. Warum nicht an der front? Dies ist eine sehr spannende Arbeit.

Die WordPress-community hat bereits begonnen, sich der Aufgabe der Erstellung von tools, tutorials, Fallstudien, Kursen und community-Ressourcen beigetragen.

, Die being said, Sie können Suche eine Frage, die nicht gestellt worden vor. An einem gewissen Punkt, werden Sie wahrscheinlich feststellen, selbst das Lesen der Gutenberg-source-code für die Dokumentation, und Sie können feststellen, dass die vorhandene Dokumentation auf dem neuesten Stand. Sie können testen, eine Beispiel aus einem zwei Wochen alten tutorial, nur zu finden, es nutzt eine veraltete API-Methode.

Wenn Sie kommen über etwas, das Sie fühlen, ist nicht wie es sein sollte, die Forschung und berichten Sie die Angelegenheit auf GitHub, Fragen Sie in der # – Kern-Kanal-editor der WordPress-Lose, oder zu warnen, den Autor der oben genannten out-of-date blog-post. Und wenn es in der Dokumentation, das ist ein problem, Sie können immer Update it yourself!

Einrichten

Jetzt möchte ich für das einrichten einer Entwicklungsumgebung, so dass wir weiterhin diese Diskussion mit mehr Kontext. Diese Dinge tun:

  1. Einrichten einer lokalen WordPress-Installation, jedoch können Sie entscheiden, das zu tun—dies kann ein vorhandenes Projekt oder eine frische Installation. Nur etwas, das kann sehr gebrochen für demo-Zwecke.
  2. Aktivieren Sie ein relativ einfaches Thema. Zwanzig Siebzehn wird gut funktionieren. Das einzige, was Ihr Thema haben muss, ist ein Aufruf von the_content(); im post-und page-templates, und die meisten out-of-the-box-Themen.
  3. Installieren Gutenberg. Finden Sie es in der plugin-repository. Diese version ist sehr weit Fortgeschritten und werden regelmäßig aktualisiert, so brauchen wir nicht zu befürchten, wenn man von einer Entwicklung zu bauen.
  4. Aktivieren Sie das Gutenberg-plugin und erstellen Sie einen neuen Beitrag.

Wenn Sie nicht haben ausführen einer WordPress Website lokal vor, Lesen Sie in diesem guide. Wir empfehlen dringend, dass Sie etwas herunterladen wie MAMP, XAMPP, oder ähnlich, wenn dies Ihre erste Zeit.

Lassen Sie uns Erkunden

Sollten Sie etwas viel wie diese:

Eine größtenteils leere post in Gutenberg. Eingeben / zeigt den block selector.

Wie im Bild oben eingeben / zeigt eine Liste der Blöcke. Löschen Sie, /<code> und auf der rechten Seite sollten Sie eine <code>+, dass, wenn darauf geklickt wird, wird zeigen, eine zusätzliche Liste von Blöcken, nach Kategorie organisiert.

Eine andere Ansicht der Blöcke, dieses mal organisiert durch Kategorie.

Beachten Sie das panel auf der rechten Seite mit Registerkarten für beide “Dokument” und “Block.” Der “Block” – tab ist bekannt als die block-Inspektor, und gibt uns einen schönen Bereich für block-spezifische Optionen, wie, also, für die Absatz-block:

Die block-Inspektor zeigt die Anpassungsmöglichkeiten, die für einen bestimmten block.

Ich empfehle, das Spiel mit Ihrer post für ein paar Minuten mehr und testen Sie die verschiedenen Arten von Blöcken. Halten Sie ein Auge auf, die inspector-Seitenleiste, um zu sehen, welche Optionen zur Anpassung jeder block bietet. Alle diese Blöcke, die Sie jetzt sehen werden, dass in einer Bibliothek der core-Blöcke und können als Referenz für die Erstellung eigener Blöcke (die wir im nächsten Teil dieser Serie!).

Nachdem Sie erstellt haben, eine post, aufgefüllt mit fünf-ish Blöcke verschiedener Arten, speichern und veröffentlichen Sie den Beitrag, dann werfen Sie einen Blick es aus der front-end. Schön!

Nun, lass uns etwas verrücktes tun. Deaktivieren Gutenberg aus die Plugins Bildschirm. Gehen Sie zurück zu den edit-Bildschirm für diesen Beitrag, und Sie sollten so etwas wie dieses in der “Classic” – editor:

Blöcke, wie Sie in der Datenbank gespeichert.

Was sind alle diese Kommentare? Diese Blöcke sind! Diese Karte eins zu eins mit den Blöcken, die Sie wählten bei der Erstellung der post.

Unter der Haube, die Blöcke sind Abschnitte von HTML-erkennbar durch die Sie umgebenden HTML-Kommentare. In dem obigen Beispiel, werden Sie feststellen, ein paar von den block-Namen, D. H. wp:block-name sind begleitet von JSON ist, wie der zweite Absatz block. Als ich angegeben, einige Anpassungsoptionen in den block, Inspektor, diese gespeichert waren, werden zusammen mit dem block-Bezeichner, so dass jetzt, wenn ich reaktivieren Gutenberg, meine Einstellungen nicht verloren gehen; Sie werden gerettet rechts neben dem block-definition selbst.

Bevor Sie reaktivieren Sie die plugins, die jedoch anzeigen, die post wieder aus dem front-end. Haben Sie verlieren Sie einige styling? Ich habe.

Gehen Sie voran und Reaktivierung der Gutenberg-plugin, und überprüfen Sie den editor, um sicherzustellen, dass Ihre Blöcke sind noch intakt. Da diese HTML-Kommentare, die Sie sein soll!

Nun, lassen Sie kramen und sehen, wo diese styles herkommen. Wenn ich überprüfen mein block-Absatz aus der front-end -, ich sehe ein paar inline-styles, ein Ergebnis der ausgewählten Optionen, die in dem block inspector—sowie einige strukturelle Stile von, was scheint, ein Stil.css-Datei in die Warteschlange eingereiht, die von der Gutenberg-plugin (nach 5.0 veröffentlicht wird, denken Sie daran, dies wird nur von WordPress, kein plugin).

Prüfung der Stile, die vom front-end, wir sehen, es gibt Stile kommen von Gutenberg selbst

Versuchen Sie nun, diesen block-Absatz aus der editor-Ansicht. Sie sollten sehen, den gleichen Satz von inline-styles und die gleichen p.hat-Absatz-Selektor angewendet, um den block aus der editor-Ansicht. Interessant!

Dies führt zu der Tatsache, dass die Blöcke können von gemeinsam genutzten Stilen zwischen dem Thema front-end und dem editor. Pre-Gutenberg, hatten wir Thema, oder front-end -, Stil -, und wir könnten getrennt enqueue-editor-style.css hinzufügen von CSS, um die WordPress-admin-Bereich. Jetzt, jedoch, unsere Blöcke freigeben von Stilen zwischen den front-end-und der editor-Ansicht ziemlich standardmäßig.

Glas-halb-voll-Perspektive: dies ermöglicht es uns, Handwerk eine Inhalts-Ansicht für Verlage, die ist viel näher an dem, was Sie sehen auf dem front-end. Sie nicht mehr benötigen, drücken Sie die Schaltfläche Vorschau ein Dutzend oder mehr Zeiten anzeigen kleine änderungen der Inhalte vor der Veröffentlichung.

Glas-halb-leer-Perspektive: damit könnte mehr Arbeit für uns als Designer und Entwickler, haben wir nun ein editor-Erfahrung zu erstellen, die zusätzlich zu den front-facing website! Und wir haben, um herauszufinden, welche Stile sind geteilt zwischen den beiden. Allerdings würde ich argumentieren, dass mit einem durchdachten design und front-end-Strategie, diese wird nicht so viel von einem Problem, als Sie denken.

Äääh… Wo ist das JavaScript?

Wir gehen zu müssen, um JavaScript, um einen block erstellen, in Gutenburg. Machen wir also ein block bereits! Dies ist der Schwerpunkt für den nächsten Beitrag in dieser Serie.

Artikel-Serie:

  1. Serie Einführung
  2. Was ist Gutenberg, Eh? (Dieser Beitrag)
  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!)