Skip to content

Instantly share code, notes, and snippets.

@romerocs
Created October 7, 2020 21:26
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save romerocs/d80ef7747f49a13f324aada7eab5f91d to your computer and use it in GitHub Desktop.
Save romerocs/d80ef7747f49a13f324aada7eab5f91d to your computer and use it in GitHub Desktop.
<?php
/*
Plugin Name: WPS Custom Block Patterns
Description: Adds a custom block pattern to the Gutenberg block editor.
Version: 1.0
Author: Chris Romero
Author URI: https://cromero.io
*/
function wps_block_patterns() {
$template = '<!-- wp:columns -->
<div class="wp-block-columns">
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:paragraph -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
<!-- /wp:paragraph -->
<!-- wp:buttons -->
<div class="wp-block-buttons">
<!-- wp:button -->
<div class="wp-block-button">
<a class="wp-block-button__link">Learn More</a>
</div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
</div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:paragraph -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
<!-- /wp:paragraph -->
<!-- wp:buttons -->
<div class="wp-block-buttons">
<!-- wp:button -->
<div class="wp-block-button">
<a class="wp-block-button__link">Learn More</a>
</div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
</div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:paragraph -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
<!-- /wp:paragraph -->
<!-- wp:buttons -->
<div class="wp-block-buttons">
<!-- wp:button -->
<div class="wp-block-button">
<a class="wp-block-button__link">Learn more</a>
</div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
</div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->';
register_block_pattern(
'wps-patterns/three-column-with-buttons',
array(
'title' => __( 'Three column grid pattern', 'wps-patterns' ),
'description' => _x( 'Three columns of text and buttons.', 'Block pattern description', 'wps-patterns' ),
'content' => $template
)
);
}
add_action( 'init', 'wps_block_patterns' );
@romerocs
Copy link
Author

romerocs commented Oct 7, 2020

Just a super basic example of a Wordpress block pattern.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment