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

Ok, he estado jugando con esto un poco y he logrado cambiar la salida del bloque de la 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.
• Se requieren ciertas clases y marcas en el resultado para que el bloque pueda analizar el contenido y mantenerlo editable. Estas clases tienen estilos de front-end que deben tratarse. 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 eso significa que los bloques de la Galería se rompen cuando se desactiva un tema o un complemento. Un bloque totalmente nuevo probablemente sería el camino a seguir para situaciones en las que esto sea necesario.
• No estoy realmente seguro de cómo funcionan los tamaños de imagen en esta etapa.
• El método de enganches de JavaScript utilizado podría no ser relevante en la versión final. Gutenberg usa @wordpress/hooks mientras discute qué sistemas de ganchos usar en Core está en curso .
• Dado que la salida de Bloques se guarda como HTML, no como un código corto o meta, no será posible modificar la salida de las Galerías existentes sin editarlas.

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

El script debe tener el script wp-blocks como una dependencia. Es casi seguro que ya está cargado en el editor, pero al convertirlo en una dependencia, se asegura que se cargue antes de 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 se maneja mediante el método save() del bloque. Puede ver los bloques de la Galería en este archivo .

En esta etapa (marzo de 2018) Gutenberg admite un filtro en el método de guardar bloques, blocks.getSaveElement . Podemos agregar un enlace a esto en JavaScript como este:

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

El primer argumento es el nombre del enganche, el segundo argumento es, creo, un espacio de nombres, y el último argumento es la función de devolución de llamada.

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

Cuando miras el método save() del bloque original, lo que ves es JSX. React, que Gutenberg usa debajo del capó, lo soporta para renderizar elementos. Consulte este artículo para obtener más información al respecto.

JSX normalmente requiere un paso de compilación, pero como no estoy introduciendo un paso de compilación para este ejemplo, necesitamos una forma de crear un elemento sin JSX. React proporciona esto con createElement() . WordPress proporciona una envoltura para esta y otras funciones de reacción en forma de wp.element . Entonces para usar createElement() usamos wp.element.createElement() .

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

• element El elemento original creado por el bloque.
• blockType Un objeto que representa el bloque que se está utilizando.
• attributes Las propiedades de la instancia de bloque. En nuestro ejemplo, esto incluye las imágenes en la galería y configuraciones como el número de columnas.

Por lo tanto, nuestra función de devolución de llamada necesita:

• Devuelve el elemento original para las galerías sin bloque.
• Tome los atributos, particularmente las imágenes, y cree un nuevo elemento Reaccionar de ellos representando la galería.

Este es un ejemplo completo que simplemente genera un ul con una clase, my-gallery y li s para cada imagen con la clase my-gallery-item y y img en cada una con el src establecido en 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 la galería original encuentra imágenes al buscar ul.wp-block-gallery .blocks-gallery-item , por lo que esta marca y esas clases son necesarias para poder editar el bloque. Este marcado también se usa para el estilo predeterminado.
• attributes.images.map recorre cada imagen y devuelve una matriz de elementos secundarios como contenido del elemento principal. Dentro de estos elementos hay otro elemento secundario para la imagen en sí.