Gutenberg Phase 2 Friday Design Update #33

Happy Friday, Gutenbergers! (Nope, don’t say that again) WordPress 5.3 is coming fast and I’m feeling the pressure. Let’s keep an eye on these dates together to help keep each other focused.

  • September 16 – Gutenberg code freeze
  • September 23 – WP 5.3 Beta 1
  • October 7 – Soft string freeze for WP 5.3

Block areas

Let’s start with something completely exciting! Block areas in Gutenberg. @matveb walks us through what the future of Gutenberg might possibly look like. This demo is breaking into the full-site editing experience we’ve been dreaming about with Gutenberg.

Widgets to blocks

  • The Legacy Widget block still needs to actually load the widget.
  • The sidebar settings need to reflect the Block Settings.

Navigation block

Looks like we have some direction on the design front. Most of the work here is being moved into PRs so that we can iterate in collaboration with development. Keep an eye on the label, [Block] Navigation Menu in GitHub.

Twenty Twenty default theme

Yep, you heard right! We now have a Twenty Twenty default theme in the works and a wonderful team of people behind it. It’s built with flexibility in mind and full support with the Block Editor.

Related 5.3 Trac tickets

A recent post went up from @kjellr: Discussion: Higher contrast form fields and buttons. It includes some Trac tickets that, if decided upon, will affect Gutenberg as well. These changes include:

  • Darker field borders: porting Gutenberg design pattern to the rest of wp-admin.
  • New button styles: This would need to carry over to Gutenberg as well in a PR once the patch in Trac is approved.

Usability testing

Last month’s usability testing videos are posted! There were 5 videos this last month. While the script was a bit intensive, the users worked their way through allowing us to discover various difficulties with the existing software.

Make sure to take a look at the videos and leave any comments around what you noticed.


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

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

Gutenberg Phase 2 Friday Design Update #32

Happy Friday, everyone! 🙂 Gutenberg 6.4 was just released this week! I’ll highlight a few additions.

User-selected default styles & Circle cropping option for images:

Navigation block

@tinkerbelly wrangled a great Navigation block discussion earlier this week in the #design slack channel. The Nav block has a bit more direction but is still in need of some feedback on this particular issue.

Adding new menu items:
https://github.com/WordPress/gutenberg/issues/17116

Tightening up

As mentioned before, the Gutenberg team is working to make sure there are a clear set of weekly priorities. These priorities are brought up during each #core-editor slack meeting. This week’s set include:


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

#gutenberg-weekly, #phase-2

Gutenberg Phase 2 Friday Design Update #31

I think Fridays are speeding up. It’s hard to believe another one is already here.

Widgets to blocks

Discussion around “element queries” is happening. The reason is because we’d like to show the mobile-web view of Gutenberg in the Customizer for the widget-blocks stuff. The Customizer side still isn’t at the mobile-web view yet, but it’s working better thanks to this PR.

Navigation block

Tightening up

Usability tests

The usability tests are being conducted weekly. One thing I’ve noticed frequently is the lack of ease when placing images along side other images or text. Sure we’ve got blocks that make this possible (which is awesome!) but it’s not quite as discoverable yet.

I submitted an issue a while back regarding how we might make this better. We’d allow users to drag a simple block (Image block) onto another simple block (Image block) which would then automatically create a complex block (Gallery block).

Here’s a couple older gifs courtesy of @kjellr.


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

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

Gutenberg Phase 2 Friday Design Update #30

Happy Friday, everyone! Gutenberg 6.3 was released! Among the many enhancements was the new Navigation Mode that loads by default when opening the Editor. The Accessibility Team communicated the difficulty tabbing through every block control before getting to the next block, so this nifty mode should help alleviate this. It feels natural, but we need more feedback, so a call for testing was recently posted.

Additional improvements with Gutenberg 6.3 include:

WordPress Components

A call for feedback and contributors
Lot’s of work happening as shared in a recent post by @drw158. Dave outlines a great opportunity to unify design patterns across WordPress and outlines the process.

WordPress Component Doc Site
As mentioned in the GitHub PR#16953, This unofficial site is @itsjonq‘s effort to gather the component documentation into one place that shows live examples of each design pattern. It simply imports the component documentation and spits out a beautiful site with visual examples of what each component looks like. I believe Q (itsjonq) is also looking to include live code editing in a sandbox as well on the site. It’s currently a work-in-progress that can be found here: https://q-wordpress-component-doc-site-test.netlify.com/

Widgets to blocks

Improvements included in 6.3:

Block Directory

@melchoyce has been iterating on the Block Directory mockups in Figma. The development is moving smoothly with the block installation process just about completed. @karmatosed will be testing this with contributors during Contributor Day at WC Brighton.

Navigation block

As you all may remember the Navigation block went through a design pivot a few weeks ago. It’s received a focus issue created by @tinkerbelly to get the toolbar controls figured out. Contributors have been dropping in with feedback and opinions, so please join them in the GitHub issue.


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

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

Gutenberg Phase 2 Friday Design Update #29

Hey all! Now that we’re in the second half of the year, design reviews and feedback are extremely crucial to help keep development moving.

Widgets to blocks

Looking back on the list of issues that stemmed from a design review regarding the block areas screen and Customizer, it’s great to see these getting attention. If you haven’t had the opportunity to test the new widgets screen in wp-admin, please do! Gutenberg 6.2 reveals this screen in the plugin’s menu.

Gutenberg 6.2 widgets screen.

In Gutenberg 6.3, a new Experiments setting page is being introduced which will offer the ability to turn on/off the new widgets/block areas screen.

Experiments setting screen in Gutenberg 6.3.

Navigation block

As mentioned last week, the Navigation block is going through a design pivot. This is leading to some really interesting design explorations like this one about including existing block patterns.

Integrating existing block patterns into the Navigation block.

Tightening up

Block Directory

There’s some excellent development on the Block Directory which was posted recently.

New blocks


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

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

Gutenberg Phase 2 Friday Design Update #28

Happy Friday everyone! Gutenberg 6.2 was released this week with loads of improvements. There was another performance boost in loading time from 5.9s to 4.8s. Let’s take a look at the more recent design enhancements.

Widgets to blocks

As mentioned a couple of weeks ago, there are some issues recently created to help move this forward. I’d say we’d all like this to be completed for WordPress 5.3.

Tightening up

Some recent merges happened shortly after the release that will effect the usability of both nested blocks and the keyboard navigation.

Nested block borders and padding
https://github.com/WordPress/gutenberg/pull/14961 (merged)

Nested block interactions
https://github.com/WordPress/gutenberg/pull/16820 (merged)
https://github.com/WordPress/gutenberg/pull/16817

Keyboard Navigation/Edit modes
https://github.com/WordPress/gutenberg/pull/16500 (merged)

There’s also discussion around a Gutenberg default grid going on that needs feedback.

Gutenberg grid
https://github.com/WordPress/gutenberg/issues/16271

Navigation block

After some discussion, the Nav block has taken a design pivot. There’s an effort to include existing block patterns and to help improve basic block interactions that can improve other blocks having similar issues.

New stuff


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

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

Gutenberg Phase 2 Friday Design Update #27

Happy Friday, everyone!

Widgets to blocks

@karmatosed and I did a review on the state of the widget-block screen and Customizer this week. Plenty of issues were created to help push this along.

Tightening up


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

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

Gutenberg Phase 2 Friday Design Update #26

Happy Friday y’all! Gutenberg 6.1 was just released Wednesday.
“ヽ(´▽`)ノ” Included in the release are some great motions for reordering blocks. I’ll add that while Gutenberg 6.0 took hit on performance, it been optimized better in 6.1.

Widgets to blocks

There are some really great experiments being added to the plugin.

Block directory

A recent post went up concerning the wp-admin concepts. Block Directory in WP-Admin Concepts @melchoyce has done some wonderful work here to get the conversation started.

Tightening up

Usability Testing

Several people took the usability test during WCEU. Part 1 and Part 2.

I’ve also recently posted the usability tests from June. Watch the videos and leave some feedback!


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

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

Gutenberg Phase 2 Friday Design Update #24

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

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.

Other in-progress issues to watch

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 UI 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

Gutenberg Phase 2 Friday Design Update #23

Me and roughly 3,400 other community members are away at WordCamp Europe but I still wanted to post another update. Most of the Gutenberg team is here as well, and the slack meetings were postponed for the most part, so this week was very light.

June 20, Thursday, was Contributor Day at WCEU and we had a wonderful turnout of designers. At the Gutenberg Design table, several of us gathered around and contributed with comments on issues and/or mockups. Let’s take a look at what we worked on.

We also talked about the future of Gutenberg, caught up on the phases and checked out the recent features. We shared stories, and everyone was genuinely excited to see how Gutenberg is improving.

Thank you everyone for contributing this day and I look forward to chatting with you all in slack.

Usability testing

In addition to Contributor Day, several of us were running usability tests during the WordCamp. Once we’re back, these videos will get posted for everyone to review and share their thoughts. Stay tuned.


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

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