0
9

SHARE

Blocos Personalizados para CPTs

Blocos Personalizados para CPTs

Descubra como criar e implementar blocos personalizados no Gutenberg para melhorar a experiência de edição de Custom Post Types no WordPress. Aprenda a desenvolver blocos que atendam às necessidades específicas do seu conteúdo.
Este post é a parte 8 de 8 da Série Custom Post Types

Blocos personalizados são componentes modulares que permitem aos usuários do WordPress criar e editar conteúdo de forma flexível no editor de blocos Gutenberg.

Neste guia, exploraremos como desenvolver blocos personalizados para seus Custom Post Types, proporcionando uma experiência de edição ainda mais intuitiva e eficiente.

Criando Blocos Personalizados

Registro do Bloco Personalizado

Para registrar um bloco personalizado, você precisa definir seu título, ícone e categorias.

Abaixo está um exemplo básico de registro de bloco personalizado para um CPT chamado “Portfolio”:

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

registerBlockType( 'seu-plugin/bloco-portfolio', {
    title: 'Bloco de Portfolio',
    icon: 'portfolio', // Ícone do bloco.
    category: 'widgets', // Categoria do bloco no Gutenberg.
    edit: function( props ) {
        return (
            <p>Edição do bloco de Portfolio para seu Custom Post Type.</p>
        );
    },
    save: function() {
        return (
            <p>Renderização do conteúdo do bloco de Portfolio.</p>
        );
    },
} );

Atributos Editáveis e Dinâmicos

Use atributos editáveis para permitir que os usuários personalizem o conteúdo do bloco diretamente no editor.

Atributos dinâmicos permitem que os dados do CPT sejam exibidos dinamicamente no bloco.

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

registerBlockType( 'seu-plugin/bloco-portfolio', {
    title: 'Bloco de Portfolio',
    icon: 'portfolio',
    category: 'widgets',
    attributes: {
        portfolioId: {
            type: 'number', // Tipo do atributo.
        },
    },
    edit: function( props ) {
        const { attributes, setAttributes } = props;
        const { portfolioId } = attributes;

        return (
            <p>
                <input
                    type="number"
                    value={ portfolioId }
                    onChange={ ( newValue ) => setAttributes( { portfolioId: parseInt( newValue ) } ) }
                />
            </p>
        );
    },
    save: function( props ) {
        const { attributes } = props;
        const { portfolioId } = attributes;

        return (
            <div>
                <p>Portfolio ID: { portfolioId }</p>
            </div>
        );
    },
} );

Melhorando a Experiência de Edição com Blocos Personalizados

Reutilização e Flexibilidade

Blocos personalizados oferecem a capacidade de reutilizar e adaptar conteúdo de forma flexível, proporcionando uma experiência de edição mais eficiente e personalizada para os usuários do WordPress.

Integração com Campos Personalizados

Integre campos personalizados do Advanced Custom Fields (ACF) ou Meta Box aos seus blocos personalizados para expandir as capacidades de personalização e controle sobre o conteúdo do seu CPT.

Exemplo Prático de Implementação

Registro do Bloco Personalizado para CPT

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>
        );
    },
} );

Conclusão

A criação de blocos personalizados para Custom Post Types no Gutenberg oferece uma maneira poderosa de personalizar e otimizar a experiência de edição no WordPress.

Ao seguir estas orientações e explorar as possibilidades de atributos dinâmicos e integração com campos personalizados, você pode criar uma interface de edição flexível e eficiente para atender às necessidades específicas do seu site.

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<< Como Utilizar CPTs no Editor de Blocos (Gutenberg)

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)

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

Como Utilizar CPTs no Editor de Blocos (Gutenberg)

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!