Wenn man nach X Jahren „Classic“ Themes in die Welt der Block-Themes eintaucht, wird man anfangs einiges vermissen. Darunter die Menüverwaltung und den Widgetbereich.

Die Menüverwaltung wird durch den Navigationsblock ersetzt. Den kann man beliebig oft einsetzen, und auch mit Untermenüs bestücken.

Der Widgetbereich wird abgelöst von Template-Parts für Header, Footer – und wenn man mag, auch Sidebar. In diesen Template-Parts kommen nun ebenfalls Blöcke zum Einsatz. Mit Hilfe von Zeilen, Spaltenlayouts, Gruppierungen und Verschachtelungen stehen Elemente zur Verfügung, die der Anordnung von Blöcken kaum noch Grenzen setzen.

Der Block-Editor ist nach wie vor nicht so weit, dass ich ganz auf Custom CSS verzichten kann. Und so hole ich mir erstmal (fast) immer das Customizer-CSS zurück:

add_action('customize_register',function ( $manager ) {}, 10, 1 );

In den Anfängen des Gutenberg-Editors hatte ich das eine oder andere Block-Plugin im Einsatz. Was sich mit WordPress-Boardmitteln machen lässt, setze ich mittlerweile bevorzugt damit um. So hat man später keinen Ärger mit ansteigenden regelmäßigen Kosten, Plugins die nicht mehr gepflegt werden, etc. etc…..

Was ich bisher am Block-Editor noch vermisse ist, Breakpoints festzulegen. Erst bei 600px die Haupt-Navigation auf mobile Ansicht umzustellen ist für meine Zwecke zu niedrig angesetzt. Das Menü sollte ja günstigerweise nicht breiter sein als der festgelegte Breakpoint, damit es nicht umbricht, bevor es auf mobile Navigation umstellt. Wenn das passiert, gibt das umgebrochene Menü kein schönes Bild.

In den Menüeinstellungen für das Hauptmenü ist festgelegt, dass bei Mobiles auf Overlay und Menübutton umgestellt werden soll.

Vielleicht wird man eines Tages auch Breakpoints in den Layout-Einstellungen bestimmen können (obwohl sie nicht als CSS-Variablen geführt werden können). Bis es eventuell so weit ist, lässt sich der Breakpoint des Menüs per CSS jedoch relativ einfach korrigieren. Den Wert 768px einfach durch den gewünschten ersetzen.

@media (min-width: 600px) {
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
  		display: none;
	}
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
  		display: block;
	}
}


@media (min-width: 768px) {
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {	
		display: block;
	}
	
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none;
	}
}