Title: Page 11 – Alex Kirk

---

 * 
   ## 󠀁[Submitting Patches to Github with WordPress Playground](https://alex.kirk.at/2024/07/29/submitting-patches-to-github-with-wordpress-playground/)󠁿
   
 * July 29, 2024
 * Today, I’d like to talk about a new step I added to the [WordPress Playground Step Library](https://akirk.github.io/playground-step-library/)
   that makes it easier to configure [WordPress Playground](https://playground.wordpress.net)
   in a way that you can easily submit Pull Requests to the Github repository where
   the project is hosted.
 * What is the Step Library? It is a tool that makes it easier to create a so called
   [Blueprint for WordPress Playground](https://wordpress.github.io/wordpress-playground/blueprints-api/index/)
   that boots WordPress in your browser window according to your needs.
 * The specific step I introduced is called the [githubTheme step](https://github.com/akirk/playground-step-library/blob/main/steps/githubTheme.js).
   It will run a theme from a Github repository.
 * Additionally, and this is mostly following guidance from [Nick Diego](https://nickdiego.com/)
   for his own [Nautilus theme](https://github.com/ndiego/nautilus), by ticking 
   a checkbox, it will configure Playground in a way that you can submit Pull Requests
   through playground ([open this setup in the step library](https://akirk.github.io/playground-step-library/#githubTheme_._repo-.-ndiego/nautilus_._branch-.-main_._prs-.-true&.&installPlugin_._plugin-.-create-block-theme_._permalink-.-false&.&login_._username-.-admin_._password-.-password&.&title_._Load%20the%20Nautilus%20theme%20and%20prepare%20it%20for%20submitting%20Pull%20Requests)):
 * ![](https://alex.kirk.at/wp-content/uploads/sites/2/2024/07/step-library-gh-pr-
   checkbox-highlight-1024x540.png)
 * 
   ### Screen Recording
   
 * So after creating the blueprint, there are a number of steps to take until you
   arrive at your PR. To show this better, I created a Screen Recording but below
   I also extracted some screenshots and commented them. This is [the Pull Request created in the video](https://github.com/ndiego/nautilus/pull/9),
   and here is also [the playground link that the step library generated](https://playground.wordpress.net/?gh-ensure-auth=yes&ghexport-repo-url=https%3A%2F%2Fgithub.com%2Fndiego%2Fnautilus&ghexport-content-type=theme&ghexport-theme=nautilus&ghexport-playground-root=%2Fwordpress%2Fwp-content%2Fthemes%2Fnautilus&ghexport-pr-action=create&ghexport-allow-include-zip=no&blueprint-url=data:application/json;base64,eyJsYW5kaW5nUGFnZSI6Ii93cC1hZG1pbi8iLCJzdGVwcyI6W3sic3RlcCI6Imluc3RhbGxUaGVtZSIsInRoZW1lWmlwRmlsZSI6eyJyZXNvdXJjZSI6InVybCIsInVybCI6Imh0dHBzOi8vZ2l0aHViLXByb3h5LmNvbS9wcm94eS8/cmVwbz1uZGllZ28vbmF1dGlsdXMmYnJhbmNoPW1haW4ifSwib3B0aW9ucyI6eyJhY3RpdmF0ZSI6dHJ1ZX19LHsic3RlcCI6Imluc3RhbGxQbHVnaW4iLCJwbHVnaW5aaXBGaWxlIjp7InJlc291cmNlIjoid29yZHByZXNzLm9yZy9wbHVnaW5zIiwic2x1ZyI6ImNyZWF0ZS1ibG9jay10aGVtZSJ9LCJvcHRpb25zIjp7ImFjdGl2YXRlIjp0cnVlfX0seyJzdGVwIjoibG9naW4iLCJ1c2VybmFtZSI6ImFkbWluIiwicGFzc3dvcmQiOiJwYXNzd29yZCJ9XX0=)
   so that you can try it out yourself.
 * The screencast actually shows how I first missed the right button but then demonstrates
   that you can also update PRs.
 * 
   ### Screenshots from the Recording
   
 * Here are some screenshots from the video (omitting my mistake):
 * ![](https://alex.kirk.at/wp-content/uploads/sites/2/2024/07/step-library-pr-github-
   connect-1024x850.png)
 * First, you connect to your Github Account (I had already done this, so this just
   proceeds)
 * ![](https://alex.kirk.at/wp-content/uploads/sites/2/2024/07/step-library-pr-color-
   palette-1024x850.png)
 * In the Site Editor, I can then change the color palette like this
 * ![](https://alex.kirk.at/wp-content/uploads/sites/2/2024/07/step-library-pr-save-
   change-to-themex-1024x850.png)
 * Then I use the Create Block Theme plugin to save the changes to the theme
 * ![](https://alex.kirk.at/wp-content/uploads/sites/2/2024/07/step-library-pr-save-
   change-to-theme-2-1024x850.png)
 * And press “Save Changes”
 * ![](https://alex.kirk.at/wp-content/uploads/sites/2/2024/07/step-library-pr-export-
   pr-1024x850.png)
 * Choose to export the Pull Request to Github
 * ![](https://alex.kirk.at/wp-content/uploads/sites/2/2024/07/step-library-pr-create-
   pr-1024x850.png)
 * And give some details before submitting it to Github
 * ![](https://alex.kirk.at/wp-content/uploads/sites/2/2024/07/step-library-pr-gh-
   pr-1024x850.png)
 * This is now the final [Github Pull Request](https://github.com/ndiego/nautilus/pull/9)
 * 
   ### How does it work?
   
 * It is amazing what WordPress Playground can do: it runs WordPress in your browser,
   so there is a virtual filesystem to which the Create Block Theme can write its
   file changes. The
 * Already in November 2023, [Adam Zielinski](https://adamadam.blog/) published 
   the [GitHub Pull Request submission flow](https://github.com/WordPress/wordpress-playground/pull/749)
   but only recently [Nick Diego](https://nickdiego.com/) showed me how practical
   this is for theme developers. The only downside: it takes quite a lot to configure:
    1. You need [a blueprint to run your theme from Github,](https://raw.githubusercontent.com/ndiego/nautilus/main/_playground/blueprint.json)
    2. [Make sure that the Create Block Theme plugin is installed](https://raw.githubusercontent.com/ndiego/nautilus/main/_playground/blueprint.json),
       and finally
    3. Configure [a set of URL parameters for Playground](https://wordpress.github.io/wordpress-playground/query-api/#github-export-options)
       to let it know where the PR should go, which directory to export etc.
 * The Step Library makes this more accessible [by automatically setting those query parameters for you](https://github.com/akirk/playground-step-library/blob/main/steps/githubTheme.js#L24-L32).
   It’s then also easy to add more steps, [just try it out, using the above as a basis](https://akirk.github.io/playground-step-library/)!
 * If you want to read a bit more about the Step Library, [I recommend reading my previous post on it](https://alex.kirk.at/2024/07/11/wordpress-playground-step-library/).
 * As of now, I wouldn’t call the flow simple: you need to be taught steps on how
   to submit changes. But when you know them, submitting a PR to a WordPress theme
   can be done without any server infrastructure! I think this is fascinating!
 * [WordPress](https://alex.kirk.at/category/wordpress/)
 * [GatherPress](https://alex.kirk.at/tag/gatherpress/), [playground](https://alex.kirk.at/tag/playground/)
 * 
   ## 󠀁[WordPress Playground Step Library](https://alex.kirk.at/2024/07/11/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/page/11/?output_format=md&term_id=44047#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/page/11/?output_format=md&term_id=44047#8b8438cf-7bf9-445f-9ef8-ae116c68f072-link)
 * [WordPress](https://alex.kirk.at/category/wordpress/)

 [Previous Page](https://alex.kirk.at/page/10/?output_format=md&term_id=44047) [Next Page](https://alex.kirk.at/page/12/?output_format=md&term_id=44047)