Design meeting notes for 29 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 and find the meeting’s agenda here.


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. phase two

Gutenberg 5.8 was released! Yay! @mapk noted that this release includes some performance improvements along with some really cool features. He also asked attendees to look into some relevant pull requests in GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner.

He invited everyone to try out Gutenberg 5.8 and play with the new widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user.-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. areas screen, found on the Gutenberg pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the Plugin Directory or can be cost-based plugin from a third-party wp-admin 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. menu.

There’s also a new proposed flow for column layout suggestions. @kjellr prompted everyone to offer feedback.

Block directory

There’s new updates on the block directory by @melchoyce. @mapk noted that there’s a new map of the experience flow, and lots of sketches that could use feedback.


Font sizing increases

@hedgefield shared how at Yoast they sometimes have had to deviate from Gutenberg’s default styling due to the default font size being too small for them to accommodate several heading levels, so there’s been talk about the possibility of raising the default font size in WordPress.

The team discussed different font size options and what would be the best choice considering accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). ( and internationalization. There was consensus around the idea of trying out different options on Figma mockups or via the browser’s web inspector. @hedgefield will try these suggestions and report back next week.

Figma organising

There’s agreement on some things we can do to better organize the Figma libraries:

  1. Splitting one library into a few smaller libraries.
  2. Component naming: looks like mirroring the code naming convention is a good path forward, e.g. “TextControl”.
  3. Establishing an organisational structure for components.

As for component naming, @drw158 proposes just adding a space so it’s more human readable, e.g. “Text Control”.

@drw158 and @tinkerbelly will be volunteering to move this initiative forward in the next week or two.

Open floor

Block-based vs. inline color controls

Seeing that there was time left in the meeting, @kjellr added this discussion topic that was initially raised by @paaljoachim. The team agreed to create a text level color issue on GitHub to further explore this idea.