Como estender o bloco de galeria em Gutenberg?

10

Estou jogando com 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, gostaria de mostrar uma apresentação de slides de imagens. É possível? Se sim, como? Qualquer ajuda seria apreciada.

    
por leemon 19.03.2018 / 10:12

1 resposta

9

Ok, eu tenho jogado com isso um pouco e consegui mudar a saída do bloco Gallery, com as seguintes advertências:

  • A visualização não corresponde à saída. Eu acho que isso é possível, mas parece estar um pouco mais envolvido.
  • Determinadas 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 front-end que precisam ser tratados. Não tenho certeza se há uma maneira de filtrar como o bloco faz isso. Se for possível, pode até não ser uma boa ideia se isso significa que os blocos da Galeria estão quebrados quando um tema ou plugin é desativado. Um bloco totalmente novo provavelmente seria o caminho a percorrer para situações em que isso seria necessário.
  • Não sei ao certo como os tamanhos de imagem funcionam neste estágio.
  • O método de ganchos JavaScript usado pode não ser relevante na versão final. Gutenberg usa @wordpress/hooks enquanto conversa sobre o sistema de ganchos a ser usado no Core is em andamento .
  • Como a saída de Blocks é salva como HTML, não um shortcode ou meta, não será possível modificar a saída de galerias existentes sem editá-los.

A primeira coisa que precisamos fazer é registrar um script. Isso é feito com wp_enqueue_scripts() , mas no gancho enqueue_block_editor_assets .

O script deve ter o script wp-blocks como uma dependência. É quase certo que já está 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 da saída de um bloco é tratado pelo método save() do bloco. Você pode ver o bloco da Galeria em este arquivo .

Nesta fase (março de 2018), Gutenberg suporta um filtro no método de salvar blocos, blocks.getSaveElement . Podemos adicionar um gancho para isso em JavaScript assim:

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

O primeiro argumento é o nome do hook, o segundo argumento é - eu acho - um namespace, e o último argumento é a função callback.

Como estamos substituindo o método save() do bloco, precisamos retornar um novo elemento. No entanto, este não é um elemento HTML normal que precisamos retornar. Precisamos devolver um elemento Reagir .

Quando você olha para o método save() do bloco original, o que você vê é o JSX. React, que Gutenberg usa sob o capô, suporta-o para renderizar elementos. Consulte este artigo para saber mais sobre isso.

JSX normalmente requer uma etapa de compilação, mas como não estou apresentando uma etapa de compilação para este exemplo, precisamos criar um elemento sem JSX. React fornece isso com createElement() . O WordPress fornece um wrapper para esta e outras funcionalidades de resposta na forma de wp.element . Então, para usar createElement() , usamos wp.element.createElement() .

Na função de retorno de chamada para blocks.getSaveElement , obtemos:

  • element O elemento original criado pelo bloco.
  • blockType Um objeto representando o bloco sendo usado.
  • attributes As propriedades da instância do bloco. Em nosso exemplo, isso inclui as imagens na galeria e configurações como o número de colunas.

Nossa função de retorno de chamada precisa:

  • Retorna o elemento original para galerias sem bloco.
  • Pegue os atributos, especialmente as imagens, e crie um novo elemento Reagir representando a galeria.

Este é um exemplo completo que simplesmente mostra um ul com uma classe, my-gallery e li s para cada imagem com as classes my-gallery-item e img em cada uma delas com src definido 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 para anotar:

  • O bloco de galeria original encontra imagens procurando ul.wp-block-gallery .blocks-gallery-item , portanto, essa marcação e essas classes são necessárias para editar o bloco. Essa marcação também é usada para o estilo padrão.
  • attributes.images.map está fazendo o loop de cada imagem e retornando uma matriz de elementos filhos como o conteúdo para o elemento principal. Dentro desses elementos há outro elemento filho para a própria imagem.
por Jacob Peattie 21.03.2018 / 10:57