Add Interactive Block Playground package

package.json

@@ -7,6 +7,7 @@
 		"build:website": "nx build playground-website",
 		"deploy": "gh-pages -d dist/docs -t true",
 		"dev": "nx dev playground-website",
+		"dev:interactivity": "nx dev interactive-block-playground",
 		"lint": "nx run-many --all --target=lint",
 		"predeploy": "nx build docs-site",
 		"prepublishOnly": "npm run build",

packages/playground/interactive-block-playground/README.md

@@ -0,0 +1,5 @@
+### Interactive Block Playground
+
+Built with [WordPress Playground](https://github.com/WordPress/wordpress-playground).
+
+https://user-images.githubusercontent.com/5417266/233141638-b8143576-fb56-462d-9abb-fce117ba84ba.mov

packages/playground/interactive-block-playground/build-zips.cjs

@@ -0,0 +1,48 @@
+const chokidar = require('chokidar');
+const archiver = require('archiver');
+const fs = require('fs');
+
+const helloFolderPath = './hello';
+const outputZipPath = './zips/hello.zip';
+
+// Function to zip the 'hello' folder and save it as 'hello.zip'
+function zipHelloFolder() {
+	const output = fs.createWriteStream(outputZipPath);
+	const archive = archiver('zip', {
+		zlib: { level: 9 }, // Sets the compression level.
+	});
+
+	output.on('close', () => {
+		console.log(`hello.zip has been created.`);
+	});
+
+	archive.on('error', (err) => {
+		throw err;
+	});
+
+	archive.pipe(output);
+
+	archive.directory(helloFolderPath, false);
+
+	archive.finalize();
+}
+
+// Watch the 'hello' folder for changes
+const watcher = chokidar.watch(helloFolderPath, {
+	persistent: true,
+	ignoreInitial: true,
+});
+
+watcher
+	.on('add', (path) => {
+		console.log(`File ${path} has been added.`);
+		zipHelloFolder();
+	})
+	.on('change', (path) => {
+		console.log(`File ${path} has been changed.`);
+		zipHelloFolder();
+	})
+	.on('unlink', (path) => {
+		console.log(`File ${path} has been removed.`);
+		zipHelloFolder();
+	});

packages/playground/interactive-block-playground/hello/blocks/hello/block.json

@@ -0,0 +1,18 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "hello/log-block",
+	"version": "0.1.0",
+	"title": "Hello - Log block",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"textdomain": "hello",
+	"supports": {
+		"interactivity": true
+	},
+	"editorScript": "file:./index.js",
+	"render": "file:./render.php",
+	"viewScript": "file:./view.js",
+	"style": "file:./style.css"
+}

packages/playground/interactive-block-playground/hello/blocks/hello/index.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-element'), 'version' => '3cf3fb8a26c0120e24db');

packages/playground/interactive-block-playground/hello/blocks/hello/index.js

@@ -0,0 +1,16 @@
+const { registerBlockType } = wp.blocks;
+const { useBlockProps } = wp.blockEditor;
+const { createElement } = wp.element;
+
+const Edit = () => {
+	return createElement(
+		'p',
+		useBlockProps(),
+		'Hello World! (from the editor).'
+	);
+};
+
+registerBlockType('hello/log-block', {
+	edit: Edit,
+	save: () => null,
+});

packages/playground/interactive-block-playground/hello/blocks/hello/render.php

@@ -0,0 +1,14 @@
+<?php
+$wrapper_attributes = get_block_wrapper_attributes();
+
+?>
+
+<div
+	<?php echo $wrapper_attributes; ?>
+>
+	<button
+		data-wp-on.click="actions.hello.log"
+	>
+	HELLO
+	</button>
+</div>

packages/playground/interactive-block-playground/hello/blocks/hello/style.css

@@ -0,0 +1,17 @@
+body > :not(.wp-site-blocks) {
+	display: none;
+}
+
+.wp-site-blocks > :not(main) {
+	display: none;
+}
+
+main > :not(.entry-content) {
+	display: none;
+}
+
+.entry-content {
+	position: absolute;
+	top: 0;
+	left: 0;
+}

packages/playground/interactive-block-playground/hello/blocks/hello/view.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array(), 'version' => '8ff3477eebdb6c7f40ea');

packages/playground/interactive-block-playground/hello/blocks/hello/view.js

@@ -0,0 +1,12 @@
+// Disclaimer: Importing the `store` using a global is just a temporary solution.
+const { store } = window.__experimentalInteractivity;
+
+store({
+	actions: {
+		hello: {
+			log: () => {
+				console.log('hello!');
+			},
+		},
+	},
+});

packages/playground/interactive-block-playground/hello/hello.php

@@ -0,0 +1,61 @@
+<?php
+
+/**
+ * Plugin Name:       Hello 
+ * Version:           0.1.1
+ * Requires at least: 6.0
+ * Requires PHP:      5.6
+ * Description:       Plugin that demoes the usage of the Interactivity API.
+ * Author:            WordPress Team
+ * License:           GPL-2.0-or-later
+ * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
+ * Text Domain:       hello
+ * 
+ * @package hello
+ */
+
+add_action( 'init', 'register_hello_block' );
+
+function register_hello_block() {
+	if ( file_exists( __DIR__ . '/blocks/hello' ) ) {
+		register_block_type( __DIR__ . '/blocks/hello');
+	};
+}
+
+
+add_action( 'wp_enqueue_scripts', 'hello_auto_inject_interactivity_dependency' );
+
+function add_hello_script_dependency( $handle, $dep, $in_footer ) {
+	global $wp_scripts;
+
+	$script = $wp_scripts->query( $handle, 'registered' );
+	if ( ! $script ) {
+		return false;
+	}
+
+	if ( ! in_array( $dep, $script->deps, true ) ) {
+		$script->deps[] = $dep;
+
+		if ( $in_footer ) {
+			// move script to the footer
+			$wp_scripts->add_data( $handle, 'group', 1 );
+		}
+	}
+
+	return true;
+}
+
+function hello_auto_inject_interactivity_dependency() {
+	$registered_blocks = \WP_Block_Type_Registry::get_instance()->get_all_registered();
+
+	foreach ( $registered_blocks as $name => $block ) {
+		$has_interactivity_support = $block->supports['interactivity'] ?? false;
+
+		if ( ! $has_interactivity_support ) {
+			continue;
+		}
+		foreach ( $block->view_script_handles as $handle ) {
+			add_hello_script_dependency( $handle, 'wp-directive-runtime', true );
+		}
+	}
+}

packages/playground/interactive-block-playground/index.css

@@ -0,0 +1,17 @@
+.editors {
+	display: grid;
+	grid-template-rows: 35px 2fr;
+	grid-auto-flow: column;
+	grid-gap: 20px;
+	justify-content: start;
+}
+
+textarea {
+	width: 387px;
+	height: 240px;
+	font-family: monospace;
+}
+
+.iframe-container {
+	position: relative;
+}

packages/playground/interactive-block-playground/index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Interactivity API - Interactive docs</title>
+		<link rel="stylesheet" href="./index.css" />
+	</head>
+	<body>
+		<div class="iframe-container">
+			<iframe
+				class="hidden"
+				id="playground"
+				src="https://playground.wordpress.net/remote.html"
+				style="width: 800px; height: 500px"
+			></iframe>
+			<div class="iframe-spinner"></div>
+		</div>
+		<div class="editors">
+			<h4>render.php</h4>
+			<textarea id="render.php" spellcheck="false"></textarea>
+			<h4>view.js</h4>
+			<textarea id="view.js" spellcheck="false"></textarea>
+		</div>
+		<script type="module" src="/src/index.ts"></script>
+	</body>
+</html>

packages/playground/interactive-block-playground/package.json

@@ -0,0 +1,12 @@
+{
+	"name": "@wp-playground/interactive-block-playground",
+	"version": "1.0.0",
+	"description": "",
+	"scripts": {
+		"build-zips": "node build-zips.js"
+	},
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"type": "module",
+	"private": "true"
+}

packages/playground/interactive-block-playground/project.json

@@ -0,0 +1,62 @@
+{
+	"name": "interactive-block-playground",
+	"$schema": "../../../node_modules/nx/schemas/project-schema.json",
+	"sourceRoot": "packages/playground/interactive-block-playground/src",
+	"projectType": "application",
+	"implicitDependencies": ["playground-remote"],
+	"targets": {
+		"build:standalone": {
+			"executor": "@nrwl/vite:build",
+			"outputs": ["{options.outputPath}"],
+			"defaultConfiguration": "production",
+			"options": {
+				"outputPath": "dist/packages/playground/interactive-block-playground"
+			},
+			"configurations": {
+				"development": {
+					"mode": "development"
+				},
+				"production": {
+					"mode": "production"
+				}
+			}
+		},
+		"dev": {
+			"executor": "nx:run-commands",
+			"options": {
+				"commands": [
+					"nx dev playground-remote --configuration=development-for-website",
+					"nx dev:standalone interactive-block-playground --hmr --output-style=stream-without-prefixes"
+				],
+				"parallel": true,
+				"color": true
+			}
+		},
+		"dev:standalone": {
+			"executor": "@nrwl/vite:dev-server",
+			"defaultConfiguration": "development",
+			"options": {
+				"buildTarget": "interactive-block-playground:build"
+			},
+			"configurations": {
+				"development": {
+					"buildTarget": "interactive-block-playground:build:standalone:development",
+					"hmr": true
+				},
+				"production": {
+					"buildTarget": "interactive-block-playground:build:standalone:production",
+					"hmr": false
+				}
+			}
+		},
+		"typecheck": {
+			"executor": "@nrwl/workspace:run-commands",
+			"options": {
+				"commands": [
+					"yarn tsc -p packages/playground/interactive-block-playground/tsconfig.json --noEmit"
+				]
+			}
+		}
+	},
+	"tags": ["scope:web-client"]
+}

packages/playground/interactive-block-playground/src/config.ts

@@ -0,0 +1 @@
+export { remotePlaygroundOrigin } from 'virtual:interactive-block-playground-config';