Design meeting notes for 15 May, 2019

These are the weekly notes for the design meeting that happens on Wednesday’s. You can read the full transcript on our Slack channel.

WP5.3: Open call for tickets

If you have a ticket that you would love to see focused in this release, please leave a comment at the open call.


Gutenberg updates

  • Leave your thoughts around IA or layout for the Edit Image block placeholder on the corresponding ticket.
  • Today, Gutenberg 5.7 was released! More than 48 contributors participated in this release. Find out what’s new.

The Gutenberg block directory

The past two weeks, people involved in this project have been focused on research, especially competitive analysis. The team is thinking about exploring breaking the project down into multiple steps:

  • Discovery of blocks through search
  • Previewing a block
  • The installation process
  • Loading a page with missing blocks (we already handle this, but it’s not connected to re-installing or re-activating)

If anyone’s interested, please help review the competitive analysis issue and leave any thoughts you have, or post any examples you can think of. @iviolini and @melchoyce will write up a recap before the end of this week.


Sharing libraries in Figma

@tinkerbelly would like to discuss a few things related to Figma libraries, starting with the Primary Components Library.

This library (that used be called WP5.0 library or similar, has grown organically while elements were added on an as-needed basis. The result is that it’s sort of become a messy array of disconnected pieces.

Sarah suggests splitting this library into three:

  1. Foundations → colours, type styles, icons, spacers, etc… basically anything design-token-y
  2. Components → smallest UI components (buttons, inputs, checkboxes, etc), directly 1:1 with @wordpress/components
  3. Patterns → larger patterns made up of individual UI components (blocks, navigation bars, Gutenberg’s sidebar, etc)

If you have additional thoughts or ideas, please leave them in the comments of these notes. There will be a summary post for this particular topic soon where you can leave your ideas as well.

File organisation and naming conventions

There’s not really a good standardisation in naming files and components in Figma. Some examples from our current library:

Some examples from our current library:

  • Core/Publish-Title/Save_Draft
  • 1_New_Post_Shell
  • wrapper/admin-nav/default-state
  • button/blue
  • Icon/More-Options

There’s a short discussion about the approach: Uppercase/lowercase, dashes, underscores or spaces.

@boemedia suggests doing an inventory of what type of files / components we have and work from there. @tinkerbelly would love it if our design library were as close as possible a mirror to the code—having a shared mental model between devs and designers can make it easier to communicate.

So if we look at how the @wordpress/components package is organised:, there are a couple of points here

  1. It’s a totally flat structure, with all components at the top level. We may want to be more aspirational with how we organise our library for now.
  2. The folders are named using lowercase-hyphens, but the components themselves use UppercaseNoSpaces

If you have thoughts on this topic, please feel free to share them in the comments.

Design table at WCEU

In June, it’s WordCamp Europe in Berlin. There will be a design table at contributor day. But as not everyone will be able to travel to Berlin, it would be nice if people could join remote. This will be an agenda topic for next week, so please join if you have ideas on this!