WordPress Playground

One of the most exciting things at WordCamp Europe 2023 for me was discovering how far along the WordPress Playground project is. If you haven’t heard of the playground before, it’s a full version of WordPress, running directly in your browser!

History

The project began late last summer, with version 0.1 being released in April. The readme indicates that it was inspired by the initial PHP WASM implementation,  a Drupal in the browser example, and a WASM Labs WordPress demo. The WordPress Playground was introduced to the larger WordPress community during the 2022 State of the Word presentation. 

The Playground was actively promoted during WCEU this year — used to quickly spin up sites for the documentation team, and others,  on contributor day, featured in a connect track session, and a demo during the keynote.

How it works

The technology behind the Playground is called WASM, short for Web Assembly.

WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable compilation target for programming languages, enabling deployment on the web for client and server applications.

There are versions of PHP compiled into WASM binaries that allow you to run PHP code directly in the browser. The Playground then uses those binaries to run the WordPress PHP application, as well as a plugin that allows MySQL calls to be intercepted and interpreted to SQLite

Demos

Unfortunately, you can’t embed playground iframes in dev.to, but we can link directly to a few examples of it in action. The Playground default uses the latest version of WordPress with the default theme and PHP 8.0. 

You can use query parameters, like theme and plugins to install a particular theme or plugin in the Playground. In this example, we install the Frost theme and CoBlocks plugin. You can also pass wp and php to install different versions of WordPress and PHP.

If you’re embedding an iframe, the experience is also totally scriptable. One example of the iframes in action is the tutorial for using the new tag processor function.

The future

The Playground opens up a lot of possibilities since it makes WordPress embeddable in so many areas: 

• We can easily test different versions of WordPress and PHP
• We can embed live examples in tutorials and lessons
• A VS Code extension allows you to open a theme or plugin up in a usable test environment
• It can be embedded directly in mobile apps
• We can include live demos in pull requests
• It can be integrated into a CI/CD pipeline

The vision and philosophy and roadmap are both available on GitHub, so you can see where things are headed. It’s still early on, version 0.2 was just released a few days ago on June 24th. We’re likely to see breaking changes at times until an official 1.0 release happens.

Now it’s time to go play.