Das Problem
Ich arbeite aktuell an einem Projekt, wo ich jedem Gutenberg Block eigene Properties wie z.B. ein Hintergrundbild vergeben muss. Ich habe ein eigenes Sidebar-Element für jeden Block erstellt aber die Eigenschaften wurden nicht gespeichert.
Hierfür habe ich lange im Internet nach einer Lösung gesucht aber es gab keine eindeutige Erklärung. Deswegen habe ich mir gedacht, dass es wichtig wäre, mein Learning mit euch zu teilen, damit ihr bei Schwierigkeiten das sofort einsetzen könnt.
Die Lösung: Block Filters
Jedes Attribut, die man einem Block-Element zugewiesen hat, muss bereits bei der Registrierung des Blockes angegeben werden. Nachträglich hinzugefügte Attribute werden nicht gespeichert. Diese werden zwar beim Speichern der Seite übernommen aber wenn man dann das Backend neu ladet, wird ein validierungs-Fehler ausgegeben und die entsprechenden Blöcke werden nicht gerendert.
Dieses Problem kann man lösen, indem man die Gutenberg Filterfunktion nutzt. Dadurch hat man die Möglichkeit, allen gewünschten Blöcken, Attribute zu injizieren. Im Nachfolgenden Beispiel injiziere ich jedem Block das Attribut background_image:
wp.hooks.addFilter('blocks.registerBlockType', 'custom/filter', function(blockOptions) {
if(blockOptions.hasOwnProperty('attributes')) blockOptions.attributes.background_image = {
type: 'string',
default: ''
};
return blockOptions;
});