Question: Can I disable blockName in editor view?

default discord avatar
andwrobs
last year
3 2

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.

Example Screenshot:
Screen Shot 2022-08-03 at 6 08 23 PM

  • 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.

  • discord user avatar
    jmikrut
    Payload Team
    last year

    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
  • default discord avatar
    andwrobs
    last year

    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 💯

  • default discord avatar
    andwrobs
    last year

    ^ 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
    custom-scss

    Relevant Docs

Open the post
Continue the discussion in GitHub
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.