Gutenberg Phase 2 Friday Design Update #42

Happy Friday everyone! This will be my last update through the end of the year. I’ll reconvene in January again. I wish everyone happy holidays and a wonderful New Year.

It was also decided in the #core-editor meeting that there will be no Gutenberg releases or meetings for the remainder of the year. We’ll pick these back up in January.

Navigation block

While the Nav block has found its way into the plugin, it’s also being iterated upon to improve basic UX interactions.

@karmatosed is exploring the Menu screen in wp-admin which is in the early stages right now. There are mockups ready for design feedback. Please drop in on the ticket and leave your thoughts.

Block Directory

A recent post was written by @melchoyce that really brings together some plans for the next phase of the Block Directory.

Recently merged

Work in progress

Get involved

Now’s a great time to get involved. While the work on this project is intense, it’s always important to glean new perspectives from other WordPress users and community members. Just drop into any of the links provided above to read up on the details and contribute.

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

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

Design Meeting Notes for 18 December 2019

These are the weekly notes for the design meeting that happens on Wednesdays. You can read the full transcript on our Slack channel and find the meeting’s agenda here.


There are two things: @boemedia is stepping down as a team rep. She still be active as WordPress contributor. We want to thank her for being a team rep and her work/support.

Second, today is the last meeting of the year. We will take a holiday break and return on 6 January as our first meeting of 2020.


Gutenberg updates

@mapkt reported that due to holiday break, there will be no #core-editor meetings or Gutenberg releases until 8 January.

@mapkt together with @aduth reviewed the complexity behind renaming categories for the Block Library. Words are not easy to find, especially when plugins are already using some words. 


Preparing for 5.4.

@francina asked the #design team if there is anything to be included in 5.4. Ideally within a day or two so a post can go out before the holidays. @karmatosed created a spreadsheet to collect issues/tickets and ideas. @mapk will add any Gutenberg issues and there are already some tickets in trac. If this method of a sheet works, it will be added as a process in the handbook.

The tentative deadline for 5.4. is March, which means we will have about 6 to 8 weeks to work. Not all the items posted on the list will make it, but it will be good to start tracking them. A few suggestions to be considered now are background support to columns, color and typography items.

@shaunandrews mentioned the proposal to simplify the block selected state and @melchoyce would like to add both or at least of @davewhitley’s proposals on a new color palette for WordPress and a consistent spacing system. Another item would be around improving the selected/focus states for blocs

@michaelarestad brought up the site navigation when editing full site. The main goal is to have a one-cohesive, tightly-coupled system rather than multiple disparate interfaces.

The post will come up next week, so we have until Friday 20 December to add items, proposals or ideas to the spreadsheet.


Design Meeting Notes for 20 November 2019

These are the weekly notes for the design meeting that happens on Wednesdays. You can read the full transcript on our Slack channel and find the meeting’s agenda here.


Trello and Handbook Organization

Trello and handbook changes are rolling out. Props to @michaelarestad who dove right in with a new page for full site editing! Because this is a work in progress, he expects comments and issues that can help improve it. 

Design Handbook

Improvements in the design handbook show:

  • Focuses area
  • Topics of Interest, using tags/categories and ways to surface
  • The blue box is a bit leaner

@karmatosed has a question regarding the “Calls for Design” as it exists on the menu bar. Since it hasn’t worked as well as our Trello board for soliciting work, would it be better if we move it to “Topics of Interest”, swap it out of “Focusses” pages or update the “Calls for Design” page? Please add to the comments as we will revisit the item next week.

Call for WordCamps

If you are attending or running a WordCamp, particularly a design contribution day, it would be great to call it out in advance in the make/updates post each week. And feel free to post agenda/notes or requests in the #design Slack channel.

List of Active Contributors

This topic is out of order from Slack chat. @karmatosed asked how others will feel to maintain a spreadsheet of active contributors that help with design to add badges to their profiles. A11y has this and they review it from time to time. The list could be linked in the handbook for easy access and to allow people to add themselves. Add feedback in the comments.



Updates were given by @mapk. The focus area for this month is highlighted here:

Great news from today’s chat #core-editor revealed that the Navigation block is super close.

@mapk is pushing to get text color features moving as well. There is already a PR on text color features by @jeffreycarandang. At the moment is blocked by another issue related to RichText, but from a design perspective, it’s on track. The plan is to bring the issue up to the a11y team’s bug scrub to get their feedback.

Another PR that is close is the “Replace Media”. It should resolve some media replacement confusion and be more explicit.

People can leave comments on any of the mentioned PRs or check out the label  Needs Design Feedback in GitHub.

Exploring some of the hover/selection states in Gutenberg blocks

@shaunandrews posted an experimental mockup that could use more eyes. See video

Hold off any feedback or comments as a post in GitHub issues with context and more mockups will come later. If anyone wants to get involved, reach out to @michael-arestad.

Block Style System

@itsjonq resumed a proposal to an issue on WordPress/Gutenberg titled “Block Style System”: There is a gap within the system + ecosystem. It’s quite difficult to get Gutenberg blocks x themes to play nicely with each other. Styling essentially relies on CSS overrides upon overrides when you use Blocks libraries (e.g. CoBlocks), that has its own set of isolated styles so now, you’ll need to write custom CSS to override that, to match your current site’s overrides

This workflow is common in WordPress, the proposed method is a necessary workaround. Gutenberg + block is giving Builders (block makers, themers, etc…) more control over the UI because it standardizes how UI can be constructed

The idea for the proposal is to find a way to help standardize how HTML/CSS can be written, and more importantly, configured. The Github post goes more into detail. Having this system allows users to actually set global configurations from within Gutenberg, in a non-hacky way, e.g. Colors or Typography. 

Here is a demo of an experiment by @itsjonq. The Config system (the various configs/variables that makeup UI elements) can be defined by a theme, and overridden via Gutenberg. UI built or rendered by Gutenberg blocks or otherwise, can tap into this Config system. With this, themes, blocks, plugins actually have a way to work with each other. Because they share a foundation. Rather than fight with each other.

@karmatosed would like to know what those building themes and plugins think of this proposal. One block to test would be the “group block”.

Add any comments to GitHub issue or reach out to @itsjonq and if anyone is interested in his very experimental work in progress, follow the code.  

Follow up on Slack for more examples of how the Block Style System can be applied and some design jokes.

Don’t forget the triage sessions Monday and Tuesday and follow along on make/design for any posts this week.

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