 Good morning everyone. I'm glad to be here. It's my second trip to Finland, actually. The last time I was here, I was 14 years old and spending a full summer driving throughout Norway, where I am from, from the south in Fredrikstad, and all the way up north with my family. So when we were up there, my father was like, hey, let's visit Finland for the first time. So we did. We crossed the border at some random place with our goal to reach a great lunch, you know, and have a great time in a small, nice place in Finland. We never found that place. So basically, after driving for a while, you know, up there, the distances are long and we gave up driving back to Norway without talking to a single person. This trip, however, is quite the opposite. So this is a very nice experience. Very glad to be in Helsinki. Great city. So let's get started. My name is Torandre. And with me, I have our senior developer, Marco. We work in Frontkan. It's a digital agency located in Norway, Portugal, and Poland. We are an innovation-oriented company, I might say. So our work with Gutenberg.js and Gutenberg Cloud, and also several other projects, is supported by the Norwegian Research Council. Now, Gutenberg Cloud. All web project owners want to provide the best editing experience possible for their users. Whether your site is a university site, a non-profit site, or a high traffic news outlet, you want to empower your editors with the absolutely best tools to grow their digital presence. Now, we originally come from the Drupal world. Now, Drupal is almost like a CMS framework. But the Drupal admin interface can feel overwhelming. It's not always intuitive. And these days, you expect a CMS to be both flexible and easy to use. So this is why we introduced Gutenberg Content Editor for Drupal. And we presented this in Drupal Europe, which is a conference that was in Germany this fall. We started with the Gutenberg Editor. We stripped away the PHP from that, and created a pure React library called Gutenberg.js. On top of that, we built a Drupal module. And last week, we had a release candidate for that on Drupal.org, and it already has more than 9,000 downloads. Our original motivation was to just improve the Drupal authoring experience. But as we got started, a greater vision emerged, making Gutenberg the go-to solution for editing rich content on the web. Period. Gutenberg is more than just another editor. We believe that it's a platform enabling amazing new features built by the community, by all of you. And this is why we have really focused on making it easy to add new blocks and share your code. What has happened in the WordPress space is that companies are releasing nice collections of blocks. Well, this introduces a bit of bloat, however. So let's think a bit bigger. We want a sustainable ecosystem of blocks, but also the ease of use. This is why we created Gutenberg Cloud, your library of blocks in a cloud. Now, Gutenberg Cloud is a browsing experience for downloading and enabling Gutenberg blocks. Any developer can actually add their own blocks by putting code on NPM and pinging us for a code review. The code itself is served via CDN. It's all just JS and CSS anyways. And since the blocks are JavaScript only, they work across Drupal and WordPress alike. Now, this is really interesting. You can now build a frontend for WordPress and Drupal at the same time. It's all about open source. Anyone can publish their blocks. We do code reviews, but it's only for security purposes. So this is the plugin you need. And while this plugin is stable already, we're just getting started. We're happy to see that there's already been some interest from key players like Matt and Dries, which is the founder of the Drupal CMS. And this work is also covered by VP Tavern several times by Sarah Gooding in this article here. So let's get ready for the demo. So what Marco here will start show is a demo of, well, it's the demo page on gutmercloud.org. Feel free to have a visit if you'd like. But let's go. OK, OK. So as shown previously, you can browse through all the blocks published on the cloud. But you can also try them out without installing on your site, using this demo site, the demo.gutmercloud.org. So let's try here. As you can see, it's just a simple Gutenberg editor. What's stripped down. And let's try some to have some blocks available on the cloud. For example, you have this content in columns. OK, it works pretty good. You can change the settings as you would. You can upload it, just to check how it looks. Looks good. It's a plane. It's a plane. In case you've missed it. And you can try it here, too. Can you help me out? Yeah, well, it's over here. Oh yeah, this one, probably. This is something Nordic. Yeah, Nordic. Not Trit. Yeah, there we go. It's a mountain. Yes. OK, so it works pretty good. And you don't have to install any of the cloud blocks on your WordPress site. But you could, of course. But you could. So let's have a look at how that works. So I have a local WordPress installation here. So what I do then is to go to the plugin page. I click Add New. And then I will search for Cloud Blocks. And here we have it. I can simply install it here. And after that's done, I activate it like this. And I'm all ready to go. What happens now is that you can see that I get a Cloud Blocks link in my main menu. So I go here. And I'm straight into the same list of Cloud Blocks. And I can select a few to install or activate, actually. So let's do that content in colon block also that Marco showed. And we should be good to go. I'll go to pages now and add a new one. And, well, the obvious title, Word Camp or Dick. And let's start with that hero section that I just installed. Well, for Drupal? No. For any CMS, of course. I can change some settings there, like set that image on the left side. I can say that I want an image in the background instead of a solid color. And then I can choose to set the amount of overlay for that block to make my contrast for the text good enough. Readable, yet a visual background. Very good. Let's go down here and add that content in colon block. And then I get the same list view here, like Marco just showed you. Ja, sorry. But if you prefer to have your blocks codes on your WordPress site locally, you can install them locally. And my local is, I mean, on the WordPress folder. All you have to do is just zip the block folder and upload it. Let me show you. Let's go. The cloud must there, yeah. What, me decide it? Ja, it's on Norwegian for you, Marco. Yeah, Marco is from Portugal, by the way. But your Norwegian is getting there, so. Yeah, it's getting there. So you can find the tab, the local tab here. And as you can see, it's empty. So let's just upload a new block, this one, and install it. So now that you've uploaded, you can just simply activate it. And it will be available on the editor. Nice. And that's the first version of that block, Marco, isn't it? Ja. It's a cool block. It's probably the last one also. OK. So we've seen how to install this in WordPress. We have activated actual cloud blocks, which is served from the cloud. And we have installed a local block. Now let's have a look at the use case. We are currently working on the new website for UNICEF in Norway. They have a Drupal site. So just for the fun of it, let's demo that in Drupal, and see how that looks there. There we've also made a variation of the key role block. Let me just set an image for that. You see that it has some of the similar elements. It also has some interesting styling features for the text, where you can highlight some of the text, which can be toggled on and off up here. I can change the actual text here, of course. And to make the design consistent, we removed the styling options for that part. But of course, they can also go in and change that button text. And add a link, of course. And in the sidebar, we have a few options, like for example, very relevant for them, is to add a donation form to the block. To choose if you want a full height for that, or a bit smaller one. They can choose to remove the title, the teaser text, and even the call to action button there in the bottom. Let's have a look at another. We can check the mosaic block, which is two columns and a lot of demo content to make it easier for them to get started building out the content. So they can go in here and replace the photos to something that they'd like. A lot of unsplash photos here in testing already. And of course, they could set their own text here, which of course is WordCamp Nordic. And the text here, as they choose. And of course, obviously the link. One last block that I'll show you is a block called Fact for displaying facts. It has a basic look like this. And some icons that are preset here. We have a large title field here. And we're also able to add a small title above that, something like medicine. And then the actual fact. Did you know, for example, that 80% of all medicine is? Yeah, I don't know. You did know that. Yeah, it's a fun fact. You can bring that up in several locations, actually. And then you can add text to that. Support us if you'd like. So that should be it. Let's move to under the hood. Let's check out all things that are done. It's a cat under the hood, as always, obviously. OK, we already mentioned that cloud blocks are published to NPM. Is anyone familiar with NPM? Yeah, OK. Great to see that. So NPM is basically a software package manager, originally made for managing Node.js packages and its dependencies. But nowadays it can be used for any language. OK. So the easiest way to create a new cloud block and eventually publish it is to use the create cloud block command line sorry, command line tool that we developed. And of course it's open source. You need to have Node.js and NPM install on your system. And to install it, you just need to execute that command. NPM install with the global flag and create cloud block. So after the tool install, you can execute this command. NPM create cloud block and the name of the block you want to give. In this case we name it WCN block. So this will create a basic block with all the structure, the cost structure necessary for a cloud block. You know, basically it's a block starter to make your life easier. It may take a while to execute this command because the tool also installs an instance of g editor which is a React app. You already seen it. It's basically the demo site. And that allows you to quickly test the block while you're developing. OK. So you know, instead of building the block, zip it and move it to the WordPress install folder and test it on WordPress, this is quite easier. And basically that's it. So to come here, we just run the command npm start and it will automatically open a browser window and run the g editor instance. And then you can just add your block to test it. Yeah, cool. And when your block is ready, you can just build it with the command npm build. You can zip that. Basically what it does is creates the package on the build folder with minimized minified codes. And then you can just move it and upload it using the cloud block plugin. Or you can just publish to npm by running npm publish. Yeah, that's what we really want though, so we can share our code. Yeah, it's quite easy. OK. So just a note. I'm noticing that some developers are a bit apprehensive about learning JavaScript and specially React. But taking from my own experience, I had very little experience with React before this Gutenberg revolution. But still using this tool to create the cloud block and of course following the WordPress.org block reference documentation, I was able to build some quite complex blocks. So guess what? I actually learned React by building blocks. Yeah, very good. With Gutenberg.js and the Gutenberg cloud, we envision a growing library of CMS agnostic blocks, design components, and even proper web components. You code it once and reuse your designs in any CMS. We believe Gutenberg's ease of use will bring you business opportunities to other open source projects and ultimately improving the open web. To learn more about this, go to guttmerecloud.org and also check out drippelgutmereg.org. For updates, you can follow at Gutmer Cloud on Twitter. Our latest slide has all the resources and links that you should need to get going. As an end note, thanks for all the Gutenberg contributors and testers out there. We believe that you've built something truly powerful. You're basically a testament to the power of open source. Thank you for that. Now we have time for questions like in the first round. So we have a couple of options in here. We can use that mic if you want to walk a little bit or we can use the draw mic also. So is there any questions from the audience who liked us, okay? Yeah, that'd be nice. The first one. It's on. Hi, I'm Nicholas. So is this a free service or a paid service? If it's free, do you have any monetization plans? What are you thinking? It's totally free and that's the whole idea behind it. We're allowed to stay here and talk about these good things and hopefully that's going to give us some good opportunities as well. So that should be it. And of course we think that that kind of model is something that we need. You know, that kind of open source spirit that can help us to actually involve people like you to the project. So we need that. Yep, go ahead. Hi, I'm Kristian. A really interesting project. I was looking at the state of the word the other day where Matt says something about maybe in the future blocks or the finding of blocks should be implemented in WordPress core. As in you write and then you kind of search and then you maybe just install the block. Have you been in contact with him about this or do you envision this to influence and be the solution for the core block integration finding solution? Ja, I know that our CTO has been in contact directly with Matt related to these kind of things, but I'm not familiar with the details. Sorry, so no extra snack for that. What's the state of localization and translation of the blocks? Is it possible to download a language file or something? Well, yeah, currently it's not, but that's something we've been working on. But you can use the default. For example, if you use the, in Drupal, we have this translation function. In WordPress we have also the double underscore, right? You can use that. But on the back end, you know, on the admin UI for the front end, well, basically it's the basic stuff, yeah. It's content. Yeah, it's content. So yeah, it's possible to translate. Hi, my name is Stanislav, really cool project. So you shown a couple of blocks here and you've shown mostly like front end blocks. And I'm wondering if you want to have a block, for example, that would list the latest posts from a category of posts, or like blocks that would require some sort of database connectivity for each CMS. How is that handled, and if it's not, how do you plan to handle it in the future? Well, obviously blocks that integrate specifically with the CMS itself need to be specific for the CMS. I was saying, you know, a way to categorize that when you're on the browser. So you can sort of exclude the ones that integrate with different CMSs and see that all this is a WordPress integrated block, for example. Well, then you would commit the code to MPM, the PHP parts of the code. Yeah, sure. Any other questions? Any other questions from the audience? I have a couple, we have time. I have like 21 questions. Great. You mentioned like the Gutenberg CHS. I didn't really get it. Do you mean that you have kind of ripped off the Gutenberg from the current blocking version or something? You kind of maintained that kind of separately from the core and from the Gutenberg blocking itself, or what the Gutenberg CHS mean in this context? Basically, Gutenberg for WordPress obviously has quite a lot of PHP that connects to WordPress. We basically removed all that PHP and replaced that with React components instead. So to make it like CMS agnostic. So the Drupal example we just did there is just, well that's the exact thing that we've built so far. But there's nothing wrong with using Gutenberg JS as a component to run the editor anywhere. Is that horrible to maintain because there might be lots of changes in the Gutenberg code page which are not related to JavaScript. Or do you need to rip off stuff like every day or every week or how the process goes in practice? Sure. Actually there's a little override to the code. Because the Gutenberg React part is so well made, so modular that it's possible to do that. So we just, for parts like probably, if I remember correctly, the core image block perhaps. Well the rest, like uploading files and things like that, they are quite modular. You can implement a separate component without overriding anything on Gutenberg. So yeah, it's very little overrides we have. That sounds good. I did have a couple of other questions. 19 actually. 15 left. It goes to the third one. I just can't remember any more. Is there any other questions from the audience while I'm thinking a couple of the hard ones? You already mentioned while you were speaking the kind of couple of options you might have. So did I understand correctly that one option is actually that somehow you get the Chias for the block itself from the NPM library and it lives somewhere and it sucks hooks into the admin interface in any CMS. Where does that Chias actually lives? Basically it's served through Cloud Player. Just like Google Fonts for example, if you use that. So for 98% of the sites out there, your blocks will be served faster using the service than your own server, no offense. And the other option was that you can actually upload the tipp file of the kind of the block code itself and its installs in WordPress case for example in some folder. There's a folder and on the upload, there's the cloud blocks that will live there. One more question on the 17th. I think the hard part is getting people involved because I understand correctly that the whole point is that people like you in the audience, people like me perhaps in the future, people like Marco who are interested in kind of learning a little bit react on JavaScript, could actually create a block which you can use in any software or any CMS. What are the kind of the struggles that people actually start doing that? Or is there already lots of donations by the God already? How it's been to start? Or are those example blocks something that you have actually created or are they made by somebody else? And how many kind of quarters there are already who have uploaded their own block in there? We made a few of them and some are like contributions from people that we hardly know out there. Of course, this is quite fresh still. We just released it basically. We really enjoyed this opportunity as the first step to reach out to all of you guys. It's difficult to contribute to something you don't have ever heard about, obviously. As Marco mentioned, it's probably getting into react and everything like that. That could feel like a large step to someone, but what's really good then with using the create cloud block package as a starting point. It really helps you to get that structure in place. If you're familiar with JavaScript, you can dig into that and you'll sort of understand how to work with react. By doing that, you'll actually learn react. So it's a very good starting point. It's a win-win for, yeah. I definitely recommend checking that out. That all sounds good. Perhaps in next contributor day we can, you know... Yeah, that would be great. Yes, that would be great. Yeah. Any other questions from the audience? We still have a couple of minutes, so at least one question. Can you walk or can you throw the mic from there? Yes, I can. There is one from here. Can you...? Hello. Hi. Gutenberg's obviously changing a lot. Do you have a question? 5.2 came out recently. So how are you navigating the changes in Gutenberg? And have you seen the pose changes about defining blocks as JSON so that they can be available in the API so they can be used in stuff on the mobile app? Good question. We do need to chase the main repository for that. We usually need some time to update the Gutenberg JS library. Yeah, and that was also why we didn't get a stable release of that earlier because we had to wait for the actual 5.0 WordPress release. Are you involved in the GitHub project? Are you trying to contribute to that and feedback? Yeah. We have a developer. Yeah. Several, actually. Yeah, but as I said, for Gutenberg JS, for example, now if we know that the Gutenberg and WordPress 5 is more stable, it's quite easy to move the changes to Gutenberg JS because since we use a few overrides, it's quite easy to update that. So in terms of so far, what kind of time aspects, how much time are we using usually, do we need when we get a new... For the last version, I think it was one day or two, probably. So we're usually quite quick at updating that library. Thanks. We have one last question from there. Hi. I was just curious, how well does the Gutenberg blocks integrate with the REST API? Well, the Gutenberg cloud doesn't integrate with the API. To make it available across many systems like Drupal and WordPress, there isn't really more to come using Gutenberg. We need to make it... For now, we need to make it as simple as possible. So on the admin UI, you will have basic JavaScript and CSS, and for the frontend, of course, it's only outputting HTML. For now, you're doing this, but in the future, who knows? If we have more contributors, we can find some solution to kind of fetch data from several APIs, from several systems. OK. OK, thank you. I think that was our last question because of the time limit. But once again, huge, huge thank you about the presentation. With applause. Thank you, guys. Thank you.