Why did I build WordPress Playground? It was easier than installing WordPress.

Adam Zieliński Avatar

Posted by


People often ask me why did you build WordPress Playground? Well, here’s the story:

One time I wrote an entry-level introduction to the Gutenberg data layer, and I noticed it was everything but entry-level. It starts with an innocent-looking tar pit of setup instructions where you’re asked to:

If you’ve ever been to a WordPress Contributor day, you know that six hours and help from other developers may not be enough to complete these steps – especially on Windows.

Here’s the setup checklist that I wanted to have:

(yes, that’s a blank list)

The Node.js part of the setup could be scraped by writing React.createElement() instead of using JSX, but it wasn’t an option for this or that reason. Too bad!

Then I thought – it’s just JavaScript. Why ask for any setup at all? Why not wrap every code snippet in a small code editor and put a Run button next to it? Yes, that’s it! I thought in excitement.

But then I realized it wouldn’t be enough. Gutenberg data layer is all about interacting with WordPress REST API. Even if the JavaScript examples were interactive and editable, they would need a WordPress to talk to – I still needed to run WordPress somewhere.

However, installing WordPress was a problem I couldn’t solve. I came up with four ideas, and neither was helpful:

And then it hit me: What if the browser could run a WordPress installation directly in that tutorial? Then I wouldn’t have to install WordPress anywhere. A week later I was looking at a proof of concept, and today we call it WordPress Playground.

Playground already powers some interactive tutorials. In my perfect world, the entire WordPress documentation will become interactive one day – including the Gutenberg data layer introduction.

One response to “Why did I build WordPress Playground? It was easier than installing WordPress.”

  1. […] Perspectives… Adam Zieliński explained the reasoning behind building the WordPress playground (WP in Browser), because it is easier than […]

Leave a Reply

Blog at WordPress.com.