Aggiungi punti di ingresso allo script Crea blocco di WordPress

Quando crei un blocco per la prima volta con lo script di creazione blocco di WordPress che utilizza npm init @wordpress/block, ti fornisce un punto di ingresso a /src/index.js, che puoi utilizzare per compilare tutte le tue risorse e stili basati su blocchi.

A volte vuoi aggiungere altri punti di ingresso, ad esempio, potresti voler utilizzare i blocchi di WordPress Block Editor (Gutenberg) altrove nell’editor, ad esempio in una pagina delle impostazioni o nel personalizzatore.

Questa guida ti aiuta a estendere lo script di creazione blocco di WordPress webpack.configin modo da poter aggiungere quei punti di ingresso aggiuntivi.

Prerequisiti

• Acquisisci familiarità con la creazione di plug-in per WordPress Gutenberg con lo script di creazione del blocco

Crea i tuoi file

Seguendo la guida allo script di creazione del blocco, creeremo alcuni file nella nostra soluzione:

Creare/src/admin.js

Questo file sarà il punto di ingresso principale per qualsiasi React che desideriamo aggiungere alla schermata di amministrazione di WordPress (ad esempio, se volessimo creare una pagina di opzioni per controllare le nostre impostazioni con Gutenberg Components.

Crea il file /src/admin.jse incolla il codice seguente:

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

import './admin.scss';

Non stiamo ancora facendo nulla in questo file, che sarà oggetto di guide successive. Per ora stiamo solo inserendo del codice in modo da poter testare l’output.

Tuttavia, importa il /src/admin.scssfile, che verrà compilato per contenere tutti i nostri CSS personalizzati per l’amministratore di WordPress.

Creare/src/admin.scss

Crea il file /src/admin.scsse aggiungi alcuni SCSS di prova:

body {
  background: pink;
}

Anche in questo caso, questo codice non serve a nulla, se non per verificare se l’SCSS viene compilato.

Creare/webpack.config.js

Crea un file nella radice del tuo plug-in chiamato tratteremo webpack.config.jsa breve cosa inserire in questo file.

Modifica il file PHP radice del plugin

Se hai seguito la guida precedente, quel plugin si chiamerà wholesome-plugin.php.

In questo file vogliamo registrare gli script per l’area di amministrazione, che verranno emessi dalla configurazione del nostro webpack. Aggiungi la seguente funzione in fondo a quel file:

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 );

Abbiamo praticamente copiato il codice dal precedente blocco di accodamento, ma l’abbiamo reso rilevante per i nostri file di output previsti di /build/admin.jse /build/admin.css. Nota che stiamo anche caricando il /build/admin.asset.phpfile appositamente generato, che aggiungerà automaticamente tutte le dipendenze dell’editor di blocchi di WordPress (Gutenberg) per il nostro script di amministrazione.

Modifica ilwebPack.config

Nel passaggio 2 abbiamo creato il file webpack.config.js, in questo file aggiungiamo il seguente codice:

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' ),
    }
};

Questo codice importa webpack.configda @wordpress/scripts. Questo è il codice che viene eseguito ogni volta che esegui npm startla tua soluzione.

Tutto ciò che stiamo facendo è prendere questa configurazione e aggiungere un altro punto di ingresso, con la linea admin: path.resolve( process.cwd(), 'src', 'admin.js' ),.

Il resto del codice sta solo dicendo a webpack di utilizzare le impostazioni che sono già in atto (ad esempio ...defautConfig, ...defaultConfig.entry).

Compila il codice

Compila il tuo plug-in con il npm startcomando e diamo un’occhiata a cosa succede:

Compilazione del Codice con il Nuovo Punto di Entrata

Lo script ora genera per noi alcuni nuovi file:

• /build/admin.assets.php— Questo file PHP viene generato automaticamente quando la /srccartella viene compilata. Contiene un array di tutte le decenze JavaScript di WordPress Editor (Gutenberg) utilizzate dal tuo nuovo punto di ingresso. Viene accodato tramite il wholesome-plugin.phpfile del caricatore principale tramite la funzione aggiuntiva che abbiamo messo in atto.

• /build/admin.css— Questo è il file CSS di amministrazione e viene accodato tramite il wholesome-plugin.phpfile di caricamento principale tramite la funzione aggiuntiva che abbiamo messo in atto.

• /build/admin.js— Questo è il file JavaScript compilato principale e viene accodato tramite il wholesome-plugin.phpfile di caricamento principale tramite la funzione aggiuntiva che abbiamo messo in atto.

• /build/admin.css.map— Questo file viene generato solo quando si compilano le risorse per la modalità di sviluppo (IE lo si esegue npm starte non npm buildquando si compilano le risorse. È un file utile per i debugger per aiutare a identificare i nomi dei file e i numeri di riga nel CSS se si verificano errori.

• /build/admin.js.map— Questo file viene generato solo quando si compilano gli asset per la modalità di sviluppo (IE lo si esegue npm starte non npm buildquando si compilano gli asset. È un file utile per i debugger JavaScript per aiutare a identificare i nomi dei file e i numeri di riga in caso di errori.

• Guarda l’utilizzo dei meta campi dei post nei blocchi di Gutenberg

• Guarda l’utilizzo di opzioni e impostazioni nei blocchi di Gutenberg

• Guarda come creare meta box personalizzati in Gutenberg

• Guarda la creazione di una pagina di opzioni e impostazioni utilizzando i componenti Gutenberg