CSS für Block-Vorlagen nur laden, wenn erforderlich
Veröffentlicht: – Kommentar hinterlassen Letzte Aktualisierung:
Block-Vorlagen sind sinnvoll, um schnell Inhalte auf unterschiedliche Seiten zu bringen, die im Aufbau identisch sind. Benötigt man hierfür jedoch individuelles CSS für einzelne Vorlagen, gibt es aktuell keine vorgefertigte Möglichkeit im WordPress Core, das CSS nur dann zu laden, wenn die Vorlage auf der aktuellen Seite auch wirklich verwendet wird. Dem kann man aber Abhilfe schaffen.
Angelehnt an die Erkennung von has_block()
bzw. my_has_block() habe ich eine ähnliche Erkennung für Block-Vorlagen erstellt. Das erfordert allerdings, dass jede Block-Vorlage eine Kennung besitzt. In meinem Fall habe ich jede meiner Vorlage in einen Gruppenblock gelegt und diesem eine Klasse gegeben, beispielsweise my-block-pattern-benefits
für eine Block-Vorlage mit Vorteilsboxen.
Mit dem unten genannten Code kann ich dann über my_has_block_pattern( 'my-block-pattern-benefits' )
prüfen, ob die Block-Vorlage in dem Beitrag oder der Seite verwendet wird.
// stores checks whether the current post contains a block pattern
// so you only need to search inside the post content(s) once
$containing_block_patterns = [];
/**
* Check if a post contains a specific block pattern.
*
* @param string $pattern The block pattern ID to look for
* @param bool $id The post ID to look for
* @return bool True if the block contains this pattern, false otherwise
*/
function my_has_block_pattern( $pattern, $id = false ) {
global $containing_block_patterns;
if ( isset( $containing_block_patterns[ $id ][ $pattern ] ) ) {
return $containing_block_patterns[ $id ][ $pattern ];
}
$id = ( $id ?: get_the_ID() );
$wp_post = get_post( $id );
// check if post is a correct object
if ( ! $wp_post instanceof WP_Post ) {
$containing_block_patterns[ $id ][ $pattern ] = false;
return false;
}
if ( strpos( $wp_post->post_content, $pattern ) !== false ) {
$containing_block_patterns[ $id ][ $pattern ] = true;
return true;
}
// check reusable blocks
if ( $id && has_block( 'block', $id ) ) {
$content = get_post_field( 'post_content', $id );
$blocks = parse_blocks( $content );
if ( ! is_array( $blocks ) || empty( $blocks ) ) {
$containing_block_patterns[ $id ][ $pattern ] = false;
return false;
}
foreach ( $blocks as $block ) {
if ( ! empty( $block['attrs']['ref'] ) && rh_has_block_pattern( $pattern, $block['attrs']['ref'] ) ) {
$containing_block_patterns[ $block['attrs']['ref'] ][ $pattern ] = true;
return true;
}
if ( ! empty( $block['innerBlocks'] ) ) {
foreach ( $block['innerBlocks'] as $inner_block ) {
if ( ! empty( $inner_block['attrs']['ref'] ) && rh_has_block_pattern( $pattern, $inner_block['attrs']['ref'] ) ) {
$containing_block_patterns[ $block['attrs']['ref'] ][ $pattern ] = true;
return true;
}
}
}
}
}
$containing_block_patterns[ $id ][ $pattern ] = false;
return false;
}
Code-Sprache: PHP (php)
Innerhalb meiner Funktion, die das CSS einbindet, sieht die Prüfung dann folgendermaßen im Gesamten aus:
if ( my_has_block_pattern( 'my-block-pattern-benefits' ) ) {
wp_enqueue_style( 'my-block-pattern-benefits', get_template_directory_uri() . '/block-pattern-benefits.css', [] );
}
Code-Sprache: PHP (php)
Das erfordert auch, für jede Block-Vorlage eine eigene CSS-Datei zu erstellen und ist damit Voraussetzung.