Gérer les métadonnées WordPress dans Gutenberg à l'aide d'un plugin de barre latérale

Cet article explore la gestion des métadonnées WordPress au sein de l'éditeur de Gutenberg à l'aide d'un plugin de barre latérale. Gutenberg, l'éditeur de blocs de WordPress, représente les publications comme une collection de blocs. Bien que les métadonnées puissent être gérées à l'aide de blocs, cet article se concentre sur la gestion des barres latérales pour son utilisation fréquente. Le tutoriel assume la familiarité avec ReactJS et Redux, car Gutenberg utilise fortement ces technologies.

Le noyau de Gutenberg est une application React. Tous les éléments des éditeurs - titre de poteau, zone de contenu, barre d'outils et barre latérale - sont des composants réagis. L'état d'application est stocké dans des objets JavaScript centralisés ("Stores") gérés par le module de données de WordPress, qui partage des similitudes avec Redux. Ces magasins contiennent des données publiques (contenu, titre, catégories) et des informations mondiales sur le site Web (catégories, balises, publications). La modification de ces magasins met à jour l'interface utilisateur Gutenberg et, lors de l'enregistrement, l'API WordPress REST met à jour la base de données.

Cependant, Gutenberg ne gère pas les métadonnées via ces magasins mondiaux par défaut. Alors que les métaboxes PHP hérités fonctionnent toujours, WordPress recommande de les migrer vers une approche JavaScript utilisant des magasins globaux et des composants de réaction pour une expérience unifiée.

Accéder et modifier les magasins de type Redux de Gutenberg

Pour accéder à ces magasins, ouvrez la console de votre navigateur dans l'éditeur de Gutenberg et utilisez wp.data . Par exemple, wp.data.select('core/editor').getBlocks() récupère les blocs dans le message actuel. wp.data.select('core/editor').getEditedPostAttribute('title') récupère le titre du post. Pour modifier les données, utilisez wp.data.dispatch() . Par exemple, wp.data.dispatch('core/editor').editPost({title: 'My new title'}) met à jour le titre de publication. Les autres magasins pertinents incluent core (Global Site Web Information) et core/edit-post (Editor UI State).

Création d'un plugin WordPress pour une barre latérale Gutenberg

Pour ajouter un composant de la barre latérale React, créez un plugin WordPress. Cela implique la configuration d'un dossier de plugin (par exemple, gutenberg-sidebar ), créant un fichier plugin.php (le point d'entrée du plugin) et en utilisant npm pour gérer les dépendances JavaScript ( @wordpress/scripts , @wordpress/edit-post , @wordpress/plugins , @wordpress/i18n , @wordpress/components , @wordpress/data ). Le plugin.php en file le bundle JavaScript créé par npm run build .

Enregistrement d'un plugin et d'une barre latérale Gutenberg

Le code JavaScript (dans src/index.js ) utilise registerPlugin à partir de @wordpress/plugins pour enregistrer un plugin. PluginSidebar et PluginSidebarMoreMenuItem à partir de @wordpress/edit-post Créez la barre latérale et un élément de menu pour le basculer.

Gestion des métadonnées dans l'éditeur classique

Le tutoriel montre la gestion des métadonnées dans l'éditeur classique à l'aide de métaboxes et de fonctions PHP comme add_meta_box , get_post_meta , update_post_meta et wp_verify_nonce . L'option __back_compat_meta_box masque le métabox lorsque Gutenberg est actif.

Gérer les métadonnées avec JavaScript

Pour gérer les champs personnalisés (par exemple, _myprefix_text_metafield ) dans Gutenberg à l'aide de JavaScript, enregistrez le champ à l'aide register_meta avec show_in_rest: true , a sanitize_callback et un auth_callback pour permettre des mises à jour API REST. Utilisez wp.data.select('core/editor').getEditedPostAttribute('meta') pour récupérer et wp.data.dispatch('core/editor').editPost({meta: {_myprefix_text_metafield: 'new value'}}) pour mettre à jour les métadonnées.

Création d'un composant React

Un composant React ( PluginMetaFields ) est créé à l'aide PanelBody et TextControl à partir de @wordpress/components . withSelect et withDispatch à partir de @wordpress/data connectez le composant au magasin de type Redux, permettant la récupération et les mises à jour des données. L'événement onChange envoie des mises à jour du magasin. Enfin, un composant ColorPicker est ajouté pour démontrer à l'aide d'autres composants de @wordpress/components . Le code complet est disponible sur GitHub.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!