WordPress: Block-CSS bei einem anderen Block einbinden

Seit WordPress 5.5 wird das CSS der Core-Blöcke nur noch geladen, wenn der jeweilige Block auch auf der aktuellen Seite verwendet wird. Das funktioniert wunderbar, aber was, wenn ein Core-Block verändert wird, und nun einen anderen Block beinhaltet, der vielleicht noch nicht auf der Seite vorhanden ist? Das würde zu einem ungestylten Block führen.

In meinem Fall habe ich den „Neueste Beiträge“-Block so verändert, um immer einen richtigen Button-Block als „Weiterlesen“-Link anzuzeigen (wie genau ich das gemacht habe, erfährst du im nächsten Blogartikel). Da der Button-Block hier aber nicht als Block gerendert wird, fehlt auch das Styling.

Meine Lösung dazu war, das Button-Block-CSS während der Block-Render-Funktion des „Neueste Beiträge“-Block einzubinden, was über den Filter render_block_{$this->name} so aussieht:

/**
 * Enqueue the button block style for latest posts.
 * 
 * @param   string  $block_content Block content
 * @return  string Updated block content
 */
function my_add_button_block_style_to_latest_posts( string $block_content ): string {
    \wp_enqueue_style( 'wp-block-button' );

    return $block_content;
}

\add_filter( 'render_block_core/latest-posts', 'my_add_button_block_style_to_latest_posts' );
Code-Sprache: PHP (php)

Sobald nun der „Neueste Beiträge“-Block ausgegeben wird, wird das CSS des Button-Blocks ebenfalls mit ausgeben, sodass mein individueller Block sauber dargestellt wird.

Schreibe einen Kommentar Antworten abbrechen