 Well, as I said good day everyone, welcome to today's online workshop. The topic is tips and shortcuts for using the block editor and streamlining content creation. So at the end of the session, I hope that you will learn a few more tricks that will help you to use the block editor more effectively. So I thought of the advantages of what I'm going to try and show you today. And I think they are hopefully to save time to improve your workflow and to hopefully at the end also increase your productivity. So what will we cover today? So I am going to look at copying and pasting styles. We will briefly look at using the style book. There's a lot there, but I'll just briefly look at that. We'll also look at slash commands, duplication, dragging and dropping, keyboard shortcuts, and then synced and unsynced patterns. Now, if you have a note of synced and unsynced patterns, don't worry. That is actually a term that you will learn when WordPress 6.3 is released. They are actually moving away from the word reusable blocks, but technically one of the things that I wanted to show you was reusable blocks. But then we'll also just dip our toes into synced and unsynced patterns. And then we'll also move on to the different editor modes that's available. And we will look at distraction free mode, focus mode, full screen mode, spotlight mode to always have your list view open and template editing mode. So without further ado, let's get started. And I will take us to my first test website. And the first thing that I want to chat to you about today is copying and pasting styles. And this was something that was introduced with WordPress 6.2. And basically you can copy and paste block styles, making it easy to reuse designs you have created. So in my first example, you will notice I've already created a design here. And then if I scroll down further below, you will notice that this buttons block still looks the same as when I just started out using the 2023 theme. So for those of you who were wondering, I'm using the block theme, the 2023 default theme. And this is the block. This is the 2023 default style for a buttons block or call to action. So let's say now, for example, I've done some editing and styling. And now I would like this buttons block to look the same as the buttons block in my first example. Of course, you can go ahead and do it manually. But to save time, you can copy the style of this buttons block and paste it to your destination block. So let me show you, you really select the block. And then in your block toolbar, click on the three vertical dots and then select copy styles. And now we can go to the destination block. We select the destination block. We select the three vertical dots. And now instead of saying copy styles, we're going to say pastels. And then in one click, without having to do anything manually. The style from here was pasted to you. Let's look at another example. All right. Martin, I will. Can you see your face, but can you see your screen? Does anybody else have that issue? Or is it only Martin? I'm going to try and share my screen again and see if that helps you. Okay, share. All right. All right, great. Martin, do you just want to give me some feedback? Can you see now? I've reshared my screen. All right. I am going to move on. Oh, yes, Martin, I'm unsure what's going on there. Maybe there's a setting on your side. So I do apologize. I've reshared my screen and that usually works. So I am unsure. I'm so sorry. Well, I'm going to move ahead and look at my next example. So in this example, I would like to modify this image block. So let's select this image block on the left. You'll see I've got a section meet our team. And now I can open up my styles or settings and go to styles. And let's say I want to change the radius of this image. You can, for example, unlink the radius and say you want the top left to be a hundred. And you want the bottom right to be a hundred pixels. So, yeah, we can change that. Or we can say, no, we are going to link all of them and say we want all four corners to have a radius of a hundred. Now, again, I can go ahead and modify this image block manually or I can select the image on the left. Click on the three vertical styles, say copy styles, select the image on the right and then paste the style and let's see what happens. And there we go. We copied the design of that block and pasted it to a different destination. Now the cool thing is it actually, excuse me, it actually also works when you copy the style of a container block. So in the last example, I want to show you how I've already created some. I've already added some padding and block spacing, et cetera, to this group block. And now if I look at the group block at the bottom, you can see something has gone wrong. Something is off. And now the cool thing is without having to go into the group block, let's open our list view to just see. So let's select this group block. So instead of going into this group block and filling around with the settings, et cetera, we can just go to our previous group block copy styles. And this truly is amazing. And I'm going to show you how it just fixes everything in one click. So again, let's see, you know, not the way I want it. So select here, click on the keybab and say paste styles and let's see what happens. Boom, everything's fixed by just copying and pasting a style from one group block to another. All right, wonderful. Now I said I also wanted to just chat about the style book. Now I'm just going to go to my dashboard. And as you will know, in your site editor, you can edit your templates and header and footer template parts, but you can also customize the site white styles of your website using global styles or styles. And let's just make our way there. We go to appearance and then click on the editor. It will take you into your site editor. And then I'm just going to select a template, my home template. And now at the top right, we will see there's an option called styles. And here you can change the typography, colors, layout of your entire site. And if you click on that little eye, you will notice it says style book. So let's click on this on styles and this opens your style book. And the style book is a visual representation or it creates a visual representation of all the styles that will automatically be applied across your website. So you will see what each block will look like if you add it, right? So your text blocks, your media blocks, design blocks, widgets, themes. Et cetera. So let's say, for example, you don't want your buttons block to look this way. So of course, in your style book, you can now see what it looks like at the moment. And now you can, of course, let's say, play around with some colors. So let's say we want the background color to be green. And we want the text color to be white. Let's go out of colors and then there's borders. Let's go to border. We can say let's add a 10 pixel border, et cetera. So now I've changed the style of my buttons block and I can actually see what it will look like if I add a single or multiple blocks. And now I can merely click on save. And every time you add a buttons block, it will look this way now. So your style book is a great feature for you to use when styling your website. Now, of course, we've done a lot of time to go into details here, but Catherine Press and I actually ran an online workshop about global styles and the style book. So let me just grab that here and I can share this recording with you. And then Dave is asking an important question. So let me just jump back to my website. So let's say, for example, I save this now. Let's say save. All right, let's return to styles. Now you will notice there next to styles there it says reset to defaults. So I'm going to say reset to defaults and then it will reverse back. All right, so that is your style book and definitely something you want to start looking at a bit closer. And as I said, please go to that link that I shared and Catherine and I get into a lot of detail there. Now, something else that I want to briefly touch on is actually slash commands. All right, so as you know, when you when you insert a block, there's actually three different ways of doing it. You can click on the inserter top left and then you can search for the block that you want to add. Or if you are in a page or post, you will notice on the right, there's an inserter there. So you can click on the inserter there. And you can search for your block there. Or of course, the easiest way and we're talking about tips and tricks today. Of course, the easiest way is forward slash and then the name of the block. And then of course, we just insert the block from here. And a much easier and quicker way to add a block. Next, we're going to talk about duplication. Now, duplication is something I use a lot in my work. And it is definitely a time saver and something that that is really helpful. And I've realized I actually use duplication in many other programs that I use as well. For example, if I'm on Google slides, you know, I will duplicate a slide or or if I'm in Canva, I will always duplicate things or copy and paste things. So let's just stop and talk about duplication. So my first example, you'll notice I've got three columns here. Oh, Martin, thank you. Very sorry about that. Great. I'm glad you got your screen sorted. Okay, so talking about duplication, you will notice this is the design that I want to have. Now, here's the one I'm going to tweak. So I've got two columns here at the moment. Now, of course, I can add another column. I can add a paragraph block. I can add an image. I can modify the image to look the same as this one or we can duplicate. So let's open our list view and then open our group block and then look at our columns. And of course, I don't want to duplicate this entire columns block. I want to duplicate that one column. So let's open up my columns block and then we'll see there's my left column, my right column. And now you can do this in the list view or on the block toolbar. You can click on the three vertical dots and then below copy click on duplicate. Right. So now I've duplicated that. And now I'm going to select that image and I'm going to push it up. I'll move it up and then I will replace it with this image and I'll select something from my media library. And then of course, you can start modifying the text or whatever it may be. But yeah, much easier way to get to the design that I wanted. In the next example, you will notice I've actually used a media and text block. So let's just open up my list view. So you will notice it's a group block and I've got two media and text blocks within the group block or I've wrapped it in a group block. Okay, so let me show you how I did that. So here is the media and text block that I added. And now I'm going to click on three vertical dots and I'm going to say duplicate. And then I will select the one at the bottom. And in my block toolbar, I will say show media on the right. So I want the image to go to the right. Great. And now I can start modifying this and say our story, you know, you can start modifying your, your content. And then I will highlight both of them in my list view and then I can group them. And there you go. So I did that instead of adding another media and text block, adding text, adding media, adding content, etc. So I'm actually using preserving my content and using it to my advantage or the styling I'm using to my advantage. And the same goes for my last example, yeah, you will notice I have a pricing, a pricing table. Well, I've got some pricing tables here. And of course, what you would do is you would first complete the styling and everything in your first column in your first pricing table. And once you've done that, you will start duplicating and then just make the make the changes as you please. So let's scroll down a bit. So yeah, I'm done. I've done everything I want. I've added my styling. I've changed the design. And now I can click on this column. I'll select this left column. You'll notice one is empty. I will say duplicate. I'll duplicate again. And then I will select the empty block and on my keyboard, I will just say delete. And then of course you can start changing your different plans so that it looks like this. But of course, it will only do some of the the coloring and content. You've already done all the styling in your original in your original column. So yes, duplication is a wonderful thing to use. Next, I want to touch on dragging and dropping. So I'm just going to make my way back to my original page. All right, and I will open up my list view. And let's select this columns block. Now there are actually three ways to reposition, move or change the position of a block. And once I'm done here, I will look at some questions. So I've selected the block here. Of course, when you select a block, you will notice on the block toolbar, there are movers, little arrows. And of course, you can press down and it will move down. Or it can go further down. And I can just say undo. Now it's back to where it was. And all for example, within this block, I can select the left column and say, oh, I actually want the left column to go that way. So the movers or the little arrows is a great way of moving things or repositioning things. My favorite is actually using the list view and dragging and dropping content where I wanted. So again, if I look at this columns block, I can say I actually want this columns block to go right to the bottom. So I will hold it in and I will drag. And then I can actually see where it's going in my list view and I can drop. And there I've used the drag and drop function. Now the third way is actually in your block toolbar next to the little arrows. You'll see there's six little dots. And you can hold that in. And you can also drag and drop and blocks. Using your block toolbar and the drag and drop function there. But yeah, as I said, I think the drag and drop in the list view is definitely one of my favorites. All right. So in was, I think referring to the columns in my other examples. So yeah, that is dragging and dropping and also something that I actually use a lot without realizing it. I actually use it a lot. Oh, so in you just confirming that. Yes, it does. It does add in the new column without having to manually do it. So that's the wonderful thing about duplication. All right. Let's move on and chat about copying and pasting. I'm just going to undo you for a moment. There we go. Let's talk about copying pasting and deleting blocks. Now in the block editor, you can, of course, copy, paste and delete individual blocks or you can do that with multiple blocks simultaneously. So let me just let me go to this. Yeah. So this is part of this is part of the same website. So let's say, for example, I want to copy all of this content and paste it on a different page. I can click on the columns block and then I'll hold and shift and then I will select all the blocks that I want to copy. And I will notice they've all been highlighted. And then you will see the three vertical dots or the kebab. There's only one because I'm going to copy all of them so you can click on them and then at the top, say copy blocks. And then at the bottom left, it says copied five blocks to clipboard. Now I can go to an empty page and I can say command V or paste. And yeah, I've pasted all of that content into into a new page. And then if you open up your list view, let's say I want to remove the bottom two group blocks. I've selected those two again. We can click on the three vertical dots and say remove blocks. But now a very interesting thing. I don't know if you knew this, but you can copy and paste blocks from this website. Right. I've copied and pasted. I've copied all these blocks. I can actually copy this now and paste it into a completely different website, not this website. So let me show you how you can do that. Well, same way, but yes, this is my new website, completely different website. And now I will say command V. I will paste all of those blocks here. But now something important to take note of. So M is already touching on that. So yes, if you if you paste it into your new website, you will see some styling changes because of the theme that this website uses, you will see it does look a bit different. The other thing you also need to take note of is that these images will not be available in your media library. They live somewhere else. So of course, maybe you are just copying and pasting all of this into your new website because you like the layouts and you like the design, and then you can start, you know, changing the content and replacing the images. But of course you can display these images as is. But it will not be available in your in your media library, you will have to download it separately and add it to your media library if you wanted to do that. It's very similar to when you add a pattern from the pattern directory, you know when you add a pattern from your pen directory into a page or post, sorry. The image displays, but it's not part of your media library. But yeah, copying and pasting and deleting single multiple blocks is a great feature in the block editor. Next, I wanted to touch on keyboard shortcuts. Now, this is maybe something that you don't use as often. But sorry, I just want to, there we go. Yes, let me just copy this and paste it into the chat for everyone. So if you go to wordpress.org and you search for use keyboard shortcuts, you will find this document that I've just shared with you. And you will notice on the right, it says in this article, you will see shortcuts for Windows for Mac, global shortcuts, selection shortcuts, block shortcuts, text formatting and below that changelog. So I, for example, have a Mac, so I will scroll down to Mac. And then you will see, for example, switch between visual editor and code editor, you'll see a shortcut. Open the block list view shortcut, etc. So I would advise, you know, copying and pasting these into a doc, printing it, keeping it on your desk or on a flannel board and to have it in front of you until you learn them off my heart. But this is definitely a time saver as well. And especially if you get the hang of it, it's something you will start doing automatically. Another way of accessing shortcuts, just to show you as well. As if you go to your site's site editor. So yeah, I'm back in the site editor of my horse riding website. And if you click on the three vertical dots on the right in your site editor, you will notice below tools, there's exports and then keyboard shortcuts. So this is of course for my website and my computer. So if I click on keyboard shortcuts, you will see a list for global shortcuts, block shortcuts, text formatting, etc. So yeah, if you if you don't have access to the article and you can't remember something you can quickly go to your site editor, click on the three vertical dots and below tools find keyboard shortcuts. Now that brings me to reusable blocks. And good question. I'm asking all those shortcuts the same regardless of the theme or are they theme specific. No, they are the same regardless of the theme. Okay, so now we are going to talk about reusable blocks, or we are going to talk about synced or unsynced patterns and that's quite an important thing that I wanted to touch on today. Because in 6.3 as I mentioned, so let me just go to my a different page. Yes, let's just go here. I can actually use this example again or let's use this example. Yeah. So of course, let's say I liked this design this group block that I've that I've created. I like this design and now I would like to keep this on my site. And of course, save this as a reusable block. So let's just talk about reusable blocks first before I show you the new version of reusable blocks. So you might know this already if you select the block in your list view you'll click on the three vertical dots, and then you will say create reusable block. And then you can name it. So for example, I'll say two images and column, and now I can save it. Notice it actually looks a bit strange, but that is what happens when you change something to reusable block. It will look perfectly fine on the front end. But now you can actually see it's a reusable block. And now if I if I add this reusable block and I make any changes, it will update everywhere else the reusable block has been added because a reusable block is synced. So let's see that. So I'm going to go to the bottom here now and say I want to insert a reusable block. So if you click on the insert top left, you will notice next to media, there's an option that says reusable. And here are some of the reusable blocks that I've created. And here's the one I've just created two images and a column. So let me insert that into the page now. Let's make a change and see. All right, so let's just remove the word specialists. Yeah, you will notice it has been removed years well because it is synced. Okay, let's just add that again. And then we will notice that it's back. But let's say, for example, I like this design. And I would like to make changes without affecting my reusable block. Well, that's also something you can do. You can click on the three vertical dots and then say create. So let me just make sure I select my reusable block to images. And now I can say convert to regular blocks. So once it is converted to regular blocks, you can make any changes and it won't affect your reusable block that is sent. So now, for example, I can remove specialists here. And you will notice your reusable block is untouched. And the great thing about this is, you know, when you when you also add a pattern from the pattern directory, you can actually save that pattern as a reusable block and reuse it later. Okay, so there's a question copying the block is not the same as a reusable block right. If you change the original blocks content that won't change where it was copied. So yes, if you are just copying and pasting a block. It's not synced. So you can just go ahead and make the changes. Yes. But yeah, if you have a reusable block, as I've just shown you, and it is synced, and it will, it will change. So therefore you've got to convert it back to regular blocks if you want to make changes and not affect the reusable block. Okay, now we want to talk about 6.3 because things are going to look different with 6.3. Now, there's still changes that might happen. So what I'm going to show you now it's still in in the testing phase. So let me just go to my 6.3 websites of I've added the beta tester plugin here. So I'm on a 6.3 website now. And that's why we're going to see it looks a bit different. So they are actually going to get rid of the name reusable blocks and we are going to talk about synced and unsynced patterns. So basically patterns that you have created or reusable blocks. Okay, and let me show you what I mean. I'm going to do the same thing now. So I've created this design in my block editor. I really like it. I want to reuse it at a later stage. So I'm going to select this group block in my in my in my editor in the in the block editor. And then I'll click on the three vertical dots. And I'm going to go to create pattern. Now in the past I would have gone to create reusable block but now I'm going to say create pattern. And now I can name it. That's actually it's my call to action. There's a lot of call to action. So I'm going to say call to action pattern. But now the cool thing is you have an option to actually save it as a synced pattern or as an unsynced pattern. So I'm going to save it as an unsynced pattern because if I added I want to make changes without affecting the pattern. Or you can select keep all pattern instances in sync. And what happens then is editing the original pattern will also update anywhere the pattern is used. So if you want it to be synced you select that if you deselected it will be unsynced. And now let's create that. And yet the bottom it says unsynced pattern created. All right, so now we will click on our insert and you will notice that there's no more reusable block option on the right, because you want to go to patterns. And of course, all the patterns that come with your theme is available here but the new thing that you have not seen before is my patterns. And here it's like my reusable blocks, right? So now I'll click on my patterns and here you will see the pattern that I've created. And now I can click on that. And I've added that to my site. So let's see what happens if I make changes here now. It does not affect this. It does not affect the pattern because I've not synced it. It will of course update everywhere else this pattern has been added. And if you want to manage these, so let me just say, okay, so let's just update and then make our way to the editor. So we're going to make our way to appearance and then click on editor. And now you will also notice your site editor looks a bit different and don't worry when 3.6 is released, we will also have some online workshops about the site editor and how everything's changed. But I just wanted to show you if you go to patterns now, you will actually see your, you remember template pots, your header and footer template pots. They will now be patterns that you add to your header and your template to be a header or footer. But below patterns you will see my patterns. And here's the one that I have just created. And then if you go to the bottom, you'll see manage all of my patterns, the ones I've created. And if you click on that, you know, yeah, you can edit it, you can trash it, you can even export it as a JSON file. So very exciting. Synced and un-synced patterns. I hope that is clear. And of course that's only something that will be seen or be visible or be able to use when 6.3 is released. So yes, if it is synced, the alt text etc will also be synced. But of course, if you are going to make a change to a synced image, you will have to go and change the alt text. And then it will update everywhere else that the pattern has been added. But yeah, that's a good question. All right, now we're going to move on to editor modes. And this is something that a lot of people have not really played around with. So let's look at the first one. If you open a page and you will notice if you click on the three vertical dots, top right, you've got some options here below view. And the first one I want to talk about is distraction free mode. So a new feature, it's a new feature that helps you to stay focused on your writing by minimizing distractions on your screen. Now as you will notice at the bottom, it says write with calmness. So let's select distraction free write with calmness. And now you will notice once you've enabled the focus mode or the distraction free mode, you will notice that the editor screen has changed. The toolbar at the top of the screen has disappeared as you will notice. And then the block toolbar does not appear when you click on the content. So as you will notice, I can now click on any content. And the block toolbar won't appear. And now I can, you know, add content, etc. So this helps you to stay focused on your writing and minimize distractions as said. So the idea is that it's just you and your words. And it allows you a simpler and more streamlined editing experience. And you will notice it feels more like a text editor year than a block editor. But now you might ask, what happens if I want to add a block? Well, that's where the shortcut of slash commands come come to play. So to add a block, I'm going to say forward slash. And then you can add a new block this way. And if you want your toolbar to appear, you might be merely hover at the top, you will notice you will have at the top. And then, for example, I can say undo or whatever it may be. So yes, that's distraction free mode. So I will click on the three vertical dots and then deselect distraction free mode for a moment. And now you can see back to normal. Every time I click on content, the block toolbar will appear, your block toolbox at the top, etc. The next one that I want to chat about is full screen mode. Now you will actually see that I have already selected full screen mode. And I'm sure a lot of you at home have also selected full screen mode. But if you deselect full screen mode, you will actually be able to always see your admin sidebar. So it will always stay visible while you are working. And now, of course, you can quickly go and find. Yeah, you can you can find anything on your website by just going to your admin sidebar. But if you don't want that to be visible, you don't want that UI to be visible. You can select full screen mode. And now it will hide the admin UI. And then we can talk about spotlight mode. Now the cool thing about spotlight mode is that it will let me select it says focus on one block at a time. So let's select spotlight mode. Now the cool thing is it will gray out everything that you are not working on. So it will only appear normally when you click on the block that you're working on. So this again is just something to help you focus on one specific area of content. And this is also something you will be able to use in the site editor. So yeah, it grays out everything you are not working on so that you can focus on one block at a time. Let's deselect spotlight mode for now and then also touch on the top toolbar. Now some of you maybe also don't like the block toolbar coming up every time you are clicking on a block. Well, if you wanted the block toolbar to stick to the top, you can also select top toolbar and it says access all block and document tools in a single place. So if I select top toolbar, you will notice that the block toolbar goes to the top. And now it won't appear when you click on a block anymore. So now if I highlight this text, for example, I'll have to go up to the top toolbar and then I can make any changes that I want to. And of course, when you select the block, the block toolbar will will change accordingly. So that is top toolbar. Now something else I also wanted to mention is the list view always open. So as you have noticed in my online workshop today, I have used the list view. I have used the list view quite often and I'm sure you do as well because it's so handy to help you navigate navigate your way through through content to see exactly what block you're working on what you're changing, etc. So let's say you always want your your list view to be open. There's actually an option for that. So at the moment it's closed. But if you click on the three vertical dots and you go to preferences right at the bottom, there's an option that says always open list view. And that's actually an option available in the site editor as well. So now I will select always open list view. All right, let's update. And I'm going to refresh. And now you will notice the list view will always open up when you open a new post or new page. It will always be there until you close it. But of course, every time you open something up again, it will it will be there. It will stay. And then the last thing that I wanted to touch on today was template editing mode. And that is that is very helpful when you are working on header and footer template parts. So let me jump to my other test websites and site editor again. And it's open the navigation sidebar of my site editor. And let's make our way to templates. So let's click on the page template. So as you will notice, I've already added a header and a footer here. But now let's say you want to make changes to your head and footer. You can of course do that in your in your template. But you probably don't want all of those distractions. So what you can do is if you if you select this header template part, you can click on the three vertical dots. And I'm sorry, on the block toolbar. So on the block toolbar, you will see you can click on edit. And if you click on edit, it will actually take you into template editing mode. And then you can work on and modify your header or footer or whatever template part you've created without any other distractions. But now you might ask, what is it going to look like in 6.3? Well, let's just have a look. Now, of course, if you go to that, that's when you are in a template, right? I was in a template and then I clicked on edit. But you can of course just go to and to templates and template parts. And you can click on template parts and you can find your template part that way as well. All right, so 6.3. It looks a bit different. So just here back on my 6.3 test website, let's make our way to editor. And we said that your header and footer template parts are actually now seen as patterns, right? Because it is something that you that you add to a template, which is synced like a pattern that you can sync. You know, header and footer template parts are synced. So if you make a change in one place, it will update everywhere else. The header or footer has been added. Now, of course, you can go through it. Do it the same way. So let's open my template. We can click on edit. So that kind of works the same way, right? And it will take you into your template editing mode. Or let's go back. Sorry, let's just, yeah. So we've got this sidebar here. And if you click on patterns, you will see you've got 11 header patterns. So let's click on headers. And you can actually see all of them here. And now you can say, OK, I want to actually edit this one. So let's click on the health header. And then, of course, you just click on the screen. And it will take you into template editing mode. And you can start modifying it there. And yeah, that's all the tips and tricks that I wanted to show you as well as some of the editor modes. So I'm going to stop the recording now. And then I will give some time for questions or discussions. So yeah, thanks everyone for joining today. We'll see each other next time.