Blocks Field - Components docs inaccurate

[damnsamn]

Documentation Issue

The Blocks Fields page in the docs lists a RowLabel component which is not exported with the BlocksField types. Presumably this was just copied across from the Array Field docs in error, but it does speak to an unmet need with the Blocks field. I think it should have a RowLabel component (or equivalent) to replace blockName. See this discussion #4648

The relevant erroneous section:

Row Label

'use client'

import { useRowLabel } from '@payloadcms/ui'

export const BlockRowLabel = () => {
  const { data, rowNumber } = useRowLabel<{ title?: string }>()

  const customLabel = `${data.type} ${String(rowNumber).padStart(2, '0')} `

  return <div>Custom Label: {customLabel}</div>
}

[akhrarovsaid]

Hey @damnsamn

So, the Blocks field itself exposes a Label component which allows you to define your own label. However, the docs seem to omit the fact that each Block itself can also have a Label component via admin.components.Label defined within the block config. You can add your row label here.

Demo:

I think it would be nice to allow users to generate block names from a function defined in config though, so I've addressed the feature request in your issue here: #12135. I've also gone ahead and cleaned up the docs around Block row labels with a more thorough example which should address your issue here.