Quoi de neuf dans WordPress 6.1 : conversion JPEG vers WebP, typographie fluide, système de modèles amélioré et bien plus encore !

La sortie de WordPress 6.1 est prévue pour le 1er novembre 2022 et sera la troisième version majeure de l'année, après WordPress 6.0 Arturo, sorti le 24 mai, et WordPress 5.9 Josephine, sorti le 25 janvier.

Comme cela arrive toujours, les nouvelles versions de WordPress apportent de nouvelles fonctionnalités, améliorations et corrections de bogues des dernières versions du plugin Gutenberg dans le noyau. Et WordPress 6.1 ne fera pas exception, puisque 11 versions du plugin Gutenberg seront fusionnées dans le noyau, de 13.1 à 14.1.

Voici les principales dates du calendrier de sortie :

• Bêta 1 et gel des fonctionnalités : 20 septembre 2022 – À partir de cette date, les principaux contributeurs se concentreront sur les tests et la correction des bogues
• Release Candidate 1 : 4 octobre 2022 – Publier le guide de terrain avec les notes de développement
• Essai à vide : 24 octobre 2022
• Version générale de WordPress 6.1 : 1er novembre 2022

Au moment d'écrire ces lignes, les notes de développement et le guide de terrain n'ont pas encore été publiés, mais nous pouvons déjà jeter un coup d'œil derrière les rideaux et essayer de comprendre à quoi nous pouvons nous attendre avec la prochaine version majeure de WordPress.

Matias Ventura nous donne quelques aperçus dans la feuille de route vers la 6.1, où il dit que l'objectif de la 6.1 est d'affiner les expériences introduites avec la 5.9 et la 6.0 et de corriger certaines choses à l'approche de la phase 3 de la feuille de route de Gutenberg.

1. Améliorations de l'éditeur de modèles : l'une des principales nouveautés est l'éditeur de modèles. WordPress 6.1 devrait introduire la possibilité de parcourir, visualiser et modifier la structure du site.

2. Modèles de modèles : l'objectif est de donner aux modèles de blocs un rôle central dans la création de modèles et de pages, en les adaptant aux types de publication et aux types de blocs personnalisés, en améliorant la fonctionnalité de verrouillage, en améliorant la gestion des modèles enregistrés, etc.

3. Styles globaux et blocs et outils de conception : WordPress 6.1 permettra de gérer les polices Web, de mettre en œuvre une typographie réactive et d'étendre l'ensemble d'outils disponibles pour les blocs.

Cela dit, examinons de plus près certaines des fonctionnalités les plus puissantes de WordPress 6.1 :

Conversion automatique des images au format WebP

Introduit pour la première fois dans WordPress avec 5.8, WebP est un format d'image moderne qui fournit une compression supérieure sans perte et avec perte pour les images sur le Web.

Mais même si vous pouvez télécharger vos images WebP sur WordPress à l'aide de la médiathèque, WordPress ne prend pas en charge la conversion automatique des images au format WebP. Pour activer cette fonctionnalité sur votre site Web, vous devez utiliser un plugin WordPress WebP tiers.

Désormais, à partir de WordPress 6.1, les sous-tailles d'image devraient être automatiquement créées dans des formats de fichiers alternatifs. De plus, WordPress 6.1 introduit trois nouveaux filtres pour permettre aux développeurs de contrôler le type mime des sous-tailles générées et utilisées par WordPress sur le front-end.

Et, avec 6.1, WordPress générera et utilisera les sous-tailles WebP lorsqu'elles seront disponibles par défaut.

Lorsqu'un utilisateur télécharge une image JPEG, WordPress peut générer automatiquement des sous-tailles WebP et JPEG. WordPress pourra alors servir des images WebP sur le front-end. Les images JPEG seront utilisées dans des contextes où WebP n'est pas encore pris en charge (par exemple, e-mail).

Ceci est le comportement par défaut. Les développeurs pourront remplacer les paramètres par défaut et déterminer le format d'image à utiliser via des filtres.

Lorsque de nouveaux types MIME sont générés, seules les images dont la taille est inférieure à leurs originaux respectifs sont conservées. Par défaut, des types mime supplémentaires sont générés uniquement pour les tailles d'image par défaut et pour les tailles personnalisées lorsque vous avez opté pour la prise en charge.

Cette modification introduit également trois nouveaux filtres offrant un contrôle total sur la sortie de type mime secondaire :

• wp_image_sizes_with_additional_mime_type_support permet aux développeurs de contrôler le type mime d'image sur une base par taille
• wp_upload_image_mime_transforms permet aux développeurs de contrôler le type MIME de l'image pour une entrée donnée et même de remplacer le type MIME d'origine
• wp_content_image_mimes peut être utilisé pour contrôler l'ordre de sortie du type mime pour les images de contenu. Lors du rendu des images sur la page, le premier type mime disponible sera utilisé.

Ce changement devrait entraîner une réduction de la taille moyenne des fichiers de 30 %.

Avant la version finale 6.1, vous pouvez tester la nouvelle fonctionnalité avec le plugin Performance Lab du WordPress Performance Group.

Cependant, le changement semble controversé et de nombreux contributeurs continuent de signaler des problèmes. Plus précisément, il a été noté que :

Les ressources pour générer des images lorsque vous téléchargez une image augmenteront considérablement, mais les ressources pour servir une image seront réduites. Étant donné que le téléchargement d'images est très rare par rapport à la diffusion d'images, l'effort supplémentaire pour compresser et stocker les images devrait en valoir la peine.

Et:

En fait, cette augmentation spectaculaire de l'utilisation des ressources lors du téléchargement d'une image est un très mauvais effet secondaire ici. Cela signifie que de nombreux téléchargements échoueront et laisseront les utilisateurs bloqués. Cela augmentera également considérablement les demandes d'assistance pour WordPress et les sociétés d'hébergement. Ne pensez pas que c'est acceptable. Pour cette raison, même si le support multi-mime d'image est nécessaire dans WordPress, l'approche actuelle ne semble pas être une bonne solution.

Ainsi, au moment de la rédaction, il n'est toujours pas clair si l'utilisation du format WebP dans les sous-tailles d'image sera activée par défaut ou si l'administrateur du site devra s'inscrire pour servir le format WebP sur le front-end de leur site Web. . Entre-temps, la conversion automatique JPEG vers WEBP a été temporairement désactivée. Pour un résumé significatif de la discussion en cours, consultez l'article de Sara Gooding sur WP Tavern.

Typographie fluide

WordPress 6.1 ajoute la prise en charge de Fluid Typography via les fonctions CSS calc / clamp .

L'expression typographie fluide décrit la capacité du texte à s'adapter à la largeur de la fenêtre d'affichage, en passant progressivement d'une largeur minimale à une largeur maximale.

C'est quelque chose de différent de ce que vous pouvez réaliser avec les requêtes multimédias, car les requêtes multimédias permettent aux thèmes de redimensionner le texte en fonction de tailles de fenêtres spécifiques, mais ne font rien entre différentes valeurs.

Certains thèmes prennent déjà en charge la typographie fluide. Twenty Twenty-Two, par exemple, utilise la fonction CSS clamp() pour plusieurs tailles de police. Par exemple:

 "settings": { ... "custom": { "spacing": { "small": "max(1.25rem, 5vw)", "medium": "clamp(2rem, 8vw, calc(4 * var(--wp--style--block-gap)))", "large": "clamp(4rem, 10vw, 8rem)", "outer": "var(--wp--custom--spacing--small, 1.25rem)" }, "typography": { "font-size": { "huge": "clamp(2.25rem, 4vw, 2.75rem)", "gigantic": "clamp(2.75rem, 6vw, 3.25rem)", "colossal": "clamp(3.25rem, 8vw, 6.25rem)" } } } }

Comme vous pouvez le voir dans le code ci-dessus, les valeurs de taille de police fluide sont utilisées pour chaque taille de police.

