feat: allow disabling the blockname field via admin.blockName

packages/payload/src/fields/config/client.ts

@@ -126,6 +126,13 @@ export const createClientBlocks = ({
       clientBlock.jsx = jsxResolved
     }
 
+    if (!clientBlock?.admin?.blockName) {
+      clientBlock.admin = {
+        ...clientBlock.admin,
+        blockName: typeof block?.admin?.blockName === 'undefined' ? true : block.admin.blockName,
+      }
+    }
+
     if (block.labels) {
       clientBlock.labels = {} as unknown as LabelsClient
 

packages/payload/src/fields/config/sanitize.spec.ts

@@ -362,4 +362,71 @@ describe('sanitizeFields', () => {
       expect(sanitizedFields).toStrictEqual([])
     })
   })
+  describe('blocks', () => {
+    it('should maintain admin.blockName false after sanitization', async () => {
+      const fields: Field[] = [
+        {
+          name: 'noLabelBlock',
+          type: 'blocks',
+          blocks: [
+            {
+              slug: 'number',
+              admin: {
+                blockName: false,
+              },
+              fields: [
+                {
+                  name: 'testNumber',
+                  type: 'number',
+                },
+              ],
+            },
+          ],
+          label: false,
+        },
+      ]
+      const sanitizedField = (
+        await sanitizeFields({
+          config,
+          fields,
+          validRelationships: [],
+        })
+      )[0] as BlocksField
+
+      const sanitizedBlock = sanitizedField.blocks[0]
+
+      expect(sanitizedBlock.admin?.blockName).toStrictEqual(false)
+    })
+    it('should default admin.blockName to true after sanitization', async () => {
+      const fields: Field[] = [
+        {
+          name: 'noLabelBlock',
+          type: 'blocks',
+          blocks: [
+            {
+              slug: 'number',
+              fields: [
+                {
+                  name: 'testNumber',
+                  type: 'number',
+                },
+              ],
+            },
+          ],
+          label: false,
+        },
+      ]
+      const sanitizedField = (
+        await sanitizeFields({
+          config,
+          fields,
+          validRelationships: [],
+        })
+      )[0] as BlocksField
+
+      const sanitizedBlock = sanitizedField.blocks[0]
+
+      expect(sanitizedBlock.admin?.blockName).toStrictEqual(true)
+    })
+  })
 })

packages/payload/src/fields/config/sanitize.ts

@@ -258,6 +258,14 @@ export const sanitizeFields = async ({
           richTextSanitizationPromises,
           validRelationships,
         })
+
+        if (!block?.admin?.blockName) {
+          block.admin = {
+            ...block.admin,
+            blockName:
+              typeof block?.admin?.blockName === 'undefined' ? true : block.admin.blockName,
+          }
+        }
       }
     }
 

packages/payload/src/fields/config/types.ts

@@ -1364,6 +1364,7 @@ export type Block = {
    */
   _sanitized?: boolean
   admin?: {
+    blockName?: boolean
     components?: {
       /**
        * This will replace the entire block component, including the block header / collapsible.
@@ -1402,7 +1403,7 @@ export type Block = {
 }
 
 export type ClientBlock = {
-  admin?: Pick<Block['admin'], 'custom' | 'group'>
+  admin?: Pick<Block['admin'], 'blockName' | 'custom' | 'group'>
   fields: ClientField[]
   labels?: LabelsClient
 } & Pick<Block, 'imageAltText' | 'imageURL' | 'jsx' | 'slug'>

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

@@ -155,7 +155,9 @@ export const BlockRow: React.FC<BlocksFieldProps> = ({
                   >
                     {getTranslation(block.labels.singular, i18n)}
                   </Pill>
-                  <SectionTitle path={`${path}.blockName`} readOnly={readOnly} />
+                  {block.admin.blockName && (
+                    <SectionTitle path={`${path}.blockName`} readOnly={readOnly} />
+                  )}
                   {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} withMessage />}
                 </Fragment>
               )}

test/fields/collections/Blocks/e2e.spec.ts

@@ -15,7 +15,7 @@ import { AdminUrlUtil } from '../../../helpers/adminUrlUtil.js'
 import { initPayloadE2ENoConfig } from '../../../helpers/initPayloadE2ENoConfig.js'
 import { reInitializeDB } from '../../../helpers/reInitializeDB.js'
 import { RESTClient } from '../../../helpers/rest.js'
-import { TEST_TIMEOUT_LONG } from '../../../playwright.config.js'
+import { POLL_TOPASS_TIMEOUT, TEST_TIMEOUT_LONG } from '../../../playwright.config.js'
 
 const filename = fileURLToPath(import.meta.url)
 const currentFolder = path.dirname(filename)
@@ -81,7 +81,7 @@ describe('Block fields', () => {
     const addedRow = page.locator('#field-blocks .blocks-field__row').last()
     await expect(addedRow).toBeVisible()
     await expect(addedRow.locator('.blocks-field__block-header')).toHaveText(
-      'Custom Block Label: Content 04',
+      'Custom Block Label: Content 05',
     )
   })
 
@@ -155,7 +155,7 @@ describe('Block fields', () => {
     await duplicateButton.click()
 
     const blocks = page.locator('#field-blocks > .blocks-field__rows > div')
-    expect(await blocks.count()).toEqual(4)
+    expect(await blocks.count()).toEqual(5)
   })
 
   test('should save when duplicating subblocks', async () => {
@@ -170,7 +170,7 @@ describe('Block fields', () => {
     await duplicateButton.click()
 
     const blocks = page.locator('#field-blocks > .blocks-field__rows > div')
-    expect(await blocks.count()).toEqual(4)
+    expect(await blocks.count()).toEqual(5)
 
     await page.click('#action-save')
     await expect(page.locator('.payload-toast-container')).toContainText('successfully')
@@ -345,6 +345,33 @@ describe('Block fields', () => {
     })
   })
 
+  describe('blockNames', () => {
+    test('should show blockName field', async () => {
+      await page.goto(url.create)
+
+      const blockWithBlockname = page.locator('#field-blocks .blocks-field__rows #blocks-row-1')
+
+      const blocknameField = blockWithBlockname.locator('.section-title')
+
+      await expect(async () => await expect(blocknameField).toBeVisible()).toPass({
+        timeout: POLL_TOPASS_TIMEOUT,
+      })
+
+      await expect(blocknameField).toHaveAttribute('data-value', 'Second block')
+    })
+
+    test("should not show blockName field when it's disabled", async () => {
+      await page.goto(url.create)
+      const blockWithBlockname = page.locator('#field-blocks .blocks-field__rows #blocks-row-3')
+
+      await expect(
+        async () => await expect(blockWithBlockname.locator('.section-title')).toBeHidden(),
+      ).toPass({
+        timeout: POLL_TOPASS_TIMEOUT,
+      })
+    })
+  })
+
   describe('block groups', () => {
     test('should render group labels', async () => {
       await page.goto(url.create)

test/fields/collections/Blocks/index.ts

@@ -30,6 +30,19 @@ export const getBlocksField = (prefix?: string): BlocksField => ({
         },
       ],
     },
+    {
+      slug: prefix ? `${prefix}NoBlockname` : 'noBlockname',
+      interfaceName: prefix ? `${prefix}NoBlockname` : 'NoBlockname',
+      admin: {
+        blockName: false,
+      },
+      fields: [
+        {
+          name: 'text',
+          type: 'text',
+        },
+      ],
+    },
     {
       slug: prefix ? `${prefix}Number` : 'number',
       interfaceName: prefix ? `${prefix}NumberBlock` : 'NumberBlock',

test/fields/collections/Blocks/shared.ts

@@ -32,6 +32,10 @@ export const getBlocksFieldSeedData = (prefix?: string): any => [
       },
     ],
   },
+  {
+    blockType: prefix ? `${prefix}NoBlockname` : 'noBlockname',
+    text: 'Hello world',
+  },
 ]
 
 export const blocksDoc: Partial<BlockField> = {

test/fields/payload-types.ts

@@ -699,16 +699,29 @@ export interface ArrayField {
  */
 export interface BlockField {
   id: string;
-  blocks: (ContentBlock | NumberBlock | SubBlocksBlock | TabsBlock)[];
-  duplicate: (ContentBlock | NumberBlock | SubBlocksBlock | TabsBlock)[];
+  blocks: (ContentBlock | NoBlockname | NumberBlock | SubBlocksBlock | TabsBlock)[];
+  duplicate: (ContentBlock | NoBlockname | NumberBlock | SubBlocksBlock | TabsBlock)[];
   collapsedByDefaultBlocks: (
     | LocalizedContentBlock
+    | LocalizedNoBlockname
+    | LocalizedNumberBlock
+    | LocalizedSubBlocksBlock
+    | LocalizedTabsBlock
+  )[];
+  disableSort: (
+    | LocalizedContentBlock
+    | LocalizedNoBlockname
+    | LocalizedNumberBlock
+    | LocalizedSubBlocksBlock
+    | LocalizedTabsBlock
+  )[];
+  localizedBlocks: (
+    | LocalizedContentBlock
+    | LocalizedNoBlockname
     | LocalizedNumberBlock
     | LocalizedSubBlocksBlock
     | LocalizedTabsBlock
   )[];
-  disableSort: (LocalizedContentBlock | LocalizedNumberBlock | LocalizedSubBlocksBlock | LocalizedTabsBlock)[];
-  localizedBlocks: (LocalizedContentBlock | LocalizedNumberBlock | LocalizedSubBlocksBlock | LocalizedTabsBlock)[];
   i18nBlocks?:
     | {
         text?: string | null;
@@ -883,6 +896,16 @@ export interface ContentBlock {
   blockName?: string | null;
   blockType: 'content';
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "NoBlockname".
+ */
+export interface NoBlockname {
+  text: string;
+  id?: string | null;
+  blockName?: string | null;
+  blockType: 'noBlockname';
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "NumberBlock".
@@ -939,6 +962,16 @@ export interface LocalizedContentBlock {
   blockName?: string | null;
   blockType: 'localizedContent';
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "localizedNoBlockname".
+ */
+export interface LocalizedNoBlockname {
+  text: string;
+  id?: string | null;
+  blockName?: string | null;
+  blockType: 'localizedNoBlockname';
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "localizedNumberBlock".
@@ -1774,7 +1807,7 @@ export interface TabsField {
     text: string;
     id?: string | null;
   }[];
-  blocks: (ContentBlock | NumberBlock | SubBlocksBlock | TabsBlock)[];
+  blocks: (ContentBlock | NoBlockname | NumberBlock | SubBlocksBlock | TabsBlock)[];
   group: {
     number: number;
   };
@@ -2434,6 +2467,7 @@ export interface BlockFieldsSelect<T extends boolean = true> {
     | T
     | {
         content?: T | ContentBlockSelect<T>;
+        noBlockname?: T | NoBlocknameSelect<T>;
         number?: T | NumberBlockSelect<T>;
         subBlocks?: T | SubBlocksBlockSelect<T>;
         tabs?: T | TabsBlockSelect<T>;
@@ -2442,6 +2476,7 @@ export interface BlockFieldsSelect<T extends boolean = true> {
     | T
     | {
         content?: T | ContentBlockSelect<T>;
+        noBlockname?: T | NoBlocknameSelect<T>;
         number?: T | NumberBlockSelect<T>;
         subBlocks?: T | SubBlocksBlockSelect<T>;
         tabs?: T | TabsBlockSelect<T>;
@@ -2450,6 +2485,7 @@ export interface BlockFieldsSelect<T extends boolean = true> {
     | T
     | {
         localizedContent?: T | LocalizedContentBlockSelect<T>;
+        localizedNoBlockname?: T | LocalizedNoBlocknameSelect<T>;
         localizedNumber?: T | LocalizedNumberBlockSelect<T>;
         localizedSubBlocks?: T | LocalizedSubBlocksBlockSelect<T>;
         localizedTabs?: T | LocalizedTabsBlockSelect<T>;
@@ -2458,6 +2494,7 @@ export interface BlockFieldsSelect<T extends boolean = true> {
     | T
     | {
         localizedContent?: T | LocalizedContentBlockSelect<T>;
+        localizedNoBlockname?: T | LocalizedNoBlocknameSelect<T>;
         localizedNumber?: T | LocalizedNumberBlockSelect<T>;
         localizedSubBlocks?: T | LocalizedSubBlocksBlockSelect<T>;
         localizedTabs?: T | LocalizedTabsBlockSelect<T>;
@@ -2466,6 +2503,7 @@ export interface BlockFieldsSelect<T extends boolean = true> {
     | T
     | {
         localizedContent?: T | LocalizedContentBlockSelect<T>;
+        localizedNoBlockname?: T | LocalizedNoBlocknameSelect<T>;
         localizedNumber?: T | LocalizedNumberBlockSelect<T>;
         localizedSubBlocks?: T | LocalizedSubBlocksBlockSelect<T>;
         localizedTabs?: T | LocalizedTabsBlockSelect<T>;
@@ -2663,6 +2701,15 @@ export interface ContentBlockSelect<T extends boolean = true> {
   id?: T;
   blockName?: T;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "NoBlockname_select".
+ */
+export interface NoBlocknameSelect<T extends boolean = true> {
+  text?: T;
+  id?: T;
+  blockName?: T;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "NumberBlock_select".
@@ -2712,6 +2759,15 @@ export interface LocalizedContentBlockSelect<T extends boolean = true> {
   id?: T;
   blockName?: T;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "localizedNoBlockname_select".
+ */
+export interface LocalizedNoBlocknameSelect<T extends boolean = true> {
+  text?: T;
+  id?: T;
+  blockName?: T;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "localizedNumberBlock_select".
@@ -3358,6 +3414,7 @@ export interface TabsFieldsSelect<T extends boolean = true> {
     | T
     | {
         content?: T | ContentBlockSelect<T>;
+        noBlockname?: T | NoBlocknameSelect<T>;
         number?: T | NumberBlockSelect<T>;
         subBlocks?: T | SubBlocksBlockSelect<T>;
         tabs?: T | TabsBlockSelect<T>;