Twenty Twenty-Three est le tout nouveau thème WordPress par défaut lancé avec WordPress 6.1.
C’est un thème minimaliste sans images ni fonctionnalités supplémentaires. Il donne le meilleur de lui-même en tant que thème de démarrage pour créer des modèles et des variations de style et également tester toutes les fonctionnalités introduites avec les dernières versions de WordPress. Le thème pourrait être considéré comme un véritable environnement de développement et de test, bien que le style minimaliste, la réactivité et la légèreté en fassent une bonne option pour créer des blogs et des sites web adaptés à une grande variété d’objectifs.
Dans son introduction au thème Twenty Twenty-Two, Kjell Reigstad a écrit sur l’avenir des thèmes par défaut:
Des innovations telles que theme.json, les modèles de blocs et les compositions de blocs rendent le développement de thèmes beaucoup plus simple et offrent aux utilisateurs de nouvelles façons de personnaliser leurs sites. Il y a des raisons de croire que la communauté peut tirer parti de tout cela pour construire des thèmes et des solutions de personnalisation plus fréquents et plus variés pour nos utilisateurs dans les années à venir.
Et Channing Ritter a fait la proposition suivante:
Et si, au lieu de mettre l’accent sur le thème lui-même, nous mettions en avant un ensemble de variations de style conçues par les membres de la communauté ? Nous pourrions utiliser Twenty Twenty-Two comme base pour un nouveau thème dépouillé et minimal – une toile blanche pour laisser briller une gamme variée de variations de style.
Et c’est ce qui se passe avec le nouveau thème par défaut Twenty Twenty-Three. La communauté a été appelée à participer activement à la conception du thème WordPress par défaut, et nous aimons cela car cela fait du nouveau thème le résultat d’un travail véritablement participatif.
Mais avant de découvrir les variations de style qui accompagnent le nouveau thème par défaut de WordPress, découvrons les caractéristiques de base de Twenty Twenty-Three et ce à quoi il peut convenir.
Mises en page et styles
Comme mentionné ci-dessus, Twenty Twenty-Three est une version dépouillée de Twenty-Two. Ce qui frappe dans ce nouveau thème par défaut, c’est sa simplicité et sa légèreté. Twenty Twenty-Three est flexible et parfaitement adapté aux dernières fonctionnalités d’édition de site de Gutenberg, comme l’édition de modèles, les variations de styles globaux, la typographie fluide et les compositions de blocs.
Il ne sera donc pas surprenant que dans les captures d’écran présentées dans cet article, vous voyiez des pages minimales sans fioritures mais parfaitement adaptées à la personnalisation et aux tests.
Pour vous en donner un exemple, l’image ci-dessous montre des pages d’article individuel avec et sans images mises en avant.
L’image suivante compare la page d’accueil avec une page d’archives.
Même si le nouveau thème est une version simplifiée de Twenty Twenty-Two, par rapport au précédent thème par défaut, Twenty Twenty-Three présente quelques différences essentielles.
Tout d’abord, la taille des en-têtes a été réduite et la police à empattement par défaut a été remplacée par une police système sans empattement.
Une palette de couleurs différente a également été appliquée. Vous pouvez voir la nouvelle définition de la palette de Twenty Twenty-Three dans le code suivant du theme.json:
{
"settings": {
"appearanceTools": true,
"color": {
"palette": [
{
"color": "#ffffff",
"name": "Base",
"slug": "base"
},
{
"color": "#000000",
"name": "Contrast",
"slug": "contrast"
},
{
"color": "#9DFF20",
"name": "Primary",
"slug": "primary"
},
{
"color": "#345C00",
"name": "Secondary",
"slug": "secondary"
},
{
"color": "#F6F6F6",
"name": "Tertiary",
"slug": "tertiary"
}
]
},
}
}
Mais la principale caractéristique du nouveau thème par défaut est son ensemble de variations de style. Twenty Twenty-Three est livré avec dix variations de style globales, chacune d’entre elles présentant une combinaison différente de couleurs, de famille de polices et de taille de police.
Vous trouverez les fichiers JSON correspondants dans le dossier styles de Twenty Twenty-Three.
Des aperçus complets des modèles de page, des styles et des variations de style de Twenty Twenty-Three sont disponibles sur Figma.
Typographie de Twenty-Three
Dans un thème minimaliste comme Twenty-Three, la typographie joue un rôle essentiel pour rendre le texte lisible, le site attrayant et, en fin de compte, offrir aux visiteurs une expérience de navigation enrichissante, quels que soient l’appareil et la taille de l’écran.
À cette fin, Twenty-Three est livré avec un nouvel ensemble de familles de polices et utilise la typographie fluide introduite avec WordPress 6.1.
Polices de caractères
Twenty Twenty-Three est doté d’un nouvel ensemble de polices de caractères qui sont utilisées dans des variations de style et caractérisées par la simplicité et la variété :
- System Font –
var(--wp--preset--font-family--system-font) - IBM Plex Mono –
var(--wp--preset--font-family--ibm-plex-mono) - Inter –
var(--wp--preset--font-family--inter) - Source Serif Pro –
var(--wp--preset--font-family--source-serif-pro) - DM Sans –
var(--wp--preset--font-family--dm-sans)
IBM Plex Mono fait partie du jeu de polices IBM Plex, la nouvelle police de caractères d’entreprise IBM publiée sous SIL Open Font License (OFL). Vous pouvez en voir un aperçu sur les sites web d’Adobe Fonts et d’IBM.
Inter est une famille de polices gratuite et open source conçue et réalisée pour les écrans d’ordinateur par Rasmus Andersson. Vous pouvez prévisualiser et télécharger la famille de polices sur le site web de Rasmus Andersson ou sur Google Fonts.
Source Serif Pro est une police d’Adobe Originals et vous pouvez l’utiliser gratuitement avec un compte Adobe Fonts (en savoir plus sur les licences des polices Adobe).
DM Sans est une autre police sous licence SIL Open Font License (OFL), qui a été commandée par Google à Colophon Foundry, et conçue par Colophon Foundry, Jonny Pinhorn, et Indian Type Foundry.
Typographie fluide et espacement
Twenty Twenty-Three utilise la typographie fluide et les présélections d’espacement introduites avec WordPress 6.1.
Le nouveau thème WordPress par défaut fournit un excellent exemple de mise en œuvre de la typographie fluide dans les thèmes WordPress et vous pouvez l’utiliser comme modèle pour ajouter la prise en charge de cette fonctionnalité dans vos thèmes.
Le code suivant montre les définitions des propriétés settings.typography.fluid et settings.typography.fontSizes[] dans le fichier theme.json:
"settings": {
...
"typography": {
"fluid": true,
"fontSizes": [
{
"fluid": {
"min": "0.875rem",
"max": "1rem"
},
"size": "1rem",
"slug": "small"
},
{
"fluid": {
"min": "1rem",
"max": "1.125rem"
},
"size": "1.125rem",
"slug": "medium"
},
{
"size": "1.75rem",
"slug": "large",
"fluid": false
},
{
"size": "2.25rem",
"slug": "x-large",
"fluid": false
},
{
"size": "10rem",
"slug": "xx-large",
"fluid": {
"min": "4rem",
"max": "20rem"
}
}
]
}
}Le réglage typography.fluid ajoute le support de la typographie fluide tandis que typography.fontSizes[].fluid définit la valeur minimale et maximale de la taille de la police.
En plus de la typographie fluide, Twenty-Three prend également en charge l’espacement fluide.
Avant WordPress 6.1, il était uniquement possible de définir des valeurs d’espacement personnalisées dans l’éditeur. Cela signifie qu’avant WordPress 6.1, les auteurs de thèmes n’étaient pas en mesure de spécifier des valeurs fixes pour la marge intérieure, la marge et le gap. Cela a entraîné plusieurs limitations. Par exemple, il n’était pas possible de transférer facilement les réglages d’espacement entre différents thèmes ou de conserver les valeurs d’espacement lors du copier-coller de contenu et de compositions de blocs entre différents sites.
Les thèmes peuvent déclarer la prise en charge de l’espacement fluide à l’aide des nouveaux réglages spacing.spacingScale et spacing.spacingSizes (pour en savoir plus, consultez Theme.json : Add spacing size presets). Dans Twenty Twenty-Three, cela se fait avec les réglages suivants :
"settings": {
"spacing": {
"spacingScale": {
"steps": 0
},
"spacingSizes": [
{
"size": "clamp(1.5rem, 5vw, 2rem)",
"slug": "30",
"name": "30"
},
{
"size": "clamp(1.8rem, 1.8rem + ((1vw - 0.48rem) * 2.885), 3rem)",
"slug": "40",
"name": "40"
},
{
"size": "clamp(2.5rem, 8vw, 6.5rem)",
"slug": "50",
"name": "50"
},
{
"size": "clamp(3.75rem, 10vw, 7rem)",
"slug": "60",
"name": "60"
},
{
"size": "clamp(5rem, 5.25rem + ((1vw - 0.48rem) * 9.096), 8rem)",
"slug": "70",
"name": "70"
},
{
"size": "clamp(7rem, 14vw, 11rem)",
"slug": "80",
"name": "80"
}
],
"units": [
"%",
"px",
"em",
"rem",
"vh",
"vw"
]
}
}La vidéo ci-dessous montre la typographie fluide en action dans Twenty Twenty-Three.
Vous pouvez vérifier les pré-réglages de typographie et d’espacement dans Spécification du design.
Modèles et parties de modèles
Avec Twenty Twenty-Three, vous verrez en action toutes les fonctionnalités et les améliorations de l’édition de site qui arrivent avec WordPress 6.1.
C’est particulièrement vrai pour les modèles et les parties de modèles.
Lorsque vous lancez l’éditeur de site avec Twenty Twenty-Three en cours d’utilisation sur votre site web, vous verrez une liste de onze modèles et quatre parties de modèle.
L’image ci-dessous montre le modèle 404 dans l’éditeur de site.
Vous trouverez les fichiers HTML correspondants dans les dossiers templates et parts de Twenty Twenty-Three.
L’image ci-dessous affiche la partie de modèle Commentaires en mode édition :
Vous trouverez des modèles personnalisés et des parties de modèle définis dans le fichier theme.json.
Modèles personnalisés
En plus des modèles par défaut, Twenty Twenty-Three fournit les modèles personnalisés suivants :
- Vierge
- Blog (Alternative)
- 404
- Avec image mise en avant
- Avec bloc de couverture
Ces modèles sont définis dans le theme.json comme suit :
{
"customTemplates": [
{
"name": "blank",
"postTypes": [
"page",
"post"
],
"title": "Blank"
},
{
"name": "blog-alternative",
"postTypes": [
"page"
],
"title": "Blog (Alternative)"
},
{
"name": "404",
"postTypes": [
"page"
],
"title": "404"
},
{
"name": "with-featured-image",
"postTypes": [
"page",
"post"
],
"title": "With Featured Image"
},
{
"name": "with-cover-block",
"postTypes": [
"page",
"post"
],
"title": "With Cover Block"
}
],
}Parties de modèle
Les parties de modèle sont définies comme ci-dessous :
{
"templateParts": [
{
"area": "header",
"name": "header",
"title": "Header"
},
{
"area": "footer",
"name": "footer",
"title": "Footer"
},
{
"area": "uncategorized",
"name": "comments",
"title": "Comments"
},
{
"area": "uncategorized",
"name": "post-meta",
"title": "Post Meta"
}
]
}Styles globaux et variations de style
Comme mentionné ci-dessus, à partir de WordPress 6.0, les auteurs de thèmes peuvent regrouper plusieurs ensembles de styles avec leurs thèmes, permettant aux utilisateurs de passer d’une variation de style à une autre sans modifier leur thème.
Cette grande fonctionnalité de WordPress est la principale caractéristique du nouveau thème par défaut, puisque Twenty Twenty-Three propose dix combinaisons de styles pré-établies parmi lesquelles choisir.
Vous pouvez parcourir ces styles dans l’interface Style global de votre éditeur de site. Ici, vous pouvez
- Changer de style global à partir du panneau Parcourir les styles.
- Personnaliser les réglages de typographie – texte, liens, en-têtes et boutons
- Modifier les couleurs par défaut ou changez la couleur d’éléments spécifiques
- Personnaliser la mise en page de la zone de contenu principal
- Personnaliser l’apparence d’éléments spécifiques
Il convient de noter à nouveau que dans la création de tant de variations de style, la participation de la communauté a été cruciale. Après le lancement du projet Twenty Twenty-Three, 38 propositions ont été reçues de 19 contributeurs répartis dans 8 pays différents (vous pouvez explorer tous les projets sur GitHub).
Sur les 38, 10 variations de style ont été sélectionnées:
- Pitch est une version sombre du style par défaut qui utilise la famille de polices Inter de Rasmus Andersson.
- Canary utilise une taille de caractères unique et une largeur de colonne étroite. Il utilise également un effet intéressant de arrondi de bordure.
- Electric utilise une couleur grasse pour toute la typographie du site.
- Pilgrimage est une version sombre et colorée du thème de base.
- Marigold est une variation douce et agréable du style de base.
- Block-Out présente un effet de duotone sur les images.
- Whisper met en valeur certains éléments personnalisés, comme la bordure du bord de la page, les styles de boutons et le soulignement unique des liens.
- Sherbet a un look unique, lumineux et coloré
- Grapes a été sélectionné pour sa combinaison agréable de palette de couleurs et de type de police.
- L’aubergine est un arrière-plan bicolore plus foncé qui attire l’attention.
La chose la plus cool à propos des variations de style est que vous ne devez pas nécessairement être un développeur frontend pour créer vos styles.
Si vous êtes à l’aise avec le code, vous pouvez choisir l’un des fichiers .json qui se trouvent dans le dossier des styles de Twenty Twenty-Three et l’utiliser comme modèle pour construire votre variation de style.
Mais si le code n’est pas votre truc, vous pouvez utiliser l’extension officielle Create Block Theme, que vous pouvez télécharger gratuitement depuis le répertoire d’extensions de WordPress.org.
Tout d’abord, installez et activez l’extension, puis allez vers l’éditeur de style. Une fois ici, personnalisez les couleurs, la typographie et la mise en page selon vos préférences et enregistrez vos modifications.
Une fois que vous êtes satisfait de vos modifications, trouvez Créer un thème de bloc sous Apparence dans le menu d’administration de WordPress.
Cochez le dernier élément en bas de la liste : Créer une variation de style. Il vous sera demandé d’assigner un nom à votre variation de style. Saisissez le nom et cliquez sur Créer un thème. Cela créera un nouveau fichier .json dans le dossier des styles du thème.
Vous pouvez maintenant personnaliser davantage votre style et même l’exporter vers d’autres installations WordPress.
L’extension Create Block Theme est un outil précieux pour tirer pleinement parti des fonctions de création de thèmes et de modèles disponibles avec les dernières versions de WordPress. Pendant que vous y êtes, vous pourriez jeter un coup d’œil à toutes les autres options :
- Exporter Twenty Twenty-Three
- Créer un thème enfant de Twenty Twenty-Three
- Cloner Twenty Twenty-Three
- Écraser Twenty Twenty-Three
- Créer un thème vierge
- Créer une variation de style
Résumé
Si, à première vue, le nouveau thème WordPress par défaut peut ressembler à une sorte de boîte vide sans fonctionnalités, en y regardant de plus près, il est bien plus que cela, car il vous permet de tirer le meilleur parti des dernières fonctionnalités d’édition de sites WordPress.
Dans Twenty Twenty-Three, vous verrez de nombreux modèles et parties de modèles à personnaliser, un ensemble de 10 variations de style à utiliser comme base pour créer des sites web uniques, et la prise en charge de toutes les nouvelles fonctionnalités disponibles dans WordPress 6.1, à commencer par la typographie fluide et le système de modèles amélioré.
Avec Twenty Twenty-Three, on a l’impression que la différence entre l’apparence et la fonctionnalité du site est désormais flagrante. La seule fonction du thème est de régler l’apparence du site, laissant l’ajout de fonctionnalités aux extensions. Et de ce point de vue, Twenty Twenty-Three fait un excellent travail, en offrant aux utilisateurs de WordPress toutes les dernières fonctionnalités d’édition de site Gutenberg. Personnaliser l’apparence d’un site web n’a jamais été aussi facile.
À vous de jouer maintenant. Avez-vous déjà utilisé le nouveau thème dans un environnement de test ? Avez-vous déjà essayé de créer des variations de style personnalisées ? 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