Merge pull request #5 from imagewize/fix/border-color-raw-slug-rule

Fix/border Color Raw Slug Rule

Author: jasperf

CHANGELOG.md

@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.2.1] - 2026-05-12
+
+### Added
+
+- **`border-color-raw-slug` rule** (`BaseRules`) — detects raw color slugs in `"border"` style objects (e.g. `"color":"border-light"`) that must be `"color":"var:preset|color|{slug}"`. A bare slug causes WordPress to emit `border-color:border-light` instead of the CSS variable, producing a `core/group` block validation mismatch in the site editor.
+
 ## [2.2.0] - 2026-05-12
 
 ### Added

README.md

@@ -1,4 +1,4 @@
-# pt-cli — WordPress Block Theme Developer Toolkit
+# WordPress Pattern Toolkit
 
 Scaffolding, compliance checking, and HTML template validation for WordPress FSE block themes.
 

src/Compliance/Rules/BaseRules.php

@@ -63,6 +63,7 @@ public function check(string $filePath): array
         $violations = array_merge($violations, $this->checkButtonClassNameOrder($content));
         $violations = array_merge($violations, $this->checkCoverBlockMinHeight($content));
         $violations = array_merge($violations, $this->checkEmptyBorderSideObjects($content));
+        $violations = array_merge($violations, $this->checkBorderColorRawSlug($content));
         $violations = array_merge($violations, $this->checkButtonsWrapper($content));
         $violations = array_merge($violations, $this->checkGroupOverflowHidden($content));
         $violations = array_merge($violations, $this->checkOpacityInlineStyle($content));
@@ -264,6 +265,17 @@ private function checkEmptyBorderSideObjects(string $content): array
         return [];
     }
 
+    private function checkBorderColorRawSlug(string $content): array
+    {
+        // Matches "border":{..."color":"some-slug"...} where the value is not a var:preset reference.
+        // Raw slugs (e.g. "color":"border-light") cause WordPress to emit border-color:border-light
+        // instead of border-color:var(--wp--preset--color--border-light), producing a block validation mismatch.
+        if (preg_match('/"border"\s*:\s*\{[^}]*"color"\s*:\s*"(?!var:preset\|color\|)[a-z][a-z0-9-]*"/', $content, $matches)) {
+            return [$this->violation('border-color-raw-slug', 'Raw color slug found in "border" object — use "color":"var:preset|color|{slug}" instead of a bare slug (e.g. "color":"border-light" → "color":"var:preset|color|border-light"). A raw slug causes WordPress to emit border-color:{slug} rather than the CSS variable, producing a block validation mismatch.')];
+        }
+        return [];
+    }
+
     private function checkButtonsWrapper(string $content): array
     {
         $lines = explode("\n", $content);

tests/Compliance/Rules/BaseRulesTest.php

@@ -314,4 +314,56 @@ public function testIsAutofixableReturnsTrue(): void
     {
         $this->assertTrue($this->rules->isAutofixable());
     }
+
+    // ========================================================================
+    // Border Color Raw Slug Tests
+    // ========================================================================
+
+    public function testBorderColorRawSlugIsViolation(): void
+    {
+        $content = <<<'PHP'
+            <?php ?>
+            <!-- wp:group {"className":"elayne-engraving-option","style":{"border":{"width":"1px","color":"border-light","radius":"0"}}} -->
+            <div class="wp-block-group elayne-engraving-option"></div>
+            <!-- /wp:group -->
+            PHP;
+
+        $file = $this->createTempFile($content);
+        $violations = $this->rules->check($file);
+
+        $ruleNames = array_column($violations, 'rule');
+        $this->assertContains('border-color-raw-slug', $ruleNames);
+    }
+
+    public function testBorderColorPresetReferencePassesClean(): void
+    {
+        $content = <<<'PHP'
+            <?php ?>
+            <!-- wp:group {"className":"elayne-engraving-option","style":{"border":{"width":"1px","color":"var:preset|color|border-light","radius":"0"}}} -->
+            <div class="wp-block-group elayne-engraving-option"></div>
+            <!-- /wp:group -->
+            PHP;
+
+        $file = $this->createTempFile($content);
+        $violations = $this->rules->check($file);
+
+        $ruleNames = array_column($violations, 'rule');
+        $this->assertNotContains('border-color-raw-slug', $ruleNames);
+    }
+
+    public function testBorderColorEmptyObjectPassesClean(): void
+    {
+        $content = <<<'PHP'
+            <?php ?>
+            <!-- wp:group {"style":{"border":{"width":"1px","radius":"0"}}} -->
+            <div class="wp-block-group"></div>
+            <!-- /wp:group -->
+            PHP;
+
+        $file = $this->createTempFile($content);
+        $violations = $this->rules->check($file);
+
+        $ruleNames = array_column($violations, 'rule');
+        $this->assertNotContains('border-color-raw-slug', $ruleNames);
+    }
 }