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.

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

wordpress-develop Pull Request previewer #700

Merged
merged 7 commits into from
Oct 17, 2023

Conversation

adamziel
Copy link
Collaborator

@adamziel adamziel commented Oct 13, 2023

What is this PR doing?

Support for previewing wordpress-develop Pull Requests.

CleanShot 2023-10-13 at 18 53 52@2x

Tell me more!

The previewer lives at https://playground.wordpress.net/wordpress.html and supports a few query parameters:

  • ?pr=5481 – preview that PR
  • ?url=/wp-admin/post-new.php – load that URL in WordPress
  • ?mode=seamless – redirect to a full-screen Playground without the browser chrome and any other extra UI elements

For example, I could use the following URL to preview PR 5511 and immediately navigate to /wp-admin/post-new.php?test=1:

https://playground.wordpress.net/wordpress.html?pr=5511&url=/wp-admin/post-new.php?test=1

CleanShot 2023-10-17 at 17 45 36@2x

Caveats

The downloaded WordPress bundle is ~45MB and takes a while to download without any visible progress information. Let's find a way to optimize it.

Testing instructions

  1. Go to http://localhost:5400/website-server/wordpress.html
  2. Preview PR 5481 (no other PR works yet, see Store WordPress "build" directory as an artifact to enable live previews with Playground wordpress-develop#5481)
  3. Confirm in wp-admin the WordPress version is 6.4 dev

Screenshots

CleanShot 2023-10-13 at 18 58 36@2x

cc @spacedmonkey @fabiankaegy @dmsnell @jonathanbossenger @dawidurbanski

@jeffpaul
Copy link
Member

Note that this relates to https://core.trac.wordpress.org/ticket/59416 and alongside optimizing the bundle download we can look into an automation to share a direct link in PRs as described in that Trac ticket. Great work here @adamziel, I LOVE IT!!!

adamziel added a commit that referenced this pull request Oct 16, 2023
This PR moves applying a WordPress patch from the Dockerfile, where WP
is built into a `.data` file, to JavaScript, where it can be applied to
any arbitrary WordPress installation.

This is needed to patch WordPress branches in Pull Request previewer.
See #700.

Testing instructions:

1. Run Playground with `npm run start`
2. Go to the block editor
3. Confirm that inserter's CSS is loaded (black + icon)
4. Install the Gutenberg plugin
5. Confirm that inserter's CSS is still loaded

Related to #668, #646.
adamziel added a commit that referenced this pull request Oct 16, 2023
#702)

Replaces approximate rules such as

```js
if(path.startsWith('/wp-content')) {
    // serve from VFS
} else {
    // serve from remote server
}
```

With actual file existence check.

## Context

When a static file is requested from Playground, the service worker
doesn't know whether to serve it from VFS or playground.wordpress.net.
It tries to guess that based on approximate rules such as
`path.startsWith('/wp-content')`. This usually works, but is not very
reliable. For example, when you store an entirely new WordPress instance
in VFS, you would expect all the static assets to be served from VFS,
but that is not what the request handler would do.

This does not play well with previewing WordPress Pull Requests as we're
actually replacing the entire WordPress instance in VFS with an
arbitrary branch.

Related to #700
Closes #109

## Testing Instructions

1. Start Playground `npm run start`
2. Use it for a bit, go to wp-admin, confirm that static assets like CSS
and JS files are loaded without issues
3. Upload something, confirm that worked too

## Breaking change

The `isStaticFilePath` option is removed in this PR..

This is a breaking change in public API and may be relevant for wp-now
CC @sejas @danielbachhuber.

While that sounds scary, everything should "just work" without major
changes required in wp-now, other than removing this usage of
`isStaticFilePath`:


https://github.com/WordPress/playground-tools/blob/d792d7f03323aa0ec34e5885e4aebd5741d96f24/packages/wp-now/src/wp-now.ts#L53-L65
adamziel added a commit that referenced this pull request Oct 16, 2023
This PR moves applying a WordPress patch from the Dockerfile, where WP
is built into a `.data` file, to JavaScript, where it can be applied to
any arbitrary WordPress installation.

This is needed to patch WordPress branches in Pull Request previewer.
See #700.

Testing instructions:

1. Run Playground with `npm run start`
2. Go to the block editor
3. Confirm that inserter's CSS is loaded (black + icon)
4. Install the Gutenberg plugin
5. Confirm that inserter's CSS is still loaded

Related to #668, #646.
adamziel added a commit that referenced this pull request Oct 16, 2023
…ile (#703)

This PR moves applying a WordPress patch from the Dockerfile, where WP
is built into a `.data` file, to JavaScript, where it can be applied to
any arbitrary WordPress installation.

This is needed to patch WordPress branches in Pull Request previewer.
See #700.

## Testing instructions:

1. Run Playground with `npm run start`
2. Go to the block editor
3. Confirm that inserter's CSS is loaded (black + icon)
4. Install the Gutenberg plugin
5. Confirm that inserter's CSS is still loaded

Related to #668, #646.
adamziel added a commit that referenced this pull request Oct 16, 2023
…e.html.

Enables patching arbitrary WordPress bundles for compatibility with web
browsers. Without this PR, remote.html applies these patch right after
the WordPress module is loaded into the /wordpress VFS directory.
However, in #700 we want to enable using an arbitrary WordPress build
from any PR in wordpress-develop. We must, thus, expose a way of
applying the necessary patches.

Testing instructions

1. Start Playground, log out
2. Go to /wp-login.php
3. Confirm there's a message explaining what login credentials to use
adamziel added a commit that referenced this pull request Oct 16, 2023
…e.html.

Enables patching arbitrary WordPress bundles for compatibility with web
browsers. Without this PR, remote.html applies these patch right after
the WordPress module is loaded into the /wordpress VFS directory.
However, in #700 we want to enable using an arbitrary WordPress build
from any PR in wordpress-develop. We must, thus, expose a way of
applying the necessary patches.

Testing instructions

1. Start Playground, log out
2. Go to /wp-login.php
3. Confirm there's a message explaining what login credentials to use
adamziel added a commit that referenced this pull request Oct 16, 2023
…e.html (#706)

Enables patching arbitrary WordPress bundles for compatibility with web
browsers. Without this PR, remote.html applies these patch right after
the WordPress module is loaded into the /wordpress VFS directory.
However, in #700
we want to enable using an arbitrary WordPress build
from any PR in wordpress-develop. We must, thus, expose a way of
applying the necessary patches.

## Testing instructions

1. Start Playground, log out
2. Go to /wp-login.php
3. Confirm there's a message explaining what login credentials to use

<img width="419" alt="CleanShot 2023-10-16 at 12 40 13@2x"
src="https://github.com/WordPress/wordpress-playground/assets/205419/9d775c67-c9cb-4826-bd90-9ef766c697b2">
@adamziel
Copy link
Collaborator Author

adamziel commented Oct 16, 2023

This PR is ready! The only blocker now is WordPress/wordpress-develop#5481 – once it lands I'll update the workflow name in here and WordPress will finally have a PR previewer!

Add wordpress.html, a simple HTML form that enables previewing
any WordPress core Pull Request.

Technically, it's very similar to gutenberg.html – it just creates a
tailored Blueprint and redirects to Playground with that Blueprint
applied.

*Caveats*
This leans on storing WordPress builds as a GitHub artifact in CI. For now only one PR does that – WordPress/wordpress-develop#5481. Once it's merged, the previewer proposed in this PR will work for every wordpress-develop Pull Request!

The downloaded WordPress bundle is ~45MB and takes a while to download without any visible progress information. Let's find a way to optimize it.
@adamziel
Copy link
Collaborator Author

adamziel commented Oct 17, 2023

🚢 !

This will only work for Pull Requests targeting wordpress-develop trunk after 8077c0723fd1c8c825ec66df6edad1a1719991d6. If you want to preview yours, just rebase it!

The previewer lives at https://playground.wordpress.net/wordpress.html. You can use the form on that page, or create a direct preview URL as in this PR's description.

For example, here's the URL to preview PR 5511:

https://playground.wordpress.net/wordpress.html?pr=5511&url=/wp-admin/post-new.php?test=1

The largest issue is: downloading the build file is sloooow. Let's find a way to optimize it.

@adamziel adamziel merged commit ae7a8e0 into trunk Oct 17, 2023
4 checks passed
@adamziel adamziel deleted the support-wordpress-pr-preview branch October 17, 2023 14:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants