 Gary's there, I'll be presenting our talk today, so probably I'm assuming everyone, if not most of you, at least were at the keynote this morning, so that was definitely a lot of like high-level overview of what is Gutenberg, kind of its path. For today I want to focus more on some of the actual steps of using Gutenberg, what are the blocks, how do they kind of interact with each other, and all that fun stuff. So just a little bit about me, I'm up down from Portland, Maine, I work at Hall Internet Marketing and we do a lot of WooCommerce development, and then we've been bracing ourselves for the Gutenberg update and just trying to grab our heads around that. So I think it's pretty, you know, clear to say that Gutenberg will be a pretty big change for the platform. My personal feeling is, I think this is a positive change for the platform, that it will bring in a lot of new options and flexibility which didn't, which doesn't currently exist, but there's definitely parts of this which, you know, honestly are making me a little nervous in the short term. I can see that in maybe two years, you know, we'll be talking about whatever the next thing is and Gutenberg will just be WordPress and we'll be talking about that old classic editor and how that's gathering else at that point, hopefully. So just a little bit, this was a quote from Matt Mullenweg back when Gutenberg was first being announced. So, you know, basically, you know, take his words of what they're trying to do is make a new page editor screen. There's some really great pros to it. It's a very simple editor, in my opinion. It should cut down on the need to write your own HTML. There's definitely been times I can think of when I'm using the visual editor and I need to switch over to the HTML just to add a class or something like that. And I think that Gutenberg will offer a lot of opportunities for developers to create really dynamic custom Gutenberg blocks. We're starting to see some of that come out of the community and I would predict that we're probably going to start seeing locked libraries and I think a few of them have already come out at this point just to add even more features to the tool. And the thing that I like is that it removes the mystery meat of WordPress. An example of that is it's not immediately present to the average user that if you were to copy the URL of a YouTube link into your editor, that it will just automatically embed the video. You might think you need to use some custom embed script, but WordPress does that for you automatically, which is helpful, but if you don't know it's there, then you'll never use it. And Gutenberg is trying to bring all of that, those types of features up to the surface. Some deficits I can see is personally I feel when I'm writing in it, the creation of the blocks as I'm going feels a little bit like overkill for me. It might just be because I'm not used to it. Custom development is absolutely possible, but I feel that it has a higher bar of entry than a lot of other WordPress editing features. A more common method is using PHP templates and using a metafield tool like Advanced Custom Fields or pods or anything of that nature. Gutenberg is built on an abstracted React. It's very JavaScript heavy, and if you're not familiar with that environment, getting onboarded can be challenging for entry-level developers. And the last bit, this isn't so much a con. I just didn't, maybe I should go right in the middle, but it's an interesting note for me at least that Automatic, the WordPress.com, the heavy patrons of the WordPress community is very, very invested in the development of this tool. Looking at the stats yesterday, the top 10 developers have done 50% of all commits. Seven of those people are Automaticians, and there's more Automaticians getting involved every day. Not to say it's a bad thing, not a good thing, but it is definitely a, I feel, a centrally driven program instead of a sort of organic approach. So this is kind of my litmus test for Gutenberg. Who likes the customizer or doesn't know what the customizer is? Let's raise hands for both of those. Okay. Who doesn't like the customizer, for whatever reason? A couple of you. Okay. I think you're going to have those exact same feelings about Gutenberg. So if you like the customizer, you know how it works, it kind of works with your flow. I think Gutenberg is going to suit your needs. If you don't really like the customizer for whatever reason, my feeling is you're probably going to have similar hang-ups when it comes to Gutenberg. And this is a more in-depth roadmap. I'm not going to go through this. I've shared my slides on Twitter already, so if anyone wants to read all of these, basically these came from Matt Mullenweg during WordCamp Europe. But, you know, the TLDR here is June. Features will be frozen July. We're going to start, they'll start promoting it and getting it out into the universe. August, the goal is to start integrating this with Calypso and start working with different agencies and developers and posts to get this on a number of sites, start bug tracking, bug fixing. And then, in theory, Gutenberg could be in 5.0 as soon as August. Maybe it'll be later. That goal might have changed, I'm not sure yet. So any questions on anything I've just gone over here? Otherwise, I'm just going to dive right into the editor and we'll start looking at some blocks. Nothing? Okay. If anybody does have questions, just start yelling at me. I prefer that instead of having a line of questions at the end. All right, here we go. So here's a very simple portal editor page I made. We're in Boston. I figured I'd talk about some big beans. So here we go. Fairly normal looking blog. This could be done in the regular editor for the most part. Where we start to get unique is when we get into the back end. So I'm going to take a look at my posts. Everything's looking normal so far. And under being town beans, this is where we have the real big change. Is that better? Right. So, so right off the bat, you can see the editor is much different. We don't have a large Microsoft Word document type editor. We have this new sidebar feature, which is different. The title is gone or rather it's been moved. It's just, you know, it's just different. It doesn't, the big thing that you'll notice is on this left sidebar, we have a lot of the stuff that you might commonly expect. So I can apply categories to my blog posts and tags. I can set a featured image. All of this exists currently. It's just been modified. What is different, though, is when we start to poke around at the different elements of this page, not only can we see that there's a highlighter, which outlines the differentiation between each of these blocks. But we see that the sidebar will change as well, based on the editor that we are the block that we are currently editing. So for example, this is an image gallery, we have one set of features, we have a text bar with another set of features, so on and so forth. So what I want to do is I want to take a look at some of the common blocks that I think people will use and then we'll look at adding some new blocks as well. So the first one is the cover image. So if we look at this on the front end, we got an image with a bit of text. Nothing special, but this might be doing an overlay text on an image is maybe not the easiest thing to do in the standard WordPress editor. And this is a new block type that lets you just add a new block with that image. So if I go up here to the plus bar, and I think this is a cover image. So I can do a search for cover image, add my block, open my media library, take my city of Boston, click in and write a title. Bingo, we're done. I can now click on the block sidebar and I can see that I have a few features here. Rather before we look at the sidebar, let's look at these popups. So there are some additional features that you could commonly do with images and everything before as well. This was brought up in the keynote. Everything that kind of comes up right in your editor as you're typing is generally the more important and the more commonly used features. Everything that's in the block sidebar generally can be more specific or more advanced and might not necessarily qualify for the average editing experience. But what we can do here is we could set our text to a right align, left align, center align. We can make our text bold here if we wanted to. We can italicize it. And you can see that the goal here is to create whatever is on the front end of your website inside of the editor at the same time. Additionally, a really cool feature with this is if your theme is enabled to support this, you can also add in wide width banner images and full width banner images. So a great example of that would be like this. So we can have an update, go to our front end. And when we refresh, we now have this really cool banner. Yes. So where's the CSS for that? That is all built into Gutenberg and the theme itself. So I've written nothing special for this. What I'm using for a theme is the Gutenberg boilerplate theme, and the Gutenberg plugin, and I have nothing else installed. Yeah, is there a way to control the vertical alignment of the text? That's great. The questions. Oh, yes. Thank you. The question is, is there a way to change the vertical alignment of the text? I don't believe that there is a way of doing that inside of Gutenberg. But I'm sure that you can write your own CSS. So one more neat feature here is we can also apply a fixed background, which adds a nice little parallax element. And we can also set the background opacity. So, you know, based on the content, you know, or the image, we can make it lighter or darker. So now when I hit update, refresh my page. Now we've got this parallax feature, which is pretty cool. And this is all boilerplate. This is right out of the box. I'm going to skip ahead on this block. Skip that one for now. And while we're on the idea of images, this is a gallery block. So in this case, I have three images, which I want to display are all my being images. I can click in on each of these images individually. And I can add a caption. I could also do the same wide width, medium, full width, left aligns, right aligns. And you can see in this case, how we have some paragraph content down below. It's floated the gallery against the content. Wow. Furthermore, I can also set the number of columns. So in this case, I have three images and two columns. And it says, small image, small image on one row, and then one row is one phase. If I wanted to make this one column, automatically, we've got boom, boom, boom stacked in a row. Or if I wanted to make three columns, they can all be aligned next to each other. So it's a very, very fast way of just laying out these image features. And a lot of this already exists in the current editor, but it's just so much more presentational. Question in the back, is three columns the maximum? No, I believe if you increase the number of images, but let's find out. I don't know the answer to that. I don't see a way to add it from the media library, but upload more images. Here we go. We've got more images that up to seven columns, seven images. So it looks like it scales with your content. Great question. What happens if you type in a higher number? What happens if I type in a higher number? Let's make it 70. Yeah, it goes to two. Great question. Yeah, yeah, we want 70. What the question is, what is the behavior responsibly of the columns? I think a lot of that is probably going to depend on your theme. But let's just take a look at what the boilerplate stuff does. Just stack them all on top of each other. I'm not sure what the theme is doing there. Does it still have 70 in there? No, it says columns four. Good question. I don't have the answer. And it's not a theme I'm accustomed to. I think in this case, there's probably something related to the theme that's affecting it. But you know, there's still a work in progress to I mean, you know, we're all here, we're all talking about this, but you know, it's getting there. It's I'm very impressed. And if you looked at Gutenberg two months ago, it would be very different than what we're seeing today. So I'd be optimistic. So here's another block. This is just a separator is HTML. It's a HR block. But something kind of neat with it is you can change the type of separator you want. So short line, wide line, or dots, dots. But I can just you know, add a little bar, no coding bar. Okay, so let's unshare this block. Okay, so this block is a button block. And if we were to create a new one, insert, search for button. So here, the text field that pops up is what link do I want it to go to. So in this case, I wanted to go to the s colon Google.com. I can also then click into the button and say, go to Google. Which is great. I can now click on the button type. And I can say what type of button I wanted to be. So I wanted to be outlined, or I can be squared. And based on your theme, I would imagine that your theme could create different various button sets for you. And they can make it and cue all of that on your behalf. Another neat feature is you'll see on the right hand side, we have the background color and the text color. And in this case, a few colors have already been predefined by the theme. So this theme wants me to be using these blues and these grays. Or if I really wanted to go buck wild, I could say, I'm going to use a fuchsia. What's kind of great too, is if you change, so we got this fuchsia text here. And, you know, I just love yellow. So let's make my text yellow. Kind of ugly. And Gootberg's going to tell me that, too. So in this case, it's saying that the color combination is hard to read. So, you know, again, this was also brought up in the keynote, but the approach of accessibility has been, I think, well thought out. And also, too, coming from an agency environment, we generally try to remove as many color controls as we can, because, you know, some clients got some real interesting tastes. And I like the idea of giving people that option. But I also really like that it tells you when you're wrong. So I think that's great. Can you add classes to the box? Absolutely. Yeah. So under advanced here. So in this case, is style squared is a class that was added by this button. But I can then change it around as much as I like. Or if I wanted to code my own, I can add a class myself. In there? Yes. Yep. Yeah. So in your CSS file, as part of your child theme, or if you're to use the customize or to add some extra CSS. Can you tell it what class you want it to be there? Yep. Yeah. So in this case, I could say, but Oh, I'm sorry. I wasn't seeing the right side of the screen. Oh, sorry. Yeah. Yeah. So it's here in the right side. Okay. All right. Okay, cool. So one other thing I had done with this before that I turned off is this button. So let's pretend this is a, it's a store, and I've got some call to action. And I want for it's maybe a contact us page. And I, you know, thanks for reading my blog. Send me an email if you want to learn more about blah, blah, blah. I like this layout, I like this text. And I want to make it so that if I change it in one place, it will get changed everywhere else I use it. So that allows for what's called shared blocks. So in this case, I can convert this to a shared block. I can name my shared block. So I'll call it CTA button and save it. So now if I go to create a new post, let me update first, if I go here to create a new block and search for CTA, I have my CTA button, and it just automatically added all the colors and everything. And if I click in edit, and I say, go to Google, please. Shit, sure. Yeah, what's that like the yellow white hurts your eyes? Great. So yeah, so we fixed our button in this case. So now if we go back to this other blog post and refresh the page, we should see that our button got updated here as well. Don't be here to save on the other one yet. Well, no, the whole button is here. We added it, edited it, just added again. Or another way instead of just searching is all of the buttons are organized in these different categories. And shared is one of the sections. I'm not going to dwell on this, I'm going to move on. But I admit there are some nuances to this and so figuring out myself. Here's your standard text editor. So this is a paragraph editor. It's going to seem very similar. Text line right, text line left, centerline, bolded, italicized, add a link if we want to. Nothing too wacky here, except for when you start to take a look at the block sidebar. To get rid of these styles, we can now have some default sizes. So I want my text to be large or extra large, or maybe I want it very small. And then I also have a slider so that I can make it as big or as small as I like. There's this drop cap feature, which has been added, which I think adds kind of a stylistic approach. I'm not really sure why it was added into the core feature for this. I'm not sure there's that much need for it. It's kind of interesting. I bet we'll be seeing a lot more drop caps. And then just like with the button before, you know, we can start setting some styles and, you know, some colors if we want to. And again, it will warn us when we're doing something bad. Can you do headings from the paragraph editor? The question is, can you do headings from the paragraph from the paragraph? What? And in this editing block? Yeah. If I'm writing away and want to throw in a heading? Yep. Yeah, okay. So yeah, so how do you do headings? To rephrase the question. Thank you. Headings are their own block as well. Oh, no. So if we increase, if we insert a block here at the plus sign, and search for heading. And so now we have our text for this is a heading. And then we can say it's an H2 or H3 or H4. H1s, I believe would be reserved. So yes, so we can set the different heading types here. H1s are reserved by the page title. Are there dibs around each block? The question is, are there dibs around each block? And yes, there are. Yeah, if you would look at this Gutenberg editor on the front end. So taking a look at the heading here. So in this case, you're probably not gonna see this too well. So in this case, the heading does not have its own block because H3 headings are block type elements. So it doesn't really need one. However, our CTA block button has a class of WP block button. The paragraph text is in a P tag. Down below here, we have an image with a block quote. So we have a figure with block quote, etc. In the front. How did how did editor will behave with page builders like Dave and some others? Yeah, great question. So the question is, how will the this behave with page builders? That's really going to depend on page builder by page builder and how they choose to respond to it. My understanding is that this time, every page builder, every prominent page builder has announced that they have Gutenberg support. That being said, my experience with Gutenberg support support is they turn it off and use their own editor. So yeah, your mileage may vary based on question in the back. The question is, how would you remove elements from the editor and to clarify your question would be if you didn't want something for a client to have access to? So yeah, so you don't want to use center line. You can add and remove themes support for these different features. I know that there are resources on the internet for that. I can't dictate them unfortunately offhand, but I do know that you can modify your themes declarations to add and remove different features. Can you nest blocks like suppose we want to put that heading inside the paragraph block block. So so the whole background be shaded and I have the heading inside that block. Yeah, good question. That's a good segue. Actually, the question is, can you nest blocks? And the answer is kind of yes and no. There is nesting. So this step here, I don't know if you know this bush big beans dog died last week. So this is an example of some nested blocks. My understanding of the history is with Gutenberg is that initially Gutenberg didn't want to be a layout editor. It wanted to be a content editor. And I think that's guided a lot of the philosophy behind Gutenberg for the most part. So, you know, when you look at this site and pretty much every other Gutenberg site out there right now, I think you're going to see very basic single column websites. It's not intended for managing lots of sidebar features and all this other stuff. Floated content like images can work widgets, widgets would be managed through a sidebar, which would be outside of the Gutenberg editor. So it's not intended to be a full blown page editor like diddy wants to be. That being said, there is some support for it. So there is a columns block type, which they say is in beta. And they're very clear about that. It is a little buggy. But here's an example of it. Let's just make a new one. So if I go here, and I do search for columns, we can see right here, it's specifying beta. And in this case, I have two block areas that have been created. If I wanted to have more, increase my column count here up to a maximum of six, but six is a lot. So let's just stick with two. And then inside of here, I can hit the plus sign and start adding in my own things. So in here, maybe I wanted to include, well, let's use my CTA button again. This one over here, we're going to add image search for image. And from the media library, we'll do we'll do buddy again. So in this case, it didn't really, well, it's supposed to be two different that see the blocks didn't even go inside of the columns. So maybe a simpler word. So here we can see column one and then test. So we have each of these different columns. And if we inspect them, we can see the two different divs with their content inside. Honestly, I'm not really clear why when I attempted to add the CTA block inside the column, it injected it same with my image. And I think that's some of the stuff that's still being worked out with this platform. Any other questions? Is there 10? Yep. Can you save blocks that aren't necessarily global? And can you give an example, please? Okay, so the question is, so you have a image with text. You want it to be blue, but now you're changing the text, but you're retaining all the settings. And you want that group of settings to go from page to page page. In that case, I don't believe that this time there's a great way of doing that. What you could do is a make your own custom block. And then I believe you could also do declaration of theme support to say, these are my preferred color palettes. And the onus would then be on the person creating the page to do it. Right. I admit it's not ideal, but it's better than what we currently have. Yes. Is there a way to reorder the blocks and drag them around? Great question. Is there a way to reorder the blocks and drag them around? And the answer is yes. So in this case, we have our heading, and we have our different CTAs. There's these arrows up here, left and right or up and down rather. So if I click it, it'll just move it around for me. And then I can also drag and drop. What's to do it? There we go. Yeah, I just gotta get very, very careful with it. So yeah, yes, you can. Yes. Can you change the spacing between the blocks? Can you change the spacing between the blocks? You cannot do that within the block editor. You would want to do that in your CSS. And as provided that your CSS is included in such a way that it displays both on the front end and in the editor, you'll see those edits as part of your editing experience. Any other questions? Yeah, the document tag describes the settings that feature that are for the post itself. Yeah, the post at large. Yes. Can you create floating blocks as well? Can you create floating blocks as well? Like for images? Yeah, pretty much. Yep. Yes, you can. So here, if I insert a block and do image or we have an inline image, see what that does. That's not going to work there. That's too big. That's why there we go. So this would be an example of like floating. So it's technically its own block. And it kind of looks like it's inside of the paragraph block. But if you were to look at the DOM structure, you would see that it's image and then paragraph. And then by floating it, it's now removed from the DOM paragraph, it's pushed up and then the image is overlaying. Any other questions? Okay. So one other thing or a couple of the things we can look at is so this, this RIP do carry it here. So we covered this a little bit is adding your own CSS. So in this case, if I look at the front end, you can see that we have this gray background with the black border. Right now, this is not being represented inside of Goober. This is a matter of CSS in queuing. So my style sheet is in queue on the front end, meaning it's for all of the visitors to my website. And in an effort to maybe reduce the load time for editors, oftentimes themes will try and not to include front end styles in the editor. As the ecosystem changes, we're going to see all of this change as well. And ideally, what we see in the editor should be the same as what is on the front end of the website. Thank you, five. So, but what I wanted to just give us an example here is so while this isn't the best example, if you go to appearances and the customizer, I've just added some very simple CSS here. And customizer records it. So we can see here we have our block, and I've added some gray, I've added some padding to it, and then I've added the border. And then from here, I can do, you know, pretty much whatever I want, anything you can do with any style sheet you can apply to a Goober block. And I think a lot of the same rules apply with CSS naming structures of the clearance specific. Yes, this is more of just a general question, because I've never thought about it. When you're using the customizer, doesn't that in your styles.css? The question is, when you're using the customizer, doesn't it in your styles.css? I believe it creates its own virtual style sheet, and that style sheet is only inacute on the front end of your website. And that is why my edit here does not work in Goober's editor. Right. But my question is more to the point of, if you're, like, you'll, you'll still see, like, you're within the customizer, you're basically looking at the front end of your website. Yes. So you'll be able to edit and adjust the styles that way, rather than, because within Gutenberg, there's no way to adjust your styles. So does the, in queuing it on the admin side make a difference when you can't see the styles that you're trying to edit? So the question is, does it really make a difference if it's in queue to boil, to boil it down? Yeah. The question is, does it really make a difference if your styles are in queue to Goober? Technically, no. I mean, technically, everybody could be writing an HTML, though, that's not super easy and user friendly. The intent of the project as a whole is to unify the front end and the back end experience into a single cohesive visual process. So that if somebody who doesn't even like updating their website, I mean, how many times have you like done something in the editor and then you look at the front end and it doesn't quite work the way you thought it would. And then you're back and forth and tabbing and refreshing and all that sort of stuff. In theory, if everything's working right, Gutenberg should avoid that whole part of the updating process. Is it necessary or required? No. But I think it would help a lot. Yes. When using Gutenberg, how easy it is to use with tablets touch screens or touch screens with any kind of device? That's a good question. The question is, how is Gutenberg with touch screens, iPads, iPhones, all that, or is any touch device? I've not tried that myself, to be honest. So I can't answer with authority. I do know that effort has been made on the mobile responsiveness of it, which would be touch required. So I would imagine that at least it would work as a, if you can click it, you can touch it. But I would not expect it to have like a two finger pickup and drag the block and throw it up to the top or something like that. But I don't know. And I mean, this is, you're going to hear this 100 times this weekend, but the plugin is available, download it, install it, play with it, break it, make mistakes, I mean, like I am maybe not 100 people. But yeah, it's, it's, I think it's a really exciting project. I'm really optimistic for the future. And I hope everyone else will be too. I don't think we have much time left. So maybe like one or two more questions. There's any you call it good right here. Don't don't make me. All right, thank you very much.