{
  "$schema": "https://playground.wordpress.net/blueprint-schema.json",
  "landingPage": "/responsive-picture-block/",
  "preferredVersions": {
    "php": "8.2",
    "wp": "latest"
  },
  "phpExtensionBundles": [
    "kitchen-sink"
  ],
  "steps": [
    {
      "step": "setSiteOptions",
      "options": {
        "blogname": "Responsive Picture Block Demo"
      }
    },
    {
      "step": "login",
      "username": "admin",
      "password": "password"
    },
    {
      "step": "installPlugin",
      "pluginData": {
        "resource": "wordpress.org/plugins",
        "slug": "responsive-picture-block"
      },
      "options": {
        "activate": true
      }
    },
    {
      "step": "mkdir",
      "path": "/wordpress/wp-content/uploads/2025/11"
    },
    {
      "step": "writeFile",
      "path": "/wordpress/wp-content/uploads/2025/11/emilia-willberg-adEviDyBoEI-unsplash.webp",
      "data": {
        "resource": "url",
        "url": "https://raw.githubusercontent.com/iwtw-richb/demo-content/refs/heads/main/emilia-willberg-adEviDyBoEI-unsplash.webp"
      }
    },
    {
      "step": "writeFile",
      "path": "/wordpress/wp-content/uploads/2025/11/steven-van-elk-wyPZrkpuyu4-unsplash.webp",
      "data": {
        "resource": "url",
        "url": "https://raw.githubusercontent.com/iwtw-richb/demo-content/refs/heads/main/steven-van-elk-wyPZrkpuyu4-unsplash.webp"
      }
    },
    {
      "step": "wp-cli",
      "command": "wp media import /wordpress/wp-content/uploads/2025/11/emilia-willberg-adEviDyBoEI-unsplash.webp --porcelain"
    },
    {
      "step": "wp-cli",
      "command": "wp media import /wordpress/wp-content/uploads/2025/11/steven-van-elk-wyPZrkpuyu4-unsplash.webp --porcelain"
    },
    {
      "step": "runPHP",
      "code": "<?php require_once '/wordpress/wp-load.php'; $attachments = get_posts(['post_type' => 'attachment', 'post_status' => 'inherit', 'posts_per_page' => -1, 'orderby' => 'ID', 'order' => 'DESC']); $steven_id = null; $emilia_id = null; foreach ($attachments as $att) { $file = get_attached_file($att->ID); if (strpos($file, 'steven-van-elk') !== false) { $steven_id = $att->ID; } if (strpos($file, 'emilia-willberg') !== false) { $emilia_id = $att->ID; } if ($steven_id && $emilia_id) break; } if (!$steven_id || !$emilia_id) { echo 'Error: Could not find attachments'; exit; } $steven_src = wp_get_attachment_image_url($steven_id, 'large'); $emilia_src = wp_get_attachment_image_url($emilia_id, 'large'); if (!$steven_src || !$emilia_src) { echo 'Error: Could not get image URLs'; exit; } $content = '<!-- wp:spacer {\"height\":\"60px\"} -->' . \"\\n\" . '<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>' . \"\\n\" . '<!-- /wp:spacer -->' . \"\\n\\n\" . '<!-- wp:paragraph -->' . \"\\n\" . '<p>Preview this page in desktop and mobile mode to see the change of art direction based on device. <br><strong>Challenge</strong>: Try adding a tablet version or a landscape only version with a custom media query.</p>' . \"\\n\" . '<!-- /wp:paragraph -->' . \"\\n\\n\" . '<!-- wp:spacer {\"height\":\"60px\"} -->' . \"\\n\" . '<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>' . \"\\n\" . '<!-- /wp:spacer -->' . \"\\n\\n\" . '<!-- wp:ce/responsive-picture -->' . \"\\n\" . '<!-- wp:image {\"id\":' . $steven_id . ',\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->' . \"\\n\" . '<figure class=\"wp-block-image size-large\"><img src=\"' . esc_url($steven_src) . '\" alt=\"\" class=\"wp-image-' . $steven_id . '\"/></figure>' . \"\\n\" . '<!-- /wp:image -->' . \"\\n\\n\" . '<!-- wp:image {\"id\":' . $emilia_id . ',\"sizeSlug\":\"large\",\"linkDestination\":\"none\",\"ceViewport\":\"mobile\"} -->' . \"\\n\" . '<figure class=\"wp-block-image size-large\"><img src=\"' . esc_url($emilia_src) . '\" alt=\"\" class=\"wp-image-' . $emilia_id . '\"/></figure>' . \"\\n\" . '<!-- /wp:image -->' . \"\\n\" . '<!-- /wp:ce/responsive-picture -->'; wp_insert_post(['post_title' => 'Responsive Picture Block Test', 'post_name' => 'responsive-picture-block', 'post_content' => $content, 'post_status' => 'publish', 'post_type' => 'page']); echo 'OK';"
    }
  ]
}