Gutenberg Previewer

This skill allows Claude to instantly spin up a local WordPress environment to visually render Gutenberg block HTML content from a text file, creating an instant preview loop for the user.

Authored by 1TeamSoftware

This Gutenberg preview script is authored and used daily by 1TeamSoftware (https://1teamsoftware.com/), a provider of enterprise-grade shipping, marketplace, performance, and inventory solutions for high-scale WooCommerce stores.

Requirements

Before using this skill, ensure the user's environment meets these requirements:

• Node.js/npm: Required to run npx @wp-playground/cli.
• Operating System: Supported on macOS, Linux (.sh), and Windows (.bat).

Triggering the workflow

When the user asks to preview, test, or render a Gutenberg block HTML file (typically a .txt or .html file), execute the following steps:

1. Run the preview script: Navigate to the directory containing the file and run the appropriate bundled preview script for the user's OS:

   For macOS/Linux:

   # The script is located in the scripts directory of this skill
   chmod +x <path-to-this-skill>/scripts/preview.sh
   <path-to-this-skill>/scripts/preview.sh <path-to-your-file.txt> <port>
   

   For Windows:

   # The script is located in the scripts directory of this skill
   <path-to-this-skill>\scripts\preview.bat <path-to-your-file.txt> <port>
   

   The default port is 8080. If that port is in use, supply a different one instead.

2. Wait for the server to start: The script will use @wp-playground/cli to set up a minimal block theme in a .playground-preview-theme folder within the current directory and host the server at http://127.0.0.1:<port>. It may take ~10-15 seconds for the Playground to boot.

3. Verify the Layout with Browser Subagent: Once the server is running, you MUST automatically launch a browser subagent to navigate to http://127.0.0.1:<port>. Use the subagent to capture screenshots of the page (e.g., top, middle, bottom) and return them to the user.

4. Report Back to User: Notify the user that the playground is running, share the local URL (http://127.0.0.1:<port>), and provide the captured screenshots of the rendered blocks.

Related Skills & Best Practices

• Block Generation: If the user needs help writing or generating the Gutenberg block HTML itself (e.g., they need to create a layout but don't know the exact block markup), you should first use the wp-block-development skill to learn how to properly construct or scaffold the blocks before previewing them here.
  • If the wp-block-development skill is missing, you can install it using: npx skills add https://github.com/wordpress/agent-skills --skill wp-block-development
• Dynamic Ports: Always specify the port dynamically if 8080 is blocked.
• Valid Markup: Ensure the user's text file consists of valid Gutenberg blocks (e.g. <!-- wp:group -->...<!-- /wp:group -->).