Drupal X: Front End and Beyond

Matt Kleve: For February 16th, 2023. It's the Lullabot podcast.

[Intro music]

Matt Kleve: Hey everybody, it's the Lullabot Podcast, episode 261. I'm Matt Kleve, a senior developer at Lullabot. And today on the Lullabot podcast, we're going to be talking about Drupal ten. It's the latest, it's the greatest. And you should probably upgrade. With us today to talk about Drupal ten, we have some folks that did a lot of work to put some good features into Drupal ten. First off, we have a senior front end developer from Lullabot hailing from Barcelona. She's a provisional core front end framework manager and UX maintainer with Drupal. At the retreat a week ago, we heard that Lullabot will be sponsoring her work on Drupal Core Development for six months. Joining us today we have Cristina Chumillas. Hi, Cristina.

Cristina Chumillas: Hey, there. Yeah.

Matt Kleve: Six months. That's exciting. That's good news, right?

Cristina Chumillas: That's amazing. Yeah, I'm really looking forward for that.

Matt Kleve: You could do a lot of work in six months. That'll be fun.

Cristina Chumillas: Oh, yeah, I hope so. I really hope so. Let's see.

Matt Kleve: Second up, not a stranger to the podcast. We have a front end developer from AVB Digital. He's everyone's favorite alligator wrestler from Gainesville, Florida, the former host of the Lullabot podcast, a Drupal Association board member bigwig, a Drupal core CSS maintainer, Olivero subsystem maintainer. Mike Herchel. Hi, Mike.

Mike Herchel: Yes, hello.

Matt Kleve: Welcome back.

Mike Herchel: Thank you.

Matt Kleve: I'm glad you're here.

Mike Herchel: Thank you.

Matt Kleve: And also I guess you're now a common podcast guest. Lullabot, senior front end developer, former science teacher, my small town brethren from Minster, Ohio. He's the Olivero subsystem maintainer, which is new since you've last been on, and the Drupal ten release meme winner, which was a Twitter competition. Right?

Andy Blum: It was a Twitter competition back when Twitter was still a thing.

Matt Kleve: Andy Blum, glad you're here. Hi.

Mike Herchel: Glad to be here.

Matt Kleve: So Drupal ten, it was released on December 14th of 2022, the successor of Drupal nine. And and it's and it's here and it's now been around for a couple of months. So it's time to actually think about running it. Right? That's the way I usually do software. It's like, oh look, the new stuff came out. Let's, let's wait for the early adopters. And now, you know, we'll upgrade and we'll get around to it. Right?

Mike Herchel: Yeah. That's kind of my attitude too.

Matt Kleve: So has anyone upgraded to a Drupal ten site have stuff going?

Mike Herchel: Nope.

Andy Blum: Nope.

Cristina Chumillas: Nope.

[Laughter]

Matt Kleve: I see an issue in in in JIRA on the project that I'm on. So like, it's something that's it's going to be happening. So the good news is, is that Drupal nine doesn't end of life until November of 2023. So currently as far as like official supported versions of Drupal, we have Drupal seven, we have Drupal nine and we have Drupal ten, right?

Mike Herchel: Correct.

Matt Kleve: So you three were a part of a lot of really great stuff that went into Drupal ten. Tell me about that.

Mike Herchel: Yeah!

Matt Kleve: I Olivero is now default, right. That's that was a big one.

Mike Herchel: Yeah. Olivero became both Olivero and Claro became the default themes starting in Drupal 9.4.

Matt Kleve: And that replaces Bartik and.

Mike Herchel: Seven.

Matt Kleve: Seven. Okay.

Mike Herchel: Yep. And Bartik and Seven have been completely yanked out of core and relegated to their own kind of contrib themes. And so all of us here have been doing, like, a lot of work just helping to move those, those issues over to those so they're out of the course. You're queuing back and back into, you know, issues for that contributed project. Now I doubt any of them will ever get fixed, but they exist if anyone's interested.

Andy Blum: And they've all been curated back into their, their contrib projects. So somebody somebody's been out there helping move a bunch of stuff from core into the contrib space.

Cristina Chumillas: Yeah.

Mike Herchel: Yeah. So but yeah. So Bartik and, I mean, sorry. Bartik and Seven are out, Olivero and Claro are in, but there are some changes between Drupal nine and Drupal ten with both Olivero and Claro. The biggest change. Cristina, do you want to talk about it?

Cristina Chumillas: No. Go ahead. I see you're super excited about that.

Mike Herchel: I, I'm always excited about stuff. Yeah. The biggest change is that we no longer support Internet Explorer and that...

Cristina Chumillas: Yay!

Matt Kleve: ... that brings along lots of, lots of really cool things. But the biggest, the biggest...

Andy Blum: Or UC browser.

Mike Herchel: Yeah, or UC browser for that matter.

Mike Herchel: And

Matt Kleve: And that's the case because Internet Explorer is now Edge, right? There was Internet Explorer. I'm going to get the number wrong. Was it 11 or something?

Mike Herchel: Yeah. Well. So Internet Explorer has been a little convoluted. It was Internet Explorer, and then they rebranded the Internet Explorer code base to Microsoft Edge. Then they went on that for a little while, and then they eventually came to the conclusion that this code base is so messed up, we're just going to completely ditch it and rebrand the Chromium engine under Edge. And they did that several years ago. But in the meantime Drupal nine still support Internet Explorer, which means that we cannot use cool things like CSS variables or native like native ES6 style JavaScript or things like that.

Matt Kleve: I remember you were talking about that quite a while ago. Like there were a lot of really great things that we could do within Drupal Core, except for Internet Explorer was kind of the the last holdout, and now we're kind of over that hill, and it's not something we have to support anymore.

Cristina Chumillas: Yeah.

Matt Kleve: So

Andy Blum: The Drupal code base has now allowed to jump like almost ten years.

Matt Kleve: Wow.

Andy Blum: There was there was so much stuff that we couldn't do because it just never got into Internet Explorer. Because Internet Explorer is not an evergreen browser, it never got updates except for with the operating system where now you have Chrome and it says in the corner of your Chrome browser: update. And so you can update just Chrome without updating your whole operating system.

Mike Herchel: Yep.

Andy Blum: And Safari gets updates on a regular interval. Firefox gets updates on regular intervals. And then everything that's based on Chrome gets updates on regular intervals as well, just usually a little behind. So Internet Explorer being tied to what what OS was it? Was it XP, Seven, one of those?

Matt Kleve: Probably both.

Mike Herchel: Yeah.

Cristina Chumillas: I don't know which one.

Mike Herchel: Like, I don't know, windows 95, I don't know.

Matt Kleve: 3.1.

Mike Herchel: Yeah.

Cristina Chumillas: Yeah. One of those.

Matt Kleve: So do we support Netscape Navigator too or?

Mike Herchel: [Laughing] No, right? Graceful degradation. So

Matt Kleve: And it sounds like it sounds like it's a major thing. Like if you haven't kept up in the front end world and aren't a windows user, you're like, you're just going to ignore Internet Explorer. It's like, no, no, no, no. Like windows has moved on since then. So it's not like we're we're shutting them out at this point. Browsers across the internet are still widely supported, as widely supported as they were before. It's just we've now moved on too and aren't supporting the old stuff.

Andy Blum: And yeah, on any windows operating system right now that still has updates coming to it, if you open Internet Explorer the IE browser itself will say, hey you should try edge and they'll try to move all their users over there. And even if people are developing things that big air quotes here require Internet Explorer, there is an IE mode in edge to emulate all of that. So hopefully nobody's using it anymore because it's insecure and don't use it.

Mike Herchel: I like to think of like, Internet Explorer users as having like 16 toolbars in their browser and like they're, they're virus ridden PC from the 1980s. Anyway, we should probably move on from this topic because it's a whole 'nother discussion.

Cristina Chumillas: Yeah [laughing].

Matt Kleve: So anyway, you were just saying that the the the whole front end code, the JavaScript, the CSS no longer has to support Internet Explorer, so we can modernize that and remove probably a whole bunch of workarounds that used to have to be in there.

Mike Herchel: Yep. And a lot of that has already been done. And then we're we're currently working on that in Claro, too. Cristina or Andy, if y'all want to talk about that?

Cristina Chumillas: Sure that basically there's the the aim to modernize the CSS code because as context Claro basically was a clone from Seven, and from there we basically style it so it could use the new styles from the new design system. So basically we had a lot of, we have a lot of old code in there. A lot of stuff has been modernized and has been changed and updated, but there's still a few stuff in there. And this opportunity to actually use like variables or use custom properties or use all those, all these new cool stuff that is happening, we actually created well, Mike created the modernization CSS modernization initiative a while ago, and one of the, the branches from that has actually modernized the CSS from from Claro. And why it's really cool to be able to clean stuff.

Mike Herchel: Yeah. So, yeah, we're tightening up that code and making it more maintainable. And that's a big deal. And then like when we find bugs, we're fixing the bugs too.

Cristina Chumillas: Yeah. That and also like coming up with ways to support in the future like component related or component like way of theming, although it's still like way far from what we would like to have. But that's a topic that we're going to talk in a few minutes.

Matt Kleve: When I look at the like it was a list of changelogs I was reading in preparation for this talk. One thing I saw was that there were now modern JavaScript components and replacing some, some, some jQuery that came into Drupal. Is that something that's happening as well?

Mike Herchel: Not as much as we'd like.

Cristina Chumillas: Yeah.

Mike Herchel: Like jQuery is tied into the administrative interface of Drupal pretty tightly, especially around events and Ajax and stuff like that. There's, there's a there's a lot of work being done to remove it when it's not necessary. But if I were to put money on it, I would say it's going to it's going to be living at least within the administrative interface for for several more years. That being said, on the on the public side, you know, with Olivero, we have no dependency on jQuery. So, you know, I think Olivaro ships something like around like 15 kilobytes of JavaScript or something like that, which is, which is really lightweight.

Matt Kleve: Why do you all frontenders hate jQuery these days?

Mike Herchel: It's not it's not necessarily that we hate it. I, I personally like it. It's it's kind of it's kind of it makes things a lot simpler, but it's not needed. Like it was jQuery was was really needed back in the day to kind of smooth smooth the edges around the differences in JavaScript APIs between the different browsers and specifically Internet Explorer was one of the worst offenders. In addition to that...

Matt Kleve: Which turned into Safari too right, I remember talks about jQuery, jQuery core itself, having to do a lot of stuff for Safari.

Mike Herchel: Safari's Safari is kind of a pain in the butt. It's getting better. But anyway, I in addition to that, like like there's new features and APIs added to JavaScript now that just make a lot of the jQuery stuff unneeded. That being said, jQuery by itself is what, like only 100 kilobytes? It's not a heck of a lot. You know, like, I think the average website on the internet right now ships around three megabytes of JavaScript, which in my opinion is way too large, 100, 100 kilobytes is is is something that the browser can handle pretty easily.

Andy Blum: It does. It does add up though, if you have multiple versions of jQuery that you start depending on, if Drupal Core brings in one and a module brings in another, and your theme brings in a third, then suddenly you've gone from 120 to almost 400...

Mike Herchel: Yeah.

Andy Blum: Kilobytes.

Cristina Chumillas: Yeah. Yeah, probably...

Mike Herchel: Let's not, let's not do that.

Cristina Chumillas: Yeah. Long story short, as long as you can actually avoid adding JavaScript to your theme, whatever comes with the default on the admin UI shouldn't actually affect you that much. But still, you, whatever you develop nowadays, it shouldn't have jQuery at all.

Matt Kleve: You know, there's a bunch of other additions to Drupal ten as well. One was that Ckeditor got an upgrade from from five from Ckeditor four, which was an experimental option. You could have enabled that with your Drupal nine as well. Like, but Ckeditor five is available. Have have any of you dealt with any differences from 4 to 5?

Mike Herchel: Yeah.

Matt Kleve: Yeah?

Mike Herchel: Yeah. Yeah. Like there's a number of modules that still need a little bit of work. Like in my mind I think like the Linkit module does. In addition to that when you install Ckeditor five and Drupal 10.0, you'll notice that the actual editor interface is a lot, a lot tinier. I don't know if anyone noticed that, like, like it's it's you're expecting the body field maybe to be, like, multiple lines, but it's just one line. But then...

Cristina Chumillas: Yeah.

Mike Herchel: You start typing and, it grows, and there's a fix for that. And I'll talk about that when we're talking about maybe 10.1. And but other than that, there's a lot of things about Ckeditor five that, that I personally like. I like the way that it handles the little kind of balloon pop ups instead of creating a modal. I think there's a lot of a lot of pretty neat things there. So other than that, it's it seems it seems pretty pretty similar.

Matt Kleve: I was trying to do something I don't know, probably almost a year ago by now, maybe eight months, but I tried, I was having issues doing placeholder text inside of a Ckeditor field. So where you get the the grayed out text inside of a form element and when you start typing, it goes away, just kind of a, a reminder to the user of what should go there. In this case we were overwriting other content. So we had the idea of event series and event instances, and the instance would adopt whatever the series said. So on the instance we were trying to show whatever the series had in the body field and doing that within placeholder text and Ckeditor five actually wasn't able to do it, as far as I could tell. Through Drupal or four couldn't do it. Five could, which...

Mike Herchel: That's interesting.

Matt Kleve: ... I found to be really interesting. But that could just be guy who didn't play with Ckeditor enough having issues. But I did find a Drupal issue at one point that was like, this doesn't work. And the answer was, yeah, you're right, it doesn't. So I'm looking forward to anything that might make that easier, if I ever run into that problem again. The things you remember. So PHP 8 point, 8.1 is now a requirement for Drupal ten as we continue to upgrade, you know, and keep up with the other communities. We talk about Drupal Island a lot, but Drupal is just one piece of technology built on others, right? So we need PHP and we're keeping up with that community.

Mike Herchel: Yeah.

Andy Blum: Matt, I'm curious, as a front ender, what what are the differences? What's is there anything new and cool in PHP eight versus PHP seven?

Matt Kleve: You know, I haven't looked a lot into it. I've kind of kept up with a lot of the small syntax-y changes that make things easier. But at the end of the day, it's the same as long as it's a recent supported version. I mean, that's what makes everything happy, right? As long as it's supported by the community and does what it should do. I think that's kind of the biggest deal.

Mike Herchel: I've been doing like an online PHP course, and I'm trying to look at my notes, but there were some, some new things in PHP eight that you couldn't do in PHP seven, and I don't have like I said, I don't have my notes in here though. And one of them might have been like the inline like the arrow function, similar to what JavaScript has. I don't know if that's in seven dot, if that's in PHP 7 or 8, but but there's like a lot of things in, in the newer versions of PHP that in my mind like are like, hey, this is pretty cool.

Matt Kleve: Yeah. I mean, PHP hass really kind of improved the developer experience over time. And a lot of that is simple syntax, things that make things easier for people writing the same block of code over and over and over again. And Drupal has continued to adopt those things.

Mike Herchel: Yeah.

Matt Kleve: Similarly, Symphony 6.2. And that's one of the reasons, right, for the the new version of Drupal is that we're following the Symphony community as well. Which I read and kind of was surprised to see going from Symphony 4 to 6.2 is three years of advancement on the Symphony side. So Drupal kind of following other communities and technologies that are involved with Drupal Core too.

Mike Herchel: Yeah, it's really a benefit, you know, that that we move to Symphony, that we can kind of get all these, all these improvements for free, you know?

Matt Kleve: Yep. So

Andy Blum: If you've never used any of the core Symphony stuff, it can be really nice to just reach down and grab some component that already exists in Symphony and just say, oh, cool, this is here. And I don't have to bring in some extra vendor or I don't have to build it myself.

Matt Kleve: Very good. We're talking Drupal ten, which was a totally missed marketing opportunity. They could have called it Drupal X, right? Yeah, Drupal X, the latest version of Drupal with some folks that have a lot of code running in Drupal ten coming up right after this, we're going to talk a little bit about what's next and the future.

[Intro music].

Matt Kleve: Welcome back to the Lullabot podcast. We're talking about Drupal ten and all of the latest, greatest keep up to datest things happening in Drupal. Mike herchel, I wanted to talk to you about something real quick.

Mike Herchel: Yes.

Matt Kleve: I was on a scrum call today where...

Mike Herchel: No.

Matt Kleve: ... the some front end developers on my project were trying to work on a mega menu type situation, and they said that they were going to pull code out of Olivero because Olivero did it best and its most.

Andy Blum: We did it best.

Matt Kleve: Yeah, they did it a good job and you did a good job. And it was also very accessible. And that was necessary for for the project. And Olivero is, is the way to look as far as code to pull out and reuse.

Mike Herchel: Yeah we need to make that easier, to tell you the truth. Like in the back of my mind, I was thinking about doing a contrib, a contrib project like Olivero menu or something like that for contrib similar to like that old Superfish menu module.

Matt Kleve: Or Nice Menus.

Mike Herchel: Or Nice Menus. Yeah, there's a, there's a number of them.

Cristina Chumillas: But yeah.

Mike Herchel: But to tell you the truth, like it just comes down to time. But this is a good segue. I'm actively working on bringing the Olivero menu system into the starter kit theme, like the starter kit base theme. So one of the new things the new theming paradigm in Drupal ten is that instead of using parent themes and subthemes, which you still can do, but instead of using Classy as a, as a parent theme, instead you use this command line tool and you say, generate me a new theme, and by default it will generate a theme based off of the starter kit base theme and the starter kit base theme. Right now kind of looks like nothing. It's all basic HTML, hardly any CSS. It's pretty. It's pretty ugly. But I have a patch that right now I just need to work on some tests to to get the to get to start to get Olivero's menu in there. So when people use that, boom, they're going to have a very accessible, modern, awesome menu system in Drupal, and they're going to get that for free. It's going to save people like thousands of hours of time.

Matt Kleve: That's great.

Cristina Chumillas: Yes please.

Matt Kleve: And that's actually kind of a new way to to build themes. So it's Drupal itself is going to actually create stub out the, the files and stuff to, to make the theme?

Mike Herchel: Exactly.

Matt Kleve: Cool.

Mike Herchel: Exactly. And the reason that we're doing that instead of like relying on like a parent theme, is if we rely on a parent theme, we can't ever make changes to that parent theme because we don't want to break anybody's stuff, you know? So that means it will stagnate. And you all know that, like the the front end moves pretty fast. So we don't want to stagnate. We want to have we want to keep those best practices moving forward.

Matt Kleve: So talking about moving forward and you already kind of alluded to it earlier we're doing a podcast about Drupal ten, which was released in January, 10.0 or in December, rather. And in June, we're ready for 10.1 and all of the good stuff coming with 10.1. The drop is always moving, as they say. So what's going to what are we going to find in 10.1?

Andy Blum: Mike, Mike is pointing to me because he wants me to talk about this. So Mike was talking about the starter kit. And right now, the way starter kit works is there's only one theme that that works with starter kit. And so you you run this command in your terminal, and it copies over the the core starter kit theme, and it gives it to you and you start working on it. But wouldn't it be great if instead of starting from scratch every time, you could do this with literally any theme? And the way the starter kit stuff is set up is you can do that. Themes can declare themselves as compatible with starter Kit and their their info YAML file. And that's one of the things I've been working on recently, has been making it so that you can use Olivero as your starting point...

Mike Herchel: Yeah!

Andy Blum: ... for starter kit. We we talked earlier about some of the components in Symphony that are great to use. And it's been this issue that I've been using some of those where when you run this command with starter kit it loads up a PHP class in the theme, and you can go through all the files and find all the instances of Olivero and change them to whatever you want your new theme name to be, and update the text in those, and then copy them all over and filter out pieces that you don't want and all kinds of cool stuff like that. So hopefully in ten one people will be able to use Olivero with starter kit if they want to and be able to see this kind of new theming paradigm, as Mike put it. Instead of using base themes using starter kits.

Mike Herchel: Mm-hmm. It's pretty exciting. In addition to 10.1 we have, I'm excited. I may we have some cool changes to Ckeditor. Some usability improvements. I mentioned a little bit earlier that when you load Ckeditor five right now, it's kind of short like it's vertically short. And it doesn't really inform the editor, the editor that, hey, this is maybe a place that can accept long like blocks of text?

Matt Kleve: That used to be configurable, right? Like you could make your ckeditor however many lines long. Is that not configurable currently?

Mike Herchel: Yeah, it's not current. It's not currently. But in 10.1 it will be.

Matt Kleve: Could you could you hack it with CSS if you wanted to?

Mike Herchel: Yeah. Yeah you can hack it with CSS.

Matt Kleve: Okay.

Mike Herchel: And and and we have that fixed through the magic once again of CSS variables. So so we're using some modern JavaScript and modern CSS to make that. In addition to that we have a new issue a new issue just got committed a couple days ago where Ckeditor now will not grow beyond the height of your viewport. So that's something I'm interested I'm excited about. You know, I think like all these little minor things are going to just add up to a vastly improved editorial experience, and I'm super excited about that.

Matt Kleve: So kind of like how I kicked off the show, the I'm waiting for the dot one that a lot of people have isn't necessarily terrible, but if you were starting a new project now ten is as good or better than nine, right?

Mike Herchel: Yeah, absolutely.

Cristina Chumillas: Yeah.

Matt Kleve: And the right way to be.

Mike Herchel: Yeah.

Cristina Chumillas: Yeah, the thing is that it's different like from starting from now, like from the start. Right now it will be ten if you're migrating. That's a completely different thing. But if you're starting from scratch, definitely ten is the thing to start from.

Mike Herchel: And a lot of these improvements can be brought in through you know like composer patches or something like that too. Like I have, I maintain a couple patches for the Ckeditor stuff for both 9.5 and 10.0.

Mike Herchel: Yeah. But do you know what I'm most excited about with 10.1?

Matt Kleve: I want to hear.

Mike Herchel: Single directory components.

Matt Kleve: What does that mean?

Yeah.

Matt Kleve: That's not my game, like.

Mike Herchel: I know. So it's something that Mateu. Mateu Bosch, who is a who's I who's honestly the coolest Lullabot be way beyond cooler than all you three.

Mike Herchel: He lives on the beach.

Mike Herchel: He lives on the beach. Yeah!

Cristina Chumillas: Wow! Me too. Like, seriously.

Matt Kleve: He's out in the waterways on a on a mediterranean island, though, Cristina. Like.

Cristina Chumillas: Okay come on.

Matt Kleve: Pretty cool.

Cristina Chumillas: I'm just gonna pass it. I'm just gonna pass it because he speaks Catalan. Otherwise, you're like, bad.

Matt Kleve: Okay. So. So Mateu passes the vibe check still. Like, right? We're good? Okay.

[Laughter]

Mike Herchel: So Mateu has within contrib, he's been working on a CL Components module, which is basically like a way to create front end components in Drupal, you know, so you'll have like a Twig file, a CSS file and a JavaScript file and it's all bundled in one directory, and then it integrates that with storybook and the rest of Drupal and stuff. But he's we are all working, and this this includes Cristina and me, but it's really mostly Mateu and a little bit of a Lauri Escola. And they're bringing as much of that as possible really into Drupal Core. And so that's called Single Directory Components. And it's really neat. So like right now if a front end developer needs to create a component, well, the first thing they do is they create a new CSS file. You know, in one directory they create a they they navigate down into their templates, create another a Twig file with a specific name. You know, they have to maybe create a JavaScript file, new JavaScript directory. Then they have to create.

Cristina Chumillas: Another one. Yeah.

Mike Herchel: And then they have to they have to go to their libraries file. They have to define the paths, all those files. And then they go to their back to the Twig file and attach that library file to the Twig file. It's just really like burdensome. And it makes for like kind of a crappy a crappy...

Cristina Chumillas: Yeah.

Mike Herchel: ... experience.

Cristina Chumillas: Try to explain that. Yeah. Try to explain that to to some new people actually starting with Drupal frontend nowadays, it's like, why are you.

Mike Herchel: I know, right?

Cristina Chumillas: Yeah why do I have to do all this? Yeah, it doesn't make any sense actually.

Mike Herchel: So with single directory components, what it enables you to do is you can define a components. There's going to be a components directory and you directly under your theme directory. And you can create you can create a directory under within that components directory for each of your components. So you can call like say like a CTA component. And then there you create a like a cta.yml file, you'll create a cta.Twig file, you can create a, you know, cta.css file, cta.js file. You can put through a README in there, even a picture. And the cool thing about the YAML file is you can define, like I said, you can define schema in that. And so Drupal can hook in at some point will be able to hook into that. And that could bring in options like automatically create new block types for components that are defined. You know, Drupal will discover those and maybe create a new block type that's not going into core yet, but something like that could or could go to contrib or you could have like something in Layout Builder where, you know, you can add a component directly from Layout Builder or something like that, like all that stuff. It opens up a lot of really, really neat possibilities.

Matt Kleve: When in the old days we used to use. First of all, I guess my question, Mike, is does how does Drupal then build that CSS to something that's used by the browser.

Mike Herchel: Yeah. So it auto generates a library...

Matt Kleve: Okay.

Mike Herchel: ... you know? And then the library just gets attached whenever the template gets included.

Matt Kleve: We don't have to deal with Internet Explorer's limit of 32 style sheets on a page.

Mike Herchel: That that's like, from what I know, that's really old.

Andy Blum: ... shipping with our aggregation turned on.

Matt Kleve: Okay.

Mike Herchel: We got some new things in in Drupal 10.0 that you missed.

Matt Kleve: Okay, so I guess tell me, I did kind of go out of order, and that's that's fair.

Mike Herchel: Yeah.

Matt Kleve: Let's bring us back to to 10.0. What what is new that we haven't talked about yet?

Mike Herchel: The views responsive grid.

Matt Kleve: Views responsive grid. That sounds like a contrib project that I should just install a module. What does it do?

Mike Herchel: Nope. It is in core. It does exactly what you think it is. You know how like. Like if you go into views right now and you create like a grid style and stuff and then you make your browser small, it doesn't like reflow.

Matt Kleve: Okay.

Mike Herchel: Well, now it does.

Matt Kleve: Sounds handy.

Mike Herchel: Yeah, it's actually pretty cool. And the way that the way that you define it is instead of saying, like, you know, at 700 pixels, I want, I want two, two columns and at 800 pixels, I want three columns and all that type of stuff. All you got to do is you simply tell Drupal the minimum width of your grid item, and then Drupal will automatically figure all this stuff out for you. It's pretty neat.

Matt Kleve: Very cool.

Mike Herchel: Yeah. We also have a new Twig filter.

Matt Kleve: What a Twig filter?

Mike Herchel: Twig filter. Yeah. So, you know, like when you're writing Twig, you can put like the bar or whatever afterwards and you can say.

Matt Kleve: Like the pipe.

Mike Herchel: You know. Yeah. The pipe!

Matt Kleve: Okay.

Mike Herchel: Pipe's a good word for that. Pipe. You do the pipe symbol and then you put your filter after that. Well, there's a new one called add suggestion. And this is, this was an idea from the second coolest Lullabot. Hawkeye Tenderwolf.

Matt Kleve: Okay.

Mike Herchel: Way cooler than you three also. And [laughing]

Matt Kleve: What does it do? The add suggestion.

Mike Herchel: It adds a Twig suggestion!

Matt Kleve: So it's a filter for a Twig variable that does what? What does it do?

