WordPress 5.9: Button-Ausrichtung als Klasse wieder hinzufügen

Mit WordPress 5.9 wird die Ausrichtung der Buttons innerhalb des Buttons-Blocks nicht mehr als Klasse angegeben, sondern als CSS dynamisch generiert. Dieses generierte CSS wird dann innerhalb eines <style>-Tags auf die Seite geschrieben und der jeweilige Button erhält eine einzigartige Klasse im Format wp-container-<id>.

Damit ist es für individuelles Styling praktisch nicht mehr möglich, eine Formatierung anhand der Button-Ausrichtung vorzunehmen, weil der Indikator dafür fehlt.

In meinem Fall ist das beispielsweise problematisch, weil ich dafür sorgen muss, dass mehrere hundert Websites mit ihrem aktuellen individuellen CSS auch nach einem Upgrade auf WordPress 5.9 noch genau so aussehen wie bisher. Und da ist das Entfernen von Klassen natürlich sehr problematisch.

Daher habe ich etwas herumgesucht und musste feststellen, dass man an die entsprechende Ausrichtungs-Klasse gar nicht mehr so einfach kommt, um sie wieder hinzuzufügen. Geschafft habe ich es glücklicherweise dennoch mit folgender Lösung:

/**
 * Add justification class name to buttons after WordPress 5.9.
 * 
 * @param	string	$block_content Block content
 * @param	array	$block Block data
 * @return	string Updated block content
 */
function my_buttons_add_justification( $block_content, $block ) {
	$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
	$default_block_layout = _wp_array_get( $block_type->supports, [ '__experimentalLayout', 'default' ], [] );
	$used_layout = isset( $block['attrs']['layout'] ) ? $block['attrs']['layout'] : $default_block_layout;
	
	if ( ! empty( $used_layout['justifyContent'] ) ) {
		$block_content = str_replace( 'class="wp-block-buttons', 'class="wp-block-buttons is-content-justification-' . $used_layout['justifyContent'], $block_content );
	}
	
	return $block_content;
}

add_filter( 'render_block_core/buttons', 'my_buttons_add_justification', 10, 2 );Code-Sprache: PHP (php)

Blöcke haben mittlerweile ein Layout gespeichert (sofern sie Layout-Einstellungen unterstützen). Dieses Layout hole ich mir in den Zeilen 9–11 auf dieselbe Weise, wie das auch der WordPress Core tut.

Ist hier dann eine Ausrichtung gespeichert, füge ich diese als Klasse wieder hinzu. Das mache ich für alle Blöcke vom Typ core/buttons über den entsprechenden Filter.

Damit reiht sich diese Funktion in die Kategorie „zurückbringen, was der Block-Editor mal hatte und wieder verlor“ ein. Für mich hieß WordPress bisher vor allem immer eines: Stabilität. So schön ich den Block-Editor finde und ihn auch gerne verwende, so viel Arbeit macht er mir auch, da hier sehr viele Dinge hinzukommen und irgendwann wieder verschwinden, aber nicht einmal sauber dokumentiert werden, sodass man davon nicht erst im Live-Betrieb davon mitbekommt (und ja, es gibt ein Testsystem, aber auch das kann nicht alle Fälle immer direkt aufzeigen).