Erste Schritte mit WordPress Block Development

WordPress-Entwicklung befindet sich derzeit in einer Übergangszeit.

Obwohl wir seit fünf Jahren mit dem Blockeditor in Kontakt stehen, ist die Entwicklung immer noch eine Herausforderung, da die Dokumentation entweder fehlt oder veraltet ist. Dies spiegelt eher die aktuelle Situation der schnellen Iteration von FSE -Funktionen wider.

Zum Beispiel wurde im Jahr 2018 eine Reihe von Artikeln zur Einführung in die Entwicklung von Gutenberg auf CSS-Tricks veröffentlicht. Aber die Zeit ist vergangen, und obwohl diese Entwicklungsmethode immer noch effektiv ist, wird sie nicht mehr empfohlen (außerdem wird das Projekt für Erstellungs-Blocks, auf dem es basiert, nicht mehr beibehalten).

Dieser Artikel soll Ihnen helfen, die WordPress -Blockentwicklung zu beginnen und den aktuellen Ansatz zu befolgen. Natürlich können sich die Dinge ändern, nachdem dieser Artikel veröffentlicht wurde. Aber ich werde versuchen, mich auf seine Kernidee zu konzentrieren, denn selbst wenn sich das Tool im Laufe der Zeit entwickelt, dürfte das Kernkonzept wahrscheinlich gleich bleiben.

Was genau ist ein WordPress -Block?

Erstens klären wir einige Begriffe wie "Block". Alle Entwicklungen dieser Funktionen vor WordPress 5.0 wurden mit dem Codenamen "Gutenberg" (Erfinder des Drucks) verwendet.

Seitdem wurde "Gutenberg" verwendet, um alles zu beschreiben, was mit Blöcken zu tun hat, einschließlich Blockeditoren und Site -Editoren. Es ist so kompliziert geworden, dass einige Leute den Namen hassen. Am wichtigsten ist, dass es auch ein Gutenberg -Plugin zum Testen experimenteller Merkmale gibt, die möglicherweise in Zukunft enthalten sein können. Wenn Sie der Meinung sind, dass das Aufrufen all dieser „Website-weiten Bearbeitung“ das Problem lösen kann, gibt es auch einige Bedenken.

In diesem Artikel verweisen wir in diesem Artikel auf "Blöcke" auf Komponenten, die Inhalte im WordPress -Block -Editor erstellen. Blöcke werden in Seiten oder Artikel eingefügt und bieten Struktur für bestimmte Arten von Inhalten. WordPress verfügt über einige "Kern" -Blockungen für gemeinsame Inhaltstypen wie Absätze, Listen, Bilder, Videos, Audio und mehr.

Zusätzlich zu diesen Kernblöcken können wir auch benutzerdefinierte Blöcke erstellen. Dies ist der Schwerpunkt der WordPress -Blockentwicklung (Sie können auch Kernblöcke filtern, um deren Funktionalität zu ändern, aber Sie benötigen sie möglicherweise vorerst nicht).

Die Rolle von Blöcken

Bevor wir in die Erstellung eines Blocks eintauchen, müssen wir zunächst verstehen, wie der Block intern funktioniert. Dies wird uns definitiv in Zukunft große Probleme erspart.

Ich möchte Blöcke abstrakt verstehen als: eine Entität mit bestimmten Attributen (als Attribute genannte Attribute), die bestimmte Inhalte darstellen. Ich weiß, das klingt vage, aber bitte seien Sie geduldig mit mir zu erklären. Blöcke werden im Grunde auf zwei Arten manifestiert: als grafische Schnittstellen im Blockeditor oder als Datenblöcke in der Datenbank.

Wenn Sie den WordPress -Block -Editor öffnen und einen Block einfügen (z. B. einen Pullquote -Block), erhalten Sie eine schöne Schnittstelle. Sie können auf die Schnittstelle klicken und den referenzierten Text bearbeiten. Das Einstellungsfeld auf der rechten Seite der Blockeditor -Benutzeroberfläche bietet Optionen zum Anpassen des Textes und zum Festlegen des Erscheinungsbilds eines Blocks.

Wenn Sie ein schönes Angebot erstellen und auf Veröffentlichung klicken, wird der gesamte Beitrag in der Tabelle WP_POSTS der Datenbank gespeichert. Dies ist nichts Neues aufgrund von Gutenberg. So haben die Dinge immer funktioniert - WordPress speichert Artikelinhalte in einer bestimmten Tabelle in der Datenbank. Die neue ist jedoch, dass die Darstellung des Pullquote -Blocks Teil des Inhalts ist, der im Feld post_content der Tabelle WP_POSTS gespeichert ist.

