 Hello everyone. In most cases the need for flexibility does not account for the people working with the system. Handling things like customer journeys, personalization, creating campaign pages, analytics and you know all kinds of systems like that. Typically when a client says flexible it usually means something else than when we say it. And more flexible means more complexity and also harder to use. So how many of you haven't heard things like well we want to change the CMS because what we have today is hard to work with or Drupal is complex which brings us freedom and that's fine but it can be overwhelming sometimes or Drupal has a steep learning curve but you know when we get there we want to make our clients the superheroes and we're sort of just helping them to get there without spending hours and hours of learning and reading and documentation and hard workflows which involve basically too many people often. Are we in front come? We believe that we can change that. We strongly believe that we can turn Drupal into the most user friendly tool out there and we've just started. We want to make all people that are working with content and creating value from day to day to be the superheroes. We want them to be able to focus on what they are supposed to do and we want it to be fun to work with Drupal. Now when we were in Drupal Europe last year we showed what we had done so far with the Drupal Gutenberg module and we got some awesome feedback which encouraged us. Our most important client in digital projects are those who are going to work with the system day in and day out and this is not really about technology or coding or features it's about having the tool to make the job easy fun and enable the user to focus on what really matters and this is what we experience when introducing the Gutenberg editor. Some people that have to work with CMSs for years can seem skeptic at first you know the change is too big. I don't know where to start. People won't understand this but that is just opinions. What we see with people that are new to CMSs are reactions like this. Things evolve. This is excellent. You know we want this. Where do I sign? Stuff like that. Drupal should be the most user friendly enterprise CMS. And this is also what this was talking about in the recent note today. Drupal should be easy to use for newcomers and we think it's possible. This Drupal community are full of superheroes that can make this happen. Now let's go a few hundred years back in time and have a look at this guy. Johan Gutenberg. We're still using his name. He played a key role in the development of the Renaissance, the Reformation, the Age of the Enlightenment and the Scientific Revolution. That laid the basis for spreading learning to the masses back then. And today we are working with software to the masses. And open source is truly that. We're not talking about virtual reality though in this session. But Gutenberg is kind of you know in a sense a part of a new way of thinking web content generation. And we can say that Gutenberg gives our eyes new input on the aspect of creating content for the web. It is a revolution that changes how authors and editors can focus on their daily deliveries, not just you know brag about being the ones that understand how to use a system. So what is actually the Gutenberg editor? Well this is a tiny bit of it. Let's dig in. So this is in Norwegian but I go to a new page and I start to add for example a heading. I type in some text there which should be my title. I set that to be the H1. And then I'll paste some more text. And this should be my teaser, bold slightly larger. And of course we want that to be like the separate proper Drupal field. We'll get back to that. I paste some more content and I want to add an image next to that content. So I just drag and drop that into the editor and it loads and I'm able to align it in the way I want. I can remove my spacing up there but then I want to maybe drag it to make it smaller. So very very flexible but some of you are my thinking you know we can do this you know we need to follow our grids in our design and totally we'll get back to that. So now I'm just adding some text here a caption for that image. And I can also show you something here which to add new blocks I could just start by typing a forward slash like you see here and then I will start to type gallery. You see a live search and now since this is the top of my results I can hit enter and it adds that block. I go to the middle library and select a few images that I think is nice. Hit select now. Thank you. And then I'm able to move my images back and forth the order. I can also choose to have like four column set up which looks like this or I could change it back to maybe two or even one which kind of doesn't work in this context but might do in others. Then we could try to add something like a quote in the bottom here. I start typing my opinion and I do that in a regular paragraph. It's just like it's just like some text. Then I can convert that to a quote and you see that I get a new field below there. I'm able to set the author for that quote which is myself in this situation and finalize it like that. I'm able to drag and drop it up to where I want. I can also use the arrows for that and you see that the focus of that block follows the rest of the page so it's not that confusing to see where you are currently. Okay so we'll try to go slightly deeper into it. Look at another kind of layout that we could build just with the core Gutenberg blocks. In the bottom here I'm adding a column and you see that I get a layout to choose from there and I want to choose that one which has a slightly larger left column and a smaller right column. This could all be predefined of course following my design for the site. I'm just going to copy paste some text up here and paste that and then hit the plus button for the right column to be able to add some content there as well. Let's start with a quote which we tested earlier. I think we should use Marco for this example. What do you say Marco? Nice column. Will you use that Marco? Yeah yeah he says that he will. For sure. Marco. Great. So right below that I can hit the plus button to add something above that quote and I want to add an image. Let's find an image of Marco which is not Marco. You know he's still there out here in the darkness but he's coming out soon yeah. He doesn't look like that though. And then we can add some contact information for Marco here below. A telephone number. This is not really his number though so you can't really troll him by trying to call him during the session and some email address. Now this is just a text paragraph and I can set the background color to that and notice that it also inverts the text color but I am able to override that if I really need to by going down to the text color option in the bottom there. I want to keep it white and then I'll just copy paste some more text just to fill out a bit. A couple more quotes and there we have some kind of layout and you see that I'm actually able to resize the columns. Then again too much flexibility for 95 percent of the cases you know but we are able to do something about that as well. So this is my page built by Gutenberg core blocks only. So who's using this? It's quite new for our sake and in general but still out there on the internet there are millions of sites using Gutenberg already and that's some of the benefits and the strengths for it. However in this session we will have a look at UNICEF Norway which is our client. It's been on Drupal for several years and their production site is actually on Drupal 7 currently but we're working on that. We'll not talk about their strategies or their numbers in this session but their user experience. They have a communication department of somewhere between five and 20 people that will work on their website content on a regular basis and they are competent people which needs flexibility to build the landing pages that they need and tell their story through rich content. Now what they don't want to do in that department is graphical design. That they have other people to do. So that was the teaser. We'll soon get into the details. My name is Thor. I work in Frontcom as a consultant and team leader. I'm also the leader of the Drupal Norway Association and with me I have my friend and colleague Marco. Yeah hello I'm Marco. I'm a senior developer and architect in Frontcom and the lead developer and maintainer for the Drupal Gutenberg module. So Frontcom in general we are an open source company meaning that we also do frameworks like Larval and Symphony. Also WordPress sites Node.js and even mobile applications in addition to of course Drupal. We are an innovation oriented company which among other things has resulted in the work that we did porting the Gutenberg editor from the WordPress community and to a more CMS agnostic solution. We are about 55 people spread across these countries Norway, Portugal where Marco is from, Poland and Germany. Okay back to UNICEF. Let's take a look in the setup that they currently have. What we see here typically in the top is some kind of hero block. It has a background image. It has a title and a small teaser text and a link at the bottom. So let's show an example how we could use that for other kind of contents. So here we go. So here we have another background image. I can choose to use a new one. You see that there are some people there in Frontcom, Frederik's the office and I can go straight in and edit the title for that. I could do the same of course with the button. I just go in and select my text and overwrite it as I would like. Below that I have that link URL field. So I can if I choose here to go for straight for the demo site I can do that. That's actually the site you could test by the way if you want to do a demo. And then we have some options here in the sidebar where I can turn fields on and off. To be able to do proper comparisons and examples we are kind of focusing on the hero banner block today. This is another example of that with some slightly different options. Notice for example the focal point image down there in the corner where I could easily select some part of that image and that would live update the background image for the actual block. A couple of other projects. Here is a similar kind of hero image done for the Norwegian Children's Cancer Association which was launched recently. And another example here with more flexibility which basically require more from the content editors. But it's both built on Gutenberg in production. And actually each of these two sites won two different splash award prizes in the Norwegian splash awards earlier this year. So let's get into the best practices of how we work with Gutenberg. Now this is a couple of lists of the Gutenberg core blocks. And as we speak people are working on hooks to enable to extend them. And the functionality can already be kind of replaced with JavaScript on the theme or in a custom module. So what we see here to the left are all the regular kind of blocks that you could add to your content out of the box. We usually turn a few of this off just because we don't need them and just reduce complexity. And to the right here we have a long, long list of embed solutions that just works out of the box. So for example here you can see that I've turned on YouTube, Twitter, Facebook and Vimeo which basically means that I in my page built on Gutenberg can just paste a URL to that and it will load that tweet in a nice way or the videos you can play that straight into the editor for example. Okay. The point of this slide is simply to say that you know if people can do something you know someone will. So even if someone here thought that it was both fresh and awesome I am not sure if I disagree and the designer probably won't either. So let's talk a bit about that. Let's say that you want to build some kind of grid like this what we're seeing here. I will just start that video. This is how it's supposed to be looking. And what we usually do then is to try to use some core blocks first and experiment a bit with that. So I'll just try to build it. I start by a columns block. I need three columns here. And then I can go into each and every one of them and just paste some content. And I will basically just do that for the three columns here. So what we're looking at exactly is a group block in the background which I can set that background color to. And then there's an icon in the top which in this case is just an image and there is a paragraph and there is a button. So yeah we've sort of come quite a long way with this but you can also see that it's very very easily breakable. It doesn't look like the kind of interface we want and it's really not the kind of flexibility that we actually need. So let's look at how we solve that after having some dialogue back and forth. Well you need an icon selector in the top there. You can see there's icons in all of the three columns and instead of having like a live search or a huge list of icons we could simply take their library of icons which is probably 200 and create some UI like this. You click it and it live updates immediately. They have categories for that so you can see that there is a lot of icons to choose from basically. The same thing goes with for example here the background colors. If I scroll a bit down I can see like a very basic preview on how that looks and when I click it you see that it immediately updates the actual content that I'm working on. Of course I can do things here like going in and change texts as we can with any other block. Notice here though that most of the fields down here they don't have any formatting options. It's supposed to be strict and the people in this company they agree with that. They want them to follow the design principles and the design guide that is made for the site. Now here's a kind of other example. Just going to start that and then pause it. Here you see like a traditional regular slider. It slides automatically and if we consider that yeah we want a vis-a-vis that is you know very close to real-life situation. We quickly get into a situation where it's not ideal to work on a moving slideshow and also if we have like more than five six seven slides to this kind of slideshow it's going to be very difficult to navigate in that. So when we load this we typically get something like this instead. You can see a preview of the four different slides that we have in this case and then you can sort of open one of them. It pops up. I can go in and do my edits and then sort of just close it down again when I'm ready. So that's different from the vis-a-vis approach but it has good intentions. So should we go into the tech details? Let's look at how to build a custom block. So Drupal Gutenberg comes with an example module containing an example block just to show you how to get started. Let me click here. So going through my site folders I find the example module block module here at Gutenberg module folder modules and then I can just copy this example block folder to another folder into the Drupal site modules folder. And let's just rename it. Okay and since this is a module we also need to rename the configuration files. Another thing we need to do is go to the Gutenberg configuration file and also do some renaming. Okay. That will actually create a new Drupal module, right? That can be enabled and disabled. But that doesn't mean that we need a new Drupal module for each block. We can have kind of a library of blocks in one module. Sorry. Okay. So let's have a look at this block in the editor. Here's how it looks. First we just insert at the block and here we have a title, a subtitle, text and yeah, help text that's only visible when editing the block. Just a specific functionality implemented for this block. But now let's change this block a bit. Now the module works even with the package JSON name example. This is because the code we cloned from the example block is already compiled. Let's rename it. And yeah, I have a name for the package and run the npm install. What this will do is install all the JavaScript and the CSS build files or build tools. And what I want to do in this block is just take a bit, right? It's done, right? I want to, yeah, remove this image on the right side, also the help text and maybe just increase the title font a bit. To find the source of this block, we go to the index JS file, a GGS file folder. A block is made of these attributes. Also we have this edit function. It returns basically a component that will handle, a written component that will be handled on the editor. And at the bottom, you also can register a new category. Blocks also contains some styling here at the size folder. We typically had layout styling on the block itself. But global styling like fonts and colors and elements will be defined in the theme. Okay, so let's start editing the GGS file and change our block. So we are editing here on the settings. Awesome description. We can also set an icon for the block. Just a note here, Gutenberg library already comes bundled with a library set of icons. We can use those or you can use your own custom icon there. Okay, so that's done. Let's go to the bottom and edit the title font size. In this case, we'll just change it to H1 adding tag. And let's remove the right side column. And also we need to do this for the saved components. So this is where the HTML will be rendered. So we'll change the title and remove. All right. So I want also to create a new category that will be available on the blocks list. Let's call it awesome. Yeah, that's pretty much it. Just need to save the file, compile the GSCode or transpile, running the build script. Just takes a couple of seconds. And let's test the block. As you can see here, we have the new category awesome. And here's our block. That's just ready to use. Text there. And some more text. Sorry, the guy who made this video was a bit slow. Not sure what. Having a great time. All right. And we'll just save the notes. Pretty simple. Good stuff. So what about dynamic content? If you want within your page some view maybe or other things coming in, is it possible? Yes, totally. It works like a charm. All Drupal views are available in Gutenberg. Actually, all Drupal blocks. You just need to activate those views on the content type that you wanted to be available for Gutenberg. And actually, a way to set parameters to blocks is work in progress currently. Not fully done yet, but things are coming. So you can do that sort of straight in the block itself. Okay. So now we just want to cover a couple of frequently asked questions that we've gotten from you guys. So the first one is like, yeah, what kind of sites do you recommend this for? Well, we recommend it for large sites with lots of content and editors. The huge sites. The sites with so many people that, you know, it gets really expensive and hard to sort of train, maintain, keep everything up to date. But also for smaller sites, of course, it works. Does it provide too much flexibility? Well, we have seen a sample of that it does that. But the answer is no, because that's, you know, before it's actually set up. This is actually the place where you're able to properly do something about that. Show exactly the parameters you want. Design the back end so it works closely. Can it work with workflows? Sure. Can we use it with other modules? Or if we switch module later, do we have to rebuild things, stuff like that? It generally handles that very well. Even if you turn off the module and deactivate it, the content will still be there. As Marko mentioned, some styling may come from the block itself. But that's typically layout things. So you could just move that styling over to your theme instead and you're ready to go. Is it secure? Yes, it's just as secure as Drupal itself. And does it really scale the performance of this? It totally does. The data that we store here is easily cacheable. There are a few database requests. And if you use cloud blocks, you'll actually get Cloudflare CDN straight out of the box, which is basically serving data faster than most websites out there. So let's just have a quick look now at the work going into Gutenberg module since we started. This is basically a list of the releases that we've had for the Drupal Gutenberg module. So before the track record here, we started the actual Gutenberg JS work porting the library. And here you can see that we've had quite a lot of releases. The stable release 1.0 was in the end of May. So it's basically just four months ago since we had a stable release. And we already have more than 800 production sites out there using this. So the release cycle here is about roughly every two weeks when we have a new update. And there is actually one more release coming since I made this slide. But you know, where should I put that? So I just left it. Short-term roadmap. Yeah, I can see it's like a mirror of all your guys sitting here. Let's talk a bit about the new exciting things that we were planning ahead. Currently, we are working hard to have a full integration with media and the media library. And that fits well with what is being shipped with Drupal 8.8, as Rhys was mentioning this morning. We already have that available in the dev branch, if you want to play around with it. And another exciting thing that we're planning is to include page templates coupled with field mapping. Let's quickly go into what that is about. There's also a couple of other interesting things here. If you want to know more, reach out after the session. Yeah, just a quick word on the page templates and the field mapping. Let's say we have a simple article structure that has a title, a teaser text, a featured image, and a body field to freely add the content. With this new feature in the Gutenberg, it will be possible to have a template for a content type like this. So here, when creating a new article, the editor just needs to fill out those fields or those blocks without worrying about the layout. And then we could actually map those blocks to Drupal fields using the upcoming field mapping feature. So in the end, we just want to show you one last example of a typical hero block as we talked about earlier. This one specifically also has a background image and some text fields and a button. They needed a couple of variations for setting different background based on screens and also a way to move the title box there either to the left or center or right. Apart from that, it's the same. Apart from this little feature, when you click use video as background, it actually instantly fetches the video straight from Vimeo. And I'm still able to work on the content on top of that. And if I paste a new ID, it instantly fetches a new video Vimeo in this case. And you can just keep going after that. And this is, of course, very nice for these people that are actually working on building this content. They can focus on their wording and know how to place things without going so much back and forth between preview and the editor. And we basically see that usually you spend like 10 to 10% of the time that you usually do to build landing pages and content if you're thinking about just the process of creating, building the pages. Yes. So that's about it. We have, it's open for questions if you guys have any questions. And we'll also have a bird's web feather session right now after this session in the G110, which is basically a sort of free speaking questions, questions and answers session. So we can go into more details if you're interested. So are there any questions? And Marco, you need to stay closer because yeah. Yeah, I was wondering how the data is actually stored. So if editors like build these pages in such a way and they want to migrate the website in five years time, is it like one field with all the data in it or does it stored in subfields or whatever? Yeah, it's stored in one field, basically the body field, because it's basically just an editor. And so that makes it very easy to move that along later. And that's also why you can sort of turn off the module and the content will still be there and up running and working. But I can imagine like if you want to migrate, for example, the quotes to a new field in the new website, that it might be difficult if it's stored in one field? Well, that's the benefit for a module such as paragraphs, I would say, where all the fields have their own place in the database. You would, of course, need to map it to make it work. But like all the other kinds of stuff that you put in there, for example, views, like we mentioned, that would be like a dynamic reference anyway. And of course, the really interesting part is what Marco talked about, the fields mapping. And this is where you actually are able to put that kind of specific data straight into this. And it will actually save on a separate field. So we have that full structure for those cases. Hello. Yes. Do you support note translations? Totally. Yeah. Okay. Do you support revisions? Yeah, no problem. The Gutenberg blocks out of the box. Do you have any control over the HTML output? Like in paragraphs, you can alter the tweaks or you can alter the HTML. Can you alter the HTML of the Gutenberg blocks? Well, you kind of could replace easily one core block output by replacing the whole block. But currently, the Gutenberg community is working on some kind of a hooks system for blocks that, you know, you could easily just change the outputs of a block, even core blocks. Okay. That's it. Thank you. Thank you. Hi. Would it be possible to use it alongside Layup Builder? And would it make any sense at all? You can, of course, do that. We haven't done that yet. We've been experimenting a bit with it. But it's, of course, possible. But yeah. Yes. During the demo, you use only a body field. What happens if we use other fields to set some metadata that will be used in the different views and so on? Yeah. Sorry. We should have had that in our demo. Basically, the other fields that you need on your nodes, that could be a lot of stuff, of course. You have the option to either put them in the sidebar. So like on the, there were two tabs there, one for block specific settings and another tab in the sidebar for document settings. And that's where you could put, like, some fields for other fields that may require more space, typically. And those will be added below the standard Gutenberg editor. So you have, like, a more option further down the list. Any other questions? Okay. So thank you, guys. It's... As we mentioned, there will be a buff in G110 where we can discuss openly more. Welcome all.