Add WordPress Plugin: Playground ES Modules Support

[adamziel]

Adds a WordPress plugin to expose WordPress scripts like @wordpress/block-editor as ES modules.

This enables block development without transpilation and, thus, unlocks embedding a block code editor on learn.wordpress.org. With this plugin in place, we can:

1. Put a code editor on a website
2. Prepopulate it with an ES6 block using imports
3. Enable the user to update the code in the editor
4. Render the block in a WordPress Playground instance with this plugin installed

Notably, this is a proof-of-concept, only intended for use in WordPress Playground.

Implementation details

ES Modules are shipped as JS files generated from core scripts. This plugin:

• Adds a wp-admin page that enqueues a set of core scripts
• In JS, it terates over the exports provided by those scripts
• Rewrites those exports as ES modules (export const autop = window.wp.autop etc.)
• Sends a REST API request to a Playground instance which creates those files in the filesystem.

In addition, it also:

• Registers @wordpress script handles in WordPress, e.g. wp_register_script( "@wordpress/block-editor", ..., ['wp-block-editor])
• Registers a esmodules-import-map script and adds it as a dependency to all the core scripts

This enables the developer to register a script as follows:

add_action('init', function () {
    wp_register_script('my-es-module', plugins_url('test-es-module.js', __FILE__), [
        '@wordpress/block-library',
        '@wordpress/element',
    ]);
    wp_enqueue_script('my-es-module');
});

import { createElement } from '@wordpress/element';
import { registerCoreBlocks } from '@wordpress/block-library';

console.log('Here are some imports from ES modules:', {
	registerCoreBlocks,
	createElement,
});

Testing Instructions

1. Go to /wp-admin
2. Confirm you can see the following message logged in devtools:

cc @dmsnell @youknowriad @luisherranz @gziolo