Codeless, Drag-and-Drop Editing in Drupal

great so again today we're talking about codeless drag and drop editing and drupal specifically what we're going to cover is first layout paragraphs really just talk about the background of layout paragraphs just about everything we're going to demo today is based on the layout paragraph module so i'll talk a little bit about why we use layout paragraphs versus some other alternatives that are out there we're going to talk about uh just briefly about project status and adoption specifically for layout paragraphs there have been some really interesting um developments on the module specifically that i'll just share with everybody quickly third we're going to demo the atom design group site as a way to look specifically at some of these authoring tools if you've joined any of these demos before this is going to be really familiar to you we are going to be looking at a slightly newer version of this module and some of this technology so there'll be a few updates to look at there and then finally we're going to look at a simple new drupal website so just a kind of a brand new drupal 9 website with literally zero customizations so you get a sense for how some of this would work if you were to turn on these components or these modules right out of the box and then we'll take some questions so that's it let's dive in so first let's talk a little bit about why this layout paragraph module versus some of the alternatives so first of all layout paragraphs provides expressive drag-and-drop content authoring it is a tool designed specifically for content authors it is not a site building tool like layout builder in core layout paragraphs is specifically designed to empower and enable content authors to create really rich dynamic pages and we'll again show some of that here in a minute um layout paragraphs provides structured content so with layout paragraphs you're not sacrificing structured content the way some other more like wysiwyg based solutions might i'm happy to address more of that in the questions portion of this as well layout paragraphs leverages a familiar workflow and configuration with fields field widgets and field formatters so it's using layout paragraphs is going to be a really familiar experience for anyone that's worked with with drupal and drupal fields in the past leo paragus does not require any migration if you're working with paragraphs already layout paragraphs will work right out of the box it is simply a field widget and a field formatter that can be applied to your existing website and finally with the 2x version of layout paragraphs there's a suite of apis for building further enhancements to the authoring experience so something that's really important to us is kind of re-architecting that module so that it provides a really great foundation for for pushing the authoring experience even further [Music] just very briefly layout paragraphs you can download the module at drupal.org project layout paragraphs just to talk quickly about releases there is now a stable production ready release 1.0.0 um that is definitely the recommended release if you want to include this on any production projects or just download the module and see exactly what it's like to work with it grab that 1.0.0 release we also now have a complete rewrite that is in dev and early alpha also available on the module page again this rewrite has reusability maintainability in mind and includes a suite of apis that will allow developers to build experiences even further enhancing the author experience on top of layout paragraphs and then finally adoption for modules growing so it's been really exciting to see this even in just the last couple weeks we've seen adoption for layout paragraphs really take off we're excited to see this being used more and we just would encourage everybody to go check out the module page on drupal.org get involved in the issue queue and of course download and try this out your own projects [Music] great so with that let's take a look at how this actually works so i'm just going to toggle over here to the atom design group website this is a drupal 8 site i'm logged in as an admin user i'm just going to get started by creating some content so we get a sense for how this works so we're going to take a look specifically at case studies okay so these are a great example of the kinds of dynamic content that we we want to empower we want to be able to create with these kinds of tools here this is just a typical drupal node edit form or node edit page i'll scroll through most of these fields and skip over them layout paragraphs works great with moderation so i can leave this in that idea state and hit save and we have now created a case study that is still in an idea state it is not published and there has been no content added yet as we can see from this message hit start adding content we immediately have this option to create a new section add a new section within our section we can choose from the various available layouts we'll go with a one column you can see some of the options on hover for our new section that's been added go ahead and click open this menu and we see now inside that region a menu of available uh component types or paragraph types so i'll grab a masthead which is kind of the intro paragraph type for most of our case studies give this a title and add in a subtitle grab some images from the image library to use in our masthead grab this one this one hit place which is a step i often forget and hit save and you can see that content immediately drop dropped right in front of us this is looking pretty good i think i'm going to add a background color for the section it's going to formatting options these are all just fields attached to this paragraph so nothing specific to layout paragraphs going on here we do have a as far as the formatting goes we do have a collection of classes that we've created that we can use for this we give that a light on dark theme and a background color and that's looking much better we're just going to take a few minutes here to kind of build out again this case study so for the second section we'll go actually i'll start with a one column again and then inside of our column we'll add a text component grab some text to use for this we can see the plus options on both the top and bottom of the component we've just dropped in add another block of text all of these components can be dragged around so they can be reordered they can be dragged anywhere on the page so they can be dragged up into an entirely different section etc you can also unlike layout builder one option with layout paragraphs is you can you can easily change the layout of a specific section so if i decided i wanted this to actually be two columns go in and choose the second column um you see that applied immediately i can drag the text over to that second column great let's add another section do another one column this time choose a background color again [Music] and again add some text [Music] throw in an ordered list of the key challenges that we dealt with with this project and hit save we actually have a class that will make that look a little bit better so i'll go back in here and add this special formatting class to that component or that paragraph which makes it look a lot nicer um again all of these can be reordered so even the sections can be dragged and rearranged and there's also these move buttons which will slide the sections up and down along the page let's add another section this time again we'll choose a dark background color again use that reverse color scheme save some more text for the solutions for the project i'm gonna use that again that three items special formatting class to make that look a little nicer great okay let's add another two column this time we'll start with an image again search the media library all of our raleigh images grab this photo and hit place great now add some text right hand side copy it a little too aggressively let's get rid of that there we go much better and save and get a sense for how that's working again we can easily drag this around so if i decided i wanted that component over to the left i can do so once a component is highlighted you also have keyboard controls so i can just use the mouse i'm highlighting the image i can bounce that up or down the page which is great for accessibility also um great just for convenience just for being able to move things really quickly up and down pages especially as they get kind of longer i just have a couple more sections to go here i'm going to add a three column again choose a dark background reverse the color scheme add some text in that center column we'll do a slideshow down below once again we'll search the media library for raleigh images a handful of those place them just make sure that they're there yes they are and then hit save and once again we can see that component dropped in place immediately right in front of us let's do one more two column here this time i'm going to give that a background color as well once again with the reversed color scheme i will add an image on the right [Music] great there we have it one other feature of layout paragraphs worth pointing out is when you choose and if you were to choose a new layout for a section that had a different set of regions the edit form will ask you what you want to do in the content from the old regions that would that would be orphaned so i can just show you what that means here really quickly if i edit the section and go to one column this is now telling me that i would have orphaned items from the secondary column that need to be moved somewhere and so i can just specify move those to content when i hit save it moves that image that was in the right hand column into that main content column so if your columns don't match as you move from one layout type to the next it will ask you what you want to do with those just go back to the two column and drag that over to the right i have just a couple more sections to go here until we're finished with this case study add another two column this time i'm going to add a quote on the left hand side again one of the key reasons that we we use that we built and use layout paragraphs is that it supports uh structured content it's a fielable content so all of these are just paragraph types and drupal which just means bundles you know fieldable entities or um content types with their own fields let me give this quote a background color and i'm also going to give it just a little bit of padding using another one of these classes we have it's looking okay but we need to also apply the reverse color scheme great much better lots of text on the right [Music] great all right let's add one more section here just to round things out add again a two column section give this a background color that same reversed color scheme actually this time i'm gonna quickly grab a background image for that section itself and hit save see that pop up here in a second add some text on the left hand side this is a background color [Music] turn the opacity down just a little bit and then also give this component just a little bit of padding great [Music] and that's about it for our case study so again i'm just a quick demo on how easy and fluid it is to create content using layout paragraphs once finished i can hit save it's saving the background and then hit done and it loads this case study what i've just created exactly now we're looking at the the front end of this or the main view tab of this piece of content again still in the idea not published state that's how layout paragraphs looks and works in the context of our site i'm going to jump over to a brand new install running drupal 9 and show what this looks like and kind of what you might expect if you were to install layout paragraphs on a site right out of the box so again this is a drupal 9 website absolutely no custom code written for the site there are a handful of contrib modules installed specifically the layout paragraphs module and a module called stories that provides a collection of paragraph types let's take a look at the module page you can see layout paragraphs here um go over to the configuration options for layout paragraphs there are just a few configuration options for this module you can choose to show paragraph labels or to show layout labels which just applies labels when editing content for both the paragraph type and the layout type so go ahead and do that for now just so we see what that looks like and hit save we also can see layout sections at a glance so we can see what sections are used are being used or rather what paragraphs our paragraph types are being used as sections we'll take a look at this on the main paragraphs configuration screen as well so those are the couple of configuration options for layout paragraphs if i go over to structure take a look at paragraph types we can see all the different paragraph types that are installed on this site currently or they're created for this site currently the section paragraph type is the one that we are actually using as a section that we're using to provide layouts by going to edit this paragraph you'll see that the layout paragraph behavior is turned on you need to turn on the layout paragraph behavior for whichever paragraph types you want to behave as the layout container as the thing that actually gets layouts attached to it you do not need to enable that layout paragraphs behavior for anything else just for the paragraph type for which you want to behave as a layout container or section when you choose layout paragraphs you'll be able to choose which layout types you want to have enabled on that particular paragraph let's take a look at the content type configuration we have just two types and two types that ship with drupal i've added a layout paragraphs field to this basic page so if we go to manage fields we have a single field called content that is an entity reference revisions field or a paragraph reference field we click edit we'll see that we've enabled all of the different paragraph types for this field let's go back to manage fields and take a look at form display under form display we've chosen layout paragraphs as the widget to use we then have some options for that field widget um which view mode like which paragraph specific view mode to use when rendering the editing interface as well as whether or not to support nesting layouts so we can nest up to 10 levels deep so layouts within layouts up to 10 levels deep we can also require the paragraphs be added inside the layout and that's again optional so this this widget can be used in a context where you can add any paragraph type you like it doesn't have to be nested within within a section and i'll show what that looks like here in just a second that's the basic configuration under manage display the format for this also needs to be layout paragraphs which will make sure that the front end correctly renders paragraphs into the layouts as intended and that's that's pretty much it for getting this to work if we go to the content screen and add new content we'll click on basic page and this is what the widget looks out of the box or what the widget looks like out of the box these are the options it provides [Music] just give this a title i click the plus button and because i did not check that option to require paragraphs within layouts or within sections we're able to add whatever paragraph we want at this level so we could even start with just a text block [Music] and then at the same level as that text block we've just added we could choose to then add a section let's make that a three column section and then start adding content within our regions in that section grab an image [Music] add some text again and then save our page and we can see it rendered correctly with those paragraphs in that layout and that's it that's how to get layout paragraphs running on just again a simple out of the box install

Channel: Aten Design

Views: 361

Rating: 5 out of 5

Keywords:

Id: C071U9eNWG0

Length: 22min 8sec (1328 seconds)

Published: Wed May 26 2021