Design meeting notes for January 22, 2020

These are the weekly notes for the design meeting that happens on Wednesdays. You can read the full transcript on our Slack channel and find the meeting’s agenda here.

Updates from any specific focuses

GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/

@mapk shared that Gutenberg 7.3 was just released. There’s been a lot of improvements such as the Navigation blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience., the new Replace Media flow, new full site editing blocks, and a huge performance boost. 

Proposed design focus for the 5.4 release

@karmatosed and @mapk worked on a list of proposed design projects, tickets and issues to focus on for the 5.4 release that is coming up in February. Comments and feedback are welcome. The biggest item in need of design work is the editor, while most of the rest is providing design feedback.

TrelloTrello Project management system using the concepts of boards and cards to organize tasks in a sane way. This is what the make.wordpress.com/marketing team uses for example: https://trello.com/b/8UGHVBu8/wp-marketing.: what is in our inbox?

There was nothing new added to our Trello board this week.

Open floor

A few tickets, issues and PRs in need of feedback were raised. Please feel free to review them and add your comments:

#meeting-notes

Design meeting 8 January 2020

These are the weekly notes for the design meeting that happens on Wednesdays. You can read the full transcript on our Slack channel and find the meeting’s agenda here.

Housekeeping

Being this the first meeting of the year, we are looking for volunteers for 2 specific roles:

  1. Volunteers to be part of the notetaking pool for meetings. We rotate each week to spread the load
  2. We would like to train people to run triage sessions

And we got a volunteer for note-taking: @adampickering

Updates

GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ updates

@mapk announced that Gutenberg 7.2 will come out today. @mapk will be running usability tests for the Columns block.

Also, designers are diving into full site editing!! There is a label in GitHub, so if anyone wants to talk through design ideas, leave your comments there.

Discussion

@karmatosed let us know that there is a repo for wordcamp.org that has a “needs design” label and needs our help. It is a great way to contribute by giving feedback or adding sketches as needed. 

Open Floor

@estelaris presented the first draft for the article page for HelpHub, the prototype shows the use of menus. Feedback was requested on:

  1. Avoid using hamburger menus
  2. The Documentation menu (blue blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.), is it possible to be expanded? 
  3. The Topics section at the top to help the user find out the information presented without having to scroll down unnecessarily

Feedback given:

  1. Avoiding hamburger menus is a +1!
  2. The menu in the blue block can be expanded, increase the font size and the padding to give eyes space to rest
  3. The topics section is a good solution, try other design treatments for the block
  4. Overall, increase the padding and/or line-height to create white space and do not use many font-sizes
  5. Do not use all-caps for titles

A new draft will be presented to the #design team next week and a P2P2 P2 or O2 is the term people use to refer to the Make WordPress blog. It can be found at https://make.wordpress.org/. is planned after the #docs team provides the final sub-categories to open the design to public feedback.

#meeting-notes

#helphub

Design Meeting Notes for 11 December 2019

These are the weekly notes for the design meeting that happens on Wednesdays. You can read the full transcript on our Slack channel and find the meeting’s agenda here.

Housekeeping

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

GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/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:

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 metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. 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.

Open Floor

@levinmedia brought up the Figma WordPress/components library that needs updating to current 5.3. @karmatosed mentioned that we have a process to update WordPress components.

@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.

#meeting-notes

#meeting-notes

Design Meeting Notes for 4 December 2019

These are the weekly notes for the design meeting that happens on Wednesdays. You can read the full transcript on our Slack channel and find the meeting’s agenda here.

Housekeeping

No housekeeping today.

GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/

@mapk shared the What’s next in Gutenberg? (December) post that highlights what we’re focusing on for this month.

He also mentioned that usability testing for the Navigation blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. is starting today. Monthly tests can be found here.

He also highlighted the work being done for the Block Pattern and a recent PR that provides some insight into block-bases themes.

Discussion

Advancing the Block Interface

@joen shared an issue created by @matveb that looks at the block’s UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. and how it has had to grow to support new features and paradigms that we couldn’t have anticipated when the current UI was designed. The issue also explores some refinements and updates to the block’s UI that will serve us better going forward. Feedback and comments are welcome on the issue and @pablohoneyhoney also shared the Figma file where some of those explorations, components and assets are being worked on.

@itsjonq shared a prototype he created to help explore the new UI and interactions. Everyone is welcome to fork it and play around with it.

The team had a great discussion about the current state of the block’s toolbar, it’s shortcomings and how we can improve the experience for mobile.

State of the CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings.

@garrett-eclipse brought up a recent question from a bug scrub about the state of the Customizer and if we’re to continue working on it. Folks are welcome to leave any thoughts on the agenda’s comment.

Consensus on a radius for inputs

@johnjamesjacoby recently raised an issue about inconsistent border radius on inputs and buttons. The team agreed that aside from personal preferences, we should settle on a single value for consistency. There’s a Trac ticket for follow up work and feedback.

