Gutenberg Phase 2 Friday Design Update #19

I hear some countries have a longer holiday this weekend, so I hope everyone enjoys their time off and gets the rest they need. In the meantime, 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/ keeps progressing.

Navigation 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.

@tinkerbelly posted an IA flow for the block with some ideas around existing menus and new menus. Take a look and leave some feedback.

Widgets to blocks

This is picking up again with lots of PRs coming together to explore different parts of the puzzle. If there’s a particular PR you’re interested in, please jump in with your thoughts.

Block Directory

@melchoyce posted a competitive analysis for the new Block Directory. Some great insight is gained there to help inform the design decisions on this. I get so excited when I hear about previewing blocks in the editor before installing them. I encourage everyone to contribute to that conversation.

Design explorations on the Block Directory will be posted today on 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. https://github.com/.

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). (https://en.wikipedia.org/wiki/Accessibility)

The issues created from the accessibility audit are still moving forward. Many of the low hanging fruit have already been completed. The efforts are now being moved toward the larger and more impactful issues.

Next Friday’s accessibility chat in 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/. will save some time to discuss the keyboard navigation issue. This is a long standing issue that really requires some thought around how everyone views the editor. Is it a continuous view of content, or an application of blocks? With either of these comes a different approach as to how keyboards might navigation the interface. Some good issue to catch up on for this were listed by @afercia:

  • https://github.com/WordPress/gutenberg/issues/15322
  • https://github.com/WordPress/gutenberg/issues/11581
  • https://github.com/WordPress/gutenberg/issues/13663
  • https://github.com/WordPress/gutenberg/issues/5694

Tightening up

I’d really like to see more work on both the Columns block and the Table block in the next few weeks. There’s been some great enhancements lately, so I’d like to keep that movement going.

The color options for blocks is an interesting conversation. Everyone who has voted, (8 total votes) has voted to include both text and background color options for all text blocks. But there was an interesting suggestion which @tinkerbelly also commented about leading us to more explorations around how we introduce background color for the text blocks.


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

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