 Hello again to your cube block patterns update with WordPress 5.8 If you have any questions or comments, you may leave a comment below or if you work for the York libraries Contact LCS help at your q.ca and one of us will be able to help you up So what are we going to learn today? First off we will cover the new your cube block patterns. What are they? What's the difference between a your cube block pattern and a WordPress block pattern? Next we will do a little bit of a demo Walk you through creating a page Using the your cube block patterns will take an existing page that has been already been created using The old way of reusing it reusable block. I will recreate it in using it with the block patterns in WordPress 5.8. There's been new features as well To the interface and I will highlight those as we go along And finally I will answer some common questions that have come up Although don't hesitate to contact us if you have any other further questions We will touch on some other WordPress 5.8 features That you should be aware of and may impact your web development or web creation of content moving forward So block patterns What exactly are block patterns? Are they lego? What's the difference between WordPress block patterns versus your cube block patterns? Well a block pattern is a group of predefined blocks that have been combined together to create a layout element This would be an example of a two-column layout with an image title subtext all set up For you to edit rather than just creating the layout from scratch So what are your cube block patterns? Just like before your cube provided you with reusable blocks to help you create your pages Well They have converted them into block patterns In a way the layout of your cube reusable blocks are being replaced with your cube block patterns Other reusable blocks can still be used but recommendation by york marketing and uit Is to use the block patterns for layouts moving forward All right, it's demo time. Let's create something with block pattern. Shall we Hi, and welcome to the screencasts for we will be doing for block patterns I have as a setup Three tabs opened up. We have the library's collection page We will be mimicking this page and recreating it. This was created in your cube Reusable block, but we will now create it using the your cube patterns, uh, which Are the same except they're using patterns and we'll get into that The second tab I have is the sandbox where we will be creating the new page And the third one I have just in case it's the older version of WordPress so I can show you sometimes, you know, certain features have been updated in WordPress 5.8 And I can show you what they look like in the old one versus the new one So let's get started We're not going to create this search box, you know, we'll just go ahead and create a banner In that sense, but we'll do that at the end Let's just first off Create our new page I can click add new here All right, let's give it a title. So this will be the collections Copy it's going to be one If you had a parent that you were creating this for you can you know to give a brother Breadcrumbs or hierarchy you would assign a parent to it as well And we will go back here We'll come back to the banner after Let's do this part, which just looks like a quick links Lock that we had so I'm going to go ahead and click add new I'm going to search for quick Links A quick link Now what you see above Are the blocks that it's recommending these could be reusable blocks or could be regular blocks This is the one we would have used previously, but now we're using patterns and The patterns have a thumbnail and that's how you know if it's a pattern or if it's a block in your search Well, this one will have a thumbnail with it while this one will have a preview I'm going to go ahead and click Quick links right side And I added the pattern now first things first We don't have to do that convert to regular block anymore because the pattern Is already a local copy I'm gonna go ahead and close that and what we have here You have the title collections. So that will be there from already. So let's copy from here Right click copy Here we have to add a paragraph block. We can just paste directly into an empty column right click paste added that info One of the other things you might have noticed this is a new one in 5.8 It was before difficult to get to the parent of You know, let's say the the block that you're working on. So I'm working on this paragraph block And I want to know access the parent. So they've now added it on the side Just to give you an example if I were to click here Let's click here And in order to access the parent, I would have to go like this This well now We have it on the side at least so at least the most immediate parent you can access right away Let's go ahead and add the links here Just press delete paste And then let's have a look it's getting there next In the list So we have related links. I'm gonna go ahead and copy this Control c or right click just to be sure and back to my edit Let's let's duplicate this whole shift arrow down duplicate Now one lesson I will tell you from experiences if I were to copy as I did here and paste it All together in multiple blocks. It will not carry the styling Of the look and feel and it would rather Not look like this it'll look like a default without our css classes and I'll show you as the example in the next one For now, let's paste this one control v or command v if you're on a mac links Back here Let's preview it. Okay. It looks good. Looks good. Now. I'll show you what will happen if I had not done a duplicate and even if I did do a duplicate But I hold shift arrow down duplicate But I'm gonna paste multiple blocks even though I've duplicated it and it has the styling so I'll go back here Click settings advanced tab. You see how this there's a css class here. This has been pre put by York UIT they've pre styled The bullet points with the list style Same goes for the related links It has text uppercase h5. That means it's gonna have the height of the h5 And they're all gonna be uppercase But now if I go ahead I copy the content policies Or I click copy And I'm gonna go ahead and just paste multiple blocks this way paste What did I do wrong? Oh undo And copy all of it properly way Over here looks fine But I'm pretty sure it's missing the css classes. So it's gonna look all wonky or big or whatever the default It picks up Yep, you see how it is. It it's not matching with the rest and this can happen and the reason you should know why it happened or how to fix it Is because it's missing those css classes. So right now it's It doesn't have any of the list style and I can either delete it and redo it or I can show you how to add the list style. So command c control c Go here advance List style and then there was just the other one click here text uppercase control c command or command c policies Paste And now if I preview it everything will look as it should Yep, it does Now let's go ahead and add the next part which was The three column. Let's go ahead and add that Go ahead and click the add block inserter Go to patterns and here's another way you can add. Uh, you can select your cube blocks here So you would only see the your cube patterns Blocks that are that you can use uh, you can Sort it by based on what you're looking for but having the york you want at least, you know Any block you pick it's not a generic wordpress one It's actually specific to york with york styling the york look And it all of is approved. So that's what I recommend We had used the preview so we're looking for the three column And we can use this one. Uh, we could use the card one there. Uh, I believe it's A little bit further down. I think They added a couple of new card ones that uh, actually have a nice background a graphic background if that suits your page You can try So here's the info cards one we can use these ones Or we can use the feature content and for now. I'm just going to use the feature content because We only have uh, we don't have a link And this is the one I was talking about that has the background So let's go back up Insert this Boom it's there Now let's update the image I believe the first one was an omni one And then a bookshelf and then the archives one Place open media. I had pre-loaded the images up. So you know it saves us time for the screencast place media Select And I see the third one too Just for fun I don't know if the alignment will go Right or wrong I will see I'm going to leave this tab open because then it might load faster. It's okay. It's good as expected Uh, there was an issue with the images. They were not, uh They would be out of whack in terms of aspect ratio and and all that's You know the heights would be messed up and all that sort but Looks like that has been sorted as long as using similar Resolution pictures. They will line fine. They look good. They're still zoom So let's go back and add content Go back here. Again, we have to be careful if I Copy multiple the styling won't come in. So I'm going to copy only one piece at a time If this was a block in editor mode, of course I would copy all the blocks and paste them in and the styling and the CSS would come through Copy Did the link come through? No, the link did not come through So we have to go back and copy the link Address Edit Paste There we go Anyway, we would repeat this for The other blocks as well. I'm not going to because the purpose of this Demo is to show you patterns. So let's just use as many as we can What's the next one that we can use? I could do a repeat, but let's do something different I believe we can do one that has like the An image with a paragraph. That's another common one that's used Let's add one Over here, you won't see the patterns unless maybe let's see if we look for paragraph Now again the ones with the thumbnail Are the ones that are patterns the ones without it Are not So let's pick this one And let's change the image. Oh, let's just keep this one I know it's repeat, but In reality, you won't use the same one Now, you notice how this was annoying me. I could try to select it the other way I can the best way to navigate again Here I can pick the heading Back Come Visit the archives Let's be specific library archives And then you will have some sort of content if you wish archives Or just Let me just call archives home. Oh, what's going on here? I'll just I'll just have to relink it Now if I was locally within our website, I could just go slash web slash Archives and it'll know but because we're in a demo sandbox. I have to type in the whole URL Yeah Go and let's see what it looks like. No one's coming together Oh, maybe I want this on a Gray background. Maybe I could do that. I haven't done it yet. So bear with me Close the list here Let's look for gray background I still have the old reusable blocks. I could use those two if I want but You know, then I would have to convert to regular block as well Patterns is the new way forward. So that's what we want to use Let's do the full width of the column width. So column width would be just The width you see here Full width would be edge to edge. And that's what we want. It is there That's preview. I don't know if you could see it, but it's basically edge All the way to the edge over here Let's move our content into it And you know, I could try to do the select. Oh, I got everything. Oh, maybe I missed something again List view to this rescue So we want to select all of these guys The whole column Ice feedback it's selected We click and hold to drag Until we see the blue bar Oh, no, I forgot to uh, oh it dropped in usually I would need to add a paragraph In there for it to work, but this worked out Let's preview it That has the little gray. So it looks nice Anything else? Uh, we did have that banner Now I This is a different template wise. So what we have two choices Either I can select the parent the parent Okay, and insert before Now uh, if I add let's say the full width one full Let's see. What do we get? Video player while we have a full width video player if you have that but let's say if I did the full width With some uh Welcome to collections That's the only reason I would use it for is if I wanted some text in there Let's pick An image I should have added more but let's say I'll just use the frost one that we have here from glendon. Uh, this is not accessibility friendly Open color I wish we could do transparency Uh, maybe we can No, let's just leave it as I'll just text Red Uh, let's see there we go. Okay. Let's just say we want that The problem is Now I'll show you what it is the issue Is that you will have it and there's nothing wrong But you would have to add a little bit of a spacer after Uh, so there's some gap there the title and the birdcrumbs are showing up top So it's it's okay if you want it here, but if you want it let's say To the edge of the top you would have to use the other template which would be We go back to settings page Pick the secondary Landing page is something I created for the libraries. Uh, so it may not be available in your york u instance that you may have set up Basically what it is it's it's the same as the secondary page, but it doesn't have any breadcrumbs. It doesn't have a title Showing up you add your own h1 title in that sense, but I'll just show you the one that everyone has available with the theme which is the secondary page A lot of feature image And let's add the same one So we know the difference and you can see it I wonder if preview works the last time I remember I had to publish it or Update it in order for the template change to kick it. Oh, no, it worked So now you see how this is up top edge to edge versus this one is Sort of in between content and after title That's one option you can do That's if you want text in your overhead on your content then the full image width pattern works otherwise The one that's recommended is that you just use this secondary template and a feature image to be your banner And if you work for the libraries and you want to try the landing page Let's say you're making a home page you can And I'll just show you what that would look like So it will have the feature image, but it removes the breadcrumbs and the The page title so you would have to add your own page title for it And in this case if I were to do it remove Let's add I'll just do it quickly just to show you Slash spacer another way to add content And I'll leave the default spacer and see what it looks like There you go. So now you have This would be edge to edge. You just see it as Edit link right now, but this would be till the edge of the top And I don't need to put text in I just added it, but you don't need to you can I might reduce the spacing a bit more and maybe add the title here Added back. So we have an h1, you know for Web standards you must have at least one h1 collections home And let's change it to heading h1 Let's reduce this to Let's say 60 Usually 40 is a good number two Preview Up there you go quick links collections home, which is now very similar to how it looks here Of course, we added a few things the other last final part that I'll add is When to use reusable block. Well, let's say I have this social media bar down here That's when you want to add use a reusable block That we used to use because the whole point is don't repeat yourself So created once and then you can insert it in different places without having to Constantly remembering what your social links are or certain content that you want repeated on multiple pages and in my case It was the social bar and for that I would still go ahead and Browse all search for why you also have Why you a social bar you may have some other one and this way I am still using reusable blocks. It's not like they're not there anymore But the patterns is definitely what you want to use for layout All right, we're gonna head back. I think that's it. If you have any questions do contact us Now let's just go see some of the other WordPress 5.8 features that have come up that you should be aware of you may not use them for your content creation for york but at least It's good to know what is being done and what the open source community is creating for WordPress The other WordPress 5.8 features Include a wp image format, which is not accepted in WordPress 5.8 If you wonder what WP image format is it's the new compression format That is makes the file even smaller than pngs and jpegs And which in turn means your pages will load faster if there's less to download for the client Another one a little nice feature they have added Copy to clipboard when uploading to the media library. So this is good if you were Uploading it and you just need the url and you wanted to attach it to a page or to Linked it to that image or to a pdf This is a nice little handy button that they give right off the bat Other includes they have added a whole bunch of side wide blocks So you can have a site logo side tagline a whole bunch of query loops page Blocks that Basically, you can reuse across your whole site and they don't change and their standard And then finally some of the stuff we did touch about and in the screencast Which is block highlighting dual tone improve list view Easy parent select box pattern recommendation template editor, which is not Enabled in our yorku theme, but it has been released with wordpress 5.8 And a whole bunch of under the hood improvements that the team has done in the open source community And there's many other features and I encourage you to go ahead and Look it up on google wordpress 5.8 new features and you will see There's a whole bunch of others out there that may not be applicable But it's good to know Thank you for watching and sticking around. I hope you learned how to use patterns in your your pages If you have any questions or comments, do contact us. You can contact me. I'm ali My colleagues walter truss and if you work for the libraries, you know to email yourself at your q.ca if you're a faculty member or A specific faculty, you know to contact uit for your it help Until next time take care and always keep learning cheers