From 8832bfcee243e0e4ed318d8e22473936c004309a Mon Sep 17 00:00:00 2001 From: Fellyph Cintra Date: Wed, 13 May 2026 15:43:52 +0100 Subject: [PATCH 1/3] Migrate docs callouts and cleanup translations --- .../docs/blueprints/02-using-blueprints.md | 14 +- .../docs/site/docs/blueprints/04-resources.md | 4 +- .../docs/site/docs/blueprints/05-steps.md | 14 +- .../07-json-api-and-function-api.md | 10 +- .../docs/site/docs/blueprints/08-examples.md | 14 +- .../09-troubleshoot-and-debug-blueprints.md | 26 +- packages/docs/site/docs/blueprints/intro.md | 32 +- ...re-blueprints-what-you-can-do-with-them.md | 8 +- .../tutorial/03-build-your-first-blueprint.md | 16 +- .../site/docs/blueprints/tutorial/index.md | 8 +- .../developers/03-build-an-app/01-index.md | 16 +- .../05-local-development/01-wp-now.md | 10 +- .../02-vscode-extension.md | 2 +- .../04-wp-playground-cli.md | 6 +- .../site/docs/developers/06-apis/01-index.md | 14 +- .../06-apis/javascript-api/01-index.md | 2 +- .../developers/06-apis/query-api/01-index.md | 2 +- .../10-browser-iframe-rendering.md | 2 +- .../18-host-your-own-playground.md | 2 +- .../developers/24-limitations/01-index.md | 6 +- packages/docs/site/docs/main/about/index.md | 14 +- packages/docs/site/docs/main/about/launch.md | 2 +- .../docs/site/docs/main/contributing/code.md | 8 +- .../docs/main/contributing/contributor-day.md | 2 +- .../docs/main/contributing/translations.md | 4 +- .../guides/e2e-testing-with-playwright.md | 48 ++- .../docs/main/guides/for-plugin-developers.md | 34 +- .../docs/main/guides/for-theme-developers.md | 37 ++- .../main/guides/github-action-pr-preview.md | 26 +- .../site/docs/main/guides/phpunit-testing.md | 6 +- .../main/guides/playground-for-everyone.md | 8 +- .../guides/providing-content-for-your-demo.md | 6 +- packages/docs/site/docs/main/intro.md | 11 +- packages/docs/site/docs/main/resources.md | 5 +- packages/docs/site/docs/main/web-instance.md | 7 +- .../current/blueprints/02-using-blueprints.md | 22 +- .../current/blueprints/05-steps.md | 22 +- ...re-blueprints-what-you-can-do-with-them.md | 8 +- .../tutorial/03-build-your-first-blueprint.md | 26 +- .../current/blueprints/tutorial/index.md | 16 +- .../current/main/about/build.md | 8 +- .../current/main/about/index.md | 22 +- .../current/main/about/launch.md | 16 +- .../current/main/contributing/code.md | 26 +- .../main/contributing/contributor-day.md | 26 +- .../current/main/contributing/translations.md | 56 ++-- .../main/guides/for-plugin-developers.md | 66 ++-- .../main/guides/playground-for-everyone.md | 32 +- .../guides/providing-content-for-your-demo.md | 16 +- .../current/main/intro.md | 37 ++- .../current/main/quick-start-guide.md | 36 ++- .../current/main/resources.md | 10 +- .../current/main/web-instance.md | 13 +- .../current/blueprints/02-using-blueprints.md | 20 +- .../current/blueprints/08-examples.md | 22 +- .../09-troubleshoot-and-debug-blueprints.md | 32 +- .../developers/03-build-an-app/01-index.md | 16 +- .../04-wp-playground-cli.md | 24 +- .../developers/06-apis/query-api/01-index.md | 4 +- .../18-host-your-own-playground.md | 2 +- .../developers/24-limitations/01-index.md | 6 +- .../current/main/about/build.md | 4 +- .../current/main/contributing/code.md | 12 +- .../main/contributing/contributor-day.md | 30 +- .../current/main/contributing/translations.md | 38 ++- .../guides/e2e-testing-with-playwright.md | 105 ++++-- .../main/guides/for-plugin-developers.md | 90 +++--- .../main/guides/playground-for-everyone.md | 24 +- .../current/main/intro.md | 26 +- .../current/main/quick-start-guide.md | 12 +- .../current/main/resources.md | 10 +- .../current/main/web-instance.md | 14 +- .../current/blueprints/02-using-blueprints.md | 20 +- .../current/blueprints/08-examples.md | 24 +- .../09-troubleshoot-and-debug-blueprints.md | 32 +- .../tutorial/03-build-your-first-blueprint.md | 18 +- .../current/blueprints/tutorial/index.md | 10 +- .../developers/03-build-an-app/01-index.md | 10 +- .../developers/06-apis/query-api/01-index.md | 4 +- .../18-host-your-own-playground.md | 2 +- .../developers/24-limitations/01-index.md | 6 +- .../current/main/about/index.md | 53 +++- .../current/main/about/launch.md | 2 +- .../current/main/contributing/translations.md | 32 +- .../guides/e2e-testing-with-playwright.md | 105 ++++-- .../current/main/guides/index.md | 8 +- .../main/guides/playground-for-everyone.md | 24 +- .../current/main/intro.md | 41 +-- .../current/main/resources.md | 5 +- .../current/blueprints/01-index.md | 300 +++++++++--------- .../07-json-api-and-function-api.md | 27 +- .../current/blueprints/intro.md | 204 ++++++------ ...re-blueprints-what-you-can-do-with-them.md | 23 +- .../current/blueprints/tutorial/index.md | 16 +- .../05-local-development/01-wp-now.md | 26 +- .../02-vscode-extension.md | 10 +- .../05-local-development/03-php-wasm-node.md | 10 +- .../current/main/about/build.md | 4 +- .../current/main/about/index.md | 14 +- .../current/main/about/launch.md | 10 +- .../current/main/contributing/code.md | 14 +- .../main/contributing/contributor-day.md | 4 +- .../main/guides/agent-skill-wp-playground.md | 66 ++-- .../main/guides/for-plugin-developers.md | 34 +- .../current/main/intro.md | 10 +- .../current/main/resources.md | 113 +++---- .../current/main/web-instance.md | 14 +- .../current/main/intro.md | 37 ++- .../current/main/contributing/code.md | 16 +- .../main/contributing/contributor-day.md | 10 +- .../current/main/contributing/translations.md | 32 +- .../current/blueprints/02-using-blueprints.md | 36 ++- .../current/blueprints/04-resources.md | 30 +- .../current/blueprints/05-steps-shorthands.md | 6 +- .../current/blueprints/05-steps.md | 22 +- .../07-json-api-and-function-api.md | 27 +- .../current/blueprints/08-examples.md | 24 +- .../09-troubleshoot-and-debug-blueprints.md | 46 +-- .../current/blueprints/intro.md | 40 +-- ...re-blueprints-what-you-can-do-with-them.md | 23 +- .../tutorial/03-build-your-first-blueprint.md | 32 +- .../current/blueprints/tutorial/index.md | 16 +- .../developers/03-build-an-app/01-index.md | 8 +- .../05-local-development/01-wp-now.md | 26 +- .../02-vscode-extension.md | 10 +- .../05-local-development/03-php-wasm-node.md | 10 +- .../04-wp-playground-cli.md | 24 +- .../current/developers/06-apis/01-index.md | 38 ++- .../06-apis/javascript-api/01-index.md | 16 +- .../developers/06-apis/query-api/01-index.md | 10 +- .../10-browser-iframe-rendering.md | 12 +- .../developers/24-limitations/01-index.md | 12 +- .../current/main/about/build.md | 4 +- .../current/main/about/index.md | 22 +- .../current/main/about/launch.md | 10 +- .../current/main/contributing/code.md | 12 +- .../main/contributing/contributor-day.md | 8 +- .../current/main/contributing/translations.md | 20 +- .../main/guides/for-plugin-developers.md | 90 +++--- .../main/guides/for-theme-developers.md | 88 ++--- .../guides/providing-content-for-your-demo.md | 12 +- .../current/main/intro.md | 31 +- .../current/main/quick-start-guide.md | 19 +- .../current/main/resources.md | 10 +- .../current/main/web-instance.md | 14 +- .../current/blueprints/02-using-blueprints.md | 26 +- .../current/blueprints/04-resources.md | 17 +- .../current/blueprints/05-steps-shorthands.md | 6 +- .../current/blueprints/05-steps.md | 10 +- .../07-json-api-and-function-api.md | 9 +- .../current/blueprints/08-examples.md | 22 +- .../09-troubleshoot-and-debug-blueprints.md | 26 +- .../current/blueprints/intro.md | 16 +- ...re-blueprints-what-you-can-do-with-them.md | 21 +- .../tutorial/03-build-your-first-blueprint.md | 27 +- .../current/blueprints/tutorial/index.md | 16 +- .../developers/03-build-an-app/01-index.md | 16 +- .../05-local-development/01-wp-now.md | 11 +- .../02-vscode-extension.md | 4 +- .../04-wp-playground-cli.md | 24 +- .../06-apis/javascript-api/01-index.md | 4 +- .../developers/06-apis/query-api/01-index.md | 4 +- .../18-host-your-own-playground.md | 2 +- .../developers/24-limitations/01-index.md | 6 +- .../current/main/about/build.md | 4 +- .../current/main/about/index.md | 22 +- .../current/main/about/launch.md | 10 +- .../current/main/contributing/code.md | 12 +- .../main/contributing/contributor-day.md | 8 +- .../current/main/contributing/translations.md | 38 ++- .../guides/e2e-testing-with-playwright.md | 105 ++++-- .../main/guides/for-plugin-developers.md | 90 +++--- .../main/guides/for-theme-developers.md | 87 ++--- .../main/guides/playground-for-everyone.md | 24 +- .../guides/providing-content-for-your-demo.md | 12 +- .../current/main/intro.md | 31 +- .../current/main/quick-start-guide.md | 18 +- .../current/main/resources.md | 10 +- .../current/main/web-instance.md | 14 +- .../current/blueprints/02-using-blueprints.md | 22 +- .../07-json-api-and-function-api.md | 10 +- .../current/blueprints/intro.md | 32 +- ...re-blueprints-what-you-can-do-with-them.md | 8 +- .../tutorial/03-build-your-first-blueprint.md | 16 +- .../current/blueprints/tutorial/index.md | 8 +- .../current/main/about/index.md | 14 +- .../current/main/about/launch.md | 2 +- .../main/contributing/contributor-day.md | 2 +- .../current/main/contributing/translations.md | 4 +- .../main/guides/for-plugin-developers.md | 90 +++--- .../main/guides/for-theme-developers.md | 88 ++--- .../guides/providing-content-for-your-demo.md | 6 +- .../current/main/intro.md | 18 +- .../current/main/resources.md | 65 ++-- .../current/main/web-instance.md | 14 +- packages/docs/site/src/css/custom.css | 6 + 196 files changed, 2771 insertions(+), 1959 deletions(-) diff --git a/packages/docs/site/docs/blueprints/02-using-blueprints.md b/packages/docs/site/docs/blueprints/02-using-blueprints.md index 14717feaa26..724fc8d0929 100644 --- a/packages/docs/site/docs/blueprints/02-using-blueprints.md +++ b/packages/docs/site/docs/blueprints/02-using-blueprints.md @@ -32,8 +32,9 @@ For example, to create a Playground with specific versions of WordPress and PHP And then you would go to `https://playground.wordpress.net/#{"preferredVersions":{"php":"8.3","wp":"6.5"}}`. -:::tip -In Javascript, you can get a compact version of any blueprint JSON with [`JSON.stringify`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) and [`JSON.parse`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse) +
+ +In Javascript, you can get a compact version of any blueprint JSON with JSON.stringify and JSON.parse Example: ```js @@ -49,7 +50,7 @@ const encodedBlueprint = encodeURIComponent(minifiedBlueprintJson); const playgroundUrl = `https://playground.wordpress.net/#${encodedBlueprint}`; ``` -::: +
You won't have to paste links to follow along. We'll use code examples with a "Try it out" button that will automatically run the examples for you: @@ -81,8 +82,9 @@ Playground also supports Base64-encoded Blueprints. Base64 is useful when a plat To run it, go to https://playground.wordpress.net/#eyIkc2NoZW1hIjogImh0dHBzOi8vcGxheWdyb3VuZC53b3JkcHJlc3MubmV0L2JsdWVwcmludC1zY2hlbWEuanNvbiIsInByZWZlcnJlZFZlcnNpb25zIjogeyJwaHAiOiAiNy40Iiwid3AiOiAiNi41In19 -:::tip -In JavaScript, You can get any blueprint JSON in [Base64 format](https://developer.mozilla.org/en-US/docs/Glossary/Base64#javascript_support) with global function `btoa()`. +
+ +In JavaScript, You can get any blueprint JSON in Base64 format with global function `btoa()`. Example: @@ -97,7 +99,7 @@ const blueprintJson = `{ const minifiedBlueprintJson = btoa(blueprintJson); // eyIkc2NoZW1hIjogImh0dHBzOi8vcGxheWdyb3VuZC53b3JkcHJlc3MubmV0L2JsdWVwcmludC1zY2hlbWEuanNvbiIsInByZWZlcnJlZFZlcnNpb25zIjogeyJwaHAiOiAiNy40Iiwid3AiOiAiNi41In19 ``` -::: +
### Load Blueprint from a URL diff --git a/packages/docs/site/docs/blueprints/04-resources.md b/packages/docs/site/docs/blueprints/04-resources.md index f74fb3a3a68..d72b9c8e3a0 100644 --- a/packages/docs/site/docs/blueprints/04-resources.md +++ b/packages/docs/site/docs/blueprints/04-resources.md @@ -9,9 +9,9 @@ description: A technical reference for "Resource References." Learn how to use e
-Blueprints steps such as [`installPlugin`](/blueprints/steps#InstallPluginStep) or [`installTheme`](/blueprints/steps#InstallThemeStep) require a location of the plugin or theme to be installed. +Blueprints steps such as installPlugin or installTheme require a location of the plugin or theme to be installed. -That location can be defined as [a `URL` resource](#urlreference) of the `.zip` file containing the theme or plugin. It can also be defined as a [`wordpress.org/plugins`](#corepluginreference) or [`wordpress.org/themes`](#corethemereference) resource for those plugins/themes published in the official WordPress directories. +That location can be defined as a URL resource of the `.zip` file containing the theme or plugin. It can also be defined as a wordpress.org/plugins or wordpress.org/themes resource for those plugins/themes published in the official WordPress directories.
diff --git a/packages/docs/site/docs/blueprints/05-steps.md b/packages/docs/site/docs/blueprints/05-steps.md index 52a890010e0..7e1300f1756 100644 --- a/packages/docs/site/docs/blueprints/05-steps.md +++ b/packages/docs/site/docs/blueprints/05-steps.md @@ -24,15 +24,17 @@ Each step is an object that contains a `step` property that specifies the type o The following step-related topics are addressed on dedicated pages included in this section: -- [Resources References](/blueprints/steps/resources) allow you use external files in Blueprints. +- [Resources References](/blueprints/steps/resources) allow you use external files in Blueprints. -- Some steps have a shorthand version. Check the [Shorthands](/blueprints/steps/shorthands) section for more information about them. +- Some steps have a shorthand version. Check the [Shorthands](/blueprints/steps/shorthands) section for more information about them. -- For each step listed below, you'll find both a "Blueprint API" and a "Function API". Refer to the [API Consistency](/blueprints/steps/api-consistency) page for further details. +- For each step listed below, you'll find both a "Blueprint API" and a "Function API". Refer to the [API Consistency](/blueprints/steps/api-consistency) page for further details. -:::tip -The [WordPress Playground Step Library](https://akirk.github.io/playground-step-library/#) tool provides a visual interface to drag or click the steps to create a blueprint for WordPress Playground. You can also [create your own steps](https://github.com/akirk/playground-step-library/#contributing)! -::: +
+ +The WordPress Playground Step Library tool provides a visual interface to drag or click the steps to create a blueprint for WordPress Playground. You can also create your own steps! + +
--- diff --git a/packages/docs/site/docs/blueprints/07-json-api-and-function-api.md b/packages/docs/site/docs/blueprints/07-json-api-and-function-api.md index fa7ab0bffa1..0c1c5765989 100644 --- a/packages/docs/site/docs/blueprints/07-json-api-and-function-api.md +++ b/packages/docs/site/docs/blueprints/07-json-api-and-function-api.md @@ -18,7 +18,7 @@ You can use Blueprints both with the web and the node.js versions of WordPress P The team is exploring ways to transition Blueprints from a TypeScript library to a PHP library. This would allow people to run Blueprints in any WordPress environments: Playground, a hosted site, or a local setup. -The proposed [new specification](https://github.com/WordPress/blueprints-library/issues/6) is discussed on a separate [GitHub repository](https://github.com/WordPress/blueprints-library/), and you’re more than welcome to join (there or on the [#playground](https://wordpress.slack.com/archives/C04EWKGDJ0K) Slack channel) and help shape the next generation of Playground. +The proposed new specification is discussed on a separate GitHub repository, and you’re more than welcome to join (there or on the #playground Slack channel) and help shape the next generation of Playground. @@ -29,6 +29,8 @@ There are two main differences between the JSON and Function APIs: 1. Blueprints handle the progress bar and error reporting for you. The function API requires you to handle these yourself. 2. The function API requires importing the API client library while Blueprints may be just pasted into the URL fragment. -:::note -Check the [Use the same structure for Blueprint JSON definitions and step handlers](https://github.com/WordPress/wordpress-playground/pull/215) issue at [wordpress-playground](https://github.com/WordPress/wordpress-playground) repo for more detailed info about this topic -::: +
+ +Check the Use the same structure for Blueprint JSON definitions and step handlers issue at wordpress-playground repo for more detailed info about this topic + +
diff --git a/packages/docs/site/docs/blueprints/08-examples.md b/packages/docs/site/docs/blueprints/08-examples.md index fdb931b0892..8c6c3b8f118 100644 --- a/packages/docs/site/docs/blueprints/08-examples.md +++ b/packages/docs/site/docs/blueprints/08-examples.md @@ -9,9 +9,11 @@ import BlueprintExample from '@site/src/components/Blueprints/BlueprintExample.m # Blueprints Examples -:::tip -Check the [Blueprints Gallery](https://github.com/WordPress/blueprints/blob/trunk/GALLERY.md) to explore real-world code examples of using WordPress Playground to launch a WordPress site with a variety of setups. -::: +
+ +Check the Blueprints Gallery to explore real-world code examples of using WordPress Playground to launch a WordPress site with a variety of setups. + +
Let's see some cool things you can do with Blueprints. @@ -122,9 +124,11 @@ You can run WP-CLI commands on a Playground instance either from your terminal o To use your terminal, you must first mount the `/wordpress/` directory and ensure the SQLite database integration is configured. This is because Playground's internal database doesn't persist on a mounted site, so you must explicitly install the database plugin via a Blueprint. This allows WP-CLI to recognize the WordPress installation and connect to its database. -:::note +
+ If you run WP-CLI commands as steps within your Blueprint file, this manual setup is not needed. -::: + +
The following Blueprint snippet handles this setup: diff --git a/packages/docs/site/docs/blueprints/09-troubleshoot-and-debug-blueprints.md b/packages/docs/site/docs/blueprints/09-troubleshoot-and-debug-blueprints.md index caf3243ba56..45d2d1ef5aa 100644 --- a/packages/docs/site/docs/blueprints/09-troubleshoot-and-debug-blueprints.md +++ b/packages/docs/site/docs/blueprints/09-troubleshoot-and-debug-blueprints.md @@ -52,11 +52,13 @@ This will ensure the SQLite plugin is installed correctly and configured within You can use an in-browser [Blueprints editor](https://playground.wordpress.net/builder/builder.html) to build, validate, and preview your Blueprints in the browser. -:::danger Caution +
+ +**Caution** The editor is under development and the embedded Playground sometimes fails to load. To get around it, refresh the page. We're aware of that, and are working to improve the experience. -::: +
## Check for the Filesystem and Database @@ -64,9 +66,9 @@ Some blueprint steps (such as [`writeFile`](/blueprints/steps#WriteFileStep)) al To check the final internal filesystem structure and database (after the blueprint steps have been applied) we can leverage some WordPress plugins that provide a SQL manager and a file explorer such as [`SQL Buddy`](https://wordpress.org/plugins/sql-buddy/) and [`WPide`](https://wordpress.org/plugins/wpide/) (you can see them in action from https://playground.wordpress.net/?plugin=sql-buddy&plugin=wpide) -:::tip +
-There are a bunch of methods we can launch from the console of any WordPress Playground instance to inspect the internals of that instance. They're exposed as part of `window.playground` object (see [Developers > JavaScript API > Debugging and testing](/developers/apis/javascript-api/#debugging-and-testing)). Some examples: +There are a bunch of methods we can launch from the console of any WordPress Playground instance to inspect the internals of that instance. They're exposed as part of `window.playground` object (see Developers > JavaScript API > Debugging and testing). Some examples: ``` > await playground.isDir("/wordpress/wp-content/plugins") @@ -75,9 +77,9 @@ true (3) ['hello.php', 'index.php', 'WordPress-Importer-master'] ``` -Full list of methods we can use is available [here](/api/client/interface/PlaygroundClient) +Full list of methods we can use is available here -::: +
## Check for errors in the browser console @@ -85,11 +87,11 @@ If your Blueprint isn’t running as expected, open the browser developer tools To open the developer tools in Chrome, Firefox, Safari\*, and Edge: press `Ctrl + Shift + I` on Windows/Linux or `Cmd + Option + I` on macOS. -:::caution +
If you haven't yet, enable the Develop menu: go to **Safari > Settings... > Advanced** and check **Show features for web developers**. -::: +
The developer tools window allows you to inspect network requests, view console logs, debug JavaScript, and examine the DOM and CSS styles applied to your webpage. This is crucial for diagnosing and fixing issues with Blueprints. @@ -99,9 +101,11 @@ You can `error_log` your own error messages through [`runPHP` step](/blueprints/ ![Log errors snapshot](https://raw.githubusercontent.com/WordPress/wordpress-playground/refs/heads/trunk/packages/docs/site/static/img/blueprints/log-errors.webp) -:::info -When you download your Playground instance as a `zip` through the ["Download as zip" option](/web-instance#playground-options-menu) you'll also download the `debug.log` file containing all the logs from your Playground instance. -::: +
+ +When you download your Playground instance as a `zip` through the "Download as zip" option you'll also download the `debug.log` file containing all the logs from your Playground instance. + +
## Ask for help diff --git a/packages/docs/site/docs/blueprints/intro.md b/packages/docs/site/docs/blueprints/intro.md index cf28a7f0a87..3bfa9d60ad4 100644 --- a/packages/docs/site/docs/blueprints/intro.md +++ b/packages/docs/site/docs/blueprints/intro.md @@ -9,9 +9,11 @@ import BlueprintExample from '@site/src/components/Blueprints/BlueprintExample.m # Blueprints Docs -:::tip -Check the [Blueprints Gallery](https://github.com/WordPress/blueprints/blob/trunk/GALLERY.md) to explore real-world code examples of using WordPress Playground to launch a WordPress site with a variety of setups. -::: +
+ +Check the Blueprints Gallery to explore real-world code examples of using WordPress Playground to launch a WordPress site with a variety of setups. + +
Hi! Welcome to WordPress Playground Blueprints documentation. @@ -19,27 +21,27 @@ Blueprints are JSON files for setting up your very own WordPress Playground inst

The WordPress Playground documentation is distributed across four separate hubs (subsites):

-- [**Documentation**](/) – Introduction to WP Playground, starter guides and your entry point to WP Playground Docs. -- 👉 [**Blueprints**](/blueprints) (you're here) – Blueprints are JSON files for setting up your WordPress Playground instance. Learn about their possibilities from this Blueprints docs hub. -- [**Developers**](/developers) – WordPress Playground was created as a programmable tool. Discover all the things you can do with it from your code in the Developers docs hub. -- [**API Reference**](/api) – All the APIs exposed by WordPress Playground +- [**Documentation**](/) – Introduction to WP Playground, starter guides and your entry point to WP Playground Docs. +- 👉 [**Blueprints**](/blueprints) (you're here) – Blueprints are JSON files for setting up your WordPress Playground instance. Learn about their possibilities from this Blueprints docs hub. +- [**Developers**](/developers) – WordPress Playground was created as a programmable tool. Discover all the things you can do with it from your code in the Developers docs hub. +- [**API Reference**](/api) – All the APIs exposed by WordPress Playground ## Navigating the Blueprints documentation hub This docs hub is focused on Blueprints info and is divided into the following major sections: -- [Getting started with Blueprints](/blueprints/getting-started): Quick Start Guide to setting up a WordPress Playground instance using Blueprint JSON files. +- [Getting started with Blueprints](/blueprints/getting-started): Quick Start Guide to setting up a WordPress Playground instance using Blueprint JSON files. -- [Tutorial - Blueprints 101](/blueprints/tutorial) - Blueprints API crash course. The tutorial will guide you through the complete process of creating a blueprint that loads a theme and plugin (among other things). +- [Tutorial - Blueprints 101](/blueprints/tutorial) - Blueprints API crash course. The tutorial will guide you through the complete process of creating a blueprint that loads a theme and plugin (among other things). -- [Blueprint data Format](/blueprints/data-format): Blueprint JSON files define your Playground instance with various properties. This section highlights the key properties you need to know. +- [Blueprint data Format](/blueprints/data-format): Blueprint JSON files define your Playground instance with various properties. This section highlights the key properties you need to know. -- [Using Blueprints](/blueprints/using-blueprints): Learn in this section different ways to use Blueprints. +- [Using Blueprints](/blueprints/using-blueprints): Learn in this section different ways to use Blueprints. -- [Steps](/blueprints/steps): API Reference of all the available steps that can be set in a blueprint to run tasks such as login, plugin/theme activation, file operations, and more. +- [Steps](/blueprints/steps): API Reference of all the available steps that can be set in a blueprint to run tasks such as login, plugin/theme activation, file operations, and more. -- [Blueprint Bundles](/blueprints/bundles): Learn how to create and use Blueprint bundles - self-contained packages that include a Blueprint and all its resources. +- [Blueprint Bundles](/blueprints/bundles): Learn how to create and use Blueprint bundles - self-contained packages that include a Blueprint and all its resources. -- [Examples](/blueprints/examples): Compilation of Blueprint examples for various WordPress Playground setups, including installing themes/plugins, running PHP code, enabling features, and loading specific WordPress versions. +- [Examples](/blueprints/examples): Compilation of Blueprint examples for various WordPress Playground setups, including installing themes/plugins, running PHP code, enabling features, and loading specific WordPress versions. -- [Troubleshoot and debug Blueprints](/blueprints/troubleshoot-and-debug): Tips and tools for troubleshooting and debugging Blueprints. +- [Troubleshoot and debug Blueprints](/blueprints/troubleshoot-and-debug): Tips and tools for troubleshooting and debugging Blueprints. diff --git a/packages/docs/site/docs/blueprints/tutorial/01-what-are-blueprints-what-you-can-do-with-them.md b/packages/docs/site/docs/blueprints/tutorial/01-what-are-blueprints-what-you-can-do-with-them.md index dbd28e1fdbd..a42b2a68896 100644 --- a/packages/docs/site/docs/blueprints/tutorial/01-what-are-blueprints-what-you-can-do-with-them.md +++ b/packages/docs/site/docs/blueprints/tutorial/01-what-are-blueprints-what-you-can-do-with-them.md @@ -61,9 +61,9 @@ Blueprints are an invaluable tool for building WordPress sites via Playground Visit these links to learn more about the (endless) possibilities of Blueprints: -- [Introduction to WordPress Playground](https://developer.wordpress.org/news/2024/04/05/introduction-to-playground-running-wordpress-in-the-browser/) -- Embed a pre-configured WordPress site in your website using the [WordPress Playground Block](https://wordpress.org/plugins/interactive-code-block/). -- [Blueprints examples](/blueprints/examples) -- [Demos and apps built with Blueprints](/resources#apps-built-with-wordpress-playground) +- Introduction to WordPress Playground +- Embed a pre-configured WordPress site in your website using the WordPress Playground Block. +- Blueprints examples +- Demos and apps built with Blueprints diff --git a/packages/docs/site/docs/blueprints/tutorial/03-build-your-first-blueprint.md b/packages/docs/site/docs/blueprints/tutorial/03-build-your-first-blueprint.md index dc012fec1b3..ce41425da2b 100644 --- a/packages/docs/site/docs/blueprints/tutorial/03-build-your-first-blueprint.md +++ b/packages/docs/site/docs/blueprints/tutorial/03-build-your-first-blueprint.md @@ -25,9 +25,11 @@ It may seem like nothing is happening, but this Blueprint already spins up a Wor [   Run Blueprint   ](https://playground.wordpress.net/#{}) -:::tip **Autocomplete** +
-If you use an IDE, like VS Code or PHPStorm, you can use the [Blueprint JSON Schema](https://playground.wordpress.net/blueprint-schema.json) for an autocompleted Blueprint development experience. Add the following line at the top of your `blueprint.json` file: +**Autocomplete** + +If you use an IDE, like VS Code or PHPStorm, you can use the Blueprint JSON Schema for an autocompleted Blueprint development experience. Add the following line at the top of your `blueprint.json` file: ```json { @@ -35,7 +37,7 @@ If you use an IDE, like VS Code or PHPStorm, you can use the [Blueprint JSON Sch } ``` -::: +
Here's what it looks like in VS Code: ![Autocompletion visualized](https://raw.githubusercontent.com/WordPress/wordpress-playground/refs/heads/trunk/packages/docs/site/static/img/blueprints/schema-autocompletion.webp) @@ -129,9 +131,11 @@ The example uses the `wordpress.org/themes` resource, which requires a `slug` id In this case, `https://wordpress.org/themes//` becomes `https://wordpress.org/themes/adventurer/`. -:::note -Learn more about the supported resources in the [Blueprint Resources API Reference](/blueprints/steps/resources/). -::: +
+ +Learn more about the supported resources in the Blueprint Resources API Reference. + +
## 4. Install the _Hello Dolly_ plugin diff --git a/packages/docs/site/docs/blueprints/tutorial/index.md b/packages/docs/site/docs/blueprints/tutorial/index.md index 0b50af8d132..441e441bc5c 100644 --- a/packages/docs/site/docs/blueprints/tutorial/index.md +++ b/packages/docs/site/docs/blueprints/tutorial/index.md @@ -13,6 +13,8 @@ Welcome to a Blueprints crash course, where you'll find everything you need to k 2. [How to load and run Blueprints](/blueprints/tutorial/how-to-load-run-blueprints) 3. [Build your first Blueprint](/blueprints/tutorial/build-your-first-blueprint) -:::tip -If you encounter any issues while following this tutorial, refer to the [Troubleshoot and debug Blueprints](/blueprints/troubleshoot-and-debug) section for tips and tools to help you solve them. -::: +
+ +If you encounter any issues while following this tutorial, refer to the Troubleshoot and debug Blueprints section for tips and tools to help you solve them. + +
diff --git a/packages/docs/site/docs/developers/03-build-an-app/01-index.md b/packages/docs/site/docs/developers/03-build-an-app/01-index.md index 8bbafe94625..d5a4d9b33e5 100644 --- a/packages/docs/site/docs/developers/03-build-an-app/01-index.md +++ b/packages/docs/site/docs/developers/03-build-an-app/01-index.md @@ -22,13 +22,15 @@ Playground can be embedded on your website using the HTML `