Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Introduction/Overview of WordPress Playground #198

Closed
justintadlock opened this issue Jan 4, 2024 Discussed in #196 · 58 comments
Closed

Introduction/Overview of WordPress Playground #198

justintadlock opened this issue Jan 4, 2024 Discussed in #196 · 58 comments
Assignees

Comments

@justintadlock
Copy link

justintadlock commented Jan 4, 2024

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
Copy link

ironnysh commented Jan 4, 2024

Excited to start working on this :-)

@justintadlock
Copy link
Author

@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:

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
Copy link

ironnysh commented Jan 4, 2024

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
Copy link
Author

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
Copy link

ironnysh commented Jan 4, 2024

it helps some folks outline

Yup, that's why I asked 😄

@bph bph moved this from To-do to In Progress in Developer Blog Content Board Jan 8, 2024
@justintadlock
Copy link
Author

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
Copy link

Thanks for the heads-up, @justintadlock.

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

@adamziel
Copy link

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
Copy link

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

@bgrgicak
Copy link

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
Copy link

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.

@adamziel
Copy link

adamziel commented Mar 12, 2024

@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
Copy link

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
Copy link

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

@adamziel
Copy link

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
Copy link

PR ready here :-)

adamziel added a commit to WordPress/wordpress-playground that referenced this issue Mar 19, 2024
- Adding the Blueprint recipes from the
[wiki](https://github.com/WordPress/wordpress-playground/wiki/Blueprint-examples#load-php-code-on-every-request-mu-plugin)
to the
[examples](https://wordpress.github.io/wordpress-playground/blueprints-api/examples)
page in the official docs.
- Copying the [demos from the standalone
page](https://playground.wordpress.net/demos/) to the [apps/demos
page](https://wordpress.github.io/wordpress-playground/links-and-resources/#apps-built-with-wordpress-playground).

## What problem is it solving?

Consolidate the examples and demos on the official docs site.

[See the discussion
here](WordPress/developer-blog-content#198 (comment)).

---------

Co-authored-by: Adam Zieliński <[email protected]>
@ironnysh
Copy link

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

@justintadlock
Copy link
Author

@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
Copy link
Member

zzap commented Mar 22, 2024

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
Copy link
Member

ndiego commented Mar 22, 2024

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
Copy link

👋🏼 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”

@bph
Copy link
Collaborator

bph commented Apr 3, 2024

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
Copy link

ironnysh commented Apr 3, 2024

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

@flexseth
Copy link

flexseth commented Apr 3, 2024

@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
Copy link

ironnysh commented Apr 3, 2024

Thanks, @flexseth, I added it to the post

@ironnysh
Copy link

ironnysh commented Apr 3, 2024

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
Copy link
Author

Working on the second review right now...

@justintadlock justintadlock moved this from Needs 2nd review to Done w/ 2nd review in Developer Blog Content Board Apr 3, 2024
@justintadlock
Copy link
Author

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

@ironnysh
Copy link

ironnysh commented Apr 4, 2024

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

@ironnysh
Copy link

ironnysh commented Apr 4, 2024

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

@bph
Copy link
Collaborator

bph commented Apr 4, 2024

@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
Copy link

ironnysh commented Apr 4, 2024

Perfect :-)

@bph
Copy link
Collaborator

bph commented Apr 4, 2024

@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
Copy link

ironnysh commented Apr 4, 2024

@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

@bph bph moved this from Done w/ 2nd review to Ready to publish in Developer Blog Content Board Apr 5, 2024
@adamziel
Copy link

adamziel commented Apr 5, 2024

@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
Copy link
Collaborator

bph commented Apr 5, 2024

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
Screenshot 2024-04-05 at 12 06 23
✅ 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.
Screenshot 2024-04-05 at 11 44 11
✅ 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
Screenshot 2024-04-05 at 11 12 33

The Settings screen
Screenshot 2024-04-05 at 11 12 26

@ironnysh
Copy link

ironnysh commented Apr 5, 2024

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
Copy link
Collaborator

bph commented Apr 5, 2024

@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
Copy link

ironnysh commented Apr 5, 2024

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

remember to add alt-text

Always!

@ironnysh
Copy link

ironnysh commented Apr 5, 2024

@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
Copy link
Collaborator

bph commented Apr 5, 2024

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 bph closed this as completed Apr 5, 2024
@bph bph moved this from Ready to publish to Published (Done) in Developer Blog Content Board Apr 5, 2024
@bph
Copy link
Collaborator

bph commented Apr 12, 2024

Social post schedule for April 24.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Published (Done)
Development

No branches or pull requests

9 participants