Gutenberg block: WordPress Playground Demo (#126)

Adds `playground-demo-block`, a Gutenberg block that embeds WordPress Playground on your site.

![CleanShot 2023-11-19 at 16 20
53](https://github.com/WordPress/playground-tools/assets/12466568/f10695cf-fc71-4954-ba91-291ef36c1386)

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.

![CleanShot 2023-11-19 at 16 27
16](https://github.com/WordPress/playground-tools/assets/12466568/ebbc1d01-86db-4e17-a111-2aaf6fc09ea7)

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

![CleanShot 2023-11-21 at 10 14
24](https://github.com/WordPress/playground-tools/assets/12466568/f2ff13e3-392a-4de9-aaf3-45f077abc42c)

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

![CleanShot 2023-11-21 at 10 17
31](https://github.com/WordPress/playground-tools/assets/12466568/2702bcca-455c-43c7-8abd-4de8001e8310)


## 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

<details>
  <summary>Expand to grab block code</summary>
  
  ```
  <!-- 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 -->
```
</details>

Co-authored-by: WordPress po polsku <wordpresspopolsku@MacBook-Pro-7.local>
Co-authored-by: Adam Zieliński <adam@adamziel.com>

.gitignore

@@ -11,6 +11,7 @@ packages/php-wasm/node/src/test/__test*
 packages/docs/site/src/model.json
 .docusaurus
 dist.zip
+build
 
 # dependencies
 node_modules

README.md

@@ -2,6 +2,7 @@
 
 This repository contains the tools and applications built using [WordPress Playground](https://developer.wordpress.org/playground/):
 
+-   [Playground Block for Gutenberg](./packages/playground-demo-block/)
 -   [Interactive Code Block for Gutenberg](./packages/interactive-code-block/)
 -   [WordPress Playground for Visual Studio Code](./packages/vscode-extension/)
 -   [wp-now](./packages/wp-now/)