How to implement Recursive Block?

GeorgeHulpoi10 months ago

1 1

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
			],
		},
	],
};

• Selected Answer
  

  GeorgeHulpoi10 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;