@imwz/wp-pattern-sentinel 1.1.3 → 1.1.5

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)) |
@@ -212,6 +212,10 @@ node -e "
 
 `block_validation` errors also surface Gutenberg's human-readable issue messages (e.g. `"Expected attribute 'class' of value '…' but got '…'"`), so you no longer need to open the browser console to identify what failed.
 
+A block can also pass validation only because one of its block type's deprecations accepted the markup and migrated it. The editor reports such a block as valid, but it saves different markup, and it shows as broken the next time the page is opened. Sentinel re-validates every parsed block against its original markup and reports these as `block_validation` errors reading "Block was migrated by a deprecation and will save different markup". A common cause is an attribute the block does not support, such as `aria-hidden` on `core/paragraph`.
+
+`--cache` entries record the Sentinel version that passed them, so upgrading Sentinel re-validates every pattern once.
+
 ## npm publish
 
 When ready to publish:
@@ -231,3 +235,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.3",
+  "version": "1.1.5",
   "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,10 +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 }
     );
 
-    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');
@@ -126,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 });
@@ -156,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 => {
@@ -165,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

@@ -17,6 +17,12 @@ import { log, formatResult, printSummary } from './format.js';
 
 const CACHE_FILE = '.sentinel-cache.json';
 
+// Cache entries record the Sentinel version that passed them, so a release
+// that adds or tightens a check re-validates patterns that passed before it.
+const SENTINEL_VERSION = JSON.parse(
+  fs.readFileSync(new URL('../package.json', import.meta.url), 'utf8')
+).version;
+
 function loadCache() {
   try {
     return JSON.parse(fs.readFileSync(path.join(process.cwd(), CACHE_FILE), 'utf8'));
@@ -67,7 +73,7 @@ export async function main() {
       try {
         const content = fs.readFileSync(file, 'utf8');
         const key     = path.relative(process.cwd(), file);
-        if (cache[key]?.passed && cache[key]?.hash === hashContent(content)) {
+        if (cache[key]?.passed && cache[key]?.hash === hashContent(content) && cache[key]?.version === SENTINEL_VERSION) {
           skipped.push(file);
         } else {
           pending.push(file);
@@ -153,7 +159,7 @@ export async function main() {
     for (const result of results) {
       const key = path.relative(process.cwd(), result.patternPath);
       if (result.passed) {
-        cache[key] = { hash: result.hash, passed: true, checkedAt: new Date().toISOString() };
+        cache[key] = { hash: result.hash, passed: true, version: SENTINEL_VERSION, checkedAt: new Date().toISOString() };
       } else {
         delete cache[key];
       }
@@ -201,7 +207,7 @@ async function validatePatternFile(patternPath, options, context) {
   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);

package/src/validation.js

@@ -1,32 +1,62 @@
 import { log } from './format.js';
 
 /**
- * Walk the block tree and collect any blocks where isValid === false.
+ * Walk the block tree and collect any blocks where isValid === false, plus any
+ * block a deprecation silently migrated.
+ *
+ * When a block fails validation, the parser tries the block type's
+ * deprecations; if one accepts the markup, the block is migrated and reported
+ * as isValid: true with no issues, yet its attributes have changed and it will
+ * save different markup. The editor then shows the block as broken on the next
+ * load. Example: core/paragraph with aria-hidden="true" is taken by an old
+ * paragraph deprecation that drops fontFamily and keeps the whole <p> as the
+ * block's text, so the first save writes a <p> nested inside another <p>.
+ * Re-running validateBlock() on the parsed block compares what it will save
+ * against the original markup, which catches this.
  */
 export async function checkBlockValidation(page, verbose = false) {
+  const start = Date.now();
   if (verbose) log('    → Checking block validation...', 'gray');
   try {
     const errors = await page.evaluate(() => {
-      const walk = blocks => blocks.flatMap(block => [
-        ...(block.isValid === false
-          ? [{
-              blockId:          block.clientId,
-              blockName:        block.name,
-              error:            'Block validation failed',
-              validationIssues: (block.validationIssues ?? []).map(issue => {
-                try {
-                  return (issue.args ?? [])
-                    .map(a => (typeof a === 'string' ? a : JSON.stringify(a)))
-                    .join(' ');
-                } catch { return 'unknown issue'; }
-              }),
-            }]
-          : []),
-        ...walk(block.innerBlocks ?? []),
-      ]);
+      const formatIssues = issues => (issues ?? []).map(issue => {
+        try {
+          return (issue.args ?? [])
+            .map(a => (typeof a === 'string' ? a : JSON.stringify(a)))
+            .join(' ');
+        } catch { return 'unknown issue'; }
+      });
+      const validateBlock = window.wp.blocks.validateBlock;
+      const migratedIssues = block => {
+        if (!validateBlock || block.isValid !== true || block.name === 'core/missing') return null;
+        const [isValid, issues] = validateBlock(block);
+        return isValid ? null : issues;
+      };
+      const walk = blocks => blocks.flatMap(block => {
+        const migrated = migratedIssues(block);
+        return [
+          ...(block.isValid === false
+            ? [{
+                blockId:          block.clientId,
+                blockName:        block.name,
+                error:            'Block validation failed',
+                validationIssues: formatIssues(block.validationIssues),
+              }]
+            : []),
+          ...(migrated
+            ? [{
+                blockId:          block.clientId,
+                blockName:        block.name,
+                error:            'Block was migrated by a deprecation and will save different markup',
+                validationIssues: formatIssues(migrated),
+              }]
+            : []),
+          ...walk(block.innerBlocks ?? []),
+        ];
+      });
       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');
@@ -156,6 +186,7 @@ export async function checkPatternRefs(page, slugs, verbose = false) {
  */
 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');
@@ -166,7 +197,7 @@ export async function compareContent(page, originalContent, verbose = false) {
 
     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;
     }
 
@@ -190,7 +221,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 });
   }