 It's again one of those last-minute talks organized which we are very thankful to Ulrich, who signed up this morning, pretty quick, for giving this talk. Ulrich is a very experienced speaker, so he has many talks to choose from. The previous talk was about Gudrunberg, so we decided on a talk about Gudrunberg, and he will introduce Gudrunberg to us. Thank you. Yeah, so my talk will be about Gudrunberg, but those who don't know what it is, it's the new WordPress editor. Maybe a bit to myself. My name is Ulrich. I work for Required, the same agency that Silvan used to work at, where I was at the talk beforehand. And I'm a more WordPress developer, more backend. So today will be more beginner-focused, just an introduction that you have an idea of what Gudrunberg is and what you can do with it. So this is the classic editor, which you have today. This is what you'll recognize. You've got the title, you've got your content, you've got your sidebars where you can publish your posts. So what is Gudrunberg? What's special about it? And so before with the classic editor, you just had one block or one section of information where you just type. But the difference with Gudrunberg is that it's built up of multiple blocks. And so here's an example of how it looks like now, or a few weeks ago. So you have the title built in, and then you've got a block here, which is a paragraph block. You've got here a quote block, and then you've got another block here. And the sidebar has also changed a bit how the structure is. But I'll be doing a demo in a minute and going into more detail there. So whoever's updated the latest version of WordPress, that is 4.9.8, will have seen this in their dashboard. And so that's what the WordPress is trying to do, is encourage you to install Gudrunberg and test it out on your site. And now we'll be looking into that, how you might do that on an existing site, and also on a new site that you want to build for your customers. So going on to the demo. So Gudrunberg at the moment is a plugin that you can install. I've installed it at the moment here. But you can just, most of you must know how to install a plugin. You just go to add new, look for Gudrunberg, and install it and activate it. So what that means is we go and edit a post now, and this is how it looks like what I've shown you before. We've got the title here. The premium link is on the top now. We've got the paragraph block. And if you want to add something else, you can click on the top here to add a block. You can go, you can do enter, and then you get another section on the other side. You've got a plus sign. So let's do an image. And here you've got the section. And we can go into the media library. I've uploaded a few images before, and we can add it. And then on the top here, you've got some different options. How you want to present it. You know, if you want to have it on the side, have it like full screen, make it even full screen, and have it captioned underneath, like WordCam, Europe. Or like if you want to add a block in between, there's even a plus sign there, which you can use. And so block. Another trick that there is is to use the forward slash. And so you can drop down and look for, let's see if you want to add a title here. And so heading one. And so this makes it easier that you don't need to use a mouse all the time. You can use these shortcuts to try something. Or you can even do like, let's do a gallery, and you can start typing. And then you get a recommendation, you can press enter to get that. So we can, hold on. Two images there. Insert the gallery. We've got a gallery here. It means that this looks very similar to what you have on the front end. So previously here, by the gallery, you would see a shortcut. And you wouldn't see how it really looked like you had to go to the preview. So you can update that. And then view the post. And we can see that it looks very similar to what we have in the back end. What you also have is like the gallery here. You've got these two sections in the sidebar. So the first is the document, which is the whole page itself. And you've got different information here. You know, when is it published? Maybe you want to add a featured image. And you can do that all, whatever the information is for, settings for this page through that in the sidebar. But you might have a specific block where you want to change the settings. And that's where the block tab comes in. And say, we want to only have, you know, one column. And have the gallery one column. And that's where you would change it. Or you want them to link to a certain page. You can do that there. Or having an additional CSS class. So this is, you know, these different options that you can test out also at home. But what you may be wondering is also how does that affect current content? So you can go and have a look at the pages. So I've got a sample page here. Which is not yet using Gutenberg. And so what we can see here, this is the old content. And this has got it in a part of a classic editor. And so any content that has not been migrated to this block system is shown into this classic block. And you can still use it as it is. You know, I can add, you know, some text. Or I can add an image or something like that. I'll just do a title. You know, heading three or something. And you can still manage that as it is. But what you could do is convert these two blocks. You can say, you know, I'm using Gutenberg for sure. And then that converts all these, this whole content, this one block of content into the separate different types of blocks. And then you can, you know, update that. You know, I've got another page here, which has a lot more different types of things. And even for those, that works well. I just convert those to the old different types of blocks. Which works fine. You've got tables. You've got your ordered list. And that all works. What another feature is, is converting. So you say, I have a list, but I want this to be a paragraph. So you can click on the transform, and you can transform these single items into a paragraph. Or the other way around, suddenly you've got a line of text. You didn't choose a heading before. And you can say, I want to transform that into a heading now. And so you've got the flexibility of changing these blocks into something else in the original work form. What you can also do is take it to another level. I'm not going to show you how to build a block, or a custom block, that's something that's not included in WordPress Core. But I'm just showing what the possibilities are if you are a developer or you hire a developer to do it for you. So this is a website that we created recently. It's a page about a single person and a team. So we've got their name here, we've got their title, we've got the photo, we've got their telephone number, email, a few extra information here, and their CV. Or next to it, because we're in a tab, we've got their publications, things that they've written about. But in the back end, we've got a similar structure now with Gutenberg. Most of you might know ACF, or Advanced Custom Fields, and you'd have a whole list of information underneath where you'd have to type in, but it doesn't look like the site in the front end. And so what we did here was create a custom block. So we've defined the featured image on the site here. So it looks similar to the front end. We've created a few extra fields at the bottom that were being shown on the left-hand side where they live, where they were born, their telephone number, their email address. And then we've got their CV in the first part. And then when you scroll down at the bottom, we've got their publications, the things they've written about. And so that you have the same thing on the front end. So when the user is entering this information, it looks very similar to the structure on the front end, also in the back end. I mean, it's not one-to-one, it's not necessarily what you see as what you get, but it's very similar, very near to that. But this is something that we programmed ourselves that we wrote. So if you want to build something like that, you need to understand the whole JavaScript and how these gluten blocks are built. But it's just showing you what the possibilities that they are if you want to build something like this. What there is also are other plugins. I can show you that. Pages. I've got to hear Pages' gluten blocks. And so plugins start to support Gutenberg also. So I've got Gravity Forms, which is a plugin. And that has also started supporting Gutenberg, so that you've got a visual look of how your form looks on your site instead of just having that dry shortcode. So I created a form beforehand. I can select it. There seems to be something wrong with the preview. I seem to have to deactivate and enable it, but in the end you have the contact form being shown here. And so that makes it a lot easier for your users to visually see in their back end how the site will look in the front end. Another plugin that is working with Gutenberg is Yoast. So they've got different options on the side here. They've started building stuff in the bottom. There's no problem with the Yoast being in the bottom. I thought they had something on the side here, but I can't remember if it was in the premium version or something. But they've also started supporting like Gutenberg and making sure that all of their things work. What they have created was, if I look for FAQ, they've started building in a structured block. So they have an FAQ block. So ask me a question. So we can update it. And then when we look in the front end, on the markup, they've added all the schema that is needed. So that makes it very good for SEO ranking and things like that. So the Google has all the right information. And so this is very easy where you're just adding the content and not having to think about how the whole HTML structure is being set up. But some of you might think that Gutenberg is not right for you or right for your website because some of the plugins that you've installed are not compatible at the moment with Gutenberg. And so there's a plugin called Classic Editor, and you can just simply activate that and then Gutenberg is gone. Sorry, may I ask you? Do you mean it changed default classes to customer? Where was a DIV class? With FAQ? So you mean it's good for search engine optimizations because it added the classes to customer classes? Yes, it was adding the schema classes. So it was able to add in with its editor, Gutenberg? You don't need to think about it. So you don't need to worry about the classes, the WordPress SEO. So it will be as an automatic version? Yes, so the block makes sure that you have all the right classes and the right markup needed. But don't make a change to default classes or something like that? They have their own markup. So you just need to enter the content. So it's a bit like a short code. But it's easier to do it visually, it's easier to understand it. So new classes will be added? No, the new classes are only added in the content, in the markup, in the HTML, but not in the styling. And you can style this now yourself also if you wanted to in your theme. But those people who don't want to use Gutenberg or it might not be the right solution for their website at the moment, you can enable the classic editor plugin. And as you see now, Gutenberg has been deactivated. So Gutenberg will be coming in WordPress 5.0, and that will be enabled by default. So if your site is not ready yet, then you should install the classic editor today to make sure that there's no issues. But you don't need to worry about Gutenberg affecting your front-end. So just enable this again. So I've enabled Gutenberg, and as we looked before, there was a sample page which had the old content, which is not migrated to Gutenberg. But I can still view the page, and the page still looks the same. Regardless of if Gutenberg is enabled or not. The only effect that it has is in the back-end and how the editor looks. And if you're testing on your website, what you need to make sure is that if you're just doing it for a short period, you want to test how it looks like is not to convert any main pages of yours to blocks. You should create a test page and work, play around there so that when you disable Gutenberg again that there are no issues. Especially as Gutenberg is still being developed, still being improved. There's a few bugs that I know of myself that are still being worked on. But there won't be any effect on your website if you install it because it would just look like it did before. It's only in the back-end. And you just need to be careful as editing your existing content. You don't modify any existing content with Gutenberg. Unless you decide, I want to stay with Gutenberg till it WordPress 5.0 comes out and then that's no problem. Are there any questions up to now? How to change the HTML tags? If a queue was strong, you can find more to make it HTML. So I can make because bold. So the text here. The question was in a strong tag. Is it possible to put it in a HTML tag? I don't think that one would be possible because that's the marker best defined in the plugin. But not by yourself. Is there an option? There's edited HTML, potentially where you can change it. But I have a feeling that if we change this to H2, then the plugin won't like it. So this block has been modified externally. So it would have to convert it back. Or I could keep it as HTML as is. But the block doesn't like it if you change the marker. But there's also an option here where you potentially could play around with the marker. And this is... Oh sorry, on the top here you've got the visual editor and the code editor. So what's new with Gutenberg is that you've got these new comments here which are before and after every block. So you don't want to go and delete these as those are what's controlling what the blocks are. But sometimes there might be a case if you want to copy and paste something or you still want to manually change the HTML markup in a paragraph or something, you can do that here. Are there any other questions? Is there already an approximate date set for WordPress 5.0? Because it's been postponed quite a number of times and the last time I heard about a day was July. Which obviously didn't happen. So I think they've just started the new release branch of 5.0. I don't think it will be really... There's a lot of people saying like WorkCamp US which is in the beginning of December. I think there might be a better version of WordPress 5.0 by WorkCamp US that will be announced then at the state of the word. But there's no official information there. And I think it might then come out maybe Q1 next year or something like that. But there needs to be a lot of testing done and I think there's a few bugs and things that need to be improved. But I think that's why it's important that you try it out in different websites. You try it out in different places and then also give that feedback. Be it through WorkCamp or your local meetup or be it on GitHub itself. Or even try it out with different plugins. I'm sure these plugin authors are also interested to see what's working and what's not working and improve on that. Are you already using custom blocks in selection at the moment? Yes, so this site that I showed you is live. And so the only problem is that the API or the code in the Gutenberg is always changing. So with every update there are things that you have to improve or convert. And so on this side at least we're running on an older version of Gutenberg because I think what Gutenberg is being released on a weekly or bi-weekly cycle and we don't want to keep on changing every time there's a release. So we've been waiting a few months or I think a month or so and then we might do another update to see what's working. So it's usable in production and it's still quite high maintenance. Why did you choose to use Gutenberg for that project? So this client had never used WordPress before and so we thought it was easier for them to step in using Gutenberg then we explained how to use the current editor and then later on say oh hey there's a new WordPress editor then you have to learn how to use that. And we also had a bit of complex layout like this one and it seemed to make sense here to use Gutenberg so that they visually I mean like when we go back to the editor to have a similar layout and they're also architects so sometimes it's easier for them to see it visually to understand how things work instead of saying oh you have to like if you think of ACF you have to enter all the information in the bottom in this meta box which is not related to how it looks and content. Have you tried the ACF integration in Gutenberg also? We normally haven't used ACF too much on many sites we've got an existing site on ACF but we haven't tried Gutenberg yet I think they're working on it or at least you know looking I think like we see with Yoast SEO at the bottom this is like a meta box and this shows up properly so basic things should work fine but it's always when you have additional customizations with JavaScript and things like that the whole marker of the editor has changed so those things might not work If I would like to create a custom Gutenberg block for a project how difficult is that? It depends how you do it. There are some fine tools that you can use to build up like a basic block and then you can sort of slowly slowly edit the hate the JavaScript and things like that I think you should have a bit of a JavaScript idea the big struggle is that there's a lot of tooling involved in building it and so that means you have to have a whole build process and so understanding like this and also there's something else that you need to understand to get to the end result but there's a lot of documentation these days there's lots of courses also people working on explaining how to do it but the problem can be if some of this information might be outdated as the development is going so fast that you can't keep up I think one point from a developer's point if I just was here some of you might know what custom post types are like posts but your special one and there you might have activated Gutenberg but you can't work out why Gutenberg is not showing up on your custom post type and the reason is that you need to enable the REST API for that post type because Gutenberg uses the REST API to fetch the data and so we see that a lot here when like if I click the update button the page is not reloading but it's running it on the background and that's being done by pinging the REST API so that's one important thing like if you're a developer so coming back a bit to like more of the next steps so if you're building a new site or you've got a new client who's never used WordPress before and the site is quite simple I would recommend installing Gutenberg it's the future now there's not many months left maybe 6 months, 12 months maximum will be Gutenberg for all of the sites and it's easier for them to learn one system in self learning too we've tried it now we've got a second client which we're going live with simple Gutenberg with no custom blogs and they've been able to reuse it without any problems there are still some issues like with multiple users editing the content and things like that which you may want to be aware of these issues but it shouldn't stop you from using it in production existing websites you have two options either install the classic editor plugin and just look how you would update Gutenberg in the future it doesn't need to be now it doesn't need to be in 12 months but do come up with a plan of what needs to be done what are the problems that we have that need to be fixed and also tell your clients far in advance that they can plan with it that they can budget for it explain to them there's this new Gutenberg coming along, new editor it will make your life easier you can see your changes in the back end as they are in the front end and they are working to it but they will have a better experience or you can say I'm going to test it try it out on your website preferably if you have a staging or local installation try it out there if not you can still activate it on a production site just make sure you don't edit any current content and then you can deactivate the game without any problems yep and just write a new post a new page to do that and do that now so that you can give feedback so that when it comes into WordPress that you are ready so a few stats there was a goal that Matt Woodenworks initially said that he wanted to have 100,000 sites using Gutenberg and 250 posts written by Gutenberg so the activists installations for Gutenberg which is around 450,000 which is over the goal and they calculated using Jetpack that 251,000 posts have been written and the number is most likely more because there's a number of sites not using Jetpack so they don't get those stats and yesterday it turns out that they were able to track wire via Jetpack that 6,000 posts were written with Gutenberg so it's clearly creating momentum and I think this is the right time to come on board and try it out so Matt Woodenworks talk it working in Europe in June he thought that August was the time where they start working on better releases like that and we see that we're only at September now where we started working on like a better version of 5.0 so I think there will still be some time but they're also looking through integrations with the mobile app and also Calypso which is a local editor that you can use for WordPress if you want to find out more information on WordPress or Gutenberg just go to www.wordpress.com check out the handbook if you want to have more information from the developer side or some of the tooling have to use it otherwise that's all for me I have a question from a client pitching point of view I find it quite difficult to okay if we back up a bit usually you could create a WordPress website it was kind of easy maybe add in some fields to get a nice back end interface it was very low maintenance I mean the site is done, you do a few updates but the client just pays the site for once and then it's nearly we have now Gutenberg coming into the game it seems to me that basically it's going to be a lot of maintenance around Gutenberg if I need to tell people I propose you this new thing on WordPress which is Gutenberg it's going to cost a lot of money and it's going to be very difficult to pitch because it means a lot more maintenance adapt to all of them so maybe my question is there a way we can still remain a bit on the older way of doing business meaning you have a custom thing and stuff or we all have to move and change our habits we all have to move eventually but by installing the classic editor plugin you can make sure that Gutenberg is not activated when WordPress 5.0 is released so keep on doing your updates install the classic editor and then update to WordPress 5.0 can be your strategy to wait for a few months for Gutenberg to stabilize a bit before running clients I would not migrate any existing clients to Gutenberg wait at least we had a client who wanted to test it out we installed it on their staging website but then they realized that they were missing some of the custom features that we had developed for them which were not Gutenberg compatible and so that we said instead of having to look at the whole mentions like we have with the previous client with every Gutenberg update we said wait till WordPress 5.0 comes out and then we can migrate your site to Gutenberg and I think it's important for clients to be able to know that it's coming so talk to them now say next year maybe we can sit again together maybe you can build it in with a refresh of the website because from my experience working with client websites they need to refresh every maybe 2-3 years look at what features are you really using what do you need now and then take it as part of that package instead of saying oh you know we have to now switch straight to Gutenberg so plan it in they can budget for it any other questions do you know how it would be evolved or would be integrated with the builder which like be very okay I think we need to rethink their strategy or think how they're going to do it as the API is not fully there yet the code is not final it's difficult for them to come out with a good solution they can try testing it but they have also a different way of doing things like I know like DB they've replaced the whole editor completely and so they're working on a different principle like DB is a complete editor in itself I think they have talked about having support for like Gutenberg blogs within their editor but I think those are two different things and so you don't need to worry in the same way you just might not be able to use those features that are in Gutenberg straight away if you're using DB or Beaver Builder or Elementor okay thank you very much thanks a lot