 Where can Miami? How are you doing? Hey, is everybody exhausted? If you're not, they're not doing their job. You should be dead exhausted by now. Yeah. Nice. Nice. It's good to hear. Glad you're all here. Glad I'm here. We're going to talk about Gutenberg and Beaver. I'm just kidding, not Beaver Builder. Just Gutenberg. So this is all about Gutenberg. My name is Matt Cromwell. I'm head of support at GiveWP.com. I've been fascinated with this Gutenberg project. I think it's a fascinating project. It's probably the biggest thing to happen to WordPress in, I don't know, 2,000 years maybe. It's a big deal. And that comes with a lot of anxiety for some people. It comes with a lot of excitement for some people. It comes with a whole lot of what for some people? You might be all of those things or more. And what I'm going to try to do is basically just give the overview of what it is, why you should care at all, why it's going to break your sites, not break your sites, I mean, why you should be building content with it today, things like that. Are we all on board? All right. So first off, I got to impress you. So here we go. That was done by Kevin Hoffman. Kevin, where's your hand? Somebody buy him a beer later. He's a good guy. I think it's great. I think it's exciting. There's a lot of stuff that's up there. I'm not going to be able to cover all of it. If you want to see it again, it's at the Gutenberg table. Did you know there's a Gutenberg table? Go to the sponsor area. And if you're looking at the building, then it's on your far left. And that video is looping over there. You can talk to the people. Yeah, if you're looking at the sponsor building over there, they're towards the left are the right. They're toward the right very clearly. And one of the developers of Gutenberg is there at the table. Happiness engineer who's going to be supporting Gutenberg is there at the table. You get to speak with the horse's mouth, so to say. So let's do a real quick overview. What, where, when, and why? Gutenberg gets a new block-based editor currently available as a plug-in. It's a plug-in right now. This is something WordPress has been doing for a while experimenting with plugins as features. They build out the new feature of WordPress as a plug-in first until it's stable enough and robust enough, and then they merge it into WordPress core. I make it sound easy. It's grueling, but it works. Where, well, oops, I did this wrong way around. Where should be, it is currently a plug-in. Where you can go to your ad plugins and just do search for Gutenberg and you can add it there and it's right there. It'll add a menu item in your very bottom left side that has a demo similar to the one you saw there. And then you can actually, with all of your pages and posts currently, you can either edit them in Gutenberg mode or in classic mode. And you can switch back and forth and compare. It's really useful. When this calendar year, this calendar year, that's all I'm going to say. There has been some rumor that it could be as early as April. I'm going to just say this calendar year. That's where my bet is. And why? That's a really good question. Why? Well, generally it's a more modern and unified content writing experience for all WordPress users. So how many of you use a page builder right now? Yeah, a lot, but it's about maybe half, a little bit less than half of the people here. In general, if you count all the page builders and all of their users, maybe that's like hundreds of thousands of users. Do you know how many users of WordPress there are? Like tens of millions. And none of them have page builders, right? So being able to have a more robust page building content writing experience for all WordPress users. If you know the tagline of WordPress, it's democratizing publishing, right? They want to make publishing available for everyone. And this goes right along in that vein. Because nowadays when you write content, we don't really write it as a Word doc anymore. We don't really write content just as a simple Word doc. We write content that is media rich, that is feature rich, that has a lot of things going on because that's what people are interested in. People want to be entertained when they read your stuff. And it's hard to do that in what is essentially like a Word document type editor. Being able to do that in a robust fashion in a way that is also unified is what Gutenberg is trying to seek out to do. And what I mean by unified is how many of you use short codes to put stuff in your content right now? How many of you love short codes? All the hands go down. No, he's like, what? I like short codes. Come on. No, I know what you mean. Short codes give you power. They do. But it's like you never know what you're going to get. It's like, well, I put the short code there, and then you go and look at your page and, well, there's nothing there. That never happens. I know. Or you don't know what to put in the short code. You have to go somewhere else and read some documentation, come back, type it up. You typed it wrong. It doesn't work. It breaks the page. Short codes in general can be a really not fun user experience. So in the end instead of, and every single plugin does short codes differently, let's not even get into plugins. I mean, I'm a plugin author, but like, geez, plugin authors, get it together. They're all different, all over the place. So Gutenberg gives plugin authors and theme authors the ability to unify the experience of how you put stuff into the content. And the reason why that's important is so that you are not confused. When you add a new plugin and you want to be able to add it into your content, you're going to know how to do that already without the plugin author having to tell you anything. You're going to be like, well, I'm going to add a block now. Oh, you're a gallery plugin? Well, now I'm going to add a gallery block that's named Foo Gallery, maybe. This named Enviro Gallery, whatever. I'm going to look for the Foo Gallery block to insert it. You already know exactly how to use it because you know how to use Gutenberg. That's the idea. That's what they're trying to unify that experience, try to make it more easy for you to make more dramatic content types, more dramatic blog post types, and for it to not take you too much thought. That's the goal. Whether they're doing it is another question, but I'm pretty optimistic overall. Also, I am going to definitely try to make sure that we have time at the end for questions. So I encourage you to write them down. We're going to do that at the very end because I love to answer questions. Or I love to say, I don't know, but it's a good time anyway. So first big question, what is going to happen to my existing content? So WordPress, Gutenberg is coming into WordPress 5.0, and you go, it's 5.0 day, it's update day. You go and you update 5.0, and you've got all these blog posts that you're proud of, and you're like, are they all gone? Or do they all look weird now? Essentially, here's what's supposed to happen. Here's before. This is a really simple blog post. Here's before Gutenberg right there. That's what it looks like. And now I update it, and here's after. Did you catch that? I'll do it again. Here's before, after. Before, after, before, after. There we go. Ta-da, Gutenberg. So essentially, the plan is, the goal is, that nothing happens to your existing content. That's on purpose. That's on purpose. Like I said, you can install the plugin today, and you can switch between Classic Editor and Gutenberg Editor, right? All your posts were built in Classic Editor. And guess what? They're still there. Nothing changed about the way that they were created, and all of that content was pushed into Gutenberg without changing anything. That's the plan. I'm going to keep saying that. But the big change is what you're going to notice on the admin side, on the post edit screen. So what's happening to my existing content on the back end? Well, here's that same post. Here it is. That looks like WordPress, right? Everybody that looks familiar. You install Gutenberg, and you go into that post. There it is. That's Gutenberg right there with that same exact post. Untouched. No changes. Have any of you ever played with distraction-free writing in WordPress? How many of you did not know there was such a thing? Exactly. There is such a thing. It's just really, really hidden. But it's essentially like when you write a post for Medium, on Medium, it looks like you're typing your post right onto a white page. And that's a really nice writing experience. We kind of like that. We want it to look essentially like what it's going to look like. And currently in WordPress with tiny MCE, the current editor, you never know what it's going to look like. And you're typing into a box, and it's always too short, and you feel a little bit cramped. When you go to this page now with Gutenberg activated, it's going to look like distraction-free writing. It's going to be like, here is your content. Just write. Be a writer. Just write. Put the cursor in there and get going. The magic happens when if you look up in the very top right there, you can see the little gear icon there. A lot of the settings for your document and for the individual blocks that are going to be created actually are going to be in that sidebar. So by default, you're not going to see hardly anything, and you'll be able to just start writing like anything else. And if you want to change things and make improvements to that content in any way, then that sidebar is available and you'll be able to see those things there. We're going to walk through a lot of that in just a little bit. I have a live demo which, as speakers say, don't live demo. We're going to do it because I'm feeling risky. I don't know. We'll see. So what should I do about creating new content? Well, that's what we're going to talk about. There we go. It's happening. Excellent. I'm getting my text messages. Sorry about that. All right. So as I was saying, this is this one right here, I'm going to zoom in. Here's our, I have that post I was showing you earlier. Let's look at it. Pretty simple post, just some paragraphs and headings, a simple gallery. That video doesn't exist. That's awesome. Live demo. There's reasons why they don't do it. Let's look at it. This is that exact post. We're going to look at it now. Well, you've seen the classic editor. Let's click on it and look at it with Gutenberg. So there it is. Just like I said, it's just a plain post. It looks pretty much like it does on the front end. This is a little bit different here. There's some settings missing. That video still doesn't exist, which is awesome. But there we go. That's where it is. What happens is Gutenberg takes all of the content that you have for that post and it dumps it all into one block, just one block. They're basically saying the safest way to make sure that nothing changes is we're just going to have a classic block. They call it the classic block. We're going to put all of that content into a classic block for you. Now you can do whatever you want with it. The whole big benefit of Gutenberg is being able to use what we're calling little blocks. Be able to modularize the content so we can move it around and do new things with it. But right now, what you have is one block. That's not fun. Let's do something about that. Let's go into this existing thing. Right here is some more options. We're going to click on that. The first thing it says is convert to blocks. We can convert our existing content to be a whole bunch of blocks. Let's see if it works. Ta-da! It's hard to tell the difference. That's a good thing. You don't want to necessarily be like, oh, now it looks like Legos. That's not what I wanted. When I hover over here, you can see the little handles, the little controls show up on the left hand side. That's because this is a different block. This is a different block. This is a different block. What if I'm like, oh, there we go. I want that one up there. Now we have really simple typing controls in this block here. Click into this one and that shows up there as well. Here's our gallery. This is where you can see that this theme supports multiple layouts for this gallery. Right now, it's in the content like that. We're going to break it out a little bit. Or we're going to put it full width. Or we can also show the sidebar. Here in the block, we have additional options. Right now, it's two columns. I only have two images here. I can't do three columns. But I can definitely make it one column. And you see those changes happen live on the screen. That's another big benefit. Like we keep saying, we don't like to be able to, we don't like to change things in the content and not know what it's going to look like. Okay, change preview, not right. Change preview, still not right. Come on. Change preview. Oh, there it is. That's the not fun WordPress experience that they want to get rid of. So change instant preview. Change. I see the preview. It's so great. So it's one column right there. We can bring it down as well into that one column area. We can float it. Oh, floating. Fun. And we can add more images. Here's some headings. Here's that video that doesn't exist. This one is that converted into a paragraph. But actually, we would probably want to do it as an embed instead. So do you see what I'm doing right there? This is called slash commands. Slash commands are a way for you to be able to find the block that you want without having to click all over in the keyboard. Some people might say that that's like a power user type of thing. I don't think so. I think that slash commands are really useful for everyone. Keep your fingers on the keyboard and still be able to just keep on typing. I mean, that's the idea, right? You're writing an article. You're not like creating a whole website. You're just trying to write an article. Let's just do slash Vimeo. And your Vimeo block shows up. You choose it and you're able to just paste the Vimeo URL right there in the embeds. Let's try to find an actual Vimeo video. This can be dangerous. Live demo. I volunteer for an organization in San Diego called Refugee Tutoring. They do some really great work. They have a video. Oh, good. Slack is working. Audio is working. We'll grab this one. We'll paste it in there. Embed. Embedded right there. And it even plays right there. Supposedly. Actually, you know what? I had this trouble earlier. Right now, I think there's a bug with this. Say it again? Yeah, you have to get right above these controls. Those controls shouldn't be there. There it is. But I'm probably never going to get it to stop now. Oh, I did it. Awesome. And let's remove it. Another one I really like right now is columns. So I'm going to add a block. There's a control up here to add blocks. However you like. I'm going to do text columns. I'm going to grab all of this stuff. Pull it out. Put it in there. Pull it out. Put it in there. Nice. And look, even here, we got break it out of the content area a little bit or even go full width with it. So your columns can go outside of the area as well. Again, slash commands. Let me show you again heading. Let's do a heading. And then I just hit enter and now I'm typing a new paragraph. So essentially you can just type an article just like you always do. Keep your fingers on the keyboard and just start writing. Do the heading. Do the paragraph. When you hit enter, it creates a new block that's a new paragraph. At the same time, you can convert that block to any other, not any other, to some other types of blocks and go from there. Lots of power with the galleries and lots of power with potential for plugins as well. Okay. I barely made it through that live video, I have to say. A couple other questions. What should I know about theme support? So here's a kicker. You saw all those nice layouts. How it goes outside of the content area, how it goes full width. Your theme's got to be able to handle that. That's an important one. Gutenberg styles out of, there are some Gutenberg styles out of the box. So Gutenberg is going to put some simple basic layout on the front end of your site in order for some of those things to work well. Like there's a drop cap feature where you can add a drop cap to your paragraph. It's going to work on that. It's going to do a little bit with the galleries and those columns with the galleries. But if your theme doesn't declare Gutenberg support, then it's not going to have like the full width option, things like that. So that's important to keep in mind. So when Gutenberg is about to be released, well when WordPress 5.0, at that time it won't be Gutenberg, it will just be WordPress. When WordPress 5.0 is released, watch for updates to your theme because likely they're going to be pushing out some updates that make them do awesome stuff with Gutenberg. That's the plan. That's what they should be doing. If you don't see updates from your theme, then find them, hunt them down and tell them to update their theme because you're going to want that. You're going to want your theme to look great with Gutenberg. What should I know? Well, will I be able to use my favorite plugins? That's also a really good question. As a plugin author, I'm kind of like, maybe. I mean, I don't know what your favorite plugins are. I'd like you to be able to use your favorite plugins, but it's complicated. One great thing about Gutenberg is it's going to continue to support short codes. So your favorite plugin uses short codes. You can paste that short code in Gutenberg and it's going to continue to work. That's all going to be totally fine. But they should be moving into blocks. They should be doing blocks instead of short codes eventually. Some plugins do a lot of crazy things with meta content, stuff that's not actually in the content. Like how many people use Yoast SEO? Yeah, like a lot, right? Fortunately, Yoast and team are contributing to Gutenberg and they're working real hard to make sure that they are going to be able to be totally in there really, really well. And plugin authors that are really in the know are doing that. They're paying attention. Like, for example, we have our own give block already all set up, ready to go. We want to make sure people can have a give block. There are already a lot of momentum for plugins supporting Gutenberg like us, like Yoast, Gravity Forms, Caldera Forms. They are all doing things already and short codes will continue to work. There's also already plugins on the repo that are blocks for Gutenberg. They're already there. You can install Gutenberg and then you can go looking for new plugins that are Gutenberg blocks already. So that's what I got. I think there are three, how many minutes? I got three minutes for questions. Man. Black shirt provision. The question is, are there any provisions for viewing dynamic content through Gutenberg? Yes. So for example, our give form, one thing we do is basically you add the give form block and the first thing it's going to do is ask you which form do you want to actually insert here. You select that form and then it actually populates the actual form into the content. That's all done with Gutenberg logic into it. And then there's a sidebar that allows you to, this was actually in the demo video, but it was really fast. There's a sidebar that lets you say, well, I want the give form, but I don't want the content of the give form. Turn it off. You'll see it turn off automatically. Oh, I don't want the title of the give form. Turn it off. You'll see it turn off automatically. Yes, for sure. Like plugins that are, that have logic built into them that are like if the user is logged in and, you know, has a name and an email, reflect that name and email in this space. That will absolutely be able to do that. That is a plugin question though. Up there on the side also, oh wait. Okay. Just to clarify, come for me, stay for Matt Mullenweg. He's going to be here. He's going to be in this room and it's going to be great. I'm going to be here. I'm going to sit right on the floor if that's okay. Sorry, one more time. The Gutenberg, the question was if you already have a visual builder that you're using, what's going to happen? The Gutenberg team has been doing really, really excellent job and reaching out to all of those really popular page builders to work with them to make sure that there are ways that you can continue using your page builder no problem. There's also, I haven't seen the status of this, but there's also some issues involved in potentially swapping live on, like you might go and see that you're on your Elementor or Beaver Builder or whatnot and you could swap instead to Gutenberg instead. So they are working with those page builders. You'll kind of continue to be able to do what you want to do with those page builders and they will be able to live side by side no problem. He edits WordPress from his cell phone. God bless him. But yes. I seriously, I've always been like, I wonder who does that? Who does that? You do that. Great. Awesome. I mean, WordPress allows you to do that. It's absolutely responsive. Gutenberg's absolutely responsive. No worries. No worries there. But like I said, don't trust me. Test it. Like, install the plugin and put it on your phone and go at it. I'm not going to do it, but you can. Excellent question. I forgot to mention that. Yes. So the question is, can you switch the whole thing to HTML mode, edit it and go back to visual and keep going? Yes. They do a really good job with that. I love it. At the very beginning, I had some links. I'm sure you all wrote those links down, right? One of them is a resource page on our websites. It's just givewp.com slash WCMIA18. And one of the things there is a template that you can download that is the layout of that demo that you saw the video demo. It's the layout of that demo. And you can put that, you can switch over to code mode, paste it in, switch it to visual, and then you have that layout there. I really like that feature a lot. There's some weird things about if I was trying to load the images off-site so that you don't have to download them. When you do that, it notices that you changed the block and then it says, oh, hey, this block was changed. I'm going to sort out some issues about that because I want people to be able to have templates. I don't know if I'll get it through, but like I think to be able to cut and paste templates and be able to just run is a good idea. So right now it basically works. Red shirt. Last question. Red shirt. Maroon shirt. Yes. Are we even going to need themes at all? Yes. Matt actually clarified this for me really, really well. There's three phases to Gutenberg. And basically this is phase one, is that you get Gutenberg. That's phase one as a page and post editor. Phase two is that Gutenberg is going to be taking over more or less or integrated with the customizer. Phase three will be a Gutenberg theme specifically. And I actually think just I'm a plug-in author, as much as I'm excited about plugins being able to do all kinds of cool things with Gutenberg, I actually think there's a ton of innovation that can happen with themes with Gutenberg. So themes are going to exist for forever with Gutenberg. They're not going to go away at all. But the Gutenberg theme, I think in particular you should watch for probably next year sometime. That is going to really highlight the power that you can do with themes and Gutenberg together. WordPress actually has a Gutenberg starter theme. It's on GitHub. You can go github.com slash wordpress slash Gutenberg starter theme. I would start there. That's a good place to start. That's what I was using in my demos. So that's the last question. Thank you all so much.