How to add ‘transforms’ to custom block (when using wp-create-block)

  • Resolved audunmb

    (@audunmb)


    10 months, 4 weeks ago

    I’m creating a (my first) custom block for adding fact boxes to articles. I’ve created the block with ‘innerBlocks’ and is nearly done, but I’m stuck adding the transforms property.

    I want to be able to transform any block into my block (like a group block) and to be able to transfrom my block back into a group.

    I’m using wp-create-block and it seems like I should add the transforms code in the block.json. But how do I add it there? The code in the documentation is for adding it without block.json.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter audunmb

    (@audunmb)

    OK. I can’t add it to block.json, I have to add it as I register the block. With the wp-create-block script, that’s in edit.js.

    Still I can’t get it to work.

    I tried to copy from another block, but it still don’t work. Now I have:

    const settings = {
	transforms: {
		from: [
		{
		type: 'block',
		isMultiBlock: true,
		blocks: [ '*' ],
		__experimentalConvert( blocks ) {
		const groupInnerBlocks = blocks.map( ( block ) => {
	return createBlock(
		block.name,
		block.attributes,
		block.innerBlocks
		);
	} );
return createBlock(
	'wp-create-block/factbox',
	groupInnerBlocks
	);
	},
	},
	]
	}
};

    This is more or less the same code that is in another block which works for grouping blocks, but my block won’t work.

    Thread Starter audunmb

    (@audunmb)

    The above code didn’t work because I didn’t import ‘create-block’. This wors

    
import { registerBlockType, createBlock } from '@wordpress/blocks';

registerBlockType( metadata.name, {
	/*...*/
	transforms: {	
           from: [
           {
            type: 'block',
            blocks: [ 'core/group' ],
            transform: ( attributes, innerBlocks ) => {
                return createBlock(
                    'create-block/factbox',
                    attributes,
                    innerBlocks
                );
            },
        },
		],
	to: [
		{
            type: 'block',
            blocks: [ 'core/group' ],
            transform: ( attributes, innerBlocks ) => {
                return createBlock(
                    'core/group',
                    attributes,
                    innerBlocks
                );
            },
        },
	]
  },
} );
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to add ‘transforms’ to custom block (when using wp-create-block)’ is closed to new replies.