Consider adding alignment buttons inline for an image

[iseulde]

Related: ​https://make.wordpress.org/core/files/2014/08/Screen-Shot-2014-08-20-at-13.12.14.png

[iseulde]

This needs some more work... E.g. the reposition function is a mess, just wanted to upload everything so far. :) Seems to work well. We were also thinking about adding a button to add a caption when there is none, so I'll consider adding that too.

[iseulde]

Oh, and this is now a TinyMCE toolbar, which means we could allow plugins to add new buttons.

[azaozz]

In 30147.2.patch:

• Changed the positioning to make it more consistent when editor expand is on/off.
• Fixed adding/removing of alignnone class and repositioning after that.
• Added a bit stronger box-shadow and border to make the image toolbar more defined.

IMHO this works and looks quite well, ready to be committed.

[azaozz]

Remove unused var.

[azaozz]

In 30147.4.patch:

• Change the toolbar position to be over the image for iOS, so it doesn't clash with the default popup toolbar there.
• Fix various iOS Safari bugs.
• Don't hide when the parent window scrolls unless editor-expand is enabled.

[azaozz]

In 30318:

TinyMCE: enhance the inline toolbar for images:

• Add alignment (left, center, right, none) buttons.
• Position the menu above the image when possible, except on iOS.
• Fix selecting images on iOS.

First run, part props avryl. See #30147.

[azaozz]

In 30319:

Fix typo in translatable string, see #30147.

[johnbillion]

This is pretty neat.

avryl mentioned that it might be possible to keep the toolbar in place under the cursor until the user moves the cursor away. This means if you are swapping an image between left and right alignment then the toolbar doesn't keep moving away. Do you think this might be possible?

[azaozz]

Yes, it is possible. However when floating an image, it often moves vertically as well as horizontally. Then the toolbar can end in very awkward places, even off the screen. We can detect where the image has moved and hide the toolbar if it is "too far". That would be somewhat inconsistent behaviour though.

[azaozz]

In 30339:

TinyMCE: set the image toolbar's z-index higher than the editor when the new DFW is active. See #30147.

[afercia]

Very nice, thanks very much @azaozz, @avryl :)

Noticed a small thing to fix, very edge case, when the toolbar is close to the editor right edge, the "triangle" needs some attention, see its position and "faux" border:

there are different ways to do that, not sure which one to use, proposed patch resets the negative margin and use position, though you might prefer a different approach.

[azaozz]

In 30361:

TinyMCE: don't show image toolbar for placeholder images. See #30147.

[azaozz]

In 30362:

Fix typo in [30361], see #30147.

[azaozz]

In 30363:

TinyMCE: fix the border on the image toolbar arrow. Props afercia, see #30147.

[afercia]

For accessibility considerations, please see #27642 which still applies even with this new image toolbar.

[johnbillion]

The "Remove alignment" button should be renamed "No alignment", especially as it's toggled by default.

[azaozz]

In [30385]:

TinyMCE: fix the tooltip for 'alignnone' button on the image toolbar. Props johnbillion, see #30147.

[johnbillion]

Marking this as complete. New issues can go into separate tickets.

[azaozz]

In 30509:

TinyMCE: set the image toolbar's z-index to be the same as the other TinyMCE panels, or it is under the editor when in fullscreen mode. See #30147.

[azaozz]

In 30558:

TinyMCE: use the actual image node when calculating the position of the toolbar. Fixes a bug in old IE. See #30147.

[azaozz]

In 30560:

TinyMCE: don't hide the image toolbar when the iframe window fires onresize. There is a bug in several browsers that triggers onresize when a tooltip is shown, only in RTL mode. Also use better variable name. Fixes #30147.