Automattic / Automattic/blocks-engine
Do not apply unconditional lazy loading to generated Figma images
- Dominant language
- PHP
- Stars
- 14
- Forks
- 2
- Avg merge
- 2h 10m
- Merged PRs (30d)
- 561
Description
## Problem
`figma-transformer` unconditionally emits `loading="lazy"` on every semantic image. This includes above-the-fold brand marks, navigation logos, hero media, and every below-fold content image.
In the Fisiostetic generated HTML browser artifact, all image files are present and valid, but the deterministic full-page source screenshot renders the logo, hero, service cards, supporting media, and map as empty/alt-text boxes. The WordPress candidate materializes the same assets and shows them, which makes the comparison misleading and hides source-side layout defects.
Lazy-loading policy is not represented by Figma design data. Applying it globally is an inferred performance decision rather than visual artifact generation.
## Expected behavior
Generated HTML renders all image-backed Figma nodes deterministically by default. Loading policy is absent unless supplied through an explicit caller policy with enough layout/runtime context to classify images safely.
## Acceptance criteria
- Semantic Figma image nodes no longer receive unconditional `loading="lazy"`.
- Existing `decoding="async"`, source paths, crop metadata, alt text, and dimensions remain stable.
- A focused contract covers the default deterministic image-loading behavior.
- Fisiostetic source browser evidence shows the logo, hero, service cards, supporting media, and map.
- The transform still reports zero missing assets and zero vector placeholders.
- The downstream WordPress matrix remains 100% native and editor-valid.
## Evidence
Current emitter: `figma-transformer/src/Html/StaticHtmlEmitter.php`, where `imageElementAttributes()` always appends `loading="lazy" decoding="async"`.
The Fisiostetic source capture reports 26 image resources but visually contains blank image boxes; corresponding binary assets decode correctly and are successfully materialized downstream.
## AI assistance
- AI assistance: Yes
- Tool: OpenCode with OpenAI GPT-5.6 Sol
- Used for: Compared source/candidate/diff artifacts, traced semantic image emission, and drafted this report under Chris Huber direction.
Contributor guide
Research direction
Start in figma-transformer/src/Html/StaticHtmlEmitter.php, focusing on imageElementAttributes() and how semantic image attributes are emitted. Add or update the focused contract for deterministic default image loading, then verify the Fisiostetic source capture shows its images while preserving decoding, paths, metadata, alt text, dimensions, and zero missing assets or vector placeholders.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- php
- Domain
- tooling
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 68/100