Basé sur l’idée que les choses simples doivent être intuitives et que les choses complexes doivent être possibles, Twenty Twenty-Five est un thème WordPress par défaut flexible et facilement extensible, conçu pour aider les gens à raconter des histoires, grâce à ses nombreux modèles et styles.
Twenty Twenty-Five sera livré avec WordPress 6.7. Il est livré avec un large éventail d’images inspirantes provenant d’Openverse, le dépôt gratuit d’images partagées par et pour la communauté WordPress. Ces images sont intégrées dans les modèles de blocs de Twenty Twenty-Five et prêtes à être utilisées pour raconter des histoires qui évoquent « les idées d’impermanence, de passage du temps et d’évolution continue »
Le rôle central des compositions dans Twenty Twenty-Five montre que le développement de thèmes de blocs se concentre de plus en plus sur l’interface de l’éditeur de site et moins sur l’écriture de code PHP et JavaScript.
Aujourd’hui, même les utilisateurs qui n’ont pas de compétences avancées en matière de codage peuvent créer un thème. Il vous suffit d’avoir quelques notions sur le fonctionnement de theme.json et sur la manière de créer des compositions de blocs.
Les modèles et les parties de modèles que vous verrez dans Twenty Twenty-Five sont des collections de blocs, de compositions et de parties de modèles imbriqués qui constituent les éléments structurels de chaque type de mise en page.
Twenty Twenty-Five est un excellent exemple de la philosophie de démocratisation du design, et cet article vous montrera sa structure en détail.
Twenty Twenty-Five est un excellent exemple pour apprendre tout ce qui concerne les thèmes de blocs WordPress, et si vous avez lu notre introduction à theme.json, vous serez en mesure de créer vos propres thèmes WordPress et de les partager avec l’ensemble de l’écosystème.
Mais allons droit au but et commençons notre voyage à travers Twenty Twenty-Five, le prochain thème WordPress par défaut.
Compositions et parties de modèles
Twenty Twenty-Five propose un certain nombre de compositions de blocs et de parties de modèles qui aident les utilisateurs de WordPress à construire leurs articles et leurs pages en quelques minutes. Ces compositions et parties de modèles ont été conçus pour plusieurs objectifs, tels que les pages de destination, les produits et services, les évènements, les appels à l’action, les pages à propos, et bien plus encore.
Dans le dossier du thème, vous trouverez les fichiers correspondants dans les répertoires parts et patterns. Lorsque vous ouvrez un fichier de partie de modèle, vous constatez que chaque partie de modèle ne comprend qu’un lien vers un modèle de bloc. Voici le code de la partie de modèle header.html:
<!-- wp:pattern {"slug":"twentytwentyfive/header"} /-->Les parties de modèle doivent également être enregistrées, vous les trouverez donc dans le répertoire theme.json de Twenty Twenty-Five sous la propriété templateParts:
{
"templateParts": [
{
"area": "header",
"name": "header",
"title": "Header"
},
{
"area": "footer",
"name": "footer",
"title": "Footer"
},
{
"area": "footer",
"name": "footer-newsletter",
"title": "Footer Newsletter"
},
{
"area": "uncategorized",
"name": "right-aligned-sidebar",
"title": "Right Aligned Sidebar"
},
{
"area": "uncategorized",
"name": "sidebar",
"title": "Sidebar"
}
]
}La propriété area détermine la section de la page dans laquelle une partie de modèle s’inscrit et la catégorie correspondante, name est la balise de la partie de modèle et title est la chaîne de texte utilisée pour créer le libellé qui identifie la partie de modèle à l’écran.
Le dossier patterns du thème Twenty Twenty-Five comprend un grand nombre de fichiers .php. Vous pouvez ouvrir n’importe lequel de ces fichiers et vérifier le code pour apprendre comment les compositions de blocs sont construites.
Ces compositions fournissent d’excellents exemples de puissantes fonctionnalités de WordPress récemment ajoutées au noyau. Par exemple, le fichier copyright.php contient le code suivant :
<!-- wp:paragraph {
"metadata":{
"bindings":{
"content":{
"source":"twentytwentyfive/copyright"
}
}
},
"className":"copyright",
"textColor":"primary",
"fontSize":"small"
} -->
<p class="copyright has-primary-color has-text-color has-small-font-size"></p>
<!-- /wp:paragraph -->Vous pouvez voir d’un coup d’œil que cette composition utilise la fonctionnalité Block Bindings introduite avec WordPress 6.5 pour générer dynamiquement le contenu du texte Copyright.
Ici, l’attribut content de la composition Copyright est connecté à une source définie dans le thème Twenty Twenty-Five.
Si vous vous demandez où cette chaine de texte est définie, consultez le fichier functions.php de Twenty Twenty-Five et trouvez le code suivant :
/**
* Register block binding sources.
*/
if ( ! function_exists( 'twentytwentyfive_register_block_bindings' ) ) :
/**
* Register the copyright block binding source.
*
* @since Twenty Twenty-Five 1.0
* @return void
*/
function twentytwentyfive_register_block_bindings() {
register_block_bindings_source(
'twentytwentyfive/copyright',
array(
'label' => _x( '© YEAR', 'Label for the copyright placeholder in the editor', 'twentytwentyfive' ),
'get_value_callback' => 'twentytwentyfive_copyright_binding',
)
);
}
endif;
add_action( 'init', 'twentytwentyfive_register_block_bindings' );'© YEAR' génère la chaine de texte affichée sur la page, tandis que le rappel twentytwentyfive_copyright_binding fournit la chaine de texte formatée :
/**
* Register block binding callback function for the copyright.
*/
if ( ! function_exists( 'twentytwentyfive_copyright_binding' ) ) :
/**
* Callback function for the copyright block binding source.
*
* @since Twenty Twenty-Five 1.0
* @return string Copyright text.
*/
function twentytwentyfive_copyright_binding() {
$copyright_text = sprintf(
/* translators: 1: Copyright symbol or word, 2: Year */
esc_html__( '%1$s %2$s', 'twentytwentyfive' ),
'©',
wp_date( 'Y' ),
);
return $copyright_text;
}
endif;Si tout cela vous semble un peu compliqué, pensez à la facilité avec laquelle l’utilisateur peut créer des mises en page complexes en utilisant simplement les éléments disponibles.
Pensez également à la facilité avec laquelle un développeur peut créer des modèles et des compositions de blocs en générant leur code directement dans l’éditeur de site. Enfin, l’intégration avec l’API Block Bindings ouvre la voie à d’infinies possibilités d’intégration avec des sources de données externes.
Twenty Twenty-Five fournit d’autres bons exemples d’utilisation des compositions de blocs. Par exemple, vous pouvez construire des mises en page avancées en assemblant simplement des compositions existantes dans d’autres compositions.
Lorsque vous parcourez les compositions dans l’éditeur de site, vous pouvez voir plusieurs mises en page de pages de destination dans la catégorie Pages.
Ces compositions sont des mises en page pré-construites et sont prêtes à être utilisées dans vos pages. Lorsque vous créez une nouvelle page, l’éditeur affiche une superposition où vous pouvez choisir une composition de bloc. Vous pouvez commencer par une composition de page de destination et la personnaliser en fonction de vos besoins.
Vous pouvez également modifier le modèle de page par défaut et utiliser celui qui convient le mieux à votre projet.
Plongeons maintenant dans le code de la page de destination pour la composition de livre. Rendez-vous dans le dossier patterns de Twenty Twenty-Five et ouvrez page-landing-book.php. Vous devriez voir le code suivant :
<?php
/**
* Title: Landing page for Book
* Slug: twentytwentyfive/page-landing-book
* Categories: twentytwentyfive_page, featured
* Keywords: starter
* Block Types: core/post-content
* Post Types: page, wp_template
* Viewport width: 1400
* Description: A landing page for the book with a hero section, pre-order links, locations, FAQs and newsletter signup.
*
* @package WordPress
* @subpackage Twenty_Twenty_Five
* @since Twenty Twenty-Five 1.0
*/
?>
<!-- wp:pattern {"slug":"twentytwentyfive/hero-book"} /-->
<!-- wp:pattern {"slug":"twentytwentyfive/cta-book-links"} /-->
<!-- wp:pattern {"slug":"twentytwentyfive/banner-about-book"} /-->
<!-- wp:pattern {"slug":"twentytwentyfive/cta-book-locations"} /-->
<!-- wp:pattern {"slug":"twentytwentyfive/text-faqs"} /-->
<!-- wp:pattern {"slug":"twentytwentyfive/newsletter-sign-up"} /-->Il s’agit simplement d’une collection de compositions de blocs. Cela devrait démontrer à quel point il est facile de créer des mises en page complexes, tant pour les développeurs que pour les utilisateurs. Les développeurs peuvent créer des parties de modèles et des compositions de blocs complexes en imbriquant simplement des compositions pré-construites dans d’autres compositions en quelques clics. Construire une page de destination n’a jamais été aussi facile.
Styles
Twenty Twenty-Five propose un ensemble varié de polices de caractères supportant plusieurs langues et un grand nombre de palettes de couleurs prédéfinies regroupées sous forme de variations de style.
Polices
Twenty Twenty-Five comprend 9 polices avec de nombreuses variantes. Vous pouvez sélectionner les polices que vous souhaitez utiliser sur votre site web dans l’interface des styles globaux, sous Typographie.
Ces familles de polices sont stockées dans le dossier assets/fonts de Twenty Twenty-Five et enregistrées dans theme.json.
Le fragment ci-dessous enregistre cinq variantes de la famille de polices Fira Code :
{
"settings": {
"typography": {
"fontFamilies": [
{
"name": "Fira Code",
"slug": "fira-code",
"fontFamily": "\"Fira Code\", monospace",
"fontFace": [
{
"src": [
"file:./assets/fonts/fira-code/FiraCode-Light.woff2"
],
"fontWeight": "300",
"fontStyle": "normal",
"fontFamily": "\"Fira Code\""
},
{
"src": [
"file:./assets/fonts/fira-code/FiraCode-Regular.woff2"
],
"fontWeight": "400",
"fontStyle": "normal",
"fontFamily": "\"Fira Code\""
},
{
"src": [
"file:./assets/fonts/fira-code/FiraCode-Medium.woff2"
],
"fontWeight": "500",
"fontStyle": "normal",
"fontFamily": "\"Fira Code\""
},
{
"src": [
"file:./assets/fonts/fira-code/FiraCode-SemiBold.woff2"
],
"fontWeight": "600",
"fontStyle": "normal",
"fontFamily": "\"Fira Code\""
},
{
"src": [
"file:./assets/fonts/fira-code/FiraCode-Bold.woff2"
],
"fontWeight": "700",
"fontStyle": "normal",
"fontFamily": "\"Fira Code\""
}
]
},
...
}
}
}L’image suivante montre les variantes de la police Fira Code dans l’éditeur de site.
Twenty Twenty-Five est également livré avec 8 types de typographie. Il vous suffit d’en choisir une dans la section Typographie de l’interface des styles globaux et elle sera appliquée à l’ensemble de votre site web.
Si vous sélectionnez le jeu de caractères numéro 7, « Platypi & Literata », ces deux polices sont automatiquement appliquées à tous les éléments de votre site web : Literata s’applique à l’ensemble des éléments textuels et Platypi s’applique au titre du site, à l’en-tête et aux blocs de boutons.
Ce preset est enregistré dans le fichier typography-preset-6.json sous styles/typography:
{
"version": 3,
"$schema": "https://schemas.wp.org/trunk/theme.json",
"title": "Platypi & Literata",
"slug": "typography-preset-6",
"styles": {
"typography": {
"fontFamily": "var:preset|font-family|literata",
"fontSize": "var:preset|font-size|large",
"fontStyle": "normal",
"fontWeight": "300",
"letterSpacing": "-0.24px",
"lineHeight": "1.3"
},
"blocks": {
"core/site-title": {
"typography": {
"fontFamily": "var:preset|font-family|platypi",
"fontWeight": "800",
"letterSpacing": "-0.6px"
}
},
"core/post-title": {
"typography": {
"fontWeight": "800",
"letterSpacing": "-0.96px"
}
},
"core/query-title": {
"typography": {
"fontWeight": "800"
}
}
},
"elements": {
"heading": {
"typography": {
"fontFamily": "var:preset|font-family|platypi",
"fontWeight": "800"
}
},
"button": {
"typography": {
"fontFamily": "var:preset|font-family|platypi",
"fontWeight": "800"
}
}
}
}
}Couleurs
Twenty Twenty-Five fournit une palette par défaut de 8 couleurs. Ces couleurs sont définies dans theme.json comme suit :
{
"settings": {
"color": {
"palette": [
{
"color": "#FFFFFF",
"name": "Base",
"slug": "base"
},
{
"color": "#111111",
"name": "Contrast",
"slug": "contrast"
},
{
"color": "#FFEE58",
"name": "Accent 1",
"slug": "accent-1"
},
{
"color": "#F6CFF4",
"name": "Accent 2",
"slug": "accent-2"
},
{
"color": "#503AA8",
"name": "Accent 3",
"slug": "accent-3"
},
{
"color": "#686868",
"name": "Primary",
"slug": "primary"
},
{
"color": "#FBFAF3",
"name": "Secondary",
"slug": "secondary"
},
{
"color": "#11111133",
"name": "Opacity 20%",
"slug": "opacity-20"
}
]
},
...
}
Twenty Twenty-Five propose également 8 palettes de couleurs supplémentaires définies comme des variations de style. Vous pouvez les trouver dans le dossier styles/colors du thème.
L’image ci-dessous montre la palette de couleurs Sunrise.
Modèles
Twenty Twenty-Five propose également un ensemble considérable de modèles pour vous permettre de créer n’importe quel type de blog. Vous pouvez créer des blogs personnels avec une quantité cohérente de texte, des blogs photo et des portfolios avec différentes structures de mise en page, ainsi que des blogs plus structurés destinés à une variété d’objectifs.
Les images suivantes montrent des aperçus des modèles de blog Twenty Twenty-Five de Figma. Voici quelques-uns des modèles de blog personnel.
Et voici quelques modèles de blogs photo.
Les modèles Twenty Twenty-Five sont minimalistes et conçus pour offrir une interface simple et claire. Comme les parties des modèles, les modèles sont fortement basés sur des blocs de compositions. Pour avoir un indice, ouvrez l’un des fichiers .html que vous pouvez trouver dans le dossier templates du thème Twenty Twenty-Five et vérifiez le code. Vous trouverez ci-dessous le code source du fichier archive.html:
<!-- wp:template-part {"slug":"header","area":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<main class="wp-block-group" style="margin-top:var(--wp--preset--spacing--60)">
<!-- wp:query-title {"type":"archive"} /-->
<!-- wp:term-description /-->
<!-- wp:pattern {"slug":"twentytwentyfive/posts-personal-blog"} /-->
<!-- wp:pattern {"slug":"twentytwentyfive/more-posts"} /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->Le contenu de la page d’archives est généré par les blocs Query title et Term description et par les modèles List of posts, 1 column (posts-personal-blog) et More posts (more-posts).
Sur la base de ce code, vous pouvez facilement créer un modèle personnalisé pour votre site web. Par exemple, si vous souhaitez remplacer la liste des articles par un blog de photos, vous pouvez facilement le faire en modifiant la composition utilisée dans ce modèle.
Dans l’éditeur de site, accédez à la section Modèles et cliquez sur Ajouter un nouveau modèle. Vous serez invité à sélectionner le type de contenu auquel votre modèle doit s’appliquer. Dans cet exemple, nous avons sélectionné les Archives de catégorie.
Ensuite, vous devez décider si le modèle sera utilisé pour toutes les catégories ou pour une catégorie spécifique. Enfin, une ou plusieurs compositions vous seront proposées pour commencer et effectuer vos modifications.
Mais vous pouvez aussi tout construire à partir de zéro. Dans cet exemple, nous apportons une petite modification au code du fichier archive.html et utilisons la composition twentytwentyfive/photo-blog-posts au lieu de twentytwentyfive/posts-personal-blog. La page d’archives des catégories de WordPress affiche désormais une galerie de photos.
Résumé
Twenty Twenty-Five, le prochain thème par défaut à être publié avec WordPress 6.7, est conçu avec une philosophie de simplicité pour les utilisateurs et de flexibilité pour les développeurs. Grâce à la diversité et à la polyvalence de ses compositions de blocs et de ses styles, ce thème a pour but d’aider les utilisateurs à raconter des histoires passionnantes. Il inclut de nombreuses images inspirantes d’Openverse qui sont intégrées de manière transparente dans les blocs du thème.
La structure du thème s’articule autour de collections de blocs imbriqués, de compositions et de parties de modèles, ce qui facilite plus que jamais la conception de mises en page complexes sans connaissances avancées en matière de codage.
Twenty Twenty-Five est un pas de plus vers la démocratisation de la conception. Que vous soyez un développeur chevronné ou un débutant, Twenty Twenty-Five fournit une base solide pour explorer les thèmes en blocs, et avec le savoir-faire adéquat, vous pouvez même créer votre propre thème pour le partager avec la communauté WordPress.
À vous de jouer. Avez-vous déjà testé Twenty Twenty-Five dans un environnement de développement ? Faites-nous part de vos impressions dans les commentaires ci-dessous.
Carlo est un passionné de webdesign et de développement frontend. Il joue avec WordPress depuis plus de 10 ans, notamment en collaboration avec des universités et des établissements d'enseignement italiens et européens. Il a écrit des dizaines d'articles et de guides sur WordPress, publiés à la fois sur des sites web italiens et internationaux, ainsi que dans des magazines imprimés. Vous pouvez trouver Carlo sur X et LinkedIn.
Laisser un commentaire