Monthly Design Team Show & Tell: March 2021

This is a summary of the Monthly Show and Tell that happens on the last Wednesdays each month. You can read the details on our Slack channel and for a full discussion watch the video below. 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.

We had a bit of a mix up with the time due to timezones and DST but were able to share two designs: @shaunandrews shared Pattern Directory design progress and @critterverse shared reusable blocks. @estelaris shared ways designers can be more involved.

Attendance: This month we had a total of 10 contributors attending the meeting. @estelaris, @critterverse, @paaljoachim, @shaunandrews, @kellychoffman, @melchoyce, @kjellr, @beafialho, @ibdz, @mukesh27 are among the ones who attended the March 2021 Show and Tell. If you wish your Wp.org username to be added to this post then please comment below or contact @kellychoffman on Slack.

Recording:

Pattern library

Reusable blocks

  • @critterverse shared her ongoing work with Reusable blocks. To continue the discussion, check out the issue on Github: https://github.com/WordPress/gutenberg/issues/30357

Being more active

@estelaris started the discussion on how designers be more active. A few take-aways:

  • Bring work out in the open so more people are aware of what is going on and we can engage in discussions.
  • Rely more on async communication in Slack, especially as not everyone can make all the meetings.
  • Consider posting work to the Make Design blog, as @shaunandrews recently did with Patterns.

We look forward to having you with the Design Team. The next Show and Tell is set to take place on the Wednesday, April 28, 2021, 18:00 UTC.

WordPress.org Patterns Directory

As patterns continue to become a primary building 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. of the editor, it’s important that we have a way to collect, organize, and manage them. There’s been some discussion around this from the Meta team and work is underway on Github to create the new directory. The 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/ Patterns Directory, similar to the Plugins and Themes directories, will be a publicly viewable site that lists user submitted patterns that anyone can copy and use. WordPress.org members can also sign in and submit patterns to be added to the directory.

The Patterns Directory will also be available from within the WordPress block editor on your site, allowing any one to quickly browse and insert patterns to their posts and pages seamlessly. This is a big opportunity for designers to contribute to the overall WordPress ecosystem without having to know how to code a 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 or a theme.

The WordPress.org/patterns homepage, which allows anyone to browse all available patterns by categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging., search, and sort by featured, newest, and most popular.

Along the top of the patterns grid is a “sort by” dropdown, followed by a list of selected categories, and then a search box. Changing the sorting or selecting a category updates the grid and exposes a secondary 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. that indicates the current criteria (category, author, tag, etc) along with space for displaying related information like related categories or an author’s website.

Here’s how a masonry-style grid of patterns could look as you scroll.

The Patterns site focuses around a masonry-style grid of rendered patterns. My designs have a discrete “Load more” button, but I imagine we could implement an infinite scroll or a pager just as easily. Within the grid, Patterns focus on showing there rendered output, unlike the Plugins/Themes directory where a static image is required.

We could require a static image, or generate one automatically. This could be nice as it would allow more control over the grid (fixed dimensions) but I think could lead to a worse experience browsing, as the images wouldn’t necessarily reflect the reality of the pattern shown.

Within the grid, I’ve omitted the patterns title and other information (like author, date, etc) in hopes of creating a more visually-focused browsing experience. However, it think we could explore incorporating the 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. information and actions when hovering a pattern within the grid. There could be some issues with this when dealing with very short patterns, like an 80px tall banner.

Hovering a pattern within the grid could show the patterns title and actions to favorite and copy the pattern directly from the grid view.

Single Pattern Details

Selecting a pattern from the grid will open the single pattern details page. The pattern detail page displays the title, description, author, categories, and actions (favorite and copy) for the specific pattern.

The large preview of the pattern includes drag handles on both sides, which allows you to adjust the viewport size of the preview and better understand how a pattern responds at various screen sizes. An alternative to this interaction is to include similar pre-defined device widths, but I feel the drag handles offer a more interactive experience.

There was some brief talk about making the preview an actual instance of the block editor, allowing visitors to edit, customize, or otherwise change a pattern directly from the site. This could be interesting, but I think for now we’ll consider it out of scope; Maybe something to reconsider once the directory is up and running and people are using it.

Below the large preview is the patterns categories, a link to report a pattern, and then an “explore” section which displays other patterns by the same author (if available) along with patterns that contain the similar categories.

How to use a pattern

Since patterns are really just text, they can be copied to your device’s clipboard just like any other text. And, then you can paste the pattern into any block editor to use it. My hope (perhaps mistakenly) is that copy/paste is a very familiar thing that people do, but we’ll still need some sort of instructions for when people try to use a pattern for the first time.

In the GIF above I press the “Copy pattern” button and the pattern is copied to my device’s clipboard automatically. A message appears stating that the pattern has been copied a “Learn more” button. Pressing the “Learn more” button displays a modal with more explicit instructions and visuals to help people better understand how to use a pattern.

Besides copy/paste, you’ll be able to “favorite” patterns and find them from within the editor directly. This will be similar to the way plugins and themes works today. I plan to have more on some editor-related changes to browsing and inserter patterns in another post.

