Skip to content

Flex text+image rows become core/media-text and lose authored column sizing, gap and the visual wrapper #3596

Closed

Description

@chubes4

Problem

A flex row of a text column and an image column becomes core/media-text, which discards the row's authored geometry. Media & Text applies its own grid (1fr 50%) and pads its content column (0 8%). The source flex ratios, gap and the text column's max-width no longer decide the layout, so the text wraps onto extra lines and the section changes height.

Neutral reproduction on trunk (HtmlTransformer::transform), measured at 1440px with core's block-library CSS:

<style>
body{margin:0}
.row{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:80px}
.copy{flex:1 1 0%;max-width:480px}
.copy h2{font-size:46px;line-height:1.12;margin:0 0 25px}
.visual{flex:1.2 1 0%;display:flex;justify-content:center;align-items:center}
.visual img{width:100%;max-width:780px;height:auto;display:block}
</style>
<div class="row"><div class="copy"><h2>Complete care for your computer in one click</h2><p>A short paragraph that explains the product in a couple of lines of body copy.</p></div><div class="visual"><img src="shot.png" width="1600" height="1000" alt="Dashboard"></div></div>

Emitted blocks: media-text > group, heading, paragraph.

source imported
h2 120,110 480x103 216,38 354x206
img 680,0 640x400 746,0 574x359

Real case: on assistouest.fr /logiciel-maintenance-informatique/ (.asst_main_container), the text column renders 354px instead of 480px, and the heading wraps from 2 lines to 3. The image wrapper .asst_main_visual is also lost: it carried perspective and a ::before glow behind the image.

This is the image/flex sibling of #3583 (text + video grid, fixed by #3586) and matches #2473's acceptance ("select a native group/image composition when core/media-text cannot preserve the source contract").

Expected

  • Promote to core/media-text only when its geometry reproduces the source row.
  • Otherwise, emit a native group (flex or grid layout) containing the text group and an image block inside the retained visual wrapper. Source column sizing, gap, alignment and wrapper styles stay authored.
  • Rows that Media & Text does reproduce keep converting to it.

Acceptance

  • A regression with the fixture above fails on trunk. It checks h2 and img boxes within 1px of the source at 1440px, plus the 390px stacked layout if the fixture adds a breakpoint.
  • The existing media-text fixtures and contract tests pass. That includes Preserve native text/video grids and editable Media Library videos #3586's video-grid-layout test.
  • Block markup stays valid (no recovery prompt).

Activity

  1. added a commit that references this issue on Oct 28, 2026
    15744bc
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions