In this quick post I will explain how you can test Gutenberg (or other plugins or themes) in the browser, easily and without installing anything.
In Blogpocket we have published precise information (see links at the end of this post) about obtaining a test environment, but with the tool that I propose here everything is much easier.
In principle, this tool is intended to create test installations for tutorials, courses, clients, etc. This post shows, as an example, how to create a WordPress page with a window that gives access to the block editor. That WordPress has the Gutenberg plugin pre-installed and so you could explore the possibilities of that plugin.
WordPress Playground
WordPress Playground It is the easiest and simplest way for your users (students, clients, etc.) to test WordPress plugins and themes. It does not require any installation, neither locally nor on your server. Simply with the browser.
There are several ways to explore this resource.
- From Blogpocket. Simply access blogpocket.com/playground and you will find a window with a fully functional WordPress installation. You will directly enter the block editor to create a post and test Gutenberg in its latest version. Fantastic isn’t it?!
- From the demo page. For users, designers, and educators, WordPress Playground is a flexible tool that allows you to: test plugins and themes in a live virtual environment, experiment with an anonymous WordPress website, and embed a real WordPress site in your tutorial or course. Access the demo page.
- From a page on your site. To do this, you must know how to embed WordPress Playground directly on your site. The next section explains how to do it.
- Hosting your own WordPress Playground. If you need more flexibility when WordPress Playground can be tested, you can alojar un WordPress Playground. For example, you will be able to customize a WordPress installation. This option requires knowledge of installing web applications on servers. See documentation.
How to embed WordPress Playground directly on your site
This option is probably the easiest to implement, although you will have limitations when it comes to customizing WordPress. But if you just want to be able to test a theme, plugin possibilities or things like that, it may be more than enough.
The latest build available can be embedded with the HTML <iframe> tag:
<iframe style="width: 800px; height: 500px;" src="https://wasm.wordpress.net/wordpress.html?mode=seamless"></iframe>If you want to embed it in a page of your WordPress, like I did on blogpocket.com/playground, just edit the page and insert the HTML block to paste the code above.
Surely you want to increase the size of the window, so you will have to modify the values of the width and height parameters.
You may also need to convert the HTML block to a group block, order the block horizontally, justify elements to the center, and choose wide width.
As for the parameters that you can add in src, they are:
- mode=seamless or mode=browser – Display WordPress on a full page or wrap it in a browser UI
- login=1 – Login the user session as administrator.
- page=/wp-admin/ – Loads the specified home page displayed by WordPress
- plugin=coblocks – Installs the specified plugin. Use the plugin name from the plugin directory URL, for example, for a URL like https://wordpress.org/plugins/wp-lazy-loading/, the plugin name would be wp-lazy-loading. You can pre-install various plugins by saying plugin=coblocks&plugin=wp-lazy-loading&…. Installing a plugin automatically registers the user as an administrator.
- theme=disco – Installs the specified theme. Use the theme name from the theme directory URL, for example, for a URL like https://wordpress.org/themes/disco/, the theme name would be disco. When installing a theme, the user is automatically logged in as an administrator.
- rpc=1 – Enables the experimental JavaScript API.
On blogpocket.com/playground the embed code is as follows and what it does is install the Gutenberg plugin and enter the editor, with a full 1200×900 px window.
<iframe style="width: 1200px; height: 900px;" src="https://wasm.wordpress.net/wordpress.html?plugin=gutenberg&url=/wp-admin/post-new.php&mode=seamless"></iframe>Related
Links to Blogpocket tutorials to test WordPress (in Spanish):
- How to create a test website locally (Mac, PC or Linux)
- How to move a WordPress website from hosting to local
- The Ultimate Guide to Cloning WordPress
Conclusions
WordPress Playground is an experimental tool and may break or change without notice, but it’s worth exploring.
The easiest way to see it working is to go into the playground page and Blogpocket. This allows anyone to try Gutenberg, the WordPress plugin that has features that are not yet in the core, without complications.
If you’re looking for more control, you can choose to embed WordPress Playground directly on your site and I’ve shown you how to do it here.
Leave a Reply