#18197 – New Admin Bar/Header Combo

As you know part of the scope for 3.3 was a revised admin bar that would reduce duplication in the admin headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes.. The first draft of it has been posted to TracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/..

https://core.trac.wordpress.org/ticket/18197

It needs a color refresh, some optimization, some decisions about which links going where, etc, but is the starting point we are using. Would like to get it back toward the lighter gray we used in the header before, but with some border maybe so it doesn’t look like browser chrome. Fiddling with the links and stuff will happen on Trac, but if anyone wants to mock up some color variations, we have until Sunday.

#admin-bar, #dashboard-2, #header, #trac

Not quite loving the metabox h3 style. T…

Not quite loving the metaboxMetabox A post metabox is a draggable box shown on the post editing screen. Its purpose is to allow the user to select or enter information in addition to the main post content. This information should be related to the post in some way. h3 style. The title of the box doesn’t stand out enough. Played around with some CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. gradients as a background, which was promising. But I’m sure someone else can mock up something quicker than I can. Not looking for a big change here, just something subtle so that the title doesn’t blend into the metabox text so much. Any ideas?

#css, #dashboard-2, #style

#17324 – UI Style Update

This thread is for suggestions/questions about the UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. decisions in the 3.2 style update, so the tracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. ticket can be kept clean for ‘this needs to be done’ tasks identified by leads and/or bug reports related to the style code.

#css, #dashboard-2, #design, #style, #trac

#17283 – Color coding off in multisite Right Now box

MultisiteMultisite Multisite is a WordPress feature which allows users to create a network of sites on a single WordPress installation. Available since WordPress version 3.0, Multisite is a continuation of WPMU or WordPress Multiuser project. WordPress MultiUser project was discontinued and its features were included into WordPress core.https://codex.wordpress.org/Create_A_Network. adds:

Storage Space 100MB Space Allowed 0MB (0%) Space Used

…and “Space Used” is green by default. It should be gray since it doesn’t denote an action has applied a positive status. Gray until the ‘almost near limit’ color kicks in.

#dashboard-2, #right-now, #trac

#17282 – Dashboard Recent Comments “View All” update

The “View All” buttons on the dashboard boxes are weird b/c they are buttons, but they aren’t actions, they are links. Would like to start switching over to a standard where buttons are mostly reserved for action/commitments, not just links to another screen.

Suggestions for Recent Comments box: instead of “View All” button, replace with links to the various views of the comments screen. So:

View All | Pending (24) | Approved | Spam (6) | TrashTrash Trash in WordPress is like the Recycle Bin on your PC or Trash in your Macintosh computer. Users with the proper permission level (administrators and editors) have the ability to delete a post, page, and/or comments. When you delete the item, it is moved to the trash folder where it will remain for 30 days. (3)

…where the link styles are the same as on edit-comments.php

#buttons, #comments, #css, #dashboard-2, #links, #trac

3.2 feature freeze is this weekend, with…

3.2 feature freeze is this weekend, with final post-testing/usability review UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. freeze about a week later, and betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. starting on May 11. With this tight of a timeline, it’s entirely likely that it is too late to do a style update for this release, and it will wind up in 3.3. That said, sometimes everything just comes together in a perfect storm of creativity and collaboration, and things can happen faster than normally are possible. Maybe this will be one of those times.

Just over a week ago, I was talking with Matt, and we were discussing two things:
1. What’s the UI equivalent of the performance improvements that are forming the bulk of the 3.2 release.
2. Every platform and its brother seems to have copied the WordPress admin UI, and what was once lauded as amazing and a huge step forward is now kind of looking like everything else (through no fault of our own, other than the ‘fault’ of being awesome). Maybe it’s time for us to update the style a little bit and start the next wave.

To that end, I posted here on April 20 posing the question, “What if?” regarding our admin styles, making it clear I was not talking about a structural redesign, but a style update. @chexee did a comp. I made a comment. @ryanimel did a follow-up comp. Collaboration in action!

Since @chexee is entering her exam period (graduation soon, yay!), I asked Ryan if he’d like to do another iteration combining some menu styling updates, and he said yes (new contributor, yay!). I sent him a PSD of the menu/headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. refresh that we talked about doing back in 2.8 but decided to put off until later, then wound up never doing. It was after 10pm when this went down last night, so I dusted off photoshop and did some comp combining of my own in case Ryan wound up not having time. I emailed the resulting comp as a POC to the lead and commit-level developers (including Matt) to get a gut check on if this was something we wanted to pursue. Yes.

