 So yeah, so I've been working with Gutenberg. I've built sites in Gutenberg. I use Gutenberg And I know there's been you know In the community when it first came out, you know, a lot of people were kind of questioning, you know Is this the direction we need to go? But ultimately I think it's a wonderful tool, but I think it's important to understand kind of its role in WordPress space and kind of what the what the options are as well as You know how you should best approach your Using Gutenberg. So how many people right now use Gutenberg? And how many people have opted not to use Gutenberg for right now, okay? So it's kind of interesting. So, you know, I was getting ready to talk and I've done several Gutenberg talks But I kind of Now that Gutenberg has been out for a while and you know, I know that there's some people I've been holding off So I've been trying to figure out, you know, like should I introduce? You know kind of the way I have before or should I Emphasize some other things. So we'll we'll see how it goes here But for those that do want to kind of fall along with the slides Qr code is kind of small and distant maybe but You can scan that on your phone and I'll pull up the slides. I will post these on On Twitter or something after so But yeah, so we're gonna be talking about the the block editor for those that may not Turn this thing on let's try that again All right. Well, it's just gonna Stay on this slide apparently Let's try this again There we are. All right. So for those that may not know what Gutenberg is Essentially, it's the new editing experience in WordPress that came out in version 5.0 So it's been out for a while now and Ultimately, I think for most people You know Gutenberg is either good or bad, right? Some people like it. Some people don't think it's so great but really I think what it boils down to is You know, most people have been using WordPress for a long time Kind of gotten used to the way things are and a lot of the new people that come into WordPress They're like, oh this thing is great so I Think it's kind of like what was it Henry Ford said If you think you can you're right if you think you can't you're right So if you're willing to learn it and give it a try I think it's a good thing You know if you do happen to run into bugs, you know, that's one of the things I do is I try to Contribute where I can and help with Gutenberg and other things in WordPress core And there's a great team of people that works on Gutenberg So if you do run into issues don't don't be quiet about it You know Let us know there's some support forums And there's a link here at the end to if you do run into issues where you can go and report them And that way we can fix it and make it better So the goal with Gutenberg is essentially to make a new page in post-building experience So I'll make writing posts effortless So Ultimately, this is kind of the classic editor experience that we've had up until recently And so it's it's it's limited right so you kind of have this big Box that you can type into And you can put images in and if you paste a URL for a video or something It'll pop up and turn into an embedded video. So it's got some cool features in there But ultimately there's only so much you can do so there's one of the kind of primary goals with Gutenberg was to Not have to require so many plugins to be installed to get things done in WordPress. So Most of the time we had things called short codes that would add functionality and different things but some of the most common reasons that people would install plugins and things was to You know, I want to be able to have buttons on my website and easily put those in You know, I want to have a table display of something on my website. I want to be able to do XYZ And with just the standard editor. It's just not really an easy thing to do So then now we have Gutenberg and it looks Like it does less because it looks like there's less in the screen But ultimately it's kind of a it's got a lot you can do. So this is the content area and Over to the right there. We have the document panel, which is not always visible. Sometimes it's hidden So there's a little gear icon on the top right. You can click that'll pop that little document panel out and that I'm sorry, the yeah, and then a little three dots. That's your global menu. So there's a few options in there that you can use to turn in Do things with Gutenberg. So one of the cool ones here is the full screen mode So when you're editing a page in WordPress, one of the things That Gutenberg does well is present you the same view in the admin as you get on the front end But the limitation there is that you're kind of restricted width Because of the sidebar and WordPress and all that full screen mode makes that go away And you can get a better idea as you're editing what it's really going to look like on the front end you know width-wise and everything so and So we have this thing called the inserter so when you hover over a new block or in the top left corner there We have a little plus icon Ultimately what that's going to do is that's going to allow you to add a new block and this little guy here called the inserter will pop up And so that is how you will insert blocks So you have all kinds of different blocks your most commonly used ones will show up there Off to the right. You'll see some little grayed out icons. Those are your top three most recently used or commonly used blocks and then You know these these items here will expand and collapse so you can see all the different types of blocks that you have Some plug-ins will add their own section. So if you have for example, there's a great plug-in Rich Tabor is here somewhere wrote Called co blocks and so it has its own section full of blocks awesome things you can use But you can also type the slash And it will automatically pull up a list as well. So if you don't like to Take your hands off the keyboard you can just type slash start typing the name of a block hit You know enter when you're ready to accept that particular block and it will put it in there And then you could start typing content into that block. So it's a great little way kind of a shortcut to get content in quicker So some of the design principles behind Gutenberg is that again? You should see the same thing in the admin as you see on the front end And when you're not actually editing a block it should look the same way in the admin as it does on the front end So when you have not selected a block to do anything with it It should look exactly the way it will on the front end. And so this is an unselected block After you click on it, you'll get some more UI and things around there where you can actually Manipulate and work with that particular block. And so you'll see some extra things kind of pop up there at the top and the bottom and We'll talk a little bit about what those are the first thing that happens though So if you look over to the right, we have that little document panel We pointed out at the beginning when you click on it that document panel switches over and becomes a Block settings panel so it switches over to block mode And what that is those are all your options for that particular block that Don't really make sense to put over in the in the content area So if you wanted to for example, add some alt text That's not something you see when you're working with an image So it makes sense to kind of have that off to the side So every block will have a block settings panel some things obviously have more than others that you can edit And then we have this block toolbar at the top So any block that you click on is going to have a toolbar with some actions that you can take one of the coolest ones That can often be overlooked is this block transformation icon And so when you click on that if you whatever type of block you may have in this case that we have an image You click on that and it'll pop open your options for converting that block to some other thing So in this case, you know, we can convert this image to a gallery to a cover image or even just a file And so they'll have different ways that we can render that image Or add to it by converting it So then the three dots is always our menu essentially. So we have the global menu. We saw earlier This is the block menu. So each block has one of these So if you're trying to add something before or after a particular block, you can always use this menu to do that If you want to edit this specific block as HTML, you can do that Just forewarning certain blocks aren't really meant to be edited that way and the image block is probably one of those so Take that with a grain of salt So you can also remove a block easily that way So when you do have plug-ins, so plug-ins have a slightly different way in Gutenberg of working And again, some of the plug-in ecosystem is still trying to catch up to Gutenberg and catch up with kind of all the features that are available but Plug-ins will have this kind of icon in the top right and so this is an example of the Yoast plug-in Which has stuff at the bottom But I think that's more out of convenience for people that don't know you can also click this button up here so that Button up there you click that and essentially opens up a panel that is just for that particular plug-in and so all the options And things that you can do with that particular plug-in are available there. So in this case, you know, it's going to scan your content for potential SEO improvements and you'll be able to see that right there now obviously if you were to use the bottom panel in the traditional like Sense it's inconvenient. It's always at the bottom. You have to scroll down. You can't look at your content and at the Results, but in this case because we have this panel it makes that a little easier So then we have Yeah, so we have that icon the gear icon as well which will drop down and show your plugins in there as well So you can switch over from the menu into the code editor, which will show you all the html For those who are interested in how the markup is affected There's comments at the beginning and end of each block so you can kind of see what the blocks are When you're looking at it So if for some reason you wanted to go in and edit some stuff Then that's kind of what you'll see and you can toggle that back and forth If you do run into Content that you need to convert over I think Gutenberg actually kind of does this automatically now So you don't really have to worry about it But if you do ever have a classic block and you're you're kind of stuck and trying to figure out How do I get this to be the normal Gutenberg stuff? you can always use that menu off of the toolbar there or the block there and It that particular classic block has one is the only one that can do it But it says switch to or convert blocks and so we'll convert it into other blocks So now I want to kind of give you a live demo of some of the features and things that you can do so one of the things that's Interesting about Gutenberg is that a lot of people They kind of think of it as a page builder And it sort of is But it's not and it's you know head of that direction and maybe one day It's going to be a full-fledged thing But right now it's not necessarily a page builder replacement, right? So the idea right now is that it's just a richer way for you to enter content into your website So you think of your standard content that you've probably entered normally you might have blobs of text some images maybe a few headings and things to break up so that it doesn't look too blobby When people are reading it so they can scan a little better, right? But ultimately, you know the web is about having a rich experience SEO Is better when you have you know more media and things associated with it? But really it's just about creating a better More rich experience for users so We're in Atlanta and around the corner is the Coca-Cola headquarters. So we're going to create a little page for Coca-Cola here Just to kind of demonstrate some of the features and how this works. So we're going to create a new block and this will be Let's see. So we have something called a cover block And so what this does is it allows you to take some image or thing from your media library and Insert it in And we could say, you know Atlanta home of Coca-Cola And at first this doesn't look all that amazing What we might want to do is convert this to a heading make the text look a little better Anything that supports Gutenberg Will allow you to not just have content within a restricted area, but allow you to expand that to To be wide or even full screen So we can do that If you have an image where where the focus matters There's this cool little focal point picker where you can move that around and I'll change the focus of where that is on the image and then if we wanted to maybe give this more of a White overlay we could do that. Maybe we wanted because this is coke. We wanted to be a little more red We could do that Maybe not so much red just a little less So you can adjust a lot of these things We can also do a fixed background, which is going to give it that kind of cool parallax scrolling effect And then we can take a look at some of the other blocks here. So let's do So again, we can type slash and that will pop up your thing here. So without leaving the keyboard You know, we can we can do that Let's do a media plus text So one of the common things that was kind of difficult in the normal editors just to get an image and put content next to it So in this case, we're going to take an image and Stick it in here and then it automatically is going to kind of give us some larger text here you can change the size of the text by Choosing the font size or changing the number over here You can put some content in there. We can even add in a new button We can say Get it now And so we have the ability to to also change the style of the buttons. So in this case we have Here we can do square or rounded edges or we can say we want to kind of have more of an outline feel to it and then we can even change the The text color here to you know be the the red color that matches everything else Now of course, there's a very specific coke red, but we're not worried about that right now So yeah, so it You know kind of gives it now you'll see this is kind of butted up against here. So maybe we want to Insert something before you can use this guy here You can also if you're hovering There a lot of times is a A little plus icon that you'll see here that you can hit that will also work for inserting something between two things So in this case, we're just going to put in a spacer a spacer is cool because you can just Drag it and make it have as much space as you want it shows you in gray But of course, that's the selected state. So when you click away It's the unselected what you'll see on the front end and it can give you the control to give the space that you want Without having to do anything too complicated So then we have some other cool blocks in here, so let's do a poll quote If I Could give the world a coke. I think it was bill backer that actually did that So here again, we have some styles different styles that we can pick so in this case We have kind of the default, but we can do a solid color background You know, maybe we want to go with that red color again Just to make it look, you know, we can't go off-brand client would get real mad if we did that so And we want to have white text And again, we still have the ability to send these things full screen or maybe just do kind of a wide version There's also some really cool features with Columns for example So one of the things that could be super difficult in the traditional editor is just getting two images side-by-side in this case this Gives you the ability to do some interesting things. So you can do columns and so right now by default We have two columns and so Let's put in some content Hi there so these particular Blocks, let's see the one thing that I'd have found it is a little difficult to to do which I would like to get fixed is to actually Get to the column screen So what I found though is that you actually this little gray thing here if you can click on the gray It'll let you Get to the column block screen, which is this over here. So the so right now we have two columns. Let's say we want to do bump that up to four and let's let's actually make ourselves a Image So this will be a traditional image. We'll choose something. So we got some cool icons here that we can use so we can drop these in and Align them to the center And we can insert a few of these guys From the media library And it gives us the ability to do some cool little layouts that you would definitely not be able to do very easily otherwise So kind of wanted to I realized that this part could be very boring if I'm just you're watching me but kind of wanted to show off, you know, some cool things that can do and You know do it live so that you can see it's not that difficult and sometimes when you put it in a slideshow you Easily skip over the details So yeah, and so you can insert text down here, you know get help What is this one graduate? Give back be a star And so, you know, you might want to also center the text here to match up with your icons so that everything looks nice Yeah, so you get the ability to kind of create these cool little layouts Let's see. One of the other things is Let's see we need some filler text in here. Let's get some lower Mipsum. I should really have a Shortcut that just fills in lower Mipsum for me, but I always find myself just copying it for somewhere like this So we'll put in a few Few bits of that in here. Let's see So what we're gonna do is go ahead and put in a gallery actually I'm gonna put in a regular image Just so you can see kind of how this works. So Images are something that people deal with a lot and I think It can be difficult if you've not done that before so in this case, let's just take a I think this one's well, that was bigger. This one's much bigger Stick that one in so this is a really big image. So let's say we wanted to wrap text around this image But it's too big for anything to wrap around it You can click to show it at 50% 25% 75% Or if it's not quite what you want, you can just drag it To change it To get it right where you want to get all the words to line up however you want So that's that's nice. So let's just take a quick look at what we've got before we go any further And let's view the page So this is what we've created so far So you can see we got a cool little parallel parallax thing going on. So we've got all our bubblies at the top We've got the mobile app get it now We've got a nice little thing here cool little icons underneath and then you know there's our thing here so We can come back here and say, oh, you know actually what I really want is a gallery So let's use our block transform and we'll take this to a gallery And we're gonna center it here. Obviously when you add more images, so we could upload an image here We could drag stuff into it And this is Anytime you have an image typically you'll see this little Pencil icon and that's how you'll kind of just click on it and then come in to add new things to the gallery So you could click on I don't know Few things here Let's put a bunch of stuff in for now And of course in this screen This is where you can easily just kind of rearrange things. So if you know you want to kind of spread out Certain things you could do that Hit updates and so here we have three columns in our gallery and we can also You know drag this slider or use the up and down keys to change that So anytime that there's kind of an odd You know you have four columns and there's kind of this odd number like right now We have six it's going to take the extra things and put it at the bottom and kind of even those things out So it kind of makes it look pretty cool in my opinion But yeah, you can you can take it to five and you'll have one big one and five small Or however, you want to do that. So obviously you have control on how many things are in there and Exactly how many columns you end up with so let's do two and We'll leave it like this here. So So let's see what happens if we save that and we come over here and refresh So we've got our our gallery here So what does this look like when we size it down to a mobile screen for example? So if I were to take this down and size it down size it down, you know, what happens with this guy is When you hit a certain point Is it gonna stay that one stays? If we have a gallery and we go down It'll whoops it'll it's all relatively good at being responsive. There are certain cases in which Things will stack I think I zoomed in there there we are So Yeah in our columns Looked like they get a little interesting there on small screen, but But yeah, so it's going to give you the ability to Do a lot more than you would normally be able to do without extra tools in WordPress. So And you still have the ability to take a video and Paste it in somewhere So you can paste in the URL and it'll still do its WordPress thing and link it up or One of the beautiful things about the whole idea of this inserter Is that when you have Blocks there's no guessing as to what you have available, right? So everything can be found And so you can just click here and let's say, you know, you want to embed something You know, there's YouTube Twitter Facebook Instagram. You can even bed from other WordPress sites So there's all kinds of things you can do Maybe you know you want to embed a video But you don't know what video options there are so now it's going to show you everything that could possibly contain a video So you can even have a video with text to the side you can embed a YouTube video so in in the case of this these are this is essentially a placeholder where you can just pop in your URL and When you hit in bed, it's gonna do the same thing. So obviously it would be easier to just paste in the URL And have it flop it in for you, but that works Another thing you could do. So I have in the clipboard the link for the video One of the cool features is that you can just highlight some text and then when you use your keyboard to paste It actually will take that highlighted text and automatically turn that into a link So now that's all you have to do to get a link on the page you Also have the ability to It's oh you what do you mean like? Yeah With that correct. Yeah, so it'll take whatever you've highlighted and convert that into a link pasting Whatever you paste is the yeah is the euro So Then we have this is our block navigation So if you happen to have a really long page and you're trying to figure out where something is You don't have to guess you can just Click and I'll take you straight to that block So when you do have long nested things, you know, it's it's easier to find what you're looking for So you also have kind of this informational helper here will tell you about how many words you have on the page How many headings paragraphs total number of blocks it also shows you kind of this nested structure And it'll even highlight things if you Get headings out of order for example You know that can make a difference with SEO and things like that and it'll notify you if you click over here and take a look Let's see some of the other things that it does. So in this case, you know, we have red and white which is Can be difficult for people to read and so this is kind of an accessibility thing But you can see here it says this color combination may be hard for people to Be able to read try using a darker background or a brighter text color so When it detects that you've got kind of this Ratio that's off. It'll tell you So yeah, so that is kind of the quick rundown of Gutenberg One more thing that is very helpful. So obviously it took us a little while to kind of create this whole Structured here with all the columns and everything So one of the things that you can do let's say We have a particular block something like this here that we want to use again we can come to the block menu and click add to reusable blocks and We can just give it a name Let's call it mobile app or something so we can then save this and now this is a block called mobile app and So then what we can do is we can take the We can go to create a new page for example Well, maybe we'll save what we did So we're going to create a new page And what we'll do is we'll you know call this test or something and so now when we come into Essentially add a new item One of the things that you will see is we have this reusable section So this is where any reusable blocks that you've saved live And so you can see that we have mobile app it's even going to kind of give us a preview here of what we've created and So then when we click it, it's going to insert that into our page and we can then you know use that to start creating other pages so This can be very helpful Especially if you've got Content that you want to manage from one place So you can come up to the To the menu here and come to manage all reusable blocks And it's going to take you to the section here where you can see all your blocks that are reusable that you've created So now you can actually click in and manage this block from one place and it'll affect the entire website So if you do have for example You know something that you want to use across the whole site. It just makes it really easy So part of the direction that Gutenberg is going is is in a direction where Ultimately the goal is to give you the ability to edit your own theme So as you can see if you have something like manage reusable blocks You would be able to create your own header and that header would be applied to the entire site But you have a place now where you could come to edit it You could create a footer and that footer could go wherever you want it But at the same time you could have multiple headers and you could say well these pages are going to use this header And these pages are going to use that header And so you could you can start to work it that way so you can see how you know as Gutenberg starts to grow just beyond Managing the content block how that can give you a lot more power and control And actually a lot more flexibility I think one of the biggest questions that most people ask when they first get started with WordPress is what theme should I use? Well, it won't be long in the quote and that question will go away There's no need to use a theme necessarily You can just do whatever you need to with Gutenberg so So that's kind of the direction that we're headed and we have time for questions. So if you have questions Yeah, so being able to just like create one page where you can do a search across a bunch of different media types So creating the page itself and laying things out is one thing the functionality We still are going to need plugins So there's always And that's the thing is that there's a clear should be a clear distinction between themes and plugins themes being the display of content and that's all that they do I think a lot of themes in WordPress do too much already. They try to control functionality and In some cases people like to have that bundle where everything's just together But ultimately if you want to move away from that theme to something else, you don't want to lose your functionality either So that's the problem that a lot of people run into So yeah, plugins are always going to be necessary in my opinion You can lay out the page, but the functionality of doing the searches and all that kind of stuff as Plug-in territory. So yes I haven't tested that but you should be able to oh, yeah, sorry He was asking about columns if you could do for example nested columns And to be honest, I haven't really toyed around with that too much but Here we have a column and We can do another column and that column has two columns inside of it. So yeah, you can you can Get complicated if you want obviously at some point You go too far next thing it's gonna look weird, but yeah Second question So the question is how can you get rid of the header footer if you want to full control the page There's a great little plug-in Friend of mine put together called blank slate that will get rid of the header and footer Yeah, I would have demoed it But I realized and I was helping him write some of the code for it I realized that it doesn't actually work that great with Gutenberg because it stripped out some of the styles So I got to go fix that but You know I'll fix it. So other questions. Yes Blanks late. Yeah So that is a good question. And so the question is how does Gutenberg integrate with other page builders? And that is exactly why I have Another page builder that I can turn on so I've got element or here So I'm gonna turn it on and just tell it. I don't need to read the guide so we'll come to our page and So as you can see we've edited this page here with Gutenberg and then it says, you know Edit with element or so a lot of these page builders. They're gonna have their own interface for doing that And so you can click edit with element or and it's gonna spit you out on the front end And so anything that you've created in Gutenberg is just HTML content. It may look a little different Not have all the exact styles or whatnot So you may have to kind of tweak it a little bit Generally, you don't want to take content edit it in Gutenberg edit in a page builder and then go back to try to edit in The other that's not gonna work very well. So it's best to start in one thing and and go from there ultimately the nice thing is you can Use the page builder on certain pages and Gutenberg on other pages and that will work perfectly. So Friend of mine actually does this page builder breakdown. He installed at 1.8 Entirely different page builders and he was able to use all of them together So it should work pretty well theoretically so question in the back Good, okay. Yeah, what is it good? Place-to-go for training for Gutenberg for clients I Would say give them a place where they can play with it. They're I think it might still be up. There's this thing called frontenberg Dot-com I think hopefully I'm not going to some I probably shouldn't just do that on the but it's called frontenberg Yes, okay, so yeah last time for one more question So yeah, there's frontenberg and there's a link. So when I post the slides at the very end There's some resources for training and how to so question Okay. Yeah, so how did I get to the? image or the median text block as well as the What was the other one cover block, okay? Yeah, so ultimately all of the blocks of any kind are gonna live in here So if you just search cover It's gonna pull up the cover block Or media as long as you remember the names You should be able to pull them up and then click enter and then it'll it'll plop you in there And then you should be able to start creating those content. So oh Yeah, the parallax so essentially all that is when you're on this this block is you just toggle on the fixed background So if it's not fixed the image will scroll with everything, but if it's fixed Then it kind of gives you that cool. The image stays put everything else moves effect. So But I think those are all the questions we have I will be around in the green shirt Wherever feel free to find me ask questions there is a Happiness bar that should be open to if people have questions or need specific help. There will be people to help So appreciate it