 Yeah, it's fun. I'm super excited by all the stuff. Let's fix it. Not right now. I'm going to give this talk first. I need to talk to Adam afterwards, but I should focus on it. OK. Is this working for the live stream? OK, great. That means a lot of that conversation was on the live stream. Awesome. So, hi. This is Introduction to Gutenberg Block Development. My name is Josh Pollock. I'm the Founder and Lead Developer at Caldera WP. We make Caldera forms. It's a drag and drop responsive form builder for WordPress. I've been a WordPress core contributor since WordPress 3.9. And so I've been doing this for a while. Key fact, I'm totally from Pittsburgh. I was born here and I moved back in May. And our company now has an office here. So really cool to be at for the first time. This is my second time at WordCamp, Pittsburgh. This is my first home town WordCamp. So really neat. You can follow me on Twitter at Josh412. As I said, before we started, these slides are available at this link. And there's a ton of links, like all the example code from here that I'm going to show you today is in a plug-in, which I'll have a link to at the end that's on GitHub that you can copy. You can study, you can copy, whatever you need. So we're kind of at the mercy of the quality of the monitor, but you can pull this up on your own screen by downloading that. Today, this talk, everybody's welcome. But specifically, I wrote it for people who are just starting like, hey, I might need to make my own block. What does that mean? But we're going to start with why Gutenberg is happening, what Gutenberg is, when Gutenberg is happening. So that's important for everybody. And this is, again, developer-y-facing. These are all presentations that I would recommend if you're looking for a very iBuild websites. I edit content with WordPress-type introductions to Gutenberg, not for developers. And if that's something you need or you need to send to other people, GiveWP has a whole resource they put together for WordCamp Miami that was a good introduction. Gutenberg.courses, there's a few courses there, but one of them is specifically introduction for site builders from Joe Casabona. Nate Ingram from iThemesTraining is here. In that talk that he gave is really good. Just on getting ready, there's a bunch of stuff on iThemesTraining on it. I did one of them on how to use Gutenberg to improve working with clients. So also, this is my dog, Josie. This is her super excitement. And this is kind of me on this Gutenberg stuff. Because it's really, for the first time in a while, WordPress has a fun thing in it for developers. So why what? When? What is this Gutenberg we speak of? And I want to preface, this is just like my opinion. I don't represent the Gutenberg project, right? I work for Cal Airforms and I've contributed a little bit to the project and I've learned a lot and helped people learn about it. But this is my read on the situation, right? So why Gutenberg? I blog a lot, I traditionally, and it's almost always published on WordPress. I generally write in Google Docs because it's the best writing experience available. That's a problem, right? My, you know, our site has all these custom post types and all these meta boxes all over the place. So it's become kind of very inconsistent. It's a 15 year old platform. In Amd's keynote, he showed where we've come from. This is iterated over time. And the current system is not very what you see as what you get. It's very unstructured. The problem is people like me with no sense of design, no sense, you know, no real SEO background can just type anything into that box. Well, that doesn't make sense in 2018, right? We need to have consistent structured documents so that way the SEO is correct, so that way they're accessible to screen readers properly that they can be indexed by Google and Bing or whatever. Also, the developer experience for WordPress. Look, I have a job, I have all these wonderful friends because of WordPress development, but like we need to improve it. And Gutenberg is a great step on that. So what is Gutenberg? This is the official answer copied from WordPress.org slash Gutenberg. But WordPress.org slash Gutenberg is a front end implementation of Gutenberg explaining what Gutenberg is, that you can move stuff around in all the little blocks. So I really recommend if you're like, what's this Gutenberg? And we'll get more into this. Go to WordPress.org slash Gutenberg and learn about it by playing with it. So I like to think of it as a user interface framework specifically for WordPress and Drupal now apparently. There's a Drupal module where you can replace the content editor in Drupal with Gutenberg. And that's a sign of good development if you could take your editor and pop it into another CMS. Clearly, good quality development practices have been done. So I think that as somebody who does react, view Aerovel development and then gets upset going back to WordPress, the Gutenberg stuff is the really good stuff now in WordPress. It's a developer experience that for me, I really like. I think that I've been writing a lot in Gutenberg recently just to kind of get used to it both on my mobile phone and you know, on my desktop. And I just think it's a more joyful way to work with content as a blogger. I actually want to write in WordPress now. And as a developer, this is the thing that I really actually want to write. When is Gutenberg? Gutenberg is a plugin. I think the most recent version is 3.9 and there's a just sequential release. So that means that when the 1.0 came out, I was like, oh, man, yeah, right? This is pretty neat stuff. But you know, when you do something for two years and constantly iterate, it improves. And it's been a community project. So people have really done that. So you can install it right now as a plugin. There's a call out when you install WordPress now in the new versions. You can also install lots of the pieces of it if you're a developer using NPM modules. I'm not really covering that. That was in my work at Boston Talk. And so I was a little bit more advanced, but that's an option, which is great. WordPress 5.0 will have a Gutenberg-powered WordPress post editor. So the default post editor for posts and pages and then you can opt in for other post types will be Gutenberg. And in the future of WordPress, other features of WordPress will be powered by Gutenberg. Nobody don't get asked for a more specific answer than that. That was supposed to be a shrug emoji, but I don't know. Character encoding. It's a box now. It's a minimalist emoji. And WordPress 5.0 will be released when Gutenberg is ready. So let's start for a second before we get into this about editing content versus displaying content. I've been talking about Gutenberg for a while with folks and this is the biggest concern is like, what happens to my content? And I'm like, that already exists in content. So let's talk about what it does, right? To understand that. How to answer that question, right? What happens to my content that pre-exists right now? You have a WordPress site that's shrugging long. It's got 100 posts on it. There's a whole new editor. What happens to your content? Well, keep in mind it's an editor. So this is, you know, my personal site, recent stuff I've been publishing with Gutenberg, right? You can see here. It knows. This is the same thing that Elementor and Beaver Builder do on Page Builders that I've worked with where if the Page or Post has been edited with Elementor or Beaver Builder, it knows and you see it here and then it automatically opens in that editor. Gutenberg's the same way. These are older articles that weren't written with Gutenberg. So I can upgrade them later. WordPress VIP has a plugin called Ramp that helps you do this in mass or you can do it one at a time. But these ones are just gonna open in the old editor. These ones will open in the Gutenberg editor. You'll see at the top the add new button that you're used to just being a button has a dropdown, Gutenberg classic editor. So existing posts, remember this is just an editor. So nothing happens to your existing content just by installing the plugin by upgrading to WordPress 5.0. So and I'm gonna work through that a little bit more technically now. This is a page contact page being built with Gutenberg. It has one, two, three blocks in it. This one is a paragraph block. You can't exactly see it, because this block is highlighted. Here, this is an image block. And its most important controls come up here and then it's over here in the sidebar. I'm focused on the block and it's like the alt text, the size, the alignment, that kind of stuff. And then below it is a form block from Calera Forms. I use this little thing to switch to the code menu where it actually shows you the source. This is what's being saved in the post. Like this is the actual post now. I'm gonna jump through that a little bit. Some highlights. The top was a paragraph block. You can see that it's automatically marking off where its paragraph block is, but there's nothing fancy about saving what's the content of the paragraph block. It's in a P tag. So semantic HTML. How do we represent a paragraph in HTML? Paragraph tag. That's how it works in Gutenberg. These little ones right here, some of the data doesn't make sense in HTML. So it gets put into these little comments here. So in the case of the image, the caption gets put in fig caption because that's how semantic HTML works. But this is some extra information up here that just gets saved right there. And then if you look at this one, this is the form block. That's an example of a server-side rendered block where we already had a short code for showing a block. So we built, for showing a form, so we built a block that just selects the form and then uses exactly the same PHP function to render it. So we've rendered, we've done what's called a render callback here. And so this form ID is passed to that. And then we render based on the ID. And then you'll notice there's like an empty basic paragraph block down there. I'm gonna get more into all of this stuff. Because now we're getting to creating blocks. We're gonna walk through two very basic blocks real quick. One's a more complicated version of the second one. I went the wrong way. We're gonna be building static blocks. We tend to think about Gutenberg blocks in terms of static and dynamic. This is a little tricky. But the real question is, when does the content of that block change? So static blocks, for example, the paragraph block, to change what the paragraph block says, you go into the post editor and you change the paragraph and then you click save. Whereas a dynamic block, content changes for some other reason. An example is, if I enter the recent post block into my page and hit save, that's gonna show my six most recent posts the first time you view it. Two weeks later, and I've rendered three more posts, that content is different. It's dynamic. The data, because there's been more recent posts. We're gonna stick to static blocks because we're gonna make things easy. But dynamic blocks are really cool. Is that you can do eight most recent products in the same category as this post, that kind of stuff. So let's make the block. When we think of blocks, there are five paragraph blocks on the page. Those blocks have the type, core paragraph. Core being the namespace, word press core, paragraph being the name. So it's a type of block that's registered in the system and then we can have many of them in our post. So we're registering a type of block when we say we're building a custom block. There is a PHP function called register block type. That registers blocks. The most important thing as it does is associates the block type with assets, JavaScript and CSS. You can define block attributes, the render callbacks that I just talked about, meta box compatibility. The handbook documents all of this. Let's walk through some of it. First thing this is doing, checking if register block type, that function exists. Don't assume it exists because it doesn't in word press core currently. Check that it exists so that way this line doesn't throw a fatal error and also you're not running on necessary code. If Gutenberg isn't present, stop loading up Gutenberg stuff. This is all WP register script, WP register style. Nothing new there. But note that we're not in queuing it. We're not telling it to load, we're just registering it with the system. And then let me skip to the next one, which zooms in on the bottom there. These are, this is editor script, editor style, style. These are the handles of the scripts that we registered with WP register script, WP register style. Gutenberg figures out when to load those on itself. You'll also notice that it has a name. Do you see the slash here? Before that is the namespace, after it is the block. Blocks have to have namespaces. This is similar to custom rest API routes have to have namespaces. That way if I make a block called form, and you make a block called form, we don't have a collision because we use different namespaces. So both of the blocks that I have, I'm gonna show you today, have the same namespace and a different name. And this name should never change because it's super important. It's meaningful. What is how is it meaningful? This is my style.css, which gets loaded in the front end and the editor, because it's declared right there. I've kind of shrunk down that last slide here on the left. And then this is the CSS. WP block slash basically what it says there, right? This is a formula. So I can now target any block of this type by wrapping it in my CSS selection in this class. So that allows me to target specific blocks that belong to my plugin and not mess with other blocks. That's really neat. I have absolutely no qualification to talk about applying CSS and design for blocks. So I won't. That's how you load up the CSS sheet so that's how you know your selectors. Here are three good talks on design for Gutenberg that you can click on when you download the slides. From Michelle Schwab, from Tammy Lister, who you should read her blog, anything she writes. She's one of the lead designers for Gutenberg. Kevin Hoffman, one of the organizers here today, his WordCamp San Diego talk, talks about all about the front end and stuff in Gutenberg. So really neat stuff. So there's also a JavaScript function. The rest of this talk is basically in JavaScript. Called register block type. And this is responsible for at least block name and category supports, keywords. We'll look at those, but also they're really well documented in the handbook. Edit callback, save callback, defining block attributes. I keep putting a star next to that. I promise this is important and we'll get to it. But let's do some simple stuff first. This is my JavaScript function. We're gonna kind of zoom into different pieces of this. That, I've taken out all the commenting here, but see register block type, exactly the same name that we saw before, the name spacing and the name convention. I give it a title, I give it a category. I have an edit callback and save callback. The edit callback creates the edit interface for your block, right? Editor, okay. Receive props. It gets this object that has important stuff in it. It's called props. We're gonna, it has the class name. So I keep making this big deal about that class name and how that glues the whole system together. You don't have to remember in your JavaScript. It just comes out as class name. It can't be called class because this is JavaScript and class doesn't mean a CSS HTML class. Class means a class as in a thing that creates. You know, that is polymorphism and such in objects. And so, in order to avoid that name in React, which this is built on top of we use class name to represent in HTML what we use as class. And so, that's the class the block is wrapped in is selected is either gonna be true or false based on whether or not the block is currently selected. So every time that gets selected or unselected we have an opportunity live in the, this is all updating in the browser dynamically without refreshing the page. There are other props which we'll get to. So, this is my edit function, very zoomed in. This is this function element which we'll get to in a second creates HTML elements. What is this? This is of the type P. So it's a paragraph. It has one HTML attribute class name, props.classname and then just the string thanks for reading my post about Gutenberg. And notice that it's in a side of a function. So, we, I just raced through that because it's introducing two new things and I wanna talk about each one separately. One of them is this wp.element.createElement that creates HTML elements. The other was one of these translation functions. WordPress and PHP has all these translation functions that you put in a string in your native language and then your text domain and then somebody else if you know my plugin is in American English, somebody can come along and do, you know, French Canadian, French English, French, French, Spanish, right, and that's powered by these translation functions in PHP that have now been reproduced in JavaScript. wp.element.createElement is really what's important to us now. This creates HTML elements dynamically. So, instead of printing it once to the screen and then you have to re-render it, this does all of that for you based on conditional logic as the state of Gutenberg changes with a lot less work than making it yourself because under the hood it's actually React. So, you've already started learning React today. You don't really need to learn React, but I kinda recommend it. So, let's walk through this a little bit tighter. Element equals wp.element.createElement. So then, all of the new Gutenberg scripts are when Gutenberg is loaded are gonna be available at wp.something. So, it's just easier instead of every single time going wp.element.createElement to put it into a variable. So, that's what I'm doing. This is I kinda cut the rest of the block out. Seven, you'd see it's creating, what type of element does it create? Right, ignore the HTML attributes and then this string that it puts at the end. You can't just type HTML here. It's gotta be a string, but, or an array which we'll get to. This is in the editor, that block, which you can kinda see is, right, we saw that CSS, which was applying a green background. And because my edit and my save call back look exactly the same, I've achieved what you see is what you get for this little like, hey, thanks for reading my post about Gutenberg already. So, my goal as I go on with this is to try and keep that what you see is what you get experience. This is that same side by side except for this is the un-rendered post content saved and this is the rendered post content, right? This is the end of that paragraph block. That's just some, oh, it's some feed tax and ends there. This is my block starting here. Do you notice that the comments are gone? Those don't get printed to the screen. That would be bad, right? Because they might have some privileged information in them that it would make your markup messy. They get stripped out, but my write this class is still there. So that way my CSS selectors, other types of selection can happen. When I said in my last slide here, this has to be a string. Well, that's a problem because sometimes you want to nest other HTML inside of other HTML, right? If you want to do a list. So it can be an array, okay? So, instead of having a string in that these two are like the ones that we had before. In fact, this is exactly that one. I just nested it inside of a diff. And then, so this has two children to it. A paragraph and then a link. And I can't just type down here, open HTML, a, ref equals, Gutenberg will in React will actually just print out the encoded characters there, the HTML, not actual HTML. Instead, I assemble a link element, right? So I use the type A. It has an HTML attribute of ref, href, right? And that's the link and then this is its text. So if I wanted to give it an ID, I wanted to give it aria described by, I would put it here. Everything that I've done so far, by the way, if you have WPCLI, which is the command line tool for WordPress, you could have basically done in these three commands. And I really recommend, I mean WPCLI makes WordPress development a lot faster, but if you're getting started with WordPress, WordPress block development, I really recommend just running these because what it generates has really detailed inline documentation and links to the online documentation for more. So you can kind of generate a basic block, read what it's doing, click on the thing and learn more and start experimenting for yourself. Also you get a basic block. It doesn't have like advanced build tools, things like that, create, Gutenblock, it's kind of better for large blocks, but for where you're getting started, this is great. So you just run these three commands. I have a blog post on my site about how to do that. It's pretty basic. So that was a block, but that block was a very fancy way of saving some HTML into post content that you couldn't make any changes to. So I couldn't, right, it was just like, thanks for reading my post about Gutenberg, click here to learn more. Well, where should I have them go? Shouldn't it be like, thanks for reading my post about object oriented PHP, right? I need to have some settings to this thing. So we're gonna make a less basic static block. This one has some settings. That means that we need to save some data. We're now talking about block attributes. These are the editable fields of a block. They can be stored in the HTML like we've seen, they can be stored in the HTML comments like we've seen. This is especially great for shortcode like blocks where we're gonna server side render it with that render callback. They can go into post meta out of scope for today, but you can just say source equals meta because sometimes you need to query information from the database, right? So you put it in post meta. I mean, you can get as fancy as you want, right? It's a form, save it to some other place, right? Like whatever your individual needs are, right? It's open source software, figure it out. So let's start looking at, I've cut up a little bit of this register blocks. This is my new block called action editable. And I have three attributes. We're gonna walk through these a little bit closer, but it's just attributes equals and it's an object literal. And it is indexed by the name of the attribute. So I have three attributes here. Text, link text and link. In this starts to show, this is exactly what you're looking at on the left and then the Gutenberg code editor for what it's saving on the right. And these arrows, right? The name, which we talked about is going to here. And then this is a text, the type is a string. So it's going to not allow like say an array or an integer or something to go there. But the source is text of the element with the selector p. So it's gonna look for children of this class here that are a p element and get its text. And if that doesn't exist, default value will be this. Gotta have a default even if it's an empty string. I lost about 30 minutes working on the example code to this of it was undefined because I didn't have a default. But we're doing the same thing here where we say selector a and then the text. So we get the text of this based on selector a. And then the third attribute is a little bit trickier because it is a, its source is attribute. So its source is HTML attribute and its attribute is href. So now my edit callback, remember I said props.isSelected is one of my things. I've kind of hidden away my editor. So it says if props is selected return this thing we'll get to that or this function content because I wanna reuse that in my save callback because I don't wanna write the same exact thing twice. I just wanna have a function. So my save callback is just function return content attributes. My edit callback is if it's selected do some stuff I'm about to show you if it's not do exactly the same thing it doesn't save. This is that content function. Notice I'm doing wp element dot create element here and I have div and this is exactly what we had before except for its attributes dot text, attributes dot link, attributes dot link text. All right, attributes dot text in P. Attributes this attribute is href, resource attribute, which attribute href and then I save it there. So this is saving it and creating my static HTML that runs in the front end. Notice that I added to my dependencies wp components. wp components is the component library, text control, select controls, category selectors. This is one of the packages that's used to build Gutenberg that you can reuse via this method or you can install it outside of WordPress using the NPM. So if I wanna just use WordPress as text control this is my text control for changing the call to action text, that's its label, that's its value attributes dot text, help, that's the descriptions, that goes in there and then unchange which we'll get to in a second. That's the function that runs whenever it changes. Let's back up a second here and let's look this is the form that gets created and you'll see that it's doing stuff like this has a, this label has a four tag on it that's associated with the ID. This is my help text which has an ID which then the ARIA described by is done. So all that work that I wanna make sure I do every time and I obsess over and often make mistakes on to make sure that my HTML is valid and accessible, like WordPress is handling that for me now and if the standards change in the form in the future on how to do this correctly, hopefully WordPress and I trust WordPress core will step up and update on those. So I'm not just maintaining my own component library, I'm getting a lot of work of other people who are like better at accessibility testing than I am, for example. So I glossed over unchange. This is the function that runs whenever the input changes and we use it to change the value of the attribute. We can't just write attributes.text equals new value. That will not tell Gutenberg, hey, update this value in your internal state. If you are a React developer, you might be familiar with set state. This is props.setattribute. It has the same API as set state in React, not a coincidence. So whenever my text input changes, see I have props.setattribute, text equals whatever the new value is. Gutenberg handles kinda getting that out of the input of off the event and everything and so I just pass it here. So in this case, I made three functions because this is academic, I would have one generic change handler into the real world, but this is kinda good for getting started if every one of these has an unchange handler. So their value is attributes.link and whenever that changes, this tells Gutenberg to update the value of attributes.link. In React, data flows down. There's only one way to take it back up in that in this context is props.setattributes. That is a lot of basics. This is example code is available at this link on our GitHub. Both of these blocks are in a WordPress plugin. WordPress.org.setattribute has a really good graphic on the GPL, the open source license of WordPress. And the second freedom is my favorite, that you could study how the program works and change it to make it do what you wish. Enables this idea of like, I learned all this stuff by reading other people's code. It's the same way I read, and creative writing was reading other people's stories, other people's books, and figuring out how they did it. So take a look at this. Take a look at more complicated blocks out there as you learn. Use WPCLI to do it. Ask on the support forums on Stackout Exchange and study other people's code because this is really fun stuff. What I would recommend to you next, look at PHP render callbacks. Those are great for migrating short codes or something like, you know, like it's just better to render in PHP. Plug-in sidebars. That sidebar can, that we looked at, that had the extra settings. You can add a custom sidebar there. So Yoast is doing really cool work where on the side, you'll see your content analysis in real time. There's a cool plugin called Drop It that gives you a viewer for Giffy and Unsplash, and then you click and it inserts it in, but it's a plugin sidebar. So that's instead of building a block a different way to extend the editor when it's not, you know, in the context of the location. Plug-in sidebars are great. I kind of glossed over the fact that you just learned a bunch of React for me. React's documentation is interactive and very well written. So if you want to get serious about Gutenberg block development, React and then JSX is the templating solution that create uses create element like we looked at under the hood. So it's a little bit of a more scalable way to write this. WP.data is an API in Gutenberg that is the state management. So for example, if you wanted to do something every time the post title changes, like say analyze the quality of the headline, you can use WP.data to subscribe to the title change or to the change in the categories. I mean, that's built on top of Redux, which is a pretty popular state management library that I don't know I mixed feelings about, but you could read some of my upbeat feelings on there's a JavaScript for WP.com had a conference and my talk was specifically on WP.data Redux. So that's a really good thing to learn if you're kind of, I would say this is on a spectrum of complexity, right? Like go here, this is pretty easy, plug-in sidebars getting a little bit more like this is backing up and learning some new stuff. This is starting to get into the advanced stuff. Let's start reading some stuff and then kind of the hand looks great, read other people's code. My name is Josh Pollock, you can find me at Josh4n2 on Twitter, Cout Airforms is our plug-in. It means a ton to me that like people got up this early in the morning and came out here and showed up in a room to hear me speak. Thank you so much. Okay, I have a couple of questions, time? Probably, right? So at the beginning of the talk, you said that Gutenberg is available as a plug-in and WordPress 5.0 will be available when Gutenberg is ready. So then that makes a question, how stable is Gutenberg plug-in? Okay, so the question I'm gonna repeat so that gets on the live stream is Gutenberg is available now as a plug-in and it'll be in WordPress 5.0 when it's ready. How, what does that say the stability of the plug-in? On a few releases ago, they said that the, this was the features. So they weren't gonna keep, there's been things that have been removed, things they've gone back on because they were just mistakes. And as of a couple months ago, the commitment is as much to backwards compatibility as possible, but like it still hasn't shipped. So it's very stable. I, to give you the most truthful answer, I haven't installed on my personal blog. I do not have it installed on our company site. You don't trust the stability yet? It's partially that I don't 100, I actually would trust the stability. It said it's a fast update cycle and our company say like checking updates and these things become a bit of an issue. And also it's a retraining step, right? And because the interface has changed a few times recently, like I don't have to retrain people as it changes. So it's getting more stable right now. And I think now is a good time to load it up on your staging site and try it. Were these things have changed? Have you had to refactor anything that you've done like an example that you've seen? Yes, I did a version of this talk in May and not all that information is accurate. We had a function in the first, we were one of the first plugins that have a block that shipped it, you know, whatever it was built on had been removed and I had to redo it, right? And it was better. Like we have that live preview of the form. I spent a lot of time hacking that together. I could have now done that in like four lines of code with new stuff. So it's been improving and it is relatively stable now but it's still in that final phase. Did you have a question? Well, I mean, I think the evolution will be that they'll be good and ready things with a lot of this stuff already baked in that you don't have to do this development. I don't see how it's gonna make it easier for your client. So the question is, won't this stuff be baked in? Right, like why do we have to build custom blocks? Well, so WordPress Core ships with a basic set of blocks, paragraph, gallery, embeds, audience, right? Like all the things that you need recent post-recent categories but does anybody have a WordPress site with no plugins? Ever? WordPress Core can't solve everybody's problems. It would be a nightmare. So that's why we have plugins. So this is a talk, like this stuff is for when you need to create a block that doesn't exist because your client demands a certain, yeah, it needs a certain thing for them or you're a plugin developer who, hey, wouldn't it be neat to do this? So instead of a custom post type or pods or anything, this is gonna replace all the short codes gone? Yeah, so instead of like, hey, I'll make a custom short code for you that'll do, you get your theme, you get your plugins together and you look at it and you go, okay, that don't really exist. Let me write a custom short code. That's the analog of what we're talking about right now is, okay, I need a thing that has three settings in the editor. Instead of writing short code for it, write a block on a small scale and then for plugin developers, anybody out there or theme developers who wanna have a companion that has, when you install ours, we have special CSS for the gallery block to make it look that way or we add these five blocks, we have this plugin for five blocks for like, ooh, commerce products or something like that. What about follow-ups? Have they addressed that officially? Yes, there's a multi-column block that you nest other blocks in. Well, honestly, I don't play with it because like you said, how quickly they push their mind about things and then you have something converted and then you have a big mess on your hands. Yeah, I mean, that's slowing down but that was definitely the case in the past. So how safe is it to have those types of blocks with code visible with the PHP? Don't you think hackers can get into that with React? There's no code visible. All of those little things, those little comments, those do not show up in the front end. They get stripped out. So when those get saved in the database with the post content and then when it renders out, that gets stripped out just like you don't see a short code in the front end. Right, if you look in the... It's stripped out a lot of the content that's bloated over the years inside WordPress that kind of like... No, no, that would be bad. It's not going, by default, it's not going to do anything to existing content. When you open a post, if you choose to open a pre-existing post in the post into the Gutenberg editor, it will open in the classic editor block, which is the current post editor wrapped in a big block and then you can choose to convert it to blocks or just let it be. Okay. But if you have a post that has no Gutenberg blocks in it, basically the quick version of how the parsing works is it says if has blocks. There's like Gutenberg has blocks as the name of the function. If that's true, do the block parser. If false, don't do anything. Does that make sense? It's going to be easier for novice people. Yeah, right, so this is a developer talk to build blocks. You don't need to build your own blocks to use Gutenberg. What I'm saying is, you know, it's not going to be WYSIWYG front end, like Wix is building stuff. You can't compete with that. Okay, we have time for one more question and I'll be having to talk to you later. Yeah, so I was going to ask, as an entrepreneur. Yeah. Why are you excited about Gutenberg? Are you excited about Gutenberg? Okay, so a couple of things. One, I would self-identify both as an entrepreneur and a nerd developer. So like, right, like I own a company but I'm also the lead developer and we don't have a huge team. So I do both to the development. And so I love this stuff. But as an entrepreneur, I maintain a ton of stuff that I don't want to maintain. Right, like our plugin's kind of built on a framework of its own design on top of jQuery that I'm now kind of replacing with this Gutenberg-y stuff. So I get a component library that not only is very good and easy to work with, I don't maintain, pay to maintain. And also, I believe that the more that plugins use, the more that users get used to Gutenberg, which takes time. And the more that plugins reuse Gutenberg components and lay their system out like Gutenberg, the more intuitive it will be for people to get used to new plugins because they'll be using the same basic interface, right? If you have to learn a whole new interface, that's harder than learning a different layout of a similar system, mentally. So I believe that as I adopt Gutenberg conventions more in my interface, that it'll be easier for people coming from Gutenberg. There's a bit of a time lag in what I'm saying, obviously, to onboard. So it'll be cheaper for me to develop better quality product and it'll be easier for my customers to onboard. Right, and the hardest part about getting the growing customer base is some of the people get confused when they start your product and stop using it, right? So you need to get people past that hurdle. So as an entrepreneur, and especially in a small business that can only afford to do so much, it makes me really happy to see that. You know, like I had this mind blowing moment when I first learned Angular and then learned like Laravel and React, like, oh man, the framework can do all this stuff for me instead of in WordPress having to develop my own framework around WordPress. That's all the time I have. I'll be around the rest of the day. Feel free, I love talking about this stuff. And I'm happy to answer any other questions. Thank you so much. So you knew the answer before you started the question.