Wie sieht dieser Ausdruck aus? Schauen wir uns an:

<blockquote>
    <p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
    <cite>The Encyclopedia of world peas</cite>
  </blockquote>

Sieht aus wie normales HTML, oder? ! In technischer Hinsicht ist dies der "serialisierte" Block. Beachten Sie die JSON -Daten in HTML -Kommentaren "textalign": "Right". Dies ist ein

Attribut - ein blockbezogenes Attribut.

Angenommen, Sie schließen den Blockeditor und öffnen ihn dann nach einer Weile erneut. Der Blockeditor wird den Inhalt im relevanten Post_Content -Feld abrufen. Der Editor analysiert dann den abgerufenen Inhalt und bei der Begegnung nach Folgendes:

<code>...</code>

Es wird mit sich selbst sprechen:

Okay, das sieht aus wie ein Pullquote -Block. Nun ... es hat auch eine Eigenschaft ... Ich habe eine JavaScript -Datei, mit der mir eine grafische Schnittstelle eines Pullquote -Blocks im Editor basierend auf seinen Eigenschaften erstellt wird. Ich sollte dies jetzt tun, damit dieser Block in seinem vollen Ruhm präsentiert wird.

Als Blockentwickler ist Ihr Job:

Sagen Sie WordPress an, dass Sie einen bestimmten Blocktyp sowie verwandte Details registrieren möchten.
stellt dem Block -Editor JavaScript -Dateien bereit, mit denen er den Block im Editor übernimmt, während er ihn in der Datenbank "serialisieren".
stellt alle anderen Ressourcen bereit, die der Block ordnungsgemäß funktionieren, z. B. Stile und Schriftarten.

Es ist wichtig zu beachten, dass all diese Konvertierung von serialisierten Daten zu grafischen Schnittstellen - und umgekehrt - nur im Blockeditor erfolgt. Am vorderen Ende wird der Inhalt genau auf die gleiche Weise angezeigt und gespeichert. In gewissem Sinne sind Blöcke eine clevere Möglichkeit, Daten in eine Datenbank zu setzen.

Ich hoffe, dies gibt Ihnen ein klareres Verständnis dafür, wie Blöcke funktionieren.

Blöcke sind nur Plugins

Blöcke sind nur Plugins. Technisch gesehen können Sie

Blöcke in das Thema oder mehrere Blöcke in ein Plugin einfügen. Wenn Sie jedoch einen Block erstellen möchten, möchten Sie normalerweise ein Plugin erstellen. Wenn Sie also jemals ein WordPress -Plugin erstellt haben, haben Sie teilweise gemeistert, wie Sie WordPress -Blöcke erstellen. Aber nehmen wir an, Sie haben noch nie ein WordPress -Plugin eingerichtet, geschweige denn Blöcke. Wo fängst du überhaupt an?

Block

setzen

Wir haben bereits eingeführt, was ein Block ist. Fangen wir an, einen einzurichten, um einen zu erstellen.

Stellen Sie sicher, dass der Knoten

installiert ist

Dies erhalten Sie Zugriff auf NPM- und NPX -Befehle, wobei NPM die Abhängigkeiten des Blocks installiert und den Inhalt zusammenstellt, während NPX Befehle auf dem Paket ausführt, ohne das Paket zu installieren. Wenn Sie MacOS verwenden, können Sie den Knoten installiert und NVM verwenden, um die Version zu aktualisieren. Wenn Sie Windows verwenden, müssen Sie den Knoten herunterladen und installieren.

Projektordner erstellen

Jetzt können Sie auf andere Tutorials stoßen, die direkt zur Befehlszeile springen, und Sie anweisen, ein Paket namens @WordPress/create-block zu installieren. Dieses Paket ist großartig, da es einen vollständigen Projektordner mit allen Abhängigkeiten und Tools generiert, die Sie benötigen, um Ihre Entwicklung zu starten.

Ich persönlich verfolge diesen Ansatz beim Einrichten meiner eigenen Blöcke, aber bitte tolerieren Sie mich für einen Moment, da ich den von ihm eingeführten subjektiven Inhalt beseitigen möchte, und nur auf die erforderlichen Teile der grundlegenden Entwicklungsumgebung für das Verständnis zu konzentrieren.

Dies sind die Dokumente, auf die ich speziell darauf hinweisen möchte:

• readme.txt: Dies ist ein bisschen wie die Vorderseite des Plugin -Verzeichnisses, mit dem normalerweise das Plugin beschrieben und weitere Details zur Verwendung und Installation angegeben werden. Wenn Sie einen Block an das WordPress -Plugin -Verzeichnis senden, hilft diese Datei dabei, die Plugin -Seite zu füllen. Wenn Sie vorhaben, ein Github -Repository für das Block -Plugin zu erstellen, können Sie auch eine readme.md -Datei mit denselben Informationen verwenden, damit sie dort gut angezeigt wird.
• package.json: Dies definiert das für die Entwicklung erforderliche Knotenpaket. Wir werden es beim Installieren öffnen. In der klassischen WordPress -Plugin -Entwicklung werden Sie möglicherweise verwendet, um Composer und Composer.json -Dateien zu verwenden. Dies ist sein Äquivalent.
• plugin.php: Dies ist die Haupt -Plugin -Datei, ja, es ist klassischer PHP! Wir werden den Plugin -Titel und die Metadaten hier platzieren und das Plugin registrieren.

Zusätzlich zu diesen Dateien gibt es auch ein SRC -Verzeichnis, das den Quellcode des Blocks enthalten sollte.

Diese Dateien und SRC -Verzeichnisse reicht aus, um zu starten. Bitte beachten Sie in dieser Gruppe, dass tatsächlich nur eine Datei (plugin.php) benötigt, um das Plugin zu erstellen. Der Rest liefert entweder Informationen oder wird verwendet, um die Entwicklungsumgebung zu verwalten.

Das oben erwähnte @WordPress/create-Block-Paket erstellt diese Dateien für uns (und mehr). Sie können es sich als Automatisierungswerkzeug vorstellen, nicht als Notwendigkeit. Es erleichtert die Arbeit trotzdem, sodass Sie sie frei verwenden können, um Blöcke zu erstellen, indem Sie den folgenden Befehl ausführen:

<blockquote>
    <p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
    <cite>The Encyclopedia of world peas</cite>
  </blockquote>

Blockabhängigkeiten installieren

Angenommen, Sie haben die drei im vorherigen Abschnitt genannten Dateien erstellt, und es ist Zeit, die Abhängigkeiten zu installieren. Zunächst müssen wir die Abhängigkeiten angeben, die wir benötigen. Wir tun dies, indem wir Paket.json bearbeiten. Wenn Sie das Dienstprogramm @WordPress/Create-Block verwenden, wird das Folgende für uns generiert (Annotation wurde hinzugefügt; JSON unterstützt keine Annotation. Wenn Sie also den Code kopieren, löschen Sie bitte die Annotation):

<blockquote>
    <p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
    <cite>The Encyclopedia of world peas</cite>
  </blockquote>

Die kontrollierte Version

`` `JSON anzeigen { "Name": "Block-Exampe", "Version": "0.1.0", "Beschreibung": "Beispiel Block -Gerüst mit Block -Tool erstellen.",, "Autor": "Die WordPress -Mitwirkenden", "Lizenz": "GPL-2.0-oder-oder-Later", "Main": "Build/Index.js", "Skripte": {{ "Build": "WP-Scripts Build", "Format": "WP-Scripts-Format", "Lint: CSS": "WP-Scripts Lint-Stil", "Lint: JS": "WP-Scripts Lint-Js", "Pakete-update": "WP-Scripts Packages-Update", "Plugin-Zip": "WP-Scripts Plugin-Zip", "Start": "WP-Scripts starten" }, "devDependencies": {{ "@WordPress/Skripte": "^24.1.0" } }

<code>...</code>

Jetzt, da Package.json eingerichtet ist, sollten wir in der Lage sein, alle diese Abhängigkeiten zu installieren, indem wir zum Projektordner in der Befehlszeile navigieren und die NPM -Installation ausführen.

Plugin -Titel

hinzufügen

Wenn Sie aus der klassischen WordPress-Plugin-Entwicklung stammen, wissen Sie wahrscheinlich, dass alle Plugins über Informationen in der Haupt-Plugin-Datei verfügen, mit der WordPress das Plugin erkennen und Informationen dazu auf dem Plug-in-Bildschirm im WordPress-Administratorfeld anzeigen.

Folgendes ist ein Plugin, das für mich von @WordPress/Create-Block für eine kreativ namens "Hallo Welt" erstellt wurde:

npx @wordpress/create-block

Dies befindet sich in der Haupt -Plugin -Datei und Sie können sie so benennen, wie Sie möchten. Sie können es einen gebräuchlichen Namen wie index.php oder plugin.php nennen. Das Paket für Erstellen von Blocks nennt es automatisch als Projektname, den Sie bei der Installation angegeben haben. Da ich dieses Beispiel als "Blockbeispiel" bezeichne, gibt das Paket mit all dem eine block-example.php-Datei.

Sie müssen einige Details ändern, z. B. sich selbst zum Autor zu machen, etc. Nicht all dies ist notwendig. Wenn ich mit "Kopf" beginne, ist es möglicherweise näher daran:

{
  // 定义项目名称
  "name": "block-example",
  // 使用语义版本控制设置项目版本号
  "version": "0.1.0",
  // 项目的简短描述
  "description": "Example block scaffolded with Create Block tool.",
  // 您可以将其替换为您自己
  "author": "The WordPress Contributors",
  // 标准许可信息
  "license": "GPL-2.0-or-later",
  // 定义主JavaScript文件
  "main": "build/index.js",
  // 我们在开发过程中构建和编译插件所需的一切
  "scripts": {
    "build": "wp-scripts build",
    "format": "wp-scripts format",
    "lint:css": "wp-scripts lint-style",
    "lint:js": "wp-scripts lint-js",
    "packages-update": "wp-scripts packages-update",
    "plugin-zip": "wp-scripts plugin-zip",
    "start": "wp-scripts start"
  },
  // 定义使用脚本包的哪个版本（撰写本文时为24.1.0）
  // https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/
  "devDependencies": {
    "@wordpress/scripts": "^24.1.0"
  }
}

Ich werde nicht in den genauen Zweck jeder Zeile eingehen, da dies bereits ein vollständiges Muster im WordPress -Plugin -Handbuch ist.

Dateistruktur

Wir haben die für den Block erforderlichen Dateien angezeigt. Wenn Sie jedoch @WordPress/Create-Block verwenden, sehen Sie viele andere Dateien im Projektordner.

Das Folgende ist derzeit enthalten:

<code>
这里的@wordpress/scripts包是主要的依赖项。如您所见，它是一个devDependency，这意味着它有助于开发。如何？它公开了wp-scripts二进制文件，我们可以使用它来编译我们的代码，从src目录到build目录，等等。

WordPress维护了许多其他软件包，用于各种目的。例如，@wordpress/components软件包为WordPress区块编辑器提供了一些预制UI组件，可用于为区块创建一致的用户体验，并符合WordPress设计标准。

您实际上*不需要*安装这些软件包，即使您想使用它们也是如此。这是因为这些@wordpress依赖项不会与您的区块代码捆绑在一起。相反，任何引用实用程序软件包代码的导入语句——例如@wordpress/components——都用于在编译期间构造“资产”文件。此外，这些导入语句被转换为将导入映射到全局对象的属性的语句。例如，import { \_\_ } from "@wordpress/i18n"被转换为const \_\_ = window.wp.i18n.\_\_的缩小版本。（window.wp.i18n是一个保证在全局范围内可用的对象，一旦相应的i18n软件包文件被排队）。

在插件文件中注册区块期间，隐式使用“资产”文件来告诉WordPress区块的软件包依赖项。这些依赖项会自动排队。所有这些都在幕后完成，前提是您使用的是scripts软件包。也就是说，您仍然可以选择在package.json文件中本地安装依赖项以进行代码完成和参数信息：

```json
// etc.
"devDependencies": {
  "@wordpress/scripts": "^24.1.0"
},
"dependencies": {
  "@wordpress/components": "^19.17.0"
}</code>

wow, so viel! Lassen Sie uns auf neue Inhalte hinweisen:

• Build/: Dieser Ordner empfängt kompilierte Vermögenswerte bei der Verarbeitung von Produktionsdateien.
• node_modules: Dieser Ordner hält alle Entwicklungsabhängigkeiten, die beim Ausführen von NPM -Installation installiert sind.
• src/: Dieser Ordner enthält den Quellcode des Plugins, der zusammengestellt und an das Build -Verzeichnis gesendet wird. Wir werden uns jeweils später ansehen.
• .EditorConfig: Dies enthält Konfigurationen zum Optimieren des Code -Editors für die Codekonsistenz.
• .gitignore: Dies ist eine Standard -Repository -Datei, die lokale Dateien identifiziert, die von der Versionskontrollverfolgung ausgeschlossen werden sollten. Ihre node_modules sollten auf jeden Fall hier aufgenommen werden.
• package-lock.json: Dies ist eine automatisch generierte Datei, die die Aktualisierungen der erforderlichen Pakete verfolgt, die mit der NPM-Installation installiert sind.

Blockmetadaten

Ich möchte mit Ihnen in das SRC -Verzeichnis eingraben, konzentrieren Sie sich jedoch zunächst auf eine der Dateien: block.json. Wenn Sie Create-Block verwenden, ist es für Sie bereit. WordPress drängt schwierig, es als Standard -Spezifikationsmethode zu verwenden, um einen Block durch Bereitstellung von Metadaten zu registrieren, die WordPress kontext, um den Block gleichzeitig zu identifizieren und im Blockeditor zu rendern.

Folgendes ist das, was @WordPress/Create-Block für mich generiert:

<blockquote>
    <p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
    <cite>The Encyclopedia of world peas</cite>
  </blockquote>

Tatsächlich können wir hier viele verschiedene Informationen einfügen, aber wir brauchen wirklich nur Namen und Titel. Eine Super-Lite-Version könnte so aussehen:

<blockquote>
    <p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
    <cite>The Encyclopedia of world peas</cite>
  </blockquote>

• $ Schema definiert das Schema -Format, mit dem der Inhalt der Datei überprüft wird. Es klingt nach einer erforderlichen Sache, ist jedoch völlig optional, da unterstützte Code -Editoren die Syntax überprüfen und zusätzliche Funktionen wie Tooltips und AutoComplete bieten.
• apiversion bezieht sich darauf, welche Version der Block -API vom Plugin verwendet wird. Heute ist Version 2 die neueste Version.
• Name ist eine erforderliche eindeutige Zeichenfolge, mit der Plugins identifiziert werden können. Beachten Sie, dass ich CSS-Tricks/ Vorvorsempfmaschinen hinzugefügt habe. Sie können wählen, ob Sie so etwas wie Ihr Akronym verwenden können (z. B./Block-Exampe).
• Version wird von WordPress als Cache -Clearing -Mechanismus bei der Freigabe neuer Versionen empfohlen.
• Titel ist ein weiteres erforderliches Feld, das den Namen feststellt, an dem das Anzeige -Plugin verwendet wird.
• Kategoriegruppen blockiert mit anderen Blöcken und zeigt sie zusammen im Block -Editor an. Zu den derzeit existierenden Kategorien gehören Text, Medien, Design, Widgets, Themen und Einbettungen, und Sie können sogar benutzerdefinierte Kategorien erstellen.
Mit
• können Sie etwas aus der Dashicons -Bibliothek auswählen, um Ihren Block im Blockeditor visuell darzustellen. Ich benutze das Format-Quote-Symbol, weil wir in diesem Beispiel unser eigenes Pullquote und so etwas machen. Wir können vorhandene Ikonen nutzen, anstatt unsere eigenen zu erstellen, was großartig ist, obwohl dies sicherlich möglich ist.
• editorscript ist der Ort, an dem sich der Haupt -JavaScript -Dateiindex.js befindet.

Register Block

Eine weitere Sache, bevor wir in den tatsächlichen Code einsteigen, ist die Registrierung des Plugins. Wir haben gerade all diese Metadaten eingerichtet und brauchen eine Möglichkeit, WordPress zu verwenden. Auf diese Weise weiß WordPress, wo alle Plugin -Assets gefunden werden sollen, damit sie für die Verwendung im Blockeditor in der Warteschlange gestellt werden können.

Registrieren eines Blocks ist ein zweistufiger Prozess. Wir müssen es in PHP und JavaScript registrieren. Öffnen Sie für den PHP-Aspekt die Haupt-Plugin-Datei (in diesem Fall block-example.php) und fügen Sie nach dem Plugin-Titel Folgendes hinzu:

<code>...</code>

Dies ist das, was das Dienstprogramm für das Create-Block für mich generiert, weshalb die Funktion so genannt wird. Wir können verschiedene Namen verwenden. Der Schlüssel ist, Konflikte mit anderen Plugins zu vermeiden. Daher ist es besser, Ihren Namespace hier so einzigartig wie möglich zu verwenden:

npx @wordpress/create-block

Wenn der Block.json, der alle Blockmetadaten enthält, in SRC enthält, warum verweisen wir dann auf das Build -Verzeichnis? Dies liegt daran, dass unser Code noch zusammengestellt werden muss. Das Skriptpaket verarbeitet den Code der Dateien im SRC -Verzeichnis und platziert die in der Produktion verwendeten Dateien im Build -Verzeichnis, während block.json Datei kopieren.

Okay, gehen wir zum JavaScript -Aspekt des Registrierungsblocks. Öffnen Sie src/index.js und stellen Sie sicher, dass es so aussieht:

{
  // 定义项目名称
  "name": "block-example",
  // 使用语义版本控制设置项目版本号
  "version": "0.1.0",
  // 项目的简短描述
  "description": "Example block scaffolded with Create Block tool.",
  // 您可以将其替换为您自己
  "author": "The WordPress Contributors",
  // 标准许可信息
  "license": "GPL-2.0-or-later",
  // 定义主JavaScript文件
  "main": "build/index.js",
  // 我们在开发过程中构建和编译插件所需的一切
  "scripts": {
    "build": "wp-scripts build",
    "format": "wp-scripts format",
    "lint:css": "wp-scripts lint-style",
    "lint:js": "wp-scripts lint-js",
    "packages-update": "wp-scripts packages-update",
    "plugin-zip": "wp-scripts plugin-zip",
    "start": "wp-scripts start"
  },
  // 定义使用脚本包的哪个版本（撰写本文时为24.1.0）
  // https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/
  "devDependencies": {
    "@wordpress/scripts": "^24.1.0"
  }
}

Wir betreten die React- und JSX -Welt! Dies sagt WordPress:

• RegisterBlockType -Modul aus @WordPress/Blocks -Paket importieren.
• importieren Sie Metadaten aus Block.json.
• Importieren und Speichern von Komponenten aus ihren entsprechenden Dateien. Wir werden diesen Dateien später Code hinzufügen.
• Registrieren Sie Blöcke und verwenden Sie Bearbeitungs- und Speichern von Komponenten, um Blöcke zu rendern und Inhalte in der Datenbank zu speichern.

Was ist los mit Bearbeiten und Speichern von Funktionen? Eine der Feinheiten der WordPress -Blockentwicklung ist die Unterscheidung zwischen "Backend" und "Frontend", mit denen der Inhalt des Blocks in diesen Kontexten gerendert wird. Wenn Sie das Backend -Rendering verarbeiten, schreibt Speichern den Inhalt vom Blockeditor in die Datenbank, um den Inhalt des Frontend der Website zu rendern.

Schneller Test

Wir können schnell arbeiten und sehen, ob unsere Blöcke im Blockeditor funktionieren und am vorderen Ende rendern. Öffnen wir Index.js erneut und verwenden Sie die Funktionen bearbeiten und speichern, um einige Grundlagen zurückzugeben, um zu veranschaulichen, wie sie funktionieren:

<blockquote>
    <p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
    <cite>The Encyclopedia of world peas</cite>
  </blockquote>

Dies ist im Grunde eine schlanke Version unseres vorherigen Code, nur dass wir direkt auf die Metadaten in block.json verweisen, um den Blocknamen zu erhalten und die Bearbeitungskomponenten zu weglassen und zu speichern, da wir die Funktion hier direkt ausführen.

Wir können es kompilieren, indem wir den NPM -Auslauf -Build in der Befehlszeile ausführen. Danach können wir im Block -Editor auf den Block mit dem Namen "Blockbeispiel" zugreifen:

Wenn wir den Block in den Inhaltsbereich einfügen, erhalten wir die von der Bearbeitungsfunktion zurückgegebene Nachricht:

Wenn wir den Artikel speichern und veröffentlichen, sollten wir beim Anzeigen im Front-End die Nachricht von der Speicherfunktion erhalten:

Erstellen Sie einen Block

Es sieht so aus, als wäre alles normal! Nachdem wir nun bestätigt haben, dass alles in Ordnung ist, können wir vor dem Test das wiederherstellen, was sich in Index.js befindet:

<code>...</code>

Beachten Sie, dass die Bearbeitungs- und Speicherfunktionen den beiden vorhandenen Dateien zugeordnet sind, die von @WordPress/Create-Block im SRC-Verzeichnis generiert wurden und andere Importe enthalten, die wir in jeder Datei benötigen. Noch wichtiger ist, dass diese Dateien Komponenten, die Block -Tags enthalten, bearbeiten und speichern.

Backend -Tag (SRC/edit.js)

npx @wordpress/create-block

Sehen Sie sich an, was wir getan haben? Wir importieren Requisiten aus dem @WordPress/Block-Editor-Paket, mit dem wir Klassen generieren können, die später für Stile verwendet werden können. Wir importieren auch die __ Internationalisierungsfunktion für die Verarbeitung der Übersetzung.

Front-End-Tag (SRC/Save.js)

