Gutenberg 12.7 ajoute la sélection multi-blocs dans la vue de liste et apporte la prise en charge de la marge aux blocs de groupe

Deux autres semaines se sont écoulées et une autre mise à jour du plugin Gutenberg est dans les livres. Cette version n'est pas aussi riche en fonctionnalités que la précédente, mais elle semble globalement solide. Outre un problème de rupture, la version 12.7 inclut plusieurs améliorations intéressantes.

La dernière mise à jour inclut quelques travaux préliminaires pour un nouveau moteur de style. Il s'agit d'un projet à plus long terme qui devrait améliorer la sauvegarde et le rendu des styles de blocs.

Les éditeurs de modèles et de sites doivent afficher des modèles sur des blocs dans l'insertion rapide sous certaines conditions, comme au niveau racine d'un modèle. Cependant, je n'ai pas pu voir cela en action. Je devrai peut-être rafraîchir mon installation.

Le bloc Colonnes prend également en charge les options de largeur de bordure, de style, de couleur et de rayon. J'ai hâte que ce soit finalement le cas pour tous les blocs.

Multi-sélection dans la vue de liste

Les utilisateurs peuvent désormais sélectionner plusieurs blocs dans la vue de liste lorsque la Shift est sélectionnée. Une fois la touche enfoncée, les utilisateurs peuvent utiliser la souris pour cliquer sur d'autres, en les ajoutant ou en les supprimant. Les touches fléchées haut/bas sont une alternative à l'utilisation de la souris.

L'amélioration permet également aux utilisateurs de glisser-déposer le groupe de blocs sélectionné.

Images brisées

J'ai baissé ma garde. Je me suis familiarisé avec WordPress et Gutenberg en gérant une partie de ce travail CSS fondamental que j'avais toujours inclus dans les thèmes précédents. Les choses semblaient aller si bien.

Gutenberg, toi et moi avons eu une belle séquence où tu n'as rien cassé. Maintenant, il est temps de remettre à zéro l'ancien compteur de "libérations sans incident".

Auparavant, la feuille de style de la bibliothèque de blocs par défaut fournissait des styles réactifs de base pour les images. Ce CSS ne cible désormais que les balises <img> si elles incluent wp-image- dans une classe. Ceci est particulièrement problématique pour les images dans certains modèles de blocs. Le cas peut être le même pour d'autres instances d'image.

Le sélecteur précédent était trop large et cassait les images dans les plugins tiers.

Le meilleur plan d'action consiste pour les auteurs de thèmes à inclure le CSS suivant pour les images :

 img { max-width: 100%; height: auto; }

Marges de bloc de groupe

La personnalisation des marges est presque synonyme du terme « conception Web ». Le bloc Groupe - le conteneur phare - manquait jusqu'à présent de support pour le contrôle des marges. Certains ont contourné cette limitation en utilisant un espaceur, mais cela ne fait qu'augmenter l'espace entre les blocs.

La plupart des problèmes concernaient la réduction des marges. Les concepteurs de thèmes ont souvent eu besoin d'employer des solutions de contournement, un problème que Nick Diego a mentionné dans le ticket :

Les développeurs de thèmes (moi y compris) ont recours à des "classes magiques" pour mettre à zéro ou modifier les marges sur les blocs. Autoriser les thèmes à accepter la prise en charge de la marge de groupe offrira une plus grande flexibilité et réduira la dépendance aux CSS/classes personnalisées dans la feuille de style du thème.

La prise en charge des marges est toujours manquante pour de nombreux autres blocs, y compris les paragraphes. Les utilisateurs peuvent toujours les envelopper dans un groupe et le modifier pour l'instant.

Les transformations de bloc maintiennent les classes

Gutenberg 12.6, sorti il ​​y a deux semaines, a vu beaucoup de travail sur l'amélioration des transformations de bloc, une fonctionnalité qui permet aux utilisateurs de passer d'un bloc à un autre. L'une des principales améliorations de la mise à jour précédente comprenait le maintien de la taille de la police et des options de couleur.

La version 12.7 ajoute des classes CSS personnalisées au mélange. Cela inclut les utilisateurs ajoutés manuellement et ceux ajoutés par le mécanisme de styles de blocs personnalisés.

L'avantage de conserver des classes de style de bloc personnalisées est que le nouveau bloc conserve le style sélectionné s'il est pris en charge. L'inconvénient est que cela devient une classe indésirable sinon.

Il y a encore quelques options manquantes que j'aimerais voir maintenues grâce à la transformation de blocs textuels. En particulier, conserver le même alignement du texte aiderait mon flux de travail.

Les thèmes peuvent enregistrer des modèles à partir du répertoire

Gutenberg 12.7 permet aux auteurs de thèmes de charger des modèles à partir du répertoire de modèles WordPress.org pour leurs utilisateurs. Ceux ajoutés apparaîtront dans leurs catégories respectives dans l'inséreuse.

Actuellement, il n'existe aucune méthode pour mettre en surbrillance les modèles sélectionnés, et ils n'apparaîtront qu'en fonction de l'ordre dans lequel ils ont été enregistrés. Malheureusement, les modèles en vedette de WordPress.org apparaissent plus haut dans la liste, même s'ils n'ont pas été sélectionnés par le thème.

C'est une première itération solide. L'intégrer maintenant permettra aux auteurs de thèmes de fournir des commentaires et aux contributeurs de s'appuyer sur la base.

Le theme.json inclut une nouvelle documentation pour l'enregistrement de ces modèles.

Enveloppes d'alignement supprimées

Ce n'est un secret pour personne que je suis un fanboy de bloc. Cependant, il y a eu un problème de longue date qui m'a presque donné envie d'abandonner le système. En fait, j'ai complètement arrêté de développer un thème de bloc gratuit l'année dernière en grande partie à cause de ce problème.

Gutenberg 12.7 supprime le wrapper supplémentaire <div> pour les blocs larges et pleine largeur dans l'éditeur, au moins pour les thèmes qui prennent en charge la fonctionnalité de mise en page. Cet élément wrapper créait auparavant un conflit entre les conceptions arrière et frontale. Dans certains cas, les auteurs de thèmes ne pouvaient pas les styler de manière cohérente.

Par exemple, si un auteur de thème voulait donner un espacement supplémentaire à un bloc frère (un qui suit un autre), il était impossible de le cibler dans l'éditeur avec CSS. L'emballage supplémentaire signifiait qu'ils n'étaient plus frères et sœurs dans la structure du document.

La fonctionnalité blockGap plus récente, introduite dans WordPress 5.9, a atténué dans une certaine mesure les problèmes liés à l'espacement. C'était assez soulagé de tolérer le système brisé, sachant que certaines conceptions étaient encore impossibles.

Aujourd'hui marque le début d'un nouveau monde de possibilités pour les designers. C'est un barrage routier que je suis heureux de voir laissé derrière. Pour la plupart, je veux juste revoir et mettre en œuvre plusieurs vieilles idées.