DE{CODE} : Thèmes modernes et avenir de WordPress : Travailler avec l'édition complète du site et au-delà

WordPress 5.9 a introduit l'édition complète du site au cœur, signifiant un changement majeur dans la façon dont nous construisons des sites Web avec WordPress. Dans cette session DE{CODE}, rejoignez Nick Diego, WP Engine Developer Advocate, alors qu'il déballe ces modifications, ainsi que certaines façons de les exploiter pour créer de meilleurs sites Web, à la manière moderne de WordPress.

Diapositives de la session

Transcription du texte intégral

NICK DIEGO : Bonjour et bienvenue dans "Travailler avec l'édition complète du site et l'avenir de la thématisation moderne dans WordPress". Je m'appelle Nick Diego et je suis un défenseur des développeurs ici chez WP Engine. Donc, un peu sur moi - j'ai donc commencé à travailler avec WordPress en 2012. J'étais principalement un développeur de plugins, et depuis, j'ai fait beaucoup de choses avec des thèmes de blocs. En fait, j'ai rejoint WP Engine en novembre 2021, c'est donc une sorte de nouveau concert pour moi. Je suis passionné par les blocs et les modèles et tout ce qui concerne l'édition complète du site, c'est pourquoi je ne pourrais pas être plus excité de donner cette présentation aujourd'hui.

Alors, qu'est-ce que l'édition complète du site ? On en a beaucoup entendu parler ces dernières années. Il s'agit donc en fait "d'un ensemble de fonctionnalités qui apportent l'expérience familière et l'extensibilité des blocs à toutes les parties de votre site plutôt que de simples publications et pages". Il s'agit donc en fait d'un ensemble de fonctionnalités, qui incluent des éléments tels que l'éditeur de site, les styles globaux, les blocs de thème, les modèles et, bien sûr, les thèmes de bloc.

Donc, dans notre conversation d'aujourd'hui, nous allons couvrir quelques choses différentes. Nous allons commencer par les bases. Je veux m'assurer que nous sommes tous sur la même longueur d'onde, surtout du point de vue de la terminologie. Ensuite, nous allons parler de l'anatomie d'un thème de bloc, puis des styles globaux, des in-settings qui incluent le fichier theme.json. Et enfin, je vais partager mes réflexions sur les thèmes modernes et à quoi cela va ressembler.

Donc, dans la présentation d'aujourd'hui, nous allons utiliser un tas d'exemples différents, et ceux-ci proviendront du thème 2022, qui a été inclus dans WordPress 5.9 en janvier 2022. Il s'agit d'un thème de bloc qui a été développé par le Core L'équipe WordPress, et c'est un excellent point de départ, et il est disponible dans le référentiel de plugins, il n'y a donc pas de meilleur thème à utiliser pour les exemples.

Donc, alors que nous commençons aujourd'hui, encore une fois, nous allons commencer par les bases. Et il n'y a rien de plus basique qu'un bloc. Donc, si vous utilisez WordPress depuis quelques années, vous connaissez probablement très bien les blocs. Ils constituent l'unité de contenu fondamentale de WordPress. Il peut s'agir d'un paragraphe de texte dans une galerie d'images. Il peut prendre presque n'importe quelle forme. Et l'idée derrière l'édition complète du site est que, bientôt ou maintenant, tout sur votre site Web sera un bloc. Nous en discuterons plus sur la façon dont cela fonctionne.

Maintenant, nous avons ici un exemple d'un tas de blocs différents qui sont actuellement dans WordPress. Les deux colonnes de gauche doivent vous être familières. Nous avons des paragraphes et des titres et des blocs de couverture - ainsi de suite et ainsi de suite. Dans la version 5.9 - encore une fois, qui a été publiée cette année - nous avons maintenant ce qu'on appelle des blocs thématiques. Ce sont des blocs qui sont du contenu que, traditionnellement, vous ne pourriez pas modifier directement depuis WordPress.

Ceux-ci incluent des éléments tels que le logo de votre site, la boucle de requête, l'extrait de publication, l'auteur de la publication. Ce sont tous les types de contenu dont vous auriez besoin pour plonger dans vos fichiers de modèle basés sur PHP et coder directement ou utiliser un plugin tiers qui vous a aidé à modifier ces zones. Et ceux-ci arrivent tous ou sont arrivés sur WordPress et permettent aux utilisateurs de les modifier directement, et ils prennent tous la forme d'un bloc.

Ensuite, nous voulons parler de modèles. Les modèles sont en quelque sorte la pierre angulaire de l'expérience d'édition complète du site. Les modèles pourraient être une conversation en eux-mêmes, mais nous allons vous donner un petit aperçu des modèles si vous n'êtes pas familier. Encore une fois, un motif n'est qu'une collection prédéfinie de blocs qui forme une disposition spécifique. Un motif peut être un bloc unique avec un certain style. Il peut s'agir de plusieurs blocs.

Les modèles permettent aux utilisateurs, en un seul clic, d'insérer une conception entière directement dans leur site, plutôt que d'avoir à créer la conception manuellement, un bloc à la fois, ce qui peut vraiment accélérer le développement d'un site. C'est aussi très utile si vous vous souvenez - vous voyez cette belle démo de site Web, et elle contient tout ce contenu. Et vous installez le thème, et c'est comme, eh bien, comment puis-je obtenir cette démo ? Les modèles résolvent cela pour vous, car l'auteur du thème peut fournir tout un tas de mises en page ou de conceptions individuelles qui, en un seul clic, un utilisateur peut insérer et obtenir la démo qu'il a vue et qui l'a attiré lorsqu'il a choisi le thème.

Jetons donc un coup d'œil rapide à un modèle ici. Nous avons juste un titre simple, du texte et des boutons. Et cela peut être, encore une fois, inséré d'un simple clic dans la page, et nous voyons ici qu'il est composé de trois blocs différents, un bloc d'en-tête, un bloc de paragraphe et un bloc de boutons.

Maintenant, avec la version 5.9, encore une fois, qui est sortie cette année, nous avons vu l'introduction du Pattern Explorer. Ainsi, le thème 2022, que j'ai mentionné plus tôt, celui que nous utilisons dans tous nos exemples, s'appelle le thème Hatchery - beaucoup d'oiseaux. Et vous pouvez voir ici dans l'explorateur de modèles, nous avons un tas de conceptions différentes que les auteurs du thème ont créées.

Donc, en tant qu'utilisateur, je peux insérer n'importe lequel d'entre eux directement dans le site, et j'obtiens la même esthétique pour laquelle l'auteur du thème a conçu le thème, donc sa série de conférenciers, des oiseaux côte à côte - tout ce que vous voulez. Et les modèles, et les modèles qui sont servis avec un thème, sont très importants pour cette expérience d'édition complète du site.

Ensuite, nous avons l'éditeur. Nous ne pouvons pas ne pas parler de l'éditeur. Si vous utilisez WordPress, vous êtes probablement très familier avec cela. Mais je tiens à le mentionner parce que l'éditeur a porté de nombreux noms différents dans le passé - Block Editor, Gutenberg, The Gutenberg Editor. Pour les besoins de cette discussion, nous allons simplement appeler l'éditeur. C'est son nom officiel, et c'est ce que vous voyez ici. Encore une fois, cela a été réintroduit dans WordPress 5.0 fin 2018.

Ainsi, dans l'éditeur, il vous suffit de cliquer sur l'Inserteur et vous pouvez insérer vos blocs et motifs. Maintenant, je voulais montrer l'écran car nous devons ensuite parler de l'éditeur de site. Finalement, le préfixe de site de l'éditeur de site disparaîtra probablement, et nous n'aurons plus que l'éditeur. Mais l'éditeur de site est une expérience cohérente qui vous permet de modifier et de naviguer directement entre différents modèles, éléments de modèle, options de style, etc.

Donc, fondamentalement, l'éditeur de site prend notre éditeur standard auquel nous nous sommes habitués au cours des dernières années et le fait passer au niveau supérieur en permettant aux utilisateurs de modifier des zones supplémentaires de votre site Web qui sont désormais toutes alimentées par des blocs. Ainsi, WordPress 5.9 a introduit l'édition complète du site et, avec cela, l'éditeur de site. Et dans la version 6.0, qui sortira en mai, nous allons voir beaucoup d'améliorations à cela, ce qui est très excitant.

Donc, si vous utilisez un thème de bloc comme 2022, vous pourrez accéder à l'éditeur de site. Il y a deux manières différentes, la barre latérale supérieure, puis sous la section apparence. Maintenant, l'éditeur de site, encore une fois, parce qu'il fait partie du– il est très puissant, il n'est disponible que pour les administrateurs. Alors ne vous inquiétez pas, les éditeurs, ils ne pourront pas accéder à l'éditeur du site. Vous devez être administrateur pour accéder à l'éditeur de site.

Et une fois que nous sautons ici, cela ressemble beaucoup à l'éditeur standard, mais vous remarquerez quelque chose d'un peu différent. En haut ici, nous avons Accueil. Et cela nous indique que nous sommes en train de modifier le modèle home.HTML, et que nous avons deux zones différentes de la page que nous pouvons modifier séparément. Comme vous pouvez le voir ici, nous avons l'en-tête et le pied de page.

C'est donc quelque chose que vous ne pouviez jamais faire auparavant. Vous ne pourriez jamais éditer le home.PHP, mais maintenant le modèle HTML directement depuis l'interface, non sans une autre extension tierce.

Et si nous cliquons sur la page et la vue de liste, nous pouvons voir que nous avons une boucle de requête. Encore une fois, ces thèmes de construction familiers sont probablement très, très, très familiers avec la construction de boucles dans des modèles de thèmes, mais ici, nous pouvons le faire avec des blocs utilisant la boucle de requête. Et nous pouvons également voir certains de ces autres blocs thématiques comme le titre de la publication, l'image en vedette, l'extrait de publication et la date de publication. Tout cela peut être déplacé et modifié par l'utilisateur depuis l'interface sans aucun codage nécessaire.

Maintenant, si vous cliquez sur une petite icône WordPress ou une icône de site, nous pouvons obtenir cette barre latérale. Et puis nous pouvons voir que nous avons accès à tous nos modèles et parties de modèle. Maintenant, je tiens à noter que le flux - tous ces écrans sont en cours de développement. L'édition complète du site est toujours en version bêta, et il y a beaucoup de raffinement et d'amélioration à venir. Donc, ce que nous voyons aujourd'hui ne sera peut-être pas le même dans six mois, mais c'est un début fantastique.

Donc, si nous descendons aux modèles, nous pouvons voir tous les modèles inclus avec 2022. Vous devriez voir certains modèles familiers comme Page et Index et Accueil et 404. Et puis, si nous allons dans nos parties de modèle, nous pouvons voir des modèles personnalisés. les parties du modèle qui ont été incluses par les auteurs du thème. Nous avons donc quelques en-têtes différents et nous avons un pied de page.

Encore une fois, tous ces éléments sont modifiables par l'utilisateur. Et donc, si nous voyons ce petit point minuscule ici, nous pouvons voir que cette partie du modèle d'en-tête a été modifiée par moi. Désormais, lorsque vous modifiez une partie de modèle ou un modèle, ces modifications sont enregistrées dans la base de données. Ils ne modifient pas réellement les modèles de votre thème, ce qui est très bien car vous pouvez toujours revenir aux modèles de thème ou aux parties de modèle.

Mais encore une fois, si nous cliquons ici, nous pouvons commencer à modifier cette partie du modèle d'en-tête, et vous verrez que tous ces éléments sont constitués de blocs. C'est donc la même expérience que vous utiliseriez dans l'Éditeur lors de la modification d'un article ou d'une page. Vous pouvez le faire maintenant dans l'éditeur de site pour tous vos modèles et parties de modèle.

C'était donc un rapide aperçu de l'éditeur de site et de son fonctionnement, mais maintenant je veux parler de l'anatomie d'un thème de bloc, qui est le principal composant fondamental de l'édition complète du site. Alors, comment fonctionne l'anatomie d'un thème de bloc ? Eh bien, il est en fait divisé en deux catégories différentes. Nous avons donc des thèmes de blocs. Ils adoptent pleinement l'édition complète du site. Les modèles de thème sont entièrement composés de blocs. Les modèles et les parties de modèle sont HTML plutôt que PHP.

Et puis je tiens à noter qu'un thème de bloc peut être très simple. Tout ce qu'il doit faire est de se composer d'un fichier style.CSS et d'un fichier index.html, ainsi que d'un fichier index.PHP. Ce fichier PHP est une sorte de vestige du développement de thème WordPress traditionnel et disparaîtra probablement à l'avenir.

Et enfin, la plupart des thèmes de blocs incluent un fichier theme.JSON. Nous en parlerons séparément. C'est un sujet très important concernant les paramètres et les styles globaux. Examinons donc la structure du fichier de thème. Il s'agit donc de 2022, une version abrégée de la structure de fichiers à l'intérieur de 2022. Et nous pouvons voir ces fichiers requis ici.

Ensuite, nous remarquons également qu'il existe certains dossiers, à savoir les modèles et les parties de modèle. Dans chacun de ces dossiers, vous avez tous les fichiers HTML pour chaque modèle et partie de modèle. Ce qui n'est pas visible ici, ce qui est en fait vraiment excitant, donc je voulais le faufiler, Gutenberg, le plugin Gutenberg, où toute cette future édition complète du site de développement est en cours, a en fait récemment introduit un nouveau dossier appelé Patterns. Ainsi, vous pouvez réellement placer vos fichiers de modèles directement dans le dossier Pattern, et WordPress les enregistrera pour vous. Juste un aperçu. Je vous encourage fortement à consulter Gutenberg et toutes les nouvelles fonctionnalités.

Mais revenons à la diapositive ici. Nous avons nos modèles et nos parties de modèle. Et vous pouvez voir les fichiers HTML individuels pour chacun. Maintenant, pour mieux comprendre comment cela fonctionne, nous allons jeter un œil au fichier 404.HTML. Il s'agit d'un fichier ou d'une page de votre site que vous ne pourrez jamais modifier directement, à moins de plonger dans le code ou d'utiliser une ressource tierce qui vous permettrait de modifier ce modèle.

Donc, en revenant à l'éditeur de site, nous pouvons voir que notre page 404 est ici. Si nous cliquons dessus, l'utilisateur peut maintenant modifier les différents composants de ce modèle. Cependant, regardons quel code HTML réel compose ce modèle, le code qui se trouve réellement dans le thème.

Donc ici, nous pouvons voir que nous avons notre fichier 404.HTML, et il contient un tas de balisage. En commençant par le haut et le bas, nous voyons que nous avons la spécification d'un bloc de pièce de modèle. Ce que cela fait, c'est référencer nos pièces de modèle enregistrées et les insérer dans le modèle. Donc, si nous revenons ici, nous pouvons voir que nous avons une partie footer.HTML et une partie header.HTML. Et c'est ce qui est référencé ici.

Il s'agit donc d'un bloc unique qui vous permet d'extraire des modèles composés d'autres blocs. Maintenant, bien sûr, vous pouvez simplement inclure tous les blocs qui constitueraient un en-tête et tous les blocs qui constitueraient un pied de page, mais en référençant la partie de modèle, vous pouvez tout faire au même endroit, puis appliquer cette même partie de modèle sur tous vos modèles, similaire à ce que vous feriez dans un WordPress traditionnel avec PHP.

Maintenant, en regardant plus loin, nous avons un balisage, juste un balisage principal, puis nous avons un div. Je ne vais pas trop m'étendre là-dessus. Il se passe des choses intéressantes ici, à savoir la mise en page ici, c'est vrai, qui fait certains paramètres de mise en page, mais ce n'est qu'un balisage général pour la page, le modèle 404.

Maintenant, j'ai mentionné le modèle. Le 404 de ce thème est en fait regroupé dans un motif. Ainsi, tous les blocs qui composent le contenu 404 sont dans un modèle. Et puis nous avons un bloc de modèle qui fait en fait référence à ce modèle et qui tire ensuite ces blocs. Maintenant, bien sûr, encore une fois, vous pouvez simplement inclure tous les blocs qui composent la page 404 ici, mais en les plaçant dans un modèle, puis en les référençant, cela facilite un peu la gestion.

Ainsi, lorsque nous revenons à l'éditeur de site, nous avons notre contenu et nous pouvons voir les différentes sections. Donc, la partie supérieure est cette partie de modèle d'en-tête qui est insérée. Et puis, évidemment, la section principale est ce modèle 404 qui est inséré. Et maintenant, parce que ce sont tous des blocs, tout ce que nous avons à faire est de les éditer comme nous le ferions normalement . Nous pouvons le rendre audacieux. On pourrait changer la couleur. Nous pourrions supprimer des blocs, ajouter des blocs - ainsi de suite et ainsi de suite.

Assez facile, et nous n'avons pas du tout eu besoin de modifier le code. Nous avions besoin de comprendre comment le code fonctionnait, mais nous n'avions pas besoin de toucher à quelque code que ce soit. Ensuite, lorsque nous sommes satisfaits, nous cliquons simplement sur Enregistrer. Encore une fois, ces modifications sont enregistrées dans la base de données, vous ne modifiez donc pas réellement les fichiers de thème. Donc, si nous devions annuler les modifications, nous reviendrions à tout ce que le thème propose.

L'un des avantages de l'éditeur de site également - et encore une fois, il est encore en cours de développement - est que vous pouvez ajouter de nouvelles parties de modèle. Encore une fois, ce thème ajoute un tas d'en-têtes et de pieds de page différents, mais que se passerait-il si nous voulions en ajouter plus ? Peut-être que nous voulions une barre latérale. Peut-être que nous voulions différentes sections de contenu. Nous pouvons le faire directement dans l'éditeur de site.

Et encore une fois, ce flux va être amélioré - plus de fonctionnalités, plus de fonctions. Mais il est actuellement fonctionnel et vous pouvez tout ajouter ici. Une chose à noter est que vous ne pouvez pas encore ajouter de modèles dans l'éditeur de site. Vous pouvez le faire dans une interface différente à l'intérieur de l'éditeur WordPress, mais pas encore dans l'éditeur de site. Mais cela viendra.

Donc, le dernier élément de ceci est que nous avons parlé de faire tous ces changements. Eh bien, que diriez-vous si vous pouviez simplement exporter toutes vos modifications sous la forme d'un seul thème à venir et qu'il est en fait très intéressant de voir comment cela affectera le développement du thème. Ainsi, avec la dernière version de Gutenberg, vous pouvez désormais exporter toutes vos modifications, ainsi que le thème d'origine.

Ils sont fusionnés et vous pouvez l'exporter en tant que nouveau thème avec toutes vos modifications appliquées aux fichiers du thème. Vous pouvez donc imaginer prendre 2022. Vous le téléchargez. Vous apportez toutes vos modifications. Vous pouvez modifier certains modèles, puis exporter un thème complet. Cela a des implications très intéressantes pour le développement futur du thème.

Nous devons maintenant parler des paramètres et des styles globaux. C'est ce fichier theme.JSON. C'est tout nouveau sur WordPress et aussi excitant que délicat. Donc, si nous regardons en arrière sur le thème 2022, nous pouvons voir ce fichier assis en haut là-bas. Et lorsque nous sautons dans le fichier theme.JSON, il s'agit en réalité de cinq sections, l'une n'étant que le numéro de version.

Et je parlerai brièvement des modèles personnalisés et des parties de modèle. C'est donc là que, si vous aviez un modèle personnalisé, un modèle entièrement personnalisé, un modèle que WordPress ne reconnaîtrait pas naturellement, c'est là que vous pouvez l'enregistrer ici. C'est également là que vous enregistrez toutes ces parties de modèle comme les en-têtes et les pieds de page. N'importe quel modèle traditionnel, comme Index, Page, Post - ces modèles que WordPress reconnaît généralement - vous n'avez pas besoin de mettre ici, juste des modèles personnalisés et, bien sûr, vos propres parties de modèle.

Mais la viande de theme.JSON est votre section de paramètres et de style. Donc, si nous examinons d'abord les paramètres, il se passe beaucoup de choses ici. Et encore une fois, c'est très abrégé. Mais la partie supérieure sont les paramètres globaux. Ce sont des paramètres qui ont un impact sur l'éditeur de site et l'éditeur sur l'ensemble de votre site. Ceux-ci incluent des éléments tels que la bordure, la couleur et la typographie. C'est là que vous définiriez la palette de couleurs de votre thème, les paramètres de typographie de votre thème, les polices, etc.

Et puis nous avons également des paramètres au niveau du bloc, où vous pouvez, par exemple, définir une palette de couleurs pour l'ensemble de votre site, mais ensuite définir une palette de couleurs plus petite et une palette de couleurs complètement différente, par exemple, pour le bloc de paragraphes ou le bloc de boutons. Il offre donc une grande flexibilité, mais les paramètres sont les fonctionnalités disponibles pour un utilisateur dans l'éditeur ou dans un bloc.

Donc si on regarde, encore une fois, la couleur, on a défini ici notre palette. Nous avons une couleur de premier plan, un arrière-plan, puis le primaire, le noir, le blanc et une sorte de vert forêt. Et puis, si nous allons dans l'éditeur, nous pouvons voir que lorsque notre sélecteur de couleurs apparaît, nous avons défini ces couleurs pour qu'un utilisateur puisse les sélectionner.

Passons maintenant au style. Les styles sont donc fondamentalement comme votre CSS. Donc, traditionnellement, vous additionnez tous vos CSS dans un fichier styles.CSS ou une autre configuration. Mais la section styles de theme.JSON vous permet de définir le style au niveau du bloc et également au niveau global dans l'ensemble de votre thème. Considérez-les comme des valeurs par défaut, n'est-ce pas, parce que l'éditeur - le but est que les utilisateurs puissent y entrer et commencer à modifier et à apporter des modifications et concevoir leur site comme ils le souhaitent en utilisant des blocs.

Mais il doit y avoir une valeur par défaut, et celles-ci sont définies dans la section style de theme.JSON est cette valeur par défaut. Encore une fois, nous avons les styles globaux, un peu comme nos couleurs globales, la typographie globale, et nous pouvons également définir des styles au niveau du bloc. Donc, la chose à propos des styles globaux est que nous définissons la couleur d'arrière-plan de notre thème. C'est là que nous définirions les tailles de police pour nos en-têtes, les différentes options de typographie pour les liens, le texte, les en-têtes et tout ce genre de choses. Et au niveau du bloc, nous pouvons faire la même chose mais spécifiquement pour les blocs.

Maintenant, l'une des choses intéressantes à propos de la section des paramètres dont nous venons de parler est que chaque fois que vous créez un paramètre, WordPress définit une variable. Ainsi, lorsque nous examinions cette palette de couleurs, nous avons défini l'arrière-plan, le premier plan et le primaire. WordPress va en fait générer une variable qui correspond à ce code hexadécimal, quel que soit le code hexadécimal défini pour le primaire, le premier plan et l'arrière-plan.

Dans les styles, nous pouvons utiliser ces variables pour définir les styles pour les styles globaux et au niveau du bloc. L'avantage de ceci est que si jamais un utilisateur devait changer la couleur d'arrière-plan, cela passerait par la spécification de style dans theme.JSON. Maintenant, si nous jetons un coup d'œil à la section des blocs, nous avons ici notre bloc de boutons, et nous l'avons d'un concepteur de thème.

Je voulais que mes boutons aient une couleur verte par défaut avec du texte blanc. Vous pouvez voir que dans la section couleur du bloc de boutons, nous définissons la couleur d'arrière-plan comme primaire, qui est ce vert forêt, et notre texte est l'arrière-plan, qui est blanc. Nous pouvons donc utiliser ces variables dans theme.JSON pour définir des styles pour nos blocs et pour le site lui-même.

Maintenant, cela est lié aux styles mondiaux, auxquels j'ai fait allusion plus tôt. Donc, de retour dans l'éditeur de site, si nous cliquons sur ce petit cercle bicolore en haut, nous allons ouvrir notre panneau de styles globaux. Maintenant, il se passe beaucoup de choses ici, donc je vais juste faire une démonstration rapide de la façon dont cela fonctionne. Mais sachez que je vous encourage à aller télécharger le thème 2022 ou un autre thème de bloc et à vraiment explorer les styles globaux.

Et si nous sautons ici et regardons les couleurs, cliquez dessus, maintenant nous pouvons voir que la palette de couleurs est là, celle qui est fournie par le thème, ainsi que certains éléments différents, tels que notre arrière-plan, texte et liens . Maintenant, sur ce panneau que nous regardons ici, nous éditons les éléments globaux du site. Ainsi, par exemple, nous avons parlé de l'arrière-plan du site. En ce moment, c'est blanc. Donc, si je clique sur Arrière-plan, je peux entrer ici et je peux voir qu'il est sélectionné en blanc. C'est la couleur que nous avons définie dans theme.JSON.

Et si j'aimais vraiment cette couleur pêche ? Eh bien, d'un simple clic, je peux cliquer, et c'est parti. La couleur de fond de notre site est désormais pêche. Cela donne donc à l'utilisateur un contrôle sans précédent pour modifier complètement son site en fonction de ses besoins. Mais encore une fois, theme.JSON fournit la valeur par défaut que, en tant que développeur de thème, vous fournissez à l'utilisateur, puis il peut le prendre à partir de là.

C'était donc un très bref aperçu de l'édition complète du site et de l'éditeur de site et des thèmes de blocs. Mais je veux prendre un peu de temps et parler de mes réflexions sur l'avenir de la thématisation moderne. Ainsi, lorsque nous pensons à la thématisation moderne, la thématisation moderne, je crois, va mettre l'accent sur la conception plutôt que sur le développement. Maintenant, vous pensez peut-être que la conception de thèmes est toujours une question de design.

Mais si vous repensez au développement de thème traditionnel, il y avait beaucoup de codage réel à faire. Tous les fichiers de modèle étaient PHP, ce qui nécessitait une connaissance importante de WordPress ainsi que du développement PHP pour faire et réussir. Eh bien, c'est en train de changer. Nous voyons que maintenant qu'avec l'éditeur, vous pouvez concevoir des thèmes directement dans l'interface utilisateur de l'éditeur de site et de l'éditeur traditionnel.

Et cela va jouer un rôle majeur dans la façon dont nous concevons les thèmes. Je suis donc un développeur défenseur de WP Engine, et dans notre équipe, nous construisons un thème expérimental appelé Frost. Et lorsque nous créons un nouveau motif ou que nous voulons modifier un modèle, nous n'allons pas dans les fichiers et ne peaufinons pas les fichiers. Nous entrons dans l'éditeur de site ou allons dans l'éditeur et modifions ce modèle, ou créons un modèle, ou créons un modèle. Et puis nous en sommes satisfaits, nous l'exportons puis l'intégrons au thème.

Nous ne codons donc pas réellement. En fait, nous faisons tout visuellement. Et l'avantage de cela est que nous savons qu'un utilisateur, les personnes qui vont utiliser le thème, vont également être là pour peaufiner le modèle ou peaufiner le modèle. Et il est donc logique que, pendant que nous construisons le thème, nous fassions le même processus qu'un utilisateur ferait pour utiliser le thème, ce qui, je pense, est un peu magique.

Et cela va conduire à une méthode de développement de thème low-code ou même sans code. Maintenant, bien sûr, nous sommes à une conférence de développeurs, n'est-ce pas ? Et donc on parle de no code et de low code. Mais mon dernier point, nous allons parler de là où je pense que le développement se situe. Mais je pense que c'est vraiment excitant parce que cela va attirer une nouvelle génération d'utilisateurs, des gens qui veulent créer leur propre thème, personnaliser leur propre thème, mais peut-être qu'ils ne connaissent pas PHP, peut-être qu'ils ne connaissent pas JavaScript .

Ils peuvent tout faire maintenant dans l'éditeur de site, ce qui, je pense, est un peu la philosophie de WordPress, démocratisant l'édition. Et je pense que l'édition complète du site s'efforce vraiment d'atteindre cet objectif. Et au cours des deux dernières années ou de l'année dernière, franchement, nous avons vu de tels progrès avec l'édition complète du site. Ça devient assez excitant. Je crois donc vraiment que l'édition complète du site est l'avenir de WordPress traditionnel.

Maintenant, ce n'est peut-être pas pour tout le monde. Je veux que cela soit très clair. Et il y a encore beaucoup de développement à faire. Ainsi, lorsque nous parlons de différents types de personnes utilisant WordPress, nous avons tout, de l'utilisateur standard jusqu'aux agences. Et les agences voudront peut-être fournir une interface très propre et très structurée pour que leurs clients puissent utiliser et travailler sur leurs sites Web. Ce n'est peut-être pas une édition complète du site. Je pense que c'est OK.

Mais comme nous le voyons dans l'économie, nous avons Squarespace, et Wix, et Element, ou d'autres constructeurs de pages. Il y a un énorme contingent de la communauté Web d'utilisateurs qui veulent un outil qui leur permet et leur donne les moyens d'éditer et de concevoir leur propre site. Et je pense que WordPress a vraiment manqué à WordPress, en particulier à Core. Et je pense que c'est le but de l'édition complète du site et c'est en quelque sorte la promesse de l'édition complète du site.

Donc beaucoup à faire. Encore une tonne à faire. Encore beaucoup de choses que nous devons comprendre, à savoir des choses comme les contrôles réactifs et comment restreindre les différents composants de l'interface utilisateur afin que certains utilisateurs ne gâchent pas les conceptions ou ne modifient pas les choses qu'ils ne devraient pas. Donc encore beaucoup de choses à comprendre.

Mais l'un des domaines qui, à mon avis, est vraiment passionnant, est le développement de l'édition complète du site. Maintenant que nous avons cet outil qui permet aux utilisateurs de concevoir leur propre thème ou de concevoir leur propre site, nous devons commencer à réfléchir à la manière dont nous pouvons passer au niveau supérieur. En tant que développeurs, comment pouvons-nous en tirer parti ? Si nous repensons à WordPress traditionnel, prenons l'écran des widgets - les widgets en général. WordPress a fourni un niveau très basique de widgets et de fonctionnalités, et les développeurs ont créé toutes sortes d'extensions.

Et je pense que la même idée doit être appliquée à l'édition complète du site. À l'heure actuelle, il existe très peu d'extensions et de plug-ins, voire aucun, qui exploitent réellement l'édition complète du site et l'amènent au niveau supérieur. WordPress va continuer à itérer sur l'édition complète du site, et il arrivera à un point. Mais cela ne fera jamais tout ce que tout le monde veut, et je pense qu'il est maintenant temps de s'intéresser sérieusement à l'édition complète du site et de commencer à réfléchir aux façons dont nous pouvons construire en plus de cela en tant que développeurs et vraiment apporter cette expérience à la prochaine niveau.

Je mets donc tout le monde au défi de sortir, d'explorer Gutenberg, d'essayer le thème 2022 et de l'installer, de commencer à apprendre le développement de blocs. Il existe une quantité incroyable d'opportunités pour les blocs de niche. Et essayez de créer votre propre thème. Essayez de prendre 2022. Essayez de le modifier. Essayez de créer votre thème de base. C'est vraiment agréable, et il y a tellement de potentiel là-bas pour ce genre de choses.

Je veux donc m'arrêter là et vous remercier d'être venu. Et avant de partir, je veux parler de quelques ressources qui, à mon avis, sont vraiment importantes, surtout si cette présentation, si vous êtes nouveau dans l'édition de sites complets et que vous voulez en savoir plus. Alors encore une fois, vous pouvez, bien sûr, me suivre. Je tweete à ce sujet tout le temps.

Mais il y a quelques ressources. Donc le premier est Frost. J'y ai fait allusion plus tôt. C'est donc un thème que les relations avec les développeurs de WP Engine sont en train de construire. Et c'est un produit expérimental. Je ne devrais pas dire produit. C'est une expérience, où nous essayons de l'utiliser pour éduquer la communauté sur la façon de créer des thèmes de blocs. Nous apprenons en cours de route. Nous apportons beaucoup de modifications et de mises à jour en cours de route, en essayant de rester à jour avec WordPress, mais c'est une excellente ressource. Aussi, encore une fois, ce thème 2022 - un endroit fantastique pour commencer et apprendre.

Ensuite, je veux brancher Learn WordPress. C'est learn.wordpress.org. L'équipe de formation de wordpress.org fait beaucoup de travail pour essayer d'éduquer et d'apporter beaucoup de ces concepts au public. Donc, si vous êtes intéressé et que vous voulez en savoir plus, c'est un endroit fantastique. Nous avons des ateliers et toutes sortes de contenus différents là-bas, y compris des espaces d'apprentissage social. Ceux-ci ont lieu chaque semaine, où nous parlons de différents sujets, plongeons profondément dans la façon de coder un bloc pour construire un thème de bloc - ainsi de suite et ainsi de suite.

Et puis, bien sûr, si vous êtes intéressé par le développement, commencez toujours par le manuel de l'éditeur de blocs. C'est là que j'ai commencé, et il y a tellement de ressources formidables. Et puis enfin, Gutenberg. Si vous n'êtes pas familier avec Gutenberg, je vous encourage à vous familiariser avec Gutenberg, surtout si vous êtes intéressé par le développement WordPress. Et c'est un endroit idéal pour plonger, explorer comment l'édition complète du site est construite, comment différents blocs sont construits et comment vous pouvez l'appliquer à vos propres flux de travail.

Alors merci beaucoup d'être venu. J'espère que cette présentation vous a beaucoup plu et que vous êtes encouragé à continuer à explorer l'édition complète du site. Merci beaucoup.