diff --git a/package-lock.json b/package-lock.json index 2570f65fd9..8f003b53d9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17827,10 +17827,6 @@ "resolved": "packages/playground/client", "link": true }, - "node_modules/@wp-playground/interactive-block-playground": { - "resolved": "packages/playground/interactive-block-playground", - "link": true - }, "node_modules/@wp-playground/node": { "resolved": "packages/playground/node", "link": true @@ -45037,15 +45033,6 @@ "npm": ">=8.11.0" } }, - "packages/playground/interactive-block-playground": { - "name": "@wp-playground/interactive-block-playground", - "version": "1.0.0", - "license": "GPL-2.0-or-later", - "engines": { - "node": ">=18.18.2", - "npm": ">=8.11.0" - } - }, "packages/playground/node": { "name": "@wp-playground/node", "version": "0.0.1" diff --git a/package.json b/package.json index 2fa4f6c019..2420479f77 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,6 @@ "build:docs": "nx build docs-site", "deploy:docs": "gh-pages -d dist/docs/build -t true", "dev": "nx dev playground-website", - "dev:interactivity": "nx dev interactive-block-playground", "format": "nx format", "format:uncommitted": "nx format --fix --parallel --uncommitted", "lint": "nx run-many --all --target=lint", diff --git a/packages/playground/interactive-block-playground/README.md b/packages/playground/interactive-block-playground/README.md deleted file mode 100644 index 8518ff528a..0000000000 --- a/packages/playground/interactive-block-playground/README.md +++ /dev/null @@ -1,5 +0,0 @@ -### 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 diff --git a/packages/playground/interactive-block-playground/build-zips.cjs b/packages/playground/interactive-block-playground/build-zips.cjs deleted file mode 100644 index 6357131d7b..0000000000 --- a/packages/playground/interactive-block-playground/build-zips.cjs +++ /dev/null @@ -1,48 +0,0 @@ -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(); - }); diff --git a/packages/playground/interactive-block-playground/hello/blocks/hello/block.json b/packages/playground/interactive-block-playground/hello/blocks/hello/block.json deleted file mode 100644 index 01b9c78016..0000000000 --- a/packages/playground/interactive-block-playground/hello/blocks/hello/block.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "$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" -} diff --git a/packages/playground/interactive-block-playground/hello/blocks/hello/index.asset.php b/packages/playground/interactive-block-playground/hello/blocks/hello/index.asset.php deleted file mode 100644 index c4a34c8173..0000000000 --- a/packages/playground/interactive-block-playground/hello/blocks/hello/index.asset.php +++ /dev/null @@ -1 +0,0 @@ - array('wp-block-editor', 'wp-blocks', 'wp-element'), 'version' => '3cf3fb8a26c0120e24db'); diff --git a/packages/playground/interactive-block-playground/hello/blocks/hello/index.js b/packages/playground/interactive-block-playground/hello/blocks/hello/index.js deleted file mode 100644 index 4ed8e11869..0000000000 --- a/packages/playground/interactive-block-playground/hello/blocks/hello/index.js +++ /dev/null @@ -1,16 +0,0 @@ -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, -}); diff --git a/packages/playground/interactive-block-playground/hello/blocks/hello/render.php b/packages/playground/interactive-block-playground/hello/blocks/hello/render.php deleted file mode 100644 index 516089a565..0000000000 --- a/packages/playground/interactive-block-playground/hello/blocks/hello/render.php +++ /dev/null @@ -1,14 +0,0 @@ - - -
-> - -
diff --git a/packages/playground/interactive-block-playground/hello/blocks/hello/style.css b/packages/playground/interactive-block-playground/hello/blocks/hello/style.css deleted file mode 100644 index b5b90fff0f..0000000000 --- a/packages/playground/interactive-block-playground/hello/blocks/hello/style.css +++ /dev/null @@ -1,17 +0,0 @@ -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; -} diff --git a/packages/playground/interactive-block-playground/hello/blocks/hello/view.asset.php b/packages/playground/interactive-block-playground/hello/blocks/hello/view.asset.php deleted file mode 100644 index 9cb4f18936..0000000000 --- a/packages/playground/interactive-block-playground/hello/blocks/hello/view.asset.php +++ /dev/null @@ -1 +0,0 @@ - array(), 'version' => '8ff3477eebdb6c7f40ea'); diff --git a/packages/playground/interactive-block-playground/hello/blocks/hello/view.js b/packages/playground/interactive-block-playground/hello/blocks/hello/view.js deleted file mode 100644 index 659d5f09d2..0000000000 --- a/packages/playground/interactive-block-playground/hello/blocks/hello/view.js +++ /dev/null @@ -1,12 +0,0 @@ -// Disclaimer: Importing the `store` using a global is just a temporary solution. -const { store } = window.__experimentalInteractivity; - -store({ - actions: { - hello: { - log: () => { - console.log('hello!'); - }, - }, - }, -}); diff --git a/packages/playground/interactive-block-playground/hello/hello.php b/packages/playground/interactive-block-playground/hello/hello.php deleted file mode 100644 index 1046e0afc7..0000000000 --- a/packages/playground/interactive-block-playground/hello/hello.php +++ /dev/null @@ -1,61 +0,0 @@ -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 ); - } - } -} \ No newline at end of file diff --git a/packages/playground/interactive-block-playground/index.css b/packages/playground/interactive-block-playground/index.css deleted file mode 100644 index 3bb3ece520..0000000000 --- a/packages/playground/interactive-block-playground/index.css +++ /dev/null @@ -1,17 +0,0 @@ -.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; -} diff --git a/packages/playground/interactive-block-playground/index.html b/packages/playground/interactive-block-playground/index.html deleted file mode 100644 index 40fd242b0a..0000000000 --- a/packages/playground/interactive-block-playground/index.html +++ /dev/null @@ -1,28 +0,0 @@ - - - - - - - Interactivity API - Interactive docs - - - -
- - -
-
-

