Adicionar pontos de entrada ao script de bloco de criação do WordPress

Quando você cria um bloco pela primeira vez com o script de criação de bloco do WordPress, npm init @wordpress/blockele fornece um ponto de entrada para /src/index.js, que você pode usar para compilar todos os seus ativos e estilos baseados em bloco.

Às vezes, você deseja adicionar outros pontos de entrada, por exemplo, você pode querer usar os blocos do WordPress Block Editor (Gutenberg) em outro lugar no editor, por exemplo, em uma página de configurações ou no personalizador.

Este guia ajuda você a estender o WordPress Create Block Script webpack.configpara que você possa adicionar esses pontos de entrada adicionais.

Pré-requisitos

• Familiarize-se com a criação de plugins para WordPress Gutenberg com o script create block

Crie seus arquivos

Seguindo o guia create block script, vamos criar alguns arquivos em nossa solução:

Crio/src/admin.js

Este arquivo será o principal ponto de entrada para qualquer React que desejemos adicionar à tela de administração do WordPress (por exemplo, se quisermos construir uma página de opções para controlar nossas configurações com Gutenberg Components.

Crie o arquivo /src/admin.jse cole o seguinte código:

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

import './admin.scss';

Ainda não estamos fazendo nada neste arquivo, que será assunto de guias posteriores. Por enquanto estamos apenas colocando algum código para que possamos testar a saída.

No entanto, importa o /src/admin.scssarquivo, que será compilado para conter todo o nosso CSS personalizado para o administrador do WordPress.

Crio/src/admin.scss

Crie o arquivo /src/admin.scsse adicione alguns SCSS de teste:

body {
  background: pink;
}

Novamente, esse código não serve para nada além de testar se o SCSS é compilado.

Crio/webpack.config.js

Crie um arquivo na raiz do seu plugin chamado webpack.config.jsvamos cobrir o que colocar neste arquivo em breve.

Edite o arquivo PHP raiz do plug-in

Se você estiver seguindo o guia anterior, esse plugin será chamado de wholesome-plugin.php.

Neste arquivo queremos registrar os scripts para a área de administração, que serão gerados pela configuração do nosso webpack. Adicione a seguinte função ao final desse arquivo:

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

Nós copiamos praticamente o código do bloco de enfileiramento anterior, mas o tornamos relevante para nossos arquivos de saída esperados de /build/admin.jse /build/admin.css. Observe que também estamos carregando o /build/admin.asset.phparquivo especialmente gerado, que adicionará automaticamente todas as dependências do editor de blocos do WordPress (Gutenberg) para nosso script de administração.

Edite owebPack.config

No passo 2 criamos o arquivo webpack.config.js, neste arquivo adicione o seguinte código:

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

Este código importa o arquivo webpack.configde @wordpress/scripts. Este é o código que é executado sempre que você executa npm startsua solução.

Tudo o que estamos fazendo é pegar essa configuração e adicionar outro ponto de entrada, com a linha admin: path.resolve( process.cwd(), 'src', 'admin.js' ),.

O resto do código está apenas dizendo ao webpack para usar as configurações que já estão em vigor (por exemplo ...defautConfig,, ...defaultConfig.entry).

Compilar o código

Compile seu plugin com o npm startcomando e vamos ver o que acontece:

Compilando o código com o novo ponto de entrada

O script agora gera alguns novos arquivos para nós:

• /build/admin.assets.php— Este arquivo PHP é gerado automaticamente quando a /srcpasta é compilada. Ele contém uma matriz de todas as decências JavaScript do Editor do WordPress (Gutenberg) usadas pelo seu novo ponto de entrada. Ele é enfileirado por meio do wholesome-plugin.phparquivo do carregador principal por meio da função adicional que implementamos.

• /build/admin.css— Este é o arquivo CSS do administrador e é enfileirado por meio do wholesome-plugin.phparquivo do carregador principal por meio da função adicional que implementamos.

• /build/admin.js— Este é o arquivo JavaScript compilado principal e é enfileirado por meio do wholesome-plugin.phparquivo do carregador principal por meio da função adicional que implementamos.

• /build/admin.css.map— Este arquivo é gerado apenas quando você está compilando os ativos para o modo de desenvolvimento (IE você executa npm starte não npm buildquando você está compilando seus ativos. É um arquivo útil para depuradores para ajudar a identificar nomes de arquivos e números de linha no CSS se ocorrerem erros.

• /build/admin.js.map— Este arquivo é gerado apenas quando você está compilando os ativos para o modo de desenvolvimento (IE você executa npm starte não npm buildquando você está compilando seus ativos. É um arquivo útil para depuradores JavaScript para ajudar a identificar nomes de arquivos e números de linha se ocorrerem erros.

• Veja o uso de meta campos post em blocos Gutenberg

• Veja como usar opções e configurações em blocos Gutenberg

• Veja como criar meta caixas personalizadas em Gutenberg

• Veja como criar uma página de opções e configurações usando componentes do Gutenberg