Gutenberg Phase 2 Friday Design Update #37

There’s a lot of talk about Full Site Editing right now with Gutenberg. Let’s take this opportunity to get caught up on the work that is happening. Initially, Phase 2 was about bringing the editor to various sections within the current WordPress interface (ie. Widgets screen, Menu screen, Customizer), and it still is, but Full Site Editing kind of reverses this by bringing the rest of the site into a single unified editing experience. This is a big project that will take some time, thorough design thinking and collaboration.

Full Site Editing

The future of WordPress was explored in a post recently by Matias Ventura. Key concepts to help shift the editor interactions include:

  • Block areas help organize blocks within a full page, but also differentiates global (navigation, site title, etc.) and local elements (the content).
  • Full-page editing will provide a full view of the site, or various editor views of each Block Area.
  • Entities & Sources explain the way in which global content can be edited, saved, and then displayed across all areas on the site.
An exploration into full site editing

The majority of the work can be found on GitHub under the label, [Feature] Full Site Editing.

  • Editing other content in the block editor [13489]
  • Exploring the editor outside post_content [16281]
  • Adding a default template with post title and content blocks [16565]
  • Custom entity sources [17368]
  • Site block [16998]
  • Block Templates [17512]

Modes

Modes are ways in which people can change the context of their editing experience within Gutenberg. For example, if you’re editing content, the tools available to you in that mode may differ than when editing the layout.

With the introduction of a Navigation mode for keyboard users, and the existing Code Editor mode, it’s important to see how these work within a mode system as well.

An exploration into modes
  • Selecting vs. Editing blocks [17088]

Block Patterns

Block Patterns are layout patterns. These can be full-page layouts with blocks preset in desired well-designed layouts, or they can be partial layout patterns that can be added to various pages.

An exploration into block patterns
  • Block patterns [17335]
  • Suite of post blocks [15623]

Get invovled

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 October 16, 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. You can join the Slack channel by following the instructions in our handbook.

Gutenberg

Gutenberg 6.7 was just released. Lots of bug fixes, a few experiments, and button gradients.

@mapk shared priorities for this week, feedback is :

  • Gradients: Theme support, classNames, custom UI
  • Full site editing: Site Title block, rendering engine, temporary template editing UI and start working on the multi-entity saving UI
  • Improvements to the link UI
  • Complex block interactions, which also require improvements to the selection mode, and better drag and drop

Storybook

During the chat @itsjonq brought up a discussion about storybook, which is a UI development environment. It’s a bit dev heavy, but for those interested you can learn more on the Storybook site. Q shared a great example of a date picker.

WP design guide

Q received some wonderful feedback last week about the importance of adding internationalization to the guide. It’s now been updated to support multi-lingual. You can checkout the starter Japanese one.

Anyone who is interested can reach out to become a contributor on the project. Just let @itsjonq know.

Gutenberg version in Core

@mapk would like feedback on whether we should state “Gutenberg version” or “Block Editor” version. Feedback would also be helpful on the best place to put that.

Repurpose ‘Hello World’ post

@nrqsnchz would love feedback on an issue about making a Gutenberg tutorial from the default Hello World post.

Testing WordPress 5.3 Release Candidate

@joyously shared an issue with select dropdown arrows having some visual issues. Slack link. A great reminder that during RC it’s helpful to test as broadly as possible. If you’re able to test that’d be awesome!

#meeting-notes

Design meeting agenda for Wednesday 16th October

This is the agenda for the weekly design chat meeting on Wednesday, 16th October 2019, 18:00 UTC.

  • Housekeeping
  • Updates from any specific focuses
  • Discussion
  • Open floor

This meeting is held in the #design channel in the Making WordPress Slack.

Leave a comment if you would like something reviewed, design help or something added to the agenda.

#meeting-agenda

New Design for HelpHub: Home and Category pages

Since WordCamp Europe 2019, the #docs team is leading the update of the Codex now known as HelpHub. As part of the update, a new design was requested.

This is the first post on HelpHub and will cover the HelpHub Home and the Category pages for desktop. In the coming weeks, WordCamp Valencia will work on the mobile versions of the same pages during Contributor Day. Other posts will be added for Article and WP-Version pages, both mobile and desktop versions.

HelpHub Homepage

The old version is set on a grid that presents several design issues like not being able to list all the topics in each category due to space, created strange white blocks due to the fact that not all categories had the same number of topics, and most importantly, the category icon/title was not underlined for accessibility purposes.

  1. The homepage list allows listing all the topics in each category
  2. There is no blank space in between categories due to the number of articles listed

HelpHub Category Pages

  1. The list will allow topics to show on one page (max two pages, if needed) making it easier to find the article needed by the user
  2. The short/long excerpts will not affect the alignment of as seen on the “before” image 
  3. The links are underlined in the title only, instead of having to highlight the entire paragraph, as seen in the “before” image
  4. There will be no weird grid when the number of topics is not a multiple of three

Before we implement the design, we would like to hear your feedback, please leave it in the comments.


If you want to get involved in the design of HelpHub, reach out in the #docs or #design teams Slack channels.

#helphub

Gutenberg Phase 2 Friday Design Update #36

Happy Friday everyone! Most of the Gutenberg work for WordPress 5.3 is completed. Next date to keep an eye on is:

October 15 – Release Candidate 1 (RC1)
This is a new version of WordPress ready for release, but still undergoing heavy testing.

Block previews needed another path. The Gutenberg Team tried base64 encoding for images in the preview code, but it caused the file to be too large. Next we tried pulling images straight from wikipedia, but didn’t feel comfortable relying on a site that wasn’t in WordPress’ control. Ultimately, we’re going to host the images on w.org’s CDN and link to them from the editor. Trac: https://core.trac.wordpress.org/ticket/48292

A picture of the Block Library with block previews.

Current work

Gutenberg usability testing

September’s round of testing is now posted. It included a new testing script that explored the Table block, and block moving functionality. Check out some of the videos and leave some feedback!

Design related work


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

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

Proposal: a consistent type scale for WordPress

A type scale can enhance the design and usability of an interface. This post aims to standardize one for WordPress.

What is a type scale?

A type scale is a consistent progression of font sizes (e.g. 6, 12, 24, 48, 96). These progressions can be calculated by using a ratio or scale. For example, a scale of 1.5 would result in 16, 24, 36, 54, 81, and so on. Using this method gives us a harmonious set of font sizes to use in our UI.

By including other attributes like font weight and line height we can create a reusable set of predefined styles for design and development.

What benefits does it provide?

“Typography can help create clear hierarchies, organize information, and guide users through a product or experience.”

Carbon Design System

Here are some key benefits:

  • Consistency: when it’s applied consistently, the type scale helps users follow visual patterns while they use WordPress.
  • Consolidation: it reduces the number of styles used and makes it easier for a designer or developer to choose a style.
  • Functional: we can map these styles to functional roles as much as possible. This makes it easier to know which style should be used.
  • Usability: we can create usability standards related to text. For example, the minimum font size for text is 12px to enhance readability.

Type scale proposal

This type scale was designed to keep the number of separate styles to the minimum that works for WordPress. Some things to keep in mind:

  • This type scale is separate from emphasis or decorative styles like color, bold, italic, and underline.
  • It assumes the default system font is being used, just like WP Admin.
  • Its primary use case is for productivity, meaning it’s best used in interfaces like WP Admin. We could expand the type scale for use on WordPress.org in the future.
Type scale chart showing 10 different type styles

Here’s a link to a CodePen to see a live example.

Next steps and feedback

Next, I think we should use the Design Experiments plugin to implement the type scale on a few screens. If we decide to proceed, we can work on documenting when to use which type style!

I’ve been using this type scale with several projects and it seems to be working well. What do you think?

#style-guide

Design meeting notes for October 7, 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. You can join the Slack channel by following the instructions in our handbook.

Housekeeping

@karmatosed posted on make.wordpress.org/design details for the new handbook page for WordPress components. Everyone is encouraged to check it out and learn more about editing, adding and using the components.

Updates

WordPress Design Guidelines

@itsjonq shared the work he’s been doing on the WordPress Design Guidelines. The goal is to enhance and improve the current guidelines on WordPress.org.

These new guidelines can be found on https://wp-design-guidelines.netlify.com/foundations/. As of today, the guidelines only include Identity, Typography, Iconography and Colors.

In addition, the guidelines are open for everyone to contribute and add feedback and suggestions. The GitHub repo is located at https://github.com/itsjonq/wordpress-design-guidelines.

The team thinks the new guidelines would be a great resource for WordCamps, in particular the upcoming WCUS and WCTokyo. The importance of having this resource translated to other languages was raised and there’s already an issue to explore that.

Everyone is welcome to try the new guidelines and leave any ideas, thoughts or feedback on GitHub.

Figma Components Library

@drw158 shared an update on the Figma components library. The “master components” have been moved to a new page and have been locked, to prevent accidental edits.

But fear not, there’s a new “Sticket Sheet” page where we can all copy/paste and also see all of the components.

#meeting-notes

New handbook page on WordPress components

There is now a page in the handbook that explains both what WordPress components are and also how to add and edit them.

WordPress Components are the set of interface elements that make up the Block Editor and other projects. This includes several user interface (UI) components like buttons, menus, and text fields. 

As a team, using these components is going to become essential to our work. Having a clear handbook page should help everyone.

A bonus extra workflow on how to get Figma access also now exists to go with this page.

Just like any handbook page, this should be a living document, so if you feel something needs adjusting please comment or start a discussion in #design on Slack.

#wordpress-components #handbook-update

Design meeting agenda for Wednesday 9th October

This is the agenda for the weekly design chat meeting on Wednesday, 9th October 2019, 18:00 UTC.

  • Housekeeping
  • Updates from any specific focuses
  • Discussion
  • Open floor

This meeting is held in the #design channel in the Making WordPress Slack.

Leave a comment if you would like something reviewed, design help or something added to the agenda.

#meeting-agenda

Gutenberg Phase 2 Friday Design Update #35

Happy Friday! Gutenberg 6.6 was released on Wednesday. Let’s take a look at some of the changes.

Gutenberg + WordPress 5.3

As you may know, WordPress 5.3 is on it’s way. This Monday will be the release of Beta 3. While the Gutenberg Team is working to get a few more updates in, it’s a large concerted effort now to sync up with Core and bring all these new Gutenberg updates to Core.

  • October 7 – Beta 3
  • October 15 – Release Candidate 1

Current work

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