Veröffentlicht am Schreib einen Kommentar

CSS für Block-Vorlagen nur laden, wenn erforderlich

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;
}

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', [] );
}

Das erfordert auch, für jede Block-Vorlage eine eigene CSS-Datei zu erstellen und ist damit Voraussetzung.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.