Comment ajouter l’éditeur de blocs de WordPress dans les fiches produits de WooCommerce ?

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 ?

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 ?

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 type de contenu $post_type est un product alors ce dernier return false.

Si on va sur la branche master du repo on voit cette logique 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 activé 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 jeté 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 et dont je n’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ès 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' );

En résumé pour tout désactiver sur la fiche produit généré par WooCommerce

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.