Add 10 initial Blueprints

[adamziel]

A few places they could be sourced from:

• https://github.com/WordPress/block-theme-examples?tab=readme-ov-file
• https://github.com/WordPress/block-development-examples
• https://wordpress.github.io/wordpress-playground/blueprints-api/examples
• https://wordpress.github.io/wordpress-playground/blueprints-api/index
• https://wordpress.github.io/wordpress-playground/build-your-first-app

Let's add those Blueprints via separate Pull Requests to serve as examples for the publishing guidelines.

Let's include additional static assets with at least one of them to demonstrate how to ship and use those via raw.githubusercontent.com.

Open questions

• Should this repository support shipping two Blueprints in a single directory? cc @tellyworth

cc @bph @justintadlock

[annezazu]

I'd be happy to add the Block Museum as a Blueprint too: https://block-museum.com/ It's a community project and I bet it would be cool to see it behind the scenes with a blueprint.

[justintadlock]

What I'd like to see for a blueprint + XML import is a good demo of content (i.e., not "test" content) with the Twenty Twenty-Four theme. Something like 10 posts with media and various blocks in a more realistic context. If we had something like this, it'd be easier to "sell" other themers on seriously considering using Playground.

This blueprint proposal would be great for:

• Potentially proposing for better integration with the DotOrg theme repo in the future (the demos there are not good at all).
• Giving theme authors a starting point for building their own blueprints.

Basically, shoot for making the de facto standard for creating a theme demo.

Should this repository support shipping two Blueprints in a single directory?

I'm not 100% sure what you're asking.

[adamziel]

More ideas from @annezazu

• Twenty Twenty with block template parts.
• Twenty Twenty with theme.json.
• Twenty Twenty with theme.json and various block options for color limited.
• Twenty Twenty-Four with locked blocks or patterns (including content only editing).
• Twenty Twenty-Four with both theme provided and custom starter patterns, along with patterns prioritized from the pattern directory.
• Twenty Twenty-Four with various block options limited (duotone, color, typography tools) and client side filtering for some blocks.

[adamziel]

Install and activate a WordPress plugin from a .php file stored in a gist:

{
  "landingPage": "/wp-admin/plugins.php",
  "preferredVersions": {
    "wp": "beta",
    "php": "8.0"
  },
  "steps": [
    {
      "step": "login"
    },
    {
      "step": "writeFile",
      "path": "/wordpress/wp-content/plugins/0-plugin.php",
      "data": {
        "resource": "url",
        "url": "https://gist.githubusercontent.com/ndiego/456b74b243d86c97cda89264c68cbdee/raw/ff00cf25e6eebe4f5a4eaecff10286f71e65340b/block-hooks-demo.php"
      }
    },
    {
      "step": "activatePlugin",
      "pluginName": "Block Hooks Demo",
      "pluginPath": "0-plugin.php"
    }
  ]
}

[adamziel]

Log in as a user with editor role:

{
  "landingPage": "/wp-admin/",
  "steps": [
    {
      "step": "runPHP",
      "code": "<?php require '/wordpress/wp-load.php'; $user_id = wp_create_user('myuser', 'mypass', 'myuser@localhost'); (new WP_User($user_id))->set_role('editor');"
    },
    {
      "step": "login",
      "username": "myuser",
      "password": "mypass"
    }
  ]
}

[helgatheviking]

Oh definitely need a way to provide test content. For example, in one of my plugins, I would want to generate a bunch of users. This technically looks doable via a runPHP step, but it's also kinda a pain for as much content as I need.

Updating to add that apparently you can use wp-cli commands to generate content OR you can import XML like in this example

[ryanwelcher]

Example from the preview button that imports content from a repo and lands on the edit screen of a given Post ID.

{
  "$schema": "https://playground.wordpress.net/blueprint-schema.json",
  "landingPage": "/wp-admin/post.php?post=57&action=edit",
  "preferredVersions": {
    "php": "8.0",
    "wp": "latest"
  },
  "phpExtensionBundles": ["kitchen-sink"],
  "features": {
    "networking": true
  },
  "steps": [
    {
      "step": "login",
      "username": "admin",
      "password": "password"
    },
    {
      "step": "installPlugin",
      "pluginZipFile": {
        "resource": "url",
        "url": "https://downloads.wordpress.org/plugin/advanced-query-loop.zip"
      },
      "options": {
        "activate": true
      }
    },
    {
      "step": "importFile",
      "file": {
        "resource": "url",
        "url": "https://raw.githubusercontent.com/ryanwelcher/advanced-query-loop/trunk/_blueprints/demo-content.xml"
      }
    }
  ]
}

[bgrgicak]

We are considering printing some cards for WCEU that would include QR codes to preconfigured sites.
The idea is that people could come to our booth and get a store, blog, company site...

That partially overlaps with this task, so it would be nice to reuse some of the blueprints. We don't want to showcase the technical capabilities of Playground but get a wow effect.

Please share any ideas that you might have in this issue WordPress/wordpress-playground#1200.

[helgatheviking]

Offering up my blueprint in case y'all find it useful:

[flexseth]

Block Hooks example: Add a Like button - https://github.com/ockham/like-button/tree/trunk

Could be modified for a Cart interface in WooCommerce if someone wants to get fancy.

[flexseth]

Create a WordPress post from a Markdown file using wp-cli

@adamziel - See where I'm going with this one? 😉

[flexseth]

Quite a few Blueprint examples

Here's a long list I came up with last night of Blueprint ideas!

[flexseth]

Proof of concepts for Blueprints

Support for 10 Initial Blueprints for the Community Gallery

Here are a list of ideas of what you could conceivably do with Blueprints.

Blueprint Ideas

---

Design & Development

Create a new custom block

• scaffold a new block via the create-block package
  • include steps for build setup
  • uses CLI input to bring variables to create block ingredients

Create a new block theme

• create-block-theme

Create a new block plugin

• create-block-plugin
  • scaffold a plugin via WP-CLI
  • or try using the Better Plugin Boilerplate

Create a block library

• Block Library - create a block library
  • a blueprint that creates a block library
  • or create an interface to create multiple blocks

Work with patterns

• Pattern UI
  • create a pattern based on WP-CLI input
  • all about Patterns
  • after registration, create pages based on pattern slug and navigate to all patterns

Hooks, Actions, and Filters (oh my!)

• Work with PHP in WordPress
  • example for using add_filter with a mu-pugin
    • Needs fix per Slack convo
  • Another example

Create content

• Generate content using Fakerpress (plugin demo, content), navigate to Pages
• Markdown to WordPress - Create WordPress posts from a Markdown file
  • read file via wp-cli - wp post create docs-page.md
  • open in editor, go to list view
  • copy/paste all blocks
  • create docs-page.html from block markup....
  • how to handle taxonomy and meta, etc. (TwentyTwenty Four adds categories at top and tags bottom of post)
  • sets the stage for migrating all Markdown related docs pages to WordPress
  • also sets the stage to standardize Gutenberg for documentation in other Open Source Software projects!!

Working with content

Working with the datastore

• Get data from WordPress in JavaScript (use hooks)
• useSelect example
• Working with a custom datastore

Testing, Debugging

Testing

• Theme Unit Test - [must fix(https://github.com/Use Theme Unit Test Data as a starter content wordpress-playground#718)] [Add CORS headers]
• WordPress Coding Standards (WPCS) - install Plugin Review Check and run on a plugin
• Theme Check - install Theme Check plugin and run on a theme

Debugging

• Using the Debug Bar in your Playground

Demos, Sharing, Collaboration, Teaching

• Demo a plugin with a blueprint that imports relevant content
• Share a blueprint with a colleague
• Collaborate on a Playground with a colleague
  • create a new user account via wp-cli
  • share access (export/import)
• Teach a class how to build a plugin
  • use create-plugin utility (needs dev)
  • install Playground Plugin
  • open a page with an Interactive Code block on it

Deep Linking

Stylebook - customize theme styles and jump to the stylebook

• add custom styles to theme.json via the CLI
• or define your custom styles in the root directory, write to theme.json file
• Jump to the stylebook to view the custom styles

Maintenance, Optimization, Configuration

Start with a "completely fresh" WordPress install

• Site Cleanup plugin (start completely fresh)

Speculative Loading - preload assets to make the site faster

Optimization - run Performance Lab on a site

Using WordPress configuration variables - DefineWPConfigConstsStep

• Define custom config variables via wp-config to use with WP-CLI in blueprints - see Slack thread

---

Blueprint utilities

Automatically add CORS support if needed

• CORS - automatically add CORS support if needed to support the blueprint
• scan blueprint for need, if so, add CORS support

Automatic networking detection

• Network detection is turned off by default
• scan blueprint for need, if so, turn on networking

Automatically add blueprint keywords (categories)

• Helpful when submitting to Blueprints Community
• Add categories to the blueprint for searchability
• scan the blueprint for keywords common to the plugins directory
• add keywords to the blueprint metadata as categories
• "hot" keywords API - test it out!

[adamziel]

We now have 10 Blueprints in the Gallery – thank you all so much for your amazing contributions and ideas! 🎉 🎉 🎉

Let's close this issue and continue the conversation in Tracking: Wanted Blueprints where I gathered a structured list of things that came up in this discussion.