Media & Text: Improve resizing

[marekhrabe]

Is your feature request related to a problem? Please describe.

Media & Text block can be resized to a different ratio of media and text. It's done using a tiny blue dot that shows when the Media & Text block is focused directly (ignores focus of child blocks) and at the same time, some media has to be selected (resizer doesn't show up together with media placeholder).

When adding this block, focus is automatically in child paragraph and no media is obviously selected. That means the dot might be missed by a lot of people - I've seen several coworkers of mine who were surprised about this feature despite working with Gutenberg for some time.

When using the resizer, the percentage value you are sliding to it not obvious - not during the resizing, not after. Imagine trying to build a landing page where you need to use 60% text, 40% image for multiple different blocks. You can only approximate in the visual mode or edit the number in code directly. You might not even know if the value is a whole number or if it is a float with some higher precision.

Describe the solution you'd like
I think the solution might consist of several small improvements that we can ship individually. A few of my ideas:

• First thing that comes to my mind is to add a label to the resize handle which will show when resizing is in progress.

• The slider handle itself is pretty small, I believe the hit target is 24x24 px. Is the style appropriate and does the blue dot communicate the "resize" action clearly? In one of the 3rd party blocks (Coblocks Resizable Columns), I've seen this resizer to take an inspiration from the core but they've iterated on it:

• Regardless of the visual style of the resize handle, what about adding an invisible handle for convenience that users can use? The red area in the following picture is the current hit target (around the blue dot). I propose to add the green area as an additional (invisible) handle. It will show the resize mouse cursor on hover and essentially allow users to start resizing on the whole side of the media area:

• It would be great if there was some convenient way to resize to a specified percentage. Half & half is the default, what about adding a golden ratio? My idea is to introduce the ratio to the sidebar as a numeric input (easy to read and write custom values without a need for drag & drop interaction) with some additional UI to set it to one of presets. Do we have any UI like this that we can get an inspiration from? Or is this something we could put right into the Block Controls, like some 3rd party blocks did?

Those are a few points that were on my mind to improve the resizing workflow for Media & Text and I wanted to open a discussion about it and whether we might come up with other areas to improve.

[melchoyce]

First thing that comes to my mind is to add a label to the resize handle which will show when resizing is in progress.

Definitely — this is a great idea. Let's make sure to use the popover component when building it.

Regardless of the visual style of the resize handle, what about adding an invisible handle for convenience that users can use? The red area in the following picture is the current hit target (around the blue dot). I propose to add the green area as an additional (invisible) handle. It will show the resize mouse cursor on hover and essentially allow users to start resizing on the whole side of the media area

I think this would help a lot. Especially if we take inspiration from the above, and combine that extra space within the hit target:

What if the drag bar also snapped to increments of 5%?

[marekhrabe]

use the popover component

definitely!

I think this would help a lot. Especially if we take inspiration from the above, and combine that extra space within the hit target:

#14481 already adds the big invisible handles for all sides for usability purposes. In a separate PR, I will experiment with your draft that adds the visible part - the blue line. I'll ping you there once I have something.

[melchoyce]

Awesome 👍

[ajtruckle]

I had a vertical image and when I placed it it was made larger. I wanted a way to set the image as 100% size with no scaling and could not work it out. I also found no way to align the text block to the top.

Since it looked ugly I settled for a regular paragraph and image stacked on top of each other.

Look at the MailChimp version of my newsletter:

https://mailchi.mp/9af650b6eb36/meeting-schedule-assistant-version-1909-is-now-available

I was able to set the image nicely. In Wordpress:

https://www.publictalksoftware.co.uk/2019/04/01/meeting-schedule-assistant-v19-0-9-newsletter/

I had to stack. There is no way to tell it what scale to put the image in. Whilst you can scale columns you can't scale images.

[kjellr]

This should be all set since #14543 got merged.

@ajtruckle If you're still having issues, would you mind opening a new issue for it?

Thanks, all!