Replace QuickPress labels with gray prompt texts

[tar.gz]

The QuickPress publishing area, that is prominently visible on the main Dashboard, has very narrow label fields. They are actually just wide enough to hold the English label text ("Title", "Content", "Tags").

In some localized versions of WP, those labels are too short to hold the complete strings, so they either overlap or break into several lines. The attachments "quickpress-labels-de.png" and "quickpress-labels-fr.png" show how bad it looks in German and French (under MacOSX, in FF and Webkit).

Now every language could override the width with a custom CSS rule, but I think there is a much better solution: we could use a prompt text inside the text field, like we already do for the "Title" field on the normal post/page editor. This would have two benefits:

• The whole string will fit in, no matter how long it is.
• The editing area gets wider, which makes it more convenient to write a post.

In my first mockup (quickpress-improved-01.png), you can see this principle applied both for the "Title" and the "Tags" field. My feeling is that the main edit box is self-explanatory, since we do the same on the post/page editor. But this should certainly be discussed with some UX experts.

I made a second mockup (quickpress-improved-02.png) where I added the category dropdown, based on Jane's proposal in #21636. I think that this would make the QuickPress box much more useful!

[tar.gz]

QuickPress labels in French version of WP

[tar.gz]

QuickPress labels in German version of WP

[tar.gz]

first mockup

[tar.gz]

second mockup, with category dropdown

[ocean90]

+100

[SergeyBiryukov]

Closed #16515 as a duplicate. I was trying to alter the layout to allow longer words there, but didn't find an easy way to do that with the current UI.

This looks much more flexible.

[JustinSainton]

+1, this looks great.

[bootsz]

+1

[tar.gz]

@Sergey : indeed, the reasoning behind this proposal is that it should work for any language without specific tuning.

An important thing to remember is that users are confronted with the dashboard each time they log into WP - even if they don't use the QuickPress widget, it's very important that everything looks clean and precise. Any imperfection here will have a negative impact for a large number of users.

[nacin]

I like quickpress-improved-01.png​ as well.

[tar.gz]

To see it in context: the current interface in German (with a CSS override for the label, 5em -> 7em).

[tar.gz]

And here the same German interface, with the new mockup.

[lessbloat]

+1 for quickpress-improved-01.png.

The category select element in quickpress-improved-02.png scares me (I mean no offense)... :-)

[ocean90]

Should be a no-brainer. We could use the placeholder attr or use the same JavaScript from the edit screen.

Category dropdown should be handled in #21636.

[tar.gz]

Thanks for the great feedback :)

I also think that the category listing adds too much noise. I wouldn't want to be welcomed by such complexity each time I visit the dashboard.

There are two other details that deserve to be mentioned:

• In the mockup, the title field has a larger font size, in order to indicate hierarchy (and it makes it more tempting to start typing).
• Since we have sufficient space in the tags field, we can put there the indication that they must be separated by commas - a useful hint, since that field does not auto-complete the tags (yet?).

Regarding the implementation: I would use the placeholder attribute, and keep the existing JavaScript as a fallback. See ​http://caniuse.com/#feat=input-placeholder

[ocean90]

21754.patch​ is a first pass. It uses the placeholder attribute.

[settle]

If you will make it this way, you can also remove some locale-specific CSS in wp-admin/css/wp-admin.css
I see I won't need lithuanian css for QuickPress and I am sure you can remove some similar russian code too.

[settle]

Lithuanian CSS which can be removed after this is fixed.

[JustinSainton]

Nit-picky, but for parity's sake, on Line 526 of 21754.patch, there's a semi-colon missing after the esc_attr_e() call.

[ocean90]

I think we should go with the JavaScript version here, since placeholder is only supported in IE > 9 and we are still supporting IE 7 and up. . More or less the same way as on the edit screen. 21754.2.patch​ does address this.

---

Some related tickets to QuickPress and JavaScript: #19662, #13516.

[DrewAPicture]

refresh

[tar.gz]

If I apply the 21754.2-refresh.patch on the current 3.5-alpha-21690, the labels are removed, but the placeholder text (for title and tags field) isn't showing up. Tested in FF and Chrome (OSX).

Also, the left margin still needs to be removed in the CSS.

[tar.gz]

Oh, sorry for the bugspam. I just found out about define('SCRIPT_DEBUG', true);
Now it's working perfectly!

[nacin]

Not sure I understand the need for the keydown event. Seems to work fine without it.

[ocean90]

Replying to nacin:

Not sure I understand the need for the keydown event. Seems to work fine without it.

Not sure too, but it's a copy of wptitlehint from ​post.js.

[lessbloat]

In 21754.3.diff: Removed keydown event, and tested in Mac FF & Chrome as well as in Win IE8. UI looks good to me.

[helenyhou]

[21754.3.diff] looks good and works well for me.

[nacin]

In [21894]:

Replace QuickPress labels with gray prompt texts. Stylish, but also done for localization purposes (string lengths). props ocean90. fixes #21754.

[tar.gz]

Some nitpicking regarding the margin alignments of the "Draft saved/Post published" dialog.

[tar.gz]

I think the new QuickPress box is looking terrific!

Not sure how fanatic we should be regarding pixel-precise margin alignment, but here are some observations about how the "Post published/Draft saved" dialog could become even more handsome.

On the left the current state, in the middle an improved version where the margins of the yellow top box and the Save Draft / Publish buttons are precisely aligned. Also the little Press This advert might look better if it was aligned left, and used the same padding as the boxes.

I guess the new buttons styles should be finalized, before doing those adjustments.

[nacin]

#dashboard-widgets form .input-text-wrap input is set to width: 99%. This means the inputs are closer to the left edge than the right edge. The Publish button is set to have a right margin of 5px, but on a narrower screen, the 1% is noticeably less than 5px.

I'm fine with a patch that aligns everything right up. Note that if the "You can also try" text is indented on the left, it should have the same margin on the right.

[lessbloat]

21754.4.diff attempts to fix alignment issues in #comment:26. Tested in Mac FF, Mac Chrome, Win IE8, Win FF.

[nacin]

21754.4.diff​ looks good. I imagine 99% was chosen to avoid breakage on older IE browsers. Confirming it looks fine in IE7 would probably be the only step left.

[lessbloat]

21754.5.diff takes pity on IE7 users - here's what they'll see:

[helenyhou]

Tested. Good to go.

[nacin]

In [22146]:

Align QuickPress fields. props lessbloat. fixes #21754.