So passen Sie Ihr Plugin an Gutenberg an: Teil 1 (Block API)

"Ich habe ein Plugin," sagst du, "Wie mache ich es Gutenberg-fähig??"


Die Geschichte ist einfach; Gutenberg ist die neue Editor-Erfahrung in WordPress, die in der nächsten Hauptversion in den Kern integriert wird. Viele Plugins, die damit nicht Schritt halten wird obsolet werden. Daher ist es wichtig, dass Sie Ihr Plugin für Gutenberg anpassen, bevor es zu spät ist.

Wer ist betroffen??

Fast alle Plugins Wer etwas mit dem Post-Editor zu tun hat, wird von Gutenberg betroffen sein. Wenn Ihr Plugin beispielsweise eine Schaltfläche in TinyMCE hinzufügt, um einen Shortcode im Editor zu platzieren, sind schlechte Nachrichten. es wird das Ende sein.
Passen Sie Ihr Plugin für Gutenberg an: Teil 1 (Block API)

"Muss ich meine Plugins für Gutenberg anpassen??"

Welche Plugins müssen für Gutenberg aktualisiert werden? Alle Plugins, die funktionieren mit:

  • Benutzerdefinierte Metaboxen
  • Shortcodes
  • TinyMCE-Tasten
  • oder irgendein Editor-Feature überhaupt

Während einige Plugins weiterhin mit Gutenberg funktionieren, wie beispielsweise ein Plugin, das eine einfache Metabox hinzufügt, wird es für Ihre Benutzer nicht so reibungslos sein.

Sogar Shortcodes funktionieren weiterhin wie zuvor, es handelt sich jedoch nur um einen Nur-Text-Knoten im Editor, während alle Shortcode-Plugins für Gutenberg der Block-Benutzeroberfläche folgen und für Benutzer einfacher zu verwenden sind.

Ja, Benutzer werden Plugins bevorzugen, die für das Gutenberg-Erlebnis entwickelt wurden. Und diejenigen, die zurückbleiben, werden durch ein Mitbewerber-Plugin ersetzt.

Um Ihnen eine Vorstellung zu geben, hier ein Beispiel dafür, wie die Standarderfahrung des Benutzers mit alten Editoren mit einem unserer Plugins aussieht (ein), und dann, wie es in Gutenberg aussieht (b) – mit dem dafür optimierten Plugin.

(b)Feedzy RSS Feeds - ein Gutenberg-fähiges Plugin

Keine Angst! Wir sind hier, um Ihnen zu helfen, Ihre Plugins Gutenberg-fähig zu machen. Es gibt viele Möglichkeiten, Ihr Plugin in Gutenberg zu integrieren, je nachdem, wie Ihr Plugin funktioniert. Dies wird in diesem Artikel erläutert.

Dinge, die man vorher wissen sollteGutenberg ist auf React geschrieben. Und Gutenberg-Plugins sind in JavaScript codiert, was auch für Entwickler, die nur in PHP codieren, ein schwieriger Übergang sein kann. Sie benötigen zwar keine React-Kenntnisse, um Plugins für Gutenberg zu erstellen, benötigen jedoch einige grundlegende Kenntnisse in JavaScript. Wenn Sie zuvor an React und JSX gearbeitet haben, sind dies ähnliche Gründe für Sie.

Es gibt zwar nicht genug offizielle Dokumentation für Gutenberg, Das Github-Repository enthält viele wertvolle Informationen für Entwickler. Wenn Sie die Gutenberg-Entwicklung genau kennenlernen möchten, müssen Sie die Augen offen halten für alles, was im GitHub-Repository von Gutenberg vor sich geht, da sich das Projekt sehr schnell entwickelt und sich die Dinge jeden Tag ändern.

So passen Sie Ihr Plugin an Gutenberg an

Die Gutenberg-API bietet uns viele Möglichkeiten, den Editor zu erweitern, z. B. Block-API, Shortcode-API und mehr. Welche API verwendet werden soll, hängt davon ab, welche Art von Plugin wir erstellen.

