Afficher un bloc de contenu Gutenberg dynamiquement en PHP

Peut-être avez-vous déjà eu besoin d’afficher programmatiquement — en PHP — un bloc Gutenberg réutilisable à un endroit spécifique dans votre thème WordPress.

Par exemple, regardez juste au-dessus du pied de page de ce site. Le bloc de contact que j’y affiche est un bloc Gutenberg réutilisable qui n’a pas été ajouté manuellement en fin de contenu de chaque page de site (heureusement !).

Pareil pour le bloc « Vous avez aimé cet article ? » que vous verrez après le contenu de cet article : c’est un bloc réutilisable injecté automatiquement.

Ces blocs sont chargés dynamiquement via le thème (enfant) WordPress pour être présentés à certains endroits du thème via PHP, sans avoir à me soucier de les insérer manuellement dans toutes les pages concernées.

Mais comment faire ?

Charger un bloc de contenu Gutenberg réutilisable via son thème ou extension

Voici la fonction magique :

/**
 * Render a reusable Gutenberg block by passing its ID.
 *
 * @param integer $block_id
 * @return string
 */
function render_gutenberg_block( $block_id = 0, $format = '%1$s' ) {
	if ( get_post_type( $block_id ) !== 'wp_block' ) {
		return;
	}

	$block_post = get_post( $block_id );
	$blocks     = parse_blocks( $block_post->post_content );
	$output     = '';

	foreach ( $blocks as $block ) {
		$gutenblock = new WP_Block( $block );
		$output    .= $gutenblock->render();
	}

	printf(
		$format,
		$output
	);
}

Comme vous le voyez :

1. on va récupérer le post (de type wp_block) dans la base de données avec get_posts(),
2. on utilise parse_blocks() pour extraire tous les blocs du contenu de ce post,
3. puis on utilise la classe WP_Block et sa méthode render() pour générer le markup HTML du bloc (et sous-blocs) en question,
4. enfin, on affiche ce contenu.

Mais comment utiliser cette fonction ?

Il faut d’abord connaître l’ID du bloc réutilisable en question. Pour cela, c’est très simple : après l’avoir enregistré en bloc réutilisable dans Gutenberg, rendez-vous dans votre admin WordPress à l’URL /wp-admin/edit.php?post_type=wp_block.

Sur cette URL « secrète », vous pourrez voir une liste de tous les blocs Gutenberg réutilisables enregistrés dans votre base de données (dans le CPT wp_block géré en interne par WordPress).

Si vous cliquez sur le nom d’un bloc, vous arriverez sur l’éditeur Gutenberg et pourrez l’éditer. Vous trouverez l’ID de ce bloc dans l’URL de cette page (wp-admin/post.php?post=1234&action=edit). C’est cet ID que vous devez passer en argument de la fonction render_gutenberg_block().

Dernier point, notez le deuxième paramètre (facultatif) permettant d’éventuellement entourer le markup HTML du bloc rendu avec d’autre HTML extra. Ainsi :

render_gutenberg_block( 1234, '<section><div>%1$s</div></section>' );

Affichera le bloc d’ID 1234 entouré d’une <div> dans une <section>.

Pratique, n’est-ce pas ? Et vous, quel usage dynamique avez-vous réalisé en PHP avec les blocs Gutenberg ?