Lernen Gutenberg: A-Grundierung mit erstellen-guten-block

0
19

Willkommen zurück! Wir haben uns angeschaut, was Gutenberg ist und wie es funktioniert von der admin-Seite. Gutenberg wird sicherlich haben massive Auswirkungen auf die WordPress-Welt. Wenn du einfach nur hier ankommen und haben keine Ahnung, was wir reden, empfehle ich mindestens skimming-Teil 1 stellen Sie sicher, Sie haben den entsprechenden hintergrund.

Erstellen wir einen benutzerdefinierten block mit ein bisschen Hilfe von einem wunderbaren Werkzeug namens erstellen-guten-block. Vorwärts!

Artikel-Serie:

  1. Serie Einführung
  2. Was ist Gutenberg, Eh?
  3. Eine Grundierung mit erstellen-guten-block (Dieser Beitrag)
  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!)

Blöcke Leben in plugins

Erstellen einer Gutenberg-block, erstellen Sie ein WordPress-plugin. Alles, was betrifft *Inhalt*, wie eine Gutenberg blockiert wird, muss ein plugin, so dass es aktiv bleibt, auch beim ändern der Themen. Etwas, das sehr theme-spezifisch oder beeinflusst nur, wie Ihre Website aussieht, kann ein Teil des theme-Dateien oder functions.php Datei in deinem theme. Lesen Sie mehr über diese Unterscheidung in unserem Artikel über WordPress-Funktionalität des Plugins.

Das heißt, die Blöcke in Themen Thema ist ein heißes Thema. Das WordPress-Theme-Review-Team ist darüber zu diskutieren, ob oder nicht zu erlauben, Blöcke in Themen überhaupt als Teil des Designs. Ein post, “Immer Bereit für Gutenberg”, auf das Thema Review-Team Machen Seite diese Frage gestellt, und wurde dort mit starken Meinungen auf beiden Seiten. Der Allgemeine Konsens ist jedoch, dass die Blöcke sind plugin-Territorium.

WordPress.org besteht aus verschiedenen teams, jedes mit einer eigenen homepage an make.wordpress.org/team-name Kanal in der WordPress-Slack, und eine wöchentliche Besprechung. Wenn Sie interessiert sind daran interessiert, WordPress oder neugierig, wie es funktioniert, empfehle ich das stöbern durch die Liste der teams, die hier der Beitritt zu einer Slack-Kanal, und knallen in wöchentlichen treffen, um zu sehen, wie alles passiert.

In der Fernen Zukunft, es ist möglich, dass Themen aus *nur ein stylesheet*, während alle benutzerdefinierten Funktionen und die Struktur der Inhalte kommen aus den Blöcken in plugins. Ich bin um die Worte von Tammie Lister, Gutenberg-design führen, auf diese episode von Shoptalk Zeigen. Sehr viel Wert Sie anzuhören!

Nehmen Sie eine setup-Verknüpfung… für jetzt

Was hielt mich davon ab zu Tauchen Kopf zuerst in die moderne JavaScript ist der dang-Konfiguration. Die transpiling, die Bündelung, die code-splitting, den Baum zu schütteln… yeesh, ich bin beschäftigt! Ich Liebe es, neue Dinge zu lernen, aber es gibt eine Grenze für meine Geduld und, offenbar, die Konfiguration eines build-Prozesses für ein kleines test-Projekt ist mein limit.

Es ist dieses Gefühl, dass führte zu der Entwicklung von einem tool namens erstellen-reagieren-app, zero-configuration-build-setup für, Sie Ahnen es, die Erstellung Reagieren apps. Es ist einfach Brillant. Vorausgesetzt, Sie haben eine funktionierende node und npm-installation, können Sie einen einzigen Befehl ausführen und Sie haben ein Projekt für Sie bereit zu beginnen Codierung Reagieren. Die transpiling, Bündelung und Baum schütteln ist für Sie eingerichtet.

Aber warte mal… können wir schaffen-reagieren-app für Gutenberg-Blöcke? Nein, aber die oben genannten erstellen-guten-block, entwickelt und schön dokumentiert von Ahmad Awais, hat so ziemlich die gleiche Sache für uns! Das ist es, was wir mit den für unseren block.

erstellen-guten-block ist nicht die einzige block-Generierung tool zur Verfügung! Sie können Gerüst ein block mit WP-CLI, aber ich habe nicht gewählt, weil die Standard-Einstellung ist für ES5 (für jetzt) und nicht geben uns, was wir brauchen für unsere Reise in die moderne JavaScript. Davon abgesehen, fand ich es hilfreich zu Graben, durch den ES5 Implementierung eines Blocks als eine Möglichkeit zur Stärkung der grundlegenden Konzepte, also vielleicht probieren Sie es, nachdem Sie fertig hier!

Ja, dies ist eine Abkürzung. Wir wählen, um zu vermeiden, das Verständnis der Kernkonzepte der Technologie, indem Sie mit einem Werkzeug. Wir müssen lernen, diese Konzepte eines Tages. Aber für jetzt, ich bin völlig in Ordnung Umgehung dieser Konfiguration Schritt. Meine Philosophie über die Verwendung von tools wie: verwenden Sie, aber tun dies mit dem Verständnis, dass es *wahrscheinlich* nicht speichern Sie Zeit und Mühe in die lange Sicht.

Es ist erwähnenswert, dass, wie create-reagieren-app erstellen-guten-block ermöglicht das npm werfen Sie Ihre Konfiguration. Dies bedeutet, dass dabei alle Einstellungen, die das tool erstellt hat, für uns und macht Sie verfügbar für die Anpassung. Beachten Sie jedoch, dass dies nicht rückgängig gemacht werden; wenn Sie Auswerfen und dann einen Fehler machen, Sie sind auf Ihre eigenen, um es zu beheben! Wie ich schon sagte, du musst lernen es eines Tages 🙂

Schritt 1: Installieren erstellen-guten-block

Wir werden zuerst installieren erstellen-guten-block weltweit, etwa so:

npm install-g erstellen-guten-block

In der Theorie sollte diese Arbeit kein problem, aber das ist nicht realistisch. erstellen-guten-block erfordert ein minimum von Knoten version 8 und npm 5.3, also, wenn Sie nicht aktualisiert werden, entweder von Ihnen für eine Weile, das ist ein möglicher Fehler (und hier ist eine mögliche Lösung).

Ich beginnen immer mit dem einfügen meiner Konsole Fehler in eine Suchmaschine ein und entfernen von Zeilennummern und Dateinamen, um meine Abfrage allgemein. Im Interesse der Verbesserung dieses tutorial, aber ich bin neugierig zu erfahren, was schief ging, so fühlen sich frei, postet Eure Frage in den Kommentaren als gut.

Schritt 2: Erstellen, die guten-block

Es ist an der Zeit! Let ‘ s do it! Sie wissen, was? Ich werde mich nicht, Ihnen zu sagen, wie denn Ahmad ‘ s Dokumentation ist so gut und es gibt keinen Sinn in der übernahme.

Gehen Sie hier und Folgen Sie Ahmad ‘ s Anweisungen zu erstellen, die guten-block in der command line.

Sie sollten so etwas wie dieses, wenn Sie den Befehl ausführen, erstellen-guten-block-test, wo “test” ist der name von meinem block.

Schritt 3: Aktivieren Sie das plugin

Gehen Sie zu Plugins-Bildschirm, aktivieren Sie die neuen block-plugin — es sollte als so etwas wie test-block — CGB-Gutenberg-Block Plugin , wo “test-block” ist, was Sie Ihren Namen blockieren, wenn Sie ihn erstellen.

Schritt 4: Das ist es! Wir verwenden unsere benutzerdefinierten block!

So einfach! Gehen Sie nun auf die editor-Ansicht eines post oder Seite, finden Sie den block, und fügen Sie es.

Obwohl ich mit dem Namen mein block “test” Suche nach “test” in den block selector ergab das falsche Ergebnis, wie Sie sehen können, in der gif oben. Der default-name des Blocks ist statt “CGB-Block” — wir werden dies ändern, sehr bald!

Text-editor-Einstellungen (optional)

Ich fand es sehr hilfreich, um einen bestimmten text-editor einrichten für die Entwicklung blockiert. Ich benutze Visual Studio den Code für mein text-editor, aber ich bin mir sicher, dass Sie herausfinden können, etwas ähnliches mit dem, was editor ist Ihre Präferenz.

Hier sind die wichtigsten Bestandteile:

  1. Einfachen Zugriff auf die Befehlszeile, um ein Auge auf build-Fehler (Compiler-Fehler)
  2. Ein Exemplar der Gutenberg-source von GitHub für code reference (download oder Klon gibt es hier)
  3. Einfacher Zugang zu Ihrem plugin-Verzeichnis und die Gutenberg-source-Verzeichnis von #2
Meine VS-Code-setup für Gutenberg Entwicklung. Beachten Sie die integrierte terminal und mehrere Quell-Verzeichnisse auf der rechten Seite.

In VS-Code, den ich erreichen dies mithilfe der folgenden features:

  1. Die integrierte terminal — öffnen mit Befehl + ~ auf dem Mac, oder aus der Menüleiste mit Ansicht > Integrierte Terminal
  2. Ein Arbeitsbereich mit Ordner sowohl für das plugin und die Gutenberg-source von GitHub. Sie können dies tun, indem Sie Ihren plugin-Verzeichnis in VS-Code”, wählen Sie ” Datei > Ordner Hinzufügen zum Arbeitsbereich und die Auswahl der Gutenberg-Verzeichnis, das Sie heruntergeladen aus dem GitHub repo. Sie können dann speichern Sie den Arbeitsbereich, für den einfachen Zugriff mit Datei > Arbeitsbereich Speichern Als (ich nannte meine “Blöcke” im Bild oben).

Dieser Teil ist optional, und Sie brauchen nicht zu verwenden, VS-Code. Das wichtigste ist, dass den einfachen Zugriff auf die Befehlszeile plugin-Quelle, und die Gutenberg-plugins als Quelle für die Referenz. Können Sie völlig die Quelle auf GitHub, wenn Sie mögen, aber ich genießen, die Dateien in der gleichen Umgebung für side-by-side-Vergleich und die einfache Suche mit Find Im Ordner.

Wir sind mit Gutenberg aus dem plugin-repository für die eigentliche Funktionalität, aber diese Instanz enthält nur die kompilierten Dateien. Wir wollen die Quelle-Dateien, also müssen wir das codebase-direkt von GitHub. Wenn Sie möchten, um Zugang zu updates bevor Sie veröffentlicht werden in dem plugin können Sie Klonen das repository. Es wäre durchaus möglich zu bauen und die Arbeit von der GitHub-version, aber der Einfachheit halber, verwenden wir die plugin-version in diesem tutorial.

Wenn Sie bereit sind zu gehen, stellen Sie sicher, dass Sie die cd würde in dem block-plugin-Ordner und führen Sie npm start. Sie sollten sehen, eine befriedigende Nachricht, dass der Vorgang begonnen hat:

Nach dem ausführen von npm start in unseren plugin-Ordner, wir sind offiziell “gerade für Veränderungen…” (und wir müssen nicht berühren Sie eine beliebige config!!! Cheater…)

Ich bin mit Wes Bos ist das Thema für Cobalt 2 in VS-Code sowie das gleiche Thema für ZSH in mein Terminal und iTerm. Das macht absolut keinen Unterschied, wie die Technologie funktioniert, aber es macht einen Unterschied, auf einer persönlichen Ebene, um Ihre Arbeitsumgebung anzupassen und machen es sich wie Ihre eigenen (oder Wes Bos”, in meinem Fall).

Was ist was

Nun, wir sind in den code-Modus, lassen Sie uns einen Blick auf die Dateien, die wir hier arbeiten Sie mit. Ich werde leihen diese aus dem erstellen-guten-block-Readme-Datei als Referenz:

└── test-block
├── plugin.php
├── Paket.json
├── README.md
|
├── dist
| ├── blocks.build.js
| ├── Blöcke.editor.bauen.css
| └── Blöcke.Stil.bauen.css
|
└── src
├── block
| ├── block.js
| ├── editor.scss
| └── style.scss
|
├── blocks.js
├── common.scss
└── init.php

Für die Zwecke dieses tutorial, wir sind nur besorgt mit, was in dem src-Verzeichnis. Wir werden nichts anrühren, in dist (das sind kompilierte Dateien), plugin.php oder irgendwelche Nachzügler wie Paket.json -, Paket-lock.json oder.eslintignore.

plugin.php offiziell Warnungen WordPress plugins Existenz. Es erfordert src/init.php, die ist, wo wir schreiben alle PHP-wir brauchen Sie für unseren block(s). Im Allgemeinen werden wir nicht alles schreiben, was in plugin.php — aus der box, der nur code, der es enthält, sind die Kommentare zum registrieren des plugins.

Wir bohren in src:

└── src
├── block
| ├── block.js
| ├── editor.scss
| └── style.scss
|
├── blocks.js
├── common.scss
└── init.php

Das block-Verzeichnis enthält Dateien, die für einzelne, einzelner block. Dies beinhaltet:

  • block/block.js — Alle JavaScript-für die einzelnen Blocks.
  • block/editor.scss — Sass teilweise für Stile, die spezifisch für die editor-Ansicht
  • block/Stil.scss — Sass teilweise für Stile, die spezifisch für die front-end-Sicht, d.h. was Sie sehen, wenn Sie Ihre Seite/post.

Öffnen Sie jetzt src/blocks.js:

Ich denke, der src/blocks.js wie Sie eine Tabelle der Inhalt für Blöcke, ähnlich der Rolle eines index.scss oder main.scss in ein Sass-Projekt-Struktur. Wenn wir wollten, um zwei Blöcke in unserem plugin — sagen wir: dies war eine suite von custom blocks — konnten wir, in der Theorie, duplizieren Sie das block-Verzeichnis, benennen Sie Sie, und fügen Sie so etwas wie dieses zu src/blocks.js:

importieren ‘new-block/block.js’;>

Dann, was auch immer erstellen-guten-block für uns vorbereitet hat hinter den kulissen wussten, auch unsere neuen block block.js im Haupt-Skript-Datei für Sie zusammengestellt dist (jetzt ist eine gute Zeit, werfen Sie einen Blick auf dist, wenn Sie nicht bereits haben).

So weit, so gut, Recht? Wir haben bisher noch nicht wirklich gekommen, um beliebigen JavaScript-Code…

Eine Herausforderung!

Okay, jetzt ist es Zeit für eine Herausforderung! Öffnen src/block/block.js und nehmen Sie ein paar Minuten zu Lesen, durch den Autor, Ahmad s, ausgezeichnete Kommentare.

Dann, sehen, wenn Sie herausfinden können, wie*:

  1. Ändern Sie den Namen von dem block, das ist das eine, die zeigt, die in dem block selector
  2. Ändern Sie das Symbol von Ihrem block (❤ Dashicons)
  3. Ändern Sie den text, der angezeigt wird auf dem front-end, d.h., wenn Sie “View Post”
  4. Ändern Sie den text, der angezeigt wird auf dem back-end, d.h. der editor-Ansicht
  5. Geben Sie den front-end-Ansicht ein border-radius von 30px
  6. Geben Sie die editor-Ansicht, die einen Farbverlauf hintergrund
  7. Der text im ersten Absatz-Tags editierbar

* Sie sollten in der Lage sein zu arbeiten, durch (fast!) alle diese in etwa 10 Minuten. 😉

Wie war das?

Welche Probleme hast du laufen? Haben Sie müde von Neuladen der editor? Hast du das “Dieser block wird angezeigt wurden extern geändert” – Meldung mehr als oft Sie möchten? Ich sicher haben, aber so ist das Leben mit einer neuen Technologie — es gibt eine Menge zu wünschen übrig in der Entwickler-Erfahrung, aber dies ist nicht eine Priorität für das team in der Gegenwart und kommen in den späteren Stadien der Gutenberg geplante Entwicklung.

Am wichtigsten ist, hast du #7?

Wenn ja, dann sollten Sie das schreiben dieses tutorial! Das war ein Manko. Ich hoffe, Sie fühlte sich zumindest ein wenig verwirrt und neugierig, weil das ist, wie wir lernen! Dazu kommen wir in Teil 3.

Nun, wir haben unser Lager, lassen Sie uns tiefer Graben, in dieser Vorstellung von einem block.

Skelett eines Blocks

Hier ist block.js mit den Kommentaren entfernt — das, was wir nennen können das Skelett eines statischen block:

// Abgespeckte version der src/block/block.js

// TEIL 1: Import-Abhängigkeiten
import./Stil.scss’;
import./editor.scss’;

// TEIL 2: Setup-Verweise auf externe Funktionen
const { __ } = wp.i18n;
const { registerBlockType } = wp.Blöcke;

// TEIL 3: Register der block!
registerBlockType( ‘cgb/block-test’, {

// Teil 3.1: Block-Einstellungen
Titel: __( ‘test – CGB-Block’ ),
Symbol: ‘Schild’,
Kategorie: ‘Allgemeine’,
keywords: [
__( ‘test — CGB-Block’ ),
__( ‘CGB Beispiel’ ),
__( ‘create-guten-block’ ),
],

// TEIL 3.2: Markup-Code in den editor
edit: function( props ) {
return (
<div>Sie sehen diese in den editor</div>
);
},

// TEIL 3.3: Markup gespeichert Datenbank
speichern: function( props ) {
return (
<div>Dieses wird in der Datenbank gespeichert und kehrte mit the_content();</div>
);
},
} );

Lasst uns einen side-by-side-Vergleich mit einem anderen static-block, der “Separator” block aus dem Standard-Blöcke enthalten in Gutenberg. Die Datei befindet sich in gutenberg/blocks/library/separator/index.js. Wenn Sie den Ordner öffnen, in beiden VS-Code oder Erhaben, Sie können verwenden Sie das Tastaturkürzel Cmd + Option + 2 auf einem Mac, oder wählen Sie Ansicht > Split-Editor, um die Dateien side-by-side.

Wenn Sie die text-editor-setup zuvor skizzierten, sollten Sie etwas wie dieses:

In diesem Bild, ich kopieren/eingefügt, die oben stripped-down-version der block in eine leere Datei zu vergleichen, ohne die Kommentare. Das ist optional!

Welche Gemeinsamkeiten stellt Ihr fest? Welche Unterschiede? Öffnen Sie ein paar von den anderen block-Verzeichnisse im gutenberg-master/library/, und werfen Sie einen Blick in Ihre Dateien, und vergleichen Sie mit unserem block Skelett. Verbringen Sie ein paar Minuten Lesen Sie den code und sehen, ob Sie können vor Ort einige Muster.

