Les compositions de Gutenberg, des patterns pour créer vos pages WordPress plus facilement

Depuis l’arrivée du nouvel éditeur Gutenberg, la création de site de site internet sur WordPress connaît de profonds et incessants changements aux premiers rangs desquels figure l’implémentation des compositions Gutenberg. Aussi appelées « patterns » ou « motifs », les modèles de compositions Gutenberg offrent à l’utilisateur une facilité de mise en page ainsi qu’un outil d’intégration relativement simple au développeur ou au webmaster WordPress. Je vous propose ici un tour d’horizon de cette fonctionnalité qui séduit toujours plus d’utilisateurs et de développeurs de la communauté WordPress.

Qu’est-ce qu’une composition ou pattern Gutenberg ?

Le 16 juillet 2020, Riad Benguella annonçait l’intégration des paternes de compositions à la version 5.5 de WordPress (patterns en anglais) dans le but de « permettre à l’utilisateur de construite et partager des blocks de mise en page prédéfinis ». Cette publication relativement courte présentait aussi aux développeurs le moyen de créer eux-mêmes ainsi que des catégories personnalisées pour leurs compositions et d’éditer aux leur propres patterns à l’aide du code source HTML de l’éditeur Gutenberg.

Définition d’un pattern Gutenberg

Techniquement, une composition Gutenberg est un groupe de blocs agencés, préformatés, pour définir au sein de l’éditeur WordPress, une mise en page complète ou partielle du document en cours d’édition (une page, un article ou autre contenu spécialisé).

Avec les compositions, il devient possible de construire une page, des sections ou certains groupes de blocs à l’aide d’éléments prédéfinis, pour en modifier ensuite l’apparence et le contenu et d’enrichir nos pages WordPress de façon simplifiée.

L’objectif des compositions Gutenberg est donc d’aider les auteurs ou webmasters à créer plus rapidement des layouts (des mises en page) tout en leur permettant de personnaliser ces blocs et groupes de blocs spécifiquement pour le document courant.

Confusion entre les blocs réutilisables et les compositions

L’information précédente est d’importante parce qu’elle concerne directement l’utilisation de l’éditeur Gutenberg et, comme le montrent les commentaires de la publication officielle de Riad Benguella, parce qu’une confusion est souvent faite entre le concept de composition et de bloc réutilisable.

Un bloc Gutenberg réutilisable sera disponible sur l’ensemble du site de façon identique. Ce qui signifie qu’après sa création, toute modification effectuée sur un bloc ou du groupe de blocs transformé en bloc réutilisable, depuis la page courante ou n’importe quel autre endroit du site WordPress, affectera le bloc original.

À l’inverse, une composition Gutenberg sera considérée comme un modèle de base, modifiable à chaque utilisation, quelle que soit la page et sans altération du pattern original. On parle donc ici de « modèle » ou de « motifs » Gutenberg, à l’image de ceux que l’on trouve sur les principaux theme builder du marché comme Divi.

Intégrer une composition à une page Gutenberg

L’onglet des Gutenberg se trouve dans l’outil d’insertion des blocs. On comprend tout de suite que l’on utilisera ces compositions comme les autres blocs de l’éditeur WordPress. Gutenberg vous propose actuellement une vingtaine de groupes de composition mais nous allons voir qu’il est assez simple de créer nos propres blocs à partir de mises en page, d’ajouter de nouveaux patterns au site WordPress à l’aide du répertoire des compositions du site WordPress ou de plugins gratuits, ou encore, pour les utilisateurs plus avancés, de coder nos propres modèles de composition Gutenberg.

Pour intégrer un pattern Gutenberg à une page ou un article, il suffit, comme pour n’importe quel bloc Gutenberg, de se positionner dans la zone cible de la page, et de rechercher la composition à insérer par son nom, sa catégorie ou l’un de ses mots clés, et de la sélectionnert depuis l’onglet de recherche.

Sachez aussi que tous les blocs contenus dans un groupe de composition Gutenberg seront éditables à l’aide de la barre d’option du bloc mais aussi la barre latérale aussi appelée l’inspecteur de propriétés. Vous pourrez bien évidemment modifier aussi leur contenu pour y intégrer le vôtre, cela va de soi.

Un nouveau répertoire WordPress des compositions Gutenberg

SI vous ne trouvez pas votre bonheur parmi des compositions proposées nativement sur votre site WordPress, sachez que vous pouvez explorer la page WordPress dédié au patterns Gutenberg.

Son utilisation est très simple puisqu’elle présente à ce jour 1740 modèles de compositions de pages  ou de sections, que l’utilisateur pourra copier d’un simple clic avant de les coller (Ctrl + v ou Cmd + v) directement dans son éditeur Gutenberg.

Attention néanmoins à la compatibilité du viewport des patterns disponibles avec votre thème WordPress, certains d’entre eux semblent poser encore quelques soucis. Attendez donc encore un tout petit peu avant d’utiliser vos compositions Gutenberg avec un thème en Full Site Editing.

Créer ses propres compositions Gutenberg avec le code source de l’éditeur

Les utilisateurs WordPress les plus avancés voudront sans doute sauvegarder leurs propres compositions pour optimiser la création de leurs sites internet, ou les mettre à disposition de leurs clients.

