Build for Gutenberg: Wie Plugin- und Theme-Autoren den Übergang zu Gutenberg angehen

Build for Gutenberg: Wie Plugin- und Theme-Autoren den Übergang zu Gutenberg angehen

Build for Gutenberg: Wie Plugin- und Theme-Autoren den Übergang zu Gutenberg angehen
СОДЕРЖАНИЕ
02 июня 2020

Build for Gutenberg: Wie Plugin- und Theme-Autoren den Übergang angehen


Auf dem WordCamp Europe 2018 legte Matt Mullenweg eine grobe Roadmap für Gutenberg für die nächsten Monate vor. Im Juli wird es einen großen Schub geben, um die Akzeptanz von Gutenberg zu erhöhen, mit einer Beta-Version 5.0 für August (oder darüber hinaus; wahrscheinlich sogar darüber hinaus). Die bevorstehende Integration könnte Sie fragen, wie WordPress-Entwickler planen, für Gutenberg zu bauen.

Auf welche Weise bereiten Entwickler ihre Angebote für Gutenberg vor? Und machen die Leute etwas Neues und Interessantes für Gutenberg??

In diesem Beitrag geben wir Ihnen einige konkrete Beispiele dafür, wie Plugin- und Theme-Entwickler für Gutenberg erstellen können, indem wir Ihnen zeigen, was bereits da draußen ist.

Wir hoffen, dass Sie anhand einiger Beispiele aus der Praxis sehen, wie Entwickler Blöcke und Stile verwenden, um ein integrierteres Bearbeitungserlebnis zu schaffen:

  • Verstehen Sie, wie Gutenberg Ihnen als Endbenutzer zugute kommen kann.
  • Holen Sie sich einige Ideen für Gutenberg für Ihre eigenen WordPress-Projekte.

Wenn Sie sich immer noch nicht sicher sind, was der Gutenberg-Editor ist, sollten Sie zuerst unser vollständiges Tutorial zum Gutenberg-Editor lesen.

Sechs Beispiele dafür, wie vorhandene Plugins den Wechsel zu Gutenberg adressieren

Die Art und Weise, wie Plugin-Autoren für Gutenberg erstellen, hängt hauptsächlich von der Funktion des Plugins ab.

Einerseits haben Sie Plugins, die sich auf das Hinzufügen von Front-End-Inhalten konzentrieren. Dies ist hauptsächlich das, was zuvor durch Hinzufügen eines Shortcodes erledigt wurde.

Ein gutes Beispiel ist ein Formular-Plugin. Nahezu jedes Formular-Plugin bietet Ihnen eine separate Oberfläche zum Erstellen Ihrer Formulare und einen Shortcode zum tatsächlichen Einbetten dieser Formulare in das Front-End.

Diese Arten von Plugins werden Gutenberg normalerweise mit a ansprechen benutzerdefinierter Block um das Einfügen von Inhalten zu vereinfachen. In diesem Abschnitt sehen Sie mehrere Beispiele aus:

  • Ninja-Formen
  • Geben
  • WooCommerce

Dann haben Sie andere Plugins, mit denen Sie die Details hinter den Kulissen steuern können. In der Regel verwenden diese Plugins Meta-Boxen.

Das bekannteste Beispiel wäre so etwas wie Yoast SEO. Sie fügen keinen Inhalt hinzu, aber all diese Meta-Box-Informationen sind wichtig.

Meta-Boxen funktionieren jetzt mit Gutenberg, aber es besteht immer noch die Möglichkeit, dass diese Plugins ihre Funktionalität ändern, um Gutenberg zu nutzen. Ich zeige Ihnen einige Möglichkeiten, wie Yoast SEO das Problem beheben kann, und wie wir uns entschieden haben, Dinge mit einigen unserer eigenen Plugins zu tun.

1. Ninja Forms fügt einen neuen Gutenberg-Block hinzu

Ninja-Formen ist eines der beliebtesten Formular-Plugins im WordPress.org-Repo. Bisher wird Gutenberg durch Hinzufügen einer einfachen Adresse angesprochen Ninja-Formen Block.

Sie fügen den Block wie jeden anderen Gutenberg-Block ein:

Wie Ninja-Formen Entwickler für Gutenberg bauen

Anschließend können Sie Ihr Formular aus der Dropdown-Liste auswählen:

Ninja bildet Block

Sobald Sie ein Formular ausgewählt haben, wird direkt im Editor eine Live-Vorschau angezeigt:

Live-Vorschau des Formulars

Im Moment ist das alles. Dies ist jedoch ein solider Basisansatz, weil:

  • Sie müssen nicht mehr direkt mit Shortcodes arbeiten
  • Sie können eine Live-Vorschau Ihres Designs anzeigen, während Sie Ihre Seite noch bearbeiten

Die nächsten beiden Plugins bauen darauf mit einigen tieferen Styling- / Steuerungsoptionen auf.

2. Give fügt zwei Gutenberg-Blöcke mit Layoutoptionen hinzu

Geben ist ein beliebtes Spenden-Plugin mit einem Entwicklungsteam, das Give sehr proaktiv in den Gutenberg-Editor integriert hat (wenn Ihnen das Thema dieses Beitrags gefällt, wird Ihnen die # PlayWithBlocks-Reihe auf der Website gefallen Blog geben, wo das Give-Team ihre Pläne für Gutenberg detailliert beschreibt).

Give hat eine der optimiertesten Gutenberg-Erfahrungen, die ich je gemacht habe. Sie können Spendenformulare nicht nur über die beiden Blöcke von Give einbringen, sondern auch über die Gutenberg-Oberfläche gestalten.

Mit den beiden Blöcken von Give können Sie Folgendes einbetten:

  • Ein einziges Spendenformular
  • Ein Raster von Spendenformularen

givewp gutenberg blocke

Wie bei Ninja Forms erhalten Sie eine Live-Vorschau Ihres Formulars. Aber du bekommst auch Block Bearbeitungsoptionen, mit denen Sie:

  • Wählen Sie das Format
  • Aktivieren / Deaktivieren Sie das Spendenziel
  • Wählen Sie aus, wo der Inhalt positioniert werden soll

Blocklayoutoptionen

Wenn Sie mit der Maus über Ihr Formular fahren, erhalten Sie einen direkten Link zum Bearbeiten dieses Formulars:

Blockbearbeitung

Es wird also untersucht, wie Blöcke etwas tiefer gehen können als die aktuelle Implementierung von Ninja Forms. Aber WooCommerce geht noch einen Schritt weiter…

3. WooCommerce fügt einen Produktblock mit Spaltensteuerung hinzu

Während WooCommerce wahrscheinlich weitere Gutenberg-Integrationen hinzufügen wird, wenn WordPress 5.0 näher rückt (einige Ideen, wie Sie hier Produkte hinzufügen können) hat das Team bereits mit dem Offiziellen die Zehen in Gutenberg getaucht WooCommerce Gutenberg Products Block Plugin.

Ja – im Moment ist dies ein separates Plugin. Sobald Sie es installiert haben, können Sie vorhandene WooCommerce-Produkte als Block in Ihren Gutenberg-Inhalt einfügen.

Wenn Sie die hinzufügen Produkte Block können Sie auswählen, welche Produkte angezeigt werden sollen:

gutenberg woocommerce block

Anschließend können Sie die Blockbearbeitungsoptionen verwenden, um das Layout zu ändern:

Änderung des Woocommerce-Layouts in Gutenberg

Dieser Artikel begeistert mich sehr, da er ein großartiges Beispiel dafür ist, wie Gutenberg den Zugriff / das Konfigurieren von nicht standardmäßigen Inhalten erleichtert.

4. Beaver Builder fügt a hinzu "In Beaver Builder konvertieren" Möglichkeit

Es wurde viel darüber gesprochen, wie Seitenersteller Gutenberg ansprechen werden. Es gibt noch nicht viel Konkretes, aber Beaver Builder hat in Beaver Builder 2.1 eine Funktion hinzugefügt, mit der Sie ein Gutenberg-Layout in Beaver Builder konvertieren können:

Biberbauer gutenberg

Derzeit ist der Konvertierungsprozess nicht perfekt. Die Idee, zwischen Gutenberg und einem Seitenersteller wechseln zu können, ist jedoch faszinierend, wenn die Konvertierung nahtlos verläuft.

5. Meta-Boxen sollten immer noch funktionieren – Yoast SEO ist ein gutes Beispiel

Ich glaube, Yoast SEO hat noch keine Änderungen veröffentlicht, um Gutenberg anzusprechen. Im Moment ist dies eher ein Beispiel dafür, wie vorhandene Meta-Boxen mit Gutenberg funktionieren (wenn Sie Gutenberg nicht genau verfolgt haben – es bietet jetzt Meta-Box-Unterstützung, obwohl es ist mehr für die Abwärtskompatibilität als für eine langfristige Lösung).

Wie Sie sehen können, kommt die Haupt-Meta-Box von Yoast SEO unbeschadet von Gutenberg durch:

gutenberg yoast seo meta box

Es fehlen jedoch die SEO- und Inhaltsanalyse-Ergebnisse, die früher in der Seitenleiste angezeigt wurden.

Wie könnte Yoast also für Gutenberg bauen, um das anzugehen?? Hier sind einige Modelle für mögliche Möglichkeiten, wie Yoast seine Analyse in die eigentliche Gutenberg-Oberfläche integrieren kann:

Modell B.Yoast SEO Warnung
Modell C.Yoast SEO In-Content-Analyse

6. Wie wir Meta-Boxen in WP Product Review ansprechen

Unsere WP Product Review Plugin ist eines dieser Plugins, das eine Meta-Box verwendet, um die Ausgabe im Front-End zu steuern (in diesem Fall ein Überprüfungsfeld)..

So arbeiten wir an der Integration von WP Product Review in den Gutenberg-Editor:

wp Produktbewertung gutenberg

Wenn Benutzer angeben, dass es sich bei dem Beitrag um eine Überprüfung mit einem Seitenleisten-Umschalter handelt, können sie über die oben genannten Optionen alles an ihrem Überprüfungsfeld konfigurieren:

wp review pro gutenberg umschalten

Entwickler – Hier ist eine großartige Ressource, um Ihr Plugin für Gutenberg vorzubereiten

Wenn Sie ein tatsächlicher Plugin-Entwickler sind, fragen Sie sich möglicherweise, wie Sie Gutenberg für Ihr spezifisches Plugin erstellen sollten. Nun … das kann ich dir nicht sagen. Aber ich kann Sie auf diesen großartigen Beitrag unseres eigenen Hardeep Asrani verweisen. Hardeep gibt einige umsetzbare Tipps, um Ihr Plugin für Gutenberg vorzubereiten.

Entwickler können auch mit neuen Plugins für Gutenberg bauen

Entwickler konzentrieren sich nicht nur darauf, vorhandene Plugins mit Gutenberg kompatibel zu machen, sondern planen auch, mit neuen Plugins für Gutenberg zu bauen.

Neue Gutenberg-Blöcke in Hülle und Fülle

Einerseits haben Sie eine Vielzahl allgemeiner Plugins, die nur neue Arten von Inhaltsblöcken hinzufügen. Diese geben Gutenberg mehr das Gefühl eines Seitenerstellers. Sie finden Blöcke für:

  • Preistabellen
  • Referenzen
  • Teammitglieder
  • Usw.

Hier ist beispielsweise ein Preistabellenblock aus dem Stapelbar – Ultimate Gutenberg Blocks Plugin. Sehen Sie sich an, wie detailliert die Blockbearbeitungsoptionen sind:

neue gutenbergblöcke

Es gibt bereits eine Reihe dieser Plugins bei WordPress.org. Über das oben genannte Stackable-Plugin hinaus scheinen andere beliebte Angebote zu sein:

Es gibt auch ein Angebot namens CoBlocks die sich als vermarktet "Gutenberg-Blöcke für Content-Vermarkter".

Ich finde diesen Nischenansatz besonders interessant. Vielleicht sehen wir in Zukunft spezielle Gutenberg-Block-Sets für:

Das Buchbesprechungsblock Das Plugin ist ein weiteres kleines Beispiel dafür, wie Nischen-Gutenberg-Blöcke zu einer Sache werden können.

Ein Beispiel dafür, wie benutzerdefinierte Felder mit Gutenberg funktionieren können

Gutenberg Custom Fields ist ein weiteres interessantes Plugin, das anscheinend etwas an Fahrt gewinnt.

Es macht es einfach, benutzerdefinierte Felder oder Feldgruppen einzurichten, die einem bestimmten benutzerdefinierten Beitragstyp zugeordnet sind:

Gutenberg Editor benutzerdefinierte Felder

Wenn Sie dann zum Gutenberg-Editor gehen, werden diese benutzerdefinierten Felder als Blöcke vorab ausgefüllt:

Gutenberg Custom Field Beispiel

Viele Leute haben sich gefragt, wie benutzerdefinierte Felder mit Gutenberg funktionieren – dies ist ein vielversprechendes Beispiel, das bereits in freier Wildbahn verfügbar ist. Du kannst Erfahren Sie hier mehr darüber.

Drei Beispiele dafür, wie Themenentwickler den Übergang zu Gutenberg angehen

Sie haben gerade einige Beispiele gesehen, wie Plugin-Entwickler für Gutenberg erstellen können, aber was ist mit Themen??

Theme-Entwickler scheinen zwei Hauptwege zu verfolgen, um den Übergang anzugehen:

  • Machen Sie Themen Gutenberg-fähig, indem Sie Stile für Blöcke hinzufügen und Gutenberg-Layoutoptionen unterstützen
  • Verwenden von Gutenberg-Blöcken zum Erstellen von Themeninhalten

Hier sind einige Beispiele, um das Bild zu malen …

1. Hinzufügen benutzerdefinierter Stile zum Gutenberg-Editor

Eine wirklich nette Sache, die Entwickler sehen, ist das Hinzufügen von Designstilen zur eigentlichen Back-End-Gutenberg-Oberfläche. Dies öffnet die Türen, um ein echtes WYSIWYG-Erlebnis zu schaffen, obwohl Spencer von BigBox WooCommerce Einzelheiten zu einigen Problemen beim Stylen von Blöcken von Drittanbietern.

Sehen Sie sich beispielsweise an, wie das Ohana-Thema von ThemeShaper den gesamten Gutenberg-Inhalt einschließlich des Post-Titels vollständig neu formuliert:

Gutenberg In-Dashboard-Stile

Wenn Sie es in Aktion sehen möchten, Laden Sie das Ohana-Thema von GitHub herunter. Und ThemeShaper erklärt auch, wie sie diesen Effekt erzielt haben in diesem Blogbeitrag.

2. Hinzufügen neuer Ausrichtungsoptionen in voller Breite

Eine weitere coole Optimierung der Themenkompatibilität ist das Hinzufügen von Breite Ausrichtung Unterstützung. Im Wesentlichen können Sie so bestimmte Blöcke in voller Breite erstellen. Das häufigste Beispiel wäre das Einfügen eines Bildes in voller Breite.

Auch dies können Sie mit dem Ohana-Thema sehen:

gutenberg breites layout

Damit diese Ausrichtung funktioniert, müssen Themenautoren die Unterstützung ausdrücklich deklarieren.

3. Erstellen von Demo-Inhalten für Themen mit Blöcken – z. Das Block-Thema

Schließlich ist dieser Ansatz von Organic Themes ziemlich cool:

Das Block-Thema Demo-Inhalte werden vollständig mit Gutenberg-Blöcken erstellt.

Dies ist etwas, das wir zweifellos weiter wachsen sehen werden, wie Matt in der Gutenberg-Roadmap ausdrücklich sagte, dass der Juli das Erkunden beinhalten würde "Erweiterung von Gutenberg über den Beitrag hinaus zur Anpassung der Website."

Über das Block-Thema hinaus haben Array-Themen auch ein Atomic Blocks Theme Dies wurde speziell für die Integration in das oben erwähnte Atomic Blocks-Plugin entwickelt.

Entwickler – Hier erfahren Sie, wie Sie Ihr Thema für Gutenberg vorbereiten

Wenn Sie als Theme-Entwickler sich fragen, wie Sie Ihr vorhandenes Theme mit Gutenberg kompatibel machen können, Bill Erickson hat einen großartigen Führer zu den Höhepunkten. Und der Themenunterstützung Abschnitt des Gutenberg-Handbuchs ist eine weitere gute Ressource.

Es wird definitiv mehr coole Sachen geben

Ich hoffe, Sie haben anhand der obigen Beispiele ein besseres Verständnis dafür, wie Plugin- und Theme-Entwickler planen, für Gutenberg zu bauen.

Persönlich weiß ich, dass mich das Schreiben dieses Beitrags besonders über die Möglichkeiten mit Gutenberg aufgeregt hat.

Auf der Plugin-Seite ist die Verwendung von Blöcken als Ersatz für alle bisher mit Shortcodes durchgeführten Aufgaben eine wesentliche Verbesserung der Benutzerfreundlichkeit, insbesondere für Gelegenheitsbenutzer.

Spannend ist auch die Art und Weise, wie Theme-Entwickler ihre eigenen Stile einbringen und Blöcke einbinden können – zumal Gutenberg sich verstärkt mit der Anpassung von Websites befasst.

Nun zu Ihnen – sind Sie auf großartige Beispiele von Plugin- oder Themenautoren gestoßen, die interessante Möglichkeiten gefunden haben, für Gutenberg zu bauen? Lass es uns in den Kommentaren wissen!

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
    Это интересно
    Adblock
    detector