Blocks - defaultValue does not work about payload HOT 7 OPEN

I'm not sure if that's achievable that easily. It's not a simple field.

The one workaround that I found trying to create a 'Blocks' field that has a defaultValue already set is to define it that way:

defaultValue:[{...CotasDefinition.fields, blockType: 'CotasBlock'}], type: 'blocks', blocks: [Cotas],

Ofc I just assumed that your definition/blockType is named that way, but you will probably need to adjust it. Doing it like that should resolve your problem. If that will work for you - I will try to contribute and make it clearer in DOC's, as right now it's not explicitly stated I think.

To payload pros:
maybe I should contribute and add a function that will help users to create a defaultValue for block field, and create a helper function for that

from payload.

Hi Rafał !

With a little change and I got it working! Thank you for your code sample based on my context.

My working code:

I've changed the blockType (block's defined slug) to cotas, and CotasDefinition (CollectionConfig instance) is only "Cotas":

defaultValue: [{ ...Cotas.fields, blockType: 'cotas' }],
A helper function will be a great tool!

from payload.

Hi there,

I'm trying to achieve the same thing with my config. I'm getting type error with my config.

const StudioUseCases: CollectionConfig = {
  slug: 'studio-use-cases',
  admin: {
    useAsTitle: 'title',
    group: 'Studio Use Cases Pages'
  },
  access: {
    read: () => true
  },
  fields: [
    textField('title'),
    slugField(),
    blockField('content', [blockHero(), blockFaq(), blockVideo(), blockImage()], {
      defaultValue: [{ ...blockImage().fields }]
    })
  ]
};

export default StudioUseCases;

// block image
export function blockImage() {
  return block(
    'block-image',
    [
      themeField('image'),
      backgroundField('image'),
      mediaField('image'),
      textField('maxWidth', {
        required: false,
        admin: { description: 'e.g. "100%" or "100px"' }
      })
    ],
    {
      interfaceName: 'IBlockImage'
    }
  );
}

// block
export function block(slug: string, fields: Field[] = [], options?: Omit<Block, 'fields' | 'slug'>): Block {
  return {
    slug,
    fields,
    ...options
  };
}

Error

Argument of type '{ defaultValue: { blockType: string; length: number; toString(): string; toLocaleString(): string; pop(): Field; push(...items: Field[]): number; concat(...items: ConcatArray<Field>[]): Field[]; concat(...items: (Field | ConcatArray<...>)[]): Field[]; ... 34 more ...; [Symbol.unscopables]: { ...; }; }[]; }' is not assignable to parameter of type 'Omit<BlockField, "name" | "type">'.
  Property 'blocks' is missing in type '{ defaultValue: { blockType: string; length: number; toString(): string; toLocaleString(): string; pop(): Field; push(...items: Field[]): number; concat(...items: ConcatArray<Field>[]): Field[]; concat(...items: (Field | ConcatArray<...>)[]): Field[]; ... 34 more ...; [Symbol.unscopables]: { ...; }; }[]; }' but required in type 'Omit<BlockField, "name" | "type">'.ts(2345)
types.d.ts(545, 5): 'blocks' is declared here.

I'm quite confused what's expected as defaultValue for the blocks field. There isn't an example on the docs I can follow.

from payload.

Well, first thing is that Payload usually doesn't work well when you use hyphens in slugs. You shoud stick to letters/numbers and underscore _. These are usually the safest choices.

Your default value should have declared blockType: 'your_image_block_slug'.

I cannot see your implementation of blockField() thus it's hard to dive deeper. It looks like you are not creating a blocks property in blockField definition.

from payload.

Hey @rafalnawojczyk

Thank you for the response. I'm adding more definition below for blockField.
I'm creating the blocks property in the blockField. Not sure what i'm doing wrong.

Noted your feedback about slug. I hope that's not the issue here in this case?

export function blockField(name: string, blocks: Block[], options?: Omit<BlockField, 'name' | 'type'>): BlockField {
  return {
    name,
    type: 'blocks',
    required: true,
    blocks,
    ...options
  };
}

from payload.

@damnitrahul Have you tried to Omit a blocks property also? Right now if options has a blocks property - it will overwrite your defined one

from payload.

Oh, that did the trick for me. Thanks @rafalnawojczyk!

from payload.