Background on WordPress Playground
Playground is a tool that runs in your browser.
The official WordPress documentation for Playground suggests these uses:
- Try a block, a theme, or a plugin
- Build an entire site, save it, host it
- Test your plugin with many specific WordPress and PHP versions
- Embed a real, interactive WordPress site in your tutorial or course
- Showcase a plugin or theme on your website
- Build a native app running WordPress and put it in the App Store
- Preview pull requests from your repository
There is also a WordPress Plugin available, Playground By WordPress Contributors, that enables a user to clone their site to a private in-browser Playground version. Any changes made to the Playground instance do not affect the actual website. The cloned site is not uploaded to any cloud service; all the data remains private, residing within a user’s web browser until the browser tab is closed.
Interview: Adam Zieliński, WordPress Playground Architect @ Automattic
I interviewed Adam Zieliński, the WordPress Playground Architect at Automattic, to learn more about what Playground is and how it can be useful for developers and regular users of WordPress.
Adam Zieliński:
“Playground is WordPress in a single click. There are no tedious setup steps, webhosts account, or technical talk.
Playground is not the site at playground.wordpress.net. It is the groundbreaking technology that makes that site possible and also powers a new generation of interactive, single-click WordPress tools. There are interactive tutorials, QA (Quality Assurance) workflows, “try before you buy” previewers for plugins, collaboration tools, contribution workflows, and so much more.
Here are two examples:
The site at playground.wordpress.net doubles as a QA tool – you can try the upcoming WordPress release, test your plugin or theme with five other plugins, and then see how it performs on different WordPress and PHP versions. It proved useful for sourcing feedback during the WordPress 6.5 release cycle, the Font library call for testing, and more.
As a WordPress plugin, Playground can clone your existing WordPress site, including all content, plugins, and themes, inside a private Playground instance. This gives you a way of testing changes, new plugins, or updates before pushing them live and without needing separate hosting.
Playground can be embedded on websites. Companies showcase a live version of their plugin or theme using a live WordPress Playground site embedded inside their actual site. That’s highly useful for their future customers – even if they have no clue about what Playground is.”
Usefulness for Non-Developers
I followed up with a question asking how he would describe Playground to someone who uses WordPress but doesn’t dabble in the development part.
Adam Zieliński: “Playground is a version of WordPress that runs directly on your device, not on a webhost. You can open Playground on your phone, turn off the internet, and continue using it.”
I next asked if it’s useful for migrating to a new template or testing plugin updates.
Adam Zieliński: “Absolutely. You can clone your site using the Playground WordPress plugin and try the new template or the updated plugin there first without risking breaking your production site. That plugin also adds a ‘preview now’ button to the plugins search in wp-admin so you can ‘try them on’ before committing to installing one on your live site.”
Learning and Teaching with Playground
I asked Adam if Playground helps regular WordPress users become familiar with developing sites themselves, and if it’s a hands-on way to learn how to use WordPress.
Adam Zieliński: “Playground makes a great learning tool. You can just hop on playground.wordpress.net and start exploring WordPress, whether that means creating your first post or installing fifteen plugins and building an entire site.
The experience is very self-guided today, which is useful in classes, workshops, and meetups where an instructor can give you directions.
We’re also exploring interactive and guided tutorials. Imagine visiting WordPress.org, clicking on, say, ‘I want to build my first WordPress site’, and getting clear directions and an interactive WordPress site to work on. That’s what we’re building towards.
Anyone can start creating these interactive learning experiences today with the Playground Block – it’s a single-click way of embedding Playground in your WordPress content. You can play with that block right now if you go to the plugin page and click the Live Preview button. Oh, and that live preview? It’s also powered by WordPress Playground!”
Compatibility with Popular Website Builders
I asked Adam if Playground is compatible with popular WordPress website builders.
Adam Zieliński: “I haven’t tested Divi. Elementor mostly works, although there’s a technical issue in the onboarding flow that needs to be fixed in Elementor before it’s fully functional.”
Blueprints: Configuration Setting Files
Playground has a feature called Blueprints, configuration setting files. I asked Adam how he would describe Blueprints and how they are useful to users.
Adam Zieliński: “Blueprints are guidelines for Playground on how to create the WordPress site for you.
Blueprints are also like puzzle pieces. In fact, at WCEU 2024, you’ll build real WordPress sites with physical puzzle pieces. We’ve printed puzzle pieces representing site configuration steps like installing a plugin or changing the site name and attendees will be able to collect and scan them with an app that will load Playground with the configuration (Blueprint) they put together.
If you just want to enjoy Playground-based tools, you don’t even need to know what Blueprints are. All you’ll experience is a button that opens a WordPress site preconfigured to do anything at all. It could help you test a theme, contribute a documentation page, or even build a slide deck and export it to PDF.
If you want to build new Blueprints, today you need to get your hands dirty and write some JSON code. Blueprints 101 and Technical Introduction to Playground will walk you through the steps and you can also preview the examples in the Blueprints Gallery. It’s worth noting we’re working on a visual tool where you’ll be able to just assemble these steps like puzzle pieces without any coding knowledge.”
Saving and Sharing Demos
I asked if this is a way to create a site and then save or share the demo.
Adam Zieliński: “Yes! Playground sites are temporary by default but there are many ways to save and share them. On playground.wordpress.net there’s a settings button where you can tell Playground to save your site in your web browser. Once you do that and refresh the page, you’ll return right to your site. You can also synchronize the site with a directory on your computer and all the Playground changes will show up there. Then you can also export your site as a zip file or to GitHub.
There are two ways of sharing a site with others.
The first one is to create a Blueprint – so write down all the step-by-step instructions for Playground to recreate that site. You could then include that Blueprint in a link and share it with the world.
Blueprints are powerful but not always convenient, so there’s also a second way. A Playground site can be exported as a zip file. You can host that zip file, for example on GitHub, and create a Playground link to load it.”
Community Insights
Someone from the Word
Press developer community passed this question along:
“Site builders often have one or more ‘starter sites,’ which seem to squarely line up with blueprints, though they usually include premium themes and plugins. Drupal has ‘Distributions,’ which are basically pre-configured starter sites often with a niche focus.
Imagine a preconfigured install of core, a theme, a membership plugin, and payment setup (waiting for gateway API keys). If you want a membership site then just install this and start adding content. Or a preconfigured help desk system and so on.
So, I’m wondering if the vision is that Blueprints will provide something similar?”
Adam Zieliński: “Blueprints enable just that. Live previews in the WordPress plugin directory are an example – every time you get an identical site pre-configured for a particular plugin. It always installs a fresh WordPress and the latest versions of all the co-existing plugins and themes. You can prepare a Blueprint for your particular setup and work with it in the browser, or you can also use the Playground CLI tool to work with these starter sites on your local computer. We’re building a PHP library to enable webhosts to support Blueprints – template sites may then become a common feature in the WordPress hosting landscape.”
Conclusion
WordPress Playground is designed to encourage activities and enhance learning and testing for WordPress users. Anyone who uses WordPress should give Playground a try or at least become familiar with it because knowledge broadens perspectives, aids in problem-solving, and makes one a more effective competitor and business person.
Featured Image by Shutterstock/Leszek Czerwonka
