 Hello, my name is Cory McRill and I am a WordPress developer and I work on WordCamp.org and today I'm going to give you a brief little case that I use of converting all of WordCamp's custom short codes into Gutenberg blocks. So a little background on WordCamp.org. WordCamp.org is a WordPress multi-site network and every WordCamp event that happens in the world, including WordCamp Portland here today, has a site on that network and a site provides tools for running WordCamp events and that includes a bunch of custom short codes for outputting various types of contents. WordCamp.org has been around for 12 years, so there's a lot of legacy code. So like I said today I'm going to talk a little bit about how when we were deciding to make WordCamp.org ready for Gutenberg, we decided that a very good step would be to take all of these short codes that our organizers have been using for years and turn them into Gutenberg blocks because short codes are sort of the low hanging fruit of Gutenberg block development and if you're like me and you are traditionally a PHP developer and the idea of all this newfangled JavaScript React stuff is slightly intimidating, then I'm here to tell you that if I can figure out how to make Gutenberg blocks, so can you. So just a little bit about why short codes are like a really good stepping stone for Gutenberg blocks. Like blocks, short codes are already kind of street chunks of content, often dynamic content and a lot of short codes have various parameters that you can use to customize their output and stuff which maps very well to the Gutenberg concept of having this visual UI with Cypher and lots of little controls to modify things. And a short code already is itself a function that renders your HTML, which is a key ingredient. So let's take a look at one of the short codes for WordCamp.org. Every WordCamp site has a custom post type called Speakers and so every speaker at a WordCamp event is a post, I am a post, and this is a short code that will output all of the speakers in a list or grid on a page and you can see it has quite a few parameters that you can use to modify what that output looks like. Here's what the WordCamp Portland output looks like for the speaker short code. You can see each speaker in the grid has their name and avatar and description and there's a couple of things that the short code can do that aren't being used here. So when we were approaching converting the short code into a Gutenberg block we kind of went through three different stages and the first was great, let's take this short code and we'll just like wrap it in some Gutenberg user interface and then we'll just let the existing short code function render the HTML and spit it out into the preview of the Gutenberg block editor. It seems fairly straightforward. So that's what we did and hopefully this video is going to hopefully end up playing good. So what you will notice is that because the parameters in the block, the settings, every time they change it's taking all of the parameter data and sending it back to the server and our short code function is crunching all of those parameters and spitting it back out as a chunk of HTML which then loads into the preview of the block. And so every time you make any change the little spinny thing comes up and is reloading the entire preview. So it works but it's not necessarily an ideal user experience and you know if every block in Gutenberg worked this way it would be kind of choppy. So again, so it was a really quick way to develop a short code into a block but it's pretty slow, pretty choppy and in fact so the server side render component is something that's available within Gutenberg for doing this sort of thing but they even tell you in the handbook like look this is meant for legacy stuff and you're building new things probably shouldn't use it. So we said okay, let's go back and take all the logic from the original PHP short code function and recreate that in native JavaScript in the client so it can be processed on the client side. So we did that and of course that meant that HP developer had to go and learn and more react things and more about you know the inner workings of Gutenberg but we will immediately notice is that it's super fast and smooth because every time you're changing the value of one of these parameters the logic that renders it is happening right there in the client and so it's instantaneous. So another thing you'll also notice is that even though it's like super fast with native JavaScript logic, the preview of the content itself in the Gutenberg block is still completely static but you can't interact in any way other than with these controls over in the sidebar and so at that point we were thinking like okay we sort of decoupled this block from the original short code, what can we do now as you take this a step further and do things that you couldn't really do with the original short code. And so we started thinking about well what if we wanted to instead of showing all of the speakers what if we wanted to let people choose individual speakers and change the order and things like that so this is a video that shows kind of a static prototype of what that would look like but you can see in this one our block actually has an interface right in the content that allows you to select individual speakers or taxonomies in this case and interact with them right in the content and that is the direction that we're going with all of our custom short codes for WordCamp.org So that is where we're at, that's my case study These are some links to resources, mentioning the server-side rendering thing that I was talking about and if you're interested in participating in the block design of some of these short codes that we use on WordCamp.org you can check out that last link So yeah, that's it, thanks