WordPress 5.9 Joséphine est arrivé ! La première version de WordPress de l’année était initialement prévue pour une sortie le 14 décembre 2021. En raison de plusieurs problèmes ouverts et de bogues 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 de la version 5.9 ne sont disponibles que si vous utilisez un thème prenant en charge Full Site Editing, comme le tout nouveau thème par défaut, Twenty Twenty-Two.
Avec WordPress 5.9, nous entrons dans le cœur de la deuxième phase de la feuille de route de Gutenberg: la phase de personnalisation, qui est principalement axée sur le Full Site Editing, les compositions de blocs, le répertoire de blocs et les thèmes basés sur les blocs.
Avec la 5.9, qui sortira le mois prochain, nous sommes – je dirais – au MVP, le Minimum Viable Product de cette phase de personnalisation de Gutenberg.
Ces mots de Matt Mullenweg au 2021 State of the Word résument le mieux les principales caractéristiques de la nouvelle version de WordPress.
Cela dit, qu’y a-t-il de nouveau dans la première version de WordPress de 2022 ?
Nous allons le découvrir !
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 réglages 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 des sites WordPress.
Tout d’abord, l’interface des styles globaux remplace l’outil de personnalisation et constitue désormais le seul moyen de personnaliser les réglages et les styles avec les thèmes basés sur des blocs. De même, les pages d’administration complexes des options de thème ne seront plus nécessaires. Cela fournit un nouveau moyen standard de configurer les réglages et les styles des thèmes et, en même temps, devrait rationaliser le flux de travail de développement des thèmes.
Avec les styles globaux, les utilisateurs de WordPress bénéficient d’un contrôle accru sur la présentation de leurs sites web, à la fois globalement et par type de bloc, au-delà du contexte des pages ou des articles individuels.
Une nouvelle colonne latérale est maintenant disponible dans l’éditeur de site, en haut de laquelle vous trouverez un petit panneau d’aperçu et quatre composants dans l’ordre suivant :
Nous pouvons nous attendre à ce que de nouveaux composants soient ajoutés au fil du temps.
Regardons de plus près la nouvelle interface.
Prévisualisation de style
Le premier élément de la colonne latérale des 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 s’appliquent à des éléments non visibles dans le canevas de l’éditeur de site.
L’image suivante montre la comparaison de trois combinaisons de styles différents :
Typographie
Le panneau Typographie est l’endroit où vous contrôlez la typographie de votre site web. Bien entendu, les contrôles disponibles dans ce panneau dépendent des réglages de votre theme.json.
Par exemple, le thème Twenty Twenty-One Blocks (TT1 Blocks) déclare les propriétés de typographie suivantes :
"settings": {
"typography": {
"customLineHeight": true,
"fontSizes": [],
"fontFamilies": []
}
}L’image suivante montre les réglages de typographie résultants dans la colonne latérale des styles globaux :
Plongeons un peu plus profondément 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 où vous pouvez choisir les couleurs parmi trois palettes de couleurs : Palette par défaut, Palette du thème et Palette personnalisée (pour en savoir plus, lisez Couleurs par défaut, Couleurs du thème et Couleurs personnalisées).
Dans ce panneau, vous pourrez définir et modifier la couleur de l’élément actuel.
Mise en page
Le dernier groupe d’outils est destiné aux personnalisations de la mise en page. Dans le contexte global, celle-ci est limitée au conteneur du site.
Blocs
Grâce à l’implémentation du mécanisme de styles globaux, il est désormais également possible de modifier l’apparence de blocs spécifiques, tels que Paragraphe (typographie et couleurs), Boutons (mise en page) et Colonne (couleurs et mise en page).
Notez que les styles de bloc peuvent être personnalisés à partir de l’interface des styles globaux uniquement si le bloc déclare la prise en charge d’une fonctionnalité spécifique 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
}
}
},Puisque le bloc core/post-title prend en charge les couleurs, l’espacement et la typographie, vous trouverez les entrées correspondantes dans les réglages de styles globaux du bloc Titre de publication.
L’image suivante montre les réglages 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 des styles globaux. Comme le souligne Matias Ventura, nous pouvons raisonnablement nous attendre à un développement plus poussé de la nouvelle fonctionnalité de contrôle des styles :
À l’avenir, des flux seront intégrés au système pour vous permettre de passer des styles locaux aux styles globaux – par exemple, en apportant des personnalisations à un bloc de boutons et en choisissant de les appliquer globalement à tous les boutons de ce type.
Nous pourrions donc voir des améliorations majeures prochainement. L’image ci-dessous n’est qu’un exemple de ce à quoi nous pouvons 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 global.
Last week I built a handful of Twenty Twenty-Two's color + font variations into super-simple child themes. They're really lightweight, and I love the idea of offering folks a drastically different site with one click.🎉https://t.co/dItIkvvhK9 pic.twitter.com/rB4CcTfW0A
— kjellr (@kjellr) November 15, 2021
Les développeurs peuvent plonger plus profondément dans le mécanisme de style global dans l’article de support Global Settings & Styles (theme.json). Vous trouverez des exemples supplémentaires dans notre introduction au thème par défaut Twenty Twenty-Two.
Le bloc Navigation
Le bloc Navigation a été surnommé « l’un des blocs de thème les plus percutants », et nous n’avons pas peur de dire que nous sommes d’accord.
Le bloc est dans une phase embryonnaire depuis un certain temps (voir également le problème de suivi du bloc Navigation et le problème de suivi i2). Cependant, maintenant que tous les problèmes en suspens et les bloqueurs listés comme des 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 cœur avec WordPress 5.9.
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 pris le coup de main, vous apprécierez tout son potentiel.
Lorsque vous ajoutez un bloc Navigation pour la première fois, l’espace réservé au bloc propose trois options : sélectionner un menu existant basé sur le bloc, créer un menu avec toutes les pages ou repartir de zéro avec un menu vide.
Le nouveau menu de navigation vous permet également d’importer des menus créés via l’écran Menus d’apparence disponible avec les thèmes classiques.
Cela signifie que si vous passez d’un thème classique à un thème basé sur des blocs, 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 le bloc.
Vous pouvez ajouter le bloc Navigation n’importe où sur vos pages. Par exemple, vous pouvez le trouver utile dans les articles longs pour créer une table des matières, permettant aux utilisateurs de sauter à des sections de contenu spécifiques.
Les 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 mise à jour de Gutenberg 11.7), sauf si d’autres types de blocs ont déjà été ajoutés au menu.
En cliquant sur le bouton Modifier dans la barre d’outils du bloc Liens de navigation, vous convertissez un élément de menu en un lien personnalisé. Cela vous permet d’ajouter, de modifier, de réorganiser et de supprimer des éléments individuellement.
Vous pouvez également transformer les 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 Lien personnalisé, Espaceur, Logo du site, Lien d’accueil, Icônes sociales et Recherche sont désormais exposés aux utilisateurs lors de l’ajout de blocs aux menus de navigation.
Dans la colonne latérale Réglages, vous trouverez un ensemble complet d’options permettant de contrôler plusieurs aspects de vos menus de navigation.
Le panneau Mise en page comprend des contrôles pour la justification, l’orientation et l’habillage.
Le bloc Navigation dispose également d’un panneau de réglages d’affichage amélioré avec une option pour un menu hamburger toujours actif.
Vous pouvez également personnaliser les couleurs du texte et de l’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 l’écart de bloc, qui permet aux utilisateurs de contrôler la distance entre les éléments de menu.
Le panneau Typographie fournit un ensemble de contrôles 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 l’ellipse à 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 cela est-il intéressant pour les utilisateurs de WordPress, et comment cela fonctionne-t-il ?
Disons que vous avez 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 en tant que 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 Navigation dans la base de données permet aux utilisateurs d’utiliser les mêmes menus de navigation dans différents thèmes de bloc. Si le menu n’est pas immédiatement visible, il suffit de choisir le menu de navigation souhaité dans le sélecteur de menu (voir également le problème #36087 et PR #36178).
L’image suivante montre le menu ci-dessus avec le thème de blocs Twenty Twenty-One:
Le bloc Navigation est passé par plusieurs itérations. Vous pouvez plonger plus profondément dans chaque implémentation dans les notes de version de Gutenberg 11.7, 11.8 et 11.9.
Vous pouvez également lire plus d’informations sur le bloc de navigation dans la nouvelle note de dev du bloc de navigation et l’article de support du bloc de navigation.
Galeries d’images, images mises en avant et icônes du site
Dans le but de rendre le comportement des images plus cohérent dans différents contextes, WordPress 5.9 apporte de nouvelles fonctionnalités et des améliorations à plusieurs blocs. Le bloc Galerie a été complètement révisé, tandis que diverses modifications apportées aux blocs Image mise en avant et Icône du site donnent aux utilisateurs un contrôle plus granulaire sur les images respectives.
Un bloc Galerie remanié
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 modifier le style de l’image ou d’appliquer un filtre bicolore.
En outre, des fonctionnalités importantes étaient absentes des images de la galerie, comme 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 image unique et d’une image dans une galerie, jetons un coup d’œil au bloc Galerie dans la vue Code de WordPress 5.8 :
Notez que les détails de l’image sont uniquement stockés dans le délimiteur du bloc Galerie (voir aussi Qu’est-ce qu’un bloc Gutenberg ?).
Cela faisait que les images individuelles se comportaient différemment des images dans les galeries.
Pour que les images se comportent de manière cohérente dans ces deux contextes différents, WordPress 5.9 introduit un bloc Galerie complètement remanié, qui se comporte maintenant comme un conteneur pour une collection d’éléments de figures 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 API du cœur innerBlocks , et chaque image stocke son propre ensemble de détails, exactement comme les images individuelles.
C’est une excellente amélioration, puisque les images du bloc Galerie prennent désormais en charge les mêmes fonctionnalités que celles disponibles dans les blocs Image de base, telles que les dimensions de l’image et les filtres bicolores, ainsi que les fonctionnalités standard des blocs, telles que les fonctionnalités de glisser-déposer, de copier, de dupliquer et de supprimer.
Avec le nouveau bloc Galerie, vous serez en mesure de 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érents :
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 toute 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 sur le remaniement du bloc Galerie, les améliorations à venir du bloc Galerie et les notes de publication de Gutenberg 11.4.
Améliorations de l’image mise en avant
Plusieurs améliorations ont également été apportées au bloc Image mise en avant.
Contrôles basique des dimensions
Le bloc Image mise en avant dispose désormais d’un nouveau panneau de réglages Dimensions offrant des contrôles de hauteur, de largeur et d’échelle.
Le contrôle des dimensions s’applique également aux images mises en avant dans les blocs Requête de boucle, comme le montre l’image suivante :
Filtres bicolores sur les images mises en avant
Nous avons mentionné ci-dessus que nous pouvons désormais appliquer le filtre bicolore dans les images enveloppées dans le nouveau bloc Galerie remanié.
Maintenant, à partir de WordPress 5.9, les filtres bicolores sont également disponibles dans les blocs Image mise en avant dans n’importe quel contexte, des modèles d’articles et de pages aux blocs Requête de boucle.
Cette fonctionnalité ouvre la porte à des combinaisons de couleurs créatives et cohérentes sur l’ensemble du site.
Recadrage des images dans le logo du site
Avant WordPress 5.9 (et Gutenberg 11.6), les images de logo pouvaient uniquement être modifiées avant d’être téléversé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 ont été intégrées au cœur de WordPress 5.9, offrant tellement de fonctionnalités, d’améliorations et de corrections de bogues qu’il serait impossible de les couvrir toutes dans un seul article.
Nous avons donc choisi certaines de celles qui nous semblaient les plus dignes d’attention. Pour un aperçu plus détaillé de ces fonctionnalités et améliorations, vous pouvez également consulter les articles sur les versions 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 de Gutenberg.
Ceci étant dit, cette section couvrira les changements suivants :
Support des bordures de l’interface utilisateur
À partir de WordPress 5.9, lorsque le theme.json déclare les réglages border et qu’un bloc déclare le support des bordures via l’API Block Supports, un nouveau panneau de réglages fournira des contrôles pour l’arrondi, la largeur, le style, la couleur et les unités des bordures (voir également Gutenberg 11.1).
Le bloc Groupe est un bon exemple de cette amélioration utile de l’interface utilisateur. Le fichier block.json du bloc Groupe comprend maintenant les déclarations 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’efforts. Vous pouvez la 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 colonne latérale des réglages du bloc. Modifiez la largeur et le style de la bordure selon vos besoins et appréciez le 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 retournez à 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 Bordure dans la colonne latérale des réglages du bloc (voir aussi ce theme.json expérimental).
Améliorations de la vue Liste
Avec WordPress 5.9, la vue Liste a été améliorée et dispose désormais de la fonction glisser-déposer, de sections repliables et d’ancres HTML.
Glisser-déposer en vue Liste
Comme mentionné dans la pull request #33320, le glisser-déposer a été implémenté dans la vue Liste mais a été désactivé en raison de problèmes de performance.
À partir de WordPress 5.9, le glisser-déposer en vue Liste a été ré-implémenté. Vous pouvez à nouveau glisser et déposer des blocs et des groupes de blocs n’importe où dans la vue en liste. Il s’agit d’une amélioration importante de la convivialité de l’éditeur, car elle vous permet de déplacer rapidement et facilement des blocs et des groupes de blocs dans vos pages. C’est très utile pour les articles et les pages de grande taille, ainsi que pour gérer des structures complexes de blocs imbriqués.
Sections repliables en vue Liste
Une autre amélioration significative de la vue Liste est la possibilité de développer/réduire les 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 replié.
Vous pouvez également déplier et replier les sections de la vue Liste à l’aide des flèches gauche et droite.
Ancres HTML sur les éléments de la vue en liste
Une autre amélioration utile est la possibilité d’ajouter des ancres HTML à vos blocs en vue Liste et de les voir d’un coup d’œil.
Contrôle de l’espacement entre les blocs
Introduit pour la première fois dans Gutenberg 11.4 et maintenant fusionné dans le cœur 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 de bloc dans un bloc Colonnes avec le thème par défaut Twenty Twenty-Two :
L’espacement de l’écart est initialement disponible pour des blocs spécifiques, notamment les boutons, les images, les colonnes, les titres et la navigation, mais le support devrait être étendu à plus de blocs à l’avenir.
Les thèmes doivent activer l’espacement dans theme.json à l’aide de la nouvelle propriété appearanceTools. Vous pouvez en savoir plus sur les outils d’apparence dans notre plongée profonde dans Twenty Twenty-Two. Voir aussi les pull requests #33991 et #34630.
Aperçu d’URL riche pour le contrôle des liens
En tirant parti du nouveau point de terminaison REST url-details, le contrôle de lien offre 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é était uniquement disponible dans le composant richtext de l’éditeur de publication. Au moment de la rédaction de cet article, elle est également disponible dans l’éditeur de site, mais pas dans les éditeurs de navigation et de widgets.
Créer des pages à partir de la popup de liens
WordPress 5.9 propose également une interface utilisateur améliorée pour les liens en ligne, avec un tout nouveau bouton permettant de créer de nouvelles pages directement à partir de la fenêtre contextuelle des liens en ligne. Cette fonctionnalité est uniquement disponible dans l’éditeur de publication.
Améliorations apportées au bloc de recherche
Le bloc de recherche affiche désormais les réglages de couleur du bouton et de la bordure.
Vous pouvez aussi maintenant personnaliser la couleur de l’arrière-plan et du texte ainsi que la couleur et l’arrondi de la bordure.
Nouveaux contrôles pour les dimensions de bloc
Un nouveau panneau de réglages Dimensions est désormais disponible pour que les utilisateurs puissent contrôler l’espace occupé par un bloc sur la page. Le panneau devrait inclure des contrôles de hauteur, de largeur, de marge intérieure, 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 être sujet à des changements au moment de la rédaction de cet article.
Un nouveau bloc de groupe de widgets ajouté à l’écran Widgets
Un nouveau bloc de groupe de widgets est désormais disponible dans l’éditeur de widgets basé sur des blocs. Ce 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 dans la personnalisation.
Vous pouvez en savoir plus sur l’éditeur de widgets dans Éditeur de widgets par blocs et Widgets par blocs dans la personnalisation.
Mise en page flexible et le nouveau bloc de rangée
Introduite à l’origine comme une fonctionnalité expérimentale avec Gutenberg 11.2, la mise en page flexible a été étendue à plusieurs blocs, notamment les blocs Liens sociaux et Groupe.
Certains blocs, comme le bloc Liens sociaux, fournissent désormais un ensemble de commandes de barre d’outils et de réglages de colonne latérale qui vous permettent de personnaliser la mise en page flexible.
Cette même fonctionnalité est disponible dans le bloc Navigation et le bloc Rangée, une nouvelle variation du bloc Groupe introduite avec Gutenberg 11.5.
L’image suivante montre le bloc Rangée avec les contrôles de mise en page dans la colonne latérale des réglages :
Ci-dessous, vous pouvez voir le même bloc Rangée sur l’interface publique et dans l’outil Inspecter de Chrome.
Améliorations de composition de bloc
Introduites pour la première fois avec WordPress 5.5, les compositions de bloc 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 la responsabilisation des utilisateurs en introduisant quelques améliorations au système des compositions de bloc.
Alors, quoi de neuf avec les compositions de bloc dans WordPress 5.9 ?
Compositions mises en avant vedettes du répertoire de compositions
L’Insertion de blocs affiche désormais les compositions de bloc mises en avant récupérées dynamiquement dans le Répertoire des compositions, offrant aux utilisateurs un moyen rapide et facile de trouver des compositions populaires à utiliser dans leur contenu.
De même, étant donné que les compositions sont directement intégrées au tableau de bord de WordPress, les développeurs de WordPress devraient être encouragés à créer et à publier de plus en plus de compositions au fil du temps, ce qui se traduira par des capacités de conception de plus en plus avancées pour les utilisateurs.
Un nouvel explorateur de compositions en plein écran
Comme le nombre de compositions de bloc disponibles dans le répertoire des compositions continue de croître et que de plus en plus de thèmes les utilisent, WordPress 5.9 introduit une nouvelle interface de navigation des compositions de bloc: l’Explorateur de compositions.
Un nouveau bouton Explorer ouvre désormais une modale plein écran qui permet aux utilisateurs de parcourir, de rechercher et d’insérer des compositions 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 compositions de blocs dans notre plongée profonde 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 basés sur les blocs de WordPress
Avec WordPress 5.9, vous n’avez plus besoin d’installer l’extension Gutenberg pour activer la modification complète du site sur votre site WordPress. Il vous suffit d’autoriser un thème de bloc pour profiter de toutes les fonctionnalités FSE.
En outre, WordPress 5.9 a été livré avec un tout nouveau thème par défaut, Twenty Twenty-Two, et cela change la donne car Twenty Twenty-Two est le tout premier thème basé sur des blocs par défaut.
Twenty Twenty-Two est un thème hautement flexible et personnalisable. Il constitue un parfait terrain de jeu pour essayer le nouveau flux de modification des modèles, les nouveaux blocs, les améliorations de l’interface et toutes les fonctions d’édition de site ajoutées au cœur à partir de WordPress 5.9.
Comme mentionné ci-dessus, tout ce que vous devez faire est d’installer et d’activer un thème à base de bloc, tel que Twenty Twenty-Two. Une fois le thème activé, un nouvel élément de menu Éditeur (beta) apparaîtra dans le menu d’administration du tableau de bord de WordPress.
L’interface de l’éditeur de site présente maintenant un flux d’édition de site remanié. Depuis l’interface d’édition, vous pourrez modifier visuellement la page d’accueil du site, les modèles et les parties de modèle, ainsi qu’accéder à l’interface des styles globaux.
Lorsque vous activez un thème basé sur des blocs, vous ne trouverez pas la personnalisation. C’est parce que la personnalisation ne prend pas en charge les thèmes basés sur des blocs, qui utilisent uniquement l’éditeur de site. C’est également la raison pour laquelle vous ne pouvez pas prévisualiser les thèmes basés sur des blocs inactifs.
Ainsi, à partir de WordPress 5.9, le point d’accès à la personnalisation n’est plus disponible dans le menu d’administration lorsqu’un thème à ba se de blocs est actif (à moins que vous n’utilisiez une extension qui en fait usage).
Si vous êtes toujours attaché aux thèmes traditionnels et que vous vous inquiétez de la rétro-compatibilité, soyez tranquille : vous pouvez continuer à utiliser votre thème.
Vous avez actuellement le choix entre quatre catégories différentes de thèmes :
- Thèmes basés sur des blocs : Thèmes conçus pour FSE
- Thèmes universels : Thèmes qui fonctionnent à la fois avec la personnalisation et l’éditeur de site
- Thèmes hybrides : Thèmes classiques prenant en charge les fonctionnalités du FSE comme theme.json
- Thèmes classiques : Thèmes avec des modèles PHP, functions.php, etc.
En raison de l’impact que les thèmes à base de bloc auront probablement sur l’écosystème WordPress, nous avons un article entier couvrant Twenty Twenty-Two et les thèmes WordPress basés sur des blocs. N’hésitez pas à le consulter pour un aperçu plus approfondi.
Améliorations des performances
Ici, chez Kinsta, nous sommes obsédés par la vitesse des sites 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 basés sur des blocs, au chargement différé, et plus encore. Plongeons-y.
Améliorations de l’Insertion de bloc
Depuis WordPress 5.9, les types de blocs, les thèmes et les catégories sont rendus en manière différée dans l’insertion de bloc. Le navigateur charge d’abord le contenu le plus prioritaire, ce qui offre à l’utilisateur une expérience d’édition plus fluide et des performances améliorées.
D’autres améliorations de performance notables dans le contexte de l’éditeur de blocs affectent les blocs réutilisables et la vue Liste.
Moins de CSS chargé
En ce qui concerne l’interface publique, WordPress 5.9 a réduit de manière drastique la quantité de CSS chargée par les thèmes basés sur des blocs, ce qui permet de charger les pages beaucoup plus rapidement.
La principale amélioration à noter dans ce contexte est l’introduction du mécanisme de réglages 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 du chargement différé
Le chargement différé des images a été introduit pour la première fois dans WordPress 5.5. À partir de WordPress 5.7, la fonctionnalité de chargement différé a été étendue aux iframes, permettant aux propriétaires de sites de créer des sites web plus rapides et d’améliorer leur SEO.
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îne 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 différé.
La solution optimale serait d’omettre l’attribut loading="lazy" uniquement sur les images apparaissant au-dessus du pli. Cependant, étant donné que l’attribut loading="lazy" est attribué du côté du 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.
Maintenant, comme 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îne une amélioration considérable des performances et un chargement des pages jusqu’à 30 % plus rapide.
Felix Arntz explique comment cela fonctionne:
… pour améliorer les performances dès le départ, sans qu’un développeur ait à personnaliser le comportement, WordPress évitera désormais le chargement différé de la toute première « image de contenu ou iframe » de la page. Le terme « image ou iframe de contenu » désigne ici toute image ou iframe qui se trouve dans le contenu d’un article dans la boucle de requête principale actuelle, ainsi que toute image mise en avant d’un tel article. Ceci s’applique à la fois au contenu« individuel » et au contenu « d’archive » : Dans un contexte « individuel », la première image ou iframe du (seul) article n’est pas chargée de manière différée, tandis que dans un contexte « archive », la première image ou iframe du premier article de la requête n’est pas chargée de manière différée.
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 lorsque cela est nécessaire. Cela permet de charger les feuilles de style en fonction du contenu de la page, ce qui évite aux 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 les styles d’autres blocs si nécessaire. Les thèmes pourront ajouter des styles sur une base par bloc au lieu de charger des feuilles de style monolithiques qui sont chargées de force partout. Ceci 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 lock dans les réglages des blocs :
{
...
"attributes": {
"lock": {
"type": "object",
"default": {
"move": true,
"remove": true
}
}
}
}Avec cette fonctionnalité activée, les utilisateurs peuvent modifier le contenu du bloc, mais ne peuvent pas déplacer le bloc sur la page ou le supprimer du canevas de l’éditeur. L’image suivante montre un bloc personnalisé avec un ensemble standard de commandes de barre d’outils :
La définition de l’attribut lock, comme on le voit dans le code ci-dessus, permet de masquer les déplaceurs de bloc et les commandes 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 aussi Verrouillage des blocs dans WordPress 5.9.
Nouvelle API pour accéder aux réglages et styles globaux
WordPress 5.9 introduit une nouvelle API publique PHP pour lire les données de theme.json.
Lecture des réglages et des styles à partir de theme.json
Il existe 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() );$pathest un tableau listant le chemin d’accès au réglag spécifié$contextest un tableau définissant le contexte de ces données. Les développeurs peuvent lire à partir d’une section spécifique de réglages de bloc – par exemple,array( 'block_name' => 'core/paragraph' ). La cléorygindéfinie surbasepermet d’ignorer les données personnalisées enregistrées par l’utilisateur.
L’exemple de code suivant renverrait la valeur du réglage 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 les styles pour des blocs spécifiques. Le code suivant montre comment récupérer la valeur d’arrondi de la 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 la propriété nécessaire tout en tenant compte des réglages par défaut, des réglages du thème et des données utilisateur. La valeur personnalisée sera fournie si l’utilisateur configure le’arrondi de la bordure du bouton dans l’interface Styles globaux.
Pour ignorer les données de l’utilisateur, vous devez utiliser 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, du thème et des styles 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 réglages et aux styles globaux.
Autres fonctionnalités pour les développeurs
Les autres modifications apportées à WordPress 5.9 pour les développeurs que vous voudrez peut-être connaître comprennent :
- Les thèmes basés sur les blocs, une nouvelle façon de créer des thèmes dans WordPress 5.9
- Mises à jour pour Réglages, Styles et theme.json
- Modifications et filtres axés sur les thèmes dans WordPress 5.9
- Nouvelles requêtes de capacité dans WordPress 5.9
- Diverses modifications du cœur dans WordPress 5.9
- Diverses modifications 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)
Résumé
Nous conclurons cet article par une note rapide sur la part de marché de WordPress. WordPress propulse actuellement plus de 65 % de tous les sites web dont le système de gestion de contenu est connu et se trouve à 43 % de tous les sites web.
Ces chiffres sont impressionnants, surtout lorsqu’on les compare aux concurrents les plus proches qui détiennent moins de 5 % de parts de marché, comme Shopify.
Et cela signifie également que vous ne pouvez pas négliger l’évolution du CMS WP. Chaque nouvelle version de WordPress apporte de nouvelles fonctionnalités, des améliorations de l’interface, des améliorations des 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 basé sur des blocs, comme le nouveau thème par défaut Twenty Twenty-Two, et vous serez prêt à démarrer.
À vous de jouer ! Êtes-vous prêt à passer aux thèmes à base de blocs et à FSE ? Et quels sont vos changements préférés à venir avec WordPress 5.9 ?
Carlo est un passionné de webdesign et de développement frontend. Il joue avec WordPress depuis plus de 10 ans, notamment en collaboration avec des universités et des établissements d'enseignement italiens et européens. Il a écrit des dizaines d'articles et de guides sur WordPress, publiés à la fois sur des sites web italiens et internationaux, ainsi que dans des magazines imprimés. Vous pouvez trouver Carlo sur X et LinkedIn.
Laisser un commentaire