WP Notify

@mapk brought up the WP admin notifications project and how it’s a great opportunity for members of the design team to get involved.

Open Floor

@michael-arestad shared that he’s going to start documenting common flows for Full Site Editing. The goal is for these flows to help us start understanding the needs and expectations. Anyone interested is welcome to collaborate and provide feedback.

#meeting-notes

Design Meeting Notes for 27 November 2019

These are the weekly notes for the design meeting that happens on Wednesdays. You can read the full transcript on our Slack channel and find the meeting’s agenda here.

Housekeeping

Badges

The team continued the discussion about assigning team and contributor badges to folks who  have been participating and don’t have them yet. @karmatosed created a spreadsheet to keep track of this and will start asking for badges.

SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. onboarding workflow

We’re looking at the possibility of adding an automated slack onboarding workflow for new channel members. While we want to be careful this does not replace a human, we think this could be very useful. @williampatton will be creating a shareable doc so we can all start iterating over what we want the workflow to say.

TrelloTrello Project management system using the concepts of boards and cards to organize tasks in a sane way. This is what the make.wordpress.com/marketing team uses for example: https://trello.com/b/8UGHVBu8/wp-marketing. board

The design team’s Trello board has been cleaned up and organized as it was recently proposed. We need to make sure we keep it up to date and create new cards as new tasks come up.

GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/

Gutenberg 7.0 was just released. 🎉 This release includes lots of efforts to optimize the code and UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing..

@mapk highlighted @matveb’s recent 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/ issue Advancing the Block Interface and welcome everyone to leave any feedback and comments.

Contribution Handbook

@karmatosed shared how folks at the recent WC Turino had some hurdles due to information not being in their language. She reminded us of the Contribution Handbook, a project from a few years ago meant to provide a quick, stepped guide to getting started. It was suggested we create a similar resource for design contribution days, and have it translated into other languages.

Open Floor

@williampatton raised an issue with themes and their readme files:

Currently themes only have a readme to place important information and documentation. Since it is not rendered well in any place there really is not good place to show things that users will want to know about.”

He’d like to have this information exposed in some way and is looking for ideas and feedback.

@joyously brought up the recent proposal for a new color palette for WordPress. There have been some reported issues with alternate color schemes with the 5.3 update. In addition, the accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) team has started discussion about creating new color schemes to address specific accessibility needs.

#meeting-notes

Design meeting notes 13 Nov 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 SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel by following the instructions in our handbook.

@karmatosed starts off with two suggestions to keep us working more organised and focused.

Firstly, one of the common issues when starting to contribute or finding your way to is to discover what is going on and what the context behind it is. @michael-arestad suggest to add our focus projects to the Handbook, like full site editing for gutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ for instance, it will be easier to read up, and could also include a timeline if known, links to where the work is happening and who is involved.

This could go hand in hand with the Make blogposts, that maybe the Handbook page can curate. The lead on a project would have the responsibility of keeping the info up to date as the project progresses. MetaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. has something similar at https://make.wordpress.org/meta/projects/

Secondly, @karmatosed suggests iterating and bringing our Trello board back from not being at the heart with a new workflow structure:

  • Inbox
  • Needs design
  • Needs feedback: this will be what we pull weekly meeting from
  • Building
  • Blocked
  • Icebox

The icebox could become a place where ideas go to die, but as @foletto remarks, that will happen anyway with some ideas no matter how we sort the project.

This also frees up the labels from being part of the workflow, and allows them to be used the way they are intended to.

Both suggestions will go up as proposal on the Make blog for further discussion.

A discussion about 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/ vs TrelloTrello Project management system using the concepts of boards and cards to organize tasks in a sane way. This is what the make.wordpress.com/marketing team uses for example: https://trello.com/b/8UGHVBu8/wp-marketing. spun off of this idea that will be continued at a later time.

Next, @mapk brings Gutenberg updates. Gutenberg 6.9 is almost out! Lots of things being worked on. Do note that the Gutenberg pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party v6.5+ needs WP 5.3 now.

For WP 5.4, there are some Gutenberg focuses left this month https://make.wordpress.org/core/2019/10/29/whats-next-in-gutenberg-november/. @mapk and @shaunandrews will run some usability tests on the new nav blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience., which is almost done.

Then, some interesting reading material was shared:

@hedgefield noted he would ask the team at Yoast that worked on this Gutenberg-based storytelling page if they had any wishes or suggestions to improve the workflow next time around.

And finally, @melchoyce would love some feedback on this idea for multi-block layout patterns for the block editor: https://github.com/WordPress/gutenberg/issues/17335

#meeting-notes

Design meeting notes for November 6, 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 SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel by following the instructions in our handbook.

Housekeeping

