Show and Tell for Nov. 2021

Our monthly show and tell meeting will take place on Zoom tomorrow, Wednesday November 16th at 18:00 UTC. A zoom link will be posted in the #design channel on the WordPress Slack. Learn how to join by following the instructions in the handbook.

image
The sibling inserter, the plus button, the quick inserter button, the in-between add button; Whatever you call it, this button often gets in the way. Do we need still need it? Lets chat about it.

This months discussion will focus on the [ + ] button that appears throughout the WordPress 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. There are many names for it: the sibling inserter, the plus button, the quick inserter button, the in-between add button, and more. Last year I wrote a GitHub issue that describes some of the confusion around this button, and much of it is still relevant. I’d like to focus our discussion around:

  • Validating the problems outlined in the GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ issue.
  • Reviewing some of the suggested solutions.
  • Updating the issue with a way forward.

We’ll also have time for anyone to share their work or ask questions to the design team. Just drop a comment below, or show up and raise your hand. I hope to see you on Zoom tomorrow.

Recent Happenings

There’s so much design work happening every day across 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/., TracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/., GitHub and more. For good measure, here’s a few highlights from the past few weeks…

A series of animatics shown when first visiting the site editor in WordPress 5.9.

A new welcome guide was added to the Site Editor to help explain some of the new features coming in WordPress 5.9.

Ongoing work to the Figma library aims update existing components and add new components for areas outside of the editor.

The WordPress Figma library has a new set of upcoming components in the works for you to use in your designs.

Openverse, a powerful tool that surfaces a vast range of openly-licensed content, has a new logo.

Openverse has shared some work on their new brand identity and symbol.

A new “Explore” button in the block inserter 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. opens a large modal to browse block patterns.

A new way to browse block patterns has merged and will be shipping with WordPress 5.9.

The new Site Editor now lives inside the Appearance menu. Alongside this change, the Site Editor no longer has it’s own sidebar navigation menu.

The wp-admin Appearance menu now contains items for the Editor, Styles, Templates, and Template Parts. Alongside this change, the W button within the Editor no longer displays it’s own navigation menu.

#design-show-and-tell, #meeting-agenda, #recent-happenings

Show and Tell Oct 2021 Agenda

Our monthly show and tell takes place on Zoom tomorrow at 18:00 UTC. This monthly call is a chance for designers to share work, ask for feedback, and answer questions. All are welcome to join; A Zoom link will be shared in the #design channel on 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/.. (Not sure how to join Slack? We have instructions available just for you!)

We’re open to anyone sharing their work, but here’s a few things we’ll likely discuss:

If you have anything you’d like to add to this list let us know in the comments, and we’ll bring it up on the call.

#design-show-and-tell, #meeting-agenda

Moving to Bi-Weekly Meetings

We had our team meeting a few days ago (Oct 6) in #design  on Slack. One of the topics was around the scheduling of our meetings. Currently, we do a weekly meeting with the last meeting of the month being on Zoom.

One of the agenda items for our meeting was to discuss moving to a bi-weekly schedule. Since everyone in attendance seemed to be in favor of the change we’ll be starting this new schedule immediately. Next week (Oct 13) there will be no formal meeting. Our next meeting (Oct 20) will take place at the normal time (18:00 UTC) and will be on Zoom.

While there will be less formal, synchronous time, I encourage everyone to continue to share progress, suggest issues, and ask for help in #design on 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/. at any time.

In addition to informal Slack chatter, there’s also some ongoing “Hallway Hangout” sessions happening throughout each week. These casual hangout sessions usually take place on Zoom and topics vary. Sometimes they are planned ahead, and other times they’re spur of the moment sessions announced in Slack.

Come join us in Slack and I hope to see you at a future meeting.

#meeting-agenda, #meeting-notes

Agenda for Design Team Meeting, Oct 6, 2021

We’ll be having our weekly 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/. meeting today at 18:00 UTC in the #design channel on the WordPress Slack. Learn how to join by following the instructions in the handbook.

