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.
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.
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?
I could see these properties being useful:
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 💯
^ following with steps for proposed (& working) solution before potential additional PR discussion:
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'),
...
},
...
})
Star
Discord
online
Get help straight from the Payload team with an Enterprise License.