Repository navigation
Media & Text: add "gap" options #67208
Description
What problem does this address?
The existing Media & Text controls for padding and margin apply to the entire block:
This makes it difficult to use the media block for use-cases where more control is needed within the block, such as:
- controlling the space between the media and the text
- having the image span the full height of the block, while ensuring the text has a custom amount of padding.
What is your proposed solution?
The introduction of a gap option for the text could help. This would be implemented as a configurable 4-way padding or margin around the text, allowing the user to control:
- how much space there is between the media and the text
- how much space there is between the text and the other horizontal edge
- how much space there is between the text and the top/bottom of the block
An alternative would be having a separate padding controls for the media and the text:
Activity
Mayank-Tripathi32 commentedon Nov 21, 2024
Hi @sgomes,
Thank you for raising this issue.
I believe many of the suggested actions can be achieved by simply wrapping the paragraph in a Group block.
sgomes commentedon Nov 22, 2024
Thank you, @Mayank-Tripathi32!
Yes, that's correct, and it's a great workaround if you need this now 👍 Other workarounds involve composing a few layout blocks to achieve a similar effect, without using Media & Text at all.
However, it could become cumbersome and somewhat error-prone to use this approach across many instances of Media & Text. So I see this as more of a convenience feature to enable a few extra options on Media & Block directly, and to have them easily applied to all your Media & Text blocks via something like global styles.
t-hamano commentedon Nov 22, 2024
At the very least, it seems reasonable to be able to control the gap between media and content. This is also discussed in #49406.
Mayank-Tripathi32 commentedon Nov 22, 2024
Hi, I’m working on a PR to add gap control for media and content component. I believe the rest can be achieved using the group block.
Mamaduka commentedon Dec 11, 2024
I think this is similar to #28556.
t-hamano commentedon Jun 2, 2025
We first need to decide where to apply the gap, because multiple blockGap support is not available:
Additionally, whichever approach is adopted will require discussion of how it will affect existing blocks and how to maintain backward compatibility.
benoitchantre commentedon Jun 2, 2025
How can we manage the vertical spacing between the text elements?
For now, there's an unwanted margin (from the browser styles) and no block gap used for vertical spacing between the text elements (see #70264).
Mayank-Tripathi32 commentedon Jun 3, 2025
I'd like to discuss how we should approach adding blockGap support. Currently, I'm extracting it from attributes and applying it manually in the editor. However, it would be great if we could extend the functionality to detect and apply it automatically.
karmatosed commentedon Jul 11, 2025
This feels like it needs feedback on the implementation not 'design' made specifically so switching out the labels.
jasmussen commentedon Aug 24, 2026
The issue is valid, let's get a dev on it. However let's do that as part of #28556 which touches the same.