playground.wordpress.net: Make it easier to boot playground from a Github repository

[akirk]

After a conversation with @ndiego, I think we could make it much easier to load a theme, plugin, or whole WordPress site into playground.wordpress.net:

• https://playground.wordpress.net/?theme=https://github.com/user/repo
• https://playground.wordpress.net/?plugin=https://github.com/user/repo
• https://playground.wordpress.net/?site=https://github.com/user/repo

or if we could even do auto-detection (?), just

• https://playground.wordpress.net/#https://github.com/user/repo

As a bonus, it should setup the Github exporter so that it is already ready to submit a PR based on your changes.

@ndiego shared this URL with me to achieve the same already today, we just need to simplify it, since it's both impossible to remember, and needs quite a bit of setup to make it work.

https://playground.wordpress.net/?
gh-ensure-auth=yes
&ghexport-repo-url=https://github.com/ndiego/nautilus
&ghexport-content-type=theme
&ghexport-theme=nautilus
&ghexport-commit-message=Nautilus+update
&ghexport-playground-root=/wordpress/wp-content/themes/nautilus
&ghexport-pr-action=create
&ghexport-allow-include-zip=no
&blueprint-url=https://raw.githubusercontent.com/ndiego/nautilus/main/_playground/blueprint.json

I believe we can infer all of those values from just the Github URL and for other dependencies, you put a blueprint.json in the root of the directory (Compare with Nick's https://raw.githubusercontent.com/ndiego/nautilus/main/_playground/blueprint.json)

For now, we'd need to transparently use github-proxy.com and remove it when/if Github decides to open up CORS.

[akirk]

Noting that an important step in the above is that we'd automatically map the Github contents into the playground. Because of the name in the Github zipfile, it needs some renaming:

		{
			"step": "installTheme",
			"themeZipFile": {
				"resource": "url",
				"url": "https://github-proxy.com/proxy/?repo=ndiego/nautilus"
			}
		},
		{
			"step": "mv",
			"fromPath": "/wordpress/wp-content/themes/nautilus-main",
			"toPath": "/wordpress/wp-content/themes/nautilus"
		},

[bgrgicak]

I'm not sure about auto-detecting, Playground usually avoids guessing. WP-now tries to auto-detect what to do and it's not the best experience sometimes while it's easy to define this using a blueprint.

		{
			"step": "installTheme",
			"themeZipFile": {
				"resource": "url",
				"url": "https://github-proxy.com/proxy/?repo=ndiego/nautilus"
			}
		},
		{
			"step": "mv",
			"fromPath": "/wordpress/wp-content/themes/nautilus-main",
			"toPath": "/wordpress/wp-content/themes/nautilus"
		},

Looking at this example, we could automatically export the theme/plugin to the correct folder instead of REPO-BRANCH.
The only issue is that some blueprints currently depend on this behavior.

[AmnestyAM]

I am also finding it hard to load a custom theme. https://github.com/amnestywebsite/humanity-blueprint

Amongst lots of uneducated trying I have tried the following.

using the raw githubusercontent domain method

        {
            "step": "installTheme",
            "themeZipFile": {
                "resource": "url",
                "url": "https://raw.githubusercontent.com/amnestywebsite/humanity-blueprint/main/humanity-theme.zip"
            }
        },

using the GitHub proxy method

		{
			"step": "installTheme",
			"themeZipFile": {
				"resource": "url",
				"url": "https://github-proxy.com/proxy/?repo=https://github.com/amnestywebsite/humanity-theme/"
			}
		},
		{
			"step": "mv",
			"fromPath": "/wordpress/wp-content/themes/humanity-theme-main",
			"toPath": "/wordpress/wp-content/themes/humanity-theme"
		},

I have tried via WP CLI

    {
      "step": "wp-cli",
      "command": "wp theme install https://raw.githubusercontent.com/amnestywebsite/humanity-blueprint/main/humanity-theme.zip"
    }

this told me to install wp package install wp-cli/restful which couldn't not be installed

The "https://wp-cli.org/package-index/packages.json" file could not be downloaded: allow_url_fopen must be enabled in php.ini

I also opened a ticket here WordPress/blueprints#58 which I think I will close as I probably can just follow this issue.

If anyone finds a solution that works for this https://github.com/amnestywebsite/humanity-blueprint I would love to hear it, until then I will wait for this enhancement, thanks all :-)

[adamziel]

@AmnestyAM I agree the process may be quite tricky at the moment. As we work on simplifying it, I got that theme to load using the following Blueprint:

{
  "landingPage": "/wp-admin/themes.php",
  "steps": [
    {
      "step": "login",
      "username": "admin",
      "password": "password"
    },
    {
      "step": "unzip",
      "extractToPath": "/wordpress",
      "zipFile": {
        "resource": "url",
        "url": "https://github-proxy.com/proxy/?repo=amnestywebsite/humanity-theme&directory=wp-content/themes/humanity-theme"
      }
    },
    {
      "step": "activateTheme",
      "themeFolderName": "humanity-theme"
    }
  ]
}

However, loading it from the source directory doesn't seem to fully work as there are asset files. I poked around and found the theme is published using GitHub releases: https://github.com/amnestywebsite/humanity-theme/releases

This can be downloaded via github-proxy.com using the following URL:

https://github-proxy.com/proxy/?repo=amnestywebsite/humanity-theme&release=v1.0.3&asset=humanity-theme.zip

Sometimes zipped themes have a top-level directory in the archive, but this one doesn't so I extracted it to a directory and move it back to themes root. Ideally Blueprints would know how to handle that. Until they do, here's a Blueprint that finally worked:

{
  "landingPage": "/wp-admin/themes.php",
  "steps": [
    {
      "step": "login",
      "username": "admin",
      "password": "password"
    },
    {
      "step": "mkdir",
      "path": "/tmp/humanity-theme"
    },
    {
      "step": "unzip",
      "extractToPath": "/tmp/humanity-theme",
      "zipFile": {
        "resource": "url",
        "url": "https://github-proxy.com/proxy/?repo=amnestywebsite/humanity-theme&release=v1.0.3&asset=humanity-theme.zip"
      }
    },
    {
      "step": "mv",
      "fromPath": "/tmp/humanity-theme",
      "toPath": "/wordpress/wp-content/themes/humanity-theme"
    },
    {
      "step": "activateTheme",
      "themeFolderName": "humanity-theme"
    }
  ]
}

[AmnestyAM]

Thanks for the help here @adamziel much appreciated

[bgrgicak]

@akirk recently demonstrated a blueprint builder that had support for custom steps.
If we had that UI builder we could add steps like these to the UI builder, without adding more steps to the Playground code directly.

[bgrgicak]

We need to add sparse checkout for the markdown project which will require git imports. Once we have that, we can add a query string to import from git.