Submitting a pattern

Anyone signed in to WordPress.org will be able to create and submit a pattern to be hosted in the directory. To help explain what patterns are any why creating and submitting that could be a great move, I think it could be nice to have a landing page. Here’s a quickly stubbed out design for how such a landing page could look:

When actually creating a pattern, visitors will use a hosted instance of the block editor. This editor will (mostly) work just like the normal block editor, but with a few tweaks. The first change is a custom version of the editor’s welcome modal focused on creating and submitting patterns. I don’t have all of the steps mocked up, but I imagine 2-3 slides explaining how to submit; Something like this:

The next change is related to the document inspector 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.. This normally shows document-level settings for posts and pages. When creating a pattern it will be similar, but the wording will be updated and it will contain fields for setting the patterns title (which also lives in the canvas), description, and categories.

Finally, rather than having a “Publish” button the patterns editor changes the label to “Submit Pattern.” I originally used the existing “pre-publish” flow from the editor to handle submitting a pattern. This existing flow uses a sidebar to present “last minute” information for review before a document is published. This could work for submitting patterns, but I think we’ll likely want to be more emphatic about what is happening (submitting, vs. publishing) and could likely make better use of the space provided by a modal to better display (what could be a growing list of) categories.

Once someone submit their pattern they’ll be taken to the “My Patterns” screen, which lists all the patterns that person has created and favorited.

When signed in to your WordPress.org the Patterns homepage will update to provide information about your submitted patterns, including any pending reviews.

Speaking of reviews, there are currently some very basic checks in place, but its unclear to me if there will be a need for manual reviews before (or after) a pattern is published. I did include a “Report pattern” link on the pattern detail page, which opens a modal with some options to report a pattern:

There’s still some open questions (How do drafts work? What categories should we have? How are “featured” patterns chosen? And more…) but this post hopefully outlines the foundation for this exciting new section of WordPress.org.

Please do leave your thoughts, concerns, and ideas in the comments below. Don’t hold back.

#block-patterns, #meta, #patterns-directory, #wordpress-org

Design team meeting agenda for 7 April 2021

The Weekly Chat for Make WordPress Global Design will take place on Wednesday, April 7, 2021, 07:00 GMT+1 in the #design channel of the WordPress Slack. 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.

Here are the suggested topics:

If you would like to add something to the agenda then please leave a comment. Thank you!

#agenda#meeting-agenda

Design team show & tell meeting on 31 March 2021

As is the last Wednesday of the month, we will have a Show & Tell. This is a Zoom meeting where contributors have the opportunity to share their work and ask for feedback from the design team or simply show whatever they are working on.

Zoom link will be posted on 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/. #design channel and recorded for those that cannot attend. A summary will also be posted in lieu of meeting notes.

If you would like to share your work, show up to the call and raise your hand or let us know in the comments.

#meeting-agenda

Design Team Meeting Agenda for March 24, 2021

The Weekly Chat for Make WordPress Global Design will take place on Wednesday, March 24, 2021, 18:00 UTC in the #design channel of the WordPress Slack. 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.

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

#agenda, #meeting-agenda

Design Team Meeting Agenda for 10 March 2021

The Weekly Chat for Make WordPress Global Design will take place on Wednesday, March 10, 2021, 18:00 UTC in the #design channel of the WordPress Slack. 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.

Here are the suggested topics:

  • Housekeeping
  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Blog Highlights
  • Announcements
  • Updates
  • Discussion
  • Open floor

If you would like to add something to the agenda then please leave a comment. Thank you!

#meeting-agenda, #weekly-design-chat

Design Team Meeting Notes March 3, 2021

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.

Attendees@estelaris, @kellychoffman, @chaion07, @amykamala, @reachmazharul, @ashiquzzaman, @paaljoachim, @hedgefield, @ibdz, @xris, @shaunandrews, @melchoyce, @annezazu, @hnew, @felixbaumgaertner, @kristengunther, @urvik1

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.
  • Contributions to the Design Team is always welcomed. Please 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 @chaion07 and they will guide you through.

CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Blog Highlights

Announcements & Updates

  • @chaion07 and @estelaris are discussing the possibility of having a dedicated p2 on triage. The documentation practice will be helpful for the team and the future releases. There’s also an idea to put together a Week in Design post. Discussions are still ongoing. Contributors are needed to step in and support both the initiatives. Ping either of them on Slack to get involved.
  • The latest version of Month in WordPress is out.
  • @paaljoachim wrote a guide on Testing a Gutenberg PR  that includes a video tutorial.
  • @estelaris is updating the colors in the Figma library. For reference, see this post.
  • Last week we had the February Show and Tell  with the most number of attendees. We will have our next show and tell on the March 31 (last Wednesday of the month). If you’re working on something that you wish to showcase then please let the team know.

Open Floor

#meeting-summary#meeting-notes

Review/Feedback Request: UX for learn.wordpress.org

What is it?

Learn WordPress is a collection of online resources for educating both new and veteran WordPress users. It’s primarily composed of lesson plans and video workshops, where lesson plans are geared toward workshop facilitators or educators teaching others about WordPress, and workshops are geared towards learners seeking online, on-demand educational resources to boost their WordPress skills. Visitors to the site who watch video workshops can also participate in related discussion groups via the Learn WordPress Meetup.

What are we trying to solve?

The Training team and Learn WordPress Working Group would like to review the 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 UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. from a site visitor’s perspective. Currently, Learn WordPress has two main audiences: learners and educators. Workshops are geared towards learners, whereas lesson plans are geared towards those educating others about WordPress.

With both audiences in mind, we’d like to better understand overall improvements to the user experience for a first-time visitor to the Learn WordPress site. This might include things like:

  • How the site should showcase content on related topics, i.e. a workshop and lesson plan that touches on the same topic, or opportunities to unify the UX between lesson plans and workshops.
  • Improvements to the UX to better showcase the different types of learning opportunities available, such as synchronous learning opportunities through discussion groups.
  • Overall improvements to the layout and navigation of the site to make it clear who the content is for and where/how to get started.

Current status

In August 2020, the Community and Training teams launched a Beta version of the Learn WordPress site with both lesson plans and workshops housed under the same umbrella. In December 2020, we launched Learn WordPress officially and have continued to work on adding new, valuable content to the site.

As we continue to iterate, we’ve tracked some potential improvements and enhancements in the Learn WordPress Github, including one ticket in particular that received some design help around the visual organization of lesson plans. As we’ve brainstormed ideas and next steps for 2021 – which is tracked in the Learn WordPress Trello board – much of our conversation comes back to ensuring that the Learn WordPress site is as clear and engaging to visitors as possible. In particular, making sure newcomers to the site can clearly understand how to find what they need, whether that’s for a new WordPress user or a veteran educator.

How to Help

Ideally, what we’re looking for is to have someone (or multiple someones) from the Design team do a walkthrough of the user experience for Learn WordPress as a user: someone who wants to learn about WordPress and/or as someone who wants to educate others about WordPress.

If it is possible to get feedback in the comments on this post with suggestions for improvements, that would help the Community and Training teams to triage and prioritize the next iteration of Learn WordPress.

This post was written in collaboration with @courane01.

+make.wordpress.org/community/

+make.wordpress.org/training/

Design team meeting notes Feb. 10 2021

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.

Updates

The updated navigation screen was merged https://github.com/WordPress/gutenberg/pull/28675 with more iteration happening in https://github.com/WordPress/gutenberg/issues/28864 and https://github.com/WordPress/gutenberg/issues/28863.

Feedback was requested on these issues by @paaljoachim:

WP Notify

Initial designs have been made, but there’s some trouble getting started on a prototype. To get things going again, the team has compiled the latest information on requirements, use cases, MVPMinimum Viable Product "A minimum viable product (MVP) is a product with just enough features to satisfy early customers, and to provide feedback for future product development." - WikiPedia scope plus the latest designs on a wiki https://github.com/WordPress/wp-notify/wiki.

This is preparation for doing a call for help in the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. chat soon. Hopefully that will bring in some more interest and this can get rolling! If you’re interested in forming an opinion on the designs already, the links to the githubGitHub GitHub is a website that offers online implementation of git repositories that can 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/ issues for discussion are on the designs page https://github.com/WordPress/wp-notify/wiki/Project-designs-(v1). We have enough to get started, but we can always keep refining.

WC India

WC India 2021 had their first ever virtual Contributor DayContributor Day Contributor Days are standalone days, frequently held before or after WordCamps but they can also happen at any time. They are events where people get together to work on various areas of https://make.wordpress.org/ There are many teams that people can participate in, each with a different focus. https://2017.us.wordcamp.org/contributor-day/ https://make.wordpress.org/support/handbook/getting-started/getting-started-at-a-contributor-day/.. Ahmed Chaion was their facilitating the design table. We had many people coming up to visit. We also had discussions on WordPress and how design contributes to it. We’ve had quite a few new contributors also joining the channel with the help of the onboarding videos playlist created by the marketing team.

Discussion

@estelaris proposed to replace the # anchor with the link anchor, but it doesn’t look like a “link”. For reference, it is the last item on this post https://make.wordpress.org/docs/2021/02/01/requirements-for-a-new-design-for-the-article-pages-in-user-documentation/

Other link icons were discussed. The icon in the editor is used to link/unlink text. The icon suggested for the support site is used to copy/visit a URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org. We looked at Material icons, but we want to keep the style between editor and 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. unified. It was suggested to add an anchor icon. @estelaris will work on a proposal.

Open floor

@ashiquzzaman asked whether there is a central icon font in 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/. In fact work on that is underway at

New submissions are welcome!

#meeting-notes

Show and Tell January 27, 2021

This year, we will continue with our Show and Tell on the last Wednesday of the month. This is a Zoom meeting where contributors have the opportunity to share their work and ask for feedback from the design team or simply show whatever they are working on.

Zoom link will be posted on 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/. #design channel and recorded for those that cannot attend. A summary will also be posted in the meetings notes.

If you would like to share your work, let us know in the comments.

#meeting-agenda