WP Owls - Owl Link Block Pattern

functions.php

$block_pattern_content = '<!-- wp:group {"className":"owl-link"} -->
<div class="wp-block-group owl-link"><!-- wp:image {"id":121,"sizeSlug":"full","linkDestination":"none","className":"owl-link__image"} -->
<figure class="wp-block-image size-full owl-link__image"><img src="http://wholesome-plugins.test/wp-content/uploads/2021/08/fikret-tozak-Zk-Ydz2IAs-unsplash-scaled-208x270-c-center.jpg" alt="" class="wp-image-121"/></figure>
<!-- /wp:image -->

<!-- wp:group {"className":"owl-link__content"} -->
<div class="wp-block-group owl-link__content"><!-- wp:paragraph -->
<p><strong>Courtney Patubo Kranzke</strong>&nbsp;submitted a proposal for the Global Community Sponsorship program for 2022. As analog events are still up in the air, WordCamps are not included in the draft.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a rel="noreferrer noopener" href="https://make.wordpress.org/community/2021/10/08/proposal-2022-global-community-sponsorship-program/" target="_blank">Proposal: 2022 Global Community Sponsorship program</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->';

register_block_pattern(
	'wp-owls/owl-link',
	[
		'categories'    => [
			'text',
		],
		'content'       => $block_pattern_content,
		'description'   => 'A link block with thumbnail, description and link',
		'keywords'      => 'example',
		'title'         => 'Owl Link - With thumbnail',
		'viewportWidth' => 800,
	],
);

style.css

.owl-link > .wp-block-group__inner-container {
	display: flex;
	gap: 1em;
}

.owl-link .owl-link__image {
	border-radius: 1em;
}

.owl-link .owl-link__content {
	border: 1px solid #333;
	border-radius: 1em;
	padding: 1em;
	margin: 0px;
}

.owl-link a {
	text-transform: uppercase;
}