Skip to content

[Web] Enable networking by default in Playground web #2296

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

Merged
merged 13 commits into from
Jun 24, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/docs/site/docs/blueprints/03-data-format.md
Original file line number Diff line number Diff line change
Expand Up @@ -70,12 +70,12 @@ The `preferredVersions` property declares your preferred PHP and WordPress versi

You can use the `features` property to turn on or off certain features of the Playground instance. It can contain the following properties:

- `networking`: Defaults to `false`. Enables or disables the networking support for Playground. If enabled, [`wp_safe_remote_get`](https://developer.wordpress.org/reference/functions/wp_safe_remote_get/) and similar WordPress functions will actually use `fetch()` to make HTTP requests. If disabled, they will immediately fail instead. You will need this property enabled if you want the user to be able to install plugins or themes.
- `networking`: Defaults to `true`. Enables or disables the networking support for Playground. If enabled, [`wp_safe_remote_get`](https://developer.wordpress.org/reference/functions/wp_safe_remote_get/) and similar WordPress functions will actually use `fetch()` to make HTTP requests. If disabled, they will immediately fail instead. You will need this property enabled if you want the user to be able to install plugins or themes.

```js
{
"features": {
"networking": true
"networking": false
},
}
```
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ You can go ahead and try it out. The Playground will automatically install the t
| `php` | `8.0` | Loads the specified PHP version. Accepts `7.0`, `7.1`, `7.2`, `7.3`, `7.4`, `8.0`, `8.1`, `8.2`, `8.3`, `8.4` or `latest`. |
| `wp` | `latest` | Loads the specified WordPress version. Accepts the last three major WordPress versions. As of June 1, 2024, that's `6.3`, `6.4`, or `6.5`. You can also use the generic values `latest`, `nightly`, or `beta`. |
| `blueprint-url` | | The URL of the Blueprint that will be used to configure this Playground instance. |
| `networking` | `no` | Enables or disables the networking support for Playground. Accepts `yes` or `no`. |
| `networking` | `yes` | Enables or disables the networking support for Playground. Accepts `yes` or `no`. |
| `plugin` | | Installs the specified plugin. Use the plugin name from the WordPress Plugins Directory URL. For example, if the URL is `https://wordpress.org/plugins/wp-lazy-loading/`, the plugin name would be `wp-lazy-loading`. You can pre-install multiple plugins by saying `plugin=coblocks&plugin=wp-lazy-loading&…`. Installing a plugin automatically logs the user in as an admin. |
| `theme` | | Installs the specified theme. Use the theme name from the WordPress Themes Directory URL. For example, if the URL is `https://wordpress.org/themes/disco/`, the theme name would be `disco`. Installing a theme automatically logs the user in as an admin. |
| `url` | `/wp-admin/` | Load the specified initial WordPress page in this Playground instance. |
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,4 +24,7 @@ When it comes to networking, WebAssembly programs are limited to calling JavaScr

In Node.js, the answer involves a WebSocket to TCP socket proxy, [Asyncify](https://emscripten.org/docs/porting/asyncify.html), and patching deep PHP internals like php_select. It's complex, but there's a reward. The Node.js-targeted PHP build can request web APIs, install composer packages, and even connect to a MySQL server.

In the browser, networking is supported to a limited extent. Network calls initiated using `wp_safe_remote_get`, like the ones in the plugin directory or the font library, are translated into `fetch()` calls and succeed if the remote server sends the correct CORS headers. However, a full support for arbitrary HTTPS connection involves opening a raw TCP socket which is not possible in the browser. There is an [open GitHub issue](https://github.com/WordPress/wordpress-playground/issues/85) that explores possible ways of addressing this problem.
In the browser, networking is supported in two ways:

- A fast transport for `wp_safe_remote_get` to translate them into `fetch()` calls.
- A slower transport for all other network calls that [parses the TLS transmission](https://github.com/WordPress/wordpress-playground/pull/1926) initiated by PHP and translates it to a `fetch()` call.
2 changes: 0 additions & 2 deletions packages/docs/site/docs/main/about/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,6 @@ The WordPress you see when you open Playground in your browser is a WordPress th

The loading screen and progress bar you see on Playground includes both the streaming of those foundational technologies to your browser and configuration steps from [WordPress Blueprints](/blueprints) (see [examples](/blueprints/examples)), so that a full server, WordPress software, Theme & Plugin solutions and configuration instructions can be streamed over-the-wire.

While many WordPress solutions may require internet connectivity to interact with social networks, live feeds, and other internet services, those connections [could be limited in Playground](/developers/architecture/wasm-php-overview#networking-support-varies-between-platforms). However, by enabling network connectivity in the Customize Playground settings modal [(example URL w/ query parameter)](https://playground.wordpress.net/?networking=yes), you can mostly wire up internet connectivity to WordPress in Playground.

## What makes Playground different from running WordPress on a web server or local desktop app?

Web applications like WordPress have long relied on server technologies [to run logic](/developers/architecture/wasm-php-overview) and [store data](/developers/architecture/wordpress#sqlite).
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -132,12 +132,6 @@ Playground に表示される読み込み画面と進行状況バーには、ブ
The loading screen and progress bar you see on Playground includes both the streaming of those foundational technologies to your browser and configuration steps from [WordPress Blueprints](/blueprints) (see [examples](/blueprints/examples)), so that a full server, WordPress software, Theme & Plugin solutions and configuration instructions can be streamed over-the-wire.
-->

多くの WordPress ソリューションでは、ソーシャルネットワーク、ライブフィード、その他のインターネットサービスと連携するためにインターネット接続が必要になりますが、[Playground ではこれらの接続が制限される可能性があります](/developers/architecture/wasm-php-overview#networking-support-varies-between-platforms)。ただし、Playground のカスタマイズ設定モーダル[クエリパラメータ付き URL の例](https://playground.wordpress.net/?networking=yes)でネットワーク接続を有効にすると、Playground 内で WordPress へのインターネット接続をほぼ確実に確立できます。

<!--
While many WordPress solutions may require internet connectivity to interact with social networks, live feeds, and other internet services, those connections [could be limited in Playground](/developers/architecture/wasm-php-overview#networking-support-varies-between-platforms). However, by enabling network connectivity in the Customize Playground settings modal [(example URL w/ query parameter)](https://playground.wordpress.net/?networking=yes), you can mostly wire up internet connectivity to WordPress in Playground.
-->

## Playground は、Web サーバーまたはローカル デスクトップ アプリで WordPress を実行することと何が違うのでしょうか?

<!--
Expand Down
6 changes: 3 additions & 3 deletions packages/playground/blueprints/src/lib/compile.ts
Original file line number Diff line number Diff line change
Expand Up @@ -322,10 +322,10 @@ function compileBlueprintJson(
wp: blueprint.preferredVersions?.wp || 'latest',
},
features: {
// Disable intl by default
// Disable intl by default to reduce the transfer size
intl: blueprint.features?.intl ?? false,
// Disable networking by default
networking: blueprint.features?.networking ?? false,
// Enable network access by default
networking: blueprint.features?.networking ?? true,
},
extraLibraries: blueprint.extraLibraries || [],
run: async (playground: UniversalPHP) => {
Expand Down
2 changes: 1 addition & 1 deletion packages/playground/remote/src/lib/worker-thread.ts
Original file line number Diff line number Diff line change
Expand Up @@ -178,7 +178,7 @@ export class PlaygroundWorkerEndpoint extends PHPWorker {
phpVersion = '8.0',
sapiName = 'cli',
withICU = false,
withNetworking = false,
withNetworking = true,
shouldInstallWordPress = true,
corsProxyUrl,
}: WorkerBootOptions) {
Expand Down
2 changes: 1 addition & 1 deletion packages/playground/website/cypress/e2e/query-api.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ describe('Query API', () => {

describe('option `networking`', () => {
it('should disable networking when requested', () => {
cy.visit('/?url=/wp-admin/plugin-install.php');
cy.visit('/?networking=no&url=/wp-admin/plugin-install.php');
cy.wordPressDocument()
.find('.notice.error')
.should(
Expand Down
2 changes: 2 additions & 0 deletions packages/playground/website/playwright/e2e/blueprints.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -295,6 +295,7 @@ test('HTTPS requests via curl_exec() should fail when networking is disabled', a
}) => {
const blueprint: Blueprint = {
landingPage: '/curl-test.php',
features: { networking: false },
steps: [
{
step: 'writeFile',
Expand Down Expand Up @@ -372,6 +373,7 @@ test('HTTPS requests via file_get_contents() should fail when networking is disa
}) => {
const blueprint: Blueprint = {
landingPage: '/https-test.php',
features: { networking: false },
steps: [
{
step: 'writeFile',
Expand Down
6 changes: 2 additions & 4 deletions packages/playground/website/playwright/e2e/website-ui.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -168,12 +168,10 @@ Object.keys(MinifiedWordPressVersions)
});
});

test('should display networking as inactive by default', async ({
website,
}) => {
test('should display networking as active by default', async ({ website }) => {
await website.goto('./');
await website.ensureSiteManagerIsOpen();
await expect(website.page.getByLabel('Network access')).not.toBeChecked();
await expect(website.page.getByLabel('Network access')).toBeChecked();
});

test('should display networking as active when networking is enabled', async ({
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -139,11 +139,11 @@ function applyQueryOverrides(
}

/**
* Networking is disabled by default, so we only need to enable it
* if the query param is explicitly set to "yes".
* Networking is enabled by default, so we only need to disable it
* if the query param is explicitly set to something other than "yes".
*/
if (query.get('networking') === 'yes') {
blueprint.features['networking'] = true;
if (query.get('networking') && query.get('networking') !== 'yes') {
blueprint.features['networking'] = false;
}

// Language
Expand Down
Loading