Fügen Sie mit PluginDocumentSettingPanel Steuerelemente zur Beitragsseitenleiste hinzu

Bisher haben wir uns die Block-Seitenleiste angesehen, indem wir sie InspectorControlszu unseren benutzerdefinierten Blöcken und Steuerelementen zur Kern- und Drittanbieter-Block-Seitenleiste mit Filtern und Komponenten höherer Ordnung hinzugefügt haben. In diesem Leitfaden werden wir uns mit dem Hinzufügen von Steuerelementen zur Post-Seitenleiste befassen.

Anzeigeeinstellungen in der Beitragsseitenleiste

In diesem Leitfaden erstellen wir ein Steuerelement „Anzeigeeinstellungen”, das es nur angemeldeten Benutzern ermöglicht, den Beitrag anzuzeigen, wenn es umgeschaltet wird.

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 )
• Lesen Sie den Leitfaden Verwenden von Post-Meta-Feldern zum Speichern von Attributen im WordPress Block Editor (Gutenberg) -Leitfaden

Registrierung der Post-Meta in PHP

Bitte führen Sie die Schritte in der Anleitung zum Erstellen von Plugins aus, um uns unser erstes Plugin zu geben. Wir werden dies in unserer Anleitung erweitern.

Nachdem Sie dies getan haben, richten wir das Post-Meta ein, das wir für unsere Berechtigungsumschaltsteuerung benötigen. Öffnen Sie die Stammdatei des Plugins (in unserem Fall wholesome-plugin.php) und fügen Sie den folgenden Code hinzu:

Wenn Sie sich den Post-Meta-Felder-Leitfaden angesehen haben, sollte dieser Ihnen ein wenig bekannt vorkommen. Es ermöglicht lediglich den Zugriff auf unser Post-Meta aus dem Blockeditor (Gutenberg).

Erstellen Sie in Ihrem Plugin einen neuen Ordner mit dem Namen componentsund erstellen Sie die folgende Datei /components/Sidebar.js. Fügen Sie in dieser Datei den folgenden Code ein:

Das ToggleControlhaben wir bereits in unseren vorherigen Sidebar-Anleitungen gesehen, aber das Panel, das wir verwenden, ist etwas neu. Wir verwenden PluginDocumentSettingPanel, um zu identifizieren, dass dieses Steuerelement in der Seitenleiste des Beitrags erscheinen soll.

Beachten Sie auch, dass wir unsere Metadaten mit dem folgenden Code abrufen, anstatt Attribute einzuziehen:

const meta = select( 'core/editor' ).getEditedPostAttribute( 'meta' );
const exampleToggle = meta['_wholesomecode_wholesome_plugin_require_login'];

und wir speichern es über unsere onChangeMethode mit diesem Code:

Dadurch wird das Meta des aktuellen Beitrags aktualisiert. Es wird nicht tatsächlich gespeichert, bis wir unseren Beitrag speichern, also wird das gesamte Speichern für uns erledigt.

Es gibt noch eine letzte Sache, die wir mit unserer Post-Seitenleiste tun müssen, und das ist, sie zu registrieren. Fügen Sie am Anfang der /src/index.jsDatei Folgendes hinzu:

import { registerPlugin } from '@wordpress/plugins';
import render from './components/Sidebar';

registerPlugin(
    'wholesomecode-wholesome-plugin-sidebar',
    {
        icon: 'visibility',
        render,
    }
);

Wir sollten wirklich darüber nachdenken, die Struktur unseres Plugins so zu ändern, dass der Code, der den Block registriert, aus einer anderen Datei importiert wird, aber der Einfachheit halber werden wir dieselbe Datei verwenden.

Hier verwenden wir registerPlugin, um die Seitenleiste zu registrieren. Wir übergeben die von uns erstellte Sidebar-Komponente als Methode „render” zusammen mit einem Symbol.

Fügen Sie die Logik „Ausblenden, wenn abgemeldet” hinzu

Öffnen Sie erneut die Stammdatei des Plugins (in unserem Fall wholesome-plugin.php) und fügen Sie den folgenden Code ein. Es gibt viel bessere Möglichkeiten, dies zu tun, aber ich halte es zu Beispielzwecken kurz:

Dieser Code gibt einfach unsere 404-Vorlage und einen Status von 401 (Nicht autorisiert) zurück, wenn Toggle auf „true” gesetzt ist.

Werfen wir einen Blick auf die Post-Sidebar-Steuerelemente in Aktion.

Steuern von Berechtigungen über die Beitragsseitenleiste

In diesem Beispiel schalten wir den Schalter auf „true”, sehen unsere Seite in einem neuen (abgemeldeten) Browserfenster und sehen nach einer Aktualisierung, dass sie die 404-Seite zurückgibt, schalten sie dann auf „false”, aktualisieren und voilà, der Beitrag ist wieder sichtbar. Gutenberg-Magie!

• Schauen Sie sich an, wie Sie eine eigenständige benutzerdefinierte Seitenleiste erstellen
• 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