Gutenberg 10.7 s’intègre au répertoire de compositions et présente de nouveaux contrôles de conception de blocs

created with gimpTemps de lecture estimé : 4 minutes

Gutenberg 10.7 a atterri le 26 mai. En quelques heures, l’équipe de développement a également publié la version 10.7.1 de l’extension avec quelques corrections de bogues. La dernière mise à jour se concentre principalement sur les travaux qui devraient atterrir dans WordPress 5.8 en juillet.

Ceci est la traduction d’un article de Justin Tadlock sur WP Tavern

La date limite de gel des fonctionnalités pour le cycle de développement WordPress actuel est passée mardi. Cela devrait signifier qu’aucune nouvelle fonctionnalité au-delà de Gutenberg 10.7 ne sera intégrée à la plateforme principale. WordPress 5.8 Beta 1 est prévu pour le 8 juin.

Cette version donne l’impression que l’équipe a peaufiné l’interface et l’expérience pour le mieux. Les utilisateurs peuvent également s’attendre à plusieurs améliorations, telles que des options de conception de blocs supplémentaires.

Intégration du répertoire des compositions de blocs

Gutenberg sert maintenant ses compositions de bloc par défaut via le répertoire des modèles sur WordPress.org. Cela déplace leur développement en dehors de l’extension et du noyau de WordPress, ce qui signifie que les concepteurs peuvent les itérer sans qu’un utilisateur ait besoin de mettre à jour. Ils auront toujours la dernière version disponible depuis l’éditeur.

Éditeur WordPress avec inserteur de motifs. Insertion d’une composition dans le canevas de contenu.

Le répertoire de compositions sera un outil pratique pour les utilisateurs finaux. Pour beaucoup, cela servira probablement de chemin vers la création de mises en page plus complexes dans l’éditeur WordPress. Pour le moment, il ne contient que 10 compositions. Cela changera une fois qu’il sera ouvert aux soumissions de la communauté.

Shaun Andrews a partagé une partie du travail de conception en cours pour le répertoire, et c’est magnifique. J’ai hâte de voir le résultat final lors de son lancement.

Répertoire de modèles avec un grand en-tête de héros et une grille de modèles. Travaux récents sur le répertoire des compositions de blocs.

Remarque à propos des compositions de blocs : il existe actuellement un bogue qui peut empêcher certains de ceux fournis avec des thèmes de s’afficher dans l’outil d’insertion.

Nouveaux contrôles de conception de bloc

La version 10.7 introduit plusieurs nouveaux contrôles de conception pour les blocs. La fonctionnalité la plus intéressante pour beaucoup sera le contrôle des marges pour un contrôle plus précis de l’espacement. Les auteurs de thèmes doivent définir la clé settings.spacing.customMargin sur true dans leurs fichiers theme.json pour activer cela.

Actuellement, seuls les blocs Titre du site et Slogan du site prennent en charge les contrôles de marge. Cependant, maintenant que la fonctionnalité initiale est arrivée, nous devrions nous attendre à ce que d’autres emboîtent le pas dans les versions futures.

Modification des blocs Titre du site et Slogan dans l'éditeur WordPress. Contrôles d’espacement et de typographie pour le titre et le slogan

Le bloc de titre du site comporte également des commandes de typographie.

L’équipe de développement a mis à niveau le bloc Colonne avec quelques nouvelles options. Les utilisateurs peuvent désormais personnaliser les marges intérieures et les couleurs des colonnes individuelles.

Modification de l'espacement et des couleurs des blocs de colonnes dans l'éditeur WordPress. Personnalisation des colonnes individuelles.

L’une des améliorations les plus discrètes est l’une de mes modifications préférées. Le bloc Média & Texte a reçu une nouvelle option de bloc « largeur du média » dans la colonne latérale. Cela rend l’obtention de la largeur correcte avec une bien meilleure expérience que l’utilisation de la poignée de glissement dans le canevas de contenu.

Dans l'éditeur WordPress, ajuster la largeur du média pour le bloc Média & Texte. Ajustement de la largeur du média dans le bloc Média & Texte

Je peux commencer à utiliser davantage ce bloc maintenant. J’avais hésité à m’en éloigner pour tout cas d’utilisation au-delà des réglages de largeur par défaut.

Une autre amélioration bienvenue est l’ajout de Couverture en tant qu’option de transformation pour le bloc Groupe. Cela n’apparaîtra que si le bloc a un arrière-plan.

Guide de bienvenue de l’éditeur de modèles

Message de bienvenue superposé à la nouvelle fonctionnalité de l'éditeur de modèles. Message de bienvenue pour l’éditeur de modèles.

Le mode d’édition de modèle sera l’une des fonctionnalités les plus mises en évidence pour WordPress 5.8. Il permet aux utilisateurs de passer de l’édition de contenu à l’édition de modèles sans jamais quitter l’écran de publication. Par conséquent, les utilisateurs auront besoin d’un guide de bienvenue pour expliquer la nouvelle fonctionnalité.

Actuellement, le message se lit comme ceci :

Bienvenue dans l’éditeur de modèles

Les modèles expriment la mise en page du site. Personnalisez tous les aspects de vos articles et pages à l’aide des outils de blocs et de compositions.

C’est un point de départ solide, mais il n’explique pas complètement en quoi consiste ce mode. Je m’attends à ce que l’équipe de développement adoucisse un peu les choses, peut-être ajouter une ou deux diapositives supplémentaires, ou même un lien vers une page de documentation dédiée sur WordPress.org. Aider les utilisateurs à partir du bon pied avec cette nouvelle fonctionnalité devrait atténuer la confusion et alléger le travail du support.

Il y a actuellement un appel ouvert à des volontaires pour fournir des commentaires sur l’éditeur de modèles lors de la création d’une page d’atterrissage de type portfolio (voir mes résultats). Assurez-vous de vous impliquer si vous pouvez épargner une demi-heure ou plus.

Les boutons bloquent les utilisations de column-gap

Quatre blocs de boutons alignés dans l'éditeur WordPress avec un espacement correct. Écart entre les boutons.

Il s’agit davantage d’une note de développeur de thème, mais certains utilisateurs ont peut-être remarqué que des lignes de boutons ne s’étendent pas jusqu’au bord de leur conteneur. Dans certaines situations, au moins.

Essentiellement, l’espace entre les blocs individuels des boutons utilisait un peu une solution de marge CSS à l’ancienne et hackée pour créer l’espace entre chacun. Dans le monde moderne des mises en page flex et grille, c’est quelque chose que la plupart des concepteurs redoutent de voir. Cela complique les choses et rend le CSS plus encombré, en particulier si vous souhaitez effectuer des ajustements en fonction de la taille de l’écran.

Je souligne ce changement parce que c’est l’une de ces étapes où le système de bloc est de plus en plus raffiné. Et cela pourrait être le début de choses plus excitantes à venir pour les auteurs de thèmes.

« C’est génial, c’est beau, les créateurs de thèmes vont adorer», a écrit Joen Asmussen dans le ticket. « À un moment donné, une fois la poussière retombée, nous devrions voir si cet écart pourrait devenir une propriété globale des styles; comme il est si facile à changer et résilient, ce serait bien de la gérer de manière aussi soignée. »

C’est un signe bienvenu de voir l’utilisation de column-gap dans l’extension. Bien sûr, il pourrait être utilisé row-gap pour un espacement vertical au lieu de marges dans les cas où les boutons s’étendent au-delà d’une seule ligne.

Maintenant, pouvons-nous faire la même chose pour les blocs Colonnes, Galerie et Boucle de requête ? La normalisation du système pour les gouttières / les espaces entre les éléments flexibles peut économiser des dizaines et des dizaines de lignes de code à long terme.

Publications similaires