Hospeda tu propio Playground

Puedes hospedar el Playground en tu propio dominio en lugar de playground.wordpress.net.

Esto es útil para tener control total sobre su contenido y comportamiento, así como eliminar la dependencia de un servidor de terceros. Puede proporcionar una experiencia de usuario más personalizada, por ejemplo: un playground con plugins y temas preinstalados, configuraciones predeterminadas del sitio o contenido de demostración.

Antes de comenzar

Hospedar Playground por tu cuenta te da control total, pero requiere entender algunos conceptos clave:

Qué esperar

Complejidad de configuración inicial: Construir y desplegar Playground involucra múltiples pasos. Reserva tiempo para solución de problemas durante tu primer despliegue.
Alojamiento de archivos estáticos: Playground es principalmente archivos estáticos (HTML, JS, WASM) con requisitos mínimos del lado del servidor.
Ejecución basada en navegador: Todo el procesamiento de WordPress ocurre en el navegador del usuario vía WebAssembly—tu servidor solo entrega archivos.

Consideraciones de rendimiento

Los tiempos de carga dependen de varios factores:

Factor	Impacto	Optimización
Tamaño del plugin	Los plugins grandes (ej. WooCommerce) pueden tardar 30-60 seg en instalar	Pre-instala plugins en tu build de WordPress
Velocidad de red	Los archivos WASM son ~15-30MB	Usa CDN con encabezados de caché adecuados
Navegador	Chrome/Edge tienen mejor rendimiento; Safari usa mecanismos de respaldo	Prueba en diferentes navegadores
Dispositivo	Los dispositivos móviles cargan más lento que escritorio	Advierte a usuarios móviles sobre tiempos de carga más largos

Compatibilidad con navegadores

Playground funciona en navegadores modernos, pero con algunas diferencias:

Navegador	Estado	Notas
Chrome/Edge	✅ Mejor rendimiento	Soporte completo para todas las características
Firefox	✅ Bueno	Rendimiento confiable
Safari	✅ Bueno	Mejoras recientes han mejorado significativamente la confiabilidad
Navegadores móviles	⚠️ Limitado	Funciona, pero con mayor uso de memoria, y una conexión 4G puede impactar la experiencia

Nota técnica: Safari usa MessagePorts en lugar de SharedArrayBuffer para respuestas en streaming. Este mecanismo de respaldo funciona de manera confiable pero añade una ligera sobrecarga comparado con Chrome/Edge.

Uso

Un Playground auto-hospedado puede ser incrustado como un iframe.

<iframe src="https://my-playground.com"></iframe>

O cargado dinámicamente pasando la URL remota al Cliente de Playground.

import { startPlaygroundWeb } from '@wp-playground/client';

const client = await startPlaygroundWeb({
	iframe: document.getElementById('wp'),
	remoteUrl: `https://my-playground.com/remote.html`,
});

Recursos estáticos

Hay varias formas de obtener los recursos estáticos necesarios para hospedar el Playground.

En orden de conveniencia y facilidad:

Descargar paquete pre-construido
Hacer fork del repositorio y construir con GitHub Action
Construir localmente

Descargar paquete pre-construido

Para hospedar el Playground tal como está, sin hacer cambios, puedes descargar el artefacto construido desde la última GitHub Action exitosa.

Haz clic en Deploy Playground website.
En la sección Artifacts en la parte inferior de la página, haz clic en playground-website.
Es un paquete zip con los mismos archivos desplegados en el sitio público.

Hacer fork del repositorio y construir con GitHub Action

Para personalizar el Playground, puedes hacer fork del repositorio Git.

Constrúyelo desde la página de GitHub de tu fork yendo a: Actions -> Deploy Playground website -> Run workflow.

Construir localmente

El método más flexible y personalizable es construir el sitio localmente.

Crea un clon superficial del repositorio de Playground, o de tu propio fork.

git clone -b trunk --single-branch --depth 1 --recurse-submodules https://github.com/WordPress/wordpress-playground.git

Entra en el directorio wordpress-playground.

cd wordpress-playground

Instala las dependencias y construye el sitio web.

npm install
npm run build:website

Este comando internamente ejecuta la tarea nx build:wasm-wordpress-net. Copia los recursos construidos desde los paquetes remote y website a una nueva carpeta en la siguiente ruta:

dist/packages/playground/wasm-wordpress-net

El servicio completo del Playground consiste en el contenido de esta carpeta.

Resumen de archivos incluidos

Los recursos estáticos incluyen:

Archivos de datos y WASM para todas las versiones disponibles de PHP y WordPress
remote.html - el núcleo del Playground
index.html - el shell, o chrome del navegador
Script del Web Worker

Puedes desplegar el contenido de la carpeta a tu servidor usando SSH, como scp o rsync.

Es un sitio estático, excepto por estos aspectos dinámicos.

Archivo de directiva del servidor Apache .htaccess del paquete remote

Para que estos funcionen, necesitas un entorno de servidor con Apache y PHP instalados.

Configuración de NGINX

Como alternativa a Apache, aquí hay un ejemplo de usar NGINX para servir el Playground.

Consulta el archivo fuente

El ejemplo puede estar desactualizado. Por favor revisa el archivo fuente para la última versión.

El archivo combinado de Apache .htaccess se ve así.

AddType application/wasm .wasm

Un equivalente en NGINX.

location ~* .wasm$ {
  types {
    application/wasm wasm;
  }
}

Puede que necesites ajustar lo anterior según las especificaciones del servidor, particularmente cómo invocar PHP para la ruta /plugin-proxy.

El servidor web Caddy no requiere ninguna configuración especial para funcionar.

Personalizar datos empaquetados

El archivo wp.zip es un paquete de todos los archivos para el sistema de archivos virtual en Playground. Hay un archivo de datos para cada versión disponible de WordPress.

El paquete en packages/playground/wordpress-builds es responsable de construir estos archivos de datos.

Edita el script de construcción en Dockerfile para crear un paquete personalizado que incluya plugins preinstalados o contenido.

Para reconstruir los builds de WordPress después de personalizar el Dockerfile, ejecuta el siguiente comando:

npm run rebuild:wordpress-builds

Para reconstruir el sitio web para incluir los builds personalizados de WordPress, sigue las instrucciones aquí.

Instalar plugins

Aquí hay un ejemplo de instalación de plugins para el paquete de datos.

Antes de la sección titulada Strip whitespaces from PHP files.

# === Preinstall plugins ===

RUN cd wordpress/wp-content/mu-plugins && \
    # Install plugins
    for plugin_name in example-plugin-1 example-plugin-2; do \
      curl -L https://downloads.wordpress.org/plugin/{$plugin_name}.latest-stable.zip -o {$plugin_name}.zip && \
      unzip $plugin_file && \
      rm $plugin_file && \
      # Create entry file in mu-plugins root
      echo "<?php require_once __DIR__.'/$plugin_name/$plugin_name.php';" > $plugin_name.php; \
    done;

Puedes descargar plugins desde URLs distintas al directorio de plugins de WordPress, o usar Git para obtenerlos de otro lugar.

También es posible copiar desde una carpeta local. Por ejemplo, antes de RUN:

COPY ./build-assets/*.zip /root/

Luego coloca los archivos zip de plugins en build-assets. En este caso, puede que quieras añadir sus rutas a .gitignore.

Importar contenido

Aquí hay un ejemplo de importación de contenido.

# === Demo content ===

COPY ./build-assets/content.xml /root/
RUN cd wordpress ; \
     echo "Importing content.."; \
    ../wp-cli.phar --allow-root import /root/content.xml --authors=create

Esto asume que has puesto un archivo de exportación WXR llamado content.xml en la carpeta build-assets. Puedes añadir su ruta a .gitignore.

Lista de verificación para despliegue en producción

Antes de ir a producción, verifica que tu Playground auto-hospedado cumple estos requisitos:

Configuración del servidor

Tipos MIME: Asegura que los archivos .wasm se sirven con el tipo de contenido application/wasm
Encabezados CORS: Si incrustas desde otro origen, configura los encabezados CORS apropiados
Caché: Establece tiempos de caché largos para WASM y recursos estáticos (están versionados)
Compresión: Habilita gzip/brotli para transferencias de archivos más rápidas
HTTPS: Requerido para service workers y algunas características del navegador

Optimización de rendimiento

CDN: Sirve recursos estáticos desde un CDN para entrega global más rápida
Plugins pre-instalados: Empaqueta plugins de uso frecuente en tu build de WordPress
Blueprints mínimos: Mantén las instalaciones de plugins en tiempo de ejecución al mínimo

Solución de problemas

Problemas comunes y soluciones

Playground no carga o muestra pantalla en blanco

Posibles causas:

El servidor no sirve archivos WASM con el tipo MIME correcto
El despliegue no incluye archivos requeridos
Errores de JavaScript en la consola del navegador

Soluciones:

Revisa la consola del navegador para errores (F12 → pestaña Consola)
Verifica que los archivos .wasm devuelven el tipo de contenido application/wasm
Verifica que desplegaste todos los archivos de construcción

Carga inicial lenta (30+ segundos)

Posibles causas:

Instalación de plugins grandes en tiempo de ejecución
Falta configuración de CDN o caché
Usuario con conexión de red lenta

Soluciones:

Pre-instala plugins en tu build de WordPress en lugar de instalación en tiempo de ejecución
Configura CDN con encabezados de caché adecuados
Muestra indicadores de carga para establecer expectativas del usuario

Antes de comenzar​

Qué esperar​

Consideraciones de rendimiento​

Compatibilidad con navegadores​

Uso​

Recursos estáticos​

Descargar paquete pre-construido​

Hacer fork del repositorio y construir con GitHub Action​

Construir localmente​

Resumen de archivos incluidos​

Configuración de NGINX​

Personalizar datos empaquetados​

Instalar plugins​

Importar contenido​

Lista de verificación para despliegue en producción​

Configuración del servidor​

Optimización de rendimiento​

Solución de problemas​

Problemas comunes y soluciones​

Playground no carga o muestra pantalla en blanco​

Carga inicial lenta (30+ segundos)​