Incluya activos de imagen en un complemento de bloque de WordPress Gutenberg

Estoy creando un bloque Gutenberg de WordPress personalizado y quiero usar activos de imagen (PNG, JPG) de mi carpeta de complementos, para que se muestren tanto en el editor de Gutenberg como en la página renderizada.

Estoy usando Webpack para agrupar mis archivos para JS y SCSS. Intenté agregar el cargador de imágenes del paquete web, que guarda las imágenes en una carpeta de “activos” en mi directorio principal de complementos.

Sin embargo, cuando trato de usar mis activos de imagen del archivo JS principal de mi Bloque, no puedo encontrar una manera de acceder a la ruta de URL completa de mis imágenes que se ejecutan en mi servidor de WordPress, que actualmente se ejecuta en un contenedor docker en localhost.

Mi esperanza era encontrar un método de WordPress para devolver la ruta de mi directorio de complementos y usarlo para apuntar a los activos de imagen independientemente de cómo estén agrupados, pero no he podido encontrar una solución en la documentación.

Es posible obtener el directorio de complementos usando PHP usando la función integrada de WordPress:

function _get_plugin_directory() {
  return __DIR__;
}

Esto parece que podría ayudar, sin embargo, no sé si es posible pasar la ruta del complemento devuelta a mi archivo JS.

La estructura de mi complemento se ve así:

/assets // generated by Webpack
  - image.png
  - main.js
/blocks
  /block-example
    - image.png // <-- My image asset
    - index.js // <-- I want to use image.png here
  - index.js // loads in my block
blocks.php

El archivo index.js es donde quiero mostrar la imagen, usando el estándar de WordPress edit y save funciones:

import image from './image.png';

edit: props => {
  ...
  <img src={image} />
}

En el editor de WordPress Gutenberg, las imágenes apuntan solo al nombre del archivo de imagen (./image.png o assets/image.png etc), en lugar de la ruta completa de la imagen donde se encuentra dentro del directorio del complemento (es decir, localhost:8080/plugins/my-blocks/assets/image.png) lo que hace que no se encuentre la imagen.

Todavía estoy investigando si hay una forma oficial de Gutenberg para hacer esto, pero por ahora tengo esto funcionando en mi complemento con wp_localize_script.

Esto funciona para pasar datos de PHP a Javascript en cola, de modo que los datos generalmente solo accesibles en PHP también sean accesibles en Javascript.

Entonces (probablemente dentro blocks.php de tu ejemplo), tendrías algo como:

wp_enqueue_script(
    'my-main-script',
    plugins_url( 'assets/main.js', __FILE__ ),
    array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor', 'wp-components' ),
    '20190804',
    true
);

Luego puede poner en cola cualquier valor que desee pasar a su JS:

wp_localize_script(
    'my-main-script',
    'js_data',
    array(
        'my_image_url' => plugins_url( 'blocks/block-example/image.png', __FILE__ )
    )
);

Esto garantizará que javascript pueda acceder a la ruta de la imagen. Luego, desde dentro de su propio bloque, puede hacer referencia a él:

<img src={js_data.my_image_url} />

Ahora debería ver su activo de imagen estática renderizado dentro de su bloque.

Poniendo esto aquí para cualquiera que aterrice aquí:

Puede importar imágenes directamente a las aplicaciones de reacción usando el paquete web.

Entonces, suponiendo que esté utilizando algún tipo de configuración de paquete web (@wordpress/scripts, create-guten-block o su propia configuración personalizada), simplemente importaría su imagen en el archivo de bloque así, asumiendo que su imagen está en el mismo carpeta como el archivo que está importando:

import image1 from "./image1.jpg"

Y luego utilícelo como una URL donde lo necesite:

<img src={image1} alt="my image" />

También puede lograr lo mismo usando el nuevo wp_add_inline_script función.

De los documentos de WordPress

Aunque la localización es el uso principal, (wp_localize_script) a menudo se usaba para pasar datos genéricos de PHP a JavaScript, porque originalmente era la única forma oficial de hacerlo. wp_add_inline_script() se introdujo en la versión 4.5 de WordPress y ahora es la mejor práctica para ese caso de uso. wp_localize_script() solo debe usarse cuando realmente desea localizar cadenas.

Aquí está el código que usé para pasar una URL de imagen a un bloque de Gutenberg personalizado usando wp_add_inline_script. El siguiente código se colocó dentro blocks.php según el ejemplo.

En wp_enqueue_script ejemplo de código, _get_plugin_url() es mi propia función personalizada para recuperar la ruta de mi complemento.

wp_enqueue_script(
    'my-main-script',
    _get_plugin_url() . $block_path,
    [],
    filemtime( _get_plugin_directory() . $block_path )
);

Configuré una matriz para los datos que deseaba pasar, por ejemplo

$js_data = array(
    'image_url' => _get_plugin_url() . '/assets/images/BACK.png',
);

Luego usó el wp_add_inline_script función

wp_add_inline_script(
    'my-main-script',
    'var jsData=" . wp_json_encode( $js_data ),
    "before'
);

Dentro de /block-example/index.js archivo que registra el bloque y define su comportamiento, puedo acceder a esa variable como:

jsData.image_url