Ajouter un bouton à tous les & # 39; Éditeur Gutenberg

De toute évidence, le nouvel éditeur de blocs wordpress ne vous laisse pas indifférent, il est détesté par certains et aimé par beaucoup. Il est disponible depuis plus d’un mois et plus de plugins et de thèmes sont compatibles avec lui. En tant que développeur de plug – ins, je dois dire que l’adaptation de nos produits à Gutenberg n’est pas quelque chose que nous pouvons faire en quelques jours. Chez nellio, nous avons suivi le développement et l’évolution de nouveaux éditeurs de blocs afin de maintenir les mêmes fonctionnalités que les plug – ins sans changement majeur. L’une des clés de l’adaptation du contenu de nelio à Gutenberg est la possibilité d’ajouter des boutons dans les blocs de texte pour maintenir la même fonctionnalité que tinymce (éditeur classique). Je vous rappelle que l’une des caractéristiques les plus intéressantes du contenu de nelio est de vous permettre de choisir des phrases dans le contenu à partager directement sur votre réseau social, ou de les marquer, puis notre algorithme sélectionnera les phrases les plus pertinentes et mettra en place une série de messages promotionnels automatisés. Je vous l’ai expliqué plus tôt dans ce post.
Mettre en évidence les phrases à partager avec le contenu de nelio est l’une des principales caractéristiques. C’est comme ça qu’on utilise un éditeur classique. Pour inclure des boutons supplémentaires dans tinymce, WordPress dispose d’une documentation assez complète. Mais comment avez – vous fait à Gutenberg? Comment ajouter des boutons dans les blocs de texte RTF de WordPress? Il est clair que le maintien de cette fonctionnalité est essentiel pour continuer à offrir des produits de qualité comme le contenu de nelio, non seulement pour nos clients, mais aussi pour nous – mêmes, car nous sommes également intéressés à utiliser la fonctionnalité de mise en évidence de phrases dans Gutenberg.
J’ai donc décidé de publier un article sur github du Projet Gutenberg en janvier 2018 (il y a environ un an, lorsque cet article a été publié), expliquant les problèmes et demandant de l’aide. Là, j’ai demandé si je pouvais ajouter un bouton
L’élément React, qui est nécessaire pour ces composants React.
Le Code utilise la syntaxe es6 + pour le rendre plus facile à comprendre, mais pour qu’il fonctionne, vous devez le traiter avec Babel, c’est pourquoi nous avons cette configuration dans la page Web: Je ne détaillerai pas l’utilisation de chaque ligne du profil de page Web précédent, Mais si vous regardez de plus près, vous verrez que nous utilisons SVG React LOADER pour traiter les fichiers SVG, Babel LOADER pour traiter JavaScript et le convertir en Code qui fonctionne dans n’importe quel navigateur. J’ai déjà parlé de toutes ces technologies modernes dans cet article. Le résultat est le fichier javascript Gutenberg. JS affiché dans \/ Dist \/ JS. Maintenant, ce que nous devons faire est de télécharger ce fichier à l’écran d’édition WordPress en utilisant (comme toujours) Le script wp \ u enqueue \ U:
Notez que le script est un actif en file d’attente _ Block Editor qui garantit que le script n’est chargé qu’avec l’éditeur de bloc WordPress. Si vous voulez essayer le Code, téléchargez le projet github et déplacez le dossier vers WordPress dans \/ WP content \/ plugins. Là, ouvrez un terminal et lancez l’installation NPM. Vous devez installer nodejs pour que tout fonctionne correctement et que vous puissiez inclure les dépendances nécessaires pour votre code. Lorsque vous avez des dépendances, lancez NPM Run Build dans le terminal pour générer le Code final (travailler avec Javascript, etc.). Vous pouvez maintenant aller sur WordPress et activer le plugin que nous venons d’ajouter.
Le bouton personnalisé que nous venons d’ajouter au bloc de texte RTF de Gutenberg. Lorsque vous ouvrez un article pour l’édition, vous verrez de nouveaux boutons apparaître sous forme de blocs de texte. Si vous sélectionnez un paragraphe de texte et cliquez sur le bouton, vous verrez le texte sélectionné dans la console du navigateur. Comme nous l’avons vu dans le code ci – dessus, c’est ce que nous attendons. Lire la suite… Ce n’est qu’un petit exemple de la façon d’insérer un bouton dans un bloc
Co di test. Si vous souhaitez modifier le texte sélectionné lorsque vous cliquez sur le bouton, je vous recommande de consulter le Code de ce plug – in qui ajoute plusieurs boutons dans un format différent et plus complexe.
D’autre part, pour ceux qui veulent approfondir le sujet, je vous suggère de regarder le Code du plug – in ghostkit qui modifie l’interface Gutenberg par défaut en ajoutant quelques éléments supplémentaires. C’est aussi un code bien structuré et facile à comprendre. D’une certaine manière, nous aurons une documentation officielle et détaillée couvrant tous les aspects de ces caractéristiques Gutenberg, mais maintenant nous devons lire le Code pour savoir comment mettre en œuvre ces types de changements d’éditeur de bloc WordPress. Bonne chance. Photo d’ashim d’Silva sur unsplash.