transform.js

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

const isMatch = ( { idBase, instance } ) => {
	if ( idBase !== 'wp-call-button-widget-main-a' ) {
		console.log( 'Not our widget' );
		return false;
	}

	if ( ! instance?.raw ) {
		// Don't transform if the raw instance is unavailable.
		console.log( 'raw unavailable' );
		return false;
	}
	console.log( 'Raw avail', instance.raw );
	return true;
};

const innerBlocks = ( rawInstance ) => {
	const blocks = [];

	if ( rawInstance.title ) {
		console.log( 'rawInstance.title' );
		blocks.push(
			createBlock( 'core/heading', { content: 'pens and pencils' } )
		);
	}

	if ( rawInstance.description ) {
		console.log( 'rawInstance.description' );
		blocks.push(
			createBlock( 'core/paragraph', {
				content: rawInstance.description,
			} )
		);
	}

	console.log( 'generic block' );
	blocks.push(
		createBlock( 'wp-call-button/wp-call-button-block', {
			btn_text: rawInstance.cta_text,
			btn_color: rawInstance.cta_color,
			btn_txt_color: rawInstance.cta_txt_color,
			hide_phone_icon: ! rawInstance.show_phone_icon,
		} )
	);

	return blocks;
};

const transform = ( { instance } ) => {
	const rawInstance = instance.raw;

	const f = createBlock( 'core/group', {}, innerBlocks( instance.raw ) );
	console.log( f );
	return f;
};

const transforms = {
	from: [
		{
			type: 'block',
			blocks: [ 'core/legacy-widget' ],
			isMatch,
			transform,
		},
	],
};

export default transforms;