Design Team Meeting Notes September 16, 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 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

  • We can still use more volunteers for note-taking. Along with this, there are opportunities to participate by running triage sessions. This includes both the CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. and 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/ triage. Please leave a comment below if you’re interested.
  • Our meetings have changed a little to be as close to 30 minutes as possible, as an experiment. This won’t stop conversation if it’s flowing. With daylight savings affecting different time-zones, we would like to know your thoughts on the current timing for the meeting. We would love to hear from you if you think that we need to make adjustments. Please leave a comment with your thoughts.

Updates

@estelaris is running an audit on 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. tickets to check if there are any that could be resolved by the new WP.org design style guide proposal. Here is a link to the working document: https://docs.google.com/document/d/1ZL2mzJzCjxBt0hPOtRCzvFlgBsTeU90u3bMFNNI0h7s/edit

@noah has been continuing to work on global styles considerations including present and future explorations, and have been in the process of reining it back into what we can incrementally do from this point on. Also have a plan on an open, casual jam session (via Zoom) this Friday around 13:00 UTC.

@paaljoachim is working on New design for revisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision. panel here: https://github.com/WordPress/gutenberg/issues/25270 and also made a link control suggestion here: https://github.com/WordPress/gutenberg/pull/24021#issuecomment-691917035 

@michael-arestad is designing a 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. directory page. Essentially a plugins directory focused on blocks and block patterns. Ideally, he’d like to show the block or block pattern itself, but technical challenges aside, it is complex for other design reasons as blocks can do all sorts of things.

@karmatosed has mostly been focused on WP 5.6 and catching all the awesome little tickets for design. Also she’s been working on some designs for options in Gutenberg which is yet to be posted.

Discussion

@paaljoachim suggested having an hour long triage session at least once a month. He has held a bunch of triage sessions and feels that having the one hour Gutenberg triage session once a week has in general worked pretty well. @estelaris suggested about doing them randomly like the Zoom sessions. @karmatosed pointed out that there are a few problems with a burden of setting up another meeting just with one person doing. It holds to a time and place. If you perhaps see it as an occasional opportunity not something you have to do each week, which may give a better opportunity. She also added by saying, anyone can spin up a Zoom or ask a team repTeam Rep A Team Rep is a person who represents the Make WordPress team to the rest of the project, make sure issues are raised and addressed as needed, and coordinates cross-team efforts. to set up one. @estelaris emphasized on the fact that it would be a good idea to announce it in the #design channel some time before each session. Can work the day before or few hours before, so people are aware because we have visitors at random hours.

Open Floor

@karmatosed brought the topic of ‘Learn WordPress’ initiative and if any working session leads to a workshop then we can definitely take advantage of the crossover opportunity provided by the #training team. Here is the p2 post: https://make.wordpress.org/community/2020/08/12/learn-wordpress-is-live/ and the official site: https://learn.wordpress.org/ This can definitely be a good way to turn casual things into resources.

@estelaris also introduced @manzwebdesigns who recently joined the team and asked if anyone was willing to mentor him for a bit to which @paaljoachim gladly accepted.

#meeting-summary, #meeting-notes

Design Team Meeting Notes September 9, 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 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

  • We can still use more volunteers for note-taking. Along with this, there are 2 opportunities to participate by running triage sessions. This includes both the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. and 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/ triage. Please leave a comment below if you’re interested.
  • With daylight savings affecting different time-zones, we would like to know your thoughts on the current timing for the meeting. We would love to hear from you if you think that we need to make adjustments. Please leave a comment with your thoughts.

Gutenberg

Gutenberg 8.9.3 is here. @michael-arestad shared notes from the #core-editor chat:

  • @karmatosed is working on iterating the options panel.
  • Custom CSS is on the horizon for the Group 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..
  • @nrqsnchz is working on a feature to allow users to upload subtitles for a video.
  • The Navigation screen has a few more proposals.
  • The Widgets screen is ready to be implemented.
  • @mapk is starting designs for the query block.

Updates

@ibdz reported that he is working on creating a WP-Admin Core library in Figma. Perfect timing to work along with #core-css that focuses on CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. Audit and CSS Scheming. Any update will be posted in the future meetings. ~180 unique colors in WP-Admin Core will be updated soon.

Discussion

@karmatosed suggested this meeting experiments with being 30 minutes for a few weeks. The idea like any could iterate and of course no time should stop conversation. Upon discussion she further suggested that we begin with the following changes:

  • Move meeting to Tuesday only for Triage, combined.
  • Try to have it focus on release this week: doing both in 30 mins.
  • Make sure it’s just Triage, only issues need attention, not discussion.
  • Move discussion issues to this meeting.
  • Change this meeting to 30 mins from next week.

@michael-arestad asked, Are these updates useful? Most of the folks involved are in this meeting. Perhaps we could just do it like the #core-editor meeting where folks all share their update task-coordination-style.

@mapk and @nrqsnchz both like the idea of removing any burden from folks. Also it’s fine if each person comments what they’re working on and any feedback they need. This will get posted in the notes so more folks can chime in.

Other suggestions given:

  • Posting the shortlist of tickets 30 min before Triage? So, there’s more room to read before discussion.
  • Invite Ticket owners to the meeting, this could work if we manage to have a list before Triage.
  • ASync Design Discussion, where an issue is pinned to the channel, that becomes the Async topic for say 6 hrs, where people can comment on a thread of that topic, etc.  Then the issues could wrap up discussion during a regular scheduled meeting.  This way, there are constantly new issues that can be discussed throughout the day/week.

@cameronduncalfe asked if there is a single file that has all the default Gutenberg blocks (frontend) in Figma? @mapk and @michael-arstad confirmed that Gutenberg blocks being complex and we don’t have a single file like that.

@aristath raised the following points for discussion:

The 1st one will be nice for global-styles so users can select the font-families they need, while the 2nd one is necessary if users want to build a side-headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. layout in FSE.

@karmatosed suggested taking conversations to the issues probably is good, but great to keep eyes on in this regard.

Open Floor

@estelaris suggested to keep the impromptu Zoom meetings. Those are good when they are not on schedule and have a specific goal.

@karmatosed suggested to perhaps start APAC Triages or office hours? We have to consider that as a team we focus a lot on a certain timezone, as we grow how can we adapt?

@estelaris further added by emphasizing to consider that we elect team reps who are not both in the same time zone? That would help keep other time zones involved.

#meeting-summary, #meeting-notes

Show & Tell August 26, 2020 Summary

During Show & Tell, we had 3 interactions for….

Iterate the 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. directory

@michael-arestad showed us how he mocked some options to present the block directory, where the user can see a preview of the block while hovering and a short block description on the side, instead of the current direction of the full 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 description and the plugin icon (as seen in the plugin directory).

The highlights on @michael-arestad‘s presentation:

  • Making the list keyboard-focus to improve 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).
  • Finding the right placement of the “add” button to avoid a button with too much information.
  • Looking into a flow to call for blocks of the same categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. as something already existing in the user’s directory.

Follow up new iterations as they are posted and leave comments.

Directory Proposal

@michael-arestad also talked about a proposal by @melchoyce for a block directory. There is already a lot of work done in there, so he will be working on updating it and see if he can take it further.

Components in Figma Library

@ibdz asked about source of truth when it comes to WordPress components and styles, as he has seen too many sources and options out there. Since there is no source of truth, he plans on running an audit for tracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. tickets and look into the last release (5.5 at the time of this post) and begin from there.

Another question is if it is necessary to separate desktop and mobile components and styles? It was suggested that having the WP-admin frame for both desktop and mobile would be very useful. As for components and styling, if there are differences, it is good enough to show them side by side.

WidgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. editor issue

@mapk showed the work he has done revamping the widget editor. His proposal is to make it look like the block editor and using the same workflows. We are looking into merging the widget editor in release 5.6. If you have any comments, please add them here.

