Как создать новый блок Gutenberg, изображение с кнопкой?

Не получается создать блок с ссылкой.
Мне нужно создать блок обернутый в ссылку, в блоке будет изображение и текст.
Изображение и текст создать получилось.
Для создания использовал https://github.com/ahmadawais/create-guten-block
Но как создать ссылку не могу понять, в поиске ничего не нашел(
Может кто то делал что то подобное, главное чтобы была ссылка)

Код того что у меня есть:

/**
 * BLOCK: gutensnails
 *
 * Registering a basic block with Gutenberg.
 * Simple block, renders and saves the same content without any interactivity.
 */

//  Import CSS.
const { RichText, MediaUpload, PlainText } = wp.editor;
const { registerBlockType } = wp.blocks;
const { Button } = wp.components;

// Import our CSS files
import './style.scss';
import './editor.scss';

registerBlockType('card-block/main', {
	title: 'Categoty link2',
	icon: 'heart',
	category: 'common',
	attributes: {
		title: {
			source: 'text',
			selector: '.card__title'
		},
		body: {
			type: 'array',
			source: 'children',
			selector: '.card__body'
		},
		imageAlt: {
			attribute: 'alt',
			selector: '.card__image'
		},
		imageUrl: {
			attribute: 'src',
			selector: '.card__image'
		}
	},
	edit({ attributes, className, setAttributes }) {

		const getImageButton = (openEvent) => {
			if(attributes.imageUrl) {
				return (
					<img
						src={ attributes.imageUrl }
						onClick={ openEvent }
						className="image"
						alt="image"
					/>
				);
			}
			else {
				return (
					<div className="button-container">
						<Button
							onClick={ openEvent }
							className="button button-large"
						>
							Pick an image
						</Button>
					</div>
				);
			}
		};

		return (
			<div className="container">
				<MediaUpload
					onSelect={ media => { setAttributes({ imageAlt: media.alt, imageUrl: media.url }); } }
					type="image"
					value={ attributes.imageID }
					render={ ({ open }) => getImageButton(open) }
				/>
				<PlainText
					onChange={ content => setAttributes({ title: content }) }
					value={ attributes.title }
					placeholder="Your card title"
					className="heading"
				/>
				<RichText
					onChange={ content => setAttributes({ body: content }) }
					value={ attributes.body }
					multiline="p"
					placeholder="Your card text"
					formattingControls={ ['bold', 'italic', 'underline'] }
					isSelected={ attributes.isSelected }
				/>
			</div>
		);

	},

	save({ attributes }) {

		const cardImage = (src, alt) => {
			if(!src) return null;

			if(alt) {
				return (
					<img
						className="card__image"
						src={ src }
						alt={ alt }
					/>
				);
			}

			// No alt set, so let's hide it from screen readers
			return (
				<img
					className="card__image"
					src={ src }
					alt=""
					aria-hidden="true"
				/>
			);
		};

		return (
			<div className="card">
				{ cardImage(attributes.imageUrl, attributes.imageAlt) }
				<div className="card__content">
					<h3 className="card__title">{ attributes.title }</h3>
					<div className="card__body">
						{ attributes.body }
					</div>
				</div>
			</div>
		);
	}
});