UI to install WordPress plugins on Playground.wordpress.net

[adamziel]

Let's add UI to install WordPress Plugins on playground.wordpress.net. It may or may not be similar to the one we already have for selecting specific PHP and WP versions (thanks to @elchead):

Technically, that UI only needs to reload the page with one more plugin parameters, e.g. &plugin=coblocks&plugin=friends. The challenge here is creating an ergonomic user experience.

A good starting point is this file rendering the entire Playground.wordpress.net website:

https://github.com/WordPress/wordpress-playground/blob/413d07f1ac04fd52846fddec6906677e3a1d2a4e/packages/playground/website/src/main.tsx#L52

Done is:

• A UI control for adding plugins exists
• It works well on mobile

[cpapazoglou]

Some ideas:

• We can use react-select to render a multiple selection list of plugins https://react-select.com/home
• Use the async feature of react-select to search and list results from .org plugins repo
• Reload the browser with the selected plugins eg &plugin=coblocks&plugin=friends ( as suggested )
• Populate the selected plugins in the dropdown as the selected state - making it easier to choose one more plugin

[cpapazoglou]

Another idea:

• Add a "settings" component
• Clicking on "settings" it would popup a modal where you selected plugins are displayed and you can search for more ( search would trigger an API call to https://api.wordpress.org/plugins/info/1.1/?action=query_plugins&request%5Bsearch%5D=coblocks )

[dmsnell]

oh actually the settings view is a lovely idea, made accessible to all kinds of instances vs. having a specific page.

[adamziel]

Just noting we have this modal now – should make things easier:

[adamziel]

Instead of doing more custom UI, let's focus on creating a Blueprints builder and integrating it with playground.wordpress.net. It could eventually become the UI control for the settings view.