diff --git a/docs/coding-guide.md b/docs/coding-guide.md index f9bdbbe02..eab24ea45 100644 --- a/docs/coding-guide.md +++ b/docs/coding-guide.md @@ -181,10 +181,10 @@ blocks When creating a new block, you must register it in the following locations: 1. **`src/blocks/RenderBlocks.tsx`** - For standalone page blocks - - Set `isLexical={false}` + - Set `isLayoutBlock={true}` so the block gets its own `container` wrapper 2. **`src/components/RichText/index.tsx`** - For blocks used inline within rich text editors - - Set `isLexical={true}` to avoid double-wrapping + - Set `isLayoutBlock={false}` to avoid double-wrapping (the RichText component already provides a container) - Only add blocks that should be available in Lexical editors 3. **`src/constants/defaults.ts`** - Add the block to the defaults configuration @@ -194,9 +194,9 @@ When creating a new block, you must register it in the following locations: - A `richText` field's `BlocksFeature` configuration - This ensures Payload generates TypeScript types for your block -**Why the different `isLexical` values?** -- Standalone blocks (`RenderBlocks.tsx`) are not rendered by a Lexical editor → `isLexical={false}` -- Inline Lexical blocks (`RichText/index.tsx`) are rendered inside a Lexical editor → `isLexical={true}` +**Why the different `isLayoutBlock` values?** +- Standalone blocks (`RenderBlocks.tsx`) are top-level page layout blocks that need their own container → `isLayoutBlock={true}` +- Inline Lexical blocks (`RichText/index.tsx`) are embedded inside a rich text field that already provides a container → `isLayoutBlock={false}` ### BackgroundColorWrapper @@ -205,7 +205,7 @@ A reusable layout component that wraps content with configurable background colo **Props:** - `backgroundColor` - Tailwind background color class name -- `isLexical` - Whether the block is rendered within a Lexical editor (`default: false`) +- `isLayoutBlock` - Whether the block is a standalone page layout block that needs its own container (`default: false`) - `containerClassName` - Optional - additional classes for the inner container div - `outerClassName` - Optional - additional classes for the outer wrapper div @@ -213,7 +213,7 @@ A reusable layout component that wraps content with configurable background colo ```tsx diff --git a/src/blocks/BlogList/Component.tsx b/src/blocks/BlogList/Component.tsx index c6d45ea70..569a2883d 100644 --- a/src/blocks/BlogList/Component.tsx +++ b/src/blocks/BlogList/Component.tsx @@ -14,7 +14,7 @@ import { cn } from '@/utilities/ui' import { useEffect, useState } from 'react' type BlogListComponentProps = BlogListBlockProps & { - isLexical: boolean + isLayoutBlock: boolean className?: string } @@ -24,7 +24,7 @@ export const BlogListBlockComponent = (args: BlogListComponentProps) => { belowHeadingContent, backgroundColor, className, - isLexical = true, + isLayoutBlock = true, postOptions, } = args @@ -91,7 +91,7 @@ export const BlogListBlockComponent = (args: BlogListComponentProps) => { return (
diff --git a/src/blocks/Document/Component.tsx b/src/blocks/Document/Component.tsx index 3c5ec51e6..219161e50 100644 --- a/src/blocks/Document/Component.tsx +++ b/src/blocks/Document/Component.tsx @@ -7,11 +7,11 @@ import { getHostnameFromTenant } from '@/utilities/tenancy/getHostnameFromTenant import { cn } from '@/utilities/ui' type Props = DocumentBlockProps & { - isLexical: boolean + isLayoutBlock: boolean } export const DocumentBlockComponent = (props: Props) => { - const { document, isLexical = true } = props + const { document, isLayoutBlock = true } = props const { tenant } = useTenant() if (!isValidRelationship(document) || !document.url) { @@ -21,7 +21,7 @@ export const DocumentBlockComponent = (props: Props) => { const src = getMediaURL(document.url, null, getHostnameFromTenant(tenant)) return ( -
+