Inline media toolbar positioning

[Clorith]

The new inline media toolbar when clicking a media element is centered above the element.

If your media element is too wide for the editor you won't actually see the toolbar at all, also ties in a little with #30695 that you can't easily scroll to the center of the media element.

You could resize it, but what if you don't want to resize the element, for example you're on a device with a smaller viewport.

[azaozz]

...what if you don't want to resize the element, for example you're on a device with a smaller viewport.

That would mean the inserted media will be "broken" on the front-end for the device. We can "fix" this with max-width in the default editor styles. Many themes do that in editor-style.css and on the front-end, but if the theme doesn't handle that on the front, it will prevent the users from noticing the incompatible size.

[Clorith]

The use case I'm going for (and how I noticed it) is that you picked the wrong size when inserting the media, and then wish to change the size by hitting the edit button instead of having to locate the media element all over, fill in the captions and such over again and then remember to pick the right size.

Not all themes add editor styles (although they should but that's a whole other discussion), and I agree that us setting width to 100% on the editor content by default is not ideal but we should be able to do something about the toolbar positioning at least if it exceeds the viewport push it to the left or something like that perhaps?

[iseulde]

Imo we should set the max-width all the time.

[nacin]

I don't think we can get away with max-width: 100%, at least not in a point release. But we should make sure the toolbar stays on screen.

[azaozz]

Thinking this is too minor for a dot release. If a wpView is wider than the editor, there is a horizontal scrollbar. Also once we stop aligning the toolbar in the center, we need to account for RTL making this more complex, see 30696.patch.

If we are making max-width: 100% the default in 4.2, this won't be needed.

[iseulde]

@azaozz: I'm not sure if this is relevant for wpviews as they're always 100% width.

Attached a simple patch that would set the toolbar in the middle if the image overflows the iframe.

[azaozz]

In [31362]:

TinyMCE: ensure the image toolbar stays visible when the image is much wider than the editor. Props iseulde, fixes #30696 for trunk.

[azaozz]

Reopen for 4.1.1.

[dd32]

In 31437:

TinyMCE: ensure the image toolbar stays visible when the image is much wider than the editor.

Props iseulde.
Merges [31362] to the 4.1 branch.
Fixes #30696.