Comment préparer vos plugins pour WordPress Gutenberg

Gutenberg est une toute nouvelle interface d'édition qui changera la façon dont les gens utilisent WordPress. Êtes-vous prêt pour ce changement? Si vous êtes un développeur de plugins, vous devez préparer vos propres plugins pour Gutenberg..

Si vous n'avez pas encore entendu parler de Gutenberg, c'est un nouvel éditeur WordPress qui va changer la façon dont vous écrivez le contenu. Sous Gutenberg, destiné à faire partie intégrante de WordPress dans la version 5, chaque élément de votre contenu sera un bloc (de type paragraphe, image, citation de bloc, titre, etc.)..

Même les métaboxes ne seront pas les mêmes.

Les métaboxes simples devraient fonctionner avec Gutenberg dès l'installation, bien qu'ils soient affichés différemment. Cependant, si vous avez des métaboxes complexes tels que celui du plug-in Yoast SEO, vous devrez le tester contre Gutenberg et peut-être en créer un nouveau juste pour Gutenberg..

Alors, quels plugins doivent être mis à jour pour Gutenberg? Plugins avec:

types de messages personnalisés
métaboxes complexes
codes courts
ou fonctionnalités de l'éditeur

Il existe deux approches que nous pouvons adopter en tant que développeurs de plugins: soutien Gutenberg ou désactiver Gutenberg. Soutenir Gutenberg signifierait que nous déploierons des efforts supplémentaires pour refactoriser notre code (peut-être même en dupliquer quelques-uns) afin que nos utilisateurs de plug-ins n'aient aucune difficulté à l'utiliser..

Comment désactiver Gutenberg

Si nous décidons de ne pas soutenir Gutenberg, nous devons alors désactiver Gutenberg. Nous pouvons désactiver Gutenberg complètement ou uniquement là où notre plugin est utilisé. Dans cette section, je prendrai mon propre plugin "Simple Giveaways" qui a un type de post personnalisé et aussi des métaboxes.

Désactiver complètement Gutenberg

C'est quelque chose que je ne recommanderais pas de votre plugin. Au lieu de cela, vous voudrez peut-être informer les utilisateurs de votre plug-in avec un avis de l'administrateur que votre plug-in ne fonctionne pas avec Gutenberg afin qu'ils puissent revenir à l'éditeur classique..

Il est possible de revenir en arrière en installant le plugin Classic Editor. Ou vous pouvez créer un nouveau paramètre pour votre plugin et le faire pour le désactiver:

Ce filtre peut être trouvé dans la fonction gutenberg_can_edit_post_type qui est utilisé pour vérifier si Gutenberg peut être chargé sur ce type de message particulier. Si nous revenons toujours faux, alors cela signifie que nous ne soutiendrons pas du tout Gutenberg.
Désactiver Gutenberg par type de poste
Si votre plugin a un type de publication personnalisé, vous pouvez alors désactiver Gutenberg pour ce type de publication. Pour désactiver Gutenberg pour votre type de publication personnalisé, vous pouvez simplement modifier la configuration de votre type de publication..
Support de l'éditeur
Gutenberg ne se chargera pas si votre type de message ne supporte pas l'éditeur. Ceci est approprié si votre type d'article personnalisé n'a pas besoin de l'éditeur..
 __ ('Simple Giveaways', 'giveasap'), 'labels' => $ labels, 'supports' => array ('title', // 'editor', Désactivation de Gutenberg 'thumbnail',), 'hierarchical' => faux, //… ); register_post_type ('giveasap', $ args);
Prise en charge de l'API REST
Peut-être avez-vous besoin de l'éditeur mais vous n'en avez pas besoin dans l'API REST? Gutenberg ne se chargera pas si vous ne supportez pas l'API REST. De la même manière que l'exemple ci-dessus, nous le ferons dans la configuration de type post.
 __ ('Simple Giveaways', 'giveasap'), //… 'show_in_rest' => false, // Désactiver Gutenberg //…); register_post_type ('giveasap', $ args);
En réglant le paramètre show_in_rest à faux, nous allons désactiver Gutenberg pour ce type de message.
Type de support
Nous pouvons utiliser le filtre mentionné précédemment pour désactiver Gutenberg uniquement pour notre type de publication personnalisé..
Avec ce code, nous vérifions si nous sommes sur notre type de publication personnalisé. Si nous le sommes, alors retournez faux. Cela n'affectera aucun autre type de message.
Désactiver Gutenberg avec des métaboxes
Si vous avez des métaboxes complexes, il vous faudra peut-être trop de temps pour créer une version de votre plugin compatible avec Gutenberg. Si c'est le cas, vous pouvez désactiver Gutenberg jusqu'à ce que quelque chose fonctionne avec Gutenberg..
Pour désactiver Gutenberg avec vos métaboxes, vous devez les définir comme suit: pas compatible.
 faux, ) );
