Add Preview in Playground buttons to plugin install screens

[tellyworth]

Proposal: add Preview buttons to plugin install screens within wp-admin.

Background:

The WordPress.org Plugin Directory now supports a Live Preview feature based on Playground; see ​https://meta.trac.wordpress.org/ticket/7251 for context.

You can see an example working on the ​https://wordpress.org/plugins/convert-to-blocks/ plugin. Previews are currently only enabled on plugins where the developer has opted in and provided a blueprint.json file (which provides setup and configuration info).

The preview button on the web site works simply by redirecting from https://wordpress.org/plugins/PLUGIN-SLUG/?preview=1 to a playground.wordpress.net URL which loads the plugin's blueprint file. It opens the playground URL in a new window using target="_blank".

I'm proposing that we do essentially the same thing from within wp-admin, on screens with an Install button for plugins: add a Preview button, which opens https://wordpress.org/plugins/PLUGIN-SLUG/?preview=1 in a new window.

The wordpress.org plugins API already returns a preview_link property containing the appropriate URL for plugins with a working preview.

I'll attach a diff with a minimal implementation; this is intended as a starting point for testing and discussion, not a finished patch in its current state.

[tellyworth]

Initial draft patch for discussion and review

[tellyworth]

Here's what the button looks like in the plugin search/card view.

[tellyworth]

And here's what the button looks like on the plugin detail view (bottom left).

[tellyworth]

I added two screenshots showing the current state of the UI - it's basic and needs some feedback from design as to whether or not it's acceptable.

Trac ticket: https://core.trac.wordpress.org/ticket/60194

[nikunj8866]

​https://github.com/WordPress/wordpress-develop/pull/10200 PR adds a "Live Preview" button to the plugin install screen, allowing users to try plugins in a Playground-based environment before installation.

The button is only displayed when:

• The plugin provides a valid preview_link in its API data.
• The plugin is not already installed.

This enhancement builds upon the WordPress.org Plugin Directory changes that introduced Live Previews (see meta ticket #7251).

Steps to Test

1. Go to Plugins → Add New in the WordPress admin dashboard.
2. Search for a plugin with a preview available. For example, try searching for "Convert to Blocks".
3. Confirm that a "Live Preview" button appears next to "Install Now".
4. The button should open the preview in a new browser tab.

[nikunj8866]

Live Preview button link for Plugin Install Screen

[nikunj8866]

Live Preview button on more detail popup.

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: https://core.trac.wordpress.org/ticket/60194

Environment

• WordPress: 6.8.3
• PHP: 8.0.30-dev
• Server: PHP.wasm
• Database: WP_SQLite_Driver (Server: 5.5 / Client: 3.40.1)
• Browser: Chrome 141.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.3
• MU Plugins: None activated
• Plugins:

• Convert to Blocks 1.3.4
• Test Reports 1.2.0
• WordPress Importer 0.9.4

Steps tested

1. Navigated to Plugins → Add New

2. Searched for Convert to Blocks

3. Verified the Live Preview button is displayed

4. Clicked the button → redirected to Playground:

5. ​https://playground.wordpress.net/?plugin=convert-to-blocks&blueprint-url=https%3A%2F%2Fwordpress.org%2Fplugins%2Fwp-json%2Fplugins%2Fv1%2Fplugin%2Fconvert-to-blocks%2Fblueprint.json%3Frev%3D3328483%26lang%3Den_US

6. Playground loaded the plugin successfully

7. Button did not appear for plugins without a preview link

8. After installing, Live Preview button disappeared

Actual Results

1. ✅ Issue resolved with patch.

Additional Notes

• Any additional details worth mentioning.

Supplemental Artifacts

Add Inline: ​[Image([https://www.awesomescreenshot.com/image/57153858?key=4b25c234b928b287820d30c0a429f2a9)]]

@nikunj8866 Tested the PR with wordpress playground and it's working fine