Désormais, à partir de WordPress 6.1, les thèmes sont activés pour générer automatiquement des tailles de police fluides en déclarant la nouvelle propriété typography.fluid comme suit :

 "styles": { .... "typography": { "fluid": true, "fontSizes": [ { "size": "2rem", "fluid": { "min": "2rem", "max": "2.5rem" }, "slug": "medium", "name": "Medium" } ] }

En utilisant typography.fluid et typography.fontSizes[].fluid , la valeur de chaque taille de police est automatiquement calculée à l'aide de la formule suivante :

 --wp--preset--font-size--{slug}: clamp({fluid.min}, {fluid.min} + ((1vw - 0.48rem) * 1.592), {fluid.max});

Par exemple:

 --wp--preset--font-size--large: clamp(2rem, 2rem + ((1vw - 0.48rem) * 1.592), {2.5rem});

Notez qu'au moment d'écrire ces lignes, Fluid Typography est une fonctionnalité expérimentale. Vous pouvez vous plonger dans les détails techniques dans Supports de blocs : ajouter une typographie fluide.

La typographie fluide est une amélioration significative pour la création de sites Web #WordPress modernes. Nous venons de mettre à jour @frostwp pour inclure cette fonctionnalité. Voici une excellente lecture de @richard_tabor sur ce que c'est et pourquoi c'est important. https://t.co/Bq5YuHX3wi

– Brian Gardner (@bgardner) 8 août 2022

Voir aussi Comment ajouter une typographie fluide aux thèmes de blocs WordPress par Rich Tabor et Typographie fluide avec Gutenberg par Carolina Nymark.

Types de blocs nouveaux et améliorés

Avec autant de versions de Gutenberg fusionnées dans le noyau, WordPress 6.1 va apporter un tout nouveau bloc Table des matières et des tonnes de changements et d'améliorations aux types de blocs existants.

Nouveau bloc Table des matières

Introduit pour la première fois avec Gutenberg 13.3, un nouveau bloc Table des matières est désormais disponible en tant que bloc expérimental. Une fois ajouté à votre message ou à votre page, le bloc Table des matières détectera tous les blocs de titre ajoutés au contenu et les affichera sous forme de liens d'ancrage dans une liste ordonnée.

Ajout de la prise en charge des bordures pour le bloc Colonnes

Le bloc Colonnes exploite désormais le nouveau composant BorderBoxControl qui permet aux utilisateurs de WordPress de spécifier des bordures personnalisées pour les colonnes, en définissant également des styles complètement différents pour chaque bordure (voir aussi Colonne : ajouter la prise en charge des bordures à la demande d'extraction des blocs de colonne).

Des bordures individuelles peuvent également être définies dans le fichier theme.json comme suit :

 "core/column": { "border": { "top": { "color": "#CA2315", "style": "dashed", "width": "6px" }, "right": { "color": "#FCB900", "style": "solid", "width": "6px" } } }

Les développeurs peuvent en savoir plus sur le nouveau contrôle dans Component Reference - BorderBoxControl.

Contrôles de bordure pour les blocs d'images

Gutenberg 13.8 a introduit la prise en charge de tous les contrôles de bordure pour le bloc Image. Le changement sera ajouté au cœur de WordPress 6.1, ouvrant la porte à de nouvelles et formidables opportunités pour les créatifs Web.

Améliorations du bloc de commentaires

WordPress 6.1 nous apporte également un bloc de commentaires amélioré. À partir de la prochaine version de WordPress, les utilisateurs pourront utiliser des fonctionnalités d'édition plus avancées sur le bloc Commentaires.

Dans l'image ci-dessous, vous pouvez voir la barre latérale des paramètres du bloc Commentaires et les modifications appliquées au titre des commentaires.

Publier des variations de bloc de termes pour les termes de taxonomie personnalisés

Le bloc Post Terms a été amélioré avec une nouvelle variante de taxonomie personnalisée. Vous pouvez maintenant enregistrer une nouvelle taxonomie personnalisée, par exemple le type de publication "Acteurs dans un film", et vous pourrez ajouter une liste de termes de taxonomie à la publication actuelle ou au type de publication personnalisé.

L'image ci-dessous montre une liste d'acteurs dans un type de publication de film.

Un nouveau filtre parents pour le bloc de requête

Un nouveau filtre Parents est désormais disponible pour le bloc Requête afin d'afficher les publications hiérarchiques et les pages ayant le même parent.

Commandes de famille de polices dans le bloc d'en-tête

Le bloc Titre prend désormais en charge les contrôles de famille de polices.

Espacement horizontal et vertical dans le bloc Galerie

À partir de WordPress 6.1, un nouveau contrôle d'espacement axial vous permet de définir différents espaces horizontaux et verticaux pour les images dans le bloc Galerie .

Ce changement se traduit par une plus grande flexibilité lors de la création de la mise en page des galeries d'images.

Images en vedette dans le bloc de couverture

Les images en vedette attirent toujours beaucoup d'attention, et dans WordPress 6.1, la portée de leur utilisation est encore étendue. À partir de la version 6.1, l'image sélectionnée peut être sélectionnée directement à partir de l'espace réservé du bloc Couverture, comme illustré dans les images suivantes.

Ce changement devrait contribuer à créer une expérience utilisateur plus cohérente, en rendant plus clair pour l'utilisateur ce qu'il personnalise.

De plus, une bascule d'image en vedette a été ajoutée au flux de remplacement des médias.

Outils d'apparence pour les liens de navigation des articles

La propriété de paramètre d' appearanceTools vous permet d'accepter plusieurs paramètres qui sont désactivés par défaut.

Depuis WordPress 6.1, pour les thèmes prenant en charge la propriété de réglage d' appearanceTools , vous pouvez personnaliser la couleur du lien et la famille de polices dans Post Navigation Link.

Vous pouvez en savoir plus sur la propriété appearanceTools dans notre introduction au thème Twenty Twenty-Two.

Verrouiller à l'intérieur du bloc de conteneurs en un seul clic

Une nouvelle bascule permet désormais aux utilisateurs de verrouiller des blocs dans un conteneur de blocs en un seul clic. Cela s'applique aux blocs Group , Cover et Column .

Fonctionnalités supplémentaires et améliorations de l'éditeur de blocs

Bien qu'il s'agisse d'une version de consolidation, WordPress 6.1 apportera tellement de changements et d'améliorations qu'il serait impossible de tous les lister dans un seul article. En plus du nouveau bloc Table des matières et des changements listés ci-dessus, nous verrons :

Variations des pièces de modèle dans le bloc d'insertion

Des variantes de pièces de modèle sont désormais disponibles dans l'outil d'insertion de blocs, ce qui facilite l'ajout de pièces de modèle à votre site Web.

Ce changement rend le processus d'édition plus simple et plus rapide, permettant aux utilisateurs de visualiser rapidement les variations d'une partie de modèle en une seule fois en quelques clics.

Visualiser la marge et le rembourrage

Une petite mais utile amélioration est la mise en surbrillance des marges et du rembourrage pendant que l'utilisateur les ajuste. Cela devrait rendre beaucoup plus clair l'espace ajouté à l'intérieur ou à l'extérieur des éléments.

Améliorations de la barre latérale des paramètres

WordPress 6.1 présentera également plusieurs améliorations d'interface dans la barre latérale Paramètres.

La barre latérale des paramètres de publication a été légèrement repensée. Maintenant, les champs pour le format de publication, le slug, le modèle et les auteurs sont alignés et ont la même largeur. De plus, le planificateur de publication a été simplifié pour rendre l'expérience plus compréhensible. La section des modèles a également été déplacée dans un popover pour économiser de l'espace et nettoyer l'interface.

De plus, le panneau de modèle a été remplacé par un lien de modèle. Lorsque vous cliquez dessus, le lien du modèle affiche le modèle par défaut dans une fenêtre contextuelle.

Publier les mises à jour de conception de popover

Le sélecteur de date et d'heure dans le popover de publication a été repensé et utilise désormais "les composants WordPress existants et le style Emotion".

Des informations plus techniques sont disponibles dans les mises à jour de conception du popover de publication ( DateTimePicker ).

Il est temps de lire dans le panneau d'informations

Le panneau d'informations disponible dans la barre d'outils supérieure a été amélioré et affiche désormais le temps de lecture en plus des mots, des caractères, des titres, des paragraphes et des blocs.

Le temps de lecture estimé est calculé sur une moyenne de 189 mots par minute. En savoir plus dans @wordpress/editor : ajoutez le temps estimé de lecture à la table des matières dans l'éditeur.

Outils de construction nouveaux et améliorés

WordPress 6.1 étendra également les fonctionnalités du Site Builder. Les modèles de blocs seront disponibles à plus d'endroits et un choix plus large de types de modèles améliorera l'expérience d'édition dans l'éditeur de modèles.

Modèles de création pour les types de publication

WordPress 6.0 a introduit les modèles de création de page, qui sont un moyen de fournir une sélection de modèles chaque fois qu'un utilisateur crée une nouvelle page. De cette façon, vous n'avez pas à créer la page à partir de zéro, mais vous pouvez choisir un modèle à partir d'un modal et remplir le contenu, et vous êtes prêt à partir.

Pour activer cette fonctionnalité, au moins un modèle de bloc doit déclarer la prise en charge des types de bloc de core/post-content .

Désormais, à partir de WordPress 6.1, cette fonctionnalité s'étend à tous les types de publication. Tout ce que vous avez à faire est d'inclure core/post-content dans les blockTypes de votre modèle et de définir les postTypes pertinents.

Découvrons maintenant comment profiter de cette nouvelle fonctionnalité avec un exemple pratique. Supposons que vous ayez un type de publication Movie.

Tout d'abord, vous devez enregistrer un motif de bloc comme indiqué ici.

Ou vous pouvez choisir la méthode la plus simple et utiliser l'enregistrement de modèle implicite (pour plus de simplicité dans cet exemple, nous utiliserons l'enregistrement de modèle implicite).

Créez un fichier PHP pour votre modèle de bloc dans un répertoire /patterns du dossier de votre thème (pour cet exemple, nous avons utilisé Twenty Twenty-Two). Ajoutez ensuite le titre suivant :

 <?php /** * Title: Pattern with columns * Slug: twentytwentytwo/pattern-with-columns * Block Types: core/post-content * Post Types: movie * Categories: text */ ?> <!-- wp:heading --> <h2>Hello there!</h2> <!-- /wp:heading -->

Et c'est tout. Désormais, chaque fois que vous créez un nouveau type de publication Film, un modal Choisir un modèle apparaît à l'écran.

Si vous souhaitez que le modal s'affiche sur plusieurs types de publication, ajoutez simplement les slugs correspondants séparés par des virgules :

 <?php /** * Title: Pattern with columns * Slug: twentytwentytwo/pattern-with-columns * Block Types: core/post-content * Post Types: movie, book * Categories: text */ ?> <!-- wp:heading --> <h2>Hello there!</h2> <!-- /wp:heading -->

Pour une vue plus détaillée des modèles de création, voir Possibilité d'utiliser des modèles de création pour d'autres types de publication en plus de la page.

Plus de types de modèles dans l'éditeur de site

Avec WordPress 6.0, seul un nombre limité de modèles peut être créé dans l'éditeur de site :

À partir de WordPress 6.1, il sera possible de créer un modèle différent pour chaque type de publication.

Et vous pouvez également ajouter et modifier des modèles pour les taxonomies de base et personnalisées, même pour des catégories ou des balises uniques.

Si vous enregistrez des types de publication personnalisés ou une taxonomie personnalisée, ils seront automatiquement répertoriés dans la boîte de sélection de modèles de l'éditeur de site.

Mais pas seulement. Une fois le type de publication de modèle sélectionné, un modal invite l'utilisateur à créer un modèle pour toutes les publications de ce type ou à créer un nouveau modèle pour une publication spécifique du type de publication sélectionné.

Ensuite, un nouveau modal fournit une liste des publications disponibles pour ce type de publication.

Modifications pour les développeurs

WordPress 6.1 ajoute également une nouvelle API et plusieurs améliorations pour les développeurs.

Nouvelle API de persistance des préférences

WordPress 6.1 introduit une toute nouvelle API de persistance des préférences qui enregistre les préférences de l'éditeur dans la base de données WordPress au lieu du stockage local.

De cette façon, les préférences de l'utilisateur peuvent être stockées sur tous les navigateurs et appareils.

À cette fin, le système de persistance précédent dans le package @wordpress/data a été déprécié et un nouveau package preferences-persistence a été introduit. Le nouveau package enregistre les données dans la méta utilisateur via l'API Rest. Les données seront également enregistrées dans le stockage local en tant que solution de secours au cas où l'utilisateur se déconnecte ou si une demande est interrompue (voir également le pull #39795).

Prise en charge des styles de boutons dans theme.json

Avec WordPress 6.1, vous pouvez ajouter des styles de boutons à vos thèmes en utilisant theme.json . Cela permet aux développeurs de thèmes d'ajouter de la cohérence aux boutons d'un bloc à l'autre. Un exemple est le bloc de recherche, mais également les blocs tiers bénéficieront de ce changement.

Pour rendre cela possible, une nouvelle classe wp-element-button sera ajoutée aux éléments de bouton pour partager le même style.

Vous pouvez tester cette modification en ajoutant le code suivant à votre theme.json dans un environnement de développement :

 { "styles": { "elements": { "button": { "color": { "background": "blue" } } } } }

Les variations de bloc de recherche prennent désormais en charge les variables de requête

WordPress 6.1 prendra en charge les variantes du bloc de recherche basées sur les variables de requête. Cela signifie que vous pourrez fournir à vos utilisateurs des champs de recherche à utiliser pour rechercher de manière granulaire tout type de contenu.

Dans l'exemple suivant, nous enregistrons une variante de bloc pour un type de publication de movies . L'exemple est basé sur le tutoriel de Carolina Nymar sur les variations de blocs.

Dans le fichier de fonctions de votre thème (enfant), ajoutez le code suivant :

 function movies_editor_assets() { wp_enqueue_script( 'movies-block-variations', get_template_directory_uri() . '/assets/block-variations.js', array( 'wp-blocks' ) ); } add_action( 'enqueue_block_editor_assets', 'movies_editor_assets' );

Maintenant, créez le fichier block-variations.js suivant dans le dossier assets de votre thème (enfant) :

 wp.blocks.registerBlockVariation( 'core/search', { name: 'movie-search', title: 'Movie Search Block', attributes: { query: { post_type: 'movies' } } } );

Rechargez maintenant votre tableau de bord WordPress et recherchez une variante du bloc de recherche de films dans l'outil d'insertion de blocs.

Vous pouvez en savoir plus sur les variations de blocs dans la documentation officielle.

Un nouvel élément Buttons dans les styles globaux

WordPress 5.9 a introduit une interface de styles globaux pour permettre aux utilisateurs de personnaliser les préréglages de style pour leurs sites Web, soit globalement, soit au niveau du bloc.

Avec la première implémentation, vous pouvez personnaliser les couleurs de l'arrière-plan, du texte et des liens. Désormais, à partir de WordPress 6.1, un nouvel élément Boutons a été ajouté au panneau Couleurs pour permettre aux utilisateurs de contrôler l'apparence des boutons sur l'ensemble de leurs sites Web.

Cela affecterait le style des boutons dans tout le site, du bloc Boutons au bloc Recherche et aux blocs tiers utilisant des boutons.

Sommaire

Il y a en effet de nombreuses nouvelles fonctionnalités à venir avec WordPress 6.1, mais il est encore trop tôt pour donner une évaluation finale de la dernière version de 2022. De plus, au moment d'écrire ces lignes, nous n'avons pas encore atteint le Feature Freeze, il peut donc y avoir encore des fonctionnalités supplémentaires et des changements à discuter avant la version finale prévue pour le 1er novembre.

Bien que nous puissions déjà être assez sûrs des nouvelles fonctionnalités que nous verrons grâce aux 11 versions de Gutenberg fusionnées dans le noyau, nous ne savons pas encore comment la conversion JPEG vers WebP sera implémentée et d'autres changements peuvent être ajoutés à ceux énumérés ci-dessus. .

Mais continuez à nous suivre car nous mettrons à jour cet article car il y a des changements dignes d'attention et de nouvelles fonctionnalités sont fusionnées dans le noyau.

Maintenant à vous. Qu'attendez-vous de la prochaine version de WordPress ? Avez-vous déjà testé le Nightly Build dans votre environnement de développement ? Partagez vos réflexions sur WordPress 6.1 avec nous dans la section des commentaires ci-dessous.