Uso de ACF Blocks para Gutenberg

Introducción

Gutenberg transformó la forma de desarrollar contenidos en WordPress al introducir bloques reutilizables.
ACF Blocks extiende esta experiencia facilitando la creación de bloques con una interfaz gráfica potente y flexibilidad total.

Requisitos previos

• WordPress 5.0 o superior.
• Advanced Custom Fields Pro (v5.8 ).
• Conocimientos básicos de PHP, HTML y CSS.

1. Registro básico de un ACF Block

En functions.php o en un plugin personalizado, añadimos:

ltphp
add_action(acf/init, function(){
  if( function_exists(acf_register_block_type) ) {
    acf_register_block_type(array(
      name            =gt mi-bloque,
      title           =gt Mi Bloque,
      description     =gt Bloque personalizado creado con ACF.,
      render_callback =gt render_mi_bloque,
      category        =gt layout,
      icon            =gt admin-comments,
      keywords        =gt array(custom,acf,bloque),
      supports        =gt array(
        align         =gt array(wide,full),
        mode          =gt false,
        jsx           =gt true
      ),
    ))
  }
})

function render_mi_bloque(block, content = , is_preview = false){
  titulo = get_field(titulo) : Título por defecto
  include locate_template(template-parts/blocks/mi-bloque.php)
}
gt
  

2. Estructura de archivos recomendada

Para mantener orden en el tema, use:

• template-parts/blocks/mi-bloque.php – plantilla de salida HTML.
• template-parts/blocks/mi-bloque.css – estilos front-end.
• template-parts/blocks/mi-bloque.js – lógica de interactividad.

Ejemplo de mi-bloque.php

ltdiv class=mi-bloque style=border:1px solid #ddd padding:20px background:#fffgt
  lth4 style=margin-top:0 color:#222gtltphp echo esc_html(titulo) gtlt/h4gt
  ltdiv class=contenidogt
    ltphp the_field(contenido) gt
  lt/divgt
lt/divgt
  

3. Definir campos con ACF

Cree un grupo de campos en el panel de ACF con ubicación:

• Regla de ubicación: Bloque = “Mi Bloque”.
• Campos: titulo (Texto), contenido (Editor WYSIWYG).

4. Propiedades de acf_register_block_type

Opción	Descripción
name	Identificador único del bloque.
title	Nombre visible en Gutenberg.
category	Categoría de bloques (layout, widget, embed…).
icon	Icono de la librería Dashicons o SVG.
render_callback	Función PHP que imprime la plantilla.
supports	Configuración de funcionalidades: alineación, JSX, inserción.

5. Encolar scripts y estilos

En el mismo functions.php:

add_action(enqueue_block_assets, function(){
  wp_enqueue_style(mi-bloque-css, get_template_directory_uri() . /template-parts/blocks/mi-bloque.css, array(), 1.0)
  wp_enqueue_script(mi-bloque-js, get_template_directory_uri() . /template-parts/blocks/mi-bloque.js, array(jquery), 1.0, true)
})
  

6. Buenas prácticas

• Prefijos: use prefijos únicos para nombres de bloques y campos.
• Sanitización: utilice funciones de escape (esc_html, esc_attr).
• Rendimiento: cargue activos sólo si el bloque está presente.
• Internacionalización: envuelva textos en __() o _e().
• Documentación: mantenga comentarios claros en el código.

7. Recursos adicionales

• ACF Blocks – Documentación oficial
• WordPress Block Editor Handbook
• Integración de ACF en Themes