Gestion et création de modèles de pointe

Ceux qui maîtrisent les modèles de blocs seront fortement positionnés pour diriger le nouveau paradigme de conception, de construction et de mise à l'échelle de WordPress.

Regardez cette session pour découvrir comment vous pouvez tirer parti des dernières fonctionnalités de patrons, ainsi que d'un nouvel outil passionnant qui améliore l'expérience de gestion des patrons pour les indépendants et les agences.

Haut-parleurs:

• Michael Day, ingénieur React chez WP Engine
• Phil Johnston, ingénieur logiciel senior chez WP Engine

Diapositives de la session :

Transcription:

PHIL JOHNSTON : Bonjour. Je m'appelle Phil Johnston et je suis ingénieur logiciel senior chez WP Engine. Et moi-même et mon coéquipier Mike Day allons parler de la gestion et de la création de modèles de pointe dans WordPress.

Il y a donc beaucoup de choses nouvelles et intéressantes qui ont été ajoutées à WordPress ces derniers temps. Et l'un d'eux est les modèles. Et je vais parler de ça. Les motifs sont faits de blocs. Alors plongeons-y dedans.

Vous utiliseriez des blocs dans l'éditeur de blocs qui est le tableau de bord WordPress. C'est là que vous iriez pour créer quelque chose comme un article de blog ou une page et où vous pouvez commencer à écrire ou à créer. Et c'est l'endroit où vous utiliseriez des blocs.

J'ai donc pu emprunter des blocs LEGO à mes enfants pour cette conférence. Donc, pour aider à illustrer cela, lorsque vous regardez la page ici où il est dit que je suis un bloc de titre, vous pouvez le considérer comme un bloc LEGO. Et puis en dessous où il est dit que je suis un bloc de paragraphe, vous pouvez considérer cela comme un autre bloc que vous avez coupé en dessous et ainsi de suite et ainsi de suite.

Vous avez un autre bloc de titre en dessous. Vous pouvez donc cliquer dessus. Et ensuite, vous pouvez commencer à créer votre page comme vous le souhaitez. Et vous pouvez réorganiser ces blocs simplement en cliquant, en faisant glisser ou en réorganisant. Et puis vous pouvez remonter votre page très facilement de cette façon car elles sont toutes bloquées.

Bien que cela soit très simple pour quelque chose comme un article de blog, et vous pouvez simplement plonger directement dans l'éditeur et commencer à le faire sans même savoir qu'il s'agit de blocs, mais vous pouvez également créer une disposition de blocs beaucoup plus complexe comme ce que vous ' re voir ici. Vous avez donc ici une mise en page à trois colonnes avec trois images. Et au-dessus de cela, vous avez en fait une colonne pleine largeur. Et il s'étend sur ces trois colonnes. Et puis trois blocs d'image, trois exemples de blocs d'en-tête, trois blocs de paragraphe, puis trois blocs de bouton en dessous.

Encore une fois, les blocs WordPress sont comme LEGO. Vous pouvez les assembler pour créer une mise en page simple comme la première que j'ai montrée ou une mise en page plus complexe comme celle que vous regardez ici. Et donc j'ai mis en surbrillance les blocs que vous pourriez vous attendre à voir sur une page comme celle-ci en rouge. Vous pouvez donc voir que le premier est entouré d'un cadre rouge. [S'ÉCLAIRE LA GORGE] Excusez-moi. Et cela représente un bloc. Et puis en dessous, vous avez un autre bloc contenant du texte Lorem ipsum, puis trois blocs d'image comme je l'ai mentionné, trois blocs d'en-tête, trois blocs de paragraphe en dessous et trois blocs de boutons.

Vous pourriez penser que c'est tout ce qu'il faut pour faire une mise en page comme celle-ci, mais c'est en fait un peu plus complexe que cela. Donc ici sur cette diapositive, j'ai mis en évidence les blocs invisibles, les blocs que vous ne pouvez pas voir. Ce sont des blocs qui doivent être sur la page pour définir où les choses doivent s'asseoir, comme le fait qu'il y a trois colonnes au lieu d'une colonne.

Ainsi, les blocs invisibles, bien que puissants, sont également très difficiles à plonger pour un utilisateur moyen et à commencer à les utiliser. Lorsque vous déplacez votre souris dans l'éditeur de blocs, vous ne saurez pas qu'il y a des blocs invisibles car ils sont invisibles. Et tous ces blocs ont également des contrôles complexes qui les accompagnent. Par exemple, voici l'un des blocs de colonnes.

Et si vous regardez sur le côté droit, vous pouvez voir toutes les commandes complexes qui accompagnent celles qui ne sont pas très faciles ou intuitives à comprendre. Des éléments tels que les blocs internes utilisent la largeur du contenu, le rembourrage ou l'espacement des blocs. L'utilisateur moyen ne saura pas ou ne comprendra pas ce que font ces paramètres. Et c'est un peu comme moi si j'entrais dans une cuisine et que je voyais tout un tas d'épices.

Je ne suis pas un grand cuisinier. Et donc j'aurais un tas d'épices sur la grille comme ça. Et je ne saurais pas les combiner ni les utiliser car je n'ai pas pris le temps de devenir chef. Et tout comme il faut du temps pour devenir un chef cinq étoiles et cuisiner un bon et délicieux repas, cela prend du temps et il y a une courbe d'apprentissage difficile avec l'éditeur de blocs et comprendre quels blocs utiliser à quel moment pour faire quelque chose qui a l'air bien ou qui a du goût bien.

Et c'est donc une spécialité. C'est un métier qu'il faut développer. Ainsi, l'utilisateur moyen va se retrouver dans l'éditeur de blocs avec une ardoise vide comme ce que vous voyez ici. Et ils ne sauront pas qu'ils doivent utiliser un bloc de colonnes, ou comment utiliser ce bloc, ou quoi mettre à l'intérieur de ce bloc, essentiellement les épices qu'ils doivent combiner pour créer quelque chose qui a vraiment fière allure.

Ils pourraient trouver cela frustrant. Ils pourraient trouver cela fastidieux et difficile d'obtenir ce qu'ils veulent. Et même s'ils apprennent toutes ces complexités de blocs, ils n'ont peut-être tout simplement pas de compétences en conception. Ainsi, bien que puissants, les blocs peuvent être difficiles à utiliser. Et c'est pourquoi le concept de motif a été inventé.

Donc, chez WP Engine, nous avons construit un plugin appelé Atomic Blocks. Et dans Atomic Blocks, nous avons essentiellement proposé le concept de motif, mais nous les avons appelés sections et mises en page. Et c'est exactement le même concept. Et WordPress Core s'est en fait inspiré d'Atomic Blocks pour le concept de ce qui se trouve maintenant dans WordPress Core et s'appelle des modèles.

Ainsi, les modèles sont des groupes de blocs prédéfinis que les utilisateurs peuvent parcourir, comme vous le voyez ici. Il y a un tas de modèles ici pour eux. Et en cliquant sur l'un d'eux, ils obtiennent tout cela inséré dans leur page en un seul clic. Ainsi, au lieu d'avoir besoin d'assembler des blocs comme celui-ci, des blocs LEGO, ils obtiennent quelque chose comme ça, un groupe préassemblé d'un tas de blocs qui a été fabriqué par, espérons-le, quelqu'un qui est déjà très bon en conception et qui a passé des heures dans ce métier de fabrication blocs.

Et donc une fois que vous l'insérez sur la page, cela ressemble un peu à ceci. Et juste comme ça, boum, vous avez un motif, tout un tas de blocs préassemblés qui ont l'air bien, qui ont bon goût et qui fonctionnent, et que vous pouvez ensuite entrer et taper le texte que vous devez changer . Ainsi, vous modifieriez quelque chose comme un exemple d'en-tête pour le texte unique de votre page.

Les modèles sont donc comme une énorme longueur d'avance pour l'utilisateur moyen. Ils n'ont pas besoin d'apprendre toutes les complexités de l'éditeur de blocs, toutes ces choses complexes. Ils n'ont pas besoin d'être un designer professionnel, mais ils peuvent obtenir un superbe design simplement en insérant un motif sur la page.

Donc, si vous êtes une agence, quelqu'un qui crée des sites Web pour une autre personne ou un client, vous pouvez utiliser des modèles de blocs pour aider vos clients à s'aider eux-mêmes. En fournissant tout un tas de modèles prédéfinis à votre client, il peut créer ses propres pages.

Alors, disons qu'ils ont un événement à venir pour lequel ils ont besoin d'une page spéciale. Ils peuvent saisir un motif de bloc que vous avez créé pour eux et qui correspond à leur marque. Cela correspond à leur schéma de couleurs et à tout ce genre de choses, et ils peuvent simplement cliquer et l'insérer sur la page et faire de l'ingénierie inverse - commencez simplement à taper dans ces blocs au lieu d'avoir besoin de connaître toutes les complexités de quel bloc utiliser dans lequel scénario, et ce qu'il ne faut pas faire également, et comment créer une mise en page qui fonctionne parfaitement sur tous les appareils et toutes ces sortes de choses.

Cependant, bien que les modèles de blocs soient faciles à utiliser pour l'utilisateur moyen, ils ne sont pas faciles à créer. Et ils sont encore plus difficiles à gérer dans le temps. Et pour les développeurs et les agences, il n'y a pas de flux de travail ou d'outils intégrés à WordPress pour vous aider à créer des modèles.

J'ai donc divisé les étapes pour construire un modèle actuellement dans ce que j'appellerai ici la manière difficile en 10 étapes. Et si cela semble écrasant, c'est parce que ça l'est en quelque sorte. La première chose que vous devez faire est de créer un fichier PHP dans un éditeur de code comme VS Code. Vous devez mettre un en-tête de fichier spécifique en haut de ce fichier.

Ensuite, vous avez besoin d'un endroit pour construire. Vous devez donc avoir un WordPress, probablement sur votre local, ce qui est génial. Mais ensuite, vous devez créer une page temporaire à l'intérieur de ce WordPress juste pour pouvoir mettre des blocs quelque part et travailler dessus. Et puis vous devez le construire. Vous devez utiliser ces compétences, ce métier que vous avez développé et le rendre joli. Et puis, lorsque vous avez terminé, vous devez passer à une vue de code et copier tout ce code dans ce fichier que vous avez créé à la première étape.

Et puis vous devez enregistrer ce fichier à un emplacement spécifique dans votre thème. Si vous construisez un thème et que vous le livrez à votre client, vous devez le placer dans le répertoire patterns. Et puis, si votre modèle contient des images comme dans cette mise en page à trois colonnes que j'ai montrée, vous devez vous assurer que ces images vont réellement fonctionner lorsque vous les livrerez à votre client. Ainsi, comme vous l'avez créée sur votre ordinateur local, cette image sera également référencée dans le code comme si elle se trouvait sur le disque dur de votre ordinateur local.

Évidemment, c'est un problème. Une fois qu'elle n'est plus sur votre ordinateur, cette image ne fonctionnera plus. Ensuite, vous devez parcourir le code avec un peigne fin, rechercher les URL de vos ordinateurs locaux et les remplacer par une balise PHP spécifique. Et ensuite, vous devez vous assurer que vous déplacez également ces fichiers image dans votre thème. Vous ne pouvez pas simplement le changer dans le code. Vous devez également déplacer ce fichier.

Et puis pour rendre les choses encore plus difficiles, c'est là que ça devient vraiment, je pense que le plus frustrant, du moins pour moi quand je construisais beaucoup de modèles, c'était si je faisais une faute d'orthographe à l'intérieur d'un modèle, je devrais commencer à l'étape trois à nouveau et allez jusqu'à l'étape neuf à chaque fois juste pour corriger une faute d'orthographe. Vous devez également - parce que vous devez régénérer tout le code de bloc à chaque fois - vous devez ensuite rechercher toutes ces URL d'image et les remplacer, les remettre dans le fichier.

C'est tout un ensemble d'étapes répétitives et fastidieuses, notamment pour la gestion dans le temps. Disons que vous devez modifier un modèle dans des mois. C'est très fastidieux. Et c'est quelque chose que nous avons rencontré lors de la création de modèles pour notre collection Genesis Pro. Nous avons livré beaucoup de sections et de mises en page ou de modèles avec cela et sommes devenus très frustrés par le processus de faire ces choses fastidieuses encore et encore et encore.

Et c'est ce qui nous a amenés à créer un outil pour nous aider à ne pas avoir à faire ces choses, à éliminer cet ennui et à le rendre vraiment aussi rapide que possible. Vous pouvez simplement travailler dessus, l'enregistrer et, boum, il ira directement dans le fichier pour vous. Cela mettra le fichier au bon endroit. Il écrit tout le code pour vous. Et nous avons donc décidé de construire un outil pour nous-mêmes en interne qui éliminerait toute cette douleur. Et nous n'avons jamais vraiment voulu qu'il devienne quelque chose que nous laisserions d'autres personnes utiliser, mais il nous est devenu si utile que nous voulions le rendre également disponible à d'autres personnes.

Encore une fois, comme vous pouvez le voir, la manière difficile actuelle de construire un modèle n'est pas idéale, et ce n'est pas une excellente façon de faire les choses. C'est pourquoi nous avons créé Pattern Manager, une interface utilisateur pour créer et maintenir des collections de modèles dans WordPress. Je vais donc laisser la parole à mon collègue, Mike Day, pour nous guider à travers le gestionnaire de modèles et nous montrer toutes les fonctionnalités impressionnantes qu'il contient. Alors à vous, Mike.

MIKE DAY : Bonjour. Je suis Mike. Je suis ingénieur logiciel chez WP Engine. Les modèles sont un puissant outil de création de mise en page qui a le potentiel de changer la donne pour les constructeurs WordPress. Mais comme Phil vient de le démontrer, l'expérience de l'utilisation réelle de ces modèles en termes de création et de gestion, c'est le moins qu'on puisse dire. Pattern Manager vise à mettre la gestion des fichiers de modèles au premier plan de la conception WordPress de manière fluide via un plugin qui peut se glisser dans votre flux de travail. Allons-y.

Pour les besoins initiaux de cette démo, je vais laisser la fenêtre de mon éditeur de code ouverte ici à droite. Il s'agit d'un fichier de modèle réel enregistré directement sur mon disque. Et je tiens vraiment à souligner que lorsque vous travaillez avec Pattern Manager, vous manipulez et créez en fait des fichiers physiques enregistrés sur votre disque. Plus précisément, ils sont enregistrés dans votre répertoire de thèmes actuel. Vous pouvez donc voir ici ces deux fichiers PHP ou fichiers de modèles, ils représentent les modèles qui sont actuellement actifs dans cette vue Patterns.

De plus, notez ce répertoire d'images. Phil a soulevé un point très intéressant : en ce moment, lorsque vous travaillez avec des motifs, disons que vous avez un tas d'images enregistrées dans un motif. Toutes ces URL pour ces images particulières vont pointer vers votre installation locale. C'est un gros problème chaque fois que vient le temps de partager votre travail.

Toutes ces images seront brisées. Nous abordons donc cela un peu différemment. Nous enregistrons en fait des copies de ces images directement dans le dossier du thème lui-même. Cela change la donne pour le contrôle de version, par exemple. Imaginons que vous et vos collaborateurs utilisiez Git. Maintenant, vous pouvez être sûr que vous avez tous accès aux mêmes images pendant que vous travaillez.

D'ACCORD. Passons donc à l'interface. C'est la vue des modèles. Et immédiatement ici, vous pouvez voir les deux modèles qui sont enregistrés pour mon thème. Lorsque vous survolez un aperçu de motif, remarquez les boutons d'action qui apparaissent. Nous avons des options pour éditer, dupliquer ou supprimer un motif donné. Il y a aussi quelques options de filtrage ici sur la gauche mais je vais y revenir dans un instant. Pour l'instant, allons-y et éditons un motif.

Alors tout de suite, je suis sûr que vous reconnaîtrez une interface utilisateur très familière. Il s'agit de l'éditeur de blocs WordPress, dans ce cas réutilisé pour fournir un espace spécifique pour travailler avec des modèles. Et ici à droite, vous verrez ces différentes propriétés d'en-tête. Maintenant, avant de sauter dans ceux-ci, je veux donner un peu plus de contexte et utiliser en fait du texte emprunté à la documentation du développeur WordPress.

La propriété title est assez explicite. Il s'agit d'un ID frontal lisible par l'homme, si vous voulez, que les utilisateurs verront lorsqu'ils interagiront avec votre modèle sur un site. Les catégories sont vraiment utilisées pour regrouper des motifs. Cela va être un tableau de catégories enregistrées où vous pouvez en ajouter une, ou plusieurs, ou vraiment aucune si vous le souhaitez. Mais il y a un problème ici avec la façon dont cela fonctionne actuellement dans WordPress Core.

Il n'y a vraiment pas de bon moyen de savoir quelles catégories sont réellement disponibles. Il n'y a pas d'endroit évident pour trouver ces catégories de modèles de blocs enregistrés n'importe où sur votre site, du moins à ma connaissance. Maintenant, les mots-clés que vous pouvez considérer comme étant un peu comme des termes de recherche. Essentiellement, vous pouvez saisir ces alias descriptifs pour décrire votre modèle afin que, quels que soient les recherches des utilisateurs dans l'inséreuse, ils puissent facilement trouver ce dont ils ont besoin. Et la description est une sorte d'extension de cette idée, sauf qu'il s'agit d'un texte visuellement caché. Ceci est vraiment utile pour les utilisateurs malvoyants qui pourraient utiliser un lecteur d'écran.

Revenons maintenant dans Pattern Manager, modifions ces méta-propriétés. Le titre du modèle est une simple saisie de texte. Commencez simplement à taper pour renommer votre motif. Mais remarquez une fonctionnalité cachée ici. Le gestionnaire de modèles me dit qu'un modèle avec ce titre existe déjà dans le thème. Je ne veux pas détruire accidentellement ce fichier, je vais donc laisser le titre seul.

D'ACCORD. Choisissons quelques catégories. Alors tout de suite, notez que nous avons rendu cette liste de catégories uniquement dans une liste déroulante. Sinon, il est difficile de savoir où trouver réellement ces données. Mais cette liste est remplie dynamiquement via un appel API. Cela signifie non seulement toutes les catégories de modèles de blocs enregistrées pour votre thème, mais toutes les catégories que vous pourriez avoir enregistrées, nous les afficherons ici. Choisissons simplement en vedette pour l'instant.

D'ACCORD. Et ajoutons quelques termes de recherche. Pour les besoins de cette démo, je vais juste utiliser un exemple de modèle. Mais rappelez-vous que c'est ici que vous pouvez ajouter des termes décrivant ce modèle pour les utilisateurs qui effectuent une recherche dans l'inséreuse. Et remarquez que j'ai utilisé un terme composé de plusieurs mots ici. Ceux-ci sont pris en charge dans le gestionnaire de modèles.

D'ACCORD. Et ajoutons une description. Rappelez-vous qu'il s'agit de texte masqué visuellement. Donc, vraiment, l'intention principale ici, à mon avis, est d'aider les lecteurs d'écran. Alors décrivons cela comme trois colonnes avec des couleurs inversées. D'ACCORD. Parfait. J'ai l'impression que nous sommes au bon endroit maintenant. Nous pouvons réellement sauver notre travail. Mais avant cela, je veux que vous prêtiez une attention particulière à l'en-tête de ce fichier à droite. Maintenant, dès que j'appuie sur Update Pattern, tout d'un coup, il y a beaucoup plus de données ici. La description, les catégories et les mots-clés que nous venons de modifier sont tous apparus ici sans que j'aie à toucher à ce fichier.

D'ACCORD. Regardons les méta-propriétés restantes. Donc, tout d'abord, nous avons une propriété assez intéressante dans la largeur de la fenêtre. Il s'agit d'un nombre entier représentant la largeur mise à l'échelle pour prévisualiser ce motif. Donc, par défaut, chaque fois que vous créez un motif, disons que vous créez quelque chose de pleine largeur ou peut-être même de très étroit. Les paramètres par défaut pour cela dans un WordPress Core peuvent rendre la mise à l'échelle un peu étrange dans les aperçus.

Donc types de messages. Il s'agit simplement d'un tableau de slugs de type post avec lesquels le modèle est destiné à être utilisé. Notez que l'ajout de valeurs ici limitera en fait le modèle afin qu'il ne fonctionne qu'avec ces types de publication. Notez également que si vous laissez ce champ vide, le modèle fonctionnera avec tous les types de publication.

Ensuite, nous avons des types de blocs. Il s'agit d'un autre tableau, mais cette fois de types de blocs avec lesquels le modèle est destiné à être utilisé. Maintenant, je dois admettre que chaque fois que j'ai commencé à utiliser ces types de blocs, j'ai trouvé cela un peu déroutant. Il semble que l'utilisation soit vraiment destinée à être polyvalente, mais l'intention derrière n'est pas très claire à mon avis.

Et enfin, nous avons la propriété inserter. Maintenant, par défaut, tous les modèles apparaîtront dans l'inséreuse, mais disons que vous voulez changer cela. Vous ajouteriez simplement une valeur booléenne de false pour cette propriété et elle sera cachée de l'utilisation dans l'inséreuse.

Donc, revenons dans Pattern Manager, voyons comment nous gérons ces méta-propriétés restantes. Tout d'abord, je vais fermer ces autres panneaux. Et regardons la largeur de la fenêtre. Rappelez-vous maintenant qu'il s'agit d'une valeur entière qui contrôle simplement les aperçus mis à l'échelle pour votre motif dans l'inséreuse. Une chose qui est pénible avec la mise en œuvre actuelle de ceci est de voir les résultats de votre travail.

Disons donc que je modifie l'en-tête dans mon fichier de modèle et que je change la largeur de la fenêtre. La seule façon de voir à quoi cela ressemble est, par exemple, de créer un nouveau message. Cela devient un peu compliqué. C'est juste un peu trop compliqué de sauter d'avant en arrière. C'est un peu pénible. Ainsi, la façon dont nous avons approché cela consiste simplement à survoler le curseur et immédiatement un aperçu est affiché. Et pendant que je traîne et essaie différentes tailles, je peux voir comment ce motif évolue. C'est vraiment utile et un énorme gain de temps. Prenons 1 200 pour l'instant. Et passons aux types de publication.

La première chose à noter à propos de ce panneau est la présence de ces info-bulles. Ce ne sont que de petites bribes d'informations pour essayer de vous guider sur votre chemin lorsque vous utilisez l'application. Donc, tout d'abord, ceci ne fait que répéter quelque chose dont j'ai déjà discuté. S'il n'y a pas de sélections, s'il n'y a pas de types de publication ajoutés à l'en-tête de votre fichier de modèle, votre modèle fonctionnera pour tous les types de publication. Mais notez ci-dessous qu'il y a ce paramètre appelé Visibilité modale.

C'est une fonctionnalité cachée vraiment cool. Essentiellement, si vous avez le bon type de type de bloc dans l'en-tête de votre fichier de signatures, chaque fois que les utilisateurs créent un nouveau message du type ciblé, ils verront apparaître un modal. Et ils peuvent choisir votre modèle directement à partir de ce modal. Et je vais vous montrer exactement ce que je veux dire dans un instant. Mais je veux que vous remarquiez comment cette bascule est réellement désactivée. Et c'est parce que les paramètres de visibilité modale ne fonctionneront que si un type de publication est renseigné.

Donc, la façon dont nous abordons cela consiste simplement à désactiver la bascule jusqu'à ce qu'un type de publication soit présent. D'ACCORD. Maintenant, je peux l'activer. Et la bascule d'affichage et d'insertion, elle fait ce que vous pourriez deviner. Si vous deviez désactiver cette option, cela attribuerait une valeur de false dans l'en-tête de votre fichier. Et ce motif n'apparaîtrait plus dans l'inséreuse. D'ACCORD. Allons-y et mettons cela à jour.

Voyons maintenant comment tout cela fonctionne réellement dans un article. Je vais donc changer de poste et créer un nouveau post. Maintenant, tout de suite, c'est ce modal dont je parlais en action. Étant donné que le type de bloc et le type de publication corrects sont tous deux ajoutés au fichier, je le vois maintenant immédiatement lorsque je crée une nouvelle publication. Et je peux simplement cliquer sur l'aperçu du motif et, boum, mon motif est là.

C'est plutôt cool, mais voyons comment le marquage fonctionne autrement. Voici donc la catégorie que j'ai choisie, la fonctionnalité. Et l'autre modèle de mon thème a les catégories de colonnes et de texte, donc ça marche très bien. Qu'en est-il de mes termes de recherche ? Mon terme de recherche avec un exemple de modèle. Cela fonctionne très bien. Et mon texte caché a commencé avec trois colonnes, fonctionnant également exactement comme prévu. C'est super.

D'ACCORD. Alors revenons en arrière et couvrons une autre méta-propriété restante. Celui-ci est un peu bizarre à expliquer. J'ai l'impression que c'est plus facile si je te montre juste à la place. Alors allons-y et créons un nouveau motif. Tout ce que vous avez à faire pour cela est d'appuyer sur ce bouton Créer un nouveau modèle. Et me voilà de retour dans l'éditeur. Dans ce cas, je vais choisir le bloc de code. Et dans ce bloc de code, je vais coller un exemple de code.

Maintenant, cela est en fait tiré de la documentation de WordPress. C'est ainsi que vous enregistrez une transformation de bloc à l'aide de PHP. Vous prendriez donc ce code et le colleriez peut-être dans un fichier de fonctions, selon vos préférences. Laissez-moi vous montrer comment nous abordons cela. Dans cette section de type de bloc transformé, il y a une liste déroulante. Cette liste déroulante est remplie dynamiquement, tout comme les types de publication et les catégories via un appel API.

Je peux donc simplement rechercher mon type ciblé - le voici, noyau / code - et le choisir. Maintenant, juste pour illustrer une fois de plus, la différence réside dans la façon dont vous pouvez le faire maintenant par rapport à l'utilisation du gestionnaire de modèles. Pour ce faire maintenant, je dois rechercher ce bloc de code, déterminer exactement le contenu dont je pourrais avoir besoin, déterminer mon type de bloc et le coller quelque part, par rapport à Pattern Manager, je viens de choisir ce champ. J'ai choisi cette valeur dans une liste déroulante. D'ACCORD. Mettons à jour cela. Et je vais créer un nouveau post. Et sortons de notre modal.

Maintenant, cette fois, je vais également choisir le bloc de code. Mais au lieu de le remplir avec du contenu, je peux simplement choisir cette option dans la barre d'outils. Et remarquez cette sélection de motifs. Quand je choisis des motifs, il y a mon motif. Et en cliquant dessus, immédiatement ce bloc a été transformé en mon motif cible.

Une autre chose à couvrir avec les types de transformation est l'idée de ce qu'on appelle les modèles de blocs sémantiques. Celles-ci s'apparentent à une transformation de bloc mais ciblent les parties du modèle. Par exemple, les en-têtes et les pieds de page. Mais il y a un piège là-dedans. Une chose à savoir sur la sélection de ce type de bloc de partie de modèle cible est que vous devez également attribuer le bon type de type de publication, sinon cela ne fonctionnera tout simplement pas. Donc, la façon dont nous avons abordé cela consiste simplement à vous attribuer ce type de modèle. Et c'est verrouillé. Et il restera verrouillé jusqu'à ce que ce type de bloc soit réellement supprimé.

C'est donc tout pour la démo initiale de cette vue d'éditeur, mais j'ai besoin de changer de thème en arrière-plan ici. Et maintenant, je reviens à la vue Patterns. Le but ici est de vous montrer comment Pattern Manager se comporte avec un grand nombre de modèles. Ce thème particulier a plus de 50 modèles enregistrés.

Remarquez maintenant que je clique sur ces différentes catégories à quel point ces modèles sont immédiatement filtrés. C'est vraiment utile lorsque j'essaie de trouver ce dont j'ai besoin parmi un tas de modèles. Mais disons que vous voulez un contrôle plus granulaire. Commencez simplement à taper. Ce filtrage fonctionne de manière très similaire à l'Inserteur. C'est vraiment utile et vraiment accrocheur. Et en parlant de vivacité, une autre chose à souligner est la rapidité avec laquelle cette interface utilisateur se sent.

Remarquez comment ces aperçus ne se chargent pas tant que je ne les fais pas défiler. Il s'agit d'une implémentation personnalisée qui est vraiment excellente pour économiser les ressources du navigateur. Et cela rend cette application rapide et très rapide, peu importe le nombre de modèles que vous utilisez. D'accord. Nous avons couvert beaucoup de terrain dans cette présentation, alors récapitulons rapidement. Les modèles représentent une intersection intéressante entre la conservation d'éléments de contenu individuels et la conception d'une page entière.

En tant que constructeur WordPress, la possibilité de créer des éléments de mise en page plus grands et de les réutiliser dans un thème est une idée convaincante. En-têtes, pieds de page, témoignages, boîtes de fonctionnalités. Ce sont toutes les caractéristiques de chaque site Web. Et maintenant, vous pouvez facilement concevoir l'ensemble de votre site avec des modèles.

Aujourd'hui, malgré l'émergence des modèles en tant que composant clé des thèmes de blocs, WordPress lui-même n'a pas d'interface officielle pour créer ou gérer ces modèles, et il n'y a rien sur la feuille de route. Au lieu de cela, les constructeurs doivent créer des modèles manuellement dans leur éditeur de code, en copiant et en collant du code des dizaines de fois, laissant beaucoup de place à l'erreur.

Notre produit, Pattern Manager, est conçu pour se glisser dans votre flux de travail. Installez et activez simplement le plugin et vous obtiendrez une interface utilisateur moderne pour filtrer les modèles, créer, dupliquer, éditer, supprimer, et tout cela avec l'expérience de l'édition de contenu dans l'expérience familière de l'utilisation de l'éditeur principal de WordPress. De plus, de nombreuses subtilités plus difficiles à comprendre pour marquer correctement un fichier de modèle, par exemple, ajouter des catégories, des mots-clés, ou peut-être même restreindre le travail avec certains types de publication personnalisés, sont toutes résumées dans notre interface utilisateur. Les constructeurs ont un contrôle total sur ces paramètres via des commandes de barre latérale faciles à utiliser.

Pattern Manager a été publié et est disponible en téléchargement dès maintenant à l'URL ci-dessous. Essayez-le et faites-nous part de vos réflexions. Et n'hésitez pas à me contacter personnellement et à me dire ce que vous en pensez. Nous espérons que vous essayez Pattern Manager. Et nous espérons que cela vous aidera de la même manière qu'il a aidé notre équipe de constructeurs WordPress. Merci.