Une plongée profonde dans Twenty Twenty-Two et les thèmes de blocs WordPress

Bien qu'un peu plus tard que prévu initialement, nous obtenons un nouveau thème WordPress par défaut. Son nom est Twenty Twenty-Two !

Le nouveau thème par défaut de WordPress est fourni avec la prochaine version de WordPress 5.9. Nous étions curieux d'en savoir plus sur le nouveau thème, nous avons donc installé et testé Twenty Twenty-Two sur un environnement de développement local exécutant WordPress 5.9.

Nous vous montrerons nos résultats avant de conclure nos réflexions pour vous apporter un aperçu détaillé des tenants et aboutissants du nouveau thème WordPress.

Twenty Twenty-Two a été conçu pour être le thème par défaut le plus flexible, le plus léger et le plus personnalisable de tous les temps. Il offre un excellent terrain de jeu pour tester des blocs, des modèles et des modèles.

En tant que thème de bloc, il vous aidera à mieux explorer l'édition complète du site, les styles globaux, les blocs de navigation et les nouvelles galeries d'images, qui sont les fonctionnalités les plus attendues de WordPress 5.9.

Il faut dire tout de suite que Twenty Twenty-Two est le premier thème de bloc par défaut !

L'un des objectifs les plus ambitieux du nouveau thème est de responsabiliser les utilisateurs . Avec autant de modèles et de modèles prêts à l'emploi, les utilisateurs peuvent créer des mises en page complexes en quelques clics seulement. Le reste n'est que personnalisation du style.

D'un point de vue technique, écrire sur Twenty Twenty-Two n'est pas très différent d'écrire sur les fonctionnalités les plus récentes et les plus puissantes de WordPress 5.9. Mais Twenty Twenty-Two nous fournit une loupe pour mieux apprécier les nouvelles fonctionnalités d'édition du site et se faire une meilleure idée de l'avenir de la plateforme.

Nous voici donc pour vous présenter le nouveau thème.

Tout d'abord, nous allons explorer le nouveau flux d'édition de site que les utilisateurs connaîtront avec WordPress 5.9 et Twenty Twenty-Two.

Après cela, nous plongerons dans les principales fonctionnalités du thème de bloc implémentées dans Twenty Twenty-Two. Vous apprendrez à connaître les styles globaux , les modèles de bloc , les modèles et les parties de modèle .

Mais il y a beaucoup plus à dire sur Twenty Twenty-Two et les thèmes de blocs WordPress. Ainsi, en tant que chapitre bonus, nous fournirons un aperçu rapide de la façon d'étendre les fonctionnalités de Twenty Twenty-Two en tirant parti du fichier theme.json .

Voici un premier aperçu du prochain thème WordPress par défaut ! Je suis ravi de le co-diriger aux côtés de @jffng, et nous espérons tous les deux que vous y contribuerez et/ou que vous apprécierez simplement de l'utiliser ! https://t.co/covjrpgFIO

– kjellr (@kjellr) 6 octobre 2021

Mettons-nous au travail et plongeons dans le tout nouveau thème WordPress par défaut Twenty Twenty-Two.

Twenty Twenty-Two apporte un nouveau flux d'édition de site

Plusieurs fonctionnalités d'édition complète du site entrent en jeu avec WordPress 5.9. Les propriétaires de sites utilisant la dernière version de WordPress avec un thème de bloc tel que Twenty Twenty-Two installé pourront bientôt :

• Créez et modifiez des articles et des pages en utilisant plus de blocs et de modèles
• Personnalisez les paramètres et les styles définis dans le fichier theme.json via l'interface Global Styles
• Créer et modifier des modèles pour les pages et les articles
• Créer et modifier des composants de modèle pour l'en-tête, le pied de page et d'autres zones de modèle

Avec toutes ces fonctionnalités fusionnées au cœur, les principaux contributeurs de WordPress ont discuté de l'évolution de l'architecture de l'information et repensé l'ensemble du flux d'édition du site.

La première chose que vous remarquerez peut-être une fois que vous aurez activé Twenty Twenty-Two est que le point d'entrée de l'éditeur de site n'est plus situé dans le menu principal de votre tableau de bord WordPress, mais a été déplacé sous le menu Apparence .

Amener les fonctionnalités d'édition de modèles et de styles sous le même menu Apparence devrait rationaliser l'expérience d'édition. Il doit permettre de comprendre plus facilement que les fonctionnalités auxquelles vous accédez sont liées à la présentation de vos pages.

L'élément de menu Éditeur ouvre le modèle de page d'accueil du site. En fonction de vos paramètres de lecture, il peut s'agir soit de votre dernière page de messages, soit d'une page statique.

Maintenant, cliquer sur l'icône WordPress dans le coin supérieur gauche affiche un nouveau menu de navigation de l'éditeur de site, comprenant trois éléments de menu : Site , Templates et Template Parts .

Regardons de plus près.

L'option Site ouvre le modèle de page d'accueil (derniers articles de blog ou page d'accueil statique).

À partir de l'élément de menu Modèles , vous obtiendrez une liste des modèles disponibles. Vous pouvez cliquer sur n'importe quel modèle de la liste pour le lancer dans l'éditeur.

Au moment d'écrire ces lignes, Twenty Twenty-Two propose 11 modèles.

Cliquer sur l'icône de points de suspension ( ︙ ) à droite vous permet d'effacer vos personnalisations.

Contrairement aux modèles de thème, les modèles personnalisés peuvent uniquement être renommés ou supprimés (mais vous pouvez modifier les modèles personnalisés dans l'éditeur de publication).

L'élément de menu Pièces de modèle répertorie les pièces de modèle disponibles que vous pouvez ouvrir dans l'éditeur pour vos personnalisations.

Vous trouverez quatre parties de modèle ajoutées à Twenty Twenty-Two par défaut. Passer le curseur sur un modèle modifié affiche une info-bulle vous informant que le modèle a été personnalisé.

Vous pouvez effacer ces personnalisations en cliquant sur l'icône représentant des points de suspension ( ︙ ) à droite.

Modification des modèles et des parties de modèle

L' Éditeur fournit l'interface pour personnaliser la structure de vos modèles et parties de modèle.

Ici, vous pouvez facilement ajouter ou modifier des blocs et des modèles, et vos modifications seront automatiquement appliquées à chaque page utilisant ce modèle.

L'image ci-dessous montre le modèle de page 404 dans l'éditeur. C'est un modèle assez simple, comprenant uniquement un titre, un paragraphe et un champ de recherche. Néanmoins, cela nous donne une bonne compréhension du fonctionnement de l'interface utilisateur.

Ici, vous pouvez apporter des modifications et personnaliser les modèles pour répondre au mieux à vos besoins. Par exemple, vous souhaiterez peut-être ajouter un modèle de grille de publications d'images pour augmenter l'engagement de vos visiteurs et les inviter à parcourir le contenu de votre site Web.

La liste déroulante des en-têtes en haut de l'éditeur de modèles affiche une liste des zones de modèles disponibles. La même liste apparaît dans l'onglet Modèle de la barre latérale Paramètres .

En cliquant sur n'importe quelle zone du modèle (par exemple, l'en-tête), vous serez directement amené à la partie du modèle que vous souhaitez modifier.

Si vous cliquez sur l'icône représentant des points de suspension à droite, vous accéderez à l' éditeur de partie de modèle isolé .

L'éditeur de partie de modèle fournit également une paire de poignées déplaçables, vous permettant de vérifier le comportement du modèle à différentes résolutions d'écran.

Une fois que vous êtes satisfait de vos modifications, enregistrez vos modifications et revenez à l'éditeur de modèle principal pour vérifier le résultat final.

Si vous souhaitez approfondir la nouvelle architecture de l'information, vous pouvez consulter les articles suivants :

• Concepts IA d'édition de site : Comment faire apparaître et accéder aux nouvelles fonctionnalités
• Concepts iA d'édition de site – Partie 2

Twenty Twenty-Two at Its Core : un aperçu rapide de theme.json

Pour bien comprendre le fonctionnement de Twenty Twenty-Two et des thèmes de blocs (comme Bricksy), jetons un coup d'œil à la nouvelle configuration de thème et au mécanisme de style basé sur le fichier theme.json .

Introduit avec WordPress 5.8, ce nouveau mécanisme permet aux développeurs de thèmes de configurer l'éditeur et d'ajouter la prise en charge de fonctionnalités à partir d'un point de configuration central.

Dans Twenty Twenty-Two, le fichier theme.json a la structure suivante :

 { "version": 2, "settings": {}, "styles": {}, "customTemplates": {}, "templateParts": {} }

Jetons un coup d'œil rapide à chaque section.

Version

Le champ version décrit la version de la spécification, qui est actuellement 2 .

Réglages

La section settings définit les paramètres au niveau global ou du bloc. Les paramètres définis au niveau supérieur affectent tous les blocs, mais les blocs peuvent remplacer individuellement les paramètres globaux. Dans Twenty Twenty-Two, vous trouverez les paramètres suivants :

 { "settings": { "appearanceTools": true, "color": { "duotone": [...], "gradients": [...], "palette": [...] }, "custom": {...}, "spacing": {...}, "typography": { "dropCap": false, "fontFamilies": [...], "fontSizes": [...] }, "layout": {...} } }

Les paramètres par défaut sont appelés préréglages et sont utilisés pour générer des propriétés personnalisées CSS et des noms de classe basés sur une convention de dénomination spécifique :

• Propriété personnalisée CSS : --wp--preset--{preset-category}--{preset-slug}
• Nom de la classe CSS : .has-{preset-slug}-{preset-category}

Une fois qu'un thème a défini ses préréglages, les propriétés personnalisées CSS correspondantes peuvent être utilisées pour styliser les blocs et les éléments dans la section des styles .

modes

La section des styles est l'endroit où les thèmes définissent les styles par défaut des blocs et des éléments. Voir, par exemple, les styles Twenty Twenty-Two suivants pour le bloc Button principal :

 { "version": 2, "styles": { "blocks": { "core/button": { "border": { "radius": "0" }, "color": { "background": "var(--wp--preset--color--primary)", "text": "var(--wp--preset--color--background)" }, "typography": { "fontSize": "var(--wp--preset--typography--font-size--normal)" } } } } }

Vous remarquerez les propriétés personnalisées CSS utilisées dans les déclarations de propriété.

Modèles personnalisés

La section customTemplates est l'endroit où un thème déclare ses modèles personnalisés. Les champs name et title sont obligatoires. Les thèmes peuvent également déclarer quel type de publication peut utiliser le modèle en définissant la propriété postTypes .

Twenty Twenty-Two fournit quatre modèles personnalisés :

 { "version": 2, "customTemplates": [ { "name": "blank", "title": "Blank", "postTypes": [ "page", "post" ] }, { "name": "page-large-header", "title": "Page (Large Header)", "postTypes": [ "page" ] }, { "name": "single-no-separators", "title": "Single Post (No Separators)", "postTypes": [ "post" ] }, { "name": "page-no-separators", "title": "Page (No Separators)", "postTypes": [ "page" ] } ] }

Vous trouverez les fichiers .html correspondants dans le dossier block-templates .

Pièces de modèle

La section templateParts inclut des définitions de composants de modèle :

 { "version": 2, "templateParts": [ { "name": "header", "title": "Header", "area": "header" }, { "name": "header-large-dark", "title": "Header (Dark, large)", "area": "header" }, { "name": "header-small-dark", "title": "Header (Dark, small)", "area": "header" }, { "name": "footer", "title": "Footer", "area": "footer" } ] }

Les champs name et title sont obligatoires. Les thèmes peuvent également déclarer un terme area , où la partie du modèle sera rendue dans l'éditeur.

Les fichiers .html des pièces de modèle se trouvent dans le dossier des pièces de modèle .

Maintenant que vous en savez plus sur le theme.json de Twenty Twenty-Two, nous pouvons explorer plus en profondeur les fonctionnalités du thème et la nouvelle interface d'édition.

Plongeons-nous dans les styles globaux de Twenty Twenty-Two .

Styles globaux dans Twenty Twenty-Two

Si vous regardez le style.css de Twenty Twenty-Two, vous serez peut-être surpris de constater qu'il contient un nombre minimal de déclarations CSS. La raison en est que les styles sont déclarés dans le fichier theme.json dans les thèmes basés sur des blocs .

WordPress 5.9 va encore plus loin en introduisant une nouvelle fonctionnalité qui permet aux utilisateurs de thèmes de blocs de personnaliser l'apparence des éléments du site à partir d'une interface utilisateur appelée Styles globaux.

L'interface des styles globaux est accessible à partir de la nouvelle icône Styles placée dans le coin supérieur droit de l'éditeur (voir aussi L'interface des styles globaux).

Cliquer sur cette icône affiche une nouvelle barre latérale Styles comprenant trois panneaux distincts :

• Un panneau Aperçu , affichant un aperçu de vos personnalisations
• Un panneau Styles globaux donnant accès à des groupes spécifiques de contrôles pour la typographie , les couleurs et la mise en page
• Un élément Blocs donnant accès aux paramètres de style au niveau du bloc

La palette de couleurs de Twenty Twenty-Two

Le panneau Couleurs peut vous aider à modifier les palettes disponibles et à attribuer ou modifier des couleurs pour l' arrière -plan, le texte ou les liens .

Dans le panneau Palette , vous pouvez personnaliser les palettes Thème ou Par défaut et même créer votre palette personnalisée.

Avez-vous déjà trouvé le code qui génère les contrôles de couleur ?

Sinon, ouvrez le theme.json de Twenty Twenty-Two dans votre éditeur de code préféré. Vous trouverez les déclarations de palette de couleurs suivantes :

 { "version": 2, "settings": { "color": { "palette": [ { "slug": "foreground", "color": "#000000", "name": "Foreground" }, { "slug": "background", "color": "#ffffff", "name": "Background" }, { "slug": "primary", "color": "#1a4548", "name": "Primary" }, { "slug": "secondary", "color": "#ffe2c7", "name": "Secondary" }, { "slug": "tertiary", "color": "#F6F6F6", "name": "Tertiary" } ] } } }

L'image ci-dessous montre comment le code ci-dessus correspond à la palette de couleurs de Twenty Twenty-Two.

Supposons maintenant que vous souhaitiez modifier la couleur d'arrière-plan par défaut d'un bloc particulier. Choisir une couleur différente pour l'arrière-plan du bloc affectera simplement une variable CSS différente à la propriété background-color de l'élément. L'image ci-dessous en donne un exemple :

Et c'est tout! Vous n'aurez pas besoin d'ajouter une seule ligne de code CSS personnalisé au Customizer ou de créer un thème enfant pour cela.

Mais continuons à explorer les styles globaux de Twenty Twenty-Two avec quelques exemples supplémentaires.

Paramètres de typographie

Le panneau Typographie est l'endroit où vous pouvez personnaliser les styles de typographie pour les éléments Texte et Liens de votre site Web au niveau global.

Chaque élément donne accès à un groupe de commandes vous permettant de personnaliser la famille de polices, la taille et la hauteur de ligne.

Vous vous demandez quel code génère ces contrôles ?

Ouvrez le theme.json de Twenty Twenty-Two et recherchez la section typography . Vous verrez les paramètres suivants :

 { "version": 1, "settings": { "appearanceTools": true, "typography": { "dropCap": false, "fontFamilies": [ { "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif", "name": "System Font", "slug": "system-font" }, { "fontFamily": "\"Source Serif Pro\", serif", "name": "Source Serif Pro", "slug": "source-serif-pro" } ], "fontSizes": [ { "name": "Small", "size": "1rem", "slug": "small" }, { "name": "Normal", "size": "1.125rem", "slug": "normal" }, { "name": "Medium", "size": "1.75rem", "slug": "medium" }, { "name": "Large", "size": "clamp(1.75rem, 3vw, 2.25rem)", "slug": "large" }, { "name": "Huge", "size": "clamp(2.5rem, 4vw, 3rem)", "slug": "huge" } ] }, }

Vous pouvez vous attendre à voir deux familles de polices et cinq tailles de police dans le code ci-dessus. Et vous auriez deviné juste.

Voici comment le code ci-dessus se traduit par les paramètres Global Styles Typography :

Vous pouvez deviner quel paramètre génère le contrôle de hauteur de ligne . Dans Twenty Twenty-Two, vous ne trouverez pas de paramètre spécifique pour cela car il est activé par la propriété appearanceTools , qui est un raccourci pour plusieurs déclarations de paramètres (voir la section suivante).

Outils de mise en page et d'apparence

Le dernier élément de la barre latérale Styles globaux est la Mise en page . Au moment d'écrire ces lignes, il n'inclut qu'un contrôle de padding .

Dans Twenty Twenty-Two, le panneau Mise en page est activé par la propriété de paramètre d' appearanceTools , un booléen qui peut être utilisé pour activer plusieurs paramètres à la fois :

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

"appearanceTools": true remplace simplement le bloc de déclarations suivant :

 { 'settings': { 'border': { 'color': true, 'radius': true, 'style': true, 'width': true }, 'color': { 'link': true }, 'spacing': { 'blockGap': true, 'margin': true, 'padding': true }, 'typography': { 'lineHeight': true } } }

OK - vous comprenez maintenant, espérons-le, comment les paramètres déclarés dans le fichier theme.json correspondent aux contrôles de styles globaux correspondants.

Il manque encore une pièce à notre puzzle pour avoir une image complète du nouveau thème par défaut de WordPress : les modèles de blocs .

Vingt vingt-deux motifs de bloc

On pourrait dire que Twenty Twenty-Two est principalement une collection de motifs - et c'est à peu près le cas. Dans Twenty Twenty-Two, vous trouverez des tonnes de modèles de blocs prêts à l'emploi parmi lesquels vous pouvez choisir pour créer des structures étonnantes et imprévisibles de blocs imbriqués pour vos pages Web.

Le terme clé ici est l'autonomisation des utilisateurs . Et cela convient car, avec les modèles de blocs, vous pouvez créer toutes sortes de choses, d'un portfolio attrayant à un site Web promotionnel d'une seule page, même si vous n'avez aucune connaissance en HTML ou CSS !

Et WordPress 5.9 apporte des améliorations significatives au système de modèles avec le nouveau Pattern Explorer, un outil qui vous permet de parcourir les modèles en mode plein écran.

Le nouvel outil vous permet également d'importer rapidement et facilement des motifs de blocs directement à partir du répertoire de motifs. Cela ouvre de nouvelles possibilités pour les utilisateurs et les développeurs de WordPress, de sorte que son utilisation est susceptible d'augmenter considérablement à l'avenir.

Twenty Twenty-Two comprend de nombreux modèles (plus de 65 ans) dans cinq catégories.

Cet ensemble solide de modèles se marie parfaitement avec les modèles et les parties de modèle fournis avec le nouveau thème par défaut, ce qui en fait une expérience d'édition vraiment incroyable.

Si vous n'avez pas encore eu l'occasion d'expérimenter les modèles de blocs, nous vous montrerons pourquoi ils sont considérés comme des outils aussi puissants avec un exemple simple.

Supposons que vous souhaitiez supprimer le pied de page par défaut des modèles Index et Single Post et le remplacer par un modèle de bloc Twenty Twenty-Two différent.

Lancez l'éditeur de site à partir du menu Apparence ou du bouton de la barre d'outils de l'interface WordPress pour personnaliser le modèle d'index.

Cliquez sur le bouton Index pour afficher la liste déroulante de l'en-tête indiquant la liste des zones de modèle disponibles sur la page. Cliquez sur le bouton points de suspension à côté de Pied de page puis sur Modifier le pied de page .

Comme mentionné ci-dessus, cela lancera l'éditeur de partie de modèle isolé.

Ouvrez maintenant le bloc d'insertion et cliquez sur Patterns .

Lancez le nouvel outil Pattern Explorer , sélectionnez la catégorie Twenty Twenty-Two Footers et choisissez le pied de page de votre choix.

Ajoutez et modifiez maintenant les blocs en fonction de vos besoins.

Enregistrez l'en-tête et revérifiez votre site lorsque vous êtes satisfait de vos modifications.

L'image ci-dessous compare trois modèles (Index, Single Post et Single Post sans séparateurs) avec différentes personnalisations d'en-tête et de pied de page :

Prolonger Twenty Twenty-Two avec un thème enfant

La création d'un thème enfant pour un thème bloc est assez différente de la création d'un thème enfant pour un thème classique.

Mais une fois que vous avez une bonne compréhension de la structure d'un thème de bloc, vous n'aurez pas de difficulté à créer un thème enfant pour Twenty Twenty-Two ou tout autre thème de bloc.

Voyons donc comment personnaliser l'apparence de votre site Web basé sur Twenty Twenty-Two.

1. Configurer un thème enfant pour Twenty Twenty-Two

Dans votre répertoire /wp-content/themes , créez un nouveau dossier et nommez-le comme bon vous semble (selon les normes de développement de thèmes). Dans cet exemple, nous avons appelé le dossier du thème enfant TwentyTwentytwo-child .

Maintenant, vous avez besoin d'un fichier style.css . Ouvrez votre éditeur de code préféré et créez la feuille de style suivante :

 /* Theme Name: Twenty Twenty-Two Child Theme URI: https://example.com/ Author: Your name Author URI: https://example.com/ Description: A child theme for TT2. Requires at least: 5.8 Tested up to: 5.9 Requires PHP: 5.6 Version: 0.2 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: twentytwentytwo-child Template: twentytwentytwo Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments Twenty Twenty-Two Child WordPress Theme, (C) 2021 WordPress.org Twenty Twenty-Two Child is distributed under the terms of the GNU GPL. */

Comme toujours, vous pouvez modifier les champs selon vos besoins.

Votre thème enfant est maintenant disponible en aperçu. Vous pouvez l'activer dans l'écran d'administration Apparence > Thèmes .

2. Personnalisation des paramètres globaux

Depuis WordPress 5.9, les thèmes enfants avec un fichier theme.json héritent des paramètres du thème parent. Si le theme.json de l'enfant définit un ensemble de styles, ces styles s'appliquent en plus des styles de son parent.

Nous pouvons donc créer un fichier theme.json qui ne comprend qu'un petit bloc personnalisé de définitions de paramètres et de styles plutôt que de redéfinir tous nos choix d'origine.

Comment déclarer une palette de couleurs personnalisée

Lors de la création d'un thème enfant pour Twenty Twenty-Two, la tâche la plus simple consiste à remplacer la palette de couleurs. Tout ce que vous avez à faire est de définir une nouvelle palette de couleurs dans le theme.json de votre enfant comme indiqué ci-dessous :

 { "version": 2, "settings": { "color": { "palette": [ { "slug": "foreground", "color": "#FFFFFF", "name": "Foreground" }, { "slug": "background", "color": "#001F29", "name": "Background" }, { "slug": "primary", "color": "#D6FDFF", "name": "Primary" }, { "slug": "secondary", "color": "#FDFCDC", "name": "Secondary" }, { "slug": "tertiary", "color": "#FED9B7", "name": "Tertiary" }, { "slug": "accent", "color": "#E94435", "name": "Accent" } ] } } }

Enregistrez votre fichier et retournez dans l'éditeur du site. La palette de couleurs définie ci-dessus aurait dû remplacer la palette de couleurs par défaut de Twenty Twenty-Two.

Les couleurs seront affichées dans l'ordre sur la palette elle-même, et leurs noms doivent suivre les meilleures pratiques et les conventions de dénomination discutées sur Github.

Vous pouvez en savoir plus sur les options de couleur theme.json dans cet aperçu détaillé de Carolina Nymark.

Comment déclarer des filtres Duotone personnalisés

Vous pouvez également remplacer les couleurs bicolores par défaut par votre jeu de filtres personnalisé.

Pour ce faire, ajoutez simplement le code suivant aux paramètres theme.json de votre enfant au même niveau que la propriété palette :

 { "version": 2, "settings": { "color": { "palette": [...], "duotone": [ { "colors": [ "#001F29", "#FFFFFF" ], "slug": "default-filter", "name": "Default filter" } ] } } }

Enregistrez votre fichier et vérifiez le résultat dans l'éditeur de blocs. Vous ne devriez voir qu'un seul filtre à deux tons.

3. Personnalisation des styles de bloc

Comme nous l'avons mentionné précédemment, avec WordPress 5.9, vous pouvez désormais personnaliser les paramètres et les styles de theme.json à partir de l'interface Global Styles.

Les styles de bloc peuvent être personnalisés à partir de l'interface Styles globaux uniquement si le bloc déclare la prise en charge de fonctionnalités spécifiques dans le fichier block.json correspondant. Mais vous pouvez remplacer les paramètres de bloc par défaut dans le theme.json de votre thème enfant.

Supposons maintenant que vous souhaitiez remplacer les styles de bloc de titre de publication et de groupe. Tout ce que vous avez à faire est de définir les styles que vous souhaitez ajouter ou remplacer, comme indiqué ci-dessous :

 { "version": 2, "settings": {...}, "styles": { "blocks": { "core/post-title": { "typography": { "fontFamily": "Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif" }, "color": { "background": "var(--wp--preset--color--tertiary)" }, "spacing": { "padding": "var(--wp--custom--spacing--small)" } }, "core/group": { "spacing": { "margin": { "top": "0", "bottom": "0" } } } } } }

Dans l'exemple ci-dessus, nous avons modifié la famille de polices, la couleur d'arrière-plan et les valeurs de rembourrage pour core/post-title , ainsi que les marges supérieure et inférieure pour core/group .

L'image ci-dessous montre le résultat tel qu'il apparaîtrait sur le site public :

Et c'est tout pour la revue !

Nous n'approfondirons pas les thèmes enfants pour l'instant, car cela dépasserait le cadre de cet article. En attendant, vous trouverez plus d'exemples de thèmes enfants Twenty Twenty-Two sur Github.

Résumé

En examinant de plus près le nouveau thème WordPress par défaut Twenty Twenty-Two et ses fonctionnalités (qui en font le thème par défaut le plus flexible jamais publié), nous avons dévoilé la nouvelle architecture d'information introduite avec WordPress 5.9. Nous avons même eu un aperçu de la nouvelle interface Global Styles.

De nombreuses nouvelles fonctionnalités intéressantes sont en route, et il semble clair que le nouvel environnement d'édition devient plus robuste, fiable et fonctionnel au fil du temps.

Alors que de nombreuses nouvelles fonctionnalités WordPress sont en route, d'autres disparaissent ou perdent en importance. De nombreux utilisateurs se demandent ce qu'il adviendra du Customizer et comment maintenir au mieux la rétrocompatibilité avec les thèmes existants.

Cependant, vous ne devriez pas vous attendre à sauter soudainement des thèmes traditionnels pour bloquer les thèmes d'un seul coup. Nous proposons actuellement quatre types de thèmes différents :

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

Alors, n'ayez crainte pour l'instant - il existe encore de nombreuses solutions parmi lesquelles choisir si vous ne vous sentez pas encore prêt à passer aux thèmes de blocage.

Et maintenant c'est à vous ! Êtes-vous prêt à faire le grand saut et à commencer à utiliser des thèmes de blocs dès maintenant ? Partagez vos pensées avec nous dans les commentaires ci-dessous.