Question: Can I disable blockName in editor view?

andwrobs

7 months ago

3 2

• Selected Answer
  

  jmikrut

  Payload Team

  7 months ago

  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?

  1 reply
• 

  andwrobs

  7 months ago

  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

  7 months ago

  ^ 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
  • #721 (comment)