WordPress 5.4, voici les changements techniques opérés

Afficher le sommaire

La sortie de WordPress 5.4 est prévue pour le 31 mars 2020. Nous en sommes maintenant à WordPress 5.4 RC 5 et il n’est plus possible d’ajouter de nouveaux commits et de nouvelles demandes de fonctionnalités.

Il est donc temps pour nous de nous plonger dans les nouvelles fonctionnalités et les changements les plus intéressants de WordPress 5.4.

Avant tout, WordPress 5.4 apporte de nombreuses fonctionnalités, améliorations et corrections de bogues à l’éditeur de blocs, avec un nombre considérable de versions de l’extension Gutenberg fusionnées dans le noyau. Ces changements affectent à la fois les fonctionnalités et l’interface utilisateur, améliorant l’accessibilité/la convivialité de l’éditeur et l’expérience d’édition en général.

Outre l’éditeur, WordPress 5.4 introduit des améliorations intéressantes dans l’ Outil de santé du site et dans l’API REST, tandis que quelques fonctionnalités attendues avec WordPress 5.4 ont été retardées et devraient être intégrées dans le noyau avec la prochaine version de WordPress 5.5 (voir le Chargement différé natif sur les images et le bloc de navigation).

Vous pouvez enregistrer les dates et les liens suivants du cycle de développement de WordPress 5.4 :

• 11 février 2020 : Beta 1
• 18 février 2020 : Beta 2
• 25 février 2020 : Beta 3
• 3 mars 2020 : RC 1
• 10 mars 2020 : RC 2
• 17 mars 2020 : RC 3
• 24 mars 2020 : RC 4
• 27 mars 2020: RC 5
• 30 mars 2020 : Essai pour la sortie de WordPress 5.4
• 31 mars 2020 : Date cible pour la publication de WordPress 5.4

Alors, quoi de neuf dans WordPress avec WordPress 5.4 ?

Quoi de neuf avec l’éditeur de bloc

Un nombre considérable de versions de l’extension Gutenberg ont été fusionnées dans le noyau, de 6.6 à 7.5. Ainsi, si vous n’utilisez pas l’extension Gutenberg, vous trouverez des tonnes de nouvelles fonctionnalités, d’améliorations et de corrections de bogues dans l’éditeur de blocs lors de la mise à jour vers WordPress 5.4.

Mais il y a plus que des blocs et des fonctionnalités dans l’éditeur, avec des améliorations globales des performances signalées :

L’équipe d’éditeurs de blocs a réussi à réduire de 14 % le temps de chargement et de 51 % le temps de saisie, pour un article particulièrement volumineux (~ 36 000 mots, ~ 1 000 blocs) depuis WordPress 5.3.

Il y a un tas de trucs géniaux, alors plongeons dedans.

• Nouvelles fonctionnalités et améliorations de l’éditeur de blocs
• Changements de l’éditeur de blocs pour les développeurs de thèmes et de blocs
• Fonctionnalités supplémentaires

Nouvelles fonctionnalités et améliorations de l’éditeur de blocs

On peut s’accorder sur le fait que l’éditeur de blocs est encore en cours de développement, mais WordPress 5.4 apporte des tonnes de changements améliorant la convivialité de l’éditeur, tant sur ordinateur que sur mobile.

Certains de ces changements concernent strictement l’interface, notamment le mode plein écran activé par défaut, la sélection améliorée des blocs, le passage aisé entre le mode édition et le mode sélection, la barre d’outils mobile fixe et les fils d’Ariane pour le bloc de navigation. Deux nouveaux blocs et des réglages d’options supplémentaires ajoutent des fonctionnalités supplémentaires à l’éditeur.

Voici une liste rapide des fonctionnalités de notre éditeur de blocs préféré et des améliorations apportées par WordPress 5.4 :

• Nouveau bloc d’icônes sociales
• Nouveau bloc de boutons
• Un guide de bienvenue modal
• Mode plein écran activé par défaut
• Prise en charge de la couleur du texte en ligne dans les blocs de texte enrichi
• Options de couleurs supplémentaires pour plusieurs blocs
• Images mises en avant dans le bloc des articles récents
• Une nouvelle barre de fil d’Ariane pour le bloc de navigation

Nouveau bloc d’icônes sociales

Initialement appelé Liens sociaux, le bloc d’icônes sociales permet aux auteurs d’ajouter rapidement des icônes avec des liens vers des profils sociaux et offre un bon nombre de blocs enfants d’icônes sociales parmi lesquels choisir. Ce bloc a été expérimental pendant un certain temps et est stable depuis Gutenberg 7.5.

Le bloc d’icônes sociales est livré avec trois styles prédéfinis pour vos personnalisations visuelles : Par défaut, Logos uniquement, et Forme de pilule.

Depuis leur introduction en tant que fonctionnalité expérimentale dans Gutenberg 6.5 (et leur fusion dans WordPress 5.3), les icônes sociales ont été ajoutées à Gutenberg 7.5 et peuvent ne pas fonctionner comme prévu si vous utilisez une version obsolète de l’extension Gutenberg.

Selon Jorge Costa, il y a deux façons de prévenir les problèmes liés aux icônes sociales :

• Migrer manuellement tout contenu avec les icônes sociales : mettre à jour vers WordPress 5.4, charger l’article dans l’éditeur de bloc et l’enregistrer. Les icônes sociales seront automatiquement migrées vers la nouvelle version.
• Garder l’extension Gutenberg installée lors de la mise à jour vers WordPress 5.4 : l’extension offre une rétrocompatibilité et vous ne devriez pas rencontrer de problème.

Nouveau bloc de boutons

Ajouté à l’éditeur de blocs dans Gutenberg 7.2, le bloc Boutons remplace le bloc Boutons unique et permet aux utilisateurs de WordPress d’ajouter d’autres boutons à leur contenu dans le même conteneur de bloc.

Les boutons individuels sont livrés avec deux styles prédéfinis et plusieurs options supplémentaires pour affiner l’apparence de vos boutons.

Avec WordPress 5.4, les propriétaires de sites ont un meilleur contrôle sur l’apparence et la convivialité de leurs appels à action grâce à l’ajout d’arrière-plans dégradés, qui sont également fournis avec une poignée de préréglages de dégradés disponibles pour les administrateurs de sites, qui peuvent les utiliser comme point de départ pour des personnalisations ultérieures.

Une modale de guide de bienvenue

WordPress 5.4 ajoute un tout nouveau diaporama de bienvenue fournissant des informations de base sur l’éditeur de bloc et un lien vers la documentation en ligne (ajouté avec Gutenberg 7.1).

La fenêtre modale n’est visible qu’après la mise à jour vers 5.4. Si vous souhaitez la relancer, il vous suffit d’ouvrir le menu « Plus d’outils et d’options » en cliquant sur le bouton en haut à droite et de trouver le lien « Guide de bienvenue ».

Mode plein écran activé par défaut

À partir de WordPress 5.4, l’éditeur s’ouvre en mode plein écran par défaut dans les nouvelles installations et les nouveaux appareils. Vous pouvez activer/désactiver le mode plein écran en cliquant sur le menu Plus d’outils et d’options, comme indiqué dans l’image ci-dessous.

Pour l’instant, cette préférence est stockée localement, ce qui signifie qu’elle sera écrasée à chaque fois que les préférences changent, comme c’est le cas lorsque vous accédez à votre site web en mode incognito. À l’avenir, cette préférence sera stockée dans la base de données, ce qui rendra le choix de l’utilisateur persistant dans n’importe quel contexte.

Notez que la décision de mettre l’éditeur en mode plein écran par défaut n’est pas unanimement appréciée car elle est considérée comme potentiellement déroutante pour les débutants et les utilisateurs non avertis. Si vous voulez en savoir plus sur les préoccupations des gens concernant le mode plein écran, consultez les commentaires de cet article.

Les développeurs d’éditeurs de blocs peuvent contrôler le mode plein écran par programmation avec seulement quelques lignes de JavaScript :

const isFullscreenMode = wp.data.select( 'core/edit-post' ).isFeatureActive( 'fullscreenMode' );

if ( isFullscreenMode ) {
    wp.data.dispatch( 'core/edit-post' ).toggleFeature( 'fullscreenMode' );
}

Prise en charge de la couleur du texte en ligne dans les blocs de texte enrichi

Si vous écrivez habituellement des articles longs, vous devriez apprécier le support de la couleur du texte en ligne. Avant cette mise à jour, nous étions obligés de coder en dur des blocs de texte enrichi en mode HTML pour changer la couleur des mots et des chaînes de caractères.

À partir de WordPress 5.4, nous pouvons sélectionner des mots et des sous-chaîne de caractères dans des blocs de texte enrichi et changer rapidement leurs couleurs à l’aide du sélecteur de couleurs intégré.

Options de couleurs supplémentaires pour plusieurs blocs

WordPress 5.4 ajoute une longue liste de fonctionnalités liées à la couleur et d’améliorations à l’éditeur de blocs. Comme nous l’avons vu plus haut, nous ne sommes plus limités aux couleurs unies. Plusieurs blocs prennent désormais en charge les arrières-plans dégradés et les ensembles prédéfinis de dégradés.

Voici une liste rapide de quelques améliorations liées aux couleurs :

• Support d’arrière-plan pour le bloc Boutons (Gutenberg 6.7).
• Support d’arrière-plan dégradé pour le bloc Couverture (Gutenberg 6.8).
• Support de la couleur du texte pour les blocs Groupe (Gutenberg 7.4 et 7.5): les blocs imbriqués peuvent désormais hériter de la couleur du texte de leur bloc de groupe parent.
• Support des couleurs de texte et d’arrière-plan pour le bloc Colonnes (Gutenberg 7.4 et 7.5).

Images mises en avant dans le bloc des articles récents

Un autre ajout notable à l’éditeur de bloc est la prise en charge des images mises en avant dans le bloc des articles récents (Gutenberg 7.5).

Ce n’est que la dernière de plusieurs améliorations ajoutées au bloc « Articles récents » au fil du temps et marque une nouvelle étape vers des « blocs dynamiques ou globaux plus complexes ».

Avec WordPress 5.4, le bloc Articles récents vous permet d’extraire des articles d’une catégorie spécifique mais ne vous permet pas de construire des requêtes plus avancées par catégorie/étiquette/type de publication et/ou d’inclure/exclure des articles uniques.

Nous espérons voir d’autres améliorations avec ce bloc à l’avenir.

Une nouvelle barre de fil d’Ariane pour le bloc de navigation

Disponible pour les utilisateurs de Gutenberg depuis la version 6.7, et désormais fusionnée dans le noyau, la nouvelle barre de fil d’Ariane vise à simplifier la navigation en blocs imbriqués.

L’image ci-dessous montre plusieurs blocs imbriqués et le nouveau menu fil d’Ariane en bas.

Les changements de l’éditeur de blocs pour les développeurs de thèmes et de blocs

Les développeurs de thèmes et de blocs doivent être conscients des nombreux changements apportés à l’éditeur de blocs avec WordPress 5.4. Ces changements comprennent :

• Raccourcis clavier de l’éditeur de bloc
• API de dégradé de thème
• Changements de balisage et de style dans l’éditeur de bloc
• Échafaudages de bloc
• Collections de bloc
• Variations de bloc

Raccourcis clavier de l’éditeur de bloc

Les développeurs de blocs et les utilisateurs avancés peuvent désormais ajouter des raccourcis personnalisés à l’éditeur de blocs.

Un nouveau paquet appelé @wordpress/keyboard-shortcuts a été introduit pour centraliser l’enregistrement, la suppression et la documentation des raccourcis de l’éditeur.

Les développeurs peuvent ajouter leurs raccourcis personnalisés en appelant l’action registerShortcut de cette façon :

wp.data.dispatch( 'core/keyboard-shortcuts' ).registerShortcut( {

    // Shortcut identifier
    name: 'plugin/shortcut-test',

    // Shortcut category (possible values global, block, selection)
    category: 'global',

    // Shortcut description
    description: 'My first shortcut',

    // The key combination that triggers the shortcut
    keyCombination: {

        // Available modifiers:
        // primary, primaryShift, primaryAlt,
        // secondary, access, ctrl, alt,
        // ctrlShift, shift, shiftAlt
        modifier: 'alt',
        character: 'w',
    },

    // An alias for the key combination
    aliases: [
        {
            modifier: 'primary',
            character: 'q',
        },
    ],
} );

Cela ajoutera automatiquement le raccourci personnalisé à la fenêtre modale de raccourcis disponible sous le bouton Plus d’outils et d’options dans le coin supérieur droit de l’éditeur.

Ensuite, nous pouvons attacher un gestionnaire de raccourcis clavier en utilisant la fonction useShortcut :

import { useShortcut } from '@wordpress/keyboard-shortcuts';
import { useCallback } from '@wordpress/element';

const MyComponent = () => {
    useShortcut(

        'plugin/shortcut-test',

        useCallback(
            ( event ) => {
                // Do something
            },
            []
        )
    );
}

Vous pouvez en savoir plus sur les raccourcis clavier sur le blog Make WordPress Core.

API de thème de dégradés

WordPress 5.4 introduit des arrière-plans dégradés avec une poignée de présélections pour les blocs de bouton et de couverture. Cela se fait grâce aux nouvelles API de thème de dégradés.

Les nouvelles API offrent l’option de support de thème editor-gradient-presets, qui permet aux développeurs de thèmes de remplacer les préréglages par défaut et de définir les leurs :

add_theme_support(
    'editor-gradient-presets',
    array(
        array(
            'name'       => __( 'CadetBlue to Chartreuse', 'themeLangDomain' ),
            'gradient'   => 'linear-gradient(135deg,rgba(95,158,160,1) 0%,rgb(127,255,0) 100%)',
            'slug'       => 'cedetblue-chartreuse'
        ),
        array(
            'name'       => __( 'Chocolate to Coral', 'themeLangDomain' ),
            'gradient'   => 'linear-gradient(135deg,rgba(210,105,30,1) 0%,rgba(255,127,80,1) 100%)',
            'slug'       =>  'chocolate-to-coral',
        ),
        array(
            'name'       => __( 'DarkMagenta to DarkOrchid', 'themeLangDomain' ),
            'gradient'   => 'linear-gradient(135deg,rgb(139,0,139) 0%,rgb(153,50,204) 100%)',
            'slug'       => 'darkmagenta-to-darkorchid',
        ),
        array(
            'name'       => __( 'DeepSkyBlue to DodgerBlue', 'themeLangDomain' ),
            'gradient'   => 'linear-gradient(135deg,rgba(0,191,255,1) 0%,rgba(30,144,255,1) 100%)',
            'slug'       => 'deepskyblue-to-dodgerblue',
        ),
    )
);

• name : un libellé significatif pour l’info-bulle fournissant des informations sur le dégradé. Ceci est particulièrement utile pour les lecteurs d’écran et les utilisateurs qui ont des difficultés à distinguer certaines couleurs.
• gradient : Valeurs CSS pour le gradient.
• slug : un identifiant permettant de générer des classes CSS utilisées dans l’éditeur de blocs.

Vous pouvez désactiver les dégradés personnalisés en utilisant l’option de support du thème disable-custom-gradients :

add_theme_support( 'disable-custom-gradients' );

La fonctionnalité de dégradé peut être complètement supprimée en utilisant les deux options disable-custom-gradients et editor-gradient-presets :

add_theme_support( 'disable-custom-gradients' );
add_theme_support( 'editor-gradient-presets', array() );

Changements de balisage et de style sur l’éditeur de bloc

WordPress 5.4 introduit plusieurs changements de structure DOM dont les développeurs de thèmes doivent être conscients.

• Le préfixe de classe editor- a été supprimé des scripts d’éditeur de bloc et les développeurs doivent désormais utiliser uniquement le préfixe block-editor-.
• La classe edit-post-layout__content a été supprimée du DOM de l’éditeur de bloc.
• Plusieurs wrappers div ont été retirés des blocs et le texte enrichgi est redondant. Ce changement apporte une amélioration significative des performances et simplifie l’arbre DOM, ce qui devrait être apprécié par les développeurs de blocs et de thèmes.
• Les marges intérieures et les marges négatives ont disparues. Les styles de blocs devraient changer en conséquence.

Pour une vue détaillée des modifications du DOM et du CSS, voir les modifications liées au balisage et au style dans WordPress 5.4

Échafaudages de blocs

Avec le nouveau paquet @wordpress/create-block pour les échafaudages de bloc, les développeurs disposent d’un nouveau moyen de générer la structure du répertoire pour une extension d’éditeur de blocs. Cette structure comprend généralement index.php, index.js et style.css.

Les développeurs de blocs peuvent maintenant simplement exécuter la commande suivante :

$ npm init @wordpress/block block-name

Collections de bloc

Les collections de blocs permettent de regrouper visuellement des collections de blocs dans l’outil d’insertion de l’éditeur de blocs. Les collections sont différentes des catégories et fournissent un moyen supplémentaire de regrouper des blocs.

La nouvelle API offre une nouvelle fonction :

registerBlockCollection( namespace, { title, icon } );

• namespace : correspond à un préfixe de bloc.
• title : il s’agit du libellé affiché dans l’outil d’insertion de bloc.
• icon : il s’agit de l’icône affichée avec le titre dans l’outil d’insertion de bloc.

Introduite avec Gutenberg 7.3 et désormais intégrée au noyau, la nouvelle API permet aux développeurs de thèmes et de blocs de mieux organiser les blocs, ce qui facilite la découverte et l’ajout de blocs au contenu par les utilisateurs.

Variations de bloc

L’API des variations de blocs fournit un ensemble de fonctions qui permettent aux développeurs de blocs d’ajouter/gérer/supprimer des variations de blocs parmi lesquelles les utilisateurs peuvent choisir lorsqu’ils ajoutent des blocs au contenu. L’enregistrement d’une nouvelle variation est assez simple (code JS) :

wp.blocks.registerBlockVariation( 'core/heading', { 
    name: 'green-text', 
    title: 'Green Text', 
    description: 'This block has green text. It overrides the default description.',  
    attributes: { 
        content: 'Green Text', 
        textColor: 'vivid-green-cyan' 
    }, 
    icon: 'palmtree', 
    scope: [ 'inserter' ] 
} );

• blockName : le nom du bloc (core/heaading).
• variation : un objet décrivant une variation pour le type de bloc.
• name : (chaîne de caractères) l’identifiant unique de la variation.
• title : (chaîne de caractères) le titre de la variante lisible par l’homme.
• description : (chaîne) une description détaillée.
• [icon] : (WPIcon) : une icône à afficher dans l’outil d’insertion de bloc.
• [isDefault] : (booléen) si la variation actuelle est celle par défaut. La valeur par défaut est false.
• [attributes] : (Objet) valeurs qui remplacent les attributs de bloc.
• [innerBlocks] : (Array[]) configuration initiale du bloc imbriqué.
• [example] : (Objet) données structurées pour la prévisualisation du bloc. Réglé sur undefined pour désactiver la prévisualisation.
• [scope] : (WPBlockVariationScope[]) La liste des champs d’application où la variation est applicable. Lorsqu’elle n’est pas fournie, elle suppose tous les champs d’application disponibles. Options disponibles : block, inserter.

Pour une vue plus détaillée de l’API des variations de blocs, voir le PR #20068.

Fonctionnalités supplémentaires de l’éditeur de bloc fournies avec WordPress 5.4

Parmi les autres fonctionnalités notables intégrées au noyau de WordPress 5.4, on peut citer

• Un menu permettant de passer visuellement du mode édition au mode navigation (7.1)

• Ajout d’une légende au bloc Tableau (7.1)

• Glisser-déposer des images dans la boîte d’image mise en avant (7.1)

• Barre d’outils du bloc fixe sur mobile (7.1)

• Ajout d’un sélecteur de taille d’image dans le bloc Galerie (7.2)

• Ajout de liens vers des images dans les blocs Média et Texte (7.2)

Fonctionnalités et améliorations pour les développeurs WordPress

Les développeurs devraient bénéficier de plusieurs nouveaux ajouts apportés par WordPress 5.4.

Nos changements préférés sont les suivants :

• Un widget de calendrier sémantiquement correct et de nouvelles classes CSS
• Codes courts dans les scripts PHP
• Améliorations apportées à la gestion de Favicon dans WordPress 5.4
• Nouveaux hooks pour ajouter des champs personnalisés aux éléments du menu
• Changements supplémentaires pour les développeurs

Un widget de calendrier sémantiquement correct et de nouvelles classes CSS

La spécification HTML 5.1 a modifié la façon dont les éléments tfoot doivent être utilisés dans les tableaux. Avant le HTML 5.1, les éléments tfoot pouvaient précéder l’élément tbody. La nouvelle spécification change les choses et maintenant tfoot doit suivre tbody.

Le widget calendrier de WordPress change en conséquence. À partir de WordPress 5.4, les liens de navigation se déplacent vers un élément nav en dehors du tableau du calendrier.

C’est un changement très attendu, étant donné que nav est l’élément HTML le plus approprié pour les liens de navigation dans tout concours, et qu’il peut également contribuer à améliorer l’accessibilité sur les lecteurs d’écran. Selon la documentation de Mozilla :

Un document peut comporter plusieurs éléments nav, par exemple, un pour la navigation sur le site et un pour la navigation intra-page. aria-labelledby peut être utilisé dans ce cas pour promouvoir l’accessibilité …

Les agents utilisateurs, tels que les lecteurs d’écran ciblant les utilisateurs handicapés, peuvent utiliser cet élément pour déterminer s’il faut omettre le rendu initial du contenu de navigation uniquement.

En outre, les classes CSS suivantes ont été introduites dans get_calendar() pour un ciblage plus facile :

• wp-calendar-table pour l’élément table element.
• wp-calendar-nav pour l’élément nav element.
• wp-calendar-nav-prev pour le lien du mois précédent, en remplacement de l’ID #prev
• wp-calendar-nav-next pour le lien du mois prochain, en remplacement de l’ID #next

L’extrait de code ci-dessous montre la structure HTML du nouveau calendrier :

<div class="widget widget_calendar">
    <div class="widget-content">
        <div id="calendar_wrap" class="calendar_wrap">
            <table id="wp-calendar" class="wp-calendar-table">
                <caption>February 2020</caption>
                <thead>
                    <tr><!-- Day names --></tr>
                </thead>
                <tbody>
                    <!-- Calendar cells -->
                </tbody>
            </table>
            <nav aria-label="Previous and next months" class="wp-calendar-nav">
                <span class="wp-calendar-nav-prev"><a href="http://example.com/?m=201912">&laquo; Dec</a></span>
                <span class="pad">&nbsp;</span>
                <span class="wp-calendar-nav-next">&nbsp;</span>
            </nav>
        </div>
    </div>
</div>

Les développeurs de thèmes peuvent vouloir modifier leurs feuilles de style en conséquence.

Codes courts dans les scripts PHP

WordPress 5.4 introduit la fonction apply_shortcodes() comme un alias de do_shortcode(), ce qui nous permet d’utiliser un code court dans un fichier PHP.

D’un point de vue sémantique, on peut s’attendre à voir le résultat des fonctions do_* en appelant simplement la fonction elle-même. Mais ce n’est pas le cas de do_shortcode. Pour afficher la sortie du code court spécifié, do_shortcode doit être répété :

// Displays the result of the shortcode
echo do_shortcode( '[shortcode]' . $text . '[/shortcode]' );

WordPress 5.4 change un peu les choses avec l’introduction de apply_shortcodes(), qui fonctionne de la même manière que do_shortcode(), mais permet aux développeurs de construire un code plus lisible et sémantiquement correct :

// Displays the result of the shortcode
echo apply_shortcodes( '[shortcode]' . $text . '[/shortcode]' );

À partir de WordPress 5.4 RC 2, il n’est pas prévu de déprécier do_shortcode() car il est largement utilisé dans des extensions tierces.

Améliorations apportées à la gestion de Favicon dans WordPress 5.4

Avec WordPress 5.4, les développeurs de thèmes peuvent gérer les demandes de Favicon avec beaucoup plus de flexibilité et plusieurs nouvelles fonctions permettent de gérer les favicons de la même manière que les fonctions liées au robots.txt. Explications de Sergey Biryukov :

Une requête pour favicon.ico doit être traitée de la même manière que nous traitons robots.txt avec do_robots() :

• Si un fichier physique existe, ne faites rien et laissez le serveur traiter la requête.
• Sinon, servez une icône de repli (voir ci-dessous).

Donc, si un fichier favicon.ico physique n’est pas fourni, voici comment WordPress le gère :

• Si une icône est définie dans l’outil de personnalisation, il redirige /favicon.ico vers cette icône spécifique.
• S’il n’y a pas de jeu d’icônes, il utilise le logo WordPress (wp-admin/images/w-logo-blue.png) comme option de repli.

Une poignée de nouvelles fonctions et de nouveaux hooks complètent les fonctions/hooks correspondants de robots.txt :

• La nouvelle fonction is_favicon() complète is_robots().
• L’action do_favicon complète do_robots et est déclenchée lorsque le chargeur de modèles détermine une requête favicon.
• La fonction do_favicon() est accrochée à l’action do_favicon et complète do_robots().
• L’action do_faviconico complète do_robotstxt et permet aux développeurs de passer outre le comportement par défaut.

En savoir plus sur le traitement des favicons.

Nouveaux hooks pour ajouter des champs personnalisés aux éléments du menu

Avec WordPress 5.4, les développeurs peuvent utiliser deux nouveaux crochets d’action pour ajouter des champs personnalisés aux éléments du menu.

wp_nav_menu_item_custom_fields est déclenché juste avant qu’un élément du menu de navigation soit ajouté à l’éditeur du menu d’administration. Voir l’exemple ci-dessous :

function kinsta_add_menu_item_custom_field() {
    echo '<p class="menu-item-custom-field">Hey! This is an example for Kinsta blog readers!</p>';
}
add_action( 'wp_nav_menu_item_custom_fields', 'kinsta_add_menu_item_custom_field' );

Le nouveau crochet d’action prend en charge cinq paramètres que vous pouvez utiliser pour affiner le comportement du champ personnalisé :

• $item_id : l’ID de l’élément de menu (entier).
• $item : l’objet de données du menu (objet).
• $depth : la profondeur de l’élément de menu (entier).
• $args : un objet d’arguments de menu (objet).
• $id : l’ID du menu de navigation (entier).

wp_nav_menu_item_custom_fields_customize_template fonctionne de la même manière que wp_nav_menu_item_custom_fields, mais il est déclenché à la fin du modèle form-fields pour les éléments du menu de navigation dans la personnalisation. L’image ci-dessous montre la section Menus de l’outil de personnalisation dans WordPress 5.4.

Changements supplémentaires pour les développeurs

D’autres changements pour les développeurs et les utilisateurs avancés sont prévus avec WordPress 5.4 :

• Plus d’informations sur les erreurs provoquant l’échec de la connexion grâce à un nouveau paramètre $error désormais pris en charge par l’action wp_login_failed.
• Notification admin personnalisable dans WordPress multi-site en fonction de l’ID du site.
• La nouvelle méta-valeur _source_url permet désormais de stocker l’URL originale des fichiers médias.
• La barre d’administration est maintenant chargée sur wp_body_open au lieu de wp_footer.
• Plusieurs changements dans l’API REST.

Comment installer une version de développement de WordPress

Si vous souhaitez vous assurer que vos thèmes et extensions sont entièrement compatibles avec WordPress 5.4 ou si vous êtes simplement curieux de connaître les nouvelles fonctionnalités de la dernière version de WordPress, vous pouvez installer la version de développement actuelle en quelques clics.

Vous avez deux possibilités pour installer une version Beta/RC de WordPress :

• Installez l’extension WordPress Beta Tester et lancez l’installation dans le tableau de bord d’un environnement WordPress existant.
• Téléchargez et installez manuellement la version Beta/RC actuelle. Vous pouvez obtenir la « nightly build », qui est créée à partir du dépôt Subversion. Si vous recherchez une version spécifique de WordPress, qu’elle soit stable ou en développement, vous pouvez consulter l’archive des catégories de versions.

Si vous décidez d’installer l’extension Beta tester, vous devrez d’abord procéder à une installation normale de WordPress, soit sur votre machine locale, soit dans votre environnement de staging.

Une fois que votre site WordPress est opérationnel, allez dans Extensions > Ajouter et recherchez l’extension WordPress Beta Tester.

L’extension fournit un moyen rapide et facile de tester la version beta de WordPress, permettant d’installer et / ou de mettre à jour la version beta actuelle ou la Release Candidate en cliquant sur un bouton.

Donc, installez et activez l’extension comme d’habitude.

Allez sur Outils > Beta Testing et cochez l’option Version en cours de développement (Bleeding edge nightlies) puis enregistrez les changements.

Ensuite, rendez-vous sur l’écran Tableau de bord > Mises à jour et cliquez sur le bouton Mettre à jour maintenant.

WordPress va maintenant télécharger et installer le paquet suivant :

https://wordpress.org/nightly-builds/wordpress-latest.zip

Une fois l’installation terminée, vous serez redirigé vers la page temporaire à propos de WordPress.

Et c’est tout. Vous êtes maintenant prêt à effectuer vos tests sur les versions Beta et RC de WordPress.

Consultez la documentation officielle pour plus d’informations sur le WordPress Beta Testing.

Résumé

Avec dix versions de l’extension Gutenberg fusionnées dans le noyau, WordPress 5.4 est principalement axé sur l’éditeur de bloc. Nous avons deux nouveaux blocs, des raccourcis personnalisés, une facilité d’utilisation et une accessibilité améliorées, et nous pouvons nous attendre à d’autres développements dans un avenir proche.

Mais il y a plus encore :

• Un widget sur l’état de santé du site a été ajouté au tableau de bord, ce qui permet à l’utilisateur de vérifier plus facilement la santé, la sécurité et les performances de son site.
• Une meilleure gestion de la concentration, une navigation au clavier plus aisée et un guide de la politique de confidentialité plus facile à lire améliorant l’accessibilité sur les téléphones portables et les ordinateurs de bureau.
• Plusieurs modifications des outils de protection de la vie privée simplifiant l’UX lors de l’exportation de données personnelles.

Maintenant, c’est votre tour. Que pensez-vous de WordPress 5.4 ? Quels changements et fonctionnalités appréciez-vous le plus ? Faites-le nous savoir dans les commentaires !

 

Dirigée par Matt Mullenweg, coordonnée par Francesca Marano et en tout une équipe de direction de 8 personnes, la version 5.4 de WordPress proposera des améliorations techniques du CMS et de nombreuses évolutions sur l’éditeur, Gutenberg. Bien entendu, il sera aussi question de corriger un grand nombre de bugs et d’effectuer des petites améliorations qui profiteront à tout un chacun.

En tant qu’utilisatrice ou utilisateur, vous pourrez profiter de nouveaux blocs, de nombreuses améliorations de l’éditeur, de nouveaux contenus embarqués (embeds), et d’amélioration de l’expérience d’administration de WordPress.

En tant que développeuse ou développeur, WordPress 5.4 apportera 122 améliorations et nouvelles fonctionnalités et 210 correctifs. Bien entendu, tout cela induit des changements de code dans le cœur du CMS, ce qui pourrait vous demander d’effectuer des modifications dans le code de votre site, de vos thèmes ou de vos extensions.

Dans cet article, nous nous concentrerons justement sur les changements techniques majeurs de cette nouvelle version.

Accessibilité

Sur les 14 modifications liées à l’accessibilité dans WP 5.4, notons particulièrement des modifications sur l’ordre de chargement de la barre d’administration dans le DOM, sur les widgets Calendrier et Derniers commentaires, sur l’écran de gestion des Menus, et des correctifs de bugs reportés par l’audit d’accessibilité effectué l’année dernière par WPCampus.

Éditeur / Gutenberg

Le développement de l’éditeur a continué son développement rapide depuis la version 5.0 de WordPress. Aujourd’hui, la version 7.5 de Gutenberg a été intégrée dans WordPress 5.4, ce qui fait 10 versions de Gutenberg de différence avec la version qui avait été intégrée dans WordPress 5.3 en novembre dernier ! WordPress 5.4 comprend donc les versions 6.6, 6.7, 6.8, 6.9, 7.0, 7.1, 7.2, 7.3, 7.4  et 7.5 de Gutenberg, et même des correctifs et améliorations de performances de la version 7.6 qui ont trouvé le moyen de se glisser discrètement dans WP 5.4 ! 😎

L’article WordPress 5.4 Beta 1 (en anglais) met en avant plusieurs des nouvelles fonctionnalités de l’éditeur. Notons particulièrement que depuis WordPress 5.3, une réduction impressionnante du temps de chargement de l’éditeur de 14 % a été rendue possible, et surtout une réduction du temps à attendre avant de pouvoir saisir du contenu de l’ordre de 51 % !

Ci-dessous, vous trouverez des liens vers des notes pour les développeur·euse·s, en anglais. Il s’agit de changements concernant :

L’ajout de deux nouveaux blocs : réseaux sociaux et ensemble de boutons

Une mise à jour du composant button

