Gutenberg, ajouter un select pour styliser l’image à la une

Le nouvel éditeur de wordPress, appelé Gutenberg ou Block editor change totalement les metaboxes que l’on pouvait ajouter simplement en php avec des filtres. Cet article traite de la mise en place d’un select pour styliser l’image à la une d’un article, en ajoutant une meta que l’on pourra tester pour afficher l’image à la une d’un article.

Ajouter une metabox à l'éditeur Gutenberg
Ajouter une metabox à l’éditeur Gutenberg

Précédemment, on ajoutait une nouvelle entrée au niveau de l’image à la une dans l’éditeur classique (tinyMCE) avec le filtre admin_post_thumbnail_html, traité dans cet article.

Dans un premier temps, on ajoute le style et le javascript pour le nouvel éditeur, et l’on enregistre la nouvelle meta pour l’article :

Le fichier js gutenberg.js se charge d’afficher un select avec plusieurs choix : stretch étendue, float left flottement à gauche, float right flottement à droite, hidden non affichée.

Dans wrapPostFeaturedImage, on affiche le composant de départ et l’on ajoute notre select à la fin avec la fonction featuredImageSelect. Cette fonction est définie à la fin et appelle la classe Featured_Image_Select qui étend la classe des composants React de Gutenberg. Cette classe définie le select, et indique la fonction de sauvegarde de la meta : updateStyleFeaturedImage.

La feuille de style gutenberg.css ne sert qu’à laisser un espace entre le select et l’image à la une, mais pourra servir aux autres personnalisations de l’éditeur par blocs.

Et hop, lors de l’affichage d’un article single.php, on pourra appeler la meta _style_featured_image pour styliser l’image à la une de l’article.

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables.