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 1cb5aa8e20..d232cb80ba 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
@@ -1,6 +1,7 @@
---
title: Quick Start Guide for Developers
slug: /developers/build-your-first-app
+description: Practical guide to embedding WordPress, installing plugins, previewing PRs, and building apps with Playground APIs.
---
# Quick Start Guide for Developers
@@ -39,8 +40,7 @@ Learn more about each of these APIs in the [APIs overview section](/developers/a
import ThisIsQueryApi from '@site/docs/\_fragments/\_this_is_query_api.md';
-You can install plugins and themes from the WordPress directory with only URL parameters. For example this iframe would come with the `coblocks` and `friends` plugins preinstalled as well as the `pendant` theme.
-
+You can install plugins and themes from the WordPress directory with only URL parameters. This iframe preinstalls the `coblocks` and `friends` plugins and the `pendant` theme.
```html
@@ -72,7 +72,7 @@ You can still showcase it on Playground by using [JSON Blueprints](/blueprints).
},
{
"step": "importWxr",
- "pluginData": {
+ "file": {
"resource": "url",
"url": "https://your-site.com/starter-content.wxr"
}
@@ -85,15 +85,44 @@ See [getting started with Blueprints](/blueprints/getting-started) to learn more
## Preview pull requests from your repository
-See the [live example of Gutenberg PR previewer](https://playground.wordpress.net/gutenberg.html).
+You can preview repository code two ways: directly with `git:directory`, or by pointing to a `.zip` from your CI pipeline. Here's the `git:directory` approach using [Blueprints](/blueprints):
-You can use Playground as a Pull Request previewer if:
+```json
+{
+ "steps": [
+ {
+ "step": "installPlugin",
+ "pluginData": {
+ "resource": "git:directory",
+ "url": "https://github.com/my-user/my-repo",
+ "ref": "refs/pull/1/head",
+ "refType": "refname"
+ },
+ "options": {
+ "activate": true
+ },
+ "progress": {
+ "caption": "Installing plugin from my-user/my-repo PR #1"
+ }
+ }
+ ]
+}
+```
+
+In the code above, it will install a plugin from a repository located at the `url`, and the reference to find the branch is `refType`; in this case, it will use `refname`, but it can also use `branch`, `tag`, and `commit`.
+
+:::tip
+You can automate this process using the [GitHub Action to generate preview links](/guides/github-action-pr-preview), which will help streamline the process.
+:::
-- Your WordPress plugin or theme uses a CI pipeline
-- Your CI pipeline bundles your plugin or theme
-- You can expose the zip file generated by your CI pipeline publicly
+Loading a `.zip` file is another alternative for previewing your project. See the [live example of Gutenberg PR previewer](https://playground.wordpress.net/gutenberg.html).
-Those zip bundles aren't any different from regular WordPress Plugins, which means you can install them in Playground using the [JSON Blueprints](/blueprints) API. Once you exposed an endpoint like https://your-site.com/pull-request-1234.zip, the following Blueprint will do the rest:
+To use Playground as a PR previewer, you need:
+
+- A CI pipeline that bundles your plugin or theme
+- Public access to the generated `.zip` file
+
+Those zip bundles aren't any different from regular WordPress Plugins, which means you can install them in Playground using the [JSON Blueprints](/blueprints) API. Once you expose an endpoint like https://your-site.com/pull-request-1234.zip, the following Blueprint will do the rest:
```json
{
@@ -154,9 +183,17 @@ blueprint={{
]
}} />
+### Preview WordPress Core and Gutenberg Branches or PRs
+
+You can preview specific pull requests from WordPress Core and Gutenberg repositories using Query API parameters. Gutenberg branches also have an alternative to preview them with the parameter `gutenberg-branch`. This is useful for testing the latest trunk changes or specific feature branches without creating a PR.
+
+- Preview a specific WordPress Core PR: `https://playground.wordpress.net/?core-pr=9500`
+- Preview a specific Gutenberg PR: `https://playground.wordpress.net/?gutenberg-pr=73010`
+- Preview the Gutenberg trunk branch: `https://playground.wordpress.net/?gutenberg-branch=trunk`
+
## Build a compatibility testing environment
-A live plugin demo with a configurable PHP and WordPress makes an excellent compatibility testing environment.
+Test your plugin across PHP and WordPress versions by configuring them in Playground. This helps you verify compatibility before release.
With the Query API, you'd simply add the `php` and `wp` query parameters to the URL:
diff --git a/packages/docs/site/i18n/es/docusaurus-plugin-content-docs/current/developers/03-build-an-app/01-index.md b/packages/docs/site/i18n/es/docusaurus-plugin-content-docs/current/developers/03-build-an-app/01-index.md
new file mode 100644
index 0000000000..4107659fec
--- /dev/null
+++ b/packages/docs/site/i18n/es/docusaurus-plugin-content-docs/current/developers/03-build-an-app/01-index.md
@@ -0,0 +1,367 @@
+---
+title: Guía de inicio rápido para desarrolladores
+slug: /developers/build-your-first-app
+description: Guía práctica para incrustar WordPress, instalar plugins, previsualizar PRs y construir aplicaciones con las APIs de Playground.
+---
+
+
+
+# Guía de inicio rápido para desarrolladores
+
+
+
+WordPress Playground fue creado como una herramienta programable. A continuación encontrarás algunos ejemplos de lo que puedes hacer con él. Cada API discutida se describe en detalle en la [sección de APIs](/developers/apis/):
+
+import TOCInline from '@theme/TOCInline';
+
+
+
+
+
+## Incrustar WordPress en tu sitio web
+
+
+
+Playground puede incrustarse en tu sitio web usando la etiqueta HTML `
+```
+
+
+
+Cada visitante obtendrá su propia instancia privada de WordPress de forma gratuita. Luego puedes personalizarla usando una de las [APIs de Playground](/developers/apis/).
+
+import PlaygroundWpNetWarning from '@site/docs/\_fragments/\_playground_wp_net_may_stop_working.md';
+
+
+
+
+
+## Controlar el sitio web incrustado
+
+
+
+WordPress Playground proporciona tres APIs que puedes usar para controlar el sitio web incrustado. Todos los ejemplos en esta sección están construidos usando una de estas:
+
+import APIList from '@site/docs/\_fragments/\_api_list.mdx';
+
+
+
+
+
+Aprende más sobre cada una de estas APIs en la [sección de descripción general de APIs](/developers/apis/).
+
+
+
+## Mostrar un plugin o tema del directorio de WordPress
+
+import ThisIsQueryApi from '@site/docs/\_fragments/\_this_is_query_api.md';
+
+
+
+Puedes instalar plugins y temas del directorio de WordPress solo con parámetros de URL. Este iframe preinstala los plugins `coblocks` y `friends` y el tema `pendant`.
+
+
+
+```html
+
+```
+
+
+
+## Mostrar cualquier plugin o tema
+
+
+
+¿Qué pasa si tu plugin no está en el directorio de WordPress?
+
+
+
+Aún puedes mostrarlo en Playground usando [Blueprints JSON](/blueprints). Por ejemplo, este Blueprint descargaría e instalaría un plugin y un tema desde tu sitio web y también importaría contenido inicial:
+
+```json
+{
+ "steps": [
+ {
+ "step": "installPlugin",
+ "pluginData": {
+ "resource": "url",
+ "url": "https://your-site.com/your-plugin.zip"
+ }
+ },
+ {
+ "step": "installTheme",
+ "themeData": {
+ "resource": "url",
+ "url": "https://your-site.com/your-theme.zip"
+ }
+ },
+ {
+ "step": "importWxr",
+ "file": {
+ "resource": "url",
+ "url": "https://your-site.com/starter-content.wxr"
+ }
+ }
+ ]
+}
+```
+
+
+
+Consulta [primeros pasos con Blueprints](/blueprints/getting-started) para aprender más.
+
+
+
+## Previsualizar pull requests de tu repositorio
+
+
+
+Puedes previsualizar código del repositorio de dos maneras: directamente con `git:directory`, o apuntando a un `.zip` de tu pipeline de CI. Aquí está el enfoque `git:directory` usando [Blueprints](/blueprints):
+
+```json
+{
+ "steps": [
+ {
+ "step": "installPlugin",
+ "pluginData": {
+ "resource": "git:directory",
+ "url": "https://github.com/my-user/my-repo",
+ "ref": "refs/pull/1/head",
+ "refType": "refname"
+ },
+ "options": {
+ "activate": true
+ },
+ "progress": {
+ "caption": "Installing plugin from my-user/my-repo PR #1"
+ }
+ }
+ ]
+}
+```
+
+En el código anterior, se instalará un complemento desde un repositorio ubicado en `url`, y la referencia para encontrar la rama es `refType`; en este caso, se utilizará `refname`, pero también se puede utilizar `branch`, `tag` y `commit`.
+
+:::tip
+Puedes automatizar este proceso usando la [Acción de GitHub para generar enlaces de vista previa](/guides/github-action-pr-preview), lo que te ayudará a agilizarlo.
+:::
+
+
+
+Cargar un archivo `.zip` es otra alternativa para previsualizar tu proyecto. Consulta el [ejemplo en vivo del previsualizador de PR de Gutenberg](https://playground.wordpress.net/gutenberg.html).
+
+
+
+Para usar Playground como un previsualizador de PR, necesitas:
+
+
+
+- Un pipeline de CI que empaquete tu plugin o tema
+- Acceso público al archivo `.zip` generado
+
+
+
+Esos paquetes zip no son diferentes de los plugins regulares de WordPress, lo que significa que puedes instalarlos en Playground usando la API de [Blueprints JSON](/blueprints). Una vez que expongas un endpoint como https://your-site.com/pull-request-1234.zip, el siguiente Blueprint hará el resto:
+
+```json
+{
+ "steps": [
+ {
+ "step": "installPlugin",
+ "pluginData": {
+ "resource": "url",
+ "url": "https://your-site.com/pull-request-1234.zip"
+ }
+ }
+ ]
+}
+```
+
+
+
+La demo oficial de Playground usa esta técnica para previsualizar pull requests del repositorio de Gutenberg:
+
+import BlueprintExample from '@site/src/components/Blueprints/BlueprintExample.mdx';
+
+
+
+
+
+### Previsualizar ramas o PRs de WordPress Core y Gutenberg
+
+
+
+Puedes previsualizar pull requests específicos de los repositorios de WordPress Core y Gutenberg usando parámetros de la API Query. Las ramas de Gutenberg también tienen una alternativa para previsualizarlas con el parámetro `gutenberg-branch`. Esto es útil para probar los últimos cambios de trunk o ramas de características específicas sin crear un PR.
+
+
+
+- Previsualizar un PR específico de WordPress Core: `https://playground.wordpress.net/?core-pr=9500`
+- Previsualizar un PR específico de Gutenberg: `https://playground.wordpress.net/?gutenberg-pr=73010`
+- Previsualizar la rama trunk de Gutenberg: `https://playground.wordpress.net/?gutenberg-branch=trunk`
+
+
+
+## Construir un entorno de pruebas de compatibilidad
+
+
+
+Prueba tu plugin en diferentes versiones de PHP y WordPress configurándolas en Playground. Esto te ayuda a verificar la compatibilidad antes del lanzamiento.
+
+
+
+Con la API Query, simplemente agregarías los parámetros de consulta `php` y `wp` a la URL:
+
+```html
+
+```
+
+
+
+Con Blueprints JSON, usarías la propiedad `preferredVersions`:
+
+```json
+{
+ "preferredVersions": {
+ "php": "8.3",
+ "wp": "6.1"
+ }
+}
+```
+
+
+
+## Ejecutar código PHP en el navegador
+
+
+
+La API de JavaScript proporciona el método `run()` que puedes usar para ejecutar código PHP en el navegador:
+
+```html
+
+
+```
+
+
+
+¡Combina eso con un editor de código como Monaco o CodeMirror, y obtendrás fragmentos de código en vivo como en [este artículo](https://adamadam.blog/2023/02/16/how-to-modify-html-in-a-php-wordpress-plugin-using-the-new-tag-processor-api/)!
diff --git a/packages/docs/site/i18n/fr/docusaurus-plugin-content-docs/current/developers/03-build-an-app/01-index.md b/packages/docs/site/i18n/fr/docusaurus-plugin-content-docs/current/developers/03-build-an-app/01-index.md
new file mode 100644
index 0000000000..ea7794175e
--- /dev/null
+++ b/packages/docs/site/i18n/fr/docusaurus-plugin-content-docs/current/developers/03-build-an-app/01-index.md
@@ -0,0 +1,367 @@
+---
+title: Guide de démarrage rapide pour les développeurs
+slug: /developers/build-your-first-app
+description: Guide pratique pour intégrer WordPress, installer des extensions, prévisualiser des PRs et créer des applications avec les APIs Playground.
+---
+
+
+
+# Guide de démarrage rapide pour les développeurs
+
+
+
+WordPress Playground a été créé comme un outil programmable. Vous trouverez ci-dessous quelques exemples de ce que vous pouvez faire avec. Chaque API discutée est décrite en détail dans la [section APIs](/developers/apis/) :
+
+import TOCInline from '@theme/TOCInline';
+
+
+
+
+
+## Intégrer WordPress sur votre site
+
+
+
+Playground peut être intégré sur votre site en utilisant la balise HTML `
+```
+
+
+
+Chaque visiteur obtiendra sa propre instance WordPress privée gratuitement. Vous pouvez ensuite la personnaliser en utilisant l'une des [APIs de Playground](/developers/apis/).
+
+import PlaygroundWpNetWarning from '@site/docs/\_fragments/\_playground_wp_net_may_stop_working.md';
+
+
+
+
+
+## Contrôler le site intégré
+
+
+
+WordPress Playground fournit trois APIs que vous pouvez utiliser pour contrôler le site en iframe. Tous les exemples de cette section sont construits en utilisant l’une d'entre elles :
+
+import APIList from '@site/docs/\_fragments/\_api_list.mdx';
+
+
+
+
+
+Apprenez-en plus sur chacune de ces APIs dans la [section aperçu des APIs](/developers/apis/).
+
+
+
+## Présenter un plugin ou thème du répertoire WordPress
+
+import ThisIsQueryApi from '@site/docs/\_fragments/\_this_is_query_api.md';
+
+
+
+Vous pouvez installer des plugins et thèmes du répertoire WordPress avec seulement des paramètres d'URL. Cet iframe préinstalle les plugins `coblocks` et `friends` et le thème `pendant`.
+
+
+
+```html
+
+```
+
+
+
+## Présenter n'importe quel plugin ou thème
+
+
+
+Et si votre extension ne figure pas dans le répertoire de WordPress ?
+
+
+
+Vous pouvez toujours la présenter avec Playground en utilisant les [JSON Blueprints](/blueprints). Par exemple, ce Blueprint téléchargerait et installerait une extension et un thème depuis votre site et importerait également un contenu de démarrage :
+
+```json
+{
+ "steps": [
+ {
+ "step": "installPlugin",
+ "pluginData": {
+ "resource": "url",
+ "url": "https://your-site.com/your-plugin.zip"
+ }
+ },
+ {
+ "step": "installTheme",
+ "themeData": {
+ "resource": "url",
+ "url": "https://your-site.com/your-theme.zip"
+ }
+ },
+ {
+ "step": "importWxr",
+ "file": {
+ "resource": "url",
+ "url": "https://your-site.com/starter-content.wxr"
+ }
+ }
+ ]
+}
+```
+
+
+
+Consultez [débuter avec les Blueprints](/blueprints/getting-started) pour en savoir plus.
+
+
+
+## Prévisualiser les pull requests de votre dépôt
+
+
+
+Vous pouvez prévisualiser le code du dépôt de deux manières : directement avec `git:directory`, ou en pointant vers un `.zip` de votre pipeline CI. Voici l'approche `git:directory` utilisant les [Blueprints](/blueprints) :
+
+```json
+{
+ "steps": [
+ {
+ "step": "installPlugin",
+ "pluginData": {
+ "resource": "git:directory",
+ "url": "https://github.com/my-user/my-repo",
+ "ref": "refs/pull/1/head",
+ "refType": "refname"
+ },
+ "options": {
+ "activate": true
+ },
+ "progress": {
+ "caption": "Installing plugin from my-user/my-repo PR #1"
+ }
+ }
+ ]
+}
+```
+
+Dans le code ci-dessus, un plugin sera installé à partir d'un dépôt situé à l'URL indiquée, et la référence pour trouver la branche est `refType` ; dans ce cas, il utilisera `refname`, mais il peut également utiliser `branch`, `tag` et `commit`.
+
+:::tip
+Vous pouvez automatiser ce processus à l'aide de l'[Action GitHub pour générer des liens de prévisualisation](/guides/github-action-pr-preview), ce qui permettra de le simplifier.
+:::
+
+
+
+Charger un fichier `.zip` est une autre alternative pour prévisualiser votre projet. Consultez l'[exemple en direct du visualiseur de PR Gutenberg](https://playground.wordpress.net/gutenberg.html).
+
+
+
+Pour utiliser Playground comme visualiseur de PR, vous avez besoin :
+
+
+
+- D'un pipeline CI qui empaquette votre plugin ou thème
+- D'un accès public au fichier `.zip` généré
+
+
+
+Ces archives zip ne sont pas différentes des extensions WordPress classiques, ce qui signifie que vous pouvez les installer dans Playground en utilisant l'API [JSON Blueprints](/blueprints). Une fois que vous exposez un point de terminaison comme `https://your-site.com/pull-request-1234.zip`, le Blueprint suivant fera le reste :
+
+```json
+{
+ "steps": [
+ {
+ "step": "installPlugin",
+ "pluginData": {
+ "resource": "url",
+ "url": "https://your-site.com/pull-request-1234.zip"
+ }
+ }
+ ]
+}
+```
+
+
+
+La démo officielle de Playground utilise cette technique pour prévisualiser les pull requests du dépôt Gutenberg :
+
+import BlueprintExample from '@site/src/components/Blueprints/BlueprintExample.mdx';
+
+
+
+
+
+### Prévisualiser les branches ou PRs de WordPress Core et Gutenberg
+
+
+
+Vous pouvez prévisualiser des pull requests spécifiques des dépôts WordPress Core et Gutenberg en utilisant les paramètres de l'API Query. Les branches Gutenberg ont également une alternative pour les prévisualiser avec le paramètre `gutenberg-branch`. Ceci est utile pour tester les derniers changements du trunk ou des branches de fonctionnalités spécifiques sans créer de PR.
+
+
+
+- Prévisualiser un PR WordPress Core spécifique : `https://playground.wordpress.net/?core-pr=9500`
+- Prévisualiser un PR Gutenberg spécifique : `https://playground.wordpress.net/?gutenberg-pr=73010`
+- Prévisualiser la branche trunk de Gutenberg : `https://playground.wordpress.net/?gutenberg-branch=trunk`
+
+
+
+## Construire un environnement de test de compatibilité
+
+
+
+Testez votre extension sur différentes versions de PHP et WordPress en les configurant dans Playground. Cela vous aide à vérifier la compatibilité avant la publication.
+
+
+
+Avec l'API Query, vous ajouteriez simplement les paramètres de requête `php` et `wp` à l'URL :
+
+```html
+
+```
+
+
+
+Avec les Blueprints JSON, vous utiliseriez la propriété `preferredVersions` :
+
+```json
+{
+ "preferredVersions": {
+ "php": "8.3",
+ "wp": "6.1"
+ }
+}
+```
+
+
+
+## Exécuter du code PHP dans le navigateur
+
+
+
+L'API JavaScript fournit la méthode `run()` que vous pouvez utiliser pour exécuter du code PHP dans le navigateur :
+
+```html
+
+
+```
+
+
+
+Combinez cela avec un éditeur de code comme Monaco ou CodeMirror, et vous obtiendrez des extraits de code en direct comme dans [cet article](https://adamadam.blog/2023/02/16/how-to-modify-html-in-a-php-wordpress-plugin-using-the-new-tag-processor-api/) !
diff --git a/packages/docs/site/i18n/pt-BR/docusaurus-plugin-content-docs/current/developers/03-build-an-app/01-index.md b/packages/docs/site/i18n/pt-BR/docusaurus-plugin-content-docs/current/developers/03-build-an-app/01-index.md
index 6c3a37a293..3b87c2a803 100644
--- a/packages/docs/site/i18n/pt-BR/docusaurus-plugin-content-docs/current/developers/03-build-an-app/01-index.md
+++ b/packages/docs/site/i18n/pt-BR/docusaurus-plugin-content-docs/current/developers/03-build-an-app/01-index.md
@@ -1,6 +1,7 @@
---
title: Guia rápido para desenvolvedores
slug: /developers/build-your-first-app
+description: Guia prático para incorporar WordPress, instalar plugins, visualizar PRs e criar aplicativos com as APIs do Playground.
---
@@ -9,7 +10,7 @@ slug: /developers/build-your-first-app
-WordPress Playground foi criado como uma ferramenta programável. A seguir você irá encontrar alguns exemplos de como você pode fazer isso. Cada API discutida será descrita em detalhes na [Sessão de APIs](/developers/apis/):
+WordPress Playground foi criado como uma ferramenta programável. Abaixo você encontrará alguns exemplos do que pode fazer com ele. Cada API discutida é descrita em detalhes na [seção de APIs](/developers/apis/):
import TOCInline from '@theme/TOCInline';
@@ -19,7 +20,7 @@ import TOCInline from '@theme/TOCInline';
## Incorporar WordPress no seu site
-
+
O Playground pode ser incorporado no seu site usando a tag HTML `
+
```
@@ -219,8 +266,8 @@ Com JSON Blueprints, você usaria a propriedade `preferredVersions`:
```json
{
"preferredVersions": {
- "php": "8.0",
- "wp": "6.8"
+ "php": "8.3",
+ "wp": "6.1"
}
}
```