 Hey everybody, my name is Marty and I work with Sideways 8 here in Atlanta and we primarily build marketing websites and I'm not so good at marketing so fortunately I just get to do plug-in work and development with them And so as we all know Gutenberg is a big thing that's coming to WordPress and is Um purported to change everything according to the developers of Gutenberg Has anybody in here had a chance to use Gutenberg? Raise your hand cool So I Guess let's just go into this So historically Um, sorry, this is my first talk and just got a wave of anxiety. I don't know if anybody has to deal with that Right, okay, so so Oh man, I do apologize No, no, no, I'm I'm good. Um, yeah, so Yeah, let me just go back. So according to citation needed before the printing press books were handwritten The process was really slow and expensive The power to write books resided mostly in the religious and Marner key systems in old Europe so you had to be wealthy educated and basically in the Illuminati to even have access to information so It was a really close thing Prior to the printing press There was no Consistency and information anywhere like nobody had the same thing any book was duplicated and handwritten Mostly by monks So then the black death basically wiped out Europe and so the educated elite Dispursed over time the cost of books to to have them manually reprinted Was extraordinary and then so along comes Gutenberg who took pre-existing tools and Developed the movable type printing press and the impact of that Brought about the scientific revolution in Europe and also really shifted the power struggle away from the ruling class and democratized information and made it public so I thought The project name for whenever you're going to write a code is interesting because typically it's not arbitrary and So it sounded really ambitious to me because From a quote from I'm bad with names, but Matt the dude who wrote a Word pass wordpress According to him, it's time for wordpress is next big thing that That thing helps us deal with the challenges and opportunities and the thing that changes the world and So so when I hear that kind of talk, you know, it sounds really flowery marketing kind of words. It's like You know, we all use wordpress is it really going to change the world So anyways, that's like my initial skepticism and Just getting into Gutenberg because there's such a big sales pitch Right from the get-go and what we have today to look at is really minimal Like if you install Gutenberg, you get what would appear to be a Really lame page builder Um So so yeah, you know the first steps you want to go and download the plug-in because it's not available and it's in a rapid development And although I've been doing what I can to keep up with it I'm definitely not a comprehensive expert, but Have been able to walk through and figure out some basics So if you're gonna install it you want to install it to a test server not a production server The roadmap Seems more finalized with every release and the code looks pretty stable But there's no telling what could or could not come out between now and release time but So I think we're at WordPress 4.9.5 and so five is definitely has to be close When that does come Gutenberg ships with wordpress and it's part of core at that time um So Back to the bad page editor Installing Gutenberg actually replaces the post dot PHP back in entirely so What you're used to you know, everybody's seen the one on the left and you know, this is what WordPress has been working with At least ten years now And this goes back to How we've always had to make HTTP requests over the internet so This form when you load the current page the whole page is Just full form wrapped inside of this HTML form you hit submit your post Wordpress and the data is processed You know so that technology has been around since the 90s and Nothing wrong with it, you know, it works perfectly well for most things but It's certainly not the way of the future Yeah, so you save posts So the new interface is again a total replacement So the old editor is gone. There's no form tag. This is a dynamic JavaScript user interface that is built with react JS That's an open-source Application sort of framework for JavaScript So Gutenberg introduces a new concept to WordPress which are called blocks and The intention of blocks are to unify What would otherwise have to be accomplished with something like short codes or writing a custom plug-in or a widget or a menu Really most of the current WordPress concepts is attempting to unify and replace was a singular API so You have basically a Way to control any part of WordPress Ultimately is the intention with blocks So it's different too is when you save data in the new editor it actually works with the WordPress JSON API And it's totally compatible with that Which is pretty cool because that decouples the need for WordPress the back end and the server to necessarily be on one place or one server so Yeah data can communicate over the API in that fashion The screen here is basically Two important bits. There's the content editor and then there are the advanced control region on The right hand side At a glance it really doesn't look any different than the old page necessarily we have what so there's a meta box conversion if you have meta boxes that Don't update the document object model. So say if it was you know, just a traditional form tag or something Um Those theoretically compatibility should should be working inside of Gutenberg if if you're doing something tricky like You know clicking on something and then hiding another form or value or something those probably aren't going to work out of the box unfortunately Um Right so when you install Gutenberg you have this interesting little widget box here Has anybody used page builders before? Right, I thought this was interesting. We use a beaver builder a lot at sideways sideways eight and the block interface It basically looks like they Ripped them off, but That is WordPress copied beaver builder, but I mean it could just be a design thing but Like I mean they do basically look identical So another change was blocks because the fundamental shift that's happening here really is how WordPress is treating the post content field so Keeping in mind with how it's always been and you just have the form so you have your post title post content And then the other meta attributes to get updated All the content is actually Still just old static HTML that sits, you know in one block Going forward that's not the case it We're taking the content and giving it data structures through blocks, so kind of hard to see here, but So what's happening here if you can see on the right screen, there's a block up at the top and says cool paragraph block and An image block right below it that markup gets stored into post content With the definition of the WP colon. It's the block name and the options are stored as a JSON object Embedded straight into the code so This is interesting because It's introducing a new way to categorize and Articulate data within this same embedded structure, so this opens up like a lot of possible opportunities because Sigma Ford right like WordPress right now. This is just a website. It's being served online, but Say if you had a mobile app that was native to interpret these markup structures I would see it really being possible in the future to have Basically a lot WordPress adapters that read and Like articulate data that's meaningful to the particular device that it's on And I think that's sort of what the intention is when I say that they're going to change everything is that they're treating Like the idea of the post is going away or page so the page will be a collection of structured objects or a post will be You know a collection of structured objects as opposed to The traditional way where you go in and you just make a custom post type and we like like we're gonna have a book post type It'll have properties like an author or publisher these sorts of details Blocks will give us the ability to have all that inside the block itself Um No, no the blocks won't create the post type but the way that we've historically used post types I feel like maybe changing in the future because When you turn on Gutenberg, right? The editor is applied automatically to post and pages which kind of Blurs the distinction I think between the two because If you have a page, but it's really just composed of blocks and you have a post. It's also just composed of blocks It really depends on how you're using the data structures that are necessary to you because Right now like I'm saying we if you had the custom post type in a book for example And you wanted to tie that to another piece of data Um You know you'd have to make a post type and do all that but since it's just a block The block itself has the structure within it that would say it's an author or a book and then contain that metadata And then that's embedded within a post. So I'm not a hundred percent sure what the implications are for that It just is definitely modular modularizing what currently exists in the post content. So I don't think post types are going away. For example, so we have the shared blocks which are Basically a global state. So You change it here. It'll change anywhere else on the site and the way that works under the hood is A new post actually gets created with the WP block post type and So that post itself Um, you know as individual and then there are just references to the post type I'm sorry back to to the block itself Sorry So probably both Like cuz it like what's what's gonna happen I mean, you know, there will be gaining advantages and then probably learning new territory and then having to So what what code do you work with primarily PHP or JavaScript? Right, so that's gonna be a big change for most developers because WordPress has always been you know hardcore PHP, but This is a hundred percent JavaScript. The only PHP involved here is Registering the block definitions which load the JavaScript files So if you plan on working with blocks JavaScript is going to be mandatory. So if that historically is like outside of your work set Unfortunately, that's one of the things that you're gonna have to do but so If you do work with JavaScript the block system and React itself Have you has anybody works with react? right, so Basically, it's it's like a framework that lets you have living applications on the page or whatever and it has dynamic state and And Every piece is a block composed of another more modular piece So so if you use the job, well, let's let's skip to that because I have an example later I think I've already said that one so So yeah, I'm gonna go over how like we actually go about creating a block And so I would recommend basically cheating You know I'll go back to that, but so there is a Package that's written in node JavaScript called create Guten block and you can install this and What it does will actually compile a Gutenberg block framework So I have this installed here Okay, so on my project here. I have Gutenberg. That's the plug-in and this word camp block This is what the plug-in will actually spit out when you run the command create Gutenberg block seems the Alt tabbing has freaked out the computer But anyway, so the basic process is that you install this tool and I mean you could create Go about it manually, but the process is really repetitive and the official documentation recommends this particular plug-in anyways, so So you want to go to the actual plug-in directory which we had pulled up I had it installed to our you know just plug-ins You run this command create Guten block then whatever You know you want to call it Command will run and it actually builds our generator and we get a new plug-in installed to WordPress that we can go in and install or activate the main file is This init dot PHP was inside of our source directory And like I was saying earlier all this does is actually in queue The javascript assets so we in queue our block assets and block editor assets, so what that means is We have to in queue Control javascript that works was the editor in the background as well as code that handles the front-end Rendering Yeah, let's skip to here so our main file is This Gutenberg blocks file So this is our main entry point so npm start That's the script that ships with The create Gutenberg block plug-in there And so so basically we just have to run that and we are actively building and listening for changes to our scripts here so the block is this file here and The commenting is really great on here So definitely helpful, but so what's happening is our block definition Reloading style And so this is cool. The project comes bundled with a SAS compiler and everything out of the box So you don't have to configure anything and you can just work with SAS or other pre processors if you like some This is our international is language function, so if you use translations and WordPress they'll also work with Gutenberg Out of the box the the function is basically the same. It's some the double underscore and Open and then your language and The text domain So the main function here is register block type This is how we actually define What our block is going to be called so the title icon and category and keywords these will affect So yeah, so those parameters affect what this block definition here is so we could Change it to whatever We save and that should rebuild Yeah, so it listens to changes and recompiles automatically So our next function here is edit so Edit actually refers to this mode here So we have the block here So JavaScript actually has to define the HTML that's going to be printed out when you add in a block so we have our editor block and Whatever's in this Code here will change how the block gets rendered here on the back end The save function It looks identical, but what it does is actually Sorry about that. Yeah, so the same function it is The function that turns the code back into the markup that we saw where it's the quoted Wp colon block name and the attributes the attributes are pulled out with CSS selectors I thought I had a link to that, but I may not Yeah, so essentially that's it This yeah, the same function will update what gets displayed back on the front end um So if you install Gutenberg and you Depend on page builders That's probably who's most likely going to have the biggest issues going forward because Page builders also typically embed content into Post content field so there's going to be competing actions between the two and So that's going to depend on the page builder and I don't know what the answer is for each page builder But basically the answer right now is no and it's the responsibility of Those plugin developers to make it compatible. I know beaver builder is They're definitely trying to make it compatible and I assume just for market's sake that the rest of Page builder companies will do that as well Because as far as I can tell this change is definitely coming it's not it doesn't seem like something's going to break the community in half and Specifically Again, I can't remember his name, but Matt that wrote WordPress he said there's not going to be a version of WordPress that doesn't support This mechanism going forward so there is no backwards compatibility for this So so Market competition is definitely a huge incentive to this project because All the page builders do a better job late But I don't think it's their intention to put them out of business at all It just the change is coming and the updates will have to be gradual in response from the community, but I Mean I think it's in the page builders developers interest to like make it compatible anyways because that's everybody's business But so so another thing I don't think Like Gutenberg is intended to be a page builder Again, it just sort of looks that way because it looks like they copied beaver builder So The intention The editor is only phase one according to the Gutenberg team Ultimately they want all of WordPress to work the way it does with the block system. So No, there's always going to be PHP for processing that happens inside of WordPress, but So so for example, you know, if you're writing a custom plug-in You're still going to have to write the PHP that does all the database processing or any of that but in terms of Developing for the interface. Yes, it's primarily going to be JavaScript and I'm sorry. Yeah. Oh, yeah. Yeah Yes, um, I Would go to the official react website. I wouldn't say it's necessarily Important to learn react in order to work with Gutenberg If you've worked with any kind of Like state system they all sort of work the same like a model view controller and update callback But Yeah, otherwise the architecture will be Yeah, yeah, there's really not a way around you have to you have to learn JavaScript and react probably No, so so the work will happen outside of the plug-in. Um, so Gutenberg When it integrates won't be a plug-in in this capacity. It'll be part of the core and so What we have is this this so The package definition here is set up to read the blocks from Gutenberg so This build file has access to all of the Gutenberg components So like if we just That's not gonna help us. We should read the repository for those So I don't know if I have an example here, but So no, I don't have an example, but they have a there's a color picker Component for example in part of Gutenberg And that exists on the right hand control side. In fact, like let's Pull that out. So, yeah, our right hand controls over here Essentially, all these are reusable in a context that would make sense. So these up, this is a color picker module component and So there's a component file inside Gutenberg and that's all it does is manage this color thing and you pass like the title attribute and Call back to how that's supposed to apply and so this would like link back to the JavaScript file and we would Tell it to read the color picker component and then do some action when you click on a color. So if we click red There's an event that fires so that we know that we clicked on a color and then we can do an action and update our block accordingly, oh So Yeah, so so that's uh, you know There's an official plug-in And the name escapes me, but Yeah, yeah, it's um late Yeah, so you can basically just disable the interface Yeah, yes, yeah when five ships you yeah, that's it. That's a classic editor. It's called classic editor And it'll just force the old editor going forward Which will probably work for a while, but I would say your lifetime on that is like a year or two at most because like because Yeah, cuz like the the community and core is well, I can't speak so go ahead There a couple comments that were like they would answer some of that question I have like Yeah, I mean let's let's go into questions the beaver the beaver builders and all of those I don't use page builders, but I've just been like obsessively researching all this. Oh my god What's coming down and how's it gonna take the sites that are out there? They supposedly are embracing it. I would not be surprised to see them do what they've done with WordPress and build on that So I'm less worried about that I Question about the plug-in I I just turned it on for a minute on my live site and when I converted to blocks It broke something. I mean I'm concerned about that, but I know we're gonna get down the road a little bit So it's gonna be different, but is the plug-in the same experience as Gutenberg like am I am I yeah? Yeah, so yeah, what yeah, so the Gutenberg plug-in is Actively developed they're pushing updates like daily and That plug-in is what the experience is going to be okay And then the other question that's a huge concern is we talk or we or Matt talked about how Gutenberg is going to you know Kind of democratize everything and this is great because what we're doing now whether it's us or our clients is We're giving people this big block of white editor space and we can't do fancy pants thing to your point about Moving off the beaver builder. I haven't been a beaver builder, but when I opened it up. It was like oh, this looks like square space So it's kind of right common thing But what happens with most page building sites built on page builders whether you're talking about Divi beaver Blah-blah-blah is code bloat and I'm a hack not a cup I don't code that much anymore. So I don't know is this gonna blow the code such that those of us that don't have crazy fast servers and Optimized out the wazoo and blah blah. Is it going to kind of bump everybody down to this? Oh, well, you don't have our Corporate blah blah blah resources. So everybody that's on a WordPress is going to be down here with with huge page page load times Yeah, that's what I mean not like the back-end code because I work a lot with website speed optimization And if you're not down there in two or three seconds, you know, give me a Divi site. I mean crazy So yeah So to your point on all that I don't know if Optimization has necessarily been worked into the equation for what's going on Yes, it will add Markup and potential boat bulk into the code There's no reason the structures can't be minified and compressed in some way But yeah, I feel like that's probably something's going to have to be addressed as the issue arises and persists as people go forward because it it definitely could possibly Have an effect on speed Well, so yeah, so When when you save the file it it rebuilds the markup and saves it back to the database so you have your html markup and you also have the JSON structure that wraps what the markup would be so I Um I It really could go either way. It doesn't necessarily have to be So so I mean I could see like if they continued to use blocks in a way that wordpress Like you're customizing the other portions of it And if you only have the necessary guts in the post content, you know, I mean It's hard for me to say what the actual impact would be like I can't see it causing a huge deal, but um, I Haven't thoroughly tested it, you know Right Right so many people don't really realize that they need to be doing this and you can always optimize any well, I Can optimize any side downward, but that doesn't necessarily mean any side can load in just like a couple or three seconds Like somebody came to me with the Divi example And I mean it was huge and I got it down to like six seconds instead of 17, but that's so That's yeah, that's I feel like that's a problem with wordpress like um and So so if you're making a theme and you're custom building it you could you know Like hypothetically get it down to just like one or two JavaScript files and minified CSS and like totally optimize your build but That's kind of impossible with page builders because there's no way not to get that extra bloat because You know, you're adding column structures and then sub units and Um Yeah, that's this that's a challenge in general like I don't think that they're addressing that right now So I think it's just something that we're gonna have to do what's going forward Yeah Yeah, so it should help WordPress remain relevant in the future I feel like that's really why they're doing it because um and on in his blog post He referred to wicks and Squarespace as their competitors in the visual building respect and Yes, so I guess when people say They were right, like isn't that DB's problem to build like a better System that integrates with Gutenberg because and I guess I want to speak from your experience because we both use beaver builder, right? Yes When I installed them over I disabled like a lot of modules, right because like some of the models I don't want clients starting sliders where they want I don't want clients doing certain things over they want right and you can disable by certain post types So I won't allow So are you planning like your own way to like You know At the core is gonna run with like 30 blocks, right? And so isn't it like are you planning any way to limit your clients to like help them scope it? So they just don't like end up with a flattening of different blocks and maps across the globe Um, yeah, I think there has to be a degree of hand-holding um at Really the best thing I could think is like you develop a template for them and try to lock them into it. Um because I mean, it's always a problem when like clients are going in and messing with it but um So No, I don't think you can like take care of that with like code Responsibility is it has to be like manual intervention and like making sure people aren't doing that um I mean, there's probably ways to Cut out access to it. Um, I know you can pre-define how the editor works per custom post type so You can you could yeah, you can definitely filter out blocks. Um but Just just as like general practice like That's like more work on me as opposed to trying to educate the person to not do that um So Yeah, that's that's just another one of those case by case things um Yeah, so so that's actually um The uh generator thing that we were looking at earlier What it does is actually build a new plugin. So you get a plugin in its own directory in your plugin directory So And then that's the framework that you can use to build as many blocks as you want Yeah, yeah Right, right exactly. So the first step is to get your architecture in place so that you can build blocks And so that's why we use the generator and so like we could call it some Cool image block or whatever right And uh, and then we go in here and actually start carving that out All right, right Yeah, so the the work camp block is what got generated Um So the actual block here. So this is our our template code when you run this you get everything you see here The block.js. That's our block So that's our template and entry point for where you would start doing customization So, you know, you would give it a name Something relevant An icon category So and these keywords are if you come up here and were to search for something, you know So Just that part right there gets you this far where you can have a block on here And then you go from there and start customizing it. So we have our edit function And you know, if you want one of the image there you would have the image tag and um Right so Yeah Yeah, so this particular architecture is set up so that um This block So you would basically duplicate this directory So each block would be its own sub component here and so so This blocks.js file and see how it imports this file So this is the file that actually gets built And so Yeah So yeah, this compiles and it actually outputs all the code into this file There's a production build command too that outputs minified code But in development you normally wouldn't do that So so yeah, this is the uninteresting part and this is the The part you actually want to work with So You know, we can just get rid of this and Save it and that will change What this is here, um Yeah, any more questions? Yes Right Um, so so yeah, that's still something that you can do. Um, so the render function for blocks, um Uh can be dynamic and you would actually have to set that with um php But so you can have it so that the block will render the php code dynamically And so if you need to like reference attributes or filled metas, um, like you could pull that in that way So like some of the old approaches will still work and um I think advanced custom fields is also trying doing what they can to make it compatible. Um With the meta box structure. So um So these are like our classic meta boxes basically and um They're support for them and if they're too complex, uh Those meta boxes need to be upgraded to blocks basically Anything else everybody good? Cool. Cool. Thank you guys