 Anyway, so, yeah, have a talk, just a small intro about Labbuilder and Drip-of-Canvas. So Labbuilders are templating a plugin for when you create your content type. You have, like, a managed display and you can rearrange the fields. And Drip-of-Canvas is a, like, JavaScript CSS kind of library built into Drip-of-core as well. Sorry, I'm still copying you. Okay, I just have to go really close then, I guess. I'll go over that anyway, that was just the introduction. So a little bit about me, I'm Sarah from Moga Moga, and I came to Canva for work. So the company then was Adobe Digital and now I'm brought out by EY. And I've worked on a few different technologies, like migrating solar and things like that. And on my spare time, I like going for park runs, playing soccer and playing board games as well. So this is just a small agenda of what we're going to go over. So we're going to talk about, yeah, just the introduction to Labbuilder, how it compares to the space suite. And then a few notes about our revisions and how to, like, group fields. And then a few, like, customizations with some code on the screen, which I'll provide a link as well and then a demo. So first of all, view modes. So what's a view mode? A view mode is a way of showing a specific layer in a specific way, in a specific context. So you can say, on this view, I will have, like, this layer. But then on this other page, you have a different layer. So it shows a, it's rearranging fields, hiding some, showing others. So I've got a mini diagram there with some squares, so representing fields. So you can have, like, two groups together and one at the top. And then you can, like, rearrange depending on different, yeah, view modes that you're using. So view modes are, yeah, the different ways of showing your content. And so there's a few different plugins that you can use to spy view modes. So one is the, this is the built-in one, and TV to spy. So it's very limited. You can rearrange your built-in configuration fields, but not, not anything else. So, like, not your teaser links, your book navigation. They're, like, kind of hard coded into the template. But you can rearrange, like, the body and the comments and things. And you can't, like, duplicate the fields. There are, like, some other kind of small workarounds you can do. If you want to, like, duplicate the fields and things, if you have, like, the C-Tools module installed at the C-Tools box, which is a dependency of Path Auto. So there are, like, some small workarounds. But, yeah, more by and large, you cannot, like, replicate the fields and things, which is important. Sometimes you have some fantastic designs, and you need to, like, put them in different areas to show and hide. But you can't do that with the default layout. So now this is layout build-out. So this is the one I'm going to talk about. So this is the pros and cons, as you can see on the screen. So it allows you to have different fields. You can have different, like, sections. And different, like, every section can have its own kind of layout. So you can have, like, two-column layout, or, like, two rows, or three rows, or whatever. You can create your layouts in your theme. And then you can also, the biggest attraction is adding blocks. You can have blocks between the fields, as well, as well as duplicating them. And also, because layout builder is interval core, you can use it on Garsems and anywhere you want as well. Or you can also override the placement per entity. So you have to have the same sections. So if you've got two-column, it's less than two-column. But you can decide, oh, in this content type, I'm going to reverse the order. But still two-column. Just a few notes about the space suite. So that's another popular module. Sorry. But it's a little bit dated. There's a few bugs and stuff in the space suite. You can do some things like you can duplicate some fields and things and use tokens. But yeah, there's a few. Yeah, issues has limitations with block context. And it doesn't kind of play well with context module. So metadata sometimes doesn't translate that well. So yeah, there's a few issues with that. And it also doesn't really show well with the revisions as well that the markups are a bit different. So now I'm going to go a little bit over how to use layout builder. So very easy. You just go to your manage display on your content type. And down the bottom of the screen, there's a use layout builder. So obviously you have to enable the module. But other than that, you just tick the box. The page will refresh. And then you go into the manage display button at the top of the page. So usually you'll have your fields there on the screen. But instead, you've got this button which takes you to another screen. And so this is the screen where you rearrange your fields. So I've just got my default content type there, which is a couple of different fields. But you can see that there's a one section there. You can add an additional section. You can drag and drop the fields because it's got the dotted line. And when you click add section, that right sidebar will show up with your different layouts that you currently have in the system. But yeah, you can add more to the theme there as well. And also other modules. But if you're, yeah, you can go. Similarly, there's not too many add-ons for lab. But I think there's a lot of restrictions in the distribution. But yeah, if you just want to use triple core, then you can add the last through the theme layer. This is just an example of a two column layout just to show that you can actually visualize the layout while you're editing it. You can also, there was beforehand, there was a show content preview button at the top of the page, which will show Crescent dummy content. But not always that helpful because sometimes it will show loss of content. So like body content, also like five or six paragraphs, when you're like, I usually don't put six paragraphs into that just like one or two. But you can give like, it's a little bit of, you know, out-of-the-box functionality. It's not too bad for saying what potentially could go in it. And you can also in these sections, you can have the different features. So this one has, you can configure the column in the middle where it goes. And then the CSS can apply to that as well. So now to revisions. So there's a module called field group, which you probably use a lot. It's not compatible with layout builder. So if you want to group fields, you either have to add like multiple sections to group your fields into different divs. Or you can use the views block. So you can add views block as your field, then pass the content that, so the node ID as the context for that view, which will display the current node again, and then choose what field you want. But views doesn't currently support revisions as a contextual filter. So there's some limitations with it. But if you want to use, but you can use revisions as showing like the top level or using the C tools module as well. It can provide another block, which can show the view mode. So you have one node and then you have another, the same node within it again, but with a different view mode. That's another way of creating like, a HTML around your fields as well. So just a note about that before we go on. So this is how to add a view block. This is one way of doing it. So I'm going to show both ways through the view block and then through the nest of view mode. So you just have your view block here. You just add your contextual filter at the top using the content ID, so the node ID. Then at the bottom of the page, there's like in the pop-up, you specify the validation criteria and select content. Once the select content is selected, then when you add the block, the option will show up for the, just pass that contextual value to that context, which we can see on this screen here. So in your sidebar, when you choose a block in the light blue screen and the manage display, there's like your different boxes and things that show up. So you can see views is there. And then the content ID is there as well. Now just to note, the light blue to view, that's just my dummy name that I chose, doesn't actually have to be called that. You can call it whatever you want. So for the entry views of the nested display, to do that, so you create another view mode on top of what you're showing. So you might have like the full page view and maybe you'll have like sidebar view or something. Then you would show that as a field as well. So you go add the view mode. That's a pretty strong one. There we go. Yep, and then you choose your interview from the chaos tools, from the C tools module and then choose that your view mode. So I put fill group in, but it can be whatever you want to call it. And then you just, yeah, press add block. There's one thing to note about it. Of course, if you're using like the triple column of things, there's always a few like hacks and stuff you have to do to get around these things. I'll show, there's a link to these code after it, like the end of the slide. So you don't need to worry too much about, you know, remembering what it is. But yeah, there's a few notes to take into consideration. So by default, the title will be displayed again because it's obviously two nodes shown. So you can set the page variable to true because in the default node to file, it will, usually when it renders, there's like the page title block. And so if it's true, it will assume that it's a full page view, so it won't re-render the title. But when it's like, yeah, in a nested block, you'll be false and so you'll print again. But actually, it's in this full page node, right? So you don't actually want to show it again. So there's a few ways of getting around it. So you can use preprocess, you can use that node to override, or you can just simply write some CSS where it looks for the node div. And if that node div is within another node div, then you can just hide it away. Oops, there we go. So onto a few customizations you can do with Layout Builder. So out of the box, you have the bundle classes. So that's like, you have the node and then you have the content type. So you have node dash dash, my content type. But the layouts are kind of in nested divs. So you can't get a bit long with the CSS rules. And so if you want that second level of the second screenshot, which has this much simpler CSS rule, this is some sample code that I've developed that you can do that. So to do that, you've got to create your own layout. So you've got to, for a very simple version of it, you just copy and paste the one call layout from the layout discovery module or the Layout Builder module. And then, so copy and paste the tweak file and then we've got to create a layouts file and then the layout plugin file as well. So one is you just copy and paste. The other two will go over the code for it. So the first one, it's just a copy and paste. There's no changes here. You just copy and paste literally. Then for your layouts, you have a file. So this is what you put in. So more or less copy and paste, but you've got to adjust a few of the keys. So you've got to make sure that your template file matches the template key at the top. So that's the name of your file. The folder, the path key, that's the path in your template folder and your theme. And then the class key, that's the name space to your PHP class, which is going to add the actual HTML classes. Yeah, so this is our plugin HTML class. Sorry, PHP class. So I'm just going to go quickly a little bit over it. But yeah, you can see it's a class there with a few use commands. And then there's a few different methods that you've got to use to use the PHP class. So one is default configuration, build configuration. So build form, validate form. Yeah, and then build command as well. So this is the default configuration. So that's like when you first set it up, it will merge all the settings together and that's just like your default. The next one is the build configuration. So that's on that right side bar that I showed earlier with, we've had like administrative label and then on the two column layout, had the different ratios that you can use for your two column, like where you want it, 30% on one side, 70% on the other, et cetera. So this one, no real change here. For this one, it's just copy and paste. I like seeing what the current section layout is being used. So I just add a like H-static just a label there on the screen, but there's no real change required for this build configuration. And then we've got validate. So nothing to validate there. So that's just a copy and paste because it's implementing the plugin form interface. And then we'll submit configuration. So this is where a little bit of magic happens. So we've got to have extra method to extract the bundle and like the entity type and a few other things like that. And then finally we assign it to the settings configuration so they get saved into your export of configuration when you save the section. So this is what the, well, my version of it, it looks like of the custom extra properties. So I split onto two slides. There might be another way of doing it, but yeah, this is the way it's worked for me. So I won't go over the code really, but it just gets one of the sections and then extracts the contextual values and then assigns them back to the return variable. So you've got the view mode bundle and entity type there. This is our, the build function. So this is actually what happens when you get when the section is displayed. So yeah, we're literally just extract the values which is the entity type, the bundle and things. And then we just add it to the attributes class array. Another thing to note, so sections don't have the classes, but also fields don't really have classes much as well. So your generic entity view display does have classes for your field divs, but layer builder fields don't. So if you need extra level customization there, this is one way of adding extra classes here. I've just shortened it. You might not want to call LB dash dash field, maybe call layer builder block or something. But yeah, just a short insight, you can see it on the screen. It does have some classes, but they're like really, really specific. So yeah, if you want to like just target, say body on all the layouts, then yeah, you need to add an extra level of extra target CSS class. So the first example I went through was around adding HTML classes. This is another version of it where you can add like your custom HTML classes. So sometimes you have like the same node in two different places, but on this certain one, you want like a different color or something, and it's just like a once off. So this is the configuration required to put that in your lab builder plugin. So you just got the extra custom classes string. It's just empty in your default configuration. Then yeah, just got another text field setting. So you can put your classes in and then yeah, basically you submit it and you just store it. There's nothing really to it. And then find the build, you just assign it just like the other one, assign it to the classes attribute array. So on to Drupal of Canvas. So Drupal of Canvas, yeah, as I said earlier, is a like module CSS kind of library built into Drupal. So it's not actually a module. It's like a series of like libraries that you can just reference in your theme layout or your module. And so as you can see on the screen, this is just a screenshot from the Drupal documentation site. There's a few different versions of it. So I'm just gonna focus on off Canvas, but the other ones like modal popups as well. And so yeah, it just shows on the right hand side and you can put different elements into it. This one has a form, but you might want to just put some supplementary information so the page doesn't refresh. Another bug to be aware of. We always love those bugs. So with the views block, views page, I mean, sorry. So when you use the Drupal of Canvas, usually you'll Ajax the content in. So it'll be a link with some different classes. And then when you click the link instead of actually going to the page, it will do Ajax request to that URL, fetch that content, put it into the sidebar. So one easy way of doing it is just having a few page. So you just have like your contextual values that you pass through in your link. But however, there's a bug in Drupal Core where the title doesn't get converted from a render array into a string. It will just get casted directly to a string. So you'll just get like this title called array. So actually we need to like make sure it's converted to a string first. So one way of doing that in the theme layout. So as I said before, I mostly work on GoCMS. And so there's probably other ways of doing it, but yeah, in info alter you can use in your theme layout. So yeah, we add a pre-render callback. And then this is what the class looks like. And then yeah, in your pre-render method, then you just see if it's array and then you render it to string and then return it back. Telling you to note that I'm implementing the render callback interface there. So that's a new feature, I think. At some point during the Drupalite cycle, there's a security fix so that people can put like objects and stuff to tweak. So if you want to do any pre-render callbacks, then they have to implement the pre-render callback interface. So this is a few examples of how to use off-campus. Drupal for canvas. So one is through just doing HTML. So you could have like a view block or a few page and then you just attach to libraries and then you can add some, then you add your link and then finally you got the dialogue type and the dialogue render out and it goes off-campus. So this one I'm just running a page view page. So when you click the link, it will fetch that page and you can see here that I've passed a term ID as an argument to it. But you can also pass some other parameters like your current page if you want to share the current page or something like that for a social link or something. This is the same version but in a tweak file. So the first one was just like copying page into your view but this one is like if you have some link field, then maybe you have some link field that you want to override the link and just keep the title. But you want to use the link field just so you want to keep in the template instead of in a view or something because you want that revision support and stuff. So it's basically the same, you just override and attach the libraries and things like that. There is one thing to note. You can see on line 46 there that we check if entity type and object exist. So when you're previewing content on late builder screen, the way that generates dummy content doesn't always have those elements there. So that can crash the manage the space screen. So we definitely don't want to do that. So that's why we just add that extra check there. But when it's usually rendered, those properties would exist. So there's a few other tricks you can do with off canvas. So you can like react and add some classes to the dialogue or to the body texts and things. So to this one is adding the my thing suffix class to the dialogue. So I've just simplified this, but you could have a few different dialogues. And so you have to class suffixes would be like dynamic. And so yeah. So in this one, we load up, check all the links on the page, see if they have the my class, my extra class class. And then we add it to the dialogue, set an option to the dialogue option settings. So on the next slide is the dialogue options. That's where we add the suffix classes in. And then also we can check if the off canvas one that we currently using is the one that we want to target. So I've also set a property there called is my thing equal true, which we can check later. We can also set the width or you can just leave it default. So you don't actually have to do this JavaScript. It's only if you need to like customize it. Cause like by default, it just has a default classes. So if you have two versions of it, then you can't really target the version that you want. So how to use that my thing property. So you have a few event lists that you can use in JavaScript. You have the for create and for close. So in this instance, maybe I want to make the body a little bit dark. So I want to add a class to the body tag. So when we create it, then we'll check is it my thing dialogue. And then we add the class and then same thing with the close. So when you close it, check if it was my thing and then we remove the body class. Another thing you can also do with it is you can detect the width of the off canvas. So maybe you have some element on the right hand side that's like stuck with the sidebar and moves with it or maybe you have some other element on the page. They want the width to be the same. So this is one way of tracking that. So yeah, it just has two event listeners. One is like when it gets created and then we attach it cause every time you click on it creates a new element and then we've got to attach another event listener to that element to change a property of a different element with the width of what the sidebar is currently at. So I'm just going to go over a quick demo. So there's two kind of demos here. Go quickly over it. So one is the same variable port website. So this is one of the websites that EY developed. And so we used to have off canvas and lay builder in it. So if we go to a content page, so in this one it's a report. So lots of scientists and stuff on the site it. And so on this content page where we're talking about air pollution, we can click this button on the right hand side. I think this page, yep. And then it will fetch the taxonomy tag of the current page. So every menu section is called a chapter. And so yeah, each page is tagged with a chapter. So that's how on this sidebar, we can fetch like the author and the equality title. And so yeah, that's the contextual ID that's passed to that link. And then we also pass the current page so you can share it as well. And then we've got some JavaScript buttons so you can like generate your citation file. So that's one way of using off canvas that I've found. And I thought that's pretty cool. And yeah, if we go down to an accordion item, so, okay, do we go to a picture? So this one has the classes and stuff, as I said before. So if we go into the inspect element, you can see, oh yeah, so there's one of the fields which has the different classes on it. Oh, here we are. So you got different sections. And so in the HTML, the different sections for that build are called regions. And you can see here, we've got block lab builder and then we've got the fields there. And on this one, should have the, hello? Oh no, this one, sorry. Yeah, so we've got a viewmaker of media to call layout so you can see the different classes shown there. And one thing to note with this image one is it has two two layouts. Yeah, okay. So you've got two layouts here. So not only can you run lab builder from AJAX, you can also just have another div in the page and then run your content from there. So we have this picture of aircraft which is image style. And then if we click to expand it, then it loads another div and that's also through the dialog library as well. So the off canvas and the pop up also use the same like base. So you can see that the body and stuff is all darkened down as well. I might just leave it there. I think we're running it a little bit out of time. Has anyone got any questions on lab builder? I can bring up another demo site if you've got any questions on the files. But yeah, is there any questions on lab builder off canvas? Yes, sir? I'll bring the mic around. Oh, yeah. Yes, yes you can, yeah. But if you're using a different theme, then you'll need to, yeah, might need to do that some functionality. So if you have like a module, so if you're not using GovCMS, you have a module, you can add your CSS module to both admin and your theme side, your front-end theme. But yeah, if you're not using an extra module, then you might need to duplicate your CSS. But if you're not, don't need to start at all, then yeah, you can just plug it straight in and we'll be fine, yeah. Another question? Oh yeah. So when you're using layup, what sort of challenges do you, so you switch from layup builder through an old traditional Drupal stuff. What sort of challenges did you get with layup builder? Of course it's greatness of all sorts of issues and you need it, but I mean you're changing things, you get a new set of problems or these things you could do easy for them. Is there anything like that that you found in there? There are like some add-on modules not compatible that well. So as I said before, there's a field group. I think there's another one called link class. I think there's another module that doesn't really play well. So when you're showing a field, you have the formatters. And some modules can override the formatter. But sometimes, yeah, the layup builder for some reason, the setting screen has a different incoming pitch for you, right? And so it errs out for that particular one. So yeah, for that one, you'll use a view with the block and then show the field that way. Or you might have to create your own field to override if you need to add a specific class. But usually the inbuilt field classes are okay. Yeah, so there are a few things, but most of the time you can get around it with live views and stuff. Yeah. I've got to go. Oh, yeah, cool. So yeah, run for the code sprint as well tomorrow. Yeah, and if you have any feedback, leave it on triple to org. And this is also, there's a demo site which I was gonna show, but I ran out of time. But it's basically all that code synthesizer just showed you where, yeah, the triple code base is just there. It's just a default theme. Yeah, and you can just have a quick run at the code and the copy of the slides are also on that link as well. Yeah. Cool. All right, thanks everyone.