WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

#36999 closed defect (bug) (fixed)

Add Media button and other editor buttons have broken visual styling on mobiles

Reported by: FolioVision Owned by: FolioVision
Milestone: 4.6 Priority: normal
Severity: normal Version: 4.5.2
Component: Editor Keywords: good-first-bug has-patch commit
Focuses: ui Cc:
PR Number:

Description

Add Media button has a buggy visual appearance on smaller screens below 782px:

  • button icon is not vertically centered and is touching the left edge of the button
  • all the other editor buttons (actually A and DIVs) are taller and their text labels are bigger

All the other plugin buttons above the editor box should share the same unified look with the Add Media button. They share the same .button class, but for instance ".#wp-content-media-buttons a"
have a different font-size and fixed height in /wp-admin/css/edit.css. The padding is also different. There are more places to look at for fixing the issue and we can propose those changes once approved.

Even after reducing their size to the default Add Media button they will be still large enough for mobiles to tap on. Plus if someone has a couple of plugins activated, there will be enough space to accommodate all of the extra buttons (I've tested out with 5 incl. Add Media - see screenshot http://foliovision.com/images/graphics/editor-buttons-misplaced.png).

On top of that, there should be a unified template to set up these buttons including their custom icons. Various buttons are using different markup, so there should be probably a general advice on how to style those buttons and adding custom plugin icons.

thanks
Viktor

Attachments (4)

36999-1.diff (43.7 KB) - added by FolioVision 3 years ago.
edit.min.css
36999-2.diff (340 bytes) - added by FolioVision 3 years ago.
edit.css
editor-buttons-misplaced.png (26.2 KB) - added by GaryJ 3 years ago.
36999-3.diff (854 bytes) - added by FolioVision 3 years ago.
Latest patch for /wp-admin/css/edit.css

Download all attachments as: .zip

Change History (20)

#1 @jorbin
3 years ago

  • Keywords needs-patch added

#2 @iseulde
3 years ago

  • Keywords good-first-bug added

@FolioVision
3 years ago

edit.min.css

@FolioVision
3 years ago

edit.css

#3 @FolioVision
3 years ago

Two files in /wp-admin/css/ had to be changed - edit.css and edit.min.css, both diff files are attached. We'll try to take a look at the RTL versions
Viktor

#4 @DrewAPicture
3 years ago

  • Keywords has-patch added; needs-patch removed
  • Owner set to FolioVision
  • Status changed from new to assigned

@FolioVision There's no need to patch the minified or RTL files, those are generated automatically by the build script.

Assigning to mark the good-first-bug as "claimed".

#5 @GaryJ
3 years ago

OP's referenced screenshot uploaded, so it stays as part of the ticket (and easier to see with the preview on Trac).

#6 @DrewAPicture
3 years ago

  • Keywords has-screenshots added

#7 @FolioVision
3 years ago

Thanks for adding the screenshots inline @GaryJ The bug report and fix make a lot more sense this way.

Alec

PS. Viktor please include screenshots inline as uploads in the future. Thanks.

#8 @hugobaeta
3 years ago

I got to review this today for contributors day in WCEU, and realized the button icon alignment happens even when it's just the "Add Media" button. I also tested with other plugin-added buttons (I tested with the "Contact Form" module in Jetpack to see another example of this) and noticed the styles of those extra buttons are provided by core, but are indeed inconsistent. Here are some screenshots at different breakpoints:

Normal desktop width (where it looks good):
https://cldup.com/IDr2S-ETZW.png

Narrow, mobile, viewport (where the bug occurs):
https://cldup.com/3lkvhG-rdC.png

So, the only issue with the proposed patch is that, in my opinion, it would be better to standardize all buttons in that area, instead of creating exceptions for the "Add Media" button. Also, a part of the bug is that the left padding disappears, so it would be nice if that was fixed.

I don't have time today for a patch update, but if you can get one that addresses this @FolioVision, that would be great and I'll make sure to get a committer's attention to this! :)

Last edited 3 years ago by hugobaeta (previous) (diff)

@FolioVision
3 years ago

Latest patch for /wp-admin/css/edit.css

#9 @FolioVision
3 years ago

  • Resolution set to invalid
  • Status changed from assigned to closed

@hugobaeta Just now I've got to create the patch (36999-3.diff)

Viktor

#10 @SergeyBiryukov
3 years ago

  • Resolution invalid deleted
  • Status changed from closed to reopened

This ticket was mentioned in Slack in #design by foliovision. View the logs.


3 years ago

#12 @FolioVision
3 years ago

Including screenshots of the patch provided, with the bug and with the fix

http://foliovision.com/images/graphics/mobile-edit-post-broken.png http://foliovision.com/images/graphics/mobile-edit-post-fixed.png

This ticket was mentioned in Slack in #design by foliovision. View the logs.


3 years ago

#14 @karmatosed
3 years ago

  • Keywords commit added; has-screenshots removed

Looks great to me and +1 to having this committed.

#15 @karmatosed
3 years ago

  • Milestone changed from Awaiting Review to 4.6

#16 @SergeyBiryukov
3 years ago

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

In 38132:

Editor: Improve styling of "Add Media" button on mobile and make it more consistent with media buttons added by plugins.

Props FolioVision.
Fixes #36999.

Note: See TracTickets for help on using tickets.