Is it possible to have custom images for blocks? It's kind of hard to define meaningful names

[vagrant kernel]

As visible in the image, we came up with a couple of components and after a while, nobody knows what they do.

Is it possible to order them a little bit better? 😅

[tawny burrow]

Hi @vagrant kernel - yes! You can change the block image by adding an imageURL to the block config:

const QuoteBlock: Block = {
  slug: 'Quote', 
  imageURL: 'https://google.com/path/to/image.jpg',
  imageAltText: 'A nice thumbnail image to show what this block looks like',
  fields: [ 
    {
      name: 'quoteHeader',
      type: 'text',
      required: true,
    },
    {
      name: 'quoteText',
      type: 'text',
    },
  ]
};

Regarding the order of blocks, this will be the same order as they are defined in. We usually put them in alphabetical order, you can do whatever suits you best.

{
      name: 'layout', 
      type: 'blocks',
      minRows: 1,
      maxRows: 20,
      blocks: [ 
      // This same order will be used in the admin 
       Accordion,
       Banner,
       Form,
       QuoteBlock
      ]
    }
  ]

[fallen locust]

How about use relative path from /src/assets in imageURL?

const QuoteBlock: Block = {
  slug: 'Quote', 
  imageURL: './assets/image.jpg', <<= ???
  imageAltText: 'A nice thumbnail image to show what this block looks like',
  fields: [ 
    {
      name: 'quoteHeader',
      type: 'text',
      required: true,
    },
    {
      name: 'quoteText',
      type: 'text',
    },
  ]
};

[ripe finch]

@fallen locust did you manage to do a relative path?

[devout latch]

@ripe finch @fallen locust I do it like this

[ripe finch]

where is your thumbnails folder located?

[devout latch]

It's a relative path from the block file definition

[ripe finch]

oh, got it.. thanks :D

[ebon kestrel]

I'm struggling to get relative imageURLs to work. Following the solution from @devout latch , i get this error during importmap generation:
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".png"

As i guess that using relative images instead of absolute URLs would be the primary use case for this, i'd be glad to update the public docs at https://payloadcms.com/docs/fields/blocks#block-configs, if someone points me to a working solution.