Um guia completo de desenvolvimento e avanço prático do Editor de Blocos Gutenberg do WordPress.

O Editor de Blocos Gutenberg do WordPress revolucionou a maneira como o conteúdo é criado, entregando a flexibilidade e o controle da construção de páginas diretamente aos editores. Para os desenvolvedores, isso representa um novo paradigma de desenvolvimento baseado em React e JavaScript moderno. Este artigo explorará em profundidade como criar blocos personalizados do zero, bem como como avançar para o desenvolvimento de blocos dinâmicos e a aplicação de variantes de blocos, com o objetivo de fornecer um guia prático e abrangente para o desenvolvimento.

Compreender a arquitetura central do editor de blocos

O Editor Gutenberg não é um aplicativo único e completo, mas sim um ecossistema composto por vários pacotes (packages) independentes. Compreender sua arquitetura é fundamental para um desenvolvimento eficaz.

Separação entre o editor e a camada de dados

A interface do editor em si é separada da camada de dados do WordPress. @wordpress/editor O pacote fornece os componentes da interface do usuário (UI) do editor. @wordpress/data O pacote implementa um gerenciamento de estado semelhante ao do Redux. Essa separação permite que os desenvolvedores se concentrem na visualização e na lógica de interação dos blocos, enquanto a persistência dos dados é tratada automaticamente pelos mecanismos internos do WordPress.

Leitura recomendada Domine os tipos de artigos personalizados do WordPress: um guia prático completo, desde a criação até a publicação.。

Registro e Ciclo de Vida dos Blocos

Cada bloco precisa ser aprovado/validado. registerBlockType A função é registrada. Esta função aceita dois parâmetros: o nome único do bloco (por exemplo,...). my-plugin/my-custom-block) e um objeto que contém todas as informações de configuração do bloco.
Após o registro, o bloco passará por um ciclo de vida que inclui inicialização, renderização, edição e salvamento. Os desenvolvedores controlam esses processos principalmente através da definição de regras e configurações apropriadas. edit e save Duas funções-chave para controlar o comportamento dos blocos no editor e no frontend.

Hospedagem para sites WordPress da UltraHost

Garantia de reembolso em 30 dias, largura de banda ilimitada e banco de dados, proteção contra DDoS gratuita; desconto de 50% na compra de 3 anos (planos de 4 TB a 10 TB).

página de acesso

Crie o seu primeiro bloco personalizado do zero.

Vamos criar um bloco simples de “dicas em destaque” que permitirá que os usuários adicionem uma caixa de dicas com cor de fundo e título.

Configurar o ambiente de desenvolvimento e os arquivos básicos

Primeiro, confira se o seu ambiente de desenvolvimento está pronto. Você precisa dos ambientes Node.js e npm. Crie uma nova pasta para os plugins no diretório dos plugins, por exemplo: my-custom-blocksNesse folder, crie os seguintes arquivos principais:
- my-custom-blocks.php (Ficheiro principal do plugin)
- package.json (Usado para gerenciar dependências do Node.js e scripts de compilação)
- src/ Diretório (usado para armazenar o código-fonte)
- build/ Diretório (diretório de saída do ferramenta de construção, lido pelo WordPress)

Nos package.json Neste processo, configure o script de construção e introduza-o no sistema. @wordpress/scripts O pacote pode simplificar significativamente a configuração de ferramentas como Webpack e Babel.

{
  "name": "my-custom-blocks",
  "scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start"
  },
  "devDependencies": {
    "@wordpress/scripts": "^26.0.0"
  }
}

No arquivo principal do plugin my-custom-blocks.php Neste caso, você precisa usar register_block_type Uma função é utilizada para informar o WordPress de onde proceder (ou de onde obter dados). build Ativos do bloco de carregamento do índice.

Leitura recomendada Guia de desenvolvimento de temas do WordPress: construir um tema personalizado de alta performance do zero。

<?php
/**
 * Plugin Name: My Custom Blocks
 */
function my_custom_blocks_register_block() {
    register_block_type( __DIR__ . '/build/highlight-box' );
}
add_action( 'init', 'my_custom_blocks_register_block' );

Código-fonte JavaScript para criar blocos

Nos src Criar um arquivo no diretório. highlight-box/index.js Arquivo. Este é o arquivo de entrada principal do bloco.

import { registerBlockType } from '@wordpress/blocks';
import { RichText, useBlockProps, InspectorControls, ColorPalette } from '@wordpress/block-editor';
import { PanelBody, PanelRow } from '@wordpress/components';

registerBlockType('my-custom-blocks/highlight-box', {
    title: '高亮提示框',
    icon: 'warning', // 从 Dashicons 中选择
    category: 'design',
    attributes: {
        title: {
            type: 'string',
            source: 'html',
            selector: '.highlight-title',
        },
        content: {
            type: 'string',
            source: 'html',
            selector: '.highlight-content',
        },
        backgroundColor: {
            type: 'string',
            default: '#fff3cd',
        },
    },
    edit: ({ attributes, setAttributes }) => {
        const blockProps = useBlockProps();
        const { title, content, backgroundColor } = attributes;

const onChangeTitle = (newTitle) => {
            setAttributes({ title: newTitle });
        };
        const onChangeContent = (newContent) => {
            setAttributes({ content: newContent });
        };
        const onChangeBackgroundColor = (newColor) => {
            setAttributes({ backgroundColor: newColor });
        };

return (
            <>
                <inspectorcontrols>
                    <panelbody title="Configurações de Cor">
                        <panelrow>
                            <colorpalette
                                value="{backgroundColor}"
                                onchange="{onChangeBackgroundColor}"
                            />
                        </panelrow>
                    </panelbody>
                </inspectorcontrols>
                <div {...blockprops} style="{{" backgroundcolor, padding: '20px', borderradius: '5px' }}>
                    <richtext
                        tagname="h3"
                        classname="highlight-title"
                        onchange="{onChangeTitle}"
                        value="{title}"
                        placeholder="输入标题..."
                    />
                    <richtext
                        tagname="p"
                        classname="highlight-content"
                        onchange="{onChangeContent}"
                        value="{content}"
                        placeholder="输入提示内容..."
                    />
                </div>
            </>
        );
    },
    save: ({ attributes }) =&gt; {
        const blockProps = useBlockProps.save();
        const { title, content, backgroundColor } = attributes;
        return (
            <div {...blockprops} style="{{" backgroundcolor, padding: '20px', borderradius: '5px' }}>
                <RichText.Content tagName="h3" className="highlight-title" value={title} />
                <RichText.Content tagName="p" className="highlight-content" value={content} />
            </div>
        );
    },
});

estar em movimento npm start Ativar o modo de desenvolvimento (para monitorar alterações em arquivos) ou npm run build Realize a construção do produto. Em seguida, no editor do WordPress, você poderá encontrar e usar o bloco “Caixa de Dicas em Destaque” na categoria “Design”.

Desenvolvimento Avançado: Blocos Dinâmicos e Renderização no Servidor

O conteúdo dos blocos estáticos é salvo diretamente no corpo do artigo. No entanto, para os blocos que necessitam de dados em tempo real (como a lista de artigos mais recentes ou informações dos usuários), é necessário criar blocos dinâmicos. Ao salvar esses blocos, apenas algumas informações são armazenadas (como o número de artigos), e o conteúdo é gerado dinamicamente no lado front-end utilizando modelos PHP.

hospedagem compartilhada da hosting.com

Alto desempenho com CPUs AMD EPYC, armazenamento SSD NVMe e LiteSpeed, suporte interno especializado 24 horas por dia, 7 dias por semana, medidas de segurança avançadas, incluindo SSL, força bruta, malware e proteção contra DDoS, economia de até 73%

página de acesso

Convertir blocos estáticos em blocos dinâmicos

Primeiramente, modifique a configuração de registro do bloco para… save A função foi alterada para retornar um valor. nullE adicione mais um. render_callback Atributos.

// 在 registerBlockType 的配置对象中
save: () => {
    return null; // 动态区块不在内容中保存 HTML
},

Em seguida, atualize o código de registro no lado PHP, especificando a função de callback de renderização.

function my_custom_blocks_register_dynamic_block() {
    register_block_type( __DIR__ . '/build/latest-posts', [
        'render_callback' => 'my_custom_blocks_render_latest_posts'
    ] );
}
add_action( 'init', 'my_custom_blocks_register_dynamic_block' );

function my_custom_blocks_render_latest_posts( $attributes ) {
    $posts = get_posts( [
        'posts_per_page' => $attributes['numberOfPosts'] ?? 5,
    ] );

if ( empty( $posts ) ) {
        return '<p>Não há artigos disponíveis.</p>'$output = '<ul class="wp-block-my-custom-blocks-latest-posts">';
    foreach ( $posts as $post ) {
        $output .= sprintf(
            '<li><a href="/pt/%s/">%s</a></li>'php
    esc_url(get_permalink($post));
    esc_html(get_the_title($post));
    $output .= '';'</ul>';

return $output;
}

Utilizar arquivos de modelo de bloco para a renderização.

Para blocos dinâmicos mais complexos, é recomendado o uso de arquivos de template. Crie-os no diretório dos plugins. templates/latest-posts.phpMova a lógica de renderização acima para esse arquivo e, em seguida, render_callback Use isto no chinês (simplificado) ob_get_clean e include Isso permite o carregamento de templates, tornando a lógica de PHP e HTML mais clara e fácil de manter.

Leitura recomendada Tutorial do plugin WooCommerce: um guia completo desde a instalação e configuração até a operação da loja.。

Tópicos avançados e melhores práticas

Após dominar os blocos básicos e dinâmicos, os seguintes tópicos permitirão que você desenvolva blocos ainda mais poderosos e profissionais.

Implementar a funcionalidade de variantes para blocos

As “Variações de Bloco” (Block Variations) permitem que você crie vários estilos ou configurações pré-definidos com base em um bloco básico. Por exemplo, você pode criar variações como “Sucesso”, “Aviso” e “Erro” para uma “Caixa de Mensagem de Destaque”.

Hospedagem Compartilhada InterServer

Hospedagem compartilhada $2.50 USD por mês, primeiro mês $0.1 USD código promocional tryinterserver, 461 scripts de aplicativos em nuvem, instalação com um clique.

página de acesso

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

registerBlockVariation('my-custom-blocks/highlight-box', [
    {
        name: 'success',
        title: '成功提示',
        icon: 'yes-alt',
        attributes: {
            title: '操作成功',
            backgroundColor: '#d4edda',
        },
        isDefault: false,
    },
    {
        name: 'error',
        title: '错误警告',
        icon: 'dismiss',
        attributes: {
            title: '发生错误',
            backgroundColor: '#f8d7da',
        },
    },
]);

Utilizar estilos de blocos e estilos do editor

fazer uso de registerBlockStyle As funções podem adicionar diferentes estilos visuais aos blocos, e os usuários podem alterná-los no painel lateral. Ao mesmo tempo, é possível utilizar… add_editor_style É possível garantir que a pré-visualização no editor esteja em conformidade com os estilos do front-end, proporcionando uma experiência de “veja o que é exibido na página real”.

Otimização de desempenho e divisão do código

À medida que o número de blocos aumenta, empacotar todo o JavaScript em um único arquivo pode afetar o desempenho de carregamento. É possível utilizar… @wordpress/dependency-extraction-webpack-plugin(Já incluído em…) @wordpress/scripts (II) Assegure-se de que as dependências externas dos pacotes do WordPress sejam declaradas corretamente. Para plugins de grande porte, considere o uso de técnicas de carregamento sob demanda ou de divisão do código.

resumos

O desenvolvimento do editor de blocos do Gutenberg é um processo que integra tecnologias front-end modernas (React, JSX, Webpack) com conhecimentos tradicionais de PHP do WordPress. Comece entendendo sua arquitetura, domine os APIs essenciais ao criar blocos estáticos, avance para o processamento de dados dinâmicos em blocos dinâmicos e, por fim, aprimore a experiência do usuário e a eficiência do desenvolvimento com funcionalidades avançadas, como variantes de blocos e estilos. Seguindo as melhores práticas – como uma organização clara do código, otimização de desempenho e preparação adequada para a internacionalização – você poderá criar blocos personalizados poderosos, fáceis de manter e amigáveis ao usuário, liberando todo o potencial do editor do Gutenberg.

Perguntas frequentes Perguntas frequentes

É necessário usar React para desenvolver blocos do tipo Gutenberg?

Sim, atualmente o método oficial de desenvolvimento do editor Gutenberg é totalmente baseado no React. Embora, em teoria, seja possível usar outros frameworks, todos os componentes, ganchos (hooks) e ferramentas fornecidos pelo núcleo do WordPress foram criados com o ecossistema React em mente. Utilizar outro framework acarretaria uma grande complexidade e problemas de compatibilidade.

Como adicionar controles personalizados à barra lateral do meu bloco?

Você pode usar <code>InspectorControls</code> Componentes. Dentro do bloco. edit Na função, retorne-o juntamente com o conteúdo principal da pré-visualização. <code>InspectorControls</code> Internamente, você pode usar… <code>PanelBody</code>、<code>TextControl</code>、<code>SelectControl</code>、<code>RangeControl</code></code> 等来自 Os componentes do pacote `@wordpress/components` são utilizados para criar interfaces de configuração avançadas e detalhadas.

Quais são as diferenças em desempenho entre blocos dinâmicos e blocos estáticos?

O conteúdo HTML dos blocos estáticos é armazenado diretamente no banco de dados, junto com o resto do conteúdo dos posts. Isso faz com que a carga na interface do usuário seja muito rápida, mas esses blocos não podem conter dados dinâmicos. Os blocos dinâmicos, por outro lado, precisam executar código PHP para consultar o banco de dados durante a renderização, o que acarreta um pequeno impacto no desempenho, mas permitem a exibição de dados em tempo real. Para conteúdos que não mudam frequentemente, pode-se considerar o uso de blocos estáticos combinados com uma estratégia de cache periódica; no entanto, para conteúdos que exigem alta atualização em tempo real, é necessário utilizar blocos dinâmicos.

Posso usar blocos na área de ferramentas tradicionais ou nos quadros de metadados dos artigos?

Sim, isso é chamado de “miniaturas de blocos” e “caixas de metadados de blocos”. A partir do WordPress 5.8, a área de miniaturas também é totalmente gerida pelo editor de blocos Gutenberg. Você também pode usá-los. register_block_type Não. widget_types É necessário utilizar parâmetros (ou APIs relacionadas) para que os blocos fiquem disponíveis no editor de widgets. Para as caixas de metadados dos artigos, é possível utilizar…register_post_meta A API, em conjunto com os blocos, permite criar uma interface de edição de metadados mais intuitiva.