Iterating on the Gutenberg design flow

As phase one has wrapped up it’s a great time to look at iterating how designers can contribute and get involved in the ongoing work for phase two and beyond. 

GitHub projects

The Gutenberg plugin itself is on GitHub and this is the cornerstone of the project. All designs being worked on will have a corresponding issue within GitHub. During phase one projects began to be used and this will continue. Here are the projects to follow for design:

Note: like widgets other specific boards may be created to focus on the 2019 projects mentioned here.


Everything starts with research. There have been a lot of insights from usability testing and feedback during phase one. Phase two is starting with a dive into research and interviews are underway. For more details on this you can join #research in Slack and follow the #research tag on this site for posts.


Once the areas to be designed are identified into tasks (listed in GitHub projects), then exploring happens. There are a few tools to use for sketches, mocks and prototypes:

  • InVision: A great place to collect ideas and sketches on a board.
  • Figma: This is a great tool to use to sketch and share.

If you are looking to find something to work on? You can follow the ’needs design’ label in GitHub for issues already discussed that need a designer, or any of the projects mentioned.


Designs grow through feedback. Sharing early and sharing often is the mantra to follow when working together. There are a number of channels within Slack you can drop in to get feedback async:

  • #design is the home for designers in Slack, feedback can be asked at any point here.
  • #core-editor this isn’t just for developer feedback, this channel has editor focused designers ready to give you feedback.
  • #accessibility is your first port of call to get feedback on even the earliest sketch.

Before development starts any design should be made into an issue or attached to one that already exists in GitHub, this is where most of the feedback will happen. There are a number of useful labels to get even the earliest feedback on an issue:

Potential design flow

Whilst it will be up to each person, a flow using the tools available could be:

  • An issue is created in GitHub, added to a project. This sets the foundation of the problem with some basic information and updated over time. A label of ‘needs design’ is added.
  • Research is added to the issue and then once designs are being produced in Figma, those also are added to the issue. Commenting can happen both in Figma and on the issue. InVision may be used to collate research for example.
  • Once there is an agreed design ‘needs design’ is removed and ‘needs design feedback’ added. 
  • Iterations continue based on feedback until a point is reached where the design is ready to be developed. At this point ‘needs dev’ could be added and work begun.
  • During development those that helped with design will give feedback.
  • At all stages getting real feedback through usability testing will crucial.

Staying connected

There is a lot going on in quite a few places and following along isn’t always as easy as it could be. With the new phase of Gutenberg this is something to iterate on. There are a number of changes being made to ease this:

  • Weekly #design meeting updates in Slack. The current phase design lead will give a summary update during this meeting.
  • Weekly #design meeting feedback opportunity. There will be time within every meeting for specific feedback or to call attention to issues. Please add those as a comment on the meeting agenda.
  • Weekly #core-editor meetings will still continue, designers are welcome to join. Notes will also be taken going forward to catch up async.
  • Friday is summary day from the New Year! 
    • The current phase lead will post a design update on make/design.
    • Those who are working on specific areas such as research, projects or features and have reached a point to update or get feedback, are encouraged to do that on make/design.

Sharing ideas

In this post, existing planned ideas have been covered, what if you have a great idea for something? The same feedback channels mentioned of #design in Slack, #core-editor and the GitHub repo are great places. You can also add to the ‘Phase 2 Research’ board ‘explorations’ column. Creating a blog post and sharing in those channels is also a great way to share a vision. If it’s just an idea without a sketch you can also discuss in Slack or make an issue.

Collaboration across teams

Designers should never go alone. Collaborating together is important but collaborating across teams is how the best product is made. As the next phase approaches it would be great to hear people’s ideas for how more collaboration can happen. Please add them in the comments.

Get involved

As phase 2 begins, now is a great time to start getting involved. Expect to see posts and announcements calling for specific involvement outside the ways mentioned above. There are going to be opportunities for all different types of designers to contribute along the way.

It would be great to hear any ideas people have for other things to iterate on. All of these iterations came from feedback so keep that flowing! All of this information will also be added to the handbook to ensure it’s easy to discover.

Design meeting notes for August 1st, 2018

This week’s design team meeting was held yesterday at 17:00 UTC. You can catch up on the archive here.

Here are the summary notes:

  • There are no items to triage in our inbox.
  • There was an open discussion.
  • A weekly update on Gutenberg design was asked for and will be added.
  • This week Gutenberg released 3.4 and there is a weekly meeting still happening every week at 13:00 UTC on Wednesday’s in #core-editor. The project is in new feature freeze still but iterations and feedback is welcome.
  • 4.9.8 is due out and @joshuawold talked about what the experience was like for him and gave his insights from co-leading.
  • A final mention is worth adding of the #core-test channel and where you can find usability testing for the project.

