Jonathan Bossenger

Just over a year ago, my colleague and friend Adam Zielinski built WordPress Playground because he was looking for a way to run WordPress without any setup requirements.

Soon after it was released, at WordCamp Europe 2023 in Athens, Adam showed me the Interactive Playground block he was building on top of WordPress Playground. At the time it supported running PHP inside a code editor window, and outputting the results to the screen. This opened up some interesting possiblities in terms of my WordPress developer education work.

What if it was possible to run a WordPress plugin or theme inside an instance of WordPress, right inside a course lesson? Learners wouldn’t need to set up a local development environment or WordPress installation, they could just write code, and see it’s effects right there on the lesson page. This would create an amazing experience with respect to practical activities for learners.

Adam knew this, and sometime later, in a bus drive back from a work dinner at our division meetup in Malaga, we sat and discussed what a version of this might look like. Not long after that chat, the first iteration of the Code Editor mode for the playground block was released.

Below is a very simplified example of this. You add the block to your post or page, enable the code editor view, add your plugin code (in this case a simple filter hook callback on the the_content filter), and you’re good to go.

Hit the Activate the Live Preview button, browse to the Sample page, and you’ll see the text the code is adding to the end of the page content. Then edit the “Hello from my plugin” string in the code editor, and hit the Run button.

Fun, right?

If you look closer, at the bottom of the block, there’s a Open in New Tab link, which, you guessed it, opens this block and the code in a new tab.

“But what about theme support?” I hear you ask. Well, thanks to a PR that yours truly worked on last month, that is now also possible. Check it out.

Ok, so I’ll admit, the example is not perfect, it’s just a blank theme created by Create Block Theme. But it works. Activate Live Preview and the new theme is installed and activated. Then change the contentSize in the theme.json file to something arbitrary like 50px, hit Run, and it will apply that setting to the theme live in the Preview.

There’s definately still work to be done. At the moment I need to add every file manually, so if I want to set up more complicated plugin or theme structures, it’s a bit of a pain. Fortunately it is possible to fetch the contents of each file from an external file, like one in a GitHub repo.

I’ve had chats with Adam about the possibility of loading entire themes or plugins from Github, for which there is an open issue.

The more files that are added are also going to overload the file tabs at the top. It would be cool to display the files in a more tree like structure, but of course that creates a space issue for the code editor.

And I noticed today there’s a small UI issue in the setting I added to enable theme support.

But for now, it works, and I can’t wait to start using it for lesson practicals on Learn.WordPress.org.

You can find the WordPress Playground Block in the WordPress plugins directory.