RowLabel for Blocks

default discord avatar
arielariallast year
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 help straight from the Payload team with an Enterprise License.