Playground Documentation latest update #2175

karthick-murugan · 2025-03-28T06:29:14Z

Fixes the playground documentation outdated content mentioned in this issue #2168

Pull Request Summary

This PR updates the WordPress Playground Web Instance documentation to reflect the latest UI changes and features. The previous documentation contained outdated screenshots and descriptions, which have been updated with the most recent UI elements, including the relocation of Playground options to the Playground Manager.

karthick-murugan · 2025-03-31T06:38:40Z

@bgrgicak - Please have a look at this PR and let me know your feedback. Thanks in advance.

.github/workflows/ci.yml

bgrgicak · 2025-03-31T06:46:55Z

packages/docs/site/docs/main/web-instance.md


-You need to activate "Network access" to be able to browse for [plugins](https://w.org/plugins) and [themes](https://w.org/themes) from your WordPress instance.


This tip is important and we should include it in the new documentation.

bgrgicak · 2025-03-31T06:49:12Z

packages/docs/site/docs/main/web-instance.md

@@ -15,51 +15,96 @@ Some key features:

 Via [Query Params](/developers/apis/query-api/) we can directly load in the Playground instance things such as a specific version of WordPress, a theme, a plugin or a more complex setup via blueprints (check [here](/quick-start-guide#try-a-block-a-theme-or-a-plugin) some examples).

-From the Playground website there are also available some toolbars to customize your playground instance and to provide quick access to some resources and utilities.
+WordPress Playground is a browser-based environment that allows users to run WordPress instantly without installation. It is useful for testing, debugging, and exploring WordPress features.


Is this part needed? It's content is very similar to what we have on line 8 of this file.

bgrgicak

Thank you @karthick-murugan for starting this documentation page update, it's been outdated for a while.

@adamziel @bph could you please also share your feedback?

karthick-murugan · 2025-03-31T07:40:22Z

@bgrgicak - Does the php version change back to 8.1 triggered this error? Do you have some ideas regarding this error?

bph

@karthick-murugan Thank you so much for putting this together!
I am not sure how much time you'd like to invest into working on this a little further. I would suggest a slight rewrite of the documentation changes:

The Playground screen actually has four parts:
Left site, middle section and site display + Adress bar.

The other two items, you mentioned are auxiliary menus used to get out of the full screen view again.

Left Navigation

The left site lets you control the overall playground browser instance.

The notes are missing

mentioning that you can save more than once site in this instance.
The four resources links on the bottom
-- Preview WordPress PR
-- More demos
-- Documentation
-- GitHub
and the three dot menu with the additional features.
-- Preview WordPress PR
-- Preview Gutenberg PR
-- Import from GitHub
-- Import from Zip

The mention of the submenus can certainly be left for a future PR.

Middle Section

The middle section the current site, if you only have one site, it's the default site called Temporary Playground. If you have more than one site saved, it changes according to the sites, selected from the left site.
The right page, displays the current site and automatically goes full screen when selected.

I would use the current Playground Settings explanation and move them to the middle section. They are also not the overall playground settings, but the settings for the active site selected.

There is more explanation necessary to put "Temporary Playground" into context. It is the first site, or default site. It's not a UI name as that changes with there are more than one site stored in the playground.

Site View

Full screen display of the site
Use either the left or the right icon to get back to the other sections of the playground instance.

packages/docs/site/docs/main/web-instance.md

bph

@karthick-murugan Thanks for all the changes to make it more comprehensive. That's awesome!

On line 10 the file reads "Some key features:"
I would think that Key Features is already a selective term and doesn't the "some" quantifier. If you want to add a qualifier, it could be "Main key features", though

(I tried to comment inline, but there wasn't a way to add a comment)

bph · 2025-03-31T12:16:36Z

packages/docs/site/docs/main/_assets/Middle_Section.png

Do we still need this file?

@bph I thought to add individual screenshots of each section and that why added it. I will remove it now and update it.

karthick-murugan · 2025-03-31T12:30:21Z

@bgrgicak - Does the php version change back to 8.1 triggered this error? Do you have some ideas regarding this error?

@bph - Could you provide insights on resolving this linting error?

bph · 2025-03-31T12:31:11Z

Also, I am unsure if it's possible to headline the three panes better, instead of calling them "Left Navigation" or "Middle section" :-)

@karthick-murugan @brandonpayton @bgrgicak What do you think? Any better ideas?

bph · 2025-03-31T12:33:37Z

Could you provide insights on resolving this linting error?

Hmm, I am sorry, I am not familiar with the CI checks. That's more a @bgrgicak or @adamziel question.

karthick-murugan · 2025-03-31T12:55:00Z

Also, I am unsure if it's possible to headline the three panes better, instead of calling them "Left Navigation" or "Middle section" :-)

Site Explorer (instead of Left Navigation)
Workspace & Settings (instead of Middle Section)
Live Site Preview (instead of Site View)
Address Bar ( can be same )

My suggestion.

bph · 2025-04-01T16:32:09Z

Site Explorer (instead of Left Navigation)
Workspace & Settings (instead of Middle Section)
Live Site Preview (instead of Site View)

Excellent Suggestions @karthick-murugan 🎉 👏
I would leave off the "Live" from the "Site Preview" - it doesn't seem to add any value...

karthick-murugan · 2025-04-01T17:39:50Z

@bph All changes are updated.

bph

I feel some of the image take an awful big amount of space, with little value, especially the Site-Explorer. I tried to figure out how to control the image sizes in Docusaurus, unsuccessfully. But other image would also be better with smaller sizes...
For now, all I can think of is to resize the images offline and upload the smaller sizes.

@karthick-murugan @bgrgicak What do you think?

bph · 2025-04-02T12:37:39Z

With the help of @juanmaguitar I figured it out:

If you are up for it, @karthick-murugan, you can use a different way to control the size of the image, so they don't take so much space.

An example code looks like this:

import Image from '@theme/IdealImage';
import customizePlaygroundScreenshot from '@site/static/img/customize-playground.png';

<div style={{maxWidth:200}}><Image img={customizePlaygroundScreenshot} /></div>

This snippet from here
Steps:

Move the image in /packages/docs/site/static/img folder
Import the special image component from Docusaurus
Import the specific image file
Displays that image with a maximum width of 200 pixels using the special Docusaurus image component

What do you think? Would you be up for it?

PS: I also published detailed explanations

karthick-murugan · 2025-04-02T12:50:34Z

I feel some of the image take an awful big amount of space, with little value, especially the Site-Explorer. I tried to figure out how to control the image sizes in Docusaurus, unsuccessfully. But other image would also be better with smaller sizes... For now, all I can think of is to resize the images offline and upload the smaller sizes.

@karthick-murugan @bgrgicak What do you think?

@bph - I have updated the screenshot sizes. Please check if it will work for us.

bph · 2025-04-02T16:36:09Z

The two images feel much too big. I think, the problem is the fluid design of Docusaurus.

Screenshots on the desktop preview..

This Image has a size of 869x736

This one has an size of 900 x 830

A user had to scroll two full pages to get to the rest of the text, which doesn't seem to be a good experience.

karthick-murugan · 2025-04-02T16:51:53Z

The two images feel much too big. I think, the problem is the fluid design of Docusaurus.

@bph Updated the screenshots. Please have a look.

bph · 2025-04-08T12:30:56Z

@bgrgicak I'll take a look again, tomorrow. Please see if the failing test ⁣CI / Lint and test PHP (pull_request) can be solved.

karthick-murugan · 2025-04-08T15:00:33Z

@bgrgicak I'll take a look again, tomorrow. Please see if the failing test ⁣CI / Lint and test PHP (pull_request) can be solved.

Thank you @bph. I think CI Pipeline error can be ignored since the PHP files are to be relocated anyway as per @adamziel mentioned here #2179 (comment)

bgrgicak · 2025-04-09T06:35:00Z

@bgrgicak I'll take a look again, tomorrow. Please see if the failing test ⁣CI / Lint and test PHP (pull_request) can be solved.

Until we fix the tests we can run npm run lint locally during the review to ensure there are no linter errors.
@karthick-murugan and I can do that for this PR, so @bph can focus on the content changes.

I ran npm run lint locally and there are currently no lint errors in this PR. ✅

adamziel · 2025-04-09T18:13:32Z

The PHP linting failure can be safely ignored. I just removed that check entirely in trunk. We should remove the entire PHP module from this repo – it won't be developed here as the entire setup is quite cumbersome.

bph

So much better now. Thank you, @karthick-murugan - It's now in a stage that could be merged

karthick-murugan · 2025-04-10T12:43:20Z

So much better now. Thank you, @karthick-murugan - It's now in a stage that could be merged

Thank you @bph

github-project-automation bot added this to Playground Board Mar 28, 2025

github-project-automation bot moved this to Inbox in Playground Board Mar 28, 2025

karthick-murugan force-pushed the playground/docs-update branch 2 times, most recently from e077404 to cbabf45 Compare March 31, 2025 05:41

bgrgicak reviewed Mar 31, 2025

View reviewed changes

.github/workflows/ci.yml Outdated Show resolved Hide resolved

bgrgicak reviewed Mar 31, 2025

View reviewed changes

bgrgicak requested review from bph and adamziel March 31, 2025 06:50

bph reviewed Mar 31, 2025

View reviewed changes

packages/docs/site/docs/main/web-instance.md Outdated Show resolved Hide resolved

packages/docs/site/docs/main/web-instance.md Show resolved Hide resolved

karthick-murugan added 4 commits March 31, 2025 17:18

Playground Documentation latest update

0ca28b9

Php version 8.2 update

00463e0

Saving changes before rebase

e38e266

Feedback content updates

c116e74

karthick-murugan force-pushed the playground/docs-update branch from 3960331 to c116e74 Compare March 31, 2025 11:48

bph reviewed Mar 31, 2025

View reviewed changes

Feedback content updates

b9860cb

karthick-murugan and others added 3 commits April 1, 2025 22:34

Section Titles updated

73cfebc

Merge branch 'trunk' into playground/docs-update

8f11899

Screenshot Updated

ab7ccc5

bph reviewed Apr 2, 2025

View reviewed changes

karthick-murugan and others added 2 commits April 2, 2025 18:17

Updating the screenshots

e080ff5

Merge branch 'trunk' into playground/docs-update

3af12b8

Reduce image size

eba95b5

bgrgicak requested a review from bph April 7, 2025 08:07

bph approved these changes Apr 10, 2025

View reviewed changes

github-project-automation bot moved this from Inbox to Reviewed in Playground Board Apr 10, 2025

bph self-requested a review April 10, 2025 12:43

brandonpayton merged commit ea8f6f6 into WordPress:trunk Apr 11, 2025
9 of 10 checks passed

github-project-automation bot moved this from Reviewed to Done in Playground Board Apr 11, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Playground Documentation latest update #2175

Playground Documentation latest update #2175

karthick-murugan commented Mar 28, 2025

karthick-murugan commented Mar 31, 2025

bgrgicak Mar 31, 2025

karthick-murugan Mar 31, 2025

bgrgicak Mar 31, 2025

karthick-murugan Mar 31, 2025

bgrgicak left a comment

karthick-murugan commented Mar 31, 2025

bph left a comment •

edited

Loading

bph left a comment •

edited

Loading

bph Mar 31, 2025

karthick-murugan Mar 31, 2025

karthick-murugan Mar 31, 2025

karthick-murugan commented Mar 31, 2025

bph commented Mar 31, 2025 •

edited

Loading

bph commented Mar 31, 2025 •

edited

Loading

karthick-murugan commented Mar 31, 2025

bph commented Apr 1, 2025

karthick-murugan commented Apr 1, 2025

bph left a comment

bph commented Apr 2, 2025 •

edited

Loading

karthick-murugan commented Apr 2, 2025

bph commented Apr 2, 2025 •

edited

Loading

karthick-murugan commented Apr 2, 2025

bph commented Apr 8, 2025

karthick-murugan commented Apr 8, 2025

bgrgicak commented Apr 9, 2025

adamziel commented Apr 9, 2025 •

edited

Loading

bph left a comment

karthick-murugan commented Apr 10, 2025


		You need to activate "Network access" to be able to browse for [plugins](https://w.org/plugins) and [themes](https://w.org/themes) from your WordPress instance.

Playground Documentation latest update #2175

Playground Documentation latest update #2175

Conversation

karthick-murugan commented Mar 28, 2025

karthick-murugan commented Mar 31, 2025

bgrgicak Mar 31, 2025

Choose a reason for hiding this comment

karthick-murugan Mar 31, 2025

Choose a reason for hiding this comment

bgrgicak Mar 31, 2025

Choose a reason for hiding this comment

karthick-murugan Mar 31, 2025

Choose a reason for hiding this comment

bgrgicak left a comment

Choose a reason for hiding this comment

karthick-murugan commented Mar 31, 2025

bph left a comment • edited Loading

Choose a reason for hiding this comment

Left Navigation

Middle Section

Site View

bph left a comment • edited Loading

Choose a reason for hiding this comment

bph Mar 31, 2025

Choose a reason for hiding this comment

karthick-murugan Mar 31, 2025

Choose a reason for hiding this comment

karthick-murugan Mar 31, 2025

Choose a reason for hiding this comment

karthick-murugan commented Mar 31, 2025

bph commented Mar 31, 2025 • edited Loading

bph commented Mar 31, 2025 • edited Loading

karthick-murugan commented Mar 31, 2025

bph commented Apr 1, 2025

karthick-murugan commented Apr 1, 2025

bph left a comment

Choose a reason for hiding this comment

bph commented Apr 2, 2025 • edited Loading

karthick-murugan commented Apr 2, 2025

bph commented Apr 2, 2025 • edited Loading

karthick-murugan commented Apr 2, 2025

bph commented Apr 8, 2025

karthick-murugan commented Apr 8, 2025

bgrgicak commented Apr 9, 2025

adamziel commented Apr 9, 2025 • edited Loading

bph left a comment

Choose a reason for hiding this comment

karthick-murugan commented Apr 10, 2025

bph left a comment •

edited

Loading

bph left a comment •

edited

Loading

bph commented Mar 31, 2025 •

edited

Loading

bph commented Mar 31, 2025 •

edited

Loading

bph commented Apr 2, 2025 •

edited

Loading

bph commented Apr 2, 2025 •

edited

Loading

adamziel commented Apr 9, 2025 •

edited

Loading