Block Directory V2

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 will be a place where blocks can be perused and installed. Think of it as 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 directory limited to single blocks.

Back in December, @melchoyce proposed a prototype for a block directory. That prototype is still 100% viable for the block directory. It is likely the simplest to implement as it’s pretty close to the existing plugin directory with a few nice systematic updates to patterns used across wp-admin.

When I picked up this project, it made sense to me to try a variation of what @melchoyce created . I decided to see what a block directory might look like if it shared Gutenberg’s design language. To accomplish this, I tried using similar patterns and styles to what is seen within 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/ since the block directory and Gutenberg are so closely tied together. I also have been keeping block patterns in mind when designing.

The feedback I’m looking for

This is a hopeful proposal and none of what I propose here is set in stone. I would like higher level feedback around the interactions. Do the interactions make sense? Is it clear what you’re looking at? What are the designs missing or lacking? What could be improved?

I’m not looking for detailed design feedback like hover states or border colors. Those are important for sure and that type of feedback will be needed during implementation.

The prototype

Here is a rough Figma Prototype that shows a handful of the views in the block directory. Take note of questions you have as you look through it and please share in the comments below. I hope most will be answered as I break down each of the primary design patterns and views. 

Try the prototype.

The block card

The block card is designed to be a recognizable design pattern that, even without a preview, will convey that it is a block. You can see we already have a similar card proposed for implementation in Gutenberg’s block directory search.

I tackled this in a few places. To start, I identified block cards that can convey the most important information about a block at a glance. This is where I started diverging from the existing plugin directory.

I deviated from using a plugin icon and plugin 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. for two reasons.

  1. Blocks already have an icon by nature. This icon will be one of the main identifiers when interacting with blocks. I wanted to reinforce the connection with the block icon and the block as soon as possible. Thus, I replaced the plugin icon with the block icon.
  2. Blocks and Patterns are very visual. Rather than showing a somewhat arbitrary header image, I opted to show a preview of the block.

I trimmed down the amount of information present on the card. In this mockup, I show the Block Name, the Author, Rating, and Number of Ratings. I may add an indicator of active installs. Everything else will be shown on the Block’s Details View, which a user will need to navigate to in order to install a block.

The preview is a square because the block’s example can vary widely in its aspect ratio. We will need to do some work here to figure out the scaling and overflow details of previews.

The directory header

Mel designed an iteration of the wp-admin page header that makes great use of space, order of interactions, and hierarchy. I made very minor modifications to it resulting in what you see below. Ideally, this pattern could be used across all wp-admin sections.

It’s very simple. It has a page title, a description, primary actions, and secondary actions. The page title and description are exactly what you would expect. The primary actions are below the description and, in this case, include a search bar and upload button. The secondary actions are the help and settings buttons.

The directory view

The directory view is a combination of the header and groups of block cards.

Like the current plugins directory, the blocks will be in categories with “See all” links for folks who want to peruse a specific categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging..

The CTA banners Mel designed are ace so I expect we could use them as a way to highlight any number of topical subjects. Perhaps they could be used to promote block collections if we decide to go down that road at a later date.

The block details view

The block details view shows all the information surrounding a plugin. The current details view for a plugin relies heavily on a 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.. Much of the sidebar information seems directed at plugin developers.

The most useful information for a user is at the top. It includes ratings, active installations, compatibility, the block version number, and the install button.

The Demo section is an example of the block that a user can interact with. It is important the user gets a clear idea of what they’re about to install. The editor itself will be an instance of Gutenberg with some slight customization. The inspector will remain visible because many blocks rely on the sidebar controls.

The Reviews section shows two reviews along with rating totals. I would like your thoughts as to which reviews should show.

There are still some remaining pieces of information I would like to incorporate including contributors, a changelog, and a support section of some sort. This is also missing the Advanced View. Perhaps some of those missing items will fit better there.

wp-admin design implications

These designs include patterns that could be used elsewhere in wp-admin. For example, we could use the directory header pattern on the other directories and perhaps on all wp-admin pages. This would be one of several steps to align the design language of wp-admin and Gutenberg.

#block-directory

