๐Ÿ”ฎ Sanity Create is here. Writing is reinvented. Try now, no developer setup

Discussion on implementing custom YouTube embed block in Sanity.io

11 replies
Last updated: Aug 18, 2022
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:
<BlockContent blocks={mySchemaType.body} />
, rather than
<BlockContent blocks={mySchemaType.body} serializers={serializers} />

It seems counter-intuitive to have to add this block of code + serializer prop to every single iteration of &lt;BlockContent/&gt; in my project... Maybe I'm not understanding this correctly?
Aug 17, 2022, 5:03 PM
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 &lt;AndrewBlockContent&gt; 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
๐Ÿ˜ƒ
Aug 17, 2022, 5:32 PM
^^ 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.
Aug 17, 2022, 5:34 PM
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 &lt;BlockContent&gt; with my own custom serialized blockcontent component
Aug 17, 2022, 5:39 PM
what do you mean by attribute count btw?
Aug 17, 2022, 5:40 PM
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.
Aug 17, 2022, 5:42 PM
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.
Aug 17, 2022, 5:43 PM
gotcha! the custom serialized markdown component works btw, I think I'll just end up using this as a solution. Thanks yall :)
Aug 17, 2022, 5:44 PM
Thanks Vincent, I'll give that a read right now!
Aug 17, 2022, 5:45 PM
Very welcome,
user C
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 ๐Ÿ˜ƒ
Aug 17, 2022, 5:45 PM
Always good to know what you might run into regardless! I appreciate the heads-up ๐Ÿ™‚
Aug 17, 2022, 5:46 PM
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.
Aug 18, 2022, 7:21 AM

Sanityโ€“ build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?