playground/index.html

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo Handover Playground</title>
    <style>
      body {
        display: grid;
        place-items: center;
        background: linear-gradient(deeppink, darkorange);
      }

      header {
        font-size: 1em;
        font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
        display: flex;
        align-items: baseline;
        gap: 1rem;
      }

      a {
        color: currentcolor;
      }

      iframe#wp-playground {
        width: 95vw;
        height: 95vh;
        border: 2px solid currentColor;
      }
    </style>
  </head>

  <body>
    <header>
      <h1>Playground Demo</h1>
      <p>Source code <a href="https://github.com/wptrainingteam/playground-demo-handover" target="_blank" rel="noopener">on
          GitHub</a></p>
    </header>
    <main>
      <iframe id="wp-playground" title="Demo Handover Playground"></iframe>
      <script type="module">
        import { startPlaygroundWeb } from 'https://playground.wordpress.net/client/index.js';

        const client = await startPlaygroundWeb({
          iframe: document.getElementById('wp-playground'),
          remoteUrl: `https://playground.wordpress.net/remote.html`,
          blueprint:
          {
            "preferredVersions": {
              "php": "latest",
              "wp": "latest"
            },
            "siteOptions": {
              "blogname": "WordPress Playground Demo"
            },
            "plugins": [
              "create-block-theme"
            ],
            "steps": [
              {
                "step": "installPlugin",
                "pluginZipFile": {
                  "resource": "url",
                  "url": "zips/meta-block-sidebar.zip"
                }
              },
              {
                "step": "installTheme",
                "themeZipFile": {
                  "resource": "url",
                  "url": "zips/blue-note.zip"
                }
              },
              {
                "step": "runPHP",
                "code": "<?php require_once('/wordpress/wp-load.php'); wp_insert_post(array( 'post_title' => 'Created by a Blueprint', 'post_content' => '<!-- wp:paragraph --><p>How do you update the meta fields?</p><!-- /wp:paragraph --><!-- wp:list --><ul><!-- wp:list-item --><li>Open the <strong>Settings</strong> sidebar by clicking the window icon next to the blue <strong>Update</strong> button.</li><!-- /wp:list-item --><!-- wp:list-item --><li>Click the <strong>Meta Block Sidebar</strong> menu (below the <strong>Summary</strong> menu).</li><!-- /wp:list-item --><!-- wp:list-item --><li>Type the <strong>Team name</strong> and the <strong>date</strong> the person joined the company in the respective fields.</li><!-- /wp:list-item --><!-- wp:list-item --><li>Click the blue <strong>Update</strong> button.</li><!-- /wp:list-item --></ul><!-- /wp:list -->','post_status' => 'publish' ));"
              }
            ],
            "login": true,
            "landingPage": "/?p=4"
          },
        });
        await client.isReady();
      </script>
    </main>
  </body>

</html>