WordPress 7.0 Crie Blocos Só com PHP (Sem React, Sem Build Tools)

Por Que Blocos PHP-Only Importam

Olha só: durante anos, criar um bloco customizado no WordPress significava aprender React, configurar um build pipeline com NPM e manter um block.json junto com PHP e JavaScript. Isso é uma barreira enorme para milhares de devs que dominam PHP mas não têm tempo (ou paciência) para o ecossistema JavaScript moderno.

O WordPress 7.0 muda isso com uma flag autoRegister que permite registrar um bloco totalmente funcional usando apenas PHP. O WordPress gera automaticamente o JavaScript necessário para o preview no editor com base no seu registro PHP.

Isso não substitui blocos feitos em JavaScript—é uma ponte. O valor real está em migrar código PHP legado (widgets, shortcodes, template parts) para temas de bloco sem reescrever tudo em React. Para uma visão de como outras plataformas estão priorizando a experiência do desenvolvedor, dá uma olhada na nossa análise sobre a infraestrutura de datacenters da Azure para a plataforma Rubin da NVIDIA.

Vamos ver como funciona, o que dá e o que não dá pra fazer, e quando usar. Vamos lá! 🚀

Criando um Bloco PHP-Only: Passo a Passo

1. Registre um Bloco Básico

O segredo é a flag 'autoRegister' => true dentro de supports. O WordPress cuida do registro client-side e do preview no editor automaticamente.

function meu_bloco_hello_world() {
    register_block_type(
        'meu-plugin/hello-world',
        [
            'title'           => 'Hello World',
            'render_callback' => function () {
                return sprintf(
                    '<div %s>Hello World!</div>',
                    get_block_wrapper_attributes()
                );
            },
            'supports'        => [
                'autoRegister' => true,
            ],
        ]
    );
}
add_action( 'init', 'meu_bloco_hello_world' );

2. Adicione Atributos (Controles Auto-Gerados)

Defina atributos em PHP e o WordPress gera os controles de input correspondentes na sidebar de configurações do bloco.

function meu_bloco_saudacao() {
    register_block_type(
        'meu-plugin/saudacao',
        [
            'title'           => 'Saudação',
            'render_callback' => function ( $attributes ) {
                return sprintf(
                    '<div %s>%s</div>',
                    get_block_wrapper_attributes(),
                    esc_html( $attributes['saudacao'] )
                );
            },
            'supports'        => [ 'autoRegister' => true ],
            'attributes'      => [
                'saudacao' => [
                    'type'    => 'string',
                    'default' => 'Olá, Mundo!',
                ],
            ],
        ]
    );
}
add_action( 'init', 'meu_bloco_saudacao' );

3. Detecte Editor vs. Frontend

Use wp_is_rest_endpoint() combinado com uma checagem de rota pra saber quando o bloco está sendo renderizado no preview do editor.

function meu_bloco_contexto() {
    register_block_type(
        'meu-plugin/contexto',
        [
            'title'           => 'Contexto',
            'render_callback' => function () {
                $is_editor = wp_is_rest_endpoint()
                    && str_contains( $GLOBALS['wp']->query_vars['rest_route'] ?? '', 'v2/block-renderer/' );
                $bgcolor   = $is_editor ? '#0073aa' : '#46b450';
                $label     = $is_editor ? 'Renderizado no editor' : 'Renderizado no frontend';

                return sprintf(
                    '<div %s>%s</div>',
                    get_block_wrapper_attributes( [ 'style' => "background:$bgcolor;color:#fff;padding:1em;" ] ),
                    esc_html( $label )
                );
            },
            'supports'        => [ 'autoRegister' => true ],
        ]
    );
}
add_action( 'init', 'meu_bloco_contexto' );

4. Enfileire Estilos e Scripts

Use style para editor e frontend, editor_style para overrides só no editor, e view_script para JavaScript só no frontend.

function meu_bloco_estilizado() {
    wp_register_style(
        'meu-plugin-block-style',
        plugins_url( 'style.css', __FILE__ ),
        [],
        filemtime( plugin_dir_path( __FILE__ ) . 'style.css' )
    );

    register_block_type(
        'meu-plugin/estilizado',
        [
            'title'           => 'Bloco Estilizado',
            'render_callback' => function () {
                return sprintf(
                    '<div %s>Conteúdo estilizado</div>',
                    get_block_wrapper_attributes()
                );
            },
            'supports'        => [ 'autoRegister' => true ],
            'style'           => 'meu-plugin-block-style',
        ]
    );
}
add_action( 'init', 'meu_bloco_estilizado' );

Limitações Que Você Precisa Conhecer

Blocos PHP-only não substituem blocos em JavaScript. Veja o que você perde:

Essas limitações são arquiteturais, não temporárias. Não vão mudar em releases futuros.

O Caso de Uso Matador: Migrar PHP Legado

O valor real dos blocos PHP-only é migrar temas clássicos para temas de bloco. Se você tem widgets legados, shortcodes ou template parts, pode envolvê-los em um bloco PHP-only e colocá-los renderizando no editor de blocos em horas em vez de dias.

O preview no editor não vai ser perfeito—pode não ser responsivo, os controles podem não funcionar—mas se o frontend renderiza certo, muitas vezes isso basta. Para uma outra perspectiva sobre trade-offs pragmáticos de engenharia, dá uma olhada em como treinamos um modelo text-to-image em 24 horas.

Block Supports Úteis para Blocos PHP-Only

'supports' => [
    'autoRegister' => true,
    'inserter'     => false,        // Esconde do inserter de blocos
    'multiple'     => false,        // Só uma instância por post
    'align'        => [ 'left', 'center', 'right' ], // Alinhamento seletivo
    'color'        => [ 'background' => true, 'text' => true ],
],

Dica Pro: Use o Editor com Iframe

A partir do WordPress 7.0, o editor de posts usa iframe se todos os blocos forem Block API Version 3 ou superior. O WordPress 7.1 vai forçar o iframe independentemente. Pra se preparar, garanta que seus blocos usem API Version 3—isso evita que estilos do admin interfiram nos estilos do seu bloco.

Conclusão: Valeu a Espera de 7,5 Anos?

Pra criar blocos ricos e interativos do zero—não. Você ainda precisa de JavaScript pra experiências de edição nativas.

Mas pra migrar código PHP legado pra temas de bloco? Com certeza. O registro de blocos PHP-only remove as duas maiores barreiras: aprender desenvolvimento de blocos em JavaScript e reescrever tudo em React. Agora você pode portar shortcodes, widgets e template parts usando as habilidades PHP que você já tem.

Próximos passos:

• Audite seu tema clássico em busca de widgets e shortcodes que podem virar blocos PHP-only
• Comece com um template part de baixo risco (header, footer, bio do autor) e envolva em um bloco
• Ative Block API Version 3 em todos os blocos pra se preparar pro iframe obrigatório do WordPress 7.1
• Mantenha o desenvolvimento de blocos em JavaScript no seu roadmap—blocos PHP-only complementam, não substituem, blocos JS

Atenção: Não espere previews perfeitos no editor. Aceite que alguns blocos vão parecer quebrados no editor mas renderizar bem no frontend. Esse é o trade-off.

Fonte: CSS-Tricks