Activer Gutenberg dans un Custom Post Type • Formation WordPress Capitaine WP

L’éditeur Gutenberg n’apparaitra pas dans vos types de publications personnalisés à moins que vous n’ayez. Mais pour le voir apparaître il ne faut pas oublier quelques petits réglages.

Sommaire du cours

Dans un custom post type que vous avez déclaré
Dans un custom post type déclaré par le thème ou une extension

Il existe principalement 2 cas de figure :

Soit vous avez déclaré vous-même un custom post type, et auquel cas vous avez accès à sa configuration
Soit c’est un thème ou une extension qui l’a déclaré, et vous n’avez pas accès au code directement. Mais ce n’est pas ça qui va nous arrêter !

Dans un custom post type que vous avez déclaré

Lorsque vous déclarez votre votre Custom Post Type dans le fichier functions.php, il y a deux paramètres à ne pas oublier pour que Gutenberg s’affiche correctement :

show_in_rest doit être à true (ce paramètre gère initialement l’API Rest) ;
dans supports il ne faut pas oublier de lister editor.

Aparté: éditeur et API REST

Mais quel est le rapport entre l’éditeur et l’API Rest de WordPress ? Me demanderiez-vous ! Eh bien en fait, Gutenberg a besoin de l’API pour fonctionner : tous les échanges avec le serveur se font par ce biais, comme l’enregistrement de la publication par exemple.

C’est ce qui permet à l’éditeur d’être une webapp moderne, sans rechargement de page comme auparavant. Pour ceux qui ont connu WordPress à cette époque, c’était très frustrant !

Du coup, il faut que l’API soit active pour le CPT afin que l’éditeur puisse fonctionner !

Avec ça vous devriez voir apparaitre Gutenberg dans vos custom post types.

PHP

functions.php

<?php 

function capitainewp_create_post_types() {
  
  $labels = [
    'name' => 'Cours',
  ];

  $args = [
    'labels' => $labels,
    'public' => true,
    'has_archive' => true,
    'show_in_rest' => true, // Important !
    'supports' => ['title', 'thumbnail', 'editor'], // Ne pas oublier editor
    'menu_position' => 5,
    'menu_icon' => 'dashicons-awards',
  ];

  register_post_type( 'cours', $args );

}
add_action('init', 'capitainewp_create_post_types' );

Pour déclarer un Type de publication dans WordPress, référez-vous à l’outil GenerateWP.

Dans un custom post type déclaré par le thème ou une extension

Si ce n’est pas vous qui avez déclaré un CPT, pas de souci, on va pouvoir le modifier grâce à un hook que vous placez également dans functions.php :

PHP

functions.php

<?php

function capitainewp_edit_cpt( $args, $post_type ) {
	
	if ( $post_type !== 'portfolio' ) { // On vérifie que c'est le bon CPT !
		return $args;
	}
    
	// Je modifie les paramètres existants
    $args['show_in_rest'] = true;
    $args['supports'][] = 'editor';
    
    // Et on retourne les arguments (dont ceux modifiés)
    return $args;
}

add_filter( 'register_post_type_args', 'capitainewp_edit_cpt', 10, 2 );

Tout d’abord, vous allez vérifier que vous modifiez le bon type de publication, car le hook se lancera pour tous les CPT définis sur votre site. Dans mon exemple, je cible uniquement le CPT dont le slug serait portfolio.

Je vais ensuite modifier les arguments nécessaires au bon fonctionnement de l’éditeur, à savoir show_in_rest et supports.

Comme ce dernier est un tableau, j’ajoute une entrée à celui-ci sans l’écraser, grâce à la présence des crochets [] avant le égal, qui signifient : ajoute une nouvelle entrée au tableau.

Conseil

Ce hook nous permet de modifier la configuration d’un CPT sans avoir à modifier le code original, qui serait hors de portée (dans un thème ou une extension).

Sans cette technique, c’est l’éditeur classique qui s’affichera dans votre type de publication au lieu de Gutenberg.

Questions, réponses et commentaires

Boris Paing

Le 25 octobre 2018

Merci l’ami ; grâce à toi j’ai pu activer Gutenberg sur LearnPress, en modifiant les fonctions (“méthodes” devrais-je dire) register() dans les fichiers qui m’intéressaient dans /wp-content/plugins/learnpress/inc/custom-post-types

Répondre
1. Maxime BJ
  
  Le 29 octobre 2018
  
  Super !
  
  Par contre le mieux c’est de ne pas modifier le code du plugin directement, au risque de perdre les modifications lors d’une prochaine mise à jour. Tu peux cependant dans ton propre code modifier un CPT existant de cette manière : https://developer.wordpress.org/reference/hooks/register_post_type_args/
  
  Répondre
Jice

Le 4 mars 2019

Top : rapide efficace. Merci pour le tuto.
Comme quoi, une ligne de code vous manque (show_in_rest) , et tout un site est dépareillé 🙂

Répondre
1. Maxime BJ
  
  Le 4 mars 2019
  
  Exact ! Puis pour ce détail en particulier, tu le sais pas, tu t’arraches les cheveux pour trouver !
  
  Répondre
Seb

Le 10 mai 2021

Salut Maxime,

Comme le dit plus haut Jice c’est rapide et efficace.
Merci donc !

Se combine à merveille pour après avoir les meta Enfold/Avia dans le panneau de réglage

Répondre

Laisser un commentaire Annuler la réponse