Verwenden Sie React-Komponenten von Gutenberg in Ihren WordPress-Plugins wieder

Vor ein paar Tagen hat David eine Reihe von vier Blogbeiträgen fertiggestellt, in denen React vorgestellt wurde. Dort hat er dir erklärt, wie du mit React loslegen kannst, um ganz einfach Benutzeroberflächen in WordPress zu erstellen. Insbesondere in Teil 2 dieser Beitragsserie erklärte David, wie man die Entwicklungsumgebung vorbereitet und eine einfache React-Komponente erstellt. Heute werden wir sehen, dass es neben der Erstellung eigener React-Komponenten eine sehr gute Idee ist, vorhandene Komponenten wiederzuverwenden.

Seit Gutenberg in WordPress erschienen ist, sind JavaScript und das React-Framework zu einem wichtigen Bestandteil des WordPress-Entwicklungsstacks geworden. Wenn Sie an diese Technologien nicht gewöhnt sind, sollten Sie sie daher so schnell wie möglich lernen. Wir haben dies getan und unsere Premium-Plugins mit React komplett neu codiert. Dies implizierte die Transformation aller Benutzeroberflächen, die wir bereits mit React-Komponenten hatten.

Da Programmierer das Rad nicht neu erfinden sollten und in der Welt der Softwareentwicklung weniger immer mehr ist, sehen wir uns heute an, wie man bestehende React-Komponenten in WordPress wiederverwenden kann.

Die in WordPress enthaltenen React-Komponenten

WordPress bietet über das @wordpress/components -Paket von Gutenberg mehr als 80 React-Komponenten, die Sie in Ihrer Entwicklung wiederverwenden können:

In jedem der Komponentenordner, die Sie hier auf dem Github des Gutenberg-Projekts finden, finden Sie den JavaScript-Quellcode jeder Komponente sowie ihre CSS-Stile und eine Dokumentation, um zu wissen, wie und wann sie verwendet werden.

Unter den Komponenten, die wir bei Nelio für unsere neuen React-Schnittstellen verwendet haben, lohnt es sich, Button und ButtonGroup , um Schaltflächen zu definieren. Alle Controller für Felder und Optionen wie CheckboxControl , InputControl , RangeControl NumberControl RadioControl SelectControl TextControl . Oder sogar TabPanel für Schnittstellen mit Registerkarten oder Popover und Modal für schwebende Dialoge. Und es gibt noch viele mehr…

Wenn wir diese Komponenten von Grund auf neu entwickeln müssten, würden wir sicherlich jetzt noch die neuen React-Schnittstellen unserer Premium-Plugins programmieren. Die Wiederverwendung vorhandener Komponenten ist das Beste, was Sie als Entwickler tun können, um Zeit zu sparen. Und die von Gutenberg für WordPress bereitgestellten sind perfekt für Ihre Plugins.

So verwenden Sie WordPress React-Komponenten wieder

Stellen Sie sich vor, Sie möchten eine Schaltfläche in Ihrer in React entwickelten Benutzeroberfläche verwenden. Dank der vorhandenen Komponenten in Gutenberg könnten Sie die Button Komponente direkt verwenden, wie Sie im folgenden Beispiel sehen können:

 /** * WordPress dependencies */ import { Button } from '@wordpress/components'; export default function MyComponent() { return <Button>Click Me!</Button>; }

Sie fragen sich vielleicht, dass Sie für eine Schaltfläche nicht die Gutenberg-Komponente verwenden müssten und stattdessen direkt ein <button> -Tag verwenden würden. Und du hättest Recht.

Wenn Sie jedoch den Gutenberg- Button verwenden, erhalten Sie, dass Ihr Button den gleichen CSS-Stil hat wie die anderen Buttons in der WordPress-Oberfläche. Auch wenn die Komponente und ihre Stile aktualisiert werden, was in fast jeder neuen Version von WordPress passiert ist, müssen Sie als Entwickler nichts tun. Die Verantwortung für die Aktualisierung des Gutenberg Button liegt nicht bei Ihnen. Wenn Sie Ihre eigene Schaltfläche verwenden, müssen Sie sich darum kümmern.

