Hello to all,
I have a question about custom blocks. I made my own custom block (Image with CTA), I have made config file, component file, registered in the page collection.
I create a new page, choose my custom block as page layout, add data, save. But the problem is that nothing is visible on the frontend, not even in the source code.
Can someone please advise me? I don't know where I went wrong.
Thanks
what does the API response look like for your richtext field?
On this block I have in the moment only one field - richtext
API response is:
{
"id": "650b0b57aee183051cea1e6a"
"title": "Testing",
"layout": [
{
"content": {
{
"children": [
{
"text": "some content here"
}
]
}
}
}
],
"meta": {
},
"slug": "test",
"createdAt": "2023-09-20T15:10:15.480Z",
"updatedAt": "2023-09-21T11:16:43.118Z"
}
ah shoot, I meant to say blocks* field
I do not know know, how can I show that...
I guess I just do not see your image+CTA fields in that snippet above
which, if filled out, they should be there
In this moment I have only this richText field in this block ( bcs of testing why don't data show up in frontend).
I have removed image and CTA for now.
Either way, the data is not displayed
Well if you add the data back, on the frontend you would need to build a component to display the data within.
This component I have
import React from 'react';
import RichText from '../../components/RichText';
import classes from './index.module.css';
export type Type = {
blockType: 'content'
blockName?: string
content: unknown
}
export const Component: React.FC<Type> = (props) => {
const { content } = props;
return (
<div className={classes.wrap}>
<RichText content={content} />
</div>
);
};
Then in the Page collection, where you adding different block to the page I have added this custom block also, so "registered" by this Page collection is. How I said, in the admin panel I can use this custom block as any another block, but this data on the frontend...
I found the solution. In the block folder I have index.ts file where are all components "registered", there I had missing my own custom block
Star
Discord
online
Get dedicated engineering support directly from the Payload team.