Gutenberg 10.7 a atterri la semaine dernière. En quelques heures, l'équipe de développement a également publié la version 10.7.1 du plugin 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.

Article intégralement traduit depuis le site anglophone WordPress Tavern

Auteur de l'article : Justin Tadlock

Temps de lecture : 5 minutes

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 plate-forme 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 modèles de blocs

Gutenberg sert maintenant ses modèles de bloc par défaut via le répertoire des modèles sur WordPress.org. Cela déplace leur développement en dehors du plugin 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 auprès de l'éditeur.

Éditeur WordPress avec inserteur de motifs.
Insertion d'un motif dans le canevas de contenu.

Le répertoire de modèles 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 motifs. 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 l'annuaire , 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 modèles de blocs.

Remarque à propos des modèles de blocs: il existe actuellement un bogue qui peut empêcher certains de ceux fournis avec des thèmes de s'afficher dans l'inséreuse.

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 settings.spacing.customMarginclé sur truedans leurs theme.jsonfichiers 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 en majuscules .

L'équipe de développement a mis à niveau le bloc Colonne avec quelques nouvelles options. Les utilisateurs peuvent désormais personnaliser le remplissage 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 barre latérale. Cela rend l'obtention de la largeur correcte 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 support 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 paramètres de largeur par défaut.

Une autre amélioration bienvenue est l' ajout de Cover en tant qu'option de transformation pour le bloc Groupe. Il 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 suit:

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 modèles.

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 fardeau 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 de destination de type portfolio

. Assurez-vous de vous impliquer si vous pouvez épargner une demi-heure ou plus.

Boutons bloquent les utilisations 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 Button individuels utilisait un peu une solution de marge CSS à l'ancienne et piratée pour créer l'espace de gouttière 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 gonflé, 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 poli sous le capot. 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 amateurs vont adorer», a écrit Joen Asmussen dans le billet. «À 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 à gérer de manière aussi soignée. »

C'est un spectacle bienvenu de voir l'utilisation de la column-gapterre dans le plugin. Bien sûr, il pourrait être utilisé row-gappour 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.

Si cet article vous a plu, je vous invite à vous inscrire à ma newsletter

Vous recevrez 1 mail par semaine contenant :

  • Un guide pas à pas vers les bons tutoriels
  • Quelques conseils de développement personnel

Sachez que votre adresse mail reste confidentielle

Si vous ne voulez plus recevoir de newsletters de ma part…

…il vous suffira de vous désabonner 🙂

Articles similaires

Gutenberg 10.5 : Les nouveautés de la dernière mise à jour


0 commentaire

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

define( 'WC_REMOVE_ALL_DATA', true);
%d blogueurs aiment cette page :