 All right, welcome to Testing WordPress. Find your style with host Courtney Robertson and co-host Sarah Snow. Let's just set some norms just really quickly. So this is a social learning space we were learning together and this means that we have varying levels of experience and knowledge. So always stay respectful and curious. Respect yourself with everyone in this room. Bring what you know and your questions today and please do find your chat box. As I said in the chat, ask questions there. You can respond there, use reactions. Definitely write down your observations today so that we can aggregate those. Close captioning has been turned on so you should be able to find that if you would like. Let me do that. And then the session will be recorded and can be reviewed later. So as you find your chat box, this helps us to kind of like orient to your skill level. So how experienced are you with Testing WordPress today? One is I've never done this before. A three is I've tested WordPress features once or twice before, which is probably where I would be. So I'm gonna write that in the chat. And then a five is I am super familiar with testing. I'd imagine that Courtney is there today. I'm familiar with this style of testing. I am less familiar. There might be some devs in the crowd that are into unit tests and pen tests and all sorts of other things. I know this version of testing. I would give myself a one on the others just for some comparison. And that's totally fine. Anybody else care to share in the chat? Where are you? Have you tested before? Let's see, I see another three ish. Awesome, awesome. Okay, so right there with me. Yeah. And I like testing. I'll go ahead. I love when we have people that are totally new to testing. You see things from a perspective that is absolutely vital. You have a beginner's mindset to testing right now, maybe to WordPress too, maybe not to WordPress as much, but it's good to remember what it's like the first time you've conducted tests. So I love that we've got some absolute beginners in our midst today, which is great from this perspective. Well, let's keep going. All right. So just to kind of set the stage, like this social learning space is super for you if you are familiar with the block editor and familiar with site editing, specifically like if you've used templates before, if you want to contribute to WordPress, you are in the right place. And if you want to share your feedback to improve the site editing experience, apparently you need to change that. We're not calling it full site editing anymore. But if this doesn't describe it, if you're like, I don't know what these things are, you are still welcome, your insight is still valuable. You just, you might be a little bit more lost if this doesn't describe you, but that's okay. We still want to hear your voice. We still want to hear your observations today. So Courtney, do you want to talk about how and why we test today? Yes. So I'll share a link here in the chat and then later on as other people trickle in, Sarah can help share that as well. WordPress has a release coming up soon. Anybody know that? We're going to be shipping WordPress 6.2 at the end of March, I think on the 28th is our target. And the beta version of the software will be available starting on February 7th of WordPress 6.2. When we deploy an update to 43% of the internet, we want to make sure it works. So the reason that we do all of this testing, we start doing some of these tests well before we even get to the beta release because some of those features are already available, like you'll see today through the Gutenberg plugin. What happens is that on February 7th, all of the things that have happened in the Gutenberg plugin since the last release will be merged over to the beta version of WordPress 6.2. So at that time, Gutenberg plugin not needed for the same kind of testing. So right now we're testing things before they land into the beta version of the software. That way we can try to work out any bugs that we get before we hit that beta release even. That way we're a little bit more sure that some of these features that you'll see today are going to ship. Additionally to that, it's a good chance for you to get up to speed with what's changing in WordPress, whether it's the most recent features. Today we're going to look at the Storybook, which area is a big deal and new for this release. But there are other areas of maybe you just haven't seen the site editor yet. And that's totally good with us too. So this is a safe way to test, where you're going to be around other people that are participating in testing. They'll all have their own experiences. This is our chance to test and break the things before we ship a big rail release. And so we like to get lots of people's feedback about what your experience was with these new features, certainly before we start shipping it out. So for our feedback, just to be clear, that link that I shared, we're going to write comments on that exact post and at the bottom of that, you'll see other people that have already conducted this test. There's a window of time for running through this one. They've all left their comments at the very bottom of this post. So our feedback gets left. And then Ann, who wrote the post or others that work with Ann, will collect all of that feedback and ensure that the developers get it, that the developers get eyes on those issues. Yeah, so if you haven't already clicked that link, please do so. Like you can always find these calls for testing too. One of the questions that we got earlier on was where do you even find these? So how would I even find that from just Wordpress? So it's in this community, it's in Make Word Press. How would I get there, Courtney? Yeah, go ahead, click on Make Word Press and we'll navigate to it. We could go down to the test team. There are lots of teams that are here. They were just listed as based upon when they were created, but the test teams blurb there. The test team helps do what's called QA testing that may not be said exactly as such, but quality assurance testing. And so the whole purpose of the test team is to test Wordpress before releases to document what we find in our tests. And so you could click on that test team title there. And from there, you want to look for anything that says call or testing. Ann does one of these approximately every four to six weeks, there's a new one going on. The one there is a summary of the last one, one that happened before today's. So I think the next post after the one Sarah sees on the screen now will be today's. Anything that says call for testing, that's where we go to get the information. Ah, FSC program call for testing. Yes, beautiful. So that's how you can find those in the future. Thank you so much, Courtney. Absolutely. Cool. All right, so today, what are we testing? We've got a couple of new items to test and this is directly from this post over here. So it literally says it right there. We're pushing changes to styles to apply individual block styling scobily and adding an option to import widgets from sidebars as a pathway for importing content. And then I guess we're repeating some of these from previous times. Can you tell me a little bit about what that means, Courtney? Yeah, so reorganizing the site editor to introduce browse mode. I'll show what the browse mode is. We saw that ship in at least an earlier version of Gutenberg. My mind is fuzzy right at the moment if it was in an earlier version of the Gutenberg plugin or if it has made it into WordPress 6.1. I don't know if it made it into 6.1 but an earlier call at least did that part of the test. Introduce new UX for the navigation block that was in an earlier version of the Gutenberg plugin. So probably the last call for testing it did not make it into 6.1. Split block tools between settings and appearance. Again, same thing, earlier version of Gutenberg. I'll show you that when we get there. Not far away to view a document containing all blocks and styles. The storybook. The storybook, again, Gutenberg feature, not yet into our press core. So these are all areas that if you missed the last call for testing I think some of these were in the last call for testing. Okay, so these were tested before and we found lots of bugs that would have crashed 43% of the internet probably. Maybe. In worst case scenario, but because of contributor feedback like what we're doing today they didn't necessarily make it in. They continued to be worked upon instead. Is that right? Yes, yes. And they may have been rolled out into the Gutenberg plugin after 6.1 but not yet merged to core. Yeah. Awesome. All right, well, I'm gonna stop sharing my screen. I think it's time for a demo. Courtney, do you wanna take it away? Absolutely, yes. So folks, if you can click through on that link you'll want it, although I will cross post a test site for us. Let's hit share my screen and I will make sure that I get this all ready for you. Here we go. And every time I go to screen share Zoom does some silly things I'll just say and it like hides where my windows are. So sorry about that folks. I wanna be sure that it's sharing. I usually get like a preview of what I'm sharing but I guess not at the moment. It's okay. Zoom likes to hide windows, we'll just say. So here we go. We saw those new items. We saw the things that have been tested before testing instructions. This is where we jump in. To use a pre-built test site or to set up your own. So a lot of folks have used software like local WP from WP engine or they have used server press or maybe you're really dev oriented and you've got a dev Docker container ready to go and that's great too. Any which way that you've got WordPress locally running on your own machine you could do that and follow those directions but to keep it simple and fast for our time together. We're going to use the tool from InstaWP. I love the work that they are doing. They have gifted us an account where we all can select this one link and you'll see in my site in the background I'll paste this into our chat. Please only select this link one time. This will work for 24 hours and delete. It reminds me of the old Inspector Gadget cartoons with the letters that self distract. It's just gonna just delete itself within 24 hours. So I clicked that link and it launched into this tab. You could click that link too and you'll see, oh look, you already have a whole WordPress site with content and themes ready to go. Click on the magic link and it will let you in. And it's being redirected. And ta-da, I've got my whole environment set up. So this was a question that we received ahead of time is how can I set up a testing environment? For the purposes of this test, this test is asking us to look at specific things. The link already has all of the content, the themes, the plugins that we would need in and configured and you get that under a minute which is blazing fast, which we like. If you would like to set up a local environment of your own for testing there are directions on this post. Come back to that at a later time. But you're certainly welcome to track along. The training team has three separate links that we maintain of WordPress versions that's current stable. That would be beta and RC release branches and a version that is bleeding edge nightly, whatever is not yet even in the beta list. So we maintain three versions of these same kind of templates and we let people make use of those through our courses and other material I'm learning which is great. That said, we clicked our link. Next step, number two, don't click on it a lot of times. Got it. Yeah, 24 hours, save the link so you can access it during the test. I feel like I'm gonna be trustworthy and keep it open in my browser. And switch to your site, explore your site and feel free to add more personalized items whether by adding or customizing menus under appearance menus or more widgets under appearance widgets. First thing to take note, we see appearance widgets. Sarah, you've probably been playing around over in the site editor a lot these days knowing what you've been working on. Do you see appearance widgets usually when you're in site editor? No, I do not. No, but we remember it because if we had lots of themes from the earlier days of what's called classic themes those are the themes like 2020 event, 2019 all of those default themes many of the WordPress themes that are out there are built using a classic style of approach. Like we have the classic editor we have classic themes now and it's before blocks entered the themespaceinwordpress.org. So appearance widgets means that we have a classic theme running. If you want to check I happened to have looked ahead of time and I believe that this is 2021 specifically the not block theme, a classic theme. So that's why we see appearance widgets the way that we do in full site editing, we won't. So it says customize, add some widgets. If you've been in WordPress for a bit you know that this is the older way of adding widgets here but it kind of looks like the block editor in appearance widgets even. If I go to add a widget in I now see that there is a block approach to adding a widget. So if I would like to add in what might be a block that would be different. Yeah, well let's say I'll add a calendar and I'm going to put it there. Okay, so there's my calendar. I've customized it. If you want to add more in and test them a little more thoroughly that's fine but I can hit update here and compare it again to my directions. Widget saved. So it said customize the widgets and then when you're ready go to appearance, themes and select activate. So I want to do a double check on how this looks on the front of my site. Going to open it into a second tab and the front of my site I want to look around and see if I can see where the widgets are displaying before I look too much. Okay, lots of posts. Ah, here we go. My widgets are showing up in the footer of my site and I know this because I've added this calendar before the social icons. So there is what I've added to the widgets area. And so I have customized the widget. Now I'm going to go and change to a different theme. Going to switch over to 2023 theme. So if I go to appearance, themes. So far we're doing pretty good. This is kind of easy stuff to get started with. I see the 2023 theme. Let's hit refresh and see what that looks like on the front of site. Ah, widgets are gone. No widgets in the footer of the site. That's because block themes don't really call widgets in exactly the same way. They still use widgets certainly, but we no longer get appearance widgets over here and that's important to note. So we don't have the widgets there. So how do we do this now? Add to appearance editor and see the site editor. Click through the templates and edit something. Select your home and hit edit. Notice that your menu that you, oh, notice your previously created menu was automatically imported. So I did not add in more items. It says whether by adding custom menus to appearance menus or more widgets under appearance widgets. So we'll note here is what our menu looks like front of site. I didn't customize this. I customized the widgets, customize either. So I go into editor and eventually we're going to work towards getting those widgets back. Taking a moment here to just sort of take in what's different. I see some things have changed since our last release. Are there any things that other people are spotting before I even click on anything that looks a little different? It's always this guessing game of like, what was it like before? I mean, I'm noticing that when I click on templates on the left-hand sidebar, it's showing me a list of them on the left-hand side. That's new. Yeah, yeah, it is. So these templates look different. For a comparison, I happen to have a, this is an old site. I'll be clear when I'm an older site, right? Is this still using the editor experience, the site editor, but it's a different site that I have set up. So notice when I landed, when I hit edit, in this one, I landed right into, this wasn't even displaying yet. I landed right into the homepage to start editing it, whereas the first thing that I land on now is here. So this is a side-by-side comparison of, this is what is current in 6.1. This is what we might see in 6.2. Do I like one better than the other? What's different? Over here, it was a little confusing to folks that they had to select the site icon to show that sidebar and to move around. I can also look at where it says site templates, template parts that are here, and also the visual styling, right? Like this is, because I landed right into edit mode of the homepage, I could just start clicking and changing things. Over here, if I try and click and change anything, oh, I can't click on it because I'm not editing this until I would hit this edit button. So that's something different. That's a change that we see. And also here, I have a dashboard option to get me back to the dashboard here. From here, how do I get back to the dashboard? How do I do that? Oh, I have to hit the icon. So that might be some feedback I have is that now that we've gotten accustomed to having that dashboard link, maybe I would like to have it there. So what I'm actually going to do is start up another post. I know this feels like there's a lot of things open on my screen. I'll try and name it as I do it. The first thing I'm doing is leaving some feedback around one. I like landing in a non-edit mode. However, I'd like a text link to return to the dashboard. So this is my feedback, that this is just something that I'm coming up with. You see, I'm taking notes like this and the reason I'm taking them in WordPress is I could copy paste it from this blank WordPress post anywhere I've got it to be in the comments later and it'll be nicely formatted. So I would encourage you to also do something similar. Take the notes in some post and then we could copy and paste that and put it into the comments and do it on your own as well. If you've got different feedback than I've got as a group, that's great because your method of leaving comments is your method of contributing to WordPress that shows an activity as something that you were doing as a contributor. So we like that. So I'm just kind of noticing like, oh yeah, let's get back into this editor appearance editor. And worth noting, if you upload a site icon like your company logo to a site, that W will change. This is the site icon that displays here. And until we change it from WordPress, it's going to show the WordPress logo that's there. I'm not sure if most people will notice that if they click on that for their company logo that that returns them to the editing dashboard. I don't know if that's what they would expect when they click on that. So if I wanted to edit this, I could hit edit here. And it gives me that, hey, welcome to Gutenberg. Welcome to the site editor box. Thanks. So I still see that I could do a lot of the same editing as before, but little details. Let's do a comparison again. Let's go to, this is the current stable version. And when I land in here, let's do a subtle comparison. I'll give you all some hints. Look in the very top part of my screen. New version, new version. Notice even the hover color that's there. That's a gimme. And over here, there's something about this top area even up here that's different. Anyone spot what it is? New, old. I feel like the eye doctor. Better. Or not better. Which way do we like this? Anyone seeing what's different in this very top area? On the right hand side, these icons have changed in their visual style. I see that this says settings and before this is how the word setting, this is what settings look like. I see that we have an extra option over here. And that says navigation. Whereas here, I don't see that option for navigation. So what we want to notice is that, oh yeah, there's a couple little nuances that have shifted. And if you're reading through that post, it will even draw your attention to that. But those are some of the subtle nuances that I look at. And this coloring, that's different. Notice when I click here, how not only was my hover, ooh, let's go up again, my hover over our site title made that a little bit of a purple hover. But when I click on it, it makes this area that says header stand out in a bright purple to me. And if I go to, sorry, this one and I click on it, the header looks like this and it doesn't stand out and the box outline is blue, which is fine. But they're sort of color coding this experience with this area. So that's a little bit different in our versions as well. These are subtle changes. So feedback there, I don't know if I like the settings changing, the settings button. So I might go in and add like, oh, oh, the settings. Now I cheated slightly because I have run through this dry run one time before I present. So to me, I wasn't terribly surprised by that, but oh, the settings button icon has changed. I like the former one better as it is more standard across the internet, internet to represent settings. If this doesn't bother you, that's fine, you know, right? But you write down your feedback. That's the idea there is, oh, this is my feedback for this. So that's the very beginning impressions. Let's see where we are with the next set of direction. The direction there was go through the templates and template parts, view the different parts of your site, select your home template and choose an option to edit. Notice that your previously created menu was automatically imported. So this you- So before we dive into that, I wanna notice two things that I think are really interesting. The first thing is that it's okay to deviate a little bit from these instructions. I think the number one thing that I'm getting from this is, hey, I just wanna notice what's different and it doesn't necessarily have to correlate exactly to these instructions. So if you see something that you like, that you don't like, if you see something that is just different or doesn't work and it doesn't correlate to the instructions, it's worth writing that down too. So that's the first takeaway that I had from what you just said. And the second takeaway was that how I feel as I do this is just as relevant. I like the settings button, I don't like the new settings button. That is valuable feedback. You're not necessarily just looking for glitches in the WordPress matrix, which is part of this. It's also how you feel as a user because how you feel is how somebody else will also feel. So communicating that, communicating your preference is a way that you can shape WordPress going forward. Absolutely, yes. Absolutely, yes. Well, thank you. Cool, thank you. Yeah, okay, so we're going to edit our home template and choose notice that the menu had changed. So different template parts and then I'm looking at the next few steps so that I know where I'm headed to while I'm editing. Use list view, select footer and delete a footer. Okay, so we'll do that. So I can edit various parts of this experience. This is telling me to edit something on the home area. So I might want to switch the width or change the query block, the query loop block, sorry, I can make it the query loop block there. And then we still don't have widgets in here. Maybe I want to, I don't know, shrink some space. I could add some things if I felt like it. But now I'm going to turn on list view. List view is this staircase-like icon that is in the top area. And the list view gives us an outline version of our webpage. It helps us to see where in the site that we are. These options collapse and expand. And again, notice the purple coloring that's there. I think that it's fine. I'm not an accessibility tester. So I might ask the question, have we, have we factored, because I don't know if this is true or not. I could probably do some digging, but most people may not know this. Have we factored in color, contrast, accessibility needs for the list view, right? Cause I don't know if that version of purple is, I'm not sure. I just want to be thoughtful of those that do know and care, where it might make an impact for them. So this list view turns on and off and I could see this outline and testing. I could collapse and expand things, but it tells us in the footer, am I deleting the whole footer or am I just deleting their content? Step nine, select the footer template part and delete it. This is a template part. That's why it's listed as having that purple on it. And it is bright purple also when I select it. Compared to before, that would have looked like this previously, right? So it didn't necessarily jump out. It kind of gave me a visual indicator. I do like that it nodded to header or footer in what was dark versus just some diamonds. Maybe I might suggest that we use colors but use the same icons as the last version. I liked the header, footer, template part icon, but would enjoy the color use in list view for those. Yeah, so, all right, so I'm just gonna delete this one. This is what it tells me to do, remove it, gone. I'll select the last block that I've got and hit enter after it. So I just get a paragraph block because we have to put something there now. And to add a new template part block, give it a name related to footer and choose the option to start blank. Okay, so here are a few ways to do this one. Template part. And then we just add it in or you could do the slash and start typing template part. So let me show us that again. I'll delete that one. Let's get to, sorry folks, column, enter. I want to enter in a paragraph after that. The other way to do this is you can, from an empty paragraph block, you could also do a slash and then template part to add it in. Either option works. You can have a paragraph block and hit the plus icon. You can do the slash to add in a template part, whichever way you prefer. Open the block settings and expand the advanced section. Import widget area, open block settings. So our block settings, let's close up list view because now we're going to open our block settings here. Let's see, that's settings. So we have to show the settings area. It's interesting. I'm thinking about the icon choices. And again, liking that I enjoyed the header and the footer icon choices. I now am thinking, oh, so list view is the stack staircase. And what they're using now for the settings icon is basically indicating reveal a panel coming in from the right of my screen. Would that mean that the list view should be a panel coming in from the left? Little nuances, right? So I might go back and revise this. On the settings button, we don't use a reverse image for the list view that represents a panel appearing from the left. Yeah. So that's just one of those subtle notices that's there. Okay, so we have the template part and I'm noticing the block that is settings. So that's part of the test is, oh yeah, they changed the button that represents settings. And in this area, we are to block template part. Oh, I'm supposed to choose blank, right? There is that. In my template part, I'm going to select blank, give it a name like new footer because that's what all devs and designers do. So you can call it whatever you want to call it. If you want to call it footer and it lets you call it footer, that's fine. So it's just an empty template part now. So when I select it and I go to directions, tell me, open the block settings, expand the advanced section under import widget area, select the widgets. So I go to advanced and because I've now given it a name and it's blank, I have a way to import the widgets. And it's going to ask, what widget area did you have previously? In our old version, before we changed our theme, it was called footer in the widget area. So I'll select that and hit import. I'm pausing for just a moment in case anyone wants me to show you that slowly again. I added a template part area and I selected blank. And the top right, I've selected settings. And in the settings, I expanded advanced. And in the widget area, import widget area, I could select footer, hit import. And there's our footer from our previous site. Now this is slightly nonsensical because it just lists it as a column, one single column. And before it was like three columns. So we would have some work to do to make that actually happen, right? So what we would probably want to do is in this, we might, we see that we've got groups, but we might actually want to put in before the group. I might want to put in, I'll do this. I'll make the column here. You could see how I'm doing it in list view. Slash columns and pick three. And then what I would do is drag my groups into each of those columns, right? So that would go here and that would go here. And so now I've got things in columns at least and you could continue refining from there, but that brings my widgets in. So if you're converting from a classic theme over to a block theme, we have an easier way to do that. And we also saw that the navigation menu came over. And when I select that navigation area, let's kind of poke at that a little and see. Let me see if that's, I think, yeah, customize further. We did some of that using group row stack. Okay, I'll slow down. Before I go to navigation, group row and stack. What these are is I've got these columns set up and I could have done it as group row and stack or I could do it as columns. You have multiple choices there. So in our widget area, I just did it as columns. We'll just say that that's, it's okay to do it in a couple of ways. What I could have done if I didn't want to use columns, I could show you this in a couple of ways. Columns would be my go-to because I know that I can sort of control where the breaks happen to be, but I'm taking the columns away. I'm just gonna show a group. Let's do this group, put them back. So we have a couple of options for how we might organize these, right? So I did it by columns because it's kind of what I'm familiar and used to. Remove the columns. One of these groups has a group inside of it. Let's pull that back out. All right, there, ooh. All right, well, here we go. So in my widget footer area, what I can do is there are ways in here to, wow, this might be kind of a tricky one for me to think about. If here are, right, here's inside of the group. We have row and stack. So if I said row, it will organize things by row. And so I might want to, it changes my group to a row. And so what this does is, if you are familiar as a dev with different types of wrapping, wrapping your text around, I think like an Excel spreadsheet wraps the text in a cell. Or if you are a dev and you're familiar with, I want to use flex wrap or I want to use a different style of wrapping here. There are different ways to do this. By setting it as a row, it lays out the content of that as a row. If I were to switch this over to a stack, that would list things vertically. And if I just have it as a group, it just does whatever the main container had been doing previously. So you can organize things in those ways. I still like my columns. Like my columns. So there's a couple of ways to do that. Sarah, I'm seeing some comments there. I'm saying that you were saying that you were padding around the widgets. Weren't quite where you expected them as well. Yeah. Yeah, I just spread out all the way across the screen and the rest of the site has decent padding. So I'm like, how do we match? Is it possible? I don't know. Right. So yeah, for that, at that point, let's actually, let's kind of chase that idea down a little bit. So you're saying that like maybe you want, can you show me briefly what your padding was looking like? And we'll see if we can take a peek at that. Okay. It's all right. Don't mean to throw you too quickly. So you can tell these are kind of, you can be laid back when you're running through these tests and just take some time with it. While Sarah is looking for that, where I would go with it. It dropped an image there. So you can kind of see that. Okay. That's what you were hoping for. Yeah. Yeah. So okay, yeah. You can just see how it's just woosh across the screen where it was above. It was not like that. So columns sort of make quick work of adopting the same padding that you were having, which is the space around the outside between padding would be from the blue line in and margins would be from the blue line out. So what Sarah would want is to have some space inside the box like we see up here under the word got. So we see that there is a little bit of space from the edge of the screen to where the word got begins. In that earlier example here, it would be like, oh, my calendar should probably start kind of lined up with whatever the things above it do. It does line up with the word got, but these things are like, not where I would want them to be either. Yeah. Yeah. And that's in my case, it's because I have a group inside of a group. So we'll just knock that out. So there we move that, that does line up. However, if I wanted this on the same line as the other thing, our paddings and our margins, we would see by selecting the item and on the right hand side, we see these. These have changed slightly and we're press six one. We started seeing these roll out. The more specific controls around padding and margin, you could still get to the slider option and use Ms, REMs, VWs, VHs, except percentages, et cetera. Lots of ways to measure in web design. So when you are in any one of these blocks now, when you have the styles area displaying settings here, I'm sorry, the settings area displaying on the right side. What we see is that what is in the styles versus the settings has shifted. So this says settings and this says settings and they're different icons. I like this icon up there. This is all the styles that looks like this icon. Why are we not using, if we're still using this, why are we not also using that? Good question. So I would go through, they've divided what styles versus settings into kind of some tabs here on the side. That's again, a new feature since six one came out and you could go through and check into your padding and spacing from those things in that location. Yeah. So all of the little tweaks that you could get into and spend some time modifying are there. And once done, select the nav block and change some things as you see fit. All right. The nav block, gotta say, this is the one part of WordPress site editing that is maybe my most challenging. I wrote some of the original content that we have on learn around the nav block and left some feedback trying to be kind about that experience. So the nav block has been challenging. Many of us are familiar with the old versions in classic themes of how to make the navigation menu. Most of the block themes that are, I'm sorry, most of the things that you would get that are page builder like would still have you create those navigation menus using the old style of WordPress menus. And then your page builder theme would pick up on that. Whereas in site editing, we no longer have that old classic style of creating menus. I still remember when that style was new, oh gosh. So that was a great system, although we're still working on improving that and bringing it over into this block context. So to get here, I'm gonna collapse some stuff. I love, love, love the list view. It's my best friend, one of insight editor. Inside of this header at the top, we have the navigation area here or you can kind of get into it by scrolling about as you see, hold on, scrolling up. And I have to click a couple of times to get into that specific layer. I had to click into the header and I had to click into the nav block. So it's a few steps. And I could also get there with the navigation menus option that's showing here. So this is new in the top area. So I can select the navigation option there. So if I'm anywhere in my document and I select this, it's going to show me this on the right-hand side and it's a newer way of editing the navigation menu. I could also select into the block and modify it from there too. This is pointing out in the directions. You've got several options now for modifying your navigation menu. Also from the list view, you can drop and expand it and this looks pretty much like this. So we've got a couple of options. If we're editing it from here, one of the things that I still keep looking at is let's dismiss my zoom notifications. One, I'm looking here from the actual block. What do you notice besides having, I have a couple of browser extensions that are on my screen at the time that might get in our way of things like my Grammarly, sorry about that folks. But what else do you notice when I select, maybe I want to change getting started to just the word start. If I'm on this, maybe I want to get at whatever's under here. And that's still in the way. So I'm still seeing that my block items to get to a child menu. If I wanted to get into that child menu, I still have to do some weird contortions to get into that area, I would say. If I wanted to truly do it from the block editor, right? So if I was trying to get at something in there and get to this dropdown, there's still a block toolbar hovering over child items. So I'm going to make a couple of notes here. I'll pause for just a second and say, in the block editor, in the site editor, while accessing a child nav menu item, the parent block toolbar is in the way. Back to my settings icon. We are using the older settings icon in the new two tab approach beside styles. We kept the styles icon in both places the same. But did not keep the settings icon in both places the same. So this is my rough draft of my notes, right, folks? So I might come back and like add a picture to this, even. And that way when I go to note it that I can. So there, that's me catching up on taking some notes. But also if I wanted to modify some things, I could edit that in a couple of places. I could get the child item from here on the left-hand side under list view. So when I'm looking in list view, I can get into those child items and modify them that way. But still even selecting the child item, that parent toolbar is in my way. I could at least get to it more clearly without contorting, but it's still in my way a bit. I could also get over here on the right side and modify those things. So maybe I want to reword this from volunteer to let's see, what are my choices? Oh, you know, that's kind of interesting. When I'm on this, like if I select upcoming events, it's kind of weird. It seems like I'm, notice that I'm stuck kind of like, I can't, I am trying to select upcoming events from the right side and it's not doing that. See how volunteer is working and upcoming events isn't. If I tried to edit there, now it lets me, but I'm expecting that when I click on something that it's going to then jump me to the edit of that thing, I guess, that was a little tricky. Also these three dots, if your item has been edited to select, I feel like those three dots are cut off, like on the right side. It's very close on the right side there. So in here, I could get to some of my settings if I wanted to lock things or pastiles or any of these options or remove that navigation item, I could do that from there as well. So some improvements, adding. Oh, that was weird. If I go to add a child item from here, that does seem to still work. I mean, it was visible. So test, right? And then I'll just link it to something. Sure. There we go. So I added in an item. And did that add as. Transform to. Okay. That added in the way that it should, because it's just a page in the site. So I'm just preloading it in with something that was already created. So I'm starting to get some options that are showing up here. It's going to take me a little time to get used to this option. There was also another one that I remember. If we were to click on the, there used to be a version of. What we see on the right side that stock now for navigation menus, we could kind of get at that same thing within the nav bar. Within the navigation blocks block toolbar. That's a mouthful to say. There used to be a way to kind of see this, this thing on the right hand side for comparison. Old version of the navigation is here. I had to convert it to a regular thing. We don't have that going on anymore. Now I've got a regular menu. For navigation and in the old version. There was a. I thought there was like a dropdown extra thing in here to. Edit our menus. I could be mistaken. I thought there was like a list view of the menus from this version. Notice that the nav bar that the. That the block toolbar. Using the right terms is out of the way. In the current stable version. But in what we're seeing it's back in the way a bit. If I'm trying to get at the child items. So. We want that to be different. I'm going to take pictures of this actually, and I'll make sure that they get where they need to go. I'm going to take pictures of this. For the notes purposes, because that gets really frustrating on the setting of the. Navigation. We'll hit go up the line. And indent. So I'll say 6.1. Picture. Let's see if I could paste the picture in. Oh. You know what folks, I'm going to let you see that I'll do it with snag it. I'm going to do it with snag it. I'm going to do it with snag it. And I'll upload it in our comments and just a bit. So one thing that surprised me as you're doing this about. How you're testing is that not only are you using the test site that we have, but you're also comparing it to an active installation. Yeah. Point one. Right. So I think like, if I were to give feedback, like on the instructions, I might say, Hey, we might need two test sites. One that is not running. You know, Gutenberg and not run. Yeah. I think that's a good point. Yeah. I think that's a good point. Yeah. I think that's a good point. I'm going to pass the active stable version of WordPress to. Yeah. That because that is so valuable. I love that. Yeah. Because this could be, there's a term for it in the dev world, but it's a regression. And so like, I like that. I like the way that this. Gets out of the way when I'm trying to get to the child menu. And I, I, yeah, I'm just eager to get this thing. Like, let's move this back out of the way. So I'm taking screenshots so that I've got them and I will upload them. Sarah shared a link with me earlier to her droppler site. I've just got them on a screenshot program on my computer for now. I'll upload them somewhere as well that then when I'm leaving these comments, I can embed them into the comments as well like little links. Oh, right. So we poked at the navigation menu. And we did some things in the navigation menu. Save our changes. Adjust the spacing. Oh yeah. This is a thing. Adjust spacing between items customized mobile display as you see fit. So spacing between our, our things. I need to collapse this top right navigation and come back to the styles. But I don't want the global styles. I don't want the global styles. I don't want the global styles. I don't want the global styles. Oh, geez, Sarah, even someone that's experienced can mess up. I want the styles for this one block. I want just this one block styles. So as I'm looking at this. I actually legit had to stop myself like I was like, oh wait, no, not this navigation. Close that get out of the way. Not these styles. Although you might because that's part of the navigation overall, but maybe I just want to change them in this style. I need to select the block. Sorry about that, folks. We want the whole navigation and it wanted us to change the styles. Between it. Oh, look at that. Interesting. So I'm on navigation. On my list for you. I'm on styles. Or settings. Settings. I'm stumbling myself. And now I have list for you. Styles and settings within. Whatever we do for this should be consistent for this. I think we should stay the same. I think we should stay the same. Just, just Courtney's hot take, but we'll see what happens. So it wants me to change the spacing between them. So I have to go to. The styles. Here. And it says block spacing. And so you'll see that it's spacing out my menu a bit more. That looks a little bit much, but down in here might look kind of. Nice. Right. And I could change up my typography there. I don't know if I want that bigger than my title. So maybe we'll bring it back down. But you see that we can get to someone navigation. Styles. We had to have that block selected. That was the important part. And then this styles yet again. So we've kind of got three tabs here. So I'm going to hit save. And I've changed some of those. And it's asking, do you want to save all of this? Yes, I do want to save each of those areas. You don't have to save each of those areas. That's what you're doing. All right. So. Next up, open styles, browse styles. Open the style book. Okay. This is where we've got a new eye. We've got a new eye to work with. And so the style block can let us do style. Book. Sorry. Style book can let us do all sorts of things. We want what used to be, it was first introduced as global styles. Now it's just called styles. Not the styles of this. The entire site styles. It was called global styles. And I like that term still because it means it applies to everything everywhere. So I'm selecting the styles. And it will let us change lots of things. Under this browse styles. You'll see that we can change styles. You'll see that we can change styles. You'll see that we can change styles. You'll see that we can change styles. We can change lots of things under this browse styles. You'll see that we can change up our site colors into different theme variations and things. And that's fun. We've been able to do that for some time. But what we can also do. Is take a look with this one. I. And get a quick way of viewing. The headings altogether. Or viewing paragraph blocks or list blocks or how a quote appears. Or it's just a personal comment. Or a style icon. That we see. To get here. We're just under global styles. And we've selected this eye icon. The icon. And inside of this. You now see that you can. That icon is anywhere in global styles. This is the. This area is called the style book. And it's even labeled as such at the top. And it will give us a preview. So if I go into let's say typography and then headings and then from here the font, maybe I want to change my font. Right, so I could see all of my heading levels have just changed their font size. And that's what style block style book can do for us. I'm still working on that term. Style book can give us the changes for all of these areas. All in one nice quick view. This isn't content necessarily that's on my site. If I wanted to take a look at the text and change my text, I could do that. Here we go. So I've changed the text for my site. I could see all of my buttons in one view. So if I had inside of style, but meet, this is good to notice across the top of style, but we've got text media design widgets and themes. So I can see in my media area that this is where I could change how I could get previews of how images would display how audio might show up anything that sits inside of your media gallery. You could get a preview of how that looks on a site and this is preloaded. It's not really content. No one can navigate to this from the front of site. It's just there for the person that's doing design work to configure these settings and it gives you that preview of all of those assets. So under the design area, I see that I've got lots of demo buttons. And in those demo button areas, I can get in and say I would like to change. Oh, here's the thing. For that's the typography for the colors. If I wanted to change the colors of my buttons, I have to go into the area that is for colors. So here is back from the start on styles, go into colors. And then down below I see buttons. And if I wanted to change all of color of all of my buttons to maybe this for some reason I could get in and change that from that location. Okay, so we're seeing that we've got a preview of things using style book. This is a big feature just to have this. I think it's a good feature when people are picking out what they're doing in things I think it's going to be a good feature from that side of it to taking a look at after selecting the style variation, which I did head back to the interface select colors, randomize color. Let's see what that does. Randomize color. I feel like under colors, this palette area you see this button that says randomize color. I feel like I'm about to my desk I've got some some dice that a friend of mine has made actually. And I feel like when I see randomized colors, it's literally like I'm gonna roll the dice and see what happens right like, let's just hit randomize and see what we get for our site colors. I'm going to hit randomize and oh it's changing the color palette. Fascinating. Notice it it's not changing my buttons color palette though, because I customize that. So if I go back into this and I turn off luminous vivid orange and I let it go back to whatever primary is right now and I select. Randomize colors. Let's see what happens. Oh, we're seeing some things. Some of these don't look at that great. The font versus the button color. I can't read the text. So, let's go to their same as good widgets. I'm just going to do a quick test and see. I get out of style book and I randomized colors. Okay, when I'm in style book, I can notice them maybe a little better when I'm out of style book and I randomized my colors I might not notice it as much until I'm scrolling on through my site like look at that button. When I mouse over it it has the right mouse over color contrast but when I'm regularly on it. That's dark button color dark text. I'm not sure that I like that. So randomized color will give you random colors. I think the color palettes that it's choosing are not themselves in conflict with each other like I'm not seeing a hideous palette as I keep clicking this random. But what I am noticing is that maybe we do need to do some work on accessibility there. Randomize colors isn't working at all. Oh, that's a good one to take note of. So, I'm going to put in like, so I remember to do that and then randomized colors. Randomize colors had some button color contrast issues. And then we create rules, rules that test or contrast that meets accessibility. I'm going to list this more quickly when in storybook. I don't know for capitalizing storybook. I think so when in storybook button view versus editing home page template. It's only when you're on the default palette. Yeah, on the default palette if I switch to default it won't randomize. That's interesting. Yeah, okay. That's really good feedback to make sure that we note Sarah for sure. All right. After experiencing and exploring that head back to the main styles interface and select blocks from there choose a block with a style variation such as button singular not plural, or social icons or site logo. You can then add that variation to your liking globally. Okay, so after exploring all of that, go to the main styles interface and select blocks. Let's follow directions here. So I would be modifying styles blocks blocks are down here this is to modify very specific blocks not. So I would be modifying a single block layout from this, and it said to select something like button singular or social icons. So I'll select button singular. And it says style variations down below that's interesting I think that's new. That's a variation to your liking. Okay, so here I am going into color. And on the buttons, I'm going to pick something actually you know what I'm going to do, I'm going to go into. Is it inside of text of button and say white. Or I can make that like this yellow maybe or you know you can pick some colors from there. That color contrast looks pretty good on the text. And, yeah. Now what's it do on mouse over on mouse over that wouldn't be particularly accessible so then on mouse over but I have a way on mouse over to like, reverse the text on mouse over because in code I can write on mouse over text is black, whatever. But I don't have an option like that here so that's something to note. I create a text color on mouse over. As I see button background color has options for mouse over. I need this for color contrast. Sometimes I give these links over to Anne as well and kind of timestamp things, and I probably will do that as well for her on this one. Once it hits YouTube, I will go in and grab some chapter markings and append that information, so that she can jump around and actually watch what we've just done there so there's that. Now that you've explored. Okay, so I've done that edit a variation and the important part is when I am done here. And that color. Yeah, I'm going to save it. Save. Okay. And using color randomizer use six experience which appreciate further open some template single search at an individual block on that template like featured image. And this is the thing we're going to look at next is push changes to global styles. So we're getting close to the end of this test so this is go back to your templates look at all templates. So here's my all templates. I'm actually going to go to my 404 page and customize something there because I think it's fun to do. My 404 page is where people land when they don't find what they were looking for and it's usually just a big search box. So I'm coming in to edit this and I forget now Sarah that I can't just click into it I have to hit edit up here. I can't just click on it accidentally. That can be a good thing. So that's kind of that animation though of like, whoop. I kind of like that I think it's moving slow enough for accessibility needs but again, if a user has turned off in their own computer settings to reduce motion. I hope this follows that. That would be something that's worth worth investigating is does the motion into editing templates adhere to, I'll say untested. If a computer in reduced motion motion mode handle the transition from view all templates to edit appropriately appropriately right accessibility thing. Okay, so we want to go into a single one edit something and select advanced so I'm going to edit edit the single block for a paragraph on this page, probably nothing you would ever do in real life but in this case I'm going to go pick some font that's clearly not like the rest of my site. Just for fun. And let's pretend that I'm wildly in love with source serif pro. Save. Okay, so that didn't do it there. What I am looking for is after edit open settings expand advanced. That's what I need settings. So hard time thinking of this is settings. I had just changed it in styles and what she's asking me to just change it in settings. Those are little details in this testing that's always kind of interesting. Okay, so here I'm going to switch. Not the color of my text. I want to go change the typography sure we'll make this text extra large. Wamp Wamp could not find okay so I changed something. I can go to the settings of the settings and hit advanced. And I can choose to apply globally. What that's going to do if I were to select that right now is push that font size to my entire site. So as a for instance and knowing this is at the end of the test and things will delete in 24 hours, where I was just editing was on this page 404. Oh no page could not be found. So if I were to make this big set of font. Want to display it like this like you could see this doesn't see the change yet. I've just made the text here of this paragraph block from settings. And then went to that specific block settings expanded advanced right now apply globally. Whoa, all paragraph blocks have now upgraded their font size to my new and approved for your vision needs but I'm not seeing that actually out there on the and I did apply globally. It changed it in the editor but it didn't change it on the save save that's what I had to do yet probably was it made the change in the editor but I still hadn't saved it to go out for the whole site. So now I see my site is great for those that need enlarged text. Wow. So you can see from this area that you can apply globally again as a reminder folks that can get to this editing experience that we're in right now the site editor are only those that have the admin permissions so somebody that's only got a contributor or an editor can't get into site editor they can only edit other people's posts. So you're still a little restricted and who can apply those changes. Do we like that we can push changes by modifying a single block here out to the whole site. And do we like that it says apply globally but we've dropped the term global styles from this thing. Thoughts, I don't know that those are right or wrong but it's just one of those nuances of how we word the things. I'm not opposed to having it there because in theory the people that should be able to access this are still the administrators of that have admin permissions on the site. I think it's pretty clear what it means but I think that apply globally do we want to apply globally do we want to call something apply globally. So you want to use the term global styles, especially as we now see styles appearing within lock settings as well. Yeah, so that's something to sort of nuances of wording things there. Save changes repeat the process a few times until you have time across templates and different blocks, relying on style book or browse mode as needed to get a larger sense, try to make your site look different. I feel like we've done a good bit of that I'm going to jump back up to some of these other like, have we tested these couple of things that were introduced earlier. Naming is changing fast Rami says yeah I can I can feel that too. I feel that too, where we're, we're naming things and then renaming them but then introducing that naming again potentially somewhere else and yes reorganizing the site editor into browse mode okay so browse mode, browse mode. I feel like if anyone's watched bluey there's an episode of bluey called dance mode. I'm trying to remember how we got to the browse mode there was a like up down toggle that was here in an earlier like a. I'm looking at introducing that into six one and it didn't ship. There was like an up and down toggle that would be here that would give you kind of a higher view like sort of like list view but for your whole site and and we're not seeing that there. So we don't have that thing that we tested two calls for testing ago can tell when I've done these a couple times. So, into browse mode GitHub. Let's take a look at the GitHub issue and see what that says. This is what it's supposed to look like. Yeah, and if I'm there. Okay, so it's showing me jumped to things from the top that's fine. There was kind of this like, once we're in an editing a template there was like an up and down icon thing that we tried out to that sort of let your rearrange whole sections. Small triangle I saw that in the top right in the top area. Good to know thank you for that and do you know which one let's go in and hit, I'll hit edit on home. We are in home. Yeah, so we've got this like triangle here. Text in the 404 pages adjacent to the search box that needs padding. Yeah, if we were actually going to finish tweaking the site further yeah we will probably want to get in to tweak some of that john. So and I do see this drop down but there for a little while we were testing a feature that had to the right of list view had some up and down carrots as well and I don't know if you've seen those. I think that was in two calls for testing ago and that feature didn't ship in six one, and I'm not seeing it yet as of this environment 462. New UX for the nav block we poked at the nav block a lot block split between settings and appearance yeah I offered my feedback about what we're calling them, like what that button should look like, offer a way to view a document containing all blocks and styles that style book and color randomizer result. Yeah. So I think that we the triangle just clicked on yeah so there was one that we were testing a little while ago. And so we we don't have that all the way done yet. I what I usually do is I give my initial feedback here while we're on the testing call. I will drop in my text into this and then also a little hidden thing is that. So I've got nine comments coming from this one. And Sarah, I would encourage you to put in a few others. So, in the site editor tool. I'll put in image as a placeholder, because our goal is not only that we have all tested this together, but that every person has an opportunity should they want to do so to go leave the comment. So I'm going to show you what it looks like and then I will spend a smidge more time refining my comment after we are done with our hangout time. So I will copy all of this. What I have just done for those that are kind of watching along. What I just did is I wrote out a post in a WordPress site. And I went to the top right area that says code editor under our options. And I highlighted all of this code. And now I could take it back to here and paste in and say, learn WP test called 20. Right. And I might make that like make that bold. It gets it. And then there's our list. And then what I will do as we discuss and or and I could hit preview in here right. And then what I'll do is I'll show you all the preview version and then after I've had a chance to upload those couple of screenshots that I manually took with my software to some location so I can put the link in here I will append those links. So you see, oh yeah, look, all of the things that you just said are right here and you can kind of keep editing this layout and view of of even your comment. I strongly encourage folks leave your feedback of whatever you experienced, especially if it differs from what I experienced. We want more people to just provide that feedback. The developers actually come through and they, they catch the information that's put here and or and we'll go to them and say here's an issue. And here's where that came up and sometimes by having it on recording like you've seen today. They have something to watch and look over for that as well. But certainly your comments, especially high priority there. Yeah, yeah, I just I know for myself, like I feel a lot of anxiety posting there because like I'm testing out this this color thing that I'm finding and I'm like, is this a feature or is it a bug and the more I'm playing with that I'm like okay well it's only the button one that is changing. Was that intentional, I don't know. So I think what I'm going to do is just ask feature. This is yeah notice and if it is not intentional great I helped and if it was intentional. It's okay too. Yeah. Yeah, not me right. Exactly, exactly. Cool. Yeah. Shouldn't we include our operating system and you can certainly include that if you would like you could say I'm on whatever version I'm on. Although, often if you're just clicking through the Insta WP link. I think that they're expecting that to be the standard test environment. And here is the operating system version browser version if you would like to do so. A lot of people when they do that will also just say I'm on the most the absolute latest version of Mac and the absolute latest version of Google and the devs can match up the time. If they really need to get super thorough. I would also be interested to hear sometimes we have some contributors that come in over mobile view. I would love to hear what the mobile experiences like I would also like to know I do not use any version WordPress that is in a right to left language. I don't know if any of our site editor experience how that works in a right to left language. If anything is reversed or not. Just curious. Just curious. Any other thoughts questions today folks. Gonna give us just a few moments there but while I do. It's not optimal for right to left Romney thank you for being with us and helping confirm that. I'm guessing the panels are still in the same locations, but that the language then starts on the, the. Yeah, this is doing a number of my brain to mirror it. I need to learn so much about languages and cultures and other things but yeah. So Romney maybe any of your feedback about particular spots where some of the things would work better in RTL environments that would be really helpful to before we adjourn for today. Thank you all for being with us Sarah thank you for helping co host and triage and questions. I do want to make a big call out. We would like some help from all of you. We have a survey about how folks learn WordPress. This survey is available at the top of learn dot WordPress that work you see it on my screen right now. The team as a whole is beginning the process of creating a formalized needs analysis reaching out to employers, small business owners, large business owners, everybody in between all the job roles, all around the globe because we all care about WordPress. And asking what are your training needs as it relates to WordPress to get that ball rolling we want to learn from a couple of people first. What do you do with WordPress. How did you learn it. What resources what learning styles Sarah and I are both former public school teachers in America. We think a lot about some people learn by reading a book. Other people learn by coming to a zoom session like this. Some people learn by interacting and talking and doing the things and others just give me the docs in the manual and that's good. Some want video or audio. There are lots of ways that people prefer to learn. So we would like to know based upon what our audience knows about WordPress. How did you learn it. How did you figure out what to learn next. What learning styles. Do you like what kind of job do you do just some of the basics so that we've got some beginning questions towards a wider outreach for that needs analysis. This survey will be closing in the middle of February, I believe it closes right around the time that word camp Asia starts. So I would love to get some of that feedback right in there. It's good. And if you've got any when you click through on that survey, it does give you a link this is embedded on a page instead of learn. If you're trying to take it on a mobile device to click the additional step, the additional link that's there. The additional link takes you to a more mobile optimized version of completing the same form. So either of those would work. Any other thoughts or questions today Sarah. No, very cool. Well, I think we can end record here. Thank you all for joining us today. Thank you.