Dies erstellt eine Speicherkomponente. Wir werden fast den gleichen Inhalt wie src/edit.js verwenden, jedoch mit etwas anderem Text:

{
  // 定义项目名称
  "name": "block-example",
  // 使用语义版本控制设置项目版本号
  "version": "0.1.0",
  // 项目的简短描述
  "description": "Example block scaffolded with Create Block tool.",
  // 您可以将其替换为您自己
  "author": "The WordPress Contributors",
  // 标准许可信息
  "license": "GPL-2.0-or-later",
  // 定义主JavaScript文件
  "main": "build/index.js",
  // 我们在开发过程中构建和编译插件所需的一切
  "scripts": {
    "build": "wp-scripts build",
    "format": "wp-scripts format",
    "lint:css": "wp-scripts lint-style",
    "lint:js": "wp-scripts lint-js",
    "packages-update": "wp-scripts packages-update",
    "plugin-zip": "wp-scripts plugin-zip",
    "start": "wp-scripts start"
  },
  // 定义使用脚本包的哪个版本（撰写本文时为24.1.0）
  // https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/
  "devDependencies": {
    "@wordpress/scripts": "^24.1.0"
  }
}

In ähnlicher Weise haben wir eine schöne Klasse, die in CSS verwendet werden kann:

Stilblock

Wir haben gerade vorgestellt, wie Blockeigenschaften zum Erstellen von Klassen verwendet werden. Sie lesen dies auf einer CSS-bezogenen Website, daher habe ich das Gefühl, dass ich etwas vermissen würde, wenn wir nicht speziell mit dem Schreiben von Blockstilen behandelt werden können.

Unterscheidet zwischen Front-End- und Back-End-Stilen

Wenn Sie sich Block.json im SRC-Verzeichnis ansehen, finden Sie zwei stylenbezogene Felder:

• EditorStyle bietet den Weg zum Stil, der auf das Backend angewendet wird.
• Stil ist der Weg zu den gemeinsamen Stilen, die auf das Front-End und das Back-End angewendet werden.

Kev Quirk hat einen detaillierten Artikel, der zeigt, wie er den Backend -Editor wie eine Frontend -Benutzeroberfläche aussieht.

Erinnern Sie sich daran, dass das Paket @WordPress /Skripte die Block.json -Datei kopiert, wenn sie den Code im Verzeichnis /SRC verarbeitet und die kompilierten Vermögenswerte in das Verzeichnis /Build platziert. Die zum Registrieren des Blocks verwendete Build/block.json -Datei. Dies bedeutet, dass jeder Pfad, den wir in SRC/Block.json anbieten, in Bezug auf Build/block.json geschrieben werden sollte.

Verwenden von Sass

Wir können mehrere CSS -Dateien in das Build -Verzeichnis einfügen, den Pfad in src/block.json, ausführen, bauen und dann erledigt. Dies nutzt jedoch nicht den @WordPress/Skrips -Kompilierungsprozess, der SASS in CSS kompilieren kann. Stattdessen setzen wir die Stildateien in das SRC -Verzeichnis und importieren sie in JavaScript.

Wenn wir dies tun, müssen wir darauf achten, wie @WordPress/Skripte mit Stilen umgehen:

• Die Datei mit dem Namen style.css oder style.scss oder style.sass, der in JavaScript Code importiert wird, wird in style-index.css zusammengestellt.
• Alle anderen Stildateien werden zusammengestellt und in Index.CSS gebündelt.

@WordPress/Skripts Pakete werden mit WebPack gebündelt und mit dem Postcss -Plugin gestylt. Postcss können mit anderen Plugins verlängert werden. Das Skriptpaket verwendet Plugins von SASS, SCSS und Autoprefixer, die alle ohne Installation zusätzlicher Pakete verwendet werden können.

Wenn Sie den ersten Block mit @WordPress/create-block starten, können Sie mit SCSS-Dateien sehr gut gestartet werden. Sie können diese Dateien verwenden, um schnell zu beginnen:

• editor.scss enthält alle auf den Backend Editor angewandten Stile.
• style.scss enthält alle Stile, die vom Front-End und Back-End geteilt werden.

Lassen Sie es uns jetzt tun, indem wir etwas Sass schreiben, das wir in Block CSS kompilieren werden. Obwohl diese Beispiele nicht sehr sassistiert sind, schreibe ich sie trotzdem in eine SCSS -Datei, um den Kompilierungsprozess zu demonstrieren.

Front-End- und Back-End-Stile

