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 all commits
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
62 changes: 31 additions & 31 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,43 @@
* 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:post-featured-image {"height":"300px"} /-->
Copy link
Contributor

Choose a reason for hiding this comment

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

Instead of using the post's featured image, how about using the Product Image block (as we have within the single product block?)

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 first tried to use the Product Image block, but it does not have image size settings available, so I could not achieve the design. Do you think it's a problem using the Post Featured Image?

Copy link
Contributor

Choose a reason for hiding this comment

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

I first tried to use the Product Image block, but it does not have image size settings available, so I could not achieve the design.

Gotcha! Maybe we should open an issue to enable these size settings for this block later on. What do you think?

As a second and contradictory thought: I'm not sure why we have a Product Image block if the purpose is just to render the image as any regular post would; I guess it's just for the sake of displaying our custom title and description for the block in the editor side? 🤔

Do you think it's a problem using the Post Featured Image?

It can be a bit confusing to have everything in this pattern converted to the blocks that power the Single Product block except for the image, but that's just a loose opinion/not a blocker :)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yeah, I'm not sure about the Product Image block either.
I'll create an issue to add the size settings to it and replace the image in this pattern, so we can go ahead with this PR but remember to switch blocks when possible.

</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":{"top":"1.5em","bottom":"1.5em"}}}} -->
<div class="wp-block-column" style="padding-top:1.5em;padding-bottom:1.5em">
<!-- 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","lineHeight":"0.1"}}} /-->

<!-- 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/product-button {"style":{"color":{"background":"#000001","text":"#fffff1"},"spacing":{"padding":{"left":"30px","right":"30px"},"margin":{"top":"15px"}},"typography":{"fontSize":"15px"}}} -->
<div class="wp-block-woocommerce-product-button is-loading" style="font-size:15px"></div>
<!-- /wp:woocommerce/product-button -->

<!-- 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 -->
<!-- wp:post-excerpt {"style":{"typography":{"fontSize":"14px"}},"__woocommerceNamespace":"woocommerce/product-query/product-summary"} /-->
</div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->
</div>
<!-- /wp:group -->
<!-- /wp:columns -->
</div>
<!-- /wp:woocommerce/single-product -->
Loading