But! It’s much too late for 3.2. Or is it? If the styling changes are mostly happening in CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. and someone volunteers to work on it, then maybe not. Here’s where it stands:

  • Chelsea did the first comp in response to my post.
  • Ryan Imel did the second comp in response to my comment on Chelsea’s comp.
  • I sent Ryan Imel PSD of Matt Thomas’s nav/header refresh comp from 2.8
  • I cut and pasted bits of Ryan’s comp and MT’s comp, and moved some stuff around to make a new comp. Sent to leads for review.
  • Leads liked it. Talked about what I would change if spending actual time on it. Got some feedback for what we need to address/finish/improve for it to be coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.-acceptable.
  • Talked to MT about addressing several issues, since menu/header stuff came from his comp. He’s going to try to do several things today, including *Create a gutter between nav sections, *Change direction of arrow so it goes from menu to main area, *Try a repositioning of header elements so that blog title and screen could be oriented in a navigational breadcrumb (involves smaller font, typography adjustments), tabs could flip up again, smaller footprint for header, bring back faves menu (probably need to wait unti l3.3 to talk about removing it). He’ll also take a stab at giving a little gradient and/or bevel love to the boxes to keep the crisp edges and feeling of depth while making it less like 90s windows ui (requested in feedback). It anyone else would like to take a stab at this as well, if you can do it by EOD today, have at it and we can look at it along with MT’s and see what looks like it fits best.
  • Need a volunteer to jump in on CSS updates for it.
  • @azaozz will check into the JS implications.
  • Need to get a patch of general intent into core by end of tomorrow, to meet feature freeze. We then have until May 11 for UI refinements. So please, let’s not start a conversation in this thread about details. We have all next week for that, and can devote the UI meeting to it as well. Let’s talk details after we have a basic something done that gets in by freeze. If we don’t get a first pass in by freeze, then this will be postponed until 3.3, so please keep remarks focused.
  • Once initial patch goes in, we can delve into ui details/improvements. Will also start a ticket for some text improvements, which everyone can contribute to as well.

What is cool about this is that even something happening quickly already has 4 different people contributing to the design to get it to where it ought to go.

#css, #dashboard-2, #style

Not to open a can of worms where everyon…

Not to open a can of worms where everyone starts going crazy over the idea of a redesign, which is *not* my intention, but given that every other CMS seems to be copying our dashboard design, I wonder if we might want to update the style a little. This is just a gut-check question:

  • What if instead of boxes with a 1px outline and grabbable headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. bar, the “boxes” were just delineated by background shading, the ‘headline’ label sitting on the same shading instead of a header bar, and the whole background was a drag handle?

#css, #dashboard-2, #style

Recent Comments

The Comments screen is something I want to improve soon. It’s a big challenge, though, and we will hopefully have a gsoc project dedicated to it, so I don’t want to plan something that would prevent the gsoc project from being committed if it turns out well. If the project gets accepted for gsoc, will anticipate doing ui review in group mtgs/on this blog to help direct the interface (student has done some early mockups to get started).

In the meantime, let’s talk about the Recent Comments box on the Dashboard screen. It was thrown together in 2.7 and never revisited b/c no one had time, and when a student did it as part of a gsoc dashboard modules project last year, it wasn’t super successful. It needs to be redone, and has needed it for over 2 years. Some of the things we meant to get around to:

  • Don’t just display x comments, but bring in the ‘river of comments’ model.
  • Expand to see all of comment text (on hover? on click? need to decide).

There are more, but I’ll let you guys have the fun of identifying them. Leave your suggestions in the comments and let’s discuss at an upcoming ui group meeting, prioritize, and have someone mock up the decided course.

#comments, #dashboard-2

Trac UI challenge: Probably not that muc…

TracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. challenge:
Probably not that much of a challenge, necessarily, but would need approved mockups for someone to want to start a patch. Collapsible page hierarchy on edit.php?post_type=page.

#admin, #dashboard-2, #list-pages, #pages, #trac