Custom block

[merry tulip]

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

[true holly]

New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

• field-config
• block-configs
• custom-field-schemas

Community-Help:

• Please correct invalid fields error
• collections vs globals
• Baby steps - how do I render a rich image and caption to a home page?
• Is it possible to have custom images for blocks? It's kind of hard to define meaningful names

[ebon wave]

what does the API response look like for your richtext field?

[merry tulip]

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"
}

[ebon wave]

ah shoot, I meant to say blocks* field

[merry tulip]

I do not know know, how can I show that...

[ebon wave]

I guess I just do not see your image+CTA fields in that snippet above

which, if filled out, they should be there

[merry tulip]

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

[ebon wave]

Well if you add the data back, on the frontend you would need to build a component to display the data within.

[merry tulip]

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>

  );
};

[merry tulip]

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...

[merry tulip]

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