Gutenberg Phase 2 Friday Design Update #6

It’s the middle of February now and there’s been great discussion around how Gutenberg might impact some of the WordPress major releases. Because Gutenberg updates often affect the user interface, it’s important to consider these as major updates. Anyways, let’s get down to design!

Widgets to blocks

All core widgets are now converted to blocks! Please take a moment to stop and celebrate this achievement. A big round of THANKS goes out to everyone involved. Design Team, Core Team, Accessibility Team, other contributors, everyone! Great work.

The Classic Widget Block is still underway. This block will display widgets that haven’t been converted yet. Any non-core widgets will be accessed in Gutenberg by being contained in this block.

Other widget blocks are being improved upon: Archives [1464], Recent Comments [1792], Recent Posts [1594].

Navigation block

This complex block is HUGE. So many moving parts, interactions, etc. Distilling it down into key issues has been helping on GitHub. Feedback is coming in, providing different perspectives and thinking. This block is still about a month+ out.

Tightening up

The discussion about the Cover block including nested blocks is laying important groundwork for a Section block.

Accessibility

Some a11y discussion around the block specific responsive controls has been happening. It was mentioned in this week’s a11y chat as well.


Thanks for reading, staying informed, and contributing anywhere you can!

#design, #gutenberg-weekly, #phase-2

Gutenberg Phase 2 Friday Design Update #5

So many good things! One of my favorite pieces shared by @youknowriad is; there were 52 contributors to Gutenberg 5.0 – the latest release!

Widgets to blocks

@melchoyce recently posted an update on these. But there’s even a few updates since that was written! For instance, the Search block is now merged. It’s moving fast. After talking with Riad, it looks like an estimated 4 weeks until they’re all merged in along with the addition of the Classic Widget block.

Tag Cloud – What do you think if the Tag Cloud block got renamed “Word Cloud” so that it’s clear it doesn’t only include tags? The option to switch between tags and categories would still exist, maybe in the block inspector.

The development of the widget screen for the inclusion of blocks is currently on hold until this PR is completed.

Navigation block

The Navigation block has a new issue with the hopes of refocusing and a deeper understanding of the problems people experience when building menus. Because this is such a complex block, there’s going to be really good discussions, so please get involved.

Tightening up

These small incremental changes are adding the polish to Gutenberg making it a real joy to use. One such example is the Focal point picker added to the Cover block. Speaking of the Cover block, there’s conversations about nesting blocks within it for more options to display over the image. Buttons? Did anyone say buttons?

Animations are also getting added bringing an emotional delight to the interface.

The color picker for blocks is getting some much needed clarity.

There’s also been some great headway on notifications in the editor which just need a code review before getting merged.

Research

Make sure to get caught up on the research posts that have been shared on the make/design blog. These reports are informing the design decisions going forward, so it’s important to have a firm understanding of what’s being shared. The latest one from @tinkerbelly concerns the segment of Site-builders.

Accessibility

A new issue has been opened to address the keyboard navigation of Gutenberg. It’s been a long time coming!


Thanks for reading, staying informed, and contributing anywhere you can!

#design, #gutenberg-weekly, #phase-2

Meeting notes for February 6, 2018

This week, the weekly #design meeting was lead by @joshuawold. You can read the full transcript in our Slack-channel, or jump straight to the topics that were discussed by clicking the headings below.

Gutenberg update Phase 2

@mapk gives a quick update on Gutenberg Phase 2. He thanks the accessibilty team for being very helpful with design work being done. There’s a new ticket that directly explores the A11y (Accessibility) tabbing issues in Gutenberg.

Also, the navigation block just got a recent Github issue created to gather focus again. If you happen to have some thoughts on that, please join the discussion in the ticket by adding your comment.

Calls for design

There are two calls for design that need help from awesome designers. If you are looking into something tangible to contribute on as a designer, please check out the following calls:

  • Uniform Search Form Display/Experience – this ticket addresses the problem with  five different search types existing across the WP-admin.
  • Redesign mobile – check this ticket if you’re passionate about working with WordPress from your mobile phone. These pages could use some love and design feedback, first wireframes/sketches are in the ticket.

Dashicons

The basis for this discussion is issue 9647 of block icons SVGs not being reusable.

In his comment on issue 9647 Joen says:

For now we have used Dashicons because it’s the WordPress icon set. But this has not scaled tremendously well, and the icons are small and designed for older screens and interfaces than we use widely today. So we eventually adopted the Material icon set for block library icons, to make it trivial for plugin developers to quickly and easily pick a unique and legible icon that fits their block.

There are constant requests for new icons on Github, some more critical than others. But currently, it’s really hard to integrate new icons in the Dashicons icon font.

In the meeting, there’s a brief exploration on where this could go, and moving towards another open source icon set is suggested. @empireoflight, one of the prominent dashicon builders, says he used to think we could build an icon library for WordPress. But unfortunately, it’s just not happening.

A brief discussion follows on the impact of having multiple icon sets. But it’s good to know people are open to the idea of working with another open source icon set like Material Icons, and have an extended set of specific WP icons on top.

Everyone agrees this will overhaul the admin and will have a big impact. Knowing the logistics, breaking these into steps and setting a timeline would help getting an overview on what’s involved.

@mapk suggests starting with getting buy in other teams first and find people to help on the project after that.

@empireoflight will draft a post on make/design as a starting point for the discussion with other teams.

We’re looking forward on your thoughts on moving WordPress icons forward. Pleas feel free to comment on these notes, or share your ideas in the make/design post dedicated to this topic (which will appear soon on this page for you to discover. You can also subscribe to the design blog in the sidebar on make/design to get instant notifications once the post is there for you to read).

#meeting-notes

Gutenberg Phase 2 Friday Design Update #4

Are you kidding me? It’s already February! Gutenberg has been rolling out with consistent improvements throughout January and will continue to do so this month too. Let’s look at what was done this last week.

Widgets to blocks

Really good discussion going on especially in regards to a11y. There’ve been some a11y concerns that need to be addressed which were brought up in relation to this screen, but really effect Gutenberg as a whole. The larger a11y issues will be addressed in another issue in Github to help keep the design of the widget screen moving forward.

Navigation block

Work is happening here and getting ready to be shared outward for feedback. So stay tuned to the issue!

Tightening up

  • Microinteractions (little animations) are starting to be incorporated into Gutenberg. Take a look at some work being done by @joen.
  • Added a style preview issue to the tightening up portion of Phase 2.

Block specific responsive controls

This issue is really narrowing down on a solution now.

Research

The first part of the WordPress research has been posted by @tinkerbelly. This research is being used to help further any development in Gutenberg. All contributors should really have a read through.

Project Boards

In Github, the project boards are used to understand the status of issues from a high level view. @karmatosed recently went through and combined the Phase 2 Design project board into the Phase 2 project board. This will help keep us unified. There’s also been an update to how these project boards are used; there are columns based on each of the focus areas for Phase 2.


Thanks for reading, staying informed, and contributing anywhere you can!

#design, #gutenberg-weekly, #phase-2

Design meeting agenda for Wednesday 30th January

This week’s meeting will be at 19:00 UTC tomorrow in Slack #design.

Here are the suggested topics:

  • Housekeeping:
    • Where should research go? Post here to collect opinions.
  • Calls for design:
  • Updates
    • Gutenberg phase two
    • PHP upgrade
    • Site Health:
    • Showcase
    • Any other updates?
  • Topics:
    • Dashicons/Material icons discussion around Gutenberg.
  • Open floor

If there is anything you would like to see added to the agenda, please leave a comment.

#meeting-agenda

Gutenberg Phase 2 Friday Design Update #3

I’ve been informed by some colleagues that this week has been super cold in areas around the globe. I live in Southern California and haven’t experienced it, but I truly hope you all are staying warm. The GitHub repo for Gutenberg, on the other hand, is on fire (in a good way)! 😉

Widgets to blocks

There’s a lot of development movement happening right now.

In addition, the integration of the widget-blocks in the wp-admin are being figured out too. Right now, it looks like staying inline with the mockups provided during the State of the Word might be the path to take (with some minor improvements of course). There’s also a desire to implement better a11y while we’re working on this as well.

Navigation block

This is a big one. While exploring the block itself, there’s been conversations in GitHub about how navigation is built. Is the block a simple one that just allows the user to select which menu they want to use? Or is the block where the whole menu is built? This decision effects the implementation of navigation building in Gutenberg going forward. One thing we know for sure is that everything is becoming a block in Phase 2, so these decisions are crucial right now. If you have some thoughts, please share them on GitHub.

Tightening up

