Design Team Meeting Notes July 15, 2020

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 agenda here. You can join the SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel by following the instructions in our handbook.

Housekeeping

We can still use more volunteers for note-taking and triage leading. Please leave a comment below if you’re interested.

Monthly ‘Show and Tell

Monthly ‘Show and Tell’ will take place on the 29th. Even though everyone has been busy with the release of 5.5 betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 2, we will still have the session.

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/

@michael-arestad brings Gutenberg updates: Here are the plans for Gutenberg in July. Getting everything ready for 5.5 is a major focus this month.

  • 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. patterns are just about ready to go. The initial patterns have been selected and all that’s left are a few tweakshttps://github.com/WordPress/gutenberg/projects/41. Props to @nrqsnchz.
  • A new 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. paradigm is in the works. Definitely take a look and let us know what you think.

WordPress Figma Libraries

@noah reports on the update for WordPress Figma Libraries:

Colors

  • There are two palettes: Primary, which is what we’ve been migrating towards and Classic which comprise many of the colors that are still used in both the editor and WP admin.

Remaining:

  • Improve naming conventions
  • Validate palettes
  • Include documentation around use

Typography

  • The main text styles have been identified, along with their accompanying values, such as size, weight, line height, etc.

Remaining:

  • Final review values for each text style
  • Include documentation around use

Icons

  • Currently, we’re supporting three icon libraries: Primary (G2), Material and Dashicons. Only the Primary and Material icons are available in this library, with Primary having precedence. Dashicons are intentionally downplayed with an explanation and link to the standalone library.

Remaining:

  • Finalize componentization of Material icons

Components

  • Many of the common components have been built and reviewed against what’s currently in the WordPress components package. I have also been going back through and fact-checking against what’s in the latest build of 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 WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party.
  • As you peruse the Components page, you’ll notice a dot to the left of the component name that’s either outlined or green. If green, those components are good to test, and I would encourage everyone to do so. Does the construction make sense? How does it hold up as you use it? Is it accurate?

Remaining:

  • Include remaining components from the Components list (this list is in Figma)
  • Include documentation around use
  • Promote testing and use of these components

Views

  • Completed components will eventually be grouped in clusters (atomic organisms) and added into templates/views. You can already see this with the block inserter and editor headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. clusters.

General

The following is a list of items outside of what was mentioned above.

  • Add Getting Started documentation (next week)
  • Add Proposals documentation (next week)
  • Clean up component frames (improve consistency, balance and organization)
  • Migrate utilities outside of library

Discussion

  • Project related documentation – On TrelloTrello Project management system using the concepts of boards and cards to organize tasks in a sane way. This is what the make.wordpress.com/marketing team uses for example: https://trello.com/b/8UGHVBu8/wp-marketing. board, we have the Figma reorganization and updates to the handbook.
  • For the Handbook- Currently there are no updates as most of us have been focusing on 5.5.

Open Floor 

  • @folletto pointed out that in Gutenberg 8.5.1 the new inserter panel when opening it closes the settings panel, and then it doesn’t reopen. Was this already discussed? @youknowriad & @nrqsnchz shared the link to PR 20951 with something similar. @folletto opened a PR to discuss the behavior of the issue.
  • The ‘About Page for 5.5’ in the form of the ticket was discussed in detail.

#meeting-notes