Design Share: Apr 11–22

Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.

FilterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. icon

@joen added a new filter icon for showing in 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. toolbar when no duotone filter is applied.

Design controls for interactive states

Still a work in progress, @javiarce and @joen explored some ideas to manage the style of elements depending on their state (hovered, focused, active, etc.).

WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. block patterns

@melchoyce has been working on developing resources for WordCamps based on common content patterns across sites that can be created as block patterns.

Global Styles panel revisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision.

@critterverse and @joen brainstormed a couple of ideas for reorganizing the Global Styles panel to streamline the UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. and better accommodate the “Browse styles” button.

Design template

@javiarce published the starter template he uses to showcase designs to the Figma community. The template contains some nice defaults like a cover, documentation elements, cursors, labels, and a simple page structure, which can be useful to speed up the repetitive setup of a new file.

Documentation design

@estelaris has been working on a design for support/documentation pages that is based on the wordpress.org/news look and feel, and shared a great update during the last Design team Show & Tell call.

About page 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. artwork

@fcoveram shared some design options for the 6.0 About page header artwork on the Trac ticket. We discussed the options in the recent Design team Show & Tell call and folks are leaning towards the option on the left!

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/ 13.0 release assets

@joen with the help of @beafialho contributed release assets for the 13.0 release of the plugin.


If you have updates you’d like to include in the next Design Share, please drop a note in the Design channel on the Making 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/. or message @critterverse.

#design#design-share

Design Team Show & Tell — April 2022

Here’s a recap of our Show & Tell call today ✨

Attendees: @estelaris, @javiarce, @empireoflight, @joen, @critterverse

We reviewed a few different items during the call:

  • A design for support/documentation pages that @estelaris has been working on
  • Possible directions for the About page 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. artwork by @fcoveram (notes shared on the ticket)
  • Some WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. 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. patterns shared by @melchoyce (notes shared on the issue)

One larger topic of discussion that came up was around redesigning the About page templates/layout, and potentially even making the switch over to creating the page using blocks. This project seems like something that could be approached outside of the regular release cycle when launch assets are typically moving along too quickly to make major changes. 

Here’s a recording of the call in case you missed it. See you next month!

Monthly Design Show and Tell August 2021 – summary

This is a summary for the design Show and Tell meeting that happens the last Wednesday of every month. This meeting took place on Wednesday 25 August 2021 via Zoom. Transcript is below the video.

The design team meets every Wednesday at 1800 UTC. 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.

Summary of topics

@estelaris announced that she would like to step down as team repTeam Rep A Team Rep is a person who represents the Make WordPress team to the rest of the project, make sure issues are raised and addressed as needed, and coordinates cross-team efforts..

@joen inform us about an issue with the Figma library and he created a backup of 300+ components that had not been updated in a while.

@javiarce talked about his explorations on the color UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. for the inspector.

@ibdz asked about the WordPress blue color, is it time to start a conversation to change it to the new blue color proposed by the #core-css team.

Design team show & tell August 2021

Transcript

@estelaris: Recording. Okay. Hello everybody. I want to welcome you all to the show and tell for the design team for the month of August. It’s our last one for this summer. Um, and it’s open for everybody. Um, that is just, uh, one announcement I want to make on this meeting. Um, I would like to step down as design team rep. So, uh, I want all of you to start thinking if somebody else wants to step up, uh, probably going to announce it and make it like, like official on the Make blog around, you know, mid September, something like that. So I can give people time to think about it. And, um, thank you Ann. And, uh, yeah, well, whoever wants to step up, we’re going to make. The way we do it, you know, in the design team is, um, I make a post to announce that I’m going to retire and then I will, and then we open another post, uh, for, um, people to nominate people who want, who we would like to be the rep. And then we vote on that post and then would just on the next show and tell, but just say, who is going to be our new team rep.

And then that will just be around to, to help you out just to see if you need me. You don’t need me. It’s always great. That’s okay. But I think it’s been like, I’m almost two years, so I think it’s time for somebody else to, to come up and do it because whenever we have a new rep in like the entire, um, team, you know, everything moves around and everything works different.

And I think that, you know, if the same person staystoo long. The teams get stuck in and, you know, everything comes, turns into a monotony and all that stuff. So I don’t like that. I like to, I like change. I like to give everybody a chance and, um, because we all have great ideas and we all have different ways of, uh, talking about, uh, leading the teams and talking with the team and, integrating everybody.

And that’s what I want. So whoever wants to, I will, I will pause probably by mid-September just so you know, given, given everybody a chance to come back from holiday from summer holidays and everything, and once we just kind of settle, then I’ll make I’ll announce it. Okay. So whoever wants to start thinking about it. And with that let’s open the, the, um, room for everybody who wants or who has something to show us today who’s been working on, um, things or, um, Joen? Is Joen with us?

Or Javier, uh, Joen either one of you, you want tells us what happened with Figma today? Just so everyone knows. Yeah. So everybody knows and, uh, and we make it official and, and, and, and explain what happened while we have and how we’re going to move forward. Yep.

@joen: I’m happy to talk about it as well. So we have this beautiful, wonderful Figma, uh, WordPress design library file, which is used by quite a lot of people now and has quite a few people editing as well. And there was an edit made, I don’t know, particularly what that edit was. It could potentially be completely harmless, but after that one edit, whatever it was, it wasn’t immediately visually apparent what had been done. 347 components were ready to be published with changes, which sort of set off the smoke alarm.

So it’s big because usually one or two gets updated and you can write a little change log. So I stepped through the edit history and restored the version that did not have 347 changes. And of course I took a backup of the file before. So if you made any changes after July 27th, you can find those in the backup.

It’s in the wordpress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ organization Figma. It’s, it’s just called August, uh, backup. You can copy it over and you can publish. So the Figma files are all good again. And, um, please of course be mindful of the edits you make, but of course, every, all of those with edit rights, we all make mistakes as well. I’ve made a couple. Just undo and all that stuff, but, um, just make your changes, publish, and then all should be good.

@kellychoffman: Thanks for doing that. Of course.

@joen: Thanks Javier for finding the differences in all the new as well.

@javierarce: I think they’re harder to work with was figuring out what was going on. It’s terrible. The state of the Figma history system. So I think we will find these, this problem in the future again. Yeah. Fix it. Yeah.

@estelaris: Yeah. Okay. Well, thank you. Thank you for taking care of that and thank you for bringing that up. Hello Paal and Boy. Okay. Any questions, anybody about the Figma? What happened? Nope. Okay, cool. Um, nope. Okay. Anybody else has anything to share today?

@javierarce: Okay, so I can say some non- amazing work.

@estelaris: Never say that it is always amazing work. Hold on. Let me see. I need to get security. Yeah. Yeah, it should be able to show.

@javierarce: Perfect. Okay. Uh, so I’m going to show you, um, uh,probably you remember that Shaun has been working on the inspector 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., he’s been offering some ideas, uh, on how, how, uh, how to improve that sidebar, uh, basically make it more compact and easier to read and reduce the chaos that sidebar has, uh, currently, um, and I’ve been helping him, uh, in a smaller, I mean, in different parts of that, of that project. Um, for instance, I started working on these, um, on the color UI. Uh, so all the interfaces that have to do with, uh, selecting a color, um, changing the backgrounds links, uh, etcetera.

Um, and this is the current interface. And as you can see is, um, uh, Now we see it’s a little bit chaotic and it is too much, too much interface, I think, right? Like if you see this, this, uh, section here, we have, uh, text color, background color, link color, it looks the same. Uh, there’s other things going on, like, you have this clear button, uh, that appears even though there’s nothing to clear, um. If you have, uh, like these are the theme colors and, uh, probably one of those are selected because the, I dunno, maybe the text is pink, but at the end of it, doesn’t tell you that it’s pink. So there’s a lot of things going on there.

Uh, and this is what happens when you select the color. You have like a indicator here, uh, that is, it doesn’t do anything, uh, trust, I know. Um, when you select the gradient, you have this, uh, different interface to sort the grain is, is there, like, it makes things, you know, like, uh, more complicated and taller.

And then if you click, um, have you the chance to color it, uh, you have this popover, uh, that definitely needs some tightening because it’s very simple. Uh, but as you can see, when you have a, another color, the preview item there tends to size this again, it’s not, it works. It works well, uh, but it’s too much interface and it will be repressed.

So, um, what I’ve been doing these days is, uh, trying to, uh, follow some of the, of the , uh, ideas Shaun established with respect of the sidebar, and try to apply that, to use those ideas. Yeah. try to see how they will work with, uh, with a color, uh, UI. So, um, the first thing that I I did was something that, uh, tenancy. Yes, it is like the order of the items is, it’s wrong right now it’s like we have the text background and the links, uh, and that makes sense, uh, backgrounds will be in the background, right. And the way you read this interface right now is, uh, background doesn’t have any color, it’s just transparent. Links have a green color applied, uh, and text has, uh, the blue color applied, but you can reset it because it’s not the full one, right? It is the one that comes with a theme. So this right away simplifies the interface. Um, and we are able also maintain the, this, this, um, this warning message that basically tells you that your, the color combination is not, uh, Is it, uh, is it, uh, I think may we will also improve this thing, like making, you know, like, uh, pointing to the user, which colors to, to be changed, like maybe with a dot or a warning message, something like that, uh, to be even more easy.

Um, if you click the color, uh, you will open this popover. And when I’m done here, this was basically a sabbatical as shown there. The main concept you have the color picker on top, like in the Figma sketch or other design, uh, applications. Um, and then you have, uh, this bottom part, you have a selector, uh, that it could be the custom color. And we also will offer the theme colors. So this will be a dropdown and you can change between those, uh, those sets of colors. So, and also you can save those colors for other use. Like if you are, uh, in, you’re looking at the custom colors, you will save your favorite colors and then is it, uh, In other parts of, of the, of your design.

Um, and it also plays a, uh, color picker here, uh, that probably is going to be useful, uh, to customize your items even more. Um,

uh, if you’re thinking the background, uh, then what I started doing was, uh, you know, adding a select, uh, you know, on top and, uh, Well, um, the idea for this, for, for the whole interface for the sidebar and for the popover is trying to make things, uh, very compact and easy to read. Uh, so instead of putting the label on top and then add the dropdown, I tried to combine those, uh, elements, uh, in just one line.

Uh, the problem is that maybe this interface is not very accessible because it’s relies too much, um, on the color of the solid element being blue. So I was thinking that maybe we will add, uh, I think here, uh, so now this looks like a dropdown and again, it’s this one, one line. So it’s very, uh, very small.

Um, but, uh, that, that is just a detail, uh, other interesting things that colors and gradients could be represented by circles. And then, images, we could use a rectangle, so it’s very easy to spot the image when adding another color. Right. Um, If you select, uh, the first time you select, uh, an image, or you just select the background and change, uh, to the, to the, uh, you, can you have this interface to drop a name it’s there and this probably not the right icon, but, uh, um, like with a color picker, we will have tools there.

So this will open the, the media library. Um, And of course you can drag and drop, uh, here, an image, and then you will get this, uh, different interface where you can change the focal point. Uh, I’m not sure if this design makes sense or not, but I’m trying to follow this idea of the padding and margin. Uh, Inputs, uh, but probably will.

We need to be, uh, he designed this, this particular thing, and then we have another dropdown here, uh, to select, uh, between different modes. Like you could have field fit, uh, or tile and something I did was, um, again with the same idea of making things. Uh, sorry. Comeback was, um, grandis took down. Why did you continue to display of the, of the image and then at the bottom you can select fixed, uh, instead of putting that, uh, UI, uh, in the previous, uh, in the, in the main pop-over.

So I think this, this could be like a secondary action. Isn’t it doesn’t need, we don’t need to show it all the time. But it’s there on the display areas. So I think it could work. I don’t know. Um, yeah, so, and then the gradient, uh, is of course, uh, some of them bigger, uh, there are more things going on and you need to adjust for stuff.

So I basically maintain the same interface that we have now with this. Um, this is glider, uh, I added this element, which allows users to remove the, the control point. Um, um, I dunno, maybe it’s too much, maybe it’s or maybe it’s very complicated to see. I’m not sure if this is the right, uh, design decision, but I think, uh, we will give you that, you know, uh, I need to physically remove the consequence.

On the control point. And then this is a bit more complicated because, uh, for variants, each color has a capacity and then the grading itself has an ability. So, um, this very easily gets a bit complicated by like we have the, the color here with an alpha and then the busty. So, uh, in order to simplify that, I thought we will have this Queanbeyan, uh, interface, uh, into steps.

Like by default, you get a degree. You can move the control points. This is works exactly as it was right now, you’d have deposited for the whole thing. Uh, and also we have, uh, custom grades, uh, so you can change them or say them very easily. And then if you click on one of those kinds of points, uh, Um, the continent side of that, uh, over, uh, slides, and then you have an interface to edit the color.

And so this simplified variously, the whole thing, uh, you can select the color, you can use your favorite colors or the theme colors right away, and you can also remove the color and it is a color picker. So it’s another distribution. Uh, I think it solves the problem of having too many things on one element and you can very easily with the first step you can control the whole variant.

