Bien que ce soit un peu plus tard que prévu, nous allons avoir un nouveau thème par défaut pour WordPress. Son nom est Twenty Twenty-Two !
Le nouveau thème par défaut de WordPress est livré avec la version 5.9 de WordPress. Nous étions curieux d’en savoir plus sur ce nouveau thème, nous avons donc installé et testé Twenty Twenty-Two sur un environnement de développement local utilisant WordPress 5.9.
Nous vous montrerons nos résultats avant de conclure nos réflexions pour vous offrir un aperçu approfondi 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 qui soit. Il offre un excellent terrain de jeu pour tester les blocs, les compositions et les modèles.
Étant un thème à base de blocs, 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.
Nous devons dire tout de suite que Twenty Twenty-Two est le premier thème basé sur des blocs par défaut !
L’un des objectifs les plus ambitieux de ce nouveau thème est de donner du pouvoir aux utilisateurs. Avec autant de compositions et de modèles disponibles dès le départ, les utilisateurs peuvent construire des mises en page complexes en quelques clics seulement. Le reste n’est que de la personnalisation de style.
D’un point de vue technique, écrire sur Twenty Twenty-Two n’est pas très différent d’écrire sur les dernières et plus puissantes fonctionnalités à venir avec WordPress 5.9. Mais Twenty Twenty-Two nous fournit une loupe pour mieux apprécier les nouvelles fonctions d’édition de sites et se faire une meilleure idée de l’avenir de la plateforme.
Nous sommes donc ici pour vous présenter le nouveau thème.
Tout d’abord, nous allons explorer le nouveau flux d’édition de site que les utilisateurs découvriront avec WordPress 5.9 et Twenty Twenty-Two.
Ensuite, nous nous plongerons dans les principales fonctionnalités du thème bloc mises en œuvre dans Twenty Twenty-Two. Vous apprendrez à connaître les styles globaux, les motifs de bloc, les modèles et les parties de modèle.
Mais il y a encore beaucoup à dire sur Twenty Twenty-Two et les thèmes à base de blocs de WordPress. Ainsi, en guise de chapitre bonus, nous vous donnerons un aperçu rapide de la manière d’étendre les fonctionnalités de Twenty Twenty-Two en tirant parti du fichier theme.json.
Here’s a first look at the next WordPress default theme! I’m excited to be co-leading it alongside @jffng, and we both hope you'll contribute to it and/or just enjoy using it! 🐦🦆🐤🦉https://t.co/covjrpgFIO
— kjellr (@kjellr) October 6, 2021
Mettons-nous au travail et plongeons dans le tout nouveau thème par défaut de WordPress, Twenty Twenty-Two.
Twenty Twenty-Two apporte un nouveau flux d’édition de site
Plusieurs fonctionnalités complètes d’édition de site sont intégrées au cœur de WordPress 5.9. Les propriétaires de sites utilisant la dernière version de WordPress avec un thème basé sur des blocs tel que Twenty Twenty-Two installé seront bientôt en mesure de :
- Créer et modifier des articles et des pages en utilisant davantage de blocs et de composition
- Personnaliser les réglages et les styles définis dans le fichier theme.json grâce à l’interface des styles globaux
- Créer et modifier des modèles de pages et d’articles
- Créer et modifier des parties de modèle pour l’en-tête, le pied de page et d’autres zones de modèle
Avec toutes ces fonctionnalités intégrées au cœur, les contributeurs du cœur de WordPress ont discuté de l’évolution de l’architecture de l’information et ont redessiné l’ensemble du flux d’édition du site.
La première chose que vous pourriez remarquer une fois que vous avez activé 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.
Le fait de rassembler les fonctions d’édition des modèles et des styles sous le même menu Apparence devrait simplifier l’expérience d’édition. Il devrait être plus facile de comprendre 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 réglages de lecture, il peut s’agir de votre page des derniers articles ou d’une page statique.
Maintenant, en cliquant sur l’icône WordPress dans le coin supérieur gauche, un nouveau menu de navigation de l’éditeur de site s’affiche, comprenant trois éléments de menu : Site, Modèles, et Parties de modèle.
Regardons de plus près.
L’option Site ouvre le modèle de page d’accueil (derniers articles du blog ou page d’accueil statique).
L’option de menu Modèles vous permet d’obtenir une liste des modèles disponibles. Vous pouvez cliquer sur n’importe quel modèle de la liste pour le lancer dans l’éditeur.
À l’heure où nous écrivons ces lignes, Twenty Twenty-Two propose 11 modèles.
En cliquant sur l’icône en forme de point de suspension (︙) à droite, vous pouvez 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 Parties de modèle liste les parties de modèle disponibles que vous pouvez ouvrir dans l’éditeur pour vos personnalisations.
Vous trouverez quatre parties de modèle ajoutées par défaut à Twenty Twenty-Two. En passant le curseur sur un modèle modifié, une info-bulle s’affiche pour vous indiquer que le modèle a été personnalisé.
Vous pouvez effacer ces personnalisations en cliquant sur l’icône en forme d’ellipse (︙) à droite.
Modification des modèles et des parties de modèle
L’éditeur fournit l’interface permettant de personnaliser la structure de vos modèles et parties de modèle.
Vous pouvez y ajouter ou modifier facilement des blocs et des compositions, et vos modifications seront automatiquement appliquées à chaque page qui utilise ce modèle.
L’image ci-dessous montre le modèle de page 404 dans l’éditeur. Il s’agit d’un modèle assez simple, ne comprenant qu’un titre, un paragraphe et une boîte de recherche. Néanmoins, il nous permet de bien comprendre le fonctionnement de l’interface utilisateur.
Ici, vous pouvez effectuer des modifications et personnaliser les modèles pour qu’ils répondent au mieux à vos besoins. Par exemple, vous pouvez ajouter un modèle de grille d’images d’articles pour augmenter l’engagement de vos visiteurs et les inviter à parcourir le contenu de votre site web.
Le menu déroulant de l’en-tête en haut de l’éditeur de modèle affiche une liste des zones de modèle disponibles. La même liste apparaît dans l’onglet Modèle dans les Réglages de la colonne latérale.
En cliquant sur n’importe quelle zone de modèle (par exemple l’en-tête), vous serez directement amené à la partie du modèle que vous voulez modifier.
Si vous cliquez sur l’icône en forme d’ellipse à droite, vous accéderez à l’éditeur de partie de modèle isolée.
L’éditeur de partie de modèle fournit également une paire de poignées déplaçables, vous permettant de vérifier comment le modèle se comporte dans différentes résolutions d’écran.
Lorsque vous êtes satisfait de vos modifications, enregistrez-les et retournez dans l’éditeur de modèle principal pour vérifier le résultat final.
Si vous voulez plonger plus profondément dans la nouvelle architecture d’information, vous pouvez consulter les articles suivants :
- Concepts d’édition de site IA : Comment faire apparaître et accéder aux nouvelles fonctionnalités
- Concepts d’IA pour l’édition de sites – Partie 2
Dans le cœur de Twenty Twenty-Two : Un aperçu rapide de theme.json
Pour bien comprendre le fonctionnement de Twenty Twenty-Two et des thèmes blocs (comme Bricksy), jetons un coup d’œil au nouveau mécanisme de configuration et de style du thème 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 des 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.
Settings
La section settings définit les réglages au niveau global ou au niveau du bloc. Les réglages définis au niveau supérieur affectent tous les blocs, mais les blocs peuvent individuellement remplacer les réglges globaux. Dans Twenty Twenty-Two, vous trouverez réglages suivants :
{
"settings": {
"appearanceTools": true,
"color": {
"duotone": [...],
"gradients": [...],
"palette": [...]
},
"custom": {...},
"spacing": {...},
"typography": {
"dropCap": false,
"fontFamilies": [...],
"fontSizes": [...]
},
"layout": {...}
}
}Les réglages 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 sur la base d’une convention d’appellation spécifique :
- Propriété personnalisée CSS
--wp--preset--{preset-category}--{preset-slug} - Nom de 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 styles.
Styles
La section 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 suivants de Twenty Twenty-Two pour le bloc principal Bouton :
{
"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és.
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 propose 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 répertoire block-templates.
Parties de gabarit
La section templateParts comprend des définitions de parties 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 nécessaires. Les thèmes peuvent également déclarer un terme area, où la partie de modèle sera rendue dans l’éditeur.
Les fichiers .html des parties de modèle se trouvent dans le répertoire template-parts.
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 dans les Styles globaux de Twenty Twenty-Two.
Les styles globaux dans Twenty Twenty-Two
Si vous regardez le fichier 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 aller un peu plus loin, en introduisant une nouvelle fonctionnalité qui permet aux utilisateurs de thèmes à base 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 Styles globaux).
En cliquant sur cette icône, vous affichez une nouvelle colonne latérale Styles comprenant trois panneaux distincts :
- Un panneau Aperçu, montrant un aperçu de vos personnalisations
- Un panneau Styles globaux donnant accès à des groupes de contrôles spécifiques pour la typographie, les couleurs et la mise en page
- Un élément Blocs donnant accès aux réglages de style au niveau du bloc
La palette de couleurs de Twenty Twenty-Two
Le panneau Couleurs peut vous aider à éditer 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 Défaut et même créer votre palette personnalisée.
Vous avez déjà trouvé le code qui génère les contrôles de couleur ?
Si non, ouvrez le theme.json de Twenty Twenty-Two dans votre éditeur de code préféré. Vous y 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. En choisissant une couleur différente pour l’arrière-plan du bloc, il suffira d’affecter 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é dans la Personnalisation ou de créer un thème enfant pour cela.
Mais continuons à explorer les Styles globaux de Twenty-Two avec quelques exemples supplémentaires.
Réglages 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 contrôles 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-Two et trouvez la section typography. Vous verrez les réglages 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 vous attendez peut-être à voir deux familles de polices et cinq tailles de polices à partir du code ci-dessus. Et vous auriez deviné juste.
Voici comment le code ci-dessus se traduit dans les réglages de typographie des Styles globaux :
Vous pouvez deviner quel réglage génère le contrôle de la hauteur des lignes. Dans Twenty Twenty-Two, vous ne trouverez pas de réglage spécifique pour cela car il est activé par la propriété appearanceTools, qui est un raccourci pour plusieurs déclarations de réglages (voir section suivante).
Outils de mise en page et d’apparence
Le dernier élément de la colonne latérale Styles globaux est la mise en page. Au moment de la rédaction de cet article, il ne comprend qu’un contrôle padding.
Dans Twenty Twenty-Two, le panneau Mise en page est activé par la propriété du réglage appearanceTools, un booléen qui peut être utilisé pour activer plusieurs réglages à 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, je l’espère, comment les réglages déclarés dans le fichier theme.json correspondent aux contrôles Styles globaux correspondants.
Il nous manque encore une pièce de notre puzzle pour obtenir l’image complète du nouveau thème par défaut de WordPress : les compositions de bloc.
Compositions de blocs de Twenty Twenty-Two
On pourrait dire que Twenty Twenty-Two est surtout une collection de compositions – et c’est bien le cas. Dans Twenty Twenty-Two, vous trouverez des tonnes de compositions de blocs prêts à l’emploi parmi lesquels vous pourrez choisir pour construire des structures étonnantes et imprévisibles de blocs imbriqués pour vos pages web.
Le terme clé ici est la responsabilisation de l’utilisateur. Et cela tombe bien car, avec les compositions de blocs, vous pouvez construire toutes sortes de choses, d’un portfolio attrayant à un site web promotionnel d’une seule page, même si vous n’avez aucune connaissance du HTML ou du CSS !
Et WordPress 5.9 apporte des améliorations significatives au système de compositions avec le nouvel Explorateur de compositions, un outil qui vous permet de parcourir les compositions dans une modale plein écran.
Le nouvel outil vous permet également d’importer rapidement et facilement des compositions de bloc directement à partir du répertoire des compositions. 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 nombreuses compositions (plus de 65) réparties dans cinq catégories.
Ce solide ensemble de compositions s’associe parfaitement aux modèles et aux parties de modèles fournis avec le nouveau thème par défaut, ce qui rend l’expérience d’édition vraiment étonnante.
Si vous n’avez pas encore eu l’occasion d’expérimenter les compositions de blocs, nous allons vous montrer pourquoi elles sont considérées comme des outils si puissants à l’aide d’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 une autre composition de bloc Twenty Twenty-Two.
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 Index.
Cliquez sur le bouton Index pour afficher la liste déroulante de l’en-tête montrant la liste des zones de modèle disponibles sur la page. Cliquez sur le bouton représentant une ellipse à côté de Pied de page, puis sur Modifier le pide de page.
Comme mentionné ci-dessus, cela lancera l’éditeur de parties de modèle isolées.
Ouvrez maintenant l’inserteur de blocs et cliquez sur Compositions.
Lancez le nouvel outil Explorateur de compositions, sélectionnez la catégorie Pieds de page Twenty Twenty-Two et choisissez le pied de page de votre choix.
Maintenant, ajoutez et modifiez les blocs en fonction de vos besoins.
Enregistrez l’en-tête et vérifiez à nouveau 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 de l’en-tête et du pied de page :
Extension de Twenty Twenty-Two avec un thème enfant
La création d’un thème enfant pour un thème basé sur des blocs est assez différente de la création d’un thème enfant pour un thème classique.
Mais une fois que vous aurez bien compris la structure d’un thème à base de bloc, vous n’aurez aucun mal à créer un thème enfant pour Twenty Twenty-Two ou tout autre thème basé sur des blocs.
Découvrons donc comment personnaliser l’aspect et la convivialité de votre site web basé sur Twenty Twenty-Two.
1. Configuration d’un thème enfant pour Twenty Twenty-Two
Dans votre répertoire /wp-content/themes, créez un nouveau répertoire et nommez-le comme vous le souhaitez (selon les normes de développement de thèmes). Dans cet exemple, nous avons appelé le répertoire du thème enfant twentytwentytwo-child.
Vous avez maintenant 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 en fonction de vos besoins.
Votre thème enfant est maintenant disponible pour la prévisualisation. 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 réglages du thème parent. Si le theme.json enfant définit un ensemble de styles, ces styles s’appliquent par-dessus les 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 réglages et de styles plutôt que de redéfinir tous nos choix originaux.
Comment déclarer une palette de couleurs personnalisée
Lorsque vous créez 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 thème 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 à l’éditeur de site. La palette de couleurs définie ci-dessus devrait avoir remplacé 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 devraient suivre les meilleures pratiques et les conventions de dénomination discutées sur Github.
Vous pouvez lire beaucoup plus sur les options de couleurs de theme.json dans cette présentation approfondie par Carolina Nymark.
Comment déclarer des filtres bicolores personnalisés
Vous pouvez également remplacer les couleurs bicolores par défaut par votre ensemble de filtres personnalisés.
Pour ce faire, il suffit d’ajouter le code suivant aux réglages theme.json de votre thème 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 bicolore.
3. Personnalisation des styles de blocs
Comme nous l’avons mentionné précédemment, avec WordPress 5.9, vous pouvez désormais personnaliser les réglages et les styles du fichier theme.json à partir de l’interface des Styles globaux.
Les styles de bloc peuvent être personnalisés à partir de l’interface des Style globaux uniquement si le bloc déclare le support d’une fonctionnalité spécifique dans le fichier block.json correspondant. Mais vous pouvez remplacer les réglages de bloc par défaut dans le theme.json de votre thème enfant.
Supposons maintenant que vous souhaitiez remplacer les styles des blocs Title de publication et Groupe. Il vous suffit 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 police, la couleur d’arrière-plan et les valeurs de marge intérieure 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îtra sur le site public :
Et c’est tout pour la revue !
Nous n’allons pas nous plonger plus profondément dans les thèmes enfant pour l’instant, car cela dépasserait le cadre de cet article. En attendant, vous trouverez d’autres exemples de thèmes enfants Twenty Twenty-Two sur Github.
Résumé
Tout en examinant de plus près le nouveau thème par défaut de WordPress, 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 des Styles globaux.
De nombreuses nouvelles fonctionnalités passionnantes sont à venir, et il semble évident que le nouvel environnement d’édition devient de plus en plus robuste, fiable et fonctionnel au fil du temps.
Alors que de nombreuses nouvelles fonctionnalités de WordPress sont en route, d’autres disparaissent ou perdent de leur importance. De nombreux utilisateurs se demandent ce qu’il adviendra de la Personnalisation et comment maintenir au mieux la rétrocompatibilité avec les thèmes existants.
Cependant, il ne faut pas s’attendre à passer d’un seul coup des thèmes traditionnels aux thèmes basés sur des blocs. Nous disposons actuellement de quatre types de thèmes différents parmi lesquels vous pouvez choisir :
- Thèmes basés sur des blocs : Thèmes conçus pour le Full Site Editing
- Thèmes universels : Thèmes qui fonctionnent à la fois avec la Personnalisation et l’éditeur de site
- Thèmes hybrides : Thèmes classiques prenant en charge les fonctionnalités de FSE comme theme.json
- Thèmes classiques : Thèmes avec modèles PHP, functions.php, etc.
N’ayez crainte pour l’instant, il existe encore de nombreuses solutions si vous ne vous sentez pas encore prêt à passer aux thèmes à base de blocs.
Et maintenant, c’est à vous de jouer ! Êtes-vous prêt à faire le grand saut et à commencer à utiliser des thèmes basés sur des blocs dès maintenant ? Partagez vos réflexions avec nous dans les commentaires ci-dessous.
Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.
Laisser un commentaire