 All right, welcome everybody. As mentioned, our focus for today is the navigation block. And as you will notice, in my first slide, I actually have the header for the WordPress.org website and you will notice at the top, it looks like a roadblock with the logo on the left and a search block on the right. And then below that, it looks like another roadblock with your navigation menu on the left and a call to action button on the right. But I thought let's first define what the navigation block is. So the navigation block is an advanced block that enables you to edit your site's menu, both in terms of structure and design. And of course, if you are used to a classic theme, you would find using a block theme quite liberating because you have so much power in your hands to change and edit and modify the navigation menu as you please. So what are the benefits of using the navigation block? Well, there's quite a few benefits. So number one, the navigation block has a responsive menu. It's got built-in keyboard accessibility. You have control over design aspects. You've got the ability to add more blocks. You can add and style sub-menu items. You can create draft pages in the navigation block and you also have the ability to use it across themes. So let me just go through these one by one because I've just kind of read through them quite quickly but let's talk about it one by one and make sure that we understand what each of them actually mean. So the first one, responsive menu options. So if you are on a desktop, you will notice the normal navigation menu that you always see. But at the bottom, you've got an example of the responsive hamburger menu. So when the site is being viewed on a tablet or mobile device, it will automatically show you the hamburger menu built-in keyboard accessibility. So of course, when you create your navigation menu in the navigation block, you can type in the page that you're looking for or the page that you wanna create and all of that can be done within your navigation block. And of course, you've got control over design aspects. So in your sidebar settings on the right, you will be able to change the text color, the background color of your navigation block, even your sub-menus. You have a lot of typography options, font sizes, letter spacing, et cetera and we'll dig into these a bit more as we continue, but you also have options, dimension options as well. As you can see, you can change the block spacing between different navigation items. And then the wonderful thing is you've got the ability to add more blocks. So you can add your pages and you can add other links to your navigation block, but you also have the option to add other blocks within your navigation block. So once you add your first block and you click on the insert tag gain, you will notice that when you click on browse all, you will see all the different blocks that you can add to your navigation block. And then you can add and style sub-menu items. So in this example, you'll notice that I've added and some sub-menu items to services and you can even add sub-menus as you please. So you can build it out. You can have sub-menu for copywriting and then you can have another sub-menu for that sub-menu, et cetera. And we'll create one later in the workshop as well. All right, and you can create draft pages in the navigation block. So let's say, for example, you wanted to create a portfolio page but you haven't created it but you're in your navigation block and you can actually type in portfolio. That's the built-in keyboard accessibility, right? So you type in portfolio because that's the navigation item that you want to create. And then although it's not created yet, you can click here on create draft page and you will have a draft page that you can then edit later and add content to that page that you actually created in your navigation block. And the last one, and the last benefit that we want to chat about is you also have the ability to use the navigation block or your navigation menus across themes. So if you are using a specific block theme and you're using a new block theme, you will have all the navigation menus available on the new theme that you're using. And you can even use navigation menus from your classic theme in a block theme, not vice versa. So you won't be able to go back to a classic theme with your navigation menus that you created in a block theme but you will be able to import them from a classic theme. So that is also a great benefit. All right, so before I look at some examples, I just wanted to check. There's a question from Sandra about how many levels are possible. I think you can keep going, Sandra. You can go as far as you like. I'm unsure how many but we can test that out a bit later when I show you how to create a sub menu and a sub sub menu. All right, so I wanted to look at a few examples. Just some websites, some headers and footers from websites to see how they have used the navigation block. So in this example, you will notice that the navigation block is kind of in the middle and you've got a search block there and all the navigation items are in capital letters. And on the same website, let's look at their footer. Now you will notice on the left, a navigation block has been added to display these navigation items and then a second navigation block has been used to display the popular navigation items. So please also remember that the navigation block is not just for the header. We will of course use it in the footer just as much. Now on this website, you will notice at the top, there's a navigation block at the top where you can order now, you can look at careers and you can read about the blog and then below that they've added another navigation block on the right, also in capital letters, home, our menu, partnership, our store and contact us. Now here we have another great example of a footer and as you will notice, they've actually added quite a lot of links to navigation items for people in the footer. Now of course, it's really important to use your footer because a lot of times you don't want people to have to scroll up but here people can actually quickly go where they want to go on the website. Now in this example, we actually have some navigation items here. We've got social links and then a search block and then you can even change the language and on the same website, this is how they've used the navigation block in their footer. They've actually used four different navigation blocks and of course the way to achieve this is just by adding four different columns and in each column you will have a navigation block and you will select a vertical display of your navigation items. All right, so the last example, you've got your logo and your navigation items and then of course your search block and your social icons. All right, so we've looked at some examples so let's jump into my test website and see how the navigation block works. Now that we've kind of looked at the benefits and we've looked at some examples. All right, I am in my test website and I'm gonna make my way to the editor because I'm using a block theme. You of course need to use a block theme to access your site editor so that you can use the navigation block there in your templates. So we're gonna make our way to the editor, the site editor and you will notice that I have a homepage template here that displays my recent posts but of course our focus is not on our posts, our focus is on the navigation items. So first things first, you can of course select your header in the site editor in your template but for today's purpose we are actually going to go to the template part, template editing mode so that we can actually just focus on the template part. So this is a header template part and this at the bottom is your footer template part. So for now we actually want to click on the site icon or the WordPress icon and we are gonna make our way to template parts and I've got a custom template part that I've created for today's purpose. So I'm gonna click on example and as you will notice here I've added, let's open our list view, I've added a navigation block and I've changed the justification to write. So the first thing I wanna talk about is actually using, selecting and managing your navigation block. So the great thing is the menu control has actually been moved to the block sidebar as you can see here and that makes it easy to see which navigation menu is currently active. Now usually when you add a navigation block the most recent one that you worked on will appear. So at the moment we are using the header navigation five. So if you click on the menu control, yeah, the dropdown, you will be able to see all the different navigation menus that I have and I can then use a different navigation menu if I want to. So I can for example click on header navigation four or header navigation but as you notice I wanted to use header navigation five and if you are, if you wanna click on create new menu, so for example, let's say you don't want to use one of these navigation menus, you can say create new menu and you can literally start from scratch and you click on the inserter and now you can start building and say, okay, I want my home page and then you click on the insert again and you say let's add my resources page and let's add a contact page. Okay, now you wanna click on select navigation and now you will notice that this navigation menu is called navigation and if you want to manage your navigation menus, you can click on manage menus and you can actually go and you can change the name of your menu and you can manage your menus there. So let's do that for now. So I just wanna click save first. You'll notice I've actually saved the team, I'm saving the template part and I'm saving the navigation menu. So let's click save and now we can click on manage menus and here you will see all the navigation menus that you have and now for example, I can let's say quick edit this and say the new one that I've created is online workshop menu and I can update that and now if I click back, right? If I click back and I click on the navigation menu there, let's just refresh and see what happens. There we go. So once you click on refresh, you will now notice that that's the one that I've just renamed online workshop menu and of course you can choose a different menu there. All right, any questions before I move on? The one important thing that I wanted to discuss was the parent and child relationship between the navigation block and your individual navigation menu items. So if I click on home, you will notice now in the list view, I'm on the home item or link and the sidebar settings of course, relate to this page link and if I click on resources, you will notice now that the sidebar settings relates to this page link, to the resources page and these are the child links or the child blocks and if you want to ensure that you select the parent block, you've got to click on select navigation on this icon or of course, if you are on the homepage, you can use the list view and you can select the navigation block, the parent block and now of course, all the sidebar settings will relate to the navigation block and not the page links. So I just wanted to highlight that, that is quite important to understand. All right, I see a question and is it possible to create only headlines? For example, second level of navigation? Yes, well, you can just add, if I understand your question correct, Sandra, I assume you can just add another navigation block below the top one and then add the links there. All right, so now let's chat about managing your navigation menu. So I've selected the parent block, right? And Sandra, please let me know if I misunderstood your question maybe it's something you can try out. But yeah, so I've selected my parent block and now we can talk about the sidebar settings. So first of all, let's talk about justification. Now at the moment, I've selected to justify my items to the right. You can of course justify to the middle or change the alignment to the left and there's also an option to add space between items. Now of course, if I say right, you will notice there's some more space between. All right, so those are some options for justification and you can also change the orientation of your navigation menu. And this is something that I wanted to highlight for. So let's click on the WordPress website if you go down to the bottom, right, sorry. You will notice that I've actually changed the orientation to vertical and that's how you do it. So if I go back here, you can change the orientation to vertical or to horizontal. Now you also have an option to toggle on and off allowed to wrap to multiple lines. So sometimes it will, if this is selected and you've got quite a few things in your navigation menu, it will go over into a new line. And if you toggle it off, you will make sure that it can't happen. Okay, now we have spoken about the responsive menu. So I've also showed you an example when you spoke about the benefits. So at the moment, I've selected mobile. So that means that when somebody visits my website and they're on mobile, the hamburger menu will display the one year, right? So let's see that in action. So I'm just gonna go to the front end of my website. Let me just go here, the front end of my website. I'm going to right click, I'm going to click on inspect and here I'm going to toggle to a different device. So if I click on there, you will notice what my navigation menu will look like on a mobile device or on a tablet. So there's the responsive and hamburger menu. So if I click on the hamburger menu, my navigation menu will open up and of course I can close it. Now at the moment, you've got the two lines, but if I click on there, you actually have an option to select a different icon. So let's say you want the three lines, you can select that. Now I've heard that in the future, you might even have the option to have custom icons but we are not there yet, but you can of course change this if you would like to. So let's just click on there. Now you also have the option to say always. So let's say you always want to see a hamburger menu, you can do that. So then you'll have a hamburger menu on a desktop or on a mobile device, but I think it's probably better to select the mobile option depending on your needs. Now you also have the option to change the color of the text of your navigation menu. So let's just reset all. You can change the text color, you can change the background, you can even change the the text of your sub menu and the background of your sub menu. And I'll show you that when we create a sub menu now. Okay, so that's getting into the fact that you can actually customize the design. And then typography. Now if you click on the three vertical dots, you will actually be able to see all the different options, the typography options. At the moment they are not being displayed, you'll see there's no techniques there. So let's say we want to change the font family. Now there you will notice the font appears. Let's also change the appearance. So if I click appearance, there's a tick, sorry. And then also let's say letter spacing. So now if I go out, you will notice font appearance, letter spacing. So if you would like to see the topography, remember to select it in the list. All right, so here you can change the font of your navigation block or your navigation menu, the size, the appearance, and even the letter spacing between letters. So I've changed it to three pixels there, you can change it to five even. All right, and then at the bottom, this, the letter spacing is of course the space between letters and the block spacing is the space between the navigation links. So let me just select the parent block again, scroll down. And now if I enlarge the block spacing, you will notice that is of course the space between your navigation items that you can change. All right, so there's a lot of things that you can play around with to modify your navigation menu. Okay, so I've shown you how to manage your menu and to select between menus. And I've also looked at all the different options in your sidebar settings for your block. Let's also just for a moment talk about going from a classic theme to a block theme. So I actually have a different test website that I wanted to show you because I've used the classic theme on this website and then I actually installed a block theme. So if I open my list view and I select my navigation menu and I open up my sidebar settings and I click on the dropdown for menus, you will notice here is all my different navigation menus I can choose from and then you will be able to see an import classic menus. So this is a menu that I had when I still use the classic theme which you can also use. So I just wanted to clarify that. Okay, so now let's actually choose a different, I'm gonna start blank and show you some other options you have with the navigation menu or the navigation block. So I'm gonna say create a new menu. So the reason I wanna do this, I wanna show you that you can add way more than just the page. You can add a page link, you can add a post link, you can add a category link, you can add a tags link, you can even add a link to an external website. You can also add a different block as we discussed and one of the benefits of using the navigation block. So I thought let's create a menu and I'll show you how all of this works. So first off, let's add a page link. So let's just go ahead and add our homepage. So at the moment you will notice that it says page next to it. So that means there is a page that I've already created called home. So I can add the homepage. All right, now I actually wrote a post and it was about the mission of our business and you can actually add a link to that post. So now if you notice the tag is post. So now I can add a post link. The next one that I said we can add a category link. So of course I created some categories and tags for my posts. So one of the categories that I created was tick. And now you will notice the category, it's got the category tag. So I can add a link to category and I added a tag and I called it research. And then you will notice it says tag and I can add a tag link. I also see you can add a link to an external website. So let's for example, select the WordPress.org website. I'm just gonna copy the URL, right? I'm gonna make my way back here. I'm going to click on the insertter and then I'm just gonna paste the URL in the search block. So I'm just gonna type it there, right? I'm gonna say, I wanna open it up in a new tab and then I'm going to submit. So now it actually takes us to WordPress.org. But let's say you don't want it to say WordPress.org. Maybe we only wanted to say, let's for example, say WP. I've added a link to an external website. So if you click on WP now and you click on link, you will notice it does have the URL. Another option of course, is to add a draft page. So I'm adding a lot of things here. So let's make sure we select up here in block. Okay, so now let's just look here in our list view. We've got a page link. We've got a post link. We have a category link, a tag link and then also an external link to a different website. So let's say for example, I want to create a new page and I'm going to call it portfolio, right? That was the one that I actually showed in my example. And as you can see, there's not a page called portfolio. Oops, maybe I'm a spell that correctly. Portfolio, sorry. So I want to create a page called portfolio, but I haven't created the page, but I want to add it to my navigation menu. So what you can do now is you can say, create draft page. So I'm going to click on the plus there. And now you will notice it says portfolio and in brackets, I'm going to click on the plus there. It says draft, okay? So we can come back to that now. So let's just make sure we select our parent block, click save, okay? Now I'm going to go back to my dashboard because I want to go add some content to my draft page and show you where it is. So I'm going to go back to my dashboard. I'm going to click on pages and now you will notice it says portfolio and it says draft. And now we can of course open that page. We can add our content. Now once we add our content and we publish, you will notice that the draft in brackets on your navigation block will disappear. So I'm going to click publish, right? And then I'm going to make my way back to the site editor. I'm going to open up my example template part again. And now you will see that the draft in between the brackets disappeared. All right, so let's just show you how you can also add blocks. You can add other blocks to your navigation menu. So if you click on the insertter, so if you want to start adding blocks, the first thing you have to do is select one of these blocks below transform. So for our example today, I'm going to add a search block. So let's add a search block, okay? Now there's some different options here. So let's change the button position. For example, we can say no button. You can add a label. Okay, so let's say button inside. Now of course you can now add more blocks. So once you've added your first block, if you select your navigation block again and you click on the insertter now, you will actually not see the other option to add other page links or post links, et cetera. You will now be able to browse through all the different blocks that you can add to your navigation menu. So let's for example, click on browse all now and there are various blocks that you can add to your navigation menu. All right, I want to show you one more thing and then I'll look at some questions. And the one thing that I wanted to speak about is the sub menu. Okay, so let's say for example, just gonna close this now. Let's say for example, I select tick. And now I want to add a sub menu to this navigation item. What you do now is you click on the add sub menu icon, right? And now you can select one of the pages that you wanna add to your sub menu. So let's say for example, social media, right? And then I'm gonna press enter and now we can add another sub menu and let's call this SEO. I've already created a page called SEO. All right, and now if I, if you open your list view, you will notice at the moment I'm selecting social media, this item. And if you click on the sub menu item here, you can of course then add, let me just close this. You can of course add something else here. So this is just an example. It's a sample page. And then of course, if you're on sample page, you can add another sub menu. And I noticed Sandra, you asked something about that earlier on. You can keep adding sub menus to that. And we spoke about this earlier on, but if you now select your navigation block, you can go to color. And let's say for example, you change the text color of your sub menu to purple and you change your background color to white. If you now hover over it, you will see that the color of your sub menu has changed and the background color of your sub menu has changed. Now, another option that you will see, if we click on our navigation menu, sorry, navigation block, just wanna scroll down. You will now see, because we've added a sub menu, you have a few options here. You can say, you want an arrow to show next to your navigation item. All right, and now you will see it as well. It opens up when I hover over it. But you might say, I want it to open up when I click on it. So then you select that option. And now you will notice, sorry, I just added it to mission. Now you will notice that it will open up when you click on it. Or you might say, no, you don't want any arrows, you only want to show when you hover over it. Okay, I'm gonna go ahead and just show you my footer as well. So this is the footer that I've added. At the moment, you will notice these are empty. So I'm gonna go and open up the template part again so that I can go into template editing mode and only focus on that. So you'll notice I created that template part, that footer template part, and I called it custom footer. And the nice thing is now we are in the template editing mode, so we can only focus on our footer. So this says quick links. So below quick links, I've pressed enter now and I'm gonna say add a navigation menu or navigation block, right? And as I said, when you add a navigation block, it will insert the latest one that you've been working on. But I've already created a navigation block which I called quick links. So now I'm gonna select quick links. So I've added that now. Now the other thing that I wanted to do is now select the orientation and change it to vertical, right? So I've added my navigation menu below quick links and I'm gonna do the same on the getting touch column. So again, I'm gonna add, say dash navigation, select my navigation block and change it to getting touch because I've already created this one. And you will notice in this one, this is my context page and I then added a social icons block. And there you have your, oh, this is one thing that I wanted to show you. Okay, so at the moment, these two are also next to each other. So just wanted to double check. It's open this column three, navigation block. We not change that to orientation. Here we go. And there is our footer adding different navigation blocks. All right, the one thing I also wanted to show you is when you are in a template. Okay, I'm just gonna go back to my home template and let's say you want to change the header. So you can of course edit your header here, but if you click on the three vertical dots, oh, I wanted to do this in a different website because I've got a different theme and the theme provides more patterns. So I actually wanted to do this here. Okay, let's just go to site. There we go. So I wanted to actually be on this test website and say at the moment, let's open our list view. I want to replace this header. So I'm gonna click on the three vertical dots and then go down to replace header and this is called header with image background. So I'm gonna replace header with image background. And now if you scroll through, you will see there are different options. This is the 2022 theme. On my other test website, I use the 2023 theme. So I just want two more minutes and then we're done. I just wanted to show you this. So let's say for example, I select the wheel of health header. Now, if you add this header, you will notice that if you click on the navigation block, you won't be able to modify these page links because they are in a page list. So if you wanna start editing this now, you first need to click on edit. And now it will say to edit this navigation menu, convert it to single page links. This allows you to add, reorder, remove items or edit their labels. So now if you click on convert, you will see the page list disappears and now you've got your individual page links that you can move it to a different place. And of course, you can modify this. Okay. It's here related this week. Cool. Well, let's call it a day. Thank you very much. See you all later. Bye everyone.