 Is it on? All right. Hi, everyone. I hope you all enjoyed your lunch today. This is Jeremy Scott, and welcome to a session I built a site with a page builder called Gutenberg. Jeremy Scott first used WordPress around the time of version 1.2 and has been using it for business and personal projects ever since. Today, he has his hands in many honeypots, including freelance advanced WordPress development, running a small premium WordPress plug-in for staffing agencies, and running a company that educates both kids and grown-ups alike in creativity. Creativity collaboration and communication skills with LEGO. He calls Phoenix home where he lives with his lovely boyfriend and two cats. In his spare time, he enjoys hiking and camping, kickboxing, video games, and live storytelling and poetry as both audience and presenter. And I know Jeremy kind of well, but I wanted to do something in here because we're both kind of totally geeks. And maybe it's not going to work right now. Hold on, hold on. We got this, I promise. So Jeremy and I both play Pokemon Go, and we're about to become best friends in the game. And we're now officially best friends forever. So thank you, Jeremy. Enjoy, Jeremy. Good to tilt this up. All right, cool. Hey, I, there's a lot of people here. This is exciting. But I wanted to ask a question before I really get going because I've already spoken with some of you while you were filtering in. So let's do, let's do raise of hands, okay? You're more interested in learning about Gutenberg than maybe specifically some of the dev stuff that I wanted to show you today. Lots of people want to learn about Gutenberg, and some of us want to talk more about the dev stuff. Okay, I think that I'm going to do a little bit of a modification of my original plan. I hope you don't mind. Might need me bouncing around a little bit more because I'm going to be bound. Last time I was here, last time I presented at a word camp at the convention center, I did it off of the wifi and people told me I was crazy. So I spent a lot of time preparing a local dev environment and all of that, and last night I broke it. So I'm going to be presenting off of my cell phone. Because the wifi wasn't working over there, so I can't even trust that this time. It's kind of like four years ago, wifi was perfect here, and then today, I don't know. Thank you for the introduction, Clancy. There's some things, most of what he said. Actually a fun story is when I did first use WordPress at 1.2, I actually forked it because I was trying to get rid of a bad custom CMS that I had built for some of my clients around that time. And I kind of put them into a bad fork of WordPress instead. And I didn't really touch WordPress for a long time. I say, I came back to it in 2010, and while it would be cliched for me to say that I never looked back, I do really still miss working in Ruby. So if there are any people out there who like Ruby, I'm, we can talk because I miss it. I do want to say very specifically, I'm a developer, not a designer. Design is what's pretty and what people look at and development is the code and stuff like that. I really like this to be clear, I'm not a designer. So some of the things that we'll talk about when I say built a site in Gutenberg with the page builder called Gutenberg, it's not the prettiest site in the world, I'm not gonna lie. But I am trying to use Gutenberg. And so let's talk about the elephant. And that is Gutenberg is kind of still a little controversial. It is now part of WordPress since December where I'm personally excited about it. I know that as it was being developed, a lot of people rejected it, didn't like it. And you know, the truth is that nothing in life is perfect and nothing in WordPress going back to 1.3 has ever been perfect. There are bugs that are, bugs that are seven or eight years old in the issue tracker that we haven't as a community fixed, even ones that have patches written and people have tried to write patches year after year after year, come to community or developer, I'm sorry, contributor day on Sunday afternoon as part of this conference and help us maybe fix one of those please. So it's not perfect. And but because a lot of people allow themselves to become involved in the debate about are we ready for Gutenberg? A lot of people didn't get prepared for it. And so here we are in our first year of Gutenberg and a lot of people still are trying to figure it out. There's a huge shortage of tutorials. There's a lot of lack of experience in using the system and I'm not trying to pretend that I'm an expert at it but one thing that I am willing to say and I'm gonna share some of my experiences here about that is in my lack of expertise, I'm trying and I'm learning things. And I'm gonna share some of those things with you. I'm not a great JavaScript developer so I'm not out there rolling all these custom blocks and I don't consider myself an expert yet. But what I wanted to do with anything today is to help you feel fearless about getting comfortable with Gutenberg. Is that fair? Now because there are some people here who have already, like I said, spoken with me as they are filtering in, I'm going to include some extra tips about Gutenberg that I've learned along the way. So there's a little bit less code. This is on the developer track. I think some people may have been coming expecting me to show them a whole bunch of fun development around Gutenberg. The next session is all about building custom blocks so if you wanna get dirty in the code, stay for the next session. We're gonna take a little more of a general look, okay? And like in my introduction, it was said that I do work with kids teaching them fun stuff with Lego. I hope that I can give you guys a little bit of that teacher experience here too, okay? So a quick story time. Because I've been working in web development for so long, when we first were doing websites for customers, when I was in my teens, we hand wrote everything. Everything was in one file. And that wasn't good because people wanted to update their sites. Well, what happened is nobody updated their sites. So we asked ourselves, could we create tools that we could go in and update our sites? And when WordPress was invented, it really wasn't for that purpose. It wasn't a content management system at the time. It was a blogging platform. And it's been taken from this blogging platform into a content management system. So one, I think the last holdout of really stepping forward into being a content management system of WordPress becoming that content management system was taking a step forward with our editor. But despite us not having this updated editor, based on the 2017 WordPress Community Survey, less than 15% of sites are blogging focused that are being launched on WordPress. So basically 85% or more of WordPress sites that are being launched today are CMS based or app development based uses of WordPress and not blogging. So having this new editor in Gutenberg is great because we're not writing blog posts anymore. So why did we stay so long with a blog post editor? So we had this problem and this problem was just solved with Gutenberg and we're still working on making Gutenberg perfect, like I said, but this problem really was just solved even though it's existed for a long time. And as that clients wanted a highly designed, highly laid out page, but WordPress pages and page like post types only had access to that blog post editor. So let's real quick just review some of the ways that we solved that problem. One was with page templates. Now, if you remember, the whole idea of coming up with a content management system was for us to not need a designer to build this content for us. And a page template in WordPress was something that a developer built for us. So if the client wanted a highly designed landing page, if the client wanted a highly designed homepage and I said, okay, I'll build you a template to that design, could they ever edit it? No, they couldn't. So that was not a solution. And I don't even have an example of that to show you. So then some people started widgetizing certain pages, especially the homepage. So have you guys ever put a widget inside a sidebar or something like that? So we're familiar with the widget system. So I'm gonna show you one of my client sites where their front page is driven by widgets. Now, this is cool. It worked, it let them kind of build the content and put it in a special place. But what do you guys see here? Look at the name of these widgets. Their front page, one, two, three, four, five. Do you see custom page one, part one? Do you see custom page two, part one? So a problem with this solution, it accomplished the goal of getting clients highly designed customizable pages only in as many as we the developers gave them access to. So did that solve the problem? No, it didn't. So let's go ahead and close that. We don't want that anymore. So some of us started going the approach of custom fields either through handwriting the custom fields on the pages or using a custom field builder like ACF. Did that work? Well, it was cool because you could make as many pages using those fields. And this is a kind of thing that we have. This is a page on a client side of mine that was built before Gutenberg where you can see we put the headline here and an introduction here and here's where we can put those logos into a gallery for what is their appearances in media. And then this repeating area that is highly designed and I can add extra information blocks by clicking right there. So this kind of worked, but it had its drawbacks. Did I get disconnected? This is why I preloaded all the pages. Yes, leave site, let's see the front. Hey, so we have a highly designed laid out page and this every piece of content on this page is editable by the client. So this works pretty cool. And there's gonna be a lot of us who are still gonna be doing stuff like this because we're comfortable with it for a long time. But what's not good about this? Well, if we wanted to use this content elsewhere, like if we wanted to feed it to an app, if we wanted to feed it into an RSS for those of us that still use systems like that, all of this is in custom fields, all of it's in its little separate place in the database. So that's not good. And if we wanted to search our pages with a WordPress search, WordPress searches don't check custom fields. So now we can't search for any of this content. And let's be honest also, the UI on stuff like this just really isn't pretty. So is that a solution? Yes, and it's one that we're comfortable with. So then we also did page builders. Now there are people in this room, in the front row I do believe that we've had some very lively discussions about page builders. I'm not a huge fan of them because they use WordPress short codes. In the front they look something like this, which is a little bit better than the last experience that we had, but these are all being driven by short codes. So if I looked at the code, if I looked at the database entry for this, and I'm not gonna do this because I wish I had my development set up and I don't, but I could remove the plugin that powers this short code, this theme, and what do you guys think you'll see? Something like this. Something like this. This is actually another client site that they came to me seven years after their website was built. I did not have a part in this. This is the client's site. Well, I can't even use the, come on. Okay. Their site will no longer load their page builder. I don't know why. And I, they don't want it, my, our plan together is that when they're ready to invest in it, they don't want to fix it, they just want to do it right. But this is what their editor looks like. And what's good about this? Well, if I want, if that, if this page builder breaks or the developer stops making the page builder, every single page, every single post in their database is married to it. Their data is essentially corrupt. And so those are all reasons why Gutenberg comes to us as a solution because it's an extremely upgraded editing experience that also doesn't have a lot of these drawbacks that the developer community has come up with to try and solve that problem of not being able to make highly customizable edited posts. So hopefully I've made a good sale of why you want to try to start going this direction. Okay. So let's go ahead and show you a site hoping that my, actually I could have a story time too right now. So I'm given an opportunity to build a site for a client. And I've already presented this site at a meetup, I think in December. So if you guys come to the local meetups, we talked a lot about the technology behind this site. This is a custom field driven site, but we built this site and one thing that I noticed is that there was no purpose to me to use custom fields when I had Gutenberg because all of this content, they're just headlines, call to actions and back and basically giant boxes with pictures. And so I was, I kind of asked myself, could I rebuild this site in Gutenberg? Now I'm not gonna, I have so little time available in my life to do anything extra. So I didn't totally rebuild their site, but I took on a personal project and I basically did the same thing. And this site, this page is completely powered by Gutenberg. There's some things, some design things, we're still working on some design things with this, but you'll see that a lot of those same ideas, that very popular design trope where you get the big background, you get the colored backgrounds, you use these big buttons. All of this was available to me with an out of the box Gutenberg install and one addition, which I'm gonna talk about. So what was great about this is when I started building this site, I didn't have to build this crazy custom field thing. I didn't have to put my lifelong trust into the developer of a page builder or the theme developer who provided me this. And so I was like, hey, this is good. I can, as long as WordPress is still being updated, I can trust that this is going to continue to work. And let's go ahead and look a little bit further on how that happened, okay? Oh yeah, that was my story time too. So maybe I got lost on my slides because I knew what I was talking about. So there is one very important prerequisite that we need. Gutenberg comes with a ton of wonderful blocks. And when we get into a Gutenberg editor, I'll show you some of those blocks. And some of you I know that I've spoken to you as they came into the room. You guys were in WP 101 earlier today. They talked about blocks. I'll show you some more of them, kind of as it wasn't planned, but we're gonna do it anyway. But one thing that Gutenberg doesn't come with out of the box is a container block. And this is a prerequisite for doing this. So I did a quick search just this morning, hey, what are some good container blocks? And here's a, this is the top Google result. I'll link to it in my slide, which will be included in slide decks after the event. And here are three advanced container blocks. If you've used a page builder before, some of this looks pretty common, doesn't it? Option to choose layouts. In our editor, this is a Gutenberg page on this site that I built using just Gutenberg. I will create a new block and I, for those of you who are still learning Gutenberg, great tip, do a Ford slash. This brings up a search for you. And I'm gonna type container to get this container from the plugin that I got. All this container does is it disappears immediately you create it and it goes back to text so we can type some text. And when I hover over here to the side, you'll see that I am told that I can select the container. So right there it says container, okay? So I have some options in the container. Padding, margins, the max size. I can come into the background options. I can select an image. Say I'm gonna choose this picture of my team here. And it's very small so far. I can give it a background and there's give it a background color. I've limited and I'll show you how to do this. I've limited my background color to my site's palette. And I can even give it additional CSS clashes which if I remember block 40 is one that I created and put into my CSS block 40 left is one. So I'm gonna come back into the block and I'm gonna do a Ford slash. Let's create a heading. So Ford slash heading can choose which size I will use this is another heading. Watch me I'm being recorded I'm gonna do spelling errors and the world's gonna see press enter. And now what do I wanna do from here? Do I wanna create columns? That's something that page builders let us do a lot of. So I'll go ahead and do a slash and start typing columns or we can embed college humor everybody. This is text for the left column and blue is hard to read with that little guy. Let's change our color here. Ooh cell phones back cell phones are scary. There we go. So you can see the text now. So type text for the left column and here we'll type for the right column. And I am using only stock Gutenberg blocks right now with the one exception of this container. If you want some fancy things like an icon from font awesome there are a lot of Gutenberg blocks that you can download through the plugin library to give you some of that extra stuff. But we're gonna keep going with this. So text for the right column and in this right column I wanna have a button. So I'm gonna do that forward slash because that forward slash is search. Everything that you want if you think that it should exist just do a forward slash and type start searching because I did forward slash BUT and I find button and I'm gonna add a button text here. This is great. Let's go to Google here and we gave a button text, all right. And because I'm using stock Gutenberg I'm going to give the text color white and I'm gonna give the button color blue. I'm gonna update this page and here you go. You got a background. You've got some margin that I've never seen before. And because I gave that style I have it pushed everything to the right and it's using the 40% of the right. So what can we do with this? Well, we can eventually work up something like this using only one plugin for one container. Now if you're a developer in this room I'd encourage you to build your own container in the session following after here when they talk about making custom Gutenberg blocks. But I used for this example a just a plugin that I downloaded which just gave me access to that container. From here you can do everything else that I did on that example site that I showed you just with a little bit of extra JavaScript or a little bit of style. For instance, I would like to take and make all of these buttons aligned. That's on my to-do list. But let's say that I would like to make one of these sub headlines bigger. Again, I can go back to my editor. Here I will create a sub headline by doing slash headline or heading, sorry. Make it that size and now we can start typing. Even though I have substantial experience in development if you remember when I started this conversation I'm not a designer. The best of my design is copying someone else's design themes. I don't copy exactly that's wrong. So you know, but this idea of a big colored background or a big image background with the filtered color on top this is all stuff that's coming right out of what we already have access to. So before I talk about a couple of tips that you can do to make this better I'm gonna come down here. I'm gonna create a new container. One problem that I did want to point out is that, and it's the next step that I'd give you in this tip is we will need to take away all padding and margins for our site container. Because in order to give Gutenberg control of everything you have to give it control of everything. And what that means is that everything that you put into a page now does need to be inside a container. So if you wanna build a traditional page it's just a column of text. You need to put that column of text inside one of these containers even if it has no design. And that's one thing that we learned the hard way when we were building the content for this site. But for those of you who are still, here I'm gonna do this on the fly now. This is stuff that I didn't plan. If we were wanting to add blocks let's talk about some of those blocks for you guys. So a big tip that I have for Gutenberg is Gutenberg has a lot of keyboard shortcuts but you kinda need to learn them as you go along. My favorite is the forward slash you've seen me give it as an example. But the other thing that I've learned with Gutenberg for those of you who are still learning it yourselves is that hovering your mouse around reveals a lot of information. And you need to be willing to see where your mouse goes. Gently move your pointer. So do you see what's happening with my mouse right now? I'm getting these little pluses. This plus is going to add a block here. When I move my mouse out here it allows me to select the container and I can add my extra padding or change the background color here. The other thing that's really specific about Gutenberg that you need to be patient with is understanding that you're shown menus based on the context of where you're working. If one of the very difficult changes to me had people in this room do we use Microsoft Word by chance? About four or five years ago, Microsoft decided that they wanted to create these annoying tabs and move all of those buttons that we were used to and comfortable working with into these tabs and it was so absolutely frustrating. Until you learn that those tabs changed based on the context you were working in. So you didn't need text box options when you weren't in a text box, right? It's a little bit the same with Gutenberg. So here I am highlighting this text and you see how my block now has changed and it's showing me settings for my paragraph, okay? So this whole section right here on this right side of the screen has just changed to the context of where we're working. When I have been teaching my clients and other people how to use Gutenberg this is the most confusing thing for them. So if you're here wanting to learn more about Gutenberg I would say is remember that your options are based on your context always. Does that make sense? So if we're selecting a button we're gonna see options for a button and if we're like oh my gosh where the options for the button go it might be because you accidentally clicked an arrow and switched to a different context and you just need to go back to it. We don't have to be scared of that but it is kind of like what Microsoft did to us in Word a few years ago and they made everything contextual. So don't be scared of that. That's a tip that I've learned to share to my clients. So hopefully that one of those is helpful on the fly here. Let's go back for a moment and I'd love to take some questions on some of the things that I've shown you so far but I wanna go back for a moment and go over a couple of tips. You will, like I said, we need to update our theme. Now this is probably gonna be the scariest part for somebody who is not used to using or not used to developing and they just wanna install Gutenberg and start doing this page builder stuff. If I go back here my theme before I made the revision basically had a 1200 width max. So if I left that in place all these images would have stopped at this basically this line that I'm drawing with my mouse. So when I started this approach taking this theme that I had built when I started the approach of allowing Gutenberg to control every aspect of the site I had to take away that control that I had given to the page. I had to trust and give Gutenberg blocks that role of limiting the inner content. So if you are going to take an approach like this whereas some page builders do this automatically for you you as the owner of the site will need to add some style sheet rules to give whatever usually it's dot site container or something like that in a theme or the main HTML element you need to give that full width and then you need to assign a style to the inner. If I look at the source right here this is a container right here and it's inside you see it's inside. This is where I tell it to I'm sorry content is where I tell it it's padding and stuff like that. So you do have to have a little bit of comfort trying to work in your CSS because you need to trade those settings that are given thank you that are given to your site as a whole your container and you need to give those to the inner of whatever the content or the container block that you're using in Gutenberg and that will be probably the most difficult thing that a non-developer would have to do to start using Gutenberg as a page builder. Okay, luckily if you are a member of this awesome Arizona WordPress community that's something that a lot of us in our Slack chat could give you an answer in like five minutes for and I'm always looking for little ways to send advice so come join the Slack chat for theirs on a WordPress community. So that's the one big thing that you're gonna have to do. I have 10 minutes left and I did wanna give you guys a couple additional tips. I use the heck out of because I do have some preferences that I don't feel that Gutenberg gave me by default. In advanced, you can add an additional CSS class to anything. If you are not a developer, this is the easiest way to assign a bunch of rules to a bunch of style rules without needing to write special JavaScript code to change Gutenberg. You can do that and I will reference that next but if you just want to do something like and I did it here, I want to tell this block that it's only allowed to use 40% of the width and floats to the left and over here, this is an example of that. So if I was using an image where maybe a person or a child is on this side, I'd leave it space to breathe. So, but you can do many styles like that if you want to give an image a border. No, that actually can be done in Gutenberg but if you wanted to do something a little bit above and beyond the norm, you can just assign, write a style in your CSS and then give it to anything and you don't need to do any JavaScript to start using that style. So that's tip number one. Tip number two is you can actually add block styles. I had this working in my development area but it's not working on the main site right now but I can show you a little bit of what that, oops, that is the wrong, right here if constrained right and constrained left. Register block style, atomic blocks slash AB container that is the container class that I'm using. That is six lines of code if you're a developer and the hardest part is actually in queuing it properly so that it gets added at the right place in the load. And hopefully in the next session they'll talk a little more on how to do this. I was trying to keep this very simple, yeah. You got it in yours, which one are you doing? Sweet, so it sounds like he'll show you a little more on how you can add custom block styles. And one question that I had when I was first doing this is can you add custom block styles to third party blocks? The answer is yes, just not in my live site for some reason today. All right, and then I wanna show you one more. Using the add theme support color editor color pallets we can take away, where is that? Here I have a couple of colors and I call them orange, blue, lime, white, smoke, light gray, dark gray, and black gray. And this is a simple PHP array. What's nice about this is this is changing Gutenberg without needing to know JavaScript which is one thing that is difficult for most of us who are suddenly being told, hey, we gotta know JavaScript to do WordPress development. But here, right here I add that color pallet and then right here I disable the custom colors. And then that's added in the action after set of theme with the call add theme support. So when I showed you this, that I was limiting myself to these specific colors, that is actually my pallet for the site. And why does that flicker every single time? Must, yeah. And I'm on this cell phone wifi too. So that right there is my custom pallet. So if you are passing a site like this off that you created for another to a client and you don't want them choosing pink on your site that had no pink, this is how you can prevent them from that. And it just helps them be more responsible if they don't have options that allow them to be irresponsible, right? So those are three tips that you guys can follow. I mean, you're not gonna be able to save them from like using H1s where they shouldn't or stuff like that. So I would like to, because I have tried to answer some of the specific more general Gutenberg topics that were asking me, I imagine there may be some more. Do you guys wanna ask any questions from somebody who's, and this is not my first site. I've actually done three sites now where all my paid, I've left the page builders, I've left the custom fields off. I've just used Gutenberg, it's worked. Yeah, most, okay, so the question is, most of her sites are ACF, have you noticed an increase in site speed? I don't test that probably as much as some people do, my traffic's much lower, but logically, there should totally be an improvement because in Gutenberg, everything is stored in the content part of the database, whereas by using ACF, that one example that I showed you of an ACF driven layout had 60 custom fields saved in the database. Those are 60 lines in your data place plus the line for your post, whereas if you're using Gutenberg to drive your style, like in this example, you're just using the single content cell in the database, so it should logically be a much lighter call on your database. However, if you're using caching, that heavy call's only gonna happen once anyway, so does that make sense? I saw you first, and then I'll come to you guys. Reusable layouts, I didn't do that here. It's really easy to save a reusable layout. What I learned, and maybe I'm still figuring it out, because like I said, I'm coming here and I'm doing some teaching from things that I've learned. What I didn't like about the reusable layouts in, or the reusable blocks, is that if you edit in one place, it edits elsewhere, so I didn't love that, so I really didn't use them here. As far as creating your own custom blocks that would be reusable, like hey, this is a, say you have a book and you want the title and author next to a picture, that is more of what's gonna be in the next and his session. So I was trying to keep this very simple, though, so I know it can be done, and I've been playing around with it, but I'm still developing my own, bringing my JavaScript skills up to that level. I think I have time for two more. Yes, and so this post, which will be linked to in my slides, that'll be included, of course, in the slide decks that are put on the site afterward. This post includes three container block add-ons, and I highly suspect there's been conversation in the Goombaer channels about making a general use container block. It just hasn't gotten into core yet. The Goombaer developers created the structure for a container block in order to give us the columns block, so it's there. They just need to give it to us, generally, and they haven't yet as part of core, but that's what most of us developers are building our add-ons off of, is the ability to have an inner block, so I'm sure it's coming. I think I have one more, and there was a question over here. I wanna be fair. Okay, I think it was used, I'm sorry, yeah. If you take away the spacing on all of your content, yes, however, I only did it on page types, so, and on page types, yes, you need to. The solution, and I've been thinking through this too, I could just give all block type elements that aren't a child of a container block, that padding, but that can be a little iffy with certain weirdos, so, you know, line break specifically, or, you know, so it's hard to catch every block type CSS element with one rule, but that's one solution. Like if you wanna grab your divs, your headers, your paragraphs, and just say, if you're not a child of .abcontainer, then therefore, you get this spacing that I took away from the content. So, I'm still learning how I wanna fully deploy this to all my clients, the ones that I've started playing around with, they're testing, so, I'm being told that I'm done, but here's the deal, guys. I'm here, I'm in a bright pink shirt, I'm wearing a 2014 WordPress jacket when I'm not, when I'm cold. Come talk to me, and I will be here all weekend, and yeah, by all means, come talk to me. I love getting to know you guys, so, okay?