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' );

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' );

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' );

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 1^er bloc pour afficher le prix de notre produit.