Saltar al contenido
NuevoBlockstudio 7.7

El framework de bloques
para WordPress

Bloques personalizados a partir de archivos simples. Define los campos en JSON y escribe plantillas en PHP, Twig o Blade. No se necesita ningún proceso de compilación.

Terminal
composer require blockstudio/blockstudio
Comenzar
Descargar v7.7.12 (se abre en una pestaña nueva)

Bloques

Crea bloques personalizados con plantillas JSON y PHP, Twig o Blade. 27 tipos de campo, sin compilación.

Páginas

Escribe páginas WordPress completas como archivos de plantilla y sincronízalas con bloques nativos con un comando.

Patrones

Define patrones de bloques reutilizables como archivos de plantilla; se registran automáticamente en el insertador.

Extensiones

Añade campos personalizados a cualquier bloque, del núcleo, de terceros o propio, con un solo archivo JSON.

Tipos de campos

27 tipos integrados, incluidos repetidores, selectores de color, editores de código y medios, además de los tipos de campo que registres.

Procesamiento de recursos

Compilación SCSS, módulos ES, estilos con alcance y minificación opcional; todo mediante convenciones de nombres.

JSON Schema

Autocompletado y validación completos del IDE para configuraciones de bloques, extensiones y ajustes.

Creación de plantillas

Escribe plantillas en PHP, Twig o Blade con recursos de alcance limitado, InnerBlocks anidados y variables de plantilla.

Blockstudio amplía considerablemente la forma básica de crear bloques. Definiciones de JSON, plantillas de PHP y recursos con ámbito. Nada más que archivos, listos para los agentes que crearán lo que viene.

Bloques personalizados en 3 archivos

Define campos en block.json, muéstralos en una plantilla y aplica estilos con CSS o SCSS. Sin JavaScript, sin compilación y sin código repetitivo.

Comenzar
block.json
{
  "name": "starter/hero",
  "title": "Hero",
  "blockstudio": {
    "attributes": [
      { "id": "heading", "type": "text" },
      { "id": "showCta", "type": "toggle" },
      { "id": "background", "type": "color" }
    ]
  }
}
index.php
<section useBlockProps class="hero"
  style="background: <?= esc_attr($a['background']['value'] ?? '') ?>">
  <h1><?= esc_html($a['heading']) ?></h1>

  <?php if ($a['showCta']): ?>
    <a href="/contact">Get Started</a>
  <?php endif; ?>

  <InnerBlocks />
</section>
style.scss
.hero {
  padding: 4rem 2rem;

  h1 {
    font-size: 3rem;
    font-weight: 700;
  }

  a {
    padding: 0.75rem 1.5rem;
    color: #fff;
    background: #18181b;
  }
}

Funciones de React, plantillas PHP

Componentes nativos del editor WordPress, como RichText e InnerBlocks, disponibles directamente en tus plantillas PHP. Sin JavaScript ni compilación.

Todo dentro del mismo archivo

Usa <RichText /> para la edición en línea en el editor de bloques y HTML estático en el frontend. <InnerBlocks /> gestiona los bloques anidados; useBlockProps marca el contenedor del bloque.

Blockstudio gestiona automáticamente la integración con el editor. Allí se convierten en componentes React reales. En el frontend, se renderizan como HTML simples del lado del servidor.

index.php
<div useBlockProps class="container">
  <RichText
    class="text-xl font-semibold"
    tag="h1"
    attribute="headline"
    placeholder="Enter headline"
  />

  <?php if ($a['showCta']): ?>
    <a href="<?= esc_url($a['ctaUrl']) ?>">
      <?= esc_html($a['ctaLabel']) ?>
    </a>
  <?php endif; ?>

  <InnerBlocks class="mt-4 p-4 border" />
</div>

Escribe plantillas en PHP, Twig o Blade

Usa el lenguaje de plantillas que ya conoces. Los tres comparten las mismas variables, componentes y funciones. No hace falta JavaScript.

Las mismas variables, cualquier lenguaje

Accede a los atributos mediante $a, a los datos del bloque mediante $b y al contexto del bloque principal mediante $c. Usa indicadores como $isEditor para adaptar la salida a cada entorno.

Usa <InnerBlocks />, <RichText /> y <MediaPlaceholder /> directamente en las plantillas sin escribir JavaScript.

