Monique Dubbelman 7:00 pm on May 15, 2019
Tags:   

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.

Updates

GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ updates

  • Leave your thoughts around IA or layout for the Edit Image blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. 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.

Discussions

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 UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. 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 sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme., 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:

  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress./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: https://github.com/WordPress/gutenberg/tree/master/packages/components/src, 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 WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. Europe in Berlin. There will be a design table at contributor dayContributor Day Contributor Days are standalone days, frequently held before or after WordCamps but they can also happen at any time. They are events where people get together to work on various areas of https://make.wordpress.org/ There are many teams that people can participate in, each with a different focus. https://2017.us.wordcamp.org/contributor-day/ https://make.wordpress.org/support/handbook/getting-started/getting-started-at-a-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!

#meeting-notes