Block-Editor: Block-Stil nur laden, wenn verwendet

Seit WordPress 5.9 werden Assets für einen Block nur geladen, wenn der Block verwendet wird. Für Block-Stile musst du dagegen kreativ werden. Insbesondere, wenn es nicht dein eigener Block ist, für den du einen Stil erstellst.

Da Block-Stile normalerweise separat registriert werden, und insbesondere wenn du sie sauber in einer separaten Datei haben möchtest oder einen existierenden Block erweiterst, kannst du dich nicht auf beispielsweise register_block_type verlassen, um deine Assets zu einem existierenden Block zu registrieren. Das liegt daran, dass das erfordert, die Eigenschaft render_callback dieser Funktion zu überschreiben, was aber dazu führen könnte, dass der Block selbst nicht mehr funktioniert, da der originale Callback nicht mehr aufgerufen werden würde.

In meiner Lösung verwende ich dagegen den Hook render_block_{$this->name}, bei dem es seit geraumer Zeit möglich ist, Assets über wp_enqueue_script oder wp_enqueue_style zu registrieren.

Um Assets nur für einen Block bei einer bestimmten Bedingung zu registrieren, verwende ich folgenden Code:

static function my_group_callback( string $block_content, array $block ): string {
    if ( ! $condition ) { // check your condition
        return $block_content;
    }
    
    \wp_enqueue_style( 'my-handle', $uri ); // adjust handle and uri
    
    return $block_content;
}

\add_action( 'render_block_core/group', 'my_group_callback', 10, 2 );
Code-Sprache: PHP (php)

In diesem Beispiel binde ich einen Stil bei einer bestimmten zutreffenden Bedingung beim Gruppen-Block ein. Dieser Code ist nur ein Beispiel, da $condition und $uri nicht definiert sind. Der echte Code prüft das className-Attribut in $block['attrs']['className'] auf eine bestimmte Klasse, die hinzugefügt wird, wenn mein registrierter Block-Stil verwendet wird. Nur dann wird der Stil eingebunden und im Frontend geladen.

Schreibe einen Kommentar Antworten abbrechen