WordPress Gutenberg-Blöcke deaktivieren bzw. gezielt aktivieren

Von: Jonas, Robert

Mit einer Disallow- bzw- Allowlist könnt ihr nicht gewünschte Standard-Blöcke von Gutenberg deaktivieren bzw. lediglich gewünschte Blöcke freigeben.

Aktualisiert von 2019 – 2023 Ein Kommentar

Seit WordPress 5.0 ist der Block-Editor (Gutenberg) fester Bestandteil des WordPress-Cores und liefert eine Vielzahl an Blöcken, mit denen ihr  Inhalte darstellen bzw. strukturieren könnt. Häufig bieten einzelne Blöcke jedoch ungewünschte redaktionelle Freiheiten, weshalb sie deaktiviert werden sollen. Mit Hilfe einer sog. Allowlist könnt ihr nur bestimmte Gutenberg-Blöcke zulassen und mit einer Disallowlist gezielt Blöcke entfernen.

Gutenberg-Blöcke auf die Allowlist setzen

Mit Hilfe einer Allowlist lässt sich ganz genau festlegen, welche Blöcke im Block Editor angezeigt werden sollen. Nur Blöcke die in der Allowlist vorhanden sind werden auch ausgespielt.

Um die Allowlist zu integrieren, verwenden wir den Filter »allowed_block_types«. Fügt hierfür einfach folgendes Snippet in eure functions.php oder in ein seitenspezifisches Plugin. Anschließend schreibt ihr alle Blöcke in das array(), die im Editor zur Auswahl stehen sollen. Eine Liste aller Standard-Gutenberg-Blöcke findet ihr am Ende dieses Beitrags.

function kb_allowlist_blocks() {
  return array(
    'core/heading',
    'core/paragraph',
    'core/image'
  );
}
add_filter('allowed_block_types','kb_allowlist_blocks');

Die Verwendung einer Allowlist ist empfehlenswert, wenn man genau steuern möchte, welche Blöcke zur Verfügung stehen sollen. Es werden auch Blöcke aus Plugins ignoriert, solange diese nicht explizit in die Liste aufgenommen sind.

Gutenberg-Blöcke auf die Disallowlist setzen

Wenn ihr nur einzelne Gutenberg-Blöcke ausschließen möchtet, bietet sich eine Disallowlist an. Erstellt hierzu eine JavaScript-Datei und legt diese in eurem Theme-Verzeichnis ab. Kopiert anschließend den Inhalt des folgenden Code-Beispiels in diese Skript-Datei. Über wp.blocks.unregisterBlockType könnt ihr nun die einzelnen Blöcke auswählen, die ausgeschlossen werden sollen.

wp.domReady(function() {
    wp.blocks.unregisterBlockType( 'core/heading' );
    wp.blocks.unregisterBlockType( 'core/gallery' );
});

Nachdem ihr die JS-Datei in eurem Theme abgelegt habt, bindet sie mit Hilfe der Aktion enqueue_block_editor_assets ein. Achtet darauf, den Pfad zur JS-Datei anzupassen.

function kb_disallowlist_blocks() {
  wp_enqueue_script(
    'kb_disallowlist_blocks',
    get_template_directory_uri().'/assets/js/kb_disallowlist_blocks.js',
    array('wp-blocks','wp-dom-ready','wp-edit-post')
  );
}
add_action('enqueue_block_editor_assets','kb_disallowlist_blocks');

Gutenberg-Blöcke aus Plugins berücksichtigen

Viele Plugins erweitern WordPress um eigene Blöcke, die natürlich ebenfalls auf der Disallow- bzw. die Allowlist berücksichtigt werden müssen. Hierfür benötigt ihr den »Block-Slug« (meist bestehend aus Plugin-Name und Block-Name).

Im folgenden Beispiel fügen wir beispielsweise die beiden populären Yoast-Blöcke »FAQ« und »How-to« der Allowlist hinzu.

function kb_allowlist_blocks() {
  return array(
    'core/heading',
    'core/paragraph',
    'core/image',
    'yoast/faq-block',
    'yoast/how-to-block'
  );
}
add_filter('allowed_block_types','kb_allowlist_blocks');

Liste der aktuellen Standard-Gutenberg-Blöcke

Eine Liste aller Standard-Gutenberg-Blöcke findet ihr unter anderem hier: https://github.com/WordPress/gutenberg/tree/master/packages/block-library/src

Beachtet, dass Gutenberg zusätzlich als eigenständiges Plugin weiterentwickelt wird und dadurch Asynchronität zwischen der aktuellen WordPress- und der aktuellen Gutenberg-Version bestehen kann!

Geschrieben von:

Jonas Hellwig

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Robert Menzel

Robert arbeitet als Frontend-Developer und Web-Designer bei kulturbanause. Zu seinen Aufgaben gehören die visuelle Gestaltung und die technische Umsetzung von Websites, eCommerce-Shops oder dessen Kombination. Besonders gerne übernimmt er die Entwicklung individueller und anspruchsvoller Websites mit umfangreichen ineinandergreifenden Funktionen, getreu dem Motto: »Der beste Lack bringt nichts, wenn die Maschine darunter nicht läuft.«