 So okay, hi everybody. This is a lot more of you than I thought we're actually going to show up So thank you all for coming out this late in the day to witness our Let me go to my slides Which I should have probably done before And you know the beginning of the slides also would be really good To our Drupal 8 site building speedrun Starring panels media lightning and a cast of thousands of mod not really thousands of modules, but a bunch of modules So this is kind of a unique session in that We're gonna be doing we're gonna be building a site in front of your very eyes more or less and That's actually going to be done not by me because I have the slides. I got to be talking to you So instead the build is going to be done by my guys over in Boston And I'm gonna be doing this a lot switching back and forth between the slides and the zoom because we couldn't figure out any Other way to make it work despite being I think smart people And so I would encourage you to go to that URL right here and Follow along with the slides so that you're not too blown around by the chaos And I'm sorry about that if we could have figured out a way to screen share this we would so What we're gonna do is As I said build a site In Chrome. Oh, yeah, of course Yeah Okay Everybody good So yeah first let me my name. Let me introduce myself first. My name is Adam Honick I am a engineer on the lightning team at Acquia and my two assistants on In the middle there we have Adam Balsam who is the tech lead for the lightning team at Acquia and then we have John Kennedy on the right who is the Lead lead for the team at the lightning team at Acquia, and that's the whole lightning team a John and two Adams so we're all here more or less today and What we're gonna do Is we're gonna build a Drupal 8 site to demonstrate the solution to certain or some a salute some solutions to Certain common site building and site authoring and site editing problems that if you are If you are how many people here are site builders just a show of hands Just about all of you excellent. That's that's who we're targeting anyway. So cool So yeah, I want to demonstrate some solutions that we have to three common problems three very very common Drupal problems media handling workflow control and layout and I'll go into the Specifics of these more but you know it's hard to deal with any kind of media video tweets Instagram's pictures being the four ones that are right in my head In Drupal out of the box Workflow control is pretty lacking in Drupal out of the box like a thing can either really be just be published or unpublished and that doesn't Scale up very well, and then it's hard to lay things out the way you want them to usually you have to go and talk to a Themer for that if you actually want to get things if you have to say a node And you want to do more than just display a bunch of fields in a certain way just in a flat list so these are things we're going to talk about and address and Adam have you started the You started the build Adam. I have not I'm sitting on the home page ready to go. Well, I'd say start the build Here we go. Yeah So, yeah, I said we were going to do it as I also said Adam is probably going to be doing most of it And I will periodically switch back to a screen to kind of as he clicks through it the speed of light To do this and meanwhile, I'll also be discussing sort of what he's doing Now I'm getting really confused about switching between these two things So the site we're going to build is a brochure where site for an imaginary company that we made up and this imaginary company trains imaginary animals that you may recognize from Your phone if you're anything like me, it's Pokemon of all fitness And we're going to be building this on top of Acquia lightning the droop late distribution for enterprise authoring and because I am not a salesman I'm going to let John talk a little bit about that Tell you a little bit more about lightning and what it does. So John, do you want to say a few words about lightning? Sure thing. So actually I'm no longer a salesman either I'm the product manager for lightning Not the lead lead and all of the genius in the code is all Adam and Adam I can take no credit for that at all Adam. Are we on the triple the black slide? Oh, the black slide. Yeah. Yeah, we are Okay, cool. No, it's still now on for a second. So, you know, actually lightning is a distribution of Drupal in Drupal 8 Like it's you know, the regular concept of a distribution and we had lightning in the seven But it was really just for our demo framework and testing You know, we actually expect people to build production sites on lightning D8 And you know, we focus on enterprise authoring. So skip to the next slide Adam Kind of jump the gun there John. Sorry So you should see this says, you know our mission our mission is to Enable developers to build great enterprise authoring experiences for their editorial teams This is really important. So jump to jump to the next slide Adam, which is the little chart of people Yep. And what this really means is that the the modules and configurations, you know, we build into lightning Enable the developer to empower the site builder and the content author and the site designer Jump to the jump to the next slide Adam and and really, you know, what we've built in focuses around Four functional areas and three development principles. So the full functional areas are layout You know, which includes creating arbitrary arbitrary layouts once off campaign pages, but also default layouts and Layout options so you can give, you know authors a guided path they can pick between layouts You'll see us do some of some of that later in the build Workflow, which is really the ability to create arbitrary workflow states of content So, you know needs review or needs legal review or needs is a tutorial review, etc And then and then assign roles permission to take content from state to state So you really set up any workflow that you want With you know with workbench moderation that we've included with some configuration in lightning preview We're not going to focus on preview very much today But needless to say there is some basic preview functionality in lightning There's some really exciting things coming out in October Called the workspace preview system and you can check out the lighting page If you want to discover more about that and media you will see a lot of this in its presentation. This is about Digital media so images videos, etc and social media Twitter Instagram Facebook posts that can be embedded in blocks in in posts through the wizzy bit week editor You'll see a lot of that I'm not going to focus too much on the on the development principles But needless to say we have over 60 be a test built into lightning So if you build on top of lightning you can use those tests to make sure you haven't broken anything You can also use our step definitions to build out your own tests and build on top of what we've done So you can probably skip back Adam be and you can head to the next slide or if you want to look at what Adam's doing as well Oh, well, let's let's actually spy on what Adam's doing Adam's doing Adam. What are you doing? So I have defined a kind of type called article I put some fields into it and I've defined a couple of layouts for it and now I'm just creating a view That will create a page and a black to display Articles that are promoted to the blog and if you've ever used views before and I assume just about everybody has this is old hat to you So, okay, well Adam builds. I will go into a little more about what we're doing here so One of the things that doesn't really get a lot of attention when you are a site builder, maybe is Something that I can see why it doesn't get a lot of attention and that's content modeling basically pre-production Planning exactly what you're going to build and that really in Drupal comes down to defining your like what I'm calling data models So things like nodes You know what content types are gonna have what fields are gonna have on them? You know user accounts will you have fields on them? What kind of fields will you have on them and any other kind of they are like taxonomy terms? Any kind of the thing that's gonna store data and it's really good to plan this stuff out before you do a site build and the reason That that is the case is because once you have data in a site Drupal does not always handle change very well And just trying to change things up after you've started putting stuff together can really it's not always painful But oftentimes it is and you can just avoid this by thinking all the way through it So in any you know in any content model it basically serves as a blueprint for building your site it's just a document otherwise written in plain English and At the very least you want to describe every field in every data model on the site Most likely that is content types not you know 90% of the time maybe but anything else as well like anything relatively complex Like a view might be a good candidate as I said user accounts are great candidate any kind of taxonomy stuff You know entities provided by contrib modules Just to find all the data all the data that you're going to store how you're going to store it What restrictions are on it these kinds of things and you know you don't have to get like crazy And you might say that's what configuration is for but the point of this is for you This is like supposed to be human readable and human understandable And the other thing you want to define in a content model is the relationship of any given data models to any other given data models So the example I like to use because it's really obvious is Nodes and users every node has an author every node relates to an to a user and that's important to figure out as well beforehand because Relationships between data models are dependencies between data models and as I said it's hard to change It's hard to change data once it's in Drupal sometimes and dependencies magnify that problem make it even harder to change stuff so Think about those get them right before and you may end up saving yourself a lot of pain and stuff, right? Hang on a sec. I'm gonna be that guy Another thing you can optionally describe in a Drupal data model really and we did this is to describe the display configuration and what I mean by that is What when a user visits any, you know, note piece of content or a user profile page or something like that What are they gonna see what fields are they gonna see if they visit your blog or they're gonna see the Date and time that that blog post was created. What info do they get not so much? How does it look? Doesn't matter if you don't you're not caring at this point if it's blue or you know on the left on the right Or in a motor or whatever. It's what are you actually seeing Adam? You got something? You're muted So you may want to unmute Thanks. Yeah, I am so I'm currently I've just done to find the fields for a content type called training program That was something that we had to find in our content models and now I am Laying out creating two different layouts from training programs because one of the requirements was that you be able to Display training programs in two different ways. So I'm using panels panelizer and this wizard to create those layouts right now Okay, cool. Well, he's pretty far ahead of us, but we knew that was gonna happen. So we'll get to that So content modeling something you do beforehand plan it out You'll get a nice repeatable build and you won't have like weird nasty surprises come up later on when things inevitably change We kind of diagram this out a little bit don't have to spend too much time on this because personally I find that diagram on the left kind of confusing But thanks, Adam Sorry But we have you know, we're showing that we've defined our content types And then the fields that come off of those content types that we've just it's more that we've just thought about it Beforehand to make things easier on us, and then we thought about how we're gonna actually display those things and what the different view modes are gonna be Not going it doesn't it's not doesn't have to get like crazy detailed, but you want to plan it out It's the roadmap So with all that in mind, let's take a look at the design that we came up with Assuming I can I get out a full screen. Yes. Yes, maybe I should So let's take a look at the design that we came up with from this This is what we're actually gonna build You're training with the best people the best So this is our home page Pretty standard-looking. It's got a hero block going the full width of the page and that's significant in Drupal Because that's not that easy to do out of the box with like the core themes or anything like that So we got hero blocks. We have This thing with its nice kind of even four-column layout this informational block describing our training programs for that We can train our Pokemon with yet another hero block And then we have our we have a left area and a right area And then we're gonna want to put some of our latest blog entries And then we're also in the right gonna want to store some tweets that we want to feature on our front page So we're gonna have to be able to store tweets and define which you know how they want to We're gonna have to be able to flag them as going on the front page We also have an about us page looks very similar. It's got the hero image has that same four to the floor kind of Column thing going on but different maybe different data in it Then we have a training program, which is a kind of content type describing Some of the things we will teach your Pokemon to do This has some very obvious fields. It has a description. It has a reference to It has a reference a relationship to a user who will be the person who will actually do who will actually train your Pokemon And then it has a reference to what kind of Pokemon The training is actually for and we have I'm not gonna get into this But we have imported the entire Pokemon database of all 700 and something Pokemon Into this site And so we're just gonna have to we're gonna be able to choose Pokemon if anybody has some favorites start thinking about them Right now and then we're also going to have and again this interesting kind of full bleed thing We want to be able to describe the moves that we're going to teach the Pokemon So that's one way and oh and then a hero block below it There's no shortage of hero blocks on this site. So this is one way we want a training to look But we also want to be able to have Another way that trainings look Same information trainer Pokemon Exercises down here in this like staggered thing Description all it is is a completely different layout. So we're gonna as a requirement We're gonna want to have both of these layouts pre-defined And we're gonna want our editors and authors to be able to choose which one they want to use at At editing time and we want to be able to just have them change it And we don't want them to call us when they want to change the layout of something because we are developers And we have better things to do Probably and also we have another hero block below there, but you're expecting that at this point And then we have another we have another landing page that uses the same repeatable four-column layout that we have defining the you know explaining the trainings that we have Another freaking hero block We have a page that lists all of our blog content that looks like a view because it is a view pretty normal stuff and Then finally we have a layout that we want to be applying to all of our blog posts all of our articles really and We always want it to look like this. We don't ever want to have You know, we don't want to have to theme it We want to just be able to lay it out, but we want to actually define the layout for how these articles are going to look And that's how we want it to look without the comments so Going back to My chrome and the slides which are somewhere Ah So those are the requirements we have in a nutshell We want to store references to tweets would then be able to arbitrarily promote them to the front page We want to also there's a hidden requirement. I forgot to mention Because you don't see it. It's not a UI thing We want the ability to Have a workflow for our blog articles so Let's say we have a lawyer and they insist on legally reviewing for copyright violation, I suppose Any content that we put on the site We want to be able to write an article have it as a draft put it into a legal review state Which then the lawyer has to look at it and from that point they can either kick it back to draft with you got to change this This and this or they can publish it. So we want to be able to define that workflow Another thing we want to be able to do Is actually creating that right now what the other workflow thing. Yeah, okay? Well, I'll switch to him then because why not Another thing we want to be able to do is we want as you saw with the training programs in the design We want to be able to define layouts that can then be chosen by the authors and editors without talking to the themeers or worse the developers and Also, we have to be able to support as kind of a point three and a half here We have to kind of support full-bleed full-bleed pages in Drupal out of the box. This is not a thing So we have to set that up somehow So I will talk about one of each of those things one at a time and I'll probably spend most of the time on Adam's screen You know and just a moment on my slides All right, so problem one. How did we deal with media handling in this particularly for the tweets? This is something that we get pretty much out of the box for free in lightning We're using the media entity module, which is a contrived module. It's got some traction behind it now And it's entire. It's a pretty simple module. It's not really very like special or I mean, it's a great module But it's not like amazing. It's not like wow And its purpose is to just define a new entity type That stores media and it makes very few assumptions In fact, it makes basically no assumptions about what constitutes media. Is it a file? Maybe is it a tweet? Maybe is it a YouTube video? Maybe it can sort of deal with referring to all of these things So that's not the same as file entity, which is another kind of module that you hear about a lot when people start talking about media File entity assumes that media is always a file and media entity does not so in order to have that flexibility We're using media entity Media entities are Not special. They're just standard content entities in Drupal 8 which means they're functionally the same as nodes They have different fields on them But you can have as many different types of media as you want you can define new types of media and You can add fields to them. You can have them be revisionable As many of these things you can do pretty much anything you can do with them You can pretty much do anything that you could do with nodes to media items. They're very flexible As I said, they're versionable because they are just standard entities using standard entity things They work with just about every module that uses the entity system Which is just about every module and all we're doing with all this power and all this flexibility is we're just gonna add a Boolean checkbox to the tweet media type. We're gonna have a we have a media type called tweet It comes out of the box and lightning and we're going to put a checkbox on that Media type that just says promoted to front page Yes or no kind of the same the same way nodes do it essentially and that's how we're going to be able to flag media things As being shown on the front page or in this case just tweets not media things in general So with that in mind, let me check in with Adam. What's up, dude, man? unmute I am back to creating the second alternative layout for training programs, but I just finished adding a field to Media entity tweets that allows us to promote them and then I created a view based on that Can we see that really quick not the view the field? Yeah for sure So that is over here in the structure tab and it's not under content type It's because it's a media bundle so under media bundle We see tweet and if we look at manage fields I've just added this Boolean Promoted field right here and then of course created a view of Media type tweet filtered by those that have the promoted fields true. Yeah, which is pretty Pretty freaking obvious because you would also do that for nodes if you want to just create a view and it's at there You know filter by promoted flag true if you're speaking of you ease so That pretty much solves that requirement of our project. We needed to have tweets We needed to be able to flag them as being on the front page with a field We got that for free with lightning so hey Awesome, let's move on. So the next thing we have to deal with is content workflow and Drupal's content workflow out of the box in core isn't really a content workflow It's you have a thing like a node and it's either published or unpublished boolean That works great if I am the developer and someone else is the designer and then a third person is the content person And that's the entire web team It doesn't work so well if I have if I'm part of the web department and I'm you know one of several developers and we have more than one designer and There's an entire content department that knows absolutely nothing about the inner Plumbing of the website and they really need to have and they have a lot of stakeholders. So it doesn't scale all that well So what we're using is the workbench moderation module which Existed in Drupal 7 it now also exists in Drupal 8 and it has been moved into Drupal core As of 8.2 as an experimental module called content moderation. Apparently they just took the module renamed it and threw it into core I'm told and the power of Workbench moderation is twofold for one thing you can take a you know You can go you can take your content and you can define several just as many arbitrary moderation states as you want So you know in addition to just you don't just have published unpublished out of draft needs review published archived Or and that's just what comes out of the box And some of those states are published and some of those states are considered not published and you decide Which ones are published or not published and that's pretty cool, but you could do that with a flag You know like there's a million ways to do that, but the real power here comes from transitions and That is how workbench moderation lets you define rules essentially that actually establish a real workflow. So it's like You can essentially say that once I have a piece of content that is in draft What states can it then move to can it even be published from draft by you know This can it be published to draft at all one and two can it be public can be going from draft to published by this user? Because they're all locked by permissions So that's where the real the real power comes from so what I mentioned before with the problem that we were solving I just want to spy on your screen Adam The problem we were solving is we needed a legal review state. We had to be able to define a way for Articles to be in legal review just before they get published And so this is kind of the perfect answer because what we can have is three states draft legal review and published We can completely remove the ability for anything to ever be kicked from draft to published We can therefore force it to be available or we can force it so that you Start in draft you must go to legal review and then from legal review You must go to draft or you must go to published Adam. Can you show us really quickly what that configuration looks like with workbench? and Be unmuted because okay you are unmuted yep So there's a couple of different screens that you touch for that There's the first place that you would you would look for this is under workbench moderation Moderation states. I've added a new state called needs legal review and then under moderation state transitions I've defined three transitions the ability to go from Draft to needs legal review and then from needs legal review to published or from needs legal review back to draft And then finally I've deleted the transition from draft to published so that it forces people to go through those three states And on the actual content that we want to moderate so on In this example articles I've selected from the super set of states the actual states that are available So if we look at article quickly and manage moderation We see that I've enabled moderation and the following states are available archived draft needs legal review and published Uncheck needs review and force them to go through this special case needs legal review All right, Adam. Can you also show the role assignment page? sure Each one of these permissions comes with with a very detailed Granule role that you can you can assign for each one of these that for what it's worth in mentioning is a lightning specific thing so Yeah out of the box workbench moderation doesn't care about your roles It gives you permissions for each transition and let's go with that So, yeah pretty normal so very detailed matrix here. Yeah, yeah, that's just the permissions page, which you all I'm sure recognize so Workflow solve for us with basically no effort at all We had to create just a new state needs legal review and then just define the transitions to and from that state And so now when our lawyer logs in and has content waiting for him to look at or her They'll look at it It'll all be in the needs legal review state and they will have to then kick it back to draft or publish it They won't have any other choices because only the transitions that can apply are even offered to the user So hey solve for free Cool, let's move on Layout, this is a doozy So this is how Drupal core does layout of things and It's I mean, I'm guessing you all recognize it It's pretty simple. You can choose which fields you want to show you can configure them a little bit. You can reorder them That's about it. It's a dumb list of fields. There is no concept of regions at all If you want to lay things out, you want to say I want these this bunch of fields to go on the left side And this bunch of fields to be on the right side or anything kind of advanced like that You're going to need to call your themeer In the middle of the night preferably just to piss them off Um So That works for them, you know for a lot of cases. There's nothing really wrong with that. It's basic But it's a little bit limited if you want to like get fancy. So What if we tried more power Well, if we bring in the panels module and panelizer and the layout plugin module So kind of the panels ecosystem here. We can start getting a little more interesting here You can set up like a single layout for our content type for example Like this the big difference here is this has the concept of regions You can still choose which fields you want to show you can still configure them however you want But you can say these ones go on the left side. These ones go on the right side. These ones go on the top These ones go, you know lower right whatever And you can also display more than just fields of an entity you could You can show just arbitrary blocks from the system. So this is actually significantly more powerful And you don't need a theme or to make layout changes You can have several layouts defined and you can just choose which one you want to use and then just be like Okay. Well in this former layout these things went in this region now I want them to move on now I want to move them here But you don't need to call the theme or for this and you also get certain things that panels gives you like You know advanced things like context, which i'm not going to talk about because in all honesty, I don't even fully understand them And that's good. But what if we tried even more power? Well, we have multiple layouts as well We could do what I just talked about with a single layout and we could do that with we could have many layouts that do that Um and each layout like and when I say that do that I mean we could have many layouts for a single content type and we could choose between them We could allow editors to choose between them and each of these layouts can use a different sort of configuration of its regions And they can all just be showing different things different blocks different fields however you want And Editors then get a drop down They can choose which one they want to use of the layout options you have created Or they can just say whichever one the site builder has set as the default because when you have more than one layout You set one as the default So they can either choose one to use or they can stick with the default if they stick with the default And then you as the site builder go and change that default later the changes that you make will flow automatically downstream so They'll inherit the changes automatically No effort on your part still no need to call a theme or pretty nice That's powerful But this guy again Panel's ip is our last and most powerful option for setting up layouts And i'm going to demo this in a bit Um, and it looks kind of like that. There's a lot more to it Panel's ip is pretty much a full drag and draw layout ui Um like and it happens right there on the page that you're actually editing you begin from a preconfigured layout That might just be empty you can then change the layout right before your very eyes you have Instant preview of everything you can drag the blocks around Reorder them etc configure them and you still don't need a theme for any of this And this demo it also demos really really well And that I think is enough power So Let me check in with adam again. How you doing man? Hey there, so I am just creating blocks right now that you will ultimately use to place Via the in-place editor looking at the designs here We have like this be the best you can be black And what we've done is created a custom block type with a couple of extra fields It has like a normal body field like all blocks usually do But in addition to that it has a couple of more Anyway, what he was going to say was um Okay, now you're back you cut out there for a sec Oh, okay. Um, I was just describing the landing page content block Block type and now I'm entering content into those that you can use those blocks later to place via the ipe Okay, well, I'm the landing page block type. What he means if uh People here have ever used the bean module in drupal 7. It's kind of the same concept It finally made it into core Where just as you have content types you've had node types since forever You can now have block types and each block type can have its own unique set of fields Just the way nodes work and because they're blocks you can place them anywhere So this is really useful in this case Um when we needed a reusable landing page type that had certain attributes in common They might need a background image. Uh, they would they may very well need like the four the four column layout Um, so we set that up as a block type Pretty much exactly the way you would set up a node type, but we're not going to demo it right here so Layouts pretty much solved. We've got Some incredibly powerful options that are available to our editors and our authors They will never need to call a theme or unless they use the way drupal core does it with the dumb list of fields Um And that's really we needed some powerful layout. We got it, but we have some bonus points for layout. Um Let's second, which is that as I mentioned before we need From the design We need to do these full bleed blocks In drupal core. This is a little bit tricky because all of the core themes They don't really do this They kind of give you all the content in a drupal core theme normally or even most base themes that I've seen Um is wrapped in a container that constrains things to a width So you need to be able to have things be full width. How do we do it? There's a bunch of ways But the way we did that is we created a new region in our theme and it's called we called it containerless It sits outside of that main container that constrains width. So kind of I think below it or above it Um, basically right inside the body tag that allows it to be all the way across And we what we also did and I'm going to explain this in a sec Is we created some custom layouts for use with panels panels ip panelizer Um that would support that because a lot of the bundled layouts that you get with the panels itself Or with library modules that provide a lot of layouts for you to use They might not work with that. It kind of depends on what their assumptions were So we decided to play it safe and create some just custom layouts that would support full bleed And I'll explain how to do that right now um The way you create a custom layout in drupal 8 is you use the layout plugin module This is a module that began life in core at one point and then was ripped out and will soon be put back in For various reasons that I don't even know what they are Um, but that's the standardized solution for creating layouts Panels uses this display suite uses this anything that deals with layout uses this module And a layout plugin It's going to be familiar to the syntax of it and the idea of it is very familiar I think to most drupal 7 themeers Um who have had to deal with panels or display suite a layout is essentially just a bunch of regions with names Into which things go it's also Which template file you want to use in this case a twig template and which style sheet you want to apply to position things correctly Adam and that's a minimum of a layout plugin. It's a bunch of regions written in yaml Um, it's a twig file and it's a css file and because it's a demo It looks kind of like that and I don't know if you can see that but it's um for what we have List the regions css that will apply to this thing and uh pretty simple And the word plugin though does mean something because Um, does anybody know the drupal 8 plugin system here in not so much. Well, and You don't have to it's just a kind of thing that you don't have to get into it If you don't want to but layouts or plugins, which means they're backed by code And that code can can apply special logic to your layout for building it for rendering it even for configuring it So layout plugins are simple In the simplest case, but potentially extremely powerful Ours are very the ones we made are very simple because we didn't really need anything special But if you wanted to get fancy you could do a lot with these things The final thing we needed in our theme Was the ability to put Content that should be always full bleed like for example This landing page. This is actually a content type in lightning that we provide. Um, It's basically just it's an empty node. It doesn't even have a body field. It's got a title It's got a url path. It's got a moderation state and that's it And its entire purpose is to basically be a blank canvas into which you can just put Whatever you want So we needed to be able to put this content type into the full bleed region So it would always take up the full width of the page so that we could do things like this We also wanted to do the same thing with the um with the training programs Because we want to be able to do this thing full bleed. So the way we did that is with Magical pre-process functions if you're extremely nerdy, you'll know what ring zero is. I'm extremely nerdy It basically just means that in a pre-process function. It's part of your theme Um, anything is possible there pretty much You have access to the variables the information that's going to be sort of injected into the template through which Any given piece of html and drupal will be rendered And you also have access to the whole drupal api. So you can really really, uh Mess things up in a pre-process function, which is why they're generally best for little changes like, you know Moving content from one region to another or uh adding a css class here like a little bit of markup there But that's how we did it and Most themers will be just like yeah, of course. That's how you did it So what do we got next Adam how we doing can I build things? Yeah, we're doing really well. So the article content type is done to find we have a layout defined for it We have a workflow defined for it Same thing for landing pages. We have two layouts not landing pages training program If you have two layouts and I'm created for those and all the fields so you should be good to go Well, I've done enough demos in my life to know that when it's supposed to go well, it never goes well So with apologies to murphy's law Let's get out of this Let's actually do some of this stuff. So adam, did you change the theme? The theme has changed. I know it's our custom theme. Yes. Yeah, so this is our home page. There's nothing on it. That's pretty boring However adam and john have been kind enough. I think I'd remembered along again Adam and john have been kind enough to Set everything up and enter all my content for me. So without further ado, I will demonstrate how to build this home page in panels ipe So there's nothing on here, but this is a this is a landing page as I said lightning content type It has panels ipe enabled so that on any landing page You're going to be able to set up the layout and put whatever you want on this landing page using this panels ipe interface So first thing I want to do is change the layout And I have a few categories here or these are our custom layouts that we were that I told you about that have the containerless region So that we can have full bleed stuff Let's go with this one And now you can see the regions that we have available to show up. So this is prime to go So let me add one of our hero blocks here I think it's I think it's this one I'm putting it in the top containerless region so that it'll just go all the way across the page And I also just realized I'm not supposed to be demoing this first, but whatever To it um, okay, so we got that and as you can see this block just showed up Completely rendered it has this weird bar that we're using to like move it around with panels if we want to we can actually drag it into a completely different region Where it will look strange Or there where it will look even stranger Or back to its home So that looks good. Let's add another one the be the best you can be block And because we also want this one to go fully. Let's keep it in the top region just below the hero image All right looks okay And we want another hero block below that I should have to consult the design, but I've done this so many damn times. It's just like I know what I'm doing at this point So okay, that's obviously they have extra controls attached to them just so you can drag them around so that you can reorder them stuff like that But that's what we come on Yeah, so that's what we want there. So that's the top region looks pretty good Let's put the blog in the left side here. That is a view so go to the views category And I think that looks good not in containerless put it in left And our blog view just shows up completely rendered looking great Um, then we wanted the tweets in the right side So that is also a view. It's a view of media items that have been promoted to the front page as I mentioned So that goes here in the right Now it's worth noting that tweets are embedded entirely with javascript. So that's why it doesn't show up Nothing I can do about that at least not in the short term. So Whatever, um, I think that looks pretty good So when you save a panelized thing, um, or a panelized thing that uses panels ip you'll get these two choices Save as custom save as default Usually you want to save as custom it means this layout is only for this page and this page only it's a special snowflake which it is So we'll save that And refresh the page so that it actually looks so that things actually show up But Come on Damn it's scaring the hell out of me right now Um, but yeah, we got our blocks laid out exactly the way we wanted it Um, and looking looking great and we also got our tweets embedded and these are just live tweets That you can actually follow and actually like and stuff like that Um as a media entity and we've stored a reference to that in drupal so that we can potentially reuse that tweet elsewhere And I will demonstrate that in a second in fact So panels ip the most powerful layout method known to drupal in my opinion Okay, so we got our home page. Um, let's do a training program really quick and it's a this is a content type with Not too many fields on it. So I think I'll write the electric training Got some body text. I think what I will use Is samuel ellipsum If you haven't used samuel ellipsum, I highly recommend it They have a non profanity version step why I in case your boss is watching which my boss actually is So, okay, we have the training program. We have a we have this thing What's that that is the that's panelizer asking us which layout we want to use for this training program when we actually display it So as you can see out of set up two layouts default and alternative the word default for the record is kind of overloaded Um default is not actually the default. Um, that's why we're seeing current default and We'll get that fixed and panelizer at some point Um, but for the moment, but that just means that one of these two layouts is set as the default by the site builder So for now, I'll just stick with whatever the default is And I'll make adam be the trainer And anybody got a favorite pokemon they want to use No, okay, we're going to do that And then we have the exercises those big colorful blocks that show us what exercises we're going to teach the pokemon exercise number one Um more samuel ellipsum I have no idea what movie this is from but I want to see it All right, and we'll add another one here to make that an h2 and Yeah, just have a whole thing So this looks pretty good. We have just we don't have a moderation state on this content type because we've decided We just don't want to have to moderate this one. We never want this one to be in legal review It's perfectly okay for us in this case to have just published or unpublished. So I'll publish it And it's got its layout. It's got it all perfectly and we didn't have to write like a special template for this Um, it's using the layout that we defined in panelizer the default layout that we defined in panelizer And it's showing everything reference to the trainer reference to the pokemon the weird Descriptive text and the two exercises full bleed and the hero block which is showing up below here because that's what the layout says to do So Maybe you want to change this If you're the editor, maybe you've seen it. You don't really like it. You want to see what other options you got you know Don't use the default. Let's use the alternative one Save Same exact everything we have all the fields that we had before they're just laid out differently because they were using a completely different panelizer layout And all we had to do as editors Let's just say we want to use this other layout and it knows how to rearrange itself And you could do that you could have as many layouts as you wanted for that So i'm satisfied with this. I always kind of like that staggered thing. So that looks pretty good. Um, finally You know, i'm doing this in exactly reverse order. I was supposed to do articles first, but i'm going to do an article first And something cool that it does So With a blog this some this one does have the moderation state And that has only two options draft and needs legal review I can't I literally cannot publish this right now Because it's not because it would need to be in legal review for me to publish it And if I was a lawyer the lawyer would be the one to publish it, but i'm super admin. So i'll do what I want So for now, we'll keep it as a draft Oh, thank you A little bit more seminal ipsum we have this checkbox to include it in the blog We'll just check that to be safe And we want to have an image this image browser is not a drupal thing. This is a lightning thing Um, but it gives you the ability to just kind of have a nicer experience when uploading an image somewhere Or into an image field rather. So I'll take that one. Is it the as this article's teaser image? Looks great. You got to give it a name And now it's just going to use this as its image field, but this is still kind of plain. I want to put a tweet in here So Let's go to 50 nerds of gray my very favorite twitter account ever If you haven't seen this twitter account you need to read it. You'll You'll laugh like an idiot. It's great So copy the link to tweet And let's embed that tweet in here Assuming it works So again, this is something lightning gives us for free the ability to as you saw We have the ability to tweet treat to treat tweets as entities Um, and this is just a widget we have to create tweets easily without actually having to fill out a stupid form Because maybe you want to put it just in ck editor and don't want to be pulled out of your flow So let's put the twitter, uh, the tweet URL there. You get a nice preview of it. Um I guess I'll just call that 50 nerds of gray Normally it goes into your media library like any other media item hit place And you get these options which I don't care about And you actually get the tweet live embedded into your content that will show up when we save it So oh come on So let's save that and remember it's a draft now We got the tweet. We got the body text. We got the image. We have My user icon, which is a pokeball Um, it doesn't look as good as I want So two points here one the media embed worked, which is always pretty cool And secondly is that the layout that we've defined for articles specifically With the everything with a lot of stuff on the left and then author on the right Is applying here and we haven't used the core block system for this. This is panelizer doing this Um, and we didn't have to we didn't even have to call the theme or we didn't have to use blocks We'd have to make anything clumsy is just this is the layout use it these fields go on this side This field goes on that side So we have that and then if we want to put it Into legal review Save as legal review Still unpublished because needs legal review. It's a new Moderation state that we came up with but it's a draft. It's a draft state. It's unpublished So let's imagine for a second that I'm the lawyer su is the lawyer here And then from here since it's since I'm in legal review. I now have only two options I can save it again as a draft to kick it back to draft You got to work on this more guys or I can just kick it right to published So again Looks the same, but we've solved the problem of content workflows By actually defining what we can start as and then where we can go from there So Four problems four solved problems now Right oh man We got our media handling all set Our media types are fieldable. We have a field for promoting tweets to the front page We have a workflow a very very clear workflow draft needs legal review published for articles We could have other workflows for other things however we wanted to do it and we have Pretty damn good control over layout. We have panelizer for basic layouts of things We have it also for multiple layouts of things if you want your editors to choose stuff And then we have panels ipe all of this supporting full bleed regions Which look great and everybody wants them So that's those are some basic problems. That's how you solve them Any questions? No, okay That's cool. I'm ready to drink Yeah, I don't think he needed minister content. There are a couple of permissions. He would need At the very least there's a permission that workbench gives you called like view unpublished content Which is kind of an unnerving name But it basically means you can go in and moderate stuff that hasn't been published yet And you would also need permission to use the applicable transitions So there will be a permission for take needs legal review back to draft and there will be a separate one for Take needs legal review to publish and he'll need both of those permissions, but having that You're actually totally right. I forgot to mention that that is a lightning thing that we did because I hated that button Um, I thought it was massively confusing and terrible ux. So I changed it Yeah, any other questions Currently no, we would have to set up both of those things So not not right now. They don't get a notification workbench doesn't do anything like that specifically I mean you can definitely hook into the process and like, you know have a hook something or other to send an email like that but Workbench moderation itself doesn't do anything like that lightning doesn't do anything like that And it also doesn't provide a view for any of this stuff. That's also something that you would have to build yourself currently Where you but you it would be Reasonably easy to have a custom view that like if the lawyer logged in they could go right there It's like here's a list of content needing your approval. So it's and that would just be a simple view of like Nodes of whatever type in this mod and these moderation states for you to review I don't disagree You know, I would love to see those both of those things added And perhaps I will if we have the time and we should I personally would love to integrate with rules I think it could get rid of a lot of custom code and make things even more flexible and I'm generally always in favor of that I'm not sure about rules is level of completeness right now So basically when it's ready, I will absolutely be all over that And I think the entire the rest of the lightning team would agree with me Any questions for my assistance or for me anymore? Yes If you want to edit a published item, um, well Let's take a look at that You want to edit a published item you workbench moderation does this thing that I find pretty irritating Where once the thing is published it changes the name of the edit tab to new draft and that's because every time you um Every time you make a save on a moderated entity type moderated node type for example It creates a new revision. That's just how workbench works. It has to do that So it kind of assumes once it's published that the next thing you're going to do is create a new draft a bit So it just renames it to new draft But other than that you essentially just click the edit tab. There's no real real difference there We have some ideas about pushing better. No look that you're upstream for that. You know, I think it could be less confusing I agree Yeah, anything else that is depending on how technically you want to get that's a complicated answer Um, I believe it does. I don't think To my knowledge, there's no real reason why Workbench moderation would interfere with that. There have been bugs. I think we're like they were Tangling with each other, but they're not yeah, I can add a little bit of detail there. This is uh adam b if you'd like We actually have some custom code and lightning so that the problem space is you're using the in-place editor You've created a page and you've published it The in-place editor then could edit things on the published page without sending it through a proper workflow So what we do in lightning is if an entity is under workbench moderation And it's published and you've used the the ipe is exposed We disable the ipe for entities that are published So you have to send them back to a draft or some other non-published state before you can use the ipe again Yeah, that's a workaround I think but uh, yes, that's how they relate to each other anything else Yes for paragraphs Well, what I can say about paragraphs is I personally have never used it lightning has no opinion on it And I know like not using paragraphs. It's like this guy doesn't know what he's talking about, but um I would think that everything in paragraphs is going to work normally Well, we actually know that and it's worth noting that our ps team uses paragraphs with lightning and it's fine yeah lightning's pretty lightning looks cool it demos well, but it's honestly pretty unopinionated it tries to do It tries to like get its goals accomplished by doing as little as humanly possible like any good programmer. Um, so Yeah, it should be okay anything else Oh, john you froze up And so did adam Well, good at least we got through the presentation without it, right? Wait, what happened? We just missed a whole bunch of you froze up there and I was just like thank god we finished Did I get out the interesting pot? So did I freeze midway? Now you froze in a funny face Any other questions? Yes Um, we think lightning's production right I think so. I mean, well, let me put it this way. We have got people using it on production sites There's actually a person from phase two doing a presentation. I think tomorrow on how they built A website for a major client with they built it on top of lightning and so yeah, it is uh If it wasn't production ready, we would hear about it and we would be up all night fixing bugs. So yeah Phase two is talking about algae zero. We've got um, you know Princeton is building the new site on it. Warner music is building a range of of new sites on top of it There are a ton of very big clients including a couple I can't mention that are building on it right now It's definitely production ready You know, there are modules within lightning that may have a little way to go to You know fix some new x issues, etc. But lightning itself Helps you with that because we we Make sure that group modules is working and we will maintain them and update their versions and make sure they're working together Um, so, you know, that's given the conference for a lot of people Putting every d8 site that's being built by our professional services team right now is on Lightning another thing worth mentioning on that front actually is that lightning itself has and I don't know if john Mentioned this but it has a whole bunch of b-hat tests that are covering like all of our basically all of our Functional interactions that lightning anything lightning is doing. We're testing Um, and we don't release unless the test pass. So we are checking You don't know if I mentioned that you just you block out things that I say, right? That's what happens. Yes Yeah, yeah, it's it's true. So we are we're we're doing rigorous testing and everything so we we consider production ready Right anything else Is it Guinness time? I think it's Guinness time. Wait. Wait. Wait. Wait. One thing I wanted to mention was that we're gonna make sure that we have a wrap-up of this session That includes kind of the full video of adam doing what he's doing Um, you know building and and me doing some building and um adam h talking through the slides That will probably be in a proper split screen format that we'll publish in the next couple of months So if you want kind of more details on, you know, what we've done here That'll be a good source also feel free to get on to irc and talk to us or You know or to email us directly. We're really happy to talk about lightning the lightning cue on druplet org is really active Um, so if you if you use lightning and you you know, we're not against any problems. We're pretty responsive on that cue Um, you know, and I I hope you know When you say it's active it's that makes it sound like we have a ton of bugs which we don't There will always be things to improve. They're mostly feature requests. Okay Um So yeah, did I forget anything? No, I just like to thank my two assistants in doris wong from aquia Who did the designs in the ia and could not be here today and we have our um, all of the code for the speed run we have on github um more info about lightning at lightning.acquia.com and We took all of our pokemon from pokemon dv.net not that we used many poke No pokemon. We're harmed in the building of this. Yes Exactly. All right. I think we're good guys