Skip to content
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

Jump to bottom

Add a secret message #47739

Open
wants to merge 9 commits into
base: trunk
Choose a base branch
from
Open

Add a secret message #47739

wants to merge 9 commits into from

Conversation

adamziel
Copy link
Contributor

@adamziel adamziel commented Feb 3, 2023 •
edited
Loading

Adds a secret message in wp-admin:

CleanShot 2023-04-28 at 19 27 36@2x

Try it here: https://playground.wordpress.net/wordpress.html?gutenberg-pr=47739&php=7.4&url=/wp-admin/plugins.php?test=42test

(Please ignore this test Pull Request)

@github-actions
Copy link

github-actions bot commented Feb 3, 2023

Flaky tests detected in 86aedc0.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4084941710
📝 Reported issues:

This was referenced Feb 3, 2023
Merged
Closed
adamziel added a commit to WordPress/wordpress-playground that referenced this pull request Apr 26, 2023
@adamziel
Support previewing Gutenberg Pull Requests (#126)
a7a16ae 
## Description

Adds support for previewing Gutenberg Pull Requests via the a `gutenberg-pr` query parameter:

https://playground.wordpress.net/wordpress.html?gutenberg-pr=47739&url=/wp-admin/plugins.php?test=test

My test PR: WordPress/gutenberg#47739

<img width="1149" alt="CleanShot 2023-02-03 at 19 33 17@2x" src="https://user-images.githubusercontent.com/205419/216681315-2af555c1-6249-4758-afe0-aa54b66c68a3.png">

## Implementation

The plugin bundle is downloaded from GitHub CI and installed by applying the following Blueprint:

```js
function applyGutenbergPRSteps(prNumber: number): StepDefinition[] {
	return [
		{
			step: 'mkdir',
			path: '/wordpress/pr',
		},
		{
			step: 'writeFile',
			path: '/wordpress/pr/pr.zip',
			data: {
				resource: 'url',
				url: `/plugin-proxy?org=WordPress&repo=gutenberg&workflow=Build%20Gutenberg%20Plugin%20Zip&artifact=gutenberg-plugin&pr=${prNumber}`,
				caption: `Downloading Gutenberg PR ${prNumber}`,
			},
			progress: {
				weight: 2,
				caption: `Applying Gutenberg PR ${prNumber}`,
			},
		},
		{
			step: 'unzip',
			zipPath: '/wordpress/pr/pr.zip',
			extractToPath: '/wordpress/pr',
		},
		{
			step: 'installPlugin',
			pluginZipFile: {
				resource: 'vfs',
				path: '/wordpress/pr/gutenberg.zip',
			},
		},
	];
}
```

Gutenberg PR preview from playground.wordpress.net can be embedded in other apps via an iframe.

To implement your own PR previewer that pulls data from another repo, you'll need to expose an API endpoint to download the ZIP bundle and then plug it in the `writeFile` step above. Once you have that, here's how you'd apply a custom blueprint:

```ts
import { startPlaygroundWeb } from "https://unpkg.com/@wp-playground/client@0.1.32/index.js";
startPlaygroundWeb({
	iframe,
	remoteUrl: `https://playground.wordpress.net/remote.html`,
	blueprint: {
		steps: applyPR( 47339 )
	}
})

function applyPR( prNumber ) {
	return [
		{
			step: 'mkdir',
			path: '/wordpress/pr',
		},
		// ...
	];
}
```
adamziel
adamziel commented Apr 28, 2023
View reviewed changes
lib/init.php Outdated Show resolved Hide resolved
adamziel
adamziel commented Apr 28, 2023
View reviewed changes
lib/init.php Outdated Show resolved Hide resolved
adamziel
adamziel commented Apr 29, 2023
View reviewed changes
lib/init.php Outdated Show resolved Hide resolved
Pookie717 added a commit to Pookie717/wordpress-playground that referenced this pull request Oct 1, 2023
@Pookie717
Support previewing Gutenberg Pull Requests (#126)
228a1d2 
## Description

Adds support for previewing Gutenberg Pull Requests via the a `gutenberg-pr` query parameter:

https://playground.wordpress.net/wordpress.html?gutenberg-pr=47739&url=/wp-admin/plugins.php?test=test

My test PR: WordPress/gutenberg#47739

<img width="1149" alt="CleanShot 2023-02-03 at 19 33 17@2x" src="https://user-images.githubusercontent.com/205419/216681315-2af555c1-6249-4758-afe0-aa54b66c68a3.png">

## Implementation

The plugin bundle is downloaded from GitHub CI and installed by applying the following Blueprint:

```js
function applyGutenbergPRSteps(prNumber: number): StepDefinition[] {
	return [
		{
			step: 'mkdir',
			path: '/wordpress/pr',
		},
		{
			step: 'writeFile',
			path: '/wordpress/pr/pr.zip',
			data: {
				resource: 'url',
				url: `/plugin-proxy?org=WordPress&repo=gutenberg&workflow=Build%20Gutenberg%20Plugin%20Zip&artifact=gutenberg-plugin&pr=${prNumber}`,
				caption: `Downloading Gutenberg PR ${prNumber}`,
			},
			progress: {
				weight: 2,
				caption: `Applying Gutenberg PR ${prNumber}`,
			},
		},
		{
			step: 'unzip',
			zipPath: '/wordpress/pr/pr.zip',
			extractToPath: '/wordpress/pr',
		},
		{
			step: 'installPlugin',
			pluginZipFile: {
				resource: 'vfs',
				path: '/wordpress/pr/gutenberg.zip',
			},
		},
	];
}
```

Gutenberg PR preview from playground.wordpress.net can be embedded in other apps via an iframe.

To implement your own PR previewer that pulls data from another repo, you'll need to expose an API endpoint to download the ZIP bundle and then plug it in the `writeFile` step above. Once you have that, here's how you'd apply a custom blueprint:

```ts
import { startPlaygroundWeb } from "https://unpkg.com/@wp-playground/client@0.1.32/index.js";
startPlaygroundWeb({
	iframe,
	remoteUrl: `https://playground.wordpress.net/remote.html`,
	blueprint: {
		steps: applyPR( 47339 )
	}
})

function applyPR( prNumber ) {
	return [
		{
			step: 'mkdir',
			path: '/wordpress/pr',
		},
		// ...
	];
}
```
@ironnysh ironnysh mentioned this pull request Apr 17, 2024
Merged
adamziel pushed a commit to WordPress/wordpress-playground that referenced this pull request Apr 19, 2024
@ironnysh
Docs: Fix the Blueprint example of the Gutenberg PR preview (#1268)
33196bf 
Fixes the Playground example embedded in [this documentation
page](https://wordpress.github.io/wordpress-playground/build-your-first-app#preview-pull-requests-from-your-repository),
which didn't load.

## How is the problem addressed?

1. Resolved the errors displayed in the browser console.
2. Updated the Blueprint based on the [code of the official
Previewer](https://github.com/WordPress/wordpress-playground/blob/trunk/packages/playground/website/public/gutenberg.html).
3. Replaced [the PR](WordPress/gutenberg#60819)
loaded in the example.

### Why step 3?

It seems that there's an unrelated problem with [the specific PR
used](WordPress/gutenberg#47739) in the demo:
1. It doesn't work when loading it directly in the [Gutenberg PR
Previewer](https://playground.wordpress.net/gutenberg.html).
2. Other random PRs load correctly in the example.

Using 60819 can be a temporary workaround.

## Testing Instructions

1. Run `nx dev docs-site`.
2. Go to [this documentation
page](https://wordpress.github.io/wordpress-playground/build-your-first-app#preview-pull-requests-from-your-repository).
4. Scroll a bit, and click the **Try it now** button.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@spacedmonkey spacedmonkey Awaiting requested review from spacedmonkey spacedmonkey is a code owner

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@adamziel