PHP
<section class="hero">
  <h1><?= esc_html($a['heading']) ?></h1>
  <p><?= esc_html($a['description']) ?></p>
  <?php if ($a['showCta']): ?>
    <a href="<?= esc_url($a['ctaUrl']) ?>">
      <?= esc_html($a['ctaLabel']) ?>
    </a>
  <?php endif; ?>
  <InnerBlocks />
</section>

Páginas completas definidas en código

Crea páginas WordPress completas a partir de archivos de plantilla. HTML se asigna a bloques del núcleo y un solo comando las sincroniza con el editor.

Escribe HTML y obtén bloques

Los elementos estándar, como <h1>, <p> y <ul>, se asignan automáticamente a bloques del núcleo. Usa <block> para todo lo demás.

Define diseños completos en tu base de código. Al ejecutar wp bs pages sync, Blockstudio analiza las plantillas y las convierte en páginas WordPress reales con bloques reales, totalmente editables en el editor de bloques.

index.php
<div>
  <h1 blockEditingMode="contentOnly">About Us</h1>
  <p>We build tools for WordPress developers.</p>
  <img src="/team.jpg" alt="Our team" />
</div>

<block name="core/columns">
  <block name="core/column">
    <h2>Our Mission</h2>
    <p>Making block development fast and simple.</p>
  </block>
  <block name="core/column">
    <block name="core/group" layout='{"type":"grid"}'>
      <h2>Our Stack</h2>
    </block>
  </block>
</block>

Sincronización explícita

Ejecuta wp bs pages sync para aplicar cambios en las plantillas. Las páginas sin cambios no generan escrituras.

Bloqueo de plantillas

Bloquea la estructura mientras los clientes editan el contenido. Ideal para páginas de destino y sitios de marketing.

Bloques con clave

Asigna claves para conservar las ediciones de usuario entre actualizaciones de plantillas. Sincroniza la estructura y conserva el contenido.

Bajo control de versiones

Las páginas están en archivos. Registra cambios en Git, despliega en distintos entornos y revísalos en PR.

Patrones reutilizables desde archivos de plantilla

Define patrones de bloques como archivos de plantilla. Usan la misma sintaxis HTML que las páginas y se registran automáticamente en el insertador de bloques.

Archivos de plantilla, sin código de registro

Crea una carpeta con pattern.json y un archivo de plantilla. Blockstudio registra el patrón automáticamente, sin código repetitivo de register_block_pattern().

Los patrones se insertan como bloques reales y editables. Los usuarios obtienen un diseño inicial que pueden personalizar, mientras tú mantienes las plantillas bajo control de versiones.

index.php
<div>
  <h2>Pricing</h2>
  <p>Simple, transparent pricing.</p>
  <block name="core/columns">
    <block name="core/column">
      <h3>Starter</h3>
      <p>For small teams getting started.</p>
    </block>
    <block name="core/column">
      <h3>Pro</h3>
      <ul><li>Priority support</li><li>Custom integrations</li></ul>
    </block>
  </block>
</div>

La misma sintaxis que las páginas

Los HTML estándar se asignan a bloques del núcleo; la etiqueta de bloque se encarga de todo lo demás.

Registro automático

Añade una plantilla y pattern.json. Blockstudio la registra automáticamente.

Totalmente editables

Los patrones se insertan como contenido de bloques editable y se personalizan en cada instancia.

Categorizados y fáciles de buscar

Las categorías y las palabras clave facilitan encontrar patrones en el insertador.

Asignación de elementos personalizable

Define a qué bloque se asigna cualquier elemento HTML. Asigna etiquetas estándar como h1, p e img a tus propios tipos de bloque.

Asigna HTML a bloques personalizados

De forma predeterminada, HTML estándar se asigna a bloques WordPress del núcleo. Usa el filtro element_mapping para asignar cualquier elemento a otro tipo de bloque. Cada <h1> puede generar tu bloque personalizado en lugar de core/heading.

functions.php
add_filter(
  'blockstudio/parser/element_mapping',
  function ($mapping) {
    $mapping['h1']  = 'custom/heading';
    $mapping['h2']  = 'custom/heading';
    $mapping['p']   = 'custom/paragraph';
    $mapping['img'] = 'custom/image';
    return $mapping;
  }
);

