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.