Getting Started With Layout Builder for Drupal 8 & 9

okay so let's start uh danny englander is going to be presenting getting started with layout builder for drupal 8 and 9 for us today at drupal camp asheville danny is a senior front and drupal developer over at bixel and he's been with them for a couple of months now and before he begins i want to do a little bit of short housekeeping again if you want transcriptions there's a link at the top of the chat where you can click on the link and see transcriptions also um be aware that anything that happens in the drupal app asheville space is um please abide by our code of conduct you can go to the website for more information or into the reception hall and hop in and you can see that bobby and elena are our code of conduct uh people for for the event and it applies to chat it applies to um slack all of the spaces where we interact with each other and without further ado danny why don't you take it away with getting started with layout builder for triple eight and nine ah thanks a lot amy june uh welcome everybody i really appreciate uh folks coming out today um for uh getting started with layout builder for drupal 89 we're here at drupal camp asheville july 9th 2021 and before i get started i'd just like to uh mention a few causes that i feel very passionate about um i've supported both of these um over the past year either directly and indirectly as well um stop aapi hate uh and aapi stands for asian american pacific islander and as some folks might know there's been a lot of violence um recently in recent times against against that that group of folks and also black lives matter um very supportive of that as well um so i just wanted to mention these two uh okay and one housekeeping thing pixel is hiring uh we've got a slew of positions open drupal developers marketing all kinds of uh we've got some ux positions so feel free to head on down to uh pixel.com careers and um who am i uh i'm danny englander uh senior front-end drupal developer pixel on social media i'm danny underscore englander uh twitter and instagram pretty much um and i have a drupal blog that i've been writing on for about 11 years so um danny englander.com and i'm very passionate about learning and i'm actually celebrating my 25th year now as a web developer for my career uh so it's a year of celebration 25 years um so what are we going to cover in this what is layout builder what versions of drupal does it work with who is it for anatomy of a layout builder page is layout builder extendable building with layout builder theming with layout builder and i'll do a live demo at the end and and um you know i actually have the question i actually have the chat in a separate window so i'll be able to see if there's any questions um okay so what versions of drupal does layout builder work with well it started in drupal core 8.6 as an experimental module and then by drupal 8.8 and above it it became stable so it no longer had the experimental uh moniker on it and then with drupal 9 it's also stable um and today the demo that i'll show you is drupal 9. uh it's working on a drupal 9 site okay so before i get started um in case there's some new folks to drupal um i'd like to uh define make you know define some terms that might that i might be mentioning along the way uh so uh the first one would be a content type so a content type in drupal isn't is also referred to as a node type um it could be like something like a blog a landing page a person content type taxonomy and drupal is also known as like a vocabulary so that would might include tags categories places things like that um if you're familiar with wordpress wordpress uses uh you know a common convention in wordpress is tags and categories so that would be like a taxonomy um a block in drupal is a piece of content that can be placed within a region of a page so it's usually independent of what i'll call an entity although a block is an entity too um and i'll define entity in a minute uh media so media is also an entity um so media can include images files videos audio um and of course we have entity it's entity and drupal is a type of data so you might have a content type taxonomy as i mentioned you know vocabulary users are entities media menus you even have custom entities in drupal either you know handwritten with code or you have eck entity construction kit which is a fine module i love that module and um and there you can create your own custom entities and and eck is comes in handy for a lot of things um drupal config so drupal config starting in drupal 8 uh are drupal settings exported into code uh which is excellent it's a it's a and the code is yemo uh yaml data files uh you know in drupal 7 we were used to drupal features uh but now in drupal 8 and 9 we have config and that is certainly star uh solved a lot of issues uh around site configuration um and git uh git is a method to store inversion code that comes in handy as well uh and the biggie here is structured modular content so structure modular content if you've ever used like the paragraphs module um you know where you can rearrange different components uh basically it's like styled components for your content editors and a view mode uh view mode is the display of an entity okay so what is layout builder layout builder is an updated paradigm for for a component-based structured modular content plus layout it allows content editors and site builders to easily and quickly create visual layouts for displaying content um and you can see here i have like you know different types of layouts we have a one column two column three column and then what's also known here the fourth one is you know they usually call this bricks um okay so use cases what are the layout builder use cases well one might be that content content editors choose from a selection of pre-defined layouts via layout builder library uh content editors choose from a predefined layouts where you can also override override those on a per entity item basis using the layout builder ui um and then maybe a third use case would be fields on an entity uh which might be a good use case for retrofitting layout builder on an existing site that has a lot of fields set up for an entity type so that might come in handy as well um there's also things like i know um [Music] i know that uh i know that um risd uh a drupal agency did a site for risd for their uh student art sites where each student could have an individual um site uh that they set up in their own layout builder page so they were allowed to kind of go to town with that and do whatever they liked um very interesting use case there um so here's an anatomy of a layout builder page um okay so at face value right from the get go when you click on manage display on your entity type in this case let's say a content type um basically this overrides what traditionally you're used to where all the fields show up so when you when you check the box to use layout builder then you get all this and you can manage the layout and then when you click that manage layout button then you can choose from all kinds of things so you have your action buttons and content preview can everyone still hear me oh i guess we had some background noise okay so yeah okay great okay that's much better thank you um so we have our action buttons at the top here so you can click preview um you know so you can decide to show or hide a preview you have your column selection for sections um you can also add blocks here and this supersedes the standard display ui for an entity type and this gives you a feeling of what the layout builder ui looks like um choosing a block interface so um here's where you click add block in the layout builder ui and you might get a selection of blocks here or you can create a custom block um so so maybe you have some pre-defined blocks that people can use um so it's very very flexible um this is an example of a layout builder configuration for a block so in this case i have a block called r statistics and within this i have eck entities that can be rearranged almost like paragraphs and you can choose a background color with visual color choices and then down at the bottom you have styles predefined styles that you can choose from so it's it's very user friendly um it's it's almost like a a common paradigm that we're used to with paragraphs if if anybody has used the drupal paragraphs module so it's very very similar to that so who is layout builder for well it could be for site builders content editors marketing folks and developers so it it definitely applies to all these these groupings of of people um is layout builder extendable yes it is um we have an ever growing ecosystem of contrib modules define custom layouts in a module or your theme to extend it and of course layout builder library is is really nice module where you can offer alternate layouts to your content editors just by choosing a select list so let's say you don't even want your content editors to go into delay the actual layout builder ui you could give them this select list that would allow them to choose from some pre-defined layouts and i'll show you an example of something like that um so there's a big ecosystem these are kind of my go-to contrib modules that i like to add on to layout builder layout builder styles and that's where i showed you those pre-defined classes layout builder restrictions is a great module where you can you can greatly simplify what content editors can choose from uh so this module really comes in handy because otherwise uh sometimes sometimes it's a little overwhelming if you just allow everything to show up for content editors so restrictions module comes in very handy and you can greatly simplify the ui using that um layout builder modal that is i love using this module because it it greatly expands the content area when you're when you're configuring a block uh and doing block settings within layout builder ui because if you don't use the modal then everything is in kind of a narrow sidebar so that really helps as well um layout builder component attributes that's a great module for for developers maybe they want to add you know a one-off class or an id a custom id or some data attributes so that i would say this is a good module for developers you know to to add some custom classes you know while styling and theming uh the layout builder library which i mentioned for pre-defined layouts using a select list um layout builder operation link it's a tiny little module but what it does is if you're allowing overrides and i'll talk about overrides if you're if you're allowing overrides on a per entity item basis then this adds a little um uh display link right on the main content page uh so that definitely comes in handy and worth a look uh layout builder advanced permissions um and there's also one i don't have on here it's called layout builder lock and i've not really gotten into those two modules yet but they should definitely show some potential in terms of governance if you want to um have you know very specific governance over what people can and can't do you know your content editors within the layout builder ui okay so building with layout builder key points so it replaces the entity display with layout builder ui so when you go to manage display for an entity let's say a content type you would check that button you know uh use layout builder and then that would replace that would override drag and drop functionality within the layout builder ui which is fantastic option to preview and layout builder ui so there's a little toggle button to you know show your real-time preview which is nice um custom layout templates which are overrideable layout variants with layout library as i mentioned um and custom view modes on a per entity basis so what you can do is and this is really cool you can you can use entity view which comes from the c tools module chaos tools so you can enable you can and you know you can download or however you do with composer you can enable the ctools module and then you get something called entity view and you can create a new view mode for a certain part of the page and then call that in an entity view and this solves this solves a big problem because um one one one request i see quite often maybe in drupal slack is you know oh i want to add a wrapper around a certain number of fields and there's an open issue for that in core um on drupal.org but until then we have entity view which is fantastic and what it does is it it creates it creates a wrapper around designated fields set up in a different view mode than your default display and then you get a nice entity template for all those and you can go to town theming that so it's really nice and much of this isn't capture is captured by drupal 8 and 9 config export and import one thing i would caution you have to be careful with blocks because blocks are a little finicky in terms of um you know uh the way it's captured and config you might not get you know because part of blocks are content and part or config and there's various different methods to work around that um so yeah you just want to be aware of that and here's a few ideas for building so layout builder controlled at the entity type level or layout builder controlled on a per entity item level which means as a site admin or as a site builder i'll say i want to allow my content editors to override on an individual node basis uh for layout builder um for that let's say you have a specific content type and i'll show you that as well or you can offer multiple layouts to choose from per entity using layout library or a combination of some of the above theming with layout builder okay so layout builder styles allows for pre-defined custom html classes per section or block um twig custom template suggestions of course um and i see a few questions in chat i'll get to those in a minute and view modes can be set per entity and leverage via template suggestions um and that's where entity view comes in handy and i'm just seeing that in the chat it says feel group also does some of the wrapping uh but as far as i know i don't think you can use feel group in layout builder um there's a bunch of issues open about all that so that's why entity view from c tools comes in really handy because that that achieves the same thing and it's actually even better um so yeah uh let's see panels and page manager yeah so um somebody asked about panels um you know i haven't used panels in many years i haven't used it since the drupal 7 days um so i i can't comment on you know that this is i think this is a more accessible solution than panels uh because you do get that visual um you get the visual clues uh so i i think layout you know let's say it's kind of like the next panels for drupal 89 um if you will uh but i i haven't used panels in drupal 8 um so i haven't used it in many years since drupal7 and of course entity view as i mentioned that comes in super handy okay so here's an example of some twig template output so you can see here you get a ton of uh you get a ton of drupal um twig templates suggestions um you know at the usually in layout builder at the top level is a block and then um whoops i'll go back here and then you might get your entity within that like let's say node or taxonomy term um so it's it's really great to theme especially like i use i like using block element modifier also known as bem or bem and uh it really lends itself to that so it comes in you know it's just great uh in terms of getting nice template suggestions uh also if you use the layout builder styles module that will give you extra template suggestions based on the style that is selected so that's really cool um and this is layout builder component attributes so this is the module that i was mentioning that comes in handy for developers so you can see here like i've put in a class of hero so that might be your top level um that might be your top level uh block class if you will you know for using block element modifier uh and that that is really nice and then that's captured by config as well and here are layout builder styles with this red arrow and here's entity view so you can see here that and i'll show you an example of this in my live demo um you can see here like i have a bunch of fields um in a two column layout for layout builder but within that i have an entity view that's a profile card where i have a wrapper um because otherwise you can't really create wrappers again there's a there's an open core issue for that but until then um until that's resolved uh entity view comes in super handy i mean you could also use a contextual a traditional view like a views view um and you'd have to add a contextual argument to that uh but this is really nice because then you don't have to go creating a view you just create a view mode which is super quick and then you can set your fields on that alternate view mode um in my case here profile card and then then this profile card gets themed as its own entity uh self-contained with a wrapper and everything so it's really neat um and radix layouts for layout builder i have not i have i have not tried this but it looks interesting it just gives you a ton of possible layouts um i don't know i almost feel like it's too many here but uh you know it it might serve a purpose so you know give that a try sometime um the last i saw wasn't it wasn't compatible with drupal 9 but i i think that's probably been resolved by now um and what about paragraphs yeah so well okay so i i probably should put an asterisk by this because the original you know the the contrib module paragraphs it's not really a visual layout tool it's a content layout tool where you you know you drag and drop those paragraphs around but you don't really get a visual preview however there's a new kid on the block called layout paragraphs and with layout paragraphs 2.0 alpha 2 which is cutting edge so you you want to be careful using it um that has that has front-end editing visually now um so so yeah layout paragraphs and the cool thing about layout paragraphs um is you can retrofit it to an existing site that has paragraphs um i see a question here does layout builder have any impact on performance um no i don't think it does because in the end it's just standard drupal templates that you would you know that you would uh use just like any other thing so when it renders you know it's just your standard drupal templates and in fact um at my last company we built uh we built a huge um layout builder site and we got a performance score in lighthouse of 99 and 95 of that site was built was built with uh layout builder so we got stellar performance scores um on that so yeah uh but all i digress paragraphs is yeah i could go on about that um layout paragraphs is great so let's do a live demo here okay so um how we doing on time yeah we're doing pretty good um well yeah of course caching yeah i mean yeah you're gonna want as much caching uh as possible but that would apply to anything really um yeah so that's that's important any you know the more caching you can have the better uh is a good rule of thumb for drupal um okay so at the very heart of layout builder you have two modules here you have layout discovery and layout builder both of these are core and so you'll definitely need to enable both of these um and then you can see here i have my i have my you know contrib modules that i like using um i have you know layout builder component attributes modal operation link restrictions uh styles i've got layout build layout library and uh gin layout builder so that's that's an add-on because i'm using this contrib theme called gin which is a which is a sub theme of the new core admin theme called claro which is still in experimental mode so i'm kind of on cutting edge here um okay so let's let's proceed so so here's my here's a landing page uh with layout builder and you can see here i have a hero and um i have you know these statistics and i have uh our team and you can see here like i'll show you this in the in the layout builder ui you can choose visually what color you want the backgrounds to be for these so i've chosen navy blue for this and red for these people um i have an accordion here with an faq so as you can see i have many different components um i have i have a video component here with a caption um i've got a call to action uh here component i've got a i've got a quote component um and i have uh you know like an image image and text component with and the image has you know a caption and attribution um with it with a call to action button um so i have all those and then in layout this is the same content type for landing page i have an alternate layout set up in layout builder library where somebody can choose this alternate layout so i have a different hero image i have a different type of stats um i have you know this this person these this person component area um i have like a full width image um i have a video and a different quote and a different type of call to action um so that's all done with that and here's my manage display page so this is your this is where you usually see all the field listings but once you choose uh use layout light use layout builder then that overtakes this and you the fields disappear and then they they move on over into when you click manage layout um and you can see here allow each content item to have its layout customized so you can think of that as basically overrides on a per entity item basis um so on a node edit page you'll once you enable this you'll see a um you will see a layout tab where you can then override that layout just on that node um and and this is down here this area is layout restrictions layout builder restrictions so i should probably make this a little bigger yeah maybe that helps so here you can say what you will and won't allow to be used in layout builder um in the ui so this really helps to simplify um somebody's asking what happens to your content what when layout builder is disabled yeah so it goes back to it reverts back to the default your traditional manage fields if you will um so let's say i can go let me go to this teaser here that might help you visualize this um so here here's your traditional you know here's your traditional fields ui so when you disable layout builder it would just revert back to what we've all known you know what we're all used to before layout builder where you know you can you can rearrange these fields and you have you know these settings here and um so yeah it just reverts back to that um so then once i click on manage layout we would go over to here and i'll turn off the preview so here's our layout and you can see we have all these different you know we have all these different blocks um and uh we have our you know another two column region where you can if i click on this you can see i can change you know the percentage of the columns which is really neat um and then all these you can configure so i can go over here and configure this and this would edit um and you can see here i have this reusable button so what you can do is this is a patch um that i applied um and you can make uh you can make a block you're using reusable which is interesting but you have to be aware that once you make it reusable if somebody changes it somewhere else it would change it on your page as well so you might want to apply some governance around that of who can do that and once it's in there they can't edit it so that might be where the advanced permissions module comes in or the lock module um i haven't really gone that far in doing that so but i just thought this was interesting to give it a try this reusable option um so here's my call to action button on the hero and i have some text um and we can say to display the title or not um so that really comes in handy and then if you click add section you can choose your your um your your column sections uh so that's really nice and here i have a one column up at top and a two column at the bottom and then i can i can click the preview and again so this is right in the layout builder ui so we see a full front-end preview on this so that's kind of neat uh because we're you know we're changing the paradigm here because you're actually seeing a preview of things um so i can i can undo that and if i wanted to drag these around i can drag them around so i can do this i can drag that there so that comes in handy full drag and drop functionality now if i go over here oh yeah so i'm going to show you that entity view so i'm on i'm on a person node so this is a person content type so we have you know basically our all our fields here we have a person image then we have you know first name last name email pronoun title uh and we have a biography um and then settings so here this is really neat this comes from layout library so this gives us an alternative layout so if i view this um right now i have person person left and the the content on the right but if i edit it and i do you know i just get rid of that override or that that library item select if i save now now the person is on the right and i haven't really fully themed this i've just done a little bit i've just touched this a little bit but it gives you an idea um so if i go over to layout library you'll see how i did that so i have a this this one this layout that you saw in the um in the select list on that node so i can edit this layout and so i have this library item where indeed the profile image is on the left and um the entity view that wrapper uh is on the right um and so if i go back there and i edit this um i can go to the settings and i can choose that alternate layout which comes from layout builder library um and then i can save it and voila so this whole thing in here i'll just inspect this for a minute and um i will blow up this code so if you're interested to know so this is an entity this is that entity view right here and so this is this is themed so you can see here it says block block c tools block entity view node so that's that entity view from c tools and it gives us a template based on based on the view mode we're using for entity view so that really comes in handy so we can theme this um self-contained with a wrapper uh and then i'm pretty sure you know layout builder will will get rappers uh natively in core eventually so you wouldn't have to use entity view um yeah so that that's really nice um and one thing i want to show you here so this is layout builder styles um this is layout builder styles so you can have predefined styles either on the component level or the section level component being block and section of courses section um and you can see i've just you know made a few different possibilities here and if i go um if i go here so i can go um configure so you can see here here here are those styles or if i go to the um the person one you can see here i have some styles and i also have these background color options uh that are coming from color the color field module um so that's layout builder styles here's layout builder component attributes so this comes in handy you can decide what you're going to allow and let me just go back there for a minute so if um so if i want to i'll go to this hero and i'll do manage attributes so you can see here you can put in all those attributes this is something probably a developer would use it'd be you know for one-off classes for theming and styling um so you can decide what attributes that a developer could use um and you probably wouldn't want your content editors using this that's what layout builder styles would be for and i'm just going to finish this up and this is layout builder modal which i showed you and this allows you to do the settings of that um and i think that's that's pretty good overview of layout builder um does anyone have any other questions we've got about five minutes left oh okay so somebody says if a site is already built with twig templates how does this affect transitioning to layout builder yeah that's a great question um yeah so so it depends you know it depends if if you're retrofitting layout builder onto an existing entity type like a node type um then you might need to do some adjustment but if you're using view modes um you know it may be that you can use some existing theming it it just depends uh i don't know if there's a set answer for that it's just going to be something you might have to experiment with um but yeah it could have affect them either positively or negatively that's something you'd have to find out um twig debug output twig template debugging output would greatly help you with all that for sure did you see um andrew's question about content type uh manage fields and what they look like uh let's see here um i don't see that okay um right below uh olivia's olivier question um andrew butler what do your content type manage fields look like oh yeah okay so so if we go um if we go back over here so um [Music] let's see uh think something like this so here's your typical manage fields on a content type this is how it looks and you can you know you can you can rearrange all this so that's the traditional way of of doing it and then you would theme this maybe with you know node templates or something like that but if i go over to default i've enabled layout builder here but normally if layout builder wasn't enabled it would it would look just like this so managing the fields ends up happening when layout builder is enabled it ends up happening in managed layout so this is where you would quote unquote manager fields and probably a better example of that is with this person where i'm actually using fields directly from the entity type so i'm so this person content type i'm using the fields right from that whereas in something like in something like this i'm using custom blocks so it's a whole different type of setup so there's there's a lot of different ways you can do this oh um oh somebody's saying thank you for the gratis theme wow oh that's a blast from the past wow thank you so much yeah that's that's a long time ago and somebody says i just followed a session about drupal gutenberg and now layout builder both look great any advice yeah um i i was in i was in the gutenberg session as well and it was it was really interesting um it gutenberg looks to me i haven't used it but it looks to me like a completely different setup and paradigm because you have that json set up and there's like some react going on with the blocks it's a very different thing i think something like layout builder would be much more approachable to traditional drupal site pillar builders and developers um that being said gutenberg looks really super interesting um yeah so um and of course now we have layout paragraphs and i'm i'm putting together a new presentation for that that i hope to give sometime this fall um and there's a question can content editors still edit content from the note itself yes so so if i go over to content and i click on so so i i have this node type that's being rendered with layout builder but i can still edit that those fields because in this case all the fields here are being rendered in layout builder so i can still edit all these just like you do normally with a with a traditional um content type so there's no you know there's no changing any of that um now for landing pages that would be a little different because you'll probably be using custom blocks and so therefore you like if i go over to my landing page edit page you'll see it's very sparse so if i click on this you see you don't have any fields here because it's all cus it's a landing page so it's it's all custom blocks and then you know you have your layout builder settings here but there's no fields here so that would be the difference there um and wordpress yeah gutenberg would work i think gutenberg seems to be pretty standard now with wordpress um i think that's you know i i don't know if it's enabled by default with wordpress out of the box but i think it's being used a lot oh yeah so the layout library how did i create that um so so that's with a contrib module called layout library so you enable that and then you can create those alternate layouts for any entity you like um and then it's just like using the layout builder ui um yeah so the layout library contrib module i think it's called layout builder library officially or something like that um and that's that's down here with layout library so this is a contrib module and if you can see um yeah okay great and i think we're at time but thank you everybody i really appreciate everyone attending

Channel: Drupal Asheville

Views: 377

Rating: 5 out of 5

Keywords:

Id: hlczGQ_Slow

Length: 45min 41sec (2741 seconds)

Published: Sun Jul 18 2021