What problem does this address?
The Media & Text block currently uses a hardcoded 600px viewport width to determine when its content stacks.
This can cause the block to remain side by side at tablet-sized widths even when the media and text areas have become too narrow to work well.
It also creates a mismatch with the configurable viewport values introduced in #79104. A theme can define a tablet breakpoint in theme.json, but the Media & Text block’s existing Stack on mobile behavior does not use that value.
Related discussion: https://github.com/WordPress/gutenberg/pull/79104#issuecomment-4705677847
The block remains side by side until the viewport reaches 600px. At widths above 600px, this can result in:
- A narrow text column
- Headings wrapping across several lines
- Buttons or links wrapping awkwardly
- Media becoming too small to remain useful
- A crowded layout before the block changes to its stacked presentation
The exact point at which the layout becomes difficult to use depends on the content, but 600px can be too late for a block that divides the available width between media and substantial text content.
For an example: This Media & Text pattern in the Twenty Twenty Five theme isn't obviously bad at tablet, but if you bump up the text size it's quickly unreadable
What is your proposed solution?
Update the Media & Text block’s stacking styles to use the configured tablet viewport value from theme.json.
This issue is focused on the existing automatic stacking behavior. It does not propose adding another editor control or requiring content creators to choose a breakpoint for each block.
Expected behavior
When Stack on mobile is enabled, the Media & Text block should stack at the active theme’s configured tablet viewport value.
For example, when a theme includes:
{
"settings": {
"viewport": {
"mobile": "29rem",
"tablet": "42rem"
}
}
}
the block should use the tablet value rather than the legacy hardcoded 600px breakpoint.
When a theme does not define a tablet value, WordPress could continue to use the default tablet viewport value.
What problem does this address?
The Media & Text block currently uses a hardcoded 600px viewport width to determine when its content stacks.
This can cause the block to remain side by side at tablet-sized widths even when the media and text areas have become too narrow to work well.
It also creates a mismatch with the configurable viewport values introduced in #79104. A theme can define a tablet breakpoint in theme.json, but the Media & Text block’s existing Stack on mobile behavior does not use that value.
Related discussion: https://github.com/WordPress/gutenberg/pull/79104#issuecomment-4705677847
The block remains side by side until the viewport reaches 600px. At widths above 600px, this can result in:
The exact point at which the layout becomes difficult to use depends on the content, but 600px can be too late for a block that divides the available width between media and substantial text content.
For an example: This Media & Text pattern in the Twenty Twenty Five theme isn't obviously bad at tablet, but if you bump up the text size it's quickly unreadable
What is your proposed solution?
Update the Media & Text block’s stacking styles to use the configured tablet viewport value from theme.json.
This issue is focused on the existing automatic stacking behavior. It does not propose adding another editor control or requiring content creators to choose a breakpoint for each block.
Expected behavior
When Stack on mobile is enabled, the Media & Text block should stack at the active theme’s configured tablet viewport value.
For example, when a theme includes:
the block should use the tablet value rather than the legacy hardcoded 600px breakpoint.
When a theme does not define a tablet value, WordPress could continue to use the default tablet viewport value.