How to implement Recursive Block?

default discord avatar
GeorgeHulpoi9 months ago
1 1

Hello! I want to implement a recursive block.

export const HTMLElementBlock: Block = {
	slug: 'html-element',
	labels: {
		singular: 'HTML Element Block',
		plural: 'HTML Element Blocks',
	},
	interfaceName: 'HTMLElementBlock',
	fields: [
		{
			name: 'layout',
			type: 'blocks',
			blocks: [
				HTMLElementBlock,
				// rest of blocks
			],
		},
	],
};

The only problem is that I can't use the HTMLElementBlock before its declaration. How I am supposed to create a Recursive Block?

  • Selected Answer
    default discord avatar
    GeorgeHulpoi9 months ago

    I managed to resolve the issue with this code:

    import { Block, Field } from 'payload/types';
    
    type HTMLElementBlockType = (options?: {
    	depth?: number;
    }) => Block;
    
    const block: HTMLElementBlockType = ({ depth = 0 } = {}) => {
    	const layoutField: Field = {
    		name: 'layout',
    		type: 'blocks',
    		blocks: [],
    	};
    
    	let o = {
    		slug: 'html-element',
    		labels: {
    			singular: 'HTML Element Block',
    			plural: 'HTML Element Blocks',
    		},
    		interfaceName: 'HTMLElementBlock',
    		fields: [layoutField],
    	};
    
    	if (depth < 5) {
    		layoutField.blocks.push(block({ depth: depth + 1 }));
    	}
    
    	return o;
    };
    
    export default block;
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.