Si vous souhaitez apprendre à prendre en charge Gutenberg avec des métaboxes complexes, vous devez apprendre à les convertir en bloc et à les sauvegarder. Assurez-vous de vérifier le manuel WordPress Gutenberg pour cela.
Comment soutenir Gutenberg
Une meilleure option que de désactiver Gutenberg est de le supporter!
Puisque les métaboxes fonctionneront probablement immédiatement, vous n’avez pas grand chose à faire ici (à moins qu’ils soient avancés, comme nous l’avons appris auparavant). Lorsque vous soutenez Gutenberg, vous travaillerez principalement à la création de nouveaux blocs pour vos codes courts et même de vos widgets..
Les codes courts fonctionneront également hors de la boîte. Mais pour offrir une meilleure expérience utilisateur, vous devriez probablement leur créer des blocs..
Vous pouvez créer des blocs statiques et dynamiques. Les blocs statiques seront entièrement écrits en JavaScript et le code HTML généré sera enregistré dans le contenu.. 
Les blocs dynamiques sont un peu différents. Vous devrez également créer la partie JavaScript afin qu'elle fonctionne avec l'éditeur Gutenberg. Mais vous allez également définir une fonction PHP qui sera appelée pour la rendre lors de l'affichage de ce contenu sur le devant de votre site..
Pour comprendre les blocs statiques et dynamiques, prenons un exemple simple - un simple bloc d’alerte - et implémentons-le dans les deux sens.. 
Enregistrement d'un bloc
Pour enregistrer un bloc, nous devons d’abord le définir en PHP, puis en JavaScript..
 «guten-tuts»,)); // Notre bloc dynamique. register_block_type ('guten-tuts / alertdynamic', array ('render_callback' => 'guten_tuts_dynamic_alert'));  add_action ('init', 'guten_tuts_block');
Lors de l'enregistrement d'un script, nous devons définir les dépendances ici. le wp-block et wp-element les dépendances sont celles dont nous avons besoin lors de la création de blocs.
Je n'entrerai pas dans un aperçu détaillé des blocs ou de l'API dans son ensemble. Pour mieux comprendre cela, vous devriez lire le manuel de Gutenberg.
Fichier de blocage JavaScript
Le début de notre fichier JavaScript block.js aura ceci:
var el = wp.element.createElement, __ = wp.i18n .__, registerBlockType = wp.blocks.registerBlockType, RichText = wp.blocks.RichText, blockStyle = backgroundColor: '# 900', color: '#fff', remplissage: '20px'; 
Bloc statique
Définissons maintenant notre bloc statique. Puisque notre alerte ne sera que du texte, nous avons besoin d'un attribut: texte. Dans notre modifier fonction (utilisée dans l'éditeur), nous aurons un Texte riche bloc. Ce bloc nous permet d’insérer du texte, d’ajouter des styles, etc..
La définition de notre attribut texte va dire au Gutenberg de décaper le texte à l'intérieur du div. Nous disons également à Gutenberg que ce sera un tableau de tous les éléments enfants. Juste par exemple, cette 
em texte autre texte texte en gras
 convertirait en un tableau de trois éléments: "em text", "other text", et "texte en gras" avec leur structure telle que em et audacieux.
La conversion de ces attributs se produit dans la sortie du enregistrer méthode.
registerBlockType ('guten-tuts / alert', titre: __ ('Guten Tuts - Alert'), icône: 'mégaphone', catégorie: 'mise en page', attributs: texte: type: 'tableau', source: ' enfants ', sélecteur:' div ',, éditer: fonction (props) var content = props.attributes.text; fonction onChangeText (newText) props.setAttributes (text: newText); return el (RichText , tagName: 'div', className: props.className, onChange: onChangeText, valeur: content, isSélectionne: props.isSelected, style: blockStyle);, enregistrez: function (props) var text = props.attributes. text; return el ('div', style: blockStyle, className: props.className, text);,);
Bloc dynamique
Le bloc dynamique aura le modifier méthode, mais le enregistrer la méthode retournera nul. Nous n'avons pas besoin de enregistrer méthode ici parce que nous allons définir une fonction de rappel PHP pour rendre le bloc dynamique sur le front.
Nous avons enregistré un rappel guten_tuts_dynamic_alert avant:
 'guten_tuts_dynamic_alert')); //… 
Ce rappel recevra également un paramètre attributs $. Ce sera un tableau de tous les attributs enregistrés. Le comportement est très similaire à l'enregistrement d'un shortcode.
La fonction guten_tuts_dynamic_alert ressemblera à ceci:
 
 La sortie est juste un div élément avec du texte.
Autant que je sache, nous ne pouvons pas utiliser RichText pour les blocs dynamiques car les attributs ne sont pas mis à jour. Si je me trompe, faites le moi savoir dans les commentaires!
Nous allons utiliser un régulier contribution pour entrer le texte de l'alerte. Puisque nous n'avons pas de enregistrer méthode ici, j'ai défini l'attribut texte comme une simple chaîne.
registerBlockType ('guten-tuts / alertdynamic', titre: __ ('Guten Tuts - Alerte dynamique'), icône: 'mégaphone', catégorie: 'mise en page', attributs: texte: type: 'chaîne', sélecteur: 'div',,, edit: function (props) var content = props.attributes.text; blockStyle ['width'] = '100%'; fonction onChangeText (e) var newText = e.target.value ; props.setAttributes (text: newText); return el ('input', className: props.className + 'widefat', onChange: onChangeText, valeur: content, estSélectionné: props.isSélectionné, style: blockStyle) ;, save: function (props) return null;,);
Vous verrez un habitué contribution qui a une couleur de fond et un style différent du Texte riche bloc. Bien sûr, vous pouvez changer cela et imiter les mêmes styles.
Puisque notre alerte PHP rendue a une couleur de fond différente de celle définie dans notre code JavaScript, nous pouvons également voir la différence sur la face avant..
Conclusion
Préparer votre plugin pour Gutenberg peut demander beaucoup de travail. Mais comme Gutenberg est aussi extensible que le reste de WordPress, vous avez beaucoup de flexibilité pour prendre en charge les fonctionnalités de votre plugin dans Gutenberg..
Commencez dès aujourd'hui en installant Gutenberg et en le testant par rapport à votre plugin. 



		
			
	   
	




Code