Como controlar blocos do Gutenberg para postagens no WordPress: desative blocos e modelos de bloco

O novo editor do WordPress, Gutenberg, oferece ao autor grande flexibilidade para criar conteúdo rico. Mas, em alguns casos, você pode precisar limitar um pouco isso, seja como webmaster do site ou como desenvolvedor de temas. Neste post veremos como podemos fornecer limitações de bloco no Gutenberg usando PHP.

Existem funcionalidades internas para definir algumas limitações em blocos com os quais muitos ainda não estão familiarizados. Isso pode ser útil quando você precisa que certas postagens sigam o mesmo design ou conteúdo, ou se quiser ajudar autores não técnicos a não serem sobrecarregados pelo número de blocos no Gutenberg. Outro exemplo inclui adicionar automaticamente os blocos de anúncios necessários (se você tiver um plug-in de anúncios) entre os textos nas postagens. Você pode forçar isso ou usar essas técnicas para ajudar os autores a lembrar de adicioná-las.

Neste post, veremos duas maneiras de controlar blocos no WordPress Gutenberg. Uma maneira é limitar o tipo de blocos que podem ser adicionados. Em outras palavras, remova certos tipos de blocos que você não deseja que estejam disponíveis. Podemos fazer isso especificamente por tipo de postagem ou globalmente. A outra maneira é usar modelos de bloco. O WordPress permite que você decida um conjunto de blocos predefinidos ao criar um novo post. Isso é feito por tipo de postagem. Com os modelos de bloco, você pode oferecer ao autor os blocos iniciais para ajudá-lo a escrever o post, ou pode bloquear os blocos no lugar para que o autor não possa alterar sua posição ou adicionar novos.

Você pode fazer ambos com PHP ou Javascript. Este guia irá cobrir o caminho do PHP.

Remover tipos de bloco

Lista negra

Existe um filtro PHP no WordPress chamado allowed_block_types. Este filtro fornece dois parâmetros; uma matriz de todos os blocos e o objeto post. Tudo o que precisamos fazer é gerenciar o array antes de devolvê-lo. E como também obtemos o objeto de postagem no filtro, também podemos adicionar regras por tipo de postagem ou outras informações meta de postagem.

A matriz de blocos consiste em sequências de nomes com namespace do bloco. Todos os blocos no WordPress requerem um namespace prefixado antes do nome do bloco. Para os blocos principais do WordPress o namespace é ” core/" e para os blocos de incorporação do WordPress o namespace é ” “. Porcore-embed/ exemplo, o bloco de cabeçalho tem o nome ” core/heading" neste array. para acessar e analisar os blocos de uma postagem.

Aqui está um exemplo rápido de como usar o filtro para remover todos os blocos, exceto o parágrafo. Isso se aplicará a todos os tipos de postagem.

add_filter('allowed_block_types', function($block_types, $post) {
    return ['core/paragraph'];
}, 10, 2);

Se você adicionar este código no arquivo do seu tema functions.phpou plugin, o resultado é que o Gutenberg não permite nenhum outro bloco além do parágrafo. Você nem poderá ver outros blocos, nem tentar atraí-los digitando ” /” na postagem (atalho de bloco) ou procurando por eles.

Podemos definir os blocos que queremos manter ou remover por tipo de postagem. Nós simplesmente verificamos a propriedade post_typeno objeto post. No exemplo de código abaixo, definimos um novo array dos blocos que queremos permitir e adicionamos essa regra apenas para o tipo de postagem personalizado ‘ book‘.

Com o código acima você obtém todos os blocos ao editar posts e páginas, mas ao editar o tipo de post personalizado ‘ book‘, você só pode adicionar parágrafos, títulos e imagens únicas.

Use sua imaginação para adicionar suas próprias regras. Como temos o objeto post, podemos acessar a maioria das informações que precisaríamos. Talvez você precise limitar as opções de bloco por um valor meta pós? Por exemplo, por modelo de página escolhido, categoria de postagem escolhida ou outra coisa.

Lista de permissões

