Ajout d'un guide de bienvenue personnalisé à l'éditeur de blocs WordPress

Cet article détaille la création d'un plugin WordPress qui fournit une documentation dans l'application, en évitant la nécessité de liens externes pour séparer la documentation. La solution intègre un guide utile directement dans l'éditeur de blocs WordPress, accessible tandis que les utilisateurs travaillent activement avec le plugin.

Le plugin utilise des types de publication personnalisés (CPTS) et un composant de guide de style modal. Le défi réside dans l'intégration de ce guide de manière transparente dans l'éditeur sans perturber le flux de travail de l'utilisateur.

L'objectif: Le plugin, un serveur GraphQL pour WordPress, est édité par CPTS via des blocs personnalisés ("Graphiql Client" et "Options de requête persistantes"). Étant donné que la création de requête GraphQL peut être complexe, un guide intégré est crucial. Ce guide, consulté via un panneau dans les paramètres du document ("Guide de bienvenue"), fournit une vidéo de tutoriel et des instructions détaillées sur plusieurs pages.

Étapes de mise en œuvre:

1. Création du script: le processus commence par échafaudage un nouveau script pour enregistrer un panneau de barre latérale personnalisé dans les paramètres de document de l'éditeur. L'auteur rencontre initialement des défis en utilisant le composant PluginDocumentSettingPanel en raison de la nécessité d'une étape de construction JavaScript (ESNEXT / JSX). La solution consiste à exploiter le package @wordpress/create-block pour échafauner un bloc, puis à modifier le code généré pour enregistrer un script régulier à la place. Cela permet une compilation ESNext via WebPack. Un détail clé consiste à ajouter une dépendance au script wp-edit-post pour assurer un chargement approprié de la variable wp.editPost .

2. Restriction du panneau: Pour empêcher le panneau d'apparaître sur les CPT non apparentés, l'auteur met en œuvre une solution basée sur PHP. Cette méthode vérifie le type de poste actuel à l'aide get_editing_post_type() et enregistre uniquement le script s'il correspond à la cible CPT. Il s'agit d'une approche plus efficace que d'utiliser JavaScript pour rendre conditionnellement le panneau.

3. Construire le guide: le guide lui-même est construit en utilisant le wordpress<guide></guide> composant et son associé<guidepage></guidepage> pour la pagination. L'auteur détaille le processus de découverte de ce composant grâce à la recherche de code et à l'exploration du livre de contes Gutenberg. Le guide comprend un tutoriel vidéo (hébergé en externe) et des pages suivantes avec des instructions détaillées.

4. Intégration du contenu: le contenu du guide est structuré en utilisant<guidepage></guidepage> Composants, chacun contenant du HTML, incluant potentiellement d'autres composants personnalisés. L'auteur note des problèmes mineurs tels que les limitations vidéo de l'intégration<guide></guide> Composant et le besoin d'améliorations CSS.

Bonus: accès indépendant sur la documentation:

L'auteur montre comment créer des composants réutilisables pour la documentation. Un composant CacheControlDescription , par exemple, peut être utilisé à la fois dans le guide et un modal distinct, améliorant l'expérience utilisateur. Le rendu conditionnel du bouton d'accès de la documentation en fonction de la sélection des blocs améliore la convivialité.

Conclusion:

Cette procédure détaillée présente efficacement le développement d'un système de documentation intégré dans l'application au sein de l'éditeur de blocs WordPress. L'expérience de l'auteur met en évidence l'importance de comprendre React et l'architecture de l'éditeur de blocs WordPress pour le développement de plugins réussi. La solution fournit un modèle pratique et réutilisable pour d'autres développeurs de plugins cherchant à améliorer l'intégration et la prise en charge des utilisateurs.

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!