Matt (Thomas) Miklic 12:04 am on May 4, 2013
Tags: mp6 ( 24 )

MP6 1.0

Here we are in the tenth week of the MP6 experiment, and with it comes our tenth release, 1.0. And while the version number is simply the one that comes after 0.9, it’s also beginning to look nearly complete. We’ve worked our way through our primary to-do list, concentrating now on responsive issues and coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. issues for which we’ll be submitting patches. Here’s what’s new this week.

Restyled toolbar submenus with a dark background that matches menubar submenus.
Made all the various delete/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. links the same color red, and removed inconsistent backgrounds/borders.
Improved the alignment of notices within thickbox containers.
Added right padding to top level adminmenu links to leave room for the current arrow indicator.
Improved the appearance of the file upload input.
Improved the appearance of the comment moderation confirmation screen.
Removed the blue hover state from disabled page navigation links.
Removed the wayward borders within the .widefat table.
Fixed a z-index issue causing toggle arrows to overlap expanded widgets on the widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. management page.
Submenu and current item arrows in the .folded and .auto-fold states are now the same size.
Corrected the alignment of the New link in toolbar.
The annoying bug where the W menu opens by default on every page load has been fixed.
General coding standards improvements throughout.
Updated the Dashicons icon font.
Mobile: Improved theme updates table styling.
Mobile: Fixed toolbar quicklinks line height.
Mobile: Improved plugins list styling.
Mobile: Menu management page improvements.
Mobile: Allow the HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. editor buttons to wrap to two lines on small screens.
Mobile: Improved styling of the link manager on small screens.
Mobile: Adjusted height of select elements to match button height.
Mobile: Bigger touch targets in the file editor’s file list; larger textarea for the editor.
Mobile: Improved styling for post format options on small screens.
Mobile: Fixed TinyMCE split buttons and list boxes.
RTL: Added RTL tests to /branches/.
RTL: Fixed metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress./post box widget positioning.
RTL: Fixed 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/theme editor submit button position.
RTL: Fixed dashboard comment widget avatarAvatar An avatar is an image or illustration that specifically refers to a character that represents an online user. It’s usually a square box that appears next to the user’s name. position.

Whew! This week’s iteration includes contributions from Joen Asmussen, Mel Choyce, Ben Dunkle, Michael Erlewine (mitcho), Till Krüss, and myself.

We’ll be in #wordpress-ui to discuss your feedback on Monday, May 6 at 18:00 UTC. Thanks again as always to everyone who’s contributed your feedback so far. As always, please keep it coming — we’re interested in any suggestions, bug reports, ideas, or patches you may have. If you’ve reported an issue that we haven’t addressed yet, it won’t hurt to mention it again (with a screenshot if possible) at this point.

#mp6

Hassan 11:30 am on May 4, 2013

Great progress as always. Here’s what I have for you today:

1. Some delete/remove links still sport the old red background and/or underline on hover, e.g. Delete link on any active widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. and Delete link on themes page. That’s probably because there is no global “delete” style shared throughout wp-admin?
2. the tables in Plugins > Add New > Featured, or Popular, or Search Results etc. have a plain white background with no different grey and white background for even and odd table rows.
3. The new style for Upload Files and Media Library tabs in the media modal is much better now, however, there is still that soon-to-be-dead “burnt orange” color when hovering over the tabs. Another thing is that this new style is broken if you Add Media from QuickPress > Screenshot. Also, why not make them consistent with page tabs style? i.e. grey background on inactive tab(s).
4. I see that icons in the toolbar now also turn blue on hover (e.g. comments icon), but when in the frontend with the toolbar visible, the search icon which opens up the search field does not have a hover effect; it’s dull.
5. So, because Firefox does not (yet?) support customizing checkboxes/radios with CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. does that mean no workaround (e.g. JS) will be implemented?
6. The issue of disappearing submenu in admin menu when moving the mouse near the arrow (reported by me here, point #2) is still there, I see. So, here you go, “it won’t hurt to mention it again” 🙂
7. Are you planning to implement different border colors for the notification message class `.updated` (e.g. red for failed/unsuccessful)? Or have you settled on just making it green regardless?
8. In IE10, if I have a blinking text indicator in a field (e.g. Enter title here when adding new post), and I hover with the mouse over a side menu that has a submenu, this blinking text indicator appears on top of the submenu. This is only happening in IE. Screenshot.
9. IE10 again, the numbers inside number fields look wonky but they revert to good-looking state as soon as you click inside them. Screenshot.
10. I think this is probably outside the scope of MP6 since it would require markup modifications, but can we please address the placement of those Help and Screen Options panels when the new design is out? They totally look like they don’t belong to wp-admin, let alone the fact that many users can’t see them at all.
11. Hey, since we’re doing spring cleaning, let’s update the default grey loading spinner image! I never liked it anyway.
12. Hovering over the grey comment icon in post listings table turns the icon’s color into blue, but the “tail” of the comment bubble is orange (!). Screenshot.
13. Can we get rid of the default disabled scrollbars in textareas in IE? Screenshot. I hear `overflow: auto;` can do the trick 😉
14. As a result of the increased font size, the Edit link in publish metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. box appears in a separate line when the date is long. Screenshot.
15. I’m not sure about the new icon for “Status” in publish meta box. What is it anyway?? Since it’s thinner than the eye and calendar icons, it looks like it is not aligned correctly : /
16. Yep, TinyMCE icons also need to follow the new “great flattening” movement. They’re separate as TinyMCE is a standalone 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, I know.. but still.
17. I find it a bit confusing that the Unapprove, Spam, and 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. action links in comments table turn blue upon hover even though their original colors are orange and red.
18. In the theme 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. there is a redundant blank row above the Close and Saved buttons at the top. Screenshot.
19. In the Widgets area when Enable accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) mode is selected, the Cancel button displays an underline on the text when you hover over it– that shouldn’t be. Screenshot.
20. Done with my rant! I love WordPress 😀
- Joen Asmussen 10:35 am on May 10, 2013
  
  This is an impressive laundry list, thank you!
  
  I’ve adressed a couple of your issues.
  
  1+2+10+11: Keeping in mind MP6 is just 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 for now, some changes are best left until an eventual coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. merge happens. Particularly changes that are best done after core changes have been made. The plugin list, for example, lacks an “alternate” CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. class, and your idea of a global “delete” style is a good one. I invite you to consider creating one or a couple of tracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. tickets to improve the markup here and there.
  
  5: I don’t think we’ll work around Firefox inability to style checkboxes for the plugin phase, but it’s certainly worth bringing up the discussion when MP6 merges with core.
  
  6: Yep, that’s certainly not idea. It’s related, I suspect, to the left pointing arrow that takes focus for a short time. Like MT said, though, there’s a core ticket to improve the overall hover/flyout mechanism, which should fix this.
  
  7: We really wanted to! But distinguishing between types of notification messages require CSS classes that currentlhy aren’t there. This needs a core change.
  
  8: Wow, that is wonky. I haven’t been able to fix this. The z-index behaves as it should, so why the caret stays on top I do not understand. So I’m inclined to call this an IE bug.
  
  9: Higgs on a cracker. This is an issue only in the metro version of IE10, and even there the page requires only a reload to “fix” itself. I suspect it’s related to the fact that those boxes are HTML5 “step” boxes. Modern browsers show a little up/down arrow to allow you to increment or decrement the number. Again inclined to call this an IE bug.
  
  10: We’ve actually been through a fair stack of mockups trying to address the placement of these, but we arrived at your conclusion as well, out of scope for mp6. In order to give these tabs the proper redesign they deserve, there’s markup related to notifications to change as well!
  
  12: Great catch, fixed!
  
  13: Sure, let’s try that.
  
  16: I think you’ll be pleasantly surprised later today.
  
  17: Yep. Fixed.
mindctrl 1:33 pm on May 4, 2013

Thanks for the update. It looks like you have the date wrong for the next chat.
- Matt Thomas 2:45 pm on May 4, 2013
  
  Whoops, thanks; I’ve corrected that in the post.
Manny Fleurmond 1:49 pm on May 4, 2013

I sorta liked the admin bar menus being the lighter grey; made a nice contrast with the bar itself.
yoramzara 5:10 pm on May 4, 2013

I am using RTL (Hebrew). The desktop version looks great. The mobile version is not usable. I recommend using https://wordpress.org/extend/plugins/juiz-smart-mobile-admin/
It works better
Marko Heijnen 10:46 pm on May 5, 2013

Open sans should only be loaded when user is logged in. So the code need to be wrapped in if( is_user_logged_in() ) {}.

