Gutenberg Phase 2 Friday Design Update #46

I hope you all are staying safe out there in the world today! This week in 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. Design has several things going on. Let’s address them below.

Full site editing

Overview link:

Multi-entity saving has an interesting prototype uploaded just yesterday.

Multi-entity saving in 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.

Or another take on it in a dialog modal.

Multi-entity saving in modal

I ran a short Twitter poll that asked how people would like to be informed about saving certain parts of their site. Based on those that answered the poll, the preference for a multi-editing save at the end of all their edits. We don’t use Twitter polls to direct our design decisions, but they can help inform them.

Lots of discussion and explorations are continuing to go into the Toolbar in the Editor. This particular mockup helps convey where the designs are leading currently.

Global styles

Overview link:

The global styles minimum viable productMinimum Viable Product "A minimum viable product (MVP) is a product with just enough features to satisfy early customers, and to provide feedback for future product development." - WikiPedia (MVPMinimum Viable Product "A minimum viable product (MVP) is a product with just enough features to satisfy early customers, and to provide feedback for future product development." - WikiPedia) includes some basic elements that will help anyone edit their styles across all pages/posts. These elements include: font-family, font-scale, line-height, and link colors. This issue defines how this may look:

Global styles in sidebar

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

The block pattern work is already included in the current 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 Plugin Directory or can be cost-based plugin from a third-party right now as an MVP. We’re working to add more patterns that are great for common layouts that many can take advantage of. Once more patterns are added, work will continue on the Block Library to include them there as well.

Testimonials pattern

Get involved

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