fix(templates): use direct blocks props instead of drilling them out of pages (#9074)

templates/website/src/blocks/CallToAction/Component.tsx

@@ -1,17 +1,11 @@
 import React from 'react'
 
-import type { Page } from '@/payload-types'
+import type { CallToActionBlock as CTABlockProps } from '@/payload-types'
 
 import RichText from '@/components/RichText'
 import { CMSLink } from '@/components/Link'
 
-type Props = Extract<Page['layout'][0], { blockType: 'cta' }>
+export const CallToActionBlock: React.FC<CTABlockProps> = ({ links, richText }) => {
-
-export const CallToActionBlock: React.FC<
-  Props & {
-    id?: string
-  }
-> = ({ links, richText }) => {
   return (
     <div className="container">
       <div className="bg-card rounded border-border border p-4 flex flex-col gap-8 md:flex-row md:justify-between md:items-center">

templates/website/src/blocks/Content/Component.tsx

@@ -2,17 +2,11 @@ import { cn } from 'src/utilities/cn'
 import React from 'react'
 import RichText from '@/components/RichText'
 
-import type { Page } from '@/payload-types'
+import type { ContentBlock as ContentBlockProps } from '@/payload-types'
 
 import { CMSLink } from '../../components/Link'
 
-type Props = Extract<Page['layout'][0], { blockType: 'content' }>
+export const ContentBlock: React.FC<ContentBlockProps> = (props) => {
-
-export const ContentBlock: React.FC<
-  {
-    id?: string
-  } & Props
-> = (props) => {
   const { columns } = props
 
   const colsSpanClasses = {

templates/website/src/blocks/MediaBlock/Component.tsx

@@ -4,16 +4,15 @@ import { cn } from 'src/utilities/cn'
 import React from 'react'
 import RichText from '@/components/RichText'
 
-import type { Page } from '@/payload-types'
+import type { MediaBlock as MediaBlockProps } from '@/payload-types'
 
 import { Media } from '../../components/Media'
 
-type Props = Extract<Page['layout'][0], { blockType: 'mediaBlock' }> & {
+type Props = MediaBlockProps & {
   breakout?: boolean
   captionClassName?: string
   className?: string
   enableGutter?: boolean
-  id?: string
   imgClassName?: string
   staticImage?: StaticImageData
   disableInnerContainer?: boolean

templates/website/src/components/RichText/serialize.tsx

@@ -16,16 +16,14 @@ import {
   IS_SUPERSCRIPT,
   IS_UNDERLINE,
 } from './nodeFormat'
-import type { Page } from '@/payload-types'
+import type {
+  CallToActionBlock as CTABlockProps,
+  MediaBlock as MediaBlockProps,
+} from '@/payload-types'
 
 export type NodeTypes =
   | DefaultNodeTypes
-  | SerializedBlockNode<
+  | SerializedBlockNode<CTABlockProps | MediaBlockProps | BannerBlockProps | CodeBlockProps>
-      | Extract<Page['layout'][0], { blockType: 'cta' }>
-      | Extract<Page['layout'][0], { blockType: 'mediaBlock' }>
-      | BannerBlockProps
-      | CodeBlockProps
-    >
 
 type Props = {
   nodes: NodeTypes[]