Gutenberg lernen: Eine Einführung mit create-guten-block

Willkommen zurück! Wir haben uns gerade angesehen, was Gutenberg ist und wie es auf der Admin-Seite funktioniert. Gutenberg wird zweifellos einen massiven Einfluss auf die WordPress-Welt haben. Wenn Sie gerade hier ankommen und keine Ahnung haben, wovon wir sprechen, empfehle ich Ihnen, zumindest Teil 1 zu überfliegen, um sicherzustellen, dass Sie über den entsprechenden Hintergrund verfügen.

Lassen Sie uns einen benutzerdefinierten Block mit Hilfe eines wunderbaren Tools namens create-guten-block erstellen. Auf geht’s!

Blöcke leben in Plugins

Um einen Gutenberg-Block zu erstellen, erstellen Sie ein WordPress-Plugin. Alles, was den *Inhalt* beeinflusst, wie ein Gutenberg-Block zweifellos, muss ein Plugin sein, damit es auch bei einem Wechsel des Themes aktiv bleibt. Etwas, das sehr themenspezifisch ist oder nur das Aussehen Ihrer Website beeinflusst, kann Teil der Theme-Dateien oder der functions.php-Datei in Ihrem Theme sein. Lesen Sie mehr über diese Unterscheidung in unserem Artikel über WordPress-Funktions-Plugins.

Das Thema „Blöcke in Themes“ ist jedoch ein heißes Thema. Das WordPress Theme Review Team diskutiert, ob Blöcke überhaupt als Teil von Themes zugelassen werden sollen. Ein Beitrag „Getting Ready for Gutenberg“ auf der Make-Seite des Theme Review Teams stellte diese Frage und erhielt starke Meinungen von beiden Seiten. Der allgemeine Konsens ist jedoch, dass Blöcke in den Bereich von Plugins gehören.

WordPress.org besteht aus verschiedenen Teams, jedes mit seiner eigenen Homepage unter make.wordpress.org/team-name, einem Kanal im WordPress Slack und einem wöchentlichen Meeting. Wenn Sie daran interessiert sind, sich in WordPress zu engagieren oder neugierig sind, wie es funktioniert, empfehle ich dringend, eine Liste der Teams hier zu durchstöbern, einem Slack-Kanal beizutreten und in ein wöchentliches Meeting zu platzen, um zu sehen, wie alles abläuft.

In ferner Zukunft ist es möglich, dass Themes nur noch aus *einer Stylesheet* bestehen, während alle benutzerdefinierten Funktionalitäten und Inhaltsstrukturen von Blöcken in Plugins stammen. Ich paraphrasiere die Worte von Tammie Lister, dem Design Lead von Gutenberg, in dieser Episode von Shoptalk Show. Sehr hörenswert!

Fürs Erste eine Abkürzung bei der Einrichtung nehmen

Was mich davon abgehalten hat, mich kopfüber in modernes JavaScript zu stürzen, ist die verdammte Konfiguration. Das Transpilieren, das Bundling, das Code-Splitting, das Tree-Shaking… jesses, ich habe zu tun! Ich lerne gerne Neues, aber meiner Geduld ist eine Grenze gesetzt, und anscheinend ist die Konfiguration eines Build-Prozesses für ein kleines Testprojekt meine Grenze.

Dieses Gefühl führte zur Entwicklung eines Tools namens create-react-app, eine Zero-Configuration-Build-Einrichtung, um, Sie ahnen es, React-Apps zu erstellen. Es ist brillant. Vorausgesetzt, Sie haben eine funktionierende node und npm Installation, können Sie einen einzigen Befehl ausführen und haben ein Projekt, das bereit ist, damit Sie in React mit dem Codieren beginnen können. Das Transpilieren, Bundling und Tree-Shaking ist für Sie eingerichtet.

