Erstellen Sie eine benutzerdefinierte Seitenleiste mit PluginSidebar

Wir haben uns benutzerdefinierte Block-Seitenleisten, Block-Seitenleisten von Drittanbietern über InspectorControls und das Hinzufügen von Steuerelementen zur Post-Seitenleiste angesehen. In diesem Handbuch werden wir uns ansehen, wie wir unsere Steuerelemente in ihre eigene benutzerdefinierte Seitenleiste einfügen.

Unsere benutzerdefinierte Seitenleiste

Der obige Screenshot zeigt, was wir bauen werden. Zum größten Teil werden wir den Code, den wir in der Post Sidebar-Anleitung erstellt haben, nur geringfügig ändern. Stellen Sie also sicher, dass Sie diese Anleitung zuerst abgeschlossen haben.

Voraussetzungen

• Habe die Anleitung zum Erstellen eines Plugins für den WordPress-Blockeditor (Gutenberg) befolgt
• Lesen Sie die vorherigen Anleitungen zur Seitenleiste (Seitenleiste für einen benutzerdefinierten Block und Seitenleiste für einen vorhandenen Block )
• Habe die Anleitung zum Hinzufügen von Steuerelementen zur Post-Sidebar mit PluginDocumentSettingPanel befolgt

Wir werden den Code aus dem Post-Sidebar-Leitfaden verwenden. Wenn Sie diesen Leitfaden also noch nicht abgeschlossen haben, tun Sie dies bitte. Es ist ok, ich werde warten.

Öffnen Sie die /components/Sidebar.jsDatei, die Sie im vorherigen Handbuch erstellt haben. Wir ersetzen die Zeile, die das importiert, PluginDocumentSettingPaneldurch den folgenden Code:

import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/edit-post';

Jetzt das Markup <PluginDocumentSettingPanel...durch ersetzen <PluginSidebar...und fertig! Recht?

Nun, ja und nein. Das gibt uns eine Seitenleiste, aber es ist hässlich! Wir brauchen einige Panels, damit die Steuerelemente richtig formatiert sind.

Außerdem fehlt die Seitenleiste im Menü „Optionen”. Um dies zu lösen, müssen wir implementieren PluginSidebarMoreMenuItem.

Bearbeiten Sie /components/Sidebar.jserneut und fügen Sie den folgenden Code ein:

Das ist besser, wir haben genau den gleichen Code wie in unserem vorherigen Post-Sidebar-Beispiel verwendet, aber jetzt sieht es so aus.

Jetzt, da wir unseren Code an Ort und Stelle haben, vergessen Sie nicht, ihn auszuführen npm start, um ihn zu kompilieren, und er sollte jetzt wie folgt aussehen:

Unsere benutzerdefinierte Seitenleiste in Aktion

Wie in unserer Plugin-Seitenleisten-Anleitung schalten wir den Schalter zum Erfordernis der Anmeldung um, aktualisieren einen abgemeldeten Beitrag, schalten ihn wieder aus und aktualisieren den Beitrag erneut. Wenn umgeschaltet, können wir nicht auf den Beitrag zugreifen.

Der Name unserer Seitenleiste ist wholesomecode-wholesome-plugin-sidebar'. Wenn wir möchten, können wir diese Seitenleiste automatisch von einer anderen Stelle im Editor öffnen und schließen. Nehmen wir an, wir haben eine Schaltfläche mit einer Klickaktion, die dies tut.

Der Code zum dynamischen Öffnen der Seitenleiste lautet wie folgt:

wp.data.dispatch('core/edit-post').openGeneralSidebar( 'wholesomecode-wholesome-plugin-sidebar/wholesomecode-wholesome-plugin-sidebar' );

Ebenso können wir die Seitenleiste wie folgt dynamisch schließen:

wp.data.dispatch('core/edit-post').closeGeneralSidebar( 'wholesomecode-wholesome-plugin-sidebar/wholesomecode-wholesome-plugin-sidebar' );

• Schauen Sie sich an, wie Sie mit der Komponente verschachtelte untergeordnete Blöcke erstellenInnerBlocks
• Sehen Sie sich die Verwendung von Post-Meta-Feldern in Gutenberg-Blöcken (falls Sie dies noch nicht getan haben) und von Gutenberg-Komponenten gesteuerten benutzerdefinierten Meta-Boxen an
• Sehen Sie sich das Erstellen einer Einstellungsseite mit Gutenberg-Komponenten an