It’s amazing to see all the areas in Gutenberg that are getting tightened up! Gutenberg 4.9 just released with a couple of beautiful design improvements: table striping and color swatch indicator. More design improvements are happening daily. Take a look at all the things.

Documentation

Some might say that Documentation isn’t really design, so why’s it here? But really, documentation should be a community wide endeavor. There are weekly edits being completed to make sure the future of Gutenberg has a solid foundation. Here’s what’s been done… and what’s being worked on. These are fairly simple textual explanations of Gutenberg. If anyone is looking to contribute with something non-code related, this is a great way to begin.

Communication consistency is key to this project. That’s why these weekly design updates are going out every Friday. Thanks for reading, staying informed, and contributing anywhere you can!

#design, #gutenberg-weekly, #phase-2

Call for Design: PHP Upgrade Page

What is it?

As we all know that the PHP 5.5, 5.6 and 7.0 has hit the EOL (End of Life) and is no longer actively supported, PHP 7.2 and 7.3 are now actively supported. The #core-php team is working on a page that spreads awareness about upgrading the server to supported PHP versions for the purpose of performance and security.

What is the current status?

Work has been going on for a while, the #core-php team is working on this and they have built a page right now which can be viewed here.

There were a few designs that were created back in May 2018 and will have to be reworked on to accomodate the new fresh content. The page has a chunk at the top which gives a clear message if the server needs to be upgraded or not.

What is to be improved?

The current design is single column and does not have the ‘Table of Contents’ like the one implemented in the live page. There also needs to be a more design-wise seamless integration of the chunk at the top which gives a clear message if the server needs to be upgraded or not.

What is the plan?

This page is currently live but needs improvement in terms of how it educates the user by clearly telling that the upgrade is required. @flixos90 and myself are working on this page. Contributions and thoughts are welcome and you can reach out to us or #design channel to discuss this.

#core-php

Design meeting agenda for Wednesday 23rd January

This week’s meeting will be at 19:00 UTC tomorrow in Slack #design.

Here are the suggested topics:

  • Updates from projects in progress:
    • Gutenberg design update.
    • Trello board review of all in progress cards.
  • Open floor.

If there is anything you would like to see added to the agenda, please leave a comment.

#meeting-agenda

Gutenberg Phase 2 Friday Design Update #2

January is halfway done and Gutenberg issues are gaining traction and feedback from a variety of people. Thanks to everyone for sharing your thoughts, and opinions!

Widgets to blocks

There’s been several concerns about widgets from people in the slack feeds, so thought to address it here briefly. While Gutenberg is converting all core widgets to blocks, they won’t be going away completely quite yet. 😉 There is a “Classic Widget” block being built to support the widgets that haven’t yet converted to blocks. If you’re looking to get involved, please check out the GitHub project board.

In relation to this, the widgets screen in wp-admin will be changing over to blocks. There’s concern around this for good reason. But ultimately as everything becomes a block, this paradigm shift needs to be communicated in smaller steps to help all users make the transition.

Navigation block

The navigation block and the interface for creating navigation menus is being discussed with some innovative concepts. What if the “Pages” screen was where you built your nav keeping the nav block simple? Or should the nav block be where you create the entire menu? Share ideas in the ticket!

Tightening up

If neither the widgets blocks, nor nav blocks are your thing, there’s a whole list of Gutenberg related issues that need tightening up. As mentioned in the State of the Word, “tightening up” is a focus for Phase 2. There’s a lot that needs work! Come help.

Research work

Yep, research is still ongoing. Some themes are beginning to emerge as they work through the data. Help out in the #research channel in slack.

There’s also conversation around how to present the data, and where to store it; a site, a PDF, Google Slides?

Share your work

Many like to post their thoughts and explorations on their own blogs. Unfortunately this isn’t always highly visible. Well there’s a whole project board dedicated to research with a column specific to “explorations.” Give a shout out in either the #design or #research channels in slack to get your work added there. Every little bit helps inform decisions going forward.

#gutenberg-weekly, #phase-2

Call for design: Site Health Check project

What is it?

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 plugin into something really awesome where (parts of) it can be merged into core. The main issue is that it needs a UX and UI 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 Github 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 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.

There is also a section in the Handbook that describes how to use the Site Health Check Plugin: https://make.wordpress.org/support/handbook/appendix/troubleshooting-using-the-health-check/

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:

I’ll try to keep you updated on our progress roughly every week here on the design blog.

#design, #plugins, #site-health-check, #ux