The new Layout Builder: Unleash the Power!

so this is the layout builder unleash the power not an aqua product I realize with the big rocket thing there's just a template issue so I am Ted Bowman I'm a senior software engineer and Acquia maintainer of settings tree module I'm working on the layout builder right now Ted Bell on drupal.org and Twitter and everywhere else besides Instagram were under Sportello because of some guy so I'm part of the aquata Drupal acceleration team so that is formerly called octo and basically we're trying to help push Drupal forward to API first team working on JSON API UX team which we're working right now on layout builder in the media library we also help make the lightning lightning distribution and we work on security issues some of us who are on the security team so so yeah so mostly working on core plus lightning so oh I forgot the this I showed a slide like who are you guys so how many people are have used how many people are new to Drupal ok ok how many people have used are like familiar with panels use panels a lot how many people use displace be ok all right so they uploader why do we want layout builder so we're gonna go back to the olden days so this is C CK and Drupal 6 and so you get the idea of like this is how you manage fields you have your formatters you can exclude them you can do stuff with the label Drupal 7 looks pretty similar Drupal 8 looks pretty similar so field display in core really hasn't changed that much in you know since Drupal 6 days obviously there's been a lot of stuff but not necessarily in core you have sorting you have label options you have for matters there's a whole lot of modules that augment the screen different things you can do with format especially displace we've does a whole bunch of stuff but that's pretty much it you have view modes so you have those sort of basic options but then you can combine them in a lot of different ways for different view modes so that that becomes more powerful you have obviously come customizations on the template level either on the field or on the entity level so that definitely adds more power and then you know all of this plus views views is going to let you do dynamic lists use those users view modes use the formatters directly if you want to if you use the view modes then you can sort of change globally everywhere you use like the card view mode you can change that be a manage to play and it'll change every review that's using that so that so that is really powerful it allows you to you know have you modes say for articles and news articles press releases they could have the same view mode have them slightly different different display but Chopin the same less generally looking same way so but your does lack a lot in as far as like field display in a new display especially via the UI obviously you can do it pretty much anything you want in the templates but but when you're getting into the UI if you want to connect the actual and you displayed two other relevant content via views that's not really possible connected to other blocks it's it's sort of harder to do that directly in the entity display and then sort of other unknowns that you might want to connect there there is a way to do that though through the block layout system you can say hey I want this particular block to show up on articles so you'll get up if you're just trying to use core and you're trying to say okay I want my article page to have a very you know the fields that they have then relevant views or maybe if you always want the shirt search blocks to show up on articles then you're gonna with core you pretty much you're stuck with saying okay I'm going to configure a bunch of blocks and I'm gonna have them all set to show up on articles or something it also lacks there's no layout creation and there's no real display preview in the sense of on the display level you can preview an individual know that once you submit it but you can't say I want a managed display of articles I want to see what that might look like on an article so you can't really do that and there's not per item custom overrides so you can't say this is how I want the fields formatted for all articles except for this one article that's really important and you know I want to be slightly different 1 p.m. it should be larger I want to add like an app just a one-off video Longy this one articles it's sort of difficult but pretty much everybody who's using Drupal Drupal 7 Drupal 8 is going to be using one of like either panels the panels universe panels everywhere panelizer panels XYZ or display suite is also really popular I think on text as popular in Drupal 7 I don't think it's interpolate as far as I know it might be and with these you know you do get tons of power they're really powerful solutions but this is sort of fragmented often if you the candies panels and display sweet together but a lot of people sort of choose one of the other they're difficult to discover for new users so you don't like download your as a new user think oh yes I must Ottoman it with a real display system to be able to display my entities you know you have a managed display you might think well this is this is what you use in Drupal to some extent I think they're difficult to learn I really liked panels and I used it a lot but I talk hole you know I think actually multi date classes on panel so it's not you know it's not something that you can just come in and just start using right away and sort of disk I didn't find it super easy to learn after you know it it's pretty powerful I don't think I think after that learning curve sort of like with the rest of your putting into a whole lot with it but it does does have that steep learning curve and I think this place Wheaton might not be the case because it uses a lot of those sort of horror forms but I'm not sure about the status of the accessibility of these things as far as like people who want to maybe can't use a pointer and stuff like that I don't know if it's easy to navigate panels good maybe but I'm not sure you know it's not something that I think has been like looked at really rigorously in in the UI so that I think this place we might be different because it is using the manage display page which has been looked at a lot so it's sort of building off that so they have the accessibility of image display so the layout initiative it's been around for a while if there's been multiple iterations of it and the idea is you know site builders and content authors need sort of intuitive tools we build pages change layouts add and rearrange blocks with the live preview this is on the layout initiative page so when did they need this stuff they need it when they install Drupal and that's where the idea is at least we want some sort of basic powerful tools inside Drupal core that people can start to use right away so layup Alert is sort of what's going on now in the initiative what does it do oh so just like there's an entryway if people haven't heard of layout builder it's an experimental module Rupali which means modules are put into Drupal 8 as experimental meaning don't use them in production and they'll be developed and at some point they will be stable and everybody will use them in production will be great but this is what were what I'm gonna demo is layout builder in Drupal 8 7 with some patches applied but everything that is basically everything I've applied is a stable blocker so if layout builder is stable in 87 either of these exact solutions are something very hopefully similar or at least similar to solve solve the problem will be in there so triple layout builder is in beta stage and the plan right now is it for it to be stable in 87 so layout folder is a flexible layout builder so obviously it previews in the default theme so like panels you would go when you're when you're configuring your panels you go to the admin side so it's sort of not necessarily seeing what if what it would look like well actually panels doesn't have like preview but yeah so previews and it previews in your default theme so it connects your entity display to views and other blocks and it allows Parenti customization and it's a powerful page builder so layout builder when can you use it the goal is to be stable by 87 alpha which is sometime in March and which would mean it would be roof when 87 0 comes out it'd be ready for production if you have an 8 6 site go up do you know you update to 8 7 you can start to use it you can start to play play around with it now in 86 but stuff is I think right now stuff is not being back order date 7 because there's backward there's PC breaking changes that we can't put back date 6 but if you're if you're playing around 8 7 you can take a look at it so it's soon layout builder what it does is one thing it does is do content templates so it basically kind of replaces the manage display so you come on it for all articles the other thing it does is why layoffs means I want this one article to look different it does landing pages basically these are actually overrides done a certain way but basically I want a page that's blank and I want to start adding stuff to it I'm not really too worried about the structured data it does reasonable components so if you dot if you are familiar with many panels you can use layout builder to do that so let's get started live demo so so live demo if you get me advise not to do a live demo I didn't listen to you sorry so we're gonna do a demo of the umami food magazine site so the mommy if you've installed Drupal lately there's standard minimal and there's a new profile photo mommy and it's a for demo purposes only so if you want to show the client so a big thumbs up if any of you ever worked helped with you umami distribution or profile it's it's great for a for stuff like this but also to show your clients show to anybody so we're gonna look at three sites we have a plan Jain umami site which is I want to use for reference purposes we'll look at it and these toolbars I have three actually installs on my local so I can tell where I'm at so black is you see the black tool arts this is now without layout builder this is a site that will be building in a hat will Esley I'll build enabled and will enable it in certain parts and start to use it and the red one is oh no my demo went horribly wrong and I'm just going to show you the finished product but so I do have you know I do have a net but hopefully we won't we'll probably look at some of the finished product stuff depending on time if I don't have time to build stuff alright so let's look at default default content templates okay so this is see the black toolbar and you can remind me if you see the black toolbar and I'm building the layout over you can remind me not to do that let's look at the home page home page actually that's not the home page right now let's look at a article because this is a sort of basic thing here going on so you have the article you have your tags image body field here but then over to the right you have featured articles which probably is done through the book if you were look at this where do you think you would configure knowing this is just Drupal core how do you get that more future articles over there blocks yeah so so two separate UI it is I think for newcomers it's like you have to say okay if you're displaying your articles and then you have to think we'll have to go a totally separate spot - if I want to put something on the side there and again that's just with Drupal core they're definitely good ways to do that if you start to use can't read this wise - hey look like that all right let's go to articles hopefully it's still there all right so let's look at a particular article same thing the only thing is I took the block off the side so right now I think we're not using layout builder but I did get rid of the block so I can show how you can do that with layout builder so we're going to go to block layer room to content types I'm going to just keep that tab open it's going to manage display and right now I think the only thing I've done is I've just turned on layout builder for for manage display and the idea here is that I don't see the fields here that I would see if I patent clerk to a builder and I'm just saying you lay up loader we'll get to this part in a second perfect I'm second okay so let's click manage display and what it does is it shows me a basically a random generated entity of this particular type so it knows it has tags it knows it has an image it makes this it knows it has a big old body field has in a has clothings field so right now if I wanted to say actually I would like the tags field below the image I can click it and drag it down here and just move it here and voila it's there let's save it make sure that that really happened refresh it and we see the tags have gone down below here ok so but let's say we actually want to start pulling in so for each of these we can also have field formatters so let's go back to the layout and the field formatters you'll recognize just from the manage display this is basically like your existing field for matters so one thing that's nice about this is any like awesome field formatter oriented modules that you have you can already still use them on layout builders because you three or four four matters I'm imagining I know displace weak adds a lot of stuff inside the fill for matters so you can potentially turn on displace we if you really like the kind of stuff that displace weak gives you for four matters so we could say well let's just change the image to this narrower one here that's probably not gonna look good but generally you see if you know what feel for matters with options you have you would have similar ones here so let's discard those changes we'll go back to the ones with tags so now we want to actually do something like this where we actually have the featured articles over on the right so what we'll do is we add a section so what layout builder if you've seen layout builder a while ago it used to have these stacked layouts where you'd add it and had like two one two stuff like that but now we just have single row ones that have multiple columns so the idea is if you want a two one two you add it to then you add a one and then you add a two so let's add a two here and when you add it you get to choose okay what's the width so I'm gonna say I want 60 33 so basically in in our example here basically everything is in one column and then we have the featured articles over here so we would move everything up here and I think I'm going to show you something we're working out right now it's hard to move a really big image there so we're working on this thing called get rid of live preview to basically say I don't want actually see the preview of everything I just want to see that the fields here and I can easily just drag it up here let's put the tags back up to the top to mark what's there this is adblock that really means like it and Emile that means that a block but we have filled box with layout builder so yeah I mean that's what I'll show in a second how you can add views and stuff like that yes but anything that's on your current site exposed as a block would be there so let's turn back on live preview and okay we're good here we have everything that we thought and so now we have an empty column over here we can add a block and it shows you by default it's going to show you and again this is has the couple patches like that it surfaces the field of all sort of the view configurable fields that you have but you do actually have a whole lot more so if I look at the content fields actually of all of the base fields like I could do who is authored by I could do the revision log message here if I wanted to basically anything that Drupal knows about we can put it on there but let's we're not going to put a field right now we're going to put a view and I have these demo views that I've made it made and I'm gonna do do do do do do do actually it's here I'm going to do this articles aside here and this is something that comes with your mommy but who mommy puts it in through the block layout on page and we can put it here through layout builder so let's add it and again with views if you're not doing an override right now it just gives you a placeholder and tells you what it is what it does I think partially that could be because a lot of you I can't remember the reasoning is for this but it probably is because fuse often take stuff from the URL so we're not actually at the node URL so we don't we can't pass it like a real node ID so most views in that case especially if you want related stuff wouldn't work now I think about we could probably do something like okay if you have no contextual filters will actually render here so we can't see exactly what it's going to look like but let's save that and let's go back over to our article and voila more featured articles it's very similar if you see here we're already really pretty similar to what our current site is and I can show later on how we could actually get this to maybe be styled the same way where you actually have different a different background here so in this case what I'm doing here is I'm saying okay I want to override this and I want to basically take up more of the page than I would usually take up I'm not letting the block layout page do some of the rendering obviously I do still have the regions up at top and the regions here and actually do have the sidebar region I'm just not filling it up with anything any questions so far yeah yeah yeah yeah so all the stuff that you're seeing right now is all configure these meaning when I when I export my config like I would move over content type changes or move over changes from manage display it would all be moved over the same way that's not true once we get into overrides but for the stuff we're seeing now that is true so let's look at a slightly more complex example let's look at recipes so recipes have a lot more fields than we do on the articles so let's say I want to go to recipes and I want to manage display and again you can see there's just tons of fields and what Drupal gives you out of the box is just you just list them down in one big column so I'm going to use the layout builder on this I'm going to manage layout and what layout builder does when you first turn it on is it takes because the manage display you could think of it as a one column layout that you can't change it makes a one column layout and it puts the fields in all of the same order that you just had them in and uses all the same format so once you turn on the layout builder let's actually actually don't just say that this is already working if I reload it we should actually see very little - not - no difference is the only difference would be if you like are using certain classes say to tag layouts of selectors that weren't there before that are there now might might change it that the actual markup should be almost exactly the same on the field level so we're using layout builder here but we can't really tell much difference so let's take something like we could add a section up here to column let's do it 50/50 and I want to and I'm again I'm going to get rid of the live preview and I'm going to take the recipe one third over here the tags one put it over here look here and maybe I actually don't even want the on the tags one the back to life preview I'm going to get rid of the label but oh here yeah this is a bit confusing so we just have the one here and again this is pulling in just random packs because it knows it's a reference save the layout let's reopen this so now we start to see like okay we have the categories and tags split out here the other thing we could do is we could say and this is going to look kind of ugly because I started to mess around the CSS but I was like hey I don't know how to do CSS so it's let's add a section and let's have this be a two-column let's just use the same two column for purposes of making it a sort of quick let's take the image and put it over here and let's take the a whole bunch of these fields preparation time cooking time number of servings difficulty let's do let's just do all of those I'm probably going to want to change the image I don't know if this image is gonna scale down but now good enough for a demo you know now I have I sort of all the things I want to know about it if I left and then I have an image so so you know this is sort of kind of cool very easy it's nice to I can sort of see it right away yet I can see it in the manage display all be it you know in a sort of randomized preview kind of feel here yeah I'm not sure how I know because I have a placeholder yeah so it says eight hundred fifty minutes because the chairman of just Drupal knows it's just okay I I know it's a number of time to throw a number in there any questions yeah it's going to be built in oh yeah this is true before yeah this is an eight point six but if you turn it on it'll give you a warning experimental module don't use it in production yeah yeah but like the whole the whole this and this switch that you mean put this whole thing on the left and the whole other one on the right oh no right now you can but yeah yeah I can't move this whole section below another one right now yeah you'd have to kind of like totally or build another one move everything down but yeah that is that is something that yeah we're definitely at a here or I can have it here but once I add that I can't move it relative ease so I can do like I can make it so that he say there's a section out a new ad section above me below going yeah so every so yeah you can keep on adding you just can't take an existing one and move it somewhere else in the back there so if you look at the previous one where it said placeholder of the view it basically doesn't know how to render correctly there so it just does a placeholder during the preview yeah yeah yeah yeah well actually let's go back to the I'll save this let's go back to the content types and I'm not going to go in too much about how I make this view but I made a view for the demo I have these this is the articles is just featured articles comes with you mommy one and then I'm gonna add one that is called articles beside related so this basically takes a term from the main node via contextual filters and says show me all the ones that have at least one common tag so I'm going to add that I'll put that over the top it's basically ideas I want the related ones and then I want any future ones so let's save that to go back to an article so yeah this one one has one that's related that's why I made it nope so the idea is that if I had one about wine I might also have one about cocktails and maybe they both show up if they're tagged the same way so I'm not debugging using a live demo okay so let's go back to the side to the other thing if we look at we did default this is the general idea for default content let's look at overrides so one off layouts so if we go back to manage display of articles I have an option years has allowed each content item of its own layout to be customized and again right now I'm doing only nodes we'll see later that this works with users terms any feel double entity can have a layout so I'm going to save this and if I go to my content and I'm gonna pick out an article let's to this article and whining about why this is my demo article you can't blame the mom you for the title there let's just call me okay so let's see now we have a layout tab that wouldn't have been there for this particular article we wouldn't been there you would have a gooda manage to display but now every article if you have the right permission is going to have this layout tab here so if I click this it renders it and now it can actually render the fields it doesn't need like a random entity in a random picture it takes this particular entity and shows me it in the layout builder and now I can start to do stuff and basically disconnected from the default so this this particular article can be displayed totally different from all of the articles so what I'm going to do is I'm going to add a section up top and have it one column and I'm going to drag the image up here and it becomes bigger and so I'm going to save the layout and now wine about wine has a really big image and then the summary and right here but if we looked at another article it has the standard two column not a big image and now so this is saved with the note itself so this is not something that when I shipped it out if I shipped my config if I rush exporter my config or downloaded the config via the UI this change would not be in there because it's stored it's stored with the note itself the benefit of being so stored at the note itself will look laters is like translatable it works with it will work with content moderation so all of that stuff we get because it's in the field yeah yeah I mean it all depends on your I mean if it does respond but that is really up to the if you use core layouts if you use or layouts they are responsive oftentimes you'll probably want to make your own layouts though with poor being the idea that they're stacked it's I made layouts and panels because I wanted a particular page structure whereas the way we're doing stack layouts you can make complex layouts without providing your home as far as like a row one if you wanted say like a ten column one that core doesn't provide you would have to provide that yourself but let's see if with this because your mommy is using responsive images potentially you know it is a responsive layout here lay out there definitely like the right left percentages are you talking about there's your whole concept as far as the responsiveness right so that you're saying a custom layout like it was defined you can define custom layouts which are basically like have you ever made remote the panels for basically you're just saying I want the core layouts is like I have a one section one let me make the only place I can add stuff is in the middle or you know I really recall them sections I guess I want a two-column section something you can add stuff here you can add stuff here you could add a I want a section here then three sections here two sections here and then through three three three you know you can do whatever you want but that's up to you if you want to mix if you want something you can't make by stacking once you have to provide that code alright alright so let's take a look patch any other questions about overrides yeah generally the house on the CSS I said you have to code it in the template um the CSS that you're staying there if you heard a new layout sir yeah if you had if you add new layouts you say here are my template files here my CSS files and the Drupal for drupal takes care of putting them in when their needs yeah it would have usually what you would do is like your template has a particular class for like two column and then you in your CSS you do to column you know means this or means that or longer yeah yeah for the custom that overrides with definitely how resource-intensive I guess in terms of the memory responsiveness visited like is it viable to tell the content authors that you know because they always want to you know really over the where else is it viable for every single gonna start another type to be customized yeah the only problem there is there's a there's a contributor called layout restrictions that allows you to say Oakley you can only add certain types of blocks or should interpret fields right now what you're seeing is like everything so those and the other thing you have to think about like it's like it's not locked down right so if you say okay content author you can you you can rearrange stuff they can with just Gore they can just remove stuff so if it's like you can rearrange this event page it's like well they can also remove the date of the event if they want so I mean it's super powerful but you have to either put down restrictions via that module or other ways or sort of depending how big organization is sort of trust your editors yeah there's not like a performance hit besides it's just filled down at me it's another field to having thousands of overrides yeah where is that data store for that Hospital in our custom layout it's stored with the fields just like any text field if your body filled with in the text field itself no no sort of like that as in it has its own database table in store but because it's stored like that it can be treated the same way as far as like I want a different layout for the French version of stage versus the English version stage so another guy who did that okay so landing pages so let's look at landing pages again these are really just overrides for now so how I made them in this site and you could do them other ways this is just how I've done it is I have a content type called landing page and if you look at landing page it has yeah at one field it's locked it is the layout field basically this is where the layout is stored and it has nothing else so if I go and I go to add a landing page the note edit page is just going to ask me what is the title and I'll just say my great page and I'm going to leave it published so it has nothing here but now I can start to actually do the layout in this page and the idea here is like I don't know what's going to be on this page this is just something I mean get into content authors that really want to build a page experience either by grabbing views or doing a couple other stuff that we'll look at so I could say let's actually look at the I want to look at the black version of the site black toolbar let's look at the home page of umami so we have a lot of stuff going on here we have a custom block this is this big thing as a custom block and then we have how many views do we have here right in this column here we have one view we have a view with an attachment so it's kind of like if you don't know views really well and you want to try to figure out what that other part comes from it's difficult like I didn't actually figure out right away we have the page title we have a little description here and then we have another view here of all of our desserts and at the bottom we actually have a whole nother section here at the footer which is a view custom block and then I think another thing a menu over here so let's look how we could make this page so the view is a what is it oh no it's a custom block first a premade custom block so it's the recipes banner and I could add the recipe banner here and I would have the existing one you know if I knew I want to use that mean but if I don't want to use that one I could remove it and layout builder gives you something called inline blocks and inline blocks are basically the same custom block types that you have on your current site except when you add them they're not available in other places so basically you had this one block in this override or in the default and it's not available to place to other places and part of that is an access prop reason is if somebody's making a page they probably think of this stuff that they add on to that page as being access controlled like the pages so if it's published if it's unpublished nobody you should be able to see it yeah so let's click create custom block what's that yeah although overwrites revisional yeah they will be when it's stable they're revisional you just can't make them revisions alright so let's go with that banner block so this is the block that I had before and I think pasta let's just call it pasta so don't you can't think of what it was let's do a summary Yatta Yatta Yatta glue URL and I hope I have some paper I don't want to do know to add for this to go to because I don't care what it goes right now what's going on there okay link text I'll do pasta again and I'm gonna pick an image veggie pasta this is the same one that's on there alt text pasta let's add the block so now we here we have the similar block to what we just had before basically it's the same interview type there's custom block but is pre-made but now I have I can add new custom blocks here now if I look for the next thing it has it has another view as another view with an attachment here so I've actually pre-made a view but we know we want it to put it in column so let's put a 50/50 column here let's add a block that is one of my demo views and this will be promoted single item and then over here and actually I don't want the no I don't the title at all and then I'm going to add the promoted promoted double item so this is a views thing we get into it right now but in views you can basically say the second view over here I want you to start with the second item so we don't get to promoted items here so we have the two here and then at the bottom we have a we have some text here which I'm going to skip over now but I could just make a basic block and just put HTML in there but I am going to add just a view of the recipes no I didn't want to have a section actually I do want to add a section because now I'm again taking up the whole the whole region there so I'm going to take one column and in my one column region I'm going to add another demo of you or maybe it's actually one of the regular views that is my recipe cards and I'm going to add and got my recipes down here and I'm going to save it so now I have pretty much very similar to the homepage of umami which is basically just one custom block and three views to sort of rebuild whatever yep [Music] the banner expands yes [Music] the layout builder is yeah I mean one thought that I had when I think about that problem and I don't know if it's like a particularly solve problem yeah but yeah so what I would probably do is I would say my layout builder is always the whole page it's just normally my sections don't take it up but if I have a is be chaos born here he works at Princeton and he has made like two awesome modules for the lab over anyways he's made a module called layout builder styles so I think I had on this site let's configure it I don't have it enabled but basically it would allow you to prick to pick predefined styles and basically you could say okay for this section I want it to go expand out to the whole site so your default would be just it's like this narrow space on the side and you just don't use your block layout once that's my thought there I'm sure their best practices will figure it out yep and you're starting that I see this taking so do you recommend that not using marks and all that can this play well with the block system around it yeah I can't play it well let's look at one way it can play well but I like as far as my advice it's really new so I think people will like it's not determined yet what what is the best way to do this all right so let's view this override and let's say on all articles I want so do you see right here I took out the footer section so in the block layout before this demo I said okay get rid of the stuff that's in the footer so maybe on every page I want that same footer so let's go to the block layout page so one thing I could do let's go to manage display for content types actually this is a landing page so one thing I could do is I could in the lane well I couldn't different landing pages but for recipes I could say I always want to put these footer stuff at the bottom and actually configure each time the other thing I could do is I could say well let's go to block layout and in the bottom I'm going to add something to the footer and I'm gonna add something that I've pre-made called a combo footer and this is a custom block and it is something I pre-made and let's save it and if we see what happens after I place it there we actually get very ugly but the old-footer back so we get the recipes then we get to another custom block inside this custom block and we get a menu inside there so what's going on here so this is actually think the mini panel stuff that I was talking about now those landing pages okay the next one would be I think those many panels okay so many panels are basically like we're a little thing and panels you could put a bunch of other blocks into so they upload resent explicitly had that but basically it has them so if we look at the block layout we have our custom block library and I said okay I'm gonna have a go to block types I made a block type that I'm calling combo vlogs and so custom blocks are feel double so you can use them the same way as manage fields manage display all that stuff so let's look at the field on the combo block so it has one field and it's the layout field so why did I do that if you look at manage display I would say use the layout builder and also have each block be able to have its own override so basically what happened is if I look at go back to my block library I have a block here called combo footer and if I look here and I go to layout then I actually see here got your recipes your other custom block your menu here and I could add anything that I want the other thing that's kind of cool is if I look here if I say actually I want a site-wide change to the footer and I want to move it'd be great if I can move sections here but I can't but I can basically what you do is I can add a new section down here luckily there's only one thing in the section I'm gonna drag it down here I can get rid of I could leave this section but just to be nice will get rid of it so I've effectively in this case reorder these sections so I'm going to save the layout and now all of my pages when i refresh them did they refresh it is I did swappi I was that way for so now you know you can imagine doing that on the bottom you can imagine doing that on the side you can imagine on the defaults of articles instead of what I did here with the articles where I on the default of articles I actually put two views here that actually could just be a combo block that I thought I put there than if I want the combo block across multiple defaults I could change it in one place and it would propagate everywhere so that's something to sort of play around with the other thing with custom blocks that you can do if I wanted to say actually I want to change the little and the other thing that's nice about a revisional know it should be reasonable that I can't figure out how to define the revisions I'd probably have to make a view of revisions of blocks and then revert it that way but I have done that yeah the other thing that I've done is if we want to make a totally new landing page no let's go to landing pages content actually we're getting close what's at 3:45 it ends yeah okay I think most of the stuff reasonable components that's basically many panels is what I just showed it's almost done the stuff we're still working on well storing a lot of stuff which anybody is welcome to help with also translatable overrides so the idea that each one could have its own the other thing is content moderation basically if you use content moderation you have four divisions where you don't edit the thing that's showing the edit the note that's showing but you do a four division so that you can go through a head--it or process and say okay it's now approved you could do that with layouts too or you will be able to do that with layouts soon where you say okay I want to edit the layout but I don't want it to for an override but I don't want to affect the site right now and I have like the designer do it and then I want the person who owns the content to come out and say no can you move this video down here and make it slightly smaller or something like that the translations and content moderation its we have one sort of problem with trying to figure out what the right thing to edit is but once we solve that it should hopefully work with both cases accessibility I'm just going to do a real quick demo here we're working on this but the idea is that we want you be able to use the layout builder if you have problems dragging and dropping so for moving we have this little move than here if I didn't want it's not working let's go back to the back website okay so in this landing page I have like a custom block of a video I have views I have a Google map one if I want to configure this okay forget layout I have this layout overview and it basically gives me everything that I have over here but in a table form that's easier for screen readers and it's easier to keyboard navigate through and then I can move blocks by that's not gonna be dimmable oh yeah I can move blocks no I can't anyways the idea is it would have opened up a form where I could select the region and then reorder it in that region and then save it and it would just like to do so trust me it works and you don't have six patches applied yeah so that's sort of some of the work we're doing with the accessibility there's a very quick demo because it didn't work on some controls I'm going to call out lap older styles without those restrictions Brian Osborne who works at Princeton made those the entity browser box is an existing module that basically would let you have a block that you could place that you could easily add existing entities you could actually do that with an entity reference and in any reference on a custom block is another way to do that and I think I now have seven minutes for questions so questions yes I did not but they have been very interested that people work as they I think I forget what pages they they were interested in and using layout polar but I'm not sure yeah it should work yeah it should work if only other questions yeah not right now there's something in there to basically add the same disability conditions we have but that's not a I've done yet so potentially you could do this particular block only shows up if well in core we don't have that many conditions so it wouldn't be as useful because especially for defaults of article show it on articles only makes sense there but if you write your own conditions that would become super powerful because your good base to all fields or something I've got yes yes yes we can take a different style yes no no so once you do once you do the override it's really disconnected and it would be very hard to give back the one thing that is out there is there's a mantra called layout library and instead of like configuring an override like I did where you have you know you have complete control you just say okay here's the five pre-approve overrides I mean they're not called overrides but basically from my library here's the five libraries that work well with news articles and you can choose them there then if you wanted to if you wanted to redo that I haven't actually used it but I'm imagining if you want to redo that one from the library it would propagate out the other tools to the rest but yeah it's definitely important to know that once you do that override it just separate it out so if you make changes to the default even if you didn't say well I didn't change this section up here and I changed the defaults I want it to propagate down that is you know I don't see that happening in core anytime soon there's not a reason you couldn't do it contributor reason it would be very hard is because it's all stored and sort of serialized way that override so you'd have to go through every one programmatically update it and then save it again so it's not impossible but it's not easy yeah and it becomes very sort of unpredictable all I feel like so yeah and we'll see if it's if that's something that like everybody wants I don't know yeah I know yeah yeah yeah yeah or you just do the library with with news articles it sounds like a lot more functionality built into this but then you kind of start skirting on like yeah yeah yeah I mean one idea that you know I thought about for overrides is to sort of use them sparingly right now we don't have we don't have like granular permissions but we're gonna is to give that permission a few people and to only really use it when you want to add stuff and change stuff temporarily and you want to say oh we have a product and Drupal commerce that has like this viral video that we would like to place in the product page and you could do that and then once the video is now boring you say revert to defaults and you have the defaults again but you can't you can't expect to be like oh I had the viral video and I added it there but now we've changed the defaults and now that if also better let's merge them together so that the video is still there and as they prove defaults yeah that's not that would be an awesome control no we're just talking about that this morning but potentially you could make a pretty easily make a view field that says has override and because you basically will say is this empty or not and if it's empty if it's not empty you know there is no fraud they don't know anything else about it you don't know it's useless this block or whatever better not be able to do that now with fuse trickery just on is this field empty then you probably could do that right now but it's not like showed me all the ones with overrides he would say show me all the ones where the layout section field is empty so I haven't tried it but potentially that's something you could do in fuse right now their question I have a couple other cool things I didn't get to shake a cool thing what's that okay so here's a cool thing so this is my this is another one my landing pages I have a custom block a custom block of type map here that I added and let's add another one so let's add a cut let's add a section to the top and let's add a one column section and that's got a block and the block will be great custom block and again these are the same ones that you have for reusable ones but they're not reusable theirs so I'm going to add a map and I have the simple G map simple google map module which basically is like I'm gonna add say Prince was his friend the street Princeton it's more like this planet Princeton New Jersey or New York or wherever I live in New York let's go these work let's see if that works do interesting I'm gonna add that and it's gonna make my map and it's like actually I don't want I want the satellite view I don't want this view so I'm gonna configure this block and I'm gonna say show me the satellite view move it and now it's a satellite so basically what I have here is I have a custom block type with two view modes one is called default one's called satellite and it's the same for matter I just have slightly different settings there but from the users perspective they're just choosing regular amount of satellite now the other thing I've done here is this is a custom block type that is called content picker and I just added in any reference field with unlimited values and so I could rearrange I want the baking mishaps article up top updated and it goes there the other thing I can do is I also use view modes here to say actually I want to show the not the two column here I want to show the default view mode for this block and now I have all the same articles it's just now they're shown without the summary text or whatever so you can build these view modes out so what I did here it's kind of like a two-step thing I made all of my view all of my content have view modes that is two column and default which is basically like picture text or just picture title and I add my custom block have corresponding view modes so default and then two columns so I tied those two view modes from the custom block to the content and then when I switch view modes on a custom block it just automatically switches the look of the articles does that make make sense the other thing you see FS what I did here to where this is a custom block and this is a again I think these are just file uploads directly so it's a custom block with a file field and down here I have a large I selected the larger view mode I'm at switch to default updated and now I'm showing the smaller images see if move works here don't move doesn't work the other thing is I do have this layout builder Styles module here so I can select this that I'm going to say make this a bold block and basically it just ties it to a particular CSS class and I the only thing I have to put in the UI is the CSS class and then in my theme I would say okay the bold block means it has a bright green border around it or whatever but you could see if you that module the next thing in there to do is to actually have it on sections so you can see how if I had the ability here on the sections to say full width then I could the thing that you're talking about there yeah yeah that is that's a really cool module and lay out put restrictions the other thing that the guy did was basically so that when I add a block I can say well everybody's he doesn't get to see everything and I don't know if he has the ability to like lock down sections because you could imagine like you have your article and up top it's like the image the picture and then maybe you should be free to put anything below it but maybe you shouldn't be able to mess up this stuff up top but that's sort of looking at lock locking it down that way all right cool thank you for him

Channel: DrupalCamp NJ

Views: 5,186

Rating: 5 out of 5

Keywords: DrupalCamp NJ, DrupalCamp NJ 2019, Drupal, Drupal Camp

Id: Q7faMOgFMO4

Length: 61min 25sec (3685 seconds)

Published: Sun Feb 03 2019