Lägg till startpunkter till WordPress Create Block Script

När du först skapar ett block med WordPress skapa blockskript med npm init @wordpress/blockdet ger dig en ingångspunkt till /src/index.js, som du kan använda för att kompilera alla dina blockbaserade tillgångar och stilar.

Ibland vill du lägga till andra ingångspunkter, till exempel kanske du vill använda WordPress Block Editor (Gutenberg) block någon annanstans i redigeraren, till exempel på en inställningssida eller i anpassaren.

Den här guiden hjälper dig att utöka WordPress Create Block Script webpack.configså att du kan lägga till dessa ytterligare ingångspunkter.

Förutsättningar

• Var bekant med att skapa plugins för WordPress Gutenberg med skapa blockskript

Skapa dina filer

Efter att ha skapat blockskriptguiden kommer vi att skapa några filer i vår lösning:

Skapa/src/admin.js

Den här filen kommer att vara den huvudsakliga ingångspunkten för alla React vi vill lägga till på WordPress-administratörsskärmen (till exempel om vi vill bygga en alternativsida för att styra våra inställningar med Gutenberg Components.

Skapa filen /src/admin.jsoch klistra in följande kod:

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

import './admin.scss';

Vi gör egentligen ingenting i den här filen än, det kommer att bli föremål för senare guider. Just nu lägger vi bara in lite kod så att vi kan testa resultatet.

Den importerar dock /src/admin.scssfilen, som kommer att kompileras för att innehålla all vår anpassade CSS för WordPress-administratören.

Skapa/src/admin.scss

Skapa filen /src/admin.scssoch lägg till lite test-SCSS:

body {
  background: pink;
}

Återigen tjänar den här koden inte till någonting annat än att testa om SCSS kompileras.

Skapa/webpack.config.js

Skapa en fil i roten av ditt plugin som heter webpack.config.jsvi kommer att täcka vad som ska läggas i den här filen inom kort.

Redigera PHP-rotfilen för plugin-programmet

Om du har följt med den tidigare guiden kommer det pluginet att heta wholesome-plugin.php.

I den här filen vill vi registrera skripten för adminområdet, som kommer att matas ut av vår webbpaketkonfiguration. Lägg till följande funktion längst ner i filen:

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

Vi har i stort sett kopierat koden från det tidigare köblocket, men gjort den relevant för våra förväntade utdatafiler av /build/admin.jsoch /build/admin.css. Observera att vi också laddar den speciellt genererade /build/admin.asset.phpfilen, som automatiskt lägger till alla WordPress-blockredigerare (Gutenberg) beroenden för vårt adminskript.

RedigerawebPack.config

I steg 2 skapade vi filen webpack.config.js, lägg till följande kod i den här filen:

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

Denna kod importerar webpack.configfrån @wordpress/scripts. Det här är koden som körs varje gång du kör npm starti din lösning.

Allt vi gör är att ta den här konfigurationen och lägga till en annan ingångspunkt, med raden admin: path.resolve( process.cwd(), 'src', 'admin.js' ),.

Resten av koden säger bara åt webpack att använda de inställningar som redan finns på plats (t.ex. ...defautConfig, ...defaultConfig.entry).

Sammanställ koden

Kompilera du plugin med npm startkommandot, och låt oss titta på vad som händer:

Kompilera koden med den nya ingångspunkten

Skriptet genererar nu några nya filer åt oss:

• /build/admin.assets.php— Den här PHP-filen genereras automatiskt när /srcmappen kompileras. Den innehåller en uppsättning av alla WordPress Editor (Gutenberg) JavaScript-anständigheter som används av din nya ingångspunkt. Den köas via huvudladdarfilen via wholesome-plugin.phptilläggsfunktionen vi har infört.

• /build/admin.css— Det här är administratörs-CSS-filen och köas via huvudladdarfilen via wholesome-plugin.phpden extra funktionen som vi har installerat.

• /build/admin.js— Det här är den huvudsakliga kompilerade JavaScript-filen och köas via huvudladdarfilen via wholesome-plugin.phpden extra funktionen vi har installerat.

• /build/admin.css.map— Den här filen genereras bara när du kompilerar tillgångarna för utvecklingsläge (IE du kör npm startoch inte npm buildnär du kompilerar dina tillgångar. Det är en användbar fil för felsökare för att hjälpa till att identifiera filnamn och radnummer i CSS om fel uppstår.

• /build/admin.js.map— Den här filen genereras bara när du kompilerar tillgångarna för utvecklingsläge (IE som du kör npm startoch inte npm buildnär du kompilerar dina tillgångar. Det är en användbar fil för JavaScript-felsökare för att hjälpa till att identifiera filnamn och radnummer om fel uppstår.

• Titta på att använda post-metafält i Gutenberg-block

• Titta på hur du använder alternativ och inställningar i Gutenberg-block

• Titta på att skapa anpassade metaboxar i Gutenberg

• Titta på att bygga en alternativ- och inställningssida med hjälp av Gutenberg-komponenter