Cómo extender el bloque de galería en Gutenberg

Ok, he estado experimentando con esto un poco y he logrado cambiar la salida del bloque Galería, con las siguientes advertencias:

• La vista previa no coincide con la salida. Creo que esto es posible pero parece ser un poco más complicado.
• Ciertas clases y marcado son requeridos en la salida para que el bloque pueda analizar el contenido y mantenerlo editable. Estas clases tienen estilos en el front-end que necesitarán ser manejados. No estoy seguro en este punto si hay una manera de filtrar cómo el bloque hace esto. Si fuera posible, podría no ser una buena idea si significa que los bloques de Galería se rompen cuando un tema o plugin se desactiva. Un bloque totalmente nuevo probablemente sería el camino a seguir para situaciones donde esto sería necesario.
• No estoy realmente seguro de cómo funcionan los tamaños de imagen en esta etapa.
• El método de enlaces JavaScript utilizados podría no ser relevante en la versión final. Gutenberg usa @wordpress/hooks mientras que la discusión sobre qué sistema de enlaces usar en el Core está en curso.
• Dado que la salida de los Bloques se guarda como HTML, no como un shortcode o meta, no será posible modificar la salida de Galerías existentes sin editarlas.

Lo primero que necesitamos hacer es registrar un script. Esto se hace con wp_enqueue_scripts(), pero en el hook enqueue_block_editor_assets.

El script debe tener el script wp-blocks como dependencia. Es casi seguro que ya está cargado en el editor, pero hacerlo una dependencia presumiblemente asegura que se cargue antes que nuestro script.

function wpse_298225_enqueue_block_assets() {
    wp_enqueue_script(
        'wpse-298225-gallery-block',
        get_theme_file_uri( 'block.js' ),
        ['wp-blocks']
    );
}
add_action( 'enqueue_block_editor_assets', 'wpse_298225_enqueue_block_assets' );

El HTML para la salida de un bloque es manejado por el método save() del bloque. Puedes ver el del bloque Galería en este archivo.

En esta etapa (Marzo 2018) Gutenberg soporta un filtro en el método save de los bloques, blocks.getSaveElement. Podemos agregar un hook a esto en JavaScript así:

wp.hooks.addFilter(
    'blocks.getSaveElement',
    'wpse-298225',
    wpse298225GallerySaveElement
)

El primer argumento es el nombre del hook, el segundo argumento es - creo - un namespace, y el último argumento es la función de callback.

Como estamos reemplazando el método save() del bloque, necesitamos devolver un nuevo elemento. Sin embargo, esto no es un elemento HTML normal lo que necesitamos devolver. Necesitamos devolver un elemento React.

Cuando miras el método save() original del bloque, lo que ves es JSX. React, que Gutenberg usa internamente, lo soporta para renderizar elementos. Mira este artículo para más sobre eso.

JSX normalmente requiere un paso de construcción, pero como no estoy introduciendo un paso de construcción para este ejemplo, necesitamos una manera de crear un elemento sin JSX. React proporciona esto con createElement(). WordPress proporciona un wrapper para esto y otra funcionalidad de React en forma de wp.element. Así que para usar createElement() usamos wp.element.createElement().

En la función de callback para blocks.getSaveElement obtenemos:

• element El Elemento original creado por el bloque.
• blockType Un objeto representando el bloque siendo usado.
• attributes Las propiedades de la instancia del bloque. En nuestro ejemplo esto incluye las imágenes en la galería y configuraciones como el número de columnas.

Así que nuestra función de callback necesita:

• Devolver el elemento original para galerías que no son del bloque.
• Tomar los atributos, particularmente las imágenes, y crear un nuevo elemento React con ellos representando la galería.

Aquí hay un ejemplo completo que simplemente devuelve un ul con una clase, my-gallery, y lis para cada imagen con la clase my-gallery-item y un img en cada uno con el src establecido a la URL de la imagen.

function wpse298225GallerySaveElement( element, blockType, attributes ) {
    if ( blockType.name !== 'core/gallery' ) {
        return element;
    }

    var newElement = wp.element.createElement(
        'ul',
        {
            'className': 'wp-block-gallery my-gallery',
        },
        attributes.images.map(
            function( image ) {
                return wp.element.createElement(
                    'li',
                    {
                        'className': 'blocks-gallery-item my-gallery-item',
                    },
                    wp.element.createElement(
                        'img',
                        {
                            'src': image.url,
                        }
                    )
                )
            }
        )
    )

    return newElement
}

Algunas cosas a tener en cuenta:

• El bloque de galería original encuentra imágenes buscando ul.wp-block-gallery .blocks-gallery-item, así que este marcado y esas clases son requeridas para que sea posible editar el bloque. Este marcado también se usa para el estilo por defecto.
• attributes.images.map está iterando sobre cada imagen y devolviendo un array de elementos hijos como contenido para el elemento principal. Dentro de estos elementos hay otro elemento hijo para la imagen misma.