Gutenberg Phase 2 Friday Design Update #21

Widgets to blocks

The experimental widgets screen introduced in Gutenberg 5.8 is still being iterated on. Feedback is being collected in the GitHub issue, and there’s a short-term project board to track tasks.

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

Work on the block directory is continuing, with lots of great discussion happening in the GitHub issues and in the Figma file. Expect a summary post with updated designs soon.

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)

• Support for the reduce-motion media query has been added to all animations and transitions throughout 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/.
• PRs have been opened to begin working through some text zoom issues identified in the Tenon report:
  • Overlapping text in the Content Structure popover.
  • Visual bugs for buttons, select controls, and input fields.
• Contributors are considering an update to improve contrast for modal overlays.
• During last Friday’s Accessibility chat, there was some cross-team discussion around accessibility issues with the 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 used in Gutenberg. A small team has been discussing and sketching up issues, and hopes to share some thoughts soon.

Tightening up

• “Snackbar” notifications have been added to Gutenberg, and enhanced with animation. Detailed design and accessibility documentation for these notifications is looking for feedback.
• Improvements to how the spacer block works alongside floated images.
• Line breaks have been cleaned up in the Media + Text block.
• The Table block placeholder has been redesigned.
• Inline text color controls are being designed and built.
• An exploration into adding the slash (“/”) inserter in the post title input is in progress.

There’s also been a lot of great work regarding nested blocks this week:

• The ability to Group and Ungroup blocks has been merged in.
  • This arrived alongside updated iconography for the Group block and its actions.
  • Keyboard shortcuts for these actions are in the works.
• Contributors are discussing possible clarification to the copy around Group blocks. Feel free to share thoughts in the ticket.
• A “clickthrough” approach for working with nested blocks has also been merged. Look for upcoming enhancements to this feature to make to further improve the way we interact with nested blocks.

---

Finally, a reminder that there’s a plan to run a usability testing table for Gutenberg at WCEU. Read about the plans and sign up to get involved.

Thank you for reading and for all your contributions. I hope everyone has a great weekend!

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