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.
These are the weekly notes for the design meeting that happens on Wednesdays. You can read a 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.
We had a Show and Tell via Zoom today where we discussed 3 topics:
Last month saw the first show and tell, let’s have another! This time so far there is set agenda so now is your opportunity to add a comment and share something. 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!
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.
Thanks @karmatosed!
I’d like to share this PR with iterations to the Welcome Guide that I’ve been working on: http://wayback.fauppsala.se:80/wayback/20200430211428/https://github.com/WordPress/gutenberg/pull/21847
Welcome to the 50th Gutenberg design update y’all!
With that, here’s a video of the full site editing experience from @matveb during the WPBlock Talk online event.
Seeing this come together is amazing! Watch Matias navigate through the experience and easily build a site and edit crucial content within the same interface.
It’s blocks all the way down.
Gutenberg now has its own icons package. This allows Gutenberg to use SVG icons when needed without requiring an entire sprite of icons to load as Dashicons does.
This being said, there’s an interesting post from Joen about the future of Dashicons. Spoiler, they are not going away and will remain a vital part of WordPress. They’re just getting another 30-something icons and then moving to a maintenance mode wherein they will no longer accept further requests.
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.
We’re still looking for notetakers! Leave a comment if you’re interested.
@mapk updates us on Gutenberg developments. New interest is gathering around the drag and drop experience, that’s great. And work is being done to tighten up other areas too while full site editing progresses, that’s good to hear.
@timothybjacobs put in a request for design for a new Site Health feature, the recovery mode link. It should be a straightfoward addition to the login screen to mock up for them. Any designers up for that, jump into the linked issue and help out!
Next, we discussed WCEU 2020 contributor day. To make everything run smoothly in a remote setting, we need a few things:
We should also add an archive for the previous Show and Tell zoom meetings to our Handbook.
Next week is another Show and Tell zoom meeting instead of our regular meeting, let us know in the comments if you have something to show off that you’re working on!
This is the agenda for the weekly design chat meeting on Wednesday, April 22, 2020, 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, discussed, help or something added to the agenda.
There was a post recently announcing that WordCamp Europe Online will not only include speaking session but also a Contributors Day. We are very excited as we will have the opportunity to collaborate with many contributors worldwide that have not had the opportunity to attend WCEU before.
Contributor Day at WCEU will happen on 4 June 2020.
While the technical issues are being handled by the organizers, there are things we need to prepare.
The plan will be discussed during our next team meetings happening on Wednesdays at 18:00 UTC on Slack. If you cannot join us, feel free to leave a comment below.
Eager to respond to the “Call for volunteers” for the WordCamp Europe 2020 Contributors Day!
Thanks!
Regards
Ahmed
For many years, the Dashicons project has supplied many of the icons in WordPress and it’s become widely used by plugins. The icon font is currently sitting at an impressive 303 icons!
We’ve recently discussed how to best move forward with icons in WordPress. The block editor uses SVG icons directly, and the rest of WordPress uses the Dahsicons icon font. One of the challenges with an icon font is that it’s one big compiled “sprite”, and so even though it gets cached well, for every icon you add the sprite grows bigger. With SVG you include just the icons you need. The block editor does this using a new Icon component.
In an effort to move things forward, and per discussion in the core design chat (link requires registration), it was suggested that an ultimate release of Dashicons be made, to wrap up existing requests (adding 36 new icons), close down to new requests, and to focus future efforts on the new Icon component.
With that plan, the next steps are:
Future efforts for the new Icon component, including creating new documentation and improving the build process will be discussed in the Gutenberg repository.
Thank you for sharing the future of Dashicons, @joen. This feels like a really good direction. If you need help, let me know.
How will this impact the myriad plugins and add-ons that use Dashicons to add items to menus and front end sites? (I know, it’s not supposed to be used that way, but that’s outside anyone’s control)
Hi Mika, hope you’re well!
In hindsight, that question should have been part of this post, thanks for asking it so I can respond.
One of the next steps is creating a trac ticket to bring the updated font to WordPress, and I would hope and expect it to land with version 5.5.
How will the discontinuation of Dashicons affect the Dashicons resource page at http://wayback.fauppsala.se:80/wayback/20200430211428/https://developer.wordpress.org/resource/dashicons/ ? Will there be a replacement page showing how to use the Icon component, with copy-and-paste implementation code?
Can the Icon component be used without JavaScript? Dashicons currently supports adding Dashicons via CSS or HTML, which don’t require JS execution on the part of the user. Will the Icon component support those use cases?
The Dashicons icon font has been updated to include a number of new icons. While you can download this updated version directly from Github, it is not yet part of WordPress, so the resource page is currently accurate as to what ships with WordPress.
The next step is to land the new version in WordPress 5.5, at which point the resource page will be updated.
Can the Icon component be used without JavaScript?
At the moment it can’t. However the new icon component needs a build process just like Dashicons has. This build step transforms a folder of SVG files into various versions. At the moment, just the JavaScript component. But there’s no reason it couldn’t also output a number of other versions. The Dashicons build process outputs minified SVGs, an SVG sprite, and a React component in addition to the icon font.
In an effort to share the most recent design work for Gutenberg, I’m pinging designers to get their latest explorations and visuals to share them with anyone who reads these updates. I am hoping this provides more insight into the work as it is happening. If you have got something to add, please share it below!
With the introduction of the fullscreen default mode in the block editor, @shaunandrews has been exploring interactions to help surface the admin menu.
The Block Inserter has also undergone some redesigns. Rather than a popover as you’re familiar with, it’s now a slideout from the left side. It also now includes the Block Patterns which used to be on the other side of the interface. It’s looking amazing!
Issue: http://wayback.fauppsala.se:80/wayback/20200430211428/https://github.com/WordPress/gutenberg/issues/21080
PR: http://wayback.fauppsala.se:80/wayback/20200430211428/https://github.com/WordPress/gutenberg/pull/20951
The above is a lot already, but I wanted to remind everyone about the issues getting the most attention right now from designers.
Site navigation when full site editing
http://wayback.fauppsala.se:80/wayback/20200430211428/https://github.com/WordPress/gutenberg/issues/19204
Site Editing: home page indicator
http://wayback.fauppsala.se:80/wayback/20200430211428/https://github.com/WordPress/gutenberg/issues/20788
The “Update” flow for entities and templates should allow creating variations
http://wayback.fauppsala.se:80/wayback/20200430211428/https://github.com/WordPress/gutenberg/issues/20474
Incorporate “Add new page” flow into “Add template” flow
http://wayback.fauppsala.se:80/wayback/20200430211428/https://github.com/WordPress/gutenberg/issues/20473
One recent addition to the Gutenberg plugin is the introduction of the Navigation block in the Menu screen. This is a response to the outlined focus of Phase 2.
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!
Love what @shaunandrews is doing with the W in image above. Kind of a pain having to exit the editor to access the admin menu.
Also a fan of the slide out rather than popovers, the popovers are always disappearing on me when I accidentally move my mouse too far away.
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.
First off, housekeeping. We still need people to help out with taking these notes. You don’t need to have deep knowledge or be around a lot, an hour of your time is all it takes. Leave a comment below!
In two weeks we’ll have another Show and Tell Zoom meeting, let us know if you want to show something that you’re working on or want feedback on.
Next, @michael-arestad updates us on Gutenberg. Here is some of what has been happening over the last week (and is not comprehensive):
Then, @joen and @empireoflight show off a new proposed update to dashicons, adding a ton of new icons! The question now is how to move forward. Gutenberg uses SVGs directly inline, vs the dashicons font that the rest of WordPress uses. Dashicons are widely used, but the bigger it grows, the heavier its size becomes. SVGs solve that, and there is work being done to make an icon component in Gutenberg. But they are mostly geared for a javascript-based environment like the block editor.
Everyone seemed to be on board for moving forward with an SVG-based icon approach (but the current dashicons implementation will continue to exist for people relying on it), so a post will be written soon detailing the plan and next steps. Look out for that!
Next, WCEU 2020 is coming up, and it is going ahead full steam fully online. That also means a new type of contributor day, fully remote, so we need a plan for that. @estelaris will write a post to gather ideas, so start thinking!
@ibdz chimes in reporting that the Figma documentation is almost ready to merge into the Handbook, and suggested looking at the general flow and ordering. @hedgefield was thinking of this too and made a start working out a new page structure. Together with @estelaris they will make a Trello card and dump ideas into that for further exploration.
Finally, @michael-arestad brought to our attention this issue: http://wayback.fauppsala.se:80/wayback/20200430211428/https://make.wordpress.org/core/2020/04/14/editor-chat-agenda-15-april-2020/#comment-38463 and @ninjastar volunteered to help out.
Any chance to post a summary of what was discussed, if not the transcript of the video? #accessibility