Comment ajouter l’éditeur de bloc de WordPress dans les fiches produits de WooCommerce ?
L’autre matin, je voulais une mise en page un peu particulière pour présenter le déroulé d’une formation qui est un produit de WooCommerce. Qu’à cela ne tienne je vais créer un modèle de page personnalisé pour les types de contenu « Product ».
Hey mais attends, si c’est un Custom Post Type, il devrait y avoir Gutenberg, l’éditeur de blocs de WordPress à dispo non ?
En résumé voici comment on va s’y prendre :
- Comment WooCommerce bloque l’éditeur de bloc ?
- Comment réactiver Gutenberg grâce aux hooks ?
- Comment modifier l’affichage d’un produit ?
- Comment créer des blocs Gutenberg pour afficher les données du produit ?
WooCommerce désactive Gutenberg par défaut
Puis je me suis mis à rechercher « gutenberg » sur le repo de WooCommerce pour y trouver un commit intéressant :
« Disable Gutenberg for products », ça me paraît assez explicite. Je me rend compte que l’extension utilise un filtre pour désactiver Gutenberg :
add_filter( 'gutenberg_can_edit_post_type', array( __CLASS__, 'gutenberg_can_edit_post_type' ), 10, 2 );
/**
* Disable Gutenberg for products.
*
* @param bool $can_edit Whether the post type can be edited or not.
* @param string $post_type The post type being checked.
* @return bool
*/
public static function gutenberg_can_edit_post_type( $can_edit, $post_type ) {
return 'product' === $post_type ? false : $can_edit;
}
Pour faire simple, WooCommerce vérifie si mon $post_type
est de type product
alors le plugin return false
.
Si on va sur la branche master
du repo on voit cette logiqe appliquée sur 2 hooks différents :
gutenberg_can_edit_post_type
se déclenche lorsque WordPress vérifie est-ce que Gutenberg doit être utilisé ou pas pour éditer le contenu ?use_block_editor_for_post_type
est déclenché de la même manière uniquement si l’extension Gutenberg est activée.
En clair, WooCommerce ne veut pas de Gutenberg dans ses fiches produits.
Mais si ce n’est qu’une question de hooks, 🤔 je dois pouvoir réactiver l’éditeur de blocs !
Activer Gutenberg pour les produits grâce aux hooks
Je vais tout simplement coder l’inverse de ce que WooCommerce me présente.
Commençons par créer une extension :
Dans le dossier /wp-content/plugins
je créé un nouveau dossier que j’appelle gutenberg-for-woocommerce
. Pour respecter les bonnes pratiques de WordPress, je créer un fichier gutenberg-for-woocommerce.php
à l’intérieur de ce nouveau dossier.
/**
* Enable Gutenberg for products.
*
* @see https://github.com/woocommerce/woocommerce/commit/0599c06b20a6fd38547588d25f2e3c43a6d4503a#
*/
function woocommerce_for_gutenberg_enable_block_editor_for_products() {
remove_filter( 'gutenberg_can_edit_post_type', array( WC_Post_Types::class, 'gutenberg_can_edit_post_type' ), 10, 2 );
remove_filter( 'use_block_editor_for_post_type', array( WC_Post_Types::class, 'gutenberg_can_edit_post_type' ), 10, 2 );
}
add_action( 'plugins_loaded', 'woocommerce_for_gutenberg_enable_block_editor_for_products' );
En bref, lorsque les extensions de WordPress sont chargées, je viens lancer la fonction woocommerce_for_gutenberg_enable_block_editor_for_products
qui s’occupe de supprimer les filtres de WooCommerce.
Libre à vous d’adapter le code selon que vous êtes plus à l’aise en Programmation Orientée Objet qu’en procédural. J’essaie de rester simple dans la démonstration pour une meilleure compréhension.
Modifier le template d’une fiche produit WooCommerce
C’est bien beau d’avoir activer Gutenberg pour éditer le contenu de nos fiches produits mais si l’affichage coté front ne suit pas je ne profiterais pas de toute la puissance qu’offrent les blocs.
Je vais donc modifier le template de ma fiche produit. D’après la hiérarchie des templates de WordPress je dois m’attaquer au fichier single-product.php
.
Rendez-vous dans /wp-content/plugins/woocommerce/templates/single-product.php
pour se rendre compte que WooCommerce gère son affichage avec des actions (encore une fois des hooks !).
do_action( 'woocommerce_before_main_content' );
while ( have_posts() ) {
the_post();
wc_get_template_part( 'content', 'single-product' );
}
do_action( 'woocommerce_after_main_content' );
do_action( 'woocommerce_sidebar' );
J’ai tej les commentaires pour plus de lisibilité mais ils donnent tous les détails sur ce qui est implémenté sur chaque hook.
Comme la finesse et moi c’est discutable, je pars du principe que tout ce que je peux désactiver je le vire à commencer par les <div>
que WooCommerce génère dont j’ai pas besoin.
function gutenberg_for_woocommerce_remove_all_single_template_actions() {
remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10 );
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10 );
}
add_action( 'after_setup_theme', 'gutenberg_for_woocommerce_remove_all_single_template_actions' );
Désactiver le fil d’Ariane de WooCommerce
Viens le tour du fil d’ariane que je pourrais ajouter plus tard sous forme de bloc à l’endroit où je veux.
Désactivons-le pour le moment :
function gutenberg_for_woocommerce_remove_all_single_template_actions() {
remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20 ); // Désactiver le fil d'ariane de WooCommerce.
add_action( 'after_setup_theme', 'gutenberg_for_woocommerce_remove_all_single_template_actions' );
Pour la suite nous devons examiner de plus prêt la Boucle de WooCommerce pour voir ce qui se cache derrière wc_get_template_part( 'content', 'single-product' );
Désactiver le titre de la fiche produit
Désactivons-le pour le moment :
function gutenberg_for_woocommerce_remove_all_single_template_actions() {
add_action( 'after_setup_theme', 'gutenberg_for_woocommerce_remove_all_single_template_actions' );
function gutenberg_for_woocommerce_remove_all_single_template_actions() {
remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10 ); // Supprimer <div id="primary" class="content-area"><main id="main" class="site-main" role="main">
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10 ); // Supprimer </div>
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_sale_flash', 10 );
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_sharing', 50 );
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 );
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
}
add_action( 'after_setup_theme', 'gutenberg_for_woocommerce_remove_all_single_template_actions' );
En résumé pour tout désactiver sur la fiche produit généré par WooCommerce
Afficher le contenu de l’éditeur de bloc
Cool, on a fait un sacré ménage, mais… je n’ai pas le contenu de ma page qui s’affiche pour autant.
Comment créer des blocs pour afficher les informations du produit ?
Comme le template utilisait des hooks, je me suis fait une reflexion aussi bête que simple : pourquoi ne pas réutiliser la même méthode qui était déjà branché sur une action du template auparavant. Elles géraient déjà l’affichage en front, je ne vais pas réinventer la roue.
Par exemple, j’utiliserais la fonction woocommerce_template_single_price
pour afficher le prix, ou woocommerce_template_single_add_to_cart
pour afficher le bouton d’ajout au panier.
Exemple de bloc Gutenberg pour afficher le prix du produit
Histoire d’avancer sur notre plugin, je vous propose de créer un 1er bloc pour afficher le prix de notre produit.