Show and tell meeting for Wednesday 28th October

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/. and Zoom. You can join the Slack channel by following the instructions in our handbook.

As being this the last Wednesday of the month we continue with Show & Tell. If you are working on a design project for WordPress and want feedback or just want to show us, please add a comment here. If not, just show up at the meeting and we will give you some time.

The Zoom link will be announced in Slack on Wednesday right at the meeting time.

Reshaping design team communications

In September, the design team chose to shorten meetings length, remove one triage as results were varied and some people were feeling overwhelmed, finding it hard to follow everything. This was done as an experiment while the team figured out what other items could be added to the make/design team.

As it was discussed during design team meeting, the problems raised in the conversation are:

  • It’s hard to see the work going on. During meetings lots of work is being shared but maybe surfacing that more in posts? How could the work be included of people that don’t attend the meetings regularly?
  • Make/design feels inaccessible to write to or a hurdle? Lacking incentive?
  • Older issues feel lost?
  • There can be a lot going on so finding your way can be hard.
  • Triage and feedback are sometimes seen as the same thing, and frustration can arise when a ticket doesn’t move forward after triage only, how can we make sure tickets keep moving?.
  • Often things fall to one person, how can we encourage more pairing or groups?.

What suits one person may not suit someone else. This post is designed to bring 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/. conversation to a wider audience and start working on some opportunities to adjust the communication flows and find the right combination for the team. That ‘one thing’ might of course be multiple optional things, let’s find out together!

Existing communications

The team primarily communicates via Slack, 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/ or TracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. and uses this site for agendas, notes. This has changed over time, but is the current state right now. Here is a summary of what happens right now as far as organised sessions are concerned:

Scheduled meetings:

  • 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)/design office hour: Combined effort to review tickets pertinent to both teams.
  • Triage: Review of Trac tickets and PRs to check their urgent status and needs.
  • Weekly meeting: Check in and working meetings for the design team.
  • Show and tell: Once a month Zoom meetings where team members showcase the project they are working on. Attendees can ask questions/give feedback. 

Un-scheduled sessions:

  • Hallway hangouts: Zoom meetings where a team member works live on a project or issue. Usually attendees ask questions/make suggestions/give opinions. The goal is more educational than showcasing the work.
  • Feedback sessions: Full review and discussion of Trac tickets and PRs.

Make/design posts:

  • Agenda
  • Notes

List of ideas

Let’s now dive into some of the ideas that came up during the meeting.

  • Find a way of encouraging more to write on make/design. This needs ideas in itself!
  • x-post more update posts for 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/ to design.
  • Be willing for meetings to run on if conversation needs, but stick to 30 minutes.
  • Distinguish between triage and feedback clearly.
  • Encourage and enable APAC sessions / meetings to happen. It’s something been talked about for a while, so how can it begin?
  • Find ways to surface the work being done to everyone on make/design.
  • Post summaries in Slack after feedback sessions of tickets covered so others can join out of timezone.
  • Post a monthly summary of tickets that design is working on, has reviewed or closed. A post similar to how it is done in themes.
  • Encourage commenting on meeting agendas even outside of timezone to keep to those for those facilitating and ensure all voices are heard.
  • Consider ‘old ticket’ sessions.

Along with the above, here are some additional ideas pulled from the post when meeting times were adjusted:

  • 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.
  • Consider that we elect team reps who are not both in the same time zone? That would help keep other time zones involved.
  • Posting the shortlist of tickets 30 min before Triage? So, there’s more room to read before discussion.

Next steps

There is a lot of information to process, so this post will be open for a couple of weeks, to gather ideas. It will also be a topic in the meeting after the next, as next week’s meeting is a show and tell session. A post will be written up summarising action points, ways to get involved after discussion has reached a point and ideas have been gathered.

Questions to get the conversation started

It would be great to have a continued discussion in the comments. To begin that, here are a few starting points.

  • What has stopped you posting or asking to post on make/design when you had something to contribute there?
  • What ideas do you have for things could be added to the communications this team uses?
  • What ideas do you have for things could be iterated on existing communications this team uses?
  • Would you like to be involved in any aspect of this increased communication flow? If so please comment what that would be. As ways are identified there will be further calls for volunteers, but if you have an area you are passionate about please say.

This post was a summary of the meeting points from 21/10/2020 and collaborated with @estelaris, @hedgefield. Thanks to @chaion07 for the review. Props to everyone that attended the meeting and over the past few months given their input on ways to iterate the way this team works.

Design team meeting notes 21 October 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 read 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 week is Design Show & Tell, a monthly Zoom meeting where you can showcase or update any project you are working on or ask for input on anything you are contributing. It is open to all design contributors.

Updates

@melchoyce let us know that Twenty Twenty-One is in 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. and the team would appreciate any input. You can test it in WordPress trunk or download the theme directly from GitHub.

@shaunandrews is looking into several floating (+) buttons, understanding their function, the problems they solve or create.

@anyssa and @elmastudio are designing the About page for release 5.6.

@karmatosed @estelaris have been moving 5.6 tickets and PRs.

@paaljoachim ran a successful Design Feedback session on Wednesday early morning. These may continue every other week, switching between early mornings and late evenings to allow for contributors in different time zones to join.

@mapk is working on the Query 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.:

Open floor

The design team held a discussion about the use we are making of the Make/design blog, triage and meeting. While we have been running an experiment on trying to contain the surplus of information, we have also noticed that we are missing opportunities and the blog has turned into a list for meeting agendas and notes.

We had several ideas that could help us improve and there will be a post about this.

#meeting-notes

Design team meeting agenda for 21 October 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
    • Reminder, next week is Show & Tell
  • Updates
    • Team members leave any project updates as comments in this post.
  • Open floor

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

#meeting-agenda

Design meeting notes 14 october

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.

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/ contributors have gathered lots of feedback on the new Widgets screen. It is being aggregated into issues now, most of which will hopefully be resolved for WordPress 5.6.

Also lots of work is happening on theme/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 auto-updates for 5.6, to really polish up the initial implementation. If you’d like to help out, drop by #core-auto-updates on Slack.

Main topic

@paaljoachim has started facilitating design feedback sessions in our #design channel on Slack. These will be informal, meaning the time and format can vary, and will likely happen in the morning for the EU timezones. That means we’re covering new times in which otherwise meetings don’t often get scheduled. It helps create more moments for focused design discussion The first session was run right before this meeting to great success. Stay tuned for more.

#meeting-notes

Design meeting agenda 14 october 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
  • Updates
    • Team members leave any project updates as comments in this post. We will review project updates during the meeting.
  • Main topics
    • Discussion about design feedback session or working session to resolve more open tickets.
  • Open floor

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

#meeting-agenda

X-post: Accessibility and design collaborative office hours

X-comment from +make.wordpress.org/accessibility: Comment on Accessibility and design collaborative office hours

Design meeting notes 7 october

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.

Updates

Lots of good things happening with 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/. There wasn’t anybody around to recap at this time, but keep an eye out for the next update on the Core Make blog.

There is an amazing team of designers working on the release of WordPress 5.6, there’s some good work happening there too:

As part of the 5.6 release process, we also have several bug scrubs scheduled that require testing. Here is the schedule in case you are interested: https://make.wordpress.org/core/2020/09/01/bug-scrub-schedule-for-5-6/

@ibdz is working on iterating on Admin Color Schemes together with #core-css, helping with testing the reduced color palette proposed last week to clean up all those runaway colors.

@manzwebdesigns is working with #pluginreview on detecting plugins not meeting standards such as gifs in the backend.

@mapk is, among other things, taking a crack at the 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. of the Query 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., with @hedgefield also diving into that particular conundrum to offer advice.

@hareeshpillai requested feedback on the following tickets:

  • https://core.trac.wordpress.org/ticket/46866
  • https://core.trac.wordpress.org/ticket/45395

Open floor

@joyously raised the point that the design meeting could use more focus to get people to own design tickets. Before we ran out of time, we talked briefly about how design happens at different paces for each contributor, and that some things don’t always make it to the meeting. It was suggested she makes a list of tickets that she feels have slipped through the cracks and we can review them next week.

#meeting-notes

Design meeting agenda 7 October 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
  • 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.
  • Open floor

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

#meeting-agenda