Au fil des ans, nous avons exploré Gutenberg sous de nombreux angles. Nous avons disséqué les fonctionnalités de l’éditeur, les avons comparées à celles d’autres constructeurs de pages, avons construit des blocs personnalisés statiques et dynamiques, et bien plus encore.
Avec les dernières versions de WordPress, de nouvelles fonctionnalités et de nouveaux outils vous permettent de créer des mises en page complexes plus facilement en enrichissant et en améliorant les fonctionnalités de l’éditeur de blocs sans avoir besoin de construire des blocs personnalisés.
Grâce à l’introduction de compositions de blocs et d’outils de développement tels que l’API Block Bindings, les cas d’utilisation de blocs personnalisés sont moins nombreux. Vous pouvez désormais créer des structures de blocs complexes, injecter des valeurs de métadonnées dans votre contenu et automatiser une bonne partie de votre flux de travail sans quitter l’interface de l’éditeur. En bref, aujourd’hui, WordPress vous permet de créer des sites complexes en aussi peu de clics qu’auparavant.
L’ajout de commandes et d’outils personnalisés à l’éditeur peut contribuer à rendre le processus de création de contenu plus fluide. Par exemple, vous pouvez avoir besoin d’ajouter un panneau à la colonne latérale de publication pour ajouter des fonctionnalités ou créer une colonne latérale personnalisée pour gérer plusieurs champs méta.
C’est parti !
Comment créer un plugin d’éditeur de blocs sans créer de bloc personnalisé ?
WordPress fournit un outil de ligne de commande pratique qui vous permet d’installer un environnement de développement Node.js local avec tous les fichiers et dépendances nécessaires pour créer un bloc personnalisé. Il suffit de saisir npx @wordpress/create-block dans l’outil de ligne de commande, d’attendre quelques secondes, et le tour est joué.
Cependant, l’échafaudage d’un bloc personnalisé n’est pas nécessaire lorsque vous avez seulement besoin d’ajouter une colonne latérale ou un simple panneau de réglages. Dans ce cas, vous devez créer une extension Gutenberg.
WordPress ne fournit pas d’utilitaire pour automatiser le processus de création d’une exwtension pour Gutenberg, vous devez donc le faire manuellement. Mais ne vous inquiétez pas outre mesure. Le processus est relativement simple, et nous allons vous guider à travers lui. Voici les étapes à suivre :
1. Télécharger et installer un environnement de développement local
Chaque chose en son temps : Bien que vous puissiez développer votre extension Gutenberg dans un environnement distant, il peut être plus pratique pour vous d’installer localement un site WordPress de développement. Vous pouvez utiliser n’importe quel environnement basé sur PHP et MySQL. Parmi les nombreuses alternatives disponibles sur le marché, nous vous recommandons DevKinsta. Il est gratuit, doté de toutes les fonctionnalités, facile à utiliser et 100 % compatible avec l’hébergement Kinsta.
Une fois votre site de développement configuré, vous êtes prêt à créer une extension d’éditeur de blocs Gutenberg.
2. Télécharger et installer Node.js et npm.
Téléchargez Node.js depuis nodejs.org et installez-le sur votre ordinateur. Cela permettra également d’installer npm, le gestionnaire de paquets de Node.
Une fois que vous avez fait cela, lancez votre outil de ligne de commande et exécutez node -v et npm -v. Vous devriez voir les versions installées de Node.js et de npm.
3. Créer le dossier de votre plugin
Créez un nouveau dossier sous wp-content/plugins et renommez-le my-sidebar-plugin ou quelque chose de similaire. N’oubliez pas que ce nom doit refléter le nom de votre extension.
Ouvrez le terminal, naviguez jusqu’au dossier de l’extension et initialisez un projet npm avec la commande suivante :
npm init -yCela créera un fichier de base package.json.
4. Installer les dépendances
Dans votre outil de ligne de commande, saisissez la commande suivante :
npm install @wordpress/plugins @wordpress/scripts --save-dev@wordpress/pluginsinstalle le modulepluginspour WordPress.@wordpress/scriptsinstalle une collection de scripts réutilisables pour le développement de WordPress.
Un nouveau dossier node_modules devrait avoir été ajouté à votre projet.
Maintenant, ouvrez votre package.json et mettez à jour le scripts comme suit :
{
"name": "my-sidebar-plugin",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"build": "wp-scripts build",
"start": "wp-scripts start"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"devDependencies": {
"@wordpress/plugins": "^7.14.0",
"@wordpress/scripts": "^30.7.0"
}
}Vous pouvez maintenant vérifier le dossier de l’extension :
5. Créer les fichiers du plugin
Dans le répertoire de votre extension, créez un nouveau fichier .php et donnez-lui le même nom que votre dossier. Dans notre exemple, il s’agit de my-sidebar-plugin.php.
Ouvrez le fichier et collez le code suivant pour enregistrer l’extension sur le serveur :
<?php
/**
* Plugin Name: My Sidebar Plugin
*/
function my_sidebar_plugin_register_script() {
wp_enqueue_script(
'my_sidebar_plugin_script',
plugins_url( 'build/index.js', __FILE__ ),
array( 'wp-plugins', 'wp-edit-post' ),
filemtime( plugin_dir_path( __FILE__ ) . 'build/index.js' )
);
}
add_action( 'enqueue_block_editor_assets', 'my_sidebar_plugin_register_script' );Ensuite, créez un dossier src dans le répertoire de votre extension. Dans ce dossier, créez un nouveau fichier index.js avec le code suivant :
import { registerPlugin } from '@wordpress/plugins';
import { PluginSidebar } from '@wordpress/edit-post';
const MyPluginSidebar = () => (
<PluginSidebar
name="my-sidebar-plugin"
title="My Sidebar Plugin"
>
<div>
Hello my friends!
</div>
</PluginSidebar>
);
registerPlugin( 'my-sidebar-plugin', {
render: MyPluginSidebar,
} );6. Compiler le code
Il ne manque plus que la compilation. Retournez à la ligne de commande et exécutez la commande suivante :
npm run buildCela crée un dossier build avec les fichiers compressés du projet.
Lorsque c’est fait, naviguez vers l’écran Extensions dans votre tableau de bord WordPress et activez l’extension. Créez un nouvel article ou une nouvelle page et cliquez sur l’icône de l’extension dans le coin supérieur droit pour afficher votre colonne latérale personnalisée.
7. Développer et construire
Nous avons placé le fichier index.js dans le dossier src. L’utilisation d’un dossier src est une convention courante dans le développement d’extensions et de thèmes WordPress, ce qui rend votre code plus facile à comprendre pour les autres développeurs.
En plaçant votre code JS dans le dossier src, vous pouvez utiliser la commande npm start ou npm run start pour démarrer un environnement de développement qui surveille les scripts et recompile automatiquement le code si nécessaire. Lorsque tu aurez terminé le développement, la commande npm build ou npm run build compilera le code JavaScript dans le dossier build, qui contiendra le code optimisé pour la production.
Maintenant, mettons en pratique ce que nous avons appris et modifions l’extension que nous avons créé dans la section précédente pour ajouter un nouveau panneau à la colonne latérale de l’éditeur d’articles afin de gérer les champs personnalisés.
Comment créer une colonne latérale supplémentaire pour gérer les champs méta des articles ?
Notre objectif est de créer une colonne latérale personnalisée qui contient un panneau avec un seul champ de texte pour ajouter et modifier un champ méta personnalisé.
Avant de nous lancer, nous devons mentionner que nous pourrions utiliser une boîte méta personnalisée pour obtenir le même résultat. Avec WordPress 6.7, les boîtes méta ont reçu une mise à niveau et sont maintenant entièrement compatibles avec l’éditeur de blocs, donc vous pouvez vous demander pourquoi gérer les champs méta à partir d’une colonne latérale personnalisée plutôt que d’une boîte méta. La raison en est qu’une colonne latérale vous permet de profiter des composants intégrés. Cela vous aide à construire des interfaces plus conviviales avec des contrôles puissants qui devraient également être familiers aux utilisateurs.
Ceci étant dit, voici le processus de création d’une colonne latérale personnalisée qui vous permet de gérer les champs personnalisés à partir de l’éditeur.
my-sidebar-plugin.php
Étape 1 : Enregistrer le méta de l’article
Tout d’abord, vous devez enregistrer le champ méta. Ajoutez le code suivant au fichier principal de l’extension :
function my_sidebar_plugin_register_meta() {
register_post_meta(
'post',
'meta_fields_book_title',
array(
'show_in_rest' => true,
'type' => 'string',
'single' => true,
'sanitize_callback' => 'sanitize_text_field',
'label' => __( 'Book title', 'my-sidebar-plugin' ),
'auth_callback' => function() {
return current_user_can( 'edit_posts' );
}
)
);
}
add_action( 'init', 'my_sidebar_plugin_register_meta' );La fonction register_post_meta accepte trois arguments :
- Le type de publication pour lequel une clé méta doit être enregistrée. Si la chaîne est vide, la clé méta sera enregistrée pour tous les types de publications existants.
- La clé méta à enregistrer. Notez que nous n’utilisons pas de trait de soulignement au début de la clé méta. Le fait de faire précéder la clé méta d’un trait de soulignement masquerait le champ personnalisé, de sorte que vous pourriez vouloir l’utiliser dans une boîte méta. Cependant, le fait de masquer le champ personnalisé empêcherait l’utilisation du champ méta via l’API Block Bindings dans le contenu de l’article.
- Un tableau d’arguments. Notez que vous devez définir
show_in_restsurtrue. Cela expose le champ méta à l’API Rest et nous permet de lier le champ méta aux attributs de bloc. Pour les autres attributs, voir la référence de la fonction.
Étape 2 : Enregistrer le champ méta
Pour assurer la compatibilité ascendante de votre extension, vous devez enregistrer une boîte méta personnalisée pour permettre aux utilisateurs de gérer tes champs personnalisés, même s’ils utilisent l’éditeur classique. Ajoutez le code suivant au fichier PHP de votre extension :
/**
* Register meta box
*
* @link https://developer.wordpress.org/reference/functions/add_meta_box/
*
*/
function my_sidebar_plugin_register_meta_box(){
add_meta_box(
'book_meta_box', // Unique ID
__( 'Book details' ), // Box title
'my_sidebar_plugin_meta_box_callback', // Content callback
array( 'post' ), // Post types
'advanced', // context
'default', // priority
array('__back_compat_meta_box' => true) // hide the meta box in Gutenberg
);
}
add_action( 'add_meta_boxes', 'my_sidebar_plugin_register_meta_box' );Déclarez maintenant le callback qui construit le formulaire :
/**
* Build meta box form
*
* @link https://developer.wordpress.org/reference/functions/wp_nonce_field/
* @link https://developer.wordpress.org/reference/functions/get_post_meta/
*
*/
function my_sidebar_plugin_meta_box_callback( $post ){
wp_nonce_field( 'my_sidebar_plugin_save_meta_box_data', 'my_sidebar_plugin_meta_box_nonce' );
$title = get_post_meta( $post->ID, 'meta_fields_book_title', true );
?>
<div class="inside">
<p><strong><?php echo __( 'Book title', 'my-sidebar-plugin' ); ?></strong></p>
<p><input type="text" id="meta_fields_book_title" name="meta_fields_book_title" value="<?php echo esc_attr( $title ); ?>" /></p>
</div>
<?php
}Ensuite, écrivez la fonction qui enregistre vos champs méta dans la base de données :
/**
* Save metadata
*
* @link https://developer.wordpress.org/reference/functions/wp_verify_nonce/
* @link https://developer.wordpress.org/reference/functions/current_user_can/
* @link https://developer.wordpress.org/reference/functions/sanitize_text_field/
* @link https://developer.wordpress.org/reference/functions/update_post_meta/
*
*/
function my_sidebar_plugin_save_meta_box_data( $post_id ) {
if ( ! isset( $_POST['my_sidebar_plugin_meta_box_nonce'] ) )
return;
if ( ! wp_verify_nonce( $_POST['my_sidebar_plugin_meta_box_nonce'], 'my_sidebar_plugin_save_meta_box_data' ) )
return;
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
return;
if ( ! current_user_can( 'edit_post', $post_id ) )
return;
if ( ! isset( $_POST['meta_fields_book_title'] ) )
return;
$title = sanitize_text_field( $_POST['meta_fields_book_title'] );
update_post_meta( $post_id, 'meta_fields_book_title', $title );
}
add_action( 'save_post', 'my_sidebar_plugin_save_meta_box_data' );Nous ne plongerons pas plus profondément dans ce code car cela dépasse le cadre de cet article, mais vous pouvez trouver toutes les informations dont vous avez besoin en suivant les liens dans les en-têtes des fonctions.
Enfin, nous devons mettre en file d’attente le fichier index.js de notre extension :
function my_sidebar_plugin_register_script() {
wp_enqueue_script(
'my_sidebar_plugin_script',
plugins_url( 'build/index.js', __FILE__ ),
array( 'wp-plugins', 'wp-edit-post' ),
filemtime( plugin_dir_path( __FILE__ ) . 'build/index.js' )
);
}
add_action( 'enqueue_block_editor_assets', 'my_sidebar_plugin_register_script' );C’est tout pour le fichier PHP. Ensuite, nous devons écrire le code JS.
index.js
Votre index.js se trouve dans le dossier src, qui est l’endroit où vous stockez vos fichiers JS pendant la phase de développement.
Ouvrez votre index.js et ajoutez les déclarations import suivantes :
import { __ } from '@wordpress/i18n';
import { registerPlugin } from '@wordpress/plugins';
import { PluginSidebar } from '@wordpress/editor';
import { PanelBody, PanelRow, TextControl } from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { useEntityProp } from '@wordpress/core-data';Vous avez besoin de ces ressources pour construire la colonne latérale avec les contrôles nécessaires.
Ensuite, vous devez construire le composant de la colonne latérale :
const MyPluginSidebar = () => {
const postType = useSelect(
( select ) => select( 'core/editor' ).getCurrentPostType(),
[]
);
const [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );
const bookTitle = meta ? meta[ 'meta_fields_book_title' ] : '';
const updateBookTitleMetaValue = ( newValue ) => {
setMeta( { ...meta, meta_fields_book_title: newValue } );
};
if ( postType === 'post' ) {
return (
<PluginSidebar
name="my-sidebar-plugin"
icon="book"
title="My plugin sidebar"
>
<PanelBody title="Book details" initialOpen={ true }>
<PanelRow>
<TextControl
value={ bookTitle }
label={ __( "Book title" ) }
onChange={ updateBookTitleMetaValue }
__nextHasNoMarginBottom
/>
</PanelRow>
</PanelBody>
</PluginSidebar>
);
}
};
registerPlugin( 'my-sidebar-plugin', {
render: MyPluginSidebar,
} );La fonction registerPlugin enregistre l’extension et rend le composant nommé MyPluginSidebar.
La fonction MyPluginSidebar déclare quelques constantes et renvoie le code JSX du composant.
useSelectest un crochet personnalisé qui permet de récupérer les accessoires des sélecteurs enregistrés. Nous l’avons utilisé pour obtenir le type de publication actuel. Voir aussi cet article du blog des développeurs de WordPress.useEntityProprenvoie un tableau de champs méta et une fonction setter pour définir de nouvelles valeurs méta. Voir aussi la référence en ligne.updateBookTitleMetaValueest un gestionnaire d’événements qui enregistre la valeur du champ métabookTitle.
Nous avons utilisé quelques composants intégrés pour construire notre colonne latérale :
PluginSidebarvous permet d’ajouter des éléments à la barre d’outils des écrans de l’éditeur d’articles ou de sites. (Voir la référence du composant.)PanelBodycrée un conteneur pliable qui peut être ouvert ou fermé. (Voir la référence du composant.)PanelRowest un conteneur générique pour les lignes d’un sitePanelBody. (Voir la référence du composant.)TextControlest un champ d’une seule ligne qui peut être utilisé pour la saisie de texte libre. (Voir la référence du composant.)
Lancez maintenant la commande npm run build, activez l’extension et créez un nouvel article. Une icône de nouveau livre doit apparaître dans la colonne latérale supérieure. En cliquant sur cette icône, vous afficherez la colonne latérale de votre extension.
Et si vous n’avez pas besoin d’une nouvelle colonne latérale mais que vous voulez afficher votre champ personnalisé dans la colonne latérale intégrée de l’article ? Il vous suffit de remplacer PluginSidebar par PluginDocumentSettingPanel. Voici votre nouveau fichier index.js:
import { __ } from '@wordpress/i18n';
import { registerPlugin } from '@wordpress/plugins';
import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
import { PanelBody, PanelRow, TextControl } from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { useEntityProp } from '@wordpress/core-data';
const MyPluginSidebar = () => {
const postType = useSelect(
( select ) => select( 'core/editor' ).getCurrentPostType(),
[]
);
const [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );
const bookTitle = meta ? meta[ 'meta_fields_book_title' ] : '';
const updateBookTitleMetaValue = ( newValue ) => {
setMeta( { ...meta, meta_fields_book_title: newValue } );
};
if ( postType === 'post' ) {
return (
<PluginDocumentSettingPanel
name="my-sidebar-plugin"
title="Book details"
className="my-sidebar-plugin"
>
<PanelRow>
<TextControl
value={ bookTitle }
label={ __( "Book title" ) }
onChange={ updateBookTitleMetaValue }
__nextHasNoMarginBottom
/>
</PanelRow>
</PluginDocumentSettingPanel>
);
}
};
registerPlugin( 'my-sidebar-plugin', {
render: MyPluginSidebar,
} );L’image suivante montre le résultat.
Un cas d’utilisation : une substitution de composition de bloc pour automatiser votre flux de travail.
Vous pouvez maintenant ajouter une valeur pour le champ personnalisé, et elle sera disponible via l’API Block Bindings pour être utilisée avec les attributs de bloc. Par exemple, vous pouvez ajouter un bloc Paragraphe à votre contenu et lier le champ personnalisé à l’attribut content du paragraphe.
Vous êtes libre de modifier la valeur de votre champ personnalisé, et ces changements seront automatiquement appliqués au contenu de votre paragraphe.
Si vous vous demandez si vous pouvez faire plus avec les champs personnalisés et les Block Bindings, la réponse est oui ! Les compositions de blocs et l’API Block Bindings vous permettent d’automatiser l’ensemble du processus de création de contenu.
Pour avoir un indice, créez un modèle avec au moins un titre ou un paragraphe. Dans cet exemple, nous créons une composition de bloc avec un bloc Colonnes, une image, un titre et quelques blocs Rangées, comprenant chacun deux paragraphes.
Une fois que vous êtes satisfait de votre mise en page, sélectionnez les éléments d’habillage et créez une composition synchronisée.
Ajoutez un nom et une catégorie pour la composition de bloc, et assurez-vous de la synchroniser.
Ensuite, si vous avez créé la composition dans l’éditeur d’article, sélectionnez-le et cliquez sur Modifier l’original dans la barre d’outils du bloc. Vous pouvez aussi vous rendre dans la section Compositions de l’éditeur de site et trouver la composition sous Mes compositions ou dans la catégorie de compositions que vous avez définie auparavant.
Ouvrez l’éditeur de code et trouvez le bloc que vous voulez lier à votre champ personnalisé. Dans le délimiteur de bloc, ajoutez le code suivant :
<!-- wp:heading {
"metadata":{
"bindings":{
"content":{
"source":"core/post-meta",
"args":{
"key":"meta_fields_book_title"
}
}
}
}
} -->
Enregistrez la composition et créez un nouvel article. Ajoutez la composition à votre contenu et définissez une valeur pour le champ personnalisé. Vous devriez voir cette valeur s’appliquer automatiquement à votre composition.
Maintenant, vous pouvez jouer avec cette extension. Grâce aux champs personnalisés et à l’API Block Bindings, vous pouvez ajouter d’autres champs et contrôles pour remplir automatiquement vos mises en page.
Résumé
Développer un bloc personnalisé peut s’avérer difficile. Mais avez-vous besoin de construire un bloc quand vous pouvez faire plus avec une composition de bloc ?
Avec les progrès des compositions de blocs et l’introduction de puissantes fonctionnalités pour les développeurs, telles que l’API Block Bindings, il n’est plus nécessaire de créer des blocs personnalisés pour construire des sites web sophistiqués et fonctionnels. Une simple extension et une composition de bloc peuvent effectivement automatiser une partie importante de votre flux de travail.
Ce tutoriel a montré comment ajouter des fonctionnalités à l’éditeur d’articles de WordPress grâce à une extension. Cependant, ce que nous avons couvert dans cet article ne fait qu’effleurer la surface de ce que vous pouvez accomplir avec les fonctions robustes que WordPress offre maintenant.
Avez-vous déjà exploré ces caractéristiques et ajouté des fonctionnalités à l’éditeur de WordPress ? Si oui, n’hésitez pas à partager vos expériences et vos réflexions dans la section des commentaires ci-dessous.
Carlo est un passionné de webdesign et de développement frontend. Il joue avec WordPress depuis plus de 10 ans, notamment en collaboration avec des universités et des établissements d'enseignement italiens et européens. Il a écrit des dizaines d'articles et de guides sur WordPress, publiés à la fois sur des sites web italiens et internationaux, ainsi que dans des magazines imprimés. Vous pouvez trouver Carlo sur X et LinkedIn.
Laisser un commentaire