Although not everyone celebrates the same seasons or holidays, @karmatosed suggested to let next week’s 18 December be the last meeting of the year and meet again on 8 January.
To recap, next week will be the last regular triages and meeting of the year to reconvene in the first week of January. And if you don’t take a break, feel free to triage at any time. Leave a comment if you don’t agree or have another suggestion.
Updates
Gutenberg updates
@mapk announced that Gutenberg 7.1 was released. A new feature is the Welcome Guide to replace the Tips for New Users. To read more about the new release, read here.
@ibdz gave an update on team profile badges. He chose the badges for Triage and Security. He did some research about unique color selection for those badges, sorted out from current badges. After matched those colors in the color wheel and chose some unique colors. See the images below:
Current badges and colors
Current colors in the color wheel
Proposed new badges for new and upcoming badges. The shapes were selected from Dashicons that represent the teams. There are 3 shapes x 3 colors for each team.
Proposal: shapes and colors for Triage and Security badges
Please leave your feedback in the comments. A meta ticket will be open for the change of color in the Security badges.
Redoing the colors for all badges feels like a good progression for this work. @ibdz and @melchoyce will collaborate.
@levinmedia finds the proposals page a bit formal for updating the components to match what already exists. If not proposing anything news, he suggests that the best approach might be to update components directly on the components page without publishing. Then, prior to publishing, enlist people that are familiar with Figma and the components to review and ensure they’re an accurate representation of what’s in code and adhere to Figma best practices.
One thing to keep in mind if we copy or build updated components on the proposals page, existing components will not be linked anymore. When the new, updated components are published, the existing ones that are already in use won’t update. They’d have to be deprecated. Old components won’t vanish from an existing design, but they would need to be manually updated. Expect a make/design post to expand on this.
Trello and handbook changes are rolling out. Props to @michaelarestad who dove right in with a new page for full site editing! Because this is a work in progress, he expects comments and issues that can help improve it.
Topics of Interest, using tags/categories and ways to surface
The blue box is a bit leaner
@karmatosed has a question regarding the “Calls for Design” as it exists on the menu bar. Since it hasn’t worked as well as our Trello board for soliciting work, would it be better if we move it to “Topics of Interest”, swap it out of “Focusses” pages or update the “Calls for Design” page? Please add to the comments as we will revisit the item next week.
Call for WordCamps
If you are attending or running a WordCamp, particularly a design contribution day, it would be great to call it out in advance in the make/updates post each week. And feel free to post agenda/notes or requests in the #design Slack channel.
List of Active Contributors
This topic is out of order from Slack chat. @karmatosed asked how others will feel to maintain a spreadsheet of active contributors that help with design to add badges to their profiles. A11y has this and they review it from time to time. The list could be linked in the handbook for easy access and to allow people to add themselves. Add feedback in the comments.
Updates
Gutenberg
Updates were given by @mapk. The focus area for this month is highlighted here:
Great news from today’s chat #core-editor revealed that the Navigation block is super close.
@mapk is pushing to get text color features moving as well. There is already a PR on text color features by @jeffreycarandang. At the moment is blocked by another issue related to RichText, but from a design perspective, it’s on track. The plan is to bring the issue up to the a11y team’s bug scrub to get their feedback.
Another PR that is close is the “Replace Media”. It should resolve some media replacement confusion and be more explicit.
People can leave comments on any of the mentioned PRs or check out the label Needs Design Feedback in GitHub.
Exploring some of the hover/selection states in Gutenberg blocks
Hold off any feedback or comments as a post in GitHub issues with context and more mockups will come later. If anyone wants to get involved, reach out to @michael-arestad.
Block Style System
@itsjonq resumed a proposal to an issue on WordPress/Gutenberg titled “Block Style System”: There is a gap within the system + ecosystem. It’s quite difficult to get Gutenberg blocks x themes to play nicely with each other. Styling essentially relies on CSS overrides upon overrides when you use Blocks libraries (e.g. CoBlocks), that has its own set of isolated styles so now, you’ll need to write custom CSS to override that, to match your current site’s overrides
This workflow is common in WordPress, the proposed method is a necessary workaround. Gutenberg + block is giving Builders (block makers, themers, etc…) more control over the UI because it standardizes how UI can be constructed
The idea for the proposal is to find a way to help standardize how HTML/CSS can be written, and more importantly, configured. The Github post goes more into detail. Having this system allows users to actually set global configurations from within Gutenberg, in a non-hacky way, e.g. Colors or Typography.
Here is a demo of an experiment by @itsjonq. The Config system (the various configs/variables that makeup UI elements) can be defined by a theme, and overridden via Gutenberg. UI built or rendered by Gutenberg blocks or otherwise, can tap into this Config system. With this, themes, blocks, plugins actually have a way to work with each other. Because they share a foundation. Rather than fight with each other.
@karmatosed would like to know what those building themes and plugins think of this proposal. One block to test would be the “group block”.
Add any comments to GitHub issue or reach out to @itsjonq and if anyone is interested in his very experimental work in progress, follow the code.
Follow up on Slack for more examples of how the Block Style System can be applied and some design jokes.
Don’t forget the triage sessions Monday and Tuesday and follow along on make/design for any posts this week.
Finally, @boemedia wonders if there will be any remote contribution at this year’s WCUS. @karmatosed will write a post about that later. Everyone that will be at WCUS in person, have fun!
@estelaris mentioned a post published last week regarding the new design on HelpHub for Home and Category pages. The post had very good comments and the changes were incorporated to the HH Homepage re-designed by the team at WC Valencia, lead by @AnaCirujano. The new design will be based on Valencia’s design with a few details added. You can leave your comments on Figma (if you do not have access, please ask in the Slack #design channel.) The plan is to finalize both the Home and Category pages for mobile and desktop this week and present them to #docs next Monday.
Open Floor
New Type Scale for WordPress
@davewhitley shared his proposal for a new type scale for WordPress. So far he has applied the type scale to 3 screens: posts, settings, and the editor. See images below:
Comparison PostsComparison Settings
Comparison Settings caused some discussion due to the type becoming smaller on large sentences.
Comparison Editor
The gifs will be added as comments on the post for more visibility. There were questions as to how other languages would be affected by the type scale, for example in languages with long words like German. One solution would be to make the admin menu a little wider to accommodate other languages, but that is a different discussion.
The type scale, if accepted, would be applied to all the WordPress application: WP Admin, customizer, editor, etc.
Another two feedback points from the post that were discussed:
There is no documentation yet on when or how these styles should be used.
The “label” style which is all caps. Currently, there are headings that use all caps in WP Admin. The #design team argued against the use of all caps due to accessibility issues. And because we don’t want it to be a blocker for the type scale, it can be removed.
Secondary Button Styles
There have been several discussions about the new secondary button and how it looks too similar to text input styles. This needs to be solved in the future. As of now, @davewhitley is gathering good and bad button examples and input fields on a Figma file. There is also the design systems repo, where people can find examples.
WordPress Design Guidelines
@itsjonq created a new site with design guidelines for WordPress with a GitHub included where you can leave comments or issues. The site has support for internationalization and it may be available for WC Tokyo.
Border Radio
There seems to be a concern that border-radii varies quite a bit. All small interactive UI elements should use the same border-radius, we believe this was the result if fast integration and someone must have missed or not accounted for something.
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.
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.
@blaidalfo was looking for clarification on the workflow with Figma libraries + Gutenberg GitHub repo. He followed the instructions posted by @davewhitley:
A discussion on language for labels follows, and @boemedia suggests testing designs with other languages besides English. As English is usually super short, and designs tend to break when translating into, for instance, German. @karmatosed suggests creating mockups with other languages too.
Another concern that’s raised by @nrqsnchz is, that he wonders how adding labels to the block toolbar is going to look like, since space is limited.
Discussion
Design team Trello Board
The design team used to use the Trello board for task management outside of the focus on Gutenberg and tasks not related to Trac tickets.
@karmatosed raises a few discussion points around it:
Do people still want to use it?
Should we have a meeting where we go through and decide triage style what to do or close?
Is it useful?
How can it be more useful but still be approachable for new people without reading a manual?
As some things have changed since the design team used the Trello board in the current setup, Tammie suggests the following:
Before next week I can move over resources column to handbook
Before next week I will also ping each ticket to see if owner wants to do anything with it or unasign.
Next week we do triage of board : do not go through and see what we want to do or not. Perhaps have a ‘future maybe’ column?
Each week we add in a timeboxed 15 minutes of ‘Trello checking’
Once it’s in order we can also open for new ideas.
If you have thoughts about this, please feel free to leave it in the comments section below these notes, or reply on Slack (account required).
Sharing corner
@boemedia feels inspired by the design explorations Andy Clarke does for Smashing Magazine. She also recommends reading the book ‘Art Direction for the Web’ that he wrote for Smashing Magazine.
What is the one thing that you struggle with most in WordPress?
What is something you know now about using WordPress that you wish you knew earlier?
There is also a discussion about whether this is focused on developers or end users, as having both as survey targets make it very difficult to narrow questions.
@karmatosed suggested we read the data and provide our suggestions as comments and insights as feedback on the post mentioned above.
Topics for next meetings
Another call is to add discussion topics for upcoming meetings. @karmatosed suggested that next week we focus on the Trello board and decide what needs to be done. @youknowriad asked how to access the Trello board.
@PiotrGawinski is a new member and would like to find a small project to get involved with and @boemedia recalled the link for Calls for Design column in Trello.
Updates
@mapk let us know that Gutenberg 6.1 was released today! It includes some really cool enhancements with lots of people contributing. @youknowriad gave us some explorations to look through:
@drw158 shared a component audit he’s been working on to clean up the component library as it has grown and exploded to places beyond the editor. The audit is related to naming, structure, and composition, not code audit, so designers at any level can contribute and it is on the React component library, not the Figma component library.
@dingo_d from theme review team is looking for designers to help create a better preview for themes on WordPress.org, including better-looking demo data. The demo data should be used internally and perhaps theme developers can use it too. For reference, here is the old meta-ticket. The demo should showcase Gutenberg blocks, as an example, see Chaplin Theme.
To clarify the problem, look at Theme Twenty Nineteen in WordPress.org, it has a great theme screenshot, but the “preview” doesn’t look like the screenshot. It is missing elements like logo, nav, cover block, etc. It doesn’t show off the full potential of the theme. To resolve the issue, there is a separate demo site. The XML demo data should be imported using the default importer. There is an .xml for Twenty Nineteen but it doesn’t contain menus or widgets. #meta must add those manually.
For step 2, we would like to have the option to change the presets of the demos data in the previewer, like chose between business/site vs. blog styles (business, portfolio, blogs, etc.)
So far actions go on trac ticket:
Meta ticket needs updating to have everything linked (there seems to be a lot of unlinked things).
Volunteers to take existing data (hopefully linked) and start working?
@williampatton will clarify actions and smaller tasks for design needs on trac ticket and design team has agreed to cross collaborate with themes team.
@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 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
@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
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:
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.
Build and submit your own experiments. There are instructions in the repository for this.
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.
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.
An inner container for the group block https://github.com/WordPress/gutenberg/pull/15210 seems like a big improvement for theme devs. There is some conceptual hesitancy based around the fact that eventually the `entry-content` could be treated just like a “Group” block too. And in that case, there’s no container inside of `entry-content`, so there shouldn’t be one here too. But based on the way theme’s are made today, this makes sense. So we just need to sort it out one way or another. It’s just an empty div.
@karmatosed wants to get a head start on the WCEU contributor day, starting with how we include those who won’t be there on the day.
Maybe we run a few triages (or one) online and that could be open to anyone.
We have roving reporters from groups focusing on work who collaborate into a post we then put on make/design.
We as a group agree to not make decisions at WCEU but post summaries if one needs to happen and include async input.
The concensus is we are not convinced synced remote contribution would really work that well. If people feel left out perhaps there is a better way, like getting remotes to work on some specific task and have someone report on slack the goings-on.
Making sure mentoring happens for new contributors that are on-site is important too. More discussion in the coming weeks.