Aber Moment mal… können wir create-react-app für Gutenberg-Blöcke verwenden? Nein, aber das bereits erwähnte create-guten-block, entwickelt und wunderschön dokumentiert von Ahmad Awais, tut so ziemlich dasselbe für uns! Das werden wir für unseren Block verwenden.

create-guten-block ist nicht das einzige Block-Generierungstool, das uns zur Verfügung steht! Sie können einen Block mit WP-CLI erstellen, aber ich habe mich entschieden, dies nicht zu tun, da die Standardeinrichtung für ES5 ist (vorerst) und uns nicht das gibt, was wir für unsere Reise in modernes JavaScript benötigen. Dennoch fand ich es hilfreich, die ES5-Implementierung eines Blocks zu durchforsten, um die Kernkonzepte zu festigen, also geben Sie ihm vielleicht eine Chance, nachdem Sie hier fertig sind!

Ja, das ist eine Abkürzung. Wir entscheiden uns dafür, die Kernkonzepte einer Technologie zu verstehen, indem wir ein Werkzeug verwenden. Wir werden diese Konzepte irgendwann lernen müssen. Aber vorerst ist es mir völlig in Ordnung, diesen Konfigurationsschritt zu überspringen. Meine Philosophie zur Verwendung solcher Werkzeuge: Nutzen Sie sie, aber tun Sie dies mit dem Verständnis, dass es Ihnen auf lange Sicht *wahrscheinlich* keine Zeit oder Mühe ersparen wird.

Es ist erwähnenswert, dass create-guten-block, ähnlich wie create-react-app, Ihnen erlaubt, Ihre Konfiguration mit npm eject zu bearbeiten. Das bedeutet, alle von dem Tool für uns erstellten Einstellungen offenzulegen und sie zur Anpassung verfügbar zu machen. Beachten Sie jedoch, dass dies unumkehrbar ist; wenn Sie auswerfen und dann einen Fehler machen, sind Sie auf sich allein gestellt, um ihn zu beheben! Wie gesagt, Sie werden es eines Tages lernen müssen :)

Schritt 1: create-guten-block installieren

Wir installieren zunächst create-guten-block global, so

npm install -g create-guten-block

Theoretisch sollte dies problemlos funktionieren, aber das ist nicht realistisch. create-guten-block erfordert eine Mindestversion von Node 8 und npm 5.3. Wenn Sie also noch keine davon aktualisiert haben, ist das eine mögliche Fehlerquelle (und hier ist eine mögliche Lösung).

Ich beginne immer damit, meinen Konsolenfehler in eine Suchmaschine einzugeben und Zeilennummern und Dateinamen zu entfernen, um meine Anfrage allgemein zu halten. Um dieses Tutorial zu verbessern, bin ich jedoch neugierig zu hören, was schief gelaufen ist. Fühlen Sie sich also frei, Ihr Problem auch in den Kommentaren zu posten.

Schritt 2: Diesen Gutenberg-Block erstellen

Es ist soweit! Tun wir es! Wissen Sie was? Ich werde Ihnen nicht sagen, wie, weil Ahmads Dokumentation so gut ist und es keinen Sinn hat, sie zu wiederholen.

Gehen Sie hierhin und folgen Sie Ahmads Anweisungen, um diesen Gutenberg-Block in Ihrer Kommandozeile zu erstellen.

Schritt 3: Das Plugin aktivieren

Gehen Sie zu Ihrem Bildschirm „Plugins“, aktivieren Sie Ihr neues Block-Plugin – es sollte etwas wie test-block — CGB Gutenberg Block Plugin heißen, wobei „test-block“ das ist, was Sie Ihrem Block bei der Erstellung genannt haben.

Schritt 4: Das ist es! Lassen Sie uns unseren benutzerdefinierten Block verwenden!

So einfach! Gehen Sie nun zur Editoransicht eines Beitrags oder einer Seite, lokalisieren Sie Ihren Block und fügen Sie ihn ein.

Obwohl ich meinen Block „test“ genannt habe, ergab die Suche nach „test“ im Blockauswahl die falsche Antwort, wie Sie im obigen GIF sehen können. Der Standardname des Blocks ist stattdessen „CGB Block“ – wir werden das sehr bald ändern!

Texteditor-Einrichtung (optional)

Ich habe es als sehr hilfreich empfunden, einen speziellen Texteditor für die Entwicklung von Blöcken einzurichten. Ich benutze Visual Studio Code für meinen Texteditor, aber ich bin sicher, Sie können etwas Ähnliches mit jedem Editor Ihrer Wahl finden.

Hier sind die wichtigsten Zutaten

1. Einfacher Zugriff auf die Kommandozeile, um Build-Fehler im Auge zu behalten (es wird Build-Fehler geben)
2. Eine Kopie des Gutenberg-Quellcodes von GitHub als Referenz (laden Sie ihn hier herunter oder klonen Sie ihn)
3. Einfacher Zugriff auf sowohl Ihr Plugin-Verzeichnis als auch das Gutenberg-Quellverzeichnis aus Punkt 2.

In VS Code erreiche ich dies mit den folgenden Funktionen

1. Das integrierte Terminal – öffnen Sie es mit Command + ~ auf dem Mac oder über die Menüleiste mit Ansicht > Integriertes Terminal.
2. Ein Workspace, der Ordner für Ihr Plugin und den Gutenberg-Quellcode von GitHub enthält. Sie können dies tun, indem Sie Ihr Plugin-Verzeichnis in VS Code öffnen, dann Datei > Ordner zum Workspace hinzufügen wählen und das Gutenberg-Verzeichnis auswählen, das Sie aus dem GitHub-Repository heruntergeladen haben. Sie können dann den Workspace für einfachen Zugriff unter Datei > Workspace speichern als speichern (ich habe meinen im obigen Bild „Blocks“ genannt).

Dieser Teil ist optional und Sie müssen VS Code nicht verwenden. Wichtig ist, dass Sie sofortigen Zugriff auf die Kommandozeile, den Quellcode Ihres Plugins und den Quellcode des Gutenberg-Plugins als Referenz haben. Sie können die Quelle auf GitHub konsultieren, wenn Sie möchten, aber ich genieße es, die Dateien in derselben Umgebung für den Seitenvergleich und die einfache Suche mit In Ordner suchen zu haben.

Wir verwenden Gutenberg aus dem Plugin-Repository für die eigentliche Funktionalität, aber diese Instanz enthält nur die kompilierten Dateien. Wir möchten die Quelldateien referenzieren, daher müssen wir die Codebasis direkt von GitHub verwenden. Wenn Sie Updates erhalten möchten, bevor sie im Plugin veröffentlicht werden, können Sie das Repository klonen. Es wäre durchaus möglich, von der GitHub-Version zu bauen und zu arbeiten, aber der Einfachheit halber verwenden wir in diesem Tutorial die Plugin-Version.

Gutenberg selbst ist kein Plugin mehr, es ist in WordPress 5.0+ integriert. Dieser Artikel behandelt, wo Sie diesen Code erhalten/ansehen können.

Sobald Sie bereit sind, stellen Sie sicher, dass Sie sich im Ordner Ihres Block-Plugins befinden (`cd`) und führen Sie npm start aus. Sie sollten eine zufriedenstellende Meldung sehen, die darauf hinweist, dass der Prozess gestartet wurde.

Ich verwende Wes Bos‘s Theme Cobalt 2 in VS Code sowie das gleiche Theme für ZSH in meinem Terminal und iTerm. Dies hat keinerlei Einfluss darauf, wie die Technologie funktioniert, aber es macht einen Unterschied auf persönlicher Ebene, Ihren Arbeitsbereich anzupassen und ihn zu Ihrem eigenen (oder in meinem Fall zu Wes Bos‘) zu machen.

Was ist was

Da wir uns nun im Code-Modus befinden, werfen wir einen Blick auf die Dateien, mit denen wir arbeiten werden. Ich leihe mir dies aus der create-guten-block Readme als Referenz

└── test-block
  ├── plugin.php
  ├── package.json
  ├── README.md
  |
  ├── dist
  |  ├── blocks.build.js
  |  ├── blocks.editor.build.css
  |  └── blocks.style.build.css
  |
  └── src
     ├── block
     |  ├── block.js
     |  ├── editor.scss
     |  └── style.scss
     |
     ├── blocks.js
     ├── common.scss
     └── init.php

Für die Zwecke dieses Tutorials sind wir nur an dem interessiert, was sich im Verzeichnis src befindet. Wir werden nichts in dist (das sind kompilierte Dateien), plugin.php oder irgendwelchen Resten wie package.json, package-lock.json oder .eslintignore anfassen.

plugin.php informiert WordPress offiziell über die Existenz unseres Plugins. Es benötigt src/init.php, wo wir jegliches PHP schreiben werden, das wir für unsere Blöcke benötigen. Im Allgemeinen werden wir nichts in plugin.php schreiben – standardmäßig enthält es nur die Kommentare zur Registrierung unseres Plugins.

Bohren wir uns in src

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

Das Verzeichnis block enthält Dateien für einzelne, individuelle Blöcke. Dazu gehören

• block/block.js – Die gesamte JavaScript-Datei für den einzelnen Block.
• block/editor.scss – Sass-Partial für Stile, die spezifisch für die Editor-Ansicht sind,
• block/style.scss – Sass-Partial für Stile, die spezifisch für die Frontend-Ansicht sind, d.h. was Sie sehen, wenn Sie Ihren Beitrag/Ihre Seite betrachten.

Öffnen Sie nun src/blocks.js

Ich betrachte src/blocks.js als ein Inhaltsverzeichnis für Blöcke, ähnlich der Rolle einer index.scss oder main.scss in einer Sass-Projektstruktur. Wenn wir zwei Blöcke in unser Plugin aufnehmen wollten – nehmen wir an, dies wäre eine Suite von benutzerdefinierten Blöcken – könnten wir theoretisch das Verzeichnis block duplizieren, umbenennen und etwas wie das zu src/blocks.js hinzufügen

import 'new-block/block.js';

Dann wüsste alles, was create-guten-block hinter den Kulissen für uns vorbereitet hat, dass es die block.js unseres neuen Blocks in die Hauptskriptdatei aufnehmen soll, die in dist kompiliert wird (jetzt ist ein guter Zeitpunkt, einen Blick in dist zu werfen, falls Sie das noch nicht getan haben).

Nicht schlecht bisher, oder? Wir sind noch nicht wirklich zu irgendwelchem JavaScript gekommen…

Eine Herausforderung!

Okay, jetzt ist es Zeit für eine Herausforderung! Öffnen Sie src/block/block.js und nehmen Sie sich ein paar Minuten Zeit, um die hervorragenden Kommentare des Autors Ahmad zu lesen.

Versuchen Sie dann herauszufinden, wie Sie^*

1. Ändern Sie den Namen Ihres Blocks, also den, der im Blockauswahl angezeigt wird
2. Ändern Sie das Symbol Ihres Blocks (❤ Dashicons)
3. Ändern Sie den Text, der im Frontend angezeigt wird, d.h. wenn Sie „Beitrag anzeigen“.
4. Ändern Sie den Text, der im Backend angezeigt wird, d.h. im Editor.
5. Geben Sie der Frontend-Ansicht einen Randradius von 30px
6. Geben Sie der Editor-Ansicht einen Gradienten-Hintergrund
7. Machen Sie den Text im ersten Absatztag editierbar

^* Sie sollten in etwa 10 Minuten (fast!) alle diese Aufgaben erledigt haben. ;-)

---

Wie war das?

Auf welche Probleme sind Sie gestoßen? Waren Sie es leid, den Editor neu zu laden? Haben Sie die Meldung „Dieser Block scheint extern modifiziert worden zu sein“ öfter gesehen, als Ihnen lieb war? Ich sicher, aber so ist das Leben mit neuer Technologie – die Developer Experience hat noch viel zu wünschen übrig, aber das hat derzeit keine Priorität für das Team und wird in späteren Phasen der geplanten Gutenberg-Entwicklung erfolgen.

Am wichtigsten ist, haben Sie #7 geschafft?

Wenn ja, dann sollten Sie dieses Tutorial schreiben! Das war ein Fang. Ich hoffe, Sie fühlten sich zumindest ein wenig verwirrt und neugierig, denn so lernen wir! Das behandeln wir in Teil 3.

Nachdem wir uns orientiert haben, tauchen wir tiefer in diese Vorstellung eines Blocks ein.

Skelett eines Blocks

Hier ist block.js ohne Kommentare – was wir als das Skelett eines statischen Blocks bezeichnen könnten.

// Stripped down version of src/block/block.js

// PART 1: Import dependencies
import './style.scss';
import './editor.scss';

// PART 2: Setup references to external functions
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;

// PART 3: Register the block!
registerBlockType( 'cgb/block-test', {
  
  // Part 3.1: Block settings
  title: __( 'test - CGB Block' ),
  icon: 'shield',
  category: 'common',
  keywords: [
    __( 'test — CGB Block' ),
    __( 'CGB Example' ),
    __( 'create-guten-block' ),
  ],
  
  // PART 3.2: Markup in editor
  edit: function( props ) {
    return (
      <div>You’ll see this in the editor</div>
    );
  },
  
  // PART 3.3: Markup saved to database
  save: function( props ) {
    return (
      <div>This is saved to the database and returned with the_content();</div>
    );
  },
} );

Machen wir einen Seitenvergleich mit einem anderen statischen Block, dem „Separator“-Block aus den Standardblöcken von Gutenberg. Diese Datei befindet sich in packages/block-library/src/separator/index.js. Wenn Sie den Ordner entweder in VS Code oder Sublime geöffnet haben, können Sie mit der Tastenkombination Command + Option + 2 auf dem Mac oder Ansicht > Editor teilen die Dateien nebeneinander anzeigen.

Wenn Sie das zuvor beschriebene Texteditor-Setup befolgen, sollten Sie etwas Ähnliches sehen.

In diesem Bild habe ich die obige, reduzierte Version des Blocks in eine leere Datei kopiert, um sie ohne die Kommentare zu vergleichen. Das ist optional!

Welche Ähnlichkeiten fallen Ihnen auf? Welche Unterschiede? Öffnen Sie ein paar andere Blockverzeichnisse in gutenberg-master/library/ und werfen Sie einen Blick in deren Dateien und vergleichen Sie sie mit unserem Block-Skelett. Verbringen Sie ein paar Minuten damit, den Code zu lesen und sehen Sie, ob Sie Muster erkennen können.

Hier sind ein paar Muster, die mir aufgefallen sind

1. Es gibt geschweifte Klammern in Variablendeklarationen und Funktionsargumenten überall.
2. Markup erscheint innerhalb von return-Anweisungen und enthält oft erfundene Tag-Namen (Sie erkennen diese vielleicht als React-Komponenten).
3. Alle Blöcke scheinen ein Einstellobjekt zu haben, das Einträge für title, icon, category usw. enthält. Bei den Bibliotheksblöcken erscheinen sie in einem export const settings = ...-Objekt, während sie bei unserem Plugin-Block Teil eines Arguments für registerBlockType sind.
4. Alle Blöcke haben Funktionen für edit und save als Teil des settings-Objekts.
   • Die Syntax für die Funktionen ist leicht unterschiedlich zu den edit- und save-Funktionen unseres Blocks
     • edit( { className } ) { ... } in separator/index.js
     • edit: function(props) { ... } in unserer block.js
   • Die Bibliotheksblöcke scheinen attributes zu referenzieren und anstelle von props.
