Une introduction profonde aux thèmes de blocs WordPress

Depuis ses débuts en 2018, l'éditeur de blocs WordPress (Gutenberg) a révolutionné la création de sites. Bien qu'utilisables avec tout thème soutenant son CSS, les thèmes de bloc représentent une progression importante. Ces thèmes exploitent l'éditeur de blocs pour la construction complète du site, en passant le rôle du thème du contrôle du contenu aux conseils de conception. Cette approche, connue sous le nom d'édition complète (FSE), permet aux utilisateurs de créer des sites entiers à l'aide de blocs.

Explorons cette technologie transformatrice.

Table des matières

• Introduction
• Terminologie clé
• Éditeur de bloc avec des thèmes classiques
• Comprendre les thèmes de blocs
• Thèmes de blocs de construction
• Styles et theme.json mondiaux.json
• Bloquer les stratégies de développement du thème
• Exemples de thème de blocs du monde réel
• Création de thèmes d'enfants en blocs
• Réflexions personnelles
• Ressources

Introduction

Bien que l'évolution de l'éditeur de blocs soit largement visible pour les utilisateurs, son développement sous-jacent sur Github progresse constamment. Mon propre voyage impliquait d'utiliser à la fois les éditeurs classiques et les éditeurs de blocs, même s'aventurer dans WordPress sans tête avec Gatsby et Frontity avant de revenir sur la plate-forme principale.

Initialement intrigué par les thèmes expérimentaux basés sur des blocs sur GitHub, j'ai récemment commencé à les explorer activement, même en mettant en œuvre un sur un projet personnel. WordPress 5.9 ("Joséphine") a marqué un moment charnière, apportant des thèmes d'édition et de blocage complet au premier plan. Bien que les fonctionnalités itératives existaient auparavant, cette version change la donne. Cet article partage mon expérience d'apprentissage pratique et mes observations personnelles.

Avertissement: je ne suis pas un expert à thème de bloc, mais un utilisateur de WordPress chevronné. Mon objectif n'est pas de critiquer WordPress 5.9 mais d'offrir le point de vue d'un apprenant ouvert basé sur l'expérience pratique avec l'éditeur de blocs.

Terminologie clé

Avant de plonger dans les thèmes des blocs, clarifions les termes essentiels:

Éditeur de blocs

Cela fait référence à l'éditeur WordPress, bien nommé en raison de sa structure basée sur des blocs. Chaque élément (texte, images, vidéos, etc.) est un bloc, permettant des dispositions de page modulaires. Cela contraste avec l'approche de mise en page prédéfinie de l'éditeur "classique". L'éditeur de bloc intègre le contenu et l'édition de mise en page dans une seule interface.

Thème de blocage

Tel que défini par la documentation WordPress, un thème de bloc utilise des blocs pour construire tous les modèles de site (en-têtes, pieds de page, barres latérales, etc.), étendant la portée de l'éditeur de bloc au-delà du contenu du post. Contrairement aux thèmes classiques qui reposent sur des modèles PHP, les thèmes de blocs utilisent des modèles HTML basés sur des blocs, stylisés et organisés via l'éditeur de site et theme.json .

Rédacteur en chef

L'éditeur de site (souvent appelé modification complète ou FSE) est l'outil central pour créer et gérer des modèles basés sur des blocs. Il permet de modifier divers modèles, pièces de modèle et options de style dans une interface cohérente. Cela remplace le développement de thème basé sur des modèles PHP traditionnelle par une approche visuelle basée sur des blocs.

Le glossaire officiel WordPress fournit d'autres définitions.

Éditeur de bloc avec des thèmes classiques

