Docs: Explain networking

[flexseth]

Rework wording

Enable Network Access in WordPress Playground

Network access is important, let's enable users to work with the Playground and have access to the 'net

Network access.. denied!

Network access is an experimental, opt-in feature, which means you need to enable it to allow Playground to access the Plugins/Themes directories.

Enabling Network Access in Playground

Expand on documentation page

Network access is an experimental, opt-in feature, which means you need to enable it to allow Playground to access the Plugins/Themes directories.

There are two alternative methods to enable global networking support:

Using the Query API: for example, https://playground.wordpress.net/?networking=yes; or

Using the Blueprint API: add "features": { "networking": true } to the JSON file.

When browsing Playground as a standalone instance, you can enable networking via the settings panel: select the option "Network access (e.g. for browsing plugins)" and hit the "Apply changes" button.

Please note: This option is hidden when browsing Playground as an embedded iframe.

[flexseth]

Rework wording

Enable Network Access in WordPress Playground

Network access denied

Network access is an experimental, opt-in feature, which means you need to enable it to allow Playground to access the Plugins/Themes directories.

• Q: Why is this important - what is network access used for?
• A: Allowing Network Connections gives the Playground instance the ability to talk to the outside world

Playground may want to

• Install a plugin or theme
• import an image from an external
• Use an API or otherwise request data from outside of the server

With Network Connections enabled, it can do this.

---

Enabling Network Access in Playground

Expand on documentation page

Network access is an experimental, opt-in feature, which means you need to enable it to allow Playground to access the Plugins/Themes directories.

Enable Networking via the Query API or Blueprint API

Using the Query API: for example, https://playground.wordpress.net/?networking=yes; or
Using the Blueprint API: add "features": { "networking": true } to the JSON file.

Playground solo

Sometimes you're just looking at an empty playground.

Enable networking via the settings panel

• select the option "Network access (e.g. for browsing plugins)"
• "Apply changes"

Please note: This option is hidden when browsing Playground as an embedded iframe.

• Needs clarification

[ironnysh]

Hi @flexseth, are you suggesting to rewrite the error message or add clarification to the docs and link to it?

[flexseth]

Hi @flexseth, are you suggesting to rewrite the error message or add clarification to the docs and link to it?

I didn't know what networking does in the context of WordPress...

Does it allow your website to download plugins and themes?
What about providing rich embed previews in the post editor?

The idea was to try to determine why a user would need networking enabled in order for Playground to function correctly in their context

Hopefully we could get the information out there before the

• Online Yoast Contributor Day - April 18, 2024 #1185

so there aren't any "Gotchas" anyone runs into when using the Playground

[adamziel]

Does it allow your website to download plugins and themes?
What about providing rich embed previews in the post editor?

That's a great question! Technically, enabling the networking setting allows PHP to make network requests, via wp_safe_remote_get. It is disabled by default because enabling it makes WordPress noticeably slower. AFAIK rich media embeds don't require PHP to make network requests so they should work, but I'm not actually 100% sure. We're discussing ways to enable it by default while retaining the speed in #1225

[ironnysh]

AFAIK rich media embeds don't require PHP to make network requests so they should work, but I'm not actually 100% sure.

Just checked with videos from YT, Vimeo, and WP TV: none work when networking is disabled; WP TV doesn't work at all, due to CORS:

Access to fetch at 'https://public-api.wordpress.com/oembed/?for=https%3A%2F%2Fplayground.wordpress.net%2Fscope%3A0.4533213162660819&maxwidth=600&maxheight=750&url=https%3A%2F%2Fvideopress.com%2Fv%2FeFWm1w5E&dnt=1&format=json' from origin 'https://playground.wordpress.net'
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

[adamziel]

TIL, thank you for checking @ironnysh !

[flexseth]

What does networking do?

Networking allows your WordPress website to securely talk to other sites. This can include embedding video, installing plugins and themes, using APIs to transfer data, and importing content from outside sources.

networking

{    
	"$schema": "https://playground.wordpress.net/blueprint-schema.json",
	"features": {
		"networking": true
	},
	"steps": [
		{
			...
		}
	]
}   

Add networking support to your Playground via a blueprint.

[asirota]

Plugins that call API calls must have CORS support enabled on the APIs they are calling. This should be documented well enough to explain why an API call may fail when running from Playgrounds and what remediation steps should be take in the plugin and/or the API. See this discussion in the Playground slack for a particular use case.

[adamziel]

@asirota would you be up for contributing such an explanation to Playground documentation?

[asirota]

@asirota would you be up for contributing such an explanation to Playground documentation?

I would love to -- we are working on code changes in our WildApricot Press plugin to support this so I may even have some sample code once we fix it. Let me have a go at it.

Where is the github for the docs site?

[adamziel]

@asirota it's in this repo! Specifically, here: https://github.com/WordPress/wordpress-playground/tree/trunk/packages/docs/site

[adamziel]

And here are a few tips how to contribute to that site:

https://wordpress.github.io/wordpress-playground/contributing/documentation