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

Cerrado
  • ¿Algo no está bien?
#4,392 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Ya se ha fusionado un pull request relacionado.

  • #4422 de @chubes4 — cerrado sin fusionar
  • #4490 de @chubes4 — cerrado sin fusionar
  • #4502 de @chubes4 — fusionado

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
57/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
php, wordpress
Área
backend

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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).

Lenguaje dominante
PHP
Estrellas
25
Forks
3
Merge medio
2 h 23 min
PR fusionados (30 d)
942

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de Automattic/blocks-engine

Todos los issues de Automattic/blocks-engine

Issues similares

Más issues de PHP

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.