Rendering Blocks content

[maclong9]

Link to reproduction

No response

Describe the Bug

How do I render the content from a blocks field defined in my cms on my frontend. I can edit the block content without issue on the /admin routes however I can't find anywhere in the docs that explains rendering the content on the frontend.

To Reproduce

Setup project with collection that has a blocks field and try to render the content on the frontend.

Payload Version

3.0.0

Adapters and Plugins

No response

[jmikrut]

Hey @maclong9 - check out our Website template here:

https://github.com/payloadcms/payload/blob/beta/templates/website/src/app/components/Blocks/index.tsx

You can see how to loop over the blocks and return React components for each one. Gonna convert this into Q&A discussion tho because it's not an issue with Payload.

[NicklasSpendler]

The link returns a 404

[akhrarovsaid]

Hey @NicklasSpendler, some stuff got moved around following/during beta! See here: https://github.com/payloadcms/payload/blob/main/templates/website/src/blocks/RenderBlocks.tsx

[phucbm]

The link to RenderBlocks provided by @akhrarov is helpful. Although I was able to find that file myself, there's an important note about getting your block rendered: The slug of your block must be identical to the key in blockComponents. I don't see this mentioned anywhere in the documentation, so I hope this saves you all some time.

export const FeaturedProducts: Block = {
    slug: 'featuredProducts', // use this as the key in blockComponents
    interfaceName: 'FeaturedProducts',
    label: 'Featured Products',
    fields: [
        {
            name: 'products',
            type: 'relationship',
            label: 'Select products',
            relationTo: 'products',
        },
    ],
}

In RenderBlocks.tsx

const blockComponents = {
    // ...
    featuredProducts: FeaturedProducts,
}

Also, changing the slug after the block was used in a page will cause that page inaccessible as mentioned in this issue #10485