How can I register a block to the admin panel?

default discord avatar
Taun
5 months ago
8

Hi. I'd like to render my CoverBlockComponent block.


How do I register the block within the admin panel? I've created a CoverBlockFields.ts file -



// blocks/CoverBlock/fields.ts
import { Block } from 'payload/types';
import { MediaType } from '../../collections/Media';

export type CoverBlockType = {
  blockType: 'content';
  blockName?: string;
  content: unknown;
  image: MediaType;
};

const CoverBlock: Block = {
  slug: 'cover',
  labels: {
    singular: 'Cover',
    plural: 'Covers',
  },
  fields: [
    {
      name: 'content',
      label: 'Heading',
      type: 'richText',
      required: true,
    },
    {
      name: 'feature',
      label: 'Cover Image',
      type: 'relationship',
      relationTo: 'media',
      required: true,
    },
  ],
};

export default CoverBlock;


 // CoverBlockComponent.ts

import Image from 'next/image';
import { CoverBlockType } from './CoverBlockFields';

const CoverBlockComponent: React.FC<CoverBlockType> = (props) => {
  const { content, image } = props;

  return (
    <div>
      <Image
        src={`${process.env.NEXT_PUBLIC_SERVER_URL}/media/${image.filename}`}
        alt={image.alt}
        width={image.width}
        height={image.height}
      />
      <RichText content={content} />
    </div>
  );
};

export default CoverBlockComponent;


// CoverPage.tsx



import React from 'react';
import { CoverBlockType } from '../blocks/CoverBlock/CoverBlockFields';
import CoverBlockComponent from '../blocks/CoverBlock/CoverBlockComponent';

const getStaticProps= async () => {
  const res = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/blocks`);
  const blocks = await res.json();
  return { props: { blocks } };
};

const CoverPage = (props) => {
  const { blocks } = props;
  return (
    <CoverBlockComponent blocks={blocks} />
  );
};

export default CoverPage;


I'm confused. In the admin panel I can create a page and add a block to that. I see I can add my CoverPage block fields file to the Page.ts Collection file. When I create a page, add my CoverPage block and upload the image and add a caption and save that page, it's stored in the database. Is this a normal approach to creating pages - using the admin dashboard? Or should I add pages to the Pages folder within Nextjs. I assume I should use Payload admin panel and then render the page, or the block that's located within a page?



I think I get it now. If the admin is the content manager, I don't want them designing pages, but they should have the freedom to create new posts, such as blog and event posts. Those posts should have a standard structture which I can setup using blocks. They then create the post, add the block, upload the content and Nextjs renders the pages by mapping over all of them by fetching the page slugs.... something like that.

  • discord user avatar
    jesschow
    Payload Team
    5 months ago

    Hey @Taun I think you got it by your last message there 👍



    When using blocks the editor can customize the

    layout

    of page or post by adding/removing/reordering blocks, so they have a degree of freedom here but you still have the structure in your block fields to predict the data-shape and then design the front end components on a block-by-block basis.



    Have you seen this youtube series by James? Really insightful:

    https://www.youtube.com/watch?v=bxWsZTtqs80&list=PLjy3Q_oHlvcx_jtUDtGc7xWNsp9gZdm1d
  • default discord avatar
    Taun
    5 months ago

    Thanks @jesschow . I've watched that video series many times, though when I first watched it I had no experience with ME(R)N and TS, so the learning curve has been quite wide. Hopefully you guys or the community will release more beginner friendly tutorials that explain the concepts in depth, such as renderBlocks component and the general process for creating and rendering blocks. Coming from making a Pokedex in React it was quite a trip, but a good one.

  • discord user avatar
    jesschow
    Payload Team
    5 months ago

    @Taun the learning curve can be steep and I definitely agree that we need some more beginner friendly tutorials! It seems like you're learning very quickly, keep on hitting us up with questions whenever you need and happy coding 👋

  • default discord avatar
    Taun
    5 months ago

    Thanks a lot Jess. To you too.

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.