Skip to content

Instantly share code, notes, and snippets.

@webdevid

webdevid/my-pattern-library

Forked from ndiego/my-pattern-library
Created February 26, 2022 12:39
Show Gist options
  • Save webdevid/b6bf8e820f05c532abc7b566041563a6 to your computer and use it in GitHub Desktop.
Save webdevid/b6bf8e820f05c532abc7b566041563a6 to your computer and use it in GitHub Desktop.
Download ZIP
My Pattern Library
Raw
my-pattern-library
<?php
/**
* Plugin Name: My Pattern Library
* Description: A simple library of block patterns.
* Version: 0.1.0
* Requires at least: 5.8
* Requires PHP: 7.0
* Author: Your Name
* License: GPL v2 or later
* Text Domain: my-pattern-library
*/
/**
* INSTRUCTIONS
*
* This file creates the "My Pattern Library" plugin, which provides a starting
* point for your own block pattern library. Follow the steps to set started.
*
* 1. Add the my-pattern-library directory in the wp-content -> plugins folder.
* 2. Place this file in the new directory.
* 3. Navigate to the Plugins page in WordPress and you should see the plugin.
* 4. Activate the "My Pattern Library" plugin.
* 5. Edit the example patterns in this file and/or add your own!
*/
/**
* Register custom pattern.
*/
function my_pattern_library_register_block_patterns() {
register_block_pattern(
'my-pattern-library/feature-grid-light',
array(
'title' => __( 'Feature Grid - Light', 'my-pattern-library' ),
'description' => __( 'Showcase six featured items in a grid on a light background.', 'my-pattern-library' ),
'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(
'my-pattern-library/feature-grid-dark',
array(
'title' => __( 'Feature Grid - Dark', 'my-pattern-library' ),
'description' => __( 'Showcase six featured items in a grid on a dark background.', 'my-pattern-library' ),
'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":"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', 'my_pattern_library_register_block_patterns' );
/**
* Register custom pattern categories.
*/
function my_pattern_library_register_block_pattern_categories() {
register_block_pattern_category(
'custom',
array( 'label' => __( 'Custom', 'my-pattern-library' ) )
);
}
add_action( 'init', 'my_pattern_library_register_block_pattern_categories' );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment