Ok, estou brincando com isso há um tempo e consegui alterar a saída do bloco Gallery, com as seguintes ressalvas:
- A visualização não corresponde à saída. Eu acho que isso é possível, mas parece estar um pouco mais envolvido.
- Certas classes e marcações são necessárias na saída para que o bloco possa analisar o conteúdo e mantê-lo editável. Essas classes têm estilos de front-end que precisam ser tratados. Não tenho certeza, neste momento, se existe uma maneira de filtrar como o bloco faz isso. Se possível, talvez nem seja uma boa ideia se isso significa que os blocos da Galeria estão quebrados quando um tema ou plug-in está desativado. Um bloco totalmente novo provavelmente seria o caminho a seguir para situações em que isso seria necessário.
- Não tenho muita certeza de como os tamanhos das imagens funcionam nesse estágio.
- O método de ganchos JavaScript usados pode não ser relevante na versão final. Gutenberg usa
@wordpress/hooksenquanto a discussão sobre o sistema de ganchos a ser usado no Core está em andamento .
- Como a saída do Blocks é salva como HTML, não como um código curto ou meta, não será possível modificar a saída das Galerias existentes sem editá-las.
A primeira coisa que precisamos fazer é registrar um script. Isso é feito com wp_enqueue_scripts(), mas no enqueue_block_editor_assetsgancho.
O script deve ter o wp-blocksscript como uma dependência. É quase certo que já esteja carregado no editor, mas torná-lo uma dependência presumivelmente garante que ele seja carregado antes do nosso 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' );
O HTML para a saída de um bloco é tratado pelo save()método do bloco. Você pode ver os blocos da Galeria neste arquivo .
Nesta fase (março de 2018), o Gutenberg suporta um filtro no método de salvar blocos blocks.getSaveElement. Podemos adicionar um gancho a isso no JavaScript, assim:
wp.hooks.addFilter(
'blocks.getSaveElement',
'wpse-298225',
wpse298225GallerySaveElement
)
O primeiro argumento é o nome do gancho, o segundo argumento é - eu acho - um espaço para nome e o último argumento é a função de retorno de chamada.
Como estamos substituindo o save()método do bloco, precisamos retornar um novo elemento. No entanto, este não é um elemento HTML normal que precisamos retornar. Precisamos retornar um elemento React .
Quando você olha para o save()método do bloco original, o que vê é JSX. O React, que Gutenberg usa sob o capô, o suporta para renderizar elementos. Veja este artigo para saber mais sobre isso.
O JSX normalmente requer uma etapa de construção, mas como não estou introduzindo uma etapa de construção para este exemplo, precisamos de uma maneira de criar um elemento sem o JSX. React fornece isso com createElement(). O WordPress fornece um invólucro para esta e outras funcionalidades de reação na forma de wp.element. Então, para usar createElement(), usamos wp.element.createElement().
Na função de retorno de chamada blocks.getSaveElement, obtemos:
element O elemento original criado pelo bloco.blockType Um objeto que representa o bloco que está sendo usado.attributesAs propriedades da instância do bloco. No nosso exemplo, isso inclui as imagens na galeria e configurações como o número de colunas.
Portanto, nossa função de retorno de chamada precisa:
- Retorne o elemento original para galerias sem bloco.
- Pegue os atributos, principalmente as imagens, e crie um novo elemento React representando a galeria.
Aqui está um exemplo completo que simplesmente emite um ulcom uma classe, my-gallerye lié para cada imagem com a classe my-gallery-iteme e imgem cada um deles com o srcset para o URL da imagem.
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
}
Algumas coisas a serem observadas:
- O bloco da galeria original localiza imagens procurando
ul.wp-block-gallery .blocks-gallery-item, portanto, essa marcação e essas classes são necessárias para que seja possível editar o bloco. Essa marcação também é usada para o estilo padrão.
attributes.images.mapestá fazendo um loop sobre cada imagem e retornando uma matriz de elementos filho como o conteúdo do elemento principal. Dentro desses elementos, há outro elemento filho para a própria imagem.