Mike Herchel: Yeah. So all right, so like let's say that you have a field, you know, in your in your Twig file, like, let's say like it's like, I don't know, a a text field where you have, like, multiple items in it or something like that. Within Twig, normally you do content dot, you know, field underscore my field or field. Yeah. Field underscore my field or something like that. And you put that into curly double curly brackets and then it'll output that and it'll kind of wrap it with the with the field template, you know. What you can do now is you can tag on a a pipe and then add suggestion and then some parentheses and put in arbitrary string of text. And what that will do is that if it that will make it look for a template. So instead of looking for field underscore my field.html.Twig it'll look for field underscore whatever that string you passed is dot HTML dot Twig. And so like let's say you want to render that field as an icon. You know, let's say it's like a social media thing. You know, it's like Facebook or something like that. You know, you can say field, you know, you can say like you know, pipe field or no, sorry. You do pipe add suggestion and then you do like Facebook or something like that. And then you can have a a Twig Twig file called like field underscore face, no, field dash dash Facebook dot HTML dot Twig.

Andy Blum: So this is this is essentially just a hook theme suggestion alter as a Twig filter. And so what you're doing is, as you are rendering a field on a node or on a block or on any kind of entity right there in your Twig, you can add a new theme hook suggestion that that field will will have applied to it. And so you have that that Twig file available that matches that suggestion. You can then render through that.

Mike Herchel: Thank you for explaining it way more eloquently than I [laughing].

Andy Blum: So here's here's my question, Mike is suppose and maybe you know the answer and maybe not. And maybe this just gets cut out because nothing comes of it. Is there a way to order the suggestion added there, or is it always going to be added to the top of that list as like the most specific suggestion.

Mike Herchel: It's always added to the top of the list.

Andy Blum: Okay.

Mike Herchel: Something else that's that's along the same line that's not in 10.0, but it's coming for 10.1, hopefully, is a new some new filters that that are very similar, that are very helpful with the add suggestion filter is going to be like an add class and set attribute. So like let's say instead of like, you know, doing the add suggestion Facebook, you can say add suggestion social and then you can do another excuse me, you can do another Twig filter, say add class, and then you can say Facebook, you know, so it passes in that Facebook class down to that template, to that social template. And then and then you can your CSS can key off of that or something like that.

Andy Blum: So we're going to alter the the attributes in that next level down from the current Twig file.

Mike Herchel: It's going to either add a there's going to be add class and then set attribute. So you can also set attributes if you want to set like say like the open attribute on a details element or an attribute or something like that.

Cristina Chumillas: That's very helpful. It was like implementing some of these things on our, on a project. We're working together. And I can say as a front end developer, thats amazing.

Andy Blum: Yeah, this is going to empower a lot of front end and site builder types that that don't have a lot of PHP skills.

Matt Kleve: Which I know when Twig came into Drupal that was one of those arguments. It was like we can have Themers be Themers and Drupal people be Drupal people. And I kind of thought, yeah, right, that's never gonna happen. And then I ended up on a project with a person that had been doing it for a while and was unfamiliar with pre-process and some of the things that used to be normal when you had TPL.PHP files. And it actually kind of works that way. It can anyway.

Mike Herchel: Yeah. And there's a there's a lot of other cool things too. So another, another cool thing that's actually made it into 9.5 is the new Twig dump command or dump function.

Matt Kleve: And 9.5 was released in parallel with 10.0. Right, so...

Mike Herchel: Yeah.

Matt Kleve: So it's it's in both. So Twig dump sounds handy.

Mike Herchel: Yeah. So like dump is an internal function in Twig where you can like normally you can like within your double curly brackets. You can say dump me, you know, a variable. But like half the time it'll just like eat up all your memory and white screen of death on you. So what we what we. And when I said we, like Lauri Escola ended up doing is built a wrapper around Symphony var dumper for that. So now if you do if you do, like, just like, curly brackets and then dump with some parentheses and any, any version of Drupal after 9.5, it'll actually open up a really, really nice output for you with, with, like, you know, it'll show you all the arrays that's available, all your variables that's available. It will you can expand and collapse them and stuff like that. It's super handy for, for for new front end developers and for people that might not have xdebug set up.

Matt Kleve: Very cool.

Mike Herchel: And then another thing. This is the last one. I'm going to quit talking after this. But another thing that I worked on for 10.0 is a refactoring the settings trace or not settings tray, the off canvas CSS, which is like the off canvas, is that like little sidebar thing that pops out when you're in something like Layout Builder or something like that? And that CSS was really messed up. Well, yeah, it it was really messed up. Most of it because of trying to be compatible with IE. And so with now that we don't have to worry about Internet Explorer anymore, we were able to use some proper CSS, some modern CSS resets, and I completely refactored a heck of a lot of that, Andy did a whole bunch of work on reviewing that. And I think, Cristina, you might have too, I don't know, I think you did right?

Matt Kleve: Cristina was making faces. It doesn't work on a podcast like, I don't know, I did so much, I don't remember.

Cristina Chumillas: Yeah, I don't I didn't do that much. I just passed through there.

Mike Herchel: But the settings tray is now like the settings tray and off canvas dialog are a lot more usable right now. There's a lot, a lot of things that work a lot more consistently, like drop buttons and table drags and a lot of this other stuff that was really, really wonky.

Andy Blum: But for anybody that may not be familiar with this off canvas thing, it's the CSS for this, it had to be written in such a way that it negated all of the all of the styles coming from your front end theme. Because when that off canvas loads, it's trying to load its own theme that looks kind of like the admin theme, but not entirely. And so you had all of these, these style conflicts that kept crashing into each other. And one of the new things that is available in CSS now that we don't have to support i.e. is the all selector. And what's the property, is it just unset?

Mike Herchel: It revert.

Andy Blum: Revert. And so it sets all CSS properties. That's what the all property does. It says just grab all of them and then revert them back to what the the browser would normally do, effectively nullifying any other styles that would, would have come in there and interfered with that.

Mike Herchel: So, Cristina, do you want to talk about some Claro improvements?

Cristina Chumillas: Yeah. But maybe you want to talk about the developer improvement that you are noting.

Mike Herchel: Yeah. One of the things that we've been working on, Zequi, who is the third coolest lullabot.

[Laughter]

Cristina Chumillas: Come on. Seriously?

Andy Blum: I had better be top ten by the end of this podcast.

Cristina Chumillas: Yeah I don't think so.

Matt Kleve: Zequi's from the other side of Spain, though. So, right?

Cristina Chumillas: Yeah, but he's cool. I mean, he would be like. But still, come on Mike.

Matt Kleve: Zequi is Ezequiel Vázquez and.

Mike Herchel: Yeah.

Matt Kleve: Rabbitlair is his username.

Mike Herchel: He had been doing some work although it's not quite finished. So we need someone else to kind of pick up the mantle and run with it, but on on a whole bunch of a whole bunch of cool front end developer debugging improvements. So, you know, like, right now, if you want to see, like the Twig debug output that shows you what's template is live and all that, you have to kind of edit a bunch of YAML files that you're saying set PHP and it's it's really difficult, especially if you're new to Drupal and you, it's kind of a real pain in the butt. Well, we're going to bring that into a UI. So there's just going to be a checkbox that says, you know, hey, enable Twig to debug. Hey, enable this and that. It's just going to be two checkbox, 2 or 3 checkboxes. And it'll it's not going to be stored in configuration because we don't ever want this to get deployed. I think it's going to be stored in like this state database or state table or something like that. And boom, it's just going to it's just going to be wonderful. I think that right now is once again is like waiting on some tests. So if there's any back end developers out there who, like, want to help out that's.

Matt Kleve: That sounds really handy. That's one of those things that I need like twice a year. And I have to Google the manual page to figure out how to do it.

Cristina Chumillas: Twice a year.

Matt Kleve: Well, that's what I need. That's not what I do.

Cristina Chumillas: I know actually one while.

Mike Herchel: Twice a year in Twig.

Cristina Chumillas: Yeah, well. You were saying that all that. Mike I was thinking like we've been like the frontend people have been like, ignore, not ignore. But it's probably nobody actually has put a lot of efforts to make front ends life easier, and that's a consequence, like whatever we were struggling with. It's because all the leaders that were on the front end side years back, they're not there anymore. And or maybe they are, but they are not putting that many hours on on contribution time or at least core stuff. And it's clearly that there's very few people that can actually do all the things. And recently I think there's so many cool stuff finally happening and making it's going to make our lives way easier, or at least not that bad.

Mike Herchel: It really is. Yeah.

Andy Blum: Speaking of making lives easier for people working with the front end what's...

Cristina Chumillas: Yeah.

Andy Blum: ... this bulk operations redesign? We're we're hearing about?

Cristina Chumillas: Well, it's actually something that came well, from initial design where we wanted to wanted to make the UI smoother. Well, Claro made one of one of the big changes that Claro introduced is like way more whitespace and like bigger paddings, bigger margins. And that was a huge change. And one of the main complaints was actually that we are they were actually not being able to fit as much information on the screen as they could with Seven. And one of the main pain points was actually the content page, the list with all the content. And some of the cool things that Jean already did is that it's compressing all the bulk operations into one region, small region. And we kind of iterated with that actually with Sascha, also, Sascha as the maintainer of Gin, and several of us came up with the idea with, like, Ben Mullins and Lauri and several other people came up with the idea to actually compress and make a region that actually pops in or pops or disappears, depending of you having actually something selected or not. So the content list is way easier to use right now and smaller, or it can fit more stuff in there.

Andy Blum: That's going to help a lot of people who spend their everyday lives editing content in Drupal.

Cristina Chumillas: Exactly. Yeah. Which is the goal for the admin UI. Actually, one of goals.

Andy Blum: Any future improvements coming to the admin UI?

Cristina Chumillas: Yes, but that's not going to make it for the 10.1, although there. Well, no, I don't think so. Well, no, I don't think so. There's a few of them. I'm gonna do some spoilers here. Let's see how, when or what actually makes makes them. But one of the.

Matt Kleve: Not spoilers these are announcements. This is Cristina laying it down.

Cristina Chumillas: Yeah. Well, actually, it's a spoiler for my session next week actually at DrupalCamp.

Andy Blum: Okay.

Cristina Chumillas: Which I'm not sure. When does this?

Andy Blum: Well, this won't release before the weekend.

Cristina Chumillas: Perfect. So one of the things is going to be finally, we're going to have dashboards in Drupal, which is like 2023, that's not that's not a big deal. Come on. But I think it's going to be really cool, at least the, the, the way that we're working with it right now. It's going to be like built with layout builder going to have different dashboards depending on who is actually logged in. Like you can be a content editor and you have one dashboard as an administrator, you're going to have a different dashboard. So this is really cool. And contrib modules will be able to ship blocks or pieces of content for that dashboard. So this is actually something that it should have been there for a while. It didn't happen. Anyway, hopefully they will see that soon. Something else. And, Mike, I'm seeing I'm looking at you even though zoom doesn't work that way. And podcast neither. But ideally, new navigation for Drupal is coming at some point. But this is a huge, big new conversation that is going to happen. But it's time to get rid of the toolbar, and it's time to have new designs and new ideas for that. And Mike, being the person here with more experience with navigation and JavaScript navigation.

Matt Kleve: Mike's really good with menus, I hear. Yeah.

Cristina Chumillas: Yeah, menus. Yeah.

Mike Herchel: I like, I like doing menus.

Cristina Chumillas: Yeah. Let's see how it goes. That's another thing. And to make it usable or more nice, we'll need to change some designs. Yeah. But that's I'm gonna leave that on the, on the side and we'll see it in the future. That's not that 10.1 for sure. But we'll need to change the layout design for the Claro. The Claro or the admin interface. Whatever.

Matt Kleve: Very good. So I think we need to start pointing towards wrapping this up. If we don't mind going around the horn real quick. And I'll just ask you if there's anything else that you're excited about with Drupal 10 or 10.1 that you wanted to tell people about, or maybe something that you're working on in the future? Mike Hershel.

Mike Herchel: I'm excited that, like, I feel like Drupal Drupal is hitting its post Drupal seven stride. You know, like the upgrades from Drupal eight to Drupal nine to Drupal ten. Like, I think it seems like they're getting a little bit easier. There's definitely a lot easier from the seven to to eight upgrade.

Matt Kleve: Yeah. 7, 7 to 8 was hard.

Mike Herchel: Yeah, And then there were...

Matt Kleve: 8 to 9 was hard. But okay as long as your 8 was up to date and well maintained. And I mean, that was kind of what we found. And and 9 to 10 is a similar way, right?

Mike Herchel: Yeah.

Matt Kleve: Yeah. Upgrade status. By the way, we should mention that at some point upgrade status is the Drupal project you want to look at when you're looking at maintaining or upgrading to new versions of Drupal. Sorry. Go ahead.

Mike Herchel: No no no. Yeah. And like I like that. I just like this cadence that we're on in in these quote easy upgrades. You know that you don't you don't have to completely rewrite everything. And like most of the modules that I use on my D9 sites, you know, with, with just like 1 or 2 exceptions are already Drupal ten compatible. And that's that's pretty awesome. You know, I'm not in any hurry to upgrade, but when I do, I'm pretty sure it's not going to be too difficult. Yeah. Ta da!

Matt Kleve: Andy.

Andy Blum: Yeah. There's a handful of things out there that are coming. Probably not in 10.1 that I'm excited about. One of them is recipes. The idea that you can set up basically configuration almost but with some extras to, to do some make some changes to a Drupal site. So you start up a Drupal site, you bring in this recipe that says, hey, let's add these four new content types that all have these specific fields set up this way. And do some other configuration. You can add that in and bring in other things. And it sounds a lot like distributions, but you don't have to do it on install. And you can remove it later and you can mix them and match them. And and so I think that's going to bring a lot of kind of boilerplate stuff into, into the Drupal community that organizations will be able to use and hopefully make Drupal friendlier, especially for smaller companies or organizations that want to use this, that maybe don't have full time, dedicated developers that have been in Drupal for a decade to be able to do stuff like that.

Andy Blum: Also excited about Project Browser, which will do similar kinds of things where people can just go into the modules list and hey, I want a new module and they never have to leave their site to find it and bring it into their code base and install it and configure it and get it set up and run.

Matt Kleve: Very, very WordPress-y.

Andy Blum: But it's still Drupal, and I think it should still work with composer as well, so hopefully.

Mike Herchel: It does.

Andy Blum: Yeah. So, you know, can still maintain the ability to, you know, do all the, the big composer stuff that we want to do while making it easy for smaller companies to, to, to do it the WordPress-y way, but in Drupal. And then also excited about and this is not even in Drupal code base, but the excited excited about the move to to get everything in GitLab issues in GitLab and all the stuff that comes with that and Not having to worry about wrangling patches and merge requests. Just having one system to to rule them all. So, yeah, lots of stuff coming.

Matt Kleve: Cristina.

Cristina Chumillas: Yeah. Probably that what you're just saying. It's one of the the things that is going to make front end life easier. And I'm really looking forward for that, like single directory components and all these things. I really think it's something really, really, really needed. If we want to attract new developers into the Drupal world, it's it's the only way to keep up to date and modernize our, all our tools. And also obviously all the new designs that are ideally will make it soon enough. And all the new, all the new things that are going to change the user interface, because I think that still it's Claro it's been a, a big change from Drupal 8 or Drupal 9.2. Drupal ten. But still we need to do bigger changes because basically Claro has been like a renewal of the the look and feel, but not the big change on the interface itself. And I think these new changes are the new things that are coming in the future. And I'm really excited about those.

Matt Kleve: Very good. I think from, from my perspective, Mike kind of touched on it. The one thing that I like seeing is the rhythm that the Drupal community is on. For a long time in the dark ages, it was when will Drupal, the latest version, be released? And the answer was when it's ready and now it doesn't work that way and it's working out okay. Like stuff is getting done. Drupal is continuing to to improve and and change and I like it. It's good to see. I think it's a healthy thing. Thanks for joining us.

Mike Herchel: Thanks for having me.

Cristina Chumillas: Yeah. Yeah. Thanks for inviting.

Mike Herchel: Yeah. And I get to see Andy and Cristina in just a few short days.

Matt Kleve: Florida Drupal Camp.

Mike Herchel: Florida Drupal Camp. Yeah.

Andy Blum: That's great.

Cristina Chumillas: Yeah.

Matt Kleve: I, I think this is going to be released before Florida Drupal Camp, but probably not long enough in advance for somebody to book a flight, Mike.

Mike Herchel: But but at least at least we can spoil Cristina's announcement, so that's cool.

[Laughter]

Cristina Chumillas: Cool. Thank you.

Mike Herchel: You're welcome.

Andy Blum: Just an insider's look.

[Laughter]

[Intro music]