0
9

SHARE

Como-Utilizar-CPTs-no-Editor-de-Blocos-Gutenberg

Como Utilizar CPTs no Editor de Blocos (Gutenberg)

Aprenda a integrar Custom Post Types ao editor de blocos Gutenberg do WordPress. Descubra como configurar e personalizar CPTs para uma experiência de edição moderna e eficiente.
Este post é a parte 7 de 8 da Série Custom Post Types

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!

Navegação<< Criando e Gerenciando Taxonomias PersonalizadasBlocos Personalizados para CPTs >>

Não perca mais nenhuma atualização aqui!

Torne-se um Assinante e Eleve seu Conhecimento do WordPress!

Acesso Exclusivo, Suporte Especializado e Muito Mais.

Se você está aproveitando nosso conteúdo gratuito, vai adorar os benefícios exclusivos que oferecemos aos nossos assinantes! Ao se tornar um assinante do WP24Horas, você terá acesso a:

Não perca a oportunidade de maximizar seu potencial no WordPress. Clique no botão abaixo para se tornar um assinante e leve suas habilidades ao próximo nível!

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.

Não perca mais nenhuma atualização aqui!

Tabela de Conteúdo
PUBLICIDADE
Últimos Posts

Quanto Cobrar por um Site WordPress em 2024?

Integração Git + GitHub + WordPress (Live & Local)

Integração Git + GitHub + WordPress (Live & Local)

Melhores Práticas de Desenvolvimento de Plugins WordPress: Plugins Templates

Melhores Práticas de Desenvolvimento de Plugins WordPress: Plugins Templates

Curso FSE Full Site Editing WordPress

O que é a Edição Completa do Site (Full Site Editing)?

Melhores Temas do Elementor para WordPress em 2024

15 Melhores Temas para Elementor (e quando usá-los)

Blocos Personalizados para CPTs

Blocos Personalizados para CPTs

Você precisa estar logado para ver esta informação.

Torne-se um Assinante e Eleve seu Conhecimento do WordPress!

Acesso Exclusivo, Suporte Especializado e Muito Mais.

Se você está aproveitando nosso conteúdo gratuito, vai adorar os benefícios exclusivos que oferecemos aos nossos assinantes! 

Não perca a oportunidade de maximizar seu potencial no WordPress. Clique no botão abaixo para se tornar um assinante e leve suas habilidades ao próximo nível!