Dominant button look rejected when padding uses logical longhands, font-family is inherited, or colour has a :hover state

Chiusa
  • Qualcosa non va?
#4,392 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Una pull request collegata è già stata integrata.

  • #4422 di @chubes4 — chiusa senza merge
  • #4490 di @chubes4 — chiusa senza merge
  • #4502 di @chubes4 — integrata

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
57/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
php, wordpress
Ambito
backend

Direzione di ricerca

Trace the button look collector and dominantButtonLook path described in the issue, then find its contract fixtures and tests. Start by reproducing the minimal case and check how resolved styles handle logical padding, inherited font family, and state variants. Done means the fixture asserts the expected button presets and state style, button blocks no longer duplicate those values, and front-end parity is preserved.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Problem

The dominant button look (#3716) never forms when the source sets button padding with logical longhands, inherits the button font, or has a hover colour. The collector only records a look when one element's resolved declarations include padding, border-radius, font-size and font-family. Then dominantButtonLook drops any look that is missing a field or has a state or conditional variant. Builder framework buttons hit all three:

  • padding-block / padding-inline longhands, often through custom properties, instead of the padding shorthand.
  • font-family inherited from the body, not declared on the button.
  • A :hover colour, which marks color as a state family, so the rest colour is discarded.

kroonsbeautysalon.nl (Jimdo, trunk): all 23 a.jw-btn elements on 4 routes are rejected with missing=padding,font-family state:color. The theme gets no styles.elements.button, although the converter itself resolves every content button to the same look: 14 core/button, each carrying inline #cacaca background, #5b5b5b text, radius and 7.5px 15px padding. A button inserted in the editor gets core defaults, and Global Styles → Button restyles nothing.

Minimal case

3 pages, each with 3 buttons:

<style>
body{font-family:Georgia,serif}
.btn{--edge:15px;display:inline-flex;padding-block:7.5px;padding-inline:var(--edge);font-size:16px;font-weight:700;border-radius:8px;background-color:#cacaca;color:#5b5b5b;text-decoration:none}
.btn:hover{color:#000}
</style>
<a class="btn" href="/a">One</a> <a class="btn" href="/b">Two</a> <a class="btn" href="/c">Three</a>

Expected: styles.elements.button has the background, text colour, radius, padding, size, weight and the inherited family as presets. :hover carries the hover colour. The core/button blocks no longer repeat those values inline. Front-end parity is unchanged.

Expected

  • Resolve padding from the shorthand or from physical and logical longhands, after variable resolution.
  • Use the computed inherited font-family when the button doesn't declare one.
  • A state-only variant (:hover, :focus) keeps the rest value as the look and is emitted as the element's state style. Media or conditional variants still disqualify, as they do today.

Acceptance

  • A contract fixture from the minimal case, with element styles asserted and button blocks no longer duplicating them.
  • Real check: a kroonsbeautysalon.nl import has styles.elements.button with #cacaca / #5b5b5b, the 14 content buttons lose their duplicated inline colour, radius and padding, and parity is unchanged.

Investigated by Franklin (Pi via Roadie, anthropic/claude-opus).

Lingua principale
PHP
Stelle
25
Fork
3
Merge medio
2h 29m
PR unite (30g)
931

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di Automattic/blocks-engine

Tutte le issue di Automattic/blocks-engine

Issue simili

Altre issue su PHP

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.