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.


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 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

Navigation Menu Block: Usability Testing Results


Two weeks ago, a group of WordPress design researchers conducted seven usability tests with a combination of beginner or casual WordPress users (5), and power users (2). Most of them hadn’t used Gutenberg yet.

The goal was to learn more broadly about how people use navigation menus, and about their mental models related to navigation for a website. We also wanted to validate whether the proposed solution was on the right track. 

The team selected moderated usability testing for two reasons: 

  • The prototype being tested was rough and limited in functionality; without moderation, testers could easily get stuck or confused.
  • There were a number of broad questions to answer.

The usability testing script comprised of a short exploratory interview, followed by a task-based evaluation of the prototype. This allowed the team to ask exploratory questions when the participant expressed moments of delight or confusion, or to pause and uncover more qualitative insights. It also allowed the team to better test the prototype, which had limited functionality.

Thank you to all the design researchers who participated: @josearcos, @favoriteswan, @kjellr, @mapk, @vishalmukadam, and @dpknauss.


The research team spent this past week reviewing notes, breaking out key insights and turning them into “sticky notes” for easy rearranging, which was helpful for synthesizing the data into coherent groups afterwards. We marked off positive, negative, and workflow-oriented insights for each session. Then, we grouped the negatives together and created action items for each major problem.

A preview of our Figma groupings; see Figma link for more details.

Some of the issues were inherent to how the prototype worked, or are related to Gutenberg as a whole, so we separated those out from the actionable items:

A preview of our unaddressable items in Figma. See Figma file for more information.

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

The biggest barrier our power users had to overcome was doing things the “WordPress way.” When the team asked them to add a menu, they hunted around for a wp-admin link—which didn’t exist in our prototype.

Once the testers figured out they could add the menu directly from the front-end screen, they were delighted.

Beginners struggled the most with learning the fundamental Gutenberg patterns. Some of the icons and labelling were especially confusing — we’ll be looking at improving both in our next iteration. Many of our testers weren’t sure if they were previewing their page, or editing it. Many wanted to press a “publish” button after making changes. Because many people encountered the menu item dropdown early, they kept returning to it when looking to complete a task. In many cases, they glossed over new UI to return to what they’d already used. We’ll want to account for this in future iterations.

Of the various steps, people struggled the most with adding pages to their menu. Most figured out how to add a menu, and then add a new page okay, but the search interface tripped up a lot of our testers. We’ll need to focus on improving this UI.

By the end, pretty much everyone seemed comfortable with the general concepts, and had learned about the “add” icon, the menu item dropdown, and how to move pages around. 

“I like this, I wish mine did this!”

A navigation menu tester

Most of our testers were really excited to see WordPress heading in a more visual direction, and found our new UI way easier than the only ones they’d used in wp-admin and the Customizer.

Next Steps

@tinkerbelly and I are compiling a list of all of the changes we need to make to the prototype. @tinkerbelly is working on implementing those changes in an iteration on the prototype, which we’ll then walk through with @lukepettway later today to get his insights on any accessibility issues we might run into. 

After implementing any changes @lukepettway suggests, either @tinkerbelly or I will write up a design handoff on the GitHub issue and chat through the prototype with the developer who’ll be working on this block, @jorgefilipecosta

Once the team has a working PR of the Navigation Menu block, the next step will be another round of testing. Stay tuned for more information on that in the coming weeks.

X-post: Weekly Digest | Week 13

X-comment from Comment on Weekly Digest | Week 13

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

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.

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


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

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

Design meeting notes for 27 March, 2019

You can read the full transcript of this meeting on our Slack channel. You can also read the agenda for this week.


Next week this meeting will shift time to be +1 hr. Springing forward!



@mapk shared that the team has been getting really positive comments on the release of Gutenberg 5.3. Thanks to everyone who has been contributing and testing everything!

There are a few tickets that could use review this week:

  1. The controls for resizing media in the Media+Text block
  2. The resize handle bar for media
  3. The Section block

These three are good tickets to get involved in and test out! They will most likely impact some future design decisions in other areas as well.

One last thing that is a followup on the Accessibility section in last week’s design update post. There are 4 really important a11y issues that we need to keep moving forward.

By the way, for anyone interested @boemedia asked a great question about the process of releasing a new feature in Gutenberg. It’s worth taking a quick read.

Also, Block Manager should be coming to WordPress 5.2 soon!

Site health

Site health is being merged into core now (woo hoo!).

@hedgefield shared some thoughts about the process of getting a design moving and seeing the vision through to the end. You can read more about the discussion on Slack. It led to a good discussion (with some healthy radical candor) on the importance of making sure we take care of our amazing designers who give it their all to see WordPress improve.

In addition, there are a few open design details that could use review.

Redesign of /mobile

There’s a new design listed in Trac. @joostdevalk asked for signoff on moving forward. Thanks to Megs Fulton for the great work done!


Video: Site Building Research Q&A

Last week, @jarahsames and I hosted a live video session in which we walked through the process, methodology, and results of the site building research—then answered lots of questions!

For those who weren’t able to make it, here’s a video and a transcript.

Transcript after the jump

Design meeting agenda for Wednesday 27th March

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

  • Housekeeping
  • Updates
    • @williampatton would like to talk about the readme ticket for themes.
    • Gutenberg update from @mapk.
    • @hedgefield would like to update about site health.
  • Feedback/reviews
  • Discussion
  • 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.


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.


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

Design meeting notes for 20 March, 2019

You can read the full transcript of this meeting on our Slack channel. You can also read the agenda for this week.


The first week in April this meeting moves like most .org meetings, ahead an hour.


Gutenberg 5.3 was released! Congrats to all the amazing work designers have been doing!

You can read more about it on the release post. It will also coincide with the release of WordPress 5.2. Some things to point out:

  • Resizing the text and media columns in the Media & Text block is being discussed.
  • For any CSS gurus, @joen has been reorganizing stylesheets. You can see the Pull Requests.
  • The Section block is going to get (or already has) some updates for inner block alignments. This is super tricky but @getdave @kjellr and others have been trucking away on it.
  • There’s research sessions going on this week around the Navigation block. Please jump into the #research channel if you’re interested in helping out.

Feedback and reviews

The Improved Fatal Error Protection

The intention is to give users the ability to access their WordPress admin when a plugin or theme is causing a fatal error. We’ve been asked to give design feedback on:

  • Crafting the email message itself and making sure the user understands what is going on
  • Giving meaningful updates within the admin to help walk through problems

Feedback is welcome! Feel free to jump in and share your thoughts.

Site Health plugin design

The work has wound down. There has been an exploration of what the Gutenberg styling would look like in other areas of the admin. Further work is intended to explore what this could look like.

As an interesting note, the team chose 16px for the main font size with this plugin. Much of the WordPress admin uses 13px, but from an Accessibility perspective that seems to be pushing the limits of what’s reasonable.


As a site note, the team did a Contributor day at Yoast last week, and it went well! The design table had 3 first-timers, and the team gave feedback on about 8 open issues, even one long-dead one about Gutenberg annotations.


Design meeting agenda for Wednesday 20th March

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

  • Housekeeping
  • Updates
    • @williampatton would like to talk about the readme ticket for themes.
    • Gutenberg update from @mapk.
  • Feedback/reviews
  • Discussion
    • @hedgefield would like to discuss some aspects of the design for site health check that could be proposals for core also.
  • 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.