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.
GutenbergGutenbergThe Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ needs to provide a way for users to discover and install new third-party blocks without ever leaving the editor. We are looking for a volunteer to lead the design part of this project.
Background
Currently, new Gutenberg blocks can be provided by plugins, which often register many blocks, and which are managed from outside the editor. The Block Directory proposal outlines a new type of simple blockBlockBlock is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.-based pluginPluginA 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 that is intended to be seamlessly installed from within Gutenberg itself. This is one of the 9 priorities in the 2019 roadmap.
The WordPress.orgWordPress.orgThe community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/APIAPIAn API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. will provide an endpoint for searching for blocks by name and description, and return metadata similar to that of plugins. Gutenberg’s Inserter could use that endpoint to also show relevant block plugins that are available to install, with a button and process for seamless installation. Some early sketches of ideas have been made, such as these:
(Note that these are all merely explorations and visual ideas, not set in stone)
It will be important to give users enough information about available blocks in order to make an informed decision – which might include the author, review ratings, and so on – without overloading them with too much information.
One key feature that might help improve the user experience is to allow users to insert a preview of the block into their document first, before installing the plugin, and then use the preview to make their decision about whether or not to install it.
Decisions to be made
As of now, there are some ideas sketched out and some general requirements as outlined above. There is work already on the block management feature, which is tangentially related. But there are many decisions yet to be made. Work needs to begin soon if this is to be ready in time for the WordPress 5.3 release later this year.
Some of the main design issues that need to be resolved include:
How and where to show search results within the Inserter
How to give users enough detail to make an informed decision about which block to install
What the Install process would look like
How to display a preview placeholder
How to manage installation requests by non-admin users
Get Involved
We are looking for a volunteer designer who can manage this project and commit enough time to see it through to completion in time for the 5.3 release. Responsibilities would include:
Solving the experience and designing the interface
Collaborating with other designers, soliciting feedback and reviewing submissions
Creating issues, wireframes, posts, and designs
Working with Gutenberg and MetaMetaMeta 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. developers
Organising and running user tests
Iterating the design based on feedback and results
Meeting the deadlines to include the necessary changes in the WP 5.3 release
Given the nature of the work and the time frame, we expect that this is a project that will need a minimum commitment of at least a day a week, and possibly considerably more at times.
If you think you might be the right person for the task, please make yourself known to the Design Team during the weekly meeting, Wednesday 18:00 UTC in #design. Or alternatively, leave a comment below.
Some of you may have heard of the Health Check plugin – It’s a very useful tool that shows people how their website is doing technically. It displays all the relevant technical information about a WordPress installation and offers tips on what to improve.
What’s the current status?
The intention is to evolve this pluginPluginA 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 into something really awesome where (parts of) it can be merged into coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress.. The main issue is that it needs a UXUXUX 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. and UIUIUI 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. overhaul. Right now the plugin mostly consists of grey pages with lots of words and numbers on them, some of which are SO long that I had to crop the screenshot by half to get it to upload:
(Click to enlarge)
What do we want to improve?
There are lots of good tools there, but we need to make sure people know how to use them, and why they should. So even before making any designs, we should think about the UX of the plugin as a whole. Questions like:
Does its structure make sense?
What should the onboarding be like?
How can we make it fun to interact with this thing?
What’s the plan?
The improved Site Health Check is aiming to be ready for WordPress 5.2, which is roughly estimated to come out in Q2 of 2019. That’s not loads of time, and we are a very small team at the moment (@clorith, @miss_jwo and myself), so we’re looking for any input on the above questions.
I’ve started a central issue on the plugin’s GithubGitHubGitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ repo to discuss the UX, any contributions are welcome there: https://github.com/WordPress/health-check/issues/227
I’m hoping to work out new layouts and flows in the next few weeks, and then start designing the final look at the end of February at the latest. That’s around the same time 5.1 is slated to come out, and should give us enough time to implement everything.
Worth noting is that we want to try to apply the GutenbergGutenbergThe Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ style to this. It would be a nice test case of what WordPress’ intended new design direction will look like outside of the editor, and it matches nicely with previous design work done around this project.
How can I help?
Like I said, feel free to drop by the Github issue to help us come up with a great user flow. We have an opportunity to reshape the UX of this thing, so I want to get as many eyes on it as are willing and able. Sketches, thoughts, reference material to look at, it’s all good. I’ll be dropping more sketches there in the coming days, any feedback is welcomed.
You can download the current stable version of the plugin to try on your own WordPress site from here: https://wordpress.org/plugins/health-check. Note that that doesn’t include the new actionable traffic-light-based site status section you can see in the screenshots above. Of course, if you know what you’re doing you can compile a build from the develop branch on the repo to see the latest progress.
And at the link below you can find a comprehensive post about the research @miss_jwo did that led to this point, and the broader context of this plugin in the Site Health project:
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 CSSCSSCSS 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 CoreCoreCore 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.
Happy Friday, everybody. Here’s what’s new in MP6 this week. It was a short week for most of us, so we’ll keep the post similarly short.
Mobile: You can swipe right and left to open and close the menubar now, in addition to tapping the “hamburger” button in the top left.
Mobile: Implemented a fix for dropdowns not displaying full width; props to deanjrobinson for his advice here.
Mobile: Better treatment for post revisionsRevisionsThe WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision..
Mobile: Fixed multisiteMultisiteMultisite 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. theme list.
Mobile: Align theme/pluginPluginA 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 list checkboxes.
Mobile: Align theme/plugin list titles.
Mobile: Fixed frontend admin-bar.
Renamed toolbar.css to admin-bar.css for uniformity with coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress..
Added a changelog link to readme.txt.
Changed the minimum required WP version to 3.5, so 3.5 users will get update notifications for MP6.
This week’s iteration includes work by Joen Asmussen, Till Krüss, and myself.
If you missed it yesterday, be sure to check out our roundup of potential implementation recommendations for plugin authors who need to add a custom icon to the top-level menu. We appreciate any feedback you’ve got for us, so we can codify our recommendations for developers who’d like to add MP6-style icons to their plugins.
We’ll be back next Monday with office hours in #wordpress-ui on IRC, for anyone who would like to discuss their feedback with us. You’ll find us there 1800 UTC on June 3.
The MP6 team has been working on recommendations for plugin authors who add a top-level icon to the dashboard’s main menu. We’ve investigated a number of options, all of which have their own advantages and disadvantages. In this post, I’d like to share the options we’ve considered in the hopes of generating a larger discussion about what would be the best possible solution for WordPress and for plugin authors. An example of the two SVG methods is available at http://codepen.io/joen/pen/otdkK.
Method A: CSSCSSCSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site.-colored SVG icon
This method uses SVG (vector, infinitely scaleable) icons that are embedded inline in the HTMLHTMLHTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites.. Using this method, the icon is able to inherit the color of the admin and change depending on customizations chosen by the user (a high-contrast admin theme for vision-impaired users, for example).
Pros
Clean, retina, and infinitely zoomable.
Only a single icon file needs to be created, no need for 2x versions or separate hover/active states.
With colors being controlled by the admin CSS, they will always match the coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. set of icons, as well as any further customizations made by the user.
Cons
SVGs won’t render in IE8 and below. A number of possible solutions are discussed below.
For the CSS coloring to work, the SVG markup has to be cleaned up either manually or via an optimizer, adding some overhead to the creation.
The actual SVG markup has to be inline in the HTML. Hard to cache, requires core changes, potential security concerns.
Method B: CSS background-image SVG icon
This method also uses SVG icons for infinite scalability, but is applied via the CSS background-image property. Using this method, colors must be selected by the pluginPluginA 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 author, and a separate file must be created for each color.
Pros
Clean, retina, and infinitely zoomable.
No security concerns (that we are aware of) with SVGs when used as background images.
No WordPress core changes are necessary.
SVG files can be used directly from Illustrator, no editing of the SVG necessary.
Cons
SVGs won’t render in IE8 and below. A number of possible solutions are discussed below.
Multiple files must be created for normal, hover, and active states.
With colors being controlled by the plugin author, they won’t match any customizations the user has made (a high-contrast admin theme for vision-impaired users, for example). Plugin authors must be mindful to use the colors recommended in the MP6 style guide (and creative plugin authors could use any colors, gradients, or styles they want).
Method C: PNG icons (the “no-build option”)
Alternatively, plugin authors could specify new MP6-style icons in the PNG format, using the same technique they use currently.
Pros
Universal browser support.
No WordPress core changes are necessary.
No security concerns with PNG.
Cons
Multiple files must be created for normal, hover, and active states.
Two sets of icons must be created in both 1x and 2x versions for retina displays (and more, when higher-than-2x displays appear).
With colors being controlled by the plugin author, they won’t match any customizations the user has made (a high-contrast admin theme for vision-impaired users, for example). Plugin authors must be mindful to use the colors recommended in the MP6 style guide (and creative plugin authors could use any colors, gradients, or styles they want).
SVG Browser Support
Internet Explorer 8 and below have no native support for SVG files. Icons in the SVG format will not display in IE8 and below as a result.
Modernizr’s .no-svg class could be used to specify PNG fallbacks.
A number of polyfills attempt to add SVG support to these browsers (we haven’t tried them).
We could adopt a Google Apps-style browser support policy for MP6, supporting the current and previous major releaseMajor ReleaseA set of releases or versions having the same major version number may be collectively referred to as “X.Y” -- for example version 5.2.x to refer to versions 5.2, 5.2.1, and all other versions in the 5.2. (five dot two dot) branch of that software. Major Releases often are the introduction of new major features and functionality. of each browser. This would drop IE8, but make room for the many new clients we’re supporting: mobile versions of Chrome, Safari, Firefox, and IE; and the Android and Blackberry browsers. We don’t know what IE8 usage is like among WP users, though.
Conclusions
Method A, inline SVG, is the best option from the designer’s viewpoint — plugin authors include a single icon and all styling is provided automatically. MP6 makes dashboard customizations like a high-contrast admin theme for visually impaired users much simpler than the current admin design — and method A makes styling plugin icons as easy as the core set of dashicons. However, the technical hurdles and possible security concerns could be significant and we need more input on whether this method is practical.
Method B would be the next-best option — it would provide the primary benefit of using SVG icons (infinite scalability) without requiring changes to core. It would be significantly more difficult (though not impossible) for plugin icons to reflect user customizations, but would still require less manual work than creating separate sets of 1x and 2x PNG (method C).
We’re interested in any thoughts that you may have, especially if you’ve worked with SVG before and can offer insight on how we could implement method A successfully. If you know of any reason why any of these absolutely won’t work, feel free to rain on our parade. 🙂
You must be logged in to post a comment.