Gutenberg Phase 2 Friday Design Update #31

I think Fridays are speeding up. It’s hard to believe another one is already here.

Widgets to blocks

Discussion around “element queries” is happening. The reason is because we’d like to show the mobile-web view of Gutenberg in the Customizer for the widget-blocks stuff. The Customizer side still isn’t at the mobile-web view yet, but it’s working better thanks to this PR.

Navigation block

Tightening up

Usability tests

The usability tests are being conducted weekly. One thing I’ve noticed frequently is the lack of ease when placing images along side other images or text. Sure we’ve got blocks that make this possible (which is awesome!) but it’s not quite as discoverable yet.

I submitted an issue a while back regarding how we might make this better. We’d allow users to drag a simple block (Image block) onto another simple block (Image block) which would then automatically create a complex block (Gallery block).

Here’s a couple older gifs courtesy of @kjellr.


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

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

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

Project: Reviewing WordPress Components

What are WordPress Components?

Put simply, WordPress Components are the set of UI elements that make up the Block Editor and other projects. You can find them in the Gutenberg GitHub repo or in the Block Editor Handbook.

As I’ve mentioned in our team chats over the past few weeks, I’ve been working on reviewing WordPress Components. To help make sure as many people can be involved as possible, I’m summarizing the work so far in this post.

Background

Along with a new editing experience, the Gutenberg project has created a growing library of UI components like buttons, menus, and text fields. Although these components were introduced with the Block Editor, they’re generic enough to be useful in various contexts outside of it. I hope that we see them being used more throughout WordPress.

Opportunity

There’s an opportunity to make sure these components are flexible enough for all WordPress experiences, not just the Block Editor. In a related issue on GitHub, @matveb mentions that the components are now at a point where they can be re-examined in a long-term, holistic way. I think the Design team can help with that.

There’s one focus in particular where we can have an immediate impact — a component review.

Component review

A component review is what I’ve been focusing on the past few weeks. It’s a check of each component to evaluate naming, properties, and documentation. I’ve also noted gaps that could prevent the components from being useful. While this review isn’t necessarily visual design, it does help provide design guidelines for future work.

Specifically, this is what I’ve been checking and documenting:

  • Naming, composition, structure, and visual properties (e.g. “size” and “appearance” options for Button).
  • Expanded guidelines for design, development, and accessibility.

For more information on the basics of one of these reviews, and for some examples, check out the links under “How to get involved”.

How to get involved

Ready to get started? There are a couple of different paths to choose from:

  1. Design and Semantics: the most immediate need is feedback on the issues in the “Needs feedback” column of the GitHub project.
  2. Documentation: be on the lookout for issues labeled with “[Type] Documentation” in the coming days.

Right now the review aims to just get the basics right, but the Gutenberg project and its components are an opportunity to inform the future design of WordPress. Some discussions that started in the Gutenberg project have been a catalyst for change in the rest of WordPress. For example, icons that were designed for the Editor sparked a discussion to revamp Dashicons, the icons used in WP Admin. If you want to have an impact in this way, the component review is a great place to start!

I hope this excites you as much as it excites me! Please leave a comment on this post or join the #design Slack channel if you have any questions.

#wordpress-components

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

Design meeting notes for August 7, 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

@mapk shared that there are new contributors doing amazing work. He highlighted work happening on enabling the option to add gradients on cover blocks and the new Icon block.

Mark also reminded everyone about the ‘Needs Design‘ label and that we need everyone’s help.

Other updates

@drw158 invited everyone to discuss ownership and process for our Figma libraries. We need folks contributing with triaging, managing requests, updating documentation and publishing the libraries.

📢 Anyone interested on helping with this is welcome to raise their hand and mention it in the comments below. We’ll discuss this point again in next week’s meeting.

Open Floor

@ibdz asked for help on a HelpHub issue on GitHub about layout on mobile devices.

@azaozz asked for a final look at the new admin email confirmation that is shown every six months after an admin logs in.

#meeting-notes

Design meeting agenda for Wednesday 7th August

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

  • Housekeeping
  • Updates
    • Gutenberg design update: @mapk
    • Any other updates?
  • Discussion
    • Topics for upcoming meetings
  • 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