Filtrer l'icône de menu mobile du bloc navigation de Gutenberg

L’éditeur de blocs présent depuis la phase 1 du projet Gutenberg embarque un bloc navigation capable de se replier automatiquement lors du passage en résolution mobile. Aucun réglage ne permet à ce jour de le modifier depuis l’éditeur, voici une astuce par le code.

Commencez par ouvrir l’éditeur de site puis choisissez le modèle contenant votre bloc navigation. Vous pouvez aussi modifier directement la composition concernée.

Vérifiez que l’interrupteur Afficher l’icône du bouton est bien actif puis choisissez l’icône de votre choix. Cela n’aura aucune importance pour la suite étant donné que nous filtrerons ce réglage.

À l’aide d’un éditeur de code, ouvrez le fichier functions.php de votre thème puis injectez ces lignes de code :

/* Filter Mobile Menu SVG Icon */
function wpc_mobile_menu_svg_icon( $block_content, $block ) {
	return preg_replace( '/\<svg width(.*?)\<\/svg\>/', '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5"/></svg>', $block_content );

	return $block_content;
}

add_filter( 'render_block_core/navigation', 'wpc_mobile_menu_svg_icon', null, 2 );

Remplacez la ligne 3 par le code correspondant à votre fichier SVG dans le second paramètre de la fonction preg_replace(). Cette fonction opère un rechercher / remplacer dans le code du bloc en filtrant les balises SVG. Comme le bloc navigation offre le choix natif entre 2 icônes, il nous faut rester moins précis dans la recherche – nous aurions pu cibler directement le code du SVG mais celui-ci peut aussi subir des évolutions lors d’une prochaine mise à jour de WordPress.

Actualisez ensuite votre site pour voir le résultat en le consultant sur votre smartphone. Si cela ne fonctionne pas, pensez à vider vos caches serveurs et locaux.