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 #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

[ironnysh]

Excited to start working on this :-)

[justintadlock]

@ironnysh - Thanks for taking this on. I'm excited to see what you come up with. Feel free to ask me for any help or anyone from the #core-dev-blog Slack channel about getting started.

Here's a list with important links for contributing:

• https://developer.wordpress.org/news/how-to-contribute/
• https://developer.wordpress.org/news/tips-and-guidelines-for-writers/

The biggest thing is to put your draft (when you start it) in a Google Doc that has open comments/suggestions and leave the link to it here. The review process will happen within the doc.

[ironnysh]

Awesome, thank you @justintadlock!
I already have a question 🙂 Is there a recommended/average word count for this type of post, which would probably include code snippets?

[justintadlock]

There's no required/recommended word count.

For reference, the average word count of all posts on the Dev Blog from 2023 was ~1,800 words. But, again, this is not something we really look at, so don't think of that as some sort of goal. I only share because I know it helps some folks outline or visualize their plans for a post.

[ironnysh]

it helps some folks outline

Yup, that's why I asked 😄

[justintadlock]

Just a quick note that if you run into any issues when using add_editor_style() in the example code, we ran into an issue that requires enabling networking for Playground for those styles to load correctly.

Here's how to turn it on: WordPress/block-theme-examples#9 (comment)

[ironnysh]

Thanks for the heads-up, @justintadlock.

I had a little adventure with the networking feature a few days ago :-)

[adamziel]

I’d just make sure the article mentions the Blueprints v2 proposal. It would be a really nice progression to have – here’s the existing API, here’s what it can do, go and play with it, and if you’ll struggle to do anything we are designing the next version right now and would really want to hear from you and shape it together.

[adamziel]

Also, I wanted to surface this Blueprint examples wiki page created by @bgrgicak

[bgrgicak]

Also, I wanted to surface this Blueprint examples wiki page created by @bgrgicak

I'm not happy with the format, but it's simple to add blueprints. Longterm we should invest some time in making it look better.

[ironnysh]

Thanks for the links, @adamziel!

@bgrgicak, is this wiki page meant to be used to showcase "community recipes"? I'm asking because I found a few more similar pages across the project, and it might be easier to consolidate them instead of maintaining another source.

• There's the examples page on the official docs
• A standalone demos page
• And a few more apps/demos here.

[adamziel]

@ironnysh these examples are all over the place right now. I'd love to consolidate them. The wiki page is there because we've noticed the friction involved in adding new doc pages using Pull Requests prevents us from opportunistic actions like "this Blueprint I've built is cool, let's quickly share it somewhere". Ideally, publishing those would be easy and encourage contributions. The upcoming Blueprints community space could be an opportunity to tie it all together.

[ironnysh]

Right, got it. The community space sounds like a perfect fit, but I guess it'll take a while to build and launch. I was hoping to have a single source I can link to from the post 😀

Oh, and off-topic: I found this demo a few days ago

[ironnysh]

BTW, if it helps, I'd be happy to open a quick PR:

• Adding the recipes from the WIki to examples.
• Copying the demos from the standalone page to the apps/demos page.

[adamziel]

The community space sounds like a perfect fit, but I guess it'll take a while to build and launch

Actually, v1 might be just a GitHub repository to launch it without months of design of development. I'm exploring one here and developer materials are the largest blocker there.

Oh, and off-topic: I found this demo a few days ago

This is lovely, thank you so much for sharing!

BTW, if it helps, I'd be happy to open a quick PR:

Yes please! Thank you!

[ironnysh]

PR ready here :-)

[ironnysh]

Draft ready for review: https://docs.google.com/document/d/135Y73OQE8qo60pBE6gAc4QIxNvpJ5MNynDg1-HgdHtI/edit

[justintadlock]

@ironnysh First, I just want to say thank you for taking on this topic. What you have is written well, but I expected that after having read some of your other work. :)

My biggest concern right now is that the tutorial tries to cover too much ground, which means that it never really dives deeply enough and focuses on a specific thing. The goal of this topic was supposed to walk theme authors through creating a theme demo with Playground. And I feel like we've missed that mark. Right now, this is a more general overview of what you can do with Playground.

That does leave me questioning whether we should either:

1. Pursue this as a different topic altogether that's more general usage of Playground or
2. Try to rework the current draft to cover the proposed topic of walking through creating a theme demo

Before moving forward with reviews, I'd want us to get some clarity around this to make sure we're all on the same page. I'd also like to hear your thoughts about which path you'd prefer.

I believe either option is OK, but if we go with option 1, we should split these topics so that the original isn't closed. It'd still be great to have a step-by-step walkthrough of creating a theme demo.

[zzap]

I reviewed the article and wanted to leave the same comment as @justintadlock above (luckily, I read all the comments as well).

My thought is: keep this article as is (just change the title) - it's very informative and easy to follow. I think it's important to have this in our blog. Follow up with shorter article (that needs no explaining what the Playground is because we already have that) with specific usecase - building theme demo (link to previous article for more context).

This way, we could have many followups concentrating on only specific usecases while broader explanations are already covered.

[ndiego]

I've been exploring some other interesting applications for blueprints that would be a good (shorter) follow-up to a more general article about Playground.

[annezazu]

👋🏼 Chiming in here to support a more general article about playground, along with different use cases in hopes that it might be something the broader dev community can start giving feedback on and using, along with meetup organizers as this could really be game changing. I was about to propose an article on the developer blog around using playground with the following in mind but it seems like this would cover it nicely.

“Imagine creating effortless presentations, workshops, demos, and more that will create an interactive learning environment”

[adamziel]

This is fantastic and well researched. This article will have a lasting impact – thank you so, so much @ironnysh! It's written so well ❤️ Would it be okay to reuse parts of it in developer resources? It would be super helpful especially for onboarding people to Blueprints and the Blueprints community space.

Also, I left some comments inline in places that stood out to me.

[bph]

As mentioned in the comment The iframe won't work on the Dev Blog. I tested it last month. Nothing has changed since then. There are security implications, that strip out the iframe. But that's ok, if you want to show off the plugin you can create a blueprint and create a link button in the blog post.

Extras: If you take the Extra line out, and move both the paragraph about the plugin and the site building into your post before the "Playground in the field" paragraph above the "Stay tuned". They are both in the realm of the JavaScript API and still in testing...

[bph]

Hi @ironnysh I see that you are already posting your article to the Dev Blog. Please "Enable Public Preview" and share the link in a comment here. so the review for the second review can do it on the blog post.

[bph]

For your reference....

Pre-publishing checklist: (updated 1/29/2024)

• Post Title and subheaders in sentence case
• Are Category or Categories selected?
• Are Tags identifies?
• Is there an explicit Excerpt?
• Are all images files uploaded to the media library
• Do all images have an alt-text?
• For TOC us the Pattern under Developer Blog > Table of contents
• Assign or upload a featured image
• Props added? (See Guidelines)
• add copy for a social post as comment to this issue (example)
  🙌 Publish! 📗

Post-publishing checklist

• 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.

[ironnysh]

@bph, all done. Here's the link to the preview: https://developer.wordpress.org/news/?p=3309&preview=1&_ppp=6161ec285a.

[flexseth]

@bph, all done. Here's the link to the preview: https://developer.wordpress.org/news/?p=3309&preview=1&_ppp=6161ec285a.

Sorry for just getting to this @ironnysh, but I made a comment in the Google Doc draft about using the kitchen-sink and how it's important for editing media... dunno if it's too late to get in. Limitation I just stumbled upon

[ironnysh]

Thanks, @flexseth, I added it to the post

[ironnysh]

Social copy:

No setup, no download—WordPress Playground lets you spin a website in a few seconds. Here's everything you need to know to get started

[justintadlock]

Working on the second review right now...

[justintadlock]

@ironnysh - I left a few minor comments in the Google Doc, but everything looks good to me. Really great writing!

[ironnysh]

Thanks, @justintadlock! :-)
Fixed 'em all (in the doc and the post).

[ironnysh]

@bph, are there guidelines for the featured image? I uploaded a file, but wanted to double-check (dimensions, file size, format, etc.).

[bph]

@ironnysh Handling of the featured image has been quite fluid in the last couple of months.

I create mine via Google Slides and you can see my examples there.. If it helps, feel free to make a copy.

The purpose of the featured image is for visual support on sharing on the Social webs.
Examples: on X or also on X

• dimensions: 1050 x 600
• background: Black
• Text: Title of the post in white (optional)
• Screenshot or code view as visual anchor.
• Filesize: the smaller the better, use your image compression settings generously...

These are just my personal choices. We haven't settled on a standard format yet.

[ironnysh]

Perfect :-)

[bph]

@ironnysh Seems we are really close to publishing your article! 🙌🏻

As this is your first article on the developer blog, I'll share the checklist with you:

Pre-publishing checklist: (updated 1/29/2024)

• Post Title and subheaders in sentence case
• Are Category or Categories selected?
• Are Tags identifies?
• Is there an explicit Excerpt?
• Are all images files uploaded to the media library
• Do all images have an alt-text?
• For TOC us the Pattern under Developer Blog > Table of contents
• Assign or upload a featured image
• Props added? (See Guidelines)
• add copy for a social post as comment to this issue (example)
  🙌 Publish! 📗

Post-publishing checklist

• 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.

Please notify me when you are through the pre-publish list or if you have questions. I'll double-check and will publish the article..

[ironnysh]

@bph, all done 🥳

The post is here: https://developer.wordpress.org/news/?p=3309&preview=1&_ppp=6161ec285a

Pre-publishing checklist: (updated 1/29/2024)

• Post Title and subheaders in sentence case
• Are Category or Categories selected?
• Are Tags identifies?
• Is there an explicit Excerpt?
• Are all images files uploaded to the media library
• Do all images have an alt-text?
• For TOC us the Pattern under Developer Blog > Table of contents
• Assign or upload a featured image
• Props added? (See Guidelines)
• Add copy for a social post as comment to this issue (example)

Social copy:

No setup, no download—WordPress Playground lets you spin a website in a few seconds. Here's everything you need to know to get started

[adamziel]

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

WordPress/wordpress-playground#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

• 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.