Expertises : savoir faire et faire savoir Savoir-faire

Gutenberg et l'univers merveilleux des blocks WordPress

Gutenberg est l’éditeur de contenu de WordPress qui s’est généralisé depuis la version 5 de WordPress.

Si vous avez manqué un épisode ou si vous avez besoin de vous rafraîchir la mémoire je ne serais trop vous conseillez gogutenberg.com.

De plus une lecture de la doc et des key concepts sera utile pour bien comprendre l’approche de la communauté Gutenberg. C’est par là: wordpress.org/gutenberg/handbook/designers-developers.

Ce mercredi 8 mai 2019 est un date importante pour l’adoption de Gutenberg par la communauté de développeur WordPress car cela correspond à la Release officielle de ACF 5.8 qui apporte le support de Block Gutenberg à ACF.

L’occasion pour moi de partager avec vous notre approche quant à l’utilisation de Gutenberg.

Un grand merci à Bill Erickson pour ses publications si riches et complètes. Une synthèse est dispo ici : www.billerickson.net/building-a-gutenberg-website.

Dans quel cas utilisons nous Gutenberg ?

Gutenberg est un éditeur de contenu basé sur des block (block-based content editor). Ce n’est pas un page builder ! Cela n’a donc pas vocation à systématiquement remplacer les pages builders elementor ou divi.

Ceci dit, nous utilisons Gutenberg dès que le client veut avoir la main sur la mise en page ! cad presque tout le temp car Gutenberg remplace facilement ce que nous faisions avant à l’aide de templates spécifiques / groupes de champs ACF spécifiques.

Cela apporte des avantages indéniables :

  • Pour l’édition des contenu qui devient plus souple et plus intuitive
  • Pour le développement, en terme de rapidité de mise en œuvre, de modularité et de réutilisation.

Ceci ci, il y a des cas où il sera préférable de se passer de Gutenberg, notamment en cas de mise en forme complexe comme souvent la page d’accueil. Pour désactiver sur un template donné ou sur un postId donné : www.billerickson.net/disabling-gutenberg-certain-templates

Comment utilisons nous Gutenberg ?

Un thème “Gutenberg ready”

En premier lieu, un des prérequis est que le thème utilisé pour le projet soit « Gutenberg ready».

Cela passe par un peu de CSS et notamment par :

Une bonne synthèse des aspects à prendre en compte nous a été faire par nos amis de chez deliciousBrains : deliciousbrains.com/preparing-wordpress-themes-gutenberg.

Cf également www.billerickson.net/getting-your-theme-ready-for-gutenberg et wordpress.org/gutenberg/handbook/designers-developers/developers/themes/theme-support

Ne pas se jeter sur des blocks customs !

En second lieu, comme toujours avec WordPress, l’important est de s’inscrire dans la philosophe du CMS et pour cela le mieux est d‘utiliser les blocs préexistant dans Gutenberg. Il s’agit des blocs « core » cad :

  • Les blocs « Common »
  • Les blocs « Formatting»
  • Les blocs « Layout Eléments »
  • Les blocs « Widgets »
  • Les blocs « code»

Cela représente en soit un panel de bloc assez complet qui peut s’avérer tout à fait suffisant pour certains site. Pour en savoir plus sur chaque type bloc et les options qu’ils proposent voici une référence complète : gogutenberg.com/blocks

De plus, Il est possible, au besoin, de surcharger les blocks préexistants afin de les personnaliser / adapter à nos besoins front end . Nos amis suisses de chez Antistatique on fait un Tutorial simple et efficace : antistatique.net/fr/nous/bloggons/2019/01/29/gutenberg-override-le-rendu-des-core-blocks.

Créer des blocks customs simplement

Enfin, sans grande surprise, nous exploitons au maximum ACF 😀

Je vous invite à RTFM car, comme d’hab avec Elliot Condon, c’est clair et précis : www.advancedcustomfields.com/resources/blocks

D’autres lectures complémentaires peuvent être utiles :

Attention, ca reste assez neuf tout ca et donc il y a, à l’heure actuelle quelque problèmes pas forcément anodins :
www.advancedcustomfields.com/resources/known-issues

Comment on s’y prend pour maîtriser / limiter ce que l’utilisateur est habilité à faire ?

Plusieurs approches complémentaires sont disponibles pour empêcher l’éditeur d’avoir trop de liberté / de courir trop de risque que tout soit cassé.

Restreindre les blocs disponibles

Il est possible de décider en global pour le site ou selon les posts édités de restreindre l’éditeur pour qu’il ne soit possible de n’ajouter que tel ou tel type de bloc. Voici un tutorial assez complet: rudrastyh.com/gutenberg/remove-default-blocks.html

Un plugin permet également d’aller dans ce sens (mais à noter qu’il vient avec son cortège de blocs..) : wordpress.org/plugins/advanced-gutenberg

Exploiter les “Block templates”

Les templates de blocs vont notamment permettre de définir le contenu par défaut de l’éditeur lors de la création d’un nouveau post, c’est à dire de définir des blocs par défaut. L’une des fonctionnalités particulièrement intéressante est la possible de locké le layout du template, l’éditeur peut alors éditer les blocs mais pas revoir la structuration de la page.

Voici :

A noter que cette notion de block template n’est pas encore (à ce jour en mai 2019) totalement intégrée à la notion de page template ce qui est quelque peu frustrant et à tendance à encourager à l’utilisation de Custom Post Type plutôt que de page pour exploiter cela à fond.

Et si on veut aller plus loin ?

Sage et Twig

Pour les projets Sage 9 , le plugin WP sage-acf-wp-blocks vous permet :

  • de créer des blocks simplement en créant le fichier de template (sans avoir à passer par du register…)
  • d’utiliser twig comme on en a désormais l’habitude 😀

Pour utiliser des blocks tout fait sans avoir à les coder soit même :

  • Différentes initiatives existes, il est encore un peu tôt pour juger de celles qui deviendrons les plus populaire
  • A souligner l’existence d’un projet très récent acfblocks: wordpress.org/plugins/acf-blocks. A suivre…

Elementor

Il n’est pas tjs pertinent de devoir choisir entre Gutenberg et Elementor : , il faut savoir utiliser les outils à disposition à bon escient. Pour cela voici un plugin qui vous permettra d’avoir Elementor à l’intérieur d’un block Gutenberg : wordpress.org/plugins/block-builder.

Personnalisation du front office

Il existe des plugins permettant de gérer simplement a quel profil utilisateur affiche quel bloc : wordpress.org/plugins/user-block-visibility.