search

WordPress / developer-blog-content

In this GitHub space, WordPress team coordinate content to be published on the Developer Blog. Discussion and montly meetings (first Thu) in WP Slack #core-dev-blog
36 stars 2 forks source link

Introduction/Overview of WordPress Playground #198

Closed justintadlock closed 2 months ago

justintadlock commented 6 months ago

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
ironnysh commented 6 months ago

Excited to start working on this :-)

justintadlock commented 6 months ago

@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 commented 6 months ago

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 commented 6 months ago

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 commented 6 months ago

it helps some folks outline

Yup, that's why I asked 😄

justintadlock commented 5 months ago

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: https://github.com/WordPress/block-theme-examples/issues/9#issuecomment-1887453451

ironnysh commented 5 months ago

Thanks for the heads-up, @justintadlock.

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

adamziel commented 4 months ago

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 commented 4 months ago

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

bgrgicak commented 4 months ago

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 commented 3 months ago

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 commented 3 months ago

@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 commented 3 months ago

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 commented 3 months ago

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

adamziel commented 3 months ago

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 commented 3 months ago

PR ready here :-)

ironnysh commented 3 months ago

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

justintadlock commented 3 months ago

@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 commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

👋🏼 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 commented 3 months ago

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 commented 3 months ago

I agree with @zzap, and others. It's a great article. As suggested, we publish this article under "Introduction to Playground - running WordPress without servers" or something like this (wordsmiths step up here!).

This would be a great post to link to from deeper dive into Playground topics.

And we open another issue to cover the topic @justintadlock proposed.

@ironnysh Would that work for you?

I could open an adhock discussion in the core-dev-blog channel to get wider approval.

flexseth commented 3 months ago

Really liking the intro on this one @ironnysh! It reads like a TechCrunch article!

Have you heard about WordPress Alchemy? It’s a serverless version that runs inside the browser and goes by WordPress Playground.

Developed by Adam Zieliński in 2022, this groundbreaking project isn’t alchemy, it’s WebAssembly (WASM).

The same technology used to drive browser-based IDEs is at the core of Playground, supporting Zieliński‘s vision to empower developers, users, learners, extenders, and contributors.

ironnysh commented 3 months ago

Thank you for the kind words and productive comments and suggestions. Can't tell you how much I enjoyed reading through this discussion, and I'm excited to read more use cases!

So yeah, let's split it :-) I rewrote the JavaScript API section and expanded the demo into a tutorial (Part 2). It's in the same doc, just below the Extras.

open another issue

@bph --That'll be great. I'll create a new doc with the tutorial and link it there.

Would it be okay to reuse parts of it in developer resources?

@adamziel --(super) Fine by me. @bph & @justintadlock, is it okay?

ironnysh commented 3 months ago

@adamziel, I left you two follow-up questions in the doc.

BTW, @flexseth found a bug :-) see here.

flexseth commented 3 months ago

Would it be okay to reuse parts of it in developer resources?

@ironnysh - There is a master tracking issue for the documentation overhaul.

Put in some work yesterday and today... consolidating all of the bullet points in this article into (most likely) pages with TOC's.

The notes basically fall into a couple of categories for docs:

I will make it a point to get that together today, so everyone can see what correlates, is already written, and so we can discuss a plan for who can pick up work on what. If that works!

pinging @adamziel for visibility to let him know I'm working on the docs consolidation yesterday and today.

Should have a good working draft up this evening that shows links

That way there shouldn't be much overlap in what folks are working on!

Screenshot below is how I'm marking the content up internally, stay tuned!

image
flexseth commented 3 months ago

Somewhat related to this post: I was wondering if there has been any benchmark testing done for the playground? It seems like there's a decent bit that goes on behind the scenes when it loads up, and I'm just thinking if hundreds of people were to go to a single domain at once (ie from the dev blog post to the demo)..

When the post is published it goes out to the Slack, Developer Blog, Subscribers... anyone syndicating automatically from the dev blog... it might be helpful to set up Varnish or some type of load balancing measures before publishing?

Just a thought. Worked with a popular music site a while back and their site would go down when they hit the front page of the music subreddit, wanting to make sure that experience didn't happen when trying to promote the Playground. :)

justintadlock commented 3 months ago

I've split the two topics based on everyone's feedback. Let's keep this one as the overview/intro to Playground to not lose the discussion. For the theme demo topic, I've split it to #244.

ironnysh commented 3 months ago

Thanks, @justintadlock!

I rewrote the JavaScript API section and expanded the demo into a tutorial (see Part 2). It's in the same doc, just below the Extras.

Shall I add this to #244?

ironnysh commented 3 months ago

@bph, @justintadlock --All comments resolved. The text is ready for the second review.

adamziel commented 3 months ago

I left a few more comments but it looks great otherwise – thank you SO MUCH for writing this @ironnysh!

ironnysh commented 3 months ago

Great, thanks, @adamziel! One fixed, only one left to resolve :-)

Thank you for creating Playground ;-)

bph commented 3 months ago

@ironnysh I did another look at apart from one link, and one correction. With all the comment I wasn't clear if you started a new document or if the one I already review was still the one you were working on. I went to this document and read to the bookmark which seemed to be the natural end of an Overview post. Please ping me, if you need me to go some place else for the second review.

Also I added you as an author to the Dev Blog ' `Invitation email sent to user. A confirmation link must be clicked for them to be added to your site."

Once you are ready to post to the blog, please let me know and I'll share our checklist with you.

ironnysh commented 3 months ago

Hi @bph, great, thank you!

Yes, this is the same doc you reviewed before—I rewrote the closing paragraph and moved the whole demo to Part 2.

Two questions:

  1. Would it be possible to display the <iframe> here as a Playground Block?
  2. What's the best way to include the extras? Is there an <aside> block I can use?
bph commented 3 months ago

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 commented 3 months ago

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.

Image

bph commented 3 months ago

For your reference....

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

Post-publishing checklist

ironnysh commented 3 months ago

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

flexseth commented 3 months ago

@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 commented 3 months ago

Thanks, @flexseth, I added it to the post

ironnysh commented 3 months ago

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 commented 3 months ago

Working on the second review right now...

justintadlock commented 3 months ago

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

ironnysh commented 2 months ago

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

ironnysh commented 2 months ago

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

bph commented 2 months ago

@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

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

ironnysh commented 2 months ago

Perfect :-)

bph commented 2 months ago

@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-publishing checklist

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 commented 2 months ago

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

  • [x] Post Title and subheaders in sentence case
  • [x] Are Category or Categories selected?
  • [x] Are Tags identifies?
  • [x] Is there an explicit Excerpt?
  • [x] Are all images files uploaded to the media library
  • [x] Do all images have an alt-text?
  • [x] For TOC us the Pattern under Developer Blog > Table of contents
  • [x] Assign or upload a featured image
  • [x] Props added? (See Guidelines)
  • [x] 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