This is the first in a twelve-part series of block features we’re ending with in 2022. The Twelve Blocks of Christmas allows visitors of B+P to copy the code of each pattern below into their own WordPress site.
The first in our series is a block pattern for a simple page introduction.
Hello.
This is the first sample block in Blocks + Patterns block advent calendar. All month long, we’ll be sharing valuable patterns you can use to build your site in WordPress.
This first pattern is a title and short description. Grouped together in my theme’s default width (748 px), the content width inside the group is limited to 500px and justified left. The text color is lighter than the headline but with significant contrast on the background. This is a good use for a simple introduction and landing page.
Finally, social buttons are positioned below. Using Twentig, the buttons will be fully opaque on hover. You can copy the code into your own site by clicking the accordion below.
Get the Code
<!-- wp:group {"layout":{"type":"constrained","contentSize":"500px","justifyContent":"left"}} -->
<div class="wp-block-group"><!-- wp:heading {"level":1,"className":"is-style-default"} -->
<h1 class="wp-block-heading is-style-default" id="hello">Hello.</h1>
<!-- /wp:heading -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"0.9rem"}},"textColor":"inputtext"} -->
<p class="has-inputtext-color has-text-color" style="font-size:0.9rem">This is the first sample block in Blocks + Patterns block advent calendar. All month long, we'll be sharing valuable patterns you can use to build your site in WordPress.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"0.9rem"}},"textColor":"inputtext"} -->
<p class="has-inputtext-color has-text-color" style="font-size:0.9rem">This first pattern is a title and short description. Grouped together, the content width inside the group is limited to 500px and justified left. The text color is lighter than the headline but with significant contrast on the background. This is a good use for a simple introduction and landing page.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"0.9rem"}},"textColor":"inputtext"} -->
<p class="has-inputtext-color has-text-color" style="font-size:0.9rem">Finally, social buttons are positioned below. Using <a href="https://blocksandpatterns.com/twentig-jet-fuel-for-blocks-default-themes/">Twentig</a>, the buttons will be fully opaque on hover.<br></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:social-links {"iconColor":"textondark","iconColorValue":"#fffffe","iconBackgroundColor":"dark","iconBackgroundColorValue":"#000001","className":"is-style-default","twHover":"opacity"} -->
<ul class="wp-block-social-links has-icon-color has-icon-background-color is-style-default tw-hover-opacity"><!-- wp:social-link {"url":"https://mattdesiena.com","service":"wordpress"} /-->
<!-- wp:social-link {"url":"https://blocksandpatterns.com","service":"chain"} /-->
<!-- wp:social-link {"url":"mastodon.world/@theinstantwin","service":"mastodon"} /--></ul>
<!-- /wp:social-links -->