Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Block pattern
<?php
/**
* Register block patterns.
* Include this file in your theme, and update image paths, prefix and text domain.
*
* @link https://developer.wordpress.org/block-editor/developers/block-api/block-patterns/
*/
/**
* Make sure that block patterns are enabled before registering.
* Requires WordPress version 5.5 or Gutenberg version 7.8.
*/
if ( function_exists( 'register_block_pattern' ) ) {
/**
* Check if the register_block_pattern_category exists.
* Requires WordPress 5.5 or Gutenberg version 8.2.
*/
if ( function_exists( 'register_block_pattern_category' ) ) {
register_block_pattern_category( 'forms', array( 'label' => __( 'Forms', 'text-domain' ) ) );
register_block_pattern_category( 'example', array( 'label' => __( 'Example', 'text-domain' ) ) );
register_block_pattern_category( 'blog', array( 'label' => __( 'Blog', 'text-domain' ) ) );
register_block_pattern_category( 'shop', array( 'label' => __( 'Shop', 'text-domain' ) ) );
}
/**
* Example 1: Contact form with flower background.
* Requires the Ninja Forms plugin: https://wordpress.org/plugins/ninja-forms/
* The form ID used in the example is the default ID.
*
* First, check if Ninja Forms is active.
*/
if ( class_exists( 'Ninja_Forms' ) ) {
/**
* Register the pattern.
*/
register_block_pattern(
'theme-slug/pattern-slug',
array(
'title' => __( 'Contact form', 'text-domain' ),
'categories' => array( 'forms', 'example' ),
'keywords' => array( __( 'Contact', 'text-domain' ), __( 'Ninja', 'text-domain' ) ),
'description' => __( 'A contact form with a flower background image and a heading above it.', 'text-domain' ),
'content' => '
<!-- wp:cover {"className":"theme-slug-contact-form", "url":"' . esc_url( get_theme_file_uri( 'assets/images/flora.png' ) ) . '",
"id":2038,"gradient":"blush-light-purple","contentPosition":"top center","align":"wide"} -->
<div class="wp-block-cover theme-slug-contact-form alignwide has-background-dim has-background-gradient
has-custom-content-position is-position-top-center"
style="background-image:url(' . esc_url( get_theme_file_uri( 'assets/images/flora.png' ) ) . ')">
<span aria-hidden="true" class="wp-block-cover__gradient-background
has-blush-light-purple-gradient-background"></span>
<div class="wp-block-cover__inner-container">
<!-- wp:heading {"align":"center","style":{"typography":{"fontSize":60}}} -->
<h2 class="has-text-align-center" style="font-size:60px">' . __( 'Book an appointment', 'text-domain' ) . '</h2>
<!-- /wp:heading -->
<!-- wp:ninja-forms/form {"formID":1,"formName":"Contact Me ( ID: 1 )"} -->
<div class="wp-block-ninja-forms-form">[ninja_forms id=1]</div>
<!-- /wp:ninja-forms/form --></div></div>
<!-- /wp:cover -->',
)
);
}
/**
* Example 2: Use a variable for the content.
* Uses the Ninja Forms plugin: https://wordpress.org/plugins/ninja-forms/
* The form ID used in the example is the default ID.
*/
$content = '
<!-- wp:cover {"url":"' . esc_url( get_theme_file_uri( 'assets/images/flora.png' ) ) . '",
"id":2038,"gradient":"blush-light-purple","contentPosition":"top center","align":"wide"} -->
<div class="wp-block-cover alignwide has-background-dim has-background-gradient
has-custom-content-position is-position-top-center"
style="background-image:url(' . esc_url( get_theme_file_uri( 'assets/images/flora.png' ) ) . ')">
<span aria-hidden="true" class="wp-block-cover__gradient-background
has-blush-light-purple-gradient-background"></span>
<div class="wp-block-cover__inner-container">
<!-- wp:heading {"align":"center","style":{"typography":{"fontSize":60}}} -->
<h2 class="has-text-align-center" style="font-size:60px">' . __( 'Book an appointment', 'text-domain' ) . '</h2>
<!-- /wp:heading -->';
/** Check if Ninja forms is active. */
if ( function_exists( 'ninja_forms' ) ) {
$content .= ' <!-- wp:ninja-forms/form {"formID":1,"formName":"Contact Me ( ID: 1 )"} -->
<div class="wp-block-ninja-forms-form">[ninja_forms id=1]</div>
<!-- /wp:ninja-forms/form -->';
/**
* If not, display a message asking to install and activate the plugin.
* -This can be improved to make sure that the message is not displayed to visitors.
*/
} elseif ( current_user_can( 'publish_posts' ) ) {
$content .= '<!-- wp:paragraph --><p>' . __( 'Please install a contact form plugin to use with this pattern.', 'text-domain' ) . '</p><!-- /wp:paragraph -->';
}
$content .= '</div></div><!-- /wp:cover -->';
register_block_pattern(
'theme-slug/contact-form-2',
array(
'title' => __( 'Contact form 2', 'text-domain' ),
'categories' => array( 'forms', 'example' ),
'keywords' => array( __( 'Contact', 'text-domain' ), __( 'Ninja', 'text-domain' ) ),
'description' => __( 'A contact form with a flower background image and a heading above it.', 'text-domain' ),
'content' => $content,
)
);
/**
* Blog and store section using WooCommerce.
* https://wordpress.org/plugins/woocommerce/
*
* Important: This block pattern was made using the demo content available in WooCommerce,
* You can import the example goods first, or adjust the product category and featured product ID.
* This content is only used as an example.
*/
/** Check if WooCommerce is active. */
if ( class_exists( 'WooCommerce' ) ) {
/**
* Register the pattern.
*/
register_block_pattern(
'theme-slug/blog-shop',
array(
'title' => __( 'Blog with shop columns', 'text-domain' ),
'categories' => array( 'blog', 'shop' ),
'keywords' => array( __( 'Shop', 'text-domain' ), __( 'Blog', 'text-domain' ) ),
'description' => __( 'A list of the latest posts and two columns of shop content.', 'text-domain' ),
'content' => '
<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"50%"} -->
<div class="wp-block-column" style="flex-basis:50%">
<!-- wp:latest-posts {"categories":[],"displayPostContent":true,"excerptLength":27,"displayAuthor":true,"displayPostDate":true} /-->
</div>
<!-- /wp:column -->
<!-- wp:column {"width":"30%"} -->
<div class="wp-block-column" style="flex-basis:30%">
<!-- wp:woocommerce/featured-category {"editMode":false,"height":564,"overlayColor":"primary","categoryId":209} -->
<!-- wp:button {"align":"center"} -->
<div class="wp-block-button aligncenter">
<a class="wp-block-button__link" href="' . esc_url( home_url( '/' ) . '/product-category/clothing/' ) . '">' . __( 'Shop now', 'text-domain' ) . '</a></div>
<!-- /wp:button -->
<!-- /wp:woocommerce/featured-category --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"25%"} -->
<div class="wp-block-column" style="flex-basis:25%">
<!-- wp:woocommerce/handpicked-products {"align":"wide","columns":1,"editMode":false,"products":[1895]} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->',
)
);
}
/**
* Cover block store section using WooCommerce.
* https://wordpress.org/plugins/woocommerce/
*
* Important: This block pattern was made using the demo content available in WooCommerce,
* You can import the example goods first, or adjust the product category and featured product ID.
* This content is only used as an example.
*
* The text in this block pattern can be improved by adding context for translators.
*
* Background photo from PXhere, public domain.
*/
/** Check if WooCommerce is active. */
if ( class_exists( 'WooCommerce' ) ) {
/**
* Register the pattern.
*/
register_block_pattern(
'theme-slug/shop-section',
array(
'title' => __( 'Cover block Store section', 'text-domain' ),
'categories' => array( 'shop' ),
'keywords' => array( __( 'Shop', 'text-domain' ) ),
'description' => __( 'A store section with a full with background image.', 'text-domain' ),
'content' => '
<!-- wp:cover {"url":"' . esc_url( get_theme_file_uri( 'assets/images/clothes.jpg' ) ) . '","id":2081,"hasParallax":true,"contentPosition":"center center","align":"full"} -->
<div class="wp-block-cover alignfull has-background-dim has-parallax is-position-center-center" style="background-image:url(' . esc_url( get_theme_file_uri( 'assets/images/clothes.jpg' ) ) . ')"><div class="wp-block-cover__inner-container"><!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"33.33%"} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:cover {"minHeight":251,"minHeightUnit":"px","customGradient":"linear-gradient(135deg,rgb(238,238,238) 34%,rgb(169,184,195) 100%)","contentPosition":"top center"} -->
<div class="wp-block-cover has-background-dim has-background-gradient has-custom-content-position is-position-top-center" style="background:linear-gradient(135deg,rgb(238,238,238) 34%,rgb(169,184,195) 100%);min-height:251px"><div class="wp-block-cover__inner-container">
<!-- wp:heading {"align":"left","textColor":"primary","fontSize":"normal"} -->
<h2 class="has-text-align-left has-primary-color has-text-color has-normal-font-size">' . __( 'View the', 'text-domain' ) . '</h2>
<!-- /wp:heading -->
<!-- wp:heading {"textColor":"primary","style":{"typography":{"fontSize":50}}} -->
<h2 class="has-primary-color has-text-color" style="font-size:50px">' . __( '2020', 'text-domain' ) . '</h2>
<!-- /wp:heading -->
<!-- wp:heading {"textColor":"primary","style":{"typography":{"fontSize":50}}} -->
<h2 class="has-primary-color has-text-color" style="font-size:50px">' . __( 'Hoodie collection', 'text-domain' ) . '</h2>
<!-- /wp:heading --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"66.66%"} -->
<div class="wp-block-column" style="flex-basis:66.66%">
<!-- wp:woocommerce/handpicked-products {"editMode":false,"contentVisibility":{"title":false,"price":false,"rating":false,"button":true},"products":[1895,1901,1902],"alignButtons":true} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:cover -->',
)
);
}
/**
* Profile block with social links and latest posts.
*
* Background photo from PXhere, public domain.
*/
/**
* Register the pattern.
*/
register_block_pattern(
'theme-slug/profile',
array(
'title' => __( 'Profile', 'text-domain' ),
'categories' => array( 'profile' ),
'keywords' => array( __( 'Profile', 'text-domain' ), __( 'User', 'text-domain' ) ),
'description' => __( 'A profile pattern with photo, text content, social media links and latest posts.', 'text-domain' ),
'content' => '
<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":2075,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large">
<img src="' . esc_url( get_theme_file_uri( 'assets/images/mother.jpg' ) ) . '" alt="" class="wp-image-2075"/></figure>
<!-- /wp:image -->
<!-- wp:social-links -->
<ul class="wp-block-social-links"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
<!-- wp:social-link {"url":"tw","service":"twitter"} /-->
<!-- wp:social-link {"url":"ln","service":"linkedin"} /-->
<!-- wp:social-link {"url":"ib","service":"instagram"} /-->
<!-- wp:social-link {"service":"facebook"} /-->
<!-- wp:social-link {"service":"youtube"} /--></ul>
<!-- /wp:social-links -->
<!-- wp:latest-posts {"categories":[],"postsToShow":1,"displayPostContent":true,"excerptLength":20,"displayAuthor":true,"displayPostDate":true} /--></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"textColor":"accent"} -->
<h2 class="has-accent-color has-text-color">' . __( 'Amanda', 'text-domain' ) . '</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"fontSize":"normal"} -->
<p class="has-normal-font-size">' . __( 'Sed eu commodo nisi. Nullam in nulla tempor, laoreet orci et, <strong>maximus</strong> lacus. Sed ut commodo justo, quis congue felis.', 'text-domain' ) . '</p>
<!-- /wp:paragraph -->
<!-- wp:heading {"level":3,"fontSize":"normal"} -->
<h3 class="has-normal-font-size"><strong>' . __( 'Etiam id laoreet arcu', 'text-domain' ) . '</strong>.</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>' . __( 'Vivamus sed rhoncus dolor. <a href="#">Ut eu eros augue. </a>', 'text-domain' ) . '</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->',
)
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.