Allow image styles on the 'Media & Text' block

[enriquesanchez]

It would be great if images in the 'Media & Text' block could have the same editing features the 'Image' block has.

I recently found myself wishing the 'Media & Text' block allowed for image styles (Default vs. Rounded).

[aaronrobertshaw]

Hi @enriquesanchez 👋

To offer the same controls in the Media & Text block as the Image block, my first thought would be to leverage the InnerBlocks API. Unfortunately, it is already used to handle the content part of the Media & Text block making this not possible. A more detailed explanation as to why can be found in this issue : #23356.

In terms of offering a "Rounded" style, this could be achieved quite quickly by a theme adding a custom block style for the Media & Text block. If there was sufficient demand for such a block style it could be added to the core block.

Another possibility is we could extend the elements API whitelist to include the img tag. That would then allow control over the Media & Text block's image border radius via theme.json.

Other controls such as the "Image dimensions" would likely need to be replicated in the Media & Text block. I'm not sure as to whether the potential value in that warrants the increased maintenance burden there.

[NicoHood]

Any updates on this? The rounded image feature is really missing for me

[aaronrobertshaw]

@NicoHood this issue hasn't come up on my radar since my last reply. I'm not sure there is a great appetite to overhaul the Media & Text block.

You can quite easily replicate the layout of the Media and Text block using Row or Columns blocks, and inserting an image and text as desired. Such an approach provides greater freedom in controlling the individual elements at the sacrifice of a little convenience. You can think of the Media and Text block a bit like a block pattern.

Once you've recreated the layout using a Row or Columns block, you can save it all as a reusable block which would then make it as convenient as the media and text block moving forward.

I hope that helps!

[NicoHood]

The reason why I always use the text+media block is simple: It will always place the image first on mobile. It is a consistent behavior which gives nicer layouts.

[tehjaymo]

Searching for rounded corners on media+text block brought me here. Some control over the shape and borders would be great. Otherwise a whole theme can have rounded images, except when using this block. Plus as @NicoHood says its consistent behaviour is useful.

[annezazu]

Adding related feedback here from the FSE Outreach program with the rise of global styles and those settings applied to images not applying to images within media & text:

Media & text block didn’t apply the border when I edited the image styles. The Media & text could be composed of sub-blocks to inherit the properties of a single image block like the Gallery block does now.

[paaljoachim]

This issue came up as a client is using the default theme 2024 where there are a lot of rounded images. The client added the Media & Text block and expected to be able to also add rounded corners through the UI to the image used, but that was not possible. So she had to add custom CSS instead.

[tobifjellner]

Thanks for already having this issue registered, so I don't need to create a new one.
If it's hard to enable image styling inside the combined block, would it be possible to enable conversion of the media & text block to a group, which might then adjust styling of the image?

[aaronrobertshaw]

@tobifjellner while it isn't a transform to the Group block specifically, there is a transform available for Media & Text blocks to the Columns block. Which then allows for Image block global styles to apply to the image.

Here's a quick demo of what I mean:

Screen.Recording.2024-04-19.at.10.15.53.AM.mp4

Note: The Group transform currently only wraps the Media & Text block in a Group block.