Also curious what the state is of broken menu mentioned here: https://make.wordpress.org/ui/2013/03/30/another-friday-another-iteration-of-the-plugin-that/#comment-22843
Nick Halsey 1:05 am on May 6, 2013
It’s looking good overall, but a couple of issues:
- No way to access the admin menu on Windows Phone 7/IE 9 mobile (rendering WordPress completely unusable). It’s fine on WP8.
- Dashicons don’t work on Windows Phone 7 (see also https://core.trac.wordpress.org/ticket/23985). May be tolerable if you could at least access the admin menu.
- Loving the responsiveness, but it makes a poor assumption that smaller viewport == touch (by making stuff bigger). This leads to weird UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. when resizing windows; for example, snapping windows to half-screen in Window 7/8, when the admin bar get bigger and takes up more of the reduced screen real estate for no apparent reason. It also doesn’t account for the increasing emergence of touch screens on laptops and desktops with bigger viewports. Maybe input-type detection of some sort could better inform touch-target-related design decisions than viewport size?
- Admin menu can display incorrectly in smaller viewports when toggling the menu from collapsed to expanded at medium viewports. For example, if you resize your window to a viewport where the admin menu is automatically collapsed (but not yet hidden fully), then expand (and also if you re-collapse) it, then resize your window past the breakpoint where the menu is fully hidden, it gets all messed up.
- Depending on a variety of factors such as number of top-level menu items, screen resolution, etc., it’s possible to get stuck with a collapsed admin menu, with the expand button and some menu items stuck behind the browser’s on-screen back button in IE 10 Immersive (metro). I don’t think there’s anything we can do about it, but it can be very annoying. Issue is probably present without MP6, but is related.
- Nick Halsey 11:51 pm on May 7, 2013
  
  It turns out that issue 4 is setting a setting somewhere that makes the menu display (poorly) on WP7. So they may be related.
  
  Also, on the posts index page the table rows are super tall on WP7. There’re a bunch of other miscellaneous issues but I’d only worry about the significant ones since WP7 is slowly on the way out. Keep in mind that IE9 mobile is the devices’ ONLY allowed browser, though, so lack of support for the browser excludes users of the device from using WordPress there (except for the feature-limited app).
Mr Papa 4:14 pm on May 6, 2013

hey Matt, looks like you are hooking into ‘init’ to load the Google Open Sans font… can you change that to admin_init so it does not also get loaded on the front end??
- Marko Heijnen 9:20 am on May 7, 2013
  
  It does need to load on the front end because of the toolbar but not needed when you are logged in. See my comment above.
  - Mr Papa 9:18 pm on May 9, 2013
    
    if you arent using the admin bar would be another case not to load even if not logged in…
- Matt Thomas 1:38 pm on May 9, 2013
  
  I’ll have a developer look at this.
Jose Castaneda 9:26 pm on May 8, 2013

Looking good so far will have to test with mobile ( iPhone 5 ) tomorrow.
Shiva Poudel 9:37 am on May 9, 2013

Hey authors how can I use custom dashicons or others font after using this MP6 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….
- Shiva Poudel 10:02 am on May 9, 2013
  
  http://imgur.com/a/BlfsO not working please review it
  - Matt Thomas 1:38 pm on May 9, 2013
    
    That’s a regression in our icon font, and will be fixed in the next release.
Lorelle 6:03 pm on May 9, 2013

My college class is using 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. test on our sites and have found 2 issues.

Firefox versions 17-19 are having trouble with the Edit Post > Publish > Visibility button. When clicked to access Public, Private, and Password Protected, the user is jumped down the web page and the Visibility feature does not open. They have to switch to Chrome to use that feature.

The Autosave notification pops up on when editing posts on the first visit in hours, days, weeks, and months when no change to the page has been made. This happens across a variety of browsers and operating systems and remains reproducible over the past two weeks.

Is there a specific place for WordPress.comWordPress.com An online implementation of WordPress code that lets you immediately access a new WordPress environment to publish your content. WordPress.com is a private company owned by Automattic that hosts the largest multisite in the world. This is arguably the best place to start blogging if you have never touched WordPress before. https://wordpress.com/ users to report issues on this?

Thanks.
- Matt Thomas 4:34 pm on May 10, 2013
  
  Hi Lorelle — I wasn’t able to reproduce the first issue you mentioned using Firefox 17, 18, or 19 on my Mac. Here’s a video of me trying to reproduce: http://f.cl.ly/items/0k2w3c0c1J0J3P0M2r3z/Untitled.mov Could you try that with MP6 (and any other plugins) disabled to see if it makes a difference?
  
  I haven’t experienced any issues with autosave either in developing MP6 so far. There’s no official support for MP6 since it’s still an opt-in test, but if you can provide more details on your setup here we’ll keep trying to reproduce the issues.
rvlawrence 9:18 pm on May 9, 2013

Is this the new admin theme for the next version of WordPress? When is it coming out? Or is it just 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? This isn’t clear.
- Ipstenu (Mika Epstein) 11:03 pm on May 9, 2013
  
  It’s 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 for now. It may (hope) end up in 3.7 🙂
  - rvlawrence 12:42 am on May 10, 2013
    
    Oh wow, great to hear! Is this 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 OK to use on a live site now? Looks very fresh and modern. WordPress needs this.
    - Matt Thomas 12:53 am on May 10, 2013
      
      Many people are using it on live sites, but your mileage may vary and things may still break at unexpected moments while we continue hammering on it. 🙂

Comments are closed.

The Design Team provides design for the WordPress project.

More information

MP6 1.0

The Design Team provides design for the WordPress project.

More information

Share this: