Les styles de blocs de l’éditeur Gutenberg de WordPress permettent de proposer à l’utilisateur final un panel d’options qui simplifient l’édition des pages et des articles du site. Mais Si certains blocs natifs proposent déjà quelques styles prédéfinis, il est fréquent de leur ajouter des styles personnalisés afin d’adapter l’éditeur à une charte graphique ou toute autre demande du client et de lui simplifier la création de son site internet. Cet article présente un moyen rapide d’intégrer des styles customisés afin de faciliter la création et l’édition d’un site WordPress.
Dans un précédent article, nous avons déjà présenté en détail l’éditeur Gutenberg de WordPress. N’hésitez pas à consulter ce post si vous n’êtes pas familiarisé avec cet éditeur.
Création d’un bloc Gutenberg de variations de styles
Plusieurs méthodes existent pour créer un bloc Gutenberg, et chaque méthode présent son lot d’avantages et d’inconvénients.
Afin de nous simplifier la création du bloc, nous allons passer par l’outil « create-block » de WordPress.
Nous allons installer Node.js si ce n’est déjà fait en nous rendant sur https://nodejs.org/fr/.
Lorsque c’est fait, nous ouvrons le bash ou tout autre terminal afin de nous rendre sur le répertoire des plugins du site WordPress à l’aide de la directive « cd » :
~ cd /htdos/monsite/wp-content/plugins
Puis nous utilisons l’outil de création de bloc de WordPress :
npx @wordpress/create-block votre-prefix-blocs
Cet outil va installer @wordpress/scripts permettant d’écouter et de compiler votre code.
Rendez-vous ensuite au sein du répertoire créé et lancez l’écoute des modifications de votre code :
~ cd votre-prefix-blocks
~ npm run startVous devriez voir apparaître dans votre terminal un message du type :
webpack 5.88.1 compiled successfully in 50 ms
L’outil de création de blocs Gutenberg créé donc de toute pièce un répertoire de plugin, pensez donc à activer ce plugin via la page des extensions de votre site WordPress dès que vous aurez paramétré le minimum.
Comme pour tout plugin WordPress, le fichier votre-prefix-blocs.php va permettre d’initialiser votre extension.
Avec cette configuration, votre répertoire de travail Webpack sera votre-prefix-blocks/src.
Webpack compilera ensuite votre code au sein du répertoire votre-prefix-blocks/build.
Votre fichier.
À la racine de votre dossier /src se trouve un fichier index.js, créez-le s’il n’existe pas.
~ cd src
~ touch index.js
~cd ‘../’Vous pouvez bien évidemment aussi créer vos répertoires et fichiers à l’aide de votre éditeur favori (Visual Code Stidio, Code, Sublime, etc.)
Enregistrement du script des variations de style
L’idée est que nous allons nous servir des outils @wordpress/scripts, mais sans créer de bloc.
Dans votre fichier votre-prefix-blocs.php nous allons enregistrer les scripts des variations de styles.
Dans un premier script, nous commençons par appeler le script dans lequel les références à nous styles serons enregistrés. Ces enregistrements nous permettront d’y accéder depuis l’éditer de bloc Gutenberg.
Au sein du Fichier PHP l’outil create-bloc a déjà préparé l’enregistrement du fichier JavaScript qui sera généré.
Vous remarquerez que le fichier appelé réside au sein du sous-dossier « /build » puisque Webpack va compiler le code de notre fichier /src/index/js vers /build/index/js :
N.B. Actuellement votre fichier appelle register_block_type() pour enregistrer un bloc correspondant à votre déclaration. Le chemin vers le fichier build/index.js lui est passé en paramètre.
Vous pouvez conserver cette méthode si vous souhaitez créer un bloc d’édition.
// votre-prefix-blocks.php
function votre_prefix_register_block_script(){
register_block_type( __DIR__, ‘build/index.js’ );
}Dans l’éventualité où votre plugin ne vous servirait qu’à intégrer des variations, vous pouvez aussi remplacer register_Block_type() par un simple enregistrement de script :
function votre_prefix_register_block_script() {
wp_enqueue_script(
‘votre-prefix-script’,
plugins_url( ‘build/index.js’, __FILE__ )
);
}
add_action( ‘init’, ‘votre_prefix_register_block_script’ );SI vous optez pour cette seconde solution, il vous faudra appeler indépendamment le fichier CSS compilé par WebPack afin que nos variations de style de blocs soient restitués, en front-end ainsi qu’au sein de la fenêtre d’édition de Gutenberg.
function enqueue_ votre_prefixe_ block_editor_assets(){
wp_enqueue_style(
‘votre-prefixe-styles-variations’,
plugins_url( ‘build/index.css’, __FILE__ )
) ;
}
add_action( ‘enqueue_block_assets ‘, ‘enqueue_ votre_prefixe_ block_editor_assets’ ) ;Il ne reste plus qu’à enregistrer nos variations, à créer et à importer notre fichier de styles, puis à définir ces feuilles de styles en CSS ou SCSS.
Création des styles de blocs Gutenberg
Le fichier créé automatiquement par l’outil create-bloc enregistre lui aussi le bloc attendu, il est donc normal d’y retrouver une fonction registerBlockTpe.
Votre devis en 48 H chrono !
Demandez à être rappelé !
Nous préciserons ensemble votre projet
de vive voix
En fonction de la stratégie adoptée précédemment, vous pourrez supprimer cette fonction (pour ne pas créer le bloc) ou enregistrer vos styles personnalisés juste après.
La création d’un style consiste en un enregistrement, nous allons donc naturellement importer l’outil « registerBlockStyle » au début du fichier src/index.js afin de définir notre style.
Le deuxième import depuis ce fichier sera un fichier scss qui nous servira à styliser notre bloc.
N.B. L’outil @wordpress/script repose sur WebPack, nous pouvons donc utiliser directement scss pour styliser nos blocs ou nos variations.
// src/index.js
import { registerBlockStyle } from ‘@wordpress/blocks’;
import ‘./votre-prefix-blocs-variations.scss’ ;
registerBlockStyle( ‘core/quote’, {
‘name’ : ‘votre-prefixe-citation-customisee’,
‘label’ : ‘Citation Custimosée’
} ) ;Le 1er argument de registerBlockStyle est le bloc sur lequel nous appliquons notre style.
Le 2nd argument est l’objet référencement le style (label et nom).
Et c’est tout pour ce fichier !
La fonction registerBlockType prend en argument le bloc auquel s’appliqueront les styles, ainsi qu’un objet définissant la variation.
L’entrée « name » sera utilisée comme identifiant du style au sein de l’éditeur, mais il servira aussi de sélecteur CSS pour définir la feuille de style.
L’entrée « label » permettra de nommer la variation de style dans l’éditeur.
Webpack va maintenant compiler src/index.js en 2 fichiers distincts, dont build/index.css que nous avons appelé plus tôt à l’aide de l’action « enqueue_block_editor_assets ».
Définition des règles de styles de la variation
Notre exemple consiste à définir un style personnalisé pour le bloc natif de citation « core/quote ». Nous avons donc enregistré un style nommé « votre-prefixe-citation-customisee », slug que nous allons ainsi pouvoir utiliser pour identifier notre bloc de citation une fois le style sélectionné dans l’éditeur.
.wp-block-quote. votre-prefixe-citation-customisee {
padding : 3em ;
border : none ;
border-radius : 5px ;
font-style: iytalic;
color : #fff ;
background : #000 ;
}Si vous sélectionnez maintenant votre style sur un bloc de citation de l’éditeur, vous verrez votre style personnalisé appliqué.
N.B. n’oubliez pas de recharger votre page de navigateur.
Définir des styles de boutons
Les nouvelles évolutions de l’éditeur Gutenberg vous permettent de bénéficier d’un aperçu au survol des boutons par votre souri, mais ce comportement est parfois peu intuitif et vous souhaiterez peut-être voir votre style final appliqué à votre bouton de variation.
La solution sera alors de cibler le bouton de l’éditeur en lui appliquant quelques rectifications :
.block-editor-block-styles__variants .components-button.block-editor-block-styles__item[aria-label*=” Citation Custimosée”] {
display : flex ;
align-content: center;
justify-content: center;
padding : 2em 0;
border : none ;
border-radius : 5px ;
font-style: iytalic;
color : #fff ;
background : #000 ;
}Rechargez votre page, sélectionnez votre bloc de citation, et voilà ! le bouton de votre style customisé correspond désormais à vos règles CSS.
Inclure ses styles directement dans la fonction registerBlockStyle
L‘objet de la méthode registerBlockStyle propose une 3e entrée correspondant aux règles CSS à appliquer sur le bloc.
Si votre déclaration n’est pas trop importante vous pouvez l’utiliser afin d’intégrer directement vos styles en inline du rendu HTML :
registerBlockStyle( ‘core/quote’, {
‘name’ : ‘votre-prefixe-citation-customisee’,
‘label’ : ‘Citation Custimosée’,
‘inline_style’ : ‘.wp-block-quote. votre-prefixe-citation-customisee{border-radius : 10px ; background : #000, color : #fff, padding:3em}’
} ) ;Ici le style déclaré prend la forme d’un objet à 3 entrées :
- name
- label
- inline_style
Déclarer plusieurs styles pour le même bloc
Il est souvent nécessaire de mettre plusieurs styles à disposition de l’utilisateur afin de lui permettre de styliser sa page ou son article sans avoir à paramétrer son bloc. Pour cela rien de plus simple.
Il suffit de définir un tableau de styles et de le traiter avec la méthode Array.forEach boucle forEach()
La fonction callback de cette méthode prendra en argument l’élément courant du tableau, il sera donc très simple de l’assigner au bloc souhaité :
const myQuoteStyles = [
{
‘name’ : ‘votre-prefixe-citation-customisee-sombre’,
‘label’ : ‘votre-prefixe-dark-custom-quote’
},
{
‘name’ : ‘votre-prefixe-citation-personnalisee-claire’,
‘label’ : ‘votre-prefixe-light-custom-quote’
}
] ;