Como Utilizar CPTs no Editor de Blocos (Gutenberg)

O editor de blocos Gutenberg revolucionou a maneira como o conteúdo é criado e gerenciado no WordPress.

Neste guia, exploraremos como adaptar e configurar Custom Post Types para aproveitar ao máximo o potencial do Gutenberg.

Adaptação de Custom Post Types para o Gutenberg

Verificação de Suporte ao Gutenberg

Antes de tudo, é importante verificar se o seu Custom Post Type está configurado para suportar o Gutenberg.

Isso é feito através do parâmetro 'show_in_rest' ao registrar o CPT, que permite a integração com a API REST do WordPress, necessária para o Gutenberg.

Exemplo de Registro de CPT com Suporte ao Gutenberg:

$args = array(
    'labels'              => $labels,
    'public'              => true,
    'show_in_rest'        => true, // Importante para suportar Gutenberg.
    // Outros parâmetros como 'supports', 'rewrite', etc.
);
register_post_type( 'seu_custom_post_type', $args );

Blocos de Conteúdo Personalizados

O Gutenberg permite criar blocos personalizados para seus Custom Post Types, oferecendo flexibilidade na apresentação e edição do conteúdo.

Você pode desenvolver blocos sob medida para melhorar a experiência de edição e visualização.

Exemplo de Bloco Personalizado para CPT (Estrutura do Código):

import { registerBlockType } from '@wordpress/blocks';

registerBlockType( 'seu-plugin/bloco-customizado', {
    title: 'Bloco Customizado para CPT',
    icon: 'admin-post', // Ícone do bloco.
    category: 'formatting',
    edit: function( props ) {
        return (
            <p>Edição do bloco personalizado para seu Custom Post Type.</p>
        );
    },
    save: function() {
        return (
            <p>Renderização do conteúdo do bloco personalizado.</p>
        );
    },
} );

Contudo, para implementar um bloco personalizado no WordPress usando JavaScript (ESNext) e React, você precisa seguir alguns passos básicos.

O exemplo acima mostra como registrar um bloco personalizado para ser utilizado com um Custom Post Type (CPT) no editor de blocos Gutenberg.

Explicação do Código

• import { registerBlockType } from '@wordpress/blocks';: Importa a função registerBlockType do pacote @wordpress/blocks, que é usada para registrar um novo bloco no Gutenberg.
• registerBlockType( 'seu-plugin/bloco-customizado', { ... } );: Registra o bloco personalizado com o identificador 'seu-plugin/bloco-customizado'. Substitua 'seu-plugin' pelo nome do seu plugin ou tema, e 'bloco-customizado' pelo nome do seu bloco.
• title: 'Bloco Customizado para CPT': Define o título do bloco que será exibido no editor.
• icon: 'admin-post': Define o ícone do bloco. Aqui está usando o ícone admin-post, mas você pode escolher outros ícones disponíveis no Gutenberg ou até mesmo um ícone personalizado.
• category: 'formatting': Define a categoria onde o bloco será listado no editor de blocos. Neste caso, está na categoria ‘formatting’, mas você pode escolher outra categoria conforme apropriado para seu bloco.
• edit: function( props ) { ... }: Função que define o conteúdo do bloco durante a edição. Aqui, retorna um parágrafo simples. Você pode substituir este conteúdo por qualquer componente React que deseje usar para a interface de edição do seu bloco.
• save: function() { ... }: Função que define como o conteúdo do bloco será renderizado no front-end após ser salvo. Aqui, retorna novamente um parágrafo simples. O conteúdo aqui geralmente é mais simples do que o componente de edição, focando apenas na representação do conteúdo salvo.

Implementação no WordPress

Para implementar esse código em um ambiente WordPress:

• Crie um plugin ou adicione o código em um tema (geralmente no arquivo functions.php ou em um arquivo JavaScript específico).
• Certifique-se de ter o ambiente configurado para desenvolvimento de bloco Gutenberg, incluindo a configuração do webpack ou outro bundler para compilar o JavaScript.
• Adicione o código dentro de um bloco de script JavaScript no seu plugin ou tema.
• Atualize as dependências necessárias do Gutenberg, garantindo que o pacote @wordpress/blocks esteja instalado e disponível.
• Após a implementação, o bloco estará disponível para ser usado no editor de blocos Gutenberg, especialmente em páginas associadas ao seu Custom Post Type.

Este exemplo básico pode ser expandido com mais funcionalidades, como controles de bloco (atributos, controles de bloco, etc.) e estilos personalizados para adaptar o bloco às necessidades específicas do seu projeto WordPress.

Configuração Avançada de CPTs no Gutenberg

Aproveitando Recursos do Gutenberg

Explore recursos avançados do Gutenberg, como blocos dinâmicos e atributos editáveis, para criar uma interface de edição intuitiva e personalizada para seus Custom Post Types.

Integrando Metadados e Campos Personalizados

Utilize plugins como Meta Box ou Advanced Custom Fields (ACF) para adicionar campos personalizados aos seus Custom Post Types e integrá-los perfeitamente ao editor de blocos Gutenberg.

Exemplo Prático de Implementação

Registro de CPT com Suporte ao Gutenberg:

function registrar_meu_cpt() {
    $args = array(
        'labels'              => $labels,
        'public'              => true,
        'show_in_rest'        => true,
        'supports'            => array( 'title', 'editor', 'thumbnail', 'custom-fields' ),
        'rewrite'             => array( 'slug' => 'meu-cpt' ),
        'menu_icon'           => 'dashicons-book', // Ícone para o menu.
    );
    register_post_type( 'meu_cpt', $args );
}
add_action( 'init', 'registrar_meu_cpt' );

Conclusão

O objetivo desse post não é bem ensinar você a criar blocos no Gutenberg, para isso, veja a série: Criando Blocos Personalizados para Gutenberg no WordPress.

Contudo, foi uma ideia para que você saiba que integrar Custom Post Types ao editor de blocos Gutenberg também oferece uma maneira moderna e eficiente de gerenciar conteúdo no WordPress.

Ao seguir estas orientações e explorar as possibilidades avançadas de configuração, você pode otimizar a criação e edição de conteúdo para atender melhor às necessidades do seu site e de seus usuários.

Se você tem alguma dúvida ou gostaria de compartilhar suas experiências, deixe um comentário abaixo.

Estamos aqui para ajudar!

Aproveite também para inscrever-se em nossa newsletter e nosso CANAL NO YOUTUBE para receber mais dicas e tutoriais exclusivos sobre WordPress diretamente na sua caixa de entrada.

Juntos, vamos transformar sua experiência de criação de conteúdo no WordPress!