Fügen Sie Einstiegspunkte zum WordPress-Create-Block-Skript hinzu

Wenn Sie zum ersten Mal einen Block mit dem WordPress-Create-Block-Skript erstellen, erhalten npm init @wordpress/blockSie damit einen Einstiegspunkt zu /src/index.js, den Sie verwenden können, um alle Ihre blockbasierten Assets und Stile zu kompilieren.

Manchmal möchten Sie andere Einstiegspunkte hinzufügen, z. B. möchten Sie Blöcke des WordPress-Blockeditors (Gutenberg) an anderer Stelle im Editor verwenden, z. B. auf einer Einstellungsseite oder im Customizer.

Diese Anleitung hilft dir, das WordPress Create Block Script zu erweitern webpack.config, damit du diese zusätzlichen Einstiegspunkte hinzufügen kannst.

Voraussetzungen

• Machen Sie sich mit dem Erstellen von Plugins für WordPress Gutenberg mit dem Blockerstellungsskript vertraut

Erstellen Sie Ihre Dateien

Im Anschluss an die Anleitung zum Erstellen von Blockskripten werden wir einige Dateien in unserer Lösung erstellen:

Schaffen/src/admin.js

Diese Datei ist der Haupteinstiegspunkt für jeden React, den wir dem WordPress-Admin-Bildschirm hinzufügen möchten (wenn wir beispielsweise eine Optionsseite erstellen wollten, um unsere Einstellungen mit Gutenberg-Komponenten zu steuern.

Erstellen Sie die Datei /src/admin.jsund fügen Sie den folgenden Code ein:

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

import './admin.scss';

Wir machen noch nicht wirklich etwas in dieser Datei, das wird Gegenstand späterer Anleitungen sein. Im Moment fügen wir nur etwas Code ein, damit wir die Ausgabe testen können.

Es importiert jedoch die /src/admin.scssDatei, die so kompiliert wird, dass sie unser gesamtes benutzerdefiniertes CSS für den WordPress-Administrator enthält.

Schaffen/src/admin.scss

Erstellen Sie die Datei /src/admin.scssund fügen Sie Test-SCSS hinzu:

body {
  background: pink;
}

Auch dieser Code dient keinem anderen Zweck, als zu testen, ob der SCSS kompiliert wird.

Schaffen/webpack.config.js

Erstellen Sie eine Datei im Stammverzeichnis Ihres Plugins mit dem Namen webpack.config.jsWir werden in Kürze erläutern, was in diese Datei eingefügt werden soll.

Bearbeiten Sie die Root-PHP-Datei des Plugins

Wenn Sie der vorherigen Anleitung gefolgt sind, heißt dieses Plugin wholesome-plugin.php.

In dieser Datei wollen wir die Skripte für den Admin-Bereich eintragen, die von unserer Webpack-Konfiguration ausgegeben werden. Fügen Sie am Ende dieser Datei die folgende Funktion hinzu:

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

Wir haben den Code aus dem vorherigen Enqueue-Block ziemlich kopiert, ihn aber für unsere erwarteten Ausgabedateien von /build/admin.jsund relevant gemacht /build/admin.css. Beachten Sie, dass wir auch die speziell generierte /build/admin.asset.phpDatei laden, die automatisch alle Abhängigkeiten des WordPress-Blockeditors (Gutenberg) für unser Admin-Skript hinzufügt.

Bearbeiten Sie diewebPack.config

In Schritt 2 haben wir die Datei erstellt webpack.config.js, fügen Sie in dieser Datei den folgenden Code hinzu:

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

Dieser Code importiert die webpack.configaus @wordpress/scripts. Dies ist der Code, der jedes Mal ausgeführt wird, wenn Sie npm startIhre Lösung ausführen.

Alles, was wir tun, ist, diese Konfiguration zu nehmen und einen weiteren Einstiegspunkt mit der Zeile hinzuzufügen admin: path.resolve( process.cwd(), 'src', 'admin.js' ),.

Der Rest des Codes weist Webpack lediglich an, die bereits vorhandenen Einstellungen zu verwenden (z. B. ...defautConfig, ...defaultConfig.entry).

Kompilieren Sie den Code

Kompilieren Sie Ihr Plugin mit dem npm startBefehl und schauen wir uns an, was passiert:

Kompilieren des Codes mit dem neuen Einstiegspunkt

Das Skript erzeugt nun einige neue Dateien für uns:

• /build/admin.assets.php— Diese PHP-Datei wird automatisch generiert, wenn der /srcOrdner kompiliert wird. Es enthält ein Array aller WordPress-Editor (Gutenberg)-JavaScript-Anständigkeiten, die von Ihrem neuen Einstiegspunkt verwendet werden. Es wird über die Haupt- wholesome-plugin.phpLoader-Datei über die zusätzliche Funktion, die wir eingerichtet haben, in die Warteschlange eingereiht.

• /build/admin.css— Dies ist die Admin-CSS-Datei und wird über die Haupt- wholesome-plugin.phpLoader-Datei über die zusätzliche Funktion, die wir eingerichtet haben, in die Warteschlange eingereiht.

• /build/admin.js— Dies ist die kompilierte JavaScript-Hauptdatei und wird über die Haupt- wholesome-plugin.phpLoader-Datei über die zusätzliche Funktion, die wir eingerichtet haben, in die Warteschlange gestellt.

• /build/admin.css.map— Diese Datei wird nur generiert, wenn Sie die Assets für den Entwicklungsmodus kompilieren (dh Sie führen sie aus npm startund nicht, npm buildwenn Sie Ihre Assets kompilieren). Es ist eine hilfreiche Datei für Debugger, um Dateinamen und Zeilennummern im CSS zu identifizieren, wenn Fehler auftreten.

• /build/admin.js.map— Diese Datei wird nur generiert, wenn Sie die Assets für den Entwicklungsmodus kompilieren (dh Sie führen sie aus npm startund nicht, npm buildwenn Sie Ihre Assets kompilieren). Es ist eine hilfreiche Datei für JavaScript-Debugger, um Dateinamen und Zeilennummern zu identifizieren, wenn Fehler auftreten.

• Sehen Sie sich die Verwendung von Post-Meta-Feldern in Gutenberg-Blöcken an

• Sehen Sie sich die Verwendung von Optionen und Einstellungen in Gutenberg-Blöcken an

• Sehen Sie sich das Erstellen benutzerdefinierter Metaboxen in Gutenberg an

• Sehen Sie sich das Erstellen einer Options- und Einstellungsseite mit Gutenberg-Komponenten an