Comment rendre votre plug – in compatible avec Gutenberg: Partie 2 (API de barre latérale)
Si vous essayez de rendre le plug – in compatible avec Gutenberg, vous pouvez \/ devriez prendre deux chemins, selon la fonctionnalité du plug – in et la façon dont il fournit ses fonctionnalités aux utilisateurs. Dans la première partie de cette mini – série, nous explorons l’API Gutenberg Block, dont la plupart des plug – ins ont besoin pour la compatibilité Gutenberg. Cette fois, nous explorerons une autre partie du puzzle Gutenberg: l’API Gutenberg Sidebar. Pour vous assurer d’être sur la même page, il y a une explication rapide: l’API Block de Gutenberg est très large et vous permet de construire presque tout en blocs, mais parfois ce n’est pas suffisant. D’autre part, l’API de barre latérale permet au plug – in d’enregistrer la barre latérale, où le plug – in peut étendre sa fonctionnalité au – delà du bloc. La barre latérale est similaire à l’inspecteur de bloc. 
Comment rendre votre plug – in # WordPress compatible avec l’api # Gutenberg – Mastering Sidebar # cliquez sur Twitter par exemple, l’api # Gutenberg Sidebar actuellement utilisée démontrée par yoast SEO: 
Où puis – je utiliser l’API de la barre latérale? Nous avons récemment travaillé dur pour préparer notre plug – in, WP Product Review, pour Gutenberg. L’examen des produits du WP utilise des métachamps pour ajouter des données d’audit aux messages que nous n’avons pas pu convertir en blocs pour diverses raisons de compatibilité avec les versions précédentes. Nous avons donc utilisé l’API Sidebar. Voici les blocs plug – in de l’éditeur classique:
L’examen du produit Wp est l’un des exemples disponibles pour l’API Sidebar. Un autre bon exemple est drop it plugin C
Champ de l’élément objet dans l’API rest.
Cette fonction n’est utilisée que pour afficher nos valeurs dans l’API rest. Nous devons maintenant ajouter une méthode pour mettre à jour les métachamps en utilisant l’API rest. Le code suivant ajoute notre chemin personnalisé à l’api WordPress rest sous \/ Hello Gutenberg \/ V1 \/ update Meta \/: \/ * *
Enregistrer Hello Gutenberg metabox pour l’API rest
* \/
Hello _ Gutenberg API posts Meta Field () {
Register _ rest Routing
\
« méthode» = > « publication»,
« callback» = > « Hello _ Gutenberg Update callback»,
\
\
« sanitize _ callback» = > « absent»,
()
()
()
);
}
Ajouter _ action (‘rest API init’, ‘Hello Gutenberg API posts Meta Field’);
\/ * *
Hello Gutenberg rest API Callback for Gutenberg
* \/
Hello _ Gutenberg Update Callback ($Data) {
Retourner la mise à jour _ post Meta ($data [‘ID], $data [‘ key], $data [‘value]);
Ce chemin API rest est utilisé pour modifier les métachamps dans la barre latérale Gutenberg. Vous pouvez en savoir plus sur l’api WordPress rest et sur la façon d’enregistrer les chemins personnalisés ici.
Encore une fois, si vous voulez savoir ce qu’est l’api WordPress rest et comment commencer, vous pouvez lire notre blog: l’api WordPress rest: qu’est – ce que c’est et comment commencer à l’utiliser. Allez en haut et ajoutez des blocs de bordure à Gutenberg commençons par le Code de bordure du modèle Gutenberg:
Bibliothèque de blocs internes
* \/
Constante uwp. I18n;
Constante {fragment} = WP. Éléments
Coût
Module de barre latérale,
Barre latérale du plug – in autres menus voix,
= WP. Modifier les messages;
Constante {registerplugin} = WP. Plug – in;
Composant constant = () = >
<input type="text" name="hello_gutenberg_field" value=" (Hello world!)}
);
Registerplugin (‘Gutenberg Boilerplate’
Icône: \
Rendu: composants,
}); Ceci insère une barre latérale très simple dans l’éditeur
Love used in the previous post. Le plug – in d’enregistrement enregistre le plug – in, pas le bloc d’enregistrement. Jusqu’à présent, ajouter des contrôles notre barre latérale n’est qu’une fonction de composant, mais comme nous allons utiliser la méthode du cycle de vie de React, nous allons la convertir en composant React comme suit: la classe Hello _ Gutenberg étend le composant {
Render () {
Retour (
(Hello Gutenberg)}
(Hello world!)}
()
}
}
Registerplugin (‘Ciao Gutenberg’)
Icône: \
Rendu: Hello _ Gutenberg,
}); Cela permettra aux barres latérales d’utiliser du texte simple. Maintenant, ajoutons les champs à la barre latérale. Il devrait ressembler à: classe Hello _ Gutenberg extension Component {
Render () {
Retour (
(Hello Gutenberg)}
()
}
} ceci ajoutera un champ d’entrée simple dans la barre latérale et il ne fonctionnera pas du tout. Il nous reste maintenant deux tâches: afficher les valeurs des métachamps. Permet de mettre à jour la valeur du métachamp à partir de la barre latérale. Voir les métadonnées pour récupérer les métadonnées, nous utiliserons WP. Apifetch. Apifetch est une bibliothèque d’utilitaires qui nous permet d’émettre des demandes d’api rest. Nous utiliserons apifetch dans React Component Builder comme suit: class Hello _ Gutenberg extension Component {
Constructeur () {
Super (…) paramètre;
Celui – là. État = {
Clé: \
Valeur: \
}
WP. Apifetch ({Path: ` \/ WP \/ v2 \/ posts \/ ${this.props.postid} ‘, Method:’ get ‘}). Alors (
(données) = >
Voilà. Définir l’état
Valeur: date. Yuan Bar _ Bonjour _ Gutenberg Field
});
Retourner les données;
},
(erreur) = {
Erreur retournée;
}
);
}
Render () {
Retour (
(Hello Gutenberg)}
()
}
Premièrement, nous avons
Ou définir un état initial qui est essentiellement la clé et la valeur de notre métachamp. Ensuite, nous utilisons apifetch pour récupérer les données du post actuel. Nous passons l’ID du message actuel avec la variable ${this.props.postid}. Nous en reparlerons plus tard. Une fois les données récupérées, nous mettrons à jour l’état en utilisant les valeurs de l’API rest. Revenons maintenant à la variable postId. Pour le moment, nous ne connaissons pas l’ID du message actuel, donc nous utilisons l’ordre supérieur avec select comme suit: Const hoc = avec select ((select) = >
Const {getcurrentpostid} = select (‘CORE \/ editor’);
Retour à {
PostId: getcurrentpostid (),
};
}) (Bonjour, Gutenberg);
Registerplugin (‘Ciao Gutenberg’)
Icône: \
Rendu: hoc,
}); Ceci passe l’ID du message courant comme variable postId. Maintenant que vous pouvez lancer le post précédent, notre barre latérale Gutenberg affichera la valeur de votre métachamp. Mettre à jour les méta – valeurs maintenant, nous devons permettre à la barre latérale de mettre à jour les méta – valeurs. Comme pour les détails de récupération, nous utiliserons l’utilitaire WP. Apiresquest. Chaque fois que la valeur de l’état change, nous la mettons à jour en utilisant l’API rest. Pour ce faire, nous devons d’abord ajouter l’événement onChange à textcontrol comme suit: {Y}
Voilà. Définir l’état
Valeur
});
}
Ensuite, nous enverrons une demande de repos en utilisant la méthode getdrivedstatefromprops Lifecycle. Vous pouvez ajouter le code suivant sous le constructeur: getderivedstatefromprops (nextrops, State) {
WP. Apiresquest ({Path: ` \/ Hello Gutenberg \/ V1 \/ update Meta? Id = ${nextrops.postid} ‘, Method:’ post ‘, data: Status}). Alors (
(données) = >
Retourner les données;
},
(erreur) = {
Erreur retournée;
}
);
} chaque fois que nous changeons un métachamp d’un champ, il met à jour le métachamp. Vous devriez maintenant voir un problème avec cette approche.
Maman. Encore une fois, c’est un petit exemple de ce que vous pouvez faire avec l’API de barre latérale Gutenberg. Vous pouvez créer beaucoup de choses étonnantes avec Gutenberg et ses API. En savoir plus: Tutoriels Gutenberg pour les développeurs débutants comment utiliser le nouvel éditeur de bloc WordPress – WordPress Gutenberg aide à créer une page d’options plug – in avec des composants Gutenberg voir nos autres tutoriels API: récupérer l’api JavaScript Google Maps API pour les développeurs débutants que voulez – vous faire avec Gutenberg? Faites – nous savoir. Comment rendre votre plugin # WordPress compatible avec # Gutenberg – Mastering Sidebar # API Click to tweet… N’oubliez pas de vous joindre à notre cours d’accélération pour accélérer votre site WordPress. Avec quelques corrections simples, vous pouvez réduire le temps de chargement de 50 à 80%: