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 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 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 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. 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 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. 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 PHPPHP PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. http://php.net/manual/en/intro-whatis.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 coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. Since this may be the last regular update to MP6 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, 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 releaseMinor Release A set of releases or versions having the same minor version number may be collectively referred to as .x , for example version 5.2.x to refer to versions 5.2, 5.2.1, 5.2.3, and all other versions in the 5.2 (five dot two) branch of that software. Minor Releases often make improvements to existing features and functionality. to have you look at a beautiful WP 3.7 update page, just in time for it’s releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software.. 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 releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software., 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 customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings., color schemes, menus section and much more
  • New color scheme, Midnight!

You can also peruse the full changelog, and of course get 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 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 coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. 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. 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 releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software. and this version comes with some new goodness.

General

As usual, we made some 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. 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 CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. background image, works thanks to the new JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. 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 PHPPHP PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. http://php.net/manual/en/intro-whatis.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 releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software. 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 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..
  • 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 releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software. 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 CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. files for everyone. When we’re done, this will allow for much cleaner future potential patches/merges into CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress..
  • 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