Gutenberg Phase 2 Friday Design Update #19

I hear some countries have a longer holiday this weekend, so I hope everyone enjoys their time off and gets the rest they need. In the meantime, Gutenberg keeps progressing.

Navigation block

@tinkerbelly posted an IA flow for the block with some ideas around existing menus and new menus. Take a look and leave some feedback.

Widgets to blocks

This is picking up again with lots of PRs coming together to explore different parts of the puzzle. If there’s a particular PR you’re interested in, please jump in with your thoughts.

Block Directory

@melchoyce posted a competitive analysis for the new Block Directory. Some great insight is gained there to help inform the design decisions on this. I get so excited when I hear about previewing blocks in the editor before installing them. I encourage everyone to contribute to that conversation.

Design explorations on the Block Directory will be posted today on Github.

Accessibility

The issues created from the accessibility audit are still moving forward. Many of the low hanging fruit have already been completed. The efforts are now being moved toward the larger and more impactful issues.

Next Friday’s accessibility chat in slack will save some time to discuss the keyboard navigation issue. This is a long standing issue that really requires some thought around how everyone views the editor. Is it a continuous view of content, or an application of blocks? With either of these comes a different approach as to how keyboards might navigation the interface. Some good issue to catch up on for this were listed by @afercia:

  • https://github.com/WordPress/gutenberg/issues/15322
  • https://github.com/WordPress/gutenberg/issues/11581
  • https://github.com/WordPress/gutenberg/issues/13663
  • https://github.com/WordPress/gutenberg/issues/5694

Tightening up

I’d really like to see more work on both the Columns block and the Table block in the next few weeks. There’s been some great enhancements lately, so I’d like to keep that movement going.

The color options for blocks is an interesting conversation. Everyone who has voted, (8 total votes) has voted to include both text and background color options for all text blocks. But there was an interesting suggestion which @tinkerbelly also commented about leading us to more explorations around how we introduce background color for the text blocks.


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

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

Gutenberg Phase 2 Friday Design Update #18

Happy Friday everyone! ヽ(•‿•)ノ Why so happy, you ask? Because Gutenberg 5.7 has been released this week!

In response to the accessibility audit there have been many great accessibility improvements. Everyone recognizes there’s still a ways to go, but it’s on the right path with so many issues already resolved.

Some of the impressive enhancements in 5.7 include:

Navigation block

While still in a rough PR, the Navigation block is being thought through and iterated upon. It’s using a new pattern to control the inner blocks (individual menu items) which can use some feedback. Chime in on the PR in GitHub.

Unselected

Selected

Widgets to blocks

If you’re itching to fiddle around with the wp-admin interface for widgets that are now blocks, and you have the Gutenberg plugin installed, you can access it through the plugin’s wp-admin menu here:

There are still a lot of bugs, but it should present the concept well. The new widgets screen is still limited in its abilities right now.

Also, if you haven’t read the UX flow for widget-to-blocks proposal, please do! I’m looking to connect with some plugin developers that use widgets to get their feedback soon. If you have some ideas of who I should contact, let me know in the comments.

Tightening up

There’s been a lot of focus on navigating through nested blocks recently. Some of the wonderful explorations include a PR for dashed borders to help the user see the nested levels, and a clickthrough PR which makes it so much easier to select the parent block and then dive into nested blocks purposefully. These two PRs will add so much to the experience!


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

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

Gutenberg Phase 2 Friday Design Update #17

Sorry, I was away last week and didn’t get an update published. Great things have been happening lately. Let’s take a look.

Gutenberg 5.6 improvements

Usability testing

Usability tests are being conducted weekly to evaluate Gutenberg. Posts will be published on make/test to share the videos so that everyone can comment and share their observations.

Accessibility audit

The accessibility audit performed by Tenon, LLC. through WPCampus has been released. There were several issues created in Github. The Gutenberg team, Accessibility team, and others are triaging them. Several were found to be either duplicates or Core bugs that required work beyond Gutenberg. Many of the other issues already have conversations leading to well-thought solutions. There’s been amazing collaboration between WordPress.org teams with this effort!

Tightening up


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

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

Gutenberg Phase 2 Friday Design Update #16

Due to the recent holidays and other happenings, various design contributors had some time off including me. Taking this into account, there’s still some good work getting done.

Navigation block

While the PR is still being worked on, there have been some great feedback from designers and accessibility.

Widget to blocks

A post was recently published about the UX flow for introducing blocks into the widgets screens in both wp-admin and the Customizer. The thought is to leave the current navigation labels (ie. Widgets) in the wp-admin navigation sidebar and just refresh the UI. This would be similar in the Customizer too.

Tightening up

Default Theme Patches!

Due to the new Group block being introduced, some patches needed to be created for the default Twenty Nineteen and Twenty Thirteen themes. If you have some time to test these out, please do and leave feedback.


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

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

Gutenberg Phase 2 Friday Design Update #15

Gutenberg 5.5 is released! The long-anticipated Group block is now available. In addition to a strong list of enhancements, there’s even a bit of a performance boost. This release included 48+ contributors, thanks, everyone!

This is a short post this week. For more information, read up on the release notes linked above, and visit the GitHub issues/PRs labeled Needs Design Feedback or Needs Design.

Focuses

Accessibility

Research

Prior to the release of WordPress 5.0, @jarahsames conducted a survey with WordPress users regarding the new Gutenberg experience. Here are the results.


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

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

Gutenberg Phase 2 Friday Design Update #14

Let’s dig in!

Navigation block

@jorgefilipecosta is quick to get a prototype going! Check out the preliminary development.

Widgets to blocks

A question was recently asked of me if I had thought about the UX for both new and existing WordPress users. While I had thought about this, I realized I hadn’t really shared some flows with everyone. I’m aiming to get something like this articulated in Figma by Monday.

Some questions that arise when thinking through the UX:

  1. Should new users see anything using the terminology “widget” including an option to add widgets in the widgets.php page, or should the experience be completely focused toward blocks?
  2. Existing users who have existing widgets on their site.
    1. There needs to be a way that WordPress notifies the user of the switch to blocks. Do we automatically wrap the widget in the Classic Widget block? or teach the user how?
    2. Does WordPress show both a widget.php page and a block area page? This could help themes during the transition as well.
  3. Existing users who don’t have widgets on their site.
    1. If users haven’t used widgets yet, should WordPress just push them toward blocks and deprecate the widgets terminology similar to the new user experience?

Tightening up


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

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

Gutenberg Phase 2 Friday Design Update #13

Gutenberg 5.4 has been released! Update the plugin to get all the great improvements.

Navigation block

The usability testing results have been published by @melchoyce.

Our testing went way better than I was expecting for such a complex block.

This is great news! Developers are already discussing ways of bringing this block to life and getting it into the wild for more real-life testing and feedback. @luke_pettway also helped with another accessibility review (here’s how the first one went).

Widget-block interfaces

The widget-block interfaces now have a Request For Comments (RFC) doc to gather feedback on the technical implementation of blocks in the widget areas. Related tickets to keep an eye on:

  • Widget-blocks in wp-admin (issue, PR)
  • Widget-blocks in Customizer (issue)

Tightening up

Upcoming

Block directory

A “Call for Design” went out for the Block Directory. This will be an awesome project that will touch both Gutenberg and the WordPress.org.


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

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

Gutenberg Phase 2 Friday Design Update #12

Happy Friday once again! This is the last Friday of the 1st quarter of the year. Let’s take a deep breath and dig into what went on this last week.

Navigation block

Work is progressing on the Navigation Menu block. A group of designers conducted seven usability tests last week, and have spent this week going through notes and pulling out insights. Keep an eye on this p2 for an update next week on next steps.

Widget-block interfaces

wp-admin
There’s a new PR that explores the widget-blocks in a wp-admin page. It’s quite basic right now, but still a wonderful work in progress.

Customizer
Some simple explorations are being done to include blocks in the Customizer. They are rough thoughts that incorporate Customizer’s existing patterns with a bit of Gutenberg.

Tightening up

Accessibility


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

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

Gutenberg Phase 2 Friday Design Update #11

Gutenberg 5.3 is out! This release will be included in WordPress 5.2. The planning of this worked great with the next WordPress release thanks to everyone involved.

Navigation block

There’s been extensive moderated testing this week for the Navigation block. It’s so rewarding to converse with participants and get realtime feedback as they click through the prototype.

These sessions are not only boosting the confidence of design decisions, but also bringing to light several areas of improvement. After this week, there will be a post outlining the details of everything learned.

If you want to get involved in future testing, become a WordPress researcher.

Tightening up

This last release includes:

Block Management

The Block Manager has been included in this release! It’s been a requested feature for some time now.

The block manager modal
Block Manager

Section block

The Section block is difficult requiring a bit more time to get it to a minmum viable product. Aligning the inner blocks so that they conform to the wide and full widths within the Section block includes a lot of math, a lot of testing, and a lot of patience.

Accessibility

The Accessibility & Design Teams are working to prioritize a set of issues right now.


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

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

Gutenberg Phase 2 Friday Design Update #10

The appearance of new faces in the Github repo is so encouraging. Conversations are productive, design direction is collaborative, and the excitement is promising. If you’d like to learn more about contributing to Gutenberg, @karmatosed wrote up a great handbook page this week.

Just a reminder, today is the last call for merging PRs that will make it into WP 5.2.

Navigation block

People are being signed up for usability testing. There are already a few interviews scheduled for next week. The testing will be moderated and conducted with a prototype of the Navigation block. If you’re interested in helping, join the #research channel in slack!

Tightening up

A really cool update to the block outlines has been merged. The blue hover state is replaced with a strong grey left border. The focused state retains that strong left border and outlines the entire block.

Research & User Testing

With all the research efforts gaining momentum, a recent call for researchers went out from @tinkerbelly. If you’d like to help out, notify the researchers in the #research slack channel to get involved.

Mark your calendars for the Site-building Research “Ask Me Anything” video Q/A with @tinkerbelly and @jarahsames this coming Monday at 19:00 UTC.

Block Management

The PR is merged!

Block Directory

Wow, the comments in the post are lively! It’s great to see so many perspectives communicating. The feedback is being synthesized and thought through thoroughly. <- Say that three times fast.


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

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