Hide Media Buttons on small screens

[pento]

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.

[ryan]

​https://make.wordpress.org/flow/2014/10/16/a-survey-of-media_buttons-macnchrome-iphone-5-4-1-alpha-20141015/

Do it for all screens.

[afercia]

Related, also for accessibility: #29838

[celloexpressions]

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.

[ryan]

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.

[marcelomazza]

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

[pento]

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.

[melchoyce]

@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

[marcelomazza]

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

[pento]

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

[afercia]

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 :)

[marcelomazza]

second proposal

[marcelomazza]

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

[melchoyce]

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

[Michael Arestad]

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

[afercia]

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"

[pento]

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?

[Michael Arestad]

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]

Checking the use case of long strings

[iseulde]

What about something like that ^.

[melchoyce]

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.

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

[melchoyce]

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]

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

[marcelomazza]

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.

[afercia]

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 :)

[melchoyce]

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

[marcelomazza]

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.

[nacin]

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.

[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?

[marcelomazza]

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.

[pento]

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.

[marcelomazza]

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!

[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

[helen]

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.

[afercia]

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

[ryan]

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

[designsimply]

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.

[ryan]

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

[wonderboymusic]

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

[DrewAPicture]

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.

[wonderboymusic]

Sorry, I got too busy to look at this.

[desrosj]

Thank you, everyone for your hard work on this enhancement!

With the inclusion of the new block editor in Core, the Classic Editor is now in a bug fix only mode. I'm going to close this out because these buttons are replaced with the block inserter in the new editor.