Um eine vorhandene Gutenberg-Komponente wiederzuverwenden, musst du nur prüfen, ob diese Komponente existiert, und sie über das Paket @wordpress/components in deinen Code importieren. Wie Sie im obigen Code-Snippet sehen können, haben wir die Button -Komponente aus diesem Paket importiert. Und um das Paket in Ihrem Projekt verfügbar zu haben, müssen Sie es mit dem Befehl npm install @wordpress/components im Terminal installieren. Aber das wurde bereits von David in seinen Beiträgen erklärt, also werde ich das nicht noch einmal behandeln.

Was Sie jedoch beachten müssen, ist, dass Sie wp-components als Abhängigkeit Ihrer CSS-Stildatei festlegen müssen, wenn Sie sie mit der PHP-Funktion wp_enqueue_style in WordPress einreihen, damit diese Komponenten die WordPress-Stile übernehmen.

Wenn Ihre Bedürfnisse nicht von den von Gutenberg bereitgestellten React-Komponenten abgedeckt werden, erfinden Sie das Rad nicht neu und verwenden Sie sie. Die Vorteile der Wiederverwendung bestehender Komponenten sind deutlich größer als die Verwendung eigener Komponenten.

Gutenbergs React Components Storybook

Eine der Neuheiten von Gutenberg ist das Storybook, das wir auf Github finden können. Storybook ist ein Open-Source-Tool, das eine Sandbox zum isolierten Entwickeln und Anzeigen von Komponenten bereitstellt. Bei WordPress dient es unter anderem als Dokumentation der Komponenten.

Unter den verschiedenen Optionen, die im Gutenberg Storybook enthalten sind, haben wir die Möglichkeit, den Blockeditor über das Playground -Menü auszuprobieren. Die interessanteste Option ist jedoch, die Dokumentation der Gutenberg-Komponenten auf freundliche Weise einsehen zu können.

Sie müssen nur das Menü Komponenten öffnen und dort finden Sie die Liste der Komponenten, die WordPress über das Paket @wordpress/components bereitstellt. Sie können jede React-Komponente erkunden und Anwendungsbeispiele mit ihrem vollständigen JavaScript-Code sehen.

Im folgenden Screenshot sehen Sie beispielsweise Beispiele der Button Komponente mit den unterschiedlichen Eigenschaften, die Buttons haben können. Dann haben Sie auf der Registerkarte Story den Quellcode des vollständigen Beispiels:

Darüber hinaus enthalten einige spezifische Komponenten Optionen auf der Registerkarte Knobs , um die Eigenschaften der Komponente zu ändern und eine Vorschau der Änderungen anzuzeigen, die sie in ihrer Benutzeroberfläche verursachen.

Eine dieser Komponenten ist das TextControl , mit dem ein Textfeld hinzugefügt wird. Im folgenden Screenshot sehen wir die Knob -Registerkarte mit verschiedenen Optionen, um die Bezeichnung der Komponente auszublenden oder die Texte sowohl der Bezeichnung als auch der Hilfe zu ändern. So können wir sehen, wie die Komponente mit den Änderungen aussehen wird, und entscheiden, wie wir sie in unseren React-Oberflächen verwenden möchten:

Nicht alle Komponenten des @wordpress/components -Pakets haben eine vollständige Dokumentation im Storybook, daher müssen Sie zum Komponentenpaketabschnitt auf Github gehen, um die neueste Version des Status der React-Komponenten in Gutenberg zu sehen.

Mit der Fertigstellung der Gutenberg Storybook-Dokumentation wird sie jedoch für Entwickler immer interessanter. Eine Dokumentation dieser Art in WordPress zu haben, ist ein Luxus. Ihr Nutzen steht außer Diskussion.

Sie haben bereits alles gesehen, was die React-Komponenten von Gutenberg für Ihre WordPress-Entwicklungen bieten können. Anstatt das Rad neu zu erfinden und eigene Basiskomponenten zu entwickeln, werfen Sie zuerst einen Blick auf die React-Komponenten von Gutenberg, um Konsistenz mit dem Rest der WordPress-Oberfläche zu erreichen und Entwicklungs- und Wartungszeit zu sparen. Die Wiederverwendung von Software ist der Schlüssel, um als WordPress-Entwickler effizienter zu sein.

Vorgestelltes Bild von Morning Brew auf Unsplash.