render.php

- -

view.js

- -
- - - diff --git a/packages/playground/interactive-block-playground/package.json b/packages/playground/interactive-block-playground/package.json deleted file mode 100644 index c8a9b88301..0000000000 --- a/packages/playground/interactive-block-playground/package.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "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", - "engines": { - "node": ">=18.18.2", - "npm": ">=8.11.0" - } -} diff --git a/packages/playground/interactive-block-playground/project.json b/packages/playground/interactive-block-playground/project.json deleted file mode 100644 index bcbb3cc827..0000000000 --- a/packages/playground/interactive-block-playground/project.json +++ /dev/null @@ -1,62 +0,0 @@ -{ - "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": "@nx/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": "@nx/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": "nx:run-commands", - "options": { - "commands": [ - "tsc -p packages/playground/interactive-block-playground/tsconfig.json --noEmit" - ] - } - } - }, - "tags": ["scope:web-client"] -} diff --git a/packages/playground/interactive-block-playground/src/config.ts b/packages/playground/interactive-block-playground/src/config.ts deleted file mode 100644 index c2abc7fde0..0000000000 --- a/packages/playground/interactive-block-playground/src/config.ts +++ /dev/null @@ -1 +0,0 @@ -export { remotePlaygroundOrigin } from 'virtual:interactive-block-playground-config'; diff --git a/packages/playground/interactive-block-playground/src/index.ts b/packages/playground/interactive-block-playground/src/index.ts deleted file mode 100644 index 37ed20dcf2..0000000000 --- a/packages/playground/interactive-block-playground/src/index.ts +++ /dev/null @@ -1,119 +0,0 @@ -import { phpVars, startPlaygroundWeb } from '@wp-playground/client'; - -import { remotePlaygroundOrigin } from './config'; - -// Set the text content of the render.php element -document.getElementById('render.php')!.textContent = ` - -
> - -
-`; - -// Set the text content of the view.js -document.getElementById( - 'view.js' -)!.textContent = `// Disclaimer: Importing the "store" using a global is just a temporary solution. -const { store } = window.__experimentalInteractivity; - -store({ - actions: { - hello: { - log: () => { - console.log("hello!"); - }, - }, - }, -});`; - -(async () => { - const playground = document.querySelector( - '#playground' - ) as HTMLIFrameElement; - - const js = phpVars({ - title: 'Test post', - content: '', - }); - - const client = await startPlaygroundWeb({ - iframe: playground, - remoteUrl: `${remotePlaygroundOrigin}/remote.html`, - blueprint: { - landingPage: '/wp-admin', - preferredVersions: { - php: '8.0', - wp: 'latest', - }, - steps: [ - { - step: 'login', - username: 'admin', - password: 'password', - }, - { - step: 'installPlugin', - pluginZipFile: { - resource: 'wordpress.org/plugins', - slug: 'gutenberg', - }, - }, - { - step: 'installPlugin', - pluginZipFile: { - resource: 'url', - url: 'zips/hello.zip', - }, - }, - { - step: 'runPHP', - code: ` ${js.title}, - "post_content" => ${js.content}, - "post_status" => "publish", - ]); - file_put_contents('/post-id.txt', $post_id); - `, - }, - { - step: 'installPlugin', - pluginZipFile: { - resource: 'url', - url: '/plugin-proxy?repo=WordPress/block-interactivity-experiments&name=block-interactivity-experiments.zip', - }, - }, - ], - }, - }); - - const postId = await client.readFileAsText('/post-id.txt'); - await client.goTo(`/?p=${postId}`); - - document - .getElementById('render.php')! - .addEventListener('keyup', async (e) => { - client.writeFile( - '/wordpress/wp-content/plugins/hello/blocks/hello/render.php', - (e.target as HTMLTextAreaElement).value - ); - - await client.goTo(`/?p=${postId}`); - }); - - document.getElementById('view.js')!.addEventListener('keyup', async (e) => { - client.writeFile( - '/wordpress/wp-content/plugins/hello/blocks/hello/view.js', - (e.target as HTMLTextAreaElement).value - ); - - await client.goTo(`/?p=${postId}`); - }); -})(); diff --git a/packages/playground/interactive-block-playground/src/types.d.ts b/packages/playground/interactive-block-playground/src/types.d.ts deleted file mode 100644 index 602b204f26..0000000000 --- a/packages/playground/interactive-block-playground/src/types.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -declare module 'virtual:interactive-block-playground-config' { - export const remotePlaygroundOrigin: string; -} diff --git a/packages/playground/interactive-block-playground/tsconfig.app.json b/packages/playground/interactive-block-playground/tsconfig.app.json deleted file mode 100644 index fab438f3f8..0000000000 --- a/packages/playground/interactive-block-playground/tsconfig.app.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../dist/out-tsc", - "types": ["node", "vite/client"] - }, - "files": [ - "../../../node_modules/@nx/react/typings/cssmodule.d.ts", - "../../../node_modules/@nx/react/typings/image.d.ts" - ], - "exclude": [ - "src/**/*.spec.ts", - "src/**/*.test.ts", - "src/**/*.spec.tsx", - "src/**/*.test.tsx", - "src/**/*.spec.js", - "src/**/*.test.js", - "src/**/*.spec.jsx", - "src/**/*.test.jsx" - ], - "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"] -} diff --git a/packages/playground/interactive-block-playground/tsconfig.json b/packages/playground/interactive-block-playground/tsconfig.json deleted file mode 100644 index ae44604ae9..0000000000 --- a/packages/playground/interactive-block-playground/tsconfig.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "compilerOptions": { - "jsx": "react-jsx", - "allowJs": false, - "esModuleInterop": false, - "allowSyntheticDefaultImports": true, - "strict": true, - "types": ["vite/client", "vitest", "react"] - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.app.json" - }, - { - "path": "./tsconfig.spec.json" - } - ], - "extends": "../../../tsconfig.base.json" -} diff --git a/packages/playground/interactive-block-playground/tsconfig.spec.json b/packages/playground/interactive-block-playground/tsconfig.spec.json deleted file mode 100644 index ed5eae70ff..0000000000 --- a/packages/playground/interactive-block-playground/tsconfig.spec.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../../dist/out-tsc", - "types": ["vitest/globals", "vitest/importMeta", "vite/client", "node"] - }, - "include": [ - "vite.config.ts", - "src/**/*.test.ts", - "src/**/*.spec.ts", - "src/**/*.test.tsx", - "src/**/*.spec.tsx", - "src/**/*.test.js", - "src/**/*.spec.js", - "src/**/*.test.jsx", - "src/**/*.spec.jsx", - "src/**/*.d.ts" - ], - "files": [ - "../../../node_modules/@nx/react/typings/cssmodule.d.ts", - "../../../node_modules/@nx/react/typings/image.d.ts" - ] -} diff --git a/packages/playground/interactive-block-playground/vite.config.ts b/packages/playground/interactive-block-playground/vite.config.ts deleted file mode 100644 index 46cf558709..0000000000 --- a/packages/playground/interactive-block-playground/vite.config.ts +++ /dev/null @@ -1,69 +0,0 @@ -/// -import { defineConfig } from 'vite'; -import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; -// eslint-disable-next-line @nx/enforce-module-boundaries -import { - websiteDevServerHost, - websiteDevServerPort, - remoteDevServerHost, - remoteDevServerPort, -} from '../build-config'; -// eslint-disable-next-line @nx/enforce-module-boundaries -import virtualModule from '../vite-virtual-module'; - -const proxy = { - '^/plugin-proxy.*repo=.*': { - target: 'https://playground.wordpress.net', - changeOrigin: true, - secure: true, - }, - '/plugin-proxy': { - target: 'https://downloads.wordpress.org', - changeOrigin: true, - secure: true, - rewrite: (path: string) => { - const url = new URL(path, 'http://example.com'); - if (url.searchParams.has('plugin')) { - return `/plugin/${url.searchParams.get('plugin')}`; - } else if (url.searchParams.has('theme')) { - return `/theme/${url.searchParams.get('theme')}`; - } - throw new Error('Invalid request'); - }, - }, -}; - -export default defineConfig(({ command }) => { - const playgroundOrigin = - command === 'build' - ? // In production, both the website and the playground are served from the same domain. - '' - : // In dev, the website and the playground are served from different domains. - `http://${remoteDevServerHost}:${remoteDevServerPort}`; - return { - cacheDir: - '../../../node_modules/.vite/packages-interactive-block-playground', - - preview: { - port: websiteDevServerPort, - host: websiteDevServerHost, - proxy, - }, - - server: { - port: websiteDevServerPort, - host: websiteDevServerHost, - proxy, - }, - - plugins: [ - nxViteTsPaths(), - virtualModule({ - name: 'interactive-block-playground-config', - content: `export const remotePlaygroundOrigin = ${JSON.stringify( - playgroundOrigin - )};`, - }), - ], - }; -}); diff --git a/packages/playground/interactive-block-playground/zips/block-interactivity-experiments.zip b/packages/playground/interactive-block-playground/zips/block-interactivity-experiments.zip deleted file mode 100644 index 4853916d9e..0000000000 Binary files a/packages/playground/interactive-block-playground/zips/block-interactivity-experiments.zip and /dev/null differ diff --git a/packages/playground/interactive-block-playground/zips/hello.zip b/packages/playground/interactive-block-playground/zips/hello.zip deleted file mode 100644 index 7c8dc6701d..0000000000 Binary files a/packages/playground/interactive-block-playground/zips/hello.zip and /dev/null differ