Preserve native Group grid validity (#839)

Move grid gaps from invalid core/group saved attributes into generated geometry-carrier CSS while retaining class-owned source CSS.\n\nAI assistance: openai/gpt-5.6-sol via OpenCode was used to diagnose screenshot/editor evidence, implement the generic fix, and verify parity. Chris Huber reviewed and remains responsible for the change.

Author: chubes4

php-transformer/src/HtmlToBlocks/BlockFactory.php

@@ -167,11 +167,7 @@ private function normalizeAttrsForBlock(string $name, array $attrs): array
             }
         }
 
-        if ( in_array($name, array( 'core/buttons', 'core/column', 'core/columns', 'core/group', 'core/heading', 'core/list', 'core/list-item', 'core/media-text', 'core/paragraph' ), true)
-            // A native grid layout renders its gap from blockGap; stripping it
-            // would substitute the theme default for the source grid gap.
-            && ! ( 'core/group' === $name && 'grid' === (string) ($attrs['layout']['type'] ?? '') )
-        ) {
+        if ( in_array($name, array( 'core/buttons', 'core/column', 'core/columns', 'core/group', 'core/heading', 'core/list', 'core/list-item', 'core/media-text', 'core/paragraph' ), true) ) {
             unset($attrs['style']['spacing']['blockGap']);
             if ( empty($attrs['style']['spacing']) ) {
                 unset($attrs['style']['spacing']);

php-transformer/src/HtmlToBlocks/HtmlTransformer.php

@@ -3462,6 +3462,15 @@ private function createBlock(string $name, array $attrs = array(), array $innerB
                     self::CSS_OWNED_LAYOUT_ITEM_CLASS
                 );
             }
+            if ( 'core/group' === $name && 'grid' === (string) ($attrs['layout']['type'] ?? '') ) {
+                // Core Group's save() does not reproduce a blockGap declaration.
+                // Preserve an authored inline gap in a generated carrier instead
+                // of storing markup that the editor will mark invalid.
+                $gapCarrier = $this->inlineGeometryClassName($sourceElement, array(), array( 'gap' ));
+                if ( '' !== $gapCarrier ) {
+                    $attrs['className'] = $this->mergeClassNames((string) ($attrs['className'] ?? ''), $gapCarrier);
+                }
+            }
             if ( 'core/table' === $name && isset($this->sourceTableMarkers[$this->sourceElementIdentity($sourceElement)]) ) {
                 $attrs['className'] = $this->mergeClassNames((string) ($attrs['className'] ?? ''), $this->sourceTableMarkers[$this->sourceElementIdentity($sourceElement)]);
             }
@@ -4163,19 +4172,14 @@ private function cssOwnedGroupAttributes(DOMElement $element): array
         $layout = $attrs['layout'] ?? null;
         if ( is_array($layout) && 'grid' === (string) ($layout['type'] ?? '') && '' !== (string) ($layout['minimumColumnWidth'] ?? '') ) {
             // The source track list is exactly expressible as native grid
-            // layout, so WordPress owns the geometry and no css-owned
-            // demotion is needed. The author gap and container background ride
-            // on block supports so hairline-divider grids (gap:1px plus a
-            // background painting through the gaps) survive even without the
-            // materialized author stylesheet.
+            // layout, so WordPress owns the track geometry. Group save markup
+            // does not serialize blockGap, so source gap remains stylesheet
+            // owned by the normalization in createBlock().
             $declarations = $this->structuralPresentationDeclarations($element);
             $style = is_array($attrs['style'] ?? null) ? $attrs['style'] : array();
-            $gap = trim((string) ($declarations['gap'] ?? ''));
-            if ( 1 === preg_match('/^(?:0|[0-9]*\.?[0-9]+(?:px|rem|em|ch|ex|vw|vh|vmin|vmax|%))$/i', $gap)
-                && ! isset($style['spacing']['blockGap'])
-                && ! $this->hasConditionalStyleFamily($element, 'layout')
-            ) {
-                $style['spacing'] = array_merge(is_array($style['spacing'] ?? null) ? $style['spacing'] : array(), array( 'blockGap' => $gap ));
+            unset($style['spacing']['blockGap']);
+            if ( empty($style['spacing']) ) {
+                unset($style['spacing']);
             }
             $background = trim((string) ($declarations['background-color'] ?? $declarations['background'] ?? ''));
             if ( 1 === preg_match('/^(#[0-9a-f]{3,8}|[a-z][a-z-]*|(?:rgb|rgba|hsl|hsla|hwb|lab|lch|oklab|oklch|var)\([^()]*\))$/i', $background)

php-transformer/tests/fixtures/parity/html-autofit-grid-carries-gap-and-background.json

@@ -1,11 +1,11 @@
 {
   "schema": "blocks-engine/php-transformer/parity-fixture/v1",
   "name": "html-autofit-grid-carries-gap-and-background",
-  "description": "An auto-fit grid using the hairline-divider technique (gap:1px plus a container background painting through the gaps) must carry both onto the native grid group: the author gap becomes blockGap so WordPress does not substitute its default gap, and the container background becomes a color support so the dividers survive without the author stylesheet.",
+  "description": "An auto-fit grid using the hairline-divider technique (gap:1px plus a container background painting through the gaps) keeps its native grid tracks while source CSS owns its gap: core/group save markup cannot serialize blockGap. The container background remains a color support so the dividers survive without the author stylesheet.",
   "source_reference": {
     "repo": "php-transformer",
     "path": "tests/fixtures/parity/html-autofit-grid-carries-gap-and-background.json",
-    "notes": "Derived from a portfolio work grid where gap:1px;background:var(--ink) painted hairline separators between cells; mapping the grid to native layout without carrying the gap rendered WordPress's default block gap instead of 1px dividers."
+    "notes": "Derived from a portfolio work grid where gap:1px;background:var(--ink) painted hairline separators between cells. The source stylesheet retains the gap because core/group does not serialize blockGap in canonical save markup."
   },
   "legacy_comparison": {
     "skip": true,
@@ -28,7 +28,7 @@
   "expect": [
     { "path": "status", "assert": "equals", "value": "success" },
     { "path": "fallbacks", "assert": "count", "count": 0 },
-    { "path": "blocks.0.attrs.style.spacing.blockGap", "assert": "equals", "value": "1px" },
+    { "path": "blocks.0.attrs.style.spacing.blockGap", "assert": "equals", "value": null },
     { "path": "blocks.0.attrs.style.color.background", "assert": "equals", "value": "#1a1a1a" },
     { "path": "serialized_blocks", "assert": "contains", "value": "is-layout-grid" }
   ]

php-transformer/tests/fixtures/parity/html-autofit-grid-carries-zero-gap.json

@@ -1,11 +1,11 @@
 {
   "schema": "blocks-engine/php-transformer/parity-fixture/v1",
   "name": "html-autofit-grid-carries-zero-gap",
-  "description": "An auto-fit grid with an explicit unitless gap:0 must carry blockGap '0' onto the native grid group; otherwise WordPress substitutes the theme's default block gap for a grid the author declared gapless.",
+  "description": "An auto-fit grid with an explicit unitless gap:0 keeps native grid tracks without adding blockGap to core/group markup; the source stylesheet remains the gap authority.",
   "source_reference": {
     "repo": "php-transformer",
     "path": "tests/fixtures/parity/html-autofit-grid-carries-zero-gap.json",
-    "notes": "Companion to html-autofit-grid-carries-gap-and-background: the unitless-zero form of the gap declaration failed the original number+unit pattern, so gapless card walls rendered with the theme default gap."
+    "notes": "Companion to html-autofit-grid-carries-gap-and-background: source CSS retains the unitless-zero gap because core/group canonical save markup omits blockGap."
   },
   "legacy_comparison": {
     "skip": true,
@@ -26,6 +26,6 @@
   "expect": [
     { "path": "status", "assert": "equals", "value": "success" },
     { "path": "fallbacks", "assert": "count", "count": 0 },
-    { "path": "blocks.0.attrs.style.spacing.blockGap", "assert": "equals", "value": "0" }
+    { "path": "blocks.0.attrs.style.spacing.blockGap", "assert": "equals", "value": null }
   ]
 }

php-transformer/tests/fixtures/parity/html-autofit-grid-inline-leaf-items.json

@@ -1,7 +1,7 @@
 {
   "schema": "blocks-engine/php-transformer/parity-fixture/v1",
   "name": "html-autofit-grid-inline-leaf-items",
-  "description": "An expressible auto-fit grid whose direct children are standalone inline text leaves keeps native grid layout while each leaf rides its own display:contents carrier paragraph, so the item count matches the source children and the spans themselves become the grid items. Locks the standalone-inline-leaf routing branch, which bypasses cssOwnedGroupAttributes.",
+  "description": "An expressible auto-fit grid whose direct children are standalone inline text leaves keeps native grid layout while source CSS owns its gap. Each leaf rides its own display:contents carrier paragraph, so the item count matches the source children and the spans themselves become the grid items. Locks the standalone-inline-leaf routing branch, which bypasses cssOwnedGroupAttributes.",
   "source_reference": {
     "repo": "php-transformer",
     "path": "tests/fixtures/parity/html-autofit-grid-inline-leaf-items.json",
@@ -29,7 +29,7 @@
     { "path": "status", "assert": "equals", "value": "success" },
     { "path": "fallbacks", "assert": "count", "count": 0 },
     { "path": "blocks.0.innerBlocks", "assert": "count", "count": 4 },
-    { "path": "blocks.0.attrs.style.spacing.blockGap", "assert": "equals", "value": "24px" },
+    { "path": "blocks.0.attrs.style.spacing.blockGap", "assert": "equals", "value": null },
     { "path": "serialized_blocks", "assert": "contains", "value": "is-layout-grid" },
     { "path": "serialized_blocks", "assert": "contains", "value": "<p class=\"blocks-engine-inline-layout-carrier\"><span class=\"client\">Acme Corp</span></p>" }
   ]

php-transformer/tests/fixtures/parity/html-explicit-grid-class-non-card-children.json

@@ -17,7 +17,7 @@
   },
   "expected_blocks": [
     { "path": "blocks.0", "name": "core/group", "attrs": { "className": "section" } },
-    { "path": "blocks.0.innerBlocks.0", "name": "core/group", "attrs": { "className": "grid-3", "style": { "spacing": { "blockGap": "1.5rem" } }, "layout": { "type": "grid" } } },
+    { "path": "blocks.0.innerBlocks.0", "name": "core/group", "attrs": { "layout": { "type": "grid" } } },
     { "path": "blocks.0.innerBlocks.0.innerBlocks.0", "name": "core/group", "attrs": { "className": "reveal reveal-delay-1" } },
     { "path": "blocks.0.innerBlocks.0.innerBlocks.1", "name": "core/group", "attrs": { "className": "reveal reveal-delay-2" } },
     { "path": "blocks.0.innerBlocks.0.innerBlocks.2", "name": "core/group", "attrs": { "className": "reveal reveal-delay-3" } },
@@ -29,8 +29,9 @@
     { "path": "fallbacks", "assert": "count", "count": 0 },
     { "path": "blocks", "assert": "count", "count": 1 },
     { "path": "blocks.0.innerBlocks.0.innerBlocks", "assert": "count", "count": 3 },
-    { "path": "serialized_blocks", "assert": "contains", "value": "<!-- wp:group {\"className\":\"grid-3\",\"style\":{\"spacing\":{\"blockGap\":\"1.5rem\"}},\"layout\":{\"type\":\"grid\"}} -->" },
-    { "path": "serialized_blocks", "assert": "contains", "value": "<div class=\"wp-block-group is-layout-grid wp-block-group-is-layout-grid grid-3\" style=\"gap:1.5rem\">" },
+    { "path": "serialized_blocks", "assert": "contains", "value": "<!-- wp:group {\"className\":\"grid-3 be-inline-geometry-" },
+    { "path": "serialized_blocks", "assert": "contains", "value": "\",\"layout\":{\"type\":\"grid\"}} -->" },
+    { "path": "serialized_blocks", "assert": "contains", "value": "<div class=\"wp-block-group is-layout-grid wp-block-group-is-layout-grid grid-3 be-inline-geometry-" },
     { "path": "serialized_blocks", "assert": "contains", "value": "\"className\":\"reveal reveal-delay-1\"" },
     { "path": "serialized_blocks", "assert": "contains", "value": "<!-- wp:heading {\"content\":\"You Call, We Plan\",\"level\":4} -->" }
   ]

php-transformer/tests/unit/block-style-support-conversion.php

@@ -78,6 +78,18 @@
 $assert(! isset($groupAttrs['style']['spacing']['blockGap']), '15: core group save omits block gap without a core layout attribute', json_encode($groupAttrs));
 $assert(str_contains($groupInnerHtml, 'min-height:100svh'), '16: core group retains supported dimensions', $groupInnerHtml);
 
+$nativeGridHtml = '<div class="tpl-grid" style="display:grid;grid-template-columns:repeat(auto-fit, minmax(290px, 1fr));gap:1.2rem"><p>Fallback card</p></div>';
+$nativeGridResult = ( new HtmlTransformer() )->transform($nativeGridHtml, array())->toArray();
+$nativeGrid = $nativeGridResult['blocks'][0] ?? array();
+$nativeGridAttrs = is_array($nativeGrid['attrs'] ?? null) ? $nativeGrid['attrs'] : array();
+$nativeGridMarkup = (string) ($nativeGridResult['serialized_blocks'] ?? '');
+$nativeGridCss = implode("\n", array_map(static fn (array $asset): string => (string) ($asset['content'] ?? ''), is_array($nativeGridResult['assets'] ?? null) ? $nativeGridResult['assets'] : array()));
+
+$assert('grid' === ($nativeGridAttrs['layout']['type'] ?? ''), '16a: representative tpl-grid shape retains native Group grid layout', json_encode($nativeGridAttrs));
+$assert(! isset($nativeGridAttrs['style']['spacing']['blockGap']), '16b: native Group grids do not emit noncanonical blockGap attributes', json_encode($nativeGridAttrs));
+$assert(! str_contains($nativeGridMarkup, 'gap:1.2rem'), '16c: native Group grid markup omits inline gap that Gutenberg save does not reproduce', $nativeGridMarkup);
+$assert(str_contains($nativeGridCss, 'gap:1.2rem !important'), '16d: inline native Group grid gap moves to the generated geometry carrier', $nativeGridCss);
+
 $cardHtml = '<section class="pricing-shell" style="max-width:1120px;margin:0 auto;padding:5rem 2rem"><article class="pricing-card" style="max-width:360px;padding:2rem;background:#fff"><h2>Team</h2><p>Scale every launch.</p></article></section>';
 $cardResult = ( new HtmlTransformer() )->transform($cardHtml, array())->toArray();
 $cardShell = $cardResult['blocks'][0] ?? array();