Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

Custom block

default discord avatar
.prediklast year
8

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?

  • default discord avatar
    .prediklast year

    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

  • default discord avatar
    .prediklast year

    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

  • default discord avatar
    .prediklast year

    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.

  • default discord avatar
    .prediklast year

    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 on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.