Add featured and CTA patterns.

wpengine · Mar 11, 2022 · 5df9a33 · 5df9a33
1 parent 70b5d38
commit 5df9a33
Show file tree

Hide file tree

Showing 5 changed files with 228 additions and 0 deletions.
diff --git a/inc/block-patterns.php b/inc/block-patterns.php
@@ -73,10 +73,14 @@ function frost_register_block_patterns() {
 		'footer/footer-three-columns-black-background',
 		'general/general-boxes-two',
 		'general/general-boxes-two-black-background',
+		'general/general-boxes-two-gradient',
+		'general/general-boxes-two-gradient-black-background',
 		'general/general-boxes-three',
 		'general/general-boxes-three-black-background',
 		'general/general-cta-button',
 		'general/general-cta-button-black-background',
+		'general/general-cta-button-boxed',
+		'general/general-cta-button-boxed-black-background',
 		'general/general-cta-buttons',
 		'general/general-cta-buttons-black-background',
 		'general/general-cta-stacked',

diff --git a/inc/patterns/general/general-boxes-two-gradient-black-background.php b/inc/patterns/general/general-boxes-two-gradient-black-background.php
@@ -0,0 +1,73 @@
+<?php
+/**
+ * Frost: Featured boxes with text, button, black background
+ *
+ * @package Frost
+ */
+
+return array(
+	'title'         => __( 'Featured boxes with text, button.', 'frost' ),
+	'categories'    => array( 'frost-general' ),
+	'viewportWidth' => 1280,
+	'content'       => '<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"margin":{"top":"0px"}}},"backgroundColor":"black","layout":{"inherit":true}} -->
+				<div class="wp-block-group alignfull has-black-background-color has-background" style="margin-top:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:spacer -->
+				<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+				<!-- /wp:spacer -->
+				
+				<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}},"border":{"radius":"0px"}},"backgroundColor":"white","className":"is-style-boxshadow"} -->
+				<div class="wp-block-group alignwide is-style-boxshadow has-white-background-color has-background" style="border-radius:0px;padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:columns {"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"}}}} -->
+				<div class="wp-block-columns" style="margin-top:0px;margin-bottom:0px"><!-- wp:column -->
+				<div class="wp-block-column"><!-- wp:group {"style":{"spacing":{"padding":{"top":"50px","right":"50px","bottom":"50px","left":"50px"}}},"gradient":"black-primary"} -->
+				<div class="wp-block-group has-black-primary-gradient-background has-background" style="padding-top:50px;padding-right:50px;padding-bottom:50px;padding-left:50px"><!-- wp:heading {"level":3,"textColor":"white"} -->
+				<h3 class="has-white-color has-text-color" id="sample-heading">' . esc_html__( 'Heading', 'frost' ) . '</h3>
+				<!-- /wp:heading -->
+				
+				<!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.5","fontSize":"18px"}},"textColor":"white"} -->
+				<p class="has-white-color has-text-color" style="font-size:18px;line-height:1.5">Lorem ipsum dolor gravida amet, consectet et belle adipiscing.</p>
+				<!-- /wp:paragraph -->
+				
+				<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"fontSize":"small"} -->
+				<p class="has-link-color has-small-font-size"><a href="#"><strong>' . esc_html__( 'Learn more', 'frost' ) . ' →</strong></a></p>
+				<!-- /wp:paragraph --></div>
+				<!-- /wp:group --></div>
+				<!-- /wp:column -->
+				
+				<!-- wp:column -->
+				<div class="wp-block-column"><!-- wp:group {"style":{"spacing":{"padding":{"top":"50px","right":"50px","bottom":"50px","left":"50px"}}},"gradient":"black-secondary"} -->
+				<div class="wp-block-group has-black-secondary-gradient-background has-background" style="padding-top:50px;padding-right:50px;padding-bottom:50px;padding-left:50px"><!-- wp:heading {"level":3,"textColor":"white"} -->
+				<h3 class="has-white-color has-text-color" id="sample-heading">' . esc_html__( 'Heading', 'frost' ) . '</h3>
+				<!-- /wp:heading -->
+				
+				<!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.5","fontSize":"18px"}},"textColor":"white"} -->
+				<p class="has-white-color has-text-color" style="font-size:18px;line-height:1.5">Lorem ipsum dolor gravida amet, consectet et belle adipiscing.</p>
+				<!-- /wp:paragraph -->
+				
+				<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"fontSize":"small"} -->
+				<p class="has-link-color has-small-font-size"><a href="#"><strong>' . esc_html__( 'Learn more', 'frost' ) . ' →</strong></a></p>
+				<!-- /wp:paragraph --></div>
+				<!-- /wp:group --></div>
+				<!-- /wp:column -->
+				
+				<!-- wp:column -->
+				<div class="wp-block-column"><!-- wp:group {"style":{"spacing":{"padding":{"top":"50px","right":"50px","bottom":"50px","left":"50px"}}},"gradient":"black-tertiary"} -->
+				<div class="wp-block-group has-black-tertiary-gradient-background has-background" style="padding-top:50px;padding-right:50px;padding-bottom:50px;padding-left:50px"><!-- wp:heading {"level":3,"textColor":"white"} -->
+				<h3 class="has-white-color has-text-color" id="sample-heading">' . esc_html__( 'Heading', 'frost' ) . '</h3>
+				<!-- /wp:heading -->
+				
+				<!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.5","fontSize":"18px"}},"textColor":"white"} -->
+				<p class="has-white-color has-text-color" style="font-size:18px;line-height:1.5">Lorem ipsum dolor gravida amet, consectet et belle adipiscing.</p>
+				<!-- /wp:paragraph -->
+				
+				<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"fontSize":"small"} -->
+				<p class="has-link-color has-small-font-size"><a href="#"><strong>' . esc_html__( 'Learn more', 'frost' ) . ' →</strong></a></p>
+				<!-- /wp:paragraph --></div>
+				<!-- /wp:group --></div>
+				<!-- /wp:column --></div>
+				<!-- /wp:columns --></div>
+				<!-- /wp:group -->
+				
+				<!-- wp:spacer -->
+				<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+				<!-- /wp:spacer --></div>
+				<!-- /wp:group -->',
+);
diff --git a/inc/patterns/general/general-boxes-two-gradient.php b/inc/patterns/general/general-boxes-two-gradient.php
@@ -0,0 +1,73 @@
+<?php
+/**
+ * Frost: Featured boxes with text, button
+ *
+ * @package Frost
+ */
+
+return array(
+	'title'         => __( 'Featured boxes with text, button.', 'frost' ),
+	'categories'    => array( 'frost-general' ),
+	'viewportWidth' => 1280,
+	'content'       => '<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"margin":{"top":"0px"}}},"layout":{"inherit":true}} -->
+				<div class="wp-block-group alignfull" style="margin-top:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:spacer -->
+				<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+				<!-- /wp:spacer -->
+				
+				<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}},"border":{"radius":"0px"}},"backgroundColor":"white","className":"is-style-boxshadow"} -->
+				<div class="wp-block-group alignwide is-style-boxshadow has-white-background-color has-background" style="border-radius:0px;padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:columns {"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"}}}} -->
+				<div class="wp-block-columns" style="margin-top:0px;margin-bottom:0px"><!-- wp:column -->
+				<div class="wp-block-column"><!-- wp:group {"style":{"spacing":{"padding":{"top":"50px","right":"50px","bottom":"50px","left":"50px"}}},"gradient":"black-primary"} -->
+				<div class="wp-block-group has-black-primary-gradient-background has-background" style="padding-top:50px;padding-right:50px;padding-bottom:50px;padding-left:50px"><!-- wp:heading {"level":3,"textColor":"white"} -->
+				<h3 class="has-white-color has-text-color" id="sample-heading">' . esc_html__( 'Heading', 'frost' ) . '</h3>
+				<!-- /wp:heading -->
+				
+				<!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.5","fontSize":"18px"}},"textColor":"white"} -->
+				<p class="has-white-color has-text-color" style="font-size:18px;line-height:1.5">Lorem ipsum dolor gravida amet, consectet et belle adipiscing.</p>
+				<!-- /wp:paragraph -->
+				
+				<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"fontSize":"small"} -->
+				<p class="has-link-color has-small-font-size"><a href="#"><strong>' . esc_html__( 'Learn more', 'frost' ) . ' →</strong></a></p>
+				<!-- /wp:paragraph --></div>
+				<!-- /wp:group --></div>
+				<!-- /wp:column -->
+				
+				<!-- wp:column -->
+				<div class="wp-block-column"><!-- wp:group {"style":{"spacing":{"padding":{"top":"50px","right":"50px","bottom":"50px","left":"50px"}}},"gradient":"black-secondary"} -->
+				<div class="wp-block-group has-black-secondary-gradient-background has-background" style="padding-top:50px;padding-right:50px;padding-bottom:50px;padding-left:50px"><!-- wp:heading {"level":3,"textColor":"white"} -->
+				<h3 class="has-white-color has-text-color" id="sample-heading">' . esc_html__( 'Heading', 'frost' ) . '</h3>
+				<!-- /wp:heading -->
+				
+				<!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.5","fontSize":"18px"}},"textColor":"white"} -->
+				<p class="has-white-color has-text-color" style="font-size:18px;line-height:1.5">Lorem ipsum dolor gravida amet, consectet et belle adipiscing.</p>
+				<!-- /wp:paragraph -->
+				
+				<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"fontSize":"small"} -->
+				<p class="has-link-color has-small-font-size"><a href="https://frostwp.com/patterns/"><strong>' . esc_html__( 'Learn more', 'frost' ) . ' →</strong></a></p>
+				<!-- /wp:paragraph --></div>
+				<!-- /wp:group --></div>
+				<!-- /wp:column -->
+				
+				<!-- wp:column -->
+				<div class="wp-block-column"><!-- wp:group {"style":{"spacing":{"padding":{"top":"50px","right":"50px","bottom":"50px","left":"50px"}}},"gradient":"black-tertiary"} -->
+				<div class="wp-block-group has-black-tertiary-gradient-background has-background" style="padding-top:50px;padding-right:50px;padding-bottom:50px;padding-left:50px"><!-- wp:heading {"level":3,"textColor":"white"} -->
+				<h3 class="has-white-color has-text-color" id="sample-heading">' . esc_html__( 'Heading', 'frost' ) . '</h3>
+				<!-- /wp:heading -->
+				
+				<!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.5","fontSize":"18px"}},"textColor":"white"} -->
+				<p class="has-white-color has-text-color" style="font-size:18px;line-height:1.5">Lorem ipsum dolor gravida amet, consectet et belle adipiscing.</p>
+				<!-- /wp:paragraph -->
+				
+				<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"fontSize":"small"} -->
+				<p class="has-link-color has-small-font-size"><a href="#"><strong>' . esc_html__( 'Learn more', 'frost' ) . ' →</strong></a></p>
+				<!-- /wp:paragraph --></div>
+				<!-- /wp:group --></div>
+				<!-- /wp:column --></div>
+				<!-- /wp:columns --></div>
+				<!-- /wp:group -->
+				
+				<!-- wp:spacer -->
+				<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+				<!-- /wp:spacer --></div>
+				<!-- /wp:group -->',
+);
diff --git a/inc/patterns/general/general-cta-button-boxed-black-background.php b/inc/patterns/general/general-cta-button-boxed-black-background.php
@@ -0,0 +1,39 @@
+<?php
+/**
+ * Frost: Call-to-action pattern with button, black background
+ *
+ * @package Frost
+ */
+
+return array(
+	'title'         => __( 'Call-to-action with text, button.', 'frost' ),
+	'categories'    => array( 'frost-general' ),
+	'viewportWidth' => 1280,
+	'content'       => '<!-- wp:group {"align":"full","style":{"spacing":{"margin":{"top":"0px"}}},"backgroundColor":"black","layout":{"inherit":true}} -->
+				<div class="wp-block-group alignfull has-black-background-color has-background" style="margin-top:0px"><!-- wp:spacer -->
+				<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+				<!-- /wp:spacer -->
+				
+				<!-- wp:group {"align":"wide","style":{"border":{"width":"20px"}},"borderColor":"white","className":"is-style-boxshadow"} -->
+				<div class="wp-block-group alignwide is-style-boxshadow has-border-color has-white-border-color" style="border-width:20px"><!-- wp:columns {"verticalAlignment":"center","align":"wide","style":{"spacing":{"padding":{"top":"60px","right":"60px","bottom":"60px","left":"60px"}}},"textColor":"white"} -->
+				<div class="wp-block-columns alignwide are-vertically-aligned-center has-white-color has-text-color" style="padding-top:60px;padding-right:60px;padding-bottom:60px;padding-left:60px"><!-- wp:column {"verticalAlignment":"center","width":"65%"} -->
+				<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:65%"><!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.5"}},"fontSize":"large"} -->
+				<p class="has-large-font-size" style="line-height:1.5">Lorem ipsum dolor sit amet, consectetur adipiscing lectus. Vestibulum mi justo, luctus eu pellentesque vitae gravida non.</p>
+				<!-- /wp:paragraph --></div>
+				<!-- /wp:column -->
+				
+				<!-- wp:column {"verticalAlignment":"center","width":"35%"} -->
+				<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:35%"><!-- wp:buttons {"layout":{"type":"flex","justifyContent":"right","orientation":"horizontal"}} -->
+				<div class="wp-block-buttons"><!-- wp:button {"style":{"spacing":{"padding":{"top":"15px","right":"25px","bottom":"15px","left":"25px"}},"border":{"radius":"0px"}},"className":"is-style-fill-white"} -->
+				<div class="wp-block-button is-style-fill-white"><a class="wp-block-button__link" style="border-radius:0px;padding-top:15px;padding-right:25px;padding-bottom:15px;padding-left:25px">' . esc_html__( 'Let’s Get Started', 'frost' ) . ' →</a></div>
+				<!-- /wp:button --></div>
+				<!-- /wp:buttons --></div>
+				<!-- /wp:column --></div>
+				<!-- /wp:columns --></div>
+				<!-- /wp:group -->
+				
+				<!-- wp:spacer -->
+				<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+				<!-- /wp:spacer --></div>
+				<!-- /wp:group -->',
+);
diff --git a/inc/patterns/general/general-cta-button-boxed.php b/inc/patterns/general/general-cta-button-boxed.php
@@ -0,0 +1,39 @@
+<?php
+/**
+ * Frost: Call-to-action pattern with button
+ *
+ * @package Frost
+ */
+
+return array(
+	'title'         => __( 'Call-to-action with text, button.', 'frost' ),
+	'categories'    => array( 'frost-general' ),
+	'viewportWidth' => 1280,
+	'content'       => '<!-- wp:group {"align":"full","style":{"spacing":{"margin":{"top":"0px"}}},"layout":{"inherit":true}} -->
+				<div class="wp-block-group alignfull" style="margin-top:0px"><!-- wp:spacer -->
+				<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+				<!-- /wp:spacer -->
+				
+				<!-- wp:group {"align":"wide","style":{"border":{"width":"20px"}},"borderColor":"white","className":"is-style-boxshadow"} -->
+				<div class="wp-block-group alignwide is-style-boxshadow has-border-color has-white-border-color" style="border-width:20px"><!-- wp:columns {"verticalAlignment":"center","align":"wide","style":{"spacing":{"padding":{"top":"60px","right":"60px","bottom":"60px","left":"60px"}}},"backgroundColor":"black","textColor":"white"} -->
+				<div class="wp-block-columns alignwide are-vertically-aligned-center has-white-color has-black-background-color has-text-color has-background" style="padding-top:60px;padding-right:60px;padding-bottom:60px;padding-left:60px"><!-- wp:column {"verticalAlignment":"center","width":"65%"} -->
+				<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:65%"><!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.5"}},"fontSize":"large"} -->
+				<p class="has-large-font-size" style="line-height:1.5">Lorem ipsum dolor sit amet, consectetur adipiscing lectus. Vestibulum mi justo, luctus eu pellentesque vitae gravida non.</p>
+				<!-- /wp:paragraph --></div>
+				<!-- /wp:column -->
+				
+				<!-- wp:column {"verticalAlignment":"center","width":"35%"} -->
+				<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:35%"><!-- wp:buttons {"layout":{"type":"flex","justifyContent":"right","orientation":"horizontal"}} -->
+				<div class="wp-block-buttons"><!-- wp:button {"style":{"spacing":{"padding":{"top":"15px","right":"25px","bottom":"15px","left":"25px"}},"border":{"radius":"0px"}},"className":"is-style-fill-white"} -->
+				<div class="wp-block-button is-style-fill-white"><a class="wp-block-button__link" style="border-radius:0px;padding-top:15px;padding-right:25px;padding-bottom:15px;padding-left:25px">' . esc_html__( 'Let’s Get Started', 'frost' ) . ' →</a></div>
+				<!-- /wp:button --></div>
+				<!-- /wp:buttons --></div>
+				<!-- /wp:column --></div>
+				<!-- /wp:columns --></div>
+				<!-- /wp:group -->
+				
+				<!-- wp:spacer -->
+				<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+				<!-- /wp:spacer --></div>
+				<!-- /wp:group -->',
+);