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

Use the single product block on the Hero Product pattern #9935

Merged
merged 5 commits into from
Jun 28, 2023
Merged

Use the single product block on the Hero Product pattern #9935

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
23ee6f0
Use the single product block on the Hero Product pattern
albarin Jun 21, 2023
ddea172
Use the add to cart button block
albarin Jun 21, 2023
397238e
Merge branch 'trunk' into 9855/product-hero
albarin Jun 23, 2023
4eefdb1
Use featured image and fix alignment
albarin Jun 23, 2023
1642f59
Merge branch 'trunk' into 9855/product-hero
albarin Jun 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 29 additions & 32 deletions patterns/product-hero.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,43 +4,40 @@
* Slug: woocommerce-blocks/product-hero
* Categories: WooCommerce
*/

$query = new \WC_Product_Query(
array(
'limit' => 1,
'return' => 'ids',
'status' => array( 'publish' ),
)
);

$products = $query->get_products();
$product_id = $products ? $products[0] : null;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While I agree this is a valid way to provide an initial/default product for the user to work with, I believe, ideally, we should somehow display a list of available products for the user to choose from before inserting the pattern, similar to what is displayed when inserting the single product block itself in the editor:

Screenshot 2023-06-27 at 17 32 30

We don't necessarily have to solve this problem on this PR, but IMO it would be a good idea to open a separate issue and explore the feasibility of something along these lines. What are your thoughts?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removing that PHP snippet to select a product would give us that same single product selector from the image above, but the problem then is that we lose the preview 👇 so the pattern is not really visible until inserted, making it less likely for a user to insert it.
Screenshot 2023-06-28 at 10 24 54

I think eventually GB will have something to provide a custom preview, but until now, that's the only way to show the actual pattern there.

Copy link
Contributor

@nefeline nefeline Jun 28, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removing that PHP snippet to select a product would give us that same single product selector from the image above, but the problem then is that we lose the preview 👇 so the pattern is not really visible until inserted, making it less likely for a user to insert it.

Oh ok, gotcha! Feels like we are stuck in a bad loop: without a preview, the user might not insert the pattern, but if they do insert it and can't change the product, they may not use it either 😭

I think eventually GB will have something to provide a custom preview, but until now, that's the only way to show the actual pattern there.

Out of curiosity, do you know if there's an issue on GB already for allowing us to modify this custom preview?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Opened https://github.com/woocommerce/woocommerce-blocks/issues/10022 so we can discuss this separately and unblock this work =)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I found this issue WordPress/gutenberg#28135 but there's not much activity, not sure if there are more.

They can actually change the product (it's still a Single Product block) though it may not be obvious after inserting, that's true.
Screenshot 2023-06-28 at 12 52 59

?>
<!-- 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( 'images/pattern-placeholders/leather-guitar-typewriter-red-gadget-sofa.png', dirname( __FILE__ ) ) ); ?>" alt="<?php esc_attr_e( 'Placeholder image used to represent a product being showcased in a hero section.', 'woo-gutenberg-products-block' ); ?>" class="wp-image-1"/></figure>
<!-- /wp:image --></div>

<!-- wp:woocommerce/single-product {"productId":<?php echo esc_attr( $product_id ); ?>,"align":"wide"} -->
<div class="wp-block-woocommerce-single-product alignwide">
<!-- wp:columns {"style":{"color":{"background":"#6b7ba8"},"elements":{"link":{"color":{"text":"var:preset|color|base"}}},"spacing":{"padding":{"left":"20px"}}},"textColor":"base"} -->
<div class="wp-block-columns has-base-color has-text-color has-background has-link-color" style="background-color:#6b7ba8;padding-left:20px">
<!-- wp:column {"width":"40%","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"}}}} -->
<div class="wp-block-column" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;flex-basis:40%">
<!-- wp:woocommerce/product-image {"showSaleBadge":false,"isDescendentOfSingleProductBlock":true} /-->
</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"},"color":{"text":"#ffffff"}},"fontSize":"large"} -->
<h2 class="wp-block-heading has-text-color has-large-font-size" style="color:#ffffff;line-height:0">Mini 5 Dreamer</h2>
<!-- /wp:heading -->
<!-- wp:column {"style":{"spacing":{"padding":{"bottom":"2em","top":"2em"}}}} -->
<div class="wp-block-column" style="padding-top:2em;padding-bottom:2em">
<!-- wp:post-title {"textAlign":"","isLink":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"400"},"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"}}},"fontSize":"large","__woocommerceNamespace":"woocommerce/product-query/product-title"} /-->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"1em"},"color":{"text":"#ffffff"}}} -->
<p class="has-text-color" style="color:#ffffff;font-size:1em"><strong>$1,999</strong></p>
<!-- /wp:paragraph -->
<!-- wp:woocommerce/product-price {"isDescendentOfSingleProductBlock":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"700","fontSize":"16px"}}} /-->

<!-- wp:buttons -->
<div class="wp-block-buttons">
<!-- wp:button {"style":{"typography":{"fontSize":"0.8em"},"spacing":{"padding":{"left":"2em","right":"2em"}},"color":{"text":"#ffffff","background":"#000000"},"border":{"width":"0px","style":"none"}}} -->
<div class="wp-block-button has-custom-font-size" style="font-size:0.8em">
<a href="<?php echo esc_url( get_permalink( wc_get_page_id( 'shop' ) ) ); ?>" 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;padding-right:2em;padding-left:2em">Add to cart</a>
</div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
<!-- wp:woocommerce/add-to-cart-form {"isDescendentOfSingleProductBlock":true} /-->
albarin marked this conversation as resolved.
Show resolved Hide resolved

<!-- wp:paragraph {"style":{"typography":{"fontSize":"0.8em"},"color":{"text":"#ffffff"}}} -->
<p class="has-text-color" style="color:#ffffff;font-size:0.8em">The Bluetooth keyboard, a striking homage to classic typewriters with its round, tactile keys and vintage aesthetic, merges nostalgia with modern connectivity for a unique typing experience.</p>
<!-- /wp:paragraph -->
</div>
<!-- wp:post-excerpt {"style":{"typography":{"fontSize":"0.8em"}},"__woocommerceNamespace":"woocommerce/product-query/product-summary"} /--></div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->
</div>
<!-- /wp:group -->
<!-- /wp:columns -->
</div>
<!-- /wp:woocommerce/single-product -->
Loading