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

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

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 agenda for Wednesday 11th December

This is the agenda for the weekly design chat meeting on Wednesday, 11th December 2019, 19:00 UTC.

  • Housekeeping: holiday meeting times
  • Updates from any specific focuses
  • Discussion
    • @ibdz will give an update on team badges.
  • Open floor

This meeting is held in the #design channel in the Making WordPress Slack.

Leave a comment if you would like something reviewed, discussed, help or something added to the agenda.

#meeting-agenda

Gutenberg Phase 2 Friday Design Update #41

Happy Friday everyone! The winter holidays are upon us and Core is already planning for WordPress 5.4.

A recent update regarding the 9 Projects for 2019 was posted wherein Gutenberg was a large part, so let’s go over those. The projects listed below are still in progress.

Create a block for Navigation menus

The Navigation block is considered a “stable” feature as of Gutenberg 7.0. There’s a lot of work to still be done, but the majority of the technical aspects are solid. I’m running usability tests on this block this month and will share the results in January.

Navigation block

Themes visually registering content areas

This is an older issue from earlier this year, but includes a lot of what is being explored in full-site editing.

Blocks in widget screen and Customizer

This widgets screen is about ready for testing. It can be turned on in the Experiments in the Gutenberg plugin. While it’s a bit rudimentary, it can be tinkered with.

The Customizer blocks are under development. While we show blocks in the Customizer, we’d like to show them in their mobile responsive view because of the narrow space.

Block Directory

The Block Directory is also a feature listed as an Experiment in Gutenberg. It can be turned on and users would be able to install single-block plugins directly from the Block Editor. When searching for a particular block in the Block Library, if none are found, but exist in the directory, it will be displayed.

A post around the Block Directory guidelines was recently shared. If you’re looking to get your single-block plugin included, find out more by reading that post.

Block Directory

December’s Gutenberg Focus Areas

Riad recently posted the focus areas for Gutenberg in December. These include Block Content Areas, Block Patterns work, and a bit of Tightening Up like gradients, media flows, etc.

Gutenberg 7.0 Released

Yes, it’s been a couple of weeks since I posted this update, so I’m able to include Gutenberg 7.0 which was released in late November. Lots of improvements in there. Make sure to read the notes!

New Color Palette

Dave posted a proposal for a new color palette in WordPress. If you’re fond of colors, check it out and drop some comments.

Easily test Gutenberg PRs 🤩

This is incredible? Have you ever struggled testing Gutenberg PRs before they merge? Was the set up of a local dev environment too much for you? Well look no further! Gutenberg.run is a blessing sent from @aduth.

Just enter the PR number you’d like to test and this will build an installation of WordPress with this PR. No setup necessary. 🥳


Get involved

Now’s a great time to get involved. While the work on this project is intense, it’s always important to glean new perspectives from other WordPress users and community members. Just drop into any of the links provided above to read up on the details and contribute.

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

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

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.

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 block 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 UI 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 Customizer

@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 agenda for Wednesday 4th December

This is the agenda for the weekly design chat meeting on Wednesday, 4th December 2019, 19:00 UTC.

  • Housekeeping
  • Updates from any specific focuses
  • Discussion
    • Consensus on a radius for inputs: raised by @jjj
  • Open floor

This meeting is held in the #design channel in the Making WordPress Slack.

Leave a comment if you would like something reviewed, discussed, help or something added to the agenda.

#meeting-agenda

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.

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

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

Gutenberg

Gutenberg 7.0 was just released. 🎉 This release includes lots of efforts to optimize the code and UI.

@mapk highlighted @matveb’s recent GitHub 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 accessibility team has started discussion about creating new color schemes to address specific accessibility needs.

#meeting-notes

Design meeting agenda for Wednesday 27th November

This is the agenda for the weekly design chat meeting on Wednesday, 27th November 2019, 19:00 UTC.

  • Housekeeping
  • Trello board
  • Updates from any specific focuses
  • 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, discussed, help or something added to the agenda.

#meeting-agenda

Proposal: a new color palette for WordPress

Just like my previous posts on type scale and spacing, a standardized approach to color enforces consistency and simplifies decision making for UI design. It can also make it easier to adhere to web accessibility guidelines. This post aims to point out the opportunities we have today, propose a new color palette, and suggest how to implement it.

Continue reading

#colors, #style-guide

Gutenberg Phase 2 Friday Design Update #40

I missed last Friday’s update, so let’s see if I can catch up on everything related to Gutenberg design today. Happy Friday!

Full-site editing

There’s a new Focus page in the Design Handbook dedicated to full-site editing. This will be updated as progress happens, but the design tasks will happen on GitHub.

A couple of design explorations in the form of prototypes were shared in slack earlier this week by @shaunandrews. These prototypes are to encourage thinking around full-site editing and are not final solutions.


Block Directory

As many of you know, the Block Directory interaction is new to the Gutenberg plugin which allows the installation of single-block plugins directly from within Gutenberg. It’s pretty amazing. There’s a new Focus page for this as well in the Design Handbook.


Recently merged

In Progress


Reading update

There was a recent post by @melchoyce on Blocks, Patterns, and Layouts. This post helps convey some terminology and how the Gutenberg puzzle fits together.


Get involved

Now’s a great time to get involved. While the work on this project is intense, it’s always important to glean new perspectives from other WordPress users and community members. Just drop into any of the links provided above to read up on the details and contribute.

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

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

Design Meeting Notes for 20 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

Trello and Handbook Organization

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. 

Design Handbook

Improvements in the design handbook show:

  • Focuses area
  • 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

@shaunandrews posted an experimental mockup that could use more eyes. See video

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.