 Thank you Schuert for that nice introduction Yes, today welcome all. I'm happy to see there's a lot of you here. I'm going to do a talk about Gutenberg Which you probably know but I'm gonna ask some questions about that later I'm gonna do a talk on Gutenberg to let you know what it is what it does What it tries to do what it can't do yet? And most of all I'm trying to inspire you to start playing with it Test it give feedback to the development team and make this whole Gutenberg product better and Make sure that it works for everybody as soon as it arrives in wordpress 5.0 So a little bit about myself Schuert introduced a little bit about myself Now my slide is gone cool And my mic I'm totally off the grid now. Oh That's cool. Hello Okay, I think there's something very going wrong here There we are we're back It went to sleep. Okay. This sucks. Okay. We're back. Sorry for that Technical difficulties difficulties always happen when you don't want to to happen. So I'm a business owner I'm a developer. I'm a salesperson. I do. I'm a treasurer for my own company. Basically. I do everything and in my company, I do a lot of wordpress stuff and Besides that besides consuming wordpress as I heard somebody said this morning. I also give back a lot of Time and effort to wordpress. I help organize work camps. I was the lead developer for wordcam Netherlands in 2016 who was there? Just a few maybe there's another one coming up. So Keep an eye on that and I'm also lead developer or lead developer lead organizer for wordcam, Rotterdam, which is coming up on the 23rd and 24th 4th of March and We have some tickets for that Available. So if you want to come to Rotterdam please visit the website and Buy a ticket and Meet us there So what do you know about Gutenberg who heard of Gutenberg? Okay, that's a lot of people who has installed it on his local development on his live website and Who has really played with it made some posts added blocks those kind of things? Okay, cool So there's a lot of people in here who haven't played with it. We don't really know what it is except heard of it and Are there any people developing stuff for Gutenberg? Okay, the hands are disappearing quickly. So and Who has never seen Gutenberg in action who really doesn't know what it does Okay, that's a lot of people. So I'm gonna help you out in a in a few slides in a few minutes I'm gonna give a live demo. Oh, exciting and Of what Gutenberg is what it does and what you can do with it and How the team behind Gutenberg and also myself see Gutenberg as a bright future for WordPress and a very new future for WordPress So Gutenberg who who is he Gutenberg is a guy who? Has the full name of this you honest hands fly sure laden soon Gutenberg so we will abbreviate it to Gutenberg, which is easy for us and He was born somewhere around 1400 and they're not quite sure when he was born probably because of GDPR in that time and He invented a machine to Print stuff usually people wrote stuff on in that time which well didn't really cater for mass production and he invented a machine which they call the movable type press and There's probably another CMS around here, which has his name derived from that, but I'm not gonna go further into that They're totally revolutionized Book printing and they started with the Bible and enabled the Bible to be mass distributed well to everywhere We all know what that led to Here you see a picture of him, which is supposedly him because well We didn't have pictures in that time so somebody drew him and he must have looked something like that And this is a piece of the machinery that dude visible I hope but which consists of a lot of letters you place them on a piece of wood You put them in a machine paper through an ink and then you have a Bible When we look at the wordpress editing experience as we have it right now We're all used to that we are used to working with the editor editing editing text adding all kinds of other stuff and To be honest, it's not that good and I'm gonna clarify on that because it works for a lot of people it works we can Put some plugins in it to use other stuff and add blocks not blocks. Sorry. I have to come to that We add widgets. We had embeds. We add short codes and other kinds of stuff and This is basically well very familiar for all of us. We have this Text editor and we have a lot of stuff around it in which you can add content to your post your page or whatever content type you're using and there's a lot of stuff wrong with this and I'm not going to criticize us on how wordpress has been evolving the last few years But we are at a point now that we know that we can do better as a wordpress product What you see is what you get is the name of a tab on the content editor on the text editor But in most cases, that's not really what you get you add some short codes You add images and it's always or always and sometimes it's a big surprise to see how that ends up On the front end of your site. So it's not really what you see is what you get We have widgets in which you can configure all kinds of stuff which appends. We're gonna do this again no Which appends all kinds of stuff to your site and Go on again I'm gonna try and switch off my power thingy, which I should have done I've added my power cord so it should not go to sleep, but hey, we're doing a presentation. So why not do it? Come on. By the way, I'm since I started my company. I've been using Open-source software for everything I do. So basically this is Linux you're looking at and It doesn't really kind of behave nicely when we are doing presentations So that's a point of learning for me. So next time I'm going to Well, probably use another operating system to do my presentation. So we don't get into this trouble again. Are we back up? I don't want to report a problem Let me just Figure out how I put off my power our Let's go I Start up not to spend do nothing That's it, okay Back to go, okay Sorry for that again. So we're back with the short codes You add short codes to your for your content You don't really see what the short code does in your text editor unless you do a preview of your post then you see what it generates in the in the front end and Also, there's media which you can add you can add videos you can add images or PDFs or whatever kind of media Which you don't really see in the editor what it ends up with so when we go to Gutenberg, sorry when we go to Gutenberg It has blocks and the blocks in Gutenberg basically define how you build your page or your post content You have a block for text. You have a block for an image for a video, etc. There's a lot of blocks and I'm going to show you in the demonstration and These blocks allow you to do direct manipulation So in contrary to the thing you do in the current text editor you have to go to the front end look what it does what it looks like and In Gutenberg, you can definitely see in the editor how your content is going to end up on your website So you can directly manipulate your content the other thing about Gutenberg is that We as a WordPress product can Provide a new way of editing content But we have to make sure that everything that has already been published with WordPress, which is almost 30% of the internet Still works after we launch Gutenberg and after Gutenberg becomes the default setting of editing content so that's a major challenge for The development team and for all contributors who are working on Gutenberg and that's something that's being thought about and being tested constantly Another big question is When is it ready? And that's a question that I can't answer right here. I've done a lot of investigation about it talk to people No one really can give an answer When we did this then it's ready. So that's very difficult because constantly there are coming new enhancements to Gutenberg Which are good, but it seems like the project is being stretched until we don't know when and When we really want to use Gutenberg and we want to put it in production we need to have a end to the project of Gutenberg as a Minimum viable product to to use this term so it was basically done and after that we can start adding new stuff changing stuff and Making it even better if that's possible I'm trying to move my mouse a few times so it doesn't go to sleep again So when is it ready? This is not really visible. I had to switch down the resolution but this is a screenshot of the the github repository for Gutenberg and You cannot read it. I cannot even read it from here, but it says 606 issues open that means that if you Have a product that you want to launch in the first quarter of 2018 bless you what has been said by Matt Mullenweg in Paris onward from Europe That's a very challenging that line and I'm not saying it's not gonna be done I don't know there's a lot of people contributing so these issues might disappear in a few weeks I don't know but there's constantly coming new issues and there's constantly coming new changes So it's it's difficult for the Gutenberg product to be defined as a product then okay. It's ready right now So how do you start with Gutenberg if you haven't done that yet well, it's basically one step with a few mini steps, but one step sounds pretty cool, right and You go to your your WordPress dashboard you go to your plugins screen and You search for Gutenberg basically you don't even have to search anymore because it's added to the Screen of How do you say that featured plugins and so you can select it right there? So you can see the nice logo up there. It's also right here on my shirt Install that plug-in then activate it and you're done. So that's one step if we then Memorize the editor, which we all knew like we currently have it This is the editor you get when you activate Gutenberg What's the first thing you see what's what's the first thing you notice? Anyone no meta boxes Anyone anything else? What do you notice? No tiny mce that's correct Anything else It's clean. That's exactly the word that I wanted to hear it's clean and When it's clean it means that people who write content they can concentrate on writing that content When you see the previous editor or the current editor you have a lot of things around it And of course you can select those widgets in in your top screen in your screen settings and you can disable all those boxes So you only have to focus on your your content editor Or you can you can launch the full screen editor, which is currently in the editor to Disable all the clutter from the side, but this is basically the Gutenberg editor as it is So shown screenshots of stuff that's being developed. It's not that handy I created some slides for this presentation when I was building it and As soon as I had 10 15 slides of this with screenshots on it. I got a notification Gutenberg has been updated Okay, so there we go. I needed to make new screenshots After one iteration. I thought this is not gonna happen. This is not gonna work I'm not gonna finish my presentation for word camp and work, which is not gonna be fun if I don't finish it So I had to figure out something else. So as a developer. I have a local development environment running on vagrant and If you want to talk about that we can do that later on and I have a WordPress setup right there and I'm gonna show you now in a live workshop drumroll, please how Gutenberg is Thank you how Gutenberg works and is it okay if I sit here for a video. Yeah, okay So we're gonna switch to another browser and This is my development website on my local environment and I've got a Guten test pressing content like a block and I've created a post Which is a rather simple post has some text has a paragraph with a drop caps Which is the the big letter T there and that's basically it. I added a paragraph and a read more and that's it So if we look at that in the Gutenberg editor Basically what you see and of course this is a basic site with a 2017 Theme and no further. Well thingies around it. So It basically is what you see is what you get Well, except for the read more dashed line, but well, that's basically it and This is the editor. It has a post title Right there. It has a paragraph and as soon as you select the paragraph. We have a slimmed down tiny mce editor right there and if you select a block you can see all kinds of Attributes for that block. So every block in Gutenberg has attributes You can change the font size and you immediately Immediately see that it changes in the block itself and we can put it at that size We can make a drop cap on it. We can change the background color to well French fry color Hmm not very good for French fries this color, but you get it We can change the text color. So it's not well, it's still a bit accessible I hope and we can align the text to the left or to the center and We can add additional CSS classes, which might be handy if you have a theme that tries to Style everything in a certain way. You can add a CSS class here You can add the CSS class to your style sheet and then voila. We're done Of course everything you see here like the attributes and stuff are all Filterable. I don't are there any people who don't know what filtering means in WordPress Okay, it's just a few I'll explain it a bit all the code in WordPress or most of it Enables developers to filter it. So at this moment the the the block attributes have well background color and text color And with the use of a filter we can say I don't want to show the background color And I don't want to show the text color So if we can change the core functionality with a own plug-in or a few lines of code code in your functions PHP Basically if there are any questions while I'm doing this please raise your hand or just ask the question because I like to answer a lot of questions about this stuff and I'm going to take a look at some other blocks that are available if you have your page in in Gutenberg You have a special box on the On the bottom in which you can add stuff. So here you have the add block button And you can add what recent blocks. These are the most used blocks that you have done. Well, I haven't been using it this long. So there's not a representable number of blocks in there But when you look at this This is basically a list of all the blocks that are in here Not surprisingly subhead a quote a paragraph a video Custom HTML a pull quote a verse which is basically a pre-formatted piece of text We can add buttons and all the people are gonna like that one because I know there's a lot of plugins out there that help You generate buttons for your content In which you have to create a shortcode And possibly other other stuff in that shortcode and now you can just well, let's just add it We can add a button Sorry There you can see that it's sometimes still a bit buggy You can basically say click me right here We can change the background color to green and the font to black I said black. Thank you and And the glitches you see here that well sometimes things just disappear and that's basically the signs of things that are not yet finished and All these things are hopefully registered at issues and in GitHub and when you play with Gutenberg And you see these kinds of kinds of things happening please report it and tell it to the authors and the team of Gutenberg So you can have them fix it or have other people fix it who contribute to the To Gutenberg. So if we now update this Post in which we have changed a few basic things you can see that in the front end It looks exactly except except for the dashed line of the read me read more Line it looks exactly as I had it in the Gutenberg editor and this is basically the The first and the only reason that Gutenberg is going to be a great product people like to make content Formatted in the way that they want it in the back end and then show it on the front end like they have thought of it Go ahead boss Because Yes, exactly well, that's what I said with the filtering all all the attributes all the attributes of all the blocks that are in there Are or will be filterable so that we as a developers We can switch that off for customers who like to play with colors like I'm doing right now Which is not going to help with accessibility and readability and those kinds of stuff Two or three options or is that not it? Yeah, you can you can extend a block with this with its own attributes You can add new attributes remove them change them For color except for example, if you've built a theme for a client, which is well like 2017 white and black text you can define your own color set that you want the customer to be to choose from and You know you can basically Well put a fence around the option that a client can use Okay, thank you for your question Because otherwise you just the time you spend on kind of hacking into the ones that are already there You might as well I'll repeat that for also for the video what Tarkas was saying is that the attributes that are in currently blocks they disable them for Making it impossible for customers to use it and to well abuse it basically Abuse it. That's what you say. Okay. Thanks for that talk Okay, so this is this is what you can do with with Gutenberg in the basics Of course, you can add a lot of other things and the thing that they're working on right now because and I'm going to Walk around a bit because I don't like sitting and talking Gutenberg right now is an editor that Basically if you have a site structure with a header with a navigation with a content area possibly a sidebar and a footer Gutenberg positions itself in the post content. So everything around your post content is not Affected by anything you do in Gutenberg. So if you want to see Gutenberg as a page builder who uses page builders Okay, that's a lot of people and I sound surprised and that's correct, but because I am I'm Gutenberg at this point is not a page builder and It probably will be one in the far or near future. I don't know one of the signs that It's probably gonna be one is because of a block. They have introduced Which is called and I have to show it right here, which is this block It's a columns block. It's experimental basically saying it doesn't work because I tried it and You get two blocks and I'm of course I'm here and I'm showing it so I can show it to you. So I'm gonna add this Well to columns block. So what you see here is you get Two columns. Okay, so that works and if you now want to see Where is the advanced so here's the advanced settings I'm now trying to look at the advanced settings Which I did yesterday evening before I went to sleep to just walk around this and test it again and I had an attributes How do you say an attribute part here in which I could say I want two three four five columns and well at this moment moment, of course, that's not working and basically you should be able to add other blocks to these columns and Which is kind of called nested blocks so you can have a block within a block inception and If that happens and if that works Gutenberg can be extended about above and beyond the post content and it can really be a Piece of well it can be a tool to be a page builder and Whether you want it or not. Well, you can use it if it's there another thing that enables Gutenberg as being a page builder in the far future is that you can save blocks for reuse You can convert a Button like this click me button for instance, you have a lot of pages where you want to use the same button And you don't want to create that button every time you can make it a reusable block. You can give it a title This is the click me. Oh, sorry the click me Block you can save it and then later on You can use it in another block You know or in another page. I'm sorry So this basically enables you to make a structure for your site Make reusable blocks for your header for your footer Possibly for your sidebar in which you add another block with some kind of widgets And this basically enables Gutenberg to be a page builder. This is for a future talk I'm not sure whether this is going to happen, but the functions that you see landing in Gutenberg right now Might indicate that it's gonna go that way Another issue for Gutenberg was the How do you say the compatibility with meta boxes who doesn't know what a meta box is Okay, I'm gonna explain it because there's one guy in here. He doesn't know it I'm not gonna look at him. He's right there And A meta box is a box which can have one or more input fields Which you add to a post? A Good example is the Yoast meta box. It adds a lot of options to a post or a page Which you can set for that post Which is basically all in a meta box in Gutenberg in one of the first releases There were no meta boxes. So all developers were like, well, I don't have an animated gif about that, but they were in panic Because there's no meta box and you can imagine Well to get Yoast as an example again, if that meta box is not gonna land in Gutenberg Well, basically the Yoast plugin is unusable because you can't add it In further releases of Gutenberg meta boxes have been added Plug-in developers well became a bit more happy But then they saw that they needed to do a lot of work to get their meta boxes working in Gutenberg Well, basically a lot of plugin developers are working on that to in to integrate their meta boxes in Gutenberg I know advanced custom fields has it and I know that because basically on the bottom here are custom fields Which I have added In a different tab right here For the people who don't know advanced custom fields this enables you to create own fields which you can add to posts or pages and reuse later on in your post content and Well, I've added some extra information, which is basically a text field and I've added the user group for that so going back to this we see this Sorry, we see this extra information meta box in which I added a picture of sir Gutenberg and I've added a thingy that I was building to make this post accessible for a certain user So I've done a little bit of programming with that added a box in advanced custom fields And you can see that this meta box is well showing right beneath Gutenberg So Yoast is working on it advanced custom fields is working on it and basically has something that really works and I know gravity forms so a lot of hands going up in the air in previous presentation Of people who've been using gravity forms so that's a good thing that you can add gravity forms and use it with with Gutenberg and Immediately to immediately see your form in the content editor because the people that are using gravity forms know that if you add a form Which has a nice button at form you can select the form But in the end you get a short code in your content and well, you don't really know what the form looks like So this is a good thing for Gutenberg That a lot of developers are picking this up and making Gutenberg accessible for all these plugins and making it a better product in the end Are there any questions about How Gutenberg's looks right now and what you can do with it. Are there any concerns? Okay, go ahead Nothing No No, you can you can select that the question was if you activate Gutenberg on your site and What is going to happen with all your other posts? Well, basically the answer is nothing because When you add a new post Let me see how I do that. Yes, I'm gonna leave this page. Sorry for my edits When you activated Gutenberg This thing comes up when you add a new post So you can select whether you want a new Classic editor post or create a Gutenberg post and all your existing posts will just display as they would Then I see a question. Yes. Okay, great Yes Will I'm not sure if that's gonna be Happening I think it will because if you totally flip the switch on one time when it will be released It's scheduled to be released with WordPress 5.0 Which were well, we are approaching that release But I guess there are not going to flip the switch one time right now You can only do Gutenberg posts People have to adapt have to try and work with it because not a lot of people are working with it yet It Gutenberg plug-in has about 6,000 installs. So there's not a lot of people using it That's not 30% of the internet. So there's a lot of people who need to use it and Test it and give feedback about Yeah, that depends the well the backwards compatibility thing is something that plugins need to Plug-in developers need to check out themselves and they need to work with Gutenberg and see how their plug-in interacts with Gutenberg And fix where necessary Thank you other questions Sure Okay, okay, I'll try to translate this What she's saying is that when a Well colleagues of her are trying to edit content when Gutenberg is activated that it basically messes up content of Classic edited posts and I'm not aware of that. I don't know You mean HTML code, which is not valid. Okay Yeah Yeah, yeah, okay, basically, that's the same thing that happens if you do it in a classic editor if you start editing HTML there Well unexpected things are about to happen So that's maybe something that Gutenberg will pick up But if you really have an issue with it, you should go to the github repository and write this case to the developers And maybe they can do something about it. So thanks for this Okay, I see a hand there in the in the back Disable Yeah, what was the name of that plug-in Just classic editor. Okay. There's a thanks for that Rion. There's a plug-in available With a lot of developments within WordPress Which make changes to the way people work with WordPress There's always people who don't like the changes or need more time to adapt to the changes And that's the freedom of WordPress that we have we can create a plug-in that disables the change And same thing is for Gutenberg There's a Gutenberg coming up if you don't like it or you need more time to adapt to it or adapt your own software to it There's a plug-in which is called classic editor which basically Disables Gutenberg as soon as it arrives in WordPress 5.0. So if you need time as a as an agency to Give workshops to your clients of how to use Gutenberg And want to postpone the time that you flip the switch to Gutenberg Install that plug-in and give your clients more time to learn how to work with it. Thanks. Yeah boss You told me yesterday for two weeks full time to make the presentation. So thank you very much Thank you. Thank you question for you The project Gutenberg sounds really separated from WordPress Which makes it possible that Gutenberg will work on Drupal and Magento in a few years or maybe faster What's your vision? Will it be bigger than WordPress? My vision. Okay. This is being recorded. So I have to be careful No, I'm well the question basically is What my vision is on how Gutenberg will evolve will it will it? I'll be only a WordPress thingy or will it be able to go well Abroad and well, maybe go do other CMSs or five years and in five years that's In five years. I think Gutenberg is a grown-up. Yeah, sure go down. I don't need you anymore I'm sorry. I have a few slides left, but I'm not gonna do this again. I've got five minutes left also, but the Gutenberg will be a a grown-up product and there's a lot of websites who Enable clients to build their own websites who are using editors which look a bit like Gutenberg and WordPress cannot stay behind if WordPress doesn't do anything about the editing experience I think WordPress is going to decline looking at market share. So Gutenberg is going to be a great way for WordPress to Keep or even grow the the market share of CMSs and it will be a total new Editing experience for all of us. So I really urge everybody to well make some time for it and use Gutenberg Tested report and those kind of things. So thank you, boss I had a few slides left on here and I'm not going to to try and launch it again right here One of the things is that I'm wearing this shirt today, which has the nice Gutenberg logo on it And a wapoo on the back and if you like Gutenberg and you want to show people that you like it You can buy this shirt. Not in my own shop. No in the wordpress.org merchandise shop, which is mursantile Wordpress.org it's in my presentation, which I will share with all of you through Twitter and through the the WordCamp website and Well, you can buy it there basically To to continue on my vision of Gutenberg It's going to be the future don't Well stand back and wait for it to go away because it will not Gutenberg is here to stay. It's a little baby right now It's trying to grow up and we all need to help it grow up and we all need to help it learn stuff how we use Wordpress so I'm going to call again use it test it report create issues and make this product better for WordPress in the near future That's going to be my last Sentence of my presentation We have room for questions Yeah, great, then we're going to do that questions, please Yes, you can you can all the blocks that are created you can convert them to HTML blocks And you can well edit the HTML if you want it and if you adhere to all the HTML standards You can also revert that back to the basic block So if you have an image block in which you want to add some stuff in the HTML You can also refer it back to an image block. So, yeah Okay No, basically if the question if is is Gutenberg still based on short codes The simple and short answer to that is no What Gutenberg currently does it it adds? Meta information about your blocks as HTML comment, which also makes it possible to create things in Gutenberg and Revert if you don't want to use Gutenberg again You will see your content in normal text or normal images. Yeah in raw text Exactly in in the classic editor mode Yes in that text mode, correct. Yeah. Yeah, so there's no more short codes involved So we don't want to we don't want to bother users again with short codes other question That's a good addition This Yeah, that's right. Thank you Torsten for the addition. Yeah Paul go ahead How do we prepare our customers for Gutenberg? That's a difficult one. You can start right now. The question was how do you prepare your customers for working with Gutenberg? As I was saying I've been working with it a few weeks and I constantly see changes So you can start a workshop. You can build a workshop for your customers You can give the workshop But basically in the end it may change again The basic functionality will remain the same, but there are a lot of stuff tiny little thingies Which we all hate in WordPress because if a tiny little thing changes it might break something So it's really difficult. You have to inform your customers. Maybe that it it's coming. It's there There are changes coming and if you want to know more about it well schedule a meeting or talk with a client and inform them that's basically what I am doing and Customers like it. They see it some customers hate it. They don't want to use it. They're well running away from it But it's coming and you have to inform your customers that it is coming and you have to Or have to it would be good to have your customers work with it and test it and see what it's going to be like to work with We're pressing well one two years Okay, other question Inside I'm not sure the question is can you use short codes which are available by plugins that you've currently installed if you can use it In the current blocks I'm not sure. I haven't tested that out. I know is there somebody here that tested it to use short codes in Text blocks in Gutenberg. No, nobody. I have to check that out. There's something that I would like to check out Initially the goal of course is to totally eliminate eliminate short codes Short codes should be blocks if you go the Gutenberg way So we'll have to test it. Maybe it's something for you to install Gutenberg try it and if it doesn't work report it Excellent. Thank you One final question. Sorry Yeah, I've seen or saw something read something about it, but I'm not sure so we'll have to check it out. Well, thanks Yeah, okay one final question See one question there. Yes Nesting you mean the nesting of blocks Well, the development team has been has started with it They've published the block You can use it which doesn't work yet, but initially I think it's going to happen and Being able to nest blocks and create columns and stuff will totally put Gutenberg in a next level of usage And it will happen. Yeah, I'm sure of what I'm sure of that. Yeah Yeah, that's going to happen But basically what what you see right now is you can add a block which provides two columns, but you can also have a block which provides Well text combined with an image in a video. I don't know you can put that in one block within a column basically and That enables to do a lot of magic with Gutenberg, which you can't do right now without a page bill Okay, thank you very much if you have further questions try and look up the guy with this yellow shirt because there's only one of me and I want to thank you for your For your attention and wish you all a good work camp and work