Blöcke über JavaScript bearbeiten und löschen

Gutenberg bietet uns mit dem Data Modul die Möglichkeit Blöcke im Editor zu bearbeiten.

Auf das Data Modul, können wir über wp.data zugreifen.

Dieses Modul enthält verschiedene Funktionen von denen wir hier zwei näher anschauen werden. Wir benötigen wp.data.select() zum Auslesen des Ist-Zustands der Blöcke und wp.data.dispatch() zum ausführen von Aktionen, z. B. zum Löschen oder Bearbeiten eines Blocks.

Das Data Modul ist aufgeteilt in verschiedene Data Stores, die jeweils den Status eines bestimmten Bereichs von Gutenberg verwalten.

Da wir zum Erstellen, Bearbeiten und Löschen von Blöcken den core/editor Data Store benötigen, verwenden wir also wp.data.select('core/editor') bzw. wp.data.dispatch('core/editor').

Bevor wir Blöcke bearbeiten können, müssen wir in der Regel erst den aktuell Zustand der Anwendung kennen.

Selectors

Über die wp.data.select('core/editor')erhalten wir Zugriff auf alle wichtigen Funktionen (Selectors) mit denen wir den aktuellen Zustand der im Editor vorhanden Blöcke auslesen können.

Eine Übersicht aller verfügbaren Funktionen findest du im Gutenberg Handbook

Alle Blöcke ausgeben

wp.data.select( 'core/editor' ).getBlocks();Code-Sprache: JavaScript (javascript)

Mit der getBlocks(); Funktion erhalten wir alle im Editor vorhanden Blöcke in einem Array zurück.

Beispiel Rückgabewert:

0:
    attributes:
        content: "Gutenberg bietet uns mit dem <a href="https://developer.wordpress.org/block-editor/data/">Data Modul</a> die Möglichkeit, Blöcke die sich sich im Editor befinden, zu manipulieren."
        dropCap: false
        __proto__: Object
    clientId: "1d066448-190b-4f0a-a495-b43ece88966d"
    innerBlocks: Array(0)
        length: 0
        __proto__: Array(0)
    isValid: true
    name: "core/paragraph"
    originalContent: "<p>Gutenberg bietet uns mit dem <a href="https://developer.wordpress.org/block-editor/data/">Data Modul</a> die Möglichkeit, Blöcke die sich sich im Editor befinden, zu manipulieren.</p>"
    __proto__: Object
1:
    attributes:
        content: "Das Data Modul basiert auf redux, einer JavaScript Bibliothek zur Verwaltung Zustandsinformationen in einer Webanwendung."
        dropCap: false
        __proto__: Object
    clientId: "1bfbdffa-ad42-4518-8b90-1878df58236f"
    innerBlocks: Array(0)
        length: 0
        __proto__: Array(0)
    isValid: true
    name: "core/paragraph"
    originalContent: "<p>Das Data Modul basiert auf redux, einer JavaScript Bibliothek zur Verwaltung Zustandsinformationen in einer Webanwendung.</p>"
        __proto__: Object
…
6:
    attributes:
        content: "Selectors"
        level: 2
        __proto__: Object
    clientId: "4eba91d3-9343-4e09-8939-07bd26f89c9d"
        innerBlocks: Array(0)
        length: 0
        __proto__: Array(0)
    isValid: true
    name: "core/heading"
    originalContent: "<h2>wp.data.select('core/editor')</h2>"
    __proto__: ObjectCode-Sprache: JavaScript (javascript)

Bei den hier zu sehenden Daten, ist besonders die Client ID zu beachten. Jeder Block erhält beim Einfügen in den Editor eine individuelle ID.

z.B. „167affeb-c437-4a6f-b0e2-71b2fc68a617“

Diese ID benötigen wir später um die Blöcke zu bearbeiten.

Selektierten Block ermitteln

Um zu ermitteln ob ein Block gerade selektiert ist, verwenden wird die Funktion

wp.data.select('core/editor').isBlockSelected(clientId);Code-Sprache: JavaScript (javascript)

Der Funktion übergeben wir die gerade erwähnte clientId als Paramerter. Als Rückgabewert erhalten wir entweder true, wenn der Block gerade im Editor selektiert ist, oder false wenn er es nicht ist.

Actions

Über wp.data.select('core/editor')erhalten wir Zugriff auf Funktionen, mit denen wir die Blöcke im Editor bearbeiten können.

Mit diesen Funktionen können wir Blöcke löschen, bearbeiten, einfügen und ersetzen. Eine Über alle verfügbaren Funktionen findest du in Gutenberg Handbook

Einen Block löschen

Um einen Block zu löschen verwenden wir die Funktion removeBlock( clientId )

wp.data.dispatch( 'core/editor' ).removeBlock( clientID );Code-Sprache: JavaScript (javascript)

Als Parameter übergeben wir der Funktion die oben genannte Client ID des zu löschenden Blocks.

Block Attribute bearbeiten

wp.data.dispatch( 'core/editor' ).updateBlockAttributes( id, attributes )Code-Sprache: JavaScript (javascript)

Mit der updateBlockAttributes Funktion können wir die Attributes eines Blocks bearbeiten. Die Funktion benötigt zwei Parameter, die Block ID und die Attribute die wir ändern möchten.

Um die Ebene einer Überschrift (h1,h2,h3,etc) zu ändern verwenden wir folgenden Code:

const { dispatch } = wp.data;

dispatch( 'core/editor' ).updateBlockAttributes(
	"80a3889a-680e-44fe-9fa5-813e8d5b59be",
	{level:3}
);Code-Sprache: JavaScript (javascript)

Um den Inhalt eines Absatz-Blocks zu ändern verwenden wir folgenden Code:

const { dispatch } = wp.data;

dispatch( 'core/editor' ).updateBlockAttributes(
	"242d7a78-1047-47af-9dc9-83c32809b2a4", 
	{content:'Lorem Ipsum …'}
);Code-Sprache: JavaScript (javascript)

Blöcke einfügen

Blöcke können wir über die Funktion: insertBlock( block, index, rootClientId, updateSelection) eingefügt werden.

wp.data.dispatch('core/editor').insertBlock()Code-Sprache: JavaScript (javascript)

Wie genau diese Funktion verwendet wird, werde ich in einem kommenden Beitrag erklären