Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

RowLabel for Blocks

default discord avatar
arielarial2 years ago
1

Is there a way to customize a Block field's label? Just like Arrays have

admin.components.RowLabel

I'm trying to customize the block title with data from vimeo's oEmbed, to get a video title from the URL.



I already made this for an Array field, but apparently there's no way to do the same with Blocks? There's only a

label

prop, that does not accept a component :/



Ok, so I've found out a way to achieve this:



Payload automatically adds a "blockName" field to Blocks, with an input to allow user to edit each block label.



I added a field with the same name (blockName), and swapped in a custom component (admin.components.Field). Setting values from this component will change the value of the editable field as well.



Then it's business as usual, using Payload's hooks to get the document's data that I need from inside this component and using it to update the value.



Some extra steps to achieve in comparison to do the same with Array (and I get because I think this behavior is not exactly intended I guess 😅 ), but it works!



Related docs:


https://payloadcms.com/docs/fields/blocks#block-configs

(look for

blockName

)


https://payloadcms.com/docs/admin/components#swap-in-your-own-react-components
https://payloadcms.com/docs/admin/hooks#useform
    Star on GitHub

    Star

    Chat on Discord

    Discord

    online

    Can't find what you're looking for?

    Get dedicated engineering support directly from the Payload team.