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.
theme.json mondiaux.jsonBien 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.
Avant de plonger dans les thèmes des blocs, clarifions les termes essentiels:
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.
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 .
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.
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.
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.
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.
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.
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'é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.
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.
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é.
Plusieurs stratégies émergent pour le développement du thème des blocs:
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.
Vingt-vingt-deux sont un excellent exemple de thème conçu pour FSE, présentant les capacités des thèmes de bloc.
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.
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.
De nombreux sites Web utilisent déjà des thèmes de blocs, présentant leur polyvalence.
L'enfant le thème reste pertinent pour les thèmes de blocs, bien que les approches évoluent toujours.
Le plugin "Create Blockbase Thème" d'Automattic simplifie la création de thème enfant pour les thèmes de blockbase.
theme.json
Les fichiers theme.json Des outils émergent pour simplifier ce processus pour les non-codeurs.
Mon expérience met en évidence plusieurs aspects clés:
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.
La perte des capacités d'injection de code du personnalisateur nécessite de s'adapter à l'interface de l'éditeur de site.
La personnalisation des thèmes de blocs est nettement plus facile que avec les thèmes classiques, même pour les non-développeurs.
Bloquer les thèmes simplifier le développement du thème, en se concentrant davantage sur le contenu et les modèles.
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!
la fonction direct3d n'est pas disponible
Mon ordinateur ne peut pas l'ouvrir en double-cliquant dessus.
Introduction aux outils de développement logiciel
Utilisation du mot-clé Type dans Go
Introduction au contenu principal du travail du backend
Tutoriel sur l'achat et la vente de Bitcoin sur Huobi.com
Comment utiliser la fonction countif
Quelle est la devise du PROM ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
