Media & text block: Switch to blockGap

[corentin-gautier]

What problem does this address?

The Media & Text block doesn't use the block gap system but uses padding on the content instead, which is somewhat arbitrary and doesn't provide a way to control the spacing between the image and the text.

What is your proposed solution?

Switch to using blockGap

[talldan]

The padding to the left and right of the content? The image and the content area aren't blocks. This means it may be difficult to configure it to use block gap without some dramatic refactoring of the block to use a more nested structure.

If layout and block gap were added to Media and Text, then I would expect it to apply vertically between any blocks in the content area.

[andrewserong]

This means it may be difficult to configure it to use block gap without some dramatic refactoring of the block to use a more nested structure.

I agree, and I'm not sure how valuable that effort would be. For patterns that involve an image next to another set of arbitrary block content, where the user can control the spacing between those two areas, I think the Row block probably fits that need quite well, and there's also the Columns block, or the experimental Grid block, too. So, from my perspective, I think the benefit for adding Layout to Media & Text would primarily be about controlling the vertical spacing within the content area as you mention:

If layout and block gap were added to Media and Text, then I would expect it to apply vertically between any blocks in the content area.

Yes, I think that's how layout would work here because the layout support controls the behaviour of the inner blocks wrapper.

[corentin-gautier]

Regardless of the technical solution, the end user probably expect to be able to control both the spacing between the image and the content (horizontal) and the spacing between the blocks in the content (vertical).

Not having control over the horizontal spacing means the end user cannot match the spacings of a media & text with a columns block for example.

A "simple" solution to this would be to be able to control both horizontal and vertical spacing (the same way other controls can be "unlocked" to allow individual control over top,left,bottom and right)

[richtabor]

Perhaps an easier solution would be to leverage the core/group block as a parent block within the Media & Text block (for newly inserted instances)—instead of bending the margin/padding/blockGap controls to work out abnormally with this block.

CleanShot.2023-04-12.at.11.07.08.mp4

[corentin-gautier]

@richtabor I don't think having vertical & horizontal controls would be abnormal, the gap property actually supports separate vertical and horizontal values : https://developer.mozilla.org/en-US/docs/Web/CSS/gap. So even if it's not the solution for the media & text block, having separate controls in "Block spacing" could be interesting anyway

[richtabor]

I meant that the Group block has all of these controls already.

It may be simpler to implement that as a wrapper for the content, instead of building the same controls ad hoc.

[corentin-gautier]

Regardless of the technical solution, the end user probably expect to be able to control both the spacing between the image and the content (horizontal) and the spacing between the blocks in the content (vertical).

Not having control over the horizontal spacing means the end user cannot match the spacings of a media & text with a columns block for example.

I still think this is an issue making this block kind of useless (you have to use the row or columns blocks instead because you can't control the spacing with media & text)