Skip to content
Open
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
57 changes: 47 additions & 10 deletions packages/docs/site/docs/developers/03-build-an-app/01-index.md
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,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
{
Expand Down Expand Up @@ -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:

Expand Down
Loading
Loading