De toute évidence, le nouvel éditeur de blocs wordpress ne laisse pas indifférent, il est détesté par certains et aimé par beaucoup. Il est disponible depuis plus drsquoun 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 lrsquoadaptation de nos produits à Gutenberg nrsquoest pas quelque chose que nous pouvons faire en quelques jours. Chez nellio, nous avons suivi le développement et lrsquoévolution de nouveaux éditeurs de blocs afin de maintenir les mêmes fonctionnalités que les plug ins sans changement majeur. Lrsquoune des clés de lrsquoadaptation du contenu de nelio à Gutenberg est la possibilité drsquoajouter des boutons dans les blocs de texte pour maintenir la même fonctionnalité que tinymce (éditeur classique). Je rappelle que lrsquoune des caractéristiques les plus intéressantes du contenu de nelio est de 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 lrsquoai expliqué plus tôt dans ce post.
Mettre en évidence les phrases à partager avec le contenu de nelio est lrsquoune des principales caractéristiques. Crsquoest comme ça qursquoon utilise un éditeur classique. Pour inclure des boutons supplémentaires dans tinymce, WordPress dispose d’une documentation assez complète. Mais comment avez 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.
Jrsquoai 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 lrsquoaide. Là, jrsquoai demandé si je pouvais ajouter un bouton
Lrsquoé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 qursquoil fonctionne, devez le traiter avec Babel, crsquoest pourquoi nous avons cette configuration dans la page Web: Je ne détaillerai pas lrsquoutilisation de chaque ligne du profil de page Web précédent, Mais si regardez de plus près, 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 nrsquoimporte quel navigateur. Jrsquoai 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 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. 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 lrsquoinstallation NPM. Vous devez installer nodejs pour que tout fonctionne correctement et que puissiez inclure les dépendances nécessaires pour votre code. Lorsque 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 drsquoajouter au bloc de texte RTF de Gutenberg. Lorsque ouvrez un article pour lrsquoédition, verrez de nouveaux boutons apparaître sous forme de blocs de texte. sélectionnez un paragraphe de texte et cliquez sur le bouton, verrez le texte sélectionné dans la console du navigateur. Comme nous lrsquoavons vu dans le code ci dessus, crsquoest ce que nous attendons. Lire la suite Ce nrsquoest qursquoun petit exemple de la façon drsquoinsérer un bouton dans un bloc
Co di test. souhaitez modifier le texte sélectionné lorsque cliquez sur le bouton, je recommande de consulter le Code de ce plug in qui ajoute plusieurs boutons dans un format différent et plus complexe.
Drsquoautre part, pour ceux qui veulent approfondir le sujet, je suggère de regarder le Code du plug in ghostkit qui modifie lrsquointerface Gutenberg par défaut en ajoutant quelques éléments supplémentaires. Crsquoest 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 drsquoashim drsquolva sur unsplash.
Ajouter un bouton à tous les & 39 Éditeur Gutenberg