Heureusement la fonction WordPress register_block_pattern leur permettra sans de créer leur composition sans aucune difficulté.

N.B. cette méthode nécessite de s’arrimer à l’action « init » de WordPress :

Je vous présente d’abord la fonction avant de revenir sur ses arguments.

function jst_register_block_patterns(){
	register_block_pattern( ‘my-domain/my-slug’, [
	‘title’ => __( ‘Mon Titre de pattern, textdomaine’ ),
	‘description’ => _x( ‘Ma description’, ‘Mon contexte’, ‘textdomaine’ ),
	‘content’ => ‘< !—le code source de mon pattern… ’,
	‘categories’ => array( ‘layout’, ‘ma-cetagorie’),
	‘blockTypes’ => array( ‘core/template-part/header’, ‘core/button’ ),
	‘postTypes => [ ‘post’, ‘page’, ‘my-custom-type’ ],
	‘keywords’ => [ ‘Mise en page’, ‘modèle’, ‘template’ ] ),
	‘viewportwidth’ => 1024
] ) ;
}
add_action( ‘init’, ‘jst_register_block_patterns’, 10 );

Le titre et la description ne poseront sans doute de problèmes à personne, mais n’oubliez tout de même pas de préparer vos chaînes à la traduction au cas où vous partageriez votre composition.

Pour fournir un contenu à votre composition vous devrez vous repérer dans l’éditeur Gutenberg afin d’isoler les blocs qui correspondent au « motif » choisi dans la page.

N’hésitez pas à recourir à l’outil « Vue en liste » en haut à gauche de l’éditeur pour repérer les blocs qui vous intéressent.

Passez ensuite en mode « Éditeur de code » après avoir cliqué sur le menu à point à l’extrême droit de l’éditeur Gutenberg, pour copier les éléments HTML que vous souhaitez intégrer à votre composition.

Ouvrez vos guillemets et coller ensuite ce code dans la section « content » de votre fonction, c’est ce contenu qui correspondra à ma composition Gutenberg créée.

 « categories » du tableau de notre fonction attend un tableau de catégories. De base, cinq catégories existent pour les compositions Gutenberg mais vous pourrez créer vos propres catégories à l’aide de la fonction register_block_pattern_category :

function jst_register_block_pattern_category(){
	register block_pattern_category(
		‘category-slug’,
		array( ‘label’ => __( ‘Ma catégories’, ‘textdomain’ )
	) ;
}
add_action( ‘init’, ‘jst_register_block_pattern°_category’ );

 « keywords » vous permettra d’inclure des mots clés afin de faciliter la recherche de votre composition parmi les patterns présents dans l’onglet.

 « postTypes » permettra de renseigner un tableau de types de contenus autorisés à utiliser la composition Gutenberg.

« viewportwidth » permettra de spécifier une largeur cible pour le modèle prédéfini.

Comme vous le voyez la création de patterns personnalisés pour Gutenberg est assez simple,  mais vous devrez tout de même intégrer un peu de code dans un plugin fait maison ou au sein du fichier functions.php de votre thème courant, pour parvenir à vos fins avec cette méthode.

Dès l’enregistrement de votre pattern de composition, vous pourrez le retrouver dans l’onglet « Compositions » de l’éditeur en le recherchant par son, un mot clé ou sa catégorie.

Tout cela peut sembler un peu compliquer pour les utilisateurs débutants ou les utilisateurs non développeurs. Un certain nombre de plugins viennent donc désormais étendre la bibliothèque native des compositions de Gutenberg. Certaines de ces extensions fournissent également des blocs additionnels mais cela fera prochainement l’objet d’un autre article.

Des plugins utiles

L’utilisateur final de Gutenberg ne sera pas en reste puisque des extensions permettant de bénéficier d’une interface pour construire nos propres compositions Gutenberg commencent à voir je jour.

À titre d’exemples, nous ne nous attarderons ici que sur trois de ces plugins WordPress facilitant la création de composition Gutenberg mais n’hésitez pas à explorer la page officielle des extensions WordPress pour découvrir de nouvelles pépites 😉.

Build & Control Block Patterns

Build & Control Block Patterns est un plugin totalement gratuit. Les développeurs se targuent de proposer plus de 850 compositions supplémentaires pour l’éditeur Gutenberg.

BlockMeister

BlockMeister propose une interface simple permettant de sauvegarder un groupe de blocs Giutenberg au sein d’un pattern, de le catégoriser, lui fournir des mots clés, etc. Des offres dites « pro » allant de 20 à 100 euros par an sont disponibles sur le site du développeur.

MyWP Block Pattern

MyWP Block Pattern est le plugin de l’agence Whodunit, permet de sauvegarder mises en pages complètes ou des groupes de blocs dans des patterns, en passant par la barre latérale du plugin.

Les compositions Gutenberg, un outil sans doute en pleine évolution

Nous faisions remarquer dans notre précédent article sur Gutenberg, que le nouvel éditeur de WordPress était en cours d’intégration sur l’ensemble du CMS afin de proposer très prochainement une expérience Full Site Editing sur la plateforme. Déjà disponible en beta, ce système sera bientôt stabilisé et il y’a fort à parier que les compositions Gutenberg joueront un rôle majeur dans les prochaines versions de WordPress.