And if you want it to refine it, you can go here. Um, and I think that it’s mostly everything. I think we’ll have to work on the gradient, but, uh, I’m pretty happy with, with, uh, with all real things. So. Yeah. That’s, that’s fine. I wanted to tell you

@estelaris: a lot of work and that is good. Yeah. That’s a lot of work, so I don’t know why you say it’s not great work and it is really a lot.

@javierarce: So yeah, many, many, many, many pieces. Yes. Yes.

@estelaris: There are a couple of comments here from Joel and Channing. So let’s see real quick. Uh, Joel plus one is on the warning message that it can be confusing sometimes right now I don’t. Um, yeah, I kind of saw it and I liked it. I liked the warning message, but, uh, but yeah, I did just kind of went like, wait, what, why are you showing up now? Right. Yeah.

@javierarce: And you have to read a lot in order to, to understand, like, it is not obvious.

@estelaris: That’s the one then, um, could clicking the drop area also open up the media library when you are choosing the background image?

@javierarce: Yeah. That’s a good idea. Yeah.

@estelaris: Right there open the library of images. Yeah.

@javierarce: And I think that that’s the actual behavior. So I think we can maintain that. I also try some ideas, put a link here and also a link to Openverse, maybe. I don’t know. Uh, but, um, yeah, definitely. That could be an improvement.

@estelaris: Ann is saying that she likes the differentiation of the rectangle for images. Then I’m just going to add to that when you have the gradients, you turn that color into a rectangle right there instead of a circle on the picker, on the color picker right there. Yeah. So if we are not, we’re using colors and we should use, if you are using colors for circles, for colors, that you should keep it the same.

And use rectangles for images, then, you know, just keep them the same.. Um, let’s see what else? Channing says I like how you mix the progressive disclosure idea with the pop-over idea for gradients. And I know you want to expand more on that. Channing?.

@critterverse: I’m not sure if that’s the proper name for it or not, but the idea of progressive disclosure, if I’m saying the right thing is the idea that you could kind of go deeper into these panels.

Right. And we’ve traditionally looked at that as being part of something that would happen in the sidebar itself. Um, you could continue to kind of go deeper and each time you would go deeper, the screen could potentially like shift to a new set of options. Um, but one thing we’ve been kind of weighing the pros and cons of is the idea of a pop-over that could, you know, be an alternative solution to that that’s potentially quicker.

Uh, potentially more accessible? I’m not sure, but it does seem like a nice option to keep exploring. And I really like how Javier started to mix those two. I think there’s probably more instances where you might need to mixed those, even, I mean, beyond color, it could be a pattern that we could replicate elsewhere.

@estelaris: And then Joen just gave you two links for some more relevant , that it’s relevant to this exploration that you’re doing. Um, so maybe you want to click on the chat and get those links for you for your reference Javier. Um, anybody else has any other comments for Javier? I see that we got a lot of good responses in here.

@javierarce: Yeah. Thank you very much.

@kellychoffman: What are you thinking about the custom section? Like those custom colors? How are you? So like the custom colors, how, how they show up? Like, are you,

@javierarce: so yeah, the, the idea is, uh, you will have this dropdown where you can, probably it’s the other way around actually theme colors will be sloppier, uh, by default because it won’t be, uh, you won’t have custom colors initially. Then, the idea is that when you save a color, uh, we could offer, uh, the name of the color is in a library. I’m not sure I’ve seen these things like, uh, you use Google for instance, there are, uh, They, they used to offer you the name of the color.

And I think there are libraries that offer you the equivalence. So we could use that to populate that input field or rename the color to your liking. So, uh, it’s a very simple thing. Um, I haven’t thought of much about this thing, but I think we will have something, something simpler. Um,

@estelaris: Anyone else?

Nope. Okay. Well, thank you, Javier. Thank you very much. Very good exploration. Well, I guess, um, anybody else has something else to show us today? We’re open. Hello Boy.. Thanks the floor. All yours. Um,

@ibdz: I have something like kind of, uh, some experiment. Um, okay. First, uh, I saw in the #coreCSS. And then I, I followed that they, they are working on the, the, um, color variable inside a WP admin. And then I, I think about the colors that are, that is the pilot for, for all the WordPress that is defined as a hex, hex code as this. And I don’t know where it’s from because, uh, what I can, I tend to follow is the solely, uh, the proposal from, from 2019, two years ago from dev.

And then I don’t know how to, how to, what isthe algorithm of the color palette. So I try to, to find out what is that. The methodology of this colors. And then, um, I, I think I can, I can define it, uh, from the colors to a studio that dev uh, and use it in 2019 and from maybe a sec, distant from @melchoyce, uh, maybe one or two years ago.

And yeah, I can try it. That is, uh, this is, uh, a colored thumb of the color. And then, um, my question is, uh, from one of the ticket, um, here is, uh, this, this color is still out in WordPress as blue. And do you think they really should define it in, uh, WordPress or not because now we use the blue fifty.

Yes. And yeah, but we definite it in our handbook as uh, another code, another color. And maybe in the future, we will share it into maybe putting in maybe more Y brand or more. Yeah. So just discuss about it.

@joen: Cool. By the way, I, I can respond if that’s okay. I haven’t heard or found any conversations about replacing the WordPress blue, but since you bring it up, I would personally love to see it happen. One of the challenges with the WordPress blue as you show it here is that it’s very muted and it has a greenish tint to it, which has this property that when you want to show white on top of it, it’s very hard to get contrast without losing vibrancy.

Whereas, if you pull it just a little bit towards the purple or ultra Marine spectrum, the contrast skyrockets, it’s something that’s easy to sort of play around with in the WCG color contrast checkers. It’s always fun to sort of see how the further away from the yellow green spectrum, you go towards the blue and purple contrast with white increases.

So I would love to see. Uh, a more vibrant color. So that’s just a, a hope that we could update that, but I haven’t heard anything, uh, regarding that quite yet. Cool work.

@ibdz: Um, yeah. And, uh, my second question about, about the colors is on now we have, uh, 12 colors for each palette. Um, do, do, do we think that, uh, we should limit it to maybe use a convention, like a Fiero, a hundred to 200, 300 instead of the 5, 10 20, but what do you think.

@joen: W we could talk about color so long, I’d always be happy to. And I always, I I’d be happy to talk in the channel as well. Cause, cause we could talk about this for days. And again, this is just a personal opinion. Um, I have only been cursorily following the course. The assessed discussions they’ve been going on for a while.

Now you mentioned 2019, some of these. Explorations. One of the things I love about a good color pallette is to reduce as much as possible to just a very few set of base colors. And then see how far you can go with those. And then when necessary expand there. There, there are various use cases for palettes.

And when you see a pallette like this, you, you sort of get the temptation to, to feel like it has to work in a harmonious spectrum. But then when you’re actually working on the software, you find the need for blue 50, 90% of the time and blue 80, maybe like. 1% of the time it’s so the, the actual use of the software, I find personally varies a great deal. So I’m always a fan of reduction from, from that angle. Makes sense.

@ibdz: And, um, I, my next step is to consolidate this pilot with the 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/ and the fear of death Gutenberg into just solely WordPress colors. Yeah, definitely. Cool. Yeah.

And now I’m working on, uh, the designfor, um, the translation day that will be launched next month. Yeah. So I tried to apply the, colors from that exploration and to, yeah. Okay. Thanks.

@critterverse: Did you make the Wapuu too? He’s so cute. And he matches your design very nicely.

@estelaris: Okay. Um, That’s good. Anybody else got any questions? Any other questions?

Nope.

Okay. Uh, we have less than less than, uh, we have seven minutes. So anything else that we want to talk about?

No questions, nothing.

@ibdz: Um, about the library, the Figma component library?

@estelaris: Oh, we already, we already talked about that. You were late. You were late Boy. Um, You want to go again Joel and explain it to him, quick?

 I can give a quick update on what happened. What happened, I think was a mistake, a human error that caused more than 300 components to have some change, not sure what change it was and that felt wrong. So it took a backup of the file. And at that point in time, and then restored to a version of the Figma file that did not have those 300 plus changes. So the Figma file is good again, but if you’re, if you made some icon or something after. July 27th.

Um, please copy it from the backup file into the, into the new one and then publish again. Okay.

@estelaris: All right. Anybody else?

No. Okay. Well then I guess I’m just going to give you all back your five minutes. Um, thank you very much for joining and, uh, and we’ll be back on Tuesday. Uh we’re we’re started reviewing, uh, tickets. Um, Paal was on triage this week on Tuesday and we’re getting people back. So we’re going to start, we’re going to continue now, and we’re going to get me back, get off that summer break and get on a regular schedule from now on. Okay. So we’ll be back on triage on Tuesday and in the same meetings on Wednesdays. So [00:32:00] hope to see you guys and thank you very much. Good day. Good night. We’ll see you.

@ibdz: Bye.

#meeting-notes

Monthly Design Show and Tell July 2021 – summary

This is a summary for the design Show and Tell meeting that happens the last Wednesday of every month. This meeting took place on Wednesday 28 July 2021 via Zoom. Transcript is below the video.

The design team meets every Wednesday at 1800 UTC. 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.

Transcript

@estelaris: Welcomed everybody to the Show and Tell for the design team for the month of July 2021.

@critterverse presented what is coming next for widgets and a review on her post Widgets in WordPress 5.8 and

beyond.

@melchoyce rans us through some first thoughts about the design for WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. US 2021.

@shaunandrews talked about his progress on 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. styles.

Transcript

@estelaris: [00:00:00] Okay, so welcome everybody. This is the show and tell for the design team for the month of July, 2021. And we are going to start with Channing. What do you have for us?

@critterverse: Oh, can you, it says host disabled. Screen-sharing oh, sorry, sorry. Sorry. Let me.

@estelaris: Okay, one second participants. No. What do I do that? Uh, security.

@chaion07: So put a tick mark on the security.

@estelaris: Yeah, share screen. There you go. Thank you, Ahmed. Yeah. Got it.

@critterverse:

Perfect. Okay.

Okay. So I’ll just go through this really quickly, but I thought maybe we could look at some of what’s coming next for widgets. Um, I just made a post about some of the things that are now possible now that you can put blocks in widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. areas. [00:01:00] Um, so I’ll go through this really quickly, but just, you know, some fancy things like applying duotone to an image, uh, which would have been really hard to do in the classic editor.

Um, Especially stuff like layered images where you could have an image, but hide behind an image. And both images can have like filters and colors and duotones and kind of like infinite possibilities of what you can do now. Compared with the old editor where you could kind of just, you know, style text a little bit, but not really do much to images.

And especially didn’t have a lot of possibilities with layering. Um, and then that gives you more opportunities to like layer interactive elements than interactive widgets and have them kind of like melded in with your design better.

And then one thing that’s really cool is that you can, although it might not be advisable [00:02:00] is copy and paste patterns from the pattern directory into your widget area. I put a little disclaimer being like, do this at your own risk because, um, we haven’t really curated patterns for like constrained areas, like 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. or footer yet.

And there’s no interface in the widget areas to like browse patterns or anything like that. But since it is a blog editor, you know, you can copy and paste into it. So I found that works pretty well, especially in footers that have like a wider area. And I found a bunch of different patterns that I tried.

I think you start running into more problems with a sidebar, but it’s interesting that that works already, even though we haven’t specifically tried to integrate patterns yet. Um, and then with some of these.

I was looking at how we might start to add a patterns tab into the inserter. So this would [00:03:00] be exactly like how we have it in the post editor, but perhaps there’s specific categories for footer and sidebar, and maybe those are surfaced first or in a more visible way than other categories. Let me open all of these.

I hate how the images on the Make blog so small. Here’s some options for how we could start to surface patterns in a more visible way. I think there’s a couple reasons why you would want to service. Oh, I spelled title wrong. Why you would want to surface patterns in a more visible way for the widgets screen?

Um, One, a lot of people are struggling with not knowing how to create a traditional widgets layout. So classic widgets always have, you know, a widget in a title lockup. And it’s not always so straightforward to create that in the block editor because sometimes different themes [00:04:00] might flow your content horizontally, for example.

So they’ll break up your widget area across columns. Uh, so like something really simple like that we could just provide as a pattern and just have it be right there in front of you. So you’re not like struggling to create this traditional layout. So one thing I was thinking is when you have the quick inserter, um, typically some patterns are serviced after you start to type in the search box.

So if you start searching for a particular block, you’ll get patterns related to that block. But I was wondering if maybe patterns could be visible by default. So before you start typing anything, as soon as you open the quick inserter, you would just already see some patterns there. Um, and then I just looked at a couple of different layout options for that.

Like, like potentially it could be a list where maybe you could get a few more patterns in there, um, and potentially indicate like this one’s coming from your themes. So it might work especially well, [00:05:00] or, um, just some other things that might work in the widget area. And in this scenario, you could have a, like, sort of flyout hover preview, like we have in some other places.

And then lastly, I had an iteration that was, um, sort of like a carousel where you could toggle through, um, multiple different patterns. I think this gets a little tricky, especially 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) wise. There’s a lot going on for a pop-over. Um, but I think it could be something that could potentially work and, and this kind of mirrors the way you select a pattern inside a placeholder block.

Like, for example, if you insert the query loopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. and then you have the placeholder block and you’re selecting the pattern on the canvas, this is kind of mirroring that. So it’s kind of nice to have that consistency there, but I think probably a starting point would just be looking at what we have now. Um, the way that patterns are surface right now, it looks kind of like this.

And can we just change it so that you know, [00:06:00] those show up sooner. And can we make sure that we’re recommending the right patterns that are going to work in the right area, depending on the constraints of that

I’m going to stop sharing, but if you guys have any questions, go ahead.

@estelaris: Any, any questions from anyone?

By the way, those who join us a little later, uh, Channingwas talking about a post she did, uh, yesterday on patterns or what is it? Widgets?

@critterverse: On widgets. Yeah.

@estelaris: Sorry, haven’t read it? I saw it this morning. I haven’t had a chance to read it. So, um, if you have any questions, now as the moment, now at the time, I have just a question for you.

Uh, when you share, when you share your screen and you share it on the, on the [00:07:00] side, when you show all the, all the, um, Uh, all the, all the blocks. And then you have you, you put in another tab for patterns and isn’t that, where we have the tab for reusable blocks.

@critterverse: Yes. And yeah, in the post editor, we currently have the three, so blocks, patterns and reusable blocks.

One thing that’s being looked at for post 5.8 is enabling reasonable blocks in the widget editors as well. They’re not currently enabled, but I think there’s no reason why they shouldn’t be. And I can see how it would be useful to be able to put a reusable block in those areas. Um, so I think that will be coming soon.

So right now only the one tab in the widget, um, if you’re in the widget editor and open the inserter, there’s only one tab, but coming shortly after, I think we’ll get both the second and third tabs, the patterns and the reusable blocks. [00:08:00]

@estelaris: All right. Any other questions? Nope. Okay. Well, uh, Ahmed just posted the link here on the chat for everybody.

So the link to the, to the post, please go read, leave your comments. If you have any. We always look forward to those because that help us make our work better, improve where we can. Okay. Now let’s just move on. All right. Anybody else wants to show something, have something to that is working on that need any help or that just want to show off was that’s also allowed.

@melchoyce: Yeah. I have some, um, very early concepts for WordCamp US branding that I’m working on. Yeah.

@estelaris: Give me just one second. There is, there is a question here from Sean. Sorry, sorry.

@shaunandrews: I was just [00:09:00] going to suggest Channing. I wonder since one thing that makes the block-based widgets different from the editor is that you have this concept of widget areas.

Right. Um, and instead of like relying on like the top bar inserter or the inline inserter, and sort of like that little black plus, maybe if it’s just an empty widget area, it shows me a bunch of patterns. Like right there that I could just click on or like the carousel ID or something, but something where it’s like more in your face and maybe themes could even, you know, pre-populate those with a collections of patterns, you know, that, that would be like, you know, I dunno, relevant to that widget area, whether it’s a sidebar or footer.

@critterverse: Yeah, that’s

an interesting idea. I was looking at something taking place in the canvas. I actually, I was in the site editor and I was looking at how the footer block works and I was like, wait, should [00:10:00] there be a, um, some more parallel between like how you’re inserting blocks in these two places and it happening in the canvas or something being pre-populated there.

In general. I think I really prefer the pattern selection happening in the canvas because there’s so much more space there and it gets really limited in the pop-over.

@shaunandrews: Right. Yeah. I mean, the only downside there is that the, and this is with widgets in general is that the widget area is not always representative of the actual output of the widget area, if that makes sense.

Right? Like, so in the editor and the widget editor, now we have these kind of long narrow columns. But if you think of a footer it’s probably wide and short versus a sidebar. And so pattern might not be, I think that’s just one of the differences between the widget block editor and like the actual site editor, so that the site editor is to us to be more representative of reality.

Whereas widgets are slightly more abstract. [00:11:00] Just putting that out there that I’m not sure if that’s a good idea to try to do something in the canvas. So not, but it’s where my mind went right away. Was that you have this place with this empty thing. Just show some stuff that could populate it right away.

@critterverse: I think it’s a cool idea.

Yeah. I can look into that.

@estelaris: All right. Thank you, Sean. Okay. Sorry for that. Sorry about that Mel, now you can show us..

@melchoyce: All right. So, um, I’ve been working on some kind of initial concepts for branding for WordCamp US, thinking about going to be kind of like a camping-style, kind of inspired by the National Park Service designs. Um, there’s a bunch of like really cool vintage designs and, um, some more modern stuff that I was using as inspiration.

And so these are like very rough, more like style-tally than anything else and just kinda want to get like first impressions and gut check on whether any of these seem like a good [00:12:00] direction, whether you can like picture it, expanding across the entire WordCamp US site. Um, also want to keep this a little more on the team.

Um, a little more, like, not like super public yet. Cause like nothing is decided and like. Just really hoping I don’t see it WP Tavern article, but before we get much further. So just kind of like any like initial thoughts would be awesome.

Yeah.

@estelaris: I like the green, the green cover that you have in there. You know, going into, like you said to the camping stuff, kind of like national park site, that, that that’s pretty much, um, I don’t like the way you have your, your speakers. I mean, it’s pretty cool. [00:13:00] Don’t get me wrong. It’s pretty cool. But I just kinda like not see them together.

That’s in the one above it.

No, the speakers, and like, for instance, the cover.

@melchoyce: Can you elaborate on that a bit?

@estelaris: I dunno. I mean, I like the idea that you did on the waves and I imagine that that’s supposed to go, like if I open an old map, that’s, you know, how you get, because you’ll never get us a really straight [line] because of the folds, uh, but I don’t, I don’t know. Maybe if you change the images instead of full color, into a tone or something like that, then they’ll feel much better.

@melchoyce: That is a great idea.

@estelaris: And, but because like that, you know, you have all the colors and then you have the, you know, just a one color I’ll sit on the, on the, on the cover and all the colors for all the images. Then the kind [00:14:00] of feels too much.

I dunno, it feels weird.

@melchoyce: So, yeah. And then outside of the imagery,

@shaunandrews: I’m going to say outside of the imagery, I’m not sure I would associate what I’m looking at here with like national park service.

@melchoyce: It’s really just like an, uh, start to get me inside.

@shaunandrews: Yeah, I’m just saying without like the, the, the mountains and the lake and stuff, the map, like the fold-up thing seems more obvious to me, like the WCUS like that little logo that you have, that seems to be really strong.

Although I think I saw a version of it that had like on the other row. Yeah. There’s uh, yeah, that one felt more. That to me looks more like a [00:15:00] folding map that screams to me, like, you know, I’m a venturing out into the world.

