Drupal 8 Paragraphs + Layout Discovery

well if you are let me just go through a quick poll at site bowlers in the room anybody would scribe to sales and site builder few folks a bit number how about developers just about as many content editors spend a lot of time in the editing interface cool project managers well that's surprising Thank You designers yeah awesome wow so good showing up all of you great that's great helps me know how to how some of this I guess applies to all of you as we talk through this um let me start with just some really simple concepts but again really fundamental I want to talk about structured content and specifically I want to start the very beginning with the idea of feelable entities which is something that I think is incredibly powerful and fundamental to Drupal and something that makes Drupal so well so powerful the whole idea around feelable entities is that of course you have an entity or a thing of whose content to which you can flexibly attach fields really simple somewhat classic example would be a blog page we have a collection of fields title body image author etc feelable entities define whatever allow us to define whatever type of content we want to allow us to add whatever fields we want to to those pieces of content are thereby incredibly flexible but also highly structured this whole idea of feeling what entities being both flexible and structured is incredibly important for maintainability for letting us separate content from presentation it's very important for supporting future migrations if you've ever tried to run a migration from content that was dumped it into a WYSIWYG first to structure the content that's something you would be really familiar with a create once publish everywhere paradigm or the COPE D couple applications native apps and all kinds of things are driven by this very fundamental concept of structured content which again is collections of fields on entities now things can get a little bit more complicated with nested fields or fields within fields a few years ago some developers got together and created a solution called paragraphs in Drupal which is simply a combination of these fields within an entity that itself belongs to a parent piece of content I'm cured how many folks here have used paragraphs already or are familiar graphs okay awesome so all this is already really familiar an example might be in this case a simple list where again is a collection of fields it belongs to the parent entity or a quote in image etc and breaking content into these kinds of chunks lets us build much more advanced complex layouts with more interesting combinations of content things like slideshows that might have a collection of images with their own captions etc more complex information in this case looking at location data and various fields about those locations a flexible content area that has text content interpolate it with image or video with a background image a lot of flexibility a lot of power comes from paragraphs in addition to being able to add these kind of complex combinations paragraphs gives us the ability to quickly reorder content on the page so we can very easily change what's on the bottom or drag things in in a stacking order on the page ensure a paragraphs are structured and very flexible make some very powerful from a site building and building perspective but they're also really complicated here's just a quick example of a paragraph site editing interface which probably looks familiar to about half the folks in the room where we have one paragraph being edited at the top amongst a list of other paragraphs you can hopefully kind of make out the pitch that drag handles so you can reorganize or rearrange these things in order on a page when we were trying to do more complex layouts where we're managing paragraphs within different regions on a page maybe from left column to right on etc things get a lot more interesting or at least more complicated I'm not even going to try to explain what's going on on the screen but it's a lot of nested paragraphs and it becomes fairly insane if my content in perspective really powerful we're still talking about structured content we're still talking about content that's easier to migrate in the future but also we're really complicated and not not entirely easy to use meanwhile of course organizations are looking at other platforms and the way they're handling content authoring and these platforms I think are changing users expectations and have been change and users expectations for a long time this is just a quick look at an install of Squarespace I think I was in this screen within two minutes of typing in my information really elegant expressive offering a content editor knows exactly what they're what they're getting as they're writing content and it just works really well from an authoring perspective I still believe the trade-offs when we talk about flexibility having open content being able to own your own content the trade-offs are huge or rather the value is huge with Drupal but the trade-offs are getting harder and harder to explain harder conversations to have so we've been talking about you know how do we get to structured how do we how do we have build a solution where we have structure flexibility and more elegant author interface and that's what we're gonna get to you in a minute before I get there I'm going to touch on layout discovery how many folks have played with the layout builder or are using the layout builder awesome so a few and how many folks are familiar with layout discovery or the layout API which is sort of underneath the layout builder great okay so how could it talk a little more about layout builder and maybe further or even after the session for now I really want to focus on the layouts on layouts API I talk about exactly what layouts are in Drupal 8 and layouts again being a component that's leveraged by a lot of other systems like the layout builder so Leyland Drupal 8 basically is composed of a template with regions regions being a header region left column right column I mean you can you know primary secondary you can arrange these things however you want to and it's not doesn't need to just be - it can be as many regions or columns as you want so it's template with regions it comes bundled with a library which would be CSS and optionally a JavaScript at a minimum you would want your library to control the column structure to control from a very basic level the layout of this layout and then a layout plug-in and layout plug-in is a class that manages the presentation of the layout there is a default layout plug-in class in Drupal core and Drupal 8 it's called layout default or default layout the its layout default but you can extend that and create your own layout plugins that might come with options to help manage layouts layouts are already used by a number of systems of course there's a layout builder bootstrap layouts any of you all have used bootstraps or any of the layouts that are shipped with the bootstraps layout module bricks which does some of the same kinds of things we're going to be looking at in a minute that was a module is a module for managing paragraphs managing paragraphs and kind of stacking order of paragraphs and then a number of other modules including when we're gonna be talking about in a minute alright we started thinking about a solution that combines paragraphs and layouts and started thinking about requirements specifically we arrived at this list must-haves must work with paragraphs obviously we wanted something that supports inline creation and editing so it's really easy on content editors we wanted something that allows content editors to easily move paragraphs into regions of a layout it would also be pretty nice if it was drag-and-drop if the editing interface looks something like the front-end interface so as you're editing you have some idea of what you're building and then finally some capacity for more advanced layout options maybe adding classes to layouts managing regions seperately things like that and out of that we landed on this idea and created this module called entity reference with layout a few basics about this before we actually take a look at how it works entity reference with layout is simply an entity reference field so it extends and to the reference field it's a new type of interesting reference field that adds a few other properties for tracking layout data and also on the widgets side it extends inline entity form for allowing content editors again to edit content within the context of a bigger form or of the parent node and of course this module uses the layout API okay so I'll try hopefully show you what this looks like do a quick live demo yes I still see that okay this is going to be interesting with these screen dimensions they show you a really small live demo so it is responsive we'll see just how responsive I'm afraid it's not that responsive that gives us a little room alright okay so I'm just gonna give you a quick look at some development work we're doing on our own site and show some pages it should look somewhat familiar okay I'll have to look at that great so let's go to the admin content section this content going to add a new node in this case I want to add a case study we have a typical somewhat typical node add form it's worth pointing out that this site has a lot going on with it there's a lot of custom theme and custom functionality that's been wrapped into this I do hope to you after we talk through that someone power show of some of how this works sure what this would look like in a fresh Drupal install also and kind of what it takes to get to this in a fresh Drupal install so I'm just gonna start adding features the hardest part of this is going to be typing great so we have an image field this image would be you know if this case shows up in lists of other case studies we would use the image field here not so interested in that for the purpose of this conversation I want to look at this content field the content field is using entity reference was lit out provides the ability this very simple option rather right off the bat to add a new section when you click add a new section it launches a dialog we're able to choose from all of the available layouts that are using that layout discovery system we have some options that are provided by a custom layout plug-in we'll get into you here a little more in a little bit I'm gonna choose you some simple options reverse means light on dark rather than dark text on light choose a red background color create the section we now have our red section I'm going to create a masthead which is just what we're calling the top area of case studies select a couple images using the media module and of course these were not already on my system I would grab them and upload them rearrange those drop in the link and there we have it a really condensed version at this resolution but you can kind of get the idea of how this works and how this looks as you're adding content it looks a lot like in the backend it looks a lot like the front end which was again one of those goals it's gonna add a little bit more content here to show how this some of the more complex layouts might work so at the second section this one will do two column we'll just leave the default background yeah what we're not seeing here is we have a left and right column and these are collapsing because this is so narrow because again it is responsive these are collapsing into a single column grab some text make it a little bit bigger and drop that into a region there we have it will be the same thing for the right region if we decide it for some reason it's a little hard to make this out again just because of the resolution see how this looks when we look at the front end great this interface gives us the ability to quickly move these items around so if I want this to be up here right now there's stacks actually in the exact same region so if this were wider and it was left and right they would both be stacked in that left region at the bottom of the left region and drag this text into the right region etc lots of flexible capability for rearranging paragraphs within this system that's a great question so no not a table unless you themed it that way which we probably wouldn't do that so the HTML is coming from layout templates and you can actually create whatever markup you want layout templates and there are some systems like bootstrap layouts where you can go into your layout when you click for example when you're adding a new section and you have these layout options one of the layout options that bootstrap provides is what kind of wrapper you want around the entire layout plus each of the regions so theoretically you could wrap it in a table then at ER or TD that would get fairly complicated trying to manage it from here but it's all template it does that make sense so that's all coming from the layout template and then the individual items themselves the theme for those is provided by the paragraph simply you showed us one or two more styles here next piece here is when you talk about key challenges in the project will go to believe this is a one column choose this three item list these are all all of these classes also we have added these custom classes or this list to this layout plug-in that's arbitrary you could have whatever classes you want you can create your plot you could create your plugin with whatever options you want we've just chosen to add classes as options for our layout plug-in and we have a list of classes that we can add but then we also have this space for extra classes so when the theme layer we've we've attached special styling to this case study underscore underscore summer sessions class create the new section actually background color basically now I have a custom very light background color will add some more markup and each of these is probably maybe obvious but each of these things that I'm adding is a custom paragraph type define just the same way any other custom paragraph typing would be and again this collapsing into a stacked list on a wider presentation this list is the reader Oh Jeff I'm not sure what'll happen if I do that I can try it oh good call yeah so this is more like what that would look a lot of screen thanks Jeff you would yeah it's exactly right and you would optionally have to create another paragraph icon so out of the box there would be no icons it actually just uses when you create their graphs they have an option already for adding an icon with them the paragraph module provides that this just uses that icon not on a section that has an image so we can get a sense for how that looks and then move on to talk about how this works in what what it would take to actually get to this and a fresh Drupal install okay let me add this other text section to again the system allows for specifying custom classes with your layout API and cause some background color so in this case I want light on dark again I still want this special class for three item list which meets the list tile horizontally I'm going to add that extra class this time I went the background color to be teal it's gonna be darker which is why we reversed the text we could have also there's a lot of flexibility with the way this works we could have also just as easily I've chosen to do this same layout in a three column layout section itself so what we chose to do here is just create this as a simple unordered list and then use those custom styles to render it horizontally like well as I was just showing that we could have certainly done that as a free phone layout just dropping a text paragraph neat one that seems a little overkill again this is all in the editing interface we want to move these up or down we can grab this whole piece drag it around there's two also these up and down arrows to make that a little bit simpler as these pages get really long become fairly complex which makes those arrows really nice now actually use this last two columns one just to do an image something with an image right keep saying that but then I learned something else I want to try a jump into the layout section and this time scroll down to editing the region so Eddie editing attributes on the region I'm going to add padding in my region which again is just using a class that I've created in the layout API handler really a plug-in I also want the text again to be reversed again that's just a class we created that reverses all the text or makes light on dark change the background color to red update the section that's a text again again that shows up is light on dark because of that class we apply there on one more piece of text here let's see if we have okay so again the goal is to make this was to make the experience more expressive look more like what you get in the front end as you're editing content to background provide flexibility for moving elements around and for actually changing layout on the fly for making decisions as a content editor about how you want to lay out your site and specifically how you want to lay out content specific piece of content in your site we'll take a look at what this looks like in the front end and there we go and really similar to how that was in the back end instead I'll change gears for just a minute and show what this looks like and another example was a key study that's already been completely created so if we just scroll through this and see the way content has been arranged again those different classes that we have set up and that layout plug-in or allowing us to control the look and feel very individually for each of these pieces which is very important all the way down to a slideshow which even the slideshow as everything else is simply a paragraph we can drag around we could break it really tiny if we wanted to not that we would ever do that but that gives some sense for kind of a flexibility on this in hearing that system with that approach question so far please yeah it's a great question this is on a couple of live sites and it's still working progress there's an alpha 2 release and it's on drupal.org at drupal.org slash project slash entity reference layout and I'll share that as one of the slides index well I mean I would caveat that heavily and say with enough testing sure we are that's something it is something that we are already using and some other developers in the community or not affiliated with my team at all sorry picking this off as well yeah please you know that that's a great question something that I've thought about a lot is how would we move from I mean again this is just a new type of entity reference field so probably the way we would have to do that is to create a migration that migrates from one field to the other it simply takes all your content from the old reference field it puts it in the new reference field once that's done I mean the content should show up it should work you would just then want to go back in and drag paragraphs around into the layout that you want alternatively I mean you could definitely right into your migrate script a process you yeah that's thanks for asking that also great question so the question was how does this relate to layout builder and does this extend layout builder um this is not extend layout builder and it is related to layout builder in that it is also based on the layouts plug-in system in Drupal and it's based on the layout API other than that there are two very different systems and this one is focused entirely on managing paragraphs on a node if you want to be able to write paragraphs on a content type or write paragraphs within a content type and quickly move those around within the context of that one field this works very well for that layout builder is a incredibly in-depth robust tool that allows you to manage essentially the layout of anything you could possibly imagine in Drupal and it's a much larger I would say framework vs. this is a modular approach is that sort of help with that this also is not incompatible at all with layout builders we will be using layout builder on the same site for constructing layout around some content types so for setting up a content type or we all we know that we always want the image to be in a left column we always want the text to be in a right column those layouts themselves or something we would do with layout builder make sense great okay let's look at how this works with a fresh Drupal install so the only requirements forgetting to set up and I did this just before this talk first install Drupal second crease in paragraphs we created a control awhile ago called stories which is just a collection of paragraph types for storytellers so that's what I used is a starting place you can use whatever you like Thunder is a great distribution that has a collection that also in addition to a bunch of other functionality provides stories or rather provides paragraph type I'm so create some paragraphs install the module optionally install the sub module ERL paragraphs ERL paragraphs really just provides a single paragraph type called section and that's what in a minute we'll use to attach what kind of walk through that process and use that to attach our layouts and then optionally again you can install your layouts your layouts provides some custom layout plugins that's not necessary but it's a good example of some of the functionality or capabilities that are available via layout plugins ok so let's imagine that we literally just finish the install process and installed those modules this should be a completely empty Drupal site the first thing we need to do is go to our content types not common types choose the content type we want to add this new field to I think basic page makes sense add an effete you'll choose to the entity reference with layout field type again that's just an entity referenced field we'll call it content whatever we want so it works so you even continue a lot of this is going to look like a standard entity reference or paragraph field number of options we want to be able to add as many paragraphs we want save and then scrolling through this list we choose the different types of paragraphs that we want to be able to reference so we'll keep this somewhat simple I want to call to action an image list of links quote text and then section which I touched on a second ago that's that paragraph that was created by the ERL paragraphs model now one thing that's a little weird about this model and a little difficult to get conceptualize I think is that one of these paragraphs we have to use for layouts we're going to choose one of these reference paragraphs as sort of layout container or what we attach layouts to and in this case we're to use section we could use whatever we want but that's the purpose of that particular period there's nothing special about that paragraph except that it's what the interface is gonna will allow us to you attach layouts here and then we'll choose the different layouts that we want to make available these layouts are coming from the layout API they are provided by the layout the layout module in Drupal core that's why they show up if we were to install you know our own layouts we would have some additional options there provided by that when we created our you know as we're working on our site we have some additional layouts that are provided by that bootstrap layouts with collide its own layouts etc there we have the field we will also have a few I'm not even gonna get too far in this a few options on that field for the widget none of this is really worth getting into right now the one thing that is perhaps worth pointing out is if you're thinking about building custom layout plug-ins you can create those plugins for those modules in a way that extends this form as well so that you can manage not only not only do you get custom options at the Edit form but you can create the ability to manage what those custom options are and time permitting we can look at what some that looks like too alright let's go back to manage content add a new basic page we have a normal body field and then down below we have the content field it's exactly what we were looking at the other example and then just as before we have a list of the layouts that are available there are a few basic options that are provided by the module directly I say a few it's just two custom classes and texaco background we're moving away from this in favor of using layout plugins for controlling all of this kind of functionality but in the meantime there are a few folks using this and we wanted it to work it set up a two column section and just as before we have these little hard to follow on the screen sighs thanks I'll text there we have our image and again this can be dragged into any region we want something else that I want to work on is the ability to specify what View mode a particular paragraph uses in each region and also to create mappings between regions and view modes so that some items automatically use a particular View mode when they're added to a particular region as it stands right now all paragraphs use their default rendering View mode so that is a limitation at the moment of something that we're working on okay so hopefully that gives everyone an idea of how this works and how this would work out of the box we can save title save the content is rendered into and hard to pick up on the size but the content is rendered into that layout and into those different regions all that makes sense so far any questions about any of that and getting this up and running on a default Drupal install or fresh herbal install I think the last thing let's look at just as an example of how layout plugins work I'm gonna install bootstrap and also then install bootstrap layouts and this will give us an additional collection of layouts which is what we were just talking about a minute ago so I'm just going back into edit the field or we can choose what layouts we want to be available we now see this new list of all of the layouts are provided by bootstrap I'm going to quickly select them all and remove these other ones and then just very quickly show the impact that that has on the content add screen back to content go back to our admin content page add some new content again a basic page now we add a new section we have a completely different set of options of course for the layouts and each of these layouts also ships with their own so this is a lot coming out of bootstrap with their own configuration options for how we want to render this layout back to that question earlier of how are these rendered bootstrap gives you the ability to say exactly how you want them work what what HTML element you want to use for renting and that's not coming from that layout plug-in that's it that's how it works any questions about any of that and how that how that works or how I don't know need any element so that quick list of resources the module is available on drupal.org you can go to Aten that io /url and it'll redirect you or you can just go right to drupal.org slash project slash entity underscore reference underscore lay out a couple of blog posts on our site that are about some of the topics that we've talked about today specifically paragraphs and layouts as well as structured content thanks a lot thanks for coming to this session and the slides are not but we'll soon be posted to this URL if you are interested

Channel: Stanford WebCamp

Views: 2,578

Rating: 5 out of 5

Keywords:

Id: 1Wr_9e25uxQ

Length: 38min 36sec (2316 seconds)

Published: Fri May 24 2019