Introduction/Overview of WordPress Playground

[justintadlock]

Update: This topic has been updated to be more of an introduction or general overview of Playground.

---

Discussed in https://github.com/WordPress/developer-blog-content/discussions/196

^{Originally posted by **justintadlock** January 3, 2024} One of the most painful experiences (at least in my opinion) is managing live demos to showcase your new Wordpress theme to the world. You usually need to set up and maintain a multisite instance for multiple themes. And, it becomes more complex if you want to give potential users access to the admin to actually explore it. It's a headache and management nightmare. What if you didn't need to do all of that? That's where WordPress Playground comes in, especially its Blueprints API: https://wordpress.github.io/wordpress-playground/blueprints-api/index You can easily provide a demo (even multiple demos with their own configurations) by simply providing a blueprint to Playground. My proposal is to write a guide on using Playground to showcase your theme. We have some working examples in the current Block Theme Examples repo (click the links in the README to see how this works): https://github.com/WordPress/block-theme-examples

[adamziel]

@ironnysh one last note, I recently made the kitchen sink bundle the default to reduce general confusion around the PHP extensions:

https://github.com/WordPress/wordpress-playground/pull/1191

It's not a blocker for anything here, but I just wanted to note it.

[bph]

Good morning @ironnysh I made a few more modifications:

"A new post: https://playground.wordpress.net/?theme=blue-note&url=/?page_id=2" -> Opens the Sample Page though. This is the URL to open a new post https://playground.wordpress.net/?theme=blue-note&url=/wp-admin/post-new.php ✅ fixed it.

There is still an external link, that needs to be removed: (If you prefer a more modular solution, try Antonio Sejas’ elegant plugin). ❌ removed it.

What's your reasoning for those examples URL not made as links? ✅ Added links.

Changed the background color for your code details to a less alarming light blue ✅ changed.

The post feels a bit devoid of visuals. Screenshots would help visualize the UI:

Examples

I love the "trippy, M. C. Escher-like way of running WordPress inside WordPress. " image :-) This would be the screenshot for it. ✅ Added the screenshot.

I am unsure about the other two examples. It might make your article feel like it needs to cover the other options/ settings as well. Just wanted to discuss this a bit. Maybe it just reveals a gap in the documentation we need to close.

This is the Additional Actions Menu

The Settings screen

[ironnysh]

That's great news, @adamziel -- Thanks for letting me know :-) I updated the post.

@bph, you're the best, THANK you! :-)

• Visuals: I actually took a few screenshots while writing, but with all the code snippets and notice boxes, I felt that adding images might make the post even "busier" and interrupt the reading flow.

• The Settings UI: the logical place for that would be under Build a site..., but since everything changes so fast (my screenshots are already outdated 🤣), I thought I'd leave it for people to explore on their own.

What do you think? I can quickly add an explanation and the 2-photos gallery if you think it's important.

[bph]

@ironnysh The Build a site part is really the mind-blowing 🤯 and seeing the Additional actions menu might make it more 'tangible' if you know what I mean. Go ahead if you want to add it.

And if you would like to add other screenshots, just remember to add alt-text, too.

[ironnysh]

@bph, I ended up rewriting this whole section :-) What say you?

remember to add alt-text

Always!

[ironnysh]

@bph, I can't close this issue or the accompanying discussion (#196)

Post-publishing checklist

• [x] add Props for reviews to #props channel in WP Slack (Example) (use Slack handles)
• [ ] close the issue with a comment to link to the published post
• [ ] close the accompanying discussion with the link to the published post.

The post was published here: Introduction to Playground: running WordPress in the browser

[bph]

Thanks @ironnysh - Ah right. It's the same issue why you can check the checkboxes in my comments. Not enough privileges. Need to look into it.

[bph]

Social post schedule for April 24.