Añade campos a cualquier bloque

Amplía bloques del núcleo, de terceros o propios con campos personalizados. Solo JSON, sin plantillas ni código.

Campos personalizados, cero plantillas

Crea un archivo JSON, asigna un bloque con name y define campos. La propiedad set asigna los valores de los campos directamente a clases, estilos, atributos de datos o cualquier otra cosa.

Sin plantillas ni funciones de renderizado. Blockstudio gestiona la salida automáticamente mediante el procesador de etiquetas WordPress HTML.

extend-animation.json
{
  "name": "core/*",
  "blockstudio": {
    "extend": { "priority": 10 },
    "attributes": [
      {
        "id": "animation",
        "type": "select",
        "allowNull": "None",
        "options": [
          { "value": "fade", "label": "Fade" },
          { "value": "slide", "label": "Slide" }
        ],
        "set": [{
          "attribute": "class",
          "value": "animate-{attributes.animation}"
        }]
      }
    ]
  }
}

Dirígete a cualquier bloque

Amplía un bloque, una lista o todo un espacio de nombres con comodines como core/*.

La propiedad set

Asigna valores de campos directamente a clases, estilos, atributos de datos o cualquier atributo HTML.

Campos condicionales

Muestra u oculta campos según otros valores, con los mismos operadores que usan los bloques.

Conjunto completo de funciones

Todos los tipos de campo, lógica condicional, fuentes con datos y propiedades reutilizables.

27 tipos de campo a tu disposición

Desde campos de texto básicos hasta repetidores y pestañas, además de campos centrados en el DOM, como clases y atributos de datos. También puedes registrar tus propios tipos.

Explora los tipos de campo
attributesblockcheckboxclassescodecolordatedatetimefilesgradientgrouphtml-tagiconlinkmessagenumberradiorangeselecttabstexttextareatogglerepeaterrichtextunitwysiwyg

Canalización de recursos sin configuración

Compilación de SCSS, importaciones de módulos ES y minificación opcional, todo mediante la convención de nombres. Sin webpack ni Vite.

Pon nombre a tus archivos; Blockstudio se encarga del resto

Añade style.scss junto a un bloque y se compilará y pondrá en cola automáticamente. Lo mismo ocurre con script.js, que admite módulos ES e importaciones directas de npm. La minificación está a un ajuste de distancia.

Los recursos tienen un ámbito por bloque y solo se cargan cuando hacen falta. Usa editor.* para los recursos exclusivos del editor o *.inline.* para insertarlos en la página.

SCSS
$accent: var(--wp--preset--color--primary);

.hero {
  padding: 4rem 2rem;
  h1 { color: $accent; font-size: clamp(2rem, 5vw, 4rem); }
  &--dark { background: #0a0a0a; }
}

Compilación de SCSS

Escribe anidamientos, variables y mixins. Blockstudio los compila por ti.

Importaciones de módulos ES

Importa paquetes npm directamente. Blockstudio los descarga y sirve localmente.

Convención de nombres

style.scss, script.js, editor.css. Ponle nombre al archivo y listo.

Con ámbito e insertados

Los recursos solo se cargan cuando el bloque está presente; puedes insertarlos usando la convención de nombres de archivo.

Tailwind v4, compilado en PHP

Escribe clases de utilidades en las plantillas. Blockstudio las compila en el servidor mediante TailwindPHP y guarda automáticamente los archivos en caché.

Un ajuste, cero herramientas

Cambia tailwind.enabled a true en blockstudio.json y escribe clases de utilidades. Blockstudio compila CSS en el servidor, lo guarda en caché y lo inyecta sin Node.js.

Usa blockstudio/tailwind/css para definir temas, utilidades y variantes con la sintaxis Tailwind v4 CSS-first. El campo de clases ofrece autocompletado en el editor.

functions.php
add_filter('blockstudio/tailwind/css', function ($css) {
  return $css . '
    @theme { --color-accent: #4f46e5; }
    @utility container-narrow {
      max-width: 48rem;
      margin-inline: auto;
    }
  ';
});

Compilación en el servidor

TailwindPHP compila las clases que usa cada página. Sin Node ni pasos de compilación.

Almacenamiento automático en caché

El CSS compilado se guarda en caché en el disco según el conjunto de clases para agilizar las solicitudes posteriores.

Configuración centrada en CSS

Define temas, utilidades y variantes directamente con la sintaxis Tailwind v4 CSS.

Vista previa en vivo en el editor

Vista previa inmediata en el editor mientras el frontend usa CSS compilado en el servidor.

Componentes incluidos

59 UI componentes incluidos con Blockstudio, listos para combinar en sus plantillas.

Elementos interactivos como etiquetas de bloque

Activa ui.enabled y Blockstudio registra 59 componentes sin interfaz bajo el espacio de nombres bsui: diálogos, menús, pestañas, cuadros combinados, campos de fecha y archivos, notificaciones y más, con la tecnología de WordPress Interactivity API.

Escríbalos como etiquetas de bloque en cualquier plantilla, página o patrón; renderícelos desde PHP; o permita bsui/* en blockTags para usarlos en el contenido de las entradas. Cada uno es un bloque normal con su propio block.json, que funciona tanto en el lienzo del editor como en la página, y una página carga el CSS y el JS únicamente de los componentes que renderiza.

Asigne un name a un control de formulario y se renderizará un campo oculto, para que el formulario contenedor envíe valores simples sin que tenga que crear su propio JavaScript. Los selectores, menús y cuadros de diálogo usan los patrones ARIA reales, con teclas de flecha, escritura predictiva y el foco dentro de un modal abierto.

El estilo se aplica con tokens de --bs-ui-* y un esquema oscuro completo bajo la clase .dark, todo dentro de la capa de cascada bsui, de modo que el CSS simple del tema prevalece sin indicadores important ni trucos de especificidad. Añada su propia variante a un componente mediante un filtro y consulte las aplicaciones de demostración incluidas en app/* para ver cómo se combinan los componentes en interfaces más amplias.

index.php
<bs:bsui-dialog>
  <bs:bsui-dialog-trigger trigger_label="Edit profile" trigger_variant="outline" />
  <bs:bsui-dialog-backdrop />
  <bs:bsui-dialog-popup>
    <bs:bsui-dialog-header>
      <bs:bsui-dialog-title content="Edit profile" />
      <bs:bsui-dialog-description content="Make changes to your profile here, then save when you are done." />
    </bs:bsui-dialog-header>
    <bs:bsui-dialog-content>
      <bs:bsui-field>
        <bs:bsui-field-label text="Name" />
        <bs:bsui-input defaultValue="Pedro Duarte" />
      </bs:bsui-field>
    </bs:bsui-dialog-content>
    <bs:bsui-dialog-footer>
      <bs:bsui-dialog-close label="Cancel" variant="outline" />
      <bs:bsui-dialog-close label="Save changes" variant="default" />
    </bs:bsui-dialog-footer>
  </bs:bsui-dialog-popup>
</bs:bsui-dialog>

Diseñado para desarrolladores

Funciones avanzadas que simplifican la creación y el mantenimiento de bloques complejos.

Almacenamiento flexible

Almacena valores en los metadatos de las entradas, en las opciones o en ambos. Consulta bloques por metadatos y expón datos mediante REST.

Lógica condicional

Muestra campos según sus valores con operadores de comparación, condiciones anidadas y reglas globales.

Más de 130 Hooks de PHP y JS

Filtros y acciones para el registro, los campos, los recursos, los ajustes y la salida.

JSON Schema

Autocompletado, documentación integrada y validación en VS Code y JetBrains.

API de contexto

Comparte datos declarados entre bloques principales y bloques secundarios anidados.

Integración con IA

Un índice de documentación para agentes de programación y un AGENTS.md generado para tu proyecto.

Integración con SEO

Inyección automática de contenido para Yoast, Rank Math y SEOPress.

Renderización programática

Procesa bloques desde PHP y úsalos como componentes fuera del editor.

Campos personalizados

Define conjuntos de campos reutilizables una vez y haz referencia a ellos en distintos bloques.

Transformaciones de bloques

Transforma bloques y añade atajos de inserción al pulsar Intro o una combinación de teclas.

Opciones dinámicas

Rellena las opciones con entradas, términos, usuarios, funciones o API.

Utilidades de HTML

Procesa atributos de datos o variables CSS en el contenedor del bloque.

Plugin, MU Plugin o Composer

Instale el ZIP del plugin, cárguelo como plugin de uso obligatorio o inclúyalo con Composer en un tema o plugin. Bedrock puede incluirlo antes y BLOCKSTUDIO_URL admite URL de paquetes personalizados.

Actualizaciones sin conflictos

Las bibliotecas incluidas, como TailwindPHP, ScssPhp y Minify, son copias privadas con espacio de nombres, por lo que nunca sustituyen las versiones de otros plugins. Las instalaciones desde ZIP se actualizan desde las versiones de GitHub, con un token de acceso opcional.

Actualización de v6 a v7

Los bloques escritos para v6 siguen funcionando: se siguen admitiendo el prefijo de importación blockstudio/, los nombres camelCase de los hooks y los sufijos de recursos con guion. La guía de migración explica los cambios.

Herramientas de desarrollo

Herramientas integradas para inspeccionar, depurar y crear con IA.

Canvas

Una vista general de todas tus páginas administradas, como un Figma. Desplázate, amplía y examina tu sitio en una sola vista.

admin.php?page=blockstudio-canvas

Element Grabber

Mantén pulsadas las teclas Cmd+C sobre cualquier elemento para copiar su marcado y la ruta de la plantilla del bloque. Pega ese contexto en tu editor de IA.

?blockstudio-devtools

Diseñado para agentes

Documentación que un agente puede indexar, un contrato para tu proyecto y un análisis que rechaza lo que no encaja.

Un índice, un contrato y un control

Blockstudio incluye blockstudio-llm.txt, un índice de cada documento con su ruta, propósito e identificadores correspondientes, además de blockstudio-llm-full.txt con el texto completo. Un agente consulta el índice y luego abre solo la página que necesita.

En tu proyecto, blockstudio-agents genera un AGENTS.md a partir de tus propios archivos y ajustes, y blockstudio-phpstan ejecuta el preajuste que elijas, si quieres desde un hook de confirmación administrado.

blockstudio-llm.txt
## Docs / Blocks / Attributes

### Registering Attributes
route: /docs/blocks/attributes/registering
file: docs/docs/blocks/attributes/registering.md
purpose: Learn how to register custom attributes for your blocks.
php: $a

### Field Types
route: /docs/blocks/attributes/field-types
file: docs/docs/blocks/attributes/field-types.md
purpose: All available field types and their properties in Blockstudio.
hooks: blockstudio/field_types

Primero, un índice

Cada documento, con su ruta, propósito e identificadores, en unos 11k tokens.

Texto completo bajo demanda

Toda la documentación y los esquemas JSON en un archivo, unos 164k tokens.

Un AGENTS.md generado

blockstudio-agents describe lo que crea tu proyecto, lo que permite y lo que rechaza.

Perfiles de análisis

base, theme y extreme-theme contienen plantillas para block.json y más.

Bloques de pila completa

Crea aplicaciones completas dentro de una carpeta de bloques. Base de datos, lógica del servidor, tareas programadas y CLI, todo a partir de archivos.

Añade un archivo y obtén un API

Añade db.php para definir un modelo de datos. Blockstudio crea puntos de conexión REST, valida los datos de entrada, gestiona el almacenamiento y proporciona API de JavaScript y PHP.

Añade rpc.php para las funciones del servidor y cron.php para las tareas programadas. Cada archivo hace una sola cosa, sin controladores ni herramientas de compilación.

db.php
<?php
return [
  'storage'    => 'sqlite',
  'userScoped' => true,
  'capability' => [
    'create' => true,
    'read'   => true,
    'update' => true,
    'delete' => true,
  ],
  'fields' => [
    'text' => ['type' => 'string', 'required' => true],
    'done' => ['type' => 'boolean', 'default' => false],
  ],
];

Funciones del servidor en una línea

Define funciones PHP en rpc.php e invócalas con bs.fn(). Blockstudio gestiona el enrutamiento, la autenticación, la protección CSRF y la serialización JSON.

rpc.php
<?php
use Blockstudio\Db;

return [
  'toggle' => function (array $params): array {
    $db   = Db::get('my-theme/todo');
    $id   = (int) ($params['id'] ?? 0);
    $todo = $db->get_record($id);
    if ($todo) {
      $db->update($id, ['done' => !$todo['done']]);
    }
    return ['success' => (bool) $todo];
  },
];

Base de datos

CRUD definido por esquema en 6 modos de almacenamiento: table, sqlite, jsonc, storh, meta, post_type.

RPC

Funciones del servidor invocables desde el frontend con bs.fn().

Cron

Tareas programadas en cron.php, registradas con WP-Cron.

CLI

Gestiona bloques, páginas, registros, RPC, tareas de cron y ajustes con wp bs.

Protección CSRF

Los puntos de conexión públicos se protegen automáticamente con un modo abierto explícito.

Aislamiento por usuario

Aísla automáticamente los datos de cada usuario, sin filtros de propiedad manuales.

Portabilidad

Con SQLite o JSONC, el código y los datos se desplazan juntos en una sola carpeta.

Componentes

Los componentes UI creados mediante programación usan toda la canalización Blockstudio.

Estático cuando es posible

Activa el prerenderizado estático para que los visitantes anónimos reciban HTML almacenado, mientras todo lo personal se sigue procesando en directo.

Prerenderizado estático

Desactivado hasta que lo indiques

performance.staticPrerender en blockstudio.json lo activa.

Antes de que se inicie WordPress

Con earlyServe activado, una instalación inmediata sirve las páginas almacenadas antes de que se cargue WordPress.

Actualizado al guardar

Al guardar una entrada, se purga o vuelve a renderizar su página almacenada y la página principal.

En directo cuando hace falta

De forma predeterminada, las solicitudes de usuarios con sesión iniciada, las búsquedas y dynamicPaths se procesan en directo.

Preguntas y respuestas

Todo lo que necesitas saber sobre Blockstudio. ¿No encuentras una respuesta? Pregunta en GitHub.

Abrir una incidencia

¿Qué es Blockstudio?

Un plugin de WordPress que permite crear bloques personalizados con JSON y un archivo de plantilla. Define campos y escribe marcado sin herramientas de React.

¿Necesito saber JavaScript?

No. Si puedes escribir HTML y PHP básico, puedes crear bloques. Blockstudio se encarga de los detalles internos del editor.

¿Funciona con mi tema?

Sí. Los bloques usan el WordPress API y funcionan con cualquier tema compatible con bloques.

¿En qué se diferencia de los bloques de ACF?

ACF PRO también registra bloques mediante block.json y renderiza plantillas de PHP con InnerBlocks; desde ACF PRO 6.8.1 también puede declarar allí los campos de un bloque. Blockstudio detecta carpetas de bloques sin una llamada a register_block_type(), renderiza PHP, Twig o Blade, compila los estilos y scripts de cada bloque, añade RichText a las plantillas, páginas basadas en archivos, patrones y extensiones, y es gratis bajo la GPL, en lugar de formar parte de una licencia de pago.

¿Qué lenguajes de plantilla se admiten?

PHP desde el primer momento, Twig una vez instalado timber/timber, y Blade mediante illuminate/view 8 a 12 y un breve filtro de renderizado que llama a Blockstudio\Blade_Renderer. Los tres reciben las mismas variables y componentes, y Blade también puede renderizar páginas, patrones y plantillas del Editor del sitio.

¿Puedo ampliar bloques existentes?

Sí. Las extensiones añaden campos a bloques del núcleo, de terceros o personalizados, incluidos espacios de nombres completos mediante comodines.

¿Cómo funciona el flujo de recursos?

Usa convenciones de nombres como style.scss, script.js y editor.css. Blockstudio los compila, les asigna un ámbito y los pone en cola; también los minifica cuando activas la minificación.

¿Hay compatibilidad con IDE?

Sí. JSON Schema ofrece autocompletado, documentación en línea y validación en editores compatibles.

¿Cuáles son los requisitos?

WordPress 6.7 o posterior y PHP 8.2 o posterior.

¿Blockstudio es gratis?

Sí. Blockstudio es gratuito y de código abierto; incluye extensiones, todos los tipos de campo, recursos, páginas y patrones.

Plus

El kit oficial de extensiones

Plantillas de sitio prémium, instrucciones de sistema para IA y una comunidad privada de Discord. Compra única, actualizaciones de por vida.

  • Más de 500 plantillas de sitios web
  • Instrucciones del sistema de IA
  • Actualizaciones de por vida
  • Comunidad privada de Discord
Obtener Plus