Gutenberg: Core-Block mit Element umschließen

Gestern stand ich vor dem Problem, dass der Tabellen-Block in Gutenberg im Frontend nicht von einem div umschlossen wird, sondern direkt als table ausgegeben wird. An sich natürlich super, dass da kein überflüssiges Markup rauskommt – für meine Lösung, um die Tabelle responsive zu bekommen, brauche ich aber ein Wrapper-Element. Hier zeige ich, wie sich Core-Blöcke mit einem Element umschließen lassen.

Gutenberg kommt mit verschiedenen Filtern, die es ermöglichen, Dinge an den Core-Blöcken anzupassen. Einer davon ist blocks.getSaveElement, womit das Ergebnis der save-Funktion eines Blocks verändert werden kann.

Auf gut Glück habe ich einfach mal versucht, dieses Element für Tabellen-Blöcke innerhalb eines div zurückzugeben, und leicht überrascht musste ich feststellen: das funktioniert 🙂

So sieht der Code dafür aus:

wp.hooks.addFilter(
	'blocks.getSaveElement',
	'slug/modify-get-save-content-extra-props',
	modifyGetSaveContentExtraProps
);

/**
 * Wrap table block in div.
 * 
 * @param {object} element 
 * @param {object} blockType 
 * @param {object} attributes 
 * 
 * @return The element.
 */
function modifyGetSaveContentExtraProps( element, blockType, attributes  ) {
	// Check if that is not a table block.
	if (blockType.name !== 'core/table') {
		return element;
	}

	// Return the table block with div wrapper.
	return (
		<div className='table-wrapper'>
			{element}
		</div>
	);
}

Zunächst hängen wir über wp.hooks.addFilter unsere Funktion modifyGetSaveContentExtraProps in den blocks.getSaveElement-Filter ein. Innerhalb der Funktion prüfen wir, ob wir etwas anderes als einen Tabellen-Block haben und geben für diese Fälle das element unverändert zurück.

Im Fall eines Tabellen-Blocks umschließen wir dieses Element innerhalb des return-Statements mit einem div und haben jetzt im Frontend ein Wrapper-div um Tabellen-Blöcke 🎉

Damit das funktioniert, muss das Skript natürlich so eingebunden werden, dass Gutenberg es mitbekommt. In einem Plugin kann das beispielsweise so aussehen:

add_action( 'enqueue_block_editor_assets', 'slug_enqueue_block_editor_assets' );

/**
 * Register the block.
 */
function slug_enqueue_block_editor_assets() {
	wp_enqueue_script(
		'slug-gutenberg-block-editor-script',
		plugins_url( 'assets/js/editor.blocks.js', __FILE__ ),
		[ 'wp-blocks', 'wp-element', 'wp-edit-post' ]
	);
}

Das könnte auch interessant sein

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.