Blocs Gutenberg

L’éditeur de WordPress s’appuie sur le concept de blocs (souvent dits blocs Gutenberg). Certains blocs ont été crées pour l’Inserm et d’autres ajoutés par des plugins. L’apparence des blocs est de plus en partie dépendante du thème Inserm.

Table des matières

À propos des blocs

Dans WordPress, on ajoute du contenu en insérant des « blocs » dans son contenu. Les blocs peuvent être n’importe quoi : un paragraphe de texte, une image, un tableau, un titre, mais aussi un widget ou une colonne. Tout contenu créé avec l’éditeur est un assemblage de blocs. Voir le site de démo.

Chaque bloc correspond à un type particulier et dispose de paramètres spécifiques. Les paramètres d’un bloc dépendent :

de son type. Exemple : les paramètres gras et italique sont disponibles des blocs de texte, mais pas sur les blocs vidéo ou image.
du thème. Exemple : le réglage couleur du texte est disponible sur le bloc paragraphe uniquement si cela a été prévu par le thème.

Il est important de comprendre que les blocs peuvent :

ajouter du contenu, de la mise en forme ou des fonctionnalités
s’imbriquer les uns dans les autres (système parent / enfant)
être natifs à WordPress ou ajoutés par un tiers

Exemple : On peut créer des colonnes via le bloc colonnes, et insérer dans chaque colonne des blocs image. Si le bloc colonnes natif ne suffit pas, on peut trouver un bloc tiers faisant lui aussi des colonnes.

On peut ajouter des blocs à WordPress via l’annuaire des plugins. Il y a 2 options : soit installer un plugin qui ajoute un ensemble de blocs ; soit installer un plugin qui ajoute un seul bloc (voir l’annuaire des plugins à un seul bloc).

Documentation WP

Usage avancé

Il existe des assemblages complexes de blocs appelés « compositions » (block pattern). Ces assemblages prêts à l’emploi s’appuient sur les blocs déjà installés et permettent d’ajouter rapidement des compositions complexes. Ils peuvent être installés par des plugins ou des thèmes.

Exemple : un « Encadré à fond bleu » peut être une composition. Cette composition crée un bloc groupe, lui donne un fond bleu par défaut, et ajoute quelques blocs paragraphes.

WordPress propose aussi des « blocs réutilisables ». Il s’agit de blocs ou de compositions dont le contenu est synchronisé entre plusieurs pages. Cela permet d’ajouter le même texte à plusieurs endroits du site.

Exemple : un site veut mettre une incitation à faire un don en bas de chacun de ses articles. Il écrit son incitation une fois et la met dans un bloc réutilisable. En ajoutant ce bloc à la fin de ses articles, le texte sera d’emblée écrit. Si le texte est modifié à un endroit, le changement se propagera sur toutes les pages où le bloc est présent.

Les blocs sur inserm.fr

Nous avons fait une série de choix structurants sur inserm.fr :

Toujours privilégier les blocs natifs
Ne jamais installer de pack de blocs
Minimiser l’usage des blocs non natifs
Si inévitable, installer un plugin mono-bloc

Privilégier les blocs natifs : ces blocs sont natifs et sont donc plus fiables à long terme (qualité ++, évolution ++, risque d’abandon du bloc –). Si on doit faire une migration des contenus, c’est plus sûr.

Ne jamais installer de pack de blocs : ces packs contiennent des dizaines de blocs, alors qu’on n’en veut souvent qu’un. Ils alourdissent le site, demandent des mise à jour, et font souvent doublon avec le natif.

Minimiser l’usage des blocs non-natifs : chaque bloc non-natif est une dépendance et un risque lors des mises à jour / évolution. Il faut les utiliser le moins possible, même s’ils sont disponibles.

S’il est inévitable d’ajouter un bloc : préférer un plugin mono-bloc sobre, qui minimise les fonctionnalités. Cela simplifiera la migration s’il devient plus tard possible de remplacer ce bloc par un bloc natif.

Blocs ajoutés par un plugin

Bloc	Plugin associé	Usage et perspectives
~~Table des matières~~	~~GutenTOC~~	~~Pour faire TDM. Remplacement par bloc natif quand dispo.~~
Accordéon	Accordion Blocks	Faire des accordéons. Utile.
FAQ	SEOPress ?	Ne pas utiliser

Blocs crées pour l’Inserm

L’Inserm a demandé la création de certains blocs pour ses besoins particuliers. La documentation Be API et les specs fourniront plus d’info.

À savoir : Les blocs créés pour l’Inserm n’utilisent pas la même technologie que les blocs natifs. Cela explique leurs différences d’interfaces.

Bloc	Usage
Push Article	Remonte un contenu, son image à la une, et ses métas. Sert principalement sur la page d’accueil.
Press Feed	Remonte le dernier communiqué de la Salle de Presse, avec son images et ses métas.
File external	Télécharger un fichier hébergés sur un autre site. Imite le rendu du bloc natif `Fichier`.
Facet search	Ajoute un moteur de recherche FacetWP. Utilisé sur la home (recherche dossiers) et dans des widgets.
Same subject	Bloc abandonné. À supprimer.

Techniquement, un block natif est fait avec du ReactJS. Un bloc Inserm est fait avec des champs personnalisés (ACF). On ne peut donc pas s’appuyer sur la documentation officielle pour comprendre le fonctionnement technique d’un bloc Inserm.

Masquer un bloc dans l’éditeur

Un utilisateur peut masquer un bloc depuis l’éditeur en faisant Options > Préférences > Bloc (gestionnaire de blocs).

Une fois un bloc masqué, il n’est plus proposé à l’utilisateur. L’utilisateur reste néanmoins capable d’éditer ou modifier ce bloc s’il entre dans un contenu où le bloc est présent.

Les comptes des chargés de communication sont configurés pour masquer la plupart des blocs (widget, thème, design, etc.) et ne laisser que les blocs fondamentaux. (Août 2022)