Design team goals for 5.6 release

There is a lot of rambling on my part but basically, I would like to get some specific goals for the design team that are focused on the release or how can we participate more. I shall discuss this with @karmatosed as she returns from sabbatical.

Here is the link to the full video.

#meeting-notes

Design Team Meeting Notes September 2, 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 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

  • We can still use more volunteers for note-taking and triage leading. Leave a comment below if you’re interested.
  • We welcome @karmatosed back from sabbatical.

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/

@michael-arestad brings Gutenberg updates: A new Gutenberg release is happening shortly. The 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.-based widgets screen will no longer be experimental this release.

  • Global styles work is ramping up with @noah leading the design.
  • Proposals for font family and font weight picking. It was the source of discussion during a triage yesterday.
  • @mapk is starting design work on the Query block.
  • @q continues to masterfully improve the G2 Components project. This post about a Style System is particularly interesting.
  • A prototype for searching the block directory within the inserter was proposed last week. We’ve received good feedback as @michael-arestad is working up the next iteration.

Open Floor

@snaushads initiated some work on the wp-admin>Gutenberg update and asked what should be the starting point of the Admin>Gutenberg iteration, is it a 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. refresh or a complete overhaul? Explorations of which can be found here: https://www.figma.com/file/5guogx5ebxfqJgUQNj5hta/Core-Navigation?node-id=518%3A20969 He had a chat with @michael-arestad and they both agreed that it should be incremental. @snaushads further posed the question on What should be the starting baseline inclement?

  • Form Fields
  • Color Schemes, or 
  • Other areas.

@ibdz suggested he is currently working on the Figma WP-Admin CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. library. According to his suggestion we can start with:

  • Colors
  • Text Styles
  • Grid
  • Effect Styles

Then experiment on the components along with views. From current 5.5, there’s a lot of inconsistency shade of grey using hex mixing with rgba.

@michael-arestad suggested that Colors would be an excellent starting point. He further suggested dropping into #core-css weekly chat tomorrow if possible.

@estelaris added saying It is important to collaborate with other teams that relate to the project we are working on. He will need input from Core, CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site., 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). Regarding the question about what is the concern with the a11yAccessibility 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) issues from last year’s audit she said that is a good question to take to the #accessibility team in their next meeting. They may have a better answer.

#meeting-summary, #meeting-notes

Design meeting notes 19 august

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

  1. We still need volunteers for note-taking

If you’d like to help out, note-taking is a great way to get started. Just pingPing The act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.” @estelaris or leave a comment

2. Next Show-And-Tell is on August 26. A Show-and-Tell is where we all get together on Zoom (video chat) to say “hi” and check out the latest design work happening across WordPress.

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/

  • @itsjonq has been working on @wordpress/components and working to improve them including a guide on how to get started prototyping with them.
  • @shaunandrews has continued work on 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. as well as the navigation page (menus.php)
  • @mapk is working on widgets integration and the accordion block
  • @noahrshrader is exploring on Global styles and working with developers on the latest implementation of Multi-Entity Saving
  • @michael-arestad is starting in on block directory work

These issues could use some eyes and discussion:

Figma design libraries

@noahrshrader is also still working on the Figma design libraries. He was busy with other things but plans to tackle CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. (WP Admin) components within the next week or so. He’ll keep us updated.

HelpHub

@estelaris brings news from the Docs team. During the selection of the Google Season of Docs, two of the projects from the docs team were selected. One of them is the reclassification of the articles. You can read all about it here https://make.wordpress.org/docs/2020/08/18/season-of-docs-2020-projects-move-forward/

@estelaris will mentor a technical writer, and they will work with the marketing team to help make a style guide (writing, voice and all that). For the design team can help out with a new navigation in the documentation area. The team will bring updates to this meeting as they start working.

Calls For Help/Feedback

@estelaris is also working on a WP style guide, with a working draft here. One problem is that WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ is built in several systems it is very difficult to maintain the same style. So @estelaris has been looking for elements where we can set some sort of “min/max rules”. like type size for body min 16 px/ max 18 px. If any of you have better understanding of how .org is built, please add comments on what can and cannot be edited.

Main topics

The main topic today was to discuss a strategy for unifiying the design elements of Gutenberg, the rest of the admin, and the Site Health area, into one consistent design language.

This is a big topic, so the suggestion was to start small, beginning with porting over the base components, like how the button was updated in WP 5.4. Then, we’ll need to start looking at specific patterns to update (headings, tables, etc). Some pages will require more extensive work than others to bring them in line. There’s also the matter of Gutenberg being built in ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. and the rest of the admin being built differently.

@estelaris and @karmatosed are part of the WP 5.6 release, so they will try to already get some components worked in by then.

Picking a page and designing possibilities to align with Gutenberg components seems like a good start. @michael-arestad suggested the pages Comments, Tools and Settings as they cover a wide variety of components.

@michael-arestad and @snaushads will try to bring some early explorations to the Show And Tell next week.

Open Floor

@snaushads would like some feedback on https://github.com/WordPress/gutenberg/issues/24593.

#meeting-notes

Design meeting notes 5 August

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

During the month of August, both triages (coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. and 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/) will be short, for 30 mins only. We will resume our normal, one hour long triage session on 1 Sept. Also, if anyone would like to volunteer to take notes or lead a triage session, please lleave a comment or reach out to @mapk (for Gutenberg triage) or @estelaris for core triage.

Updates

@michael-arestad brings us an update on Gutenberg design work:

Gutenberg 8.7 was released today! And here is the plan for Gutenberg in August.

If you are new to the design team, go ahead and click on those links, check out the great work the design team is doing in the 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. editor.

Calls for Help/Feedback

The Training team sent us a call for help on designing the new learn.wordpress.org. @melchoyce has agreed to help them out.

Main topics

The WCUS team has reached out to ask if the design team is interested in participating on a 24hrs contribution day. There are no details yet, they are asking around to find out how many teams would be interested.

The Theme team has also been interested in participating and would love it if we could team up and work through some designs for long outstanding tickets they have been wanting to get through.

So we can say there is interest in this, and we’ll keep bringing this up in the next few meetings to get more input. If you have thoughts about this, please leave a comment.

Open floor

@mapk was wondering how we might get more people working on Gutenberg issues. What can we do to share more current work, and request feedback or even use some time to help community designers jump into specific Gutenberg tasks? The triage sessions have been wonderful, but those tend to focus on older issues, and the Gutenberg updates don’t really spawn much activity.

The idea of a design mentorship or dedicated Gutenberg sessions during our design meetings was floated. What do you think? What would you need to start contributing (more) to the visual development of the block editor? Let us know in the comments.

Lastly, @aristath brought up the point that the font size on .org is too small. This is a point that has been raised by 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) experts before in regards to the WP interface too. There has been work done to see if we can increase the size, but WordPress is a massive project, and not every area fully adheres to the style guidelines – insofar as those exist. We have guidelines for core, but not for 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.. @estelaris will take charge on writing a draft for those and bring them to the a11yAccessibility 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) and meta team, and to us, next week in the design meeting.

#meeting-notes

Design Show & Tell notes 29 July 2020

We had a Show & Tell last evening, unfortunately a human vs tech error prevented me from saving the recording. Here is a summary of the call.

Edit Site: Creating a new template from scratch

@michael-arestad has been working on a new flow to create a template from scratch. There are several iterations and steps taken towards this workflow and this evening we focused on resizing template parts, primarily the middle column. You can follow the design iterations in Figma. If you would like to participate, please add your comments/proposals and ideas to the PR.

Shorter triage sessions during summer days

We discussed the fact that some coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress./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/ sessions have been lacking participation during summer days due to holidays. The team agreed to shorten them to 30 mins if there were not many people around. We are also going to be reaching out to those involved in tickets to help us with technical questions.

Accordion blocks

@mapk is working on an accordion block to include in core, he showed us a prototype and some styling options. There is a Figma file to review iterations. If you want to contribute, please leave your comments in the PR.

About page for 5.5

@estelaris is working on the design for the About page as part of release 5.5. Being this the first time, it has been a learning experience. Many of the frustrations are due to the limited framework we need to work with, although that shouldn’t prevent a designer to turn in a well-designed page. The team provided some feedback and questioned why the About page is not being built in Gutenberg yet. A thought for a future release.

#meeting-notes

Design meeting notes July 22

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

First up, @noahrshrader updates us on the progress of the Design Library in Figma.

Since last week:

  • Revised current components to get them closer to specification
  • Updated the Getting Started page to reflect current workflows
  • Improved some of general aesthetics
  • Adjusted the main text font to be closer to what’s in the product (now SF Pro Text; was SF Pro Display)
  • Added new components: Card, Color pickers, Blocks (a couple of the common ones)

Coming up:

  • Revise approach to the Proposals page. With the combined library, I’d like for it to be inclusive of all scenarios
  • Add missing components (from the list on the Components page in Figma)
  • Add additional starter blocks
  • Clean up organization of Components (some of this has already been started)

In the queue:

  • Incorporate CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. patterns

Next up, another 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/ update from @michael-arestad.

Gutenberg 8.6 RCRelease Candidate A beta version of software with the potential to be a final product, which is ready to release unless significant bugs emerge. was released two days ago. Expect the release today. Highlights: Video position controls for the Cover 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., updated block patterns, and tons of fixesThe WordPress 5.5 deadlines are approaching. We have a potential patch next week to update block patterns before RC1.

In progress work:

Then, the docs team is looking for help making new videos of all the Gutenblocks for the documentation. If you want to help, reach out in the #meta-helphub channel.

Next, discussion centered on the 5.5 About page design @estelaris is working on. Check out those drafts on Figma and leave comments if you have more suggestions!

Next week is another Show and Tell Zoom meeting instead of a regular design meeting, if you have something to show, leave a comment below.

#meeting-notes

Design Team Meeting Notes July 15, 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 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

We can still use more volunteers for note-taking and triage leading. Please leave a comment below if you’re interested.

Monthly ‘Show and Tell

Monthly ‘Show and Tell’ will take place on the 29th. Even though everyone has been busy with the release of 5.5 betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 2, we will still have the session.

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/

@michael-arestad brings Gutenberg updates: Here are the plans for Gutenberg in July. Getting everything ready for 5.5 is a major focus this month.

  • 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. patterns are just about ready to go. The initial patterns have been selected and all that’s left are a few tweakshttps://github.com/WordPress/gutenberg/projects/41. Props to @nrqsnchz.
  • A new sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. paradigm is in the works. Definitely take a look and let us know what you think.

WordPress Figma Libraries

@noah reports on the update for WordPress Figma Libraries:

Colors

  • There are two palettes: Primary, which is what we’ve been migrating towards and Classic which comprise many of the colors that are still used in both the editor and WP admin.

Remaining:

  • Improve naming conventions
  • Validate palettes
  • Include documentation around use

Typography

  • The main text styles have been identified, along with their accompanying values, such as size, weight, line height, etc.

Remaining:

  • Final review values for each text style
  • Include documentation around use

Icons

  • Currently, we’re supporting three icon libraries: Primary (G2), Material and Dashicons. Only the Primary and Material icons are available in this library, with Primary having precedence. Dashicons are intentionally downplayed with an explanation and link to the standalone library.

Remaining:

  • Finalize componentization of Material icons

Components

  • Many of the common components have been built and reviewed against what’s currently in the WordPress components package. I have also been going back through and fact-checking against what’s in the latest build of 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.
  • As you peruse the Components page, you’ll notice a dot to the left of the component name that’s either outlined or green. If green, those components are good to test, and I would encourage everyone to do so. Does the construction make sense? How does it hold up as you use it? Is it accurate?

Remaining:

  • Include remaining components from the Components list (this list is in Figma)
  • Include documentation around use
  • Promote testing and use of these components

Views

  • Completed components will eventually be grouped in clusters (atomic organisms) and added into templates/views. You can already see this with the block inserter and editor headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. clusters.

General

The following is a list of items outside of what was mentioned above.

  • Add Getting Started documentation (next week)
  • Add Proposals documentation (next week)
  • Clean up component frames (improve consistency, balance and organization)
  • Migrate utilities outside of library

Discussion

  • Project related documentation – On 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, we have the Figma reorganization and updates to the handbook.
  • For the Handbook- Currently there are no updates as most of us have been focusing on 5.5.

Open Floor 

  • @folletto pointed out that in Gutenberg 8.5.1 the new inserter panel when opening it closes the settings panel, and then it doesn’t reopen. Was this already discussed? @youknowriad & @nrqsnchz shared the link to PR 20951 with something similar. @folletto opened a PR to discuss the behavior of the issue.
  • The ‘About Page for 5.5’ in the form of the ticket was discussed in detail.

#meeting-notes

Design Team Meeting Notes July 01, 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 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.

First, Housekeeping. We can still use more volunteers for note-taking and triage leading. Leave a comment below if you’re interested.

Next, @michael-arestad brings 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:

  • Gutenberg 8.5 RCRelease Candidate A beta version of software with the potential to be a final product, which is ready to release unless significant bugs emerge. will be released on Monday and will be the release going into WP 5.5.
  • @noah has been busy working on the Figma library
  • The new template issue could use some feedback
  • Image editing is available with this update
  • @annezazu published for the FAQ for the FSE outreach experiment.

Requesting everyone to provide any feedback that can be given to the new template issue as the team is busy right now pushing as much as to be prepared for WordPress 5.5.

@noah and @ibdz reports on the update for WordPress Figma Libraries:

  • Updates are on the way to incorporate the new 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. Editor patterns, as well as some general cleaning to make these more relevant
  • @noah is building out the new elements in a page called “In Progress” in the Components and Patterns files. Various icon libraries is also being brought into a centralized location, which can be found here: https://www.figma.com/file/3O5hl33MYt8YPWcRWWuwNv/WordPress-Icons
  • @noah will write a p2 post on ‘Improvements to the Figma Libraries

@ibdz has been exploring some workflows to automate the process. Currently testing and experimenting with React-Figma but the result is still far from expectation.

Discussion

In regards to HelpHub @estelaris wrote a p2 post trying to define users and categorizing the articles into 4 big pillars (these are not final yet). @mapk suggested the following categories:

  • WP basics – overview, features, history, glossary, semantics, contributing.
  • Technical documentation: installation guides, requirements, best practices, technical how-to, security, troubleshooting.
  • Support documentation – dashboard structure, user permissions, screens, media screens.
  • Project related documentation – customization, themes & plugins, design how-to’s (blocks):

Open Floor 

  • @joen created a new WP-Admin color scheme “Modern”. It’s ready to merge and brings high contrast blue colors as well as some consistency with the new Block Editor colors. The patch attached to the ticket purely provides an optional color scheme called “Modern”, and it is not a default scheme. If it were to become default in 5.6, it needs to go through the ringer on many levels. It primarily does 2 things:
    • brings darker background color to the menu, and a lighter text color, increasing contrast.
    • adds a new spot color, a rather luminous blue that has great contrast properties against white.
  • @ryrlle brought in a Github PR that adds a “private content” container block so that the organizers can share content only with people who have bought tickets. For example, online event organizers want to be able to share Zoom links without worrying about zoom-crashers. @estelaris is looking for input on the editor view of the block.
  • @joedolson is currently working with @nrqsnchz and @ryelle towards the issue associated with 49999.
  • We are also seeking feedback on the tickets 50169 & 48894.

#meeting-notes