Because of time changes around the world, meeting times will be moved back by an hour. The new meeting times are now reflected in the welcome box on make.wordpress.org/design/ and are as follows:

Monday triage: 17:30 UTC
Tuesday triage: 17:00 UTC
Wednesday meeting: 19:00 UTC

Updates

GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/

@mapk shared a recent update from @matveb about Full Site Editing. It’s a good primer to help people get started with contributing to Gutenberg Phase 2.

Design Experiments PluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party

@karmatosed invited folks to use and test the Design Experiments Plugin, where a few of our current projects can be found for testing.

The team also discussed where would be the best place to leave feedback on these experiments, and it was agreed to include a link to a post so folks can learn more about each experiment and know where they can leave feedback.

Open Floor

@joyously shared a bug in Gutenberg that affects the Media + Text blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. when RTL text alignment is enabled and an issue about the block inserter visibility when a left aligned pullquote is present in the new Twenty Twenty theme.

@mapk shared @francina‘s feedback on the About page.

@richtabor asked for feedback on a concept for adding block patterns on a document in Gutenberg.

#meeting-notes

Design meeting notes for Oct 30 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 SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel by following the instructions in our handbook.

Firstly @karmatosed would like to know if we are all OK with the design meeting time staying at 18:00 UTC in the winter. So far it seems so.

Next, @mapk reports that Gutenberg 6.8 is out with a performance boost and some cool new features. A monthly post detailing the next focus tasks will now also be published, with the post for November Gutenberg dev focus being up. Also, there is news about the efforts to support full site editing with Gutenberg.

@drw158 would like some feedback on a proposal to improve the button design that was merged in WordPress 5.3. Looks like an improvement already, but there are some factors to consider. Good discussion was had, results will be posted in the linked tracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. ticket.

@itsjonq has done work on designing a page header component, something in the GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ style that could be used by folks using the wordpress/components library.

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!

#meeting-notes

Design meeting notes for October 16, 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 SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel by following the instructions in our handbook.

GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/

Gutenberg 6.7 was just released. Lots of bug fixes, a few experiments, and button gradients.

@mapk shared priorities for this week, feedback is :

  • Gradients: Theme support, classNames, custom UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing.
  • Full site editing: Site Title blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience., rendering engine, temporary template editing UI and start working on the multi-entity saving UI
  • Improvements to the link UI
  • Complex block interactions, which also require improvements to the selection mode, and better drag and drop

Storybook

During the chat @itsjonq brought up a discussion about storybook, which is a UI development environment. It’s a bit dev heavy, but for those interested you can learn more on the Storybook site. Q shared a great example of a date picker.

WP design guide

Q received some wonderful feedback last week about the importance of adding internationalization to the guide. It’s now been updated to support multi-lingual. You can checkout the starter Japanese one.

Anyone who is interested can reach out to become a contributor on the project. Just let @itsjonq know.

Gutenberg version in CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.

@mapk would like feedback on whether we should state “Gutenberg version” or “Block Editor” version. Feedback would also be helpful on the best place to put that.

Repurpose ‘Hello World’ post

@nrqsnchz would love feedback on an issue about making a Gutenberg tutorial from the default Hello World post.

Testing WordPress 5.3 Release CandidateRelease Candidate A beta version of software with the potential to be a final product, which is ready to release unless significant bugs emerge.

@joyously shared an issue with select dropdown arrows having some visual issues. Slack link. A great reminder that during RCRelease Candidate A beta version of software with the potential to be a final product, which is ready to release unless significant bugs emerge. it’s helpful to test as broadly as possible. If you’re able to test that’d be awesome!

#meeting-notes

Design meeting notes for October 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 SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel by following the instructions in our handbook.

Housekeeping

@karmatosed posted on make.wordpress.org/design details for the new handbook page for WordPress components. Everyone is encouraged to check it out and learn more about editing, adding and using the components.

Updates

WordPress Design Guidelines

@itsjonq shared the work he’s been doing on the WordPress Design Guidelines. The goal is to enhance and improve the current guidelines on WordPress.org.

These new guidelines can be found on https://wp-design-guidelines.netlify.com/foundations/. As of today, the guidelines only include Identity, Typography, Iconography and Colors.

In addition, the guidelines are open for everyone to contribute and add feedback and suggestions. The 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 is located at https://github.com/itsjonq/wordpress-design-guidelines.

The team thinks the new guidelines would be a great resource for WordCamps, in particular the upcoming WCUS and WCTokyo. The importance of having this resource translated to other languages was raised and there’s already an issue to explore that.

Everyone is welcome to try the new guidelines and leave any ideas, thoughts or feedback on GitHub.

Figma Components Library

@drw158 shared an update on the Figma components library. The “master components” have been moved to a new page and have been locked, to prevent accidental edits.

But fear not, there’s a new “Sticket Sheet” page where we can all copy/paste and also see all of the components.

#meeting-notes