Register Your Own Block Pattern
Adds a reusable "Call to action" pattern in its own "My Patterns" category to the block inserter, as a starting point for your own patterns.
Opens WPIDE on
Code
add_action( 'init', function () {
register_block_pattern_category( 'wpide-patterns', array( 'label' => 'My Patterns' ) );
register_block_pattern( 'wpide/call-to-action', array(
'title' => 'Call to action',
'description' => 'A centered heading, short text and a button.',
'categories' => array( 'wpide-patterns', 'call-to-action' ),
'keywords' => array( 'cta', 'button', 'banner' ),
'content' => '<!-- wp:group {"style":{"spacing":{"padding":{"top":"3em","bottom":"3em","left":"2em","right":"2em"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-top:3em;padding-right:2em;padding-bottom:3em;padding-left:2em"><!-- wp:heading {"textAlign":"center"} -->
<h2 class="wp-block-heading has-text-align-center">Ready to get started?</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Tell visitors what they get and why it matters.</p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="/contact/">Contact us</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->',
) );
} );Notes
Design the layout in the editor, copy it with "Copy" from the block toolbar and paste the markup into the content setting.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.