Até onde posso ver, você só pode listar blocos (decidir quais remover, em vez de decidir qual manter) cancelando o registro dos blocos em um determinado ponto. E você tem que fazer isso com Javascript e não PHP.

Não entrarei em detalhes sobre isso, mas você precisará enfileirar um arquivo Javascript carregado initou enqueue_block_editor_assetsgancho, com wp-dom-readye wp-blockscomo dependência. Dentro do script você pode configurar uma variável daquela(s) que deseja remover, seguindo as mesmas regras para namespaces e nomes de blocos acima. E para cada nome de bloco você chama a função unregisterBlockType()do wp.blockspacote. Normalmente, você precisaria fazer isso dentro de uma função wp.domReady()para garantir que a ordem de carregamento do script esteja correta.

Algo assim:

var removeBlocks = [
    'core/paragraph',
    'core/heading',
    'core/image'
];
 
wp.domReady(function() {
    removeBlocks.forEach(function(blockName) {
        wp.blocks.unregisterBlockType(blockName);
    });
});

A remoção de tipos de blocos é uma forma de controlar blocos no Gutenberg. Vamos dar uma olhada na outra maneira, talvez mais divertida, de controlar blocos: templates de blocos.

Modelos de bloco

Outra maneira de controlar os blocos do Gutenberg no WordPress é usando modelos de bloco. O WordPress possui uma funcionalidade que permite preencher novos posts com um conjunto de blocos predefinidos. Isso pode ser útil para ajudar os autores, mostrando a eles uma sugestão de estrutura de bloco. Você também pode optar por bloquear esses blocos pré-preenchidos, não permitindo que os autores reorganizem ou adicionem outros blocos. Isso é útil quando você deseja que as postagens tenham uma estrutura e design específicos – por exemplo, certificando-se de que todas as postagens desse tipo de postagem tenham suas informações estruturadas exatamente da mesma maneira.

Podemos adicionar modelos de bloco com um novo parâmetro à [register_post_type](https://developer.wordpress.org/reference/functions/register_post_type/)()função que é usada para registrar tipos de postagem personalizados (nota: o novo parâmetro ainda não foi adicionado à documentação). Você também pode adicionar ou ajustar os parâmetros em tipos de postagem existentes, como postagens e páginas – veja abaixo como.

O novo parâmetro para register_post_type()é ‘ template‘. Como valor para ‘ template‘ você precisa fornecer um array de blocos. Cada bloco deve ser um array também. No mínimo, você precisa fornecer o primeiro elemento da matriz; o nome do bloco (por exemplo core/paragraph, ). Você pode opcionalmente adicionar um segundo elemento de array para atributos e um terceiro elemento de array para blocos aninhados (por exemplo, Cover, Columns blocks). Ficará mais claro quando você vir o código.

Vamos começar simples. Suponha que tenhamos uma register_post_type()chamada de função para registrar um tipo de postagem personalizado ‘ book‘. Queremos pré-preencher todas as novas postagens desse tipo de postagem com um bloco de parágrafo com um espaço reservado informando ao autor o que ele deve escrever.

Observe que a matriz de atributos (com ‘placeholder’) é opcional. Agora, com este parâmetro ‘template’ sempre que criarmos novos posts, ele será criado com um bloco de parágrafo que possui o placeholder “Escreva sua introdução aqui…”.

Vejamos um exemplo mais complicado: blocos aninhados. Digamos que queremos adicionar um bloco de capa que tenha um bloco de título, um parágrafo e um botão dentro dele, alinhado ao centro. O título e o parágrafo terão um espaço reservado:

A imagem abaixo mostra o que obteremos quando criarmos novas publicações de livros. Parece menos intimidante do que uma tela em branco, certo?

Tenha em mente que os atributos são diferentes em cada tipo de bloco e também podem diferir em sua configuração. No exemplo de código acima, adiciono dois atributos ao bloco Cover; bloqueie o alinhamento para “Full Width” e sobreponha a cor a uma cor predefinida de uma paleta de cores personalizada.

Os alinhamentos de blocos “Wide Width” e “Full Width” devem ser especificamente suportados em seu tema. Eu tenho um post que explica como adicionar suporte em seu tema para alinhamentos de blocos adicionais se você não estiver familiarizado com isso. Em segundo lugar, meu tema está fornecendo uma paleta de cores personalizada do Gutenberg, onde uma das cores da paleta é chamada de ‘perfil azul’. Isso provavelmente não existirá em seu código. O link acima também explica isso se você não estiver familiarizado com a paleta personalizada do Gutenberg.

A razão pela qual escolho fornecer uma cor de sobreposição como atributo é por causa de como o bloco Cover se comporta. Quando você cria um bloco de capa, ele começa pedindo para você escolher entre definir uma imagem de fundo ou escolher uma cor de fundo. Até que o autor escolha ativamente um deles, o bloco Capa oculta qualquer conteúdo que tenha (o título, parágrafo e botão que adicionamos)! Eles aparecerão de repente depois de escolher uma imagem ou cor. Portanto, para evitar confusão, pré-selecionei uma cor de fundo para que o autor veja todos os blocos dentro imediatamente. A cor sempre pode ser alterada no Inspetor (barra lateral) de qualquer maneira.

Bloqueando o modelo de bloco

Com o modelo de bloco fornecido, o autor pode reorganizar e remover qualquer um dos blocos pré-preenchidos, bem como adicionar novos blocos em qualquer lugar que desejar. Se você quiser evitar isso, há outro parâmetro para register_post_type(): ‘ template_lock‘.

O template_lockparâmetro ‘ ‘ aceita dois valores; ‘ all‘ ou ‘ insert‘.

Definir ‘ template_lock‘ para ‘ all‘ bloqueia completamente os autores de reorganizar, remover ou adicionar novos blocos ao seu modelo de bloco. Eles só podem editar o conteúdo e as configurações dos blocos definidos como modelo de bloco. Isso é útil nos casos em que você deseja que todos os tipos de postagem consistam nos mesmos blocos na mesma ordem – nem mais nem menos.

Usar ‘ insert‘ para ‘ template_lock‘ permite que os autores reorganizem os blocos no modelo de bloco. Mas os autores ainda não podem adicionar novos blocos ou excluir nenhum dos blocos.

Veja como você bloquearia completamente o modelo de bloco para o tipo de postagem personalizado ‘ book‘:

O uso de um modelo de bloco bloqueado no Gutenberg será semelhante ao abaixo. Observe que os ícones de ação para reorganizar blocos estão ausentes, bem como remover links de blocos no menu. Também não há ícones de ação para adicionar novos blocos (o pequeno “+”) em qualquer lugar.

Ajustando modelos de bloco para tipos de postagem existentes

Se você quiser usar modelos de bloco em posts ou páginas, você também pode fazer isso. Conecte uma função inite use [get_post_type_object](https://developer.wordpress.org/reference/functions/get_post_type_object/)(). Forneça o tipo de postagem que você deseja como parâmetro (‘ post‘ ou ‘ page‘). Isso retorna um objeto ao qual você pode atribuir a propriedade ‘ template‘ e ‘ template_lock‘.

Este é um exemplo de adição do mesmo modelo de bloco e propriedade de bloqueio acima nas páginas:

Conclusão

Neste post aprendemos como obter maior controle de blocos no editor WordPress Gutenberg. Há muitos benefícios em fazer isso, especialmente em combinação com tipos de postagem personalizados que precisam seguir uma estrutura específica. Usar as técnicas acima ajudará você a agilizar mais seu processo, tanto como webmaster (ajudando as pessoas a escrever postagens melhores) quanto como desenvolvedor de temas (garantindo um design comum). Os modelos de bloco bloqueados podem ser uma solução diferente dos modelos de postagem personalizados e meta de postagem.

A personalização de modelos de bloco ainda é um recurso bastante oculto do Gutenberg no momento. Mas espero que isso mude à medida que o Gutenberg se desenvolve e ganha um lugar mais familiar no WordPress.