Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
WP Owls - Owl Link Block Pattern
$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,
],
);
.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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment