Hey UI gang Here to help you wind…

The Design Team provides design for the WordPress project.

Want to get involved? See the handbook and optionally drop into #design to chat. Most active design work happens in the block editor project, consider dropping into Needs design or Needs design feedback.

Figma Access

You don’t need edit access to use the Figma libraries, you can copy components from there into your own drafts. If you’re a contributor with the ability to grant edit access, please be mindful, and downgrade to view access once the initial need for edit has waned.

Hey, 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. gang. Here to help you wind down the week is the latest update to MP6, version 1.2.

We’ve been focusing primarily on solving some of the trickiest responsive questions this week. Some we’ve found solutions to, and some we’re still discussing. We’ve also got a wild idea for the front-end of the site that we’ve got some mockups of to discuss.

Here’s what’s new this week:

A new position for the “hamburger” button that opens/closes the mobile menu. It’s now part of the adminbar, and stays put when scrolling the rest of the page. There’s a much more obvious active style, and we’ve greatly increased the reliability of the button (no more multiple taps to get it to open anymore!).
Increased the size of wpadminbar dropdown menus for mobile sizes so that links are easier to tap. (We still need to work on making these easier to close without activating a link).
Improvements to the media uploader for responsive. Still needs work, but is more functional now.
Fixed buglets appearing because of Jetpack’s 2x retinafying code interfering with MP6.
Better positioning of icons in the wpadminbar.
Improved responsive layout on the Akismet configuration page.
Added new icon glyphs to the Dashicons font.
Reworked the way Open Sans is declared in the pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party..
Fixes to checkboxes and radio buttons.

Once we decided that the adminbar was the best possible place to put the hamburger button for mobile, I started thinking about whether that same interaction might make sense on the desktop version of the dashboard. After all, we’ve already got a button that hides and shows the dashboard, it’s just always been at the bottom of the menu. What if we put it at the top, in the adminbar? The benefit would be that even desktop users would grow to understanding the meaning of the button, since its purpose, hiding or showing the menu, is the same whether you’re on desktop or mobile. If we took it that far, it could even go to the front end of your site; allowing access to any part of your blog’s dashboard within two clicks of your live site. This would be a bigger change than what we can do with just CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. in MP6, so it’s a topic we’re interested in your thoughts on, to see if it’s a good candidate for a potential coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. patch suggestion.

This week’s edition of MP6 includes contributions from Joen Asmussen, Mel Choyce, Ben Dunkle, Till Krüss, Andy Peatling, and myself. Many thanks, as always, to those of you who have shared your feedback and ideas with us so far. Keep them coming!

We’ll be in #wordpress-ui on Freenode May 20, 2013 at 18:00 UTC to discuss this week’s work; please meet us there if you’d like to chat about what’s new.

#mp6

Hassan 9:32 pm on May 17, 2013

The idea of bringing the admin menu on the frontend (along with the admin bar) is just brilliant, I think.
I don’t know why this never occurred to me before 🙂

We need to make it a reality… after heavily testing it, indeed.
Hassan 9:47 pm on May 17, 2013

By the way, the update notification bubble is sometimes orange and sometimes blue. Is this intentional or a bug? I prefer the orange; the blue looks a bit wonky when the it’s on a highlighted menu item which is also blue.
mindctrl 12:34 am on May 18, 2013

Looking good. Bringing the admin to the front end is nice. A couple questions though.

1. How much weight is that going to bring to the front end?

2. Will we be able to totally disable that feature via filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output./option/something where the weight doesn’t come with it if necessary?
Just a guy 12:58 am on May 18, 2013

I love it!
Dean Robinson 12:39 pm on May 18, 2013

If we took it that far, it could even go to the front end of your site; allowing access to any part of your blog’s dashboard within two clicks of your live site.

Hot.

+100
Aaron Hockley 4:50 pm on May 19, 2013

Random question: why do the MP6 updates not show up as updates w/in WordPress (I don’t get an update notification; can’t update from within the admin screens, etc)? I’m seeing this on several sites (multiple web hosts) so I trust it’s not a “just me” problem.
- Ipstenu (Mika Epstein) 5:19 pm on May 19, 2013
  
  Are you on 3.5? it shows up on 3.6 for me, but not 3.5
  - Aaron Hockley 5:38 pm on May 19, 2013
    
    Ah. Yep, 3.5.1. That would explain it.
Matt Van Andel 5:08 am on May 21, 2013

Making the dashboard menus available from the frontend is just brilliant. I love, love, love the idea.

That aside, I like the idea of having the mobile and desktop hamburger button consistently in the top-left of the admin bar as well.
Lea Cohen 5:22 am on May 21, 2013

I love the idea of bringing the admin menu on the front end !
Lea Cohen 5:35 am on May 21, 2013

And 2 more RTL issues:

1) The adminbar doesn’t change direction on RTL.
This is what it’s supposed to look like (the screenshot is wide, so I’m just linking to it, not embedding it here), and this is what it actually looks like with MP6.

2) It seems that press-this didn’t get any RTL care… 🙂
- Lea Cohen 5:40 am on May 21, 2013
  
  Got the links in the first problem mixed up…
  
  Trying again:
  
  The right direction for RTL
  
  The way it show with MP6
- Matt Thomas 11:06 pm on May 21, 2013
  
  Thanks, Lea! I’ve added these to our to-do list.
JakePT 6:37 am on May 21, 2013

I’m having an issue with plugins that add columns to a custom post typeCustom Post Type WordPress can hold and display many different types of content. A single item of such a content is generally called a post, although post is also a specific post type. Custom Post Types gives your site the ability to have templated posts, to simplify the concept. using the manage_edit-POSTTYPE_columns filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output.. All the columns apart from the Name column become extremely narrow on small screens, forcing each letter to a new line, meaning the rows become very tall.

Note that I haven’t used any custom CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. to resize the columns in the normal view.
- Matt Thomas 11:06 pm on May 21, 2013
  
  Thanks; we’ll take a look at this.
Nick Halsey 9:22 pm on May 21, 2013

I love the frontend menu idea, although I think we risk putting too much visual weight on the active/open menu indicator on the backend using those mockups; I can’t think of a good solution other than retaining the existing treatment in the admin and only changing mobile and the frontend. Since the menu will usually be expanded in the admin for most users, the active menu icon is distracting, and the expanded/collapsed states are used more by preference than as active/inactive states.

Also, the TinyMCE icons are being misaligned vertically unless they have dropdowns…
Ipstenu (Mika Epstein) 9:35 pm on May 21, 2013

Post Format images don’t show up with MP6 active
- Matt Thomas 11:18 pm on May 21, 2013
  
  Hmm, I can’t reproduce this one. I’m on the latest version of trunk, and the icons seem fine. Try an svn up or delete/re-install and if you’re still seeing it, let me know what browser and that other good stuff.
  - Ipstenu (Mika Epstein) 12:02 am on May 22, 2013
    
    Tested a fresh version. Fails on Chome (mac) every time. Also tested on Firefox and Safari, same thing. It works until I turn on MP6.
    - Matt Thomas 12:11 am on May 22, 2013
      
      Aha! Reproduced it after updating WP to the latest nightly. Looks like something changed there; I’ll figure out what.
    - Matt Thomas 12:45 am on May 22, 2013
      
      Since the icons moved to colors-fresh/colors-classic, I took the opportunity to go ahead and add them to colors-mp6 as dashicons. Should be all fixed up now in trunk, with a first pass at some MP6-ish styling.
JPry 9:18 pm on May 24, 2013

Here’s a suggestion for a bit of consistency:

It would be good on the Plugins page to change the `border-left` property to the same orange-ish color that is visible behind the update count. This would make it much easier to distinguish plugins that have an update available.

Comments are closed.

The Design Team provides design for the WordPress project.

More information

Share this:

Site resources