So you want to make block patterns?

So you want to make block patterns?

If you’ve ever built something for the WordPress block editor — a theme or a plugin — you may have also heard about block patterns. Looking at the patterns that come bundled with WordPress, I thought it would be nice to dedicate to them a short post. They’re pretty nice, useful shortcuts when you know them, but there’s a good chance you may not know what they are or why you might want to use them. What’s a block pattern? Patterns are collections of pre-arranged blocks that can be combined and arranged in many ways making it easier to create beautiful content. They act as a head-start, leaving you to plug and play with your content as you see fit and be as simple as single blocks or as complex as a full-page layout. They live in a tab in the block library. You can click or drag and you’re able to preview them with your site’s styles. Basically, a block pattern is just a bunch of blocks put together in advance: <!– wp:group –> <!– /wp:image –> <!– wp:quote {“align”:”center”,”className”:”is-style-large”} –> <blockquote class=”wp-block-quote has-text-align-center is-style-large”><p>”Contributing makes me feel like I’m being useful to the planet.”</p><cite>— Anna Wong, <em>Volunteer</em></cite></blockquote> <!– /wp:quote –> <!– wp:separator {“className”:”is-style-default”} –> <hr class=”wp-block-separator is-style-default”/> <!– /wp:separator –></div></div> <!– /wp:group –> That’s also how you create them: just use the block editor to configure a smattering of blocks to your liking, and the hard part’s over. How do I get them in the block library? There’s more documentation in the handbook, but what it boils down to is this: <?php /* Plugin Name: Quote Pattern Example Plugin */ register_block_pattern( ‘my-plugin/my-quote-pattern’, array( ‘title’ => __( ‘Quote with Avatar’, ‘my-plugin’ ), ‘categories’ => array( ‘text’ ), ‘description’ => _x( ‘A big quote with an avatar”.’, ‘Block pattern description’, ‘my-plugin’ ), ‘content’ => ‘<!– wp:group –><!– /wp:image –><!– wp:quote {“align”:”center”,”className”:”is-style-large”} –><blockquote class=”wp-block-quote has-text-align-center is-style-large”><p>”Contributing makes me feel like I’m being useful to the planet.”</p><cite>— Anna Wong, <em>Volunteer</em></cite></blockquote><!– /wp:quote –><!– wp:separator {“className”:”is-style-default”} –><hr class=”wp-block-separator is-style-default”/><!– /wp:separator –></div></div><!– /wp:group –>’, ) ); ?> That’s a snippet of PHP, which means you can drop it in a WordPress plugin, or perhaps more simply, paste it into the functions.php file from your theme. Done: For patterns that include images, it’s worth thinking about where those are stored. The TT1 Blocks theme (which is a fancy name for “TwentyTwentyOne Blocks”) stores images in the theme library.…
Source: So you want to make block patterns?

댓글 남기기