Make playground.wordpress.net a Showcase and the Developer Hub

[akirk]

Right now, if you go to playground.wordpress.net you can experience a fresh WordPress. This is a great tech demo, but you need someone to explain it to you. We also have https://wordpress.org/playground to explain it. Then there are developer docs at https://wordpress.github.io/wordpress-playground/developers/

What if we combined this all on playground.wordpress.net by loading a WordPress with all of that content? Some sample screenshots:

It would be great if updating the website could be done by modifying the site and then creating a PR to submit that modification. This could encourage documentation contributions (since it's so easy to edit that you just use WordPress inside Playground) and showcase that you can issue PRs directly from Playground.

The embedded WordPress would include:

• A frontpage that explains what Playground is, links the developer docs etc.
• The developer docs as WordPress pages that can be edited. Live demos utilizing PHP running inside the browser.
• Curated links a la Awesome WordPress Playground.
• A Gutenberg base blueprint builder a la Prototype: Block-based Blueprints Editor #1755 that can launch a new playground in a new tab.

It should be possible to link sub-pages on playground.wordpress.net. Say you dig down into the docs, you should be able to share the link and they should then arrive on that subpage (i.e. expose the current URL inside playground using a hash in the playground.wordpress.net URL).

[bgrgicak]

Having access to the Playground documentation and some other useful links directly sounds like a great way to discover features.
Imagine if we had a What's New section that lists features and examples.

Initially, I was worried that this would be a case where we would modify how WordPress works out of the box.
But, if we do this as a custom theme and make it the default theme and store the content in the theme instead of the database, users can still switch to any other theme like Twenty Twenty-Four and get the default WordPress experience without our content.

This also got me thinking about the Add Site form. What if that form had a theme selector? The selector could offer the Playground theme, and default WordPress themes out of the box.

If you select a theme, your selection could be stored and used automatically in the future. If this behavior isn't obvious we could offer the user to save the Add Site settings as default, similarly to how you can check that a new credit card should be used as the default in the future.

We could even store all themes the user used to load Playground and add them to the list, so if for example you test with Storefront a lot, it would appear in that dropdown and you could use it as the default.
The same concept could work with plugins, except that it would need to be a multi-select.

[adamziel]

We're not far from being able to do this. Technically, it's no different than #1524. Once we finish tweaking the website UI and merge a better git support, this should be a matter of moving the content to git and crafting a Blueprint.

[adamziel]

We can now load content from git via a Blueprint. I played with a WP.org clone in Playground here: https://playground.wordpress.net/?import-site=https%3A%2F%2Fraw.githubusercontent.com%2Fadamziel%2Fplayground-sites%2Fmain%2Fwporg-clone%2Fplayground.zip

@akirk what would you put in that dev hub specifically? Developer documentation from Playground? In your mind, does it come with ability to easily contribute to the docs, e.g. by just editing the WordPress pages?

[adamziel]

Poke @akirk

[akirk]

I've played around with this for a bit and it is surprisingly hard to accomplish:

• Embedded images restored from a playground ZIP (via the UI, didn't try from Github) don't work because they have the full (including the old scope) URL set.
• Exporting a default playground TT5 is already 9MB in the ZIP because it includes a couple of fonts. I tried to remove the files and replace them in theme.json but wasn't successful yet.

So, I'm considering if we could use just use a blueprint that will take the media from a ZIP file using an addMedia step, fonts from a ZIP file (an addFonts step I hav yet to create) and generate the posts from a Step Library addPost step.

[adamziel]

The data-liberation importer will solve for rewriting URLs, parallel assets downloading, and even the data storage format (.html or .md). Let's explore that on our call tomorrow