Nouveautés de WordPress 6.2 : Mode navigation, style de livre, menus de navigation améliorés, nouvelles API, et bien plus encore

WordPress 6.2 « Dolphy » est sorti et il est temps pour nous d’explorer les nouveautés de la première version de 2023.

Avec WordPress 6.2, nous entrons dans la phase finale de la phase 2 de la feuille de route de développement à long terme de Gutenberg, et l’éditeur de blocs quitte officiellement la phase bêta.

Cette version se concentre principalement sur l’amélioration de l’interface et la rationalisation de l’expérience d’édition.

Une nouvelle approche de la navigation entre les modèles et les parties de modèles a été introduite, ainsi que la possibilité d’importer des widgets dans les thèmes de blocs, un nouveau mode d’écriture sans distraction, une expérience de réglage des blocs à l’échelle, et des tonnes de petites et grandes améliorations des blocs existants, des performances et de la facilité d’utilisation.

Mais s’il y a un élément qui fait un bond en avant en termes de fonctionnalité et de convivialité, c’est bien le bloc Navigation. Depuis sa sortie, le menu Navigation a connu plusieurs itérations qui ont considérablement simplifié le processus d’édition au fil du temps. Avec WordPress 6.2, le développement continue, et dans cet article, nous allons vous montrer comment vous pouvez facilement gérer un menu de navigation.

Consultez notre guide vidéo pour découvrir les nouveautés de WordPress 6.2

Amélioration de l’expérience d’édition

WordPress 6.2 apporte une expérience d’édition améliorée, avec l’ensemble de la structure du site placée au centre. Vous pouvez maintenant gérer les menus de navigation plus facilement, pousser les changements de style d’un seul bloc vers les Styles Globaux, et naviguer sans effort entre les modèles et les parties de modèles avec des parties de modèles colorées et des blocs réutilisables.

Mais ce n’est pas tout. Examinons en détail les principaux ajouts et changements apportés à l’interface de l’éditeur.

Une interface de l’éditeur de site et un mode de navigation revus et corrigés

Avec WordPress 6.2, plusieurs améliorations sont apportées à l’interface de l’éditeur. La première et la plus intéressante des mises à jour concerne l‘interface de l’éditeur de site. Grâce à un nouveau mode de navigation, il est maintenant plus facile de naviguer à travers les modèles et les parties de modèles.

La nouvelle interface vous permet également d’ajouter un nouveau modèle ou une nouvelle partie de modèle directement depuis la colonne latérale de l’éditeur en cliquant simplement sur l’icône plus (+) située à droite du titre du menu.

Selon Ryan Welcher, contributeur Wp Core et Documentation, « Le travail sur cette fonctionnalité est en cours et continuera à s’améliorer au fur et à mesure que de nouvelles versions de Gutenberg seront publiées. »

Le flux de travail est désormais plus fluide et plus homogène. Pour commencer à modifier le modèle actuel/la partie du modèle, il suffit de cliquer sur le bouton Modifier dans le menu de gauche, ou sur l’aperçu du modèle au milieu de la page.

Mode sans distraction

WordPress 6.2 introduit un nouveau mode d’édition sans distraction, qui réduit l’encombrement du canevas et vous permet de vous concentrer sur le contenu de la page.

Vous pouvez activer cette fonctionnalité dans le panneau d’options qui s’affiche en cliquant sur l’icône de l’ellipse (trois points) dans le coin supérieur droit.

Une fois le mode « Sans distraction » activé, les colonnes latérales et les barres d’outils disparaissent, ne laissant à l’écran que le contenu sur lequel vous travaillez.

Inspecteur de blocs à onglets

WordPress 6.2 introduit un nouvel inspecteur de blocs qui vise à mettre de l’ordre dans la colonne latérale en divisant les contrôles de réglages en panneaux séparés.

Les réglages des blocs sont maintenant divisés en onglets pour séparer les réglages de style des autres réglages des blocs.

Si disponibles, les onglets de l’inspecteur de blocs seront affichés dans l’ordre suivant :

• Vue en liste : Comprend des commandes permettant de gérer les enfants d’un bloc, tels que les sous-menus et les liens dans le bloc Navigation
• Réglages : Comprend les réglages de configuration qui ne sont pas liés à l’apparence du bloc
• Apparence : Comprend les réglages spécifiquement liés au style du bloc actuel, tels que la typographie et les couleurs

Il s’agit d’une amélioration notable de la convivialité de l’interface, en particulier pour les blocs avancés avec de nombreuses options de configuration comme le bloc de groupe ou le bloc de navigation.

Notez que :

• Le nouvel inspecteur n’affiche un onglet que s’il contient des éléments à afficher.
• Si l’onglet Réglages ne contient que le panneau Avancé, il est déplacé vers l’onglet Apparence.
• Si l’inspecteur de blocs n’a qu’un seul onglet, il s’affiche comme avant WordPress 6.2.

Consultez la note de développement pour une vue plus détaillée du nouvel inspecteur de blocs.

Colorisation des parties de modèles et des blocs réutilisables

Pour les différencier plus facilement des groupes et des blocs, les parties de modèle et les blocs réutilisables sont maintenant mis en évidence dans une couleur différente dans la vue de liste, l’outil d’insertion de blocs, la barre d’outils des blocs et dans le canevas de l’éditeur.

Cela se produit à la fois dans l’éditeur de site et dans l’éditeur d’articles, comme le montre l’image ci-dessous.

Une nouvelle version de l’outil d’insertion de blocs

L’insertion de blocs a subi plusieurs modifications qui améliorent considérablement l’expérience d’édition globale.

Tout d’abord, une nouvelle interface améliore la navigation entre les catégories de compositions et de médias et fournit des aperçus plus grands pour les compositions et les éléments de médias.

Lorsque des médias existent sur le site, un onglet Média apparaît dans l’insertion de blocs pour simplifier l’insertion de médias dans le contenu. Vous pouvez faire glisser et déposer des images/médias ou simplement cliquer sur votre média pour l’ajouter au contenu.

A l’intérieur de l’onglet, un bouton Ouvrir la médiathèque vous permet d’accéder à la médiathèque de WordPress.

Intégration d’Openverse dans l’insertion de blocs

Openverse est un outil qui vise à partager des œuvres sous licence ouverte ou relevant du domaine public afin qu’elles puissent être utilisées par tout le monde. Désormais, avec WordPress 6.2, Openverse est intégré dans l’outil d’insertion de blocs.

Pour accéder à cette nouvelle fonctionnalité, cliquez sur l’onglet Media de l’insertion de blocs. Vous verrez alors apparaître un panneau avec un champ de recherche et des aperçus d’images provenant directement du référentiel Openverse.

Pour les détails techniques, consultez la demande d’intégration d’Openverse.

Migrer les widgets vers les thèmes de blocs

A partir de WordPress 6.2, les utilisateurs d’un site utilisant un thème classique qui décident de passer à un thème bloc peuvent migrer leurs zones de widgets existantes vers le nouveau thème, en les convertissant en parties de modèle.

Voyons comment cela fonctionne.

Tout d’abord, créez une zone de widgets dans un thème classique. Par exemple, vous pouvez activer Twenty-Eleven et ajouter un calendrier à la zone de pied de page numéro un.

Changez maintenant de thème pour Twenty Twenty-Three. Ouvrez l’Éditeur de site, choisissez un modèle à modifier et ajoutez une partie de modèle.

Dans le bloc de la colonne latérale, sélectionnez la zone de widgets à importer dans le menu déroulant Importer une zone de widgets.

Et c’est tout. Vous pouvez maintenant gérer votre ancienne zone de widgets comme n’importe quelle autre partie du modèle.

Détails du document et vue de la liste combinés

Avant WordPress 6.2, il y avait deux boutons séparés dans la barre d’outils de l’éditeur pour les détails et la vue en liste. Dans l’image suivante, vous pouvez voir les détails du document dans WordPress 6.1, y compris le nombre de mots, le nombre de caractères, le temps de lecture, et le nombre d’en-têtes, de paragraphes et de blocs, ainsi que le plan du document.

A partir de WordPress 6.2, la vue en liste et les détails ont été déplacés dans un panneau unique de présentation du document divisé en deux onglets : Vue en ligne et Structure.

Ce changement devrait faciliter la gestion du document.

Capacités étendues des blocs

Avec WordPress 6.2, les capacités de plusieurs types de blocs ont été étendues. C’est particulièrement vrai pour le bloc Navigation, qui est concerné par plusieurs changements et améliorations de l’expérience d’édition.

Examinons les principaux changements en détail.

Édition par liste pour le bloc Navigation

Avec la version 6.2 de WordPress, il est possible de modifier la disposition des éléments du bloc Navigation à partir d’une liste dans la colonne latérale des réglages du du bloc.

En cliquant sur l’élément de menu, vous accéderez à la colonne latérale des réglages du lien de page sélectionné, où vous pourrez modifier les détails du lien, y compris l’étiquette, l’URL, la description, le titre du lien et le lien rel.

Cette modification simplifie grandement la modification des menus de navigation, en vous permettant d’ajouter, d’organiser et de supprimer des éléments dans votre menu, voire de créer de nouveaux menus de navigation.

Verrouiller la navigation

Une autre amélioration apportée au bloc Navigation est la possibilité de verrouiller la modification des menus de manière plus granulaire. Vous pouvez maintenant restreindre la modification, désactiver le mouvement et empêcher la suppression, alors qu’avec WordPress 6.1, seules les options restreindre la modification et désactiver le mouvement étaient disponibles.

En outre, les options sélectionnées peuvent également être appliquées aux blocs internes (liens et sous-menus).

Ajouter/Supprimer des légendes dans la barre d’outils des blocs

Un nouveau bouton Ajouter/Supprimer une légende permet aux utilisateurs de contrôler les légendes depuis la barre d’outils des blocs pour plusieurs blocs (Audio, Vidéo, Image).

Si vous avez déjà défini une légende, elle sera automatiquement incluse lorsque vous ajouterez l’image à votre contenu.

Améliorations apportées au bloc Liste de pages

Deux améliorations concernent le bloc Liste de pages.

Tout d’abord, le bloc Liste de pages peut désormais être développé pour afficher la liste des pages dans le panneau Vue en liste.

En outre, une nouvelle option dans la colonne latérale du bloc vous permet désormais de définir une page de départ et de n’afficher dans le bloc que les pages qui en découlent.

Nouvel espace réservé aux blocs de groupe

L’espace réservé du bloc de groupe affiche désormais un sélecteur de variations lorsque le bloc est ajouté au contenu de la page.

Support des blocs de positionnement épinglé

WordPress 6.2 introduit une nouvelle fonctionnalité de support des blocs de position, en commençant par le positionnement épinglé.

Cette nouvelle fonctionnalité ne s’applique actuellement qu’aux blocs de groupe, pour lesquels elle est activée par défaut.

Les développeurs de thèmes peuvent activer le positionnement épinglé sur leurs thèmes en utilisant la fonctionnalité appearanceTools dans theme.json. Si vous souhaitez un contrôle plus granulaire sur les outils d’apparence, vous pouvez également définir l’option settings.position.sticky sur true.

Vous pouvez activer le positionnement épinglé dans le panneau Position de la colonne latérale de contrôle de l’inspecteur.

Lorsque le positionnement épinglé est activé, la balise HTML reçoit une classe is-position-sticky et certaines règles CSS s’appliquent à l’élément correspondant :

.wp-container-6 {
    top: calc(0px + var(--wp-admin--admin-bar--position-offset, 0px));
    position: sticky;
    z-index: 10;
}

Le positionnement épinglé ne fonctionne que pour les blocs de groupe situés à la racine du document. Bien que cela puisse éviter la confusion et les erreurs pour les utilisateurs, vous pourriez trouver le positionnement épinglé intégré un peu délicat pour le moment (et vous pourriez vouloir vérifier les différentes méthodes pour ajouter un en-tête épinglé à votre site WordPress). Cependant, selon la note de développement,

… lors des tests manuels, les commentaires ont indiqué que sans un travail supplémentaire sur l’interface utilisateur ou l’interface graphique, il pourrait être déroutant pour les utilisateurs qui tentent de créer des en-têtes épinglés s’ils définissent accidentellement un bloc non racine comme épinglé, ou par exemple, un bloc dans une partie de modèle d’en-tête comme épinglé. La décision a été prise de réduire la fonctionnalité aux seuls blocs racine pour la version 6.2 afin de disposer de plus de temps pour explorer une solution appropriée pour les blocs imbriqués.

La fonction de positionnement n’est disponible que pour les blocs individuels, vous ne la trouverez donc pas dans les styles globaux.

Améliorations supplémentaires de l’expérience d’édition des blocs

Voici d’autres améliorations notables apportées à l’édition des blocs :

• Vous pouvez désormais glisser-déposer des images sur un paragraphe vide pour le remplacer par un bloc Image.
• Les contrôles de typographie ont été regroupés dans des panneaux. Cela rend l’interface Styles plus cohérente avec l’interface Réglages et améliore sa convivialité, car vous pouvez désormais afficher et masquer les contrôles comme dans l’interface Réglages des blocs.

  

• Il est maintenant possible de modifier l’espacement des lettres des blocs d’en-tête directement dans l’interface des Styles globaux.
• Vous pouvez maintenant définir la couleur de l’arrière-plan, du lien et du texte du bloc Calendrier.
• Deux nouvelles catégories de blocs Bannières et Pieds de page ont été introduites pour mieux refléter la structure des pages web.
• Il est désormais possible de compléter automatiquement les liens dans n’importe quel bloc à l’aide du raccourci [[. Avant ce changement, les blocs devaient déclarer explicitement la prise en charge de l’autocomplétion des liens à l’aide de __experimentalSlashInserter.
• Un nouveau raccourci clavier control + option + 1–6 vous permet de transformer un paragraphe en titre.
• Le bloc Liste de pages prend désormais en charge toutes les options typographiques, y compris la famille de polices, la taille des polices, l’apparence, la hauteur de ligne, l’espacement des lettres, la décoration et la casse des lettres.

  

Outils de conception améliorés

De nombreuses nouvelles fonctionnalités et améliorations introduites dans WordPress 6.2 renforcent les capacités de stylisme et de conception du CMS. Vous trouverez ci-dessous une liste des fonctionnalités les plus intéressantes de la version 6.2, que nous détaillerons plus loin.

Guide de style

WordPress 6.2 introduit une nouvelle fonctionnalité, le guide style, qui permet aux utilisateurs de prévisualiser n’importe quel bloc pouvant être utilisé sur leur site web sans avoir à ajouter ces blocs à un modèle ou à une partie de modèle. Vous pouvez lancer le guide de style en cliquant sur le bouton Ouvrir le guide de style (l’icône en forme d’œil) qui apparaît maintenant dans l’en-tête Styles à l’intérieur des styles globaux.

Cela ouvre une interface montrant un aperçu de chaque bloc principal et tiers par catégorie.

La nouvelle interface du guide de style simplifie le processus de conception en offrant des aperçus de chaque style de bloc en un seul endroit centralisé.

D’un point de vue technique, la nouvelle interface est générée par un nouveau composant StyleBook ajouté à @wordpress/edit-site pour afficher un aperçu de chaque bloc enregistré dans une iframe (voir aussi PR #45960).

La même interface fournit également des aperçus de blocs individuels. A titre d’exemple, l’image suivante montre l’aperçu d’un widget de calendrier personnalisé.

Les développeurs peuvent empêcher l’insertion et la prévisualisation d’un bloc de deux manières. Tout d’abord, vous pouvez définir supports.inserter sur false dans block.json:

{
    "supports": {
        "inserter": false
    }
}

Une autre façon de masquer l’aperçu du bloc est d’éviter la propriété example, qui est utilisée pour créer un aperçu du bloc dans le panneau d’aide de l’inspecteur (pour en savoir plus, cliquez ici).

Ombres dans les styles globaux

Avec WordPress 6.2, il est désormais possible d’ajouter et de personnaliser des ombres à certains blocs en utilisant les styles globaux ou theme.json (à ce jour, la fonction d’ombre n’est disponible que pour le bloc Bouton).

Tout d’abord, dans les thèmes supportant cette fonctionnalité, vous pouvez ajouter des ombres à partir de l’interface des Styles Globaux.

Pour le voir en action, activez le thème Twenty Twenty-Three, naviguez vers Styles > Blocs > Bouton, et cliquez sur le bouton Ombre.

Une fenêtre contextuelle d’ombre vous permet de sélectionner une ombre parmi les pré-réglages du thème.

Les développeurs de thèmes et les utilisateurs avancés peuvent également ajouter une ombre aux blocs à l’aide du fichier theme.json. La définition suivante ajoute une ombre noire de 4px aux blocs Bouton :

"styles": {
    "blocks": {
        "core/button": {
            "shadow": "4px 4px #000000"
        }
    }
},

Vous pouvez également définir des pré-réglages pour permettre aux utilisateurs de thèmes d’en sélectionner un dans l’interface Styles :

"settings": {
    "shadow": {
        "presets": [
            {
                "shadow": "4px 4px #FF0000",
                "name": "Red",
                "slug": "red"
            },
            {
                "shadow": "4px 4px #00FF00",
                "name": "Green",
                "slug": "green"
            },
            {
                "shadow": "4px 4px #0000FF",
                "name": "Blue",
                "slug": "blue"
            }
        ]
    },
}

Une fois définis, vos pré-réglages apparaissent dans le panneau Ombres, dans le bloc Styles.

Vous pouvez également choisir la valeur d’un pré-réglage et l’utiliser comme valeur par défaut du bloc :

"styles": {
    "blocks": {
        "core/button": {
            "shadow": "var(--wp--preset--shadow--blue)"
        }
    }
}

Nouveau contrôle de la dimension de la hauteur minimale

A partir de WordPress 6.2, le panneau Dimensions de la colonne latérale des réglages des blocs pour les blocs Groupe et Contenu de l’article fournit maintenant un nouveau contrôle de la hauteur minimale activé par défaut dans les thèmes utilisant la fonctionnalité appearanceTools.

Ce nouveau contrôle permet aux utilisateurs de définir une hauteur minimale pour les blocs Groupe et Contenu de l’article et peut être utilisé pour afficher le pied de page en bas de la page, même avec peu de contenu.

Combiné aux nouveaux outils d’alignement vertical, il permet également d’aligner verticalement les éléments intérieurs en haut/au centre/en bas de la page.

Les développeurs peuvent ajouter la prise en charge de la hauteur minimale aux thèmes en ajoutant le réglage minHeight au fichier theme.json :

{
    "settings": {
        dimensions: "minHeight": true
    }
}

Vous pouvez également utiliser la propriété appearanceTools:

{
    "settings": {
        "appearanceTools": true
    }
}

La nouvelle propriété minHeight peut également être utilisée pour définir une valeur spécifique directement dans theme.json :

{
    "styles": {
        "blocks": {
            "core/post-content": {
                "dimensions": {
                    "minHeight": "80vh"
                }
            }
        }
    }
}

Les développeurs de blocs peuvent ajouter la propriété supports.dimensions.minHeight à leur fichier block.json et lui attribuer la valeur true. Pour les blocs statiques, la règle CSS min-height sera stockée en tant que style en ligne, tandis que pour les blocs dynamiques, elle sera incluse dans l’attribut de style renvoyé par get_block_wrapper_attributes.

CSS personnalisé dans le panneau Styles

L’une des fonctionnalités manquantes dans l’éditeur de site par rapport à la personnalisation de thème était la possibilité d’ajouter des styles CSS personnalisés. WordPress 6.2 comble cette lacune et l’interface des Styles globaux inclut désormais un champ texte pour ajouter des règles CSS personnalisées qui ne seront pas écrasées lorsque vous mettrez à jour votre thème.

Vous pouvez ajouter des styles personnalisés par bloc, à partir du panneau des styles de bloc, ou en cliquant sur le bouton d’action Plus de styles dans la barre d’outils Styles. Un menu contextuel s’affiche alors, présentant un élément CSS supplémentaire.

Pour prendre en charge les CSS personnalisés, une nouvelle propriété styles.css a été ajoutée au fichier theme.json.

Les règles CSS personnalisées peuvent complètement remplacer les styles personnalisés définis dans theme.json. Si vous ne voulez pas que cela se produise, vous pouvez envisager d’inclure la feuille de style en utilisant les méthodes de mise en file d’attente existantes.

Vous pouvez également ajouter des feuilles de style CSS personnalisées par bloc dans theme.json à l’aide de la propriété styles.blocks.block.css:

"styles": {
    "blocks": {
        "core/button": {
            "css": "background: #FF0000"
        }
    }
}

Vous pouvez également utiliser & pour les éléments imbriqués et les pseudo-sélecteurs.

Pour en savoir plus sur la nouvelle fonction CSS personnalisée, consultez également la rubrique CSS personnalisée pour les styles globaux et par bloc.

Copier et coller des styles entre blocs

Un nouveau groupe dans le menu Options de la barre d’outils du bloc affiche désormais deux boutons pour Copier les styles et Coller les styles. Avant cet ajout, il n’était possible que de copier des styles, mais la manière de les coller n’était pas claire.

Pour essayer cette nouvelle fonctionnalité, ajoutez un nouveau bloc, par exemple un titre. Modifiez le style et choisissez Copier les styles dans le menu Options du bloc.

Sélectionnez ensuite un autre bloc et choisissez Coller le style. Les styles copiés seront automatiquement appliqués au deuxième bloc.

Notez que cette fonctionnalité n’est disponible que sur les sites sécurisés (https) dans les navigateurs compatibles. Pour plus de détails, consultez la pull request.

Appliquer globalement les changements de blocs

WordPress 6.2 introduit également un bouton Appliquer globalement sous le panneau Avancé pour les blocs individuels qui vous permet de pousser vos changements de style de bloc vers les Styles globaux et d’appliquer ces changements à l’ensemble du site web.

Grâce à cette nouvelle fonctionnalité, appliquer la typographie, l’espacement, les dimensions et la couleur des blocs à tous les blocs de ce type est maintenant aussi simple que d’appuyer sur un bouton (voir aussi cette pull request).

Amélioration de l’expérience de conception avec les visualiseurs d’espacement

Les visualiseurs d’espacement vous permettent d’avoir un aperçu de la quantité de marge ou d’espacement appliquée à un bloc. Avec WordPress 6.2, cette fonctionnalité est enrichie de quelques ajouts qui améliorent l’expérience d’édition.

Tout d’abord, les visualiseurs d’espacement s’affichent désormais dès que vous survolez un contrôle de marge ou de marge intérieure.

Deuxièmement, le visualiseur d’espacement masque automatiquement la barre d’outils du bloc dès que vous survolez le réglage de l’espacement afin que vous puissiez prévisualiser les nouveaux réglages de marge et de marge intérieure sans être encombré par la barre d’outils du bloc.

Il s’agit de changements mineurs mais significatifs qui affectent un grand nombre de blocs principaux.

Changements pour les développeurs

WordPress 6.2 apporte également de nombreuses nouvelles fonctionnalités pour les développeurs : de nouvelles API, des corrections de bugs, des améliorations de performance, et bien plus encore. Plongeons dans les ajouts les plus attrayants.

Une nouvelle API HTML

WordPress 6.2 introduit le HTML Tag Processor, un analyseur conforme à la norme HTML5 qui fournit un moyen sûr de trouver des balises HTML spécifiques et d’ajouter, supprimer ou mettre à jour des attributs via PHP. Le HTML Tag Processor est le premier composant d’une nouvelle API de traitement HTML.

Cette nouvelle API permet d’effectuer facilement des tâches complexes qui nécessitaient souvent l’utilisation d’expressions régulières.

Dans l’exemple suivant, nous ajoutons simplement l’attribut alt à une balise img:

$html = '<img src="/my-image.jpg" />';

$p = new WP_HTML_Tag_Processor( $html );
 
if ( $p->next_tag() ) {
    $p->set_attribute( 'alt', 'Hello WordPress 6.2' );
}
 
echo $p->get_updated_html();

Ce code produirait la balise img suivante :

<img alt="Hello WordPress 6.2" src="/my-image.jpg">

La méthode $p->next_tag() passe à la prochaine balise disponible dans le code HTML. Elle accepte également un nom de balise, une classe CSS ou les deux pour trouver des balises spécifiques, comme le montre l’exemple ci-dessus.

Pour modifier les balises HTML, vous devez d’abord sélectionner la balise cible :

$p->next_tag();

Une fois que vous avez sélectionné la balise cible, vous pouvez utiliser les méthodes de l’API pour effectuer plusieurs opérations :

• $p->get_tag()
• $p->set_attribute()
• $p->get_attribute()
• $p->remove_attribute()
• $p->add_class()
• $p->remove_class()

Vous pouvez définir un attribut de style :

$html = '<a href="https://example.com">example.com</a>';

$p = new WP_HTML_Tag_Processor( $html );

if ( $p->next_tag( 'a' ) ) {
    $p->set_attribute( 'style', 'text-decoration: wavy underline purple;' );
}

echo $p->get_updated_html();

Vous pouvez également ajouter ou supprimer une classe ou un attribut. Dans le code suivant, nous ajoutons une classe personnalisée à une balise h1:

$html = '<div><h1>Page Title</h1></div>';

$p = new WP_HTML_Tag_Processor( $html );

if( $p->next_tag( 'h1' ) ) {
    $p->add_class( 'title' );
}

echo $p->get_updated_html();

Vous pouvez ensuite renvoyer la balise mise à jour à l’aide de la méthode $p->get_updated_html().

Pour en savoir plus sur la nouvelle API HTML, consultez ce tutoriel PHP interactif d’Adam Zieliński, membre du comité WordPress Core.

API Patterns et une nouvelle propriété template_types

L’API Patterns permet aux développeurs WordPress de « créer des blocs de contenu préconçus qui peuvent être facilement insérés dans les articles, les pages, les types de publications personnalisés et les modèles ».

Avec WordPress 6.2, l’API Patterns inclut maintenant une nouvelle propriété template_types qui vous permet de spécifier dans quels modèles une certaine composition de bloc peut être utilisée.

Jorge Costa souligne qu’il s’agit d’une mise à jour pour le backend uniquement et qu’il n’y a actuellement aucune fonctionnalité UX correspondante. Cependant, nous pouvons nous attendre à voir des implémentations évoluées de cette fonctionnalité avec WordPress 6.3 :

La première utilisation, dans la perspective de WordPress 6.3, est de montrer à l’utilisateur des compositions qui ont un sens sur un modèle lorsque l’utilisateur commence à créer un modèle. Les utilisateurs peuvent commencer à partir d’une composition au lieu d’un modèle « vide » ou d’un modèle de repli.

D’un point de vue technique, la fonction register_block_pattern() a été modifiée pour inclure un nouveau paramètre template_types, qui est un tableau de chaînes de caractères contenant les noms des modèles auxquels le modèle de bloc est destiné.

L’API REST a également été modifiée pour renvoyer les types de modèles d’une composition de bloc si au moins un a été défini.

React v18.0 et Mode Concurrentiel

WordPress 6.2 fournit également une nouvelle version de la bibliothèque React, maintenant mise à jour à la version 18.0. La nouvelle version est livrée avec de nouvelles API, des fonctionnalités, des améliorations et des corrections de bogues. L’une des principales fonctionnalités de React v18.0 est l’introduction du mode concurrentiel, « un nouveau mécanisme en coulisse qui permet à React de préparer plusieurs versions de votre interface utilisateur en même temps ».

L’une des principales caractéristiques du mode concurrentiel dans React est qu’il est interruptible :

React garantit que l’interface utilisateur apparaîtra cohérente même si un rendu est interrompu. Pour cela, il attend d’effectuer les mutations du DOM jusqu’à la fin, une fois que l’arbre entier a été évalué. Grâce à cette capacité, React peut préparer de nouveaux écrans en arrière-plan sans bloquer le thread principal. Cela signifie que l’interface utilisateur peut répondre immédiatement à l’entrée de l’utilisateur, même si elle est au milieu d’une tâche de rendu importante, créant ainsi une expérience utilisateur fluide.

Le principal avantage est que l’interface utilisateur répond immédiatement à l’entrée de l’utilisateur, en même temps que la tâche qu’elle exécute toujours en arrière-plan.

Cependant, la simultanéité introduit également des pièges potentiels dont les développeurs doivent être conscients. Pour un aperçu plus approfondi du mode concurrentiel dans React sous WordPress 6.2, consultez les exemples fournis dans la note de développement.

Changements supplémentaires pour les développeurs

D’autres changements notables que les développeurs devraient prendre en compte sont les suivants :

• WordPress 6.2 introduit un nouveau filtre JavaScript qui peut être utilisé pour filtrer les réglages des blocs avant que l’éditeur ne soit affiché à l’écran. Le nouveau filtre blockEditor.useSetting.before permet également aux développeurs de modifier les réglages en fonction de l’emplacement du bloc, du rôle de l’utilisateur actuel, des blocs voisins, etc. Pour plus d’informations et des exemples d’utilisation, voir Personnaliser les réglages de n’importe quel bloc dans WordPress 6.2.
• Une nouvelle propriété skipBlockSupportAttributes a été introduite pour exclure les attributs et les styles liés au support des blocs dans le composant ServerSideRender.
• Une nouvelle API theme.json son permet maintenant de styliser les variations des blocs de base existants à partir de theme.json.
• Les polices Google sont désormais incluses localement et non plus récupérées à partir des adresses Google dans les thèmes groupés de Twenty Twelve à Twenty Seventeen.

Mais ce n’est pas tout. WordPress 6.2 introduit de nombreuses fonctionnalités, améliorations et corrections de bugs que nous n’avons pas mentionnées ici par souci de concision. Pour une vue d’ensemble plus complète, consultez le WordPress 6.2 Field Guide.

Résumé

WordPress 6.2 nous rapproche de la fin de la phase 2 du projet Gutenberg, nommée Personnalisation. Mais, comme le souligne Matias Ventura, cela ne signifie pas que le travail sur la personnalisation est terminé et dans les versions futures. Comme toujours, nous pouvons nous attendre à des améliorations supplémentaires de l’éditeur basées sur les commentaires de la communauté.

Dans cet article, nous avons exploré quelques-unes des principales fonctionnalités, améliorations et corrections de bogues de WordPress 6.2. Mais il y a bien plus dans la 6.2. Avec dix versions de l’extension Gutenberg dans le coeur – de 14.2 à 15.1 – nous allons voir un nouveau mode de navigation, un inspecteur de bloc à onglets, la migration des widgets vers les thèmes de bloc, de nouvelles API, et des tonnes d’améliorations et de corrections de bugs. L’accessibilité et l’internationalisation seront également améliorées.

Et si vous aimez WordPress et que vous souhaitez acquérir de nouvelles compétences en matière de développement WordPress ou tester et apporter des contributions au CMS, ne manquez pas de tester DevKinsta, la suite de développement WordPress locale entièrement gratuite de Kinsta.

À vous de jouer : Avez-vous déjà testé la nouvelle version dans votre environnement de développement ? Quelles sont les fonctionnalités que vous appréciez le plus dans WordPress 6.2 ? Faites-nous part de vos commentaires dans la section ci-dessous.