Wenn Ihr Plugin ein einfaches Shortcode-Plugin ist, kann die Block-API verwendet werden, um einen schönen Block für den Editor zu erstellen. Wenn Ihr Plugin jedoch komplexe Metaboxen verwendet, bei denen ein Block nicht ausreicht, können wir die Sidebar-API verwenden.

Außerdem werden wir einen modernen Stapel von JavaScript-Entwicklungstools wie NodeJS, NPM, Webpack und ESNext verwenden. Wir stellen Ihnen Beispieldateien zur Verfügung, sodass Sie sich nicht um die Einrichtung Ihrer Entwicklungsumgebung kümmern müssen.

In diesem Beitrag werden wir uns ansehen So machen Sie Ihr Plugin mithilfe der Block-API Gutenberg-kompatibel. Wir werden uns mit den anderen Methoden befassen (Seitenleisten-API, Veröffentlichungsbereich, Statusleiste) & ähnliche APIs) in Teil zwei, falls erforderlich.

Alle genannten Beispiele finden Sie in dieses GitHub-Repository.

Gutenberg-Entwicklungsumgebung

Für die Entwicklung für Gutenberg müssen Sie eine Reihe von Tools wie NPM, Webpack, Babel und JSX einrichten. Es kostet viel Zeit und Mühe, deshalb haben wir die Umgebung für Sie vorbereitet.

Gutenberg Boilerplate ist ein Plugin mit minimalem Setup und Beispielen für die Gutenberg-Entwicklung. Es enthält ein Block- und Seitenleistenbeispiel. Sie können dies verwenden, um in Ihren benutzerdefinierten Block zu erweitern.

Gutenberg Boilerplate

Sie können gabeln oder klonen Gutenberg Boilerplate Repository zu deinem / wp-content / plugins / und verwenden Sie es als Ihre Entwicklungsumgebung.

Danach müssen Sie NodeJS auf Ihrem Computer installieren, um loszulegen. Navigieren Sie zum Ordner Gutenberg Boilerplate und führen Sie npm install aus

Ab diesem Zeitpunkt müssen Sie drei Befehle kennen, die Sie während des Entwicklungsprozesses verwenden werden:

  • npm install – Installieren Sie Projektabhängigkeiten, wenn Sie das Projekt klonen.
  • npm run dev – Kompiliert Code während des Entwicklungsprozesses. Sie müssen dies einmal ausführen, und es wird weiterhin auf die Änderungen achten.
  • npm run build – Kompiliert Code für einen optimierten Build, sobald der Entwicklungsprozess abgeschlossen ist.

API blockieren

Blöcke sind das grundlegende Element von Gutenberg, da es sich um einen blockbasierten Editor handelt. Mit der Block-API können Sie Blöcke für Gutenberg erstellen. Sie können Blöcke erstellen, mit denen einfaches HTML, Shortcodes oder sogar dynamische Blöcke gerendert werden können, um beispielsweise Ihre neuesten Beiträge anzuzeigen.

Der Prozess basiert auf einem vorhandenen Plugin

In unserem Beispiel übernehmen wir einen Click-to-Tweet-Shortcode für einen Gutenberg-Block. Dieser Click-to-Tweet-Shortcode rendert eine Tweet-Box mit Ihrem Text und eine Schaltfläche zum Twittern dieses Textes. So was:

Klicken Sie hier, um das Layout zu twittern

Unser Shortcode sieht ungefähr so ​​aus:

[clicktotweet tweet ="Angezeigter Text" tweetsent ="Zu twitternder Text" button ="Tweet" Thema ="Click-to-Tweet"]]

Unser Shortcode hat vier Parameter:

  • Tweet: Text, der auf Ihrer Website angezeigt wird.
  • Tweetsent: Text, der an Twitter geht.
  • button: Text der Tweet-Schaltfläche.
  • Thema: Entweder Click-to-Tweet oder Click-to-Tweet-Alt als Box-Thema.

Plugins für Gutenberg mit Block API anpassen

Mit Gutenberg gibt es zwei Möglichkeiten: Entweder können wir den HTML-Code im Front-End rendern oder wir können unseren Gutenberg-Block verwenden, um den Shortcode im Front-End zu rendern. Für diesen Artikel werden wir Letzteres tun.

Der gesamte Code ist in verfügbar Hallo Gutenberg Plugin Repository auf GitHub. Sie können das Repository klonen, um das Plugin in Aktion zu sehen oder den Code zu ändern.

Enqueue-Skripte / Stile für Gutenberg

Zuerst müssen wir unsere Skripte und Stile mithilfe von enqueue_block_assets in den Gutenberg-Editor einreihen:

/ **
* Front-End und Editor JavaScript und CSS in die Warteschlange stellen
* /
Funktion hello_gutenberg_scripts () {
$ blockPath = ‘/dist/block.js’;
$ stylePath = ‘/dist/block.css’;

// Die gebündelte Block-JS-Datei in die Warteschlange stellen
wp_enqueue_script (
‘hallo-gutenberg-block-js’,
plugins_url ($ blockPath, __FILE__),
[‘wp-i18n’, ‘wp-blocks’, ‘wp-editor’, ‘wp-components’],
Dateizeit (plugin_dir_path (__ FILE__). $ blockPath)
);

// Frontend- und Editor-Blockstile in die Warteschlange stellen
wp_enqueue_style (
‘hallo-gutenberg-block-css’,
plugins_url ($ stylePath, __FILE__),
”,
Dateizeit (plugin_dir_path (__ FILE__). $ stylePath)
);

}}

// Hook-Skripte funktionieren in Blockeditor-Hook
add_action (‘enqueue_block_assets’, ‘hello_gutenberg_scripts’);

Wir haben unserem Skript vier Abhängigkeiten hinzugefügt, die wir in unserem Block verwenden werden. Lassen Sie uns zuerst diese Abhängigkeiten kennenlernen:

wp-i18n ist Gutenbergs Version von Internationalisierungsfunktionen, wie z __ (). wp-blocks wird für die Funktion registerBlockType verwendet, die Ihren Block registriert. Wir verwenden wp-editor- und wp-components-Skripte für verschiedene Komponenten in unserem Block.

Nachdem wir Ihr Vermögen in die Warteschlange gestellt haben, können wir mit dem Schreiben unseres Blocks beginnen /src/block.js Datei.

Abhängigkeiten importieren

Wenn Sie Gutenberg Boilerplate verwenden, dann ist Ihr block.js Die Datei sollte eine grundlegende Blockstruktur haben, mit der Sie Plugins für Gutenberg erstellen können:

/ **
* Interne Blockbibliotheken
* /
const {__} = wp.i18n;

const {registerBlockType} = wp.blocks;

/ **
* Registerblock
* /
export default registerBlockType (‘gutenberg-boilerplate / block’, {
// Blocktitel
Titel: __ (‘Gutenberg Boilerplate’),
// Blockbeschreibung
Beschreibung: __ (‘Ein Beispielblock.’),
// Kategorie blockieren
Kategorie: ‘gemeinsam’,
// Block-Symbol
Symbol: ‘Admin-Site’,
// Schlüsselwörter blockieren
Schlüsselwörter: [
__ (‘Boilerplate’),
__( ‘Hallo Welt’ ),
__ (‘Beispiel’),
]],
Attribute: {
}},
// Bearbeitungsoberfläche definieren
edit: Requisiten => {
Rückkehr (

{__ (‘Hallo Backend’)}

);
}},
// Front-End-Schnittstelle definieren
speichern: Requisiten => {
Rückkehr (

{__ (‘Hallo Frontend’)}

);
}},
});

Sie können npm run dev ausführen, um unseren Code in Echtzeit zu kompilieren.

Zuerst importieren wir alle Komponenten und Bibliotheken, die wir für den Block oben benötigen:

/ **
* Abhängigkeiten blockieren
* /

Klassennamen aus ‘Klassennamen’ importieren;

/ **
* Interne Blockbibliotheken
* /
const {__} = wp.i18n;

const {registerBlockType} = wp.blocks;

const {
RichText,
InspectorControls,
BlockControls,
} = wp.editor;

const {
PanelBody,
TextareaControl,
TextControl,
Dashicon,
Symbolleiste,
Taste,
Tooltip,
} = wp.components;

Die ersten Importe Klassennamen die wir mit npm installiert haben, um mehrere Klassen in unserem Code zu verwenden, da JSX nicht mehrere Klassen in Elementen zulässt.

Wir werden mehr über andere Komponenten erfahren, die wir importiert haben, während wir sie verwenden.

Attribute definieren

Jetzt definieren wir vier Attribute für unseren Gutenberg-Block, genau wie unseren Shortcode:

Attribute: {
Tweet: {
Typ: ‘Zeichenfolge’,
}},
Tweetsent: {
Typ: ‘Zeichenfolge’,
}},
Taste: {
Typ: ‘Zeichenfolge’,
Standard: __ (‘Tweet’),
}},
Thema: {
Typ: ‘Boolescher Wert’,
Standard: false,
}},
}},

Wie Sie sehen können, stimmen alle Attribute mit unserem Shortcode überein. Alle Attribute haben einen Typschlüssel, der Gutenberg seinen Datentyp mitteilt. Sie können string, number, boolean verwenden & Objekt als akzeptierte Typen.

Einige der Attribute enthalten auch einen Standardwert. Attribute können auch andere Eigenschaften haben, z. B. Quelle und Selektoren, die wir in unserem Beispiel nicht verwenden, aber Sie können Erfahren Sie hier mehr über sie.

Schnittstelle bearbeiten

Jetzt erstellen wir die Bearbeitungsoberfläche unseres Blocks, die als Anzeige dient. Benutzer werden sie sehen, während sie den Block in Gutenberg bearbeiten.

Um eine grundlegende Vorstellung zu bekommen, können wir zuerst unseren Block hart codieren und darauf aufbauen, indem wir den folgenden Bereich in unserem Code ersetzen:

// Bearbeitungsoberfläche definieren
edit: Requisiten => {
Rückkehr (

{__ (‘Hallo Backend’)}

);
}},

Mit folgendem Code:

// Bearbeitungsoberfläche definieren
edit: Requisiten => {
Rückkehr [

Kürbisse und Pinguine

Tweet

];
}},

Dies sollte Ihnen eine Vorstellung von unserem Endergebnis geben. Es wird ungefähr so ​​aussehen:

Plugins für Gutenberg

Das erste Element des Blocks ist der Tweet-Textbereich. Wir werden es durch ein bearbeitbares Textfeld ersetzen, ähnlich dem Überschriftenblock von Gutenberg.

Wir werden verwenden RichText Komponente, die wir zuvor importiert haben, um unseren fest codierten Text zu ersetzen.

Unsere RichText-Komponente hat fünf Argumente. Format ist eine Zeichenfolge, da wir unseren Shortcode verwenden werden, um die Elemente im Frontend anzuzeigen. Wenn wir einen Selektor in unserem Attribut verwenden wollten, wäre das Format ein Array gewesen.

RichText verfügt standardmäßig über einige Formatierungsoptionen, z. B. Fett und Kursiv, die wir deaktiviert haben, indem wir ein leeres Array im Argument formatierungscontrolles übergeben haben.

Platzhalter ist der Platzhaltertext, wenn kein Text im Feld vorhanden ist, und onChange löst die Funktion onChangeTweet aus, wenn ein Änderungsereignis stattfindet.

Schließlich ist value der Wert unseres Feldes, der aus dem zuvor definierten Tweet-Attribut entnommen wird.

Nachdem wir unseren RichText-Bereich definiert haben, müssen wir die onChangeTweet-Funktion erstellen, die ausgelöst wird, wenn sich der Wert in unserem Textfeld ändert.

// Bearbeitungsoberfläche definieren
edit: Requisiten => {
const onChangeTweet = value => {
props.setAttributes ({tweet: value});
};
Rückkehr [
…Rest des Codes

Wir übergeben den Wert des RichText-Felds an die onChangeTweet-Funktion, die verwendet wird props.setAttributes Funktion zum Aktualisieren des Werts des Tweet-Attributs.

Sie werden die Kraft von Gutenberg jetzt sehen, wenn Sie Ihren Block benutzen.

RichField in Gutenberg

Ist es nicht großartig??

Blockinspektor

Wenn Sie Plugins für Gutenberg erstellen, müssen Sie das Rad nicht jedes Mal neu erfinden, um Optionsfelder für Ihre Plugins zu erstellen. Gutenberg bietet uns eine vereinfachte Möglichkeit, Blockanpassungen zu ermöglichen, und stellt sicher, dass jeder Benutzer eine konsistente Erfahrung mit integrierten Benutzeroberflächenmustern hat.

Ähnlich wie bei der RichText-Komponente fügt die InspectorControls-Komponente eine Seitenleiste hinzu, wenn der Block ausgewählt wird. Etwas wie das:

Gutenberg Inspector Controls

Wir werden auch TextareaControl und TextControl verwenden, um unserem Inspektorbereich ein Textfeld und ein Texteingabefeld hinzuzufügen.

Wir werden Ihrer Rückgabeerklärung den folgenden Code hinzufügen:

!! props.isSelected && (

),

props.isSelected überprüft, ob der Inspector nur angezeigt wird, wenn der Block ausgewählt ist.

TextareaControl- und TextControl-Komponenten haben ähnlich wie RichText einen Wert und eine onChange-Methode.

Wir müssen auch den Code Ihrer Blockanzeige ändern, um neuen Änderungen Rechnung zu tragen. In unserem Fall müssen wir unserem Block nur Schaltflächentext hinzufügen, da dem Link Tweet-Text hinzugefügt wird, sodass wir ihn nicht in unserem Backend anzeigen müssen.

Sie können den Hyperlink in unserem ursprünglichen Code durch Folgendes ersetzen:


{props.attributes.button}

Wie bereits erwähnt, entfernen wir den Hyperlink aus unserem Code, da wir ihn nicht im Backend anzeigen müssen. Dadurch sieht unser Block folgendermaßen aus:

Gutenberg Klicken Sie hier, um Inspector Controls zu twittern

Block Inspector kann ein wirksames Werkzeug für Ihren Block sein. Wenn Ihr Plugin über erweiterte Optionen verfügt, die für den Editorbereich zu kompliziert sind, können Sie diese in den Inspektorbereich einfügen.

Wir werden unserem Block eine letzte Option hinzufügen, um den JavaScript-Teil im nächsten Abschnitt fertigzustellen.

Symbolleiste blockieren

Die Block-Symbolleiste ist eine weitere vorgefertigte UI-Komponente, mit der wir unserem Block weitere Optionen hinzufügen können. Es wird über Ihrem Block angezeigt, wenn Sie ihn auswählen. Beispiel:

Gutenberg Block Symbolleiste

Im Idealfall sollte die Block-Symbolleiste die primären Steuerelemente Ihres Blocks enthalten, wobei Inspector die sekundären Steuerelemente hostet. Dies ist jedoch umstritten und hängt von Ihrem Block ab.

Wir werden den Block-Symbolleistenbereich verwenden, um unser alternatives Stilsteuerelement zu hosten.

Ähnlich wie bei Block Inspector müssen wir unserer return-Anweisung den folgenden Code hinzufügen, um die Block-Symbolleiste zu unserem Block hinzuzufügen:

!! props.isSelected && (

),

Wir verwenden BlockControls- und Toolbar-Komponenten, um unserem Block eine Symbolleiste hinzuzufügen. Ähnlich wie bei Block Inspector stellt props.isSelected sicher, dass unsere Symbolleiste nur angezeigt wird, wenn wir uns auf unseren Block konzentrieren.

Wir verwenden auch Tooltip- und Button-Komponenten für unsere Steuerung. Die Tooltip-Komponente wird um die Button-Komponente gewickelt, um sicherzustellen, dass ein Tooltip vorhanden ist, wenn Sie mit der Maus über das Steuerelement fahren, um mehr Kontext zu erhalten.

Die Schaltflächenkomponente verwendet das Klassennamenmodul, das wir zuvor in diesem Artikel importiert haben. Wir haben die Klassennamenfunktion verwendet, um unserer Steuerung drei Klassen zuzuweisen. Die dritte Klasse, is-active, wird nur angezeigt, wenn unser Themenattributwert true ist.

Die Funktion onChange schaltet das Theme-Attribut auf true / false um. Am Ende werden Dashicon-Komponenten verwendet, um ein Symbol für unser Steuerelement anzuzeigen.

Wir müssen auch unseren Blockcode ändern, damit er mit den Änderungen funktioniert. Wir müssen die folgende Zeile ersetzen:

Mit:

Wir prüfen, ob das Themenattribut wahr oder falsch ist, und weisen unserem Block entsprechend eine Klasse zu.

Jetzt sollte Ihr Block ungefähr so ​​aussehen:

Klicken Sie hier, um die Symbolleiste zu twittern

Wir haben den JavaScript-seitigen Teil unseres Gutenberg-Blocks fertiggestellt. Sie finden den gesamten Quellcode der Datei Hier.

Jetzt beenden wir unseren Block, indem wir die serverseitige Ausgabe verarbeiten.

Serverseitiges Rendern

Mit Gutenberg können Sie serverseitiges Rendering verwenden, um Ihre Blöcke im Front-End anzuzeigen. Dieses serverseitige Rendering ermöglicht es uns, Blöcke für Shortcodes zu erstellen.

Zuerst werden wir unsere Speichermethode so einstellen, dass sie null zurückgibt, indem wir sie durch den folgenden Code ersetzen:

// Front-End-Schnittstelle definieren
speichern() {
// Rendern in PHP
return null;
}},

Wir werden die PHP-Funktion register_block_type verwenden, um unseren Blocktyp in PHP zu registrieren:

if (function_exists (‘register_block_type’)) {
// Serverseitiges Rendern in Render-Callback einbinden
register_block_type (
‘hallo-gutenberg / click-to-tweet’, [
‘render_callback’ => ‘hello_gutenberg_block_callback’,
‘Attribute’ => Array (
‘tweet’ => Array (
‘Typ’ => ‘string’,
),
‘tweetsent’ => Array (
‘Typ’ => ‘string’,
),
‘button’ => Array (
‘Typ’ => ‘string’,
‘default’ => ‘Tweet’,
),
‘theme’ => Array (
‘Typ’ => ‘boolean’,
‘default’ => falsch,
),
),
]]
);
}}

Unsere Funktion register_block_type. Wir übergeben ihm zuerst unseren Blocknamen zusammen mit einer Reihe von Argumenten.

Das erste Argument ist die Funktion render_callback, die unsere Funktion hello_gutenberg_block_callback für das serverseitige Rendern aufruft.

Nach unserem Render-Rückruf übergeben wir Attribute als Array, ähnlich der Datei block.js, die wir in unserer Render-Rückruffunktion verwenden.

Unsere Render-Rückruffunktion sieht folgendermaßen aus:

Funktion hello_gutenberg_block_callback ($ attr) {
extrahieren ($ attr);
if (isset ($ tweet)) {
$ theme = ($ theme === true? ‘click-to-tweet-alt’: ‘click-to-tweet’);
$ shortcode_string = ‘[clicktotweet tweet ="% s" tweetsent ="% s" button ="% s" Thema ="% s"] ‘;
return sprintf ($ shortcode_string, $ tweet, $ tweetsent, $ button, $ theme);
}}
}}

Wir extrahieren alle Attribute und geben sie dann in unseren Shortcode zurück. Das ist alles, was Sie brauchen, um Ihre Shortcode-Plugins für Gutenberg anzupassen.

In diesem Artikel finden Sie den gesamten in diesem Artikel verwendeten Code hallo-gutenberg Repository.

Im nächsten Teil werden wir uns andere Möglichkeiten ansehen, um vorhandene Plugins für Gutenberg anzupassen, einschließlich der Sidebar-API.

Wenn Sie Fragen zur Anpassung Ihres Plugins an Gutenberg haben, stellen Sie diese bitte in den Kommentaren!

Vergessen Sie nicht, an unserem Crashkurs teilzunehmen, um Ihre WordPress-Site zu beschleunigen. Mit einigen einfachen Korrekturen können Sie Ihre Ladezeit sogar um 50-80% reduzieren:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map