[Website] Embeddable PHP code snippets via <php-snippet>

[adamziel]

Adds a runnable PHP code snippet web component:

CleanShot.2026-04-25.at.17.45.39.mp4

Here's how to use it:

<script type="module" src="https://playground.wordpress.net/php-code-snippet.js"></script>

<php-snippet name="lazy-load-images.php">
  <script type="application/x-php">
<?php
require '/wordpress/wp-load.php';
$tags = new WP_HTML_Tag_Processor( '<img src="hero.jpg">' );
while ( $tags->next_tag( 'img' ) ) {
    $tags->set_attribute( 'loading', 'lazy' );
}
echo $tags->get_updated_html();
  </script>
</php-snippet>

The script is around 5 KB gzipped and contains no PHP or WordPress — those are downloaded only on the first Run click. Multiple snippets on the same page share a single hidden Playground iframe, so a docs page with five examples pays the runtime cost once instead of five times.

There is no code editor shipped with this PR, just a tiny tokenizer/syntax highlighter.

The progress bar that shows up during boot is the real staged progress drawn from the live events Playground emits internally, so visitors see the same captions ("Preparing WordPress", download progress, blueprint steps) they'd see in the standalone PHP Playground at /php-playground.html.

Try it

Run npm run dev and open http://127.0.0.1:5400/website-server/php-code-snippet-demo.html. Three snippets, one shared runtime — open the Network tab and watch the second and third Run clicks reuse what the first one downloaded.

What's in here

• The <php-snippet> web component (packages/playground/website/public/php-code-snippet.js) and a demo page next to it.
• Playwright coverage for boot, progress, output, and runtime sharing — picked up automatically by the existing test-e2e-playwright CI job.
• A new guide page (/guides/php-code-snippets) that documents both the embed and the standalone PHP Playground at /php-playground.html — the latter previously had no docs at all. Linked prominently from the Guides index.

Notes for reviewers

The component duck-types a ProgressTracker so it can subscribe to staged progress events. The published /client/index.js doesn't export the real ProgressTracker class today; once it does, the inline copy can be replaced with an import. Worth a small follow-up.

Test plan

• CI test-e2e-playwright (Chromium / Firefox / WebKit) passes the three new tests.
• Open the demo page locally, click Run on the first snippet, watch the staged progress + output, then click Run on the other two and confirm they reuse the runtime (no extra network requests for WP/PHP).
• Browse to /guides/php-code-snippets in the docs site, verify the page renders and the sidebar entry sits at the top of Guides.

[Copilot]

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

Adds an embeddable <php-snippet> web component that lazy-loads a shared WordPress Playground runtime to run and syntax-highlight PHP snippets, plus demo/docs and Playwright E2E coverage.

Changes:

• Introduces php-code-snippet.js custom element with shared runtime boot + progress tracking and a small PHP syntax highlighter.
• Adds a demo HTML page and Playwright E2E tests validating progress, output, and runtime reuse.
• Documents the embed + standalone PHP Playground and links the guide prominently in the docs sidebar/index.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 11 comments.

Show a summary per file

File	Description
packages/playground/website/public/php-code-snippet.js	Implements <php-snippet> component, shared runtime boot/progress, and syntax highlighting.
packages/playground/website/public/php-code-snippet-demo.html	Adds a local demo page with three example snippets.
packages/playground/website/playwright/e2e/php-code-snippet.spec.ts	Adds E2E tests for rendering, progress/output, and runtime sharing.
packages/docs/site/sidebars.js	Adds the new guide to the Guides sidebar.
packages/docs/site/docs/main/guides/php-code-snippets.md	Documents embedding via <php-snippet> and the standalone PHP Playground.
packages/docs/site/docs/main/guides/index.md	Links to the new guide at the top of the Guides index.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[adamziel]

@fellyph this adds a docusaurus doc page – is there a https://wordpress.org/ URL where I should also add it?