Cómo probar Gutenberg (WordPress) en tu navegador, sin instalar nada

En este post rápido expondré cómo puedes probar Gutenberg (u otros plugins o temas) en el navegador, fácilmente y sin necesidad de instalar nada.

En Blogpocket hemos publicado información precisa (ver enlaces al final de este post) acerca de obtener un entorno de pruebas, pero con la herramienta que te propongo aquí es todo mucho más sencillo.

En principio, esta herramienta tiene el propósito de crear instalaciones de prueba para tutoriales, cursos, clientes, etc. En este post se muestra, como ejemplo, cómo crear una página de tu WordPress con una ventana que dé acceso al editor de bloques. Ese WordPress tiene preinstalado el plugin Gutenberg y así se podría explorar las posibilidades de ese plugin.

WordPress Playground

WordPress Playground es la manera más fácil y sencilla para que tus usuarios (alumnos, clientes, etc.) puedan probar plugins y temas de WordPress. No requiere ninguna instalación, ni en local ni en tu servidor. Simplemente, con el navegador.

Hay varias maneras de explorar este recurso.

• Desde Blogpocket. Simplemente, accede a blogpocket.com/playground y encontrarás una ventana con una instalación de WordPress totalmente funcional. Entrarás directamente al editor de bloques para elaborar un post y probar Gutenberg en su última versión. ¡Fantástico ¿no?!
• Desde la página de demostración. Para usuarios, diseñadores y educadores, WordPress Playground es una herramienta flexible que permite: probar plugins y temas en un entorno virtual en vivo, experimentar con un sitio web anónimo de WordPress e incrustar un sitio real de WordPress en tu tutorial o curso. Accede a la página demo.
• Desde una página de tu sitio. Para ello, debes saber incrustar WordPress Playground diretamente en tu sitio. En el siguiente apartado, se explica cómo hacerlo.
• Alojando tu propio WordPress Playground. Si necesitas más flexibilidad a la hora de que se pueda probar WordPress Playground, puedes alojar un WordPress Playground. Por ejemplo, podrás personalizar una instalación de WordPress. Esta opción requiere de conocimientos de instalación de aplicaciones web en servidores. Ver documentación.

Cómo incrustar WordPress Playground directamente en tu sitio

Esta opción probablemente sea la más sencilla de implementar, aunque tendrás limitaciones a la hora de personalizar WordPress. Pero si solo quieres que se pueda probar un tema, las posibilidades de un plugin o cosas así, puede ser más que suficiente.

La última compilación disponible se puede incrustar con la etiqueta HTML <iframe>:

<iframe
    style="width: 800px; height: 500px;"
    src="https://wasm.wordpress.net/wordpress.html?mode=seamless"
></iframe>

Si quieres incrustarlo en una página de tu WordPress, como yo hice en blogpocket.com/playground, simplemente edita la página e inserta el bloque HTML para pegar el código anterior.

Seguramente quieras ampliar el tamaño de la ventana, por lo que habrá que modificar los valores de los parámetros width y height.

También es posible que debas convertir el bloque de HTML en uno de grupo, ordenar el bloque horizontalmente, justificar los elementos al centro y elegir ancho amplio.

En cuanto a los parámetros que puedes añadir en src, son:

• mode=seamless o mode=browser– Muestra WordPress en una página completa o lo envuelve en una interfaz de usuario del navegador
• login=1– Inicia sesión del usuario como administrador.
• page=/wp-admin/– Carga la página inicial especificada que muestra WordPress
• plugin=coblocks– Instala el complemento especificado. Utiliza el nombre del complemento de la URL del directorio de complementos, por ejemplo, para una URL como https://wordpress.org/plugins/wp-lazy-loading/, el nombre del complemento sería wp-lazy-loading. Puedes preinstalar varios complementos diciendo plugin=coblocks&plugin=wp-lazy-loading&…. La instalación de un complemento registra automáticamente al usuario como administrador.
• theme=disco– Instala el tema especificado. Utiliza el nombre del tema de la URL del directorio de temas, por ejemplo, para una URL como https://wordpress.org/themes/disco/, el nombre del tema sería disco. Al instalar un tema, el usuario inicia sesión automáticamente como administrador.
• rpc=1– Habilita la API de JavaScript experimental.

En blogpocket.com/playground el código de incrustación es el siguiente y lo que hace es instalar el plugin Gutenberg y entrar al editor, con una ventana completa de 1200×900 px.

<iframe style="width: 1200px; height: 900px;" 
src="https://wasm.wordpress.net/wordpress.html?plugin=gutenberg&amp;url=/wp-admin/post-new.php&amp;mode=seamless"
></iframe>

Relacionado

Enlaces a tutoriales de Blogpocket para probar WordPress:

• Cómo crear una web de pruebas en local (Mac, PC o Linux)
• Cómo pasar un sitio web de WordPress desde hosting a local
• La guía definitiva para clonar WordPress

Conclusiones

WordPress Playground es una herramienta experimental y puede romperse o cambiar sin previo aviso, pero merece la pena explorarlo.

La forma más fácil de verlo en funcionamiento es entrar en la página de playground e Blogpocket. Eso sirve para que cualquiera pueda ensayar Gutenberg, el plugin de WordPress que tiene funcionalidades que todavía no están en el núcleo, sin complicaciones.

Si estás buscando más control, puedes elegir incrustar WordPress Playground directamente en tu sitio y aquí te he enseñado cómo hacerlo.

Comparte en Mastodon:

Y aún hay más…

Suscríbete a la newsletter

En la newsletter «WP al día» recopilamos las ideas, trucos y noticias de actualidad acerca de WordPress, Gutenberg y la Edición completa del sitio. Recíbela todos los lunes a primera hora.

Suscríbete ahora y descarga, entre otros, nuestro último ebook «Un blog de 21 años (la historia jamás contada)!.

¡Quiero suscribirme!