My Pattern Library

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' );