Le mode plein écran maintenant activé par défaut dans l’éditeur

Les collections de blocs

Des raccourcis clavier personnalisables

La nouvelle API permettant de contrôler les variations de styles de blocs

La nouvelle API permettant aux thèmes de contrôler l’utilisation des dégradés CSS

Le tout nouveau package @wordpress/create-block

Les changements de balisage et de styles CSS générés par l’éditeur

Les mises à jour générales de l’API de l’éditeur

L’outil de personnalisation (Customizer)

Sur les 14 modifications de l’outil de personnalisation (appelé Customizer en anglais), notons principalement que WordPress 5.4 va grandement améliorer l’accessibilité des éléments sélectionnables (état focus notamment) dans la lignée des nombreuses améliorations déjà approtées par WordPress 5.3. Notons également l’ajout de documentation concernant les fonctions et crochets (en anglais « hooks », il s’agit des actions et filtres disponibles dans l’API WordPress) existants, la suppression de la balise meta apple-touch-icon-precomposed qui est maintenant dépréciée, et l’amélioration de la logique de sélection d’éléments de menus.

Veuillez noter que certaines classes PHP inutilisées par le cœur WordPress sont maintenant formellement dépréciées et ne devront donc plus être utilisées :

Menus

Sur les 5 modifications concernant le composant Menus, il convient de noter que WordPress 5.4 améliore l’accessibilité au clavier du panneau de sélection des éléments qui iront dans vos menus, et que des améliorations de l’interface ont été réalisées.

Si vos extensions ajoutent des champs personnalisés aux éléments de menus, alors vous pourriez avoir besoin de mettre à jour votre code afin d’utiliser le nouveau crochet wp_nav_menu_item_custom_fields:

Confidentialité et données privées

Sur les 15 modifications concernant ce composant de WordPress, voici les changements les plus notables :

• Les exports de données personnelles incluent maintenant les jetons de session, les emplacements des évènements communautaires auxquels on s’est intéressé dans le tableau de bord, leur localisation et – surtout – les métadonnées personnalisées des utilisateurs et utilisatrices.
• Les exports de données personnelles incluent également un fichier JSON et une table des matières.
• De nouveaux filtres sont disponibles pour modifier les en-têtes de tous les e-mails relatifs aux données privées.
• Les tableaux de listing des demandes relatives aux données privées ont été améliorés.
• La fonction wp_get_user_request_data() a été totalement remplacée par la fonction wp_get_user_request() pour une meilleure compréhension.

Toutes ces modifications sont détaillées dans une seule note de développement :

Changements concernant l’API REST

Sur les 22 modifications liées à l’API REST, les points suivants sont particulièrement importants :

• WordPress 5.4 prend maintenant en charge la valeur OR du paramètre relation des requêtes de taxonomies
• Ajout de l’embarquement (embed) sélectif de liens
• Modifications de la méthode WP_REST_Server

Les modifications importantes de l’API REST sont listées dans cet article :

Codes courts / shortcodes

WordPress 5.4 va introduire apply_shortcodes() en tant qu’alias de do_shortcode(). Les développeuses et développeurs sont invités à utiliser la nouvelle fonction. L’ancienne restera toutefois conservée pour assurer la rétro-compatibilité.

Widgets

Sur les 9 modifications concernant les Widgets, WordPress 5.4 améliore l’accessibilité et l’ergonomie de l’écran de gestion des Widgets et introduit des modifications sur les Widgets Derniers commentaires et Calendrier.

Autres modifications à destination des développeur·euse·s

Simplification de la mise en place d’environnements de développement en local sur WordPress

Modification sur le traitement des requêtes d’affichage de favicons

Et pour finir, un petit florilège de modifications diverses et variées

Un article regroupe également des modifications importantes variées, dont notamment :

• Une meilleure information sur les erreurs au niveau de wp_login_failed
• L’ajout de l’ID du site dans le filtre multisite newblog_notify_siteadmin
• Un nouvel embed vidéo pour TikTok
• La suppression de l’embed CollegeHumor
• Le stockage de l’URL d’origine des médias attachés dans la méta _source_url
• Le chargement de la barre d’administration en utilisant wp_body_open
• La suppression des ID dupliqués dans le widget Derniers commentaires
• Un nouveau paramètre dans l’action lostpassword_post de retrieve_password()
• Les en-têtes de thèmes prennent maintenant en charge les instructions “Requires at least” et “Requires PHP”
• La capacité delete_posts ne déclenchera plus d’avertissements PHP pour les types de publications personnalisés

Tout est détaillé en anglais sur cette note de développement :

---

Pour rappel, la sortie de WordPress 5.4 est prévue le 31 mars 2020. Vous pouvez d’ores et déjà la tester en version Release Candidate en installant l’extension officielle WordPress Beta Tester puis en allant dans ses réglages et en cochant la case « Beta » / version de développement puis en mettant à jour votre installation de façon classique.