Title: Submitting Patches to Github with WordPress Playground Author: Alex Kirk Published: July 29, 2024 Last modified: September 6, 2024 --- # 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/) Read this next [WordPress Playground Step Library](https://alex.kirk.at/2024/07/11/wordpress-playground-step-library/) ## 2 responses to “Submitting Patches to Github with WordPress Playground” 1. [Carsten Bach](https://dewp.space/@carstingaxion) 2. [July 29, 2024](https://alex.kirk.at/2024/07/29/submitting-patches-to-github-with-wordpress-playground/comment-page-1/#comment-85511) 3. @courtneyr This is cool!Originally for #GatherPress, I made something similar to work on typical data like posts & pages. It works the same like the… 4. [Log in to Reply](https://alex.kirk.at/wp-login.php?redirect_to=https%3A%2F%2Falex.kirk.at%2F2024%2F07%2F29%2Fsubmitting-patches-to-github-with-wordpress-playground%2F) 5. [alex.kirk.at](https://alex.kirk.at/2024/09/06/enhance-your-wordpress-plugin-add-live-preview/) 6. [September 6, 2024](https://alex.kirk.at/2024/07/29/submitting-patches-to-github-with-wordpress-playground/comment-page-1/#comment-86296) 7. Have you ever hesitated to install a new WordPress plugin, worried about whether it would meet your needs? Likely, many potential users of your plugins… 8. [Log in to Reply](https://alex.kirk.at/wp-login.php?redirect_to=https%3A%2F%2Falex.kirk.at%2F2024%2F07%2F29%2Fsubmitting-patches-to-github-with-wordpress-playground%2F) ### Leave a Reply 󠀁[Cancel reply](https://alex.kirk.at/2024/07/29/submitting-patches-to-github-with-wordpress-playground/?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/)