Gutenberg Phase 2 Friday Design Update #24

Happy Friday, everyone! It’s time for a roundup of this week’s 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/ links.

Gutenberg 6.0

A new version of Gutenberg was released on Wednesday! Version 6.0 is packed with enhancements, and includes a new set of layout options inside the columns 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. placeholder. This functionality will be expanded and made available to other blocks in the near future.

Here’s a selection of other enhancements in this release:

• Snackbar notifications are now available on the experimental widgets screen
• The Group Block now ships with an inner container div to help make theme styling easier.
• Placeholder text phrasing has been synced up for all the media blocks.
• Embed block placeholders now come with better descriptive text and a documentation link.
• Brand icons in the Block Inserter are now grayscale.
• The modal overlay (or “scrim”) color is now darker, for better 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), and to sync up with the rest of WP-Admin.

You can read more about these updates in the release post.

Updates from WCEU

This year’s Summer Update at WCEU featured Gutenberg prominently. It included an overview of Phase 2 work to date, along with some inspiring examples of things to come: the block directory, enhanced motion, and experiments like “snap to grid” for blocks.

The usability testing table was a great success! Thanks to everyone who helped make that possible. The videos from those tests will be posted next week.

A number of design contributors worked on Gutenberg tickets during Contribution day as well. A recap of those was posted today.

Editing beyond the post content

@youknowriad has opened some issues that begin laying the groundwork for Gutenberg editing outside of just the post_content. This is an exciting step towards full-site editing, and a great area to keep your eyes on.

• https://github.com/WordPress/gutenberg/issues/16281
• https://github.com/WordPress/gutenberg/issues/16282
• https://github.com/WordPress/gutenberg/issues/16283

Other in-progress issues to watch

• Improvements to the publishing flow are underway, and could use feedback.
• Beautifully fluid block reordering animations are almost ready to be merged.
• More improvements to nested block interaction are on their way.
• The preview component is being improved.
• The Columns block continues to be iterated on.

Updates to the WordPress Figma component library

Also of use to designers working on Gutenberg: @drw158 has published some excellent new Figma component library updates. These include Figma components that mirror the base UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. components found in the @wordpress/components npm package. 🎉

---

Thank you for reading and for all your contributions. Have a great weekend!

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