templates: adds Reusable Content Block to website templates

templates/website/src/blocks/RenderBlocks.tsx

@@ -7,13 +7,15 @@ import { CallToActionBlock } from '@/blocks/CallToAction/Component'
 import { ContentBlock } from '@/blocks/Content/Component'
 import { FormBlock } from '@/blocks/Form/Component'
 import { MediaBlock } from '@/blocks/MediaBlock/Component'
+import { ReusableContentBlock } from '@/blocks/ReusableContent/Component'
 
 const blockComponents = {
   archive: ArchiveBlock,
   content: ContentBlock,
   cta: CallToActionBlock,
   formBlock: FormBlock,
   mediaBlock: MediaBlock,
+  reusableContentBlock: ReusableContentBlock,
 }
 
 export const RenderBlocks: React.FC<{

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

@@ -0,0 +1,28 @@
+import type { Page } from '@/payload-types'
+import { RenderBlocks } from '@/blocks/RenderBlocks'
+import React from 'react'
+
+export type Props = Extract<Page['layout'][0], { blockType: 'reusableContentBlock' }>
+
+export const ReusableContentBlock: React.FC<Props> = ({ reusableContentBlockFields }) => {
+  const { customId, reusableContent } = reusableContentBlockFields
+
+  if (
+    typeof reusableContent === 'object' &&
+    reusableContent !== null &&
+    'layout' in reusableContent &&
+    Array.isArray((reusableContent as { layout: unknown }).layout)
+  ) {
+    const layout = (reusableContent as { layout: Page['layout'] }).layout
+
+    console.log('Resolved reusable layout:', layout)
+
+    return (
+      <section id={customId ?? undefined}>
+        <RenderBlocks blocks={layout} />
+      </section>
+    )
+  }
+
+  return null
+}

templates/website/src/blocks/ReusableContent/config.ts

@@ -0,0 +1,26 @@
+import type { Block } from 'payload'
+
+export const ReusableContent: Block = {
+  slug: 'reusableContentBlock',
+  fields: [
+    {
+      name: 'reusableContentBlockFields',
+      type: 'group',
+      fields: [
+        {
+          name: 'reusableContent',
+          type: 'relationship',
+          relationTo: 'reusable-content',
+          required: true,
+        },
+        {
+          name: 'customId',
+          type: 'text',
+          admin: {
+            description: 'Custom ID for targeting with CSS/JS',
+          },
+        },
+      ],
+    },
+  ],
+}

templates/website/src/collections/Pages/index.ts

@@ -7,6 +7,7 @@ import { CallToAction } from '../../blocks/CallToAction/config'
 import { Content } from '../../blocks/Content/config'
 import { FormBlock } from '../../blocks/Form/config'
 import { MediaBlock } from '../../blocks/MediaBlock/config'
+import { ReusableContent } from '@/blocks/ReusableContent/config'
 import { hero } from '@/heros/config'
 import { slugField } from '@/fields/slug'
 import { populatePublishedAt } from '../../hooks/populatePublishedAt'
@@ -75,7 +76,15 @@ export const Pages: CollectionConfig<'pages'> = {
             {
               name: 'layout',
               type: 'blocks',
-              blocks: [CallToAction, Content, MediaBlock, Archive, FormBlock],
+              blockReferences: [
+                CallToAction,
+                Content,
+                Archive,
+                MediaBlock,
+                FormBlock,
+                ReusableContent,
+              ],
+              blocks: [],
               required: true,
               admin: {
                 initCollapsed: true,

templates/website/src/collections/ReusableContents.ts

@@ -0,0 +1,37 @@
+import type { CollectionConfig } from 'payload'
+
+import { Archive } from '@/blocks/ArchiveBlock/config'
+import { CallToAction } from '@/blocks/CallToAction/config'
+import { Content } from '@/blocks/Content/config'
+import { MediaBlock } from '@/blocks/MediaBlock/config'
+import { FormBlock } from '@/blocks/Form/config'
+
+import { anyone } from '../access/anyone'
+import { authenticated } from '../access/authenticated'
+
+export const ReusableContent: CollectionConfig = {
+  slug: 'reusable-content',
+  access: {
+    create: authenticated,
+    delete: authenticated,
+    read: anyone,
+    update: authenticated,
+  },
+  admin: {
+    useAsTitle: 'title',
+  },
+  fields: [
+    {
+      name: 'title',
+      type: 'text',
+      required: true,
+    },
+    {
+      name: 'layout',
+      type: 'blocks',
+      blockReferences: [CallToAction, Content, Archive, MediaBlock, FormBlock],
+      blocks: [],
+      required: true,
+    },
+  ],
+}