diff --git a/packages/playground/website/src/components/site-manager/index.tsx b/packages/playground/website/src/components/site-manager/index.tsx
index 776dfe1077..c0f4979eb1 100644
--- a/packages/playground/website/src/components/site-manager/index.tsx
+++ b/packages/playground/website/src/components/site-manager/index.tsx
@@ -13,6 +13,7 @@ import classNames from 'classnames';
import { forwardRef } from 'react';
import { setSiteManagerOpen } from '../../lib/state/redux/slice-ui';
import { BlueprintsPanel } from './blueprints-panel';
+import { PlaygroundDemos } from './playground-demos';
export const SiteManager = forwardRef<
HTMLDivElement,
@@ -61,6 +62,11 @@ export const SiteManager = forwardRef<
/>
) : null;
break;
+ case 'playground-demos':
+ activePanel = (
+
+ );
+ break;
default:
activePanel = null;
break;
diff --git a/packages/playground/website/src/components/site-manager/playground-demos/index.tsx b/packages/playground/website/src/components/site-manager/playground-demos/index.tsx
new file mode 100644
index 0000000000..9df63c7516
--- /dev/null
+++ b/packages/playground/website/src/components/site-manager/playground-demos/index.tsx
@@ -0,0 +1,49 @@
+import styles from './style.module.css';
+import React, { useEffect } from 'react';
+
+export const PlaygroundDemos = () => {
+ useEffect(() => {
+ const codeEditorBlueprint = {
+ landingPage: '/wp-admin/post.php?post=1&action=edit',
+ steps: [
+ { step: 'login' },
+ {
+ step: 'installPlugin',
+ pluginData: {
+ resource: 'wordpress.org/plugins',
+ slug: 'interactive-code-block',
+ },
+ },
+ {
+ step: 'writeFile',
+ path: '/wordpress/post.txt',
+ data: '',
+ },
+ {
+ step: 'runPHP',
+ code: "1,'post_title' => 'Playground Plugin Editor', 'post_content'=>file_get_contents('/wordpress/post.txt')]);",
+ },
+ ],
+ };
+
+ const link = document.getElementById('code-editor') as HTMLAnchorElement;
+ if (link) {
+ link.href = `../#${JSON.stringify(codeEditorBlueprint)}`;
+ }
+ }, []);
+
+ return (
+
+
WordPress Playground demos
+
This is a collection of cool apps and demos built with WordPress Playground.
+
+