 So, hello everyone. I want to welcome you to Getting Started with Layout Builder for Drupal 8 and 9 here at Bad Camp 2020, virtual edition. So, Layout Builder, well, before I get started, I just wanted to hold some space for a moment for Black Lives Matter. It's something I feel really passionate about as well as canopy who I work for. And it's something I just feel is really important in this day and age. Okay. So, who am I? I'm a senior Drupal support engineer at Canopy Studios. On social media, you can find me at Danny underscore Englander, Twitter and Instagram. I have a Drupal blog. I've been blogging for about 10 years. All things Drupal. So, I go back to Drupal 6 on my blog. And of course, canopy is canopy.com. I'd like to just mention that I've been at Canopy for a few years and I've been really inspired by working with such wonderful folks there. And especially Ann Stefanek, our CEO and fearless leader and all the other wonderful folks there. So, it's just been an incredible experience. And so, that's a great segue into this screen right here where canopy is hiring. So, we're looking for some Drupal folks and some WordPress folks and a project manager. So, yeah, check us out canopy.com slash careers. So, here's what we're going to cover in this in this session. So, what is layout builder? What versions of Drupal does it work with? Who is it for? The irony of a layout builder page is layout builder extendable. Building with layout builder, theming with layout builder. And I'll do a live demo as well at the end. And then of course, I'll be happy to answer any questions along the way. Okay, so what versions of Drupal does layout builder work with? So, Drupal, our layout builder started in Drupal core as an experimental module in Drupal 8.6. And Drupal 8 has had this notion that you can have experimental modules that people can try out and then eventually if they become stable, then they're made stable. So, by Drupal 8.8, layout builder was stable in Drupal core. And then also now in Drupal 9, it's stable. And the demo site I'll be showing you is Drupal 9, but it also pretty much the same thing. Right now, there's not a huge difference between Drupal 8.8, 8.9, and Drupal 9. That'll be changing a bit, I think, towards the end of the year when Drupal 9.1 comes out. But for now, you know, there's pretty much a lot of similarities. There are some deprecations in Drupal 9 of Drupal 8.0 code, but other than that, layout builder will function in that pretty much the same. Okay, so I just wanted to, before I get going, since this is geared towards beginners, I just wanted to define some things in case you're not familiar with certain terms that I might use along the way for Drupal. So I wanted to define a content type also referred to as a node type. And so, for example, you might have a blog content type or a landing page content type or a person content type. Those are common, you know, standards that you might have on a website. And each of those might have, you know, various different fields like, for example, a person content type might contain, you know, numerous fields. For example, you know, contact info, phone number, email, website address, things like that. Okay. And taxonomy in Drupal is also known as a vocabulary. So if you might be familiar with WordPress, that would be things like tags and categories. And we've heard of things like that as taxonomy terms. That's a common convention. So it's really just a fancy name for things like tags and categories. Now entity, that's a biggie. That's something really important in Drupal. As Drupal 8 came about, more and more things were entities. So entity is a type of data. So we just mentioned content type is an entity type, taxonomy. Users are now entities in Drupal, media entities. You'll commonly see, you know, oh, media entities. Yeah, that's basically it's, you know, can be images, video, remote video, audio. Those are all media entities. And of course now in Drupal 8 and Drupal 9, media is in, media is in Drupal core. And we also have custom entities. So you can build your own custom entities with entity construction kit, one of my favorites. So you can do that. Okay, views. I won't be covering views too much, but you might hear me refer to it a bit. So views is basically in Drupal a custom database query with a visual interface to build it with. So views is something you use all the time. And of course now in Drupal 8 and 9 it's in core. It used to be a contrived module in Drupal 7. Theeming is just a fancy word in Drupal 4, the styling of a page. And then here's another big structured modular content. So we have this notion now, like if you've ever used the paragraphs module, or perhaps panels, or even entity construction kit. We have the notion of styled components, self-contained components that your content editors can work with within a certain framework that are pre-styled. So for example, you might have a hero, an accordion, a call to action. Those are all like styled components or also referred to as what I call structured modular content. So it gives content folks and editors a lot of freedom. And of course layout builder, you can definitely go to town with all this stuff that I mentioned here. And one more thing, view mode. So a view mode is just a type of a display of an entity. So for example, usually you have a default view mode on a content type, but you might also have other view modes that can be called upon to display either a default entity or on its own, let's say for teaser or teaser or something else like that. Okay, so what is layout builder? Let's go over that a little bit. So layout builder is an updated paradigm for structured content, which is what I was just mentioning. It allows content editors and site builders to easily and quickly create visual layouts for displaying content. And of course it's part of Drupal Core. Okay, so here's some things that layout builder can do. It's great for content editors. They can customize how content is arranged on a single page and across content types or other entity types. For that matter, you can use layout builder pretty much anywhere there's an entity. You can use it for media, taxonomy, all kinds of things. You just have to enable it and I'll show you that as well. You can place and order various kinds of content and layout builder blocks, fields, views, user info, taxonomy terms. The list is endless. It's really flexible. It's great for custom landing pages. And if you were here at the beginning and I'll show it more after I'm done with this presentation, you saw my little landing page demo there. So it's fantastic for landing pages. It allows for tons of flexibility for content folks, content editors. It's an easy to use drag and drop interface in the Drupal manner. So it's similar to like when you reorder paragraphs or fields in the UI. So it's really flexible with drag and drop and structured modular content similar to paragraphs or panels, but it's almost like the next generation. You can leverage custom view modes, which I mentioned on a per layout builder item basis. So it allows for a lot of flexibility. Okay, and it's great for content teams. Use for all use for all kinds of entities, no media user, etc. And you can override per entity. And I will show you that. Okay, so here's an anatomy of a layout builder page. Okay, so there's a lot going on here. So this is the default managed display for my landing page. So what I've done is I've, I've checked this green box here. Use layout builder. So normally you just have a listing of fields here. But once you check this, then layout builder takes over the page and you can use layout builder by clicking on manage layout. And there's some other options here too. So allow each content item to have its layout customized. So if you were to check that, that means you're no longer bound to the global layout in the content type. You can go into each individual node, if you will, and you can customize the layout on a per node item basis or entity item basis, let's say, because, you know, you might be using it for media or other entities. And then something down here default restriction for new categories of blocks. This is coming from the layout builder restrictions module. So you can actually fine tune what your, what your content editors are allowed to put in layout builder. So there's a lot of, if you were to expand either one of these and I'll show you that would be you can, again, it's a way of doing structured content where you're allowing certain things to be in layout builder, and you can exclude certain things. And then down here allow content editors to use stored data or stored layouts rather. So you would check that if you're using a module called layout library, which I will also show you. That's key if you don't check that then you won't see the select list to choose a layout in the edit UI. Okay, so here's some things once you, once you click the manage layout button, you will then come to this screen where you can do all kinds of things with layout builder. So you have your action buttons. You have a content preview. You can add a section. So over here we have one column, two column, two column bricks. And you can have other layouts in here as well. You can add a block. So once you do a section, then you can add a block. And I'll show you that as well. And this has an example of the content preview right in layout builder. Okay. And the supersedes the standard display UI for an entity type. So once you check that use layout builder box, then you get all this goodness here. And this is editing a block in layout builder. Now I happen to be using layout builder modal here, which expands the area where you can edit this into a modal. So you can see here you have a title. You get an option to display it. You have a label choice. And the format are usually most in most cases, you'll probably be using the rendered entity with a view mode. But there are other cases where you might just use a label or an ID, but usually typically you're going to be using a rendered entity. And then once you do that, then you can select the view mode which you're using for that. And then this style box, this is coming from a contrib module called layout builder styles. And it's great for content editors because you can create a list of predefined styles. And then your content editors can choose from these and that would work great if you're using a per entity override where your content folks can go in and they can choose. They can choose which style they want. And you can just create as many of these as you want in the UI. So who is layout builder for? It's great for site builders, content editors, marketing, marketing folks, and developers. Okay. And is layout builder extendable? Why yes, it is. So for layout builder, there's an ever growing ecosystem of contrib modules and I've mentioned some of those like layout builder styles, layout builder modal, layout library, the list goes on and on. And there's a page on Drupal.org that lists all those. Okay. And you can define custom layouts in a module or your theme. And then you have layout library, which is great. It allows your content editors to choose from a list of pre selected layouts. So they have a select list and let's say a page edit. And then you can you can just choose what layout you want to use from a select list. So here's, here's the ecosystem and I've highlighted a few modules I like. I mentioned layout builder styles. Now layout builder restrictions as well. That's where you can control what your content editors see to be able to put into layout builder modal and component attributes. I love that module. It's great for developers. Where you can do things like attributes, classes, IDs. So it's great for one off things when you're theming to add, let's say, let's say you're using block element modifier, BEM, BEM style CSS. Theoretically, you could use this to add a class as your top level block class to a component. Layout builder library mentioned and worth a lot extra templates. I think I haven't used it. These, these I have not used, but I believe it gives you extra template suggestions. If you're a theme or layout options, it looks like it does some similar things as layout builder component attributes. You get more UI options for adding things like IDs and classes. I think that's what it looked like. I haven't tried it. And layout builder kit looks really interesting. I think it has some pre made components. So that looks really interesting. And radix layouts. So I think if you've ever used, I think it's panels. You might be familiar with radix layouts. So that now works with Drupal, the layout builder. And here's this. This is the link to all the additional modules in the ecosystem. So building the layout builder. So some of the key points are custom view modes on a per entity basis. And I'll show you that. Captured by Drupal 8 and 9, config, export and import. So one thing let me just quickly show you here. So for example, I just, I just exported this content from my demo site. And as you can see here, we have, you know, I added some new styles and they're captured. They're captured by that. Okay. So now I put an answer here because if you do a layout builder override on an entity item basis, that will not be captured by config only the global setting. So once you go off and override on let's say a per node basis, that will not be captured, but you can always go back to the default if you like. So it replaces an entity display with layout builder UI, drag and drop option to preview and layout builder, which you saw on some of my screen captures there. Custom layout templates overrideable. Layout variance with layout library. Okay, so here's some a few ideas for building. So the first one you can do layout builder control that the entity type level, or you can control it on a per item basis with an override. You can offer multiple layouts using layout library. So definitely a lot of options for that. Okay, theming with layout builder. So here we have, you can see basically there's a lot of theming options here with template suggestions. So if you're familiar with Drupal 8 and Drupal 9 twig and twig template debugging. You can see here there are a ton of options. So typically you have your layout, you have your field, and then you have your entity below that. So this is a typical paradigm of how theming might work for these people here. So here you see the manage attributes from the component attributes module. And you can see here we have, you know, a top level class. You can put in some data attributes. Let's say if you were doing some stuff with JavaScript or jQuery, you can put in an ID. So that comes in really handy. I think that's great for femurs. And here's the styles which I showed you earlier. Now, this is something I really love a friend of mine who's a developer at another company. He told me about entity view, because I was saying one day, you know, I feel like there's something missing from layout builder why I want to do a wrapper of fields that are related within a layout. So he told me about entity view, which is great. It comes from all you need to do is enable the C tools contrived module. So for example, here we see we have an entity view of a profile card right within this two column layout in between other fields that are rendering separately. So we can have this whole entire card as one contained entity within this layout. So it really comes in handy. So I love entity view and I'll show you that. I think it's very powerful as well. So that's a great thing to keep in mind if you're going to be building layout builder and radical layouts. I have not tried this but it's now for layout builder and live demo. Okay, so let's take a look here. So here's this demo landing page that I've built. So you can see here we have a hero. We have some featured people so I can, I can click on these things. I just have some gibberish in there. And then we have a call to action that I've built and themed, and then we have a quote as well. So we have all these things. And I'll go over here. So the first thing I want to show you in the UI is the outbuilder in core. So to use layout builder in Drupal 8 and 9, you need to enable two modules, layout discovery, which is pretty much like the API that layout builder depends on. So you have to enable that. And then layout builder module itself. So that would get you started. These do not come enabled by default in Drupal 8. So you'd have to enable those. So here's our here's our manage display. And you can see I've checked this box here use layout builder. Oh, somebody wants me to increase my font size. Okay, let's do that. Is that better? Much better. Okay, great. Excellent. Sorry about that. Okay, and then this is more pleased too small. Okay, so let's make it bigger. Must be my big screen. How's that? More more. Okay. How's that? Is that how is that now? That's better. Good. Good. Good. Perfect. Okay, great. It must be my big screen that I'm working on. Okay. So we have allow each content item to have its layout customized. So if I do this, that means when I go to edit an individual node, you'd be able to edit the layout on that note as well. So you can see here, this is the layout builder restrictions. So you have all kinds of options where you can, you know, allow specific lists. So you really have a lot of fine grain control over what your content editors or site builders can see and what they can see. And then right now I'm allowing all existing and new layouts. But if I do this, then you can see you have a whole host of layouts. And this is what I was mentioning where you can actually create your own layout in code. So for example, I created this custom layout to column bricks, which was something in core, but it wasn't showing up here. I think it was just there to give you an example. I did my own there, but for now, I'll just go back to checking this. And then the other thing is you can also check this. But for now, I'll just leave it like that. Now, if I click this manage layout, you come over to this page, and then here's your layout builder UI. You can see here, you can save discard the order sections. Now, in my case, I only have one section. So if I go to add a block, you'll see, oh, that's weird, it was on the left side. You see you have your entity view, you have all these others fields here. Now, if you use the layout builder restrictions, you can actually this is where you can limit what actually shows up here, what doesn't show up. You have different things, you have views, you have menus. So as you can see, the possibilities are endless. So I've used this created that comes in really handy. So entity view, that's what I'm going to talk about here. So let's go over to, let's go over to. I'm going to go to content, and I'm going to edit this landing page. Okay, so we have our hero here, and we have a whole bunch of different entities and fields. So we have, we have text, we have a link, we have an image that is all comprises this right here. So if we go back here, so I'm going to go over to manage display. Actually, let me go here. So if I, if I go to edit this and configure, you'll see here that the view mode is hero. So you can see I have a lot of different view modes here. So the view mode is hero. So if I go back over here, and I click on hero, you can see I have just those, just those hero fields in this view mode. So then when I'm back over here, I've chosen that view mode in my entity view. And so it comes in as one, one big self contained entity that definitely makes it easier for theme. Now you can see here I have person twice. So if I go out here, I have the teaser of all these people but when I click, then each one has its own. Additional information which is in a separate view mode. So if I go over to here, you can see I have the person field for one the first time. And we have a rendered entity and the view mode is teaser. And then down here, we have a rendered entity and it's gridder content. So the teaser is up here. And then the, the gridder content, which is in line below each one is the gridder entity view, the view mode gridder. And it works out really well. So you're not just limited to adding one thing, like, for example, this person field one time. Now if I go over to the content types in person, you'll see all the missing new tab. You'll see my different view modes. So I have my, I have my teaser where I've chosen a person image and their position. But then when I go into the gridder content, I have that info that shows up below where have bio email and telephone. So here we have bio and email and telephone. So that's really powerful. So again, we're using, we're using view modes in layout builder in the landing page content type. So actually if I go over here, you can see people, these four people, these are just entity references to, to, to that person content type. So if I were to add another one, well, actually that's adding a new node in place. So cancel. So I could add an existing node. And you would see, you know, I could, I could just add another one there. Okay, so that's that. So let's go back to default. And I'll do a managed layout. Now, if I, if I do show content preview, it doesn't work that great because it kind of, it kind of messes everything up. There's, there's an open issue on Drupal.org to fix that because what's happening is it puts in some fake text, and it's too long and it makes it a bit unwieldy. So for now I'm not really using that too much. So now if we go here, I'll show you the manage attributes. So that's this is from layout builder component attributes. So you can, you can put in all kinds of different. And this is the one that I mentioned is great for developers. Whereas, if I go here and configure the block itself, we have these styles which are these pre made styles. Which is, I'll show you over here. So this is the layout builder styles UI. Oh, somebody is asking, is that a custom paragraph type. So I'm not using paragraphs at all on this site. I am using entity construction kit. But Eric, what, what exactly, which, what were you, what were you asking about what you thought might be a custom paragraph type. Oh, what field is that it was a thing where you could either pick, pick existing entity node or oh yeah yeah yeah. Okay, so that is inline entity form. Let me go back to that. Yeah, that's pretty neat. Yeah. Let me. Okay, so here. Yeah. So these, these are in here. These are just entity references, but I have inline entity form. So where you so that the form display of this is inline entity form, which is a contrived module. So I can either add a new module right in place. Or I don't have to go out to that other content type person. I can just create it right here. So that's, yeah, that's a really good module. I love that. And it's great for your content editors, definitely to improve UX, or I can add an existing one. So I can just start to type and I would see, you know, I would see all the different existing nodes. And that's, this is an entity reference with inline entity form, or sometimes referred to as IEF. Okay, so we're back to layout builder styles. So you have to a few choices here. You can actually as you can see you can add them to a section or component, which is really a block. So you might have section classes that your that your content folks can can use, or in the block classes. And then you have some settings here. So you can, you know, you have some different choices to allow for them to use. Now here's layout builder component attributes and this is the one. This is the one that I said was good for good for developers so you can choose. So if I go back over here. And let's say I do manage attributes. So you can choose what attributes show up in each one. So, so I could, you know, I typically don't like inline CSS so I didn't allow that. So you can see there's a whole host of options for that. And here's your layout builder modal configuration. So this is really nice. And that is, so your layout builder modal is when you do manage or configure. Here's your layout builder model and that's a contra module. So you would need to add that on as well. These are all contra modules. So this is one of my new favorites. I love this layout builder library. So this is fantastic. So if I go back over to, if I edit. Let's go over to the content edit. Okay, so this is going to be really cool. So if I edit this and I go to my settings, you'll see here I have a layout option. So right now the default is this standard hero that I've themed. But if I go back to here, I can choose hero CTA. And this is coming from layout builder library. So I click save. And now if I reload this, you'll see it totally changes. So we have a whole different type of hero now. And that's because that's because we have layout library and what I've done is I've created this hero CTA. So if I were added new layout option, you can see you can do it for all different kinds of entities. And this gives the content editors a way to choose from that select list, a list of layouts. So now if I edit this, this is in layout library. You can see I have my entity view just like in the other one, but it's using a different view mode. So this is using the hero CTA view mode rather than hero. And then I've set that if I go over here and I go back to let's close this. If I go back, let's go back one. You can see here I have my hero, which it was the original with that. And then I have the hero CTA, which also has those fields. And theoretically you could change like what media entity this uses. I haven't changed it, but I think I probably would based on the theme that I did. So if I'm over here back in layout library, you can see here I've done, I've chosen that view mode in this. And then when I go back to edit, I go back to edit. That's where this select list shows up hero CTA. So if I choose none and save, it'll go back to the default. That's coming in from layout builder proper. So if I reload. Okay. And I think I think that's that's my demo and slides. I'll just actually I'll quickly go back here. And I just wanted to mention a few things. So coming up next, there's a whole bunch of nice sessions coming up at 3pm Pacific time. And then I see a couple of canopians in there as well who are presenting and the other folks. And then there's also a coffee break to 45. And that, that is it. So I don't know if, if anybody, we have a few minutes left. I don't know if anybody has any questions. So we'll go back to our Docker component types. And that long less defined. Yeah. Yeah. Okay. Thanks, Max. Good question. Yeah. So if we buy defaults, so we'll go back to our actually go out. Let's go to our default landing page. If I manage this layout by default, if let's say I want to add a new block, these are all going to show up. By default, you don't have to do anything. So the power comes in with the layout restriction module. So, so here you can actually, you know, you can allow or restrict. So they have an allow list or, or a restrict list. So again, we have an allow list and a restrict list. So theoretically, you could, you could turn some of these on. So then when you're over in the other screen. Okay. So what would you say the main? Oh, what did min. Oh, yeah. So David, yeah. So I'm using the Claro admin theme. That will eventually be the default in Drupal nine, but on top of that, I'm using this new admin theme called gin. So it's, it's fantastic. I love it. And Eric, what would you say the main issues with this in general are the things that are troublesome in general? How does this work with Drupal views? Yeah, so I'd say it's just something. Yeah, the slides will be available. I can make them available. I would say that the thing for us at canopy, we just one of the other developers there, she said, Hey, there's this thing called layout builder. And we just started using it and playing around with it. And that's what I've been doing on my own time as well. And yeah, you can definitely use views in this for sure. So you don't have to use, you don't have to use entity view, although I like entity view from C tools. But, but for sure, yeah, you can, you can bring in views and works great. In fact, you can even set the view mode on a view for that. Yeah, so can sections layouts be nested? Well, that's what I was talking about with entity view. So if I if I go back to here, actually, let me go to that slide. So if I go back to that slide here, you can see this is entity view but this may as well be a view as well. So this is an example of nesting this entity within these other fields. So you have a field called bread crumb, you have interest, you have topics. And then this would either this card would either be a view, or in my case, I'm using entity view, which I love. So yeah, you can use views or entity view. And that would be great. Wow, really good questions. Thanks, everyone. Yeah, right. There's, yeah, there's core issues for nesting sections. Yeah. So I think for now either a view or entity view would be the way to go. If you need to do that. And then you can then in a sense you have a layout within a layout. In fact, you could even so for example, let's say, let's say I go back here. So in one of my view modes for my entity view, let's say I have hero, I could actually, I could actually use layout builder for that. So yes, it is a tricky UX issue. So you could use layout builder for this entity view that's over in here. So when I go to manage layout, when I when I set this entity view up and configure, and I choose this view mode hero that could actually pull in a layout builder layout. In my case, I didn't but you could just as easily do that as well. So yeah, here's our, here's our landing page. And we're almost at time. I just I love all these questions. Thank you, everyone. I'm so grateful. Thank you. So those things exposed for content editor. Oh, yeah. Oh, shoot. Okay. I meant to show this and I didn't. I meant to show this and I didn't. So, okay, so if I go over here, I'm going to say allow each content item to have its layout customized. So Max, here's the answer to your question. So now when I go to my node, so I'm going to go back here and I'm going to edit. So see now that I've allowed overrides, you now have a magical layout. So imagine if you will you're the, you're the content editor. So now on a per entity item basis, you can choose the layout and see now we have a new button referred to defaults. So as you as a content editor, you could give your content editor certain view modes to use, and they could choose all these classes on a per entity item basis. So for example, for this node, somebody could use hero CTA defined as kind of presets. Well, layout library does that as well, which I showed you. Yeah, so if I go back over, if I go back over, I had layout library. So you might want to, you know, you might want to choose what you're going to do. So this select list is from layout library. So this would be your presets right here. So if you didn't want to allow overrides, this would be your presets, which is coming from layout builder library. Yeah, yeah, I am so this is wonderful. Thank you so much everyone. How custom styles can be added to. Yeah. Okay, so custom styles. So if we go over to, we go over to structure configuration user interface. So if we go over to layout builder styles. So here's where you would add pre selected styles for your content editors. So you could you can add a new layout builder style. You know, and you can add your class and you can choose if it's for a blocker section. So I think that answer is that question. So this is from the layout builder styles module. And, you know, you can set the order of these. Yeah. Excellent. Yay. Okay. Well, I think we're a time. So thank you very much everyone. It was great seeing you all. And I believe I can probably post the slides on on the bad camp page. Take care.