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.

Housekeeping

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.

Updates

@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 https://github.com/WordPress/gutenberg/issues/14744, 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. https://github.com/WordPress/design-experiments

@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 https://core.trac.wordpress.org/ticket/44900, 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 w3.org about it. I’ve tentatively set it for WP 5.3, would be great if we can do something for the User Profile screen

https://core.trac.wordpress.org/ticket/6148
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 W3.org that discusses the issue https://www.w3.org/International/questions/qa-personal-names

#meeting-notes

Design meeting agenda for Wednesday 12th June

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

  • Housekeeping
    • Notetaker will be @estelaris
    • The meeting will be facilitated by @boemedia
    • Next week there will be no meeting or triage sessions, they will resume the following week after WordCamp Europe.
  • Updates
    • Gutenberg design update: @mapk
  • 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

Block Library: Mockups & Prototype

This is an update to the Block Library project that’s in-progress. Feedback has been taking place on GitHub and in Figma. My thanks to all the folks who have chimed in to help improve these mockups!


Prototype

A screenshot from the Figma file, for illustrative purposes.
Figma: Source File / Prototype

Installing a block

Installing a third-party block from the block directory, via the block inserter

Search Results

If you search for a block, but nothing installed in your block library shows up, you’re presented with third-party blocks that show the block icon, title, author, and rating. Pressing on a block brings up more details.

Details

The Details screen is similar to the plugin cards we see in the Plugin Directory. It’s an abridged version of the block information, showing icon, title, author, star rating, and description. (This would ideally use the short description that plugins provide for cards.)

“More Details” would bring you to the full details screen in the Block Directory, and “Add” inserts the block into your content.

Installation

Once the block is inserted into your content, WordPress would ideally start silently installing it in the background while you fill in placeholders and change settings. If you change your mind and decide this block doesn’t work for you, WordPress would deactivate and delete the block when you remove it from your content so you don’t end up with a junk drawer of discarded blocks in your library.

What happens if your installation fails

In some cases, the installation won’t work — for example, if your internet cuts out while trying to install the block. In these cases, WordPress needs a way to recover from that error. This flow explores when a block isn’t able to be silently installed.

Pre-Publish

If you have the pre-publish panel enabled, you’ll see another reminder that you’ve added new blocks to your site, and another Details link that’ll take you into the Block Directory, in case you want to review it again.

Next Steps

  • The design team will look at creating tests for this (or testing it out themselves) during the WCEU Contributor Day; look for a recap on this p2 afterwards.
  • Between now and then, the prototype will continue to be open for feedback and iteration. I’d like to have all feedback for round one of testing in by Wednesday, June 19th, so I have time to iterate before WCEU.
  • You can comment with feedback here, or directly in Figma, if you’re a part of our team account (You can ask for access in #design).

#block-directory, #block-library

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

Design Meeting Notes for 5 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.

Updates

Gutenberg phase two

@kjellr let us know that The ability to Group and Ungroup selected blocks was merged in today. Also, temporary “Snackbar” notices have been introduced.

A reminder that the experimental Gutenberg widgets page is live and in the plugin, feel free to leave feedback or follow along.

@mapk would like some more thoughts on category labelling and grouping for blocks.  

And finally: @joen’s “clickthrough” PR to help improve nested block interaction is sorting out some technical details, and will land soon.

For further reading on these points, check out Friday’s update.

@karmatosed reminded us of an additional plan to run a usability testing table for Gutenberg at WCEU, as planned at the WCUS table last year.

Block directory

@melchoyce mentioned there are lots of chatter going on regarding block directory and the comments are helping updating designs in Figma. A new post on this will be up at the end of the week, in the meantime, keep commenting on GitHub.

On the same topic, @marybaum volunteered as a copywriting organizer to audit all the new strings. The audit will be helpful when handling the temp strings to dev, as G 5.2.2. is expected to launch by June 25 or 26. And testing of the new strings should start by early July.

Discussion

WCEU contribution day tasks

@karmatosed came up with plan based on feedback for the design table at #WCEU.

Morning

  • Welcome and guide to everything you need to know to contribute to design: quick under 30 mins – @karmatosed
  • Split into groups!
  • Gutenberg design group – @mapk
  • Figma library organizing group – @tinkerbelly
  • Possibly a testing group for block directory – by itself or done at the same time as triage facilitated by @karmatosed
  • Triage group: this will be done through Slack to give others an opportunity to join in/be visible – @karmatosed

Late afternoon

  • Get back together and have a chance to talk about what was done.
  • Wrap up.

Participants are free to sit in any group and change in between if they want to learn about something else.

Open floor

Experimental plugin

@kjellr developed a plugin that will allow us to experiment with designs. Figma is great for making static comps and simple prototypes. Trac is great for getting polished code published. But as a design team, we don’t have a great place for work that lies in between those two poles. This plugin + repo is a place to try out half-baked ideas in the context of WP-Admin

It works as a plugin – download & Install it – and can be used to:

  1. Try experiments. Download & install the plugin on a test site to give existing experiments a try. They can be activated on the settings page (`General > Design Experiments`). Each experiment includes a link to a GitHub page for discussion and feedback.
  2. Build and submit your own experiments. There are instructions in the repository for this.
  3. Share ideas. Submit mockups or written ideas, and maybe someone will run with it and build out a prototype.

The use of italics

As designers, we are exploring how to build a better text hierarchy for WP-Admin and Gutenberg.

Today we discussed italics and @kellerj mentioned a ticket with examples as to why Avoiding italic text is better for accessibility and readability and there are also talks about changing the use of italics in Gutenberg.

Our next steps are to define when the use of italics is appropriate – @melchoyce and to get a definite consensus on the text treatment for help text underneath form fields

Figma Library Organization

@drw158 gave an update on the library organization in Figma and they are almost done with all of the base UI components in WordPress/components.

Feedback and evaluation would be great (accuracy, consistent naming, constraints testing, etc). Next documentation will be added and deprecate the existing libs and publish new ones. @karmatosed mentioned that deprecated links need to be fixed or relinked also in the handbook.

Icons from dashicons GitHub have been added and there should be a new library called  ‘WordPress Meta’ for Meta components in Gutenberg.

#meeting-notes

Design meeting agenda for Wednesday 5th June

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

  • Housekeeping
    • Notetaker will be @estelaris
  • Updates
    • Gutenberg phase two: @mapk
    • Block directory: @melchoyce
  • Discussion
    • WCEU contribution day tasks
  • 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 #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

Design meeting notes for 29 May, 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.

Updates

Gutenberg phase two

Gutenberg 5.8 was released! Yay! @mapk noted that this release includes some performance improvements along with some really cool features. He also asked attendees to look into some relevant pull requests in GitHub:

He invited everyone to try out Gutenberg 5.8 and play with the new widget-block areas screen, found on the Gutenberg plugin wp-admin sidebar menu.

There’s also a new proposed flow for column layout suggestions. @kjellr prompted everyone to offer feedback.

Block directory

There’s new updates on the block directory by @melchoyce. @mapk noted that there’s a new map of the experience flow, and lots of sketches that could use feedback.

Discussion

Font sizing increases

@hedgefield shared how at Yoast they sometimes have had to deviate from Gutenberg’s default styling due to the default font size being too small for them to accommodate several heading levels, so there’s been talk about the possibility of raising the default font size in WordPress.

The team discussed different font size options and what would be the best choice considering accessibility and internationalization. There was consensus around the idea of trying out different options on Figma mockups or via the browser’s web inspector. @hedgefield will try these suggestions and report back next week.

Figma organising

There’s agreement on some things we can do to better organize the Figma libraries:

  1. Splitting one library into a few smaller libraries.
  2. Component naming: looks like mirroring the code naming convention is a good path forward, e.g. “TextControl”.
  3. Establishing an organisational structure for components.

As for component naming, @drw158 proposes just adding a space so it’s more human readable, e.g. “Text Control”.

@drw158 and @tinkerbelly will be volunteering to move this initiative forward in the next week or two.

Open floor

Block-based vs. inline color controls

Seeing that there was time left in the meeting, @kjellr added this discussion topic that was initially raised by @paaljoachim. The team agreed to create a text level color issue on GitHub to further explore this idea.

#meeting-notes

Block Library: Initial Explorations

Wanted to give an update on the Block Library project that’s in-progress!

Experience Flowchart

Tried to map out every part of the experience flow for this project:

GitHub Issue

h/t @babbardel for your help!

Sketches

Sketches are now up for the following flows:

Please take a look and give feedback. Each issue also has a set of questions associated with it that I’d love thoughts on.

+make.wordpress.org/meta

#block-directory, #block-library