automatic-block-names

automatic-block-names

This is a plugin for Payload CMS that allows you to set a custom function on Blocks that will automatically generate the blockName, improving the CMS usability and readability.

The blockName, although still editable from the UI, will be overwritten on each save if a function is set.

Configuration

Simply add the plugin to your plugins list in payload.config.ts. For example:

plugins: [
    automaticBlockNames({
        collections: [ 'reports' ],
    }),
],

Parameters

Parameter	Type	Default	Description
enabled	bool	true	Whether the plugin is active
collections	string[]	-	The collections on which to activate the plugin. If not specified, it applies to all collections
functionName	string	blockName	The name of the custom property that describes the function for generating the blockName

All parameters are optional.

Usage

In the blocks where you want automatic blockName generation, define a property called blockName (or a different name if specified in functionName) in the custom object:

const WordfenceScan: Block = {
    slug: 'wordfenceScan',
    custom: {
        blockName: (block) => {
            if (block.action === 'update')
                return `[${formatDate(block.date)}] Updated ${block.name} from ${block.fromVer} to ${block.toVer}`

            return `[${formatDate(block.date)}] ${block.name} #${block.action}`
        },
    },
    ...
}

TypeScript

To type the blockName function, you can import the LabeledBlock type and use it instead of the Block type. For example:

const WordfenceScan: LabeledBlock<WordfenceScanBlock> = {
    slug: 'wordfenceScan',
    interfaceName: 'WordfenceScanBlock',
    custom: {
        blockName: (block) => {
            // Now `block` is typed as `WordfenceScanBlock`
        },
    },
    ...
}

The type of the block can be automatically generated by using the Payload interfaceName proprerty.

If you have defined a custom name for the function via the functionName option, you can use the LabeledBlockWithFuncName type:

type Block = LabeledBlockWithFuncName<WordfenceScanBlock, 'myBlockNameFunc'>

const WordfenceScan: Block = {
    slug: 'wordfenceScan',
    interfaceName: 'WordfenceScanBlock',
    custom: {
        myBlockNameFunc: (block) => {
            // Now `block` is typed as `WordfenceScanBlock`
        },
    },
    ...
}

Disclaimer

This plugin was developed primarily for learning purposes. Do not assume it works correctly.