Bloques Gutenberg Renderizados en PHP — Compatible con acf_register_block_type

¿Por qué bloques renderizados en PHP?

Gutenberg (el editor de bloques de WordPress) fue diseñado en torno a bloques renderizados en JavaScript. Escribes una save() función en JS que devuelve el HTML del bloque, y WordPress guarda ese HTML en el contenido de la entrada. Para bloques visuales simples, esto funciona de maravilla.

Pero para bloques dinámicos — “Mostrar las 3 últimas entradas del blog con estilo personalizado,” “Mostrar un miembro del equipo con datos del perfil del usuario actual,” “Renderizar una cuadrícula de productos a partir de una consulta de WooCommerce” — los bloques de JavaScript son problemáticos. Terminas escribiendo llamadas a la REST API, gestionando estados de carga y reconstruyendo la lógica de obtención de datos que WordPress ya sabe hacer en PHP.

Los bloques renderizados en PHP te permiten escribir un callback en PHP que se ejecuta en el momento de renderizar la página, tiene acceso completo a las APIs de datos de WordPress (WP_Query, get_field(), get_post_meta(), etc.), y devuelve el HTML directamente. Más simple, más rápido y más acorde con WordPress.

ACF introdujo acf_register_block_type() hace años y se convirtió en el estándar de facto para los desarrolladores de agencias que construyen bloques personalizados de Gutenberg. Field Forge soporta la misma firma de función, por lo que la migración es trivial.

---

Cómo registrar un bloque PHP

Ejemplo básico

“`php // functions.php o un plugin personalizado

add_action(‘acf/init’, ‘register_my_blocks’);

function register_my_blocks() { if (function_exists(‘acf_register_block_type’)) { acf_register_block_type([ ‘name’ => ‘feature-card’, ‘title’ => __(‘Tarjeta de Característica’), ‘description’ => __(‘Una tarjeta de característica con icono, título y descripción.’), ‘render_callback’ => ‘render_feature_card_block’, ‘category’ => ‘theme’, ‘icon’ => ‘star-filled’, ‘keywords’ => [‘feature’, ‘card’], ‘supports’ => [ ‘align’ => [‘wide’, ‘full’], ‘anchor’ => true, ‘color’ => true, ], ]); } }

function render_feature_card_block($block) { $icon = get_field(‘icon’); $title = get_field(‘title’); $description = get_field(‘description’); ?>

<?php } ```

Este código es idéntico al código de registro de ACF. Funciona sin cambios después de la migración.

Registro nativo de Field Forge

Si prefieres la API nativa de Field Forge (por limpieza de código o para evitar implicar que ACF sigue siendo necesario), usa fieldforge_register_block_type():

“php add_action('init', function() { fieldforge_register_block_type([ 'name' => 'feature-card', 'title' => __('Tarjeta de Característica'), 'render_callback' => 'render_feature_card_block', 'category' => 'theme', ]); }); “

Ambas funciones hacen lo mismo. Usa la que se ajuste a las convenciones de tu equipo.

---

Campos personalizados en el bloque

Cada bloque PHP puede tener su propio grupo de campos asignado a través de reglas de ubicación:

“ Reglas de Ubicación: El bloque es igual a "acf/feature-card" “

Cuando un editor añade el bloque a una entrada, Field Forge renderiza el grupo de campos en la barra lateral del bloque (o en línea, dependiendo de la configuración del bloque). El editor completa los campos, el bloque se actualiza automáticamente con una vista previa en vivo.

En el momento de renderizar, la función render_callback utiliza get_field() para acceder a los valores de los campos:

“`php function render_feature_card_block($block) { // get_field() funciona dentro de los callbacks de bloque $icon = get_field(‘icon’); $title = get_field(‘title’);

// El array $block contiene todo sobre esta instancia específica del bloque $block_id = $block[‘id’]; $is_preview = !empty($block[‘is_preview’]); $block_data = $block[‘data’]; $className = !empty($block[‘className’]) ? $block[‘className’] : ”;

// Renderizar HTML ?>

<div class="feature-card “>