You can join the chat each week in #design at 17:00 UTC on Wednesdays.

Meeting changes for 2 weeks

There will be no regular meeting for the next 2 weeks, instead we are trying something a little different. At Thursday 20:00 UTC on the 4th and 11th May, there will be a drop in time in #design. Everyone is welcome to come, bring a ticket or discuss any topic you want about design.

Don’t forget during these two weeks the Customizer and Editor still have meetings that designers are welcome to join:

We will see how these meetings go and review at a regular meeting on Thursday May 18th 20:00 UTC.

Editor weekly office hours for April 5th

It’s spring, it’s busy, and everyone is deep in work on the plugin. So we’re making a small change to the format. Instead of weekly meetings, we’re doing weekly office hours. That is, you’ll be guaranteed to find someone in chat, ready to discuss any topic you’d like to bring up.

The office hours start at 17:00 UTC, 19:00 CEST. Here’s a handy link: Wednesday April 5th 17:00 UTC. Yes, we’ve double-checked that.

Since last time:

  • Work is proceeding on the plugin. Follow it in Github, for example this link.
  • Feel free to leave a comment and we can discuss anything people want.

Remember, even if there are now office hours, the #core-editor channel in Slack is open 24/7! 💫

This week’s editor meeting agenda for March 29th

This week’s chat is happening Wednesday March 29 19:00 UTC. Edit: Due to an unfortunate typo by yours truly, this weeks meeting was kept very short. More details here.

The agenda is:

  • Work is proceeding fast on the editor plugin. Anyone have something to share or discuss?
  • Anyone have test results to share?
  • With DST here, is there a better time for the weekly meeting?
  • Anything else?

As a reminder, day to day work happens in the GitHub repository. Feel free to leave a comment and we can discuss anything people want.

See you in the #core-editor channel in Slack! ✨

This week’s editor meeting agenda for March 22nd

This week’s chat is happening Wednesday March 22 19:00 UTC.

The agenda is:

Feel free to leave a comment and we can discuss anything people want.

See you in the #core-editor channel in Slack! 🌠

This week’s editor meeting agenda for March 14th

This week’s chat is happening tomorrow, Wednesday March 14 19:00 UTC. Note, daylight saving time has kicked in in parts of the world, but not all, so be sure to follow the time link to see what it converts to in your location.

The agenda is:

  • The technical prototypes are in the home stretch. Any observations on recent developments? Hopefully we can start work on plugins very soon.
  • Day to day work happens in Github mostly. Lots of tickets since last time. Any you’d like to discuss?
  • Anything else?

Feel free to leave a comment and we can discuss anything people want.

See you in the #core-editor channel in Slack! 🍒

🎯 Core Editor Meeting Notes 2017-03-08

The Gutenberg project has been going great. Lots of activity, Slack fun meetings, GitHub issues are filled with discussion, you’ll love to read. Here’s the meeting summary for this week’s editor team meeting (agenda here) in #core-editor Slack channel.

Block States

There was a good deal of discussion around the states of a block in general. General consensus led to the following decisions/suggestions (Mockups should be further improved to include five states mentioned below):

  1. Normal
  2. Hover
  3. Editing
  4. Selected block
  5. Selected content within the block

There’s more:

  • Empty State (optional for some, but important for extension flexibility)
  • Ticket for fail-states, like broken hyperlinks and images that didn’t upload, block-parse errors. Even warnings if you try to publish with placeholders.

Moreover, following discussion took place:

  • Text Selection: Selecting text, whether by mouse or via keyboard nav, should invoke controls.
  • Embeds: Include embed in tech requirements, as well as the neutral state.
  • Ticket: What happens to block controls when you page down a draft, when do they show up? On select, on arrow keys, on PgDn? We will discuss further in a ticket.
  • Testing: @karmatosed is offering to test things at upcoming WordCamps. Let her know your ideas in #core-editor.
  • Link Boundary Feature: Everyone loves the link boundary feature. Some accessibility issues that are solvable.

That’s about it, happy hacking!

This week’s editor meeting agenda for March 8th

This week’s chat is happening today, Wednesday March 8 19:00 UTC.

The agenda is:

Feel free to leave a comment and we can add to the agenda!

See you in the #core-editor channel in Slack! 🦄

This week’s editor meeting agenda for March 1st

This week’s chat is happening  Wednesday February 29 19:00 UTC.

The agenda is:

Feel free to leave a comment and we can discuss anything people want.

See you in the #core-editor channel in Slack! 🌈