Agregar puntos de entrada al script de creación de bloques de WordPress

Cuando crea un bloque por primera vez con el script de creación de bloques de WordPress, su uso npm init @wordpress/blockle proporciona un punto de entrada a /src/index.js, que puede usar para compilar todos sus activos y estilos basados ​​en bloques.

A veces, desea agregar otros puntos de entrada, por ejemplo, es posible que desee usar los bloques del Editor de bloques de WordPress (Gutenberg) en otra parte del editor, por ejemplo, en una página de configuración o en el personalizador.

Esta guía lo ayuda a ampliar el script de creación de bloque de WordPress webpack.configpara que pueda agregar esos puntos de entrada adicionales.

requisitos previos

• Familiarícese con la creación de complementos para WordPress Gutenberg con el script de creación de bloques

Crea tus archivos

Siguiendo con la guía de creación de secuencias de comandos de bloques, vamos a crear algunos archivos en nuestra solución:

Crear/src/admin.js

Este archivo será el punto de entrada principal para cualquier React que deseemos agregar a la pantalla de administración de WordPress (por ejemplo, si quisiéramos crear una página de opciones para controlar nuestra configuración con los componentes de Gutenberg.

Cree el archivo /src/admin.jsy pegue el siguiente código:

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

import './admin.scss';

Realmente no estamos haciendo nada en este archivo todavía, eso será el tema de guías posteriores. Por ahora solo estamos ingresando algo de código para poder probar la salida.

Sin embargo, importa el /src/admin.scssarchivo, que se compilará para contener todo nuestro CSS personalizado para el administrador de WordPress.

Crear/src/admin.scss

Cree el archivo /src/admin.scssy agregue algunos SCSS de prueba:

body {
  background: pink;
}

Nuevamente, este código no sirve para nada, aparte de probar si el SCSS se compila.

Crear/webpack.config.js

Cree un archivo en la raíz de su complemento llamado webpack.config.js, cubriremos qué poner en este archivo en breve.

Edite el archivo PHP raíz del complemento

Si ha estado siguiendo la guía anterior, ese complemento se llamará wholesome-plugin.php.

En este archivo queremos registrar los scripts para el área de administración, que serán generados por la configuración de nuestro paquete web. Agregue la siguiente función al final de ese archivo:

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

Prácticamente hemos copiado el código del bloque de puesta en cola anterior, pero lo hemos hecho relevante para nuestros archivos de salida esperados de /build/admin.jsy /build/admin.css. Tenga en cuenta que también estamos cargando el /build/admin.asset.phparchivo especialmente generado, que agregará automáticamente todas las dependencias del editor de bloques de WordPress (Gutenberg) para nuestro script de administración.

Editar elwebPack.config

En el paso 2 creamos el archivo webpack.config.js, en este archivo agregamos el siguiente 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 el webpack.configde @wordpress/scripts. Este es el código que se ejecuta cada vez que ejecuta npm startsu solución.

Todo lo que estamos haciendo es tomar esta configuración y agregar otro punto de entrada, con la línea admin: path.resolve( process.cwd(), 'src', 'admin.js' ),.

El resto del código simplemente le dice a webpack que use la configuración que ya está establecida (por ejemplo ...defautConfig, ...defaultConfig.entry).

Compilar el código

Compile su complemento con el npm startcomando y veamos qué sucede:

Compilación del código con el nuevo punto de entrada

El script ahora genera algunos archivos nuevos para nosotros:

• /build/admin.assets.php— Este archivo PHP se genera automáticamente cuando /srcse compila la carpeta. Contiene una variedad de todas las decencias de JavaScript del Editor de WordPress (Gutenberg) utilizadas por su nuevo punto de entrada. Se wholesome-plugin.phppone en cola a través del archivo del cargador principal a través de la función adicional que implementamos.

• /build/admin.css— Este es el archivo CSS de administración y se wholesome-plugin.phppone en cola a través del archivo del cargador principal a través de la función adicional que implementamos.

• /build/admin.js— Este es el archivo JavaScript compilado principal y se wholesome-plugin.phppone en cola a través del archivo del cargador principal a través de la función adicional que implementamos.

• /build/admin.css.map— Este archivo solo se genera cuando está compilando los activos para el modo de desarrollo (es decir, lo ejecuta npm starty no npm buildcuando está compilando sus activos). Es un archivo útil para que los depuradores ayuden a identificar los nombres de los archivos y los números de línea en el CSS si se producen errores.

• /build/admin.js.map— Este archivo solo se genera cuando está compilando los activos para el modo de desarrollo (es decir, lo ejecuta npm starty no npm buildcuando está compilando sus activos). Es un archivo útil para los depuradores de JavaScript para ayudar a identificar los nombres de los archivos y los números de línea si se producen errores.

• Mire el uso de metacampos de publicación en bloques de Gutenberg

• Mire el uso de opciones y configuraciones en bloques de Gutenberg

• Mire la creación de cajas meta personalizadas en Gutenberg

• Mire la creación de una página de opciones y configuraciones usando componentes de Gutenberg