@melchoyce: Then the twofold, right?

@shaunandrews: Yeah. That almost looks like a stylized arrow rather than a map, but it could be cool to have that shape. Like you’re playing with, uh, with the speakers photos. Maybe there’s something you can do to the, like that big map image that you have there to give it that same type of feel. And that could, and then I love like the elevation mark suit. I think that’s super cool. Honestly, it’s becoming more like a map design than a national parks design. If that makes sense.

@critterverse: Have a cool little legend somewhere, or maybe a stylized legend that is really has like info.

@shaunandrews: What do they, the, the, what they call it, the rose or something? The compass compass rose. Yeah, that’d be cool. [00:16:00] And maybe even bringing in like a compass would be cool too, more elements to make it scream like this is outdoors adventure.

@estelaris: Yeah. Which is what we all miss

@melchoyce: Yeah. That’s very timely. Yeah. The, the like first post pandemic, not the real close pandemic, but like the first trip was to Shenandoah national park. Ooh. Nice. So does it seem like of these four concepts, people are leaning towards this third one?

@shaunandrews: Yeah. Seems to have the best, like feel to it, like it’s more cohesive and like it has, like, it says something, if that makes sense.

I don’t know. I used lot of weird phrases today.

@melchoyce: If I were to show off, uh, any other of these concepts to the WordCamp US team. A. Do you think I [00:17:00] should? Or do you think I should just go with this one and like B. If so, which of the other directions seems worth showing off?

@critterverse: That must feel like they’re all part of the same concept, break different variations on a theme, all the different colors.

@shaunandrews: But I’m always hesitant to present more than one option just because then you get Frankensteining, right? Like I like this and this, and let’s combine them. Um, but I, I do. I think that the, I dunno what you’re calling it. They all have the same art board name. Uh, the green with the white navbar feels the most thought out, whereas the other ones are, and I don’t know if this is true. I’m not trying to downplay the work you put into it, but the other ones don’t feel as uh, far along, if that makes sense. So that green one stands out to me just because it feels more like a cohesive thing.

@melchoyce: Yeah. Yeah. None of them are far along at all. They’re all like [00:18:00] just the the barest ideas that I could use to communicate.

Yeah, I think that, I think that you can do, for instance, the second row, the base road, you can, you can have that also as a presentation for, you know, the talks and everything, like a different page of the same of the same site, uh, with, uh, with the map, the maps. But I think that, yeah, your, your, your concept here is going to end up being maps, for what I’ve been listening. That’s where we’re kind of pushing you to. So they are maps.

So yeah, you just, you know, make the colors more cohesive. Once you establish a, a color palette, then I think that they will go nice. Cool.[00:19:00]

Yep. All right. I will go full steam ahead on flushing this up a little bit more.

@estelaris: Okay. Thank you. Thank you. Also scale bars are cool. Oh yeah. Get that one. All right. Anybody else? But yeah, few more minutes. If not, we can just start chatting about summertime.

@shaunandrews: I can share some, I’ve been staring at block styles for way too long. Now I can try to share it maybe.

All right. Actually, I wonder.

I can’t use my mouse today. [00:20:00]

So if you’re unfamiliar with block styles, I’ll quickly show you just kind of what they look like today. Um, this is a median text block, and I have 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, I think it’s code blocks that adds some stylists to this. Um, and so over here you see this kind of like floaty little squares with labels. It’s kind of all just kind of hanging out over here.

It’s not super obvious, but if you click on the edge, you get different effect. And these aren’t the greatest styles, actually, it’s kind of, half of these are useless. Uh, but just the idea that some blocks can have, um, different looks to them based on the style itself. Um, and so the social icons block, you have the default kind of circular, you can do just logos, where there’s no fill, you can do a pill shape.

Um, and the idea is looking at this, how can we improve this? Oh, Jesus, the editor so hard to use. Uh, how could we improve this, um, and make it more useful, uh, at the same time. [00:21:00] Uh, so one of the things I was looking at was, um, my biggest problem, I think, would the, would that picker UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. is that those previews are super small.

Um, and they’re not always obvious at a glance of what the difference is. Uh, and so I went through, I don’t know how many different iterations of trying to play with us. And eventually I came to just the idea of descriptive text labels as a way of like listing out the styles that are available. Um, and then if you hovered on these, you would get a little fly out previews and these previous could be much larger than we could fit in the sidebar.

So you get a better idea. Of what that style is, um, you know, and in this case you’re hovering over around. And so you see, oh, it rounds me, uh, similar to that. Uh, okay, here we go. Um, one of the things I was looking at was how do you create styles?. Um, right now there, you have to create them [00:22:00] in a plugin or a theme, um, or a blocking provide styles, but there’s no way from within the editor for you as the end user to create your own styles.

Um, and so in this scenario, I have a paragraph block. I want to change its size to be a little bigger, but I want to be able to use that same size elsewhere. Um, and so here I can click up here and I can save this as a new style. Um, and maybe it shows in here, like what changes I’ve made and what I’m about to save.

I can give it a name and I create that style. And now I have this large style that I could use on other paragraph blocks and I could switch between, you know, the different styles. Um, but then I could also, what are the other things too, is that I can make that the default style. And so then whenever I add two paragraphs, they all get that kind of styling.

That’s pretty much all I have to show. Um, there, like I said, I went through. A ton of different explorations around showing thumbnails, or just showing the text grid. Um, even the idea of being able [00:23:00] to. Let me play this one., this is an interesting prototype. The idea of being able to select multiple styles.

Uh, so here we have a button block and the default style for the steam is just a square green. Uh, but maybe I want to make it rounded and I want to give it like a little 3D effects. And so now it has like a 3D effect, or I could turn that off and maybe I could turn on the outline variation of it, or just turn all of them on and have this crazy stylized button.

But I think it’s an interesting idea. I think there’s some concern around conflicting styles and what that could mean, but I don’t because the alternative to this is if you want to have a circular outline button, you have to have two different styles: one that is circular and then another one that’s circular outlined. And then if you had a shadow, you’d have to have, and it becomes this matrix of styles that start to add up really quick.

Yeah. So there’s actually a, an issue in get help about this too, which is sort of this idea, this isn’t what it’s supposed to be. Right? Visual [00:24:00] CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site., like a non non-developers. Yes. Yeah. That’s cool. That’s cool. Yeah. It’s a nice idea.

I would had this idea of abstracting, the previews into maybe like some sort of representation of the styles rather than actual rendered previews. This is nice because it would give us a lot of control over how they’re rendered and what the requirements are, but then it creates a big burden on the creators of styles.

And in that first prototype I showed where you could create your own styles, how would something like this work? Um, but I still think there’s some interesting stuff here with like, we could do shapes on the buttons and stuff, but it doesn’t really work across the board once you start to get to, um, more complicated styles.

So I didn’t go down that avenue very far. I also played [00:25:00] with carousel stuff, similar to what Channing showed with the patterns.

@critterverse: What’s the difference between, or like how to draw the line between this, like, which is like start with a basic style and then global styles to like granular.

@shaunandrews: Yeah. I think the global styles could actually, so there is definitely some interplay there. Right? Um, global styles could effectively lets you manage these same style.

On a per block level. Um, I don’t know if I have global styles enabled here or no, let’s see styles already has the per block, right. Block type. So I can come into here and say all of my blocks by default, have this, these settings. Um, and then maybe there’s even a place in here to change. What’s the default style, right?

[00:26:00] Yep.

@critterverse: Yeah. When you did the multiple thing, that’s what reminded me of this. It’s like, oh, why like, do we want this? Not that, uh, what you’re showing to be more preset, whereas the multiple thing, like, okay, border rounded, this, this, this, like, that feels very, I don’t know, like something you would want to tweak.

Afterwards or maybe like a more, um, maybe someone who wanted to just get like more precise instead of like, oh, I just want, like, it’s kind of like those like classic versus, um, uh, fancy styles and we just like pick a bunch of stuff for you. I dunno. I dunno if I’m making sense, but a little bit. I think the classic fancy thing.

Yeah. Like how, I don’t know if it’s like [00:27:00] Instagram or something where it’s like, pick classic would be like, oh, we changed your font to serif or sans serif, we change the colors and we’d do like, we do all this stuff for you. Whereas like someone was like, oh no, I want to pick this font or I want the red radius.

@shaunandrews: I think that’s kind of where this comes in, right? Like I want to create my own style and tweak every little piece of it, but the blocks themselves can still, or my theme can provide styles as well. Yeah. Is that kinda what you mean? Like there’s a theme to provide like a fancy or a classic style for a paragraph, but then if I’m really particular, I can go in and maybe edit one of those or create a new one and make changes.

@critterverse: Yeah. Like when am I using the styles panel and when am I like going into like global style? Um, it’s like a good thing to define, I guess

@shaunandrews: I think there’s similar things, right? It’s just different, different entry points in [00:28:00] one year, focused on just the block of the other one. You’re in that context of, you know, it’s called global styles because it’s for everything.

Yeah. So, yeah, it’s a good thing to think through though how this affects will global styles, how they are related to it.

@estelaris: I like where this is going.

Okay. Any questions? Anyone. So are you going to, so the plan is to go into development with this Shaun?.

@shaunandrews: Oh, I don’t know. I’m sure I’ll spiral on this for a few more days. I keep telling myself, I need to write something up for it, but I haven’t, every time I do that, I find another little thing to explore and then, you know, but, uh, there’s this and a few other things too, that I’m working on.

So yeah, I mean, the plan is to keep working on [00:29:00] this. I want to get some, some sort of proposal up on 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/. And, and probably the make blog too, just outlining, like what changes we could make, what are small improvements we could make to the rendering of those previews so that they’re more obvious and easier to see.

Um, but then also, what are the next steps to the style system in general? How does this, how do you create styles? How do you manage styles? Um, how does this work with global styles?

@estelaris: Okay. Alright, cool. Cool. Well, we have six more minutes. On this call, anybody else has said anything or so I would take that time off to get back.

Javier? Do you have anything? No, he’s just quiet. Quiet.

Oh, search block as, uh, yeah, I’m not gonna talk. He had, um, dental surgery [00:30:00] today, so he cannot talk. He can just type.

So you want to talk about the search block? Who did that search block? Who wrote the post?

@kellychoffman: There’s a policy we can look at Javier doesn’t want to share. I don’t think we should force people to share.

@javiarce: I haven’t prepared anything.

@estelaris: So, uh, it will save it for next time. So how about I gave everybody five minutes, like, oh your time, if you don’t have anything else to share.

Yeah. Thank you everybody for joining us and, uh, we’ll continue meetings next week. Uh, we’re skipping triage at the moment, because really there is no, not too many people that show up or actually nobody is showing up. So we’ll probably resume around August the third week of August or something like that, [00:31:00] with triage, but if you still have some tickets that need to be reviewed, post them on the channel and somebody will get to them. Okay. All right, everybody. Thank you. Uh, we’ll talk to you. We’ll talk next week. And uh, if not, then just enjoy your summer. Have fun. Go out now that we can go out. Okay

Initial Patterns for the Patterns Directory: Launched!

As reported over on the Meta blog, the 85 patterns the community designed for launch with the Pattern Directory are now live! 🎉

A few examples of our new community-designed 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. patterns.

Thank you to everyone who submitted, refined, and helped launch this set. I’m thrilled that users have such a broad set of high-quality patterns to choose from at launch, and I look forward to iterating and growing the collection over time. 

Now that we’re post-launch, we’re going to close submission of general patterns to this initial collection. The next phase of development for the directory will allow anyone to submit their own patterns directly, so please hold onto your ideas for then!

In the meantime, the design team may add a few more patterns from time to time (similar to how default patterns were occasionally added to 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/ before). You can keep an eye on the Pattern Directory’s GitHub repository for any activity there. Also, if you notice a bug with one of the existing WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ patterns, please file an issue and let folks know! 

Thanks again to the contributors who made these patterns happen: @anariel-design, @beafialho, @bgardner, @cavalierlife, @chrislema, @circlecube, @critterverse, @greenshady, @jameskoster, @jcasabona, @karmatosed, @kellychoffman, @kjellr, @laxmariappan, @mahvash-fatima, @melchoyce, @richtabor, @schutzsmith, @tajim, @webmandesign, @wetah

Design Team Meeting Notes: July 7, 2021

These are the weekly notes for the design meeting that happens on Wednesdays. You can read the full transcript on our Slack channel. 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.

The main focus was an open floor but the following is a summary of topics including links shared.

  • About page was asked to have feedback.
  • @richtabor provided a range of 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/ issues we dove into discussing various things around the editor.
  • The first of these was closing block styles proposed by @michael-arestad (who joined in the discussion). This improves the styles panel; discussion led to more thoughts around the side panel updates that are incoming.
  • During this discussion, some great links were shared by @melchoyce, @shaunandrews, @joen and many others. Here are a few of those:
  • Following on from that contextual padding was talked about.
  • For all the issues linked, feedback is very welcome.

#meeting-notes

Monthly Design Show and Tell: June 2021

Attendees: @karmatosed (facilitator), @kellychoffman, @joen, @beafialho, @javiarce, @melchoyce, @fcoveram, @kjellr

Designs shared

  • @beafialho shared progress on the WordPress News redesign.
  • @fcoveram shared progress on Openverse

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.

Contributions to the Design Team are always welcomed. Please pingPing The act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.” @estelaris or @chaion07 and they will guide you through.

Update: Initial Patterns for the Patterns Directory

Thank you for the wave of contributions to help kick off the WordPress.org pattern directory. We now have 80+ patterns in the collection

Now that you’ve helped us populate the directory with so many patterns, @melchoyce, @beafialho, and I are going to shift focus to further refining and tidying up the collection for launch. Our goal for this pre-release set of patterns is to provide users with a diverse, high-quality set of designs that share a common thread. 

This does not mean that submissions are closed — just that we’re at a point where we can begin viewing submissions through the lens of curating and filling out the collection as a whole. With that in mind, I’ve pulled together a handful of suggestions to help folks who are submitting patterns between now and launch: 

  • Draw inspiration from history, art, and nature. Like the patterns that are currently bundled with Gutenberg, this set is designed to share the common thread of history, specifically through the lens of art and the natural world. Using these reference points allows us to cover a wide range of topics and styles, while still having a throughline that connects them all. When submitting a pattern for this pre-release collection, please consider having your imagery and text be related to those topics. That will help this feel like a cohesive set. 
  • Challenge yourself to create something new. Before you get started, take time to browse through the directory and ensure that your pattern does not duplicate existing work. For example, the directory includes many Media & Text patterns already, so there probably isn’t room for many more Media & Text patterns at this point. 
  • Write text creatively. For this initial collection, we’ve been avoiding “Lorem ipsum” text in order to help make the patterns feel more real. Try using text as a way to hook into that common thread of history, nature, and art mentioned above. If you have links in your text, feel free to link to WP.org or WordPress.org. You can use example@example.com as an email address if you need one. 
  • Be sure to use CC0 or Public Domain images. Keep the common thread in mind when choosing images. If you need inspiration, previous patterns have had great luck pulling from Rawpixel’s curated public domain collection of images. At this time, let’s avoid modern iconography as we wait for a more flexible icon solution in 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/
  • Aim for accessible color palettes. If your pattern uses colors, be sure that text contrast adheres to WCAG 2.0 guidelines. This will ensure that more people can read your pattern! 
  • Consider a range of screen sizes. Be sure to test your pattern on mobile, tablet, and desktop views. Some patterns using large text tend to break awkwardly on smaller screens. Be sure to test that out, and adjust accordingly. 
  • Ensure your pattern works well in many themes. Be sure to keep your 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. settings as specific as possible: Outside of default colors like black and white, please specify hex values instead of relying on theme presets. Make sure your pattern isn’t using any theme-specific block styles, and be sure to set line-height for text when appropriate.

We’ll continue evolving these suggestions and guidelines over time as the directory continues to grow.

As we move into a more tightly curatorial part of this effort, I’d like to reemphasize that the current process is just for the early, pre-release phase of pattern submission. For example, if you have a pattern that is similar to one that is already in the pre-release collection, the Design team may hold off on including it for now. But you’ll be free to resubmit it directly yourself once the directory is launched.

Again, thank you all for your submissions! It’s exciting to see the directory come to life. 

Design Team Meeting Notes: June 2, 2021

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.
  • Contributions to the Design Team is always welcomed. Please pingPing The act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.” @estelaris or @chaion07 and they will guide you through.

Announcements

WordPress has turned 18
Last week we celebrated the 18th anniversary of WordPress’ launch, a day that we can fondly refer to as WordPress’ birthday.

Since our last birthday we developed our 40th release and now also support over 40% of the web. So it seems fitting that this year’s celebration should be a list of 40 milestones that have helped us get there.

Bug Scrub Schedule for 5.8
As we are at feature freeze for 5.8 release the next milestone is the 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. 1 which is set for June 8. I along with  @lukecarbis are leading scheduled bug-scrubs that usually happen twice a week. For the most part, they’re scheduled for Tuesdays and/or Wednesdays at 4:00 UTC for APAC time zones and 20:00 UTC for US /EU regions, though there are some adjustments to accommodate religious and national holidays. The next one is on June 8, Tuesday at 2000 UTC. Come join if you can as we look to address a few bugs and defects for 5.8 🎉

Proposal to tweak existing icons and add new ones
There is a proposal by @keoshi on the existing icons. The discussion goes back a couple of weeks over Slack that has been documented in the Meeting Notes. We would love to hear your thoughts, concerns, and suggestions on the above. If there are no major disagreements or changes to be done, the next step would be create a PR to submit all of these to the repo.

WordCamp Europe 2021
As we are just days away from WCEU 2021 which is set to take place between 7 and 9 June, we wanted to remind everyone to get their tickets before it runs out. Noting that 2 #design team members talking this year:

  1. @javierarce will present Using Figma in the Design Team Workshop on Monday, June 7 at 18.00 CEST
  2. @estelaris will be part of a panel discussion on How contributors make WordPress – Wednesday, June 9 at 16:00 CEST

CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blog highlights

Discussion

@estelaris suggested that we add a link to the handbook that references the fact that Figma now provides a link to give view access to the WP library. This way we can remove the note about emailing invites. @karmatosed, @kellychoffman, and @melchoyce agreed. Estela will do the update.

Further reading

Initial Patterns for the WordPress.org Patterns Directory

After the Pattern Directory has launched, users will be able to add their own patterns to it directly. In the meantime though, the project needs a collection of high-quality, diverse, community-designed patterns to populate it with during development. These patterns will set the tone for quality in the repository, and will make the directory useful for folks upon its launch.

The Design team has already produced a small set of patterns to kick this off. If you’re using the 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/ 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, you may have noticed a new set of bundled block patterns in the pattern inserter recently: 

These were designed by @beafialho, @melchoyce, and myself as iterations on the default set that shipped with WordPress 5.5. They have already been migrated into the upcoming Patterns Directory on WordPress.org for testing there.

This small set is just the beginning though! The three of us are continuing to design patterns to feed into the Pattern Directory, and we’d love your help. We encourage you to submit pattern candidates (in the form of mockups and/or 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. markup) using the “[Type] Pattern Submission” tag in the Pattern Directory’s 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/ repository. There’s an issue template already created to help you get started

In this early phase, the Design team will review each suggested pattern and work to identify a list of criteria for which types of patterns are good candidates for pre-submission to the directory.

Please share any questions or concerns in the comments below. I’m looking forward to growing the Pattern Directory, and can’t wait to see we all design together!