Title: WordPress Playground Step Library
Author: Alex Kirk
Published: July 11, 2024

---

# WordPress Playground Step Library

July 11, 2024

[WordPress Playground](https://wordpress.org/playground/) is this fascinating tool
that allows you to run WordPress without a server. It achieves this by running PHP
in your browser by using [WASM](https://webassembly.org/). It sounds cool, and it
makes for numerous interesting demos, as its original creator [Adam Zielinski](https://adamadam.blog/)
showed at WordCamp Europe 2024: [WordPress Playground – use WordPress without a server](https://europe.wordcamp.org/2024/session/wordpress-playground-use-wordpress-without-a-server/)(
[recording](https://www.youtube.com/live/ofh6jLrXnpA?feature=shared&t=5265), [slides](https://drive.google.com/file/d/1EpHdP9v6dThrGlO8FWVUeiwSddjlRwoe/view?usp=sharing)).

Having built [Translate Live](https://make.wordpress.org/polyglots/2023/05/08/translate-live-updates-to-the-translation-playground/)
for WordPress.org–a way to translate plugins and themes without having to use a 
table UI–I have a bit of experience with having WordPress Playground do more complex
things. But I also know that it be a bit difficult to get started with that.

### Blueprints to start a Playground

So, [as you can see with Translate Live](https://translate.wordpress.org/projects/wp-plugins/friends/dev/de/default/playground/),
a WordPress Playground can be booted into configurations, and these configurations
are (currently) called [Blueprints](https://wordpress.github.io/wordpress-playground/blueprints-api/index/).
They are JSONs made of options and a list of steps. You can choose from [a number of available steps](https://wordpress.github.io/wordpress-playground/blueprints-api/steps#)
like `installPlugin` to share a link with someone to try something in WordPress 
without having to set up hosting for that.

The available steps are somewhat basic but powerful. It can be abstract to think
of what to do with them.

So, I had the idea that while the available steps of WordPress Playground are quite
universal, we could build a library of “more meaningful” steps that do and “transpile”
them to existing steps.

### Build a Playground Blueprint with a Drag and Drop UI

Welcome to the [WordPress Playground Step Library](https://akirk.github.io/playground-step-library/):
Combining these steps with a click (or drag and drop) UI, it allows you do quickly
create a WordPress Playground that does things you didn’t know you could easily 
do. Here is a screenshot:

[[

So, for example, it could be useful when you share a WordPress Playground link to
add some explanatory text, and what better to use than the infamous^([1](https://alex.kirk.at/2024/07/11/wordpress-playground-step-library/comment-page-1/?output_format=md#8b8438cf-7bf9-445f-9ef8-ae116c68f072))
[Admin Notice](https://developer.wordpress.org/reference/hooks/admin_notices/)? 
But, how do you do it?

Turns out, you’d need a small mu-plugin. But with a custom step, it’s just a matter
of adding that step:

[[

So such a “custom blueprint” for playground would be this:

    ```wp-block-code
    {
      "landingPage": "/",
      "steps": [
        {
          "step": "showAdminNotice",
          "vars": {
            "text": "Welcome to WordPress Playground!"
          }
        }
      ]
    }
    ```

But careful. The above doesn’t run in Playground. There is no _showAdminNotice_ 
step. But the Step Library automaticaly transpiles to a valid blueprint:

    ```wp-block-code
    {
      "landingPage": "/wp-admin/",
      "login": true,
      "steps": [
        {
          "step": "mkdir",
          "path": "wordpress/wp-content/mu-plugins"
        },
        {
          "step": "writeFile",
          "path": "wordpress/wp-content/mu-plugins/0-mu.php",
          "data": "<?php add_action( 'admin_notices', function() { echo '<div class=\"notice notice-success is-dismissible\"><p>Welcome to WordPress Playground!</p></div>'; } ); ?>"
        }
      ]
    }
    ```

So which one is easier to remember? :-) You can [try this blueprint in WordPress Playground now](https://playground.wordpress.net/#{%22landingPage%22:%22/wp-admin/%22,%22login%22:true,%22steps%22:[{%22step%22:%22mkdir%22,%22path%22:%22wordpress/wp-content/mu-plugins%22},{%22step%22:%22writeFile%22,%22path%22:%22wordpress/wp-content/mu-plugins/0-mu.php%22,%22data%22:%22%3C?php%20add_action(%20'admin_notices',%20function()%20{%20echo%20'%3Cdiv%20class=\%22notice%20notice-success%20is-dismissible\%22%3E%3Cp%3EWelcome%20to%20WordPress%20Playground!%3C/p%3E%3C/div%3E';%20}%20);%20?%3E%22}]})!
It will look like this:

[⌊WordPress showing an admin notice: Welcome to WordPress Playground!⌉⌊WordPress
showing an admin notice: Welcome to WordPress Playground!⌉[

I’ve made the [Step Library](https://akirk.github.io/playground-step-library) so
when you configure it, its URL reflects to your custom steps ([this is the above in the Step Library](https://akirk.github.io/playground-step-library/#showAdminNotice__text--Welcome%20to%20WordPress%20Playground!))
so that you can easily share them. If you wanted to share the actual running playground,
share the URL of the “Launch in Playground” link.

The Playground link will start with [https://playground.wordpress.net/](https://playground.wordpress.net/),
the Step Library link with [https://akirk.github.io/playground-step-library/](https://akirk.github.io/playground-step-library/).

The [Step Library is hosted on Github](https://github.com/akirk/playground-step-library)
and [you can contribute your own steps](https://github.com/akirk/playground-step-library?tab=readme-ov-file#contributing)!
Also happy to receive new issues with ideas of what steps might be useful to add.
There also the [Blueprints Gallery](https://github.com/WordPress/blueprints/blob/trunk/GALLERY.md)
that showcases further uses of Playground and is also open to contributions!

So far, [I have added these steps](https://github.com/akirk/playground-step-library/tree/main/steps):

 * changeAdminColorScheme
 * createUser
 * customPostType
 * deleteAllPosts
 * sampleContent
 * setLanguage ([this one is coming soon to Playground natively!](https://github.com/WordPress/wordpress-playground/pull/1538))
 * setSiteName
 * showAdminNotice

I’m curious if this tool can help you build a WordPress Playground, please tell 
me by commenting via Mastodon or ActivityPub, and spread the word about the tool!

Oh, and checkout the [Awesome WordPress Playground link collection](https://github.com/akirk/awesome-wordpress-playground)
if you want to learn more about Playground or check out interesting applications!
[Happy playing](https://playground.wordpress.net/)!

 1. This is traditionally misused by plugins to prompt you to upgrade so that your 
    wp-admin screen can get bloated with this. To the point where there is an [Admin Notices Manager plugin](https://wordpress.org/plugins/admin-notices-manager/)
    that allows you to keep them under control. [↩︎](https://alex.kirk.at/2024/07/11/wordpress-playground-step-library/comment-page-1/?output_format=md#8b8438cf-7bf9-445f-9ef8-ae116c68f072-link)

[WordPress](https://alex.kirk.at/category/wordpress/)

Read this next

[Your WordPress as Your Personal Mastodon Instance](https://alex.kirk.at/2024/06/13/your-wordpress-as-your-personal-mastodon-instance/)

## 4 responses to “WordPress Playground Step Library”

 1.  ![Matthias Pfefferle Avatar](https://alex.kirk.at/wp-content/uploads/sites/2/activitypub/
     actors/1879349/de4192305bfdc1477688e1cc0a760712.webp)
 2.  [Matthias Pfefferle](https://mastodon.social/@pfefferle)
 3.  [July 11, 2024](https://mastodon.social/@pfefferle/112768708447238545)
 4.  [@alex](https://alex.kirk.at/author/alex/) ActivityStreams would have been a perfect
     format to model the steps or why not call them Activities?!?😋
 5.  [New courses on Learn, My Menu theme, Section styles, Playground step library – Weekend Edition 299 – Gutenberg Times](https://gutenbergtimes.com/new-courses-on-learn-my-menu-theme-section-styles-playground-step-library-weekend-edition-299/)
 6.  [July 13, 2024](https://alex.kirk.at/2024/07/11/wordpress-playground-step-library/comment-page-1/#comment-85357)
 7.  […] Alex Kirk has created a WordPress Playground Step Library. To learn more about
     the thoughts behind it and how to use it, he also write a blog post about how 
     to Build a Playground Blueprint with a Drag and Drop UI. […]
 8.  [Log in to Reply](https://alex.kirk.at/wp-login.php?redirect_to=https%3A%2F%2Falex.kirk.at%2F2024%2F07%2F11%2Fwordpress-playground-step-library%2F)
 9.  [alex.kirk.at](https://alex.kirk.at/2024/07/29/submitting-patches-to-github-with-wordpress-playground/)
 10. [July 29, 2024](https://alex.kirk.at/2024/07/11/wordpress-playground-step-library/comment-page-1/#comment-85495)
 11. Today, I’d like to talk about a new step I added to the WordPress Playground Step
     Library that makes it easier to configure WordPress Playground…
 12. [Log in to Reply](https://alex.kirk.at/wp-login.php?redirect_to=https%3A%2F%2Falex.kirk.at%2F2024%2F07%2F11%2Fwordpress-playground-step-library%2F)
 13. [alex.kirk.at](https://alex.kirk.at/2025/09/05/npm-install-playground-step-library/)
 14. [September 5, 2025](https://alex.kirk.at/2024/07/11/wordpress-playground-step-library/comment-page-1/#comment-88063)
 15. I have updated my Playground Step Library (which I had written about before)the
     tool that allows you to use more advanced steps in WordPress Playgroundso…
 16. [Log in to Reply](https://alex.kirk.at/wp-login.php?redirect_to=https%3A%2F%2Falex.kirk.at%2F2024%2F07%2F11%2Fwordpress-playground-step-library%2F)

### Leave a Reply 󠀁[Cancel reply](https://alex.kirk.at/2024/07/11/wordpress-playground-step-library/comment-page-1/?output_format=md#respond)󠁿

Only people in [my network](https://alex.kirk.at/friends/) can comment.

This site uses Akismet to reduce spam. [Learn how your comment data is processed.](https://akismet.com/privacy/)