How to use WordPress Playground for handovers

[bph]

Discussed in #245

^{Originally posted by ironnysh April 3, 2024}
After writing an overview of what's possible with Playground for different audiences, I'd like to share a practical example focused on a use case relevant for developers.

The tutorial demonstrates how to work with the JavaScript API to create a live WordPress website developers can share with clients. The project includes:

• A modified theme
• A custom plugin, and
• A snippet that generates a new post (complete with the block markup).

The text is already written :-) See the draft here.

[ironnysh]

✍🏻

[ironnysh]

Welp, the draft is ready for review 😄

[bph]

Good morning, @ironnysh I did a review of the draft and left some comments. We need to slightly change the approach, though as the linking to the ephemeral Vercel space won't work for the official WordPress blog. I'd be happy to get on a call to see how to approach it slightly differently. I don't think it's huge blocker...

[bph]

Now I could envision this: If you turn it around, following a path of enhanced complexity.
Start with blueprint json steps. That goes through the meat of the matter there, with demo how it works using the ?blueprint-url=blueprint.json.

Then I could see that you discuss advantage to to embed the playground into an index.html, as

• do your own styling,
• add additional links and
• add a Call to actions to the space.

Then you share the code for that and create a screenshot and of your demo and leave it at that.
Those who are reading that far would know how to place an index.html and a CSS file into the web and don't need any instructions for that. "It's beyond the scope of this article". (edited)
What do you think?

[ironnysh]

Hey @bph, great idea. Thanks for the review and helpful suggestions :-)

I’ll share the revised version here once it’s ready.

[ironnysh]

Hi @bph, v2 is ready for review (same file)

[bph]

Thanks for the ping @ironnysh I'll take a look at it tomorrow.

[ironnysh]

Hi @bph, the post is ready for its final-final close up :-)

Public preview is here: https://developer.wordpress.org/news/?p=3531&preview=1&_ppp=3c012555ca

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:

Spin a live site with a custom plugin, a theme adapted to feature it, and a user manual—no server needed

[bph]

Published: How to use WordPress Playground for interactive demos

[bph]

@ironnysh congrats for your second article!

Would you do the honors and post the props on Slack and I will take care of the rest of the 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]

Thanks! :-)

• add Props for reviews to #props channel in WP Slack (Example) (use Slack handles)

[juanmaguitar]

Social schedule for May 9th