Blocos Personalizados para CPTs

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!