 Hi, everyone have a good lunch? All right So we're gonna talk about the Drupal 8 theme system Talk about a Lot of different stuff. So Without any further ado, we'll tell you a bit about ourselves, and then we'll just jump right into it So my name is Scott Reeves. I'm a developer at digital echidna We are a 30 person Drupal shop in London, Canada, and we are a Silver sponsor, I believe. Yep. I'm being told that's correct What else I'm also a Drupal 8 theme system co-maintainer and a Drupal core mentor the core mentoring program is actually how I got started helping with core because It's just something I always knew I wanted to help, but I never knew how so if anyone is like me I encourage you to check that out By the way, can everyone hear me okay and see the slides, okay? Just give me a high sign. Okay. Thank you and this is I play that like beans because this is me and the bean in Chicago and It ties into the next picture, so I'll let Joel introduce himself So everybody hear me. Okay. Oh as well Okay, so my name is Joel Patet, and I'm from Canada and I Been a developer for about Since about 2001 ish I'm a front-ended and back-end developer, so I try to I try to bridge both gaps like I Come from a design background, but I Doing a lot of the back-end programming it seems and connecting the two so I try to sit in the middle I'm also a co-themed droop late theme system maintainer with Scott and a few others and I obviously love parochies. That's me hugging a giant parochie in northern Saskatchewan Or sorry northern northern Alberta. Sorry, and it's yeah, it's a giant parochie. There's a lot of giant things in Canada just In the prairies in the prairies, yeah Okay Does it have that's not a full screen. Let me just see if I can fix this to get this in full screen There we go. That's a bit better all right, so At this point we just like to get an idea sort of overview of who you guys are So we know who we're talking to so just raise your hand if you're a site builder That should be almost everyone. Yep. You can all click things good Themers, you know, yeah Okay developers Wow awesome and dev ops Nice good handful and is there anyone who doesn't fit into any of these categories Nice cool Hopefully you learn a few things regardless of who you are and We will have time for questions at the end if If we're really not making sense feel free to like wave your hands wildly and tell us that we're crazy We're not proud so That's fine So to start with we're gonna talk about some of the changes in the droop like theme layer then we're gonna talk about Some of the practicals and show you an example and then after that we're gonna just kind of throw in some more stuff at the end All right So the first thing that we're gonna be going through is the the removal of the process layer and so What we did is we looked at the theme system and we're looking at okay Is this useful as it's not useful and we Found that the process layer was useful for collecting all the information you got from pre-process A lot of people actually don't even know when to use process and when to use pre-process Yeah, so we decided to kind of cut that out and Is there a possibility for that and we found a nice way to do that? So we've removed that and the only real things that kind of linger on in that hole that idea of pre-process is your assets your scripts your styles and They were they were getting aggregated from all your adge adds Drupal add CSS and Drupal add JS and a few other little things like that and that's where process did all its work everything else was done in pre-process So pre-process is still there, but process is gone and we managed to let twig deal with it So that was kind of nice Yeah, these it's basically The the process layer was flattening strings like the or creating strings if you prefer But in in droop late the paradigm is more so something that we're calling lazy rendering so Keeping the raw data alive as long as possible and then rendering whatever output as late as possible Which in most cases now means in the twig template and that that gives you that data all the way to the last second You have access to that information Whereas before it was flattened into a string and yeah, you had to deal with the string at that point We'll show it. We'll show an example of that in a bit as well so theme functions are Being converted to twig templates They're effectively deprecated if you are a Contrib developer or a theme developer in Drupal 8 and you add a new theme function people will yell at you Because we're taking them out for a reason they're they're just they're a pain I haven't met anyone so far who enjoys the experience of Finding where the theme function is taking the whole thing which might be massive in some cases Copying it into your template PHP and then changing one or two lines The mind of list is probably the worst in terms of its complexity and the fact that a lot of it's just building a string in the end And the one of the smallest ones is theme button You might have used that one to change the input button into like an actual button type in HTML and found that it broke everything Do you want to talk about where markup belongs? Well, yeah Markup really belongs in the template. You should be able to see You should be able to get let your editor actually see these these tags and Syntax highlight these things instead of being instead of a string if you have your markup in a string the syntax highlighters Not going to see that mistake that you forgot the endings Left than or less than a greater than science It's not going to be able to tell you like autocomplete things for you if you're writing markup of string It just feels like you're doing it wrong So we're trying to remove that and put it into the template so that at least you have you can use the tools They're meant for those types of Files yeah get get rid of all as many of the dot equals dot equals dot equals as we can and then it also Another kind of side benefit is that you don't have to escape 10 million quotes if you are say quoting an HTML attribute I don't know why you'd ever do that Theme suggestion hooks are something new in Drupal 8. I don't know if anyone's worked with Theme hook suggestions in pre-process in Drupal 7 Yeah, they're they're They're not super super common, but there's there's often use cases for this So a theme suggestion the example that I use is an article node So a node we all know what a node is right? So there's nodes, but then there's different types of nodes. You have your content types, so It's pretty common, and I'm sure you've done this on a site where you make a node dash dash article template, right? And those actually come those suggestions come from this kind of thing where you're in pre-process and you're doing your You're taking the variables that are coming in and you're kind of using that as contextual information to say hey Actually, I might want to provide a slightly different template for this case, right? so There's sort of a few problems with mushing that into the idea of preparing variables One of them is that you might just be wasting your time Because if you're preparing all these variables, and you're saying actually you can go over to this completely different template then A lot of the time you can waste Effort and it could be some some kind of heavy operation, which hopefully you're not doing heavy heavy operations in pre-process But it does happen so Another problem, too, is that what we want to do? Hopefully for Drupal 8 is make it so that you can have a Pre-process function for that article node So right now you would have to do My theme or my module pre-process node and then you would have to have an if in there So you'd have to say you know if variables node type equals equals article But it would be nice if you could just say My theme pre-process node underscore underscore article, right? If you know directly what you want to target so This was the first step along that path anyway, and this got in last fall around Drupal con Prague So there's new hooks That that come before pre-process and we'll kind of give you an overview later of What that process looks like but essentially you're you're either returning an array if you're If you're the node module you're returning an array and you're saying here's Here's my initial set of suggestions and if you're any other modular theme Then it's just an altar hook and you're altering an array. That's all there is to it And we'll we'll be able to see if the the concept of template suggestions is not yet clear We'll be able to see a better example in a few minutes So now we're gonna say goodbye to theme function this Glad some people like It was Theme function returns a string and this is the same problem as we had before if you're returning a string to the template Then it's already flat and useless to anybody that's trying to theme it So you have to go look for something higher up the chain to manipulate that information So theme is still actually in there. It's just called underscore theme. So don't touch it But we've tried to get rid of it in all cases most of the cases is remaining or tests actually But yeah, and so now we're actually using renderable arrays like all over the place We would have preferred maybe some object oriented solution for this. Maybe that's a D9 thing But for now we're at least consistent with how we're building the building the structure that gets sent to a template So at least that parts consistent and that's kind of kind of a nice thing to have Yeah, theme functions were always producing strings. So whenever that theme function gets called it's sending the string Yep, and and just to kind of touch back on that lazy rendering concept if this if this this is a list variable So let's just pretend that this list variable is getting passed to some template in the first case You're getting a string. So if you need to do anything special with that You're looking at regular expressions x path choose your poison basically And in the second case, it's actually still structured data So like I was saying earlier and Joel was saying you actually still have access to the raw data So if there was some use case in the second case from your twig template You could say hey, I want to pull out the items from this list variable And then you could do your own completely custom markup You don't need to necessarily use the preset item list that triple provides So it's it has many benefits another kind of side benefit of this is that It can be a performance improvement because if you go down to the template and you never even output list then You're not losing anything. You're not wasting time rendering this thing that is just kind of sitting there waiting and never being used Oh, yeah, and twig is in core by the way This this talk has evolved quite a bit. There's a lot of other people talking about twig now. So we decided that We would talk about more of the theme system, but How many people this is probably easier how many people haven't heard of twig? Okay, a couple okay, so twig is this is a quote Is a flexible fast and secure template engine for PHP? The twig engine and the initial integration code to Drupal was committed at bad camp in November 2012 and The conversions of the TPL PHP files or the tipple flips as they're sometimes lovingly called To dot HTML dot twig files, which I we haven't really come up with something for them yet. It's I don't know They're twig templates That was committed during a Drupal comp Portland in last year May 2013 and Twig is now the default template engine for Drupal 8. Whoo-hoo. So yeah, that's basically the reason why I got involved I couldn't imagine another release of Drupal that used PHP template and called it the templating language. So yeah, so twig gets us some pretty cool stuff and Not necessarily twig, but just sort of the momentum behind it This this is something that we probably could have done with PHP template But since we had all this momentum and movement, this is we got twig and we we got some cool stuff like this. So in Drupal 8 There's some there's some things kind of moving around. It says settings dot PHP at the top But right now I believe it's in a file called something like example that settings dot local dot PHP somewhere In one structure one folder down. Yeah, it's in there somewhere or you can just add this line to your settings PHP That works perfectly fine, too. So anyway twig twig underscore debug equals true will be your new best friend in Drupal 8 theming So once you turn that on clear your caches view your source Everything that's coming from a twig template gets marked in sorry gets wrapped in HTML comments so Let me see if I can kind of highlight this. So no, I can Little bit. Anyway, this stuff at the top here. That is the theme suggestions that I was talking about So it goes from most specific to least specific. So the first one that it finds it will use and The template that's currently being used will have a little X beside it So I don't know if anyone's tried that tried a devel themeer But this is basically that but it doesn't mess up your CSS and JavaScript that you're trying to do in your theme Yeah, so I mean This is one of my favorite things in in Drupal 8 because I've always I always struggled Especially when I was first learning Drupal theming like how where is this coming from right you want it? You know, you want to change something where is it coming from and the great thing with this is basically how I envision things and How it works today is you basically? Right-click something on the page inspect it and then it tells you where the template is actually I should point out to that It gives you the full path in the file system to where that template is Yes, this shows in your source. Yeah, so I mean it's not something you really want to turn on for production But for development purposes, this is fantastic and we'll show you a little live demo of that a little bit later So let's talk a little bit about sandwiches It's good that you've already eaten the first time we gave this was like right before lunch. So We we don't feel as bad this time we were hungry when we came up with the example though The code is on GitHub as well GitHub comm slash triple twig slash sandwich if you want to take a peek. It's just like a little example module so We're trying to give an overview of Sorry going too far sure Yeah, sure So kind of walk you through the So we're gonna kind of walk you through How you get stuff Themeable so that maybe if you're doing stuff for contrib or you're trying to make something so that somebody else can extend it and What Drupal does for you? Can you hear me now, okay, I'll be really close so We're gonna try to give you an example of what you'd use to help provide themable output for For contrib or for yourselves or what actually we are doing in Drupal core to give you this information so to find Define is how you kind of Define that you're gonna be developing a Twig template and you're gonna find what variables are gonna be put into That or be passed along to that that theme template and also what's the templates name in this case? It's sandwich and the variables are like attributes name bread cheese, etc And this is the kind of the rendering flow that happens it. Oh, sorry. That's why mine messed up There we go. Okay, so then the next step is we're gonna be building the building the information passing the information Into the template so we need to build a renderer a and so in this case we have a function called build that's irrelevant and We're building a renderer a so you have theme and then the name of that that theme hook which was sandwich and We're gonna be passing a bunch of variables and we can pass in stuff from translated variables or Translated strings in this case or an array of attributes Any type of variable you're trying to pass to any type of data that you're trying to pass to a twig template That's where you kind of pass it in isn't through the variables of The render render blurry That's better And this is how you take all that information and present it inside your twig template so we have The attributes gets put up into the top and then we have the name right after and those curly brackets are how you do print So that's your echo or print and in PHP it's a lot simpler and Less likely that you won't make a mistake because well your template will are you sorry your ID? You will probably syntax highlight like this kind of does Then you have like if statements so this twig actually has if statements as well And you can check to see if something has is empty Also has for loops as well at the very bottom of the screen there You'll see we have the concept of for loops. There's some things in the templating language that are are there for Convenience sake and but there's not absolutely everything that you have in PHP It's kind of limited to limited scope and there's some nice of these there, too and What we get out of that is a nice little Sandwich There's a sandwich for like a recipe or not a recipe but like a menu of what's inside of our sandwich and we just kind of spit it out into a template and Format it the way I wanted it All right demo time enough looking at screenshots. Let's do the real thing. All right, so Mm-hmm T8 can't see what I'm typing. There we go Okay, so We got some sandwiches here, right cool So I Want you a quick demo of twig debug this might take some doing so bear with me live demo good times, okay, so And we made this sandwich module really quick. Also, we were hungry and Just trying to show all the different variables that you can kind of pass in through a render a renderable array And then you can use those exact same variables in your template So everything you pass through is is available through your template and you're defining the idea is that you're you're defining What you're gonna be passing to your template so your template knows what to expect You're you're building and actually passing those variables into that template That's that build stage and then the this the last part there is getting that opening up your template and putting in those variables that it is supposed to expect and Trying to deal with them either by checking to see if they exist or not empty or Wrapping them in tags that you're looking to wrap them in essentially. That's that's what you're getting That was the sorry, that was the before And Let's just search for sandwich in here There we go, so Page dash dash sandwich There we go. So this is our sandwich template, right? cool twig debug goodness and We can also just show you quickly The code behind this module It is on github as well So let's start with the info file. There's a lot of yaml in triple eight. So it's Instead of the info file was before it was like kind of like a dot I and I thing So a lot of things are standardized into yaml now and some hooks and things have been replaced by yaml So It's it's pretty good change. I think I think most people will like it So your info files is fairly similar We also have a routing file, which is similar to hook menu in triple seven Does most of the same things except for creating menu items. It just does your routing And what else do we have we have a module file? I think our controller Yeah, we have so our module file is our hook where our hook theme goes Dot module files are optional in Drupal 8 so if you don't have any procedural code like this You don't need to have one so as more of the code is object oriented and then You also have a controller Which is is basically essentially like the same as a page callback in Drupal 7. That's really all this is So in this in this case, it's just it's returning this this big render array Okay So that's the live demo portion. Let me see if I can get back To the slides There we go Okay So We're just going to give you a quick overview of the rendering flow. This is more probably more of a reference thing Just so that you know This is how things work. I Know it helped me a lot to understand things to to actually get an overview of When things get called and everything so Drupal render is the primary thing that's going to spit out markup inside Drupal render you have optional pre-render callbacks and That is working on your structured data. So normally your render rates So if you need to do if there's something it's usually something that you're kind of doing as a reusable thing Most cases you can do in pre-process, but there's some cases where you need to do some kind of reusable pattern That's when you might use pre-render and then the underscore theme which is The artist for previously known as theme is called and then inside there you have the new theme suggestion hooks and Then you have pre-process functions and then you have the template actually getting rendered So in our case the twig template and Then you're kind of back out into Drupal render and then you have post render callbacks And the callbacks are just PHP callables by the way They can be it can be a procedural function or it can be a method on class and the post render functions operate on the String of HTML so there's some use use cases there for caching for example Where you might be putting some kind of a token in there and then in the post render You could replace that token with an actual value, but still keep it cached things like that So that's that And then we're going to talk about some more Stuff so Joel do you want to talk about twig magic? Okay so there's a number of ways that twig actually will try to determine what your variable is when you're trying to print it and For the first thing is you can pass the variable in directly so sandwich has trees the cheese and that's the reiki and It will print cheese. So if you do curly brackets cheese, you will be getting the value of that That reiki the the second one is a property of an object if I pass sandwich If it was an object Sandwiches an object Cheese was the property of that object. I could actually do the same thing it goes sandwich dot cheese And the same thing as if it's a method So whenever you're printing something it twig is actually going to be going through a list of different trying to find what you're trying to print and if you pass in If you pass in an object, you it'll actually look for a property a method a getter method with the words get in front of it And and is if you're trying to deal with boolean So if you do use those conventions of get or is in your method names and they're public Twig will be able to use those so And then you can also use magic is that magic magic getters. Those are PHP Constructs that allow you to be a little more dynamic with what the actual key is going to be you pass in a key And then your object will actually determine whether or not it has that that that key and and then try to print its value And you can store that anywhere So yeah, there's lots of ways that twig will try to get at your data That you're passing through so you have lots of options and you can get quite creative with how How those methods Will work or if you need to have a method on an object that's gets past a twig and maybe changes Depending on what parameters get passed in it. It basically this is the order that it does it in so the first one It finds it uses Cool. Yeah, so the the question was what if you have multiples by the way for the for the recording so and then just to add on just to finish this part if None of these are true. You'll just get a null value back and also by the way twig magic is one of the coolest features of twig in my opinion and It's also one of the slowest right because it's doing all these checks. However there's a PHP extension I believe it's just called twig and that Provides a C native version of this function So if in your templates that are compiled it replaces all those with its own Kind of native PHP function and that makes it a lot faster. So if you're running if performance is an issue then Get the PHP extension set up. I don't know. I've had set up on my laptop. It was pretty easy, but and Attributes so attributes are quite different in Drupal 8 There may still be some changes, but this is this is the status quo right now. So You you may have seen things like attributes array classes array things like that if you're working especially in the preprocessed layer in Drupal 8 there is a Attributes object Which has its own storage and everything but also knows how to print out all your different attributes. So there's a An array of attributes for example classes. There's a Boolean which would be like your checked Unchecked and that kind of thing and then there's just string. So if you have like an ID ID or something So in your twig template All you're doing is you are printing doing the double curly braces and doing attributes And then under the behind the scenes that's calling the two string method on the object to actually spit out a string and If you need to Split out the classes you can do that as well There's a new we added a few filters and functions to twig If you want to learn more about extending twig you can come to the twig playground lab tomorrow And we'll we'll have the time and stuff for that at the end of this But anyway, if you want to split out the attributes you do attributes class, right? That's kind of that drillability thing and Then you do attributes pipe without class and We won't go too much into the filters and functions There is another twig talk as well today that we'll talk more about that, but it's it's pretty sweet So that's pretty much it. Thank you You can yell at us on Twitter you can go to Drupal twig org We hang out and I or see a lot at Drupal dash twig and There's a Drupal twig hashtag where we post hangouts and stuff we do hangouts usually every week I also want to mention before I forget that there's a big sprint Friday so if anyone is interested in helping us make this even better and Fix some of the bugs and just in general just make it better than please come to the sprints on Friday We'd be really happy to have you There is a mic kind of in the middle there in in between rows if anyone has questions About anything at all If you don't want to get up you can you can shout it out and I can repeat it No, that's that's a good question the theme registry so far hasn't changed too much Some of the logic has moved into a service. Well, it's basically just a class, but oh Sorry, thank you. Thank you. So the question was essentially has anything does this affect anything having to do with the theme registry? so To my knowledge there's there's minimal of any changes to the theme registry so far That might change but not to my knowledge Yeah for blocks Or twig blocks Okay, so so the question was what's the game plan for twig blocks? We originally weren't planning to use them in core But now the actual just to make it extra confusing the block template has a twig block inside of it You know, it's the like the exhibit thing, but anyway So does that help? I mean we're I don't know if we're gonna introduce any more in in droop late But we there'll be a lot of it in contrib I think because it's one of the most amazing features We haven't we haven't used them in court too often, but What it'll actually provide is which we try to make it we try to at least use one and so that one actually added an extra feature that allows you to extend extend existing blocks or existing templates and in in Drupal system with some little helpers for the namespacing and It should help you be able to extend your own templates. So if you Copy your page TPL or your node TPL in in your theme You should be able to extend an existing one for your articles node and you don't have to copy and paste All of the HTML that's surrounding the stuff that you're changing and that's the big benefit of that Yeah, and no, I'm positive. There would be more of that in the Actually, I'll go to this slide so you guys don't miss this and by the way if you go to the session node for this session on the Drupal con Austin site we have a link to the slide deck at the very bottom. There's a link that just says slide deck If you don't want to dig these up, but these are all so there's twig friendly curly braces invade your templates Ryan weaver today at five and then there's two talks to more that are pretty heavily related to this stuff C4rl Carl Weidemann is giving one on Object-oriented render API and then me Joelle and Morton are doing a twig playground lab Where we're going to be showing off a lot of cool things I think the time is actually not correct for the twig playground because it's definitely longer than an hour And also the obligatory Evaluate our session, please. Let us know how we did Did you get what you expected to get out of this? Is there anything you wish we would have talked about? etc etc and Yeah, I just wanted to get that in there before everyone leaves any other questions It right now. It's it's actually still hasn't been converted. It's still using a theme function But there's two two approaches one of them is the straight conversion issue To get it just into twig as is and the other one is looks really promising is a recursive macro that Looks awesome because it allows you to have all the all the template information in one one template file So there's two of them. Maybe you can go in there and flag, which one's your favorite? Oh Yes, so the question was what's What's happening with the menu system and it's rendering with twig correct? Yeah, more or less Any other questions? Yeah Okay, so the question was if you add a new field to a content type Do you then need to go into your twig template and add it to your twig template? So? the short answer is no because It's similar to Drupal 7 that you have in your node at least you have I Believe it's just the content variable And so if you print out if you do double curly braces content that will print out all your fields and That without filter that we showed earlier can be used on render arrays as well So if you not replace is actually the show and hide which I don't know about you guys But I've always found that really confusing. Yes Yeah, so It's it reads a lot more like English now, and you don't have to remember. Oh, what's shown? What's hidden and so it's it's basically now. It's you know, if you wanted to print out your links Underneath your content or if you even want to print out your links twice You can do that really easily now new content dot links and you can't content without links and then content not links again if you want to so the other part of that is also Twig templates are not PHP But they can be parsed. So there's been some discussions. There might be a really cool contrib module that would actually Basically mirror the field you field UI with your twig templates So that if you have in your twig template if you've pulled out fields the UI could actually know about that and at least reflect the right the correct order and Potentially you could drag a field and your twig template would get updated Anything is possible It's pretty exciting Back there. Oh, we got the mic. Nice. So just had a quick thing week Back a few projects ago We switched and started using display suite a lot to reduce the volume of kind of unnecessary templates to Cleaning out the various field dot TPL files and things like that. Sure It would seem that with this switch to twig all those are now gonna have to be totally re-engineered And I haven't seen a roadmap for that one as far as reducing redundant templates What does twig do differently that the TPL couldn't handle? Well, I do know that Display suite is coming to Drupal 8 Aspealicious I'm sorry if I'm mispronouncing his name, but he's he's been working really hard on porting And it has actually found some core bugs and stuff in the process. So as far as I know You'll basically have the display suite, you know and love in Drupal 8 Yeah, anything else? All right. Well, thanks for coming and if you're interested in hearing more twig playground