WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 6 years ago

#30696 closed defect (bug) (fixed)

Inline media toolbar positioning

Reported by: Clorith Owned by: dd32
Milestone: 4.1.1 Priority: normal
Severity: minor Version: 4.1
Component: TinyMCE Keywords: fixed-major has-patch commit
Focuses: ui, javascript Cc:

Description

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.

Attachments (2)

30696.patch (2.5 KB) - added by azaozz 6 years ago.
30696.2.patch (709 bytes) - added by iseulde 6 years ago.

Download all attachments as: .zip

Change History (14)

#1 @azaozz
6 years ago

...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.

#2 @Clorith
6 years ago

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?

#3 @iseulde
6 years ago

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

#4 @nacin
6 years ago

  • Milestone changed from Awaiting Review to 4.1.1

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.

#5 @nacin
6 years ago

  • Severity changed from normal to minor

@azaozz
6 years ago

#6 @azaozz
6 years ago

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.

#7 @valendesigns
6 years ago

  • Keywords has-patch added

This ticket was mentioned in Slack in #core by jorbin. View the logs.


6 years ago

#9 @iseulde
6 years ago

  • Component changed from Editor to TinyMCE
  • Focuses javascript added

@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.

@iseulde
6 years ago

#10 @azaozz
6 years ago

  • Resolution set to fixed
  • Status changed from new to closed

In [31362]:

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

#11 @azaozz
6 years ago

  • Keywords fixed-major commit added
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopen for 4.1.1.

#12 @dd32
6 years ago

  • Owner set to dd32
  • Resolution set to fixed
  • Status changed from reopened to closed

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.

Note: See TracTickets for help on using tickets.