Einrichten Ihres ersten Gutenberg-Projekts

Blog

Einrichten Ihres ersten Gutenberg-Projekts

Erfahren Sie, wie Sie die Entwicklungsumgebung für den React-basierten Gutenberg-Editor von WordPress einrichten und ein neues Projekt von Grund auf neu erstellen.

Gutenberg ist der auf React basierende WordPress-Editor. Es kommt in zwei Versionen: die Gutenberg-Plugin , das einen schnellen Entwicklungszyklus hat und alle zwei Wochen neue Funktionen herausbringt; und die Integration in den WordPress-Kern (einfach der WordPress-Editor genannt), der die neuen Funktionen alle drei bis vier Monate konsolidiert.

Gutenberg basiert auf Blöcke , bei denen es sich um High-Level-Komponenten handelt, die eine einzelne Funktionalität bereitstellen sollen, auf die über den Editor zugegriffen werden kann, derzeit zum Erstellen von Inhalten – aber in der nicht allzu ferne zukunft , um die Website zu erstellen. Blöcke erleichtern das Speichern des Inhalts in der Datenbank und ermöglichen, basierend auf React, umfangreiche Benutzerinteraktionen.

Da die Funktionalität über Plugins bereitgestellt wird, hat WordPress das Aufkommen von Plugins gesehen, die mehrere Blöcke zusammenfassen. Seit dem neuesten Release (Version 8.4, ab Ende Juni 2020) integriert sich Gutenberg jedoch ein Blockverzeichnis im Editor , die es uns ermöglicht, während der Bearbeitung des Blog-Beitrags einen Block im Handumdrehen zu installieren:

Java-Projektideen für Anfänger

Installieren eines Blocks aus dem WP-Blockverzeichnis

Verzeichnis sperren.

Das Blockverzeichnis funktioniert mit Einzelblock-Plugins nur. Daher verbessert die Produktion unserer Plugins, die nur einen Block bereitstellen, die Chancen, dass sie vom Benutzer installiert werden:

  • Multi-Block-Plugins : Installierbar über das Plugin-Verzeichnis
  • Einzelblock-Plugins : Installierbar über das Plugin-Verzeichnis und das Block-Verzeichnis

In diesem Artikel erfahren Sie, wie Sie ein neues Projekt für Single-Block-Plugins und für Multi-Block-Plugins erstellen und die Entwicklungsumgebung mühelos einrichten.

Gerüst für ein Single-Block-Plugin

Es gibt mehrere Tools, um den Prozess der Einrichtung des Projekts zu automatisieren. Diese kommen mit einer vordefinierten Konfiguration, die für die meisten Fälle funktioniert, und kann für die Ausnahmefälle angepasst werden, einschließlich Webpack (um die JavaScript-Dateien für die Verteilung zu bündeln), Babel (um modernen JavaScript-Code in Legacy-Code zu kompilieren, der in älteren Browsern ausgeführt werden kann), ESLint (um den JavaScript-Code zu analysieren) und einige andere Abhängigkeiten.

Die verfügbaren Werkzeuge sind:

Quadrat einer Zahl in Python
  • Die WP CLI [scaffold](https://github.com/wp-cli/scaffold-command#wp-scaffold-block) Befehl
  • Die |_+_| Paket
  • Die |_+_| Paket

|_+_| ist die offizielle Lösung, die vom Entwicklerteam von Gutenberg gepflegt wird. Daher können wir erwarten, dass es immer auf dem neuesten Stand der Projektanforderungen ist. Zum Beispiel wurde zur gleichen Zeit Gutenberg 8.4 veröffentlicht, |_+_| wurde aktualisiert auf Generieren Sie die erforderlichen Metadaten um das Blockverzeichnis zu unterstützen.

Dieses Tool ist weitgehend von create-react-app inspiriert: Es ist ein Node.js-Prozess, der npm nutzt, um die erforderlichen Abhängigkeiten zu installieren. Um den neuen Block einzurüsten, wir in der Kommandozeile ausführen :

[create-guten-block](https://github.com/ahmadawais/create-guten-block)

Die |_+_| ist der Block-Slug, der zur Identifizierung verwendet wird, und gibt dem Plugin auch den Namen. Die Optionen sind optional, es wird jedoch empfohlen, die folgenden bereitzustellen (ansonsten werden generische Standardoptionen verwendet):

Was ist Lagerfeuermünze?

  • |_+_| – interner Namensraum für den Bausteinnamen
  • |_+_| – Titel für den Block anzeigen
  • |_+_| – kurze Beschreibung für den Block
  • |_+_| – unter welcher Kategorie wird der Block angezeigt

Das Ausführen des Befehls erstellt ein neues Verzeichnis mit dem |_+_| als Name (in diesem Fall |_+_|):

Ausführen des Befehls Block erstellen

Wo kann ich Lagerfeuer-Krypto kaufen?

Gerüstbau eines neuen Blocks durch @wordpress/create-block. (Bild von entwickler.wordpress.org )

Das Verzeichnis enthält alle Dateien, die vom Plugin und dem Block benötigt werden:

[@wordpress/create-block](https://developer.wordpress.org/block-editor/packages/packages-create-block/)
  • |_+_| enthält die vom Bausteinverzeichnis benötigten Metadaten
  • |_+_| enthält die vom Plugin-Verzeichnis benötigten Informationen
  • |_+_| (nach dem angegebenen |_+_|) ist die Hauptdatei des Plugins
  • |_+_| definiert alle JavaScript-Abhängigkeiten durch den Block
  • |_+_| ist der Eingang zum Block
  • |_+_| ist der kompilierte JavaScript-Code
  • |_+_| und |_+_| sind die kompilierten CSS-Dateien, die die aus Sass-Dateien extrahierten Stile enthalten

Mit dem erstellten Projekt können wir das Verzeichnis im Terminal betreten und die folgenden Befehle ausführen:

  • |_+_| – startet den Build für die Entwicklung
  • |_+_| – erstellt den Code für die Produktion
  • |_+_| – formatiert JavaScript-Dateien
  • @wordpress/create-block - lint CSS-Dateien
  • |_+_| – lints JavaScript-Dateien
  • |_+_| – aktualisiert WordPress-Pakete auf die neueste Version

#gutenberg #wordpress #react #javascript #web-entwicklung

blog.logrocket.com

Einrichten Ihres ersten Gutenberg-Projekts

Erfahren Sie, wie Sie die Entwicklungsumgebung für den React-basierten Gutenberg-Editor von WordPress einrichten und ein neues Projekt von Grund auf neu erstellen. Gutenberg ist der auf React basierende WordPress-Editor.