 Hey, my name's Sean. So I did the intro before. I probably didn't say my name, but anyway, so one of the organizers here, I also run a WordPress agency called Chilibin. So what I'll do is I'll just kind of run through some some updates to WordPress that have been happening lately, mainly the WordPress 5 update that happened last week. And we'll just run through a bit of a demo on what Gutenberg is, what it means, essentially for the future of WordPress. And we'll run through a basic demo of kind of setting up a basic post and how different it is from the previous, from the previous view. So it's a little video that, so WordPress 5 essentially is called Bebo. All named after jazz musicians, but this is the kind of promo video that they put together, which kind of explains that the editor is now going to be all about blocks. So while they've embellished a little bit in terms of the flexibility available, it's kind of the overall vision for what they want the editor to be. So it's more flexible. You're not just stuck to a little kind of content box. So this is available just from the WordPress, WordPress 5 page. So yeah, definitely wide images and lots of content kind of options as well. Yeah, Bebo Valdez. Importation of media and all responsive and, you know, obviously it depends on the theme that you're using. But the goal is to kind of move it forward into a more robust content editor for 2019 and beyond. Launched of WordPress US last week, pushed out maybe a bit too early in my opinion, but it's here now anyway. So WordPress 5, nicknamed Bebo. This is a very brief kind of animated gif of how to start. It like adding a new block. So you have things like adding a cover image that essentially comes in a block. You'll go through and either drag and drop or find that image from your media library and you can write over the top of it. There's some other different options down the bottom about making changes there as well. You can align the images and things that way as well. So you can change the text or change any of those options, remove that block or whatever. So that's the very basics about adding a new piece of content in the editor. These are the pre-built blocks that are available at the moment out of the box. I would probably mention that the columns one at the moment isn't great. There was a tables one and that wasn't kind of very ready yet, but the image and the gallery ones are all good. The text and paragraph ones work the same as buttons and embeds work really well as well, especially if you're doing YouTube videos, doing any Spotify, any type of OM-bed images. You go straight through that and that image, that content will populate through really easily. You don't need any embed codes or anything like that. You just need a URL and that will come through. It's another animated gif of essentially a gallery and making some kind of changes. You can move those up, move those down depending on how you want that to work and change any of those layout settings. Essentially, what you see is what you get. So your theme will try and match the front-end and back-end as closely as possible. Previously, you'd been writing probably something like Georgia as a font. Now the front-end and back-end styles will be as similar as possible. It depends on the theme that you're using, but that's the main idea around it as well. It's a continuous experience across front-end and back-end. There's a bit of documentation being released about version 2 and phase 3. Essentially, it's looking at replacing the menu editor with the same type of system as well as any other widgets and things like that. So give it a bit of time and it's going to get to a robust editor, something along the lines of what's Squarespace and what the medium editor offers. As well as this, they've released a new theme which I installed for the first time today. I thought it was a little bit bare bones, but it's called 2019, but it's all optimized for blocks. As you can see there, it's pretty easy to edit. You just click on the content and edit it and change any of those blocks. On the right-hand side, you can adjust any of those settings on the block that you've clicked on. But yeah, it's quite bare bones at the moment, so I guess they give you the opportunity to do what you want with it. But yeah, when I installed it, there were no images or anything like that. For the demo, which I'm about to jump into, I have run a different free theme. Let me just load this into my browser. So this is WordPress 5, a clean install, a couple of plugins. So nothing really out of the ordinary there. You'll see that I'm running a theme called Atomic Blocks. It's a free theme. It looks quite nice. It's been optimized for WordPress 5 and Gutenberg. Also, they have a plugin as well, which kind of extends the amount of blocks that are available and allows you to do a few more advanced things. So that's freely available in the repository and the normal place appearance themes, and it's just called Atomic Blocks. So I click on that. So that version there. So I find it's kind of a nice clean look and decided to use it for the demo. So the demo post that we're going to be making is just something I kind of put together here, a review of a cafe. And these are all built this afternoon in this block editor. This is the kind of front end look of it. So just Lorem Ipsum text. There's a nice bunch of images from Unsplash, which all look really nice. There's a bit of pull quotes in here. The image align right. You can do things like adjusting. Previously, you could see small, medium, and large sizes. Essentially, you can still get those sizes, but you can grab 25% of that image or 50% of that image if you don't want 300 pixels and you don't want to go through and create another image. So that's limited. And also, like a pretty nice looking gallery, all you do is kind of drag these in and it's all spaced out nicely, and it just makes the editing experience really easy. Simple video, all you do is kind of grab the URL, chuck that in. And this is, so this is a little extra block that's available in atom blocks. So it's like a little user guide or any type of course action. And there's another block here to pull in like a map or anything like that. And then there's some kind of social icons at the bottom as well. So all this created in probably like 20 minutes to kind of put some stuff together with a few blocks. And this is just kind of the WordPress default comments and things. So as you go through, it's, you know, it's pretty easy to kind of build something that looks semi-decent with placeholder content in a relatively quick amount of time. Obviously it depends on the content that you have. So what I'll do is kind of go through and edit that. And this is what you can see. So it's essentially, let me just remember, collapse this. So you've got this space here. So I'll try and do it looking at the screen. So actually what I'll do is I'll run through and then I'll kind of sit down and just kind of recreate something like this so we can kind of do it together. But this is a heading tag. So you can change this easily between heading two, heading three, heading four. Or if you decided to want to swap this, maybe to a paragraph or to a quote or to an advanced heading, if you're using any of the different block systems, this is a paragraph. So you can see over here that maybe I do want to drop cap for the first thing there. And that obviously will show initial first letter. You can change the size if I want kind of small, medium, and large. And again, these are defined by your theme, your CSS, but some basic kind of font settings you'll be able to do throughout this editor as well. So you can do things like changing colors of the block. If you wanted that to be yellow and then you wanted your text to be white, for example, it's really simple to do without any code. And if you're looking at the back end of this, this code as well hasn't kind of put a whole bunch of inline styles in it. So it does give you a little bit of accessibility notes. One thing I will note that if anyone has kind of any accessibility issues around screen reading and some things, I wouldn't get upgrade to this. For blind users and things, it hasn't been a great experience. There isn't an accessibility audit happening. But it's going to take some time to filter through into a block editor like this. Accessibility on other editors are okay as well. But from going from kind of tabbed little icons to a layout like this, it's going to take a little bit of time for that to filter all through. So that's kind of how we can go through that. That's a simple gallery. If you look over here, where my mouse is. So you can change that between of any of three images. So I can go to two images, I can go to one image. I can decide to crop these or keep them the original size. They're all the original size. Decide what I want to link it to, the media file, it's just linking to nothing at the moment. And then what I have across here is the kind of image layout sizes. So a line left, you wouldn't really want to do that with a gallery. A line center, which makes them fit all inside the grid. And then you have a kind of semi-wide and then a full-wide grid. So depending on your theme, you can adjust that to be either 100% width like it is at the moment, or this is sort of about 70% width. So if I then wanted to add another image to this block, I could, or I can pick one from my library as well. Another bunch of texts, you know, an editor here. This is what I was talking about before about the image settings. So I've selected an image size of media, which is cropped to about 300, 200 by 300. If I go to 100% of that, oops, bugs. If I go to 100% of that, that's what it is at the moment. So then if I go down to 25%, you can see that it's actually resized that down to 100 by 150. Now, I haven't looked at the code and I don't believe it actually resizes the thumbnail. So you're still serving to the audience a larger file. So if I was to select, you know, the full size, which is like 5,000 pixels, and then selected 25% of that, it would still be, right? Yeah, it'd still be a pretty large image. So if I was gonna go for a medium one back to 200 by 300, if I then wanted a little bit more spacing on here, they can do that as well. So that's just aligned right. And if I decided to break that out, I could make it full or left aligned. You know, pretty simple, easy to use tools. Another gallery here as well. So, I mean, what I've got through here is five columns. But if you wanted to grid with more columns, that's possible as well. And it will try and fit your images to the best of its ability. So obviously these images don't kind of fit in that grid because we've gone for eight, so there's a few left over. If we go back down to five or four, you can see that it's found all the landscape images and put them in a section together. And then there's two images at the bottom as well. So that will all depend on your content. For the actual video editor here, if I was, sorry, clicking on this block. Right, so if I click on this block, I have the same settings here. If I want to break it out into full width or left aligned, that kind of applies to all the content areas. Put it down here. Where is the edit? I don't want to play that. Okay, so edit up here, sorry. And then all you need here is the YouTube URL, whatever that may be. Click embed, it grabs all the rest of the code, and then you're good to go. So if we're looking at the other embed tools, there's plenty, there's a standard embed that will come from any type of other system that's not built into these. But if people are still using Flickr, you can use that, plenty of different things to pull through as well. If you're using Meetup and promoting tonight's Meetup, then you could pull that through as well. And as you go down here, this is a custom block called AB Notice. So this is out of something called Atom Blocks. But as you can see, the font size, I can change the notice color. I can either use one of the pre-selected ones or I get a normal color chooser here and I can put in hexadecimal, or I can just kind of randomly choose a color that looks nice or fits my color brand. Text color can be that, and the tile color, if I wanted to make it stand out a bit more, you can change that one as well. It doesn't offer a background on this option, but you can add an additional CSS class down the bottom and then do that on your style sheet if that's what you wanted to do. So here, under Google Maps, again, click on any of these items. Line height, no, that's still, let me just go back up here. It's still a text setting, so it still needs to be done kind of sadness. In your style guide up in here. So the new version of WordPress, yeah. Well, most themes will probably not have support for it. In terms of, you'll be able to create content like this, but it may not look the same on the front end and the back end of your site. So let's say you wanted this gallery, for example, if I scroll down, and see how that breaks out of the grid. On your theme, you may still be constrained to within your, let's say, 700, 800 pixel content editor grid. So it really depends on your theme that you're using and support for this. Given that it's rolled out, it's a big release. There will be changes coming to most themes. And plugins and things will be able to add a bit more support around it. One thing that I didn't brush on because I didn't actually add any plugins in here, but if you did have Yoast SEO, for example, what will happen is instead of having the meta blocks down the bottom, they'll still be down the bottom, but they'll actually be editable in the content itself. So there'll be an extension of the content. And I'll quickly just kind of show you how that works if I can go into plugins. No, but I can install that as well. This is all about good and bad. All right, let me just install that. Is it necessary to log in? Sorry? Is it necessary to log in? Oh, no. Eskimet or whatever. No, that's kind of WordPress's spam system. It can be a bit frustrating signing up to it because you need a WordPress.com account and that takes a little bit of time if you don't have one already. There's plenty of other plugins that will do that for you. Yeah, Eskimet. It comes installed on everything. I just delete it because I don't use it. I don't use it. There's things like anti-spam, B, and there's a couple of other ones as well. Do you employ a commerce in learning? Essentially what it does, it goes through your comments and works out if it's a spam comment or not. It won't really do stop hacking or anything like that. It just goes through your comments and reviews and works out whether or not the keywords and that are going to be... Yeah, I wouldn't use it unless you've actually... It will get reinstalled on the next WordPress update, major one that you do anyway. So if we go back to the post, I've got classic editor turned off and I'll go back down here and just show you briefly how Yoast will look now. So if we scroll down, it still kind of looks the same, but instead of being kind of disjointed from the rest of the post, if you had something like advanced custom fields down here, all your fields would essentially... All your other plugins settings would appear down here. So it still kind of looks the same. The experience is similar, but the whole point of it is it's creating more of an ecosystem around your content. The same thing with the right-hand bar. You used to have categories and tags and things like that all separated out. They are now kind of all in the same area. The consistency. So your revisions are in here as well. So it's trying to create a bit more of a consistent approach to editing that content. So if we're looking here, those are the most used ones, so they're at the top. There's some common blocks and formatting blocks here. So you can add kind of a few different options there. The Table 1 is very limited. I think it's when last I tested it, it was a 2x2 grid, which isn't fantastic. One thing that will happen if you're migrating your site and you haven't installed the Classic Editor plugin, which I'll go into in a second, your content will be in Gutenberg, but it will be dumped into a Classic Editing Formatting block. So what will happen with that is that all your content will essentially be just in one block. Like it appeared on your existing site. So it won't be broken down into different images and different blocks. You'll have to separate that out if you want that experience, but it shouldn't break your content. It depends what theme and short codes and things like that that you'll be using, but that's what I've done to kind of help with that transition. The other thing is if you're not quite ready for this whole experience yet, and you do want to make the upgrade, there's a plugin... I'll leave this page. There's a plugin... There we go. It's called Classic Editor. And so if you install this, what it does is it returns where it pressed back to normal, back to what it looked like last week, right? So if I go in here... Where's the settings gone? Appearance Classic Editor. I'll just go from here. So what you can do is you can set defaults. So for existing users or all users, you can set to have the Classic Editor. And then you can decide, for example, for your team to let them not use or not make a change around those editors. And there's some more advanced plugins that have around disabling it for certain post types and things like that as well. There's one called Gutenberg Ramp, which will allow you to turn it on and turn it off on certain post types. But if you have this installed, and let me just kind of save my settings here, I'll go back and decide to create a new post. You can see that we're kind of back to normal, and this is the old editor. And after playing kind of around with Gutenberg for most of today, going back to this does look kind of really dated and sort of... Does the use cater for the Classic Editor in the case as well? Yes. So use just kind of has all the same. So there's a lot of plugins that are still yet to do, and what you can do is if you're kind of sick of this look and want to get into the 2019, switch to this editor, it will kind of convert what content that you have into that. So you still have the same kind of things around reviews and visibility. One thing that I found was a little bit lacking was the ability to find the URL. So at the moment, you know, on the Classic Editor, you could find that really easily. You know, your permalink would be there, but it's not actually listed. You only get the view post, or you can kind of find it across here. So it used to be kind of at the top of the site where you could easily find and copy and paste it and send it along. I've kind of moved it down here, which is easy to find if you're doing this, but when you're editing other content, it can kind of be a little bit hard, and there's a couple of checks down here as well. So that's it. So I installed two plugins that enhance the kind of blocks. One's called the Ultimate Gutenberg... Ultimate Add-ons for Gutenberg, which is by the guys from Brainstorm Force who do the Ultimate Add-ons for Beaver Builder and Elementor and a few other things. So this is a free plugin, and it will get amended over time, but that's where I found the Google Map. There's also some multi-buttons. So if you want two buttons next to each other, you can do that as well. It also allows you to do sections. So sections aren't previously possible unless you install a couple of block plugins like this. They will allow you to separate that section with the background color or something and then have blocks inside that section, which allows you to create a bit more of a dynamic layout rather than just the one stream of content. It has a post grid, so if you're building like a blog page layout or a home page layout where you want to pull through six, eight, nine blog posts, that comes through as well. So some testimonials and kind of what they've done on some of their other add-ons, they're starting to bring into this as well. So there's a restaurant menu and there's a couple of things. So there's plenty of this development that's happening currently. It's still in its infancy, but like I said, Atomic Blocks is the theme that I'm using, and they come with a few things as well. So there's a spacer if you want a bit of extra space, the sharing, there's a call to action, there's some accordions, post grid and container kind of section as well. So one website that I did want to kind of bring up was Bill. So Bill Ericsson's a developer and he works with the Genesis Framework so similar to what I use for my team as well. So he recently launched this last week and this is 100% Gutenberg website. He does have some custom blocks that he's written, but as kind of going through billericsson.net you can see that it is pretty extendable to build an actual website in it at its current current state. So there's nothing that's kind of done in here that's completely out of the box. There's a little bit of custom work obviously to make sure it's right, but there's plenty of stuff in this and your contact forms that's all fine to bring through. So if we're looking at one of his blog posts, you can see it kind of makes a bit more sense in his blog posts. So he's talking about kind of building blocks with advanced custom fields, different templates in building Gutenberg websites and kind of building templates around it. So this is kind of his template. As you can see, he'll go through the experience of building a style guide and what it will look in Gutenberg across the different views, which is handy to have so you can kind of understand how your content is going to look. So previously, I know all of his work was built using a flexible content builder that he made using advanced custom fields, but I believe he's moving a bit more to this. There's a recent project that he did, which I don't know where it is actually. We go to blog Gutenberg block editor. Maybe it's this one. Anyway, he's got some documentation in there, kind of if you're looking at building your own blocks. Essentially, you will need to know some JavaScript, well, probably a lot of JavaScript, some PHP and then some HTML and things. There are some tools that are going to be easier for people going forward. There's something called Block Lab as well as advanced custom fields when it comes out with its 5.8 update in the new year, will allow you to pool your ACF or advanced custom field data or custom metadata into these kind of layouts. So it's a good one to have a look at is Bill Erickson's site. So it's kind of an example of what can be built using kind of existing technologies and working with Gutenberg going forward. So hopefully that's given you a bit of an insight into kind of what's happening currently. I'm no massive expert on it, but I was pretty hesitant. I run maintenance for about 85 websites currently. 27 of our ones that we update weekly, updated on Monday, and we only had two issues. One was the WooCommerce issue, which wasn't necessarily related to it. Another one is a problem website anyway, so we were going to have issues with it. One thing we did make sure before we updated was to install the classic editor just so that in case something went wrong and make sure we had backups, obviously, that the content was still kind of kept in the same environment, and then what we'll do in the new year is start kind of migrating their content across into these editors. Once we've done a bit more instruction and kind of told people how this works and how it's going to kind of benefit them, we'll probably start from the post type and then move back into pages later down the track. But some of our builds going forwards will just be straight Gutenberg. Builds now as well with the custom blocks that are coming next year. Things like Beaver Builder and Elementor and those kind of page builders will eventually, instead of having their own whole markup system, will eventually move into the Gutenberg kind of environment. And while those still be their own editors, the architecture around it will essentially sit all on a Gutenberg type framework. So there should be kind of more capability across moving between editors and things like that in the future. And it also means that plugins only kind of have to develop for one framework. Yoast only has to kind of write one meta and not do something for Beaver Builder, not do something for WC Bakery, Visual Composer and those plugins, they can all kind of tie in to the one ecosystem which WordPress is building over the course of the next couple of years. I think they still have their place for advanced layouts. I think for things like home pages, landing pages and things like that, I definitely think they have their space at least at the moment. But I think probably after a couple of years time, once we have more advanced blocks, even with the free plugins that are available now, two weeks or a week after launch, you can still do a lot in Gutenberg that you can do in page builders. It's more about sort of separating rows and columns that isn't kind of popular yet or possible yet, but I think it's hard to know everything has its place, right? I mean, a lot of things have existed in the WordPress ecosystem that are not in core still, so I still think they have their place. I think they'll probably be moving to more like a landing page type builder rather than the actual core page builder and go from a marketing perspective. That's that. Cool. Otherwise... Alright, maybe catch me after if anyone has anything else.