Ajouter des points d’entrée au script de bloc de création WordPress

Lorsque vous créez un bloc pour la première fois avec le script de création de bloc WordPress, npm init @wordpress/blockil vous fournit un point d’entrée vers /src/index.js, que vous pouvez utiliser pour compiler tous vos éléments et styles basés sur des blocs.

Parfois, vous souhaitez ajouter d’autres points d’entrée, par exemple, vous pouvez utiliser des blocs WordPress Block Editor (Gutenberg) ailleurs dans l’éditeur, par exemple sur une page de paramètres ou dans le personnalisateur.

Ce guide vous aide à étendre le WordPress Create Block Script webpack.configafin que vous puissiez ajouter ces points d’entrée supplémentaires.

Conditions préalables

• Familiarisez-vous avec la création de plugins pour WordPress Gutenberg avec le script de bloc de création

Créez vos fichiers

Suite au guide de création de script de bloc, nous allons créer quelques fichiers dans notre solution :

Créer/src/admin.js

Ce fichier sera le point d’entrée principal pour tout React que nous souhaitons ajouter à l’écran d’administration de WordPress (par exemple, si nous voulions créer une page d’options pour contrôler nos paramètres avec Gutenberg Components.

Créez le fichier /src/admin.jset collez-y le code suivant :

import { __ } from '@wordpress/i18n';
import api from '@wordpress/api';

import './admin.scss';

Nous ne faisons vraiment rien dans ce dossier pour l’instant, cela fera l’objet de guides ultérieurs. Pour l’instant, nous mettons simplement du code afin de pouvoir tester la sortie.

Il importe cependant le /src/admin.scssfichier, qui se compilera pour contenir tous nos CSS personnalisés pour l’administrateur WordPress.

Créer/src/admin.scss

Créez le fichier /src/admin.scsset ajoutez quelques tests SCSS :

body {
  background: pink;
}

Encore une fois, ce code ne sert à rien, sauf à tester si le SCSS est compilé.

Créer/webpack.config.js

Créez un fichier à la racine de votre plugin appelé webpack.config.jsnous verrons ce qu’il faut mettre dans ce fichier sous peu.

Modifier le fichier PHP racine du plugin

Si vous avez suivi le guide précédent, ce plugin s’appellera wholesome-plugin.php.

Dans ce fichier, nous voulons enregistrer les scripts pour la zone d’administration, qui seront produits par notre configuration webpack. Ajoutez la fonction suivante au bas de ce fichier :

function wholesomecode_wholesome_plugin_admin_scripts() {
    $dir = __DIR__;

    $script_asset_path = "$dir/build/admin.asset.php";
    if (! file_exists( $script_asset_path)) {
        throw new Error(
            'You need to run `npm start` or `npm run build` for the "wholesomecode/wholesome-plugin" block first.'
        );
    }
    $admin_js     = 'build/admin.js';
    $script_asset = require( $script_asset_path );
    wp_register_script(
        'wholesomecode-wholesome-plugin-admin-editor',
        plugins_url( $admin_js, __FILE__ ),
        $script_asset['dependencies'],
        $script_asset['version']
    );
    wp_set_script_translations( 'wholesomecode-wholesome-plugin-block-editor', 'wholesome-plugin' );

    $admin_css = 'build/admin.css';
    wp_enqueue_style(
        'wholesomecode-wholesome-plugin-admin',
        plugins_url( $admin_css, __FILE__ ),
        ['wp-components'],
        filemtime( "$dir/$admin_css") );
}
add_action( 'admin_enqueue_scripts', 'wholesomecode_wholesome_plugin_admin_scripts', 10 );

Nous avons à peu près copié le code du bloc de mise en file d’attente précédent, mais l’avons rendu pertinent pour nos fichiers de sortie attendus de /build/admin.jset /build/admin.css. Notez que nous chargeons également le /build/admin.asset.phpfichier spécialement généré, qui ajoutera automatiquement toutes les dépendances de l’éditeur de blocs WordPress (Gutenberg) pour notre script d’administration.

Modifier lewebPack.config

A l’étape 2 nous avons créé le fichier webpack.config.js, dans ce fichier ajoutez le code suivant :

const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const path = require( 'path' );

module.exports = {
    ...defaultConfig,
    entry: {
        ...defaultConfig.entry,
        admin: path.resolve( process.cwd(), 'src', 'admin.js' ),
    }
};

Ce code importe le fichier webpack.configfrom @wordpress/scripts. Il s’agit du code qui s’exécute à chaque fois que vous exécutez npm startvotre solution.

Tout ce que nous faisons est de prendre cette configuration et d’ajouter un autre point d’entrée, avec la ligne admin: path.resolve( process.cwd(), 'src', 'admin.js' ),.

Le reste du code indique simplement à Webpack d’utiliser les paramètres déjà en place (par exemple ...defautConfig, ...defaultConfig.entry).

Compiler le code

Compilez votre plugin avec la npm startcommande, et regardons ce qui se passe :

Compilation du code avec le nouveau point d’entrée

Le script génère maintenant de nouveaux fichiers pour nous :

• /build/admin.assets.php— Ce fichier PHP est généré automatiquement lors de la /srccompilation du dossier. Il contient un tableau de toutes les décences JavaScript de l’éditeur WordPress (Gutenberg) utilisées par votre nouveau point d’entrée. Il est mis en file d’attente via le wholesome-plugin.phpfichier de chargement principal via la fonction supplémentaire que nous avons mise en place.

• /build/admin.css— Il s’agit du fichier CSS d’administration, et il est mis en file d’attente via le wholesome-plugin.phpfichier de chargement principal via la fonction supplémentaire que nous avons mise en place.

• /build/admin.js— Il s’agit du fichier JavaScript compilé principal, et il est mis en file d’attente via le wholesome-plugin.phpfichier de chargement principal via la fonction supplémentaire que nous avons mise en place.

• /build/admin.css.map— Ce fichier n’est généré que lorsque vous compilez les actifs pour le mode de développement (IE que vous exécutez npm startet non npm buildlorsque vous compilez vos actifs. C’est un fichier utile pour les débogueurs pour aider à identifier les noms de fichiers et les numéros de ligne dans le CSS si des erreurs se produisent.

• /build/admin.js.map— Ce fichier n’est généré que lorsque vous compilez les actifs pour le mode de développement (c’est-à-dire que vous exécutez npm startet non npm buildlorsque vous compilez vos actifs. C’est un fichier utile pour les débogueurs JavaScript pour aider à identifier les noms de fichiers et les numéros de ligne si des erreurs se produisent.

• Regardez comment utiliser les champs post-méta dans les blocs Gutenberg

• Regardez comment utiliser les options et les paramètres dans les blocs Gutenberg

• Regardez comment créer des méta-boîtes personnalisées dans Gutenberg

• Envisagez de créer une page d’options et de paramètres à l’aide de composants Gutenberg