WordPress in the browser #241

aplamada · 2022-12-10T09:10:58Z

WordPress Playground can be one way to allow any person to test inseri.
The plugin following could be installed following the documentation - see Installing plugins.

This is additional to an WP instance that the early adopters can test.

aplamada · 2023-03-21T16:25:17Z

WordPress Playground can be used to install the inseri core plugin via the zip archive.
The admin panel does not work as desired (and therefore the corresponding WebAPI block).
The other blocks look ok.

aplamada · 2023-03-29T11:55:15Z

One can export the content using Tools -> Export and import it in a similar way to the playground.
The media library content is not really imported (maybe not even exported) but all pages/posts/styles work fine, assuming the same theme.

For the local Wordpress deployment the experience was good.

aplamada · 2023-03-29T12:42:42Z

https://wasm.wordpress.net/ allows to even download the state and upload it back.

You can try to upload the next one ... and in the worst example we will ask the users to do this initial manual step.
wordpress-playground--wp6.1--php8.0.zip

aplamada · 2023-03-29T12:47:42Z

See WordPress/wordpress-playground#88 for the on-going work.

adamziel · 2023-04-13T10:25:05Z

👋 @aplamada you could set up an HTML page that uses WordPress Playground public API to install and configure the plugin for the user:

<!DOCTYPE html>
<html>
	<head>
		<title>WordPress Playground</title>
	</head>
	<body>
		<iframe id="wp" style="width: 1200px; height: 800px"></iframe>
		<script type="module">
			import { connectPlayground, login, installPlugin } from 'https://unpkg.com/@wp-playground/client/index.js';

			const client = await connectPlayground(
				document.getElementById('wp'),
				{ loadRemote: 'https://playground.wordpress.net/remote.html' }
			);
			
			await client.isReady();
			await login(client, 'admin', 'password');

			// Assuming inseri.zip is hosted with this HTML file:
			const response = await fetch('./inseri.zip');
			const inseriFile = new File([await response.blob()], 'inseri.zip');

			await installPlugin( client, inseriFile );

			// Redirect to the right landing page
			await client.goTo( '/wp-admin/' );
		</script>
	</body>
</html>

It might take a while to load so you may want to implement a minimal progress bar to make the wait a better experience. Here's how GlotPress Playground did it: https://github.com/akirk/wp-glotpress-playground/blob/main/index.php

Keep in mind https://playground.wordpress.net/remote.html isn't a stable API yet and might have breaking changes at one point. Hopefully not many, but still. If you need a no-maintenance-involved experience, you can host your own WordPress Playground instance.

aplamada · 2023-04-13T10:40:01Z

@adamziel Many thanks for the instructions. So far I managed to use the Dockerfile from compile-wordpress to create my own local environment. Basically installing the plugin and changing the displayed content.

ADD input /input

RUN cd wordpress && \
  ../wp-cli.phar --allow-root plugin install /input/inseri-core.zip && \
  ../wp-cli.phar --allow-root plugin activate inseri-core

RUN  cd wordpress && \
  ../wp-cli.phar  --allow-root post delete $(../wp-cli.phar --allow-root post list --post_type='page,post' --format=ids) &&\
  ../wp-cli.phar  --allow-root import /input/inseriswiss.WordPress.xml --authors=skip &&\
  ../wp-cli.phar  --allow-root post delete $(../wp-cli.phar --allow-root post list --post_type='page' --format=ids)

I still have to learn what to do next.

I was thinking whether it would be possible to use GitHub Pages to host my Playground. Do you see any limitations?

adamziel · 2023-04-13T10:59:29Z

Oh that Dockerfile builds a highly optimized .data file containing WordPress. Surely you can include your plugin in it if you want to shave every microsecond from the initial loading time, but it's pretty inconvenient to work with AND you'll likely need to rebuild it every time a new version of WordPress or your plugin is released.

I'd recommend not starting there.

Instead, you could use the WordPress Playground public API. That's what the HTML file I posted above does. There's some documentation here and here with more to come. In a nutshell, you can embed Playground inside an <iframe> and then control it using JavaScript functions - you wouldn't even need to set up Playground locally for that.

However if you'd like to use a local Playground, you'd still use the same public API. The only difference would be the iframe pointing to http://localhost:4400/remote.html instead of https://playground.wordpress.net/remote.html. Oh, and make sure to run the npm run dev command beforehand.

Let me know if that answers some of your questions. If not, I'm happy to keep answering :-)

adamziel · 2023-04-13T11:01:49Z

I was thinking whether it would be possible to use GitHub Pages to host my Playground. Do you see any limitations?

I tried that initially! I found that downloading 2MB of data from GitHub pages (php.wasm) can be painfully slow. I'm not sure why was that and your experience might be different.

The only real limitation is that Playground uses a network proxy written in PHP. It's only used if you want to install plugins or themes from WordPress.org directory. If you don't need that, GitHub pages will work.

aplamada · 2023-04-15T15:01:31Z

Thanks @adamziel !
I followed your recommendation and used the public API together with the progress bar - everything is working as desired at least locally using the Live Server from VS Code.

But for my particular use case, it would be convenient to have a way to import some posts from the public WordPress (already exported as a WXR XML file). Do you know how to achieve this?
The aim is to allow the users to see/explore the functionality of the new blocks starting from some examples.

adamziel · 2023-04-21T16:46:34Z

Thanks @adamziel ! I followed your recommendation and used the public API together with the progress bar - everything is working as desired at least locally using the Live Server from VS Code.

Yay! I'm super glad to hear that

But for my particular use case, it would be convenient to have a way to import some posts from the public WordPress (already exported as a WXR XML file). Do you know how to achieve this? The aim is to allow the users to see/explore the functionality of the new blocks starting from some examples.

In a recent PR I merged a submitImporterForm() helper that does just that! It's not yet released on npm, but you should be able to copy and reuse the code since it's based on the PlaygroundClient object you get from connectPlayground.

In addition, I'm working on a Playground Blueprint format that will allow you to import a WXR file by just specifying its URL :)

aplamada · 2023-05-02T04:57:04Z

@adamziel Thanks! I start using the Playground Blueprint and it works as desired - so far without importing the WXR but I plan to try it in the near future.

aplamada added prototype idea and removed prototype labels Dec 10, 2022

aplamada added this to the sprint 11 milestone Feb 21, 2023

aplamada self-assigned this Apr 17, 2023

This was referenced Apr 20, 2023

Feat/init playground inseri-swiss/inseri-playground#1

Closed

Initialise Playground inseri-swiss/inseri-playground#2

Merged

aplamada closed this as completed in inseri-swiss/inseri-playground#2 Apr 20, 2023

aplamada mentioned this issue Apr 21, 2023

improve inseri Playground 1 #274

Closed

3 tasks

aplamada transferred this issue from inseri-swiss/inseri-swiss Nov 18, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WordPress in the browser #241

WordPress in the browser #241

aplamada commented Dec 10, 2022 •

edited

Loading

aplamada commented Mar 21, 2023 •

edited

Loading

aplamada commented Mar 29, 2023

aplamada commented Mar 29, 2023

aplamada commented Mar 29, 2023

adamziel commented Apr 13, 2023 •

edited

Loading

aplamada commented Apr 13, 2023

adamziel commented Apr 13, 2023 •

edited

Loading

adamziel commented Apr 13, 2023 •

edited

Loading

aplamada commented Apr 15, 2023

adamziel commented Apr 21, 2023 •

edited

Loading

aplamada commented May 2, 2023

WordPress in the browser #241

WordPress in the browser #241

Comments

aplamada commented Dec 10, 2022 • edited Loading

aplamada commented Mar 21, 2023 • edited Loading

aplamada commented Mar 29, 2023

aplamada commented Mar 29, 2023

aplamada commented Mar 29, 2023

adamziel commented Apr 13, 2023 • edited Loading

aplamada commented Apr 13, 2023

adamziel commented Apr 13, 2023 • edited Loading

adamziel commented Apr 13, 2023 • edited Loading

aplamada commented Apr 15, 2023

adamziel commented Apr 21, 2023 • edited Loading

aplamada commented May 2, 2023

aplamada commented Dec 10, 2022 •

edited

Loading

aplamada commented Mar 21, 2023 •

edited

Loading

adamziel commented Apr 13, 2023 •

edited

Loading

adamziel commented Apr 13, 2023 •

edited

Loading

adamziel commented Apr 13, 2023 •

edited

Loading

adamziel commented Apr 21, 2023 •

edited

Loading