 Great. So we're here to talk about a layout builder and I called this site building 2.0 because I really hope I'm about to change everything you think you know about building stuff in Drupal. So Quick bit about me and who I am. I'm Chris Vanderwater. I'm one of the C tools co maintainers. I have contributed to Drupal eight as significantly as my life would allow me to And I have been focused during much of that time on page layout. In fact, for most of my Drupal career, I've been focused very heavily on the page layout tools that we use on a daily basis. Side note, I also helped author the plugin system that's in Drupal eight. So if you love that or hate that it is my fault amongst a couple other peoples And I'm a software engineer over at Acquia. So How about we just get right to it. Who in here is actually used layout builder at all anyone. Anybody played with it. Okay, handful of people have So for those of you who haven't I was actually going to start at like the halfway mark in my demo but I decided that Likely a lot of you hadn't gotten to play with it at all. So we're going to start from zero and that means I'm going to be moving quick but you know there will be time for questions I think and I'm since it's a live demo a That means that there could be issues and be I will solve them quickly and see yeah just feel free to hop up and ask a question I will be more than happy to pause and kind of go over it because it's not like a video we can totally interact with this Okay, so a few things before I start the demo one this is Drupal eight five has one patch applied to it that patches exclusively made up of CSS so nothing functionally different here I also have one module that I put in here that module is the Layouts plural layouts module it's on d.o. I haven't committed everything you'll see in here today to it yet, but I will do so in probably the next 24 hours. So you can totally play with this. I also have a custom theme as you can clearly see I've spent a very long time on this theme so nobody gets to mock me for it and and yeah you'll get to see more of that theme and how it works as we dig in here so I'm going to go ahead and kind of just jump in here And so the first thing we're going to do well actually as you can see I have two nodes ones the Milky Way the other is Orion and these are just totally default I haven't installed layout builder yet so this is as vanilla of a Drupal eight install as you could possibly imagine So we're going to come in here and we're going to go ahead and turn on the layout builder now when we turn on the layout builder it does a couple of really interesting things the most important of which is that over on our content types If I come in here to manage display this page looks a little different now if you've ever been to this page what this page typically contains is it contains a list of all of the fields that are attached to your your node of this type and you can drag them up and down to sort them And you can mess with their the field for matters and try to change things that way but it's exclusively like a top to bottom kind of sorting mentality that's built into Drupal core and so we got rid of that and we stuck a managed layout button here Which if I click is going to pop me into a new user interface here and you'll see that I have an image because articles have images typically and I have some text and I have some tags and then I have a placeholder for comments Now what's really cool about this is that it's all drag and dropable right just right out of the box and what's also really cool about this is that I'm not limited to the one section that I've got here I can go ahead and I can add some other sections huh that's interesting excuse me for a moment let's see what happens with that better okay alright let's refresh this page real quick I don't know what's up I'm not going to worry about it so I can go ahead and I can do something like add a two column layout to this and you'll see I now just got four more regions added to this and I can do stuff like drag my text over here and I can drag my image up here which is kind of difficult because of how much text there is and you can see that like this is core right now I actually haven't installed that extra module I was talking about yet so that's actually fairly fascinating and cool and if I were to come in here and I were to hit save on this we could then go and we could visit one of our nodes and our node is now going to be laid out that way right so this is the layout we just specified in here who in here has actually like used panelizer anybody hey a lot of you cool alright so hopefully this looks kind of familiar yeah maybe so let's go and enable the module that I provided here which is the layouts module and now if I will come back into my content types and go into the managed display here what's going to happen is I'm actually going to have a whole new set of layouts so these were all not here before and so one of the things I really dislike about what we're shipping in core and we were kind of forced to ship it this way because these layouts that we've got in core have been there for a whole release so we couldn't just remove them because other people were probably using them but we want to do is we want to provide layouts that are very easy to think of as like almost a row of the page it's a row of content on your page and so if I want to I can come in here and I can say that I want like a thirty three sixty six layout and if I do that then you know I can go ahead and move the same content around into that and I can get rid of old and busted here and we can kind of move some of these other things around a little bit here there we go and I'm going to get rid of comments for the moment so if I save that we can come back over to one of our nodes here and we can see that we have this nice thirty three sixty six layout so yeah amazing alright cool enough of that let's go do something cool alright so not only though can we affect the actual default view mode we can go ahead and we can go customize the teasers if we want to so I can go do this and I'm just going to throw that whole thing away because really who cares and just to prove the point let's do the opposite and so now I'm going to do a sixty six thirty three on this and I will go ahead and I'll add the body over here and I'm not going to display the title because genuinely who does that and I'm going to stick the image in here and I'm also not going to display the title and maybe we go with like you know large cool and so now my main node page looks this way but if I go back to the front page and I refresh here I'm going to have the flip the inverse of this right and of course that's a lot more text than I intended to get so we can come back into teaser here and we can go ahead and configure this block and I can do like a trim there some summary or trimmed and we can go ahead and save on that and now I should get something slightly different here right so I've got view mode level control of layouts and what's I think maybe more important to notice that I glossed over a little bit was I had more than one layout functioning on a page at the same time so you can layer layouts on top of each other instead of like in panelizer where you pick a layout and you're stuck with it and then if you want to change layouts you have to figure out how to transition that content and these sorts of things you can just add as many layouts as make sense to a given page inside of layout builder okay so this is really useful to us because as I said it gives us the ability to think of a page as layout sections but for those of you again who have used panelizer which was most of the room you'll know that there's a really big feature inside of panelizer where I can make any individual node look the way that I want so in order to get that I'm just going to check mark this which says allow each content item to have its layout customized we're going to hit save and now we can really go rock and roll with this thing so let's go visit our Milky Way node again and you'll see I now have a layout tab associated to this and the layout tab is the exact same administration we've been playing in up at the defaults except it's exclusive to this node right so anything I'm about to do here only applies to this node and this is very interesting now before I get too deep into this I want to point out that like if I say I want a one column added to this I can just do that right here and it gets added right instantly yeah remove that empty thing but if I tell it that I want to use one of mine down here like maybe this 6633 it asks me a question first okay and that question is really interesting because this is configurable you can build your own layouts that are configurable and require input from the user before being placed and that gives us the ability to do some pretty interesting things for example right now my content goes all the way sidebar to sidebar like it fills up the entire area of my screen but what if I didn't want to do that what if I wanted to maybe make it narrow right now I just want to point out something this is in the administrative end and if we come over here to the front end it is not reflecting the changes that we're making right now okay these changes exist only in the administrative end until we hit save so let's do something more I'm just adding classes to this that I've already predefined so I'm going to go ahead and make this a that's good dress blue section I forget what I named this ha got it alright so you'll see now I have this nice gradated background sitting in here the text changed color to be more in line with the the style that I had already applied to this my links changed all of this stuff changed because I did actually invest a little bit of time in that completely blank white theme right so this is all very nice and wonderful and if I hit save on this this is the actual published version of this node now so that's node two if we go look at node one you'll note that node one hasn't changed at all it's got the same style that is being inherited from the default so we could change it to if we wanted to and we will just because so I'm also going to make this one narrow but I'm going to make it a red section alright that was pretty great and maybe on this one I'm going to go ahead and do we'll also make this a narrow blue section and now I'm going to add like the comments to it and of course the good old trustee tried and true powered by Drupal awesome so let's save on that and here's my Orion page right with its comments and it's powered by Drupal and it's actual text and everything else right so this is pretty great and I think it's important to note the theme that underlies this while honestly very simple is just one one column of regions like actual theme regions there are four here I have a header region I have a pre content region which I'll talk about in a couple of minutes I have a content region and then I have a footer region everything you've seen up until this moment is like the pre content region those sit on top of each other I'm this isn't a multi region setup in like a traditional theme sense yeah can I get you to go to the mic so that the recording will hear you yeah if you have questions I'm more than happy to answer them as we go just walk up to the mic and if I feel like we're behind on time I might slow that down but yeah go ahead you had a specialized layout for one node is there any way that you can copy that layout say I wanted 12 nodes with that layout and I didn't want to go and do that for each single one is a way can bundle that style and apply it to another node yeah so that's a really great question the simple answer is no the more complex answer is maybe so so no I don't have that out of the box today but what I showed at the very beginning was that you could actually build a view mode and attach any sort of styles you wanted to it so something display sweet does which we do not do is that it gives you the ability to actually select the view mode you want to use for a given entity when you're displaying it and if we were to invest time in building that then view modes would actually become like different groups of defaults and you could pick the one you wanted right so no I don't have that but we have discussed it and I think it's probably a mid tier hanging fruit I don't I don't think anybody says that but you get what I mean so unfortunately everything you've seen me do thus far has been completely node based and this is actually one of the things that like panelizer suffers from pretty heavily is it'll handle with nodes and it'll handle users and it'll handle handle taxonomy terms but that's all that handles because it's all that knows how to handle we had to write plugins for each one of those things but when we wrote layout builder we took kind of a different approach to it so layout builder isn't only four nodes layout builder can be used on all sorts of different things and the one I really want to highlight is custom blocks who in here has used the custom block system in Drupal core okay now the custom block system I love and I hate we will talk about the reasons I love it today and none of the reasons I hate it because I don't have time for that but I've got two block types in here the basic block is the one that core ships with it just has text in there and then I made a bare layout now if we go in and we manage fields on this you'll see I have absolutely nothing like I said I was starting at virtually zero in order to show you how to build this up so I'm going to come into this block type and I'm going to say that I want to allow each one of these blocks to be customized from a layout perspective and so now if I go create one of these blocks we could do something fun so I went ahead and I created a header block but there's no actual form there really all it was was a title and if I come in and I edit it now I'm going to have a layout tab alright does this remind anybody of anything we used to have something way back in the Drupal seven days that we called many panels we also had something called fieldable panel paints and this is both all in one thing so I can go ahead and add a section to this and I've been kind of skipping over some of the sections I had because I was holding them back in reserve because this is where things start to get really fun so what if we were to create a section that had no regions this section is what I call the image section and what it allows me to do is it allows me to use an entity reference in order to specify media entity for a background so if I wanted to I could say I want to use that media I wanted at 400 pixels and I want to use the background image style which since most of you have probably built image styles I did not spend time doing in front of you and I'm going to hit add section and you'll see just like that I got a pair of blacks background image in here but honestly I'm not super thrilled with the parallax so we're just going to turn that off and I'm going to hit update and now I have a non parallax background image sitting here okay so that's kind of fun but there's a lot of other like chrome level elements that I should probably be concerned about here and the first two to my mind are probably my logo and my navigation menu so let's do that too and I'm expressing these as custom layouts as well so I created a navigation layout type in here which pay attention to this one because when I get into the code side we're going to look at this one and what it says is hey tell me about the logo media which I'm going to say is that it says tell me what image style you want the logo at which I'm going to do as a thumbnail and then it wants to know what menu I want which is also an entity reference so I can tell it I want the main navigation menu and we're going to hit add section on this and you'll see just like that I have a logo with my main navigation right a couple of things I set up that again were fairly simple things that you've probably done a million times but I'm using them in a way I hope you've never seen otherwise I would be very disappointed so we're going to hit save layout on that and I'm going to come into structure block layout our old old nemesis I mean friend and we're going to go ahead and place the header which is right here and I'm going to turn off the title because really who wants that and now if we come back to our front page wow that did not work the way I wanted it all thank you Safari cool so now I have this header and that's pretty great but honestly it's a little much like it's way far to the left and I can't say that I'm particularly thrilled about that so why don't I come back into my block layout here and what we're going to do is we're going to edit this again and this time I'm going to configure this and tell it I want it to be narrow and I want it to be a header section I believe is what I called that you know going to have to look at my CSS there we go all right we'll do that one more time so I used Chrome for all of this and it had all my auto completes already and then I had too many tabs open in Chrome so I switched let's try that again hey here we go and so really thank you Drupal so now I have this header section that actually scrolls with me and like I haven't really had to do a heck of a lot what I really did was I spent a little bit of time prepping the components I wanted to show some corresponding CSS for those things that I could apply arbitrarily if I want and now I built a site in front of you all in like 22 minutes right like so what I want to spend the rest of this time doing is one digging through some of the code that makes this possible because like if I said oh you can do this you probably think that it might be daunting and indeed it might be if you've never done it but it's actually pretty simple and on top of that I think like with just a little help from a code friend if you aren't a code friend you can probably get really really far likewise I think it gives you maybe a different way to think about your CSS because to my own mind in Drupal a lot of times we're playing defense on CSS we're seeing what it is that Drupal spits at us and then picking selectors from that in order to get things applied and rather than doing that I'm telling the system what I want it to be and moving on with my life and that's a really powerful place to be because I can do something like this you probably can't see that so I'll make it really big is that better alright can anybody see my line numbers what's the number on the bottom 55 yeah though that whole site we just built is 55 lines of custom CSS okay which is really like I haven't ever made a site with that few lines of CSS before I'm totally sure that many people have but for me this was kind of a revelation when I got done with that I was like wow that's maintainable right so what yeah sure well so so no that's a great question great great question yeah so the question was is it responsive and the answer to that is yeah some right there we go my you know fixed title bars with the administrative bar get a little fidgety but that's only on the administrator so yeah I mean absolutely it's responsive out of the box because the layouts we're using are responsive out of the box right and that's actually really important so before I dig into PHP code let's go look at CSS in fact let's just look at a layout in its entirety so here's my layouts module this guy right here and you'll notice it has a layouts directory in it that's kind of confusing layouts layouts and though inside of that are all of the different layouts that I support now these are all documented in a layout YAML file so this thing tells me about every single layout that I'm providing it tells the system what sort of regions there are in it which for some reason broke before I started demoing it to you and it tells what class to use now this is important because you don't have to specify the class that your layout is going to use I'm specifying it because we're doing that configurable craziness but if you don't specify it it runs through Drupal's normal one and you get all the same processing as normal and these layouts are actually really really simple other than we'll look at the navigation one so this is my definition for the navigation one this is kind of pretty stereotypical like Drupal hook info like level stuff there's nothing super complicated here if you open up the layout discovery module inside of core and look at its layouts definitions you can copy and paste and like tweak a little bit and you get really far doing that okay but the corresponding twig is also rather simple so I mean that's the totality of it right like the comment is almost as big as the code is and this is responsive out of the box because of the corresponding CSS for this we're going to come back and we're going to actually dig into this twig file just a little bit in a minute but I'll show you the CSS so that CSS is 40 lines of code right and so again we're just kind of building these layouts to be responsive on their own as we're going so it just worked out of the box I really didn't have to do anything extra when she asks is it responsive yes it is right you can do that in 40 lines of CSS on a per layout definition basis and then every time you use that layout hey it's still responsive right so it's really beneficial and again if you look at what core is doing core is doing this exact same sort of stuff these really small twig files these really small CSS files that are very granular easy to replicate easy to use that's literally like the whole of the front end or side of this equation you can build as many layouts as you want that way and if they aren't configurable that's the whole story that's what you have to do clear cache the show up in layout builder okay but if you want to do something kind of crazy I'm going to spend just a few minutes looking at the code how many people in here consider themselves to be like PHP code level people at all okay it's like half the room that's good so for those of you who aren't don't glaze over on me because I promise I'll be quick through this section and there are a couple of key takeaways from it so the first important one is that my class here this class that runs our navigation the one with the logo and the main menu in it it's extending Drupal's normal default class for layouts okay so there are no big surprises here you get like 99.9% of everything you need right out of the box by just doing that and we're going to add a little bit of sugar on top of it and then the next important thing is we tell it that it implements the plug-in form interface now a whole bunch of plugins implement plug-in form interface but when layouts do it layout builder recognizes it as being a configurable layout and that is super important because it means that that sidebar opens up when you try to add it to the system if you make a required field in there they can't add the section until they fill out the field okay and this gives us a whole host of possibilities I will circle back around to that but this implements that interface and that interface consists of actually building the form which is what the build configuration form method does and there's nothing crazy here this is form API if you've ever written form API you can look at this and read it relatively quickly it says like oh I have a form logo component it's entity auto complete to media cool cool story style into the auto complete to image styles menu entity auto complete to menus maybe you're seeing a pattern here right I don't have anything complicated in my validation hook or my submission hook this is dead simple stuff everything complicated is sitting right here in the build and the only reason this is complicated is because menus are hard right so I grab my logo I grab my image style I get a source from it and I build a little markup because I am not trying to do this cleanly right it's proof of concept I do all of my menu stuff and then we get the menus build array and we attach these things into the builder right here and by doing this they're going to show up over in that twig so content logo that's the logo we just looked at same thing with menu here and then down here I actually added a a region that could be used just like regions from other things so if I wanted to go back to it I could do something like this I could say like oh hey we do actually have a region attached to my header so I could come in here and I could like add messages to it now full disclosure this is an experimental module and there's still a couple of bugs most of these bugs have to do with the strange nature of certain blocks in core like don't try to place the page title it's gonna go badly for you it's on our short list of things to fix but it's kind of a big deal messages you can place them but they're not unless you have messages we're gonna try to get placeholders in for anything that wouldn't show normally and we have a couple of places where we've already succeeded at doing that so if I save this I can come over here and I can edit the Milky Way who has ever said those words before and I can hit save and you'll see now I have my messages with me and of course they scroll with me which is really cool until you get a really big debug message you can't see any of your content but as a proof of concept it's kind of fun and interesting to do this so I guess all of that to say like I literally showed you every nuance involved in doing what I just did on screen right and so I'm here kind of to pitch an idea and this idea is a relatively simple idea which is that when we built layout sections most of us on the team were hyper focused on doing something that would allow us to replace things like display suite and panelizer what we wanted was a system where you could define new regions on a page and then place blocks into them but in the process we defined a whole new page level element that you can add any sort of configuration you want to so what it gives you the ability to do is begin building up a visual language library of section components that you can stack on a page and make them meaningful to any given site I have arbitrary CSS assignments in here where I just you know specify whatever class I want and hopefully there's CSS to back that up but you could make a select list or a multi select list of CSS classes that are guaranteed to exist and really lock down the users so that they can only pick things that are going to work together this is really really powerful paradigm that gives you unprecedented level of control over every page element on the page right so I'm really open to questions at this point and I'm happy to dig into like any more of the demo and show things so yeah feel free two questions so one is the configuration of this exportable and what about per node configuration okay yes and no anything that appears on a config entity is exportable because it's on a config entity and anything that appears on a content entity is not which actually leads me into a whole other set of answers that you did not ask this is a field when it's deployed to the node or the block or the term or any other content entity let me repeat that any other content entity users terms nodes comments files I haven't tried that media paragraphs yeah no I could I can and have done paragraph layouts so that I don't have to do nested nested nested nested nested nested paragraphs I can just make a paragraph laid out however I want to make one type with a layout done right but it is a field and it is a blob field which some people might go ooh but we just serialize all the data in there and that means that every time you change it I can't today but I have proven that we have the capability will track the revisions on it you can revert back in time through all of the layouts you've ever had right we didn't do it yet because revision ability is kind of in flux and core and how we want to do that oh and by the way it's multilingual too so if you want to right to left left to right distinction you can just say like oh let's translate this node into whatever that language is and then you can go into the layout section of that translation and and edit it again that's a patch that's sitting in the issue queue but we have test coverage to prove that this stuff works so that once this module is not experimental we can deliver multilingual we can deliver revisionable layouts to any entity that supports those things in the system. Great thanks. And second question what about the titles can those be added to the layouts and moved? The page title? The node titles. Yeah I wouldn't try that. So no it's a totally fair question you'll recall I mentioned that I had four regions in this theme I had a header a precontent a content and a footer the precontent is where I stuck the title and the tabs because I can't effectively place title or tabs right now and I need both of them on the page so there's still some stuff to negotiate we're aware of these things we're working on them but if you want to use it today and I would encourage that because in my opinion it is probably the most capable page layout utility at your disposal in core or contrib and I'm a maintainer of a significant number of the ones in contrib I would heavily suggest at least beginning to play with this and coming up to speed on it. Yeah. Thanks for your work on this Chris. But I didn't do it alone a lot of other people helped make this happen I'm not going to try to name them all while I'm on stage because that would go badly but we had an awesome team and I'd be more than happy to point people at any of those people and we will be doing a sprint on Friday if you want to come and hang out with us. We will also be trying to make like a lot of beginner level issues that have high impact so. Have you taken a look at all at the Gutenberg editor for WordPress. Yes. Yes I have. How would you describe how this compares anything that we're missing. I love that question. So I know like a genuinely love that question. So who in here has looked at Gutenberg. Okay that's almost no one. So Gutenberg is like well okay who in here has used paragraphs. Okay that's a lot more people. All right Gutenberg is like a really flashy version of paragraphs. If you shipped a bunch of paragraph types that made some sense and were all one level deep and you didn't nested nested nested thing. That would be essentially what Gutenberg is. This is my opinion when I look at it. So can I do that today. No. Do I want to. Yes. And we actually have issues in the issue queue for this. So I said I wasn't going to talk about the things that bother me about custom block but I guess I'm going to do that. Custom block is a really interesting thing because what it allows you to do is it allows you to define different fieldable types of blocks. It allows you to put content into those things and then it allows you to place them. It does not allow you to suggest where you want to place something what thing of that thing and here's content right which is a completely inverted sort of workflow and is the one everyone actually wants. Moreover if you want to do this everywhere on a really big site you end up with an awful lot of blocks which is not good. I've worked with sites that have over 2,000 custom blocks in them and stuff gets bad real quick. So the custom block system is actually really great for doing something like oh that header I just did which I only have one of and I will probably only have a few of. These are the ideas of reusable blocks but when we get into non-reusable blocks we probably want all of the same block types at our disposal and so over a year ago now one or two years ago Adam are you in here? Adam Honick? Nope. Well Adam Honick and I set off on a trip to go create what I called inline blocks and the idea behind inline blocks was essentially to build a shadow set of entities that followed whatever you did to custom blocks at like the typing layer so that we ended up with all the same bundles with all the same fields with all the same configuration but when you tried to call save on them they didn't save. So they didn't go into the database anywhere and instead what we did was we called get config on them and they serialized the entity to an array and we treated it as configuration which we could save directly into the layout. So now the blocks themselves are revisionable with the node. They don't have an extra tracking table to keep track of their revisions. This is really ridiculously powerful both from a translation and a revision perspective but also it means that you can visit any page you want add whatever blocks you want to it and no one's ever the wiser. It doesn't affect the system in the same way. So this is actually where we want to go. There's an issue in the core issue queue right now pushing us this direction and Samuel Mortensen has spent a ton of time helping to make that happen. I don't know if it's too ambitious to hope for it in 8.6 but my personal hope is for it in 8.6 don't take that to the bank. It's not worth anything and yeah that would give me more than future parity with Gutenberg. It would put us above Gutenberg because I can place any block in the system. So this would be you know it would be all about what kind of block types you defined at that point as to what you had available and you could certainly mirror everything Gutenberg does out of the box plus have all of the other blocks that core ships with. Does that answer your question? Yeah cool. Another sort of a usability issue with many of the current layout systems and interplay. Let's say you have like a content type called a landing page or something because they're all still built on top of like the legacy node idea. You have to create this node with nothing but a title and you create that in the form and then you're in this different place where you actually build your content. Yeah yeah. So just to like elaborate on that a little bit more this is kind of an idea of like structured data versus unstructured data and Drupal traditionally doesn't really do unstructured data but that whole thing I just described with your Gutenberg question actually puts us in a world where we can do completely unstructured data. You could totally have like a custom node type that has no fields attached to it whatsoever except the title and do whatever you want in the layout system and add these custom inline blocks to it and you know maybe I want an image here and I want a list of links over here and I want some text here and let's stick an ad there and some more text and like that. But the question you're asking is really one more about like the editorial experience of doing this and saving and then doing that and I would say like we're aware but we're not necessarily trying to solve that problem yet because we need to get this house in order. I demoed something roughly the same when I created the header image because I went and created it and named it header hit save and then was like back on my block content page and had to go edit it to get to the end and yeah it's annoying but I think there is certainly room for improvement there but it's not the short list of things to do right now. Yes. Hello, thank you. I noticed when you installed it that this is still experimental. Absolutely. And the space that I work in is very uncomfortable with experimental. Do you have even a good estimate of timeframe of when you think it'll transition out of experimental? One would hope within the next two releases since that's how experimental modules have to work. Otherwise I have a very big problem on my hands. That being said, I'm going to go back to what I said earlier and underscore it. In my opinion this is the most stable, most capable page layout mechanism in all of core contrib. Thank you for that amazing work that you've been doing here. You mentioned the inline blocks. I don't know if I quite understood what you were talking about. I was just wondering if you had any sort of scoped blocks that you can place on the page? Yeah, they're scoped to whatever entity you're laying out at the time. So you could do blocks inside of blocks actually. Cool. And would you see that kind of replacing paragraphs as a way to replace? I would see that definitely competing with the paragraphs ideology. Will it replace it? Or will it be a way to do things like entity reference revisions where you're keeping track of a whole other table of data just to know what blocks are currently related to this node? That seems like really unnecessary and over the top. And unfortunately it's totally necessary and not at all over the top with the way that's constructed. And we've built something that's completely different. That gets a lot of the same sort of values at a completely different like cost. There's certainly a cost here because we're serializing everything to the database. But that doesn't worry me so much because we have things like page cache. So we only hit that once in a while. There's so much benefit to that that I really think what we've got here is a very good alternative. And just two very quick questions. If you are in the paragraphs paradigm, do you see individual paragraphs, not the whole paragraphs field, but individual paragraphs being able to be moved around into these different regions in your layouts? Okay. So that's actually, I'm going to re-ask your question and you tell me if that's the question you asked. And I'm not going to use paragraphs. I'm going to use images. So if I have multiple images in a single image field, can I place an image two through N here in a gallery? Is that a fair analysis? We're really talking about field deltas and whether or not I can specify. It is definitely on our list of things to do. We have issues that cover it. Core has actually had a long standing issue for making that possible in the normal field management layout or field display section. And I don't know how that's going to work. But I think it's a good point to do things since it's a one-to-one relationship instead of like, in-to-one or what, anyways, point being, we are aware and there is code to help make that happen. And yeah, long term, I would really like to have a multi-value image field where I can say let's render the first one of those as like a header and then, you know, the next however many as a gallery or things like that, that becomes very powerful. You mentioned config. Are they like entities as content or are they actual sort of config that you were talking about there? Yeah, their content is config stored in content. As content, okay. Yeah, so the block entity, right, well this is confusing, there are three different things called blocks in Drupal core, okay. There's the block entity, which is a config entity that stores where it's placed within the block layout administration. So everything enumerated on this page, those are all block entities. Everything they reference are block plugins and anything on this page is a custom block entity. So these things here are content entities, okay. And when you save them, they get written to a table. That's pretty normal for content entities. And so the proposal is let's not write those to a table. Let's never save them at all ever. And instead, what we do is when it's time to save the layouts, the layout naturally digs through every block that's associated with it, figures out what its config is and stores that. Well, we would put a special wrapping block around this that asks the content entity what its values are, which it would basically send the two array values of that entity back and then it sends it back as config, which then gets serialized and stored into content. And it's a form API that you're using to define the config. It's not like fields on an entity. No, it's fields on an entity. It is fields on an entity. It is absolutely fields on an entity. Yeah, every entity has a two array method and if you call that method, it gives you all of its values. And so it's been a while since I've looked at it, but I think we're using that. Yeah. First, worth saying again, thank you so much. This is game-changingly awesome. Second, I think that the thing you saw with the settings tray not showing the SVDs for the layouts is a safari bug, so if you have Chrome you can show that. Really? Yeah. Okay. Can I get it in Firefox? I think so, yeah. Yeah, let's do that because I only have about a bajillion dTabs open in Chrome and we are not going to deal with all the YouTube videos that will start simultaneously playing. Because that was the thing I totally glossed over, but it is completely awesome. It is completely awesome. And thank you for doing that because if I get to show that, I'll be really happy. I guess, all right. Yeah, all right. Thank you, sir. So let me do a quick spiel. So these, as you can see some of them are actually quite complex and but they actually show the things we were interacting with. So you can see like the 6633 and the 3366, they actually look that way and as he mentioned, these are SVG not images. So these are actually generated from the plug-in definitions that we saw in the layouts YAML file. So if I go back and I look at the layouts YAML file real, real quick here, you'll see that let's look at 3366. It says icon map is going to be first, second, second. And what it does is it says like, how many different things did you have? You had three. How many different things did you have? You had two. Great. Let's divide it into groups of three in two sections. So one third, two thirds. And then it does the exact inverse for this one. It's first, first, second. So if you look at the API docs for this that are actually on the interface for the icon map, they have a really convoluted example that you're like, oh my gosh, I can do that. And it's pretty darn cool. It's also super cool because this almost maps identically to what CSS grid is, which might open up the door for generating CSS and not having to write the twigs and stuff. It's an interesting possibility that we're nowhere close to. What was your other question? So it's not really a question and I definitely want to make sure you understand I'm not saying hey, please do this for me, but I want to call this thing out as issues we've made sure are in the issue queue in case there are interests to other people. One is the concept of being able to curate the list of fields that is available within the layout builder interface when you're putting content on the page because like in our use case, we don't necessarily want people to be able to place the powered by Drupal block on a page. We'd like to limit that to just the fields that are available within the layout builder interface. So I'm not going to limit that type, but having some control over that, I know that's in that issue queue. Yeah, so actually this is totally worth discussing and we won't discuss it here, but we've been talking about it since before layout builder even landed because we know we need this. Panelizer in D7 has this sort of feature that's available in the other sections of the types. So, the articles have these sections available and pages have these sections available and this other content type has these sections available and within sections of these types, on those content types I want these blocks available and like having some ability to limit those things and the granularity of it, I mean it's probably going to be a horrible user that might do things you don't want them to do. And then the second one was which I know is in the issue queue too is not having to go all or nothing with the layout builder paradigm, like being able to choose on a per entity type basis. Yeah, I totally hand waved that in this and so what he's saying is I said can in a few places where I probably should have said does. So when you install layout builder it completely hijacks every view mode of every content entity. Now what it does is it puts in place a single column version of it and puts the fields the field blocks in the same order as the fields were in the same config. So you might have a very very slight HTML change because you now have the one column wrapper around it instead of whatever it was Drupal was spitting out before but we do absolutely take that over and there are issues about opting out of it or into it. I don't remember how that goes but yes there is an issue about adding an extra layer of config to that to say like oh no no no I don't want you to touch this thing. And I think if I'm not wrong there's a few spots right now where it breaks if you try to manage the layout like on a taxonomy. I believe we've got all of those nailed right now. I could be wrong but last time I checked we had played whack-a-mole properly with all of that. Thank you again. Thank you. I have a question about CSS. In your custom in your layouts module you had the CSS in there and it defined your breakpoints. Is there integration with or is there the ability to set your breakpoints at a site-wide level or at a larger scale than that custom CSS? Well okay so let's start with I have not been a decade but if I understand how Drupal does this appropriately your theme CSS is the one that wins at the end of the day so if you were to redefine those same selectors your theme CSS would win over what's shipped out of the layouts own stuff but I would encourage you to never do that. Instead I would encourage you to build the layouts you want because they are simple and they are on CSS. Thank you. Secondly do you see this as replacing or plugging into everywhere that any kind of layout is used say like views and you've mentioned paragraphs but is this the one to rule them all or is it just to replace the block and no the intent here is to definitely put a tool in the hands of everyone that allows them to take control of all of their content entities layouts that is 100% the intent so I want to stress this again if it's a content entity you've got it today unless it's a really really weird content entity that does really really weird things we don't expect content entities to do it should just work and one probable exception to that is maybe commerce and boy I literally just walked out but but even there I think that there are some options that we have yet to explore so that being said I want to contrast that against views which is config top to bottom has no notion of any of the sorts of things that we injected by default would I like to see some sort of layout management for views that I would do I know for certain what I think that should look like no I don't and I don't know anybody who does right now mostly because we've been really heads down we have some old things that I think would be a good starting point that exist in seven and we can begin by looking at porting some of that stuff over but for the time being it's not really on the to-do list it's like maybe 48 months that's probably that's probably a bit too unambitious of me it's probably like a year or more away before we even start talking about it thank you my question is related to the inline blocks approach and kind of whether a site can make a decision and whether using that approach versus using some other approach to create complex widgets that have multiple fields so would you agree or disagree that with the inline block approach that there's a UX cost to once you've created an inline block going back and editing it there's no way to get to the equivalent of a node edit page where you can see your fields listed yeah so like I would literally hit the layout on the node that it was on and then mouse over and hit configure and that would be its form right so there's also even talk of doing quick edit full disclosure I hate quick edit with the burning passion of a thousand sons maybe I shouldn't have gone on record with that but too late we stopped recording a while ago right point being I think there are options there and you know I don't have final say on what happens there either the community does so TBD I think is my response to that like yes it could it also might not I think my objective is just to put something in place that like you don't have to click a whole bunch to get where you need to go and the pattern should be consistent so if I have to click layout and then click the button I want to you know click the block I want to edit and it pops up in this window I'm okay with that that doesn't bother me I don't I don't need it to all happen right on where I'm viewing if we can figure out how to do that right where we're viewing it opens up a number of other really crazy ideas but it's almost certainly won't happen in phase one and I could be totally wrong about that because it was Samuel Mortensen writing it and he knows his stuff so thanks paragraphs related question so I'm using paragraphs a lot in a site and I have a lot of paragraphs and each of the paragraphs are themed or structured or whatever so the way I see this working is that I can get a layout well first I start with my paragraph and then I can can I apply the layout builder to the paragraph and then I build a layout and then I can put my paragraph in the layout so I have the layout with the paragraph with the layout so everything's all nested together awesome so just to kind of drive that home like one of the things that is anticipated by the layouts module is that you're going to want to do by the paragraphs module is that you're going to want to do some layouts with paragraphs but the way they expect this to happen a lot of times is by building kind of a wrapper paragraph that allows you to reference other paragraphs which you then use as like some sort of placement so you end up with nested nested paragraphs and sometimes that can end up nesting many levels deep and so you have rather simple granular sort of paragraph types that maybe only have an image or only have text or something else much in the same way I spoke about custom block entities right but you know in this paradigm if you were to kind of take it up a level and say you know what I want a paragraph that has an image with some text next to it you could totally go make that paragraph and then use the layout builder to make sure that it's laid out the way that you want and so you might end up with like more paragraph types but you would never end up necessarily having to do nested paragraph types if all you were doing was trying to use paragraphs for like kind of like alternating content layout sort of things is that a pretty good answer to your question great can we use layouts on the entity form display as well as the view display well you can't use layout builder for it but so in a some version that has already been released a module came out called field layout and field layout I actually don't know the current status of and I don't think Tim Plunkett is here to speak about it but field layout can do that but it only deals with one layout at a time so do you mean one field at a time? no no no I mean one layout I pick one layout and then I can place my fields in there I haven't actually used that module because I've been really heads down trying to help on this one but that module can do that and it's actually one of the reasons we haven't attempted to remove it from core because we didn't replace that functionality of it so we couldn't kill it yet but there have definitely been conversations about it no we have not attempted to support it yet hey thanks for the talk I was a little confused on what ships with it what comes out of the box and then what did you actually add so yeah so from one column right here all the way down to this three column 33, 34, 33 those are all shipped by core everything else in this list is mine from the layouts module and like I said go grab the layouts module take a look at it and dissect it build your own stuff if you like something I built steal it from me I reserve the right to break this module as much as I want so don't use it steal portions of it name space it for yourself and go because this is like I said this is the beginning of a visual language library for whatever site you're building so yeah the rest of these like this image one all the way down to this four column here these were all layouts I built and stuck in there and just tried to put some defaults on so that I could use them and yeah there's nothing else custom in this like that's literally the only thing my module did so would you expect like libraries to pop up to where you can like hey if you want this layout here's the I think that is totally likely yeah and I mean like I have the best name space for it but I really want to be like an example for those to maybe follow because I'm not sure I mean like I think it will happen I'm kind of undetermined as to whether it's a good or a bad thing I think it's probably in the middle like some people will find it useful but for you know for most sites I think people are going to probably build some custom ones anyways and so what I think is more likely is that like agencies might have a little module in their back pocket that they just build custom layouts in and have a set of defaults that they tend to use this is what I expect will happen the most yeah absolutely fabulous work can these layouts live inside of a theme the custom layouts I believe the answer to that question is yes but I'm going to discourage you from thinking about it that way and here's why I have layouts that I've chosen to use they are on a particular node or block or whatever and modules are a bit more permanently part of your build than your theme is a theme is something you might choose to change so if you change your theme and your themes provided your layouts all of a sudden we have kind of a problem if that theme were still active then perhaps the layouts are still there and available but if you were to forget that you had done that a year and a half two years ago and you're changing out themes and you say like oh I don't need that theme uninstall it this has ramifications so to my thinking and this is exclusively my own reasoning about it I would stick all of my layouts in a module together and just carry that stuff around with me and do what I said earlier like if I were running an agency I would just have a base set and I would build on it on a per site basis you can make a module a dependency of a theme and tie them together sure I haven't done that but if that's doable yeah great based on this last thing that you just said you're saying that we should stop like using for example Zerbi foundation with the rows and columns and things like that for example for our company we use Zerbi foundation a lot it seems like that we should take a totally different direction now and just use the layouts this way instead of rows and columns in the theme layer that's correct you have asked a very loaded question so I will speak only for myself this is only my own opinion I would not use a theme like that because I don't want a bunch of regions I have no intention of using I find it confusing in a lot of cases and I think that if I'm confused that's likely to pass down to whoever ends up administering the site so for me yeah I want to provide like the most powerful solution in the least amount of like a mental baggage and so yeah I mean here in fact I will show this too I didn't really show my theme much but if I go into the info like that's my info YAML it only has four regions which I did mention a couple of times and like I only have a page template in this thing and it's just like a fairly like slim down version of the normal page template so it only has like these four regions and I mean everything I built on screen today was like 50 lines of CSS this template and two pre-process hooks that are like one-liners right and these were unnecessary they were just things to like have some niceties so like yeah I feel like I got a lot more bang for my buck I have a lot less to maintain going forward I of course I sub-themed from classy but like I don't have to worry about upgrades there because I'll get them with core this was just a lot less mental baggage for the entire front end of the thing for me and is what I did today practical I don't know we're gonna have to play and find out but I think it's totally worth like kind of showing what I'm thinking and have other people play with it and validate it or tell me that I'm completely wrong and either of those things would be fine I just think that this is really really compelling and worth exploring yes absolutely this is fantastic but I was just like thinking that it kind of overlaps a lot of functionality for example again and I was like okay where this should go and where we should stop that doing that in the theme and start like using this let me be more precise in a perfect world where I had everything in Drupal the way that I wanted it my themes would have one region and I would just stack a couple of blocks in there the way that I wanted and use layout builder for everything else left to right that I think that's as clear an answer as I can give I I wouldn't be using those modules or those themes but I don't want to discourage people from using them I haven't been a front ender for the last decade but to me it's always about reduction of what I have to think about and I don't want to think about 20 regions or whatever the number is right last question is there a way to set up these layout things based on content types and have like okay I want this layout for every single node of that content type yeah I showed that at the very beginning maybe some people came in a little late but yeah if we look at content types he can come up here thank you so on the content type this is just the article content type I went to manage display, I have the manage layout and if I go into manage layout I have control over the default that will be applied to everything so if I were to go create a new article I could override that article whatever I wanted but it would get this to start awesome make sense? absolutely amazing absolutely amazing I'm working on a module called the modifiers module which applies effects in and at the moment it can apply on to any entity I'd just love to be able to get 5 or 10 minutes of your time to work out how I can integrate that into the layout builder I could show it to me but I'd be more than happy to do that can I organize 5 minutes of your time some way? absolutely let me answer the rest of these questions and then we'll do it somewhere on stage I just wondered how does this fit in with someone that's using KSS or a component yeah I don't know the frontenders I've showed this to a lot of them have been really excited I've had them say I don't need a pattern library or things like this because like I said it's a visual library language where you build up the components you want to make available it's a self-contained component that renders in a very particular way every time you use it and that's really powerful does it actually replace KSS or these other tools that I don't know haven't been a frontender in the last decade but I do sympathize with them and I know the tools that I want they're building the tools that I was pretty sure they could use and the response has been generally very good yeah I just wanted to see and listen that was awesome yeah shoot