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

Call for design: Installing blocks from within Gutenberg

The Problem

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 block-based plugin that is intended to be seamlessly installed from within Gutenberg itself. This is one of the 9 priorities in the 2019 roadmap.

The WordPress.org API 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 Meta 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.

#block-directory, #design, #plugins, #ux

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

Design meeting agenda for Wednesday 13th March

This is the agenda for the weekly design chat meeting on Wednesday, 13th March 2019, 19:00 GMT.

  • Housekeeping
    • Component maintainers call.
    • Label changes: ‘Needs design feedback’ / ‘needs design’.
    • Profile badges for the design team and contribution team.
    • DST changes to meetings.
  • Updates
    • Gutenberg update from @mapk.
  • Feedback/reviews:
    • Showcase: call for feedback to Figma file.
    • /mobile/ feedback.
  • Discussion
    • Font management in Figma.
  • Open floor

This meeting is held in the #design channel in the Making WordPress Slack.

Leave a comment if you are working on a project and would like to give an update in the design meeting. If there is anything you would like to see added to the agenda, please also leave a comment.

#meeting-agenda


Gutenberg Phase 2 Friday Design Update #9

If you follow these posts, make sure to follow @youknowriad ‘s bi-weekly updates as well. Lot’s of information packed in there!

Navigation block

Recruiting testers for the Navigation block is currently in progress. Interviews are scheduled to begin shortly thereafter, and should help inform the direction of the block.

Widgets to blocks

Foundational work has been done to get the widget-blocks working on the widgets.php screen in /wp-admin. According to Riad’s post, “It introduces a new @wordpress/block-editor module allowing building block editors outside the post editor context and even outside the WordPress Admin context.”

Tightening up

A side note: Some testing will be done soon on the block-specific responsive controls for the columns block. Please review the post and provide some feedback on the script and goals of this endeavor.

Block Management

The Block Management modal has made an adjustment from “Disabling” blocks to “Hiding” blocks. This feels much more clear that the blocks are still usable if you have them in your content, but they just won’t appear in the Inserter or / command.

How to show a “hidden” block is still being discussed. Most likely the decision coming forth will also affect the Inserter when showing deprecated blocks. If you have any thoughts around this, please share in the PR.

Block Directory

One of the 9 projects this year includes a Block Directory. Read more about this in the kickoff post. Thoughts around implementation in Gutenberg and wp.org, and “single block plugins” are being discussed.

Accessibility

The Accessibility Team has a list of issues that are being prioritized and will be shared with the Gutenberg builders soon. One of the more recent improvements has been the Custom Color Picker.


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

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

Gutenberg Phase 2 Friday Design Update #8

March is here! There’s a lot of feedback needed to push things along. Here’s what’s happening in Gutenberg.

Navigation block

@tinkerbelly posted a Navigation block proposal. This direction is both intuitive while using smart defaults, and advanced enough to provide for those that require more control.

The #research slack channel has some discussions going on for testing this prototype to help ensure it’s on the right track.

Tightening up

Block Management

Yep, you read that right! Gutenberg is exploring some block management patterns currently. There’s a need for feedback here before development starts.

Accessibility

Gutenberg has been making lots of progress on accessibility thanks to cross-team collaboration. Not only are Gutenberg contributors learning more about this, but accessibility is being included earlier in the process.

Here’s an example of the progress being made.


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

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