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

Design meeting notes for July 31, 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.

Updates

Gutenberg

Gutenberg 6.2 was released today! 🎉 🙌

@kjellr‘s PR to add additional borders to nested blocks is now merged and slated for the 6.3 release.

The design approach is changing for the Navigation Block.

Progress is being made on snap-to-grid functionality. Testers are appreciated for this early PR.

There are more contextual help iterations happening, including an intro modal, and a slide-out “Help” panel in the block library.

All of those issues could definitely use some feedback, so feel free to get involved!

Other updates

@assassinateur is asking for feedback and design help on work happening for the Icons Block.

Open floor

@joyously asked how would it look like if the Themes page in wp-admin could display data from a readme.txt file. You can read more and leave feedback here.

#meeting-notes

Design meeting agenda for Wednesday 31st July

This is the agenda for the weekly design chat meeting on Wednesday, 31st July 2019, 18:00 UTC.

  • Housekeeping
  • Updates
    • Gutenberg design update: @mapk
    • Any other updates?
  • Discussion
  • Sharing corner: Let’s each week share something great, if you’ve got something to share please add as a comment, bring to the meeting. It could be a new tool or a piece of inspiration.
  • Open floor

This meeting is held in the #design channel in the Making WordPress Slack.

Leave a comment if you would like something reviewed, design help or something added to the agenda.

#meeting-agenda

Design meeting notes for July 24, 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.

Updates

Gutenberg

 Gutenberg 6.2 release is being pushed back a week.

@mapk requested testing on the following PRs:

Mark also added that there’s been a lot of improvements to the Table block.

@melchoyce asked for more feedback on the Block Directory.

Component Audits

@drw158 shared that the component audits he’s been doing are all done. 🎉 He’s been auditing each React UI component that Gutenberg provides while looking for opportunities to improve naming, structure, composition, and visually-related props. Here’s more background on why we’re doing them and as always, feedback and discussion are most welcome.

Discussion

Design team Trello board

@karmatosed has been doing some triage and commented on a few cards on our Trello board. (If you can’t see the board, comment on this thread in Slack to be added).

WordPress style guide in handbook

@karmatosed has been going through and seeing what can be added, removed and/or adjusted on the handbook style guide. She has come up with a list of suggestions and documented them in this spreadsheet. Your feedback is welcome and can be left in the comments of this post.

Open floor

@kjellr shared the unstyled Gutenberg starter theme. This theme is built to easily test unstyled Gutenberg. He’s been working on it and aiming to submit to the Theme Repo later this week so it’s available to more folks.

#meeting-notes

Design meeting agenda for Wednesday 24th July

This is the agenda for the weekly design chat meeting on Wednesday, 24th July 2019, 18:00 UTC.

  • Housekeeping
  • Updates
    • Gutenberg design update: @mapk
    • Any other updates?
  • Discussion
    • Design team Trello board: ‘meeting discussion’ label.
    • WordPress style guide in handbook iterations discussion.
  • Open floor

This meeting is held in the #design channel in the Making WordPress Slack.

Leave a comment if you would like something reviewed, design help or something added to the agenda.

#meeting-agenda

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

Design meeting notes for July 17, 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.

There are no housekeeping topics.

Updates

Gutenberg Design update

@mapk updates us on what’s been going on with Gutenberg and design:

Patterns API for blocks

A discussion on language for labels follows, and @boemedia suggests testing designs with other languages besides English. As English is usually super short, and designs tend to break when translating into, for instance, German. @karmatosed suggests creating mockups with other languages too.

Another concern that’s raised by @nrqsnchz is, that he wonders how adding labels to the block toolbar is going to look like, since space is limited.

Discussion

Design team Trello Board

The design team used to use the Trello board for task management outside of the focus on Gutenberg and tasks not related to Trac tickets.

@karmatosed raises a few discussion points around it:

  • Do people still want to use it?
  • Should we have a meeting where we go through and decide triage style what to do or close?
  • Is it useful?
  • How can it be more useful but still be approachable for new people without reading a manual?

As some things have changed since the design team used the Trello board in the current setup, Tammie suggests the following:

  • Before next week I can move over resources column to handbook
  • Before next week I will also ping each ticket to see if owner wants to do anything with it or unasign.
  • Next week we do triage of board : do not go through and see what we want to do or not. Perhaps have a ‘future maybe’ column?
  • Each week we add in a timeboxed 15 minutes of ‘Trello checking’

Once it’s in order we can also open for new ideas.

If you have thoughts about this, please feel free to leave it in the comments section below these notes, or reply on Slack (account required).

Sharing corner

@boemedia feels inspired by the design explorations Andy Clarke does for Smashing Magazine. She also recommends reading the book ‘Art Direction for the Web’ that he wrote for Smashing Magazine.

@davewhitley likes to remind everyone of the component naming audit that happens in the Gutenberg repository . If you’re interested in name changes for the component and how they are composed, please hop onto the issues.

#meeting-notes

Design meeting agenda for Wednesday 17th July

This is the agenda for the weekly design chat meeting on Wednesday, 17th July 2019, 18:00 UTC.

  • Housekeeping
  • Updates
    • Gutenberg design update: @mapk
    • Any other updates?
  • Discussion
    • Design team Trello board.
  • Sharing corner: Let’s each week share something great, if you’ve got something to share please add as a comment, bring to the meeting. It could be a new tool or a piece of inspiration.
  • Open floor

This meeting is held in the #design channel in the Making WordPress Slack.

Leave a comment if you would like something reviewed, design help or something added to the agenda.

#meeting-agenda

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

Block Directory in WP-Admin Concepts

You may have spotted during @matt‘s Summer Update at WCEU a new wp-admin section for Blocks. I wanted to share those early concepts here.

View Figma Prototype

About Blocks

Rather than jumping straight into a list of blocks, I wanted to explore what an introduction to blocks could look like as a landing page. This page could feature some links to tutorials (that could open either externally, or in a modal), some basic FAQs, and a support link.

You’ll notice the new header style, inspired by the new Health Check screen and built on some concepts from the Design Experiments plugin. This new section provides a good opportunity to expand on this pattern, and to show how it could benefit WordPress users by providing context to each screen.


Add New Blocks

This section is largely inspired by wp-admin plugin cards, and the WordPress.org plugin details screen.

I also think we should update across wp-admin as well, since the current modal feels very outdated and doesn’t present information as cleanly or as organized as the .org modals:

Inside the modal, you’d also be able to demo a block before installing. @ck3lee has figured out how to make this possible 🎉

We’d tap into the Shiny Updates framework to make installation and activation quick & easy.

The upload flow would work the way plugins do — I’ll flesh out some designs around that in future iterations.


Installed Blocks

This screen would be a list of all installed third-party blocks, so you can activate, deactivate, delete, etc. in bulk, using a traditional list table. I’ve added an “instances” link, which would show all posts and pages the third-party block is being used in.


Manage Blocks

This is the screen I’m most “meh” about, which is pretty much a duplication of the block management modal inside the editor. I think we need to have this management available within this section, but I’m not sure if this is the best approach to tackling it.


Reusable Blocks

Currently, the only way to reach the Reusable Blocks screen is through either the block library inside the editor, or a link in the settings dropdown in the editor. Putting it in a new Blocks section gives it an easier-to-find home.


Feedback

These are still early concepts, so it would be good to get some early impressions. Specifically, I’d like everyone’s thoughts on:

  • Thinking through the flow of managing blocks on your site, does it feel like any important tasks are missing from these concepts?
  • Would you expect any of these screens to be combined?
  • Can you think if any stress cases these screens will need to account for?
  • What would you like to see next for the Block Directory? Are there any other block management features you would benefit from?

#block-directory