From 31e46133a07bac1ae7c27906e32f199b005fb5f2 Mon Sep 17 00:00:00 2001 From: karthick-murugan Date: Thu, 24 Apr 2025 12:36:52 +0530 Subject: [PATCH 1/2] Add Demos to menuitems --- .../src/components/site-manager/index.tsx | 6 +++ .../site-manager/playground-demos/index.tsx | 49 ++++++++++++++++++ .../playground-demos/style.module.css | 51 +++++++++++++++++++ .../components/site-manager/sidebar/index.tsx | 34 +++++++++++-- 4 files changed, 136 insertions(+), 4 deletions(-) create mode 100644 packages/playground/website/src/components/site-manager/playground-demos/index.tsx create mode 100644 packages/playground/website/src/components/site-manager/playground-demos/style.module.css 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..a6bd96ca6b --- /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'); + if (link) { + link.href = `../#${JSON.stringify(codeEditorBlueprint)}`; + } + }, []); + + return ( +
+

WordPress Playground demos

+

This is a collection of cool apps and demos built with WordPress Playground.

+ +
+ ); +}; diff --git a/packages/playground/website/src/components/site-manager/playground-demos/style.module.css b/packages/playground/website/src/components/site-manager/playground-demos/style.module.css new file mode 100644 index 0000000000..6b09b2fde6 --- /dev/null +++ b/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); +} diff --git a/packages/playground/website/src/components/site-manager/sidebar/index.tsx b/packages/playground/website/src/components/site-manager/sidebar/index.tsx index 80df6c4c81..33d6beb020 100644 --- a/packages/playground/website/src/components/site-manager/sidebar/index.tsx +++ b/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({ + + dispatch(setSiteManagerSection('playground-demos')) + } + isSelected={ + activeSiteManagerSection === 'playground-demos' + } + > + + + + + + Playground Demos + + + {storedSites.length > 0 && ( <> From f710d37f672fbc0219bca052b53c5e14b80e75d0 Mon Sep 17 00:00:00 2001 From: karthick-murugan Date: Thu, 24 Apr 2025 13:21:42 +0530 Subject: [PATCH 2/2] Fix linting issues --- .../src/components/site-manager/playground-demos/index.tsx | 2 +- packages/playground/website/src/lib/state/redux/slice-ui.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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 index a6bd96ca6b..9df63c7516 100644 --- a/packages/playground/website/src/components/site-manager/playground-demos/index.tsx +++ b/packages/playground/website/src/components/site-manager/playground-demos/index.tsx @@ -26,7 +26,7 @@ export const PlaygroundDemos = () => { ], }; - const link = document.getElementById('code-editor'); + const link = document.getElementById('code-editor') as HTMLAnchorElement; if (link) { link.href = `../#${JSON.stringify(codeEditorBlueprint)}`; } diff --git a/packages/playground/website/src/lib/state/redux/slice-ui.ts b/packages/playground/website/src/lib/state/redux/slice-ui.ts index 08180eb483..465fed9554 100644 --- a/packages/playground/website/src/lib/state/redux/slice-ui.ts +++ b/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;