Skip to content
This repository was archived by the owner on Feb 23, 2024. It is now read-only.

Commit ececfb2

Browse files
roykhoroykho
authored
Update/cleanup patterns (#9447)
* Update category cover image pattern * Update featured category focus pattern * Update featured category triple pattern * Update product details pattern * Update product hero pattern * Update shop by price pattern * Update testimonials single pattern
1 parent a992c64 commit ececfb2

File tree

7 files changed

+255
-163
lines changed

7 files changed

+255
-163
lines changed

‎patterns/featured-category-cover-image.php‎

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,25 @@
55
* Categories: WooCommerce
66
*/
77
?>
8-
<?php echo '<!-- wp:cover {"url":"' . esc_url( plugins_url( 'images/pattern-placeholders/product-apparel-1.png', dirname( __FILE__ ) ) ) . '","id":1,"dimRatio":0,"contentPosition":"top left","align":"wide","style":{"spacing":{"padding":{"top":"3.38em","right":"2.25em","bottom":"2.25em","left":"2.25em"}}},"layout":{"type":"constrained"}} -->'; ?>
9-
<div class="wp-block-cover alignwide has-custom-content-position is-position-top-left" style="padding-top:3.38em;padding-right:2.25em;padding-bottom:2.25em;padding-left:2.25em"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-1" alt="" src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-apparel-1.png', dirname( __FILE__ ) ) ); ?>" data-object-fit="cover"/><div class="wp-block-cover__inner-container">
10-
<!-- wp:paragraph {"align":"left","placeholder":"Write title…","style":{"typography":{"lineHeight":"0","fontSize":"2.2em","textColor":"background"}}} -->
11-
<p class="has-text-align-left" style="font-size:2.2em;line-height:0"><strong>100% natural denim</strong></p>
12-
<!-- /wp:paragraph -->
8+
<!-- wp:cover {"url":"<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-apparel-1.png', dirname( __FILE__ ) ) ); ?>","id":1,"dimRatio":0,"contentPosition":"top left","align":"wide","style":{"spacing":{"padding":{"top":"2em","right":"2.25em","bottom":"2.25em","left":"2.25em"}}},"layout":{"type":"constrained"}} -->
9+
<div class="wp-block-cover alignwide has-custom-content-position is-position-top-left" style="padding-top:2em;padding-right:2.25em;padding-bottom:2.25em;padding-left:2.25em">
10+
<span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span>
11+
<img class="wp-block-cover__image-background wp-image-1" alt="" src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-apparel-1.png', dirname( __FILE__ ) ) ); ?>" data-object-fit="cover"/>
1312

14-
<!-- wp:paragraph {"style":{"typography":{"lineHeight":"3"}},"textColor":"background"} -->
15-
<p style="line-height:3">Only the finest goes into our products. You deserve it.</p>
16-
<!-- /wp:paragraph -->
13+
<div class="wp-block-cover__inner-container">
14+
<!-- wp:paragraph {"align":"left","placeholder":"Write title…","style":{"typography":{"lineHeight":"1.5","fontSize":"2.2em","textColor":"background"},"color":{"text":"#ffffff"},"spacing":{"margin":{"bottom":"0px","top":"0px"}}}} -->
15+
<p class="has-text-align-left has-text-color" style="color:#ffffff;margin-top:0px;margin-bottom:0px;font-size:2.2em;line-height:1.5"><strong>100% natural denim</strong></p>
16+
<!-- /wp:paragraph -->
1717

18-
<!-- wp:buttons -->
19-
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"background","textColor":"foreground","style":{"border":{"width":"0px","style":"none"}},"className":"is-style-fill"} -->
20-
<div class="wp-block-button is-style-fill"><a class="wp-block-button__link has-foreground-color has-background-background-color has-text-color has-background wp-element-button" style="border-style:none;border-width:0px">Shop jeans</a></div>
21-
<!-- /wp:button --></div>
22-
<!-- /wp:buttons --></div>
18+
<!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.5"},"color":{"text":"#ffffff"},"spacing":{"margin":{"top":"0px","bottom":"0px"}}}} -->
19+
<p class="has-text-color" style="color:#ffffff;margin-top:0px;margin-bottom:0px;line-height:1.5">Only the finest goes into our products. You deserve it.</p>
20+
<!-- /wp:paragraph -->
21+
22+
<!-- wp:buttons {"style":{"spacing":{"margin":{"top":"30px"}}}} -->
23+
<div class="wp-block-buttons" style="margin-top:30px">
24+
<!-- wp:button {"style":{"border":{"width":"0px","style":"none"},"color":{"text":"#000000","background":"#ffffff"}},"className":"is-style-fill"} -->
25+
<div class="wp-block-button is-style-fill"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="border-style:none;border-width:0px;color:#000000;background-color:#ffffff">Shop jeans</a></div>
26+
<!-- /wp:button --></div>
27+
<!-- /wp:buttons --></div>
2328
</div>
2429
<!-- /wp:cover -->

‎patterns/featured-category-focus.php‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,16 @@
1111
<figure class="wp-block-image size-full is-resized"><img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-furniture-10.png', dirname( __FILE__ ) ) ); ?>" alt="" class="wp-image-1" width="502" height="335"/></figure>
1212
<!-- /wp:image -->
1313

14-
<!-- wp:paragraph {"align":"center","fontSize":"large"} -->
15-
<p class="has-text-align-center has-large-font-size">Announcing our newest collection</p>
14+
<!-- wp:paragraph {"align":"center","style":{"color":{"text":"#000000"}},"fontSize":"large"} -->
15+
<p class="has-text-align-center has-text-color has-large-font-size" style="color:#000000">Announcing our newest collection</p>
1616
<!-- /wp:paragraph -->
1717

1818
<!-- wp:buttons -->
19-
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"contrast","textColor":"base"} -->
20-
<div class="wp-block-button"><a class="wp-block-button__link has-base-color has-contrast-background-color has-text-color has-background wp-element-button">Shop now</a></div>
19+
<div class="wp-block-buttons">
20+
<!-- wp:button {"style":{"color":{"text":"#ffffff","background":"#000000"},"border":{"width":"0px","style":"none"}}} -->
21+
<div class="wp-block-button">
22+
<a class="wp-block-button__link has-text-color has-background wp-element-button" style="border-style:none;border-width:0px;color:#ffffff;background-color:#000000">Shop now</a>
23+
</div>
2124
<!-- /wp:button --></div>
2225
<!-- /wp:buttons --></div>
2326
<!-- /wp:group -->

‎patterns/featured-category-triple.php‎

Lines changed: 64 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -6,39 +6,73 @@
66
*/
77
?>
88
<!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"top":"0px","left":"0px"}}}} -->
9-
<div class="wp-block-columns alignwide"><!-- wp:column {"style":{"spacing":{"blockGap":"0px","padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}},"textColor":"base"} -->
10-
<div class="wp-block-column has-base-color has-text-color" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:cover {"url":"<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-beauty-3.png', dirname( __FILE__ ) ) ); ?>","id":1,"dimRatio":0,"contentPosition":"bottom center","className":"has-base-color has-text-color","style":{"spacing":{"blockGap":"0","padding":{"bottom":"1.8em","top":"0px","right":"0px","left":"0px"}}}} -->
11-
<div class="wp-block-cover has-custom-content-position is-position-bottom-center has-base-color has-text-color" style="padding-top:0px;padding-right:0px;padding-bottom:1.8em;padding-left:0px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-1" alt="" src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-beauty-3.png', dirname( __FILE__ ) ) ); ?>" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"margin":{"top":"0","right":"0","bottom":"0","left":"0"}}},"textColor":"base","fontSize":"large"} -->
12-
<p class="has-text-align-center has-base-color has-text-color has-large-font-size" style="margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><strong>Aztec clay masks</strong></p>
13-
<!-- /wp:paragraph -->
9+
<div class="wp-block-columns alignwide">
10+
<!-- wp:column {"style":{"spacing":{"blockGap":"0px","padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}},"textColor":"base"} -->
11+
<div class="wp-block-column has-base-color has-text-color" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px">
12+
<!-- wp:cover {"url":"<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-beauty-3.png', dirname( __FILE__ ) ) ); ?>","id":1,"dimRatio":0,"contentPosition":"bottom center","className":"has-base-color has-text-color","style":{"spacing":{"blockGap":"0","padding":{"bottom":"1.8em","top":"0px","right":"0px","left":"0px"}}}} -->
13+
<div class="wp-block-cover has-custom-content-position is-position-bottom-center has-base-color has-text-color" style="padding-top:0px;padding-right:0px;padding-bottom:1.8em;padding-left:0px">
14+
<span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span>
15+
<img class="wp-block-cover__image-background wp-image-1" alt="" src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-beauty-3.png', dirname( __FILE__ ) ) ); ?>" data-object-fit="cover"/>
16+
<div class="wp-block-cover__inner-container">
17+
<!-- wp:paragraph {"align":"center","placeholder":"Write title…","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"margin":{"top":"0","right":"0","bottom":"0","left":"0"}},"color":{"text":"#ffffff"}},"fontSize":"large"} -->
18+
<p class="has-text-align-center has-text-color has-large-font-size" style="color:#ffffff;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
19+
<strong>Aztec clay masks</strong>
20+
</p>
21+
<!-- /wp:paragraph -->
1422

15-
<!-- wp:paragraph {"align":"center","style":{"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"}}},"textColor":"base","fontSize":"small"} -->
16-
<p class="has-text-align-center has-base-color has-text-color has-small-font-size" style="margin-top:0;margin-right:0;margin-bottom:0;margin-left:0"><strong><span style="text-decoration: underline;">Shop Now</span></strong></p>
17-
<!-- /wp:paragraph --></div></div>
18-
<!-- /wp:cover --></div>
19-
<!-- /wp:column -->
23+
<!-- wp:paragraph {"align":"center","style":{"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"}},"color":{"text":"#ffffff"}},"fontSize":"small"} -->
24+
<p class="has-text-align-center has-text-color has-small-font-size" style="color:#ffffff;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0">
25+
<strong><span style="text-decoration: underline;">Shop Now</span></strong>
26+
</p>
27+
<!-- /wp:paragraph -->
28+
</div>
29+
</div>
30+
<!-- /wp:cover --></div>
31+
<!-- /wp:column -->
2032

21-
<!-- wp:column {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"blockGap":"0px"}}} -->
22-
<div class="wp-block-column" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:cover {"url":"<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-beauty-2.png', dirname( __FILE__ ) ) ); ?>","id":1,"dimRatio":0,"focalPoint":{"x":0.5,"y":0.5},"contentPosition":"bottom center","isDark":false,"className":"has-contrast-color has-text-color","style":{"spacing":{"padding":{"bottom":"1.8em","top":"0px","right":"0px","left":"0px"},"blockGap":"0"}}} -->
23-
<div class="wp-block-cover is-light has-custom-content-position is-position-bottom-center has-contrast-color has-text-color" style="padding-top:0px;padding-right:0px;padding-bottom:1.8em;padding-left:0px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-1" alt="" src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-beauty-2.png', dirname( __FILE__ ) ) ); ?>" style="object-position:50% 50%" data-object-fit="cover" data-object-position="50% 50%"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"margin":{"top":"0","right":"0","bottom":"0","left":"0"}}},"textColor":"contrast","fontSize":"large"} -->
24-
<p class="has-text-align-center has-contrast-color has-text-color has-large-font-size" style="margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><strong>Moisturizing toners</strong></p>
25-
<!-- /wp:paragraph -->
33+
<!-- wp:column {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"blockGap":"0px"}}} -->
34+
<div class="wp-block-column" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px">
35+
<!-- wp:cover {"url":"<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-beauty-2.png', dirname( __FILE__ ) ) ); ?>","id":1,"dimRatio":0,"focalPoint":{"x":0.5,"y":0.5},"contentPosition":"bottom center","isDark":false,"className":"has-contrast-color has-text-color","style":{"spacing":{"padding":{"bottom":"1.8em","top":"0px","right":"0px","left":"0px"},"blockGap":"0"}}} -->
36+
<div class="wp-block-cover is-light has-custom-content-position is-position-bottom-center has-contrast-color has-text-color" style="padding-top:0px;padding-right:0px;padding-bottom:1.8em;padding-left:0px">
37+
<span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span>
38+
<img class="wp-block-cover__image-background wp-image-1" alt="" src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-beauty-2.png', dirname( __FILE__ ) ) ); ?>" style="object-position:50% 50%" data-object-fit="cover" data-object-position="50% 50%"/>
39+
<div class="wp-block-cover__inner-container">
40+
<!-- wp:paragraph {"align":"center","placeholder":"Write title…","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"margin":{"top":"0","right":"0","bottom":"0","left":"0"}},"color":{"text":"#000000"}},"fontSize":"large"} -->
41+
<p class="has-text-align-center has-text-color has-large-font-size" style="color:#000000;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
42+
<strong>Moisturizing toners</strong>
43+
</p>
44+
<!-- /wp:paragraph -->
2645

27-
<!-- wp:paragraph {"align":"center","style":{"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"}}},"textColor":"contrast","fontSize":"small"} -->
28-
<p class="has-text-align-center has-contrast-color has-text-color has-small-font-size" style="margin-top:0;margin-right:0;margin-bottom:0;margin-left:0"><strong><span style="text-decoration: underline;">Shop Now</span></strong></p>
29-
<!-- /wp:paragraph --></div></div>
30-
<!-- /wp:cover --></div>
31-
<!-- /wp:column -->
46+
<!-- wp:paragraph {"align":"center","style":{"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"}},"color":{"text":"#000000"}},"fontSize":"small"} -->
47+
<p class="has-text-align-center has-text-color has-small-font-size" style="color:#000000;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0">
48+
<strong><span style="text-decoration: underline;">Shop Now</span></strong>
49+
</p>
50+
<!-- /wp:paragraph -->
51+
</div>
52+
</div>
53+
<!-- /wp:cover --></div>
54+
<!-- /wp:column -->
3255

33-
<!-- wp:column {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"blockGap":"0px"}}} -->
34-
<div class="wp-block-column" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:cover {"url":"<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-beauty-1.png', dirname( __FILE__ ) ) ); ?>","id":1,"dimRatio":0,"contentPosition":"bottom center","className":"has-base-color has-text-color","style":{"spacing":{"padding":{"bottom":"1.8em","top":"0px","right":"0px","left":"0px"},"blockGap":"0"}}} -->
35-
<div class="wp-block-cover has-custom-content-position is-position-bottom-center has-base-color has-text-color" style="padding-top:0px;padding-right:0px;padding-bottom:1.8em;padding-left:0px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-1" alt="" src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-beauty-1.png', dirname( __FILE__ ) ) ); ?>" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"margin":{"top":"0","right":"0","bottom":"0","left":"0"}}},"textColor":"base","fontSize":"large"} -->
36-
<p class="has-text-align-center has-base-color has-text-color has-large-font-size" style="margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><strong>Natural body lotions</strong></p>
37-
<!-- /wp:paragraph -->
56+
<!-- wp:column {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"blockGap":"0px"}}} -->
57+
<div class="wp-block-column" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px">
58+
<!-- wp:cover {"url":"<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-beauty-1.png', dirname( __FILE__ ) ) ); ?>","id":1,"dimRatio":0,"contentPosition":"bottom center","className":"has-base-color has-text-color","style":{"spacing":{"padding":{"bottom":"1.8em","top":"0px","right":"0px","left":"0px"},"blockGap":"0"}}} -->
59+
<div class="wp-block-cover has-custom-content-position is-position-bottom-center has-base-color has-text-color" style="padding-top:0px;padding-right:0px;padding-bottom:1.8em;padding-left:0px">
60+
<span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span>
61+
<img class="wp-block-cover__image-background wp-image-1" alt="" src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-beauty-1.png', dirname( __FILE__ ) ) ); ?>" data-object-fit="cover"/>
62+
<div class="wp-block-cover__inner-container">
63+
<!-- wp:paragraph {"align":"center","placeholder":"Write title…","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"margin":{"top":"0","right":"0","bottom":"0","left":"0"}},"color":{"text":"#ffffff"}},"fontSize":"large"} -->
64+
<p class="has-text-align-center has-text-color has-large-font-size" style="color:#ffffff;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
65+
<strong>Natural body lotions</strong>
66+
</p>
67+
<!-- /wp:paragraph -->
3868

39-
<!-- wp:paragraph {"align":"center","style":{"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"}}},"textColor":"base","fontSize":"small"} -->
40-
<p class="has-text-align-center has-base-color has-text-color has-small-font-size" style="margin-top:0;margin-right:0;margin-bottom:0;margin-left:0"><strong><span style="text-decoration: underline;">Shop Now</span></strong></p>
41-
<!-- /wp:paragraph --></div></div>
42-
<!-- /wp:cover --></div>
43-
<!-- /wp:column --></div>
69+
<!-- wp:paragraph {"align":"center","style":{"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"}},"color":{"text":"#ffffff"}},"fontSize":"small"} -->
70+
<p class="has-text-align-center has-text-color has-small-font-size" style="color:#ffffff;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0">
71+
<strong><span style="text-decoration: underline;">Shop Now</span></strong>
72+
</p>
73+
<!-- /wp:paragraph -->
74+
</div>
75+
</div>
76+
<!-- /wp:cover --></div>
77+
<!-- /wp:column --></div>
4478
<!-- /wp:columns -->

0 commit comments

Comments
 (0)