Thèmes basés sur des blocs

Qu’est-ce qu’un thème basé sur les blocs ?

Un thème WordPress basé sur les blocs fonctionne avec des modèles entièrement composés de blocs de sorte que l’éditeur peut être utilisé pour modifier non seulement le contenu des publications (pages, articles…), mais aussi toutes les zones du site : en-tête, pied de page, barres latérales, etc.

Haut ↑

Quelle est la structure d’un thème basé sur les blocs ?

Un thème basé sur les blocs sera structuré ainsi :

assets (dossier)
      - css (dossier)
            - blocks (dossier)
      - images (dossier)
      - js (dossier)
inc (dossier)
patterns (dossier)
parts (dossier)
      - footer.html
      - header.html
templates(dossier)
      - 404.html
      - archive.html
      - index.html
      - page.html
      - single.html
      - search.html
functions.php
index.php
README.txt
rtl.css
screenshot.png
style.css
editor-style.css
theme.json

Le dossier parts est facultatif, par contre le dossier templates doit exister et inclure un fichier index.html pour que l’éditeur reconnaisse un thème basé sur l’utilisation de blocs. Le dossier parts sert à regrouper les éléments de modèles : des subdivisions (header.html, footer.html, …).

La différence principale avec les thèmes existants réside dans le fait que les modèles et éléments de modèles relatifs à la hiérarchie classique de WordPress sont au format HTML au lieu d’être au format PHP et qu’ils sont intégralement composés de blocs. De plus, cet exemple inclut un fichier theme.json (en anglais) pour certains styles.

Haut ↑

Qu’est-ce qu’un modèle de bloc ?

Un modèle de blocs est composé d’une liste de blocs. Tout bloc WordPress peut être utilisé dans un modèle. Les modèles peuvent également partager des parties de leur contenu en utilisant les « éléments de modèles ». Par exemple, tous les modèles de blocs peuvent utiliser le même en-tête en incluant un élément de modèle distinct header.html.

Voici un exemple de modèle de bloc :

<!-- wp:site-title /-->

<!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large">
	<img src="https://cldup.com/0BNcqkoMdq.jpg" alt="" />
</figure>
<!-- /wp:image -->

<!-- wp:group -->
<div class="wp-block-group">
	<!-- wp:post-title /-->
	<!-- wp:post-content /-->
</div>
<!-- /wp:group -->

<!-- wp:group -->
<div class="wp-block-group">
	<!-- wp:heading -->
	<h2>Footer</h2>
	<!-- /wp:heading -->
</div>
<!-- /wp:group -->

Haut ↑

Comment écrire et modifier ces modèles ?

