Custom block

.predik

2 months ago

8

• 

  jarrod_not_jared

  Payload Team

  2 months ago

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

• 

  .predik

  2 months ago

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

• 

  jarrod_not_jared

  Payload Team

  2 months ago

  ah shoot, I meant to say blocks* field

• 

  .predik

  2 months ago

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

• 

  jarrod_not_jared

  Payload Team

  2 months ago

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

  
  

  
  

  which, if filled out, they should be there

• 

  .predik

  2 months ago

  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

• 

  jarrod_not_jared

  Payload Team

  2 months ago

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

• 

  .predik

  2 months ago

  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