Archivo block.json


{
  "apiVersion": 2,
  "name": "manager-block/box-images",
  "title": "Imagen + Información",
  "category": "vivero-manager-block",
  "icon": "layout",
  "keywords": ["box-images", "custom", "acf"],
  "acf": {
    "mode": "edit",
    "renderTemplate": "template.php"
  },
  "style": [ "file:./style.css" ],
  "editorStyle": "mb-box-images-editor-style"
}
  1. Identificación y Categorización:
    • "name" ("manager-block/box-images"): Es el nombre único interno (el slug) que WordPress usa para registrar el bloque en su sistema.
    • "title" ("Imagen + Información"): Es el nombre que verán los usuarios cuando busquen e inserten el bloque en el editor.
    • "category" ("vivero-manager-block"): Define dónde aparece el bloque dentro del menú de inserción de Gutenberg.
    • "icon" ("layout"): Establece el pequeño ícono que representa visualmente el bloque.
    • "keywords" (["box-images", "custom", "acf"]): Son los términos de búsqueda que facilitan que los usuarios encuentren el bloque.
  1. Integración con ACF (Advanced Custom Fields):
    • El objeto "acf" es la clave de la integración. Le indica a WordPress que el contenido de este bloque se gestionará mediante campos de ACF.
    • "mode": "edit": Configura el comportamiento predeterminado del bloque para que, al seleccionarlo en el editor, se muestre inmediatamente el panel de edición de campos de ACF (donde el usuario ingresa texto, sube la imagen, etc.), en lugar de una vista previa.
    • "renderTemplate": "template.php": Le dice a WordPress que, para construir el HTML final que verá el visitante (el frontend), debe ejecutar el código que se encuentra en el archivo template.php (que asume que está en la misma carpeta).
  1. Gestión de Estilos:
    • "style": [ "file:./style.css" ]: Esta línea se asegura de que la hoja de estilos style.css se cargue correctamente en el frente del sitio web (lo que ve el visitante). El file: es la forma moderna de encolar estilos automáticamente.
    • "editorStyle": "mb-box-images-editor-style": Este es el identificador (handle) de un archivo CSS que se cargará únicamente dentro del editor de Gutenberg. Se utiliza para dar estilos específicos a cómo se ve el bloque mientras se edita, sin afectar la velocidad de carga en el frontend.

En resumen, tu block.json es el manual de instrucciones que asegura que tu bloque sea funcional, identificable en el editor y que use ACF y PHP (template.php) para su lógica y CSS (style.css) para su presentación.

Categorias