Apply style to demos page and relocate "More demos" menu

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 = (
+				<PlaygroundDemos />
+			);
+			break;
 		default:
 			activePanel = null;
 			break;

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: '<!-- wp:wordpress-playground/playground {"codeEditor":true,"files":[{"name":"index.php","contents":"<?php\\n/**\\n * Plugin Name: A WordPress plugin\\n */\\nadd_action(\'init\', function() {\\n  update_option(\'blogname\', \'This is a Playground demo!\');\\n});"}]} /-->',
+				},
+				{
+					step: 'runPHP',
+					code: "<?php require '/wordpress/wp-load.php'; kses_remove_filters(); wp_update_post(['ID'=>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 (
+		<div className={styles.playgroundDemos}>
+			<h2>WordPress Playground demos</h2>
+			<p>This is a collection of cool apps and demos built with WordPress Playground.</p>
+			<ul>
+				<li><a href="wp-cli.html" target="_blank">WP-CLI</a></li>
+				<li><a id="code-editor" target="_blank">Code editor (as a Gutenberg block)</a></li>
+				<li><a href="sync.html" target="_blank">Synchronization between two Playgrounds</a></li>
+				<li><a href="time-traveling.html" target="_blank">Time Travel</a></li>
+				<li><a href="../wordpress.html" target="_blank">WordPress Pull Request Previewer</a></li>
+				<li><a href="../gutenberg.html" target="_blank">Gutenberg Pull Request Previewer</a></li>
+			</ul>
+		</div>
+	);
+};

packages/playground/website/src/components/site-manager/playground-demos/style.module.css

@@ -0,0 +1,51 @@
+/* Playground Demos Component Styles */
+.playground-demos {
+	--padding-size: 24px;
+	background-color: #fdfdfd;
+	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+	border-radius: 12px;
+	padding: var(--padding-size);
+	margin: 32px auto;
+	max-width: 720px;
+	font-family: 'Segoe UI', sans-serif;
+	min-height: 430px;
+}
+
+.playground-demos h2 {
+	font-size: 1.8rem;
+	color: #222;
+	margin-bottom: 16px;
+	border-bottom: 2px solid #ddd;
+	padding-bottom: 8px;
+}
+
+.playground-demos p {
+	font-size: 1rem;
+	color: #555;
+	margin-bottom: 20px;
+}
+
+.playground-demos ul {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+}
+
+.playground-demos li a {
+	display: block;
+	background-color: #f0f4f8;
+	color: #0073aa;
+	text-decoration: none;
+	padding: 12px 16px;
+	border-radius: 8px;
+	transition: all 0.2s ease-in-out;
+}
+
+.playground-demos li a:hover {
+	background-color: #0073aa;
+	color: white;
+	transform: translateY(-2px);
+}

packages/playground/website/src/components/site-manager/sidebar/index.tsx

@@ -61,10 +61,6 @@ export function Sidebar({
 			label: 'Preview WordPress PR',
 			href: '/wordpress.html',
 		},
-		{
-			label: 'More demos',
-			href: '/demos/index.html',
-		},
 		{
 			label: 'Documentation',
 			href: 'https://wordpress.github.io/wordpress-playground/',
@@ -200,6 +196,36 @@ export function Sidebar({
 							</FlexBlock>
 						</HStack>
 					</MenuItem>
+					<MenuItem
+						className={classNames(css.sidebarItem, {
+							[css.sidebarItemSelected]:
+								activeSiteManagerSection === 'playground-demos',
+						})}
+						onClick={() =>
+							dispatch(setSiteManagerSection('playground-demos'))
+						}
+						isSelected={
+							activeSiteManagerSection === 'playground-demos'
+						}
+					>
+						<HStack justify="flex-start" alignment="center">
+							<Flex
+								style={{
+									width: 24,
+								}}
+								align="center"
+								justify="center"
+							>
+								<Icon
+									icon={page}
+									className={css.sidebarItemLogo}
+								/>
+							</Flex>
+							<FlexBlock className={css.sidebarItemSiteName}>
+								Playground Demos
+							</FlexBlock>
+						</HStack>
+					</MenuItem>
 				</MenuGroup>
 				{storedSites.length > 0 && (
 					<>

packages/playground/website/src/lib/state/redux/slice-ui.ts

@@ -8,7 +8,7 @@ export type SiteError =
 	// @TODO: Improve name?
 	| 'site-boot-failed';
 
-export type SiteManagerSection = 'sidebar' | 'site-details' | 'blueprints';
+export type SiteManagerSection = 'sidebar' | 'site-details' | 'blueprints' | 'playground-demos';
 export interface UIState {
 	activeSite?: {
 		slug: string;