Automattic / Automattic/blocks-engine

Stylable-button icon classes are stripped during lowering, so materialized SVG icons render at intrinsic 200x200 and bury their label

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

Description

## Problem

On an imported Wix site, the header's "CALL US" button renders as a 134×202 px box: a giant 200×200 arrow icon with the label squeezed to 9 px wide, wrapping one letter per line. The same button appears twice on the page; the "CHECK ELIGIBILITY" CTA breaks the same way. The block is otherwise right: a real `core/button`, correct label, working `tel:` link.

Observed on an import of `https://www.kdclegal.com/` (Wix, 65 routes) via `studio create --from`, blocks-engine trunk @ `671db300` paired with static-site-importer v1.9.2 @ `7f51247`.

## Anatomy

The source button is a Wix stylable button with an animated icon:

```html

CALL US



` directly inside the anchor:

```html

CALL US

```

The decisive part: the generated theme CSS still ships the sizing rule, rewritten by blocks-engine to target the new structure:

```css
._icon_1fj1u_79 { min-width: 1px; ... width: var(--size); height: var(--size); ... }
._icon_1fj1u_79, :where(.data-liberation-mobile-document) :where(.blocks-engine-control-...-189.wp-block-buttons) ... ._icon_1fj1u_79 { ... }
```

The CSS was carried and rewritten; the markup that it targets was not. With no element carrying `._icon_1fj1u_79`, the `` falls back to the SVG's intrinsic `width="200" height="200"` attributes and dwarfs its own button.

## Contributing factor (tracked separately)

The capture's geometry observation for this icon is all zeros (`wrapper`/`target`/`simulated` all 0×0) because the icon is entrance-animated: Automattic/data-liberation-agent#139. A correct measurement would mask the bug on this site, but the markup/CSS mismatch above stays wrong for any control whose icon classes are stripped.

## Expected

An icon inside a lowered control keeps the classes (or equivalent sizing) that the carried stylesheet targets. Icon media must never render at intrinsic SVG canvas size when the author sized it via classes.

## Related

- Automattic/static-site-importer#1386 is the sibling failure (button collapsed to 8px on busybearscleaning.com). Both are "control lowering breaks the author's sizing contract"; the mechanism here is class stripping on icon media.

## Reproduction

Import `https://www.kdclegal.com/` and measure on the homepage:

```js
[...document.querySelectorAll('a')].filter(a => /CALL\s*US/.test(a.textContent))
.map(a => a.getBoundingClientRect())
```

Found while working the Wix migration gap list (run report: kdclegal, 7 Sep 2026).

Contributor guide

Open the contributing guide

Research direction

Reproduce the import with `studio create --from` and inspect the lowered button anchor, materialized SVG image, and generated theme CSS. Trace the lowering path that removes the icon wrapper and compare the emitted markup with the selectors in the captured stylesheet. Done means the lowered icon retains the targeted classes or equivalent sizing and no longer renders at intrinsic 200×200 dimensions.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html, php, wordpress
Domain
tooling, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.