Design Meeting Notes for 21 August 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

Areas to contribute recap

@boemedia asked for a little update this week on ways you can contribute right now. There are a few ways you can contribute right now to call out:

  • Gutenberg: join the triage sessions each week and also the ‘needs design feedback’ label.
  • Weekly core triages.
  • Any tickets with 5.3 marked, the next focus for this team on .org.
  • Last but not least, don’t forget there is always meta trac to help in!

Updates

Gutenberg design update

@mapk mentioned that there has been lots of work to help provide inline tips and wants some comments on one specific design recently shared:

A modal that would appear for first-time Gutenberg users and will walk them through a few things.

The discussion was around whether tips are intrusive and have a negative impact on the user when trying to get to the editor since there is data that users close them as soon as they appear. The #design team agreed that it is a good idea to keep on trying things and that inline tips for users should continue with the idea that tips would eventually disappear.

Next @mapk asked for a mockup to illustrate his point in a gradients ticket https://github.com/WordPress/gutenberg/issues/16662#issuecomment-523104772

Next up is a new image format control that offers full-screen-height for images 

A new problem was introduced by merging this new control (icon) to the alignment group of icons since it relates to the full-width and wide formatting. But these icons are now all collapsed into a dropdown. This new formatting option can be selected in addition to the other options like full-width. Now we need to offer the ability for users to multi-select options in the dropdown.

And do we show both selections in the toolbar if there are two options selected?

The highlight of the discussion focused on the name, icon, and utility. Since it is “full-height” equivalent of “full width”, @sarahmonster suggested to call it  “full-height” instead of “expand to viewport” which is a bit technical. The wording is important because it doesn’t refer to the document’s full-height, but to screen height.

@melchoyce also mentioned that the icon is used as “flip image” in the image editor, so they would need a new icon. There are no plans to request a new icon.

We also agreed that wide/full width belong to sizing and not alignment and that would be a better separation. Under sizing, there could be different combinations: full size, wide, fullscreen, etc. This option would avoid the need for multiple selections.

@nadir requested some design feedback on a PR to allow directly setting a background to Cover and @nadir agreed to implement @kjellr’s suggestion on his last comment.

Open floor

@blaidalfo was looking for clarification on the workflow with Figma libraries + Gutenberg GitHub repo. He followed the instructions posted by @davewhitley:

https://wordpress.slack.com/archives/C02S78ZAL/p1565201556382200

https://wordpress.slack.com/archives/C02S78ZAL/p1565203150415900

https://wordpress.slack.com/archives/C02S78ZAL/p1565808369103100

@karmatosed mentioned the Project: Reviewing WordPress Components and mentioned that the ideal workflow is being worked on at the moment. 

We will continue talking about WordPress Components in next week’s meeting.


#meeting-notes

Design meeting agenda for Wednesday 21st August

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

  • Housekeeping
    • Areas to contribute recap
  • Updates
    • Gutenberg design update: @mapk
  • 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 #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

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.

Updates

@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 wordpress.tv, which is becoming a bit dated. Literally, there is no 2019 content on the wordcamp.tv 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!

#meeting-notes

Design meeting agenda for Wednesday 14th August

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

  • Housekeeping
  • Updates
    • Gutenberg design update: @mapk
    • Block directory update
  • 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 #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

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