Payload Logo
Front-end

Create a Youtube Block in Payload

Author

Tan

Date Published


1. Create a folder called YouTubeBlock inside your blocks directory.

src/blocks/YouTubeBlock


2. Add the component file: src/blocks/YouTubeBlock/Component.tsx

1import React from 'react'
2import { FadeInWrapper } from '@/components/FadeInWrapper/FadeInWrapper'
3import { YouTubeBlock as YouTubeBlockProps } from '@/payload-types'
4import RichText from '@/components/RichText'
5

6export const YouTubeBlock: React.FC<YouTubeBlockProps> = ({ videoID, richText }) => {
7  if (!videoID) return null
8

9  return (
10    <div className="relative w-full global-spacing">
11      <FadeInWrapper>
12        <div className="container flex flex-col items-center gap-6">
13          {richText && (
14            <RichText data={richText} enableGutter={false} className="!z-10 relative text-center" />
15          )}
16

17          <div className="w-full max-w-4xl aspect-video overflow-hidden rounded-lg shadow-lg">
18            <iframe
19              width="100%"
20              height="100%"
21              src={`https://www.youtube-nocookie.com/embed/${videoID}`}
22              title="YouTube video"
23              frameBorder="0"
24              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
25              allowFullScreen
26            ></iframe>
27          </div>
28        </div>
29      </FadeInWrapper>
30    </div>
31  )
32}
33


3. Add the config file:

src/blocks/YouTubeBlock/config.ts

1import type { Block } from 'payload'
2import { lexicalEditor } from '@payloadcms/richtext-lexical'
3

4export const YouTubeBlock: Block = {
5  slug: 'youtubeBlock',
6  interfaceName: 'YouTubeBlock',
7  labels: {
8    singular: 'YouTube Block',
9    plural: 'YouTube Blocks',
10  },
11  fields: [
12    {
13      name: 'videoID',
14      label: 'YouTube Video ID',
15      type: 'text',
16      required: true,
17    },
18    {
19      name: 'richText',
20      type: 'richText',
21      editor: lexicalEditor({
22        features: ({ rootFeatures }) => [...rootFeatures],
23      }),
24      label: 'Description (optional)',
25      required: false,
26    },
27  ],
28}
29


4. Then, inside RenderBlocks.tsx, make sure you register the block inside blockComponents. It should look something like this:

1const blockComponents = {
2  archive: ArchiveBlock,
3  content: ContentBlock,
4  cta: CallToActionBlock,
5  formBlock: FormBlock,
6  mediaBlock: MediaBlock,
7  youtubeBlock: YouTubeBlock,
8}


5. Lastly, import the config into the appropriate place where the other block fields are defined in src/collections/Pages/index.ts