Como estender o bloco da galeria em Gutenberg?

Estou brincando com o Gutenberg antes de sua inclusão no núcleo e gostaria de saber como estender o bloco de galeria existente para alterar sua exibição. Por exemplo, em vez de uma grade de miniaturas, eu gostaria de mostrar uma apresentação de slides de imagens. É possível? Se sim, como? Qualquer ajuda seria apreciada.

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.

Aqui para fornecer uma resposta atualizada. Achei este post extremamente útil para responder à pergunta de como estender o bloco de galeria.

Em resumo, é aconselhável apenas criar um novo bloco em vez de estender um existente. Do post no meu link acima:

se você modificar o HTML de um bloco [estendendo], ele não será reconhecido como o bloco original. Em vez de tentar manipular um bloco principal, parece que cancelar o registro do bloco principal e registrar um novo bloco de substituição seria uma abordagem mais segura - dessa forma, você garante que os usuários do site usem sua galeria personalizada específica, que será validada porque define sua própria estrutura HTML.

O link acima também faz referência ao plug-in Create-Guten_Block que é uma ferramenta de linha de comando que irá gerar tudo o que você precisa para iniciar a criação de blocos. A ferramenta é muito fácil de usar e fácil de configurar.

Com esses recursos, consegui descobrir como desenvolver um bloco de galeria personalizado em pouco tempo