Skip to content

[Docs] Updating repository preview info #2890

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.

Sign up for GitHub

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

Open
wants to merge 6 commits into
base: trunk
Choose a base branch
from
+700 −29
Open

[Docs] Updating repository preview info #2890

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2bb4124
Adding information about the resource type git repository
fellyph Nov 12, 2025
8314e37
Adding page description, new Queries and github preview
fellyph Nov 12, 2025
85dcee6
adding spanish translation
fellyph Nov 12, 2025
c7618af
adding French translation
fellyph Nov 12, 2025
269cd59
updating portuguese translation
fellyph Nov 12, 2025
c31cee9
updating blueprint demo to load a pull request
fellyph Nov 13, 2025
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
52 changes: 42 additions & 10 deletions packages/docs/site/docs/developers/03-build-an-app/01-index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -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.
<ThisIsQueryApi />

```html
Expand Down Expand Up @@ -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"
}
Expand All @@ -85,15 +85,38 @@ 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"
}
}
]
}
```

- 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
{
Expand Down Expand Up @@ -154,9 +177,18 @@ blueprint={{
]
}} />

### Preview WordPress Core and Gutenberg Branches or PRs

You can preview specific branches or pull requests from WordPress Core and Gutenberg repositories using Query API parameters. This is useful for testing the latest trunk changes or specific feature branches without creating a PR.

- Preview WordPress Core trunk branch: `https://playground.wordpress.net/?core-branch=trunk`
- Preview a specific WordPress Core PR: `https://playground.wordpress.net/?core-pr=9500`
- Preview the Gutenberg trunk branch: `https://playground.wordpress.net/?gutenberg-branch=trunk`
- Preview a specific Gutenberg PR: `https://playground.wordpress.net/?gutenberg-pr=73010`

## 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:

Expand Down
299 changes: 299 additions & 0 deletions ...s/docusaurus-plugin-content-docs/current/developers/03-build-an-app/01-index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,299 @@
---
title: Guía de inicio rápido para desarrolladores
slug: /developers/build-your-first-app
description: Guía práctica para integrar WordPress, instalar plugins, previsualizar PRs y crear aplicaciones con las APIs de Playground.
---

<!-- # Quick Start Guide for Developers -->

# Guía de inicio rápido para desarrolladores

<!-- WordPress Playground was created as a programmable tool. Below you'll find a few examples of what you can do with it. Each discussed API is described in detail in the [APIs section](/developers/apis/): -->

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';

<TOCInline toc={toc} />

<!-- ## Embed WordPress on your website -->

## Integrar WordPress en tu sitio web

<!-- Playground can be embedded on your website using the HTML `<iframe>` tag as follows: -->

Playground se puede integrar en tu sitio web usando la etiqueta HTML `<iframe>` de la siguiente manera:

```html
<iframe src="https://playground.wordpress.net/"></iframe>
```

<!-- Every visitor will get their own private WordPress instance for free. You can then customize it using one of the [Playground APIs](/developers/apis/). -->

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';

<PlaygroundWpNetWarning />

<!-- ## Control the embedded website -->

## Controlar el sitio web integrado

<!-- WordPress Playground provides three APIs you can use to control the iframed website. All the examples in this section are built using one of these: -->

WordPress Playground proporciona tres APIs que puedes usar para controlar el sitio web en iframe. Todos los ejemplos en esta sección se construyen usando una de estas:

import APIList from '@site/docs/\_fragments/\_api_list.mdx';

<APIList />

<!-- Learn more about each of these APIs in the [APIs overview section](/developers/apis/). -->

Aprende más sobre cada una de estas APIs en la [sección de descripción general de APIs](/developers/apis/).

<!-- ## Showcase a plugin or theme from WordPress directory -->

## Mostrar un plugin o tema del directorio de WordPress

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. This iframe preinstalls the `coblocks` and `friends` plugins and the `pendant` theme. -->

Puedes instalar plugins y temas del directorio de WordPress con solo parámetros de URL. Este iframe preinstala los plugins `coblocks` y `friends` y el tema `pendant`.

<ThisIsQueryApi />

```html
<iframe src="https://playground.wordpress.net/?plugin=coblocks"></iframe>
```

<!-- ## Showcase any plugin or theme -->

## Mostrar cualquier plugin o tema

<!-- What if your plugin is not in the WordPress directory? -->

¿Y si tu plugin no está en el directorio de WordPress?

<!-- You can still showcase it on Playground by using [JSON Blueprints](/blueprints). For example, this Blueprint would download and install a plugin and a theme from your website and also import some starter content: -->

Aún puedes mostrarlo en Playground usando [JSON Blueprints](/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"
}
}
]
}
```

<!-- See [getting started with Blueprints](/blueprints/getting-started) to learn more. -->

Consulta [comenzando con Blueprints](/blueprints/getting-started) para obtener más información.

<!-- ## Preview pull requests from your repository -->

## Previsualizar pull requests de tu repositorio

<!-- 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): -->

Puedes previsualizar el 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": "add-feature-xyz",
"refType": "branch"
}
}
]
}
```

<!-- `git:directory` requires no CI configuration. Using a direct .zip URL performs better because Playground downloads a single file, but requires CI setup. -->

`git:directory` no requiere configuración de CI. Usar una URL .zip directa tiene mejor rendimiento porque Playground descarga un solo archivo, pero requiere configuración de CI.

<!-- See the [live example of Gutenberg PR previewer](https://playground.wordpress.net/gutenberg.html). -->

Consulta el [ejemplo en vivo del previsualizador de PR de Gutenberg](https://playground.wordpress.net/gutenberg.html).

<!-- To use Playground as a PR previewer, you need: -->

Para usar Playground como previsualizador de PR, necesitas:

<!-- - A CI pipeline that bundles your plugin or theme -->
<!-- - Public access to the generated `.zip` file -->

- Un pipeline de CI que empaquete tu plugin o tema
- Acceso público al archivo `.zip` generado

<!-- 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: -->

Esos paquetes zip no son diferentes de los plugins de WordPress normales, lo que significa que puedes instalarlos en Playground usando la API [JSON Blueprints](/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"
}
}
]
}
```

<!-- The official Playground demo uses this technique to preview pull requests from the Gutenberg repository: -->

La demostración oficial de Playground utiliza esta técnica para previsualizar pull requests del repositorio de Gutenberg:

import BlueprintExample from '@site/src/components/Blueprints/BlueprintExample.mdx';

<BlueprintExample
blueprint={{
"landingPage": "/wp-admin/plugins.php?test=42test",
"steps": [
{
"step": "login",
"username": "admin",
"password": "password"
},
{
"step": "mkdir",
"path": "/wordpress/pr"
},
{
"step": "writeFile",
"path": "/wordpress/pr/pr.zip",
"data": {
"resource": "url",
"url": "/plugin-proxy.php?org=WordPress&repo=gutenberg&workflow=Build%20Gutenberg%20Plugin%20Zip&artifact=gutenberg-plugin&pr=60819",
"caption": "Downloading Gutenberg PR 47739"
},
"progress": {
"weight": 2,
"caption": "Applying Gutenberg PR 47739"
}
},
{
"step": "unzip",
"zipPath": "/wordpress/pr/pr.zip",
"extractToPath": "/wordpress/pr"
},
{
"step": "installPlugin",
"pluginData": {
"resource": "vfs",
"path": "/wordpress/pr/gutenberg.zip"
}
}
]
}} />

<!-- ### Preview WordPress Core and Gutenberg Branches or PRs -->

### Previsualizar ramas o PRs de WordPress Core y Gutenberg

<!-- You can preview specific branches or pull requests from WordPress Core and Gutenberg repositories using Query API parameters. This is useful for testing the latest trunk changes or specific feature branches without creating a PR. -->

Puedes previsualizar ramas o pull requests específicas de los repositorios de WordPress Core y Gutenberg usando parámetros de la Query API. Esto es útil para probar los últimos cambios del trunk o ramas de características específicas sin crear un PR.

<!-- - Preview WordPress Core trunk branch: `https://playground.wordpress.net/?core-branch=trunk` -->
<!-- - Preview a specific WordPress Core PR: `https://playground.wordpress.net/?core-pr=9500` -->
<!-- - Preview the Gutenberg trunk branch: `https://playground.wordpress.net/?gutenberg-branch=trunk` -->
<!-- - Preview a specific Gutenberg PR: `https://playground.wordpress.net/?gutenberg-pr=73010` -->

- Previsualizar rama trunk de WordPress Core: `https://playground.wordpress.net/?core-branch=trunk`
- Previsualizar un PR específico de WordPress Core: `https://playground.wordpress.net/?core-pr=9500`
- Previsualizar rama trunk de Gutenberg: `https://playground.wordpress.net/?gutenberg-branch=trunk`
- Previsualizar un PR específico de Gutenberg: `https://playground.wordpress.net/?gutenberg-pr=73010`

<!-- ## Build a compatibility testing environment -->

## Crear un entorno de pruebas de compatibilidad

<!-- Test your plugin across PHP and WordPress versions by configuring them in Playground. This helps you verify compatibility before release. -->

Prueba tu plugin en diferentes versiones de PHP y WordPress configurándolas en Playground. Esto te ayuda a verificar la compatibilidad antes del lanzamiento.

<!-- With the Query API, you'd simply add the `php` and `wp` query parameters to the URL: -->

Con la Query API, simplemente agregarías los parámetros de consulta `php` y `wp` a la URL:

```html
<iframe src="https://playground.wordpress.net/?php=8.3&wp=6.1"></iframe>
```

<!-- With JSON Blueprints, you'd use the `preferredVersions` property: -->

Con JSON Blueprints, usarías la propiedad `preferredVersions`:

```json
{
"preferredVersions": {
"php": "8.3",
"wp": "6.1"
}
}
```

<!-- ## Run PHP code in the browser -->

## Ejecutar código PHP en el navegador

<!-- The JavaScript API provides the `run()` method which you can use to run PHP code in the browser: -->

La API de JavaScript proporciona el método `run()` que puedes usar para ejecutar código PHP en el navegador:

```html
<iframe id="wp"></iframe>
<script type="module">
const client = await startPlaygroundWeb({
iframe: document.getElementById('wp'),
remoteUrl: 'https://playground.wordpress.net/remote.html',
});
await client.isReady;
await client.run({
code: `<?php
require("/wordpress/wp-load.php");

update_option("blogname", "Playground is really cool!");
echo "Site title updated!";
`,
});
client.goTo('/');
</script>
```

<!-- Combine that with a code editor like Monaco or CodeMirror, and you'll get live code snippets like in [this article](https://adamadam.blog/2023/02/16/how-to-modify-html-in-a-php-wordpress-plugin-using-the-new-tag-processor-api/)! -->

¡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/)!
Loading