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.

Aperçu de Twenty Twenty-Three
Aperçu de Twenty Twenty-Three
Léger, flexible et avec un ensemble de variations de style étonnantes de la communauté 👩‍🎨 Rencontrez Twenty Twenty-Three, le nouveau thème WordPress par défaut qui débarque avec WordPress 6.1 🛬Click to Tweet

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.

Aperçu d'un article individuel avec et sans image mise en avant dans Twenty Twenty-Three
Aperçu d’un article individuel avec et sans image mise en avant dans Twenty Twenty-Three

L’image suivante compare la page d’accueil avec une page d’archives.

Page d'accueil comparée à une page d'archives dans Twenty Twenty-Three
Page d’accueil comparée à une page d’archives dans Twenty Twenty-Three

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.

Taille des intertitres dans Twenty Twenty-Three
Taille des intertitres dans Twenty Twenty-Three

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"
				}
			]
		},
	}
}
Couleurs par défaut de Twenty Twenty-Three
Couleurs par défaut de Twenty Twenty-Three

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.

Styles globaux de Twenty Twenty-Three
Styles globaux de Twenty Twenty-Three

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.

Aperçu des variations de style de Twenty Twenty-Three sur Figma
Aperçu des variations de style de Twenty Twenty-Three 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 Fontvar(--wp--preset--font-family--system-font)
  • IBM Plex Monovar(--wp--preset--font-family--ibm-plex-mono)
  • Intervar(--wp--preset--font-family--inter)
  • Source Serif Provar(--wp--preset--font-family--source-serif-pro)
  • DM Sansvar(--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.

Galerie IBM Plex Mono sur ibm.com
Galerie IBM Plex Mono sur ibm.com

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.

Aperçu de la police Inter sur le site web de Rasmus Andersson
Aperçu de la police Inter sur le site web de Rasmus Andersson

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).

Aperçu de Source Serif Pro sur fonts.adobe.com
Aperçu de Source Serif Pro sur fonts.adobe.com

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.

Aperçu de DM Sans sur Google Fonts
Aperçu de DM Sans sur Google Fonts

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 e 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.

Modèles Twenty Twenty-Three
Modèles Twenty Twenty-Three

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.

Modèle de page 404 de Twenty Twenty-Three
Modèle de page 404 de Twenty Twenty-Three

Vous trouverez les fichiers HTML correspondants dans les dossiers templates et parts de Twenty Twenty-Three.

Twenty Twenty-Three Template parts
Twenty Twenty-Three Template parts

L’image ci-dessous affiche la partie de modèle Commentaires en mode édition :

Modification de la partie de modèle Commentaires
Modification de la partie de modèle Commentaires

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 :

Vous avez des problèmes de temps d'indisponibilité et de WordPress ? Kinsta est la solution d'hébergement conçue pour vous faire gagner du temps ! Découvrez nos fonctionnalités
{
	"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.

Styles globaux de Twenty Twenty-Three
Styles globaux de Twenty Twenty-Three

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
Personnaliser le texte, les couleurs et la mise en page dans Twenty Twenty-Three
Personnaliser le texte, les couleurs et la mise en page dans Twenty Twenty-Three

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 variation sombre de Twenty Twenty-Three
Pitch est une variation sombre de Twenty Twenty-Three
  • 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.
Canary utilise une seule taille de caractères et une largeur de colonne étroite
Canary utilise une seule taille de caractères et une largeur de colonne étroite
  • 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é
Sherbet a un aspect coloré unique
Sherbet a un aspect coloré unique
  • Grapes a été sélectionné pour sa combinaison agréable de palette de couleurs et de type de police.

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.

Personnalisation des styles dans l'interface des styles globaux
Personnalisation des styles dans l’interface des styles globaux

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.

Élément de menu Create Block Theme
Élément de menu Create Block Theme

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.

Créer une variation de style
Créer une variation de style

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
Une variation de style personnalisée apparaît dans le navigateur de styles
Une variation de style personnalisée apparaît dans le navigateur de styles

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.


Économisez du temps et de l’argent et optimisez les performances de votre site avec :

  • Aide instantanée des experts en hébergement WordPress, 24/7.
  • Intégration de Cloudflare Enterprise.
  • Une audience mondiale avec 35 centres de données dans le monde entier.
  • Optimisation avec notre surveillance intégrée de performance d’applications (APM).

Tout cela et bien plus encore, dans un seul plan sans contrat à long terme, avec des migrations assistées et une garantie de remboursement de 30 jours. Pour trouver le plan qui vous convient, Découvrez nos plans ou contactez nous.