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.
Howdy and happy Friday, everyone! How is Gutenberg coming along you ask? Version 7.8 was just released on Wednesday and focused mostly on the new UI refinements. This release included:
Full site editing has seen some more design work recently. The extra effort reexamining the UX and having multiple people review design work is paying off! I’m super impressed with the recent work being done in light of other site building software I’ve been testing.
Placeholder blocks
Currently, templates need some way to show where certain blocks would exist, without necessarily showing actual content in them. Thus, we’ve been exploring placeholder blocks for many of the Post blocks like: Post Title, Post Author, Post Date, Post Comments, etc. These are being refined in this PR. https://github.com/WordPress/gutenberg/issues/19256#issuecomment-604765696
A few UX flows are ready for development. How exciting!
Patterns took a bit of a pivot recently. Figuring out imagery to include in the software is difficult. Do we want pictures of mountains? Or maybe natural patterns? Cars? We’re not settled on this. So rather than holding up our patterns, we’re working to build a few really nicely designed text-based patterns for now. These patterns should be customizable by themes, and not include custom CSS that makes for a difficult integration into websites.
There was a recent PR submitted that include several new icons that conform to the new G2 UI and the new icons being implemented throughout the interface. https://github.com/WordPress/gutenberg/pull/21209
Now’s a great time to get involved. While the work on this project is intense, it’s always important to glean new perspectives from other WordPress users and community members. Just drop into any of the links provided above to read up on the details and contribute.
Thanks for reading, staying informed, and contributing anywhere you can!
This week something different is going to happen and instead of the weekly meeting, there is going to be a social zoom show and tell at 20:00 UTC. The format of this is as follows:
You’ll noticed there is only one thing lined up to share, that’s where you come in! Do you have something you are working on to share, it can be Gutenberg, core, meta or even a demo of something cool.
Maybe it’s something you want feedback on that you are contributing, or perhaps it’s something you are working on and would love to bring into the project. Now is your time to share! To share something, just add a comment here and you’re on the agenda!
I am really looking forward to this new format and I hope everyone else is. The video link will be shared in #design on Slack just before. Make sure you download zoom before. There will also be a recording, posted so you can watch async if unable to make the time.
I hope you all are staying safe out there in the world today! This week in Gutenberg Design has several things going on. Let’s address them below.
Overview link: https://github.com/WordPress/gutenberg/issues/20791
Multi-entity saving has an interesting prototype uploaded just yesterday.
Or another take on it in a dialog modal.
I ran a short Twitter poll that asked how people would like to be informed about saving certain parts of their site. Based on those that answered the poll, the preference for a multi-editing save at the end of all their edits. We don’t use Twitter polls to direct our design decisions, but they can help inform them.
Lots of discussion and explorations are continuing to go into the Toolbar in the Editor. This particular mockup helps convey where the designs are leading currently.
Overview link: https://github.com/WordPress/gutenberg/issues/20331
The global styles minimum viable product (MVP) includes some basic elements that will help anyone edit their styles across all pages/posts. These elements include: font-family, font-scale, line-height, and link colors. This issue defines how this may look: https://github.com/WordPress/gutenberg/issues/20367
The block pattern work is already included in the current plugin right now as an MVP. We’re working to add more patterns that are great for common layouts that many can take advantage of. Once more patterns are added, work will continue on the Block Library to include them there as well.
Now’s a great time to get involved. While the work on this project is intense, it’s always important to glean new perspectives from other WordPress users and community members. Just drop into any of the links provided above to read up on the details and contribute.
Thanks for reading, staying informed, and contributing anywhere you can!
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 Slack channel by following the instructions in our handbook.
Spring forward begins next week! We are also looking for nominations for design team reps, nominations will close on 27th March.
@mapk mentioned a list of items that need focus to finish the full site editing project. If you are for looking into contributing with your own design, reviews or drop in any feedback, there is also our Project Board.
@joyously requested a review of the forums page as it needs a new design to make it easier for users to navigate.
@notlaura checked with the design team if there are any specific points that need to be addressed by the CSS audit of wp-admin, as discussed in the #core-css team
Below are some tickets to leave comments and recommendations, or drop by the @core-css meeting on Thursdays at 10:00 pm (UTC+01:00) on Slack
@ibdz would like to add Figma resources to the Design Handbook and more advice for new contributors who want to get involved. @mapk and @karmatosed to draft a post to say what we are doing and propose opening the design flows.
Design meetings are:
This is the agenda for the weekly design chat on Wednesday, 18th March 2020 at 19:00 UTC
This meeting is held in the #design channel in the Making WordPress Slack.
If there is anything you would like to see added to the agenda, please leave a comment.
The design team has never had an open call for reps, so let’s change that! Currently, I am the only team rep and this is a great opportunity to bring someone else on board. This process is heavily inspired by the community team. Since our team is still small, two team reps seem like plenty.
In the WordPress open source project, each team has one or two (or more!) representatives, abbreviated in reps. The role goes way back to 2012 and is an established one across teams. You can learn more about the team rep role here.
A little note, it’s not called team lead for a reason. While the people elected as team reps will generally come from the pool of folks that people think of as experienced leaders, the team rep role is designed to change hands regularly. Similarly, you don’t have to be considered a lead to step into this role.
I would like to suggest we consider a change in our process and after a year change all team reps. That would mean next year both myself and this new team rep would step down. To handover, we can hold nominations a few months before the term ends, to ensure mentoring. For this round, I will serve as a mentor for the new team rep to help get them started.
Here are the main tasks:
As a team rep, other tasks might fall to you in order to keep the team running, but in general, it’s a support role. On average the estimated time you would need for this role would be a few hours a week. With another team rep though, that time is shared.
This role is open to contributors of any level, not just full-time contributors. Like many good open-source processes, this work is done openly and can be shared. Also, because WordPress is a globally-minded project, if the team rep that is selected can’t make the current time, we can always discuss changing the meeting time.
Taking inspiration from teams that have done this before the suggested process would be:
If you want to nominate someone in private, please reach out to me (@karmatosed) on Slack.
Disclaimer: if you get nominated, please don’t feel like you have to say yes! We will add to the polls only the names of the people that are responding positively to a nomination. So feel free to reply with a “Thank you, but no thank you”.
It’s Friday again! If you’re following along with the Gutenberg releases, you’ll notice that Gutenberg 7.7 was released this week and with it came a newly designed interface creatively named “G2.” 😉 This redesign provides higher contrast, less UI visuals, and new icons including a streamlined and pleasant experience.
I recently shared this interface in a diagram layout identifying the various parts. This file can also be found in Figma.
Speaking about Figma, let’s dive into this a bit.
If you’re not familiar with Figma, it’s a design tool that allows real-time collaboration. There’s no need to download anything because it lives in the cloud. WordPress.org has an account where the Design Team keeps all our libraries, and where the designers do most, if not all, of their work. It’s open for anyone to join and use.
In fact, if you’re looking to help contribute to Gutenberg design work, especially in light of the new G2 UI updates, here’s how you might go about finding things.
If you’ve haven’t been added to the Figma account, you can ask for access in the Making WordPress #design Slack channel. Once you’re set up, you can browse the various files for each of the projects in the WordPress.org account. Notice there’s one specifically for Gutenberg.
Inside the Gutenberg Project is a file for G2. This file contains a number of the G2 components used in the new redesign of Gutenberg. It’s still very much a work in progress, but can help get you started quickly. Just copy and paste the parts you need into your own file.
Most, if not all, issues regarding full site editing have design work posted to them. This is great news! It provides everyone some visuals to talk through. If there are iterations needed, they remain in GitHub with the label “Needs Design.”
The Top Toolbar for full site editing is closing in on a solution. This is going to be the way by which users will navigate through the experience and select individual pages, templates, template parts, etc. for editing.
Block Patterns are also implemented in Gutenberg 7.7. Their current UI is only an MVP, but should help everyone realize the benefit of patterns in the layout of pages and posts. Lots of work is going into providing common patterns and getting this in as early as possible for testing and feedback.
Global Styles are in an MVP stage as well. While not quite yet integrated into the plugin, there is a PR that can be tested.
https://github.com/WordPress/gutenberg/pull/20530
Full site editing: https://github.com/WordPress/gutenberg/projects/35
Block patterns: https://github.com/WordPress/gutenberg/projects/41
Global styles: https://github.com/WordPress/gutenberg/projects/40
Now’s a great time to get involved. While the work on this project is intense, it’s always important to glean new perspectives from other WordPress users and community members. Just drop into any of the links provided above to read up on the details and contribute.
Thanks for reading, staying informed, and contributing anywhere you can!
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.
As nobody objected, we’ll be moving the meeting time forward one hour starting from the meeting on March 25th, to compensate for Daylight Savings Time.
There is a call still open for triage and notetaking volunteers. Reach out to @karmatosed for core design triage or @mapk for Gutenberg triage if you are interested.
@mapk brings a flurry of Gutenberg news. Version 7.7 is out, and more details about the work on full-site editing were published. It would be great if people could test the new UI and Block Patterns that shipped with 7.7.
@karmatosed proposed a once-a-month video meeting instead of the regular design chat in Slack. It could help people stay in touch in these work-from-home weeks, and offer a bit more loose design hangout. All were in agreement, so we’ll give it a first attempt at the last meeting of the month, which is also March 25th.
@ibdz asks where to find design resources for the new Gutenberg UI (G2) that launched with 7.7, and the Figma resources can be found here, with iterations happening here also. A page in the Handbook as overview of all Figma resources was suggested.
@paaljoachim brought an issue with a suggested improvement for the new fullscreen editor experience. More data about how users are grappling with this fullscreening of the editor by default would be nice to have.
This is the agenda for the weekly design chat meeting on Wednesday, 11th March 2020, 19:00 UTC
This meeting is held in the #design channel in the Making WordPress Slack.
Leave a comment if you would like something reviewed, discussed, help or something added to the agenda.
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.
There is a reminder about Daylight Saving Hours. The proposal is to move forward meeting times by an hour on March 29. If people would also like a different time that is an option. Leave your comments at the bottom.
The design team is looking for notetakers. It’s imperative for the global community to share the notes on our meetings async. If you need any information, reach out to @karmatosed or any member of the team.
A second call is for triage volunteers, either core/meta or Gutenberg. @karmatosed and @mapk can help.
Several PRs got into WordPress 5.4 RC 1 on 3 March. The improvements coming in WordPress 5.4 include:
Some other work that needs ideas, suggestions and your design skills:
https://github.com/WordPress/gutenberg/issues/20345
https://github.com/WordPress/gutenberg/pull/20354
https://github.com/WordPress/gutenberg/issues/20631
A question was raised whether if the design team maintains discussions on Figma as opposed to GitHub. The design team doesn’t have much discussions on Figma, we try to maintain the discussions on either the PRs, GitHub or the Slack channel. But comments or design iterations are welcome. If you need access to the Figma account, please request it on the Slack channel.
@joyously presented an idea to link areas of an image to a URL. Some members recommended a plugin or to look for a third-party block. It would be a great enhancement to add.
A topic for discussion: the overall state of the UI elements in Figma. Feel free to add your comments below or leave them in the Slack chat.
Design meetings are:
