Build for Gutenberg: Comment les auteurs de plugins et de thèmes abordent la transition vers Gutenberg

Build for Gutenberg: Comment les auteurs de plugins et de thèmes abordent la transition


Lors de WordCamp Europe 2018, Matt Mullenweg a présenté une feuille de route approximative pour Gutenberg au cours des prochains mois. En juillet, il y aura une grande poussée pour augmenter l’adoption de Gutenberg, avec une version bêta 5.0 en jeu pour août (ou au-delà; en fait, probablement au-delà). L’intégration imminente peut vous amener à vous demander comment les développeurs WordPress prévoient de construire pour Gutenberg.

Autrement dit, quelles sont les différentes façons dont les développeurs préparent leurs offres pour Gutenberg? Et les gens font-ils quelque chose de nouveau et d’intéressant pour Gutenberg?

Dans cet article, nous allons vous donner des exemples réels et concrets de la façon dont les développeurs de plugins et de thèmes peuvent construire pour Gutenberg en vous montrant ce qui existe déjà.

En examinant des exemples concrets de la façon dont les développeurs utilisent les blocs et les styles pour créer une expérience d’édition plus intégrée, nous espérons que vous:

  • Comprendre comment Gutenberg peut vous être bénéfique en tant qu’utilisateur final.
  • Obtenez quelques idées à construire pour Gutenberg pour vos propres projets WordPress.

Si vous n’êtes toujours pas sûr de ce qu’est l’éditeur Gutenberg, vous voudrez peut-être d’abord consulter notre tutoriel complet pour l’éditeur Gutenberg.

Six exemples de la façon dont les plugins existants abordent le passage à Gutenberg

La façon dont les auteurs de plugins construisent pour Gutenberg dépend principalement de la fonction du plugin.

D’une part, vous avez des plugins qui se concentrent sur l’ajout de contenu frontal. C’est principalement ce qui aurait été fait auparavant en ajoutant un shortcode.

Un bon exemple est un plugin de formulaire. Presque tous les plugins de formulaires vous offrent une interface distincte pour créer vos formulaires, puis un shortcode pour réellement intégrer ces formulaires sur le front-end.

Ces types de plugins vont généralement adresser Gutenberg avec un bloc personnalisé pour faciliter l’insertion du contenu. Vous verrez plusieurs exemples dans cette section:

  • Formes Ninja
  • Donner
  • WooCommerce

Ensuite, vous avez d’autres plugins qui vous aident à contrôler les détails en arrière-plan. En règle générale, ces plugins utilisent des métadonnées.

L’exemple le plus connu serait quelque chose comme Yoast SEO. Vous n’ajoutez pas de contenu, mais toutes ces informations de la méta-boîte sont essentielles.

Les métadoxes fonctionnent désormais avec Gutenberg, mais ces plugins ont toujours la possibilité de modifier leurs fonctionnalités pour profiter de Gutenberg. Je vais vous montrer quelques façons dont Yoast SEO pourrait résoudre le problème, ainsi que la façon dont nous avons choisi de faire les choses avec certains de nos propres plugins.

1. Ninja Forms ajoute un nouveau bloc Gutenberg

Formes Ninja est l’un des plugins de formulaire les plus populaires du dépôt WordPress.org. Jusqu’à présent, il s’adresse à Gutenberg en ajoutant un simple Formes Ninja bloquer.

Vous insérez le bloc comme n’importe quel autre bloc Gutenberg:

comment les développeurs de formes ninja construisent pour Gutenberg

Ensuite, vous pouvez sélectionner votre formulaire dans le menu déroulant:

bloc de formes ninja

Et une fois que vous avez sélectionné un formulaire, vous verrez un aperçu en direct directement dans l’éditeur:

aperçu en direct du formulaire

Pour le moment, c’est tout. Mais c’est une approche de base solide car:

  • Il élimine le besoin de travailler directement avec des shortcodes
  • Vous pouvez voir un aperçu en direct de votre conception pendant que vous modifiez toujours votre page

Les deux prochains plugins s’appuieront sur cela avec des options de style / contrôle plus approfondies.

2. Give ajoute deux blocs Gutenberg avec des options de mise en page

Donner est un plugin de don populaire avec une équipe de développement très proactive quant à l’intégration de Give avec l’éditeur Gutenberg (si vous aimez le sujet de cet article, vous apprécierez la série #PlayingWithBlocks au Donner un blog, où l’équipe Give détaille ses plans de construction pour Gutenberg).

Give a l’une des expériences Gutenberg les plus rationalisées que j’ai essayées. Non seulement vous pouvez apporter des formulaires de don Give via les deux blocs de Give, mais vous pouvez également les styliser à l’aide de l’interface Gutenberg.

Les deux blocs de Give vous permettent d’intégrer:

  • Un seul formulaire de don
  • Une grille de formulaires de don

blocs de Gutenberg givewp

Comme Ninja Forms, vous obtenez un aperçu en direct de votre formulaire. Mais vous obtenez également Bloquer des options d’édition qui vous permettent:

  • Choisissez le format
  • Activer / désactiver l’objectif de don
  • Choisissez où positionner le contenu

options de disposition de bloc

Et si vous survolez votre formulaire, vous obtiendrez un lien direct pour modifier ce formulaire:

édition de blocs

Il y a donc un aperçu de la façon dont les blocs peuvent aller un peu plus loin que l’implémentation actuelle de Ninja Forms. Mais WooCommerce va encore plus loin…

3. WooCommerce ajoute un bloc de produits avec contrôle des colonnes

Alors que WooCommerce ajoutera probablement plus d’intégrations Gutenberg à mesure que WordPress 5.0 se rapprochera (certains des idées pour ajouter des produits ici), l’équipe a déjà plongé ses orteils dans Gutenberg avec l’officiel Plugin de blocage des produits WooCommerce Gutenberg.

Oui – en ce moment c’est un plugin séparé. Mais une fois que vous l’installez, vous pouvez insérer des produits WooCommerce existants en tant que bloc dans votre contenu Gutenberg.

Lorsque vous ajoutez le Des produits bloc, vous pouvez choisir les produits à afficher:

bloc de woocommerce gutenberg

Ensuite, vous pouvez utiliser les options d’édition de bloc pour modifier la mise en page:

modification de la disposition du woocommerce à gutenberg

Celui-ci me passionne beaucoup, car c’est un excellent exemple de la façon dont Gutenberg le rend plus accessible pour styliser / configurer du contenu non standard.

4. Beaver Builder ajoute un "Convertir en Beaver Builder" option

Il y a eu beaucoup de discussions sur la façon dont les constructeurs de pages aborderont Gutenberg. Il n’y a pas encore beaucoup de concret, mais Beaver Builder a ajouté une fonctionnalité dans Beaver Builder 2.1 qui vous permet de convertir une mise en page Gutenberg en Beaver Builder:

constructeur de castors gutenberg

Pour l’instant, le processus de conversion n’est pas parfait. Mais l’idée de pouvoir passer de Gutenberg à un constructeur de page est intrigante si la conversion était transparente.

5. Les métadonnées devraient toujours fonctionner – Yoast SEO est un bon exemple

Je ne pense pas que Yoast SEO ait encore publié de modifications pour aborder Gutenberg, donc pour le moment, c’est plus un exemple de la façon dont les métadonnées existantes fonctionnent avec Gutenberg (si vous n’avez pas suivi Gutenberg de près – il prend désormais en charge les métadonnées, bien que ce soit plus pour une compatibilité ascendante qu’une solution à long terme).

Comme vous pouvez le voir, la méta-box Yoast SEO principale est indemne de Gutenberg:

gutenberg yoast seo meta box

Mais vous manquez les scores SEO et d’analyse de contenu qui étaient auparavant dans la barre latérale.

Alors, comment Yoast pourrait-il construire pour Gutenberg pour résoudre ce problème? Voici quelques maquettes pour savoir comment Yoast peut intégrer son analyse dans l’interface Gutenberg actuelle:

Maquette Byoast seo warning
Maquette Canalyse de contenu de yoast seo

6. Comment nous abordons les métadonnées dans WP Product Review

Notre Plugin WP Product Review est l’un de ces plugins qui utilise une méta-boîte pour contrôler la sortie sur le front-end (une boîte de révision dans ce cas).

Voici comment nous travaillons à l’intégration de WP Product Review dans l’éditeur Gutenberg:

examen des produits wp gutenberg

Lorsque les utilisateurs indiquent que la publication est une critique avec une bascule dans la barre latérale, ils pourront tout configurer sur leur boîte de révision à partir des options ci-dessus:

wp review pro gutenberg toggle

Développeurs – voici une excellente ressource pour préparer votre plugin pour Gutenberg

Si vous êtes un véritable développeur de plugins, vous vous demandez peut-être comment créer pour Gutenberg pour votre plugin spécifique. Eh bien… je ne peux pas vous le dire. Mais je peux vous signaler ce post génial de notre propre Hardeep Asrani. Hardeep présente quelques conseils pratiques pour préparer votre plugin pour Gutenberg.

Les développeurs peuvent également construire pour Gutenberg avec de nouveaux plugins

Les développeurs ne se concentrent pas seulement sur la compatibilité des plugins existants avec Gutenberg, ils prévoient également de construire pour Gutenberg avec de nouveaux plugins.

Un nouveau Gutenberg bloque à gogo

D’une part, vous avez une pléthore de plugins généraux qui ajoutent simplement de nouveaux types de blocs de contenu. Celles-ci donnent à Gutenberg une sensation de constructeur de page. Vous pouvez trouver des blocs pour:

  • Tableaux de prix
  • Témoignages
  • Membres de l’équipe
  • Etc.

Par exemple, voici un bloc de tableau de prix du Empilable – Plugin Ultimate Gutenberg Blocks. Regardez à quel point les options d’édition de bloc sont détaillées:

nouveaux blocs de gutenberg

Il existe déjà un tas de ces plugins sur WordPress.org. Mais au-delà du plugin Stackable susmentionné, d’autres offres populaires semblent être:

Il y a aussi une offre appelée CoBlocks qui se commercialise comme "Blocs de Gutenberg pour les spécialistes du marketing de contenu".

Je pense que cette approche de niche est particulièrement intéressante. Peut-être qu’à l’avenir, nous verrons des ensembles de blocs Gutenberg spéciaux pour:

le Bloc de revue de livre le plugin est un autre mini-exemple de la façon dont les blocs de niche de Gutenberg pourraient devenir une chose.

Un exemple de la façon dont les champs personnalisés peuvent fonctionner avec Gutenberg

Champs personnalisés de Gutenberg est un autre plugin intéressant qui semble obtenir une certaine traction.

Il facilite la configuration de champs personnalisés ou de groupes de champs associés à un type de publication personnalisé particulier:

Champs personnalisés de l'éditeur Gutenberg

Ensuite, lorsque vous accédez à l’éditeur Gutenberg, ces champs personnalisés sont pré-remplis sous forme de blocs:

exemple de champ personnalisé gutenberg

Beaucoup de gens se demandent comment les champs personnalisés fonctionneront avec Gutenberg – ceci est un exemple prometteur qui est déjà dans la nature. Vous pouvez en savoir plus ici.

Trois exemples de la façon dont les développeurs de thèmes abordent la transition vers Gutenberg

Vous venez de voir quelques exemples de la façon dont les développeurs de plugins peuvent construire pour Gutenberg, mais qu’en est-il des thèmes?

Les développeurs de thèmes semblent suivre deux voies principales pour aborder la transition:

  • Rendre les thèmes prêts pour Gutenberg en ajoutant un style aux blocs et en prenant en charge les options de mise en page Gutenberg
  • Utilisation de blocs Gutenberg pour créer du contenu de thème

Voici quelques exemples pour peindre le tableau…

1. Ajout de styles personnalisés à l’éditeur Gutenberg

Une chose vraiment intéressante que nous voyons les développeurs faire est d’ajouter des styles de thème à l’interface Gutenberg réelle. Cela ouvre les portes pour créer une expérience vraiment WYSIWYG, bien que Spencer de BigBox WooCommerce détaille certains problèmes liés au style des blocs tiers.

Par exemple, regardez comment le thème Ohana de ThemeShaper remodèle complètement tout le contenu de Gutenberg, y compris le titre du message:

styles de tableau de bord gutenberg

Si vous voulez le voir en action, téléchargez le thème Ohana depuis GitHub. Et ThemeShaper explique également comment ils ont obtenu cet effet dans ce billet de blog.

2. Ajout de nouvelles options d’alignement pleine largeur

Un autre ajustement intéressant de la compatibilité des thèmes que vous verrez est l’ajout de Large alignement soutien. Essentiellement, cela vous permet de créer certains blocs sur toute la largeur. L’exemple le plus courant serait l’insertion d’une image pleine largeur.

Encore une fois, vous pouvez voir cela en vigueur avec le thème Ohana:

disposition large de Gutenberg

Pour que cet alignement fonctionne, les auteurs de thèmes doivent déclarer explicitement le support.

3. Création de contenu de démonstration de thème avec des blocs – par exemple Le thème du bloc

Enfin, cette approche des thèmes organiques est plutôt cool:

Le thème du bloc le contenu de la démonstration est entièrement construit avec des blocs Gutenberg.

C’est quelque chose que nous continuerons sans aucun doute de voir grandir, comme Matt l’a dit explicitement dans la feuille de route de Gutenberg, en juillet, "étendre Gutenberg au-delà de la publication dans la personnalisation du site."

Au-delà du thème Block, Array Themes a également un Thème des blocs atomiques spécialement conçu pour s’intégrer au plugin Atomic Blocks mentionné ci-dessus.

Développeurs – voici comment préparer votre thème pour Gutenberg

Si vous êtes un développeur de thèmes et que vous vous demandez comment rendre votre thème existant compatible avec Gutenberg, Bill Erickson a un excellent guide aux points forts. Et le Support thématique section du manuel Gutenberg est une autre bonne ressource.

Il y aura certainement plus de trucs sympas à venir

À partir de l’échantillonnage ci-dessus, j’espère que vous comprenez mieux comment les développeurs de plugins et de thèmes prévoient de construire pour Gutenberg.

Sur une note personnelle, je sais que la rédaction de cet article m’a rendu beaucoup plus enthousiasmé par les possibilités avec Gutenberg.

Sur le front du plugin, l’utilisation de blocs pour remplacer tout ce qui aurait été fait auparavant avec des shortcodes est une amélioration majeure pour la convivialité, en particulier pour les utilisateurs occasionnels.

Et la façon dont les développeurs de thèmes peuvent apporter leurs propres styles et incorporer des blocs est également passionnante – d’autant plus que Gutenberg se développe davantage dans la personnalisation du site.

Maintenant à vous – avez-vous rencontré de grands exemples d’auteurs de plugins ou de thèmes qui ont trouvé des moyens intéressants de construire pour Gutenberg? Faites le nous savoir dans les commentaires!

N’oubliez pas de rejoindre notre cours accéléré sur l’accélération de votre site WordPress. Avec quelques correctifs simples, vous pouvez réduire votre temps de chargement de 50 à 80%:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map