Submitting Patches to Github with WordPress Playground

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 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 that boots WordPress in your browser window according to your needs.

The specific step I introduced is called the githubTheme step. It will run a theme from a Github repository.

Additionally, and this is mostly following guidance from Nick Diego for his own Nautilus theme, 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):

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, and here is also the playground link that the step library generated 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):

First, you connect to your Github Account (I had already done this, so this just proceeds)
In the Site Editor, I can then change the color palette like this
Then I use the Create Block Theme plugin to save the changes to the theme
And press “Save Changes”
Choose to export the Pull Request to Github
And give some details before submitting it to Github
This is now the final Github Pull Request

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 published the GitHub Pull Request submission flow but only recently Nick Diego 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,
  2. Make sure that the Create Block Theme plugin is installed, and finally
  3. Configure a set of URL parameters for Playground 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. It’s then also easy to add more steps, just try it out, using the above as a basis!

If you want to read a bit more about the Step Library, I recommend reading my previous post on it.

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!

Prototype: Create a Website from a Screenshot and Refine It, All in the Browser

I’ve been working on this experiment, combining OpenAI’s gpt-4-vision-preview with WordPress Playground to create a website based on a screenshot.

This follows on the heels of Matt Mullenweg’s announcement at the 2023 State of the Word that in 2024, the WordPress project wants to work on Data Liberation.

While the typical approach to migrating data is to build importers for specific services, a truely universal migration could happen through screenshots. With AI vision this might now be in reach.

So I built this prototype that combines a OpenAI-powered chat interface with WordPress Playground. First a screenshot, a screen recording further down.

So this is only a start. The website somewhat resembles the screenshot but it’s far from being pixel perfect.

My idea is that you’ll work together with the assistant in refining the site. It can help you update, you can ask it questions. An import is rarely perfect from the start but you can see and test the result right away in the browser and refine it.

I imagine that when done, you can then transfer the site to a web hoster who from then on can host your website for everyone.

You can try this yourself here, you “just” need an OpenAI API key that will be stored in your local storage: https://akirk.github.io/website-liberator/

Source (very unpolished) at https://github.com/akirk/website-liberator/

Some notes on this first implementation:

  • Every message is a new conversation. Modifying a website can be token intense, so for now it cannot refer to previous messages.
  • It’s using function calling to allow OpenAI to gather more information to fulfil the request.
  • Chosing the right functions to provide can be tricky.
  • It uses different models depending on the task. gpt4-vision-preview for the screenshot, gpt-3.5-turbo for the rest. I need to experiment more with gpt-4 for the latter tasks.

Finally, a screen recording of an early iteration, I have since moved the chat to the right side.

As I’ve been working on the prototype, it has shown to be interesting to have the bot be there just for customizing sites, it can create and modify pages, update settings of the website. Maybe install plugins.

So starting with a basis from screenshots and imported data, it might just be able to assist you to arrive at a comparable WordPress website, and all with the ease and effortless setup of WordPress Playground. I wonder where we can take this!

Bonus

Some screenshots from a recent version: