Verwende nicht getBlocks(), um den aktuellen Inhalt zu bekommen
Veröffentlicht: – Kommentar hinterlassen
Also ich mit dem gesamten Inhalt des Block-Editors arbeitete, bemerkte ich etwas merkwürdiges: Der getBlocks()-Selektor gab mir nicht zwingend den aktuellen Inhalt des Editors zurück. Deshalb schaute ich, wieso das so war und wie man das korrigieren kann.
Die simple Idee zu Beginn
Meine ursprüngliche Idee, den gesamten Inhalt des Editors zu bekommen, war folgende:
import { select } from '@wordpress/data';
const editorStore = select( 'core/block-editor' );
const blocks = editorStore.getBlocks();
Code-Sprache: JavaScript (javascript)Eigentlich recht simpel und gemäß des Block Editor Handbooks war es der Inhalt, den ich wollte:
Returns all block objects for the current post being edited as an array in the order they appear in the post. Note that this will exclude child blocks of nested inner block controllers.
Block Editor Handbook
Übersetzt in etwa:
Gibt alle Block-Objekte des aktuell sich in Bearbeitung befindlichen Beitrags als Array in der Reihenfolge ihres Erscheinens im Beitrag. Bedenke, dass dies Kind-Blöcke von verschachtelten inneren Block-Controllern ausschließt.
Alte Daten
Zwar bekam ich eine Liste an Blöcken, die gut aussahen, allerdings bemerkte ich etwas merkwürdiges: Jede Änderung, die ich an den Blöcken nach derem initialen Ladevorgang vornahm, war nicht Teil dieser Daten. Das heißt, dass der getBlocks-Selektor nur die Blöcke mit ihrem Inhalt während der Initialisierung des Block-Editors zurückgibt. Oder bei Blöcken, die danach hinzugefügt werden, der erste dort gespeicherte Inhalt. Jegliche Änderung, die du danach an den Inhalten vornimmst, ist nicht Teil davon.
Den aktuellen Beitragsinhalt bekommen
Es brauchte eine Weile, bis ich den richtigen Selektor mit getEditorPostContent fand. Dieser gibt den Beitragsinhalt mit allen Änderungen seit des Ladevorgangs zurück, aber es ist eine Zeichenfolge. Um stattdessen mit den Block-Objekten zu arbeiten, wie sie auch von getBlocks zurückgegeben werden, müssen wir ihn noch zu Blöcken parsen. Dafür gibt es eine Funktion in @wordpress/blocks. Demnach sieht der korrigierte Code so aus:
import { parse } from '@wordpress/blocks';
import { select } from '@wordpress/data';
const editorStore = select( 'core/editor' );
const blocks = parse( editorStore.getEditedPostContent() );
Code-Sprache: JavaScript (javascript)Fazit
Wie so oft, ist die Dokumentation des Block-Editors nicht so hilfreich wie sie es sein könnte. Und ohne Information darüber, wann die Daten, die man abruft, gesetzt werden, macht es nicht einfacher. Ohne den zurückbekommenen Inhalt genauestens zu prüfen, hätte es für mich keine Möglichkeit gegeben, zu erkennen, dass die Daten aus getBlocks nicht die neuesten Änderungen enthalten. Immerhin fühlt sich die Lösung mit dem Parsen von getEditedPostContent nicht nach einem komischen Workaround an.
Neuveröffentlichungen