 Thanks a lot for coming along. This is a presentation on layout paragraphs, a new way to manage paragraphs. Now, for those of you who know me, you probably know I'm a bit of a paragraphs not I seem to do a presentation on it at least once a year and it's 2021 so it was time to roll out another another presentation. So this will be a demo of the layout paragraphs module, but it could also be called a brief history of layouts in Drupal. And so what I would like to do before I jump into the demo is just sort of share a few of the ups and downs of layouts and presentation and you know how do we get editors to build pages in Drupal just some of my experiences. Over the years, I flip flopped left and right pretty much every year and I'm sure some of my experiences align with with what how you've been feeling as well so what I'll do is I'll just jump in and just go through a few of the basics of layouts and just my experiences. So I came to Drupal in round Drupal six Drupal seven and you know back in those days, you know you had PHP templates, you know rendering nodes, you had your data you had your template and you rendered it. It was very theme focused. It was kind of like a very pure approach. And you know the theme and you what they wanted and the theme got that, but the downside of it was that there was this very low editor control, it really was here you have the design, you have the implementation and that's it. The site builder and theme that the editor really sort of played quite a low, a low small role in this setup. Display Suite was an awesome module. Once again, it was theme of focus but it introduced the concept of layouts, it gave site builders more options, and there was some sort of editor controls in there but once again very very small it really was a theme as tool. So that were just sort of some of the groundwork modules that were, you know, in poor approaches that were in place for say Drupal seven. And then of course we have panels and panelizer sort of came on to these a little bit later sort of like always a little bit skeptical of panels you know some people turned their nose up at it some people really, really really liked it. So I was a convert once, you know I got into it. And I think that the real sort of breakthrough with panels was that it did try to open up things to site builders, and a little bit to editors. So suddenly what you had was you had you know site builders working in a UI, working with layouts and different parts of the, you know the page and basically placing blocks what they, how they like so the site builder really got a huge boost here. I've got powerful exclamation mark because you know panels had features then that I don't think we've still we've really got now. I'm thinking about things like the access plugins. You know page manager and sort of these mini panels and there's this huge amount of flexibility that was in there. You'll also see I've given this one a little score here and there is method to my madness I will come back to that score at the end, but basically I'm giving panelizer a 69% score. And then the paragraphs module came along 2014. It was like a sort of new on the scene and of course it's grown to huge prominence. I'm giving a ticks in everything because I do think it addresses requirements for theme and site builders and editors. Like, you know, the first real time that you know editors are able to start creating components that they that they would like. I've done the UI. It's never really been a great user interface. I think we can agree with paragraphs. The nesting that you will find in in paragraphs, the display and you know that you're not really getting a what you see what you get experience with those so that's that hasn't been good that aspect but pretty much everything else was great. Then triple eight came along something bad happens, you know, we lost a lot of the modules that we knew and love. Speaking from my decisions like I was starting to use the lightning distribution and it because it was supporting panels in those very early days. And it was pushing people to using this system called IP, which is basically allowing editors to move blocks around in the front end. I'm giving us a very low score 39% even though it was meant to be editor focused. The UI was very complex. It was not stable. It was buggy. It just didn't really work so I felt like, you know around 2016 just took a huge step back, you know we had this amazing ecosystem. You know with with paragraphs and panels in triple seven that took so many years to build up and then with triple eight we had to learn all of the lessons again. Paragraphs didn't go away. I mean that that community was still consistent. There's still relative stability there. One of the other modules I was playing around with at this time was called the bricks module. Not many people really got into bricks. But bricks brought layouts to paragraphs and it basically you had the layout plugins that were exposed and bricks could make use of use of those and basically you could put paragraphs into it. It was a really good concept. It brought structure to paragraphs that weren't existing there previously. But as an implementation I even though I kind of love the approach of bricks I just don't think it was perfect that the UI was not really there and you know it was a little bit glitchy as well. And then of course we had layout builder ushering in a whole new era. You know when I first saw it at Drupal con there was basically us and ours from the audience as people watched in or as you know blocks were dragged around and placed into different regions. My contention with layout builder is that it is still a site builder tool. I think it's done a great job at sort of unifying how we do layouts across all the view modes. I don't think it's convenient. I don't think it's ready for editors, and I think the way it's sort of developed over time it's just feeling incomplete to me and that that's a little bit of a shame. That's just my feeling I just feel it hasn't quite got to you know it's where it could be. It's still getting a very good score though. What did we do at morphed we switched everything from paragraphs to blocks at this time and so that meant a lot of our components were re implemented to be blocks to use this new, this new paradigm. But as things would have it as just like well we moving to blocks we've lost a whole lot of stuff with paragraphs and then we you know we switch back to them. So this is great. We've now got a unified way of doing layouts. We've got the editor focus with paragraphs is basically getting ticks and I think you know we're back at 78% here on my scoring I think we've reached a really like a high watermark with the tools that we have available now but it's not perfect. And that's where the layout paragraphs module is coming in. We've got the unity of the layout builder. We've got the flexibility from paragraphs, but the layout paragraphs module gives us a better UI and we'll be seeing that soon. So I'm calling this double plus good 81% I think this is very interesting and that's what I'm showing it to you tonight. So where all these numbers come from. There is method to my madness. I think like last week I just said hey why don't I just make a spreadsheet for this. So across the top I've got the all the different paradigms there over the years and down the left hand side, hopefully you can see this. So I've got the text or aspects of the systems power stability, FEMA control site builder flexibility, editor power editor experience, as well as the health and momentum of those modules, or those systems. And I've also waited them, and I've waited editor experience very highly, as well as the editor power and site builder flexibility they're the things I've waited. And that's basically where I got the scores from so you know you can see the scores down here. I think the funny thing is this like over the years we've we've kind of reached high points like in 2014 and Drupal seven with paragraphs I thought that was, that was a high point. So in 2019 with, you know paragraphs and layout builder I think that's a high point, and the low points panels IP and you know it's kind of weird how everything kind of fast to be destroyed to, you know to be made new again. And here we are in 2021 I'm really giving it the big sales pitch here hopefully not too much, but I think this layout paragraphs module will change things for the better. Now, flip over to a development site that we've got. And I'm not saying this is perfect guys it's just a dev site as it has not been released, but I will show you the module in action. So, I've come across we're just looking at a demo page for different components. You know we've got different banners. We've got accordions. A lot of this stuff will be familiar to to you, you know videos charts, a fast facts block different lists of things. So we've got a slide show heaven forbid. You know interesting tile layouts, etc, etc. Okay, so we basically got a number of components on this page that have been built with paragraphs and you know layout builder is in in the back end. Let me show you what the UI looks like for a complex page like this right so we will scroll down here to the components. What we are seeing here is a visual representation of the paragraph. Okay, so it's not just like the that simple little preview that you would get maybe a title or a few little lines. We're actually getting. The preview so there is obviously there's a full rendering of that that component in here so there's been a little bit of trickery behind the scenes to make sure that that theme is working properly here in the admin theme, but essentially you know what you see is what you get on this one. So what I'm going to do is I'm just going to add some content and we can just sort of see this in action and of course, this is where the demo goes awry. But just say we're just making a little demo page here will skip the body will come to the components and this is what we're all here to see. So the UI is different with normally with paragraphs you'll see like a hey add new paragraph and you would select what you want. But here we have a new option and a new UI. So firstly with the UI you'll notice that there's an icon so each paragraph bundle has a little icon that you can upload that is a pictorial representation of it. I think you agree that that's just a nice incremental improvement, but we have this other special paragraph so this the layout is a paragraph but it's a special one. And that's at the top and we can select that. So when we select the layout, we then get the options now we have to find a set of very simple layouts not too confusing no bells and whistles, but just simple options for editors to pick so you can pick the layout. And then it's just a normal paragraph and you can add other stuff into it so there's a few little doodads that we have at Morph but I'll just save that. Okay, so what we have now is a layout. And you can see we have two regions in here. So this is a proper layout plugin being rendered into the page we've got a 66 or a 5050 kind of situation here. And then we can add content in so I might just add some some content in here we'll just call it left. And we'll just chuck that in there. Okay, some of the usual stuff just save that we have left you'll see that that is sort of looking as you would expect and then why don't we just do a little node list in here so add a node list. And we'll call this right. So no less is just a little component that we use you guys have probably got something similar. You use it to fairly similar common pattern. So let's just chuck a test article in here and maybe a test, a test something else test person will make them basic cards and in this case we will just drop a this is not a proper layout it's just a class that we're dropping on that. So you can see here we've got the node list basically we've got two entity references pointing there displayed in its own little layout. And this is all looking quite nice. We'll just make this to say a landing page will publish it. We'll see what we get. So there we have the left on the right and the the the two items, the two items there. Just if you were interested about how you might style that it's interesting to know that this, this component here, whilst it is a, it is a layout, it is also a paragraph right so if we want to put a color palette on that. So what we're doing here guys is just dropping a class onto that paragraph. When that renders out, you didn't get the preview there but when that renders out you will get the, you know, those classes been dropped on. So we're very much using the paragraph paradigm still to drive all of this, but we're getting that the power of those layouts inside. I'll just show you one more thing. One more paradigm to layout builder where you have the concept of different sections or stacks like a layer cake kind of approach on the design if we wanted to put another, another layout in here we can just come in and do that and let's just say we're going to chuck a three column, a three column in there and let's just make that a dark background, and we'll do save. So, we've got the three. So, I'm just going to just, if you just bear with me I'm just going to turn out a bit of a bit of content here, you'll see this title field is a is a remnant from the old paragraphs world where we'd always want to have a little display title there's really no, no need for us to, to have that anymore. So yeah of course we can just keep in coming and creating content here. Sorry to just do that one. So we will just do that we've got one and two just going to save that guy. There we go. We've got one and two different backgrounds. That's, that's quite a pleasant experience. And then when we, if we want to come in and sort of change things around. We can grab this little handle here. Come on. Move it into the left. That should be able to do that is that working. No. Okay. Yeah, typical. Okay, so we'll move the left down there and then we can move the one back up into should be able to move the one up into there. Okay. Okay, that has not worked so well so we've got the right left. Okay, so what we've moved and move that component there, but you can see that we can basically move these things around between different sections. So there we go. So that's just targeted that down there so we've been able to basically move the sections around we can move the the components around inside. And you can see we've kind of jumbled them. We've jumbled them up there. You would not be able to do that with paragraphs normally normally paragraphs are kind of lists of things and if you had different sections that would be, you know, a difficult thing to achieve. So that's, that's basically the demo in a very quick nutshell there. I'll come back to my presentation. I'll just complete that with just a few a few ideas. Firstly paragraphs and layout builder. Obviously I like that. Maybe you don't maybe you're big fans of layout builder and you like working with blocks and layouts and I think that's acceptable approach as well I'd love to hear your thoughts if if you think that is superior paragraphs, a nice solution. They're not perfect. They do have problems and really the editor experience was bad with them. I think layout builder had promise it still does have promise but I think at the moment it's fulfilled. And I think the main question we have to think about there is who is lay out what is there. Who is layout builder for editors or site builders. At the moment I think it's more for site builders rather than an editor tool. I'll be interested to hear if you've had success. Otherwise, layout paragraphs does bridge the gap, and it provides a UI which is good and reliable. I don't necessarily think it's perfect but I think it's like just leaps and bounds ahead of what we have there and it does bring that extra flexibility of bringing layouts into the node edit screen. So that's it. Thank you very much.