Gutenberg block: WordPress Playground Demo

[dawidurbanski]

What?

This pull request aims to demonstrate a possible usage of WordPress Playground inside a Gutenberg block.

Why?

We should make adding WordPress Playground to any WordPress site as easy as possible.

With this highly customizable block, users can embed WordPress Playground within their posts or pages content.

Possibility of adding files to the Playground instance from the code editor make this the easiest way of integrating Playground with your WordPress website.

The code editor can be editable for users on the front-end so it may serve a role of interactive tutorial/guide.

All features

• Embed WordPress Playground
• Log in automatically
• Specify landing page
• Create new post or page
• Redirect to newly created post or page
• Specify blueprint to apply on init (WIP)
• Enable/disable code editor
• Make code editor read-only
• Allow multiple files in code editor
• Specify mode:
  • Plugin: add all files to a plugin and enable it in Playground
  • Editor script: add script inline via wp_add_inline_script

Caveats

• This only works on sites with https (even locally) - Playground limitation
• It's not going to work inside Playground itself - Unable to connect to playground remote, I didn't check with wp-now, it could work there but probably also going to fail because of lack of https
• The block has to use "apiVersion": 2 to prevent wrapping in iframe - it won't work inside another iframe for now - again Playground limitation
• No build steps available (we are thinking about adding support for node in browser in the future)

Notes

• Blueprints support not yet implemented (but the control is added in Edit component),
• This is just POC. PlaygroundDemo.tsx definitely requires some work (to split it into multiple components),
• No internationalization in place,
• We may change the refreshing behaviour in InspectorControls input fields from onChange to onBlur to prevent so many Playground inits,
• Files management is a bit primitive for now, no folders or subfolders allowed yet,
• Currently supported editor languages: JavaScript, JSON, PHP,
• We may add option for dark theme in the code editor.
• I developed this using the standard @wordpress/scripts package. I was unable to add this to the project custom build and nx shared package.json so this PR is as is. Any contributions to make it work with this repo are welcomed,

Testing Instructions

Two options

From zip

1. git clone git@github.com:dawidurbanski/playground-tools.git
2. cd playground-tools/packages/playground-demo-block
3. npm install && npm run plugin-zip
4. Upload generated zip file to your WordPress and enable it
5. Go to post or page edit screen
6. Insert Playground Demo block or copy and paste in the editor the example block from "Complete block example" below

From source

1. Go to wp-content/plugins of your WordPress instalation
2. Run git clone git@github.com:dawidurbanski/playground-tools.git
3. Run npm install && npm run build
4. Open your WordPress and enable the plugin
5. Go to post or page edit screen
6. Insert Playground Demo block or copy and paste in the editor the example block from "Complete block example" below

Complete block example in plugin mode

Expand to grab block code

<!-- wp:group {"align":"wide","layout":{"type":"default"}} -->
<div class="wp-block-group alignwide"><!-- wp:wordpress-playground/playground-demo {"codeEditor":true,"files":[{"name":"plugin.php","file":"\u003c?php\n/**\n * Plugin name: Demo Block\n */\n\nfunction playground_demo_block_init() {\n\tregister_block_type( __DIR__ );\n}\nadd_action( 'init', 'playground_demo_block_init' );\n"},{"name":"block.json","file":"{\n    \u0022apiVersion\u0022: 3,\n    \u0022title\u0022: \u0022Example: Basic\u0022,\n    \u0022name\u0022: \u0022example/example-01-basic\u0022,\n    \u0022icon\u0022: \u0022universal-access-alt\u0022,\n    \u0022editorScript\u0022: \u0022file:./block.js\u0022\n}"},{"name":"block.js","file":"wp.blocks.registerBlockType(\n    \u0022example/example-01-basic\u0022,\n    {\n        title: \u0022Example: Basic\u0022,\n        edit: function () {\n            return wp.element.createElement(\n                \u0022p\u0022,\n                {},\n                \u0022Hi!\u0022\n            );\n        }\n    }\n);"},{"name":"block.asset.php","file":"\u003c?php return array(\n  'dependencies' =\u003e array('wp-blocks'),\n  'version' =\u003e '0.1'\n);"}],"landingPageUrl":"/wp-admin/plugins.php","createNewPost":true,"createNewPostContent":"\u003c!\u002d\u002d wp:example/example-01-basic /\u002d\u002d\u003e","redirectToPost":true,"redirectToPostType":"admin"} /--></div>
<!-- /wp:group -->

[adamziel]

Something tells me @jonathanbossenger, @westnz, and @juanmaguitar will love this. Thank you so much for making the web better @dawidurbanski!

[jonathanbossenger]

This is indeed exciting. I will add it to my list of things to test out!

[westnz]

This is amazing! 🥳

[adamziel]

Thank you @dawidurbanski! I got it to work with nx and this repo's structure. I'm going to merge it as–is to enable iterating on this block.