 Så, bare å teste om dette arbeider, og det ser ut som det gjør. Great! Takk for så mye. Bare vann vi vært. Jeg kan se at vi er veldig lykkelig, fordi vi har det veldig beste soundengineer i bullinget i dag. Så, jeg håper. Det blir bra. Ja, vi er veldig glad. Ok, alle. Det er 4.15. Og når folk kommer til å se det, så kjører vi starten. Jeg har støtt til noen av dem som var ute her. Vi har en veldig små survei. Det er en bit mer enn 30 sekunder, som noen sier, men det er ikke langt. Vi vil mye gjerne få noen feedback om hvordan folk bruker guttmørk, og noen ting til å improve, og bli i touch med alle av dere. Hvilke eller ikke har dere vært bruket guttmørk. I det enda er det også en mulighet å leave e-mailadresset, så vi kan få ut og bli i touch. Vi sender ut noen frågor, og informasjoner om nye versene, og disse interessante ting. Det er veldig, veldig gøy å oppdage av det på hver point. Så, som vi har sagt før, vi vil se noen friske lødder, noen nye lødder. Ja, ok. Så, let oss starte. Vi taler om duplig guttmørk-editoret i dag. Vi ser på en masse nye lødder som er der. Det vil ha en developper-orienteringsfokus. Jeg vil si, vi vil give noen demoer, og se noen lødder på det, og vi vil også gå inn og se noen metoder for development og hvordan vi skal gå. Så, let oss starte. Så, jeg er Marko. Jeg arbeider med Drupal for mer enn 10 år. Jeg har en passion for future-oriented technical solutions som gjør jobben. Jeg er usually deep into JavaScript og php-related work. Vi byrder ting som fungerer effektivt for det som er for en user eller webeditor. Jeg har også gjort en gammel development i min spare time, så her er det en fra 13 kilobytes kompetisjon i 2016. Du kan googlere den nede. Ja. Jeg er Thor. Torand Regretland. Jeg arbeider også i Frontcom, sammen med Marko. Frontcom er en open-source-fokuserad digital agency som spreder across Europe. Vi har en head-office som ligger i Frederikstein, Norge, hvor jeg er usually at. Vi er omkring 80 mennesker, arbeider på digital projekter fra strategi og design, til implementasjon og mantning. Vi gjør en masse av Drupal. Men å være en open-source-fokuserad i genere gjer oss bra å kjøyere den reie teknikken for de reie projekter, og også gi oss en masse av kvalitet på hvordan kjøyere er handelt i andre open-source-fokuser. Det er det vi har høyere Gudmurg i først. Vi har tatt til å finne, eller evene å kjøyere, om vi nødder det absolutt bedste editør- og landingspagelskjøyere på markedet. Long story short. Hvor er vi kjøyere Gudmurg med de klienene vi har kjøyere? Det er fordi de høyer det, og fordi det gi oss en bra bussnes. For oss og de klienene. Det viktigste av en god kjøyere-fokuser er å kjøyere. Det er et par signer som vi har høyere i en hotel til å hjelpe kjøyere å finne vennet. Hvor vil du gå hvis du vil finne vennet? 43, 37. Og folk er ikke høyere kjøyere for solusjoner. De er ikke kjøyere. Min kjøyere gjer oss. Han er 79 år gammel, og han vil aldri kjøyere en smartphone for flere reisens. Han har en av de som er der. Det er en skjøyere kjøyere. Det er gammel for folk som ham, men det er veldig svært. Og han tror også at det er veldig svært. Men han blammer seg selv. Jeg har ikke disse komponenter. Jeg tror at han er en part av den seneste generasjonen høyere. Og han blammer seg selv for å ikke understå hvordan vi bygger arbeid. I nogle situasjoner jeg ser ut til komponenter som har en sort av servis eller projekter, som prøver å gjøre dette med din app men jeg kan ikke... Ja, du må bare klikke her. Gå innen der. Gå over her. Du løgde inn med Google account. Men du har også en annen. Du løgde inn med dette. Ja, det er det. Men problem solgt, ikke? Han mener på hvordan det går. Men jeg tror at vi er gammel med det. Jeg tror vi kan ikke kjøyere folk til å kjøyere kursen eller å løgge manualer eller sånt. Vi må bare inspirere. Løg oss å bygge ting som folk vil. Det er også vår vision. Drupal skal være den mest brødige ut der. Det skal være løst å bruke de som har drupal. Vi starter med Gutenberg. Hva er det nå? Det er en editor og en lønningpagel builder. Og det er mange av dem ut der. Og det er også en god userinterferis for å addere data til drupal. Men sometimes we need more. We see that very often we need more. For eksempel, her er en simple landing page builder a landing page to the left og this is how it could look in drupal to the right. Well, I know that there are also a lot of even better, more obvious ways to do this currently. But what we imagine is that it should look probably something more like this. It's not perfect. This is just a demo site. We're not working this every week. But it really does the job. You can see that I've selected something in the middle there. Actually, I will show you how it works. Okay. So here it is. I have a banner up here. I can choose a couple of types of background images. This is one for cell phones and so on. I can move the content over here to the left. And here, you know, I'm just going in and typing what I need. Don't click the button, but it works. I could paste the URL there, but I could also start typing some title of a node, and it will live search and find my test here. On this Gutenberg block here, and by the way, when we've done sessions on Drupal Gutenberg earlier, we've been very much focusing on demos for what you get out of the box. With this example, it's more like there's some custom blocks here, but they're obviously styled. So, you know, Google it. Or now test it out yourself, that's better. Ja. So I can choose some different templates back here on how this should look. I'm going back to black here. And here for my, this three column grid, I can do the same. So this should have this color. This should have this color. And then this over here. And then when I click one of them, I can also see what icon I have selected, and when I click around to play around with other ones, it's instantly updating. And of course here, I could just, you know, work on the text in the same way as the other ones up there. Here we have a background. It's actually a video. Can you see that's the video? Ja, it's moving. Ja. And let's say now that, same thing here, I'm working with text, removing some words here and there. And then I can go over here and find a new video. So I'm borrowing this one. Thank you so much, Andrew. And then if you go back to Goodmurg, I'll just paste that ID in here. And what happens is that it starts playing. So I can just continue with my work and see how that looks. Straight in the editor. So here's another Goodmurg block. It has a title in the top. I can work on that. And then it has some well, you know, I can teasers into, it could be products or solutions or whatever. And that's about it. Last thing I want to show you here is this block down here, which is quite simple and something that you use in a regular basis, I suppose. I can flip it as I want and then, you know, the same kind of, you know, toggles and needs. So that's a quick quick peek. And well, who's using Goodmurg? Is this something you can trust, you know, dare and go into? I would say yes. You know, it's it's about almost now 80 million websites out there that is actively using this editor. It's in the WordPress communities, you know. So the numbers for Drupal are way smaller, obviously. But still there are, like, almost 200 000 posts pages created every day using this. So it's, you know, it's here to stay for a while. We can say that. And then the number currently on Drupal.org for Drupal Goodmurg is about 3,000, I think. And, yeah, as usually it's probably a bit higher because, you know, for example, all of our sites that's using Drupal Goodmurg is not there because we have other systems to control updates and so on, and then it will be left out of the statistics. Okay, now let's get into it. Let's say now that you have a site and it could be an existing one or a new one, but you want to go into the Gutenberg ecosystem. So you create a new content type for that and say we'll do Gutenberg here. So let's talk a bit about how you then could go in and style that, extend it and change it and create those different building blocks. They're called Gutenberg blocks. First of all we start off over here. You can see that it will be more complex as we go in that direction. So he's the most complex part of the presentation just now. That's great. This is only tech, you know, humans always, you know, they are up there still. We start over here with the core blocks. Things that we get out of the box with Drupal Goodmurg and it's a lot. As you can see, it's like 65 of these building blocks that you get out of the box. And you know, if you do something similar for other projects you probably build like, you know, 6, 7 or 8 kind of blocks that you can build landing pages with, you know, widgets. If it's a large project with a large client it might be like 12, 13, but then you're really pushing limits. So now when you see that we're getting 65 out of the box, you know, already there, some people are saying, okay, I'm never going to use this. That's way too complex. You know, this needs to work together. Now, to be fair, some of them are quite small, you know. One of these blocks are title, you know, heading. Another is list, you know, number list, those kind of things. But still, the first thing we do when we start building Goodmurg pages is to remove most of it. Get it out of there. You know, there are so many things you never need. And, you know, the 37 of them are just the embedded blocks for a bunch of different services. Oh, it's, you know, the regular ones that you probably need, YouTube, Vimeo, Twitter, and all that kind of things, but then there's a lot of other services as well. So we just turn it off so we don't have to worry about some content creator feeling like, well, what I'm working, this is a verse, yeah, it's the verse block, you know, and then we never style it, and then you have it going. And, you know, so we start there, and, yeah, it's a lot. So beware. And then in addition to that, when it gets a bit more complex, we also have Drupal blocks. Every Drupal block on your site can be activated and fetched in Goodmurg in the editor. Now you just go to the content type that you have Goodmurg editor on and there's a checkbox for every one of them. You just tick the ones you want at Goodmurg, and you'll find it in the block list there. So now that could be, it could be a view block, it could be a web form, or it could be whatever. Next you could do with that is of course, you know, work with this in a theme layer. You could style it, obviously. So it matches the rest of the design. On purpose it starts, you know, right after the core blocks here because, well, you get some styling out of the box but you know, let's be fair. You want to do more. In addition to that, you have a YAML configuration file for your Goodmurg setup. Now this is really powerful because and we do that all the time. I don't think we've ever recently set up a Drupal site with Goodmurg without doing some configuration because what you can do here is to for example say that, you know, yeah, people should obviously be able to write this paragraphs, but maybe not set the text color to be pink. You know, maybe not. No, we don't want that. So the free select color, yeah, it's there. So when you install Goodmurg, it's in demo mode, you know, you can play around. But you know, you can also restrict it. And in addition to that, and this is quite new. It's a concept in Goodmurg called patterns. And basically Mark will explain how we do it. It's quick to set up, but it's about taking all of the smaller building blocks, building out layouts, and then saving that in your configuration so that we can reuse that as a more complex block. So now we're sort of moving, moving a bit further into the depth here. Another concept that Mark will show later is something called dynamic blocks. And what we mean by that is a way to sort of override and extend the markup for a core block, that you borrow down here, so that you can make that match the CSS structure of your site, for example, or you just want to restructure the markup somehow. And then as a last, of course we have the custom blocks. And there you know the possibilities are endless. You know, you can build whatever you want. We have created custom blocks that, for example, for the larger media houses just, you know, when you add it into a page, you can search in an external database a dam system maybe, or a product from a PIM, and then that's fetched straight in, and you could choose the different layouts that you want to have available and do all of those kind of things, and make sure that they're not able to do something that they shouldn't. So all in all on the top here well we have the typical front end also the blocks down here, they come with styling and so on, so that should also probably be up here but you know in the bottom here these are the different kinds of blocks that we build these things with. Now let's move straight into the patterns. Okay, so Torlander already gave an overview of the patterns. So block patterns are premade, ready to use layouts that are made up of Gutenberg blocks. They let you easily create a complex layout of blocks in a matter of seconds and save it like a template. It let us easily nest or blocks. You can then use these patterns anywhere on your website to recreate repeating sections with minimal effort. Block patterns are defined in a theme or costume module using Gutenberg's YAML configuration file. Let's see how it works. So here the idea is to create a pattern with some layout that will be used to show future speakers. First we start with a blank page so we can build our pattern. It will be a section with a title and a three column grid and on each column it will hold the speaker name profile picture and some text and also button at the bottom. Here I'm just filling the first column then I copy paste to other columns. After this is done I'll just select the hold the content and copy it. Now we go to the configuration file in this case located on the custom theme called Drupalcon and here I already set up the pattern configuration with some properties and I'll just paste the copied Gutenberg HTML into patterns content property. Just need a little adjustment for intimidation. Now we are ready to use the pattern. So let's do this by editing an existing page for example. All I need to do is go to the insertor sidebar you notice the patterns tab next to the blocks and now I just drag and drop to edit the blocks. And now I just fill with my information or data that I want. I set the title fill the data in this case it's RIS and I can also style the button if I want. We could do this more advanced also so that all the buttons are in line and this is just out of the core box. And also note that patterns can be grouped by categories which makes it easy for the content editor to find them on the insertor. Ok, so we are almost done and we just need to save it and we are done. Cool. Ok, sometimes you have a block it could be a core block or a custom one but if you want to override its markup structure for some reason it could be adding a class to it or that it matches the CSS structure of your site or to fully restructure the blocks markup. Well it could copy that core block and make it a custom block but then you would need to maintain it. So Gutenberg offers a way to do this restructuring through a concept called dynamic blocks I'll show you how. So you just need to go to the Gutenberg's configuration file and add that section dynamic blocks and under it you just define which blocks you want to override. In this case I'll just using the core list block. So that's basically just a bullet list, right? Exactly. And then you need to create the templates right there. So you create it on your theme folder. And there you have the template. So there are several template variables that are available in this case we are just using block content. So as it is it will just render the block as it is. But what I really want to do is to add a wrapper to that block content. So I'll just add a div with some class. And then when rendering you can see that it will add the wrapper. Just a few comments on the dynamic blocks. When you do this it will instantly apply the template to all your pages and content using this block. This changes does not render within the Gutenberg editor. But this is a quite easy way of doing these tweaks if you are a Drupal developer because you can fix it in a nonreact way. In addition Gutenberg features versioning of blocks. This is powerful and great when you improve your blocks but also requires work. If you use the dynamic block concept for the change you avoid the precated block handling. Yeah. Now let's look at another new feature which works quite handy. And that is the Duotone filter. And it basically works like this. I will just give an example here with dragging a photo in here. Here we go. And that loads. Just center it. Clean up. Like this. And up here I have an option called Duotone where I can choose that this should be a black and white photo. Colors. Like this. It works nicely. And of course then these colors also are something that I'm able to define in the configuration, right? So that you could basically play around with your designer and say that for this content type for those images we could just add those colors as a default maybe. And the user could choose to turn it off for example. Another thing, next thing, is cropping out of the box. Same here. This is just a simple installation. And I could take the same photo and go in here and say I want cropping. So I could either scroll or just pinch zoom like this. Let's focus on that car back there. I could also go in and say that I want to switch to other landscape format or some square or whatever. I'll keep my original for this one. And then I just apply. What actually happens then, because the previous picture is over there, it was not really fully sharp, because I had set up to use an image style that was quite low resolution. So now when I crop, it fetches the original, crops it properly, creates a new file and saves that. So it's not really just CSS covering overflow, but it's actually serving something and then of course you could just use image styles on that to make sure that you can do this, but sometimes you don't want to do that and then the configuration kicks in. So as you've seen throughout this presentation, most features and customizations were enabled by using Gutenberg's YAML configuration file that you can set on anything or module. You can also customize things like restrict the available font sizes, colors, base colors, gradient colors and as Thorander mentioned you can set which text format options are available for the editor and some core blocks come with predefined styles but you can also overwrite them or just add more to them. You can restrict which blocks are available for the theme and in this way overwriting the settings on the content type and as we've seen, this is where we set the patterns. Okay, so Drupal Gutenberg at his score is at text editor pretty much like cka editor and like cka editor the content is saved as HTML. Of course the generated content can be more complex using Gutenberg when using blocks like group columns or any other block that affects the layout but even so we believe that the advantages of storing the content in this way outweights disadvantages, sorry. Using the field mapping functionality with templates we can solve the cases where Drupal fields are blended in the contents you can learn more about field mapping at Drupal Gutenberg's documentation at Drupal.org Although there's this one use case where we need structure data at less or the couple applications. When building the couple application it's very likely to be more useful to have the information structure so that all the frontend we have at the frontend we have more flexibility in building the UI. Okay, so let's say you're building your frontend app with any javascript framework for example Next.js In your JS app you can import parse function from this light wordpress package called block serialization default parser so this parse function will take the Gutenberg formatted HTML taken for example from Drupal's JSON API node endpoint as a parameter return a javascript object representing the content blocks. In the next versions of Gutenberg we will work on integrating the structure information of the blocks in the endpoints of the nodes available in the core module JSON API. This is the current JSON output from the node endpoint and as you can see the value is just HTML kind of. And this is the initial draft of the JSON output we want to integrate with the node endpoint. This structure output will help a lot when consuming this data for a headless application. In recent months we have seen some movements in the Drupal community towards the adoption of JSON fields already available on my SQL we will be watching its progress and if we see that brings value we will certainly adopt it. We were talking like outputting. Just a comment on that because you said that some of the last things there are like fans in the future but serving that javascript object for a decoupled setup is something that can be done. You just need to use that package and that function from the package. Let me introduce you to this very handy tool Gutenberg converter. This command line converts generic HTML to Gutenberg blocks formatted HTML. This tool is very useful for migrations for example converting content from a Drupal 7 site to a Drupal 9 site with Gutenberg enabled. Just a little word on the custom block development. When doing custom block development one of the things that annoyed me was to set up webpack. So I'm not sure any developer that already work with webpack here in the room. OK. For this case or any bundler for I mean it was a bit hard time consuming task to set up webpack or any other bundler into web project. But a few months back I've discovered a lot of Elmix. Hold on. I know what you're thinking no we are not bringing Laravel to Drupal not at all. Laravel mix just has Laravel in its name because it was developed by the Laravel team. Mix is an opinionated wrapper for webpack. It comes configured to cover most cases on development. OK. Let me show you just a quick example. So to work with Laravel mix you just need to install Mix as a dev dependency because it's an npm package then create this simple configuration pipeline into a file name called webpack.mix.gs So from this example you see I'm declaring some external variables like react taking the index.gs file as source compiling reacts to gsx filing the css and even using browser sync for live reloads on your Drupal development site. When running this script Mix will handle all the dependency so you don't have to worry about it. Of course there are many tools out there that you can also use for custom development custom block development but I find Mix to be quite simple to use and it allows me to save time on the project setup. Thank you. So yeah we got a bit deep into the technical parts there luckily there were a bunch of developers here already so it was never easy to know but well our summarized take away from this session is probably that well for all the Drupal websites that we've been setting up for the last years we always have set up Gutenberg. It's not like a policy we're not forcing it on anyone but we always do it and why well it's working really well people like it it's stable and it's very great for a typical especially marketing departments that has a lot of content creators and they need that for their everyday work that's really important and yeah there are things to learn it's been a learning curve also for us and part of this session also is trying to sort of help a lot of you developers out there to be effective getting this thing to work as easy as possible for you in the right direction for getting quickly up and running with this we are doing an onboarding program it's a paid service but a business owner that might be thinking should we go in this way this is definitely the most effective way for your company to get up to speed with what you need to know about Drupal Gutenberg all the concepts here yeah and some of the sessions that we'll run through in the beginning of that and of course there will probably be equally amount of levels and the experience have you used react before or not and so on so we need to talk through that and set up something that works for your team if that's interesting at some point yeah thank you so much I know that there are some questions so that's great just before people also feel that this was long enough there is a buff going on to discuss the next steps right now at 5.15 so it would be super great to have someone there to be able to discuss these things further also in the beginning there there was this survey where it would be great to get some feedback from you we will leave an email address so we have someone to reach out when you want to communicate and have dialogue about the decisions being made and yeah just we can just leave that there feel free to reach out of course and let's do some questions hello so we're going to start with the questions from the app and then we'll go to the floor question from the app can you optimize image sizes when uploading through Gutenberg if for eksempel the media module and media library is enabled, Gutenberg will use the media module by default so it will be all handled by the media module yeah so that's a yes ok, questions from the floor, hands up when you created this cropped image is it that stored, is it a file entity and linked to the node so when I delete the node the file is removed or how you solve it the image copying when you do the image copying it will create a new file entity and it will work like a file entity so it will create as a temporary until the node is saved of course just one note regarding because duotone filter we've kind of missed that for the duotone filter it's not creating an image it's just an SVG filter that applies to the image two answers for that question let's make it three three hello could I use responsive image styles with Gutenberg I'm asking because if I want to use webp images I need to use responsive image styles again, you can use the media module and media module together with the responsive images module, I think or the responsive module will handle the responsiveness hi, how much do I need to learn my to do this I need to learn React should I learn my React developer's Drupal should I learn my Drupal developer's React where's the line that's a great question I think that most of our developers at least started off from the Drupal landscape and actually through some of the tools that you use when you start working on Gutenberg blocks you'll sort of get what you need out of the box it's a very good way actually to learn React, you learn React that way yeah, of course yeah, it's definitely doable you sort of get the structure there quite quickly even though you know I shouldn't really want to answer the question yeah, my question is does the Drupal Gutenberg project do they follow updates to the Gutenberg itself like for example when WordPress 6 was released with some enhancements to the block editor did those things flow down to this project well, we try to yeah because WordPress Gutenberg has this big team so they keep and they aren't kind of not afraid to just release new versions so it's kind of hard to keep up with them so we try like to wait for like a big set of features so we do the updates in Drupal Gutenberg okay, that makes sense, thanks yeah, thank you for the very inspiring presentation I have a question, when you have a Drupal website which is structured with paragraphs and maybe nested paragraphs how would you recommend how would you recommend to bring Gutenberg into the website because I think it's not the solution to bring just the Gutenberg UI into the paragraphs there must be a way to use Gutenberg at a whole and migrate those paragraphs into the website but it sounds very complicated I would say yeah, you can take the tech part but well, we've been talking about several ways of doing that I need to migrate somehow but for a couple of cases we're sort of building a side by side way of using this so if you have paragraphs set up from earlier we have an additional body field that we use for Gutenberg and then you're able to switch back and forth and you could sort of port the HTML from those blocks into Gutenberg and then from there we'll just go and at some point that will be like a clean up where we leave paragraphs behind for the end but you also mentioned nested blocks and that is so much easier with Gutenberg because of all the performance issues and translations and everything like that that's like it's just a body field so that's super performant and easy to handle in that way but there will be not to migration good point anything to add to that yeah I was like thinking a way to kind of migrate paragraphs content so Duple would be like taking the outputs HTML from paragraphs and go through that that tool that I've showed the Gutenberg converter and it will try to you know it's just HTML so we'll try to convert to Gutenberg HTML you've had some statistics slide and there was also a number of pages created using Gutenberg how exactly this number calculated is there any tracking code or something that's from the WordPress communities so that's Gutenberg so those 80 million doesn't include the 3000 Duple sites so and I think the site that delivers this every day is called Gutenstats.org I think they explain somehow how they get the stats but yeah now behind you yeah first of all nice speech, nice presentation I've used Gutenberg myself on a couple of new projects but as far as you see Duple uses a lot the new it's not new theme but you know it, the theme gene for the backend and this theme is really cool and we are using it a lot and it's still I see that Gutenberg has a big lack of compatibility with the other themes than the one it comes from the box, yeah that's nice it looks even better than default Duple themes I admit it but what do you plan to do with the compatibility issues they are still right now on Drupalorg because I monitor it also for myself and again about the complex elements like exposed view blocks exposed paginators facets edge stuff and stuff like that which is conflicting with the GIS how can you provide something like more stable here yeah yeah so there's actually a content model which is called a gene Gutenberg that he could use that maintain us in the front rows so blame him no but it's trying to solve the usability issues that we see when using gene and Gutenberg yeah and it's very good we use the exact same module for all our setup so we use gene and the gene and Gutenberg module hi thanks for the presentation I haven't used Gutenberg myself but it looks really nice I understand that the integration with Drupal entities is working well so for example when you drag and drop the image it's creating a media entity so now I'm wondering I think this is a two fold question how well integrated is with entities like they're coming from layout builder or even does it make sense mixing these two tools or it's a completely different approach I see the the benefit of using for example you explain patterns so that will completely replace the need of layout builder for example but then my concern would be how well integrated is Gutenberg the Drupal entities yeah again it's a text editor so all those integrations are basically with media and we probably have some third party modules that allows you to insert for example nodes into the editor but that's about it there were some discussions about integrating with layout builder but can't do anything we can't do more alright our time is up I think so thank you so much I hope to see you at the buff