X-post: Call for Testing the Widgets Screen in Gutenberg 9.1

X-comment from +make.wordpress.org/core: Comment on Call for Testing the Widgets Screen in Gutenberg 9.1

Design show & tell, 9/25/2020

Below is a recording of a “design show & tell” I hosted last friday. Just a casual livestream of a little work in progress, including in progress work of an FSE theme, as well as some discussions on the site editor. Thanks for showing up, and thanks for the great discussions we had!

Design team meeting notes september 23, 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. 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 have an open call for note-takers and triage facilitators. These both are great ways to get involved for new contributors but everyone is welcome to help out. Let us know if you are interested in the comments.

Next: we are doing some cleanup of Figma users. If you don’t know, Figma is the main design tool that our team uses for WordPress design. Our policy is that we give View access to everyone who asks for access to the Figma files, and Edit access only to those that are actively contributing to a project. We have revoked edit rights to users that have been inactive in Figma for over 6 months (the system reports them automatically). If you need to upgrade your access because you will work on a specific project, let us know and we will gladly grant you edit access again.

Updates

@estelarisis working on adding new pages to the design Handbook.

@bluetriangle is working on a post editor grid layout 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. for custom blocks.

@melchoyce introduced the new theme on the Make blog.

@ibdz is working on a WP admin core design library in Figma.

@ZebulanStanPhill created a PR to provide an accessible way of displaying a summary for an accordion, to solve some longstanding 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) issues. It needs a design review before merge.

Main topic

The CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. team proposed to reduce the colors in Core. @ryelle tells us they’ve developed a tool that can replace all the colors with whatever palette we define. There was a palette proposal a while back, the team decided to use that as a starting point and iterate where needed. If you want to help, reach out in the #core-css channel on Slack.

One more thing

On Friday sept 25, @joen and @noahrshrader will be doing a casual Show And Tell to go over work they’ve been doing. It’s slated for 13:00 UTC (15:00 CEST and 9:00 AM EDT.). Check the #design channel on Slack for details on how to join when the time nears. And next week there will be a ‘regular’ Show And Tell meeting during the Design Meeting timeslot!

#meeting-notes

Design meeting agenda for 23 September 2020

This week’s meeting will be held at 18:00 UTC on Wednesday in the #design channel of the WordPress 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/.. You can join the Slack channel by following the instructions in our handbook.

Here are the suggested topics:

  • Housekeeping
    • Call for note-takers and triage facilitators
    • Cleanup of Figma users (changing edit to view rights for noncontributors)
  • Updates
    • Team members leave any project updates as comments in this post. We will review project updates during the meeting only if there is something to discuss.
  • Main topics
  • Open floor

If there is anything you would like to see added to the agenda, please leave a comment also.

#meeting-agenda

Project: Reducing Colors in Core

Hey folks! Over in #core-css, we’ve been trying to audit and simplify the CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. used in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. Part of that includes simplifying the colors used throughout wp-admin, and we could really use your guidance here.

We have an automated tool that will replace all the colors in WordPress’s CSS with the closest color in a given list – which will let us quickly standardize on a color palette. In fact, this demo reduced the number of unique colors from 201 to 100.

The main question we have: Is this color palette the correct set of colors to use (from @drw158 in Nov 2019)? I’ve also seen this g2 list, and I know there are some colors identified in the Figma.

Once we decide on a color list, we’ll also need some help checking over each screen to make sure the replacements look good and have sufficient color contrast. It would be great to get some volunteers working together from design, 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), and core-css. If you are interested in helping with this work, please leave a comment on this post, or drop a message in the #core-css channel in 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/.

For reference, here are some before & after screenshots of a few wp-admin pages using the current colors, and the same pages using this reduced set of colors.

Continue reading

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 meeting agenda for 16th September 2020

This week’s meeting will be held at 18:00 UTC tomorrow in the #design channel of the WordPress 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/.. You can join the Slack channel by following the instructions in our handbook.

Here are the suggested topics:

  • Housekeeping
    • Call for note-takers and triage facilitators
    • Notice on the shorter new format to triages and this meeting
  • Updates
    • Call for updates from anyone that has them
  • Main topics
    • No topics yet, add yours as a comment to discuss in the meeting
  • Open floor

If there is anything you would like to see added to the agenda, please leave a comment also.

#meeting-agenda

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 meeting agenda for 9th September 2020

This week’s meeting will be held at 18:00 UTC tomorrow in the #design channel of the WordPress 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/.. You can join the Slack channel by following the instructions in our handbook.

Here are the suggested topics:

  • Housekeeping
    • Call for note-takers and triage facilitators
  • 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/
  • Main topics
    • 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 for default themes: call for help and feedback during 5.6
  • Open floor

If there is anything you would like to see added to the agenda, please leave a comment also.

#meeting-agenda