Eigenen Block immer in voller Breite im Editor einfügen

Normalerweise werden Blöcke alle in derselben Standard-Breite in den Gutenberg-Editor eingefügt. Abhängig vom Block und davon, ob das Theme es unterstützt, gibt es noch die Möglichkeit eine weite oder die volle Breite zu aktivieren, damit der Block im Frontend über die normale Inhaltsbreite hinausgeht.

In einem Projekt hatte ich den Fall, dass ein eigener Block immer über die gesamte Breite gehen sollte, ohne Änderungsoption für den User. Im Frontend habe ich einfach entsprechend das Styling angepasst, aber im Backend sind ein paar weitere Anpassungen notwendig, da bei einem Full-Align-Block die Controls zum Umsortieren nicht links neben dem Block dargestellt werden, sondern darüber.

Um dieses Verhalten nachzustellen, habe ich dem Block das align-Attribut fest mit dem Wert full zugewiesen und dem Block-Container im Backend ein data-align="full" mitgegeben. Dafür ist der folgende Code im registerBlockType()-Objekt notwendig:

attributes: {
	align: {
		type: 'string',
		default: 'full',
	}
},
getEditWrapperProps() {
	return {
		'data-align': 'full',
	};
},
Code-Sprache: JavaScript (javascript)

Das funktioniert so natürlich nur für selbst erstellte Blöcke (der alignfull-Klassenname für das Frontend wird hierbei nicht automatisch erzeugt).

Um das auch für Core- und Drittanbieter-Blocks umzusetzen, bei denen wir das registerBlockType()-Objekt nicht direkt verändern können, können wir den blocks.registerBlockType-Filter nutzen, wie in dem folgenden Code-Beispiel:

const modifyDefaultAlignment = ( settings, name ) => {
	if ( name !== 'core/media-text' ) {
		return settings;
	}
	const newSettings = {
		...settings,
		attributes: {
			...settings.attributes,
			align: { type: 'string', default: 'full' },
		},
	};
	return newSettings;
};
wp.hooks.addFilter(
	'blocks.registerBlockType',
	'textdomain/change-media-text-default-alignment',
	modifyDefaultAlignment,
);
Code-Sprache: JavaScript (javascript)

Der Code prüft auf den core/media-text-Block und fügt, wenn wir einen davon haben, den Einstellungen das align-Attribut mit dem Standardwert full hinzu. Das funktioniert nur, wenn das Theme den add_theme_support( 'align-wide' );-Aufruf enthält.