automatic-block-names v0.0.1
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.
1 year ago