Render Custom Component Blocks With The DocumentRenderer In Keystatic

[00:00] So we have a YouTube video custom component block inside our first post, but if we visit the first post on the front end, it's not displaying. You can see the paragraph before and the paragraph after the custom video block, but this thing here is not being rendered. Let's take a look at our post page. So app site [00:20] slug page dot tsx. And if I scroll down, you'll see that our post is rendered with the document renderer. We're passing our content to this document renderer, but before any custom component blocks show anything, we need to define them in the component blocks prop for the document renderer. So this is an object. And for [00:40] each component block, we'll need a key that matches the component block name in the key static config. In our key static config file, we created the YouTube video component block, and therefore, we'll need a YouTube video key right here. So we want to render our showcase YouTube [00:59] video component. And thanks to the types we've set up, it tells us that we need a video ID prop. So let's add it. And we'll need here to receive that prop of YouTube video ID. So let's accept the props here, and we should be able to pass props dot YouTube video ID. So because [01:19] we've defined this YouTube video component block, now when the document renderer sees this YouTube video custom component, it'll know what to render because we've defined it here. And as a result, now our front end should show the video. And, yep, there it is. You can see it between the paragraph before and the paragraph after.