Welcome! This all-volunteer team needs designers of various kinds. See our handbook and drop into #design once signed up for volunteer opportunities.
Our vision is to be the go-to resource for design for other teams across the WordPress open source project.
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.
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.
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.
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.
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.
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.
These are still early concepts, so it would be good to get some early impressions. Specifically, I’d like everyone’s thoughts on:
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.
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.
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.
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:
For more information on the basics of one of these reviews, and for some examples, check out the links under “How to get involved”.
Ready to get started? There are a couple of different paths to choose from:
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.
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.
@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.
@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.
@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.
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.
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.
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.
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.
There’s some excellent development on the Block Directory which was posted recently.
Thanks for reading, staying informed, and contributing anywhere you can!
This is the agenda for the weekly design chat meeting on Wednesday, 7th August 2019, 18:00 UTC.
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.
@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.
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.
This is the agenda for the weekly design chat meeting on Wednesday, 24th July 2019, 18:00 UTC.
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.
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.
@mapk updates us on what’s been going on with Gutenberg and design:
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.
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:
As some things have changed since the design team used the Trello board in the current setup, Tammie suggests the following:
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).
@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.
This is the agenda for the weekly design chat meeting on Wednesday, 10th July 2019, 18:00 UTC.
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.
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.
@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:
@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.