Agenda

  • Discuss an alternate meeting schedule
    • Bi-weekly
    • Rotating timezones
  • Discuss using meetings as a way to brainstorm solutions to a specific design problem

I hope to see you there.

#meeting-agenda

Sept 2021 “Show & Tell” Recording

Our monthly “Show & Tell” Zoom call took place yesterday. This video chat is a place for designers to share their in-progress work and an opportunity for anyone to give feedback.

This months chat covered the following:

  • @karmatosed is planning to look into 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. support and will likely have a #hallway-hangout soon.
  • @javiarce shared his designs for background images.
  • @critterverse shared her designs for theme switching.

Next week we’ll have our regular, text-based 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/. meeting.

#design, #meeting-notes, #show-and-tell

Design Team “Show & Tell” Meeting for September 2021

The Weekly Chat for WordPress Design team will take place on Wednesday, September 29, 2021, 18:00 UTC.

As this is the last meeting of the month, we will be gathering on Zoom for our “Show & Tell.”

The agenda is open and we encourage anyone to share their design work with the team. If you have design work you’d like to share, or a topic you’d like to discuss together, please leave a comment below or in the #design channel of the WordPress Slack.

A Zoom link will be shared in the #design Slack channel when the meeting starts.

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.

#meeting-agenda, #show-and-tell

Document Status and Visibility

If you’ve ever used WordPress to create a blog post, web page, or any other type of document, then you are likely familiar with the 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.. The sidebar shows you information and controls related to the either the selected 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., or the document itself.

The sidebar hasn’t changed very much over the years, and in many ways still resembles the pre-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/ (Classic) WordPress editor. Here’s a side-by-side of the sidebar in the classic and block editors:

Over on GithubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/, there’s an overview of design updates to the sidebar. The designs focus on block controls, specifically typography, color, and dimensions. The issue does propose a component system of controls for things like inputs, dropdowns, and sliders, but doesn’t explore how this system could apply to the document controls shown above.

Since we’re talking about sidebar controls, I think it’s helpful to also include the design of the so-called “Global Styles” project outlined on Github. This design uses a multi-level, nested interface to group controls into Color, Typography, and Layout sections.

With all this in mind, I’ve been looking at the document sidebar and how it could be improved. For this first pass, I’m focused on the “Status & visibility” and “Permalink” sections. Here’s a look at the current design alongside my proposed changes:

There’s quite a few changes. The first, and maybe most obvious is the lack of an accordion interface containing all the controls. Instead, controls are shown and hidden using the ellipses menu; Open the menu and you can choose what controls are hidden or shown. This reduces the overall footprint of the controls, but also allows people to customize the sidebar to their specific needs.

This menu is also a convenient place to find features and functions like viewing the document’s history, renaming the document, reverting publish documents to draft, and moving the document to trashTrash Trash in WordPress is like the Recycle Bin on your PC or Trash in your Macintosh computer. Users with the proper permission level (administrators and editors) have the ability to delete a post, page, and/or comments. When you delete the item, it is moved to the trash folder where it will remain for 30 days..

At the top of the section is the current document’s title. Here’s how that could look with a few different titles.

The title itself could also be interactive, and allow for renaming the document directly from the sidebar. This is helpful as the editor’s canvas may not always include the document title. You could initiate renaming from the ellipses menu, or double-click on the title itself.

Each control within the list would be clickable, opening a popover with more information and controls to change the value.

Here’s how each control’s popover would look:

There’s a lot more to do with the remainder of the document controls, like improving categories, tags, and the featured imageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts. controls. But for now, I think this is a good start and can hopefully lead towards improvements across the rest of the document sidebar.

Republished from my personal site.

#design, #document-sidebar, #status-and-visibility

WordPress.org Patterns Directory, i2

There’s been ongoing work on 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 since I last posted. I’ve continued to iterate on the design for the site and editor and wanted to share some updates. You can find the latest designs in Figma, along with all the past iterations and explorations.

The homepage of WordPress.org/Patterns
Examples of how individual patterns appear within the list.
Navigating multiple pages of patterns.
The pattern detail screen displays a large, interactive preview with a dropdown for adjusting the width.
When visiting the pattern editor for the first time a welcome tour walks you through the various aspects of creating patterns.
In order to avoid licensing issues or obscene/unwanted content, we’ll be restricting uploads and providing media for pattern authors to use.
The pattern editor is reminiscent of the template editor and includes a viewport width menu.
The 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. includes all the various 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 for patterns including title, description, categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging., and keywords.

Some notable changes since the last post:

  • The search has been made more prominent.
  • The chaotic masonry-style layout has been replaced with a more rigid grid.
  • Pattern titles are always visible.
  • Author avatars along with view and favorite counts are displayed below the pattern title.
  • The “Load more” button has been replaced with 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. for navigating between pages.
  • The pattern preview gains a menu to adjust the width of the viewport to see how a pattern reacts at various sizes.
  • The pattern editor gets it’s own welcome tour.
  • Media uploads will be restricted, meaning patterns can only use media provided to them in the library.
  • The background color of the pattern editor now matches that of 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. editors “template editing” mode.
  • The pattern editor replaces the “Preview” menu with a “Width” menu, which allows designers to set the viewportWidth property of their pattern.
  • Clicking the “Publish” button in the editor uses a multi-step modal that walks through collecting and confirming the required details (title, description, category) of a pattern.
  • My Patterns has been split into two screens; The first is for patterns you own, and the second is for patterns that you’ve favorited.

Work continues on both Github and in Figma; Please do join in the fun and help us out. If you have any thoughts or feedback feel free to drop a comment below. Thanks!

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

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

Media Grid: Thumbnail Resizing

Outside of a grid layout, there are a few other features that the Media Grid team has been discussing. Lets talk about one of these feature: Thumbnail Resizing.

Recap: Why a grid?
The entire purpose of moving towards a grid layout for the Media Library is to make it easier for you to manage your media — images, videos, audio, documents, and more. The library currently uses a standard “wp-list-table” view. (This actually could use some love, too.)

Media Table View

The Media Grid plugin currently replaces the tableview with the existing Media Manager grid, commonly seen while adding an image to your post.

Media Manager

Images and videos are visual files, and lend themselves to a thumbnail grid. Its easy to find an image by scrolling through a grid. There’s a lot of potential for extending previews to other types (like audio, pdf’s, etc), which would also benefit from the grid 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..

Resizing

While working on the Media Grid 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, I often found myself reference other file management tools. Programs like OS X’s Finder, Windows’ Explorer, Apple’s iPhone (Mac and iOSiOS The operating system used on iPhones and iPads.), and a few others. One pattern I noticed was that most of these applications offers some way to change the way you view “things” (files, images, documents, whatev’s) in your list. In my own experience, I find myself changing the thumbnail size while browsing a bunch of images on my computer:

Finder Default Icons

Finder’s default thumbnail size.

Just move this little slider...

Just move this little slider…

…and boom, larger icons!

The larger grid view really shines when browsing more details images, or lots of similar images. Its also a great way to just look through your images in more detail, without having to jump to a full size view for each one.

The Media Grid plugin currently has some thumbnail size options. The first iteration used a slider and animated the thumbnails as they changed size, right in front of your eyes! It was cool… at first. Then it quickly got annoying.

A few more iterations

The animation was jumpy, and more distracting than anything else. I nixed the animation, but the slider still felt unnatural — there aren’t any other sliders in wp-admin. I decided to keep things simple, and replaced the slider with a three buttons: Small, Medium, Large. After another few weeks of using this, I found myself using Small and Medium often; Large was rarely used. So I trimmed the options down to simply: Small and Large. This is where’re at in the current plugin:

Resize_in_Action

(I wrote about some of the above earlier, over on the Media Grid team blog.)

Now what?

What do you think about the size options? Are the helpful, or unnecessary bloat? Or somewhere in between?

What do you think about the two (Small, Large) options?

Is the straight-forward label toggle a good UI? What about icons, like this:

Media Library Nav Bar

#media-grid