@imwz/wp-pattern-sentinel 1.1.2 → 1.1.4

package/README.md

@@ -125,7 +125,7 @@ node bin/sentinel.js --verbose --url=... path/to/patterns/
 | `--concurrency` | `4` | Parallel workers |
 | `--json` | `false` | Output JSON (one result per line) |
 | `--keep-page` | `false` | Don't delete draft pages after validation |
-| `--verbose` | `false` | Show detailed step-by-step progress for each pattern |
+| `--verbose` | `false` | Show detailed step-by-step progress for each pattern, with the time each step took |
 | `--width` | `1280` | Viewport width |
 | `--height` | `800` | Viewport height |
 | `--cache` | `false` | Skip patterns that previously passed with the same file content (see [Pass cache](#pass-cache)) |
@@ -231,3 +231,5 @@ npx wp-pattern-sentinel --url=http://imagewize.test --user=admin --pass=secret p
 
 - `0` — all patterns passed
 - `1` — one or more patterns failed
+
+A `page_creation_error` means the block editor didn't load, so the pattern was never tested. This happens when several workers load the editor at once on a small PHP-FPM pool (e.g. Laravel Valet) and some editor scripts return 502. Sentinel detects this as soon as the page loads and retries up to three times, with a randomized delay, before giving up. The summary counts these failures as infrastructure errors, separate from validation failures. They still exit with `1`. If they keep happening, lower `--concurrency`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imwz/wp-pattern-sentinel",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "Browser-based WordPress block pattern validator using Playwright",
   "type": "module",
   "engines": {

package/src/editor.js

@@ -61,46 +61,94 @@ export function extractBlockContent(fileContent) {
   return stripPhpForValidation(stripped);
 }
 
+const PAGE_CREATION_RETRY_DELAYS = [3_000, 8_000, 15_000]; // ms before retries 1, 2, 3 (plus jitter)
+
 /**
- * Navigate to a new draft page and return its post ID.
+ * Navigate to a new draft page and return its post ID, or null on failure.
  * WordPress redirects post-new.php → post.php?post=ID&action=edit,
  * so we can read the ID directly from the final URL.
+ *
+ * When several workers open post-new.php at once, each cold editor requests
+ * ~150 scripts. On a small local PHP-FPM pool (Laravel Valet routes even
+ * static files through PHP) the socket backlog overflows and some scripts
+ * come back 502, so the editor never boots (#21). That's an infrastructure
+ * error, not a pattern failure: detect it as soon as the document has loaded
+ * and retry after a jittered backoff, so workers don't collide again.
  */
 export async function createDraftPage(page, baseUrl, verbose = false) {
+  for (let attempt = 0; attempt <= PAGE_CREATION_RETRY_DELAYS.length; attempt++) {
+    if (attempt > 0) {
+      const base  = PAGE_CREATION_RETRY_DELAYS[attempt - 1];
+      const delay = base + Math.round(Math.random() * base);
+      log(`    Editor load failed — waiting ${(delay / 1000).toFixed(1)}s before retry ${attempt}/${PAGE_CREATION_RETRY_DELAYS.length}...`, 'yellow');
+      await new Promise(resolve => setTimeout(resolve, delay));
+    }
+
+    try {
+      return await attemptCreateDraftPage(page, baseUrl, verbose);
+    } catch (error) {
+      const shortMsg = error.message.split('\n')[0];
+      if (attempt < PAGE_CREATION_RETRY_DELAYS.length) {
+        log(`    Draft page attempt ${attempt + 1} failed: ${shortMsg}`, 'yellow');
+      } else {
+        log(`Failed to create draft page after ${attempt + 1} attempts: ${error.message}`, 'red');
+      }
+    }
+  }
+  return null;
+}
+
+async function attemptCreateDraftPage(page, baseUrl, verbose) {
+  const start = Date.now();
+  if (verbose) log('    → Creating draft page...', 'gray');
+
+  // Editor scripts are parser-blocking, so every one has responded by
+  // domcontentloaded. A server error on any of them means the editor can't
+  // boot — fail now instead of waiting out the selector timeout.
+  const brokenScripts = [];
+  const onResponse = response => {
+    if (response.status() >= 500 && response.request().resourceType() === 'script') {
+      brokenScripts.push(response.status());
+    }
+  };
+  page.on('response', onResponse);
   try {
-    if (verbose) log('    → Creating draft page...', 'gray');
     await page.goto(`${baseUrl}/wp-admin/post-new.php?post_type=page`, {
       waitUntil: 'domcontentloaded',
-      timeout: 30000,
-    });
-
-    await page.waitForSelector('.edit-post-layout, .editor-styles-wrapper', {
-      timeout: 30000,
     });
+  } finally {
+    page.off('response', onResponse);
+  }
+  if (brokenScripts.length > 0) {
+    throw new Error(
+      `${brokenScripts.length} editor script(s) failed to load (HTTP ${[...new Set(brokenScripts)].join(', ')}) — server overloaded`
+    );
+  }
+  if (verbose) log(`    → post-new.php loaded (${Date.now() - start}ms)`, 'gray');
 
-    const url = page.url();
-    const match = url.match(/[?&]post=(\d+)/);
-    if (match) {
-      if (verbose) log('    → Draft page created', 'gray');
-      return parseInt(match[1], 10);
-    }
+  await page.waitForSelector('.edit-post-layout, .editor-styles-wrapper');
 
-    // Fallback: read from wp.data (editor may not have redirected yet)
-    const pageId = await page.evaluate(() =>
-      window.wp?.data?.select('core/editor')?.getCurrentPostId?.() ?? null
-    );
-    if (verbose && pageId) log('    → Draft page created', 'gray');
-    return pageId;
-  } catch (error) {
-    log(`Failed to create draft page: ${error.message}`, 'red');
-    return null;
+  const url = page.url();
+  const match = url.match(/[?&]post=(\d+)/);
+  if (match) {
+    if (verbose) log(`    → Draft page created (${Date.now() - start}ms)`, 'gray');
+    return parseInt(match[1], 10);
   }
+
+  // Fallback: read from wp.data (editor may not have redirected yet)
+  const pageId = await page.evaluate(() =>
+    window.wp?.data?.select('core/editor')?.getCurrentPostId?.() ?? null
+  );
+  if (pageId === null) throw new Error('Editor loaded but no post ID was found');
+  if (verbose) log(`    → Draft page created (${Date.now() - start}ms)`, 'gray');
+  return pageId;
 }
 
 /**
  * Set the editor content via wp.data and wait for blocks to parse.
  */
 export async function insertPatternIntoEditor(page, blockContent, verbose = false) {
+  const start = Date.now();
   try {
     if (verbose) log('    → Inserting pattern into editor...', 'gray');
     await page.evaluate(content => {
@@ -110,25 +158,11 @@ export async function insertPatternIntoEditor(page, blockContent, verbose = fals
     // Wait until at least one block is present
     await page.waitForFunction(
       () => window.wp.data.select('core/block-editor').getBlocks().length > 0,
+      null,
       { timeout: 15000 }
     );
 
-    // Nested `core/pattern` placeholders are swapped for the referenced
-    // pattern's blocks asynchronously, once the pattern registry has loaded.
-    // Wait for that so the save and the content comparison see the expanded
-    // tree. Unregistered slugs never expand, so a timeout here is non-fatal.
-    if (/<!-- wp:pattern\s/.test(blockContent)) {
-      await page
-        .waitForFunction(() => {
-          const hasPattern = blocks => blocks.some(
-            b => b.name === 'core/pattern' || hasPattern(b.innerBlocks ?? [])
-          );
-          return !hasPattern(window.wp.data.select('core/block-editor').getBlocks());
-        }, { timeout: 10000 })
-        .catch(() => {});
-    }
-
-    if (verbose) log('    → Pattern inserted', 'gray');
+    if (verbose) log(`    → Pattern inserted (${Date.now() - start}ms)`, 'gray');
     return true;
   } catch (error) {
     log(`Failed to insert pattern: ${error.message}`, 'red');
@@ -141,24 +175,24 @@ export async function insertPatternIntoEditor(page, blockContent, verbose = fals
  */
 export async function savePage(page, verbose = false) {
   const result = { success: false, errors: [], warnings: [] };
+  const start  = Date.now();
   try {
     if (verbose) log('    → Saving page...', 'gray');
+    // savePost() resolves once the save request and its hooks have finished,
+    // and evaluate() awaits it — so isSavingPost() is already false here.
+    // Don't wait for the save to *start*: that condition never becomes true
+    // again and the wait runs to its full timeout (the 60s stall in #21).
     await page.evaluate(() => window.wp.data.dispatch('core/editor').savePost());
 
-    // Wait for save to start, then finish
-    await page
-      .waitForFunction(
-        () => window.wp.data.select('core/editor').isSavingPost(),
-        { timeout: 5000 }
-      )
-      .catch(() => {}); // save might be near-instant
-
+    // waitForFunction's second parameter is the page-function arg, so options
+    // must go third — passed second, the timeout is silently ignored.
     await page.waitForFunction(
       () => !window.wp.data.select('core/editor').isSavingPost(),
+      null,
       { timeout: 30000 }
     );
 
-    if (verbose) log('    → Page saved', 'gray');
+    if (verbose) log(`    → Page saved (${Date.now() - start}ms)`, 'gray');
     result.success = true;
   } catch (error) {
     result.errors.push({ type: 'save_error', message: error.message });
@@ -171,6 +205,7 @@ export async function savePage(page, verbose = false) {
  * Non-fatal — a failure here does not affect validation results.
  */
 export async function deletePage(page, baseUrl, pageId, verbose = false) {
+  const start = Date.now();
   try {
     if (verbose) log('    → Deleting draft page...', 'gray');
     await page.evaluate(async id => {
@@ -180,7 +215,7 @@ export async function deletePage(page, baseUrl, pageId, verbose = false) {
         headers: { 'X-WP-Nonce': nonce },
       });
     }, pageId);
-    if (verbose) log('    → Draft page deleted', 'gray');
+    if (verbose) log(`    → Draft page deleted (${Date.now() - start}ms)`, 'gray');
   } catch {
     // Non-fatal
   }

package/src/format.js

@@ -7,6 +7,14 @@ const C = {
   gray:   '\x1b[90m',
 };
 
+/**
+ * Error types that mean the pattern could not be tested at all (the editor
+ * never loaded), as opposed to the pattern failing validation.
+ */
+const INFRA_ERRORS = new Set(['page_creation_error']);
+
+const isInfraFailure = r => !r.passed && r.errors.some(e => INFRA_ERRORS.has(e.type));
+
 export function log(message, color = 'reset') {
   console.log(`${C[color] ?? C.reset}${message}${C.reset}`);
 }
@@ -31,6 +39,7 @@ export function formatResult(result) {
 export function printSummary(results, skipped = 0) {
   const passed       = results.filter(r => r.passed).length;
   const failed       = results.filter(r => !r.passed).length;
+  const infra        = results.filter(isInfraFailure).length;
   const totalErrors  = results.reduce((n, r) => n + r.errors.length, 0);
   const totalWarns   = results.reduce((n, r) => n + r.warnings.length, 0);
   const totalMs      = results.reduce((n, r) => n + r.duration, 0);
@@ -43,6 +52,9 @@ export function printSummary(results, skipped = 0) {
   if (skipped > 0) log(`Skipped   : ${skipped} (cached)`, 'gray');
   log(`Passed    : ${passed}`,       passed      > 0 ? 'green'  : 'gray');
   log(`Failed    : ${failed}`,       failed      > 0 ? 'red'    : 'gray');
+  if (infra > 0) {
+    log(`  of which : ${infra} infrastructure (editor did not load — re-run, or lower --concurrency)`, 'yellow');
+  }
   log(`Errors    : ${totalErrors}`,  totalErrors > 0 ? 'red'    : 'gray');
   log(`Warnings  : ${totalWarns}`,   totalWarns  > 0 ? 'yellow' : 'gray');
   log(`Time      : ${totalMs}ms  (avg ${avgMs}ms/pattern)`);

package/src/main.js

@@ -12,7 +12,7 @@ import {
   savePage,
   deletePage,
 } from './editor.js';
-import { checkBlockValidation, compareContent } from './validation.js';
+import { checkBlockValidation, compareContent, splitPatternRefs, checkPatternRefs } from './validation.js';
 import { log, formatResult, printSummary } from './format.js';
 
 const CACHE_FILE = '.sentinel-cache.json';
@@ -191,21 +191,43 @@ async function validatePatternFile(patternPath, options, context) {
     return fail(patternName, patternPath, startTime, 'extraction_error', 'Could not extract block content from file');
   }
 
+  // Nested `wp:pattern` references are validated by their own pattern's run;
+  // here they only need to resolve. The editor round-trip covers the rest.
+  const { slugs, ownContent } = splitPatternRefs(blockContent);
+
   const page = await context.newPage();
   page.setDefaultTimeout(60000);
 
   try {
     const pageId = await createDraftPage(page, options.adminUrl, verbose);
     if (pageId === null) {
-      return fail(patternName, patternPath, startTime, 'page_creation_error', 'Failed to create test page');
+      return fail(patternName, patternPath, startTime, 'page_creation_error', 'Editor did not load after retries — not a pattern problem; re-run or lower --concurrency');
+    }
+
+    const refErrors = await checkPatternRefs(page, slugs, verbose);
+
+    // A pattern that only composes other patterns has nothing of its own to
+    // round-trip through the editor.
+    if (!ownContent) {
+      await deletePage(page, options.adminUrl, pageId, verbose);
+      return {
+        pattern:  patternName,
+        patternPath,
+        hash:     hashContent(fileContent),
+        passed:   refErrors.length === 0,
+        errors:   refErrors,
+        warnings: [],
+        duration: Date.now() - startTime,
+      };
     }
 
-    if (!(await insertPatternIntoEditor(page, blockContent, verbose))) {
+    if (!(await insertPatternIntoEditor(page, ownContent, verbose))) {
       await deletePage(page, options.adminUrl, pageId, verbose);
       return fail(patternName, patternPath, startTime, 'insertion_error', 'Failed to insert pattern into editor');
     }
 
     const saveResult  = await savePage(page, verbose);
+    saveResult.errors.push(...refErrors);
     const blockErrors = await checkBlockValidation(page, verbose);
 
     if (blockErrors.length > 0) {
@@ -219,7 +241,7 @@ async function validatePatternFile(patternPath, options, context) {
       })));
     }
 
-    const comparison = await compareContent(page, blockContent, verbose);
+    const comparison = await compareContent(page, ownContent, verbose);
     saveResult.errors.push(...comparison.errors);
     saveResult.warnings.push(...comparison.warnings);
 
@@ -231,7 +253,7 @@ async function validatePatternFile(patternPath, options, context) {
       pattern:      patternName,
       patternPath,
       hash:         hashContent(fileContent),
-      passed:       saveResult.success && comparison.matches && blockErrors.length === 0,
+      passed:       saveResult.success && comparison.matches && blockErrors.length === 0 && refErrors.length === 0,
       errors:       saveResult.errors,
       warnings:     saveResult.warnings,
       duration:     Date.now() - startTime,

package/src/validation.js

@@ -4,6 +4,7 @@ import { log } from './format.js';
  * Walk the block tree and collect any blocks where isValid === false.
  */
 export async function checkBlockValidation(page, verbose = false) {
+  const start = Date.now();
   if (verbose) log('    → Checking block validation...', 'gray');
   try {
     const errors = await page.evaluate(() => {
@@ -26,7 +27,7 @@ export async function checkBlockValidation(page, verbose = false) {
       ]);
       return walk(window.wp.data.select('core/block-editor').getBlocks());
     });
-    if (verbose) log('    → Block validation complete', 'gray');
+    if (verbose) log(`    → Block validation complete (${Date.now() - start}ms)`, 'gray');
     return errors;
   } catch (error) {
     log(`Block validation check error: ${error.message}`, 'yellow');
@@ -95,30 +96,59 @@ const normalizeForComparison = str =>
 
 /**
  * Matches a nested pattern reference: `<!-- wp:pattern {"slug":"theme/x"} /-->`.
- * The editor replaces these with the referenced pattern's blocks, so the
- * source must be expanded the same way before it can be diffed.
+ * A reference is a link to another pattern, not content of this one: the
+ * referenced pattern is validated by its own run, so here we only check that
+ * the slug resolves and validate whatever markup the pattern adds itself.
  */
 const PATTERN_REF = /<!-- wp:pattern (\{[\s\S]*?\}) \/-->/g;
 
-/** Map of registered pattern name → raw content, read from the REST API. */
-const fetchRegisteredPatterns = page =>
-  page.evaluate(async () => {
-    const patterns = await window.wp.apiFetch({ path: '/wp/v2/block-patterns/patterns' });
-    return Object.fromEntries(patterns.map(p => [p.name, p.content]));
-  });
+/**
+ * Split block content into the slugs it references and its own markup with
+ * those references removed. `ownContent` is '' for a pattern that only
+ * composes other patterns. A reference with unparseable JSON is left in
+ * place, so the editor flags it like any other invalid block.
+ */
+export function splitPatternRefs(content) {
+  const slugs = [];
+  const ownContent = content.replace(PATTERN_REF, (match, json) => {
+    try {
+      const { slug } = JSON.parse(json);
+      if (typeof slug !== 'string') return match;
+      slugs.push(slug);
+      return '';
+    } catch {
+      return match;
+    }
+  }).trim();
+  return { slugs, ownContent };
+}
 
 /**
- * Recursively substitute each `wp:pattern` reference with the referenced
- * pattern's content. Unregistered slugs and self-references are left as-is,
- * mirroring the editor, which leaves those `core/pattern` blocks unexpanded.
+ * Check every referenced slug is a registered pattern on the site. An
+ * unregistered slug (a typo, or a pattern missing from the synced theme)
+ * renders nothing on the page, so it is an error, not a warning.
  */
-const expandPatternRefs = (str, registry, seen = []) =>
-  str.replace(PATTERN_REF, (match, json) => {
-    let slug;
-    try { slug = JSON.parse(json).slug; } catch { return match; }
-    if (typeof registry[slug] !== 'string' || seen.includes(slug)) return match;
-    return expandPatternRefs(registry[slug], registry, [...seen, slug]);
-  });
+export async function checkPatternRefs(page, slugs, verbose = false) {
+  if (slugs.length === 0) return [];
+  if (verbose) log('    → Checking nested pattern references...', 'gray');
+  try {
+    const registered = await page.evaluate(async () => {
+      const patterns = await window.wp.apiFetch({ path: '/wp/v2/block-patterns/patterns' });
+      return patterns.map(p => p.name);
+    });
+    return [...new Set(slugs)]
+      .filter(slug => !registered.includes(slug))
+      .map(slug => ({
+        type:    'pattern_ref_missing',
+        message: `Referenced pattern "${slug}" is not registered on the site`,
+      }));
+  } catch (error) {
+    return [{
+      type:    'pattern_ref_error',
+      message: `Could not check nested pattern references: ${error.message}`,
+    }];
+  }
+}
 
 /**
  * Compare the editor's serialized output against the original source.
@@ -127,6 +157,7 @@ const expandPatternRefs = (str, registry, seen = []) =>
  */
 export async function compareContent(page, originalContent, verbose = false) {
   const result = { matches: true, errors: [], warnings: [], savedContent: null };
+  const start  = Date.now();
 
   try {
     if (verbose) log('    → Comparing content...', 'gray');
@@ -135,20 +166,9 @@ export async function compareContent(page, originalContent, verbose = false) {
     );
     result.savedContent = savedContent;
 
-    if (originalContent.includes('<!-- wp:pattern ')) {
-      try {
-        originalContent = expandPatternRefs(originalContent, await fetchRegisteredPatterns(page));
-      } catch (error) {
-        result.warnings.push({
-          type: 'pattern_ref_unresolved',
-          message: `Could not resolve nested wp:pattern references: ${error.message}`,
-        });
-      }
-    }
-
     const normalize = str => str.replace(/\s+/g, ' ').trim();
     if (normalize(normalizeForComparison(savedContent)) === normalize(normalizeForComparison(originalContent))) {
-      if (verbose) log('    → Content matches', 'gray');
+      if (verbose) log(`    → Content matches (${Date.now() - start}ms)`, 'gray');
       return result;
     }
 
@@ -172,7 +192,7 @@ export async function compareContent(page, originalContent, verbose = false) {
         message: `Content injected by editor:\n    ${added.join('\n    ')}`,
       });
     }
-    if (verbose) log('    → Content comparison complete', 'gray');
+    if (verbose) log(`    → Content comparison complete (${Date.now() - start}ms)`, 'gray');
   } catch (error) {
     result.errors.push({ type: 'comparison_error', message: error.message });
   }