Add Component Blocks To The Document Field In Keystatic

[00:00] We've given authors the ability to add YouTube videos part of their showcase, but we've got some feedback that they would also like to be able to add videos inside blog posts. In other words, inside a post, content editors would love to be able to, just like they can add blog quotes or different heading, be able to add a [00:20] video. Basically, have a custom content block that they can put right in the middle of the document field. Well, you can do this with key static and let's do just that. In the key static config, we will find the posts collection and then find the content field here. I will add a new property, component blocks, inside of which you can define custom, [00:40] well, component blocks. Let's have a YouTube video block. I will wrap it in a component function that will give me TypeScript goodness. And so our component block needs a few things including a label. So let's go label YouTube video. We'll also give our component block a schema. Let me [01:00] scroll down a bit. And here, just like in our showcase, we just want a YouTube video ID, which is going to be a text field. We'll have, yes, a label and validation. And let's also add a description where we specify we want the ID and not the full URL, just to be clear. And you can see TypeScript is [01:19] still really upset at us because our component block needs one more thing, a preview, which is how you want to render this custom block in the document field. So for now, let me just have an arrow function that returns no. We'll preview nothing. And now TypeScript is happy with our setup, so let's take a look at what we've [01:39] got. Back in the first post document field, we now have this new drop down and if I click on it, we can add a YouTube video. This adds a bit of UI with an edit button where I can add the mandatory video ID. So let me leave it empty for now. I'll cancel this and let's see about improving the preview for this component. [01:59] I can return JSX in the preview here, but if I want to do this I need to change the extension of the key static config from TS to TSX. So now it knows to handle the syntax. When you do change the name of the config file, you'll need to restart the server for the front end to work. So let's do that quickly. [02:20] There you go. And so let's try this. We will receive the props and let's display something different whether the video ID is set or not. So props dot field dot YouTube video ID dot value question mark. Is this set? If so, let's return a p tag that says videoidprops.onceagainfield.youtubevideoid.value. [02:46] And if it's not defined, thank you Copilot, yes, we will say, please enter a YouTube video ID. Alright. So because right now we haven't set the video ID, I'm expecting to see this as a preview. And, yep, there it is. And now let's go and edit this and I will add a valid YouTube video [03:06] ID. And now it says video ID with the ID. We can take this one step further and actually display the video embed. Remember, we've already created our YouTube video component, and so we could use this to render the video if we have a video ID. In the key static config, I will import the [03:26] showcase YouTube video, and maybe the name showcase is now not the best since we're using it in a non showcase context, but whatever. And now if the YouTube video ID value is set here, let's instead use showcase YouTube and pass the video ID, which is props that fills that [03:45] YouTube video ID dot value. And so now when we've defined the video ID, we should actually see the video itself in our document editor. And look at this. Here it is. That's pretty cool. Hey? Right now, on the single post page And let's just add a little more text after the video. [04:06] We'll save our post And if we look in our content files in post, first post dot mdoc, you can see we have this custom YouTube video component block followed by the paragraph of text we've just added.