Want to get involved? See the handbook and optionally drop into #design to chat. Most active design work happens in the block editor project, consider dropping into Needs design or Needs design feedback.
There’s a WordPress Component Library in Figma. Duplicate to edit, direct access is reserved for the design team.
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.
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:
@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.
@blaidalfo was looking for clarification on the workflow with Figma libraries + Gutenberg GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ 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.
