Une introduction aux thèmes de blocs WordPress

Les composants qui composent un thème WordPress typique n'ont pas beaucoup changé au fil des ans. À tel point que le co-fondateur du projet, Matt Mullenweg, a plaisanté en disant que le thème de la vieille école Kubrick (sorti en 2005) fonctionne toujours avec les versions modernes du système de gestion de contenu.

Bien sûr, les développeurs de thèmes ont ajouté leurs propres ajouts. Nous avons tout vu, des interfaces utilisateur de paramètres complexes aux constructeurs de pages intégrés. Mais à la base, les thèmes ont conservé une structure cohérente. C'est-à-dire jusqu'à l'introduction des thèmes de blocs.

Les thèmes de blocs sont appelés à devenir l'avenir de WordPress. Ils vont changer la façon dont nous construisons et maintenons des sites Web. De plus, ils sont plus étroitement intégrés à l'éditeur de blocs Gutenberg que leurs homologues "classiques".

Vous vous demandez pourquoi tout ce remue-ménage ? Aujourd'hui, nous allons vous expliquer les bases des thèmes de blocs WordPress. En cours de route, nous explorerons comment ils se comparent et contrastent avec les thèmes traditionnels. Commençons!

Pourquoi bloquer les thèmes ?

Au cours des premières années de son existence, l'éditeur de blocs a été principalement un moyen de styliser et de créer du contenu. Combiné à un thème classique, cela signifiait que les pages et les publications pouvaient être conçues selon vos désirs.

Lorsqu'il s'agit d'apporter des modifications qui ont un impact sur l'ensemble du thème, le personnalisateur WordPress est resté la ressource incontournable. Cet outil permet d'accéder aux paramètres de conception et de mise en page mis à disposition par l'auteur du thème. Si ce n'est pas dans le Customizer, vous devrez probablement creuser dans le code.

Cependant, l'un des principes clés de l'éditeur de blocs a été de créer une interface plus unifiée dans le tableau de bord WordPress. Nous avons déjà vu cela se produire avec l'écran Widgets passant à une interface utilisateur basée sur des blocs. Le Customizer ne rentre tout simplement pas dans ce moule.

L'introduction de l'édition complète du site (FSE) est la prochaine étape de ce processus. Cela va au-delà du simple style de nos pages et de nos publications. Désormais, chaque aspect de la conception d'un thème (en-tête, pied de page, modèles de page, etc.) peut être géré directement dans WordPress.

Les thèmes de blocs servent de passerelle vers cette fonctionnalité. En tant que tels, ils sont construits exclusivement avec des blocs à l'esprit.

Le fonctionnement interne d'un thème de bloc WordPress

Il n'y a pas une tonne de similitudes entre les thèmes classiques et les blocs. Mais les deux ont un ensemble de règles de base qui guident leur composition. Si vous deviez télécharger un thème de bloc et naviguer dans sa structure de fichiers, quelques contrastes clés pourraient ressortir.

Les fichiers de modèle sont en HTML plutôt qu'en PHP

Dans un thème classique, vous trouverez des fichiers modèles avec des noms tels que index.php et header.php . Les thèmes de blocs suppriment PHP et portent à la place l'extension de fichier .html .

À l'intérieur, un fichier de modèle contient une combinaison de balisage HTML et de bloc. Par exemple, examinons ce modèle de la documentation officielle de WordPress :

 <!-- 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 -->

Le balisage de bloc ressemble énormément aux commentaires HTML. Mais il inclut une syntaxe pour appeler des blocs spécifiques dans le modèle. Le site Web WordPress Full Site Editing contient une référence pratique qui inclut un balisage pour chaque bloc par défaut.

Et si ce type de code vous semble familier, vous avez peut-être vu quelque chose de similaire dans la vue de l'éditeur de code de Gutenberg.

L'utilisation des dossiers

Les thèmes classiques sont capables de stocker des modèles dans des dossiers, mais ce n'est pas une nécessité. Les thèmes de blocs nécessitent quelques sous-dossiers :

/parts
Contient des éléments réutilisables tels que l'en-tête, le pied de page et la barre latérale.

/templates
Modèles de maisons pour différents types de contenu. Les éléments tels que les pages, les archives de publication et les publications singulières sont des exemples courants. Notez que leur convention de dénomination suit la hiérarchie des modèles WordPress – une autre similitude avec les thèmes classiques.

L'un des effets secondaires positifs de cet arrangement est que les thèmes seront mieux organisés. Avoir une structure de dossiers standardisée signifie moins de temps passé à rechercher un fichier particulier.

Thème.json Style

Le fichier theme.json est utilisé pour attribuer des paramètres par défaut à l'éditeur de blocs. Cela signifie, entre autres, qu'il est possible de définir des palettes de couleurs, une typographie et un espacement par défaut. Les paramètres peuvent être appliqués à l'ensemble du site ou à des blocs spécifiques.

Étant donné que theme.json générera automatiquement le CSS approprié en fonction de sa configuration, vous n'aurez peut-être pas besoin de remplir autant le fichier style.css d'un thème. Dans ce scénario, la feuille de style est utilisée pour définir quelques notions de base, tandis que tout le reste repose sur ce fichier dernier cri.

Création et modification de modèles

WordPress offre depuis longtemps la possibilité de modifier les fichiers de modèle d'un thème directement dans le tableau de bord. Cela était souvent déconseillé, car même une petite erreur de codage pouvait rendre un site Web inaccessible. Sans parler de la possibilité que les modifications soient écrasées lors de la mise à jour d'un thème (ce qui explique en partie l'utilisation d'un thème enfant). Certains développeurs désactivent complètement la fonctionnalité pour éviter même un risque de catastrophe lointain.

Mais les thèmes de bloc concernent uniquement l'édition dans le tableau de bord. Les modèles inclus avec un thème peuvent être modifiés via l'éditeur de blocs, et de nouveaux modèles personnalisés peuvent également être créés.

Comme vous vous en doutez, le code est complètement facultatif dans ce scénario. Tout peut être modifié via le nouvel éditeur de site ( Apparence > Éditeur - WordPress 5.9 ou supérieur requis ) qui remplace l'ancien Customizer lorsqu'un thème de bloc est activé. Et, tout comme les pages ou les publications, l'éditeur de site utilise l'interface utilisateur familière de l'éditeur de blocs.

Et ce n'est pas tout. Quelles que soient les modifications que vous apportez dans WordPress, elles peuvent être exportées. Cela vous permettrait d'utiliser votre thème de bloc personnalisé sur plusieurs sites Web.

Cela réduit la barrière à l'entrée pour ceux qui souhaitent personnaliser ou même créer des thèmes. Maintenant, un œil de base pour la conception et une connaissance pratique des blocs peuvent mener à un site Web personnalisé.

Choses à garder à l'esprit

Avant de plonger et de basculer tous vos sites Web pour utiliser des thèmes de blocs, vous devez savoir certaines choses.

Avant tout, les thèmes de blocs sont une technologie naissante . Toutes les fonctionnalités n'ont pas été finalisées et certaines bonnes pratiques doivent être aplanies. De plus, nous commençons tout juste à voir comment ces thèmes fonctionnent dans un environnement de production. Attendez-vous à plusieurs changements à mesure que les choses évoluent.

Si vous créez des sites pour des clients et souhaitez conserver une certaine flexibilité future, les thèmes hybrides peuvent être intéressants. Ils permettent d'utiliser les fonctionnalités de FSE tout en conservant la structure PHP d'un thème classique. Vous pouvez même moderniser un thème existant pour utiliser cette fonctionnalité.

Enfin, les thèmes de bloc ne signifient pas la fin des thèmes classiques - du moins pas dans un avenir prévisible. Avec cela, la transition vers cette nouvelle façon de thématiser ne doit pas être immédiate. Vous pouvez, par exemple, expérimenter des blocs dans un environnement local tout en vous appuyant sur vos thèmes classiques préférés en production.

Bloquer les ressources thématiques

Si vous souhaitez en savoir plus sur les thèmes de blocs WordPress, il existe des ressources exceptionnelles disponibles. Voici quelques-uns de nos favoris:

• Bloquer la documentation du thème par WordPress
• Thème Blockbase par Automattic
• Édition complète du site par Carolina Nymark
• Le guide ultime des modèles de blocs WordPress dans Gutenberg par Rich Tabor
• La révolution des thèmes de blocs WordPress prend tranquillement de l'élan par Justin Tadlock
• Expériences de thème WordPress par WordPress