Exploring the Navigation Block for WordPress 5.9

howdy my name is anne mccarthy i'm a developer relations wrangler at automatic and this is a video about exploring the navigation block for wordpress 5.9 so what is the navigation block the navigation block is an advanced new block that enables you to edit your site's navigation menu both in terms of structure and design it's also one of the milestones for full site editing if you've seen some other videos and it's one of 30 theme blocks available to use in the upcoming wordpress 5.9 release so what are the benefits for users at a high level the benefits are many including having full control of your site's navigation in terms of look feel and placement and the ability to build out more complex menus if you want to for now though let's look into some specifics so you actually have access to responsive menu options that you'll actually see depicted in this screenshot here so you can do things like have the responsive menu always on on for only smaller screen sizes or off entirely there's also built-in keyboard accessibility that comes with the block you'll have the ability to control design aspects from the font size font family color etc to the layouts with the inclusion of block gap support flex layout support and the ability to change the vertical or horizontal alignment you'll be able to add a wide range of blocks including search site icon and more you'll be able to add sub menu items and set the coloring for them separately to create some cool styles you'll have the option to add all pages and create draft pages while you're building out your menu finally you'll be able to reuse the block across themes which i'll go into more in a bit so what would the experience be like let's quickly jump into a demo comparing the current experience with the new experience all right so let's jump into the current experience first i'm not going to spend too much time here i'm just going to quickly title this youtube menu create menu y'all are probably familiar with this you have the options box select i'll snag a few test pages and just add them in here just to show as you all know the usual way to create a menu you can drag these around you can indent them to change the structure and you can assign different menu locations this is the current experience not very visual not a lot of options to change now let's jump into the new experience and you'll see there was a little three dot menu for me to choose from i can then select from different menus that i've worked with in the past or i can start empty so in this case i'm going to start empty i'm going to call this main menu jump right in from there i can just start adding and actually building the menu visually so i can add a home link you can then add a couple of pages a lot of projects contact an about page i'll throw in there perfect i can just move these around kinda like you can with any other block so it's really nice familiar experience um there's a new tool right there to add submenu items so i'll add a few do artwork photography boom looks good so now that i have the general structure in place um i can actually go in and edit the overall menu itself just by selecting the parent menu right there i can then change around using list view there's a list view built in and i can change around move these blocks around very easily so if you're ever dealing with a 20 huge complex mega menu you can actually edit things that way there's also a ton of tools that you'll see once you open up the sidebar so you can change the justification and keep it there change the orientation so you can switch that around i'm going to keep it like this for now actually move this back over to the right from there these are the mobile responsive options you can always on um and you can see it there or you can keep it with mobile you can then show or hide icons for sub menu items just pretty neat from there there's a ton of typography controls to further edit as you'd like i'm going to make these lowercase to match the site title it's like i'm just gonna make it a little bit larger there we go that's much better there i might add in maybe change around hmm change around the decoration or maybe the appearance yes to appearance it's a little too bold i'll switch it back to light let me try extra light and keep it there sweet so those are different appearance um options you can change there's also a ton of color options so these are the various options for the actual main menu itself right here and then if you keep scrolling down there's actually some sub menu and overlay text so the mobile response menu you can set the overlay text for that i'm actually going to do um for the sub menu custom color that i added boom and this matches actually the colors below i'm on the rest of the page so that's pretty cool then i'll just hit save now i want to show off um the ability to actually add other blocks so let's add in a search block you'll see them down below and i can make some adjustments here i'll just quickly you know do no button maybe add an optional placeholder search dot dot sweet looking pretty good right now so it's very easy to do very visual now on the front page you can actually see it um live let's edit it back just to show off um what the always-on responsive menu looks like as well so i'll just select the overall parent block once more open up the settings i always save and go back the main page just to check it out sweet looks great now i want to show what it looks like when you're actually switching themes so when you switch things you open this menu again and you'll see from the selection various options including the previous menu that i just made so in switching things this is how you could actually reuse the menus across theme since it's saved as a custom post type now let's look at this navigation menu item so you can see these are more test sites you could actually manage deletion and renaming of the navigation menu items from here so it's appearance navigation menus that's where i am just quickly renaming it so with that in mind you shouldn't be all set to explore everything about menus so will it work with classic themes right now it is slay to be a part of the wordpress 5.9 release but expect that will only work when using block themes as there are still some technical details to figure out to make it work with classic names so if you want to explore this feature now you don't and you don't want to wait for the full 5.9 release you can actually dig in currently using the wordpress beta tester plugin or the latest version of gutenberg with a block theme as mentioned i would highly recommend using this on the test site i'll also link to the beta tester plugin below in case you want to check that out so where can you leave feedback you can get feedback directly on github using the link shown here otherwise you're also welcome to join the full setting outreach program where we have calls for testing about these exact features it's a great place to have a more guided tour and to make your voice heard i'll link to more information in the description below so what's to come while this block is very far along there are still items to figure out ranging from general user experience enhancements to larger questions here's a quick list of what you can expect to see tackled going forward but keep in mind this doesn't cover everything so this includes things like how it can be used in classic games as i mentioned earlier how this work fits into the larger navigation editor effort how best to accommodate simple and complex menus in one block how to refine the block theme switching experience thanks for watching if you want to stay connected to me i have a contact form on nomad.blog or you can find me and wear pistolerslac using the username at anzasu i hope this helps you feel excited about the navigation block and all that's to come with wordpress 5.9 i can't wait to see all the cool intuitive and beautiful menus that you create

Channel: Anne McCarthy

Views: 1,255

Keywords:

Id: U7NkL8YKfUA

Length: 7min 52sec (472 seconds)

Published: Tue Nov 30 2021