Blueprints de WordPress Playground: sitios de prueba listos con un enlace

WordPress Playground es un WordPress completo que funciona dentro del navegador. Abres playground.wordpress.net y tienes un sitio en segundos, sin servidor ni instalación. Al cerrar la pestaña, desaparece.

Lo interesante para quien enseña, programa o vende plugins son los blueprints: un archivo JSON que le dice a Playground cómo armar el sitio: qué versión de WordPress y PHP, qué plugins y tema instalar, en qué idioma, con qué contenido y hasta qué código agregar.

Para qué sirve

• Demos de plugins o temas: un enlace que abre tu producto ya instalado y configurado.
• Cursos y tutoriales: «prueba este snippet aquí», con el código ya aplicado en un sitio de prueba.
• Reportar errores: un sitio mínimo donde el error se reproduce, para enviarlo a quien desarrolla el plugin.
• Probar compatibilidad: el mismo sitio con distintas versiones de PHP o WordPress.

Tu primer blueprint

Un blueprint que crea una tienda de prueba en español de Chile, con WooCommerce, un tema de bloques y un mu-plugin de ejemplo:

{
	"$schema": "https://playground.wordpress.net/blueprint-schema.json",
	"landingPage": "/wp-admin/",
	"preferredVersions": { "php": "8.3", "wp": "latest" },
	"features": { "networking": true },
	"login": true,
	"steps": [
		{ "step": "setSiteLanguage", "language": "es_CL" },
		{
			"step": "installPlugin",
			"pluginData": { "resource": "wordpress.org/plugins", "slug": "woocommerce" },
			"options": { "activate": true }
		},
		{
			"step": "installTheme",
			"themeData": { "resource": "wordpress.org/themes", "slug": "twentytwentyfive" },
			"options": { "activate": true }
		},
		{ "step": "setSiteOptions", "options": { "blogname": "Tienda de prueba" } },
		{
			"step": "writeFile",
			"path": "/wordpress/wp-content/mu-plugins/cwp-demo.php",
			"data": "<?php\nadd_filter( 'admin_footer_text', fn() => 'Sitio de prueba creado con un blueprint.' );"
		}
	]
}

Qué hace cada parte:

• landingPage: la página que se abre al terminar (aquí, el escritorio).
• preferredVersions: versiones de PHP y WordPress.
• features.networking: permite que el sitio se conecte a internet (necesario para instalar desde WordPress.org).
• login: entra automáticamente como administrador.
• steps: los pasos, en orden: idioma, plugin, tema, ajustes y un archivo creado a mano.

El formato de los blueprints sigue evolucionando y algunos nombres cambiaron con el tiempo (por ejemplo, las versiones antiguas usaban pluginZipFile en lugar de pluginData). El enlace $schema del principio permite que editores como VS Code te avisen si algo no es válido. Revisa la documentación de Playground para ver todos los pasos disponibles.

Abrirlo y compartirlo

Hay dos formas de usarlo:

1. Publicar el JSON y enlazarlo. Sube el archivo a tu sitio o a GitHub, y comparte:

https://playground.wordpress.net/?blueprint-url=https://tudominio.cl/demos/tienda.json

2. Incluir el JSON en el enlace. Para blueprints cortos, se puede poner el JSON entero después de # en la dirección. Es cómodo para compartir algo rápido sin subir archivos.

Si publicas el JSON en tu sitio, el servidor debe permitir que Playground lo lea desde otro dominio (cabecera CORS Access-Control-Allow-Origin). Si no funciona desde tu sitio, súbelo a un repositorio público de GitHub y usa la dirección «raw» del archivo.

Ideas para un sitio de cursos

• Un botón «Pruébalo en Playground» al final de cada guía con código: el blueprint crea el sitio con el mu-plugin de la guía ya instalado, y la persona ve el resultado sin tocar su sitio real.
• Un blueprint con contenido de ejemplo (importando un archivo WXR con el paso importWxr) para ejercicios de diseño.
• Para plugins publicados en WordPress.org: el directorio permite agregar un blueprint para el botón de vista previa en vivo de la ficha del plugin, en la carpeta de recursos del repositorio.

Limitaciones

• Es un entorno de pruebas: no guarda nada al cerrar (salvo que lo guardes en el navegador o lo exportes).
• Algunos plugins que dependen de funciones del servidor (correo, tareas programadas reales, ciertas extensiones de PHP) no funcionan igual que en un hosting.
• La primera carga descarga WordPress completo en el navegador: en conexiones lentas toma un poco más.

¿Armaste un blueprint para tu plugin o tu curso? Comparte el enlace en el foro para que lo probemos.