 Well, great. Welcome to today's online workshop. As you can see, the topic for today is exploring some of the new 6.3 WordPress features. So just for clarification, this session is more of a tour through 6.3. We probably won't have time to look at some of the details or how certain features work. But yeah, we will get a good idea of what is landed with 6.3 and some of the cool new things you can do in the site editor. So you would have seen that WordPress 6.3 is called Lionel and yeah, it is named after the jazz musician Lionel Hampton and Lionel Hampton. And of course, all new releases are named after jazz musicians. So yeah, lovely tradition and yeah, something to take note of or just something interesting that I thought I'll share if you didn't know. So this latest version of WordPress 6.3 brings with it the ability to edit your site cohesively. You can now create and launch your site within the site editor because content templates and patterns have all been brought into the site editor. So I think this is one of the major things I want to highlight today is the cohesive editing editing experience that WordPress 6.3 brings to the table. So what am I going to try and achieve today? The things that I'm going to look at or discuss today is number one, navigating the new layout of the site editor, utilizing the command palette, one of my favorites, activating distraction-free mode, previewing block themes before activating them, using styles revisions, setting aspect ratios for images, adding and using the details block, adding footnotes, resizing the site editor to view it on smaller screens, and lastly the top toolbar enhancements. So yeah, all the things I want to try and cover today. So let's kick off, let's explore. I'm going to make my way to my test website and as mentioned, 6.3 brings with it the ability to edit your site cohesively. So we can do all of that in the site editor. So let's just check, I have installed the 2022 block theme and we are now going to make our way to the site editor or the editor to see what is new. Now you will immediately see that the sidebar is different than before. Previously you would have only seen templates and template parts. You will see a new enhanced site view sidebar, which allows you to navigate between navigation menus, styles, pages, templates, and patterns. And if you don't see template parts now, don't stress, template parts are now part of patterns because technically they are a reusable component of your site. So let's start at the top. So let's look at navigation menus. So say goodbye to the hassle of managing navigation menus within a template. So as you know, in the past you would have had to open the template, select the navigation menu and do any edits here. So I just want to turn the top toolbar off for now. So you would have had to come into the template every time. All right, but we don't have to. As you would have seen, I've selected my navigation. I clicked on the navigation tab there and it opened up the four navigation menus that I have created. So you can make simple edits. So let's open my lifestyle navigation menu. So you can make certain simple edits. So let's for example, select tips as one of my pages. You can move it up. You can move it down. And you can of course remove this navigation menu. You also have the option to drag and drop. So if I want to drag this up, you will see there's a shorter blue line and a longer blue line. If it's a longer blue line, of course it will just go below home. But if you want to make that navigation item a sub menu. If you scroll, if you drag it down and you'll see there's a shorter line. Let's do that. Now you will see that that navigation item is a sub menu of lifestyle. But of course I don't want that. I want it to be an item by itself. So yeah, you can make some simple, simple edits directly here in your sidebar. And if you click on the three vertical dots next to the name of that navigation menu, you can rename it, you can even duplicate it and you can delete it. And then if you click on the screen here, you will be able to also make certain certain changes without distractions. So let's just open the sidebar here. You will see I can edit individual items. But if I open my list view and I select the navigation block, you will see that it is locked. So I can't make any edits here. I can't make any styling changes here. I will have to go to the template and do it there. But of course, as I said, you can make some smaller changes. All right, so that is our navigation section. Next, we will see styles. So the style area or the styles area which was previously separate is also now available in the sidebar and granting you quick access to style customization. So you will be able to browse your style variations here and you will be able to quickly go to your style book. Or you can open up your overall style system. So if I click on this little I, it will take you to your style book. And just a reminder. So let's just click on here so that we'll open up our style book. Your style book is a visual representation of all the styles of your individual blocks. If you scroll down, you will notice all your blocks. So you'll see it's a visual representation of all your blocks and the way it has been styled. And you can of course make changes here and actually see the changes you are making. And any changes you make here will of course update across your entire website. It is global. Now the other cool thing that you will notice is that they've applied deep linking here. So whenever I click on a block, the settings will change to correlate with that block. So if I select the gallery block, the specific block settings in the styles interface will open. So that's a really cool feature as well. Again, then of course you are also able to go to your style system. If you click on edit styles and here of course you will be able to make any global style modifications. So if you change your global styles, it will of course update across your entire site. But yeah, quick access in the new sidebar. Now the new thing you will see here is pages. So yeah, you actually now in the site editor are able to add new pages, edit your pages and manage your pages. So this is a great step forward for WordPress. So for example, you can open up one of your pages and then you can actually start modifying it and adding content. Let's create a new page and then we'll see this in action more. So I'm going to click on the plus icon next to pages and here you will be able now to create a new page. And then we can say create draft and now this new page has been created and I can edit it in the site editor. I can add the content here in the site editor. So let's scroll down a bit and let's open the list view. So one of the important things to take note of is that you will add your content to the post content block. You will notice that's also locked because you don't want to remove your post content block because then you won't be able to add content. To this page. So you can add content here. This is where all your content is added. But what if I now want to start modifying my template. So as you know, your template provides the structure or layout for for a page. And you usually create the structure and layout with headers and footers or header template parts and footer template parts. Now, let's say I'm in my page, I've added content and now I want to modify my header template part. That's part of my template. If I click on my my header, you will notice at the bottom it says edit your template to edit this block. So we cannot edit our headers and footers while we are adding content to our page. If you are in a page, you only add content. You can, you can, of course, change the title and you can upload a post featured image and you can add content. But of course, yeah, you won't be able to do anything either. And it says edit your table to edit this block. All right, so what do you want to what do you do if you want to edit the template? Well, if you open the settings, you will see this new tab. It says edit template. So whenever you are in a page, you can go to the bottom and say edit template. And of course that page was, was added to the page template. So now you will notice that the page template has opened up. And now we can't if I click on the post content block now, we can't do anything because we don't add content in the template, right? We, we add structure by by changing our header, footer, etc. So now when I go to my header, you will actually see it's purple. So the purple tells us number one, it is synced. So it will change across your site wherever this header or footer has been added. And here you can now start modifying your, your header and footer in your template. If you want to just focus on your header, you can click on edit. And you will go into template editing mode and you can make any changes here without distractions. The other option, of course, is also. Sorry, I went back into my page now. The other option, of course, is if you click on the three vertical dots and you say replace header, you can scroll through your existing template parts and, and patterns. So there's some, some headers that you can actually select from, from this list, you can replace it. This is a big step forward for, for WordPress. I just want to come here and, and, and speak about pages and templates for a moment because including pages and templates in the site editor brings a clear distinction between editing a pages content. And it's template and then hopefully making it easier for us to switch between the two modes and view them in the appropriate context. So if I want to add content, I go to a page. If I want to update my template, the header, the footer, I go to template. Something else that I also wanted to highlight, if you go to pages at the bottom, here's all the pages I've created. I know there's a lot of pages. This is a test website. But at the bottom you will see dynamic pages powered by templates. For example, the 404 in the search page are also now included under pages, which enhances the user experience. And the last thing I wanted to mention about templates is if I go to templates now and I click on the plus icon to add a new template, you will see some upgrades there as well. So this has also had an overhaul and a very nice new look and feel to adding a new template or of course a custom template. Right. I just want to duplicate this page because I wanted to also mention something else. I want to go to the front end of my website and show you something there. Okay, this is the front end of my website. So something else that's also landed with WordPress 6.3 is if you now click on edit site, you will not just be taken into the site editor as before. Let's see what happens. So if I say edit site, you will not just be taken into the general site editor. You will actually be taken into the specific template that is associated with the page that I clicked on. So that is also great. Now let's move on and talk about patterns. So we've looked at navigation styles pages and templates. Now let's talk about patterns. So you will see three things below patterns. You will see my patterns because 6.3 and provide you a way to create your own patterns, custom patterns. And then of course you will see your list of patterns that come with your theme. And then at the bottom you will see template parts. So that's important to take note of template parts are now part of of patterns. So they still call template parts your header and your footer template parts or general template parts. But they are now part of patterns. And as I mentioned, there are technically reusable components of your site. Okay, so at the top my patterns, you can now create synced or unsynced patterns. And synced patterns is what we used to call reusable blocks. Now at the moment you will see I have two patterns that I've created. The one has got a little purple icon here which shows me it is synced. It says there editing this pattern will also update anywhere it is used. So this pattern which I created if I add that pattern and if I make any changes to that pattern and it will update across my site. So if that pattern is actually used on two different pages, it will update in both areas because it is synced. And then this pattern you will see does not have the purple icon. That's because it is unsynced. So I can add it to a page the pattern I can make changes and it won't affect the original pattern because it is not synced. So next to patterns if you click on the plus icon, you will see I can create a pattern. So let's click on create pattern. Right, and let's call this example pattern. And here you will see the option to say synced or unsynced. So at the moment it is unsynced. If you want to sync it, you can select keep all pattern instances in sync. Editing the original pattern will also update anywhere the pattern is used. Okay, now I'm going to click create. And now you can start creating your pattern. Now, of course, to save time, I've already created a pattern just to show you. So I'm just going to grab this pattern. I'm going to copy this pattern. I'll paste it here. Right, great. I've created my pattern. I've created a synced pattern. And now I can save it. Okay, let's return now to our patterns area and let's reload. And now you will see I have a new synced pattern. So two synced patterns. I've got another example to show you to kind of hit this home. So you can also create patterns in your post editor. So let's say you were just on a page and you created a pattern and you're like, oh, I like this. I want to use this again. I want to add it to my patterns area. You can do so. So let's open our list view, select the pattern and click on the three vertical dots. And now you will see the option here create pattern or reusable blocks. So you will remember the term reusable blocks. So I can say create pattern. And now at the top it says reusable blocks are now synced patterns. A synced pattern will behave in exactly the same way as a reusable block. All right. So I can I say, let's just call it Tour de France pattern. But let's say now I actually don't want it to be synced. I can deselect that. And let's create this pattern. All right. It has been created. So let's go back, refresh. And now I have two unsynced patterns and I have to sync patterns. Now, if I return to my page, I also just wanted to show you. If you are in a page or post and you click on your insert and you go to patterns. You will see it says my patterns now. So here's of course all the patterns that come with your theme. But here are your patterns. But you will see, you will only see unsynced patterns here, not synced patterns. If you want to see your synced patterns or your old reusable blocks. You have to click on the sync patterns. This was usually called reusable blocks. But now it's called sync patterns. So next to media, you can click on sync patterns. And here you will actually see a preview of your of your synced patterns. So let's add one of our sync patterns. Now you will actually see when when you add a pattern. You can clearly see it's a pattern. It is more narrow. It will appear correctly on the front end. But it will, it will look this way on the back end. Now, if I select this sync pattern. And I click on the three vertical dots. You can actually ungroup it as well. So I just wanted to to mention that you can ungroup this. If you wish to make changes and not have it synced. All right. So that is synced and unsynced patterns. Next, of course, is your your general patterns. And now at the bottom, you will see your template parts. And your template parts will work as normal. You can manage your your header template parts here. And your footers and your your general template parts. Now, of course, if I click on the plus icon, you can also create a new template part. And yeah, you can create a header footer or general template part. So yeah, this is it works the same as before. It's just it's housed in a new in a new place. And housed under and the patterns. And of course, template parts are synced. And they are reusable components part of your site. All right, so that is the new site view sidebar. Let's move on to a new exciting edition called the command palette. So what is the command palette, the command palette is a new tool that allows you to simply complete tasks and navigate within the site editor. It is going to be a big time saver. So to access the command palette. And if you're on a MacBook, you can just say command K. Or if you're on Windows, you can say control K. And there's two other ways of accessing accessing it as well. If you click on the search icon, it opens the command palette. And if you are in a in a template or page or if you're in the site editor, you can just click on the title bar and the command palette will also open up. So three different ways of accessing your command palette. So let me show you how it works. So I'm going to say command K. And I want to say, okay, I want to actually create a new page. Now, instead of going to pages, clicking on the plus icon to create, you can say new and you can actually add new page. And if I click on it, you can go ahead and start creating the page. So let me just jump back command K again. Let's say you want to modify header. Well, I can type in header and I can choose my my header from the command palette and I can I can modify it. Let's say you want to edit a template like the 404 template. I will just type in, sorry, I'll just type in 404 and I can go ahead and update the 404 template. If I type in open, you will see there are different things that you can open up. Open style revisions, open styles, open navigation. So yeah, a great way for you to save lots of time to navigate through the site and also to create new content types. So yeah, a really cool feature, the command palette is something that I'm going to use a lot and I hope you too. All right, so command K or control K on Windows. Next, I also want to talk about the distraction free mode that is also now available in the site editor. It was part of your post editor before, but now it's also part of your site editor. So let's say you want to create content. So I'm just going to open up one of my pages. So let's say I want to open up my bar page and I want to add content and work on my bar page. Now, of course, if I open up a block or click on a block, the block toolbar will open up. I can open up my list view. I can open up the settings. It can become busy very quickly. But let's say you want to focus on your content and actually get rid of all of the noise around you. If you click on the three vertical dots top right, you can select distraction free mode. It says right with calmness. So let's select that. And this allows you to focus entirely on your site's content while remaining within the editor. It's like a clutter free one to one preview of your site's content. So you will notice when it is enabled, any sidebars are closed. And if I click on a block, you will notice that toolbars fade away. So now that blocks toolbar will not appear. So now at the bottom, we can say, let's add new content. Now, what happens if you want to add a new block? Well, you can just type in forward slash. And of course, you can add a new block because you don't see the insert or the toolbar at all. But of course, you can use forward slash or slash commands. And if you want to undo or whatever, you may just go, you can just go to the top. You can hover. And there you can undo. You can see tools. And of course, you can toggle this option on and off whenever you need to. So let's put distraction free mode off. And now we are back to the normal way of editing your block toolbars appear. You can open up your sidebars, et cetera. So yeah, a wonderful way for your content to take center stage. If that is what you want to do. Right. Now we are going to talk about previewing your site using a different theme. And if that is something that you've always wanted to do, it is now possible with WordPress 6.3. You can preview block themes before activating them. So to do that, we need to go to our dashboard, go to appearance. Click on themes. So as mentioned before, I have activated the 2022 theme, but let's say, for example, I actually want to see what my website will look like using the frost block theme. You will see next to activate now there's an option to say live preview. So let's click on live preview. Now this is powered by the site editor. So number one, you can play around and see what your website will look like with the new theme. Number two, you will get a better feel for how the site editor to works, et cetera. So now we can actually start editing. You can make changes. So for example, let's open up about page again. You can see what my bar page will look like now. You can, of course, alter this. You can open the template. You can modify the header. You can modify the footer. And if you like what you've done. So let's say we want to add site tagline. Right. So we've made a change to our header, et cetera. We like all the changes we've made. Now we can actually choose to activate and save it. And if you click on activate and save, it will immediately reflect on the front end of your website. But of course, if you don't like what you are seeing, you can just go back and nothing will change. So yeah, a wonderful way to transition to a block theme and for you to test our different block themes and also learn more about block themes if you're still in the classic theme. All right. Next, I want to talk about styles revisions. A new feature that has landed with 6.3. So I'm just going to go out. You will notice I'm back. I've left the preview. And of course, nothing would have changed because I did not activate and save anything. I just explored. All right. So if you go to styles, you actually have more control over your styles now. So the new style revisions you can find is if you click on edit styles. And next to the little I style book, you can click on revisions. So what is styles revisions? And the new styles revisions feature adds a visual way to browse changes to your styles over time. So you can easily revert to a previous state. If you find a style you prefer or want to revert back to a previous version. So at the moment you will see I've got four revisions. One from eight days ago and here's one from two years ago. So let's say I actually preferred my style from two years ago. I can just go ahead and click on apply. And I can come back to revisions and revert back to my previous version if I wanted to. So yet at the top you'll see revisions are added to the timeline when style changes are saved. So it does also take the stress out of maybe if you've made a change, you don't like it, you can just quickly revert back. So that is styles revisions, a wonderful new feature. Now the next feature I want to talk about is aspect ratio controls. And this is something I'm passionate about because I have bumped into this problem quite a lot where you've added a pattern. But then when you change an image, the design that you had in mind changes because of the aspect ratios of the images are different because the aspect ratios of the images are different. So let me just show you, I've got two examples, same example. But so they've added aspect ratio controls to images. So if I open up my settings, you will notice if I select this image below aspect ratio, you can actually set the aspect ratio for an image. This enhancement ensures that patterns or group blocks containing images remain visually intact regardless of the dimensions of the upload images. So you can therefore select an aspect ratio and then any image you replace it with will change accordingly and maintain the aspect ratio set. And this of course allows you to keep the design integrity of that pattern. So let me show you what I mean. So at the top, I've actually not set any aspect ratio. But this is my pattern that I've created. And if I use this pattern again, I want it to look this way. So let's see if it will work that way. I'm going to select the image you will notice at the bottom, it just says original. I'm going to replace it with a new image now. And let's select a landscape image, because that's very different. Let's see what happens. Yeah, exactly what I don't want to happen happened that the style completely changed. But if I set it aspect ratio, my design integrity will be intact. So this one is similar. But yeah, you will notice I've set the aspect ratio portrait three by four. So now I'm going to click on replace. I'm going to select the same image. And now you will see that it maintains the aspect ratio set. And you will notice I've also selected the cover scale. And that ensures that the entire image fills out. So yeah, a great way to keep the design integrity of your patterns intact. I also want to introduce you to two new blocks that have been added. So the first one is called a details block or the details block. So this new block allows you to hide content until the reader chooses to engage with it and with a simple open close arrow icon. So as you will notice, I've already added four details blocks here. And if you click on the drop down, you will see more information. Let's go ahead and add one to show you how it works. So I'll say forward slash details, select the details block. And yeah, of course, where it says write summary, I will say summary. And yeah, you can add a hidden block. So this is the content. And of course, if you click on the drop down, it opens up. And if you click on it again, it will close. You also have a few styling options. So let's select the plugins details block and then open up styles. You will notice you do have some styling options. And you can, for example, change the background color and below next to dimensions. You can click on options and let's say we want to add some more padding. We can add some padding. So yeah, the details block is a new addition. And I think this is something that will be used a lot in many different ways and so forth. The other new block I want to introduce you to is the footnotes block or adding footnotes. So this is not just for academia or for academic purposes. But let's say you want to reference something or you want to add a citation or you want to add a comment in a footnote. You can do so now in WordPress. So how do you go about doing it? You select the content you want to reference or site. And then you click in the blog toolbar, you click on the little arrow that says more. And then you select footnote. Now at the bottom, you can of course add a comment or citation. And of course next to that content, you will see a little one. If you add another one, it will be two, et cetera. So let me just save the draft here for a moment and let's preview it in the front end. You will notice if I click on the footnote or the one, it will jump down and it will show you the reference or the citation or the comment. All right, so that is footnotes. So there are two more things that I want to show you. And the first one is resizing your site editor to allow you to preview how it will appear on smaller screens. So let's jump back to the site editor. Yeah, I don't want to make any changes to my styles. All right, so let's open up my list view. All right. So if you open up your sidebar, you will now see if I have between the sidebar and the template or the page, there's a little blue line. It says drag to resize. And now we can actually in the site editor drag to see what your site or what your content will look like on smaller screens. And if you drag it all the way open, you can start editing. It will take you into editing view. And one more thing. They have added some enhancements to the top toolbar. So I'm just going to open up my about page again. Now, let's say, for example, you're one of those people that don't want your block toolbar to appear every time you're working a block. Maybe you want it static at the top. Now, of course, you know you can do that by clicking on the three vertical dots and selecting top toolbar. It says access all block and document tools in a single space. So let's select block toolbar. And you will see they've added more actions and they've made it more user friendly. And of course, when you select a block, the top toolbar will change accordingly. And you even have this option to hide the block tools or to open it up. So yes, welcome to WordPress 6.3. There are, of course, some more things, but this is all we have time for today. I'm going to end the recording now, but then we can stay and I'll listen to a few questions and some more feedback from you. So yeah, thank you very much for joining me today. We'll see each other next time.