fix(ui): add RowLabelProvider context for blocks row labels (#11664)

Author: JarrodMFlesch

docs/fields/blocks.mdx

@@ -297,6 +297,22 @@ export const CustomBlocksFieldLabelClient: BlocksFieldLabelClientComponent = ({
 }
 ```
 
+### Row Label
+
+```tsx
+'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>
+}
+```
+
 ## Block References
 
 If you have multiple blocks used in multiple places, your Payload Config can grow in size, potentially sending more data to the client and requiring more processing on the server. However, you can optimize performance by defining each block **once** in your Payload Config and then referencing its slug wherever it's used instead of passing the entire block config.

packages/ui/src/fields/Blocks/BlockRow.tsx

@@ -2,7 +2,7 @@
 import type { ClientBlock, ClientField, Labels, Row, SanitizedFieldPermissions } from 'payload'
 
 import { getTranslation } from '@payloadcms/translations'
-import React, { Fragment } from 'react'
+import React from 'react'
 
 import type { UseDraggableSortableReturn } from '../../elements/DraggableSortable/useDraggableSortable/types.js'
 import type { RenderFieldsProps } from '../../forms/RenderFields/types.js'
@@ -13,6 +13,7 @@ import { Pill } from '../../elements/Pill/index.js'
 import { ShimmerEffect } from '../../elements/ShimmerEffect/index.js'
 import { useFormSubmitted } from '../../forms/Form/context.js'
 import { RenderFields } from '../../forms/RenderFields/index.js'
+import { RowLabel } from '../../forms/RowLabel/index.js'
 import { useThrottledValue } from '../../hooks/useThrottledValue.js'
 import { useTranslation } from '../../providers/Translation/index.js'
 import { RowActions } from './RowActions.js'
@@ -146,21 +147,28 @@ export const BlockRow: React.FC<BlocksFieldProps> = ({
             <ShimmerEffect height="1rem" width="8rem" />
           ) : (
             <div className={`${baseClass}__block-header`}>
-              {Label || (
-                <Fragment>
-                  <span className={`${baseClass}__block-number`}>
-                    {String(rowIndex + 1).padStart(2, '0')}
-                  </span>
-                  <Pill
-                    className={`${baseClass}__block-pill ${baseClass}__block-pill-${row.blockType}`}
-                    pillStyle="white"
-                  >
-                    {getTranslation(block.labels.singular, i18n)}
-                  </Pill>
-                  {showBlockName && <SectionTitle path={`${path}.blockName`} readOnly={readOnly} />}
-                  {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} withMessage />}
-                </Fragment>
-              )}
+              <RowLabel
+                CustomComponent={Label}
+                label={
+                  <>
+                    <span className={`${baseClass}__block-number`}>
+                      {String(rowIndex + 1).padStart(2, '0')}
+                    </span>
+                    <Pill
+                      className={`${baseClass}__block-pill ${baseClass}__block-pill-${row.blockType}`}
+                      pillStyle="white"
+                    >
+                      {getTranslation(block.labels.singular, i18n)}
+                    </Pill>
+                    {showBlockName && (
+                      <SectionTitle path={`${path}.blockName`} readOnly={readOnly} />
+                    )}
+                  </>
+                }
+                path={path}
+                rowNumber={rowIndex}
+              />
+              {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} withMessage />}
             </div>
           )
         }

packages/ui/src/forms/RowLabel/index.tsx

@@ -17,14 +17,18 @@ export const RowLabel: React.FC<RowLabelProps> = (props) => {
       <RenderCustomComponent
         CustomComponent={CustomComponent}
         Fallback={
-          <span
-            className={[baseClass, className].filter(Boolean).join(' ')}
-            style={{
-              pointerEvents: 'none',
-            }}
-          >
-            {label}
-          </span>
+          typeof label === 'string' ? (
+            <span
+              className={[baseClass, className].filter(Boolean).join(' ')}
+              style={{
+                pointerEvents: 'none',
+              }}
+            >
+              {label}
+            </span>
+          ) : (
+            label
+          )
         }
       />
     </RowLabelProvider>

packages/ui/src/forms/RowLabel/types.ts

@@ -1,7 +1,7 @@
 export type RowLabelProps = {
   readonly className?: string
   readonly CustomComponent?: React.ReactNode
-  readonly label?: string
+  readonly label?: React.ReactNode | string
   readonly path: string
   readonly rowNumber?: number
 }