Wie wir Blöcke im Gutenberg Editor bearbeiten und löschen habe ich bereits in einem vergangenen Beitrag beschrieben. Heute soll es darum gehen wie wir aus HTML-Markup Blöcke erstellen und diese in den Editor einfügen können.
Mit Hilfe der Data API, können wir Blöcke in den Gutenberg Editor einfügen. Das Problem dabei ist nur, dass wir auf irgendeinem Weg die Blöcke erstellen müssen. Der einfachste Weg ist HTML Code in Blöcke umzuwandeln.
HTML in Blöcke umwandeln
Hierfür nutzen wir die Funktion wp.blocks.rawHandler()
Diese Funktion nimmt ein JavaScript Object, als Parameter entgegen.
const { rawHandler } wp.blocks;
const htmlMarkup = '<h2>My Headline</h2><ul><li>Item 1</li><li>Item 2</li></ul>';
const newBlocks = rawHandler({HTML: htmlMarkup});
Code-Sprache: JavaScript (javascript)Blöcke in den Editor einfügen
Nachdem wir jetzt in der Konstante newBlocks unsere Blöcke gespeichert haben, können wir diese in den Editor einfügen.
Mit der Action insertBlocks() können wir die Blöcke einfügen.
wp.data.dispatch('core/editor').insertBlocks(
blocks,
index,
rootClientId,
updateSelection
) Code-Sprache: JavaScript (javascript)Nur der erste Parameter ist notwendig, alle anderen sind optional.
Der erste Parameter nimmt die Blöcke, die wir gerade aus dem HTML Code generiert haben entgegen.
Der zweite Parameter index legt fest, an welcher Stelle wir die Blöcke einfügen möchten. Um die Blöcke am Anfang des Editors einzufügen verwenden wir den Index 0, um sie an der zweiten Position einzufügen verwenden wir den Index 1. Wenn wir den Parameter leer lassen, werden die Blöcke am Ende des Beitrags eingefügt.
Der Dritte Paramter rootClientId können die Blöcke in einen anderen Block, z.B. in einen Spalten-Block eingefügt werden. Hierfür muss die Client ID eines Blocks angegeben werden. (mehr Infos in meinem anderen Beitrag)
Der vierte Parameter updateSelection nimmt true oder false entgegen und regelt, ob nach dem Einfügen der Blöcke, der erste eingefügte Block selektiert sein soll oder nicht. Standard ist true.
Im gesamten sieht unser Code so aus:
const { rawHandler } = wp.blocks;
const { dispatch } = wp.data;
const htmlMarkup = '<h2>My Headline</h2><ul><li>Item 1</li><li>Item 2</li></ul>';
const newBlocks = rawHandler({HTML: htmlMarkup});
dispatch('core/editor').insertBlocks(
newBlocks,
1
);Code-Sprache: JavaScript (javascript)Weitere Funktionen im Blöcke in den Gutenberg Editor einzufügen.
Nebem der insertBlocks Action gibt es – je nach Anwendungsfalls – weitere Möglichkeiten um Blöcke in den Editor einzufügen.
- replaceBlocks() zum ersetzen/überschreiben von Blöcken
- replaceInnerBlocks() zum erstetzen/überschreiben von Child-Blöcken
- resetBlocks() um alle Blöcke im Editor zu überschreiben.
Weitere Informationen
Der core/editor Data Store im Gutenberg Handbook.
Schreibe einen Kommentar