Ok, beginnen wir mit den Stilen, die auf das Front-End und das Back-End angewendet werden. Zunächst müssen wir src/style.scss erstellen (wenn Sie @WordPress/Create-Block verwenden, existiert es bereits) und sicherstellen, dass wir es importieren, können wir dies in index.js:

tun.

<blockquote>
    <p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
    <cite>The Encyclopedia of world peas</cite>
  </blockquote>

Öffnen Sie src/style.scss und setzen Sie einige grundlegende Stile mit der Klasse, die wir aus dem Blockattribut generiert haben

<code>...</code>

Das ist alles jetzt! Wenn wir Build ausführen, wird dies zum Build/style.css zusammengestellt und wird vom Blockeditor und Front-End verwiesen.

Back-End-Stil

Möglicherweise müssen Sie Block-Editor-spezifische Stile schreiben. Erstellen Sie dazu src/editor.scss (wieder @WordPress/create-block tun dies für Sie) und geben Sie einige Stile hinein:

npx @wordpress/create-block

Importieren Sie es dann in edit.js, das unsere Bearbeitungskomponente enthält (wir können sie überall importieren, aber da diese Stile für Redakteure sind, ist es hier logischer, Komponenten hier zu importieren):

<blockquote>
    <p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
    <cite>The Encyclopedia of world peas</cite>
  </blockquote>

Wenn wir jetzt den NPM -Auslauf -Build ausführen, wird der Stil in beiden Kontexten auf Blöcke angewendet:

Referenzstil in Block.json

Wir haben die Style-Dateien in edit.js und index.js importiert. Denken Sie jedoch daran, dass der Kompilierungsschritt im Build-Verzeichnis zwei CSS-Dateien für uns generiert: Index.css und style-Index.css. Wir müssen auf diese generierten Dateien in den Blockmetadaten verweisen.

Fügen wir dem Block ein paar Aussagen hinzu.json -Metadaten:

<code>...</code>

Führen Sie NPM NPM erneut aus, installieren Sie das Plugin auf Ihrer WordPress -Website und können Sie es verwenden!

Sie können Ihren Build im Überwachungsmodus mithilfe von NPM -Auslaufstart ausführen. Ihr Code wird jedes Mal automatisch kompiliert, wenn Sie den Code ändern und speichern.

Wir haben gerade die Oberfläche berührt

Der tatsächliche Block verwendet die Seitenleiste der Einstellungen des Blockeditors und andere von WordPress bereitgestellte Funktionen, um eine reichhaltige Benutzererfahrung zu erstellen. Da der Block tatsächlich zwei Versionen enthält - bearbeiten und speichern - müssen Sie auch darüber nachdenken, wie Sie Ihren Code organisieren, um eine Doppelarbeit von Code zu vermeiden.

Aber hoffentlich hilft dies, das Geheimnis des Gesamtprozesses des Erstellens von WordPress -Blöcken zu beseitigen. Dies ist in der Tat eine neue Ära der WordPress -Entwicklung. Es ist schwierig, neue Wege zu lernen, aber ich freue mich darauf, es zu sehen. Tools wie @WordPress/Create-Block helfen, aber selbst dann ist es schön zu wissen, was es tut und warum.

ändert sich der Inhalt, den wir hier vorstellen,? Sehr wahrscheinlich! Zumindest haben Sie jedoch eine Basis als Referenz, da wir uns weiterhin auf die Reife von WordPress -Blöcken konzentrieren, einschließlich Best Practices, um sie herzustellen.

Referenz

mein Ziel ist es auch, einen effizienten Weg zu planen, um in dieser schnell wachsenden Ära die Blockentwicklung einzugeben, und WordPress-Dokumente sind etwas schwierig, um mitzuhalten. Hier sind einige Ressourcen, mit denen ich diese Inhalte organisiert habe:

• Schlüsselkonzepte (WordPress Block -Editor -Handbuch)
• Erstellen Sie ein Block -Tutorial (WordPress Block -Editor -Handbuch)
• metadata in block.json (WordPress Block -Editor -Handbuch)
• Quellcode des Kernblocks (WordPress Github)
• WebPack -Konfiguration, die in @WordPress/Skripts -Paket (WordPress Github) verwendet wird
• Backend -Ingenieur lernt, Block -Editor -Blöcke zu erstellen, Teil 1 (Tom McFarlin)
• Ryan Welchers Twitch Live -Sendung (Ryan ist ein Befürworter des Automattic Developer)

Das obige ist der detaillierte Inhalt vonErste Schritte mit WordPress Block Development. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!