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

Estoy jugando con Gutenberg antes de su inclusión en el núcleo, y me gustaría saber cómo extender el bloque de galería existente para cambiar su visualización. Por ejemplo, en lugar de una cuadrícula de miniaturas, me gustaría mostrar una presentación de diapositivas de imágenes. ¿Es posible? ¿Si es así, cómo? Cualquier ayuda sería apreciada.

Ok, he estado jugando con esto por un rato 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 estar un poco más involucrado.
• Se requieren ciertas clases y marcas en la salida para que el bloque pueda analizar el contenido y mantenerlo editable. Estas clases tienen estilos de front-end que deberán tratarse. No estoy seguro en este momento si hay una manera de filtrar cómo el bloque hace esto. Si fuera posible, incluso podría no ser una buena idea si significa que los bloques de la Galería se rompen cuando se desactiva un tema o complemento. Un bloque totalmente nuevo probablemente sería el camino a seguir para situaciones en las que esto sería necesario.
• No estoy realmente seguro de cómo funcionan los tamaños de imagen en esta etapa.
• El método de enganche de JavaScript utilizado puede no ser relevante en la versión final. Gutenberg usa @wordpress/hooksmientras se debate sobre qué sistema de ganchos usar en Core está en curso .
• Dado que la salida de Blocks se guarda como HTML, no como shortcode 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 elenqueue_block_editor_assets gancho.

El script debe tener el wp-blocksscript como una dependencia. Es casi seguro que ya está cargado en el editor, pero convertirlo en una dependencia presumiblemente 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 es manejado por el save()método del bloque. Puedes ver los bloques de la Galería en este archivo .

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

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

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

Como estamos reemplazando el save()método 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 observa el save()método del bloque original, lo que ve es JSX. React, que Gutenberg usa bajo el capó, lo admite para representar elementos. Vea este artículo para 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 un contenedor para esta y otras funcionalidades de reacción en forma de wp.element. Así que para usar createElement()usamoswp.element.createElement() .

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

• element El elemento original creado por el bloque.
• blockType Un objeto que representa el bloque que se está utilizando.
• attributesLas 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.

Entonces nuestra función de devolución de llamada necesita:

• Devuelve el elemento original para galerías sin bloques.
• Tome los atributos, particularmente las imágenes, y cree un nuevo elemento React a partir de ellos que represente la galería.

Aquí está un ejemplo completo que simplemente se da salida a una ulcon una clase, my-galleryy lies para cada imagen con la clase my-gallery-itemy la y imgen cada uno con la srcunidad para obtener 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 busca imágenes buscando ul.wp-block-gallery .blocks-gallery-item, por lo que este marcado y esas clases son necesarias para poder editar el bloque. Este marcado también se utiliza para el estilo predeterminado.
• attributes.images.mapse repite sobre cada imagen y devuelve una matriz de elementos secundarios como contenido para el elemento principal. Dentro de estos elementos hay otro elemento hijo para la imagen misma.

Aquí para proporcionar una respuesta actualizada. Encontré esta publicación extremadamente útil para responder la pregunta de cómo extender el Bloque de Galería.

En resumen, es recomendable crear un nuevo bloque en lugar de extender uno existente. De la publicación en mi enlace de arriba:

si modifica el HTML de un bloque [extendiendo], no se reconocerá como el bloque original. En lugar de tratar de manipular un bloque central, parece que no registrar el bloque central y registrar un nuevo bloque de reemplazo en su lugar sería un enfoque más seguro, de esa manera se asegurará de que los usuarios del sitio usen su galería personalizada particular, que se validará porque define su propia estructura HTML.

El enlace de arriba también hace referencia al complemento Create-Guten_Block que es una herramienta de línea de comandos que generará todo lo que necesita para comenzar con la creación de bloques. La herramienta es muy fácil de usar y fácil de configurar.

Con estos recursos, pude descubrir cómo desarrollar un bloque de galería personalizado en poco tiempo