Automattic / Automattic/blocks-engine

Structured media-forward heroes fall back to fixed-width HTML islands

Open
#1,070 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
PHP
Stars
14
Forks
2
Avg merge
2h 10m
Merged PRs (30d)
561

Description

## Problem

A real URL capture of `https://www.eggchasers.co.za/` through Studio draft PR #3952 produces a `SectionSpec` hero with:

- `interactionModel: color-block-grid`
- three large foreground/background images plus four social icons
- one `TICKETS` control
- no headings or body text

`reconstructNativeAggregate(..., structuredStrategy)` classifies the section as a fallback with `reasonCode: text_coverage_below_floor` and `textCoverage: 0`, even though `droppedImages` is empty. The emitted fallback retains authored `width:1440px`, `min-width:980px`, and fixed heights.

Downstream evidence with current `origin/trunk` (`49874bbe`) and Static Site Importer `ed2ce46d`:

- 42 unique generated geometry classes in the WordPress page
- 43 generated `!important` declarations
- 1443px document width in a 390px viewport
- no `core/html` in the final page because artifact transport removes the fallback block comments and the PHP transformer reconverts the raw island

The source media is fully localized, so this is independent of acquisition/media failure.

## Expected generic behavior

Media-forward hero sections with strong large-image, CTA, and social-control evidence should reconstruct into responsive native cover/group/image/button/social blocks without requiring text coverage. The structured decision and diagnostics should preserve the actual Gutenberg gap when native reconstruction cannot represent the section, rather than producing fixed desktop geometry that appears native downstream.

## Reproduction

1. Capture `https://www.eggchasers.co.za/` with Studio PR #3952 and retained section evidence.
2. Run `reconstructPagePattern()` on `sections/homepage.json` with the localized media map.
3. Inspect `provenanceFlags` and `fallbackDiagnostics` for section 0.
4. Import the resulting website artifact through SSI built against Blocks Engine trunk.
5. Compare desktop 1440px and mobile 390px document geometry.

## Acceptance

- Section 0 uses responsive native blocks or reports an explicit unresolved Gutenberg gap without silently becoming geometry-heavy native output.
- No horizontal overflow at 390px.
- The repair is pattern-based and provider-neutral.
- Deterministic coverage includes a media-forward hero with controls and no text.

## AI assistance

OpenAI GPT-5.6 Sol via OpenCode performed the capture/import investigation, reduced the failure to the structured reconstruction decision, and drafted this report. Chris Huber reviewed and remains responsible for the issue.

Contributor guide

Open the contributing guide

Research direction

Start at reconstructPagePattern() and inspect reconstructNativeAggregate(..., structuredStrategy) using sections/homepage.json. Compare section 0's provenanceFlags and fallbackDiagnostics with the 390px and 1440px artifact geometry, then verify the deterministic media-forward/no-text case produces responsive native output or an explicit unresolved Gutenberg gap without overflow.

Written by the indexing model from the issue text.

Assessment

Tech stack
php, wordpress
Domain
backend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.