Toute personne disposant des permissions adéquates (exemple : un compte WordPress d’administration (« administrator ») pourra accéder aux modèles sous l’administration WordPress, les modifier dans des sections dédiées et les exporter.

Gutenberg 11.8 propose deux façons de créer et modifier des modèles.

Haut ↑

Modifier les modèles via l’écran Modèles du Tableau de bord

Vous pouvez accéder à la modification des modèles (Écran Modèles) depuis le Tableau de bord, via le menu Apparence puis Éditeur (en version bêta) soit la page wp-admin/site-editor.php. Ajoutez des blocs dans un modèle puis passez en mode éditeur de code pour récupérer le code HTML du modèle lorsque vous aurez terminé. Vous pouvez ensuite coller ce code dans le fichier correspondant se trouvant dans le répertoire du thème.

Veuillez noter que cette section ne répertorie pas les modèles fournis avec votre thème ou ceux pour lesquels vous aurez préalablement créé des fichiers HTML vides. Elle ne répertorie que les modèles créés sous l’administration sur le site WordPress sur lequel vous travaillez.

Haut ↑

Modifier les modèles dans l’Éditeur de site

Commencez par créer un fichier HTML vide dans le répertoire de votre thème en vous basant sur la hiérarchie des modèles . Par exemple : montheme/templates/index.html. Puis ouvrez l’Éditeur de site. Votre nouveau modèle devrait apparaitre en tant que modèle actif et être vide. Ajoutez des blocs dans ce modèle comme vous le feriez en utilisant Gutenberg. Vous pouvez créer et ajouter des éléments de modèles directement à partir du bloc Élément de modèle (« Template part »).

Faites ainsi avec tous les modèles que vous souhaitez ajouter à votre thème.

Lorsque vous avez terminé, cliquez sur l’outil Exporter accessible via le bouton Options (trois points), situé à la droite de la barre supérieure de l’éditeur de site. Vous pourrez ainsi télécharger un fichier ZIP contenant tous les modèles et éléments de modèles que vous avez créés sous l’éditeur et que vous pourrez placer dans le dossier de votre thème.

Veuillez noter que lorsque vous faites cet export, le balisage du bloc Élément de modèle inclut un identifiant de publication (postID) qui peut être supprimé en toute sécurité si vous redistribuez votre thème.

Haut ↑

Modèles de types de publication personnalisés

En enregistrant les modèles à partir du menu Apparence, puis Modèles (menu temporaire) du Tableau de bord, vous pourrez surcharger les modèles présents dans le dossier de votre thème.

Exemple : en utilisant le mot « single » comme titre de votre modèle et en l’enregistrant, ce modèle aura la priorité sur le fichier single.html présent dans le dossier de votre thème.

Notez cependant qu’il ne surchargera aucun des modèles ayant une spécificité plus élevée dans la hiérarchie des modèles. La résolution va du plus spécifique au moins spécifique, en recherchant d’abord un modèle de publication personnalisé, puis un modèle de thème, et ce à chaque niveau.

Haut ↑

Blocs de thème

Certains blocs ont été spécialement conçus pour les thèmes. Par exemple, vous utiliserez probablement le bloc Titre du Site dans l’en-tête de votre site, et votre modèle « single » inclura probablement un bloc Titre de la publication ainsi qu’un bloc Contenu de la publication.

Comme nous n’en sommes qu’au début du processus, le nombre de blocs dédiés à ce type de modèles est encore faible mais d’autres seront ajoutés au fur et à mesure. La version 11.8 de Gutenberg propose les blocs suivants :

• Boucle de requête
• Titre de la publication
• Contenu de la publication
• Date de publication
• Extrait de la publication
• Image mise en avant de la publication
• Connexion/déconnexion
• Navigation
• Élément de modèle – « Template Part »
• Auteur de la publication – « Post Author »
• Commentaire de la publication – « Post Comment »
• Commentaires de la publication – « Post Comments »
• Compteur de commentaires – « Post Comments Count »
• Formulaire de commentaires – « Post Comments Form »
• Lien vers les commentaires d’une publication – « Post Comments Link »
• Description du terme – « Term Description »
• Listes des publications
• En-tête
• Pied de page
• Article suivant
• Article précédent

Haut ↑

Styles

L’un des aspects les plus importants des thèmes (si ce n’est le plus important) est le style. Pour l’instant vous pouvez ajouter des styles via des feuilles de styles déclarées de manière classique, mais le fichier theme.json (en anglais) qui se chargera à l’avenir de gérer les styles du thème offre déjà beaucoup d’options.

Haut ↑

Thèmes classiques

Les personnes utilisant des thèmes classiques peuvent également créer des modèles de blocs personnalisés et les utiliser dans leurs pages et types de publications personnalisés prenant en charge les modèles de page.

Les autrices et auteurs de thèmes peuvent désactiver cette fonctionnalité en supprimant le support block-templates dans leur fichier functions.php.

remove_theme_support( 'block-templates' );

Haut ↑

Ressources

• Une vidéo d’apprentissage en français sur WordPress.tv :

• Site dédié aux thèmes basés sur les blocs (en anglais) de Carolina Nymark
• Tickets Github dans la rubrique Full Site Editing (en anglais)
• Dépôt Github Theme Experiments (en anglais) regroupant des exemples de thèmes créés par la communauté WordPress avec l’éditeur de site

Traduit par Loïc Antignac
Relu par Jb Audras & Jenny Dupuy
Dernière mise à jour le 28 août 2023

Contribuer à la documentation en français de WordPress