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

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.

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

Accessibility

Tightening up

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


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

Gutenberg Phase 2 Friday Design Update #20

Happy Friday! Gutenberg 5.8 was released Wednesday. Over 42 contributors helped bring this release to the masses. Let’s get to the Gutenberg design details.

Some of the recent updates in the plugin include:

  • Headings block supports custom text colors.
  • Gallery images can be reordered from within the block.
  • Proof of Concept of the block-based widget screen.
  • Update to the Calendar block icon.
  • Width constraints on the Media+Text block.
  • Can drop blocks into the Group block with new block appender.
  • Shortcode block input height adjustment.
  • And many more!

Navigation block

During this week’s core chat, contributors discussed the technical implementation of the Navigation Menu block. Nothing was decided, and considerations are being thought through entirely. Developer reviews can really help keep this moving forward.

Widgets to blocks

The /wp-admin widget-block interface is moving forward thanks to ongoing feedback and iteration. The accessibility team discussed the designs during their meeting and provided additional feedback.

It’s still very rudimentary right now, but it does allow some basic interactions. Please try it out and leave some feedback in the Github issue.

Tightening up

Accessibility

Feedback on publishing flow issues

The Gutenberg Team would really like to get some feedback on the latest publishing flow design proposals.


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

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

Gutenberg Phase 2 Friday Design Update #19

I hear some countries have a longer holiday this weekend, so I hope everyone enjoys their time off and gets the rest they need. In the meantime, Gutenberg keeps progressing.

Navigation block

@tinkerbelly posted an IA flow for the block with some ideas around existing menus and new menus. Take a look and leave some feedback.

Widgets to blocks

This is picking up again with lots of PRs coming together to explore different parts of the puzzle. If there’s a particular PR you’re interested in, please jump in with your thoughts.

Block Directory

@melchoyce posted a competitive analysis for the new Block Directory. Some great insight is gained there to help inform the design decisions on this. I get so excited when I hear about previewing blocks in the editor before installing them. I encourage everyone to contribute to that conversation.

Design explorations on the Block Directory will be posted today on Github.

Accessibility

The issues created from the accessibility audit are still moving forward. Many of the low hanging fruit have already been completed. The efforts are now being moved toward the larger and more impactful issues.

Next Friday’s accessibility chat in slack will save some time to discuss the keyboard navigation issue. This is a long standing issue that really requires some thought around how everyone views the editor. Is it a continuous view of content, or an application of blocks? With either of these comes a different approach as to how keyboards might navigation the interface. Some good issue to catch up on for this were listed by @afercia:

  • https://github.com/WordPress/gutenberg/issues/15322
  • https://github.com/WordPress/gutenberg/issues/11581
  • https://github.com/WordPress/gutenberg/issues/13663
  • https://github.com/WordPress/gutenberg/issues/5694

Tightening up

I’d really like to see more work on both the Columns block and the Table block in the next few weeks. There’s been some great enhancements lately, so I’d like to keep that movement going.

The color options for blocks is an interesting conversation. Everyone who has voted, (8 total votes) has voted to include both text and background color options for all text blocks. But there was an interesting suggestion which @tinkerbelly also commented about leading us to more explorations around how we introduce background color for the text blocks.


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

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

Gutenberg Phase 2 Friday Design Update #18

Happy Friday everyone! ヽ(•‿•)ノ Why so happy, you ask? Because Gutenberg 5.7 has been released this week!

In response to the accessibility audit there have been many great accessibility improvements. Everyone recognizes there’s still a ways to go, but it’s on the right path with so many issues already resolved.

Some of the impressive enhancements in 5.7 include:

Navigation block

While still in a rough PR, the Navigation block is being thought through and iterated upon. It’s using a new pattern to control the inner blocks (individual menu items) which can use some feedback. Chime in on the PR in GitHub.

Unselected

Selected

Widgets to blocks

If you’re itching to fiddle around with the wp-admin interface for widgets that are now blocks, and you have the Gutenberg plugin installed, you can access it through the plugin’s wp-admin menu here:

There are still a lot of bugs, but it should present the concept well. The new widgets screen is still limited in its abilities right now.

Also, if you haven’t read the UX flow for widget-to-blocks proposal, please do! I’m looking to connect with some plugin developers that use widgets to get their feedback soon. If you have some ideas of who I should contact, let me know in the comments.

Tightening up

There’s been a lot of focus on navigating through nested blocks recently. Some of the wonderful explorations include a PR for dashed borders to help the user see the nested levels, and a clickthrough PR which makes it so much easier to select the parent block and then dive into nested blocks purposefully. These two PRs will add so much to the experience!


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

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

Gutenberg Phase 2 Friday Design Update #17

Sorry, I was away last week and didn’t get an update published. Great things have been happening lately. Let’s take a look.

Gutenberg 5.6 improvements

Usability testing

Usability tests are being conducted weekly to evaluate Gutenberg. Posts will be published on make/test to share the videos so that everyone can comment and share their observations.

Accessibility audit

The accessibility audit performed by Tenon, LLC. through WPCampus has been released. There were several issues created in Github. The Gutenberg team, Accessibility team, and others are triaging them. Several were found to be either duplicates or Core bugs that required work beyond Gutenberg. Many of the other issues already have conversations leading to well-thought solutions. There’s been amazing collaboration between WordPress.org teams with this effort!

Tightening up


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

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