Created
February 21, 2022 11:55
-
-
Save ndiego/b0480a3681b0b732544ab62fe71c7dad to your computer and use it in GitHub Desktop.
Register Block Patterns
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Register custom patterns. | |
*/ | |
function example_register_block_patterns() { | |
register_block_pattern( | |
'example/feature-grid-light', | |
array( | |
'title' => __( 'Feature Grid - Light', 'my-pattern-library' ), | |
'description' => __( 'Showcase six featured items in a grid on a light background.', 'textdomain' ), | |
'categories' => array( 'featured', 'columns', 'custom' ), | |
'keywords' => array( 'feature', 'grid' ), | |
'viewportWidth' => 1400, | |
'blockTypes' => array( 'core/columns' ), | |
'content' => '<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"60px","bottom":"60px"}}},"backgroundColor":"tertiary","layout":{"inherit":true}} --> | |
<div class="wp-block-group alignfull has-tertiary-background-color has-background" style="padding-top:60px;padding-bottom:60px"><!-- wp:columns {"align":"wide"} --> | |
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"33.33%","style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"backgroundColor":"background"} --> | |
<div class="wp-block-column has-background-background-color has-background" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px;flex-basis:33.33%"><!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}},"fontSize":"x-large"} --> | |
<h3 class="has-x-large-font-size" id="feature-one" style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px"><em>Feature One</em></h3> | |
<!-- /wp:heading --> | |
<!-- wp:paragraph {"fontSize":"small"} --> | |
<p class="has-small-font-size">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec mollis arcu, a consectetur velit. In hac habitasse platea dictumst.</p> | |
<!-- /wp:paragraph --> | |
<!-- wp:buttons {"style":{"spacing":{"margin":{"top":"30px"}}}} --> | |
<div class="wp-block-buttons" style="margin-top:30px"><!-- wp:button {"className":"is-style-outline","fontSize":"small"} --> | |
<div class="wp-block-button has-custom-font-size is-style-outline has-small-font-size"><a class="wp-block-button__link">Learn More</a></div> | |
<!-- /wp:button --></div> | |
<!-- /wp:buttons --></div> | |
<!-- /wp:column --> | |
<!-- wp:column {"width":"33.33%","style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"backgroundColor":"background"} --> | |
<div class="wp-block-column has-background-background-color has-background" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px;flex-basis:33.33%"><!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}},"fontSize":"x-large"} --> | |
<h3 class="has-x-large-font-size" id="feature-one" style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px"><em>Feature Two</em></h3> | |
<!-- /wp:heading --> | |
<!-- wp:paragraph {"fontSize":"small"} --> | |
<p class="has-small-font-size">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec mollis arcu, a consectetur velit. In hac habitasse platea dictumst.</p> | |
<!-- /wp:paragraph --> | |
<!-- wp:buttons {"style":{"spacing":{"margin":{"top":"30px"}}}} --> | |
<div class="wp-block-buttons" style="margin-top:30px"><!-- wp:button {"className":"is-style-outline","fontSize":"small"} --> | |
<div class="wp-block-button has-custom-font-size is-style-outline has-small-font-size"><a class="wp-block-button__link">Learn More</a></div> | |
<!-- /wp:button --></div> | |
<!-- /wp:buttons --></div> | |
<!-- /wp:column --> | |
<!-- wp:column {"width":"33.33%","style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"backgroundColor":"background","textColor":"foreground"} --> | |
<div class="wp-block-column has-foreground-color has-background-background-color has-text-color has-background" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px;flex-basis:33.33%"><!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}},"fontSize":"x-large"} --> | |
<h3 class="has-x-large-font-size" id="feature-one" style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px"><em>Feature Three</em></h3> | |
<!-- /wp:heading --> | |
<!-- wp:paragraph {"fontSize":"small"} --> | |
<p class="has-small-font-size">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec mollis arcu, a consectetur velit. In hac habitasse platea dictumst.</p> | |
<!-- /wp:paragraph --> | |
<!-- wp:buttons {"style":{"spacing":{"margin":{"top":"30px"}}}} --> | |
<div class="wp-block-buttons" style="margin-top:30px"><!-- wp:button {"textColor":"foreground","className":"is-style-outline","fontSize":"small"} --> | |
<div class="wp-block-button has-custom-font-size is-style-outline has-small-font-size"><a class="wp-block-button__link has-foreground-color has-text-color">Learn More</a></div> | |
<!-- /wp:button --></div> | |
<!-- /wp:buttons --></div> | |
<!-- /wp:column --></div> | |
<!-- /wp:columns --> | |
<!-- wp:columns {"align":"wide"} --> | |
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"33.33%","style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"backgroundColor":"background"} --> | |
<div class="wp-block-column has-background-background-color has-background" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px;flex-basis:33.33%"><!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}},"fontSize":"x-large"} --> | |
<h3 class="has-x-large-font-size" id="feature-one" style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px"><em>Feature Four</em></h3> | |
<!-- /wp:heading --> | |
<!-- wp:paragraph {"fontSize":"small"} --> | |
<p class="has-small-font-size">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec mollis arcu, a consectetur velit. In hac habitasse platea dictumst.</p> | |
<!-- /wp:paragraph --> | |
<!-- wp:buttons {"style":{"spacing":{"margin":{"top":"30px"}}}} --> | |
<div class="wp-block-buttons" style="margin-top:30px"><!-- wp:button {"className":"is-style-outline","fontSize":"small"} --> | |
<div class="wp-block-button has-custom-font-size is-style-outline has-small-font-size"><a class="wp-block-button__link">Learn More</a></div> | |
<!-- /wp:button --></div> | |
<!-- /wp:buttons --></div> | |
<!-- /wp:column --> | |
<!-- wp:column {"width":"33.33%","style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"backgroundColor":"background"} --> | |
<div class="wp-block-column has-background-background-color has-background" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px;flex-basis:33.33%"><!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}},"fontSize":"x-large"} --> | |
<h3 class="has-x-large-font-size" id="feature-one" style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px"><em>Feature Five</em></h3> | |
<!-- /wp:heading --> | |
<!-- wp:paragraph {"fontSize":"small"} --> | |
<p class="has-small-font-size">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec mollis arcu, a consectetur velit. In hac habitasse platea dictumst.</p> | |
<!-- /wp:paragraph --> | |
<!-- wp:buttons {"style":{"spacing":{"margin":{"top":"30px"}}}} --> | |
<div class="wp-block-buttons" style="margin-top:30px"><!-- wp:button {"className":"is-style-outline","fontSize":"small"} --> | |
<div class="wp-block-button has-custom-font-size is-style-outline has-small-font-size"><a class="wp-block-button__link">Learn More</a></div> | |
<!-- /wp:button --></div> | |
<!-- /wp:buttons --></div> | |
<!-- /wp:column --> | |
<!-- wp:column {"width":"33.33%","style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"backgroundColor":"primary","textColor":"background"} --> | |
<div class="wp-block-column has-background-color has-primary-background-color has-text-color has-background" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px;flex-basis:33.33%"><!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}},"fontSize":"x-large"} --> | |
<h3 class="has-x-large-font-size" id="feature-one" style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px"><em>Want More?</em></h3> | |
<!-- /wp:heading --> | |
<!-- wp:paragraph {"fontSize":"small"} --> | |
<p class="has-small-font-size">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec mollis arcu, a consectetur velit. In hac habitasse platea dictumst.</p> | |
<!-- /wp:paragraph --> | |
<!-- wp:buttons {"style":{"spacing":{"margin":{"top":"30px"}}}} --> | |
<div class="wp-block-buttons" style="margin-top:30px"><!-- wp:button {"backgroundColor":"background","textColor":"primary","className":"is-style-outline","fontSize":"small"} --> | |
<div class="wp-block-button has-custom-font-size is-style-outline has-small-font-size"><a class="wp-block-button__link has-primary-color has-background-background-color has-text-color has-background">Submit Request →</a></div> | |
<!-- /wp:button --></div> | |
<!-- /wp:buttons --></div> | |
<!-- /wp:column --></div> | |
<!-- /wp:columns --></div> | |
<!-- /wp:group -->' | |
) | |
); | |
register_block_pattern( | |
'example/feature-grid-dark', | |
array( | |
'title' => __( 'Feature Grid - Dark', 'textdomain' ), | |
'description' => __( 'Showcase six featured items in a grid on a dark background.', 'textdomain' ), | |
'categories' => array( 'featured', 'columns' ), | |
'keywords' => array( 'feature', 'grid' ), | |
'viewportWidth' => 1400, | |
'blockTypes' => array( 'core/columns' ), | |
'content' => '<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"60px","bottom":"60px"}}},"backgroundColor":"primary","layout":{"inherit":true}} --> | |
<div class="wp-block-group alignfull has-primary-background-color has-background" style="padding-top:60px;padding-bottom:60px"><!-- wp:columns {"align":"wide"} --> | |
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"33.33%","style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"backgroundColor":"background"} --> | |
<div class="wp-block-column has-background-background-color has-background" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px;flex-basis:33.33%"><!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}},"fontSize":"x-large"} --> | |
<h3 class="has-x-large-font-size" id="feature-one" style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px"><em>Feature One</em></h3> | |
<!-- /wp:heading --> | |
<!-- wp:paragraph {"fontSize":"small"} --> | |
<p class="has-small-font-size">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec mollis arcu, a consectetur velit. In hac habitasse platea dictumst.</p> | |
<!-- /wp:paragraph --> | |
<!-- wp:buttons {"style":{"spacing":{"margin":{"top":"30px"}}}} --> | |
<div class="wp-block-buttons" style="margin-top:30px"><!-- wp:button {"className":"is-style-outline","fontSize":"small"} --> | |
<div class="wp-block-button has-custom-font-size is-style-outline has-small-font-size"><a class="wp-block-button__link">Learn More</a></div> | |
<!-- /wp:button --></div> | |
<!-- /wp:buttons --></div> | |
<!-- /wp:column --> | |
<!-- wp:column {"width":"33.33%","style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"backgroundColor":"background"} --> | |
<div class="wp-block-column has-background-background-color has-background" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px;flex-basis:33.33%"><!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}},"fontSize":"x-large"} --> | |
<h3 class="has-x-large-font-size" id="feature-one" style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px"><em>Feature Two</em></h3> | |
<!-- /wp:heading --> | |
<!-- wp:paragraph {"fontSize":"small"} --> | |
<p class="has-small-font-size">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec mollis arcu, a consectetur velit. In hac habitasse platea dictumst.</p> | |
<!-- /wp:paragraph --> | |
<!-- wp:buttons {"style":{"spacing":{"margin":{"top":"30px"}}}} --> | |
<div class="wp-block-buttons" style="margin-top:30px"><!-- wp:button {"className":"is-style-outline","fontSize":"small"} --> | |
<div class="wp-block-button has-custom-font-size is-style-outline has-small-font-size"><a class="wp-block-button__link">Learn More</a></div> | |
<!-- /wp:button --></div> | |
<!-- /wp:buttons --></div> | |
<!-- /wp:column --> | |
<!-- wp:column {"width":"33.33%","style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"backgroundColor":"background","textColor":"foreground"} --> | |
<div class="wp-block-column has-foreground-color has-background-background-color has-text-color has-background" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px;flex-basis:33.33%"><!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}},"fontSize":"x-large"} --> | |
<h3 class="has-x-large-font-size" id="feature-one" style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px"><em>Feature Three</em></h3> | |
<!-- /wp:heading --> | |
<!-- wp:paragraph {"fontSize":"small"} --> | |
<p class="has-small-font-size">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec mollis arcu, a consectetur velit. In hac habitasse platea dictumst.</p> | |
<!-- /wp:paragraph --> | |
<!-- wp:buttons {"style":{"spacing":{"margin":{"top":"30px"}}}} --> | |
<div class="wp-block-buttons" style="margin-top:30px"><!-- wp:button {"textColor":"foreground","className":"is-style-outline","fontSize":"small"} --> | |
<div class="wp-block-button has-custom-font-size is-style-outline has-small-font-size"><a class="wp-block-button__link has-foreground-color has-text-color">Learn More</a></div> | |
<!-- /wp:button --></div> | |
<!-- /wp:buttons --></div> | |
<!-- /wp:column --></div> | |
<!-- /wp:columns --> | |
<!-- wp:columns {"align":"wide"} --> | |
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"33.33%","style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"backgroundColor":"background"} --> | |
<div class="wp-block-column has-background-background-color has-background" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px;flex-basis:33.33%"><!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}},"fontSize":"x-large"} --> | |
<h3 class="has-x-large-font-size" id="feature-one" style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px"><em>Feature Four</em></h3> | |
<!-- /wp:heading --> | |
<!-- wp:paragraph {"fontSize":"small"} --> | |
<p class="has-small-font-size">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec mollis arcu, a consectetur velit. In hac habitasse platea dictumst.</p> | |
<!-- /wp:paragraph --> | |
<!-- wp:buttons {"style":{"spacing":{"margin":{"top":"30px"}}}} --> | |
<div class="wp-block-buttons" style="margin-top:30px"><!-- wp:button {"className":"is-style-outline","fontSize":"small"} --> | |
<div class="wp-block-button has-custom-font-size is-style-outline has-small-font-size"><a class="wp-block-button__link">Learn More</a></div> | |
<!-- /wp:button --></div> | |
<!-- /wp:buttons --></div> | |
<!-- /wp:column --> | |
<!-- wp:column {"width":"33.33%","style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"backgroundColor":"background"} --> | |
<div class="wp-block-column has-background-background-color has-background" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px;flex-basis:33.33%"><!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}},"fontSize":"x-large"} --> | |
<h3 class="has-x-large-font-size" id="feature-one" style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px"><em>Feature Five</em></h3> | |
<!-- /wp:heading --> | |
<!-- wp:paragraph {"fontSize":"small"} --> | |
<p class="has-small-font-size">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec mollis arcu, a consectetur velit. In hac habitasse platea dictumst.</p> | |
<!-- /wp:paragraph --> | |
<!-- wp:buttons {"style":{"spacing":{"margin":{"top":"30px"}}}} --> | |
<div class="wp-block-buttons" style="margin-top:30px"><!-- wp:button {"className":"is-style-outline","fontSize":"small"} --> | |
<div class="wp-block-button has-custom-font-size is-style-outline has-small-font-size"><a class="wp-block-button__link">Learn More</a></div> | |
<!-- /wp:button --></div> | |
<!-- /wp:buttons --></div> | |
<!-- /wp:column --> | |
<!-- wp:column {"width":"33.33%","style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"backgroundColor":"secondary","textColor":"foreground"} --> | |
<div class="wp-block-column has-foreground-color has-secondary-background-color has-text-color has-background" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px;flex-basis:33.33%"><!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}},"fontSize":"x-large"} --> | |
<h3 class="has-x-large-font-size" id="feature-one" style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px"><em>Want More?</em></h3> | |
<!-- /wp:heading --> | |
<!-- wp:paragraph {"fontSize":"small"} --> | |
<p class="has-small-font-size">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec mollis arcu, a consectetur velit. In hac habitasse platea dictumst.</p> | |
<!-- /wp:paragraph --> | |
<!-- wp:buttons {"style":{"spacing":{"margin":{"top":"30px"}}}} --> | |
<div class="wp-block-buttons" style="margin-top:30px"><!-- wp:button {"backgroundColor":"foreground","textColor":"background","className":"is-style-fill","fontSize":"small"} --> | |
<div class="wp-block-button has-custom-font-size is-style-fill has-small-font-size"><a class="wp-block-button__link has-background-color has-foreground-background-color has-text-color has-background">Submit Request →</a></div> | |
<!-- /wp:button --></div> | |
<!-- /wp:buttons --></div> | |
<!-- /wp:column --></div> | |
<!-- /wp:columns --></div> | |
<!-- /wp:group -->' | |
) | |
); | |
} | |
add_action( 'init', 'example_register_block_patterns' ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment