Browse Source

Add patterns to Blank Canvas Blocks

Kjell Reigstad 4 years ago
parent
commit
28bc1d1eb7

BIN
blank-canvas-blocks/assets/images/pattern-food.jpg


BIN
blank-canvas-blocks/assets/images/pattern-gradient.mp4


BIN
blank-canvas-blocks/assets/images/pattern-painting.jpg


+ 156 - 0
blank-canvas-blocks/inc/block-patterns.php

@@ -501,6 +501,162 @@ if ( ! function_exists( 'blank_canvas_register_block_patterns' ) ) :
 									<!-- /wp:paragraph -->',
 				)
 			);
+
+			register_block_pattern(
+				'blank-canvas/coming-soon-gradient',
+				array(
+					'title'      => __( 'Coming Soon: Gradient', 'blank-canvas' ),
+					'categories' => array( 'coming-soon' ),
+					'content'    => '<!-- wp:cover {"url":"' . esc_url( get_stylesheet_directory_uri() . '/assets/pattern-links-gradient.jpg' ) . '","id":2794,"dimRatio":0,"minHeight":100,"minHeightUnit":"vh","align":"full"} -->
+									<div class="wp-block-cover alignfull" style="min-height:100vh"><img class="wp-block-cover__image-background wp-image-2794" alt="" src="' . esc_url( get_stylesheet_directory_uri() . '/assets/pattern-links-gradient.jpg' ) . '" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:heading {"textAlign":"center","align":"full","style":{"typography":{"fontSize":"20px","lineHeight":"1"}},"textColor":"background"} -->
+									<h2 class="alignfull has-text-align-center has-background-color has-text-color" style="font-size:20px;line-height:1"><strong><span class="uppercase">' . esc_html__( 'COMING SOON', 'blank-canvas' ) . '</span></strong></h2>
+									<!-- /wp:heading -->
+
+									<!-- wp:heading {"textAlign":"center","level":3,"align":"full","style":{"typography":{"fontSize":"120px","lineHeight":"1"}}} -->
+									<h3 class="alignfull has-text-align-center" style="font-size:120px;line-height:1"><strong><span class="uppercase">' . esc_html__( 'Six Feet Over', 'blank-canvas' ) . '</span></strong></h3>
+									<!-- /wp:heading -->
+
+									<!-- wp:paragraph {"align":"center"} -->
+									<p class="has-text-align-center">' . esc_html__( 'A new album from Rage Slump coming April 2021. Follow us on BandCamp now to be the first to hear some sneak peeks of the album.', 'blank-canvas' ) . '</p>
+									<!-- /wp:paragraph -->
+
+									<!-- wp:buttons {"contentJustification":"center"} -->
+									<div class="wp-block-buttons is-content-justification-center"><!-- wp:button {"textColor":"background","className":"is-style-outline"} -->
+									<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-background-color has-text-color"><strong>' . esc_html__( 'FOLLOW US', 'blank-canvas' ) . '</strong></a></div>
+									<!-- /wp:button --></div>
+									<!-- /wp:buttons --></div></div>
+									<!-- /wp:cover -->',
+				)
+			);
+
+			register_block_pattern(
+				'blank-canvas/coming-soon-animated',
+				array(
+					'title'      => __( 'Coming Soon: Animated Gradient', 'blank-canvas' ),
+					'categories' => array( 'coming-soon' ),
+					'content'    => '<!-- wp:cover {"url":"' . esc_url( get_stylesheet_directory_uri() . '/assets/pattern-gradient.mp4' ) . '","id":2808,"dimRatio":0,"overlayColor":"primary","backgroundType":"video","minHeight":100,"minHeightUnit":"vh","align":"full"} -->
+									<div class="wp-block-cover alignfull has-primary-background-color" style="min-height:100vh"><video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="' . esc_url( get_stylesheet_directory_uri() . '/assets/pattern-gradient.mp4' ) . '" data-object-fit="cover"></video><div class="wp-block-cover__inner-container"><!-- wp:columns {"align":"full"} -->
+									<div class="wp-block-columns alignfull"><!-- wp:column {"width":"75%"} -->
+									<div class="wp-block-column" style="flex-basis:75%"><!-- wp:heading {"style":{"typography":{"lineHeight":"1","fontSize":"125px"}}} -->
+									<h2 style="font-size:125px;line-height:1"><strong>' . esc_html__( 'The High Fives', 'blank-canvas' ) . '</strong></h2>
+									<!-- /wp:heading -->
+
+									<!-- wp:social-links {"align":"left"} -->
+									<ul class="wp-block-social-links alignleft"><!-- wp:social-link {"url":"#","service":"soundcloud"} /-->
+
+									<!-- wp:social-link {"url":"#","service":"bandcamp"} /-->
+
+									<!-- wp:social-link {"url":"#","service":"facebook"} /-->
+
+									<!-- wp:social-link {"url":"#","service":"instagram"} /-->
+
+									<!-- wp:social-link {"url":"#","service":"youtube"} /--></ul>
+									<!-- /wp:social-links --></div>
+									<!-- /wp:column -->
+
+									<!-- wp:column {"width":"25%"} -->
+									<div class="wp-block-column" style="flex-basis:25%"></div>
+									<!-- /wp:column --></div>
+									<!-- /wp:columns --></div></div>
+									<!-- /wp:cover -->',
+				)
+			);
+
+			register_block_pattern(
+				'blank-canvas/coming-soon-art-gallery',
+				array(
+					'title'      => __( 'Coming Soon: Art Gallery', 'blank-canvas' ),
+					'categories' => array( 'coming-soon' ),
+					'content'    => '<!-- wp:media-text {"align":"full","mediaId":2719,"mediaLink":"' . esc_url( get_stylesheet_directory_uri() . '/assets/pattern-painting.jpg' ) . '","mediaType":"image","imageFill":true,"style":{"color":{"background":"#f3efec"}}} -->
+									<div class="wp-block-media-text alignfull is-stacked-on-mobile is-image-fill has-background" style="background-color:#f3efec"><figure class="wp-block-media-text__media" style="background-image:url(' . esc_url( get_stylesheet_directory_uri() . '/assets/pattern-painting.jpg' ) . ');background-position:50% 50%"><img src="' . esc_url( get_stylesheet_directory_uri() . '/assets/pattern-painting.jpg' ) . '" alt="' . esc_html__( '"Self-Portrait with Two Pupils, Marie Gabrielle Capet and Marie Marguerite Carreaux de Rosemond" by Adélaïde Labille-Guiard, hung up on a gallery wall.', 'blank-canvas' ) . '" class="wp-image-2719 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:cover {"customOverlayColor":"#f3efec","minHeight":100,"minHeightUnit":"vh","align":"full"} -->
+									<div class="wp-block-cover alignfull has-background-dim" style="background-color:#f3efec;min-height:100vh"><div class="wp-block-cover__inner-container"><!-- wp:heading {"style":{"typography":{"fontSize":"64px","lineHeight":"1"}},"textColor":"foreground"} -->
+									<h2 class="has-foreground-color has-text-color" style="font-size:64px;line-height:1">' . esc_html__( 'Opening Soon', 'blank-canvas' ) . '</h2>
+									<!-- /wp:heading -->
+
+									<!-- wp:paragraph {"style":{"typography":{"lineHeight":"0.5"}},"textColor":"foreground"} -->
+									<p class="has-foreground-color has-text-color" style="line-height:0.5">' . esc_html__( 'A new art gallery in downtown Boston.', 'blank-canvas' ) . '</p>
+									<!-- /wp:paragraph -->
+
+									<!-- wp:spacer {"height":150} -->
+									<div style="height:150px" aria-hidden="true" class="wp-block-spacer"></div>
+									<!-- /wp:spacer -->
+
+									<!-- wp:columns -->
+									<div class="wp-block-columns"><!-- wp:column -->
+									<div class="wp-block-column"><!-- wp:paragraph {"textColor":"foreground"} -->
+									<p class="has-foreground-color has-text-color">' . esc_html__( '1234 S Main Street', 'blank-canvas' ) . '<br>' . esc_html__( 'Boston, MA, 01010', 'blank-canvas' ) . '</p>
+									<!-- /wp:paragraph --></div>
+									<!-- /wp:column -->
+
+									<!-- wp:column -->
+									<div class="wp-block-column"><!-- wp:paragraph {"textColor":"foreground"} -->
+									<p class="has-foreground-color has-text-color"><a href="mailto:info@example.com">' . esc_html__( 'info@example.com', 'blank-canvas' ) . '<br></a>(123) 456-7890</p>
+									<!-- /wp:paragraph --></div>
+									<!-- /wp:column --></div>
+									<!-- /wp:columns --></div></div>
+									<!-- /wp:cover --></div></div>
+									<!-- /wp:media-text -->
+
+									<!-- wp:spacer -->
+									<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+									<!-- /wp:spacer -->',
+				)
+			);
+
+			register_block_pattern(
+				'blank-canvas/coming-soon-restaurant',
+				array(
+					'title'      => __( 'Coming Soon: Restaurant', 'blank-canvas' ),
+					'categories' => array( 'coming-soon' ),
+					'content'    => '<!-- wp:cover {"url":"' . esc_url( get_stylesheet_directory_uri() . '/assets/pattern-food.jpg' ) . '","id":2579,"dimRatio":0,"focalPoint":{"x":"1.00","y":"0.51"},"minHeight":100,"minHeightUnit":"vh","align":"full"} -->
+									<div class="wp-block-cover alignfull" style="min-height:100vh"><img class="wp-block-cover__image-background wp-image-2579" alt="" src="' . esc_url( get_stylesheet_directory_uri() . '/assets/pattern-food.jpg' ) . '" style="object-position:100% 51%" data-object-fit="cover" data-object-position="100% 51%"/><div class="wp-block-cover__inner-container"><!-- wp:columns {"align":"full"} -->
+									<div class="wp-block-columns alignfull"><!-- wp:column {"width":"65%"} -->
+									<div class="wp-block-column" style="flex-basis:65%"></div>
+									<!-- /wp:column -->
+
+									<!-- wp:column {"width":"35%"} -->
+									<div class="wp-block-column" style="flex-basis:35%"><!-- wp:paragraph -->
+									<p><strong>' . esc_html__( 'OAK & ANCHOR', 'blank-canvas' ) . '</strong></p>
+									<!-- /wp:paragraph -->
+
+									<!-- wp:spacer {"height":250} -->
+									<div style="height:250px" aria-hidden="true" class="wp-block-spacer"></div>
+									<!-- /wp:spacer -->
+
+									<!-- wp:heading {"style":{"typography":{"fontSize":"64px"}}} -->
+									<h2 style="font-size:64px"><strong>' . esc_html__( 'Coming Soon', 'blank-canvas' ) . '</strong></h2>
+									<!-- /wp:heading -->
+
+									<!-- wp:paragraph -->
+									<p>' . esc_html__( 'A new restaurant featuring farm-to-table dining.', 'blank-canvas' ) . '</p>
+									<!-- /wp:paragraph -->
+
+									<!-- wp:columns -->
+									<div class="wp-block-columns"><!-- wp:column -->
+									<div class="wp-block-column"><!-- wp:paragraph -->
+									<p>' . esc_html__( '1234 S Main Street', 'blank-canvas' ) . '<br>' . esc_html__( 'Townsville, MA, 01010', 'blank-canvas' ) . '</p>
+									<!-- /wp:paragraph --></div>
+									<!-- /wp:column -->
+
+									<!-- wp:column -->
+									<div class="wp-block-column"><!-- wp:paragraph {"style":{"color":{"text":"#ffffff","link":"#ffffff"}}} -->
+									<p class="has-text-color has-link-color" style="--wp--style--color--link:#ffffff;color:#ffffff"><a href="mailto:info@example.com">' . esc_html__( 'info@example.com', 'blank-canvas' ) . '<br></a>(123) 456-7890</p>
+									<!-- /wp:paragraph --></div>
+									<!-- /wp:column --></div>
+									<!-- /wp:columns -->
+
+									<!-- wp:social-links {"iconColor":"background","iconColorValue":"#FFFFFF","className":"is-style-logos-only"} -->
+									<ul class="wp-block-social-links has-icon-color is-style-logos-only"><!-- wp:social-link {"url":"#","service":"facebook"} /-->
+
+									<!-- wp:social-link {"url":"#","service":"yelp"} /-->
+
+									<!-- wp:social-link {"url":"#","service":"instagram"} /--></ul>
+									<!-- /wp:social-links --></div>
+									<!-- /wp:column --></div>
+									<!-- /wp:columns --></div></div>
+									<!-- /wp:cover -->',
+				)
+			);
 		}
 	}
 endif;