Discussion on implementing custom YouTube embed block in Sanity.io

Hello everyone, I'm trying to add the ability to embed youtube videos into my block content, following this tutorial: https://www.sanity.io/guides/portable-text-how-to-add-a-custom-youtube-embed-block
I've set up my schema properly, but I have a question regarding the front-end implementation (

@sanity/block-content-to-react

).

Here , the docs say: "where you want to be able to output this YouTube embed, do the following" - My question is, is there a way to set this up such that I don't need to implement this block of code within every document type that I wish to have the ability to embed videos into? Ideally, this "serialization" would be done at a higher level such that my <BlockContent> widget would look something like this: , rather than
It seems counter-intuitive to have to add this block of code + serializer prop to every single iteration of <BlockContent/> in my project... Maybe I'm not understanding this correctly?

Perhaps this isn't the Reactiest thing to do but could you make a component that contains that inside and just always has a default serializers value wherever it goes? Like <AndrewBlockContent> and inside it's just defining the serializers and loading them into the real BlockContent?
I only have videos on certain document types so I just assumed it was there to have less code/maintenance for something where it's irrelevant, but if you're re-using the block
editor instance (which is a good idea for many reasons, including attribute count) that totally makes sense to fix it as a default.
I have a tiny site that I staggered through making the Studio for initially so I have three or four different kinds and treat them differently (they ought to be the same but time+energy
😃

^^ that's what we do. The portableText components and serializers are saved in a single file that we import into a component. In our case, this is all handled in a template component.

yeah... I was thinking of doing something like this but wondered if there was a more Sanity-geared solution. It's kinda hacky, but I'm sure it'll work. I'll give this a shot, just a bit of a pain to have to replace every <BlockContent> with my own custom serialized blockcontent component

what do you mean by attribute count btw?

Sanity is data only. The presentation layer is decoupled by design. The way you present the block information, in this case the youtube embed, is always determined on the front end. So, it's not really hacky since your intention is to use the front end package to display the content in a specific manner on the front end.

Most IDEs like Visual Studio Code have a handy find and replace if you kept the naming convention similar, and it probably could catch the imports as well.
It's a one-off nesting versus all the extra work to keep adding things redundantly. If it's hacky at least it's simple-hacky
😃
Attribute count in Sanity is a limitation placed on your dataset as implemented where all the various combinations of types of docs and the fields they can have are capped:
https://www.sanity.io/docs/attribute-limit -- I highly recommend giving that a five to ten minute read because it's full of useful clarity.

gotcha! the custom serialized markdown component works btw, I think I'll just end up using this as a solution. Thanks yall :)

Thanks Vincent, I'll give that a read right now!

Very welcome, I have been here about six months and only even heard of someone running into it twice, so it's not exactly easy to hit, but if it helps you understand and plan, then yay 😃

Always good to know what you might run into regardless! I appreciate the heads-up 🙂

Chiming in to remind you that

@sanity/block-content-to-react

is deprecated. You should migrate to https://github.com/portabletext/react-portabletext . It should be relatively easy though.