Ejemplos

Código mínimo y comentado

Tres ejemplos para ver la jerarquía de decisión en acción.

1 · `theme.json`: color de marca sin escribir CSS

En el desarrollo clásico se escribiría .btn-primary { background-color: #ff5722; } en style.css. En un tema de bloques se declara en theme.json.

theme.json

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        { "slug": "primary", "color": "#ff5722", "name": "Naranja marca" }
      ]
    }
  },
  "styles": {
    "blocks": {
      "core/button": {
        "color": {
          "background": "var(--wp--preset--color--primary)",
          "text": "#ffffff"
        },
        "border": { "radius": "8px" }
      }
    }
  }
}

Variables automáticas

WordPress genera --wp--preset--color--primary sin que escribas CSS.

Visible en el editor

El color aparece en el panel para aplicarlo a otros bloques.

Legible para la IA

Un agente lee el JSON y aplica la paleta con coherencia.

2 · Interactivity API: un contador sin jQuery

La interactividad se declara en el HTML con directivas (data-wp-*) y el comportamiento vive en un módulo JavaScript asociado al bloque.

render.php

<div
  <?php echo get_block_wrapper_attributes(); ?>
  data-wp-interactive="miContador"
  <?php echo wp_interactivity_data_wp_context( array( 'cuenta' => 0 ) ); ?>
>
  <p>Has hecho clic <span data-wp-text="context.cuenta">0</span> veces.</p>
  <button data-wp-on--click="actions.incrementar">Sumar +1</button>
</div>

view.js

import { store, getContext } from '@wordpress/interactivity';

store( 'miContador', {
  actions: {
    incrementar: () => {
      const context = getContext();
      context.cuenta += 1;
    },
  },
} );

block.json

{
  "apiVersion": 3,
  "name": "demo/contador",
  "title": "Contador",
  "category": "widgets",
  "supports": { "interactivity": true },
  "render": "file:./render.php",
  "viewScriptModule": "file:./view.js"
}

Matiz de caché. El HTML del bloque sigue siendo cacheable, pero cualquier dato que dependa del usuario (carrito, sesión) debe tratarse aparte y no cachearse como si fuera común.

3 · Entorno efímero con `wp-env`

Un entorno efímero elimina el «en mi máquina funciona»: se crea, se prueba y se destruye. Fija las versiones a las que use el proyecto.

wp-env.json

{
  "core": "WordPress/WordPress",
  "phpVersion": "8.2",
  "plugins": [ "." ],
  "port": 8888
}

npx wp-env start lo arranca y npx wp-env destroy lo elimina. WordPress Playground es la alternativa sin Docker; comprueba el nombre vigente de su herramienta de línea de comandos antes de impartir.