So steuern Sie Gutenberg-Blöcke für Beiträge in WordPress: Deaktivieren Sie Blöcke und Blockvorlagen

Der neue WordPress-Editor Gutenberg gibt dem Autor eine große Flexibilität, um reichhaltige Inhalte zu erstellen. Aber in einigen Fällen müssen Sie dies möglicherweise ein wenig einschränken, entweder als Website-Webmaster oder als Theme-Entwickler. In diesem Beitrag sehen wir uns an, wie wir Blockbeschränkungen in Gutenberg mit PHP bereitstellen können.

Es gibt integrierte Funktionen, um einige Einschränkungen in Blöcken festzulegen, mit denen viele noch nicht vertraut sind. Dies kann nützlich sein, wenn Sie möchten, dass bestimmte Beiträge demselben Design oder Inhalt folgen, oder wenn Sie nicht-technischen Autoren helfen möchten, nicht von der Anzahl der Blöcke in Gutenberg überwältigt zu werden. Ein weiteres Beispiel ist das automatische Hinzufügen der erforderlichen Werbeblöcke (wenn Sie ein Werbe-Plug-in haben) zwischen Texten in Beiträgen. Sie können dies entweder erzwingen oder diese Techniken verwenden, um den Autoren zu helfen, daran zu denken, sie hinzuzufügen.

In diesem Beitrag sehen wir uns zwei Möglichkeiten an, wie Sie Blöcke in WordPress Gutenberg steuern können. Eine Möglichkeit besteht darin, einzuschränken, welche Art von Blöcken hinzugefügt werden können. Mit anderen Worten, entfernen Sie bestimmte Blocktypen, die Sie nicht verfügbar haben möchten. Wir können dies spezifisch nach Beitragstyp oder global tun. Der andere Weg ist die Verwendung von Blockvorlagen. WordPress bietet Ihnen die Möglichkeit, eine Reihe vordefinierter Blöcke festzulegen, wenn Sie einen neuen Beitrag erstellen. Dies erfolgt pro Beitragstyp. Mit Blockvorlagen können Sie dem Autor die anfänglichen Blöcke anbieten, um ihm beim Schreiben des Beitrags zu helfen, oder Sie können die Blöcke an Ort und Stelle sperren, damit der Autor seine Position nicht ändern oder neue hinzufügen kann.

Sie können beides entweder mit PHP oder Javascript tun. Diese Anleitung behandelt den PHP-Weg.

Blocktypen entfernen

Schwarze Liste

Es gibt einen PHP-Filter in WordPress namens allowed_block_types. Dieser Filter gibt Ihnen zwei Parameter; ein Array aller Blöcke und das Post-Objekt. Alles, was wir tun müssen, ist das Array zu verwalten, bevor wir es zurückgeben. Und da wir auch das Beitragsobjekt im Filter erhalten, können wir auch Regeln nach Beitragstyp oder anderen Beitragsmetainformationen hinzufügen.

Das Array von Blöcken besteht aus Zeichenfolgen der Namespace-Namen des Blocks. Alle Blöcke in WordPress erfordern einen vorangestellten Namensraum vor dem Blocknamen. Für WordPress-Core-Blöcke ist der Namespace „ core/” und für WordPress-Embed-Blöcke ist der Namespace „ core-embed/“. Zum Beispiel hat der Heading-Block core/headingin diesem Array den Namen „ “. Eine vollständige Übersicht über die Namen aller Blocktypen habe ich in meinem Post zum Thema „ Wie ” erstellt um auf die Blöcke eines Beitrags zuzugreifen und diese zu parsen.

Hier ist ein kurzes Beispiel für die Verwendung des Filters, um alle Blöcke außer dem Absatz zu entfernen. Dies gilt für alle Beitragstypen.

add_filter('allowed_block_types', function($block_types, $post) {
    return ['core/paragraph'];
}, 10, 2);

Wenn Sie diesen Code in die Datei Ihres Designs functions.phpoder Plugins einfügen, ist das Ergebnis, dass Gutenberg alle anderen Blöcke als Absatz vollständig verbietet. Sie können keine anderen Blöcke sehen, Sie können auch nicht versuchen, sie herauszulocken, indem Sie „ /” in den Beitrag eingeben (Blockverknüpfung) oder nach ihnen suchen.

Wir können die Blöcke, die wir behalten oder entfernen möchten, nach Beitragstyp definieren. Wir überprüfen einfach die Eigenschaft post_typeauf dem Post-Objekt. Im folgenden Codebeispiel definieren wir ein neues Array der Blöcke, die wir zulassen möchten, und fügen diese Regel nur für den benutzerdefinierten Beitragstyp „ book” hinzu.

Mit dem obigen Code erhalten Sie alle Blöcke beim Bearbeiten von Beiträgen und Seiten, aber beim Bearbeiten des benutzerdefinierten Beitragstyps „ book” können Sie nur Absätze, Überschriften und einzelne Bilder hinzufügen.

Verwenden Sie Ihre Fantasie, um Ihre eigenen Regeln hinzuzufügen. Da wir das Post-Objekt haben, können wir auf die meisten Informationen zugreifen, die wir benötigen würden. Vielleicht müssen Sie die Blockauswahl durch einen Post-Meta-Wert einschränken? Zum Beispiel nach gewählter Seitenvorlage, gewählter Beitragskategorie oder etwas anderem.

Weiße Liste

Soweit ich sehen kann, können Sie nur Blöcke auf die Whitelist setzen (entscheiden, welche entfernt werden sollen, anstatt zu entscheiden, welche beibehalten werden sollen), indem Sie die Registrierung der Blöcke an einem bestimmten Punkt aufheben. Und Sie haben es mit Javascript und nicht mit PHP zu tun.

Ich werde darauf nicht näher eingehen, aber Sie müssen eine Javascript-Datei in die Warteschlange einreihen initoder einhaken enqueue_block_editor_assets, mit wp-dom-readyund wp-blocksals Abhängigkeit. Innerhalb des Skripts können Sie eine Variable derjenigen einrichten, die Sie entfernen möchten, wobei Sie die gleichen Regeln für Namespaces und Blocknamen oben befolgen. Und für jeden Blocknamen rufen Sie die Funktion unregisterBlockType()aus dem wp.blocksPaket auf. Normalerweise müssten Sie dies innerhalb einer Funktion tun wp.domReady(), um sicherzustellen, dass die Ladereihenfolge des Skripts korrekt ist.

Etwas wie das:

var removeBlocks = [
    'core/paragraph',
    'core/heading',
    'core/image'
];
 
wp.domReady(function() {
    removeBlocks.forEach(function(blockName) {
        wp.blocks.unregisterBlockType(blockName);
    });
});

Das Entfernen von Blocktypen ist eine Möglichkeit, Blöcke in Gutenberg zu kontrollieren. Schauen wir uns die andere, vielleicht unterhaltsamere Möglichkeit an, Blöcke zu steuern: Blockvorlagen.

Vorlagen blockieren

Eine andere Möglichkeit, Gutenberg-Blöcke in WordPress zu steuern, ist die Verwendung von Blockvorlagen. WordPress verfügt über Funktionen, mit denen Sie neue Beiträge mit einer Reihe vordefinierter Blöcke füllen können. Dies kann nützlich sein, um Autoren zu helfen, indem ihnen ein Vorschlag für eine Blockstruktur angezeigt wird. Sie können diese vorab ausgefüllten Blöcke auch sperren, sodass die Autoren keine neuen Blöcke neu anordnen oder hinzufügen können. Dies ist nützlich, wenn Sie möchten, dass Beiträge eine bestimmte Struktur und ein bestimmtes Design haben – zum Beispiel um sicherzustellen, dass alle Beiträge dieses Beitragstyps ihre Informationen genau gleich strukturiert haben.

Wir können Blockvorlagen mit einem neuen Parameter zu der [register_post_type](https://developer.wordpress.org/reference/functions/register_post_type/)()Funktion hinzufügen, die zum Registrieren benutzerdefinierter Beitragstypen verwendet wird (Hinweis: Der neue Parameter wurde noch nicht zur Dokumentation hinzugefügt). Sie können die Parameter auch zu bestehenden Beitragstypen wie Beiträgen und Seiten hinzufügen oder anpassen – siehe unten, wie.

Der neue Parameter für register_post_type()ist ‘ template‘. Als Wert für ‘ template‘ müssen Sie ein Array von Blöcken angeben. Jeder Block muss auch ein Array sein. Als Minimum müssen Sie das erste Array-Element angeben; den Blocknamen (z. B. core/paragraph). Sie können optional ein zweites Array-Element für Attribute und ein drittes Array-Element für verschachtelte Blöcke (z. B. Cover, Columns-Blöcke) hinzufügen. Es wird klarer, wenn Sie den Code sehen.

Fangen wir einfach an. Angenommen, wir haben einen register_post_type()Funktionsaufruf, um einen benutzerdefinierten Beitragstyp „ book” zu registrieren. Wir möchten alle neuen Beiträge dieses Beitragstyps mit einem Absatzblock mit einem Platzhalter vorbelegen, der dem Autor sagt, was er oder sie schreiben soll.

Beachten Sie, dass das Attribute-Array (mit ‘Platzhalter’ darin) optional ist. Mit diesem „Vorlagen”-Parameter wird jetzt jedes Mal, wenn wir neue Beiträge erstellen, ein Absatzblock mit dem Platzhalter „Schreiben Sie hier Ihr Intro …” erstellt.

Schauen wir uns ein komplizierteres Beispiel an: verschachtelte Blöcke. Angenommen, wir möchten einen Cover-Block hinzufügen, der einen Überschriftenblock, einen Absatz und eine Schaltfläche enthält, die in der Mitte ausgerichtet sind. Der Titel und der Absatz haben einen Platzhalter:

Das Bild unten zeigt, was wir erhalten, wenn wir neue Buchbeiträge erstellen. Es sieht weniger einschüchternd aus als eine leere Leinwand, oder?

Beachten Sie, dass die Attribute in jedem Blocktyp unterschiedlich sind und sich auch in Ihrem Setup unterscheiden können. Im obigen Codebeispiel füge ich dem Cover-Block zwei Attribute hinzu; blockieren Sie die Ausrichtung auf „Volle Breite” und überlagern Sie die Farbe mit einer vordefinierten Farbe aus einer benutzerdefinierten Farbpalette.

Die Blockausrichtungen „Wide Width” und „Full Width” müssen in Ihrem Theme ausdrücklich unterstützt werden. Ich habe einen Beitrag, der erklärt, wie Sie Ihrem Design Unterstützung für zusätzliche Blockausrichtungen hinzufügen können, wenn Sie damit nicht vertraut sind. Zweitens stellt mein Thema eine benutzerdefinierte Gutenberg-Farbpalette bereit, in der eine der Palettenfarben "Blue-Profile" heißt. Dies wird wahrscheinlich nicht in Ihrem Code vorhanden sein. Der obige Link erklärt dies auch, wenn Sie auch mit der benutzerdefinierten Gutenberg-Palette nicht vertraut sind.

Der Grund, warum ich mich für eine Überlagerungsfarbe als Attribut entschieden habe, ist das Verhalten des Cover-Blocks. Wenn Sie einen Cover-Block erstellen, werden Sie zunächst aufgefordert, zwischen dem Festlegen eines Hintergrundbilds oder der Auswahl einer Hintergrundfarbe zu wählen. Bis der Autor aktiv eine davon auswählt, verbirgt der Cover-Block jeglichen Inhalt (die von uns hinzugefügte Überschrift, den Absatz und die Schaltfläche)! Sie werden einfach plötzlich auftauchen, nachdem Sie ein Bild oder eine Farbe ausgewählt haben. Um Verwirrung zu vermeiden, habe ich daher eine Hintergrundfarbe vorgewählt, damit der Autor sofort alle darin enthaltenen Blöcke sieht. Die Farbe kann ohnehin immer im Inspektor (Seitenleiste) geändert werden.

Sperren der Blockvorlage

Mit der bereitgestellten Blockvorlage kann der Autor alle vorgefüllten Blöcke neu anordnen und entfernen sowie neue Blöcke hinzufügen, wo immer er möchte. Wenn Sie dies vermeiden möchten, gibt es einen weiteren Parameter für register_post_type(): ‘ template_lock‘.

Der template_lockParameter „ ” akzeptiert zwei Werte; ‘ all‘ oder ‘ insert‘.

Wenn Sie „ template_lock” auf „ all” setzen, werden die Autoren vollständig daran gehindert, Ihre Blockvorlage neu anzuordnen, zu entfernen oder neue Blöcke hinzuzufügen. Sie können nur die Inhalte und Einstellungen der als Blockvorlage definierten Blöcke bearbeiten. Dies ist nützlich, wenn Sie möchten, dass alle Beitragstypen aus denselben Blöcken in derselben Reihenfolge bestehen – nicht mehr und nicht weniger.

Die Verwendung von „ insert” für „ template_lock” ermöglicht es den Autoren, die Blöcke in der Blockvorlage neu anzuordnen. Aber die Autoren können immer noch keine neuen Blöcke hinzufügen oder Blöcke löschen.

So würden Sie die Blockvorlage für den benutzerdefinierten Beitragstyp „ book” vollständig sperren:

Die Verwendung einer gesperrten Blockvorlage in Gutenberg sieht wie folgt aus. Beachten Sie, dass die Aktionssymbole zum Neuanordnen von Blöcken sowie zum Entfernen von Blockverknüpfungen im Menü fehlen. Es gibt auch keine Aktionssymbole zum Hinzufügen neuer Blöcke (das kleine „+”).

Anpassen von Blockvorlagen für vorhandene Beitragstypen

Wenn Sie Blockvorlagen für Beiträge oder Seiten verwenden möchten, können Sie dies ebenfalls tun. Hängen Sie eine Funktion an initund verwenden Sie [get_post_type_object](https://developer.wordpress.org/reference/functions/get_post_type_object/)(). Geben Sie den gewünschten Beitragstyp als Parameter an (entweder ‘ post‘ oder ‘ page‘). Dies gibt ein Objekt zurück, dem Sie die Eigenschaften ‘ template‘ und ‘ template_lock‘ zuweisen können.

Dies ist ein Beispiel für das Hinzufügen derselben Blockvorlage und Sperreigenschaft wie oben auf Seiten:

Fazit

In diesem Beitrag haben wir gelernt, wie man eine bessere Kontrolle über Blöcke im WordPress Gutenberg-Editor erreicht. Dies hat viele Vorteile, insbesondere in Kombination mit benutzerdefinierten Beitragstypen, die einer bestimmten Struktur folgen müssen. Die Verwendung der oben genannten Techniken hilft Ihnen dabei, Ihren Prozess sowohl als Webmaster (der Leuten hilft, bessere Posts zu schreiben) als auch als Theme-Entwickler (der ein gemeinsames Design sicherstellt) zu rationalisieren. Gesperrte Blockvorlagen sind möglicherweise eine andere Lösung als benutzerdefinierte Postvorlagen und Post-Meta.

Das Anpassen von Blockvorlagen ist derzeit noch eine ziemlich versteckte Funktion von Gutenberg. Aber ich gehe davon aus, dass es sich ändern wird, wenn sich Gutenberg weiterentwickelt und einen vertrauteren Platz in WordPress bekommt.