Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add product hero pattern (https://github.com/woocommerce/woocommerce-blocks/pull/9181) 

* Add product hero wide pattern

* Convert to using WP core blocks
This commit is contained in:
Roy Ho 2023-05-04 06:00:15 -07:00 committed by GitHub
parent 145bc25100
commit 1efa47c076
2 changed files with 40 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
plugins/woocommerce-blocks/images/pattern-placeholders/product-electronics-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 287 KiB

40
plugins/woocommerce-blocks/patterns/product-hero-wide.php Normal file
View File

@ -0,0 +1,40 @@
<?php
/**
* Title: Product Hero
* Slug: woocommerce-blocks/product-hero
* Categories: WooCommerce
*/
?>
<!-- wp:group {"align":"wide","style":{"color":{"background":"#6b7ba8"},"spacing":{"blockGap":"0","padding":{"top":"1em","right":"1em","bottom":"1em","left":"1em"}}},"textColor":"background","layout":{"type":"constrained","contentSize":"100%","justifyContent":"left"}} -->
<div class="wp-block-group alignwide has-background-color has-text-color has-background" style="background-color:#6b7ba8;padding-top:1em;padding-right:1em;padding-bottom:1em;padding-left:1em">
<!-- wp:columns -->
<div class="wp-block-columns">
<!-- wp:column {"width":"40%"} -->
<div class="wp-block-column" style="flex-basis:40%"><!-- wp:image {"id":1,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="<?php echo esc_url( plugins_url() ); ?>/woocommerce-blocks/images/pattern-placeholders/product-electronics-1.png" alt="" class="wp-image-1"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"60%","style":{"spacing":{"padding":{"top":"3em","left":"0em","bottom":"3em"}}}} -->
<div class="wp-block-column" style="padding-top:3em;padding-bottom:3em;padding-left:0em;flex-basis:60%">
<!-- wp:heading {"style":{"typography":{"lineHeight":"0"}},"textColor":"base","fontSize":"large"} -->
<h2 class="wp-block-heading has-base-color has-text-color has-large-font-size" style="line-height:0">Mini 5 Dreamer</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"1em"}},"textColor":"base"} -->
<p class="has-base-color has-text-color" style="font-size:1em"><strong>$1,999</strong></p>
<!-- /wp:paragraph -->
<!-- wp:buttons -->
<div class="wp-block-buttons">
<!-- wp:button {"backgroundColor":"contrast","textColor":"base","style":{"typography":{"fontSize":"0.8em"},"spacing":{"padding":{"left":"2em","right":"2em"}}}} -->
<div class="wp-block-button has-custom-font-size" style="font-size:0.8em"><a class="wp-block-button__link has-base-color has-contrast-background-color has-text-color has-background wp-element-button" style="padding-right:2em;padding-left:2em">Add to cart</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"0.8em"}},"textColor":"base"} -->
<p class="has-base-color has-text-color" style="font-size:0.8em">Do anything you can imagine with a single unit. Chorus, distortion, echo, wah, volume and more can all be applied and controlled from a single pedal-sized unit. The all-in-one Mini 5 Dreamer is on the pedal board of your favorite artists.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->