-
Notifications You must be signed in to change notification settings -
Fork thirty-nine
New issue
Add WordPress Plugin: Playground ES Modules Support
#133
Conversation
adamziel
commented Dec 13, 2023
-
Put a code editor on a website -
Prepopulate it with an ES6 block using imports -
Enable the user to update the code in the editor -
Render the block in a WordPress Playground instance with this plugin installed
Implementation details
-
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.
-
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
Testing Instructions
-
Go to /wp-admin -
Confirm you can see the following message logged in devtools:
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: ```php 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'); }); ``` ```js import { createElement } from '@wordpress/element'; import { registerCoreBlocks } from '@wordpress/block-library'; console.log('Here are some imports from ES modules:', { registerCoreBlocks, createElement, }); ```
|
|
|
|