Les snippets utiles pour Gutenberg

Avant de détailler quelques fonctions utiles pour personnaliser Gutenberg, faisons un petit point sur l’outil.

Qu’est-ce que Gutenberg ?

Gutenberg est le nouvel éditeur visuel de WordPress. Il remplace TinyMCE lorsqu’on souhaite éditer des contenus depuis l’espace d’administration. Intégré dans la version 5.0 du CMS, il permet de voir en temps réel ce que l’on fait, mais également de mettre en page son contenu de manière plus poussée, et surtout : visuelle !

Il est basé sur le principe de blocs que l’on ajoute de façon successive pour construire facilement sa page.

Nativement, Gutenberg propose plusieurs fonctionnalités : intégration de plusieurs types de contenu, modèle de mise en page, combinaison image/texte, contenu embarqué et j’en passe.

En fonction du thème utilisé, l’éditeur visuel peut être configuré avec une palette de couleurs différente, des largeurs de contenu personnalisées… Nous allons voir par la suite des fonctions permettant de customiser ces paramètres dans Gutenberg et je vous promets, ça va vous changer la vie !

Modifier la largeur de l’éditeur Gutenberg

Par défaut, la largeur de l’éditeur est définie à 630px. On avouera que ce n’est pas très pratique, surtout lorsque l’on créé plusieurs colonnes : on se retrouve avec un contenu tout écrasé et qui s’étend sur des kilomètres dans la hauteur, alors qu’il n’y a qu’une image, un titre et une description.

Je vois ce que vous vous dites “ça ne va pas être simple cette histoire”, mais en fait si. Il n’y a pas besoin de fonction PHP pour définir ce paramètre. Il se configure en quelques lignes de CSS.

Comme c’était le cas avec TinyMCE, on utilise la fonction permettant d’ajouter une nouvelle feuille de style à l’éditeur, add_theme_support(). Ensuite, on appelle avec add_editor_style() notre fichier. L’url peut-être différente selon la configuration de votre thème, donc pensez à la changer :

/**

* Enlever les marges dans l’éditeur Gutenberg

*/

function my_gutenberg_setup() {

// Add support for editor styles
add_theme_support( ‘editor-styles’ );

// Enqueue editor styles
add_editor_style( ‘assets/css/style-editor.css’ );

}

add_action( ‘after_setup_theme’, ‘my_gutenberg_setup’ );

Ici j’ai mis une largeur à 1200px, mais vous pouvez mettre moins. C’est à vous de la définir.

Activer les blocs larges

Vous avez peut-être déjà vu à l’usage, que dans certains thèmes, il était possible de mettre des blocs en pleine largeur et d’autres avec la largeur par défaut. Si vous êtes en train de mettre en place un thème personnalisé, vous pouvez proposer ces fonctions dans votre thème. Cela permet de diversifier un peu la mise en page de votre site.

Là encore, il est question d’une fonction et de CSS. Vous pouvez ajouter la fonction add_theme_support (‘align-wide’), à ce que l’on a mis en place précédemment :

function my_gutenberg_setup() {

// Add support for editor styles.

add_theme_support( ‘editor-styles’ );

// Enqueue editor styles.

add_editor_style( ‘assets/css/style-editor.css’ );

// Éventuellement pour prendre en compte les blocs larges

add_theme_support( ‘align-wide’ );

}

add_action( ‘after_setup_theme’, ‘my_gutenberg_setup’ );

Ensuite, dans le CSS il ne reste plus qu’à ajouter :

.entry-content .alignwide {

margin-left  : -80px;

margin-right : -80px;

}

.entry-content .alignfull {

margin-left  : calc( -100vw / 2 + 100% / 2 );

margin-right : calc( -100vw / 2 + 100% / 2 );

max-width    : 100vw;

}

.alignfull img {

width: 100vw;

}

Personnaliser la palette de couleurs

Avec Gutenberg vous avez une palette de couleurs accessible dans les paramètres, lorsque vous cliquez sur un texte ou sur un bloc. Vous pouvez appliquer une couleur à l’arrière-plan ou bien au texte. Si votre thème ne l’a pas changé, par défaut vous avez la palette de Gutenberg.

Avec une fonction, vous pouvez entièrement customiser cette partie, et si vous voulez, désactiver la fonctionnalité de « couleur personnalisée ». Cela vous permet de proposer dans le back-office des couleurs qui seront en accord avec l’esthétique du site.

Il y a plusieurs paramètres :

• Name : le nom qui s’affiche dans l’espace d’administration
• Slug : le slug de la couleur que l’on retrouve sur la partie front
• Color : votre couleur

function my_custom_color() {

add_theme_support( ‘editor-color-palette’,

array(

array( ‘name’ => ‘bleu foncé’, ‘slug’  => ‘bleu-fonce’, ‘color’ => ‘#224e88’ ),

array( ‘name’ => ‘bleu’, ‘slug’  => ‘bleu’, ‘color’ => ‘#2873b4’ ),

array( ‘name’ => ‘bleu clair’, ‘slug’  => ‘bleu-clair’, ‘color’ => ‘#5a90c9’ ),

array( ‘name’ => ‘orange’, ‘slug’  => ‘orange’, ‘color’ => ‘#e18b32’ ),

array( ‘name’ => ‘gris’, ‘slug’  => ‘gris’, ‘color’ => ‘#888888’ ),

array( ‘name’ => ‘vert’, ‘slug’  => ‘vert’, ‘color’ => ‘#6cb06f’ ),

array( ‘name’ => ‘noir’, ‘slug’  => ‘noir’, ‘color’ => ‘#000000’ ),

array( ‘name’ => ‘blanc’, ‘slug’  => ‘blanc’, ‘color’ => ‘#FFFFFF’ )

)

);

// Pour désactiver les couleurs personnalisées

add_theme_support( ‘disable-custom-colors’ );

}

add_action( ‘after_setup_theme’, ‘my_custom_color’ );

Vous noterez la dernière fonction qui permet de désactiver les couleurs personnalisées.

Maintenant quand vous allez dans votre administration, vous avez plusieurs possibilités de mise en page, et un choix de couleurs correspondant à votre site. Une fois que vous avez tout configuré, dans l’administration, vous allez sur votre site, et là, horreur, rien ne colle à ce que vous aviez précédemment. Normal ! Vous avez configuré le back mais pas le front.

Si vous regardez avec l’inspecteur, vous verrez que des classes se sont greffées à votre code. Notamment pour les couleurs.

Vous devez configurer ces classes dans votre CSS, pour que votre page soit comme ce que vous avez dans votre espace d’administration.

Gutenberg et les Custom Post Type

Dernière petite astuce à vous donner, ça concerne les Custom Post Type. Quand vous les configurez depuis votre fichier fonction, vous devez passer sur “true” le paramètre “show_in_rest”, en plus d’activer l’éditeur dans vos supports. Sans ça, votre CPT s’ouvrira avec l’éditeur de base de WordPress.

function create_post_type() {

/**
* Post Type: Réalisations.
*/
$labels = array(
« name » => __( « Réalisations »),
« singular_name » => __( « realisations » ),
);
$args = array(
« label » => __( « Réalisations » ),
« labels » => $labels,
« description » => «  »,
« public » => true,
« show_ui » => true,
« delete_with_user » => false,
« show_in_rest » => true,
« has_archive » => true,
« show_in_menu » => true,
« exclude_from_search » => true,
‘supports’ => array(‘title’, ‘thumbnail’, ‘editor’),
« query_var » => true,
« menu_icon » => « dashicons-format-gallery »,
« taxonomies » => array( « category », « post_tag » ),
);
register_post_type( « realisations », $args );
}
add_action( ‘init’, ‘create_post_type’ );

Voilà, vous avez de quoi commencer à personnaliser l’éditeur Gutenberg de votre thème. Au travail !