Dodaj punkty wejścia do skryptu tworzenia bloku WordPress

Kiedy po raz pierwszy tworzysz blok za pomocą skryptu tworzenia bloku WordPress, który npm init @wordpress/blockgo używa, udostępnia punkt wejścia do /src/index.js, którego możesz użyć do skompilowania wszystkich zasobów i stylów opartych na blokach.

Czasami chcesz dodać inne punkty wejścia, na przykład możesz użyć bloków edytora bloków WordPress (Gutenberg) w innym miejscu edytora, na przykład na stronie ustawień lub w konfiguratorze.

Ten przewodnik pomaga rozszerzyć skrypt tworzenia bloku WordPress webpack.config, aby można było dodać te dodatkowe punkty wejścia.

Warunki wstępne

• Zapoznaj się z tworzeniem wtyczek do WordPress Gutenberg za pomocą skryptu tworzenia bloku

Utwórz swoje pliki

Kontynuując przewodnik po skrypcie tworzenia bloków, stworzymy kilka plików w naszym rozwiązaniu:

Tworzyć/src/admin.js

Ten plik będzie głównym punktem wejścia dla każdego Reacta, który chcemy dodać do ekranu administratora WordPress (na przykład, jeśli chcielibyśmy zbudować stronę opcji, aby kontrolować nasze ustawienia za pomocą komponentów Gutenberg.

Utwórz plik /src/admin.jsi wklej następujący kod:

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

import './admin.scss';

Tak naprawdę nic jeszcze nie robimy w tym pliku, co będzie przedmiotem późniejszych przewodników. Na razie po prostu wstawiamy trochę kodu, abyśmy mogli przetestować dane wyjściowe.

Jednak importuje /src/admin.scssplik, który skompiluje się tak, aby zawierał wszystkie nasze niestandardowe CSS dla administratora WordPress.

Tworzyć/src/admin.scss

Utwórz plik /src/admin.scssi dodaj trochę testowego SCSS:

body {
  background: pink;
}

Ponownie, ten kod jest bezużyteczny, poza sprawdzeniem, czy SCSS zostanie skompilowany.

Tworzyć/webpack.config.js

Utwórz plik w katalogu głównym wtyczki o nazwie webpack.config.js, wkrótce omówimy, co umieścić w tym pliku.

Edytuj główny plik PHP wtyczki

Jeśli podążałeś za poprzednim przewodnikiem, ta wtyczka będzie nazywać się wholesome-plugin.php.

W tym pliku chcemy zarejestrować skrypty dla obszaru administracyjnego, które zostaną wyprowadzone przez naszą konfigurację webpacka. Dodaj następującą funkcję na dole tego pliku:

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

Prawie skopiowaliśmy kod z poprzedniego bloku w kolejce, ale uczyniliśmy go odpowiednim dla naszych oczekiwanych plików wyjściowych /build/admin.jsi /build/admin.css. Zauważ, że ładujemy również specjalnie wygenerowany /build/admin.asset.phpplik, który automatycznie doda wszystkie zależności edytora bloków WordPress (Gutenberg) do naszego skryptu administratora.

EdytujwebPack.config

W kroku 2 utworzyliśmy plik webpack.config.js, w tym pliku dodajemy następujący kod:

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

Ten kod importuje webpack.configz @wordpress/scripts. To jest kod, który jest uruchamiany za każdym razem, gdy uruchamiasz npm startw swoim rozwiązaniu.

Wszystko, co robimy, to bierzemy tę konfigurację i dodajemy kolejny punkt wejścia z linią admin: path.resolve( process.cwd(), 'src', 'admin.js' ),.

Reszta kodu po prostu mówi webpackowi, aby użył ustawień, które są już na miejscu (np. ...defautConfig, ...defaultConfig.entry).

Skompiluj kod

Skompiluj wtyczkę za pomocą npm startpolecenia i zobaczmy, co się stanie:

Kompilacja Kodeksu z nowym punktem wejścia

Skrypt generuje teraz dla nas kilka nowych plików:

• /build/admin.assets.php— Ten plik PHP jest generowany automatycznie podczas /srckompilacji folderu. Zawiera tablicę wszystkich przyzwoitości JavaScript Edytora WordPress (Gutenberg) używanych przez nowy punkt wejścia. Jest on umieszczany w kolejce poprzez główny wholesome-plugin.phpplik programu ładującego za pomocą dodatkowej funkcji, którą wprowadziliśmy.

• /build/admin.css— Jest to plik CSS administratora i jest umieszczany w kolejce za pomocą głównego wholesome-plugin.phppliku ładującego za pomocą dodatkowej funkcji, którą wprowadziliśmy.

• /build/admin.js— Jest to główny skompilowany plik JavaScript, który jest umieszczany w kolejce przez główny wholesome-plugin.phpplik programu ładującego za pomocą dodatkowej funkcji, którą wprowadziliśmy.

• /build/admin.css.map— Ten plik jest generowany tylko wtedy, gdy kompilujesz zasoby do trybu programistycznego (tzn. uruchamiasz, npm starta nie npm buildkompilujesz zasoby. Jest to pomocny plik dla debugerów, który pomaga zidentyfikować nazwy plików i numery wierszy w CSS, jeśli wystąpią błędy.

• /build/admin.js.map— Ten plik jest generowany tylko podczas kompilowania zasobów do trybu programistycznego (tzn. uruchamiany, npm starta nie npm buildpodczas kompilowania zasobów. Jest to plik pomocny dla debugerów JavaScript, który pomaga zidentyfikować nazwy plików i numery wierszy w przypadku wystąpienia błędów.

• Spójrz na używanie post meta pól w blokach Gutenberga

• Spójrz na użycie opcji i ustawień w blokach Gutenberg

• Spójrz na tworzenie niestandardowych pól meta w Gutenberg

• Spójrz na tworzenie strony opcji i ustawień za pomocą komponentów Gutenberg