Magazine Gadgets

Que sont les thèmes de bloc ? Ce que vous devez savoir avant WordPress 5.9 – WP Tavern

Publié le 29 août 2022 par Mycamer

WordPress 5.9 devrait être lancé le 25 janvier et de nombreux utilisateurs seront surpris. La prochaine version sera le changement le plus monumental dans le fonctionnement de la plate-forme depuis l’introduction de l’éditeur de contenu basé sur des blocs dans la version 5.0. Les thèmes de blocs, les styles globaux et l’éditeur de site donneront le coup d’envoi à un nouvel avenir pour WordPress.

Pour le lecteur moyen de WP Tavern, ce n’est pas une nouvelle. Nous avons couvert des thèmes de blocs ici pendant plus d’un an. Pour ceux qui ne sont pas au courant, il y a beaucoup à rattraper au cours des deux prochaines semaines.

L’une des plaintes concernant le lancement de l’éditeur de blocs en 2018 était que les utilisateurs ne pouvaient refuser de l’utiliser qu’en installant Classic Editor ou un plugin connexe. Ce n’est pas le cas pour les nouvelles fonctionnalités de la 5.9. Les utilisateurs peuvent continuer à utiliser leur configuration actuelle sans aucun changement. L’accès à l’éditeur de site et aux styles globaux est un processus d’acceptation. Il nécessite l’activation d’un thème de bloc.

Les changements à venir affecteront deux principaux groupes d’utilisateurs. Les premiers sont ceux qui préfèrent exécuter le dernier thème WordPress par défaut. Les seconds seront ceux qui sont prêts à tester le nouveau système.

Actuellement, il y a 35 thèmes de blocs dans le répertoire sur WordPress.org, avec plus dans la file d’attente de révision. Cela limite les options disponibles pour le moment.

Grille à trois rangées de trois colonnes.  Chacun montre une capture d'écran du thème WordPress et son nom.
<img loading="lazy" data-lazy-fallback="1" data-attachment-id="128155" data-permalink="https://wptavern.com/what-are-block-themes-what-you-need-to-know-before-wordpress-5-9/block-themes-dir" data-orig-file="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/01/block-themes-dir.jpg" data-orig-size="2400,1478" data-comments-opened="0" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="block-themes-dir" data-image-description="" data-image-caption="" data-medium-file="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/01/block-themes-dir-300x185.jpg" data-large-file="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/01/block-themes-dir-500x308.jpg" width="2400" height="1478" src="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/01/block-themes-dir.jpg" alt="Grille à trois rangées de trois colonnes. Chacun montre une capture d'écran du thème WordPress et son nom." class="wp-image-128155" srcset="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/01/block-themes-dir.jpg 2400w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/01/block-themes-dir-300x185.jpg 300w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/01/block-themes-dir-500x308.jpg 500w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/01/block-themes-dir-768x473.jpg 768w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/01/block-themes-dir-1536x946.jpg 1536w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/01/block-themes-dir-2048x1261.jpg 2048w " sizes="(max-width: 2400px) 100vw, 2400px" />Bloquez les thèmes de WordPress.org.

Après le lancement de WordPress 5.9 et la familiarisation des développeurs avec la construction du nouveau système, je m’attends à ce que nous assistions à une augmentation notable des thèmes de blocs dans les mois à venir.

Noter: cet article se concentre sur les modifications apportées aux utilisateurs. Si vous êtes un développeur qui souhaite se lancer dans la conception de thèmes de blocs, lisez l’aperçu de Marcus Kazmierczak sur thèmes de blocs de construction pour WordPress 5.9.

Vingt vingt-deux

À propos de la conception de la page avec un logo, un titre et un menu en haut.  Ensuite, une grande section d'introduction et une photo d'un oiseau.
<img data-lazy-fallback="1" data-attachment-id="124839" data-permalink="https://wptavern.com/the-pattern-block-and-how-it-fixes-a-longstanding-issue-with-dynamic-data-in-html-templates/tt2-homepage" data-orig-file="https://149611589.v2.pressablecdn.com/wp-content/uploads/2021/10/tt2-homepage.jpg" data-orig-size="2400,2154" data-comments-opened="0" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="tt2-homepage" data-image-description="" data-image-caption="" data-medium-file="https://149611589.v2.pressablecdn.com/wp-content/uploads/2021/10/tt2-homepage-300x269.jpg" data-large-file="https://149611589.v2.pressablecdn.com/wp-content/uploads/2021/10/tt2-homepage-500x449.jpg" loading="lazy" width="2400" height="2154" src="https://149611589.v2.pressablecdn.com/wp-content/uploads/2021/10/tt2-homepage.jpg" alt="À propos de la conception de la page avec un logo, un titre et un menu en haut. Ensuite, une grande section d'introduction et une photo d'un oiseau." class="wp-image-124839" srcset="https://149611589.v2.pressablecdn.com/wp-content/uploads/2021/10/tt2-homepage.jpg 2400w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2021/10/tt2-homepage-300x269.jpg 300w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2021/10/tt2-homepage-500x449.jpg 500w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2021/10/tt2-homepage-768x689.jpg 768w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2021/10/tt2-homepage-1536x1379.jpg 1536w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2021/10/tt2-homepage-2048x1838.jpg 2048w " sizes="(max-width: 2400px) 100vw, 2400px" />Vingt vingt-deux thème sur le modèle de page.

Le dernier thème WordPress par défaut, Twenty Twenty-Two, sera lancé parallèlement à la version 5.9. Bien que j’aie quelques idées à ce sujet, il se peut que ce soit mon thème par défaut préféré de tous les temps jamais créé.

WordPress 5.9 RC 2 a été publié plus tôt dans la journée. C’est maintenant le meilleur moment pour lui donner un essai. Twenty Twenty-Two est déjà fourni avec cette version.

Comme c’est souvent le cas avec les thèmes par défaut, il est susceptible de devenir le de facto standard dans lequel les développeurs construisent leurs propres projets. Il utilise toutes les dernières fonctionnalités et est l’un des thèmes les plus récents. Cela en fait le point de départ idéal pour les utilisateurs qui souhaitent tester le nouveau système.

Le thème n’est qu’un élément d’un système plus large. Pour les utilisateurs, cela peut être quelque chose qu’ils définissent et oublient. Ou, ils peuvent passer au niveau supérieur et personnaliser leur interface jusqu’à ce que leur cœur soit satisfait.

Éditeur de site et styles globaux

Les thèmes de bloc sont différents de nombreux thèmes traditionnels. À l’ère classique, les utilisateurs activaient un thème et personnalisaient les options mises à disposition par le développeur. C’était un système rigide qui souvent n’offrait pas beaucoup de flexibilité aux utilisateurs à moins qu’ils ne sachent comment écrire du code.

Les utilisateurs peuvent accéder à une multitude de nouvelles fonctionnalités après avoir activé un thème de bloc. Cela se fait via l’éditeur de site, situé sous l’écran d’administration Apparence > Éditeur. Les utilisateurs peuvent modifier leurs modèles de thème directement sur le canevas et personnaliser leur conception via le panneau de styles globaux.

Éditeur de site WordPress ouvert au modèle d'accueil.  Le panneau des styles globaux est ouvert sur la droite avec des options de typographie, de couleurs et de mise en page.
<img data-lazy-fallback="1" data-attachment-id="128154" data-permalink="https://wptavern.com/what-are-block-themes-what-you-need-to-know-before-wordpress-5-9/tt2-site-editor" data-orig-file="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/01/tt2-site-editor.jpg" data-orig-size="2400,1124" data-comments-opened="0" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="tt2-site-editor" data-image-description="" data-image-caption="" data-medium-file="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/01/tt2-site-editor-300x141.jpg" data-large-file="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/01/tt2-site-editor-500x234.jpg" loading="lazy" width="2400" height="1124" src="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/01/tt2-site-editor.jpg" alt="Éditeur de site WordPress ouvert au modèle d'accueil. Le panneau des styles globaux est ouvert sur la droite avec des options de typographie, de couleurs et de mise en page." class="wp-image-128154" srcset="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/01/tt2-site-editor.jpg 2400w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/01/tt2-site-editor-300x141.jpg 300w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/01/tt2-site-editor-500x234.jpg 500w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/01/tt2-site-editor-768x360.jpg 768w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/01/tt2-site-editor-1536x719.jpg 1536w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/01/tt2-site-editor-2048x959.jpg 2048w " sizes="(max-width: 2400px) 100vw, 2400px" />Éditeur de site avec le panneau des styles globaux ouvert (à droite).

La première expérience avec l’éditeur de site peut être accablante. Certains préfèrent plonger directement, tandis que d’autres adoptent une approche différente. Quelle que soit la façon dont vous apprenez, je vous recommande de passer par le Conception de site simple avec édition complète du site cours de Learn WordPress. L’équipe de formation a créé un plan de 15 leçons qui vous explique tout ce que vous devez savoir. Ils disposent également d’un délai de six minutes atelier sur l’utilisation des styles globaux.

Utiliser l’éditeur de site peut être amusant, mais cela peut aussi être frustrant. Il s’agit essentiellement d’une “version 1.0” de la fonctionnalité. Il ne répondra pas aux besoins de tout le monde avec son lancement dans deux semaines. Il faudra un certain temps pour mûrir et pour que les auteurs de thèmes s’appuient dessus.

J’ai passé plus d’une décennie à créer des thèmes de manière professionnelle. L’une des questions les plus courantes que j’ai eues était: “Comment puis-je modifier la zone post-méta?” Les utilisateurs voudront supprimer l’auteur, déplacer la liste des catégories et faire de nombreuses autres choses. Aucune quantité d’options de thème ne couvrait chaque scénario. J’ai souvent eu recours à des non-codeurs pour apporter des modifications à leurs modèles de thème.

Sauf dans les cas les plus complexes, ce problème n’existe plus. Grâce à l’éditeur de site, les utilisateurs peuvent choisir ce qui apparaît.

Insertion d'une zone de signature personnalisée dans le bloc Query Loop de l'éditeur de site WordPress.  Sous le titre du message, apparaît le nom de l'auteur, la date et le lien des commentaires.
<img data-lazy-fallback="1" data-attachment-id="128153" data-permalink="https://wptavern.com/what-are-block-themes-what-you-need-to-know-before-wordpress-5-9/site-editor-post-meta" data-orig-file="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/01/site-editor-post-meta.jpg" data-orig-size="2400,1139" data-comments-opened="0" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="site-editor-post-meta" data-image-description="" data-image-caption="" data-medium-file="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/01/site-editor-post-meta-300x142.jpg" data-large-file="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/01/site-editor-post-meta-500x237.jpg" loading="lazy" width="2400" height="1139" src="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/01/site-editor-post-meta.jpg" alt="Insertion d'une zone de signature personnalisée dans le bloc Query Loop de l'éditeur de site WordPress. Sous le titre du message, apparaît le nom de l'auteur, la date et le lien des commentaires." class="wp-image-128153" srcset="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/01/site-editor-post-meta.jpg 2400w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/01/site-editor-post-meta-300x142.jpg 300w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/01/site-editor-post-meta-500x237.jpg 500w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/01/site-editor-post-meta-768x364.jpg 768w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/01/site-editor-post-meta-1536x729.jpg 1536w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/01/site-editor-post-meta-2048x972.jpg 2048w " sizes="(max-width: 2400px) 100vw, 2400px" />Message personnalisé byline/meta.

J’aurais aimé avoir un tel système il y a dix ans. Cela m’aurait épargné des heures de travail d’assistance.

Bien sûr, ceci est un exemple simple de ce qui est possible avec l’éditeur de site. Tout, de la modification de morceaux d’un modèle à la création d’une palette de couleurs personnalisée complète, est à quelques clics de souris de la réalité.

Cependant, les possibilités ne sont pas illimitées. Il y a des limitations que les utilisateurs rencontreront sans aucun doute à mesure qu’ils deviendront de plus en plus avancés avec des idées de conception. Les contributeurs ont fait d’énormes progrès pour préparer cette première version pour WordPress 5.9. Et, il y aura plus à venir.

La chose la plus choquante pour ceux qui ont été hors de la boucle sera probablement la disparition des écrans d’administration du personnalisateur, des widgets et des menus de navigation. Ces composants sont remplacés par l’éditeur de site lors de l’utilisation d’un thème de bloc.

Il existe certains problèmes connus liés au personnalisateur, tels que l’absence d’option CSS personnalisée, les aperçus en direct ou le paramètre d’icône de site. J’ai couvert cela dans plus de détails dans un post précédent.

Les menus de navigation sont désormais gérés via le bloc Navigation :

Bloc de navigation sélectionné et ouvert dans l'éditeur de site WordPress.
<img data-lazy-fallback="1" data-attachment-id="128152" data-permalink="https://wptavern.com/what-are-block-themes-what-you-need-to-know-before-wordpress-5-9/site-editor-nav-menu" data-orig-file="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/01/site-editor-nav-menu.jpg" data-orig-size="2400,880" data-comments-opened="0" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="site-editor-nav-menu" data-image-description="" data-image-caption="" data-medium-file="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/01/site-editor-nav-menu-300x110.jpg" data-large-file="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/01/site-editor-nav-menu-500x183.jpg" loading="lazy" width="2400" height="880" src="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/01/site-editor-nav-menu.jpg" alt="Bloc de navigation sélectionné et ouvert dans l'éditeur de site WordPress." class="wp-image-128152" srcset="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/01/site-editor-nav-menu.jpg 2400w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/01/site-editor-nav-menu-300x110.jpg 300w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/01/site-editor-nav-menu-500x183.jpg 500w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/01/site-editor-nav-menu-768x282.jpg 768w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/01/site-editor-nav-menu-1536x563.jpg 1536w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/01/site-editor-nav-menu-2048x751.jpg 2048w " sizes="(max-width: 2400px) 100vw, 2400px" />Sélection d’un menu de navigation.

Cela pourrait prendre un certain temps pour s’y habituer. Si je suis adepte du système de blocs, je préfère certes toujours gérer les menus via l’écran classique. Cependant, je commence à m’y retrouver. Les contributeurs qui ont travaillé sur le bloc ont rendu l’expérience bien meilleure qu’elle ne l’était il y a quelques mois à peine.

Quant aux barres latérales dynamiques et aux widgets, ils ont disparu, du moins au sens traditionnel. Tout est un bloc maintenant. Les auteurs de thèmes peuvent créer des colonnes ou des conteneurs qui ressemblent à des barres latérales du passé, mais ils sont tous gérés via l’éditeur de site. Et, les utilisateurs peuvent coller n’importe quel bloc qu’ils veulent n’importe où.

Catégorie: Opinion, Thèmes

— to wptavern.com


Retour à La Une de Logo Paperblog

A propos de l’auteur


Mycamer Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte

Magazines