Fügen Sie der Core- und Third-Party-Block-Sidebar Steuerelemente mit Filtern und Komponenten höherer Ordnung hinzu

In unserem letzten Leitfaden haben wir uns mit dem Hinzufügen InspectorControlszu unseren benutzerdefinierten Blöcken befasst, damit wir Steuerelemente in der Block-Seitenleiste verwenden können. In diesem Leitfaden werden wir darauf aufbauen und der Block-Seitenleiste aller unserer Blöcke, einschließlich aller Kern- und Drittanbieter-Blöcke, die wir verwenden, eine Umschaltsteuerung hinzufügen.

In diesem Leitfaden werden wir die „Entwurfsblock”-Funktionalität erstellen, die in meinem Wholesome Publishing -Plug-in enthalten war .

Voraussetzungen

• Habe die Anleitung zum Erstellen eines Plugins für den WordPress-Blockeditor (Gutenberg) befolgt
• Habe die Anleitung Hinzufügen einer Seitenleiste zu deinem benutzerdefinierten WordPress-Block mit InspectorControls befolgt

Bereiten Sie sich auf diesen Leitfaden vor

Wenn Sie die Anleitung zum Hinzufügen einer Seitenleiste befolgt haben, großartig. Aber ich muss Sie jetzt bitten, die Änderungen rückgängig zu machen, die Sie in Schritt 4 dieser Anleitung (dem Umschalten des Entwurfsblocks) vorgenommen haben, da wir diese Funktionalität extrapolieren und auf alle unsere Blöcke anwenden werden.

Wenn Sie dieser Anleitung nicht gefolgt sind, stellen Sie bitte sicher, dass Sie sie zuerst bis Schritt 4 befolgen, da diese Anleitung direkt an diese anschließt.

Erstellen Sie Komponenten höherer Ordnung

Komponenten höherer Ordnung (HoC) werden in React verwendet, um eine vorhandene Komponente zu umschließen und entweder Funktionalität oder Props an diese Komponente zu übergeben. Sie werden HoCs genannt, weil sie vor der bestehenden Komponente in das DOM eingefügt werden, oder man könnte sagen in einer „höheren Ordnung”.

Wir werden zwei neue HoCs erstellen, erstellen Sie also einen neuen Ordner in Ihrem Plugin namens componentsund erstellen Sie die folgenden zwei Dateien:

• /components/withInspectorControls.js
• /components/withIsBlockDraft.js

mitInspectorControls

Öffnen /components/withInspectorControls.jsSie und fügen Sie den folgenden Code hinzu:

Sie erkennen diesen Code möglicherweise aus Schritt 4 des Sidebar-Leitfadens. Es ist so ziemlich derselbe Code, abgesehen davon, dass wir ihn in createHigherOrderComponent.

Das createHigherOrderComponentermöglicht uns den Zugriff auf BlockEditdie ursprüngliche Bearbeitungsfunktion des Blocks, den diese Komponente umschließen wird. Wir werden herausfinden, wie dies übergeben wird, wenn wir die Filter in Kürze erstellen.

withIsBlockDraft

Öffnen Sie /components/withIsBlockDraft.jsund fügen Sie den folgenden Code ein:

Dies createHigherOrderComponentermöglicht uns den Zugriff, BlockListBlockwodurch wir Attribute an den Editor-Block-Wrapper übergeben können. Wir verwenden es hier, um eine ‘draft-block’-Klasse für den Wrapper festzulegen, wenn der Draft-Block-Schalter gesetzt wurde. Dadurch wird neu erstellt, was wir zuvor in Schritt 4 der Sidebar-Anleitung zur Bearbeitungsmethode hinzugefügt hatten .

Auch hier müssen wir einen Filter einrichten BlockListBlock, damit das an dieses Steuerelement übergeben werden kann.

Richten Sie die Filter ein

Fügen Sie am Anfang der /src/index.jsDatei Folgendes hinzu:

import { addFilter } from '@wordpress/hooks';

import withIsBlockDraft from './components/withIsBlockDraft';
import withInspectorControls from './components/withInspectorControls';

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.

Filtern Sie die Attribute

Fügen Sie in derselben Datei den folgenden Code hinzu:

Dieser Filter fügt allen Blöcken im Build zusätzliche Attribute hinzu. Theoretisch könnten wir dies so filtern, dass es nur für bestimmte Blöcke gilt, aber wir werden dies für unser Beispiel nicht tun.

Wenn wir diesen Filter auf bestimmte Blöcke beschränken wollten, könnten wir das so machen:

const { attributes, name } = settings;
if ('core/paragraph' !== name) {
  return;
}

Filtern Sie die InspectorControls

/src/index.jsFügen Sie der Datei den folgenden Code hinzu:

addFilter(
    'editor.BlockEdit',
    'wholesome-plugin/block-draft-inspector',
    withInspectorControls,
);

Hier filtern wir BlockEditso, dass es an unser zuvor erstelltes HoC weitergeleitet wird.

Wenn wir diesen Filter auf bestimmte Blöcke beschränken wollten, würden wir im HoC Folgendes tun :

Filtern Sie den BlockListBlock

Schließlich fügen wir den Filter für unsere hinzu BlockListBlock:

addFilter(
    'editor.BlockListBlock',
    'wholesome-plugin/block-draft-class',
    withIsBlockDraft
);

Wenn Sie diesen Block einschränken möchten, können Sie dies wiederum im HoC tun.

Fügen Sie PHP und SCSS hinzu

Fügen Sie das Folgende hinzu, /editor.scssum unseren Entwurfsbanner hübsch aussehen zu lassen (dies kann viel besser gemacht werden, aber dies ist nur ein Beispiel).

.editor-styles-wrapper {
    .draft-block {

        border-bottom: 1px dotted #cfcfcf;
        border-left: 1px solid #cfcfcf;
        border-right: 1px solid #cfcfcf;
        margin-top: 3em;

        &::before {
            background: #cfcfcf;
            background-image: linear-gradient(45deg, #efefef 8.33%, #cfcfcf 8.33%, #cfcfcf 50%, #efefef 50%, #efefef 58.33%, #cfcfcf 58.33%, #cfcfcf 100%);
            background-size: 8.49px 8.49px;
            border-left: 1px solid #cfcfcf;
            border-right: 1px solid #cfcfcf;
            border-top: 1px solid #cfcfcf;
            color: black;
            content: 'Draft Block';
            display: block;
            font-family: monospace;
            font-size: 1rem;
            left: 0;
            padding-left: 5px;
            position: absolute;
            top: -27px;
            width: 100%;
        }

        opacity: .4;

        &.is-selected {
            opacity: .8;
        }
    }
}

Fügen Sie Folgendes zur Stammdatei des Plugins hinzu (in unserem Fall wholesome-plugin.php).

function wholesomecode_wholesome_plugin_remove_blocks_in_draft( $pre_render, $block) {

    if (is_admin()) {
        return $pre_render;
    }

    if (isset( $block['attrs']) &&
        isset( $block['attrs']['isBlockDraft']) &&
        $block['attrs']['isBlockDraft']) {
        return false;
    }

    return $pre_render;
}
add_filter( 'pre_render_block', 'wholesomecode_wholesome_plugin_remove_blocks_in_draft', 0, 2 );

Dadurch wird die Ausgabe der Entwurfsblöcke im Frontend gestoppt.

In Aktion sehen

Denken Sie daran, mit zu kompilieren, npm startund wir können jetzt jede Art von Block auf einen Entwurfsblock setzen:

Entwurfsblöcke setzen und aufheben

• 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 an
• Versuchen Sie , Steuerelemente zur Post-Seitenleiste hinzuzufügen