Quoi de neuf dans WordPress 5.9 - Édition complète du site, styles globaux, blocs, modèles, API, améliorations de l'interface utilisateur et bien plus encore

WordPress 5.9 Joséphine est là ! La première version de WordPress de l'année devait initialement sortir le 14 décembre 2021. En raison de plusieurs problèmes ouverts et de bugs non résolus, la version finale avait été retardée et a finalement été publiée le 25 janvier 2022.

Si vous vous demandez ce qu'il y a de nouveau dans WordPress 5.9, la réponse courte est Full Site Editing (FSE).

Et en effet, de nombreuses fonctionnalités 5.9 ne sont disponibles que si vous utilisez un thème prenant en charge l'édition complète du site, comme le tout nouveau thème par défaut, Twenty Twenty-Two.

Avec WordPress 5.9, nous arrivons au cœur de la deuxième phase de la feuille de route de Gutenberg : la phase de personnalisation , qui est principalement axée sur l'édition complète du site, les modèles de blocs, le répertoire de blocs et les thèmes basés sur des blocs.

Avec la 5.9 qui sort le mois prochain, nous sommes — je dirais — au MVP, le Minimum Viable Product de cette phase de customisation de Gutenberg.

Ces mots de Matt Mullenweg à 2021 State of the Word résument le mieux les principales fonctionnalités de la nouvelle version de WordPress.

Cela dit, quoi de neuf avec la première version WordPress de 2022 ?

Découvrons-le!

Styles globaux : une interface graphique pour theme.json

Avec la sortie de WordPress 5.8 en 2021, la manipulation du fichier theme.json est devenue le moyen standard pour les développeurs de thèmes de personnaliser les paramètres et les styles de l'éditeur.

WordPress 5.9 fait passer les choses au niveau supérieur en introduisant une interface graphique qui permet aux utilisateurs de personnaliser les préréglages de style pour leurs sites Web, soit globalement, soit au niveau du bloc, sans écrire une seule ligne de code.

Le mécanisme des styles globaux devrait modifier considérablement la façon dont vous avez l'habitude de personnaliser l'apparence de vos sites Web, car les styles globaux affectent plusieurs aspects de la conception de sites WordPress.

Tout d'abord, l'interface Global Styles remplace le Customizer et est désormais le seul moyen de personnaliser les paramètres et les styles avec des thèmes de blocs. De même, les pages d'administration d'options de thème complexes ne seront plus nécessaires. Cela fournit une nouvelle façon standard de configurer les paramètres et les styles de thème et, en même temps, devrait rationaliser le flux de travail de développement de thème.

Avec Global Styles, les utilisateurs de WordPress ont plus de contrôle sur la présentation de leurs sites Web, à la fois globalement et par type de bloc, au-delà du contexte des pages ou des publications individuelles.

Une nouvelle barre latérale est désormais disponible dans l'éditeur de site, en haut de laquelle vous trouverez un petit panneau de prévisualisation et quatre composants dans l'ordre suivant :

• Typographie
• Couleurs
• Disposition
• Blocs

Nous pouvons nous attendre à ce que de nouveaux composants soient ajoutés au fil du temps.

Examinons de plus près la nouvelle interface.

C'est ici! Tout ce que vous devez savoir sur WordPress 5.9, le tout dans un méga article Cliquez pour tweeter
[Incitation à l'action]

Aperçu des styles

Le premier élément de la barre latérale Styles globaux est un panneau d'aperçu. Ce panneau vous permet de vérifier le résultat de vos personnalisations et est particulièrement utile lorsque vos modifications portent sur des éléments non visibles dans le canevas de l'éditeur de site.

L'image suivante montre trois combinaisons de style différentes comparées :

Typographie

Le panneau Typographie est l'endroit où vous contrôlez la typographie de votre site Web. Bien sûr, les contrôles disponibles dans ce panneau dépendent de vos paramètres theme.json .

Par exemple, le thème Twenty Twenty-One Blocks (TT1 Blocks) déclare les propriétés typographiques suivantes :

 "settings": { "typography": { "customLineHeight": true, "fontSizes": [], "fontFamilies": [] } }

L'image suivante montre les paramètres de typographie résultants dans la barre latérale Styles globaux :

Plongeons un peu plus loin et voyons comment le thème TT1 Blocks déclare fontFamilies :

 "fontFamilies": [ { "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif", "slug": "system-font", "name": "System Font" }, { "fontFamily": "Helvetica Neue, Helvetica, Arial, sans-serif", "slug": "helvetica-arial" }, { "fontFamily": "Geneva, Tahoma, Verdana, sans-serif", "slug": "geneva-verdana" }, { "fontFamily": "Cambria, Georgia, serif", "slug": "cambria-georgia" }, { "fontFamily": "Hoefler Text, Baskerville Old Face, Garamond, Times New Roman, serif", "slug": "hoefler-times-new-roman" } ]

Vous pouvez vérifier ces familles de polices dans le panneau d'aperçu des styles globaux :

Couleurs

Dans la section Couleurs, vous pouvez afficher et modifier les palettes de couleurs et personnaliser la couleur de plusieurs éléments du site.

En cliquant sur ces éléments, vous accédez à un nouveau panneau dans lequel vous pouvez choisir les couleurs parmi trois palettes de couleurs : Core, Theme et Palette personnalisée (pour en savoir plus, consultez les couleurs par défaut, les couleurs du thème et les couleurs personnalisées).

Dans ce panneau, vous pourrez définir et modifier la couleur de l'élément actuel.

Disposition

Le dernier groupe d'outils est destiné aux personnalisations de mise en page. Dans le contexte global, cela se limite au conteneur du site.

Blocs

Avec la mise en œuvre du mécanisme des styles globaux, il est désormais également possible de modifier l'apparence de blocs spécifiques, tels que Paragraphe (typographie et couleurs), Boutons (disposition) et Colonne (couleurs et disposition).

Notez que les styles de bloc peuvent être personnalisés à partir de l'interface Styles globaux uniquement si le bloc déclare la prise en charge de fonctionnalités spécifiques dans le fichier block.json correspondant. Par exemple, le bloc core/post-title prend actuellement en charge les styles suivants :

 "supports": { "align": [ "wide", "full" ], "html": false, "color": { "gradients": true, "link": true }, "spacing": { "margin": true }, "typography": { "fontSize": true, "lineHeight": true, "__experimentalFontFamily": true, "__experimentalFontWeight": true, "__experimentalFontStyle": true, "__experimentalTextTransform": true, "__experimentalLetterSpacing": true, "__experimentalDefaultControls": { "fontSize": true, "fontAppearance": true, "textTransform": true } } },

Étant donné que le bloc core/post-title prend en charge les couleurs, l'espacement et la typographie, vous trouverez les entrées correspondantes dans les paramètres de styles globaux du bloc de titre de l'article.

L'image suivante montre les paramètres de typographie, que vous pouvez facilement comparer avec le code ci-dessus :

Il convient de noter que WordPress 5.9 ne fournit que la première implémentation de l'interface Global Styles. Comme le souligne Matias Ventura, nous pouvons raisonnablement nous attendre à un développement ultérieur de la nouvelle fonctionnalité de contrôle de style :

À l'avenir, des flux intégrés au système vous permettront de passer des styles locaux aux styles globaux, comme effectuer des personnalisations sur un bloc de boutons et choisir de les appliquer globalement à tous les boutons de ce type.

Nous pourrions donc voir des améliorations majeures bientôt. L'image ci-dessous n'est qu'un exemple de ce à quoi nous pourrions nous attendre :

Des améliorations supplémentaires pourraient inclure la possibilité pour les thèmes de fournir des palettes de couleurs alternatives et de multiples variations de style globales.

La semaine dernière, j'ai construit une poignée de variations de couleurs et de polices de Twenty Twenty-Two dans des thèmes enfants super simples. Ils sont vraiment légers et j'adore l'idée d'offrir aux gens un site radicalement différent en un seul clic.https://t.co/dItIkvvhK9 pic.twitter.com/rB4CcTfW0A

– kjellr (@kjellr) 15 novembre 2021

Les développeurs peuvent approfondir le mécanisme de style global dans l'article de support Paramètres et styles globaux (theme.json). Vous trouverez des exemples supplémentaires dans notre introduction au thème par défaut Twenty Twenty-Two.

Le bloc de navigation

Le bloc de navigation a été surnommé "l'un des blocs thématiques les plus percutants", et nous n'avons pas peur de dire que nous sommes d'accord.

Le bloc est en phase embryonnaire depuis un certain temps (voir aussi Problème de suivi du bloc de navigation et Problème de suivi i2). Pourtant, maintenant que tous les problèmes en suspens et les bloqueurs répertoriés comme incontournables de WordPress 5.9 ont été corrigés, nous pouvons enfin commencer à utiliser l'une des fonctionnalités les plus puissantes fusionnées dans le noyau avec WordPress 5.9.
[Incitation à l'action]

Un aperçu rapide de l'interface du bloc de navigation

L'utilisation du nouveau bloc peut être un peu déroutante au début, mais une fois que vous aurez compris, vous apprécierez tout son potentiel.

Lorsque vous ajoutez un bloc de navigation pour la première fois, l'espace réservé de bloc fournit trois options pour sélectionner un menu existant basé sur des blocs, créer un menu avec toutes les pages ou recommencer avec un menu vide.

Le nouveau menu de navigation vous permet également d'importer des menus créés via l'écran des menus d'apparence qui est disponible avec les thèmes classiques.

Cela signifie que si vous passez d'un thème classique à un thème de bloc, vous n'aurez pas à reconstruire vos menus existants. Il vous suffit de choisir l'un de vos «menus classiques» actuellement disponibles et il sera automatiquement converti en un menu de navigation basé sur des blocs.

Vous pouvez ajouter le bloc Navigation n'importe où sur vos pages. Par exemple, vous pouvez trouver utile dans les articles longs de créer une table des matières, permettant aux utilisateurs d'accéder à des sections de contenu spécifiques.

De nouveaux liens de navigation sont instantanément ajoutés au bloc de navigation en cliquant sur l'icône plus ( + ) sur le côté droit (voir aussi les notes de version de Gutenberg 11.7), à moins que d'autres types de blocs aient déjà été ajoutés au menu.

Cliquer sur le bouton Modifier dans la barre d'outils du bloc Lien de navigation convertit un élément de menu en lien personnalisé. Cela vous permet d'ajouter, de modifier, de réorganiser et de supprimer des éléments individuellement.

Vous pouvez également transformer des liens en blocs en cliquant sur le bouton Transformer dans la barre d'outils des blocs. Cela vous permet d'ajouter des blocs spécifiques directement au menu de navigation.

Les blocs de lien personnalisé, d'espacement, de logo de site, de lien d'accueil, d'icônes sociales et de recherche sont désormais exposés aux utilisateurs lors de l'ajout de blocs aux menus de navigation.

Dans la barre latérale Paramètres, vous trouverez un ensemble complet d'options pour contrôler plusieurs aspects de vos menus de navigation.

Le panneau Disposition comprend des commandes de justification, d'orientation et d'habillage.

Le bloc de navigation comprend également un panneau de paramètres d'affichage amélioré avec une option pour un menu de hamburgers toujours activé.

Vous pouvez également personnaliser les couleurs de texte et d'arrière-plan de vos menus et sous-menus.

Un autre ajout utile récemment ajouté au bloc de navigation est la prise en charge de Block Gap, qui permet aux utilisateurs de contrôler la distance entre les éléments de menu.

Le panneau Typographie fournit un ensemble de commandes pour la famille de polices, l'apparence, la hauteur de ligne, la décoration et la casse des lettres. Tous ces contrôles peuvent être activés/désactivés à partir d'un menu déroulant qui apparaît lorsque vous cliquez sur l'icône de points de suspension à droite.

Le bloc de navigation : sous le capot

Les données du bloc de navigation sont stockées dans la base de données à l'aide d'un type de publication dédié wp_navigation .

Pourquoi est-ce intéressant pour les utilisateurs de WordPress, et comment ça marche ?

Supposons que vous ayez créé un menu de navigation composé de deux liens personnalisés et d'un champ de recherche. Avec le thème Twenty Twenty-Two installé, le menu pourrait ressembler à l'image suivante :

Le bloc de navigation ci-dessus est stocké dans la base de données sous le type de publication wp_navigation comme suit :

 <!-- wp:navigation-link {"label":"Contacts","type":"page","id":7,"url":"http://wordpress-59.local/?page_id=7","kind":"post-type","isTopLevelLink":true} /--> <!-- wp:navigation-link {"label":"About Us","type":"page","id":10,"url":"http://wordpress-59.local/?page_id=10","kind":"post-type","isTopLevelLink":true} /--> <!-- wp:search {"showLabel":false,"placeholder":"Search the site","buttonPosition":"button-inside","buttonUseIcon":true} /-->

Le stockage du contenu du bloc de navigation dans la base de données permet aux utilisateurs d'utiliser les mêmes menus de navigation sur différents thèmes de bloc. Si le menu n'est pas immédiatement visible, il vous suffit de sélectionner le menu de navigation souhaité dans le sélecteur de menu (voir également le numéro #36087 et le PR #36178).

L'image suivante montre le menu ci-dessus avec le thème Twenty Twenty-One Blocks :

Le bloc Navigation a connu plusieurs itérations. Vous pouvez approfondir chaque implémentation dans les notes de publication de Gutenberg 11.7, 11.8 et 11.9.

Vous pouvez également en savoir plus sur le bloc de navigation dans la nouvelle note de développement du bloc de navigation et l'article de support du bloc de navigation.
[Incitation à l'action]

Galeries d'images, images en vedette et icônes du site

Visant à rendre les images plus cohérentes dans différents contextes, WordPress 5.9 offre de nouvelles fonctionnalités et améliorations à plusieurs blocs. Le bloc Galerie a été entièrement révisé, tandis que divers changements apportés aux blocs Image en vedette et Icône du site donnent aux utilisateurs un contrôle plus précis sur les images respectives.

Un bloc de galerie refactorisé

Dans WordPress 5.8, la possibilité de personnaliser l'apparence des images dans les galeries était quelque peu limitée. Il n'y avait aucun moyen de changer le style d'image ou d'appliquer un filtre bicolore.

De plus, des fonctionnalités importantes manquaient dans les images de la galerie, telles que l'ajout de liens personnalisés vers des images individuelles dans une galerie.

Pour mieux comprendre la raison de cette asymétrie entre les images dans les deux contextes différents d'une seule image et d'une image dans une galerie, regardons le bloc Galerie en mode Code dans WordPress 5.8 :

Notez que les détails de l'image ne sont stockés que dans le délimiteur de bloc Galerie (voir aussi Qu'est-ce qu'un bloc Gutenberg ?).

Cela a fait que les images individuelles se comportent différemment des images dans les galeries.

Pour que les images se comportent de manière cohérente dans les deux contextes différents, WordPress 5.9 introduit un bloc Galerie entièrement refactorisé, qui se comporte désormais comme un conteneur pour une collection d'éléments de figure au lieu d'une liste non ordonnée d'images.

Dans WordPress 5.9, les images de la galerie sont imbriquées à l'aide des principales API innerBlocks , et chaque image stocke son propre ensemble de détails, exactement comme des images individuelles.

C'est une grande amélioration, puisque les images de bloc Galerie prennent désormais en charge les mêmes fonctionnalités disponibles dans les blocs d'image principaux , telles que les dimensions d'image et les filtres bichromes, ainsi que les fonctionnalités de bloc standard, telles que le glisser-déposer, copier, dupliquer et supprimer des fonctionnalités. .

Avec le nouveau bloc Galerie, vous pourrez styliser les images individuellement. Cela offre un large éventail de possibilités de personnalisation.

L'image ci-dessous affiche plusieurs images dans une galerie, chacune avec des coins arrondis différemment :

Vous pouvez également utiliser différents filtres bicolores sur différentes images dans la même galerie.

Et, bien sûr, vous pouvez attribuer une classe CSS spécifique à chaque image, ce qui vous donne des super pouvoirs supplémentaires pour ajouter la personnalisation dont vous avez besoin aux images de votre galerie.

Pour une vue plus détaillée du nouveau bloc Galerie, consultez également la note de développement de la refactorisation du bloc Galerie, les améliorations à venir du bloc Galerie et les notes de publication de Gutenberg 11.4.

Améliorations de l'image en vedette

Plusieurs améliorations ont également été apportées au bloc Image en vedette.

Commandes de dimensions de base

Le bloc Image en vedette comprend désormais un nouveau panneau de paramètres Dimensions fournissant des commandes de hauteur, de largeur et d'échelle.

Le contrôle des dimensions s'applique également aux images sélectionnées dans les blocs de boucle de requête, comme illustré dans l'image suivante :

Filtres Duotone sur les images en vedette

Nous avons mentionné ci-dessus que nous pouvons désormais appliquer le filtre bicolore dans les images enveloppées dans le nouveau bloc Galerie refactorisé.

Désormais, à partir de WordPress 5.9, les filtres bicolores sont également disponibles dans les blocs d'images en vedette dans n'importe quel contexte, des modèles de publication et de page aux blocs de boucle de requête.

Cette fonctionnalité ouvre la porte à des combinaisons de couleurs créatives et cohérentes sur tout le site.

Recadrage d'image dans le logo du site

Avant WordPress 5.9 (et Gutenberg 11.6), les images de logo ne pouvaient être modifiées qu'avant d'être téléchargées. Avec WordPress 5.9, vous pouvez recadrer, zoomer et faire pivoter les images utilisées dans le bloc Logo du site directement depuis la barre d'outils du bloc.

Nouveaux outils de conception, blocs et améliorations de l'interface utilisateur

Onze versions de Gutenberg sont fusionnées dans le noyau de WordPress 5.9, offrant tellement de fonctionnalités, d'améliorations et de corrections de bogues qu'il ne serait pas possible de toutes les couvrir dans un seul article.

Nous avons donc sélectionné quelques-uns de ceux que nous avons jugés les plus dignes d'attention. Pour un aperçu plus approfondi de ces fonctionnalités et améliorations, vous pouvez également consulter les publications de Gutenberg 10.8, 10.9, 11.0, 11.1, 11.2, 11.3, 11.4, 11.5, 11.6, 11.7, 11.8 et 11.9.

Cela dit, cette section couvrira les changements suivants :

Frontière prend en charge l'interface utilisateur

À partir de WordPress 5.9, lorsque le theme.json déclare les paramètres de border et qu'un bloc déclare la prise en charge des bordures via l'API Block Supports, un nouveau panneau de paramètres fournira des contrôles pour le rayon, la largeur, le style, la couleur et les unités de la bordure (voir aussi Gutenberg 11.1) .

Le bloc Groupe central est un bon exemple de cette amélioration utile de l'interface utilisateur. Le fichier block.json du bloc Group inclut désormais les déclarations de supports suivantes :

 { ... "supports": { "align": [ "wide", "full" ], "anchor": true, "html": false, "color": { "gradients": true, "link": true }, "spacing": { "padding": true, "__experimentalDefaultControls": { "padding": true } }, "__experimentalBorder": { "color": true, "radius": true, "style": true, "width": true, "__experimentalDefaultControls": { "color": true, "radius": true, "style": true, "width": true } }, ... }, ... }

Cette fonctionnalité permet aux utilisateurs de créer des effets graphiques impressionnants sur leurs sites Web avec un minimum d'effort. Vous pouvez le voir en action avec le nouveau thème Twenty Twenty-Two.

Dans un nouvel article ou une nouvelle page, créez un nouveau bloc Groupe et sélectionnez-le. Vous verrez un panneau Bordure dans la barre latérale des paramètres de bloc. Modifiez la largeur et le style de la bordure selon vos besoins et profitez du résultat.

Si vous êtes un développeur de thèmes et que vous souhaitez ajouter cette fonctionnalité à vos thèmes, ouvrez votre fichier theme.json et déclarez la prise en charge des bordures comme indiqué dans le code suivant :

 { "version": 1, "settings": { "border": { "customColor": true, "customRadius": true, "customStyle": true, "customWidth": true } } }

Enregistrez le fichier et revenez à votre tableau de bord WordPress. Dans un nouvel article ou une nouvelle page, créez un nouveau bloc Groupe et sélectionnez-le. Vous devriez maintenant voir un panneau Border dans la barre latérale des paramètres de bloc (voir aussi ce theme.json expérimental).

Améliorations de la vue de liste

Avec WordPress 5.9, la vue de liste a été améliorée et propose désormais un glisser-déposer, des sections réductibles et des ancres HTML.

Glisser-déposer dans la vue en liste

Comme mentionné dans la pull request #33320, le glisser-déposer a été implémenté dans la vue de liste mais a été désactivé en raison de problèmes de performances.

À partir de WordPress 5.9, le glisser-déposer dans la vue Liste a été réimplémenté. Vous pouvez à nouveau faire glisser et déposer des blocs et des groupes de blocs n'importe où dans la vue en liste. Il s'agit d'une grande amélioration de la convivialité de l'éditeur, car il vous permet de déplacer rapidement et facilement des blocs et des groupes de blocs autour de vos pages. Il joue un rôle déterminant dans les articles et les pages longs et dans la gestion de structures complexes de blocs imbriqués.

Sections réductibles de la vue de liste

Une autre amélioration significative de la vue en liste est la possibilité de développer/réduire des sections de blocs imbriqués. Cela vous permet de naviguer facilement dans des structures de blocs complexes, en développant des groupes de blocs uniques tout en laissant tout le reste réduit.

Vous pouvez également développer et réduire les sections de la vue Liste à l'aide des flèches gauche et droite.

Ancres HTML sur les éléments de vue de liste

Une autre amélioration utile est la possibilité d'ajouter des ancres HTML à vos blocs dans la vue Liste et de les voir en un coup d'œil.

Contrôle de l'espacement des blocs

Introduit pour la première fois dans Gutenberg 11.4 et maintenant fusionné avec WordPress 5.9, le nouveau contrôle d'espacement des blocs vous permet de définir une distance personnalisée entre les éléments d'un bloc. Ci-dessous, vous pouvez voir un aperçu avec différentes valeurs d'espacement des blocs dans un bloc Colonnes avec le thème par défaut Twenty Twenty-Two :

L'espacement des espaces est initialement disponible pour des blocs spécifiques, y compris les boutons, les images, les colonnes, les titres et la navigation, mais la prise en charge devrait être étendue à d'autres blocs à l'avenir.

Les thèmes doivent activer Gap Spacing dans theme.json à l'aide de la nouvelle propriété appealTools . Vous pouvez en savoir plus sur les outils d'apparence dans notre plongée approfondie dans Twenty Twenty-Two. Voir aussi les pull requests #33991 et #34630.

Aperçu de l'URL enrichie pour le contrôle des liens

En tirant parti du nouveau point de terminaison REST url-details, le contrôle Link fournit désormais un aperçu d'URL riche montrant les détails d'une ressource cible de lien.

Dans sa première implémentation, cette fonctionnalité n'était disponible que dans le composant de texte enrichi de l'éditeur de publication. Au moment d'écrire ces lignes, il est également disponible dans l'éditeur de site, mais pas dans les éditeurs de navigation et de widget.

Créer des pages à partir d'un lien contextuel

WordPress 5.9 propose également une interface utilisateur de lien en ligne améliorée, affichant un tout nouveau bouton pour créer de nouvelles pages directement à partir de la fenêtre contextuelle du lien en ligne. Cette fonctionnalité n'est disponible que dans l'éditeur de publication.

Améliorations du bloc de recherche

Le bloc de recherche affiche désormais les paramètres de couleur des boutons et des bordures.

Vous pouvez également personnaliser la couleur d'arrière-plan et du texte, ainsi que la couleur et le rayon de la bordure.

Nouvelles commandes pour les dimensions de bloc

Un nouveau panneau de paramètres Dimensions est désormais disponible pour permettre aux utilisateurs de contrôler l'espace occupé par un bloc sur la page. Le panneau doit inclure des contrôles de hauteur, de largeur, de remplissage, de marge et éventuellement d'alignement, mais tous les attributs ne seront pas disponibles pour chaque bloc.

Les développeurs de blocs trouveront le composant <DimensionControl /> documenté sur GitHub, mais notez qu'il est toujours marqué comme une fonctionnalité expérimentale et pourrait faire l'objet de modifications avec rupture au moment de la rédaction de cet article.

Un nouveau bloc de groupe de widgets ajouté à l'écran des widgets

Un nouveau bloc de groupe de widgets est désormais disponible dans l'éditeur de widgets basé sur des blocs. Le dernier bloc vous permet d'ajouter un groupe de blocs dans un widget avec un titre dans l'éditeur de widgets des thèmes classiques et le Customizer.

Vous pouvez en savoir plus sur l'éditeur de widgets dans Block-Based Widgets Editor et Block Widgets dans le Customizer.

Disposition flexible et nouveau bloc de lignes

Introduite à l'origine en tant que fonctionnalité expérimentale avec Gutenberg 11.2, la disposition flexible a été étendue à plusieurs blocs, y compris les blocs Liens sociaux et Groupe.

Certains blocs, tels que le bloc Liens sociaux, fournissent désormais un ensemble de commandes de barre d'outils et de paramètres de barre latérale qui vous permettent de personnaliser la disposition flexible.

Cette même fonctionnalité est disponible dans le bloc Navigation et le bloc Ligne, une nouvelle variante du bloc Groupe introduite avec Gutenberg 11.5.

L'image suivante montre le bloc Ligne avec les commandes de mise en page dans la barre latérale des paramètres :

Ci-dessous, vous pouvez voir le même bloc Row sur le frontend et dans l'outil d'inspection de Chrome.

Améliorations du modèle de bloc

Introduits pour la première fois avec WordPress 5.5, les modèles de blocs permettent aux utilisateurs de WordPress d'inclure des structures complexes prêtes à l'emploi de blocs imbriqués dans leur contenu en quelques clics seulement.

Maintenant, WordPress 5.9 fait avancer les choses vers la démocratisation de la conception et l'autonomisation des utilisateurs en introduisant quelques améliorations au système de modèle de bloc.

Alors, quoi de neuf avec les modèles de blocs dans WordPress 5.9 ?

Modèles en vedette du répertoire de modèles

L'outil d'insertion de blocs affiche désormais les modèles de blocs en vedette extraits dynamiquement du répertoire de modèles, offrant aux utilisateurs un moyen rapide et facile de trouver des modèles populaires à utiliser dans leur contenu.

De la même manière, à mesure que les modèles entrent directement dans le tableau de bord WordPress, les développeurs WordPress devraient être encouragés à créer et publier de plus en plus de modèles au fil du temps, ce qui se traduit par des capacités de conception de plus en plus avancées pour les utilisateurs.

Un nouvel explorateur de modèles plein écran

Alors que le nombre de modèles de blocs disponibles dans le répertoire de modèles continue de croître et que de plus en plus de thèmes les utilisent, WordPress 5.9 introduit une nouvelle interface de navigation dans les modèles de blocs : l'explorateur de modèles.

Un nouveau bouton Explorer ouvre désormais une fenêtre modale plein écran qui permet aux utilisateurs de parcourir, rechercher et insérer des modèles de bloc en quelques clics. Le résultat est une expérience utilisateur améliorée.

Vous trouverez également des notes supplémentaires et plusieurs exemples de modèles de blocs dans notre plongée approfondie dans le thème WordPress Twenty Twenty-Two.

Si vous êtes intéressé et souhaitez en savoir plus, écoutez les épisodes 16 et 21 du podcast de Josepha Haden Chomphosy et regardez la vidéo YouTube Exploring WordPress 5.9 d'Anne McCarthy.

Le thème Twenty Twenty-Two et les thèmes de blocs WordPress

Avec WordPress 5.9, vous n'avez plus besoin d'installer le plugin Gutenberg pour activer l'édition complète du site sur votre site WordPress. Il vous suffit d'autoriser un thème de bloc à tirer parti de toutes les fonctionnalités de FSE.

De plus, WordPress 5.9 a été fourni avec un tout nouveau thème par défaut, Twenty Twenty-Two, et cela change la donne car Twenty Twenty-Two est le premier thème de bloc par défaut de tous les temps.

Twenty Twenty-Two est un thème hautement flexible et personnalisable. Il fournit un bac à sable parfait pour essayer le nouveau flux d'édition de modèles, de nouveaux blocs, des améliorations d'interface et toutes les fonctionnalités d'édition de site ajoutées au noyau, à partir de WordPress 5.9.

Comme mentionné ci-dessus, tout ce que vous avez à faire est d'installer et d'activer un thème de bloc, tel que Twenty Twenty-Two. Une fois le thème actif, un nouvel élément de menu Éditeur (bêta) apparaîtra dans le menu d'administration du tableau de bord WordPress.

L'interface de l'éditeur de site propose désormais un flux d'édition de site remanié. À partir de l'interface d'édition, vous pourrez modifier visuellement la page d'accueil, les modèles et les parties de modèle du site, ainsi qu'accéder à l'interface des styles globaux.

Lorsque vous activez un thème de bloc, vous ne trouverez pas le Customizer. C'est parce que l'outil de personnalisation ne prend pas en charge les thèmes de bloc, qui utilisent uniquement l'éditeur de site. C'est aussi la raison pour laquelle vous ne pouvez pas prévisualiser les thèmes de blocs inactifs .

Ainsi, à partir de WordPress 5.9, le point d'accès au Customizer n'est plus disponible dans le menu d'administration lorsqu'un thème de bloc est actif (sauf si vous utilisez un plugin qui l'utilise).

Si vous êtes toujours lié aux thèmes traditionnels et que vous vous inquiétez de la rétrocompatibilité, rassurez-vous : vous pouvez continuer à utiliser votre thème.

Vous avez actuellement le choix entre quatre catégories différentes de thèmes :

• Thèmes de blocs : Thèmes conçus pour FSE
• Thèmes universels : Thèmes qui fonctionnent à la fois avec le Customizer et l'Editeur de site
• Thèmes hybrides : thèmes classiques prenant en charge les fonctionnalités FSE telles que theme.json
• Thèmes classiques : Thèmes avec templates PHP, functions.php, etc.

En raison de l'impact que les thèmes de blocs auront probablement sur l'écosystème WordPress, nous avons un article complet couvrant Twenty Twenty-Two et les thèmes de blocs WordPress. Assurez-vous de le consulter pour un aperçu plus détaillé.

Amélioration des performances

Chez Kinsta, nous sommes obsédés par la vitesse du site Web. C'est pourquoi nous sommes ravis des améliorations de performances apportées par WordPress 5.9.

Ces améliorations affecteront plusieurs domaines du CMS, de l'éditeur de blocs aux thèmes de blocs, au chargement différé, etc. Plongeons dedans.

Améliorations de l'outil d'insertion de blocs

Depuis WordPress 5.9, les types de blocs, les modèles et les catégories sont rendus paresseusement dans le Block Inserter. Le navigateur charge en premier le contenu prioritaire, offrant à l'utilisateur une expérience d'édition plus fluide et des performances améliorées.

D'autres améliorations notables des performances dans le contexte de l'éditeur de blocs affectent les blocs réutilisables et la vue en liste.

Moins de CSS chargé

En ce qui concerne l'interface, WordPress 5.9 a considérablement réduit la quantité de CSS chargée par les thèmes de blocs, ce qui a entraîné un chargement des pages beaucoup plus rapide.

La principale amélioration à noter dans ce contexte est l'introduction du mécanisme de paramètres et de styles theme.json , qui empêche les thèmes d'utiliser des feuilles de style massives, comprenant des centaines de déclarations CSS. La quantité de code CSS qu'un thème utilise a maintenant été réduite à quelques propriétés personnalisées CSS que tout type de bloc peut réutiliser.

Améliorations des performances de chargement différé

Le chargement paresseux d'images a été introduit pour la première fois dans WordPress 5.5. À partir de WordPress 5.7, la fonctionnalité de chargement paresseux a été étendue aux iframes, permettant aux propriétaires de sites de créer des sites Web plus rapides et d'améliorer leur référencement.

Quoi qu'il en soit, suite à une analyse du Largest Contentful Paint (LCP), il s'est avéré que l'attribution de l'attribut loading="lazy" à toutes les images et iframes de la page entraînait une légère dégradation des performances.

Ignorer simplement l'attribut loading="lazy" n'était pas une solution car cela conduirait à perdre les avantages évidents du chargement paresseux.

La solution optimale serait d'omettre uniquement l'attribut loading="lazy" sur les images apparaissant au-dessus du pli. Cependant, étant donné que l'attribut loading="lazy" est attribué côté serveur, WordPress ne peut pas déterminer exactement quelles images sont affichées au-dessus du pli. C'est quelque chose qui dépend principalement du thème actif.

Désormais, en tant que solution de compromis, à partir de WordPress 5.9, l'attribut loading="lazy" n'est pas appliqué à la première image de contenu ou iframe. Une analyse menée sur 50 thèmes WordPress populaires a révélé que cette solution entraînait des améliorations considérables des performances et un chargement des pages jusqu'à 30 % plus rapide.

Felix Arntz explique comment cela fonctionne :

… pour améliorer les performances prêtes à l'emploi sans nécessiter qu'un développeur personnalise le comportement, WordPress ignorera désormais la toute première "image de contenu ou iframe" sur la page d'être chargée paresseusement. Le terme « image de contenu ou iframe » désigne ici toute image ou iframe qui se trouve dans le contenu de tout message dans la boucle de requête principale actuelle, ainsi que toute image en vedette d'un tel message. Cela s'applique à la fois au contenu « singulier » et « archive » : dans un contexte « singulier », la première image ou iframe du (seul) article n'est pas chargée paresseusement, tandis que dans un contexte « archive », la première image ou iframe du le premier message de la requête n'est pas chargé paresseux.

Les développeurs de thèmes peuvent désormais utiliser le nouveau filtre wp_omit_loading_attr_threshold pour modifier le nombre d'images/iframes à ignorer du chargement différé.

Plusieurs feuilles de style par bloc

Les développeurs de blocs et de thèmes peuvent enregistrer plusieurs feuilles de style sur chaque bloc et charger des styles à partir d'autres blocs si nécessaire. Cela permet de charger des feuilles de style en fonction du contenu de la page, empêchant les thèmes de charger d'énormes feuilles de style sur chaque page.

Selon Ari Stathopoulos :

Les blocs pourront désormais enregistrer plusieurs feuilles de style et charger des styles à partir d'autres blocs si nécessaire. Les thèmes pourront ajouter des styles par bloc au lieu de charger des feuilles de style monolithiques qui sont chargées de force n'importe où. Cela a un impact plus important sur les thèmes de blocs où le chargement des feuilles de style est optimisé en fonction du contenu de la page et de la mise en page, mais peut également être utilisé par les thèmes classiques.

Fonctionnalités supplémentaires pour les développeurs

En plus des nombreuses fonctionnalités et améliorations de l'interface utilisateur discutées jusqu'à présent, WordPress 5.9 introduit également plusieurs fonctionnalités pour les développeurs.

Un nouvel attribut pour verrouiller les blocs

Les développeurs de blocs peuvent désormais empêcher les utilisateurs de déplacer ou de supprimer des blocs individuels en ajoutant un attribut de lock dans les paramètres de bloc :

 { ... "attributes": { "lock": { "type": "object", "default": { "move": true, "remove": true } } } }

Lorsque cette fonctionnalité est activée, les utilisateurs peuvent modifier le contenu du bloc, mais ne peuvent pas déplacer le bloc sur la page ni le supprimer du canevas de l'éditeur. L'image suivante montre un bloc personnalisé avec un ensemble standard de contrôles de barre d'outils :

La définition de l'attribut de lock , comme indiqué dans le code ci-dessus, masque les déménageurs de bloc et les contrôles Déplacer vers et Supprimer de la barre d'outils du bloc. L'image ci-dessous montre le résultat final à l'écran :

Vous pouvez également verrouiller un bloc spécifique dans un modèle de bloc. Pour un exemple, voir également Verrouillage des blocs dans WordPress 5.9.

Nouvelle API pour accéder aux paramètres et styles globaux

WordPress 5.9 introduit une nouvelle API publique PHP pour lire les données de theme.json .

Lecture des paramètres et des styles à partir de theme.json

Il y a deux nouvelles fonctions pour lire les données des sections settings et styles déclarées dans le theme.json :

 wp_get_global_settings( $path = array() , $context = array() ); wp_get_global_styles( $path = array(), $context = array() );

• $path est un tableau listant le chemin vers le paramètre spécifié
• $context est un tableau définissant le contexte de ces données. Les développeurs peuvent lire à partir d'une section de paramètres de bloc spécifique - par exemple, array( 'block_name' => 'core/paragraph' ) . La orygin d'origine définie sur base permet d'ignorer les données personnalisées enregistrées par l'utilisateur.

L'exemple de code suivant renvoie la valeur du paramètre contentSize . Dans Twenty Twenty-Two, ce serait 650px :

 wp_get_global_settings( array( 'layout', 'contentSize' ) );

En définissant un contexte, vous pouvez récupérer des styles pour des blocs spécifiques. Le code suivant montre comment récupérer la valeur du rayon de bordure pour le bloc core/button :

 function get_global_styles() { return wp_get_global_styles( array( 'border', 'radius' ), array( 'block_name' => 'core/button' ) ); }

La fonction ci-dessus renvoie la valeur de propriété requise en tenant compte des paramètres par défaut, des paramètres de thème et des données utilisateur. La valeur personnalisée sera fournie si l'utilisateur configure le rayon de la bordure du bouton dans l'interface Styles globaux.

Pour ignorer les données utilisateur, vous utiliseriez le code suivant :

 function get_global_styles() { return wp_get_global_styles( array( 'border', 'radius' ), array( 'block_name' => 'core/button', 'origin' => 'base' ) ); }

Obtenir la feuille de style générée

WordPress 5.9 introduit également une nouvelle fonction pour obtenir la feuille de style résultant des styles par défaut, de thème et personnalisés :

 wp_get_global_stylesheet( $types = array() );

$types est une liste des styles à générer.

Vous pouvez en savoir plus sur la nouvelle API dans Nouvelle API pour accéder aux paramètres et styles globaux.

Plus de fonctionnalités pour les développeurs

Les modifications supplémentaires de WordPress 5.9 pour les développeurs que vous voudrez peut-être connaître incluent :

• Bloquer les thèmes, une nouvelle façon de créer des thèmes dans WordPress 5.9
• Mises à jour pour les paramètres, les styles et theme.json
• Modifications et filtres axés sur le thème dans WordPress 5.9
• Nouvelles requêtes de capacité dans WordPress 5.9
• Modifications diverses du noyau dans WordPress 5.9
• Modifications diverses de l'éditeur de blocs dans WordPress 5.9
• Prenez plus de contrôle sur les zones de blocs internes (en tant que développeur de blocs)

Votre guide ultime de WordPress 5.9 : des améliorations de l'interface utilisateur aux styles globaux (et plus encore !) Cliquez pour tweeter

Résumé

Nous terminerons cet article avec une note rapide sur la part de marché de WordPress. WordPress alimente actuellement plus de 65 % de tous les sites Web dont le système de gestion de contenu est connu et se situe au nord de 43 % de tous les sites Web .

Ces chiffres sont impressionnants, surtout si on les compare aux concurrents les plus proches avec moins de 5 % de part de marché, comme Shopify.

Et cela signifie également que vous ne pouvez pas ignorer l'évolution du WP CMS. Chaque nouvelle version de WordPress apporte de nouvelles fonctionnalités, des améliorations d'interface, des améliorations de performances, et WordPress 5.9 ne fait pas exception. Tout ce dont vous avez besoin pour tester les nouvelles fonctionnalités est un thème de bloc, comme le nouveau thème par défaut Twenty Twenty-Two, et vous serez prêt à partir.

À vous, maintenant ! Êtes-vous prêt à passer aux thèmes de blocage et à FSE ? Et quels sont vos changements préférés à venir avec WordPress 5.9 ?