WordPress Playground para Desarrolladores de Plugins
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 vivo 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
Plugin en el directorio de temas 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 pasado 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 pasarse a una instancia de Playground de varias maneras.
Plugin en un repositorio de GitHub
Un plugin almacenado en un repositorio de GitHub también puede cargarse en una instancia de Playground a través de Blueprints.
Con la propiedad pluginData del paso del blueprint installPlugin, puedes definir un recurso git:directory que construirá un plugin a partir de los archivos de un repositorio en la instancia de Playground.
Durante los últimos meses, el proxy de GitHub fue una herramienta increíblemente útil para cargar plugins desde repositorios de GitHub, ya que permitía cargar un plugin desde una rama específica, un directorio específico, un commit específico o un PR específico. Pero con las recientes mejoras en Playground, esta función ya no es necesaria. El Proxy de GitHub se descontinuará pronto, por favor actualiza tus blueprints al recurso git:directory.
Por ejemplo, el siguiente blueprint.json instala un plugin desde un repositorio de GitHub:
{
"landingPage": "/wp-admin/admin.php?page=add-media-from-third-party-service",
"login": true,
"steps": [
{
"step": "installPlugin",
"pluginData": {
"resource": "git:directory",
"url": "https://github.com/wptrainingteam/devblog-dataviews-plugin",
"ref": "HEAD",
"refType": "refname"
}
}
]
}
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.
Plugin desde código en un archivo o gist en GitHub
Combinando 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 Instalar plugin desde un gist en la Galería de Blueprints muestra cómo cargar un plugin desde código en un gist
Configurando una demostración para tu plugin con Blueprints
Al proporcionar un enlace a una instancia de WordPress Playground con algunos plugins activados, es posible que también desees personalizar la configuración inicial para 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 sobre el uso de WordPress Playground para lanzar un sitio de WordPress con una variedad de configuraciones.
- La herramienta Biblioteca de Pasos de WordPress Playground 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 Constructor de Blueprints te permite editar tu blueprint en línea y ejecutarlo directamente en una instancia de Playground.
A través de propiedades y pasos en el Blueprint, puedes configurar la configuración inicial de la instancia de Playground, proporcionando a tus plugins el contenido y la configuración necesarios para mostrar las características y funcionalidades atractivas de tu plugin.
Una gran demostración 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 Proporcionando contenido para tu demostración para aprender más sobre esto.
plugins
Si tu plugin tiene dependencias de otros plugins, puedes usar la abreviatura 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 abreviatura landingPage para redirigir automáticamente a cualquier página en la instancia de Playground al cargar.
{
"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 plugin sobre la marcha, haciendo referencia al código de un archivo *.php almacenado en GitHub o Gist.
Aquí hay un ejemplo de un plugin que genera Tipos de Post Personalizados, 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 una carpeta de plugins en tu entorno de desarrollo local, puedes cargar rápidamente una instancia de Playground localmente con ese plugin cargado y activado.
Usa el comando @wp-playground/cli desde el directorio raíz de tu plugin usando 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
Ve tus cambios locales en una instancia de Playground y crea PRs directamente en un repositorio de GitHub con tus cambios
Con Google Chrome puedes sincronizar una instancia de Playground con el código de tu plugin local y el repositorio de GitHub de tu plugin. Con esta conexión puedes:
- Ver en vivo (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: