Question: Can I disable blockName in editor view?

[andwrobs]

Hey Payload community,

Question:
Is there anyway to disable the automatically applied blockName of a blocks field?

Auto-generated data per block
...
blockName
The Admin panel provides each block with a blockName field which optionally allows editors to label their blocks for better editability and readability.

• docs link

Example Screenshot:

• in this SS the current block's blockName is left blank, which displays as "Untitled"

Use case:
Our content team uses the blockName input to label the "Pages" of an entry, but not the Pages' nested "Content" blocks, and new editors get confused that they're not using the CMS properly when they see a bunch of Untitled's sprinkled everywhere.

Note to maintainers:
If it currently isn't possible, my 2 cents are that adding a configuration option on the block field to disable/hide the blockName property would complement the composability/customizability of your nested/recursive blocks, Tabs, etc. nicely.

[jmikrut]

Hey @andwrobs — this is a perfectly valid request. Right now, you could hide it with custom CSS, but we could easily support this internally. We would accept a PR to do so. Just would require CMD+F through the whole project, find all instances of blockName, and address each to make it optional. That'd be how I'd do it.

We'd probably want to think of how to expose this to the config.... i.e. if there are other "blockName" properties in the future, do we scope them all to a field.blockName object? And then, to disable, you'd do field.blockName.disable or similar?

I could think of maybe renaming [Untitled] as a future property, and even renaming the field blockName to something else on the data perspective.

Whaddya think?

[andwrobs]

I could see these properties being useful:

• field.blockName.disable
• field.blockName.placeholder
• field.blockName.default
• field.blockName.unique

Unsure if there would be a use for disable and hide, e.g. using hooks to populate blockNames similarly to how you would an auto generated internalTitle top level field.

w.r.t renaming blockName, for some "block types" I could see "blockTitle" making more sense, but then in others blockName is probably semantically closer. No strong opinion there.

I'll post the custom CSS if/when we implement that stopgap & take a stab at a PR, would love to get a contribution in to this awesome project 💯

[andwrobs]

^ following with steps for proposed (& working) solution before potential additional PR discussion:

To hide the blockName inputs, follow these steps:

make sure sass & sass-loader are installed

npm i sass sass-loader

create/update custom stylesheet, @ relative CMS src/styles/custom.scss

...

@import '~payload/scss';

div.section-title {
  display: none;
}

include custom stylesheet with this payload.config.ts config

export default buildConfig({
  ...
  admin: {
    ...
    // override existing payload styles with custom look
    css: path.resolve(__dirname, 'styles/custom.scss'),
    ...
  },
  ...
}) 

result

Relevant Docs

• https://payloadcms.com/docs/admin/customizing-css
• https://github.com/payloadcms/public-demo/blob/master/src/payload.config.ts
• https://github.com/payloadcms/public-demo/blob/master/src/styles/custom.scss
• CSS Not Loading in? #721 (comment)