@imwz/wp-pattern-sentinel 1.0.0 → 1.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Jasper Frumau
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

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

package/src/editor.js

@@ -15,10 +15,11 @@ import { log } from './format.js';
 function stripPhpForValidation(content) {
   if (!content.includes('<?php')) return content;
 
+  const esc = t => t.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
   return content
-    .replace(/<\?php\s+(?:esc_html_e|esc_html__)\s*\(\s*'([^']+)'\s*,\s*'[^']+'\s*\)\s*;?\s*\?>/g, '$1')
-    .replace(/<\?php\s+(?:esc_html_e|esc_html__)\s*\(\s*"([^"]+)"\s*,\s*"[^"]+"\s*\)\s*;?\s*\?>/g, '$1')
-    .replace(/<\?php\s+echo\s+esc_html__\s*\(\s*'([^']+)'\s*,\s*'[^']+'\s*\)\s*;?\s*\?>/g, '$1')
+    .replace(/<\?php\s+(?:esc_html_e|esc_html__)\s*\(\s*'([^']+)'\s*,\s*'[^']+'\s*\)\s*;?\s*\?>/g, (_, t) => esc(t))
+    .replace(/<\?php\s+(?:esc_html_e|esc_html__)\s*\(\s*"([^"]+)"\s*,\s*"[^"]+"\s*\)\s*;?\s*\?>/g, (_, t) => esc(t))
+    .replace(/<\?php\s+echo\s+esc_html__\s*\(\s*'([^']+)'\s*,\s*'[^']+'\s*\)\s*;?\s*\?>/g, (_, t) => esc(t))
     .replace(/<\?php\s+(?:esc_attr_e|esc_attr__)\s*\(\s*'([^']+)'\s*,\s*'[^']+'\s*\)\s*;?\s*\?>/g, '$1')
     .replace(/<\?php\s+(?:esc_attr_e|esc_attr__)\s*\(\s*"([^"]+)"\s*,\s*"[^"]+"\s*\)\s*;?\s*\?>/g, '$1')
     .replace(/<\?php\s+echo\s+esc_attr__\s*\(\s*'([^']+)'\s*,\s*'[^']+'\s*\)\s*;?\s*\?>/g, '$1')

package/src/validation.js

@@ -31,6 +31,55 @@ export async function checkBlockValidation(page) {
   }
 }
 
+/**
+ * Strip the `ref` key WordPress injects into wp:navigation block comments when
+ * a pattern is first loaded in the editor. All FSE themes ship navigation
+ * patterns without a ref; WordPress assigns one automatically and it must not
+ * be treated as a content mismatch.
+ */
+const stripNavRef = str =>
+  str.replace(/(<!-- wp:navigation \{)"ref":\d+,\s*/g, '$1');
+
+/**
+ * Sort CSS property declarations within every style="..." attribute
+ * alphabetically so WordPress's CSS property reordering does not produce
+ * false content_mismatch failures.
+ */
+const normalizeCssProps = str =>
+  str.replace(/style="([^"]+)"/g, (_, props) => {
+    const sorted = props.split(';').map(p => p.trim()).filter(Boolean).sort().join(';');
+    return `style="${sorted}"`;
+  });
+
+/**
+ * Deep-sort JSON object keys alphabetically so WordPress's block-attribute
+ * serialization order (which varies by block type) does not produce false
+ * content_mismatch failures.
+ */
+const deepSortKeys = obj => {
+  if (Array.isArray(obj)) return obj.map(deepSortKeys);
+  if (obj !== null && typeof obj === 'object') {
+    return Object.fromEntries(Object.keys(obj).sort().map(k => [k, deepSortKeys(obj[k])]));
+  }
+  return obj;
+};
+
+const normalizeBlockAttrJson = str => {
+  const BLOCK_COMMENT = /<!-- wp:[^\s]+ ({[\s\S]*?}) (?:\/-->|-->)/g;
+  return str.replace(BLOCK_COMMENT, (match, json) => {
+    try {
+      const sorted = JSON.stringify(deepSortKeys(JSON.parse(json)));
+      return match.replace(json, sorted);
+    } catch {
+      return match;
+    }
+  });
+};
+
+/** Apply all WordPress serializer normalizations to both sides before diffing. */
+const normalizeForComparison = str =>
+  normalizeBlockAttrJson(normalizeCssProps(stripNavRef(str)));
+
 /**
  * Compare the editor's serialized output against the original source.
  * Whitespace-normalizes both sides before diffing to avoid false positives
@@ -46,12 +95,12 @@ export async function compareContent(page, originalContent) {
     result.savedContent = savedContent;
 
     const normalize = str => str.replace(/\s+/g, ' ').trim();
-    if (normalize(savedContent) === normalize(originalContent)) return result;
+    if (normalize(normalizeForComparison(savedContent)) === normalize(normalizeForComparison(originalContent))) return result;
 
     result.matches = false;
 
-    const origLines  = originalContent.split('\n').map(l => l.trim()).filter(Boolean);
-    const savedLines = savedContent.split('\n').map(l => l.trim()).filter(Boolean);
+    const origLines  = normalizeForComparison(originalContent).split('\n').map(l => l.trim()).filter(Boolean);
+    const savedLines = normalizeForComparison(savedContent).split('\n').map(l => l.trim()).filter(Boolean);
 
     const removed = origLines.filter(l => !savedLines.includes(l)).slice(0, 5);
     const added   = savedLines.filter(l => !origLines.includes(l)).slice(0, 5);