feat(cms): allow blocks within content

closed COD-310

Author: hakalb

apps/cms/src/migrations/20251228_201308_cod_310.json

@@ -0,0 +1,40 @@
+import { MigrateDownArgs, MigrateUpArgs, sql } from '@payloadcms/db-postgres';
+
+export async function up({ db, payload, req }: MigrateUpArgs): Promise<void> {
+  await db.execute(sql`
+   CREATE TABLE IF NOT EXISTS "reusable_content_blocks_reusable_content" (
+  	"_order" integer NOT NULL,
+  	"_parent_id" integer NOT NULL,
+  	"_path" text NOT NULL,
+  	"id" varchar PRIMARY KEY NOT NULL,
+  	"reusable_content_id" integer NOT NULL,
+  	"ref_id" varchar,
+  	"block_name" varchar
+  );
+
+  DO $$ BEGIN
+   ALTER TABLE "reusable_content_blocks_reusable_content" ADD CONSTRAINT "reusable_content_blocks_reusable_content_reusable_content_id_reusable_content_id_fk" FOREIGN KEY ("reusable_content_id") REFERENCES "public"."reusable_content"("id") ON DELETE set null ON UPDATE no action;
+  EXCEPTION
+   WHEN duplicate_object THEN null;
+  END $$;
+
+  DO $$ BEGIN
+   ALTER TABLE "reusable_content_blocks_reusable_content" ADD CONSTRAINT "reusable_content_blocks_reusable_content_parent_id_fk" FOREIGN KEY ("_parent_id") REFERENCES "public"."reusable_content"("id") ON DELETE cascade ON UPDATE no action;
+  EXCEPTION
+   WHEN duplicate_object THEN null;
+  END $$;
+
+  CREATE INDEX IF NOT EXISTS "reusable_content_blocks_reusable_content_order_idx" ON "reusable_content_blocks_reusable_content" USING btree ("_order");
+  CREATE INDEX IF NOT EXISTS "reusable_content_blocks_reusable_content_parent_id_idx" ON "reusable_content_blocks_reusable_content" USING btree ("_parent_id");
+  CREATE INDEX IF NOT EXISTS "reusable_content_blocks_reusable_content_path_idx" ON "reusable_content_blocks_reusable_content" USING btree ("_path");
+  CREATE INDEX IF NOT EXISTS "reusable_content_blocks_reusable_content_reusable_content_idx" ON "reusable_content_blocks_reusable_content" USING btree ("reusable_content_id");`);
+}
+
+export async function down({
+  db,
+  payload,
+  req
+}: MigrateDownArgs): Promise<void> {
+  await db.execute(sql`
+   DROP TABLE "reusable_content_blocks_reusable_content" CASCADE;`);
+}

apps/cms/src/migrations/20251228_201308_cod_310.ts

@@ -23,6 +23,7 @@ import * as migration_20250421_181801_cod_326 from './20250421_181801_cod_326';
 import * as migration_20250428_172053_cod_323 from './20250428_172053_cod_323';
 import * as migration_20250515_201951_cod_292 from './20250515_201951_cod_292';
 import * as migration_20251221_124900_cod_356 from './20251221_124900_cod_356';
+import * as migration_20251228_201308_cod_310 from './20251228_201308_cod_310';
 
 export const migrations = [
   {
@@ -149,5 +150,10 @@ export const migrations = [
     up: migration_20251221_124900_cod_356.up,
     down: migration_20251221_124900_cod_356.down,
     name: '20251221_124900_cod_356'
+  },
+  {
+    up: migration_20251228_201308_cod_310.up,
+    down: migration_20251228_201308_cod_310.down,
+    name: '20251228_201308_cod_310'
   }
 ];

apps/cms/src/migrations/index.ts

@@ -9,7 +9,7 @@ import type { Block } from 'payload';
  * Define which blocks are available as rich text plugins.
  */
 // Using a record to make sure all blocks are included and not forgotten
-const blocks: Record<BlockSlug, boolean> = {
+const richTextBlocks: Record<BlockSlug, boolean> = {
   card: true,
   code: true,
   form: true,
@@ -24,6 +24,22 @@ const blocks: Record<BlockSlug, boolean> = {
   video: false
 };
 
+/** Define which blocks are available within the content block itself. */
+const inlineBlocks: Record<BlockSlug, boolean> = {
+  card: true,
+  form: true,
+  image: true,
+  media: true,
+  code: true,
+  'reusable-content': true,
+  'social-media': true,
+  spacing: true,
+  // Unsupported blocks
+  content: false,
+  'file-area': false,
+  video: false
+};
+
 /**
  * Content block for defining a column layout with rich text content.
  */
@@ -69,12 +85,21 @@ export const contentBlock: Block = {
             features: ({ rootFeatures }) => {
               return [
                 ...rootFeatures,
-                BlocksFeature({ blocks: getActiveKeys<BlockSlug>(blocks) }),
+                BlocksFeature({
+                  blocks: getActiveKeys<BlockSlug>(richTextBlocks)
+                }),
                 multiTenantLinkFeature()
               ];
             }
           }),
           label: false
+        },
+        {
+          name: 'blocks',
+          type: 'blocks',
+          blockReferences: getActiveKeys<BlockSlug>(inlineBlocks),
+          blocks: [],
+          label: false
         }
       ]
     }

libs/app-cms/ui/blocks/src/lib/content/content.block.ts

@@ -1,7 +1,9 @@
-export * from './lib/blocks/CodeBlock';
-export * from './lib/blocks/ContentBlock';
-export * from './lib/blocks/MediaBlock';
-export * from './lib/blocks/RichText';
-export * from './lib/RenderBlocks';
+export { RichText } from './lib/blocks/RichText';
+export { RenderBlocks } from './lib/RenderBlocks';
 
-export * from './lib/providers/PayloadProvider';
+export {
+  type FormSubmitResponse,
+  PayloadProvider,
+  type PayloadValue,
+  usePayload
+} from './lib/providers/PayloadProvider';

libs/shared/ui/payload-components/src/index.ts

@@ -1,22 +1,82 @@
 import type {
   BlockSlug,
+  ContentBlock as ContentBlockProps,
   Page,
-  ReusableContentBlock
+  ReusableContentBlock as ReusableContentBlockProps
 } from '@codeware/shared/util/payload-types';
 import { cn } from '@codeware/shared/util/ui';
 import { useRef } from 'react';
 
 import { CardBlock } from './blocks/CardBlock';
 import { CodeBlock } from './blocks/CodeBlock';
-import { ContentBlock } from './blocks/ContentBlock';
 import { FileAreaBlock } from './blocks/FileAreaBlock';
 import { FormBlock } from './blocks/FormBlock';
 import { ImageBlock } from './blocks/ImageBlock';
 import { MediaBlock } from './blocks/MediaBlock';
+import { RichText } from './blocks/RichText';
 import { SocialMediaBlock } from './blocks/SocialMediaBlock';
 import { SpacingBlock } from './blocks/SpacingBlock';
 import { VideoBlock } from './blocks/VideoBlock';
+import { ColumnSizeProvider } from './providers/ColumnSizeProvider';
 
+/**
+ * Render Payload content block data, with the configured number of columns
+ * and rich text content in each column.
+ *
+ * Optional blocks are rendered after the rich text content, whitin each column.
+ *
+ * User defined column sizes are applied for tablets and desktops.
+ * Mobile devices display all columns as full width.
+ */
+export const ContentBlock: React.FC<ContentBlockProps> = ({ columns }) => {
+  return (
+    <div className="grid w-full grid-cols-12 gap-x-4 gap-y-8 overflow-hidden md:gap-x-8 lg:gap-x-16">
+      {columns?.map((col, index) => {
+        const { blocks, richText } = col;
+        const size = col.size ?? 'full';
+
+        return (
+          <ColumnSizeProvider size={size} key={index}>
+            <div
+              className={cn('first-child-no-margin col-span-12', {
+                'md:col-span-4': size === 'one-third',
+                'md:col-span-6': size === 'half',
+                'md:col-span-8': size === 'two-thirds'
+              })}
+            >
+              {richText && <RichText data={richText} />}
+              {!!blocks?.length && (
+                <RenderBlocks
+                  className={cn({ 'mt-8': !!richText })}
+                  blocks={blocks}
+                />
+              )}
+            </div>
+          </ColumnSizeProvider>
+        );
+      })}
+    </div>
+  );
+};
+
+/**
+ * Render Payload reusable content block data, by rendering its layout blocks.
+ */
+export const ReusableContentBlock: React.FC<ReusableContentBlockProps> = ({
+  reusableContent,
+  refId
+}) => {
+  if (reusableContent && typeof reusableContent === 'object') {
+    return <RenderBlocks blocks={reusableContent.layout} refId={refId} />;
+  }
+  return null;
+};
+
+// Why are the components above defined here and not in `blocks/` folder?
+// Components depend on `RenderBlocks`. To avoid circular dependencies,
+// these components must be defined in the same file as `RenderBlocks`.
+
+/** Block slug to component mapping */
 const blocksMap: Record<
   BlockSlug,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -29,35 +89,29 @@ const blocksMap: Record<
   form: FormBlock,
   image: ImageBlock,
   media: MediaBlock,
+  'reusable-content': ReusableContentBlock,
   'social-media': SocialMediaBlock,
   spacing: SpacingBlock,
-  video: VideoBlock,
-  // Reusable content block invokes RenderBlocks to resolve the nested blocks.
-  // Keep implementation here to avoid circular dependency.
-  'reusable-content': ({ reusableContent, refId }: ReusableContentBlock) => {
-    if (reusableContent && typeof reusableContent === 'object') {
-      return <RenderBlocks blocks={reusableContent.layout} refId={refId} />;
-    }
-    return null;
-  }
+  video: VideoBlock
 };
 
 type Props = {
   blocks: Page['layout'];
   refId?: string | null | undefined;
+  className?: string;
 };
 
 /**
  * Renders the blocks of a page.
  */
-export const RenderBlocks: React.FC<Props> = ({ blocks, refId }) => {
+export const RenderBlocks: React.FC<Props> = ({ blocks, className, refId }) => {
   const docRef = useRef<HTMLDivElement>(null);
 
   const hasBlocks = blocks && Array.isArray(blocks) && blocks.length > 0;
 
   if (hasBlocks) {
     return (
-      <div id={refId ?? undefined} ref={docRef}>
+      <div id={refId ?? undefined} ref={docRef} className={className}>
         {blocks.map((block, index) => {
           const Block = blocksMap[block.blockType];
 

libs/shared/ui/payload-components/src/lib/RenderBlocks.tsx

@@ -619,32 +619,25 @@ export interface ContentBlock {
           };
           [k: string]: unknown;
         } | null;
+        blocks?:
+          | (
+              | CardBlock
+              | FormBlock
+              | ImageBlock
+              | MediaBlock
+              | CodeBlock
+              | ReusableContentBlock
+              | SocialMediaBlock
+              | SpacingBlock
+            )[]
+          | null;
         id?: string | null;
       }[]
     | null;
   id?: string | null;
   blockName?: string | null;
   blockType: 'content';
 }
-/**
- * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "FileAreaBlock".
- */
-export interface FileAreaBlock {
-  /**
-   * Select tags that represent the files to show in the file area.
-   */
-  tags?: (number | Tag)[] | null;
-  files?:
-    | {
-        media?: (number | null) | Media;
-        id?: string | null;
-      }[]
-    | null;
-  id?: string | null;
-  blockName?: string | null;
-  blockType: 'file-area';
-}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "FormBlock".
@@ -974,6 +967,25 @@ export interface ReusableContent {
   updatedAt: string;
   createdAt: string;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "FileAreaBlock".
+ */
+export interface FileAreaBlock {
+  /**
+   * Select tags that represent the files to show in the file area.
+   */
+  tags?: (number | Tag)[] | null;
+  files?:
+    | {
+        media?: (number | null) | Media;
+        id?: string | null;
+      }[]
+    | null;
+  id?: string | null;
+  blockName?: string | null;
+  blockType: 'file-area';
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "SocialMediaBlock".