The Design Team provides user experience, user interface, and visual design expertise for the WordPress project.
Want to get involved?
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 sourceOpen SourceOpen Source denotes software for which the original source code is made freely available and may be redistributed and modified. Open Source **must be** delivered via a licensing model, see GPL. project.
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.
@melchoyce rans us through some first thoughts about the design for WordCampWordCampWordCamps 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 blockBlockBlock 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.
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 widgetWidgetA 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 sidebarSidebarA 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 accessibilityAccessibilityAccessibility (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 loopLoopThe 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: 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.
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.
@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.
@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.
@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.
@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.
@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 pluginPluginA 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 UIUIUI 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] CSSCSSCSS 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.
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 GitHubGitHubGitHub is a website that offers online implementation of git repositories that 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.
@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