L’éditeur de contenu Gutenberg a fait bien du chemin depuis son lancement pour la version 5.0 de WordPress.
Gutenberg étant non seulement devenu plus stable mais s’étant également pas mal étoffé, je le trouve désormais intéressant, dans le cas d’une création d’un site web dont le contenu doit être modulaire.
L’atout principal de Gutenberg vient du fait qu’il est un éditeur visuel. Les blocs de contenu peuvent être déplacés à la souris par l’utilisateur, ce qui rend la gestion du site plus user-friendly.
Cependant, comme souvent avec WordPress, ce système de gestion de contenu vient avec toute une liste d’outils, pas forcément adéquats à tous les projets et qui peuvent vite transformer le panneau de gestion en « usine à gaz ».
Cet article étant orienté « développement web », avoir des connaissances en WordPress et en PHP sont des prérequis.
- Retirer des blocs par défaut
- Créer des blocs dynamiques avec ACF
- Créer des blocs pour certains types de Post
- Retirer Gutenberg
- Aller plus loin dans la personnalisation de Gutenberg
1. Retirer des blocs par défaut
L'éditeur de contenu Gutenberg vient avec toute sa panoplie de blocs par défaut. Pour éviter l'effet "usine à gaz", il est conseillé d'enlever ceux qui ne sont pas adaptés au projet.
Le système de blocs proposé par Gutenberg ne permet pas de "supprimer" ses blocs par défaut. Par contre, il est possible de les intégrer au projet web, un à un. Nous allons utiliser cette méthode.
1.1 Allouer des blocs
Dans cet exemple, nous attribuons deux types de blocs, à savoir le bloc image ("core/image") ainsi que le bloc paragraphe ("core/paragraph"). Les autres types de bloc ne sont donc plus disponibles.
Dans functions.php :
add_filter( 'allowed_block_types', 'karac_blocs_disponibles' );
function karac_blocs_disponibles( $allowed_blocks ) {
return array(
'core/image',
'core/paragraph',
);
}
1.2 Allouer des blocs spécifiques pour certains types de Post
Il est également possible de rendre disponibles certains blocs que pour certains types de Post. Dans l'exemple suivant, les blocs image et paragraphe sont accessibles pour tous les types de Post. Contrairement au bloc liste, qui lui peut exclusivement être utilisé au sein des Posts de type "page". Vous ne pourrez donc pas disposer de celui-ci dans vos Posts de type "article".
add_filter( 'allowed_block_types', 'karac_blocs_disponibles', 10, 2 );
function karac_blocs_disponibles( $allowed_blocks, $post ) {
$allowed_blocks = array(
'core/image',
'core/paragraph',
);
if( $post->post_type === 'page' ) {
$allowed_blocks[] = 'core/list';
}
return $allowed_blocks;
}
1.3 Allouer des blocs spécifiques pour certains templates de page
Pour octroyer des blocs exclusivement à certains templates, nous pouvons nous servir de la fonction get_page_template_slug.
Dans functions.php :
if(get_page_template_slug($post->ID)=='template-apropos.php'){
$allowed_blocks[] = 'core/heading';
}
1.4 Liste des blocs disponibles par défaut
Voici la liste des blocs disponibles par défaut dans Gutenberg.
- core/paragraph
- core/image
- core/heading
- core/gallery
- core/list
- core/quote
- core/audio
- core/cover
- core/file
- core/video
- core/table
- core/verse
- core/code
- core/freeform — Classic
- core/html — Custom HTML
- core/preformatted
- core/pullquote
- core/buttons
- core/text-columns — Columns
- core/media-text — Media and Text
- core/more
- core/nextpage — Page break
- core/separator
- core/spacer
- core/shortcode
- core/archives
- core/categories
- core/latest-comments
- core/latest-posts
- core/calendar
- core/rss
- core/search
- core/tag-cloud
- core/embed
- core-embed/twitter
- core-embed/youtube
- core-embed/facebook
- core-embed/instagram
- core-embed/wordpress
- core-embed/soundcloud
- core-embed/spotify
- core-embed/flickr
- core-embed/vimeo
- core-embed/animoto
- core-embed/cloudup
- core-embed/collegehumor
- core-embed/dailymotion
- core-embed/funnyordie
- core-embed/hulu
- core-embed/imgur
- core-embed/issuu
- core-embed/kickstarter
- core-embed/meetup-com
- core-embed/mixcloud
- core-embed/photobucket
- core-embed/polldaddy
- core-embed/reddit
- core-embed/reverbnation
- core-embed/screencast
- core-embed/scribd
- core-embed/slideshare
- core-embed/smugmug
- core-embed/speaker
- core-embed/ted
- core-embed/tumblr
- core-embed/videopress
- core-embed/wordpress-tv
Puisque WordPress et son éditeur sont en constante évolution, nul doute que cette liste ne sera plus exhaustive dans un futur proche :)
1.5 Allouer des blocs sans ligne de code
Il est également possible de rendre indisponible certains blocs Gutenberg sans ligne de code. Pour cela, rendez-vous dans le Gestionnaire de bloc (en cliquant sur les trois points en haut à droite, puis sur Gestionnaire de blocs).
A noter que cette alternative n'interdira en rien à un utilisateur de naviguer dans ce gestionnaire de blocs et à s'en octroyer d'autres. Les solutions précédentes sont donc à privilégier.
2. Créer des blocs dynamiques avec ACF
Les blocs par défaut proposés par Gutenberg sont efficaces. Toutefois, quand vous voudrez aller plus loin dans la personnalisation de votre projet web, vous allez forcément rencontrer des barrières. C’est à ce moment-là qu’il vous sera plus qu’utile d’opter pour vos propres blocs, créés par vos soins.
Dans l'exemple ci-dessous, nous allons créer un bloc "temoignage". Celui-ci contiendra le texte du témoignage, le nom de l'auteur, son rôle, une image, ainsi que deux options de couleurs (couleur du texte et couleur du fond).
La création du bloc "temoignage" dans functions.php :
add_action('acf/init', 'karac_custom_block_types');
function karac_custom_block_types() {
if( function_exists('acf_register_block_type') ) {
acf_register_block_type(array(
'name' => 'temoignage',
'title' => __('Témoignage'),
'description' => __('Afficher un témoignage.'),
'render_template' => 'template-parts/blocks/temoignage.php',
'category' => 'formatting',
'icon' => 'admin-comments',
'keywords' => array( 'temoignage', 'quote', 'testimonial' ),
));
}
}
Dans ACF, ajoutons un groupe de champs destiné à ce bloc personnalisé fraîchement conçu.
Toujours dans ce groupe de champs ACF, ajoutons les champs adéquats.
La dernière étape consiste à créer le fichier PHP contenant le code qui va servir à afficher le bloc du côté client (template-parts/blocks/temoignage.php dans notre cas).
A l'intérieur, de celui-ci nous allons commencer par y ajouter une ancre contenant l'ID du bloc (nécessaire pour notre système d'options de couleurs). Nous allons également prendre en compte le système de classes personnalisées prévu dans Gutenberg, ainsi que la gestion de l'alignement.
Puis, nous récupérons les différentes valeurs des champs ACF et nous les affichons dans un squelette HTML.
$id = 'temoignage-' . $block['id'];
if( !empty($block['anchor']) ) {
$id = $block['anchor'];
}
$className = 'temoignage';
if( !empty($block['className']) ) {
$className .= ' ' . $block['className'];
}
if( !empty($block['align']) ) {
$className .= ' align' . $block['align'];
}
// Récupération des valeurs
$temoignage = get_field('temoignage') ?: 'Votre témoignage ici...';
$auteur = get_field('auteur') ?: 'Auteur';
$role = get_field('role') ?: 'Role';
$image = get_field('image') ?: 295;
$background_color = get_field('background_color');
$text_color = get_field('text_color');
//Affichage frontend du block
?>
<div id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?>">
<blockquote class="temoignage-blockquote">
<span class="temoignage-temoignage"><?php echo $temoignage; ?></span>
<span class="temoignage-auteur"><?php echo $auteur; ?></span>
<br>
<span class="temoignage-role"><?php echo $role; ?></span>
</blockquote>
<div class="temoignage-image">
<?php echo wp_get_attachment_image( $image, 'full' ); ?>
</div>
<style type="text/css">
#<?php echo $id; ?> {
background: <?php echo $background_color; ?>;
color: <?php echo $text_color; ?>;
}
</style>
</div>
Ensuite, libre à vous de jouer avec le CSS et les classes disponibles pour obtenir la mise en page voulue.
3. Créer des blocs pour certains types de Post
Il est possible de limiter l’usage de vos blocs personnalisés à certains le type de Post. Pour cela, les règles d'emplacement d'ACF font l'affaire. Dans l'exemple ci-dessous, notre bloc "Témoignage" ne sera disponible que pour les Posts de type "Article".
4. Retirer Gutenberg
Il existe différents plugins permettant de retirer l'éditeur de blocs Gutenberg et de le remplacer par l'ancien éditeur de contenu (TinyMCE). Bien que ceux-ci soient pratiques lorsque vous souhaitez renoncer à Gutenberg sur la totalité de votre site web, ils ne sont pas vraiment adaptés aux projets utilisant Gutenberg spécifiquement pour certains types de contenu ou templates.
4.1 Pour certains templates
Dans functions.php, ajoutez-y le code ci-dessous, en adaptant les valeurs du tableau "excluded_templates" (mettez-y les noms de vos fichiers contenant vos templates pour lesquels vous désirez retirer Gutenberg)
function karac_disable_editor($id = false){
$excluded_templates = array(
'template-apropos.php',
'template-accueil.php',
);
if(empty($id)){
return false;
}
$template = get_page_template_slug($id);
return in_array($template, $excluded_templates);
}
function karac_disable_gutenberg($can_edit, $post_type){
if(!(is_admin() && !empty($_GET['post']))){
return $can_edit;
}
if(karac_disable_editor($_GET['post'])){
$can_edit = false;
}
return $can_edit;
}
add_filter('gutenberg_can_edit_post_type', 'karac_disable_gutenberg', 10, 2);
add_filter('use_block_editor_for_post_type', 'karac_disable_gutenberg', 10, 2);
4.2 Pour certains types de Post
Modifions légèrement notre code précédent en y rajoutant, entre autres, une variable "exluded_post_types" contenant la liste de nos types de Post qui ne nécessitent pas Gutenberg (dans notre exemple "bien_immobilier").
function karac_disable_editor($id = false) {
$excluded_templates = array(
'template-apropos.php',
'template-accueil.php',
);
$excluded_post_types = array(
'bien_immobilier',
);
if(empty($id)){
return false;
}
$template = get_page_template_slug($id);
$post_type = get_post_type($id);
return in_array($post_type, $excluded_post_types) || in_array($template, $excluded_templates);
}
function karac_disable_gutenberg($can_edit, $post_type) {
if(!(is_admin() && !empty($_GET['post']))){
return $can_edit;
}
if(karac_disable_editor($_GET['post'])){
$can_edit = false;
}
return $can_edit;
}
add_filter('gutenberg_can_edit_post_type', 'karac_disable_gutenberg', 10, 2);
add_filter('use_block_editor_for_post_type', 'karac_disable_gutenberg', 10, 2);
5. Aller plus loin dans la personnalisation de Gutenberg
5.1 Désactiver le choix de couleur pour les textes
Pour retirer les options de couleurs des textes et de leur background, ajouter ces deux lignes dans functions.php.
add_theme_support( 'disable-custom-colors' );
add_theme_support( 'editor-color-palette' );
5.2 Proposer une palette de couleurs personnalisée
Offrir une certaine liberté aux éditeurs du site est certainement une bonne chose, mais attention à ne pas trop en offrir non plus. En effet, cela ne rendrait service à personne. Pour l’éditeur, il n’est jamais agréable de se sentir perdu au milieu d’une myriade de possibilités et pour vous, votre charte graphique risque d’être sacrément chamboulée. Proposer une palette de couleurs prédéfinies est un très bon compromis :)
On va commencer par créer la palette de couleurs du côté backend. Pour cela, rendez-vous dans functions.php.
add_theme_support( 'editor-color-palette', array(
array(
'name' => __( 'Vert', 'karac' ),
'slug' => 'vert',
'color' => '#8EC89A',
),
array(
'name' => __( 'Gris', 'karac' ),
'slug' => 'gris',
'color' => '#d5d6d6',
),
array(
'name' => __( 'Rose', 'karac' ),
'slug' => 'rose',
'color' => '#e939c2',
),
) );
S'il l'on désire ne pas proposer d'autres couleurs que celles de la palette, nous pouvons désactiver les couleurs personnalisées en rajoutant cette ligne de code :
add_theme_support( 'disable-custom-colors' );
Et voici le résultat du côté backend :
A ce stade, sur le frontend, les couleurs ne s'affichent pas encore. Remédions à cela.
Dans notre fichier style.css, ajoutons nos classes CSS. WordPress va automatiquement créer des classes "has-XXX-color" et "has-XXX-background-color", selon les slugs des couleurs que vous avez choisis lors de la création de la palette de couleurs dans functions.php. Il ne nous reste plus qu'à y ajouter des règles CSS faisant appel aux couleurs souhaitées.
:root{
--vert: #8ec89a;
--gris: #d5d6d6;
--rose: #e939c2;
}
.has-vert-color{
color:var(--vert);
}
.has-vert-background-color {
background-color: var(--vert);
}
.has-gris-color {
color:var(--gris);
}
.has-gris-background-color {
background-color: var(--gris);
}
.has-rose-color {
color:var(--rose);
}
.has-rose-background-color {
background-color: var(--rose);
}
5.3 Retirer les tailles de police personnalisées
Dans les options des blocs ayant du texte, il est possible d'utiliser n'importe quelle taille de police
En rajoutant la ligne ci-dessous dans functions.php, seules les tailles prédéfinies seront accessibles.
add_theme_support('disable-custom-font-sizes');
5.4 Répertorier les blocs réutilisables
Gutenberg intègre un système de blocs réutilisables. Celui-ci est très pratique lorsque vous désirez afficher un contenu similaire à plusieurs emplacements différents, tout en le gérant à un seul et même endroit.
Pour transformer un bloc en « bloc réutilisable », il suffit de cliquer sur les trois points, puis sur « Ajouter aux blocs réutilisables ».
Pour pouvoir avoir un aperçu de vos blocs réutilisables, il faut cliquer sur « Gérer les blocs réutilisables ». Vous serez alors redirigé sur /wp-admin/edit.php?post_type=wp_block.
L'accessibilité du gestionnaire de blocs réutilisables laisse à désirer. Pour solutionner cela, nous allons ajouter un onglet dans le menu du backend WordPress, qui mènera directement à ce fameux gestionnaire de blocs réutilisables. La fonction add_menu_page() est parfaite pour l'exercice.
Dans functions.php :
function blocs_reutilisables_menu() {
add_menu_page('Blocs réutilisables', 'Blocs réutilisables', 'edit_posts', 'edit.php?post_type=wp_block', '', 'dashicons-table-col-after', 22);
}
add_action('admin_menu', 'blocs_reutilisables_menu');
Et voilà le travail :
5.5 Modifier les options d’un bloc existant avec theme.json
La version 5.8 de WordPress, disponible depuis le 21 juillet 2021, amène une nouveauté en lien avec Gutenberg qui me semble très intéressante, à savoir theme.json.
Ce fichier permet de gérer les réglages des blocs Gutenberg dans un seul et même fichier.
Par exemple, nous pouvons l’utiliser pour rendre inaccessible l’option couleur personnalisée pour tous nos blocs. Pour cela, il suffit de créer de le fichier theme.json et de le placer à la racine de votre thème.
A l’intérieur de theme.json, nous mettrons :
{
"version": 1,
"settings": {
"color": {
"custom": false
},
}
}
Plus intéressant encore, il est également possible d’interagir non pas sur l’intégralité des blocs mais sur des blocs spécifiques.
Dans l’exemple suivant, nous interdisons l’option couleur personnalisée seulement pour le bloc pour le bloc paragraph.
{
"version": 1,
"settings": {
"color": {
"custom": true
},
"blocks": {
"core/paragraph": {
"color": {
"custom": false
}
}
}
}
}
Avec cette nouveauté qu’est theme.json, le champ des possibilités s’élargit considérablement.
Pour en savoir plus sur le sujet, je vous invite à consulter la documentation WordPress concernée.
Nous arrivons à la fin de l'article. Bon code à toutes et à tous :)
Sources :
Catégories :
Tech webTags :
PHP WordpressVous avez aimé cet article ? Suivez-nous sur Facebook pour ne rien manquer !