Block Directory in WP-Admin Concepts

You may have spotted during @matt‘s Summer Update at WCEU a new wp-admin section for Blocks. I wanted to share those early concepts here.

View Figma Prototype

About Blocks

Rather than jumping straight into a list of blocks, I wanted to explore what an introduction to blocks could look like as a landing page. This page could feature some links to tutorials (that could open either externally, or in a modal), some basic FAQs, and a support link.

You’ll notice the new header style, inspired by the new Health Check screen and built on some concepts from the Design Experiments plugin. This new section provides a good opportunity to expand on this pattern, and to show how it could benefit WordPress users by providing context to each screen.


Add New Blocks

This section is largely inspired by wp-admin plugin cards, and the WordPress.org plugin details screen.

I also think we should update across wp-admin as well, since the current modal feels very outdated and doesn’t present information as cleanly or as organized as the .org modals:

Inside the modal, you’d also be able to demo a block before installing. @ck3lee has figured out how to make this possible 🎉

We’d tap into the Shiny Updates framework to make installation and activation quick & easy.

The upload flow would work the way plugins do — I’ll flesh out some designs around that in future iterations.


Installed Blocks

This screen would be a list of all installed third-party blocks, so you can activate, deactivate, delete, etc. in bulk, using a traditional list table. I’ve added an “instances” link, which would show all posts and pages the third-party block is being used in.


Manage Blocks

This is the screen I’m most “meh” about, which is pretty much a duplication of the block management modal inside the editor. I think we need to have this management available within this section, but I’m not sure if this is the best approach to tackling it.


Reusable Blocks

Currently, the only way to reach the Reusable Blocks screen is through either the block library inside the editor, or a link in the settings dropdown in the editor. Putting it in a new Blocks section gives it an easier-to-find home.


Feedback

These are still early concepts, so it would be good to get some early impressions. Specifically, I’d like everyone’s thoughts on:

  • Thinking through the flow of managing blocks on your site, does it feel like any important tasks are missing from these concepts?
  • Would you expect any of these screens to be combined?
  • Can you think if any stress cases these screens will need to account for?
  • What would you like to see next for the Block Directory? Are there any other block management features you would benefit from?

#block-directory

Project: Reviewing WordPress Components

What are WordPress Components?

Put simply, WordPress Components are the set of UI elements that make up the Block Editor and other projects. You can find them in the Gutenberg GitHub repo or in the Block Editor Handbook.

As I’ve mentioned in our team chats over the past few weeks, I’ve been working on reviewing WordPress Components. To help make sure as many people can be involved as possible, I’m summarizing the work so far in this post.

Background

Along with a new editing experience, the Gutenberg project has created a growing library of UI components like buttons, menus, and text fields. Although these components were introduced with the Block Editor, they’re generic enough to be useful in various contexts outside of it. I hope that we see them being used more throughout WordPress.

Opportunity

There’s an opportunity to make sure these components are flexible enough for all WordPress experiences, not just the Block Editor. In a related issue on GitHub, @matveb mentions that the components are now at a point where they can be re-examined in a long-term, holistic way. I think the Design team can help with that.

There’s one focus in particular where we can have an immediate impact — a component review.

Component review

A component review is what I’ve been focusing on the past few weeks. It’s a check of each component to evaluate naming, properties, and documentation. I’ve also noted gaps that could prevent the components from being useful. While this review isn’t necessarily visual design, it does help provide design guidelines for future work.

Specifically, this is what I’ve been checking and documenting:

  • Naming, composition, structure, and visual properties (e.g. “size” and “appearance” options for Button).
  • Expanded guidelines for design, development, and accessibility.

For more information on the basics of one of these reviews, and for some examples, check out the links under “How to get involved”.

How to get involved

Ready to get started? There are a couple of different paths to choose from:

  1. Design and Semantics: the most immediate need is feedback on the issues in the “Needs feedback” column of the GitHub project.
  2. Documentation: be on the lookout for issues labeled with “[Type] Documentation” in the coming days.

Right now the review aims to just get the basics right, but the Gutenberg project and its components are an opportunity to inform the future design of WordPress. Some discussions that started in the Gutenberg project have been a catalyst for change in the rest of WordPress. For example, icons that were designed for the Editor sparked a discussion to revamp Dashicons, the icons used in WP Admin. If you want to have an impact in this way, the component review is a great place to start!

I hope this excites you as much as it excites me! Please leave a comment on this post or join the #design Slack channel if you have any questions.

#wordpress-components

Design meeting notes for August 7, 2019

These are the weekly notes for the design meeting that happens on Wednesday’s. You can read the full transcript on our Slack channel and find the meeting’s agenda here. You can join the Slack channel by following the instructions in our handbook.

Updates

Gutenberg

@mapk shared that there are new contributors doing amazing work. He highlighted work happening on enabling the option to add gradients on cover blocks and the new Icon block.

Mark also reminded everyone about the ‘Needs Design‘ label and that we need everyone’s help.

Other updates

@drw158 invited everyone to discuss ownership and process for our Figma libraries. We need folks contributing with triaging, managing requests, updating documentation and publishing the libraries.

📢 Anyone interested on helping with this is welcome to raise their hand and mention it in the comments below. We’ll discuss this point again in next week’s meeting.

Open Floor

@ibdz asked for help on a HelpHub issue on GitHub about layout on mobile devices.

@azaozz asked for a final look at the new admin email confirmation that is shown every six months after an admin logs in.

#meeting-notes

Gutenberg Phase 2 Friday Design Update #29

Hey all! Now that we’re in the second half of the year, design reviews and feedback are extremely crucial to help keep development moving.

Widgets to blocks

Looking back on the list of issues that stemmed from a design review regarding the block areas screen and Customizer, it’s great to see these getting attention. If you haven’t had the opportunity to test the new widgets screen in wp-admin, please do! Gutenberg 6.2 reveals this screen in the plugin’s menu.

Gutenberg 6.2 widgets screen.

In Gutenberg 6.3, a new Experiments setting page is being introduced which will offer the ability to turn on/off the new widgets/block areas screen.

Experiments setting screen in Gutenberg 6.3.

Navigation block

As mentioned last week, the Navigation block is going through a design pivot. This is leading to some really interesting design explorations like this one about including existing block patterns.

Integrating existing block patterns into the Navigation block.

Tightening up

Block Directory

There’s some excellent development on the Block Directory which was posted recently.

New blocks


Thanks for reading, staying informed, and contributing anywhere you can!

#design, #gutenberg-weekly, #phase-2

Design meeting agenda for Wednesday 7th August

This is the agenda for the weekly design chat meeting on Wednesday, 7th August 2019, 18:00 UTC.

  • Housekeeping
  • Updates
    • Gutenberg design update: @mapk
    • Any other updates?
  • Discussion
    • Topics for upcoming meetings
  • Open floor

This meeting is held in the #design channel in the Making WordPress Slack.

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

#meeting-agenda

Block Library Installation Design Hand-off

@karmatosed and I recently chatted about the next steps for the block installation flow from within the block library, and decided that it would be better to test this feature in code, rather than testing the static prototype.

I’ve put together a hand-off document on Github so the development team (@tellyworth and @ck3lee) can start building it out. You can follow along and get involved with the development process there.

Call for Testing

We’re going to need some folks to get involved in testing the feature, once the initial version is built out. I’d like to start thinking about that now, so we can prepare a script and start figuring out where we should be testing sooner rather than later. If you’re interested in getting involved in testing this feature, please let me know in the comments.

#block-directory, #block-library

Design meeting agenda for Wednesday 24th July

This is the agenda for the weekly design chat meeting on Wednesday, 24th July 2019, 18:00 UTC.

  • Housekeeping
  • Updates
    • Gutenberg design update: @mapk
    • Any other updates?
  • Discussion
    • Design team Trello board: ‘meeting discussion’ label.
    • WordPress style guide in handbook iterations discussion.
  • Open floor

This meeting is held in the #design channel in the Making WordPress Slack.

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

#meeting-agenda

Design meeting notes for July 17, 2019

These are the weekly notes for the design meeting that happens on Wednesday’s. You can read the full transcript on our Slack channel and find the meeting’s agenda here.

There are no housekeeping topics.

Updates

Gutenberg Design update

@mapk updates us on what’s been going on with Gutenberg and design:

Patterns API for blocks

A discussion on language for labels follows, and @boemedia suggests testing designs with other languages besides English. As English is usually super short, and designs tend to break when translating into, for instance, German. @karmatosed suggests creating mockups with other languages too.

Another concern that’s raised by @nrqsnchz is, that he wonders how adding labels to the block toolbar is going to look like, since space is limited.

Discussion

Design team Trello Board

The design team used to use the Trello board for task management outside of the focus on Gutenberg and tasks not related to Trac tickets.

@karmatosed raises a few discussion points around it:

  • Do people still want to use it?
  • Should we have a meeting where we go through and decide triage style what to do or close?
  • Is it useful?
  • How can it be more useful but still be approachable for new people without reading a manual?

As some things have changed since the design team used the Trello board in the current setup, Tammie suggests the following:

  • Before next week I can move over resources column to handbook
  • Before next week I will also ping each ticket to see if owner wants to do anything with it or unasign.
  • Next week we do triage of board : do not go through and see what we want to do or not. Perhaps have a ‘future maybe’ column?
  • Each week we add in a timeboxed 15 minutes of ‘Trello checking’

Once it’s in order we can also open for new ideas.

If you have thoughts about this, please feel free to leave it in the comments section below these notes, or reply on Slack (account required).

Sharing corner

@boemedia feels inspired by the design explorations Andy Clarke does for Smashing Magazine. She also recommends reading the book ‘Art Direction for the Web’ that he wrote for Smashing Magazine.

@davewhitley likes to remind everyone of the component naming audit that happens in the Gutenberg repository . If you’re interested in name changes for the component and how they are composed, please hop onto the issues.

#meeting-notes

Design meeting agenda for Wednesday 10th July

This is the agenda for the weekly design chat meeting on Wednesday, 10th July 2019, 18:00 UTC.

  • Housekeeping
  • Updates
    • Gutenberg design update: @mapk
    • Any other updates?
  • Discussion
    • Theme preview: @dingo_d would like the team’s input.
  • Sharing corner: Let’s each week share something great, if you’ve got something to share please add as a comment, bring to meeting. It could be a new tool or a piece of inspiration.
  • Open floor

This meeting is held in the #design channel in the Making WordPress Slack.

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

#meeting-agenda

Design meeting notes for July 3, 2019

These are the weekly notes for the design meeting that happens on Wednesday’s. You can read the full transcript on our Slack channel and find the meeting’s agenda here

Updates

Gutenberg Design Updates

@kjellr started by sharing @karmatosed’s recap of the Gutenberg contributions that happened at WCEU.

Kjell also updated the team on some initial work happening in regards to expanding the Gutenberg editor beyond the post content, noting that this is a big step towards full-site editing.

Also shared that block reordering animations have just been merged in. 🎉

Feedback was requested for the following issues:

Open Floor

UI for adding classes to content

@joyously proposed the discussion of the possibility for themes to add UI to the editor for adding classes to content. After a lengthy discussion, the team agreed that it would be best to open a new GitHub issue and continue the conversation there.

@estelaris followed by sharing that documentation work is happening for the redesign of the new HelpHub. The goal is to come up with a flexible template that can be used in other languages besides English.

#meeting-notes