WordPress · ashfame · Apr 24, 2026 · Apr 15, 2026 · Apr 15, 2026 · Apr 15, 2026
diff --git a/packages/docs/site/docs/blueprints/04-resources.md b/packages/docs/site/docs/blueprints/04-resources.md
@@ -7,11 +7,13 @@ description: A technical reference for "Resource References." Learn how to use e
 
 "Resource References" allow you use external files in Blueprints
 
-:::info
+<div class="callout callout-info">
+
 Blueprints steps such as [`installPlugin`](/blueprints/steps#InstallPluginStep) or [`installTheme`](/blueprints/steps#InstallThemeStep) 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.
-:::
+
+</div>
 
 The following resource references are available:
 

diff --git a/packages/docs/site/docs/blueprints/05-steps-shorthands.md b/packages/docs/site/docs/blueprints/05-steps-shorthands.md
@@ -122,9 +122,11 @@ Or
 
 The `shorthand` syntax and the `step` syntax correspond to each other. Every `step` specified with the `shorthand` syntax is added to the top of the `steps` array in arbitrary order.
 
-:::info **Which should you choose?**
+<div class="callout callout-info">
 
--   Use `shorthands` when **brevity** is your main concern.
--   Use explicit `steps` when you need more control over the **execution order**.
+**Which should you choose?**
 
-:::
+- Use `shorthands` when **brevity** is your main concern.
+- Use explicit `steps` when you need more control over the **execution order**.
+
+</div>
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
@@ -12,12 +12,15 @@ JSON is merely a wrapper around the functions. Whether you use the JSON steps or
 
 You can use Blueprints both with the web and the node.js versions of WordPress Playground.
 
-:::info Blueprints version 2
+<div class="callout callout-info">
+
+**Blueprints version 2**
 
 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.
-:::
+
+</div>
 
 ## Differences between JSON and Function APIs
 

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
@@ -93,9 +93,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
+<div class="callout callout-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.
-:::
+
+</div>
 
 ## Ask for help
 

diff --git a/...te/docs/blueprints/tutorial/01-what-are-blueprints-what-you-can-do-with-them.md b/...te/docs/blueprints/tutorial/01-what-are-blueprints-what-you-can-do-with-them.md
@@ -44,23 +44,26 @@ The Blueprint above installs the _Akismet_ and _Gutenberg_ plugins and the _Twen
 
 Blueprints are an invaluable tool for building WordPress sites via Playground
 
--   **Flexibility**: developers can make granular adjustments to the build process.
--   **Consistency**: ensure that every new site starts with the same configuration.
--   **Lightweight**: small text files that are easy to store and transfer.
--   **Transparency**: A Blueprint includes all the commands needed to build a snapshot of a WordPress site. You can read through it and understand how the site is built.
--   **Productivity**: reduces the time-consuming process of manually setting up a new WordPress site. Instead of installing and configuring themes and plugins for each new project, apply a Blueprint and set everything in one process.
--   **Up-to-date dependencies**: fetch the latest version of WordPress, a particular plugin, or a theme. Your snapshot is always up to date with the latest features and security fixes.
--   **Collaboration**: the `JSON` files are easy to review in tools like GitHub. Share Blueprints with your team or the WordPress community. Allowing others to use your well-configured setup.
--   **Experimentation and Learning**: For those new to WordPress or looking to experiment with different configurations, Blueprints provide a safe and easy way to try new setups without "breaking" a live site.
--   **WordPress.org integration**: offer a [demo of your plugin](https://developer.wordpress.org/plugins/wordpress-org/previews-and-blueprints/) in the WordPress plugin directory, or a preview in a [Theme Trac ticket](https://meta.trac.wordpress.org/ticket/7382).
--   **Spinning a development environment**: A new developer in the team could download the Blueprint, run a hypothetical `wp up` command, and get a fresh developer environments—loaded with everything they need. The entire CI/CD process can reuse the same Blueprint.
-
-:::info **More Resources**
+- **Flexibility**: developers can make granular adjustments to the build process.
+- **Consistency**: ensure that every new site starts with the same configuration.
+- **Lightweight**: small text files that are easy to store and transfer.
+- **Transparency**: A Blueprint includes all the commands needed to build a snapshot of a WordPress site. You can read through it and understand how the site is built.
+- **Productivity**: reduces the time-consuming process of manually setting up a new WordPress site. Instead of installing and configuring themes and plugins for each new project, apply a Blueprint and set everything in one process.
+- **Up-to-date dependencies**: fetch the latest version of WordPress, a particular plugin, or a theme. Your snapshot is always up to date with the latest features and security fixes.
+- **Collaboration**: the `JSON` files are easy to review in tools like GitHub. Share Blueprints with your team or the WordPress community. Allowing others to use your well-configured setup.
+- **Experimentation and Learning**: For those new to WordPress or looking to experiment with different configurations, Blueprints provide a safe and easy way to try new setups without "breaking" a live site.
+- **WordPress.org integration**: offer a [demo of your plugin](https://developer.wordpress.org/plugins/wordpress-org/previews-and-blueprints/) in the WordPress plugin directory, or a preview in a [Theme Trac ticket](https://meta.trac.wordpress.org/ticket/7382).
+- **Spinning a development environment**: A new developer in the team could download the Blueprint, run a hypothetical `wp up` command, and get a fresh developer environments—loaded with everything they need. The entire CI/CD process can reuse the same Blueprint.
+
+<div class="callout callout-info">
+
+**More Resources**
+
 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](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)
 
-:::
+</div>
diff --git a/packages/docs/site/docs/developers/05-local-development/01-wp-now.md b/packages/docs/site/docs/developers/05-local-development/01-wp-now.md
@@ -14,17 +14,19 @@ The NPM package @wp-now/wp-now is deprecated and won't receive updates in the fu
 
 Key Features:
 
--   **Command-line Interface**: Easy to use for developers comfortable with CLI.
--   **Quick Setup**: Set up a local WordPress environment in seconds.
--   **Customizable**: Allows for configuration to suit specific development needs.
+- **Command-line Interface**: Easy to use for developers comfortable with CLI.
+- **Quick Setup**: Set up a local WordPress environment in seconds.
+- **Customizable**: Allows for configuration to suit specific development needs.
 
 [`@wp-now/wp-now`](https://www.npmjs.com/package/@wp-now/wp-now) is a CLI tool to spin up a WordPress site with a single command. Similarly to the [VS Code extension](/developers/local-development/vscode-extension), it uses a portable WebAssembly version of PHP and SQLite. No Docker, MySQL, or Apache are required.
 
-:::info **Documentation**
+<div class="callout callout-info">
+
+**Documentation**
 
 `wp-now` is maintained in a different GitHub repository, [Playground Tools](https://github.com/WordPress/playground-tools/). You can find the latest documentation in the [dedicated README file](https://github.com/WordPress/playground-tools/blob/trunk/packages/wp-now/README.md).
 
-:::
+</div>
 
 ## Launch wp-now in a plugin or theme directory
 

diff --git a/packages/docs/site/docs/developers/05-local-development/02-vscode-extension.md b/packages/docs/site/docs/developers/05-local-development/02-vscode-extension.md
@@ -11,11 +11,13 @@ Key Features:
 - **Integrated Development**: Develop WordPress sites directly within VS Code.
 - **Ease of Use**: Simplifies the development workflow with integrated tools.
 
-:::info **Documentation**
+<div class="callout callout-info">
+
+**Documentation**
 
 The VS Code extension is maintained in a different GitHub repository, [Playground Tools](https://github.com/WordPress/playground-tools/). You can find the latest documentation in the [dedicated README file](https://github.com/WordPress/playground-tools/blob/trunk/packages/vscode-extension/README.md).
 
-:::
+</div>
 
 ## Installation and Usage:
 

diff --git a/packages/docs/site/docs/developers/05-local-development/04-wp-playground-cli.md b/packages/docs/site/docs/developers/05-local-development/04-wp-playground-cli.md
@@ -66,9 +66,11 @@ This is useful when:
 - Testing fresh installation scenarios
 - Your site data became corrupted or inconsistent
 
-:::info
+<div class="callout callout-info">
+
 The `--reset` flag works only with `start`. For `server`, manually delete the persisted site directory at `~/.wordpress-playground/sites/<path-hash>/`.
-:::
+
+</div>
 
 ### Choosing a WordPress and PHP Version
 
@@ -119,9 +121,11 @@ Consider mounting your WordPress project files before the WordPress installation
 npx @wp-playground/cli@latest server --mount-before-install=.:/wordpress/
 ```
 
-:::info
+<div class="callout callout-info">
+
 On Windows, the path format `/host/path:/vfs/path` can cause issues. To resolve this, use the flags `--mount-dir` and `--mount-dir-before-install`. These flags let you specify host and virtual file system paths in an alternative format: `"/host/path"` `"/vfs/path"`.
-:::
+
+</div>
 
 ### Understanding Data Persistence and SQLite Location in `server` mode
 

diff --git a/packages/docs/site/docs/developers/06-apis/01-index.md b/packages/docs/site/docs/developers/06-apis/01-index.md
@@ -27,9 +27,11 @@ This is called [Query API](/developers/apis/query-api/) and you can learn more a
 <iframe style="width: 800px; height: 500px;" src="https://playground.wordpress.net/?plugin=coblocks"></iframe>
 ```
 
-:::info
+<div class="callout callout-info">
+
 Check the [Query API](/developers/apis/query-api) section for more info.
-:::
+
+</div>
 
 ### Blueprints
 
@@ -85,11 +87,11 @@ wp_insert_post(array(
 
 <p></p>
 
-:::info
+<div class="callout callout-info">
 
 Blueprints play a significant role in WordPress Playground, so they have their own dedicated documentation hub. Learn more about JSON Blueprints at the [Blueprints Docs Hub](/blueprints).
 
-:::
+</div>
 
 ### JavaScript API
 
@@ -110,9 +112,11 @@ The `@wp-playground/client` package provides a JavaScript API you can use to ful
 </script>
 ```
 
-:::info
+<div class="callout callout-info">
+
 Check the [JavaScript API](/developers/apis/javascript-api/) section for more info.
-:::
+
+</div>
 
 ## Playground APIs Concepts
 

diff --git a/packages/docs/site/docs/developers/06-apis/javascript-api/01-index.md b/packages/docs/site/docs/developers/06-apis/javascript-api/01-index.md
@@ -6,13 +6,15 @@ slug: /developers/apis/javascript-api
 
 WordPress Playground comes with a JavaScript API client that grants you full control over your WordPress.
 
-:::info API here doesn't mean "REST API"
+<div class="callout callout-info">
+
+**API here doesn't mean "REST API"**
 
 WordPress Playground is a browser-based application.
 The term API here refers to a set of functions you can
 call inside JavaScript. This is **not** a network-based REST API.
 
-:::
+</div>
 
 ## Quick start
 
@@ -38,12 +40,14 @@ Here's the shortest example of how to use the JavaScript API in a HTML page:
 </script>
 ```
 
-:::info /remote.html is a special URL
+<div class="callout callout-info">
+
+**/remote.html is a special URL**
 
 `/remote.html` is a special URL that loads the Playground
 API endpoint instead of the demo app with the browser UI. Read more about the difference between `/` and `/remote.html` and [on this page](/developers/apis/javascript-api/-html-vs-remote-html).
 
-:::
+</div>
 
 ## Controlling the website
 

diff --git a/packages/docs/site/docs/developers/06-apis/query-api/01-index.md b/packages/docs/site/docs/developers/06-apis/query-api/01-index.md
@@ -54,11 +54,13 @@ For example, the following code embeds a Playground with a preinstalled Gutenber
 <iframe src="https://playground.wordpress.net/?plugin=gutenberg&url=/wp-admin/post-new.php&mode=seamless"> </iframe>
 ```
 
-:::info CORS policy
+<div class="callout callout-info">
+
+**CORS policy**
 
 To import files from a URL, such as a site zip package, they must be served with `Access-Control-Allow-Origin` header set. For reference, see: [Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#the_http_response_headers).
 
-:::
+</div>
 
 ## GitHub Export Options
 

diff --git a/packages/docs/site/docs/developers/07-xdebug/02-getting-started.md b/packages/docs/site/docs/developers/07-xdebug/02-getting-started.md
@@ -27,17 +27,21 @@ npx @wp-playground/cli@latest server --xdebug
 
 This starts WordPress on `http://127.0.0.1:9400` with Xdebug enabled. Now you can connect a debugger.
 
-:::info
+<div class="callout callout-info">
+
 Only one project can be debugged at a time.
-:::
+
+</div>
 
 ## Starting with IDE integration
 
 Similar to the process with DevTools, let's use the same plugin code from before to debug with VS Code, and add the `--experimental-unsafe-ide-integration=vscode` flag. This flag will optimize the setup process for VS Code. If you're working with PhpStorm, add the `--experimental-unsafe-ide-integration=phpstorm` flag.
 
-:::info
+<div class="callout callout-info">
+
 This flag is marked as `unsafe` because it edits the IDE config files to set Xdebug path mappings and web server details. **CAUTION:** If there are bugs, this feature may cause your IDE configuration files to break. Please consider backing up your IDE configs before using this feature.
-:::
+
+</div>
 
 To debug in VS Code, you'll need the following prerequisites:
 

diff --git a/packages/docs/site/docs/developers/23-architecture/10-browser-iframe-rendering.md b/packages/docs/site/docs/developers/23-architecture/10-browser-iframe-rendering.md
@@ -22,15 +22,19 @@ Now, consider an iframe with the same link in it:
 
 This time, click the link in the browser to load `page.php` **inside the iframe**. The top-level `index.html`, where the PHP application runs, remains unaffected. That's why iframes are crucial for the `@php-wasm/web` setup.
 
-:::info Crash reports
+<div class="callout callout-info">
+
+**Crash reports**
+
 Playground doesn't collect crash reports automatically. Instead, it prompts users to submit a crash report when an instance fails to run in the browser.
 
 The report includes a log, description, and a URL, and users can modify it before submitting it.
 
 The [Logger API](https://github.com/WordPress/wordpress-playground/blob/trunk/packages/playground/website/public/logger.php) handles it from there. This simple REST API validates the data and sends it to the **Making WordPress** [#playground-logs Slack channel](https://wordpress.slack.com/archives/C06Q5DCKZ3L).
-:::
+
+</div>
 
 ## Iframes caveats
 
--   `target="_top"` isn't handled yet, so clicking links with `target="_top"` will reload the page you’re working on.
--   JavaScript popups originating in the `iframe` may not always display.
+- `target="_top"` isn't handled yet, so clicking links with `target="_top"` will reload the page you’re working on.
+- JavaScript popups originating in the `iframe` may not always display.
diff --git a/packages/docs/site/docs/developers/23-architecture/18-host-your-own-playground.md b/packages/docs/site/docs/developers/23-architecture/18-host-your-own-playground.md
@@ -137,11 +137,13 @@ For these to work, you need a server environment with Apache and PHP installed.
 
 As an alternative to Apache, here is an example of using NGINX to serve the Playground.
 
-:::info Refer to the source file
+<div class="callout callout-info">
+
+**Refer to the source file**
 
 The example may be outdated. Please check [the source file](https://github.com/WordPress/wordpress-playground/blob/trunk/packages/playground/remote/.htaccess) for the latest version.
 
-:::
+</div>
 
 The combined Apache `.htaccess` file looks like this.
 

diff --git a/packages/docs/site/docs/main/about/build.md b/packages/docs/site/docs/main/about/build.md
@@ -36,11 +36,11 @@ With Google Chrome you can synchronize your Playground instance with a local dir
 - An empty directory – to save this Playground and start syncing
 - An existing directory – to load it here and start syncing
 
-:::info
+<div class="callout callout-info">
 
 This feature is only available for Google Chrome for now. It won't work with other browsers yet.
 
-:::
+</div>
 
 Regarding changes done on both sides of the connection:
 

diff --git a/packages/docs/site/docs/main/about/launch.md b/packages/docs/site/docs/main/about/launch.md
@@ -30,9 +30,11 @@ This [WordPress Playground block](https://wordpress.org/plugins/interactive-code
 
 With this block you have a straightforward and effective way to create live WordPress environments that can be embedded within your blog posts.
 
-:::info
+<div class="callout callout-info">
+
 For any issues or questions about the WordPress Playground Block, please open a GitHub issue in the [playground-tools](https://github.com/WordPress/playground-tools) repository.
-:::
+
+</div>
 
 ## Put a native app running WordPress in the App Store.