Desarrollar bloques dinámicos: PHP y React

Introducción

En el desarrollo de temas y extensiones para WordPress, uno de los avances más significativos en los últimos años ha sido el editor de bloques (Gutenberg). Su arquitectura híbrida, que combina PHP en el servidor y React en el cliente, permite crear bloques estáticos y dinámicos con un alto grado de personalización.

Este artículo está destinado a desarrolladores con conocimientos intermedios o avanzados en PHP y JavaScript, y cubre de manera detallada cómo crear bloques dinámicos: desde la configuración del entorno hasta la publicación de un bloque que se renderice en el servidor usando PHP y ofrezca una experiencia fluida en el editor con React.

Índice

• Definición y ventajas de los bloques dinámicos
• Requisitos y configuración del entorno
• Registro y renderizado en PHP
• Desarrollo de la interfaz en React
• Construcción y despliegue
• Buenas prácticas y optimización
• Recursos y enlaces de referencia

1. Definición y ventajas de los bloques dinámicos

Ventajas principales

• Actualización en tiempo real: al generarse en PHP, siempre refleja el estado actual de la base de datos.
• Optimización SEO: el contenido se entrega ya renderizado al visitante y a los bots de búsqueda.
• Flexibilidad de datos: se pueden combinar datos de múltiples fuentes (APIs REST, meta campos, transients).

2. Requisitos y configuración del entorno

Servidor y PHP

• PHP 7.4 (recomendado PHP 8.0 o superior)
• WordPress 5.0 con Gutenberg activo
• Extensiones de PHP: curl, mbstring, json

Node.js y herramientas de compilación

• Node.js 14 y npm o Yarn
• Webpack o @wordpress/scripts
• Babel para transpilar código React (JSX)

3. Registro y renderizado en PHP

Para declarar un bloque dinámico en WordPress usaremos register_block_type() con un render_callback. Este callback devuelve el HTML final.

// archivo: src/php/register-blocks.php
add_action(init, function() {
  register_block_type(mi-plugin/mi-bloque-dinamico, array(
    editor_script   => mi-bloque-js,
    render_callback => mi_bloque_render_callback,
    attributes      => array(
      title => array(type=>string, default=>Título dinámico),
      count => array(type=>number, default=>5),
    ),
  ))
})

function mi_bloque_render_callback(attributes) {
  title = esc_html(attributes[title])
  count = intval(attributes[count])
  // Ejemplo: obtener últimas count entradas
  posts = get_posts(array(numberposts=>count))
  ob_start()
  >
  

    

    

      
        
>
      
    
  
  

// archivo: src/index.js
import { registerBlockType } from @wordpress/blocks
import { InspectorControls, RichText, PanelColorSettings } from @wordpress/block-editor
import { PanelBody, RangeControl, TextControl } from @wordpress/components
import { Fragment } from @wordpress/element

registerBlockType(mi-plugin/mi-bloque-dinamico, {
  title: Mi Bloque Dinámico,
  icon: schedule,
  category: widgets,
  attributes: {
    title: { type: string, source: html, selector: h3 },
    count: { type: number, default: 5 },
  },
  edit: (props) => {
    const { attributes: { title, count }, setAttributes } = props
    return (
      
        
          
             setAttributes({ title: value })}
            />
             setAttributes({ count: value })}
              min={1} max={20}
            />
          
        
        

           setAttributes({ title: value })}
            style={{ marginTop: 0 }}
          />
          
Número de posts: {count}
        
      
    )
  },
  save: () => {
    // En bloque dinámico, save retorna null
    return null
  },
})
  

// en enqueue.php
wp_register_script(
  mi-bloque-js,
  plugins_url(build/index.js, __FILE__),
  array(wp-blocks, wp-element, wp-editor),
  filemtime(plugin_dir_path(__FILE__).build/index.js)
)