WordPress Playground – A New Tool You Need To Try Right Now via @sejournal, @martinibuster

WordPress has been releasing innovative tools that helps users accomplish their goals and become more proficient users. One of the newest tools is called Playground, a tool that is designed to make a WordPress site instantly available for testing, learning and building.

Background On WordPress Playground

Playground is a tool that runs in your browser.

The official WordPress documentation for Playground suggests these uses:

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.

The WordPress plugin allows a user to create an exact website copy within a Playground instance, from which a user can do things like test a plugin or theme. 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, where it stays 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.

The first thing I wanted to know is, what is Playground and why should anyone use it, what should people expect from it?

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 a separate hosting.

The next example is a bit more technical but I’ll still go with it. Playground can be embedded on websites. There are companies out there showcasing 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.”

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.”

Zieliński next recommended the following resources to view and read more about Playground:

WordPress Playground: the ultimate learning, testing, & teaching tool for WordPress

How to use WordPress Playground for interactive demos

How to start using WordPress Playground

Does Playground help regular WordPress users become familiar with developing sites themselves, is it 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 an 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.

And this doesn’t have to be a distant future. 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 go to the plugin page and by click the Live Preview button. Oh, and that live preview? It’s also powered by WordPress Playground!”

Is Playground 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 fix before it’s fully functional.”

Playground has a feature called Blueprints, configuration setting files. I asked Adam how he would describe Blueprints and how is it 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.

See also: What are Blueprints, and what can you do with them?

About the usefulness of Blueprints – there are two sides to that. You can either use a Playground site created based on an existing Blueprint, or you can create a new Blueprint.

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.”

Is this 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’s 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.”

Someone from the WordPress 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.”

WordPress Playground

A playground is a place that is designed for and encourages activities. That’s exactly what WordPress Playground is about. Anyone who uses WordPress should give Playground a try or at the very 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