 Beginner introduction to Gutenberg. It's not a designer there will be no code in here. Maybe a little code. All the slides will be posted as soon as I get them from the speakers on the WordCamp Asheville website. So if you go to the sessions page and go click on the session it'll take you to the description of that session and at the bottom of that page we'll have a link to their slides and when we get it when they get posted to wordcamp.tv the link to the WordCamp TV video of the session with that session will be on that page as well. So just come back to WordCamp.tv I mean 2018.ashville.wordcamp.org go to sessions and click on the session and you can get to the slides and the video when it's when they're available. So I should have the most of the slides up in the next day or two. I'm John Doerner. Started the Asheville area meet-up group several years ago. We meet the first and third Wednesday so if you're here we'd love to have you. The first Wednesday of each month is for advanced topics generally designers and developers if you know a little PHP and a little CSS you're good for that one. If you want to learn more that's where we're talking about it and then the third Wednesday is for all users where we don't usually get into a whole lot of coding and stuff. The next set the first Wednesday in September we'll be talking about PHP Storm so if you want to know learn about editing using a integrated development environment an IDE an editor for editing PHP CSS JavaScript HTML it's a great tool so come learn more about that. Then on the planning committee since it started the my full time job is the IT coordinator for the USDA SAIR program and I used to say I'm the IT I am the IT department but I've got somebody helping me part-time now so that's great Michael Hall he's not in here. I do a little freelancing on the side mostly people that I've been working with for many years friends that I do a little bit and as you'll notice from the slides I am not a designer and I don't attempt to be and I don't pretend to be a designer so I got to get that out of the hand out of the way and you can reach me at John at dependabledeveloping.com among other places. So today what is Gutenberg? It is the codename for the new WordPress editor. There the idea is that I think generally they want to go head-on head-to-head with Squarespace and Wix and this is the way that they can make their site that WordPress sites more competitive with the Squarespace and Wix that's my personal opinion but it's really to make it easier for the end user for you the content creator the editor of the content on the site to be able to customize and better control the content portion of your website without knowing any HTML without knowing any code currently the WordPress sites use what's called TinyMCE you're familiar with the button bar it's got the bold italics and the used to be the kitchen sink now they call it something else but they've got that button bar across top that's your editor and you've got one big open blank page just like a word document you've got one page to put all your content in what Gutenberg is is a different way of thinking about it it does everything in blocks so if you think of the old Gutenberg printing press that's where the idea came from that's the inspiration everything is in blocks or chunks and can be moved around as a block so your paragraphs each paragraph can be a separate block it's an it only applies to the content portion of the page the Gutenberg is not a page layout controller it's only going to be what would be in that content section of your site it's not going to affect the headers the nav bars the side bars the footer any of that that's all controlled by the theme what Gutenberg is going to help you with is what goes inside that blog post or the contents of that page and a post or a page is a collection of all these blocks so your content section is going to be a collection of all these blocks that you can position around and it is coming soon we've been hearing that for a while now like so last spring or last I think November they said it's coming spring and then in spring it's coming this year and then it was it's coming August well I wouldn't surprise me if last night they announced hey it's here but when WordPress updates to WordPress 5.0 and a lot of your sites it'll update automatically to WordPress 5.0 from where at 4.9.8 I think but when WordPress updates or if you manually click on update WordPress then it'll have the Gutenberg editor in there right now it is a plug-in that you can install and use in test depending on who you talk to it is going to be the savior WordPress or it's going to be the death of WordPress depending on who you talk to I'm somewhere in between it's another tool in the toolbox it is not a page builder it's not going to build your theme and templates and things like that this is just for dealing with the content portion it is not a drag-and-drop editor although you can drag-and-drop blocks around it's not perfect it's not a true drag-and-drop editor it works pretty well but it's not optimal it's the true multi-column support you can add columns into your page or to a block and have columns but you can't say I want this this section to have three columns you can have two columns or no column or one column today tomorrow that's going to be different when I expect over the next year you're going to see lots of improvements and probably most of the stuff that I say on here will not be true a year from now it does not have a ton of pre-made templates there's a bunch but there's not you don't have templates for that page you've got a blank page with the blocks and you position where you want so once you create a page then you can take and copy that page and make other you got to create your own templates so they aren't pre-made templates styling options like the margins and padding between stuff there's not a whole lot of choices on that you'd have to use some CSS to get that done and it doesn't have any responsive design settings so you can't say if the window width is this wide then I want it to look this way and if it goes down to this size then I want it to look differently you can't do that with the Gutenberg as it is today do you have to use Gutenberg no you don't even when 5.0 WordPress 5.0 rolls out and they've got Gutenberg installed on your on your site you still don't have to use Gutenberg you there is a classic editor plug-in that you can turn on enable and in the settings you can say I want to replace the Gutenberg with a classic editor and you won't see any signs of Gutenberg on your site so that's they really easy way if you like the way it is now you can keep using it the way it is now no problems if you want you can use Gutenberg editor by default and then optionally include links to use the classic editor so on one page you want to use a classic editor on another page you want to use Gutenberg you can do that that's not going to be a problem and there's the link to the classic editor so do you want to test drive it before you try it and install it on your computer you want to see what it's going to look like go to WordPress.org slash Gutenberg and this is the page and you can come in here and this is what the Gutenberg editor looks like so I can click here and this is the title I could just type in the title and that changes the title so that's simple here's this would be the navigate your sidebar and you can click to add title this is what it's going to look like I can so this is a block right here is a block with an image in it so I can add more blocks by clicking on the little plus sign here and we'll go through all this in a minute but you can go to this site and create your own or play with Gutenberg editor current site without Gutenberg this is what is called the tiny mce editor this ad media this box right here this is the tiny mce editor and this I'm assuming everybody's familiar with this window this is what that window looks like after you've installed Gutenberg so when you go to add a page or post you'll get something that looks very much like this you can do all the same stuff from this page that you could from the previous page so if you click on the little three the hamburger buttons but the three dots in the upper right corner that gives you your editor options so you've got the visual editor or the code editor just like on the current version you've got the little tabs across the top of your editor here it's in the three dots in the upper right corner and you can switch between looking at the the visual is WYSIWYG what you see is what you get editor or do you want to look at the html code in for that block you can do that do you want to show the tips when you hover over things it'll show tips the fixed toolbar to the top will I think it's more like how Mac has the toolbar for a program is at the top of the window regardless of which program you're in that's how this works if you fix toolbar to the top the the bold italics that whatever choices that are appropriate for that block will appear at the top of your editor window if you have that if you don't have that checked they're going to appear at the top of the block so each block go it'll be at the with the block and then there's a tool to copy all content so if you create a page and you got all the blocks in there and you want to use this as a template you can copy all content and then go create a new post and paste that content in and you can you've got your template good just go and change your content this little information button icon the eye that lets you easily navigate to section this is something that's new it gives you your word count how many headings it gives you a document outline you can click on any of these outline on any of these headers in your outline and it'll jump you to that section of your post or page so this is pretty nice nice improvement on the right side you've got a document and a block section so if you want to look at document you click on document this is where you can go and get the things that you're familiar with on that right side of your current editor so your status visibility published date post format do you want to stick this make this a sticky post so what a sticky post is is on your posts page a lot of times that you're you know you have a blog that where all your posts are going or your home page the sticky post is this post stays at the top of that list instead of just having them in the order that they were most the most recent post first so you give this say that I want this one to stay on top regardless of what post follow your tags you featured image your excerpt discussion so all that's this is very similar to the same feature same questions you're asked on the current system so that's no big change there just it's a it's in a different place you click on the document button to get it to change that the the slug or the permalink part of the URL it goes after your site you click on the title and when you're editing the title that gives you this permalink editor so you can go in and edit that from there when you're in the block each block is going to have a different set of options so if you click on the block button in the top right or tab in the top right if you're editing a paragraph type block and it tells me that it's a paragraph what type of block is here and then what its purpose is for and here's the options that you can have with a paragraph block you want to make text size custom size drop caps so each paragraph you would want to have a separate block and have the drop caps apply to that one paragraph so like I said depending on what type of a block you have you're inserting what your choices are so if you a paragraph you get the small we already went through if it's an image you'll get the do you want to fix background to back how opaque do you want the background a lot of these things are similar to short codes and you can see that and right now there's probably 25 30 different block types and I'll show you what those are but they are I expect those to be increasing quickly so depending on your theme or plugins you have they can the plug-in editor or the theme creator they can create add new blocks make new blocks available to you so here's the the common type of blocks so image paragraphs headings gallery this classic block that puts the tiny mce editor so even if you have Gutenberg installed and you're using Gutenberg you can create add a classic block and that gives you the tiny mce editor and everything will work just like it was with the with a regular classic editor so I'll show you what that looks like in a minute when we go into live code but these are all the different kind and embeds I didn't I couldn't fit them all on the one slide so I there's just a lot more of things that you can embed in here so to insert a block you click on the little plus sign in that upper left corner or first you position your cursor where you want on your page where you want to insert that block and you click on the little plus sign in a circle and there's a couple places that that plus sign appears it's there's one above each block below a block and at the top left corner of the of the page so if you want to if you're down in the middle of your content and you click on the one a plug above that block it'll put insert a new block between and you can change the plot block type so after you insert a block you say I want a paragraph well I really don't want a paragraph I want something else you can change the block type after you've inserted it and here's what that classic editor block type looks like so it's just those that block in there here's when you're editing you can hover over the little plus sign to get the insert block button and that'll put a block above it when you're editing a block you can hover these arrow buttons may not appear until you hover over that left side so it helps to know that how do I move it around well if you take your pointer to the left side of that block then you see those little up and down arrows or hover over the block you'll get those and if you have the tooltips turned on that'll show you that move down move up box it comes up top across it but that so if you've got two blocks you can change the order of the blocks by clicking on those little up and down arrows and when you click in the text that's when you get the the the buttons that apply if you're inserting a paragraph text and you click on that you'll get the paragraph type choices when you're when you have a block selected there's you'll have the options button on the far right and you can hide the block settings that'll get rid of the the right column edit as HTML so if you want to just get into the HTML for this one block you can get in there you can duplicate this block so you want to just create more of these add to reasonable blocks is really cool so reusable blocks are blocks that you can create so you want to create your your address block your if you've got a block of text that you use or any kind of block that you use frequently you can create that block and save it as a reusable block and on any other page or post on your site you can when you're choosing the block type you can choose I got named this block address slash phone so that will be in my list of blocks so I choose that I want to add use the address phone block or insert the address phone block and it puts it in there what's cool is if I change it on one page it changes it on all the pages that have that address phone block so if you've got a block of text you're you might want to have your tagline or something that you want to use on a bunch of pages not just one and if you change it on one place you want that change applied everywhere create a reusable block when you go to insert it from block when you click on the little plus sign to insert a block and you choose your blocks it gives you a choice of here's the blocks that I've recently used here's the common blocks formatting blocks different types and the last option is reusable and that's where all the blocks that you've created as reusable blocks will be listed down there okay Gutenberg can replace a lot of short codes so I don't know if you've ever noticed the gallery you can get to a lot of of changing the way your gallery looks on a post if you insert a gallery and you say two columns link file this would be the way you would have to do it currently because there's no nice editor GUI editor for doing that Gutenberg gives you these choices and you can do it either way you'd have to go into the code and insert the the this code but you can also now have this nice user GUI interface to be able to make do those what would be custom block short codes and that's what I'm saying is your plugins editors or creators and your theme creators who add short codes will be able to do make it more user-friendly for you to be able to do this without having to type the bracket gallery IDs equal and so on but if you want to use a short code you can insert a short code block and put this code in type the code type the short code in there and you can still use it so if the theme or plug-in that you're using doesn't have the user interface for adding that type of a block you can still use a short code okay so let's go and play around a little oh on this slides that I've got the resources so the links are in here so you can go and find all these so this is this is a this is that demo page I've got a site here so we'll go here and I don't know why my Gutenberg link is not here I expected it to be there and it was there Sunday and it's not there today last Sunday when I created my slides I go in there so I don't know why that's happening anyways when I go to my dashboard here's the block if you have it you may have dismissed this but this is the block that says I want to try Gutenberg and here's the insert the cut the classic editor we'll try Gutenberg see if it does something maybe that oh maybe that's why now I got the Gutenberg and demo no I'm on the depth of sorry I've dismissed that so it's gone right so I go I'm gonna go create a new post wait let me I want to look at that demo page sorry first so pages it's in the Posts so this is the demo of a Gutenberg editor and I don't have my Gutenberg is not working on us we're gonna go to this other site that's probably why it's not working I don't have Gutenberg enabled on that site all right we're gonna figure this out real quick hopefully it's installed plugins no we're not gonna figure that out at the moment so fortunately I got another site I can do this with so we come here and we'll play with this demo we've got the demo open here's where I can save this as a draft and these this shows the different kinds of of images of blocks that I can put in so I click on this plus sign here's my most used blocks common blocks I can expand each one of these and look and see what's the different kinds of blocks and I can pick these from here so this block is the cover image block and it adds a full width image and layers text over it it's great for headers let me see make it a little bigger for you do I want to use a fixed background or not and you play that changes the width or do I want that image to scale based on the width window size do I want the opace base to the opacity of the image and then in advance you can add additional CSS so if you know CSS you can apply that CSS to this block and it only appears for this block so that's where you could add your margins and head padding and things like that borders and because it's the a cover image it lets me put some text on it and I can answer that here's where I can change the block type and here's where I can do the formatting of that text and here's to edit the image this is a paragraph block and tells me it's a paragraph here's where I would insert a block above here's where I would move the block up or down and over over here's where I get my more options to see the different things when I edit that here's excuse me I've got the editor buttons and here's text size and things that apply so drop cap looks like so that applied that drop cap to this block here's another paragraph block here's another one where the text is right indented right aligned this would be a heading and if I click on this here's that pictures worth thousand words that tells me I could navigate to this heading right here this is just a picture and it's got the outside picture it's an image block and I can put some text or the caption down here change the width of the images paragraph here's a list a list block this is a horizontal rule or a separator block and just puts a horizontal line and do I want to short a wide line or dots going across there so there's my choices for a separator line block here's where you can have columns or this is a gallery so I said I want to put the gallery in two columns I want this one to span across both columns so here's where I can go and pick the different pictures that are in that gallery here's an embed where I embedded a video this is a pull quote block so you have have your pull quotes in here and different choices there and that how that's going to look is going to be dependent on the styling that's applied from your theme so in my theme I can have it so these block these lines appear differently or how this is actually styled will depend on your theme there's a button block a button so you might want to have this a button like this a call to action type button that will might make a real good reusable block so you can have that exact same button it links to the same place every place on yours on you put that on the page so it'll look the same every time you insert it so let's go and pages and add a new page and welcome to the wonderful world of blocks click the plus to add a new block and I can go through and see all the next tips and it walks me through and basically gives this presentation for you when you're at your desk any questions yes but I expect to all do something different so now it's it's going to be up to them how they're going to interface with it let me go add a new plug in go get the classic editor I was on the other site so now I go to my classic settings so what default post type post format and here's where I want to choose so I'm gonna go and say go and by use this one by default but still give me a option to use the classic editor in the mail server passwords so now if I go to posts now I've got this edit and edit classic so this is one that I started in Gutenberg and I'll try to edit in classic editor my visual and it's probably gonna screw up the layout a lot all the content still there in the right order but you'll notice that a lot of things aren't going to be working the way there that they were in the like here the gallery had two columns now it's only got one so that's because I went back and forth I go back with Gutenberg it's got the good burger he's got all the stuff in it if I go to add a new post and it's got Gutenberg or I can switch here to edit classic and that gives me the old classic editor yes probably until I at least test it but yeah I would leave it in classic mode and try it and look I'm not familiar I don't use beaver builder so but you'd have to use look and see how those how that pertain does beaver builder Divi they're all doing something a little different yes oh thank you thank you I'm the one who's been telling everybody do that in other sessions right if you're using a page builder do you use classic editor or the Gutenberg it's going to depend on the page builder you're using and I expect over time they're going to switch to where you'll be able to use both but I'll I default to seeing what do they recommend and follow their instructions yes I expect they'll keep that going for a for a long time how long do you do I expect them to keep the classic editor going I expect that to stay for a long time yeah Divi Divi has come out with a new 3.0 I think it's 3.0 but the newest version of Divi does work with Gutenberg yes sir so if I insert a paragraph and type some text in here I can't change it once if I once I type text in there I can't so once I if I insert a block then at this point I can change it but once I type text says hey you got a paragraph here it wouldn't make sense to make that into an image so so now I can go to gallery and I get my upload my meeting gallery questions so I can change it until I've made some changes to it any other questions yes I have had similar issues yes image inserting images and floating getting the floats to work correctly so if I go to add an image and we'll give you library so I got that one wanted to align right that's what we size this smaller again I should be able to drag these around oh it's oh it's I need to move this down I should be able to drag these blocks around so if I click on this paragraph block give me a little plus sign I have dragged them around before there I get my little hand put it on the edge and you can drag that block around so I want my image gallery I inserted a gallery I want to insert a gallery I want to insert a image not a gallery so okay so that way so you've got inline images so if it's a small image and you want it to appear like in the body of your text in line image get rid of this one so that inserted it in with my text so now here's here's I've got that with my text and that's going up here this is my inline image so that's not a this is put a space in there so that's inline text that would be where you'd want to put like a little image if I want to put a image block and then maybe library so now I've got this image and this is the one that I can have my text and that's gonna have the text wrap around it so here's I've got my text if I resize this so when I put the image in then I can have do all the wrapping so I insert an image block and tell it how I want the text to wrap around it and this is an inline image so if I want text in the body of the paragraph that's where I insert the inline image insert a block above we'll put a heading I didn't get the the permanent here because I haven't saved it so I gotta save it as a draft now when I click on there then I get the permanent and I can edit that permanent choose edit I want chances to be my dash title and that's how I can edit the permanent on that bitch yes no I don't are you doing up maybe it's a difference between a page in a post okay I'm in a post so when you click on title on the title of post you don't get edit you get changed from a link I wonder if if it's got something to do with the difference between published and not published no do you have the current version the same version of Gutenberg that I've got that may be the differences of different version because it just released a new version of Gutenberg I think last night or yesterday so we may not be on the same exact version but it's coming soon so somewhere in the next few months or it could be tomorrow we'll be seeing Gutenberg installed coming to your computer any other questions anything you'd like to see yes ma'am editors she's asked the only people that can can access Gutenberg would be admins no editors will be the anybody who can edit a poster page will be able to edit will be able to see the Gutenberg editor now your admins depending on your permissions and what levels of permissions your admins will be able to add and install the plugins but the editor they they'll be able to she said this will be good will this be good for the editors to control the layout without touching the theme right they the the editors will be able to edit the the content portion of the page without touching anything anything surrounding it that's that's determined by the theme is the header the footer the sidebars all that's determined by the theme this is just going to be what's inside that content area of the page yes sir oh so okay so once you save it yes ma'am on the left hand column you got Gutenberg and demo yes you have oh you want the other the one without installing it is at wordpress.org slash Gutenberg you want to know where to get to the demo so there's two numbers the demo on your site if you've got Gutenberg installed or before you install Gutenberg you can come to wordpress.org slash Gutenberg any other questions what do y'all think yay yes let me look at the page she asked what are the arguments against using Gutenberg and is it just comfort level that's that's probably a real big one do you want your editors to be able to fully change the layout of the content do you want your content structured in a certain way if so then you might not want your your editors to do that we'll go to code editor this is the code that it creates so this is going to look fine in a WordPress site WordPress knows how to interpret that comment block line that says that this is a block that this is how this block is supposed to be displayed if I took this page and took it out of WordPress I've got all the content here and I want to use it somewhere other than an award press site it's going to look like this so it's going to lose all that formatting so are you planning on migrating out of WordPress to something else how are you using that content how are you getting it out of there but what control who who do you want to have control how do you want your page to look does it work with your theme does your theme support it does your theme support it correctly or the way you want it to support it so those would be the questions that I want to check before I implemented this on my site now just adding the Gutenberg plug-in to your site shouldn't break anything it's when you create a post or a page with the Gutenberg editor does your pet does your site handle that correctly any other questions all right thank you very much enjoy your day and if you have questions I'll be around here feel free to grab me and and bend my ear come to the meetups