L'éditeur de blocs fonctionne avec des thèmes classiques et de blocs. L'éditeur classique (via le plugin de l'éditeur classique) reste disponible, offrant une compatibilité arrière. L'introduction progressive de l'éditeur de blocs, initialement via le plugin Gutenberg puis intégrée dans WordPress Core, a ouvert la voie à FSE.

Comprendre les thèmes de blocs

Les thèmes de bloc expérimental sont en cours de développement depuis le début de 2020. Le référentiel d'expérience à thème GitHub présente diverses approches. Vingt-vingt et uns étaient une étape importante, intégrant les styles et les modèles de blocs. De nombreux thèmes incluent désormais des modèles et des styles d'éditeur de blocs.

Bloquer la structure du fichier de thème

Les thèmes de blocs diffèrent considérablement des thèmes classiques. Alors que les thèmes classiques reposent sur PHP et JavaScript pour le balisage, les thèmes de blocs tirent parti du balisage du noyau et du style de base. Un thème de bloc simple peut inclure index.php , style.css , theme.json , templates/index.html et dossiers parts pour les composants réutilisables.

Modèles et pièces de modèle

Les modèles sont des groupes de blocs, incorporant souvent des "parties" réutilisables (par exemple, en-têtes, pieds de page). Ceux-ci sont assemblés pour créer des dispositions de page.

Thèmes de blocs de construction

L'éditeur de site est le principal outil pour concevoir des sites Web WordPress. Il remplace le personnalisateur pour de nombreuses tâches de personnalisation de thème.

L'interface de l'éditeur de site WordPress

L'éditeur de site, accessible via Apparence → Editor , fournit une interface basée sur des blocs familiers mais avec des capacités élargies pour gérer les modèles à l'échelle du site. Il dispose de sections pour le site , les modèles et les pièces de modèle , permettant des ajustements de conception globale. Les personnalisations peuvent être facilement effacées à l'aide du menu Kebob.

Création de modèles et de pièces de modèle

Les modèles sont créés et gérés dans l'éditeur de site, éliminant le besoin de création de fichiers PHP manuelle. Le manuel de l'éditeur Block Détails des méthodes de création de modèles et de pièces de modèle, y compris la création manuelle HTML et l'utilisation de l'interface de l'éditeur de site.

Styles et theme.json mondiaux.json

Dans les thèmes de bloc, le style est géré via le fichier theme.json , offrant un contrôle granulaire sur les styles provenant de diverses sources. Ce fichier permet aux auteurs de thème de définir les styles par défaut, de gérer les options de personnalisation de l'utilisateur et de définir les paramètres des éditeurs. Il fournit une approche centralisée du style, de l'amélioration de la maintenabilité.

Bloquer les stratégies de développement du thème

Plusieurs stratégies émergent pour le développement du thème des blocs:

Thèmes universels

Blockbase, un thème universel d'Automattic, sert de point de départ similaire au thème des sous-traits, offrant une base pour le développement du thème de l'enfant.

Thèmes par défaut (par exemple, vingt-deux)

Vingt-vingt-deux sont un excellent exemple de thème conçu pour FSE, présentant les capacités des thèmes de bloc.

Thèmes hybrides

Les thèmes hybrides mélangent des approches traditionnelles et FSE, en utilisant theme.json pour le style et potentiellement incorporer des modèles de blocs.

Thèmes communautaires

Le répertoire de thème WordPress propose une sélection croissante de thèmes de blocs créés par la communauté, démontrant diverses approches.

Exemples de thème de blocs du monde réel

De nombreux sites Web utilisent déjà des thèmes de blocs, présentant leur polyvalence.

Création de thèmes d'enfants en blocs

L'enfant le thème reste pertinent pour les thèmes de blocs, bien que les approches évoluent toujours.

Créer un plugin de thème de blockbase

Le plugin "Create Blockbase Thème" d'Automattic simplifie la création de thème enfant pour les thèmes de blockbase.

Utilisation de fichiers alternatifs theme.json

Les fichiers theme.json Des outils émergent pour simplifier ce processus pour les non-codeurs.

Réflexions personnelles

Mon expérience met en évidence plusieurs aspects clés:

Aborder les critiques de Jamstack

Les thèmes des blocs abordent les critiques de Jamstack concernant les thèmes WordPress gonflés en offrant des structures légères axées sur le balisage.

Manquer le personnalisateur

La perte des capacités d'injection de code du personnalisateur nécessite de s'adapter à l'interface de l'éditeur de site.

Personnalisations simplifiées

La personnalisation des thèmes de blocs est nettement plus facile que avec les thèmes classiques, même pour les non-développeurs.

Abaissement des barrières à l'entrée

Bloquer les thèmes simplifier le développement du thème, en se concentrant davantage sur le contenu et les modèles.

Ressources

De nombreuses ressources sont disponibles pour en savoir plus sur les thèmes de blocs et le FSE. Cela comprend la documentation officielle WordPress, les tutoriels et les articles de blog de diverses sources.

L'éditeur du site, tout en évoluant, offre des possibilités passionnantes. J'explore activement les thèmes de blocs et j'attends avec impatience les développements futurs. Partagez vos expériences et vos commentaires!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!