WordPress Playground para Desarrolladores de Plugins
El WordPress Playground es una herramienta innovadora que permite a los desarrolladores de plugins construir, probar y mostrar sus plugins directamente en un entorno de navegador.
Esta guía te mostrará cómo usar WordPress Playground para mejorar tu flujo de trabajo de desarrollo de plugins, crear demostraciones en directo para mostrar tu plugin y simplificar las pruebas y revisiones de tu plugin.
Descubre cómo Construir, Probar y Lanzar tus productos con WordPress Playground en la sección Acerca de Playground.
Lanzando una instancia de Playground con un plugin
El Plugin en el directorio de plugins de WordPress
Con WordPress Playground, puedes lanzar rápidamente una instalación de WordPress con casi cualquier plugin disponible en el Directorio de Plugins de WordPress instalado y activado. Todo lo que necesitas hacer es añadir el parámetro de consulta plugin a la URL de Playground y usar el slug del plugin del directorio de WordPress como valor. Por ejemplo: https://playground.wordpress.net/?plugin=create-block-theme
Puedes instalar y activar varios plugins a través de parámetros de consulta repitiendo el parámetro plugin para cada plugin que quieras instalar y activar en la instancia de Playground. Por ejemplo: https://playground.wordpress.net/?plugin=gutenberg&plugin=akismet&plugin=wordpress-seo.
También puedes cargar cualquier plugin del directorio de plugins de WordPress configurando el paso installPlugin de un Blueprint pasándolo a la instancia de Playground.
{
"landingPage": "/wp-admin/plugins.php",
"login": true,
"steps": [
{
"step": "installPlugin",
"pluginData": {
"resource": "wordpress.org/plugins",
"slug": "gutenberg"
}
}
]
}
Los Blueprints pueden ser pasados a una instancia de Playground de múltiples formas.
Plugin en un repositorio de GitHub
Un plugin almacenado en un repositorio de GitHub también puede ser cargado en una instancia de Playground a través de Blueprints.
Con la propiedad pluginData del paso installPlugin del blueprint, puedes definir un recurso url que apunte a la ubicación del archivo .zip que contiene el plugin que deseas cargar en la instancia de Playground.
Para evitar problemas de CORS, el proyecto Playground proporciona un proxy de GitHub que te permite generar un .zip a partir de un repositorio (o incluso una carpeta dentro de un repositorio) que contiene tu plugin.
El proxy de GitHub es una herramienta increíblemente útil para cargar plugins desde repositorios de GitHub, ya que te permite cargar un plugin desde una rama específica, un directorio específico, un commit específico o un PR específico.
Si tu plugin está alojado en GitHub, puedes agregar automáticamente botones de vista previa a tus pull requests utilizando la GitHub Action llamada Playground PR Preview. Esto permite a los revisores probar tus cambios al instante sin ninguna configuración. Consulta Agregar botones de vista previa de PR con GitHub Actions para más detalles.
Por ejemplo, el siguiente blueprint.json instala un plugin desde un repositorio de GitHub aprovechando la herramienta https://github-proxy.com:
{
"landingPage": "/wp-admin/admin.php?page=add-media-from-third-party-service",
"login": true,
"steps": [
{
"step": "installPlugin",
"pluginData": {
"resource": "url",
"url": "https://github-proxy.com/proxy/?repo=wptrainingteam/devblog-dataviews-plugin"
}
}
]
}
Plugin desde el código en un archivo o gist en GitHub
Al combinar los pasos writeFile y activatePlugin también puedes lanzar una instancia de WP Playground con un plugin creado sobre la marcha a partir de código almacenado en un gist o un archivo en GitHub:
{
"landingPage": "/wp-admin/plugins.php",
"login": true,
"steps": [
{
"step": "login"
},
{
"step": "writeFile",
"path": "/wordpress/wp-content/plugins/cpt-books.php",
"data": {
"resource": "url",
"url": "https://raw.githubusercontent.com/WordPress/blueprints/trunk/blueprints/custom-post/books.php"
}
},
{
"step": "activatePlugin",
"pluginPath": "cpt-books.php"
}
]
}
El ejemplo de Instalar plugin desde un gist en la Galería de Blueprints muestra cómo cargar un plugin desde el código en un gist
Configurando una demo para tu plugin con Blueprints
Cuando proporcionas un enlace a una instancia de WordPress Playlist con algunos plugins activados, es posible que también quieras personalizar la configuración inicial de esa instancia de Playground utilizando esos plugins. Con los Blueprints de Playground puedes cargar/activar plugins y configurar la instancia de Playground.
Algunas herramientas y recursos útiles proporcionados por el proyecto Playground para trabajar con blueprints son:
- Consulta la Galería de Blueprints para explorar ejemplos de código del mundo real que utilizan WordPress Playground para lanzar un sitio de WordPress con una variedad de configuraciones.
- La herramienta WordPress Playground Step Library proporciona una interfaz visual para arrastrar o hacer clic en los pasos para crear un blueprint para WordPress Playground. ¡También puedes crear tus propios pasos!
- La herramienta Blueprints builder te permite editar tu blueprint en línea y ejecutarlo directamente en una instancia de Playground.
A través de propiedades y steps(pasos) en el Blueprint, puedes configurar el estado inicial de la instancia de Playground, proporcionando a tus plugins el contenido y la configuración necesarios para mostrar las características y convincentes funcionalidades de tu plugin.
Una gran demo con WordPress Playground podría requerir que cargues contenido predeterminado para tu plugin y tema, incluyendo imágenes y otros recursos. Consulta la guía Proporcionar contenido para tu demo para obtener más información sobre esto.
plugins
Si tu plugin tiene dependencias con otros plugins, puedes usar la clave plugins para instalar el tuyo junto con cualquier otro plugin necesario.
{
"landingPage": "/wp-admin/plugins.php",
"plugins": ["gutenberg", "sql-buddy", "create-block-theme"],
"login": true
}
landingPage
Si tu plugin tiene una vista de configuración o un asistente de incorporación, puedes usar la clave landingPage para redirigir automáticamente a cualquier página en la instancia de Playground al cargarla.
{
"landingPage": "/wp-admin/admin.php?page=my-custom-gutenberg-app",
"login": true,
"plugins": ["https://raw.githubusercontent.com/WordPress/block-development-examples/deploy/zips/data-basics-59c8f8.zip"]
}
writeFile
Con el paso writeFile puedes crear cualquier archivo de un plugin sobre la marcha, haciendo referencia al código de un archivo *.php almacenado en repositorio de GitHub o un Gist.
Aquí tienes un ejemplo de un plugin que genera Custom Post Types, colocado en la carpeta mu-plugins para asegurar que el código se ejecute automáticamente al cargar:
{
"landingPage": "/wp-admin/",
"login": true,
"steps": [
{
"step": "writeFile",
"path": "/wordpress/wp-content/mu-plugins/books.php",
"data": {
"resource": "url",
"url": "https://raw.githubusercontent.com/wordpress/blueprints/trunk/blueprints/custom-post/books.php"
}
}
]
}
Desarrollo de Plugins
Desarrollo y pruebas locales de plugins con Playground
Desde la carpeta de un plugin en tu entorno de desarrollo local, puedes cargar rápidamente una instancia de Playground con ese plugin cargado y activado.
Usa el comando @wp-playground/cli desde el directorio raíz de tu plugin utilizando tu programa de línea de comandos preferido.
Con el IDE Visual Studio Code, también puedes usar la extensión de Visual Studio Code mientras trabajas en el directorio raíz de tu plugin.
Por ejemplo:
git clone git@github.com:wptrainingteam/devblog-dataviews-plugin.git
cd devblog-dataviews-plugin
npx @wp-playground/cli server --auto-mount
Ver tus cambios locales en una instancia de Playground y crear PRs directamente en un repositorio de GitHub con tus cambios
Con Google Chrome puedes sincronizar una instancia de Playground con el código local de tu plugin y el repositorio de GitHub de tu plugin. Con esta conexión puedes:
- Ver en directo (en la instancia de Playground) tus cambios locales
- Crear PRs en el repositorio de GitHub con tus cambios
Aquí tienes una pequeña demostración de este flujo de trabajo en acción:
Consulta Acerca de Playground > Construye > Sincroniza tu instancia de playground con una carpeta local y crea Pull Requests en GitHub para obtener más información.