Hier sind ein paar Muster, die ich bemerkt:

  1. Es sind geschweifte Klammern in Deklarationen von Variablen und Funktionsargumente alle über dem Platz.
  2. Markup erscheint innerhalb von return-Anweisungen und enthält oft gemacht-bis die tag-Namen (den Sie vielleicht wiedererkennen werden diese wie Reagieren, Komponenten).
  3. Alle Blöcke scheinen über ein Einstellungsobjekt enthält Einträge für Titel, Symbol , Kategorie, etc. In der Bibliothek Blöcke, erscheinen Sie in einem export-const-Einstellungen = … Objekt, in der Erwägung, dass in unserem plugin-block, Sie sind Teil eines Arguments für registerBlockType.
  4. Alle Blöcke haben die Funktionen zum Bearbeiten und speichern Sie als Teil des settings-Objekts.
    • Die syntax für die Funktionen ist etwas anders als unser block ist editand save-Funktionen:
      • edit( { className } ) { … } separator/index.js
      • edit: function(props) { … } in unserem block.js
    • Die Bibliothek Blöcke erscheinen Verweis Attribute und anstelle von Requisiten
  5. Alle Bausteine sind in der Bibliothek enthalten index.js. Einige enthalten eine block.js oder andere Dateien, die enthalten eine definition für eine Klasse, die sich auf ein Bauteil, z.B. Klasse LatestPostsBlock extends Komponente { ….

Was findest du? Fühlen Sie sich frei, um einen Beitrag in die Kommentare (aber nicht hier aufhören zu Lesen!).

Eine etwas kurze und relevante Tangente

Sie haben wahrscheinlich bemerkt, eine Aussage, Import @wordpress/i18n in jeder index.js und block.js Datei in der Bibliothek, sowie einen Verweis auf wp.i18n-plugins block.js. i18n steht für Internationalisierung genauso wie a11y steht für accessibility. Internationalisierung bezieht sich auf die Praxis der Entwicklung Ihrer Anwendung leicht in andere Sprachen zu übersetzen. Da wollen wir bereiten alle statischen text ein, in unsere Blöcke für die übersetzung, weisen wir die wp.i18n dem alias __der Kürze wegen, sehr ähnlich, wir benutzen ” $ ” als ein alias für das gute ‘ol jQuery. Lesen Sie mehr über i18n für WordPress hier

Es ist auch erwähnenswert, wo die wp in wp.i18n herkommt und warum es auf die verwiesen wird, wie @wordpress/i18n in der Gutenberg-Quelle. wp ist eine Globale Objekt — Globale Bedeutung eine variable überall verfügbar — mit allen WordPress’ öffentlich verfügbaren JavaScript-API-Methoden. Um dies zu demonstrieren, öffnen Sie die Konsole, während Sie auf eine Seite innerhalb der WordPress-admin. Typ wp und drücken Sie die EINGABETASTE. Sie sollten so etwas wie dieses:

Also, jederzeit, die wir auf etwas, wp-Objekt, alles, was wir tun, ist der Zugriff auf einige Funktionen der WordPress-JavaScript-API bietet uns. @wordpress/i18n in der Gutenberg-Quelle ist die gleiche Sache zu tun, aber seine importieren von Funktionen aus einer npm-Modul eher als das Globale Objekt. Die Funktionen in der wp global wurden absichtlich ausgesetzt, um die öffentliche API von der WordPress-core-Entwickler für die Verwendung in themes und plugins.

Sie sind so etwas wie meine innere Kritiker, denken Sie vielleicht, “Was auch immer, Lara, ich kümmern sich nicht um diese details. Sag mir, wie zu einem kühlen block mit allen JavaScript schon!” Zu dem würde ich Antworten:

Es gibt so viele bewegliche Teile und neue Konzepte in diesem Umfeld, das ich gefunden habe, desto mehr code, den ich für selbstverständlich zu nehmen, der mehr frustrierend und zeitraubend, dann wird der Prozess. Ansatz jede Zeile code, die mit Neugier! Wenn Sie nicht wissen, was es tut, tun, eine zu Finden im Ordner in der Gutenberg-Quelle und finden Sie, wenn Sie einen Weg zu Folgen. Für mich zumindest, war dies ein sehr angenehmer Weg, um Ansatz ungewöhnlichen code, als zu versuchen, etwas zu bauen, willkürlich mit kopieren und einfügen.

Und mit, dass, let ‘ s wrap-up Teil 2!

Hausaufgaben

Was? Hausaufgaben? Heck ja, es gibt Hausaufgaben! In Teil 3, Andy 🍉 Tauchen ein in die moderne JavaScript-goodies: Reagieren, JSX, und ES6-syntax. Obwohl unsere Serie ist geschrieben für diejenigen, die relativ neu in JavaScript ist es hilfreich zu lernen, den code und die Konzepte aus vielen verschiedenen Blickwinkeln und Ressourcen.

In einer Anstrengung, um vorstellen einige Konzepte zu früh, hier ein kurzer überblick für einige “Hausaufgaben” vor Teil 3:

1. Verbringen Sie einige Zeit (1-2 Stunden) auf einen Reagieren, tutorial, oder bis Sie erklären in Ihren eigenen Worten:

  • Die render-Methode in Reagieren
  • JSX und, dass diejenigen-up-tag-Namen anzeigen zu JavaScript-Funktionen
  • Warum Reagieren verwendet className statt Klasse

Empfohlene Ressourcen:

  • Ich mochte Lernen React.js von Eve Porcello auf Lynda.com. Lynda ist ein Kostenpflichtiger Dienst, aber anschauen kann man kostenlos mit einem Bibliotheksausweis in einigen Städten (Los Angeles, das ist sicher).
  • Ich empfehle auch dieser Artikel-Serie, Lernen, Reagieren Sie mit erstellen-reagieren-app von Brandon Richey
  • Es gibt viele, viele Möglichkeiten auf Youtube!
  • Ich arbeite meinen Weg durch Brian Holt das Komplette Intro zu Reagieren natürlich auf den Frontend Master (bezahlt) und es ist sehr gut.
  • Ich kann nicht gehen, ohne zu erwähnen, Wes Bos Reagieren für Anfänger Kurs(bezahlt) — ich habe es nicht getan und mich, aber ich habe nur gehört, große Dinge, und er hält es up-to-date!

Ich würde auch empfehlen, das Lesen Reagieren Staat von Grund auf hier auf CSS-Tricks, von Kingsley Silas, weil es speziell Tauchgänge in Staat Reagieren. Wenn Sie die neue zu Reagieren, wird dies eine Menge zu verdauen, aber ich denke, es lohnt sich, es in Ihrem Gehirn so schnell wie möglich, auch wenn es nicht sinnvoll ist, ganz.

2. Verstehen ES6 Destructuring und finden Sie ein paar Beispiele für diese in der Gutenberg-Quelle und unser plugin (das wird nicht schwer sein).

Empfohlene Ressourcen:

  • Blog post: Ein Toter Einfache Intro zu Destructuring Objekte von Wes Bos
  • Video: Destructuring: Was, Warum und Wie auf der Fun Fun Funktion (dies sind die A+ — Uhr diese über die Pfeil-Funktionen, während du dabei bist)

3. Wohl mit bedingt oder ternäre Operatoren.

In einem Satz, ternäre Operatoren sind die Kurzform für if…else-Anweisungen. Sehen Sie diese alle über die Gutenberg-source — finden Sie einige einfache Beispiele, die Ihnen einen fallback für ein string-Wert, sowie robuster verwendet wie in blocks/library/paragraph/index.js zum Beispiel.

Empfohlene Ressourcen:

  • Der MDN-Artikel ist sehr gut.
  • Auch einen Blick in die nicht-Betreiber — hier ist ein Stack-Overflow-Beitrag darüber.
  • Nicht zu weit unten das Kaninchen-Loch, aber wenn Sie besonders ehrgeizig, einige der Forschung über das Typumwandlung in JavaScript. Dieser Artikel auf FreeCodeCamp und dieses Kapitel, von der Sie nicht Wissen, JS von Kyle Simpson sind solide Ansatzpunkte.

Okay! Vielen Dank für das Lesen, und sehen Sie in Teil 3 für Reagieren, JSX, und andere leckereien.

Kommentare

Gab es irgendeinen Teil von diesem tutorial nicht sinnvoll? Hast du irgendwo verloren? Wir würden lieben, zu halten, die dies besser, so lassen Sie es uns bitte wissen, wenn ein Teil dieser war schwer zu Folgen, oder wenn Informationen falsch bzw. veraltet.

Danke nochmal, und viel Glück!

Artikel-Serie:

  1. Serie Einführung
  2. Was ist Gutenberg, Eh?
  3. Eine Grundierung mit erstellen-guten-block (Dieser Beitrag)
  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!)