5. Alle Blöcke in der Bibliothek enthalten eine index.js. Einige enthalten eine block.js oder andere Dateien, die eine Definition für eine Klasse enthalten, die von einer Component erbt, z.B. class LatestPostsBlock extends Component { ....

Was haben Sie gefunden? Fühlen Sie sich frei, in den Kommentaren beizutragen (aber hören Sie nicht hier auf zu lesen!).

Ein etwas kurzer und relevanter Ausflug

Sie haben wahrscheinlich eine Anweisung bemerkt, die @wordpress/i18n in jeder index.js und block.js Datei in der Bibliothek importiert, sowie eine Referenz auf wp.i18n in der block.js unseres Plugins. i18n steht für internationalization (Internationalisierung), genauso wie a11y für accessibility (Barrierefreiheit) steht. Internationalisierung bezieht sich auf die Praxis, Ihre Anwendung so zu entwickeln, dass sie leicht in andere Sprachen übersetzt werden kann. Da wir alle statischen Texte in unseren Blöcken für die Übersetzung vorbereiten wollen, weisen wir wp.i18n einem Alias von __ zu, um die Kürze zu erhöhen, ähnlich wie wir $ als Alias für gutes altes jQuery verwenden. Lesen Sie mehr über i18n für WordPress hier.

Es ist auch erwähnenswert, woher dieses wp in wp.i18n kommt und warum es im Gutenberg-Quellcode als @wordpress/i18n referenziert wird. wp ist ein globales Objekt – global bedeutet, dass es eine überall verfügbare Variable ist – das alle öffentlich zugänglichen JavaScript-API-Methoden von WordPress enthält. Um dies zu demonstrieren, öffnen Sie die Konsole, während Sie sich auf einer Seite im WordPress-Admin befinden. Geben Sie wp ein und drücken Sie Enter. Sie sollten etwas Ähnliches sehen.

Wenn wir also etwas innerhalb dieses wp-Objekts referenzieren, greifen wir lediglich auf eine Funktionalität zu, die die WordPress JavaScript API uns zur Verfügung stellt. @wordpress/i18n im Gutenberg-Quellcode tut dasselbe, importiert aber die Funktionen aus einem npm-Modul anstelle des globalen Objekts. Die Funktionen im wp-Global-Objekt wurden absichtlich von den WordPress-Core-Entwicklern für die Verwendung in Themes und Plugins für die öffentliche API freigegeben.

Wenn Sie auch nur im Geringsten wie meine innere Kritikerin denken, denken Sie vielleicht: „Schon gut, Lara, diese Details interessieren mich nicht. Sag mir einfach, wie ich einen coolen Block mit all dem JavaScript mache!“ Worauf ich antworten würde:

Es gibt so viele bewegliche Teile und neue Konzepte in dieser Umgebung, dass ich festgestellt habe, je mehr Code ich als selbstverständlich annehme, desto frustrierender und zeitaufwändiger wird der Prozess. Gehen Sie jede Codezeile mit Neugier an! Wenn Sie nicht wissen, was sie tut, machen Sie eine Suche im Ordner im Gutenberg-Quellcode und sehen Sie, ob Sie eine Spur finden können. Für mich zumindest ist dies ein viel angenehmerer Weg, unbekannten Code anzugehen, als zu versuchen, etwas wahllos per Copy & Paste zu erstellen.

Screencast

Hier ist ein Screencast, in dem ich Geoff Graham durch die in diesem Beitrag behandelten Konzepte führe.

Hausaufgaben

Was? Hausaufgaben? Aber sicher, es gibt Hausaufgaben! In Teil 3 wird Andy 🍉 sich mit modernen JavaScript-Leckerbissen beschäftigen: React, JSX und ES6-Syntax. Obwohl unsere Serie für diejenigen geschrieben ist, die relativ neu in JavaScript sind, ist es hilfreich, den Code und die Konzepte aus vielen verschiedenen Blickwinkeln und Ressourcen zu lernen.

Um einige Konzepte frühzeitig einzuführen, hier ist eine Übersicht über einige „Hausaufgaben“ vor Teil 3

1. Verbringen Sie etwas Zeit (1-2 Stunden) mit einem React-Tutorial oder bis Sie es mit eigenen Worten erklären können

• Die render-Methode in React
• JSX und dass diese erfundenen Tag-Namen zu JavaScript-Funktionen gemappt werden
• Warum React className statt class verwendet

Empfohlene Ressourcen

• Ich mochte Learning React.js von Eve Porcello auf Lynda.com sehr. Lynda ist ein kostenpflichtiger Dienst, aber Sie können kostenlos mit einer Bibliothekskarte in einigen Städten zuschauen (Los Angeles, auf jeden Fall).
• Ich empfehle auch diese Artikelserie, Learning React with create-react-app von Brandon Richey.
• Es gibt viele, viele Optionen auf Youtube!
• Ich arbeite mich durch Brian Holts Complete Intro to React Kurs auf Frontend Masters (kostenpflichtig) und er ist sehr gut.
• Ich kann nicht umhin, Wes Bos‘ React for Beginners Kurs (kostenpflichtig) zu erwähnen – ich habe ihn selbst nicht gemacht, aber ich habe nur Gutes davon gehört und er hält ihn auf dem Laufenden!

Ich würde auch empfehlen, React State from the Ground Up hier auf CSS-Tricks von Kingsley Silas zu lesen, da es sich speziell mit State in React beschäftigt. Wenn Sie brandneu bei React sind, wird dies viel zu verdauen sein, aber ich denke, es lohnt sich, es so schnell wie möglich in Ihr Gehirn zu bekommen, auch wenn es noch keinen Sinn ergibt.

---

2. Verstehen Sie ES6 Destructuring und finden Sie einige Beispiele dafür sowohl im Gutenberg-Quellcode als auch in unserem Plugin (das wird nicht schwer sein).

Empfohlene Ressourcen

• Blogbeitrag: A Dead Simple Intro to Destructuring Objects von Wes Bos
• Video: Destructuring: What, Why and How auf Fun Fun Function (diese sind A+ – schauen Sie sich dieses über Pfeilfunktionen an, während Sie dabei sind).

---

3. Seien Sie mit bedingten oder ternären Operatoren vertraut.

In einem Satz: Ternäre Operatoren sind eine Kurzform für if...else-Anweisungen. Sie werden diese überall im Gutenberg-Quellcode finden – finden Sie einfache Beispiele, die einen Fallback für den Wert eines Strings bieten, sowie robustere Anwendungen, wie zum Beispiel in blocks/library/paragraph/index.js.

Empfohlene Ressourcen

• Der MDN-Artikel ist sehr gut.
• Schauen Sie sich auch den Not-Not-Operator an – hier ist ein Stack Overflow-Beitrag dazu.
• Um nicht zu weit in dieses Kaninchenloch zu geraten, aber wenn Sie extra ehrgeizig sind, recherchieren Sie etwas über Type Coercion in JavaScript. Dieser Artikel auf FreeCodeCamp und dieses Kapitel aus You Don’t Know JS von Kyle Simpson sind solide Ausgangspunkte.

---

Okay! Vielen Dank fürs Lesen und bis bald in Teil 3 für React, JSX und andere Goodies.

Kommentare

Gab es einen Teil dieses Tutorials, der keinen Sinn ergab? Haben Sie sich irgendwo verirrt? Wir würden uns freuen, dies weiter zu verbessern. Bitte lassen Sie uns wissen, wenn ein Teil davon schwer verständlich war oder wenn Informationen falsch oder veraltet sind.

Vielen Dank nochmals und viel Erfolg!

---