Targeting the new dashboard design in a post-MP6 world

There’s been a lot of chatter about how to handle the detection of the new dashboard design in a plugin in WordPress 3.8, now that the “mp6” body class is gone. I have three suggestions, any of which can be used depending on the situation.

The WordPress admin assigns a “branch-x-y” class to the body. So, branch-3-8, branch-3-9, etc. But rather than targeting 3.8 or newer this way (which will require you to add selectors for versions far into the future), target 3.7 or older. So if the latest version of your plugin supports 3.6 or later:

[css]
.branch-3-6 .some-selector,
.branch-3-7 .some-selector {
/* some rules go here for 3.6 and 3.7 */
}
.some-selector {
/* 3.8+ rules go here */
}
[/css]

As your minimum requirements increase over time, the older rules can simply be removed. Pretty easy.

The second method is for when you require greater UI robustness. (This is also good for instant compatibility with existing code written against MP6.) Simply add your own mp6 class to the admin. The admin_body_class filter is a little funky, so bear with me:

[php]
add_filter( ‘admin_body_class’, ‘nacin_please_prefix_this_add_mp6_class’ );
function nacin_please_prefix_this_add_mp6_class( $classes ) {
if ( version_compare( $GLOBALS[‘wp_version’], ‘3.8-alpha’, ‘>’ ) ) {
$classes = explode( " ", $classes );
if ( ! in_array( ‘mp6’, $classes ) ) {
$classes[] = ‘mp6’;
}
$classes = implode( " ", $classes );
}
return $classes;
}
[/php]

An added benefit here is some nice standardization: If multiple plugins need this same class, it’ll simply be added once and be subject to shared usage.

The final method is for if you need to know in PHP whether MP6 the plugin is enabled outside the body class. For that, simply use the version_compare() above.

[php]
if ( version_compare( $GLOBALS[‘wp_version’], ‘3.8-alpha’, ‘>’ ) ) {
// 3.8 dashboard theme
}
[/php]

To those asking why we shouldn’t just include the class in 3.8: WordPress evolves over time, and even 3.8 has significant changes when compared to MP6 the plugin. While we do strive to maintain backwards compatibility — including, to some extent, when we merge in popular plugins — a line needs to be drawn somewhere. Short of introducing a “version” string of the UI (which would be redundant, given WP versions), there’s just no great way to solve this, especially when trying to be forwards compatible with future design changes (to 3.8 and beyond). It’s worth noting that the branch-x-y classes were introduced a few versions ago specifically for the purposes of managing UI changes in plugins.

A side note, and this is purely a personal preference, I’d really like to *stop* calling the dashboard design “MP6”. I don’t just mean in code, I also mean in general nomenclature and bug reports. Code names are cute in software development, and it helps to have a shorthand. (We already have a lot of them — too many, even.) But we’ve reached the point where we are about to ship this to tens of millions of users. It’s time to drop it. In bug reports, let’s simply set the “version” field to “trunk” and file it under the Administration component. In general, let’s celebrate it as the new design and aesthetic that WordPress 3.8 brings/brought us. It’s no longer MP6. It’s now just WordPress.

#mp6

MP6 2.2

We’re back with another Friday update to MP6. We’ve had a flurry of improvements and bugfixes as we come down the home stretch.

  • Open Sans is now included in MP6 instead of linking to Google Fonts. (background and discussion)
  • Responsive fixes to the color scheme picker.
  • Hide 3rd-party adminbar elements at responsive sizes to prevent the adminbar from overflowing its container.
  • Improvements to sizing and spacing of responsive adminbar icons.
  • Updated Dashicons with new glyphs.
  • Fixes to Press This.
  • Icon fonts are no longer blurry in Firefox 25/Mac thanks to -moz-osx-font-smoothing.
  • New :focus style for Screen Options and Help tabs.
  • Added @-ms-viewport so IE10/11’s “snapped” mode takes advantage of responsive sizes.
  • Added a fix for the Windows Phone 8 viewport size bug.
  • Manymanymore bugfixes. (see full log)

This edition of MP6 includes contributions from Shaun Andrews, Joen Asmussen, Mel Choyce, Kelly Dwan, Ben Dunkle, Helen Hou-Sandí, Till Krüss, and myself.

Several of the team will be meeting up in-person and via Skype tomorrow to work on readying MP6 for its merge into core. Since this may be the last regular update to MP6 the plugin, now’s a good time to thank all of you who helped test and provide feedback on MP6 along the way, to everyone who’s contributed designs or code to MP6, and to @matt for jumpstarting the effort. We’ve come quite a way since March, and we couldn’t have done it without the mountain of help we received. So, thank you!

#mp6

MP6 2.1.1

Holla!

We just released this minor point release to have you look at a beautiful WP 3.7 update page, just in time for it’s release. Besides that, this release also includes:

  • Major overhaul of the widgets screen (again)
  • Better styling of un-approved comments
  • Improved highlight color for pointers
  • Several RTL fixes

…and more. Have a look at the full changelog.

MP6 2.1.1 includes contributions from Joen Asmussen, Kelly Dwan, Shaun Andrews and myself.

As always, thanks to everyone who tested, suggested and reported. Keep the feedback coming!

The next weekly IRC meeting in #wordpress-ui will be on Tuesday, October 22, 2013 02:00 UTC+8.

#mp6

MP6 2.1

Been a while since last tagged release, but it’s not been quiet on the MP6 dev front. Major new items aside from a plethora of bugfixes include:

  • A bunch of new dashicons
  • A spiffy new widgets page by Shaun Andrews from his Widgets project
  • Improvements to customizer, color schemes, menus section and much more
  • New color scheme, Midnight!

You can also peruse the full changelog, and of course get the plugin at the MP6 plugin page.

MP6 2.1 includes contributions from Till Krüss, Mel Choyce, Ben Dunkle, Kelly Dwan, Shaun Andrews, Payton Swick, Matt Thomas, Helen Hou-Sandi, Dave Whitley, Kate Whitley, and myself.

Big thanks to the contributors, bug reporters, testers, moral supporters and givers of ideas and suggestions! Keep it coming.

The next weekly open meeting in #wordpress-ui will be Monday, October 14 at 18:00 UTC.

#mp6

MP6 Color Schemes

Hi there, WordPress community.

The MP6 team has been working on adding color schemes in the past couple weeks. Now, we’d like to get your input about which color schemes you want to see make it into the core plugin. Please check out the schemes and let us know which color schemes you would use:

Which of these MP6 color schemes would you use?

We’re also taking suggestions for color scheme names.

#3-8, #mp6

MP6 2.0

Heya! It’s been again over a month since the last MP6 release and this version comes with some new goodness.

General

As usual, we made some UI improvements and fixed a few bugs. Shadows are now fewer and consistent, buttons are flatter, font sizes are more consistent, metaboxes are simpler and lighter and a couple of other improvements. You can see the full changelog here →

Icons

We decided on recommendations for custom icons in plugins/themes, you can read more about this and have a look at some examples are in this GitHub repository. Be default MP6 does now hide all images in admin menu item and replaces them with a generic default icon.

Method C, using a SVG as CSS background image, works thanks to the new JavaScript SVG painter, which re-colors base64 encoded SVGs on the fly. It might not catch all SVG color markup right away, if that’s the case, please post a link your SVG file in the comments.

Color Schemes

We bundled this release with 4 additional admin color schemes. You can choose them under “Your Profile”. There are probably more color schemes to come.

MP6 color schemes as made with SASS, because LESS didn’t handle default variable values. A color scheme can be as simple as this, or it could define a few extra colors for better readability. If you’re making your own color scheme, make sure you include MP6’s core color scheme file.

Another Note

If you want to check if MP6 is activated, use the MP6 PHP constant. In CSS use mp6 body class, not admin-color-mp6, I’m looking at you Jetpack.

MP6 2.0 includes contributions from Joen Asmussen, Mel Choyce, Ben Dunkle, Kelly Dwan and myself.

And as always, thanks to those of you who tested, reported bugs and contributed ideas and suggestions! Keep them coming!

The next weekly open meeting in #wordpress-ui will be Monday, September 2 at 18:00 UTC.

#icons, #mp6, #svn

I will be interim leading MP6 in a…

I will be interim-leading MP6 in a mostly-project management capacity while @iammattthomas is on sabbatical. We’ll resume weekly open meetings in #wordpress-ui next week, Monday, August 26 at 18:00 UTC.

#3-8, #mp6

Heya It’s been over a month since the…

Heya! It’s been over a month since the release of MP6 1.8 and we’ve been busy making MP6 better and better. We had 98 commits since version 1.8, containing so many changes, it’s too much to list each one of them, but here’s a summary:

  • 3.6 Compatibility
  • TinyMCE Advanced Compatibility
  • Added color schemes component, including a blue theme.
  • Improved font sizes, margins, paddings, hover states, animations and shadows across the entire admin UI.
  • Improved responsiveness, especially of the admin-bar and editor.
  • MP6-ified TinyMCE modals.
  • Overall RTL improvements.

The experimental color schemes component is by default disabled. If you’d like to help us test the blue color scheme, define define( 'MP6_COLOR_SCHEME', 'blue' ); in your wp-config.php and enable the component by un-commenting line 24 in plugins/mp6/mp6.php… or make your own color scheme and post it below!

MP6 1.9 includes contributions from Joen Asmussen, Ben Dunkle, Kelly Dwan and myself.

Thanks to everyone who’s reported bugs and contributed ideas and suggestions, it helps us a lot! Keep them coming…

#mp6

MP6 feedback just to start a new thread…

MP6 feedback: just to start a new thread people can leave comments on, drop one here if you have any MP6 bugs or feedback you’d like to share.

#mp6

Hello all We’re here with the final regularly…

Hello all! We’re here with the final regularly scheduled weekly installment of MP6, version 1.5. As we’re beginning to wrap up our visual redesign, we’ll continue to release updates to MP6 when necessary, but will no longer be announcing them every Friday. We’ll miss you guys. 🙂

New this week:

  • We’ve begun merging colors-mp6.css and wp-admin.css. This is just about done, but we need to do a bit more testing before we flip the switch and use the new CSS files for everyone. When we’re done, this will allow for much cleaner future potential patches/merges into Core.
  • Load Open Sans on the login screen.
  • RTL: Fix comment bubble tail and positions, view switch margins.

This week includes contributions from Michael Erlewine (mitcho), Till Krüss, and myself.

You can continue leaving comments here with feedback for us. And we’ll issue new posts when there’s something big new for you guys to take a look at (we’re already noodling on some larger core design issues we’re looking forward to sharing with you). As always, thanks for all your helpful feedback in advance.

#icons, #mp6, #plugins, #svg