WordPress.org

Make WordPress Core

Opened 3 years ago

Last modified 2 years ago

#29989 new enhancement

Hide Media Buttons on small screens

Reported by: pento Owned by:
Milestone: Future Release Priority: high
Severity: normal Version:
Component: Editor Keywords: make-flow has-patch needs-refresh
Focuses: ui, administration Cc:

Description

On small screens, the media buttons above the post editor can take a up a lot of room, especially if plugins have added extra buttons.

It would be nice if they were hidden (perhaps in a dropdown) for small screens.

This would also be useful for the new distraction free writing mode.

Attachments (10)

IMG_2934.png (52.5 KB) - added by pento 3 years ago.
add-media_mobile.jpg (82.5 KB) - added by marcelomazza 3 years ago.
default-state.png (114.3 KB) - added by pento 3 years ago.
add-media_mobile-split-button.jpg (55.9 KB) - added by marcelomazza 3 years ago.
second proposal
add-media_mobile-long-strings.jpg (139.4 KB) - added by marcelomazza 3 years ago.
Checking the use case of long strings
Screen Shot 2015-02-04 at 22.09.34.png (25.3 KB) - added by iseulde 3 years ago.
add-media_mobile-long-strings-links.jpg (35.4 KB) - added by marcelomazza 3 years ago.
"Change Permalinks" and "View Post" with link, instead of button.
add-media_mobile-02.jpg (140.2 KB) - added by marcelomazza 3 years ago.
2015-02-08 22.38.25.png (143.0 KB) - added by pento 3 years ago.
29989.diff (5.7 KB) - added by wonderboymusic 2 years ago.

Download all attachments as: .zip

Change History (66)

@pento
3 years ago

#2 @afercia
3 years ago

Related, also for accessibility: #29838

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


3 years ago

#4 @celloexpressions
3 years ago

Add media should probably not be hidden, unless there are buttons added by plugins. I would consider the screenshot an edge case, although apparently something WordPress.com is running into... not sure that this is the best place for plugins to be shoving all of these buttons anyway. A lot of that functionally could logically be integrated into the media modal, or the concept of "content blocks" could be explored further.

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


3 years ago

#6 @ryan
3 years ago

Right. Add Media should always show. If wordpress.com or Jetpack add things, Add Media would get a dropdown arrow and the added things would be buried beneath. Content blocks are still fantasy, and I've been unable to persuade away from adding media buttons.

#7 @marcelomazza
3 years ago

Attached a proposal to fix this issue. What do you think?

@pento
3 years ago

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


3 years ago

#9 @pento
3 years ago

The default state is to have the Add Media button (kind-of) in line with the Visual/Text tabs.

I'm wondering how it would look to add a dropdown button to the right edge of the Add Media button, so tapping the left side will open Add Media, tapping the right side would open the dropdown.

I suspect the dropdown would also be better overlapping the editor, so that we're not moving UI elements around.

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


3 years ago

#11 @melchoyce
3 years ago

@marcelomazza — do you want to try mocking up a segmented version like @pento proposes? Could be very similar to the text color dropdown: https://cloudup.com/c3c0pZCsBXs

#12 @marcelomazza
3 years ago

@melchoyce @pento sure!

I couldn't get back to this, but I will for sure. My only concern with this would be the discoverability of the rest of "add" buttons, I feel like doing a dropdown instead of adding another button for the non-media "add" will leave a lot of users without knowing the other buttons are there.

It's just an hypothesis, I couldn't confirm it with any user testing. Anyhow, I'll mockup that variant to see how it looks.

#13 @pento
3 years ago

I don't have exact numbers to compare, but some rough research on WP.com usage suggests that the other buttons receive less than 1% of the usage that Add Media does.

Under those circumstances, I have absolutely no problem hiding them away, if it makes the UI much nicer for over 99% of users. :-)

#14 @afercia
3 years ago

As a reference, that's what Bootstrap calls "Split buttons", see
http://getbootstrap.com/components/#btn-dropdowns-split
Their example markup has also some level of accessibility, with a little JS help :)

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


3 years ago

@marcelomazza
3 years ago

second proposal

#16 @marcelomazza
3 years ago

Definitely the split button is a good choice @pento @afercia @melchoyce.

I tried to check this editing the code but the HTML of the button is embedded in PHP logic (first time digging through core here). I suppose everything is embedded in PHP logic :P

#17 @melchoyce
3 years ago

That's really nice, @marcelomazza. Definitely much more workable than what we currently have. @pento, how do you feel about implementing it?

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


3 years ago

#19 follow-up: @Michael Arestad
3 years ago

How long are a few common translations for "Add Media"? And would that be a concern for @marcelomazza's solution? /drivebyquestion

#20 in reply to: ↑ 19 @afercia
3 years ago

Replying to Michael Arestad:

How long are a few common translations for "Add Media"?

"Ajouter un média"
"Añadir objeto"
"Dateien hinzufügen"
"Adicionar Mídia"
"Добавить медиафайл"
"Aggiungi media"

#21 @pento
3 years ago

I'm liking where this design is going. I agree that longer translations could be a problem - the Visual/Text tabs make it pretty easy to ruin the flow. :-)

@marcelomazza - could you try some mockups with the longer strings, and see if there's a place where the Add Media button still looks good?

#22 @Michael Arestad
3 years ago

On smaller screens, I'd make each tab ~50% so they don't case a visual break with the large gap on the left. I'd then make the add media dropdown full width right above. (and eventually figure out WYSIWYG button overflow)

@marcelomazza
3 years ago

Checking the use case of long strings

#23 @DrewAPicture
3 years ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 4.2
  • Priority changed from normal to high

#24 follow-up: @iseulde
3 years ago

What about something like that .

#25 in reply to: ↑ 24 @melchoyce
3 years ago

Replying to iseulde:

What about something like that .

Feels a bit too obscure, especially for newer users. I think @marcelomazza's b2 approach is the most effective yet, even if it does add a little height. I'm a little worried at how tightly clustered everything is, though — with permalinks and view post, the buttons kind of visually bleed together.

#26 follow-up: @marcelomazza
3 years ago

@melchoyce we can make links of "Change Permalinks" and "View Post" instead of buttons. That would lower the weight a bit. Or smaller buttons, of course.

#27 in reply to: ↑ 26 ; follow-ups: @melchoyce
3 years ago

Replying to marcelomazza:

@melchoyce we can make links of "Change Permalinks" and "View Post" instead of buttons. That would lower the weight a bit. Or smaller buttons, of course.

Links with some ample padding to increase touch-target could work. I'd rather that than smaller buttons, I think.

@marcelomazza
3 years ago

"Change Permalinks" and "View Post" with link, instead of button.

#28 in reply to: ↑ 27 @marcelomazza
3 years ago

Replying to melchoyce:

Links with some ample padding to increase touch-target could work. I'd rather that than smaller buttons, I think.

Done! I think this can work.

#29 in reply to: ↑ 27 ; follow-up: @afercia
3 years ago

Replying to melchoyce:

Links with some ample padding to increase touch-target could work. I'd rather that than smaller buttons, I think.

Please consider from an accessibility and web standards point of view, non-links controls should be marked up as buttons. See #26504 (closed waiting for specific tickets to be open, but still valid point) we're going to change all non-links in buttons. It would be great to don't introduce new ones :) Once changed in buttons, we could *style* them as sort of links, discussed a bit about this with @helen and @michaelarestad on Slack #accessibility of course everyone's feedback would be much appreciated, especially @melchoyce :)

#30 in reply to: ↑ 29 @melchoyce
3 years ago

Replying to afercia:

Once changed in buttons, we could *style* them as sort of links, discussed a bit about this with @helen and @michaelarestad on Slack #accessibility of course everyone's feedback would be much appreciated, especially @melchoyce :)

Works for me. :)

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

#31 @marcelomazza
3 years ago

Update: poked @pento about this one, I'm going to do an HTML/CSS mockup.

I think we all already agreed on this one, but just in case, let me know if anyone has any objection or new idea.

#32 @nacin
3 years ago

I really like the full-width tabs (when needed).

I am not sure how this will be implemented technically, just because of how media_buttons work. But there are likely some clever ways to do it.

#33 follow-up: @afercia
3 years ago

I'm not a designer :) but I like typography. Was thinking about having 5 different font styles in a so small space maybe it's a bit noisy, designers: any thoughts?

#34 in reply to: ↑ 33 @marcelomazza
3 years ago

Replying to afercia:

I'm not a designer :) but I like typography. Was thinking about having 5 different font styles in a so small space maybe it's a bit noisy, designers: any thoughts?

New iteration attached! (add-media_mobile-02.jpg )

I think you have a point about too many font styles, but I also think that this is definitely an improvement over the current screen. I put them side-to-side in this last attachment to be able to compare them.

Addressing the font style mess, check b3:

  • We can use the same font style between the "Add Media" button and the Visual/Text tabs.
  • I feel that the bigger "typographical noise" happens between "Add New Post" and "Enter title here". I would like to propose (again :P) the removal of the title. I say again because we spoke about this at #design, but there was not a clear definition. To recap our conversation:

    "About hiding the title (just on small screens) with screen-reader-text maybe mobile screen readers will get it, honestly I don't know, I guess yes but we should do some testing. I'm a bit concerned instead about low-vision users who don't use a screen reader: will they have enough contextual information without a title?"

    https://wordpress.slack.com/archives/design/p1422668999000143

  • And! Remember that the initial view doesn't show the "Change Permalinks" and the "View Post" buttons, so the font styles being shown are reduced a bit more.

#35 @pento
3 years ago

I'm liking b3, but I'm not sure about removing "Add New Post", and putting it into the title field. This screen is also used for editing posts, which means there'll be no indicator for what post type you're editing.

Also, as in the attached screenshot - the "Change Permalinks" button is only there if you don't have pretty permalinks enabled. Usually it'll be an "Edit" button.

#36 @marcelomazza
3 years ago

I started mocking the HTML/CSS of this. I did a git repository to track the changes. I was about to submit a patch but the logic of the Add Media button is buried into php.

Live demo

https://dl.dropboxusercontent.com/u/2775226/core-mockups/src/wp-admin/post-new.html

HTML

https://github.com/marcelomazza/wp-core-mockups/commit/64fea011c8573e0e5dda272ee6118557597c9bc0

  • See the commit message to check which classes I added.

CSS

https://github.com/marcelomazza/wp-core-mockups/commit/339705050946de7ff3e14e0c156bd52b099f362a

Questions

  • I'm adding a new .button-split-wrap class (maybe rename it to just .button-split?) It has been added to edit.css file. Should I add it to buttons.css? If yes, I need to also add styles for more than 480px (currently it only works for a max-width of 480px and I need to add RTL support).
  • Added a .button-link class in buttons.css (just for max-width: 480px breakpoint). I did it only for this breakpoint because if you have a bigger viewport you should see the standard button. I suppose this will be a point of discussion, I hear your thoughts!
Last edited 3 years ago by marcelomazza (previous) (diff)

#37 follow-up: @afercia
3 years ago

About the annotation in add-media_mobile-02.jpg:

"Change permalinks" and "View post" need to be marked up as <buttons>

  • "View post" is a link: it takes you somewhere else, should be marked up as a link
  • change/edit permalinks: it "does something", should be marked up as a button

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


3 years ago

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


3 years ago

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


3 years ago

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


3 years ago

#42 in reply to: ↑ 37 @helen
3 years ago

Replying to afercia:

About the annotation in add-media_mobile-02.jpg:

"Change permalinks" and "View post" need to be marked up as <buttons>

  • "View post" is a link: it takes you somewhere else, should be marked up as a link
  • change/edit permalinks: it "does something", should be marked up as a button

"Change permalinks" is in fact a link to the permalinks options screen. "Edit" right now doesn't tell you what you're editing when it's on its own, I think that needs further examination.

#43 @afercia
3 years ago

Helen's right, so to recap:

Edit          <- should be a button, yes needs some more context
OK            <- should be a button
Cancel        <- should be a button
View Post     <- is a link
Get Shortlink <- should be a button

Displayed just when your permalinks are set to "Default" in options-permalink.php:

Change Permalinks <- is a link

please let me know is I've missed something

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


3 years ago

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


3 years ago

#46 @ryan
3 years ago

  • Milestone changed from 4.2 to Future Release

Punted from 4.2 per the bug scrub. We really like the direction here. Let's build some momentum for 4.3.

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


3 years ago

This ticket was mentioned in Slack in #core-editor by boren. View the logs.


2 years ago

This ticket was mentioned in Slack in #core-flow by boren. View the logs.


2 years ago

#50 @designsimply
2 years ago

Flow screenshots for this were posted at https://make.wordpress.org/flow/2015/05/27/the-location-of-add-media-on-phones/ and they're worth a look.

Noteworthy:

Press This puts Add Media, Save, Preview, and Publish all in a fixed bar at the bottom. It is truly fixed and stays visible even when the browser’s bottom bar displays.

This ticket was mentioned in Slack in #core-editor by iseulde. View the logs.


2 years ago

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


2 years ago

#53 @ryan
2 years ago

Related, #33895 - Editor: Reduce clutter between title and content by hiding permalink UI

@wonderboymusic
2 years ago

#54 @wonderboymusic
2 years ago

  • Keywords has-patch needs-refresh added; needs-patch removed
  • Milestone changed from Future Release to 4.4

29989.diff transfers this to a patch - still more to do. Dropdown doesn't happen yet and heaven only knows what people are outputting during the media_buttons action

#55 @DrewAPicture
2 years ago

29989.diff needs a refresh. And we need to decide if this is something we want to try to get it in before 4.4 Beta 1, which is in about a week and a half.

#56 @wonderboymusic
2 years ago

  • Milestone changed from 4.4 to Future Release

Sorry, I got too busy to look at this.

Note: See TracTickets for help on using tickets.