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:

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

Design meeting notes august 14th 2019

These are the weekly notes for the design meeting that happens on Wednesday’s. You can read the full transcript on our Slack channel and find the meeting’s agenda here. You can join the Slack channel by following the instructions in our handbook.


@mapk updates us on Gutenberg developments. Gutenberg 6.3 is out! Including new Navigate/Edit modes, and some major Table block updates. Priorities for Gutenberg development will now be discussed every week in the #core-editor channel, great for anyone wanting to stay up-to-date and lend a hand.

@melchoyce did a new iteration in the block directory mockups that she’d like feedback on. User testing will also be done at WordCamp Brighton this weekend.

@davewhitley points us to the Component Review project, to review all the new UI elements introduced in Gutenberg, and make them generic enough to use in all of WordPress and document them properly.

@hedgefield lets us know that WordPress 5.3 will likely include an update for the Site Health grading, and also wonders whether design could take a look at, which is becoming a bit dated. Literally, there is no 2019 content on the landing page. @karmatosed and @melchoyce ruminate on the pressed-for-time meta team and their priorities, concluding that adding a few tickets with mockups and asking in #meta would be the best approach.

Open floor

@blaidalfo expressed interest in helping with the Figma libraries containing the WordPress components. @davewhitley also contributed some documentation which can be found here. An official list of maintainers will be published soon. If you want in, let us know in #design!


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 (merged)

Nested block interactions (merged)

Keyboard Navigation/Edit modes (merged)

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

Gutenberg grid

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

Gutenberg Phase 2 Friday Design Update #22

Hey everyone, happy Friday! ヽ(•‿•)ノ I want to thank @kjellr for handling the update last week while I was away.

Gutenberg 5.9 was released Wednesday! As @youknowriad pointed out, there were over 40 contributors, and 6 of them submitted their first PR.

A few noteworthy features and enhancements included:

Widgets to blocks

Included in 5.9 were a couple improvements for the widgets screen.

Block Directory

@melchoyce posted an update to the Block Directory. There’s a prototype and some mockups for review. If you haven’t offered up some feedback, please do! Mel is looking to have a usability test written for Contributor Day at WCEU.

Tightening up

This week several designers spent time cleaning up loose ends and making small improvements throughout Gutenberg.

Usability testing

Last month’s usability testing videos are up on make/test. Please review them and leave some feedback about your observations.

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

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

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

Design Meeting Notes for 12 June 2019

These are the weekly notes for the design meeting that happens on Wednesday’s. You can read the full transcript on our Slack channel and find the meeting’s agenda here.


Meeting was lead by @boemedia

There will not be a Triage or Design meeting next week (17-19 June) due to most members traveling to WordCamp Europe in Berlin.

There may be some #design channel activity on Thursday 20 June during Contributor Day at #WCEU.

Triage will resume on Monday 24 June after #WCEU.


@mapk cannot attend our #design meeting due to a schedule conflict. Gutenberg updates will resume after #WCEU.

Open Floor

We moved to a ticket review, which @boemedia will comment

@hedgefield reported that the 13xp body text used by WordPress is becoming too small for accessibility reasons.  As resolutions and monitors are increasing, most of the web has embraced 16px as the default standard for text. He would like to explore further, perhaps during #WCEU Contributor Day (aka creating a plugin instead of fiddling with the inspector) so we can see where the bottlenecks are.)

For example some columns in the post overview would be fine with smaller text for the less important properties to save space.

@boemedia asked if someone would be available to develop such plugin and @clorith was mentioned. He collaborated on Site Health with @hedgefield.

@azaozz cited the “design experiments” new plugin that could help out.

@boemedia suggested to open a ticket and if it is not discussed during #WCEU, perhaps could be brought to the table at a later #design meeting.

Next ticket that was introduced by @pbiron, will be added to the call for design to be explored during #triage at a later meeting.

@azaozz brought the attention to another ticket that deals with “inclusive design” around user’s name settings. This is a very culturally diverse topic and there is a link to a really good article on about it. I’ve tentatively set it for WP 5.3, would be great if we can do something for the User Profile screen
Although the topic is an interesting one, we recommended he gather more information as to what are the user needs in reference to name fields and perhaps a discussion with #polyglots is a good start. There is a link from that discusses the issue