Welcome! This all-volunteer team needs designers of various kinds. See our handbook and drop into #design once signed up for volunteer opportunities.
Our vision is to be the go-to resource for design for other teams across the WordPress open source project.
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.
There’s been a post that proposed creating structure and strategy around the About pages. The goal is to have a smoother process around these pages, and they are an opportunity to showcase great design.
Ideally we could use Gutenberg in future releases to create the About pages for those releases. The obstacles seem to be dev related in terms of time needed. Lookout for a post sharing next steps this week.
There are several Trac issues that need design feedback for the next release of WordPress. The first one implements darker form field borders throughout WP-Admin. The second issue proposes some new, more accessible, button treatments. Ideally these should be evaluated together. Some discussion was shared on Slack, and further thoughts can be dropped into Trac.
There’s an issue to discuss where search should live in the block directory. Some additional discussion was shared in Slack, further ideas can be dropped into the Github issue, feedback is absolutely welcome!
A question was raised in Slack related to selecting a color within the Color Settings of a block. When a color is chosen it’s hard to tell what the color is because the checkmark takes up most of the swatch area. In particular this makes it hard to tell if the selected swatch is a gradient. An issue was opened to discuss further.
This is the agenda for the weekly design chat meeting on Wednesday, 4th September 2019, 18:00 UTC.
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-agendaHappy Friday, everyone! 🙂 Gutenberg 6.4 was just released this week! I’ll highlight a few additions.
User-selected default styles & Circle cropping option for images:
@tinkerbelly wrangled a great Navigation block discussion earlier this week in the #design slack channel. The Nav block has a bit more direction but is still in need of some feedback on this particular issue.
Adding new menu items:
https://github.com/WordPress/gutenberg/issues/17116
As mentioned before, the Gutenberg team is working to make sure there are a clear set of weekly priorities. These priorities are brought up during each #core-editor slack meeting. This week’s set include:
Thanks for reading, staying informed, and contributing anywhere you can!
X-comment from +make.wordpress.org/core: Comment on Component Maintainers in 5.3
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.
There’s a new About Page in every WordPress release. @karmatosed posted an article to discuss this page. Please leave your thoughts in the comments at the bottom of the post. We will discuss this further in next week’s meeting.
Gutenberg 6.4 was released this week. What’s new?
And lots more.
@mapk could use some design eyes on the upcoming Replace Image dropdown.
The team is also working on multi-selecting non-consecutive blocks.
For anyone with some theming experience and CSS knowledge, there’s a discussion about whether to use inline styles or classes for gradients. Give your feedback in ticket if this is something you’re interested in!
If you want to help out with Gutenberg design: each week at 17:00 UTC, @mapk organises a triage session in the Design Slack channel.
@shaunandrews asks for feedback around the nav block settings.
@estelaris started gathering requirements from notes and Github and is ready to make mock ups of some templates.
She has some questions about the use of the anchor tag on the title: does it need to be visible? @melchoyce and @shaunandrews say yes, they use it to easily bookmark the url. According to Estela, the docs team is not aware of this use. A short discussion follows, and @itsjonq shows a great example of how this is used on Github. The people attending the meeting suggest proposing this as an alternative to the # that’s now used. If you have thoughts or idea’s on this, please leave them in the comments of this post.
The mobile view homepage for the helphub has issues, due to the large space that’s taken by the blue search section. There appears to be nothing else on the page. @mapk proposes to look at this site-wide, as other pages have this issue too. We therefore need a broader solution for mobile display. According to Mel Choyce, every instance of the blue banner is a different code base. If you have thoughts on this, please leave your comments here or in the ticket for this issue.
@shaunandrews would love to see more chatter about the pattern of the full screen modal and its potential use. Read the Slack discussion on this topic and add your thoughts there or on the ticket.
For each new major WordPress release, a unique “About” page is created that showcases features from that release cycle. It’s a chance to provide an overall summary of what’s new. As a fairly self-contained project (in scope as well as time), the About page could offer an opportunity for design contributors to support the release of a new iteration of WordPress.
However, there are currently some challenges in the process of designing this page:
This all sounds a bit bleak, so let’s talk about how we could fix it!
Let’s start by having a discussion about what we, as a design team, can do to make this process streamlined, clearer, and easy to get involved with.
I have a few discussion points to get us thinking:
Let’s continue the discussion in the comments. In a week, I’ll summarize the discussion and post the next steps.
This is the agenda for the weekly design chat meeting on Wednesday, 28th August 2019, 18:00 UTC.
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.
I think Fridays are speeding up. It’s hard to believe another one is already here.
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.
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!
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 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.
This is the agenda for the weekly design chat meeting on Wednesday, 21st August 2019, 18:00 UTC.
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.
