Add product hero pattern #9181

roykho · 2023-04-24T13:32:14Z

Fixes #9109

This PR adds the Product Hero pattern.

Note that the image supplied is more portrait than landscape so it will not look exactly like the one #9109

Screenshots

Testing

User Facing Testing

Create a page/post and use the block inserter->patterns->WooCommerce->Product Hero | Wide
Update/save and ensure the design is close to the suggested design seen below.

Do not include in the Testing Notes

WooCommerce Visibility

WooCommerce Core
Feature plugin
Experimental

Performance Impact

Changelog

Add product hero pattern

github-actions · 2023-04-24T13:35:31Z

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-9181.zip

Script Dependencies Report

The compare-assets action has detected some changed script dependencies between this branch and trunk. Please review and confirm the following are correct before merging.

Script Handle	Added
`reviews-frontend.js`	`wc-settings`, `wp-a11y`, `wp-api-fetch`, `wp-compose`, `wp-element`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`	⚠️
`active-filters-frontend.js`	`wc-blocks-data-store`, `wc-price-format`, `wc-settings`, `wp-data`, `wp-element`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`, `wp-primitives`, `wp-url`	⚠️
`all-products-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-blocks-shared-context`, `wc-blocks-shared-hocs`, `wc-price-format`, `wc-settings`, `wp-a11y`, `wp-api-fetch`, `wp-autop`, `wp-block-editor`, `wp-blocks`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-hooks`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`, `wp-wordcount`	⚠️
`attribute-filter-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-settings`, `wp-a11y`, `wp-block-editor`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`	⚠️
`cart-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-blocks-shared-context`, `wc-blocks-shared-hocs`, `wc-price-format`, `wc-settings`, `wp-a11y`, `wp-api-fetch`, `wp-autop`, `wp-block-editor`, `wp-blocks`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-hooks`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-plugins`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`, `wp-wordcount`	⚠️
`checkout-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-blocks-shared-hocs`, `wc-price-format`, `wc-settings`, `wp-a11y`, `wp-api-fetch`, `wp-autop`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-hooks`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-plugins`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`, `wp-wordcount`	⚠️
`filter-wrapper-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-price-format`, `wc-settings`, `wp-a11y`, `wp-block-editor`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`	⚠️
`mini-cart-frontend.js`	`wp-polyfill`	⚠️
`price-filter-frontend.js`	`react`, `wc-blocks-data-store`, `wc-price-format`, `wc-settings`, `wp-data`, `wp-element`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`, `wp-url`	⚠️
`rating-filter-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-settings`, `wp-a11y`, `wp-block-editor`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`	⚠️
`stock-filter-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-settings`, `wp-a11y`, `wp-block-editor`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`	⚠️
`mini-cart-component-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-price-format`, `wc-settings`, `wp-a11y`, `wp-autop`, `wp-block-editor`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-hooks`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`, `wp-wordcount`	⚠️

This comment was automatically generated by the ./github/compare-assets action.

TypeScript Errors Report

Files with errors: 451
Total errors: 2226

🎉 🎉 This PR does not introduce new TS errors.

_{comments-aggregator}

github-actions · 2023-04-24T13:40:30Z

Size Change: 0 B

Total Size: 1.11 MB

ℹ️ View Unchanged

Filename	Size
`build/active-filters-frontend.js`	8.56 kB
`build/active-filters-wrapper--attribute-filter-wrapper--price-filter-wrapper--rating-filter-wrapper--stoc--78b62dd5-frontend.js`	2.31 kB
`build/active-filters-wrapper-frontend.js`	4.68 kB
`build/active-filters.js`	7.47 kB
`build/all-products-frontend.js`	12.1 kB
`build/all-products.js`	38.9 kB
`build/all-reviews.js`	7.77 kB
`build/attribute-filter-frontend.js`	23.2 kB
`build/attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js`	5.53 kB
`build/attribute-filter-wrapper-frontend.js`	4.64 kB
`build/attribute-filter.js`	13.3 kB
`build/blocks-checkout.js`	35.1 kB
`build/breadcrumbs.js`	2.05 kB
`build/cart-blocks/cart-accepted-payment-methods-frontend.js`	1.38 kB
`build/cart-blocks/cart-cross-sells-frontend.js`	253 B
`build/cart-blocks/cart-cross-sells-products-frontend.js`	5.49 kB
`build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js`	5.16 kB
`build/cart-blocks/cart-express-payment-frontend.js`	717 B
`build/cart-blocks/cart-items-frontend.js`	302 B
`build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js`	5.39 kB
`build/cart-blocks/cart-line-items-frontend.js`	1.07 kB
`build/cart-blocks/cart-order-summary-frontend.js`	1.27 kB
`build/cart-blocks/cart-totals-frontend.js`	307 B
`build/cart-blocks/empty-cart-frontend.js`	346 B
`build/cart-blocks/filled-cart-frontend.js`	654 B
`build/cart-blocks/order-summary-coupon-form-frontend.js`	1.62 kB
`build/cart-blocks/order-summary-discount-frontend.js`	2.12 kB
`build/cart-blocks/order-summary-fee-frontend.js`	273 B
`build/cart-blocks/order-summary-heading-frontend.js`	332 B
`build/cart-blocks/order-summary-shipping-frontend.js`	16.9 kB
`build/cart-blocks/order-summary-subtotal-frontend.js`	273 B
`build/cart-blocks/order-summary-taxes-frontend.js`	434 B
`build/cart-blocks/proceed-to-checkout-frontend.js`	1.38 kB
`build/cart-frontend.js`	29.6 kB
`build/cart.js`	44.7 kB
`build/catalog-sorting.js`	1.7 kB
`build/checkout-blocks/actions-frontend.js`	1.85 kB
`build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js`	4.65 kB
`build/checkout-blocks/billing-address-frontend.js`	1.18 kB
`build/checkout-blocks/contact-information-frontend.js`	2.04 kB
`build/checkout-blocks/express-payment-frontend.js`	1.13 kB
`build/checkout-blocks/fields-frontend.js`	331 B
`build/checkout-blocks/order-note-frontend.js`	1.13 kB
`build/checkout-blocks/order-summary-cart-items-frontend.js`	3.69 kB
`build/checkout-blocks/order-summary-coupon-form-frontend.js`	1.79 kB
`build/checkout-blocks/order-summary-discount-frontend.js`	2.29 kB
`build/checkout-blocks/order-summary-fee-frontend.js`	275 B
`build/checkout-blocks/order-summary-frontend.js`	1.28 kB
`build/checkout-blocks/order-summary-shipping-frontend.js`	17 kB
`build/checkout-blocks/order-summary-subtotal-frontend.js`	273 B
`build/checkout-blocks/order-summary-taxes-frontend.js`	435 B
`build/checkout-blocks/payment-frontend.js`	8.28 kB
`build/checkout-blocks/pickup-options-frontend.js`	4.81 kB
`build/checkout-blocks/shipping-address-frontend.js`	1.16 kB
`build/checkout-blocks/shipping-method-frontend.js`	2.6 kB
`build/checkout-blocks/shipping-methods-frontend.js`	6.35 kB
`build/checkout-blocks/terms-frontend.js`	1.56 kB
`build/checkout-blocks/totals-frontend.js`	310 B
`build/checkout-frontend.js`	31.3 kB
`build/checkout.js`	46.3 kB
`build/customer-account.js`	3.18 kB
`build/featured-category.js`	14.4 kB
`build/featured-product.js`	14.7 kB
`build/filter-wrapper-frontend.js`	14.2 kB
`build/filter-wrapper.js`	2.39 kB
`build/general-style-rtl.css`	1.31 kB
`build/general-style.css`	1.31 kB
`build/handpicked-products.js`	8 kB
`build/legacy-template.js`	5.62 kB
`build/mini-cart-component-frontend.js`	29.5 kB
`build/mini-cart-contents-block/cart-button-frontend.js`	864 B
`build/mini-cart-contents-block/checkout-button-frontend.js`	866 B
`build/mini-cart-contents-block/empty-cart-frontend.js`	360 B
`build/mini-cart-contents-block/filled-cart-frontend.js`	268 B
`build/mini-cart-contents-block/footer-frontend.js`	3.23 kB
`build/mini-cart-contents-block/items-frontend.js`	237 B
`build/mini-cart-contents-block/products-table-frontend.js`	589 B
`build/mini-cart-contents-block/shopping-button-frontend.js`	760 B
`build/mini-cart-contents-block/title-frontend.js`	1.08 kB
`build/mini-cart-contents-block/title-items-counter-frontend.js`	729 B
`build/mini-cart-contents-block/title-label-frontend.js`	661 B
`build/mini-cart-contents.js`	17.9 kB
`build/mini-cart-frontend.js`	2.05 kB
`build/mini-cart.js`	4.49 kB
`build/price-filter-frontend.js`	14.5 kB
`build/price-filter-wrapper-frontend.js`	5.78 kB
`build/price-filter.js`	8.47 kB
`build/price-format.js`	1.19 kB
`build/product-add-to-cart--product-button--product-image--product-price--product-rating--product-sale-bad--49d3ecb2.js`	251 B
`build/product-add-to-cart--product-rating.js`	151 B
`build/product-add-to-cart-frontend.js`	6.5 kB
`build/product-add-to-cart.js`	8.88 kB
`build/product-best-sellers.js`	8.34 kB
`build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--408017d2.js`	262 B
`build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js`	463 B
`build/product-button-frontend.js`	1.92 kB
`build/product-button.js`	4.18 kB
`build/product-categories.js`	2.36 kB
`build/product-category.js`	9.35 kB
`build/product-image-frontend.js`	1.84 kB
`build/product-image.js`	4.31 kB
`build/product-new.js`	8.34 kB
`build/product-on-sale.js`	8.67 kB
`build/product-price-frontend.js`	2.12 kB
`build/product-price.js`	1.68 kB
`build/product-query.js`	11.4 kB
`build/product-rating-frontend.js`	1.45 kB
`build/product-rating.js`	1.04 kB
`build/product-results-count.js`	1.66 kB
`build/product-sale-badge-frontend.js`	974 B
`build/product-sale-badge.js`	801 B
`build/product-search.js`	2.63 kB
`build/product-sku-frontend.js`	1 kB
`build/product-sku.js`	578 B
`build/product-stock-indicator-frontend.js`	1.19 kB
`build/product-stock-indicator.js`	771 B
`build/product-summary-frontend.js`	1.29 kB
`build/product-summary.js`	922 B
`build/product-tag.js`	8.97 kB
`build/product-title-frontend.js`	1.37 kB
`build/product-title.js`	3.75 kB
`build/product-top-rated.js`	8.58 kB
`build/products-by-attribute.js`	9.7 kB
`build/rating-filter-frontend.js`	21.5 kB
`build/rating-filter-wrapper-frontend.js`	3.04 kB
`build/rating-filter.js`	7.01 kB
`build/reviews-by-category.js`	12.1 kB
`build/reviews-by-product.js`	13.2 kB
`build/reviews-frontend.js`	7.1 kB
`build/single-product.js`	11.1 kB
`build/stock-filter-frontend.js`	21.8 kB
`build/stock-filter-wrapper-frontend.js`	3.31 kB
`build/stock-filter.js`	7.73 kB
`build/store-notices.js`	1.69 kB
`build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js`	6.82 kB
`build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js`	4.2 kB
`build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js`	5.26 kB
`build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js`	3.58 kB
`build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js`	19.4 kB
`build/vendors--checkout-blocks/pickup-options--checkout-blocks/shipping-methods-frontend.js`	8.25 kB
`build/vendors--checkout-blocks/shipping-method-frontend.js`	12.4 kB
`build/vendors--product-add-to-cart-frontend.js`	7.25 kB
`build/wc-blocks-data.js`	22.5 kB
`build/wc-blocks-editor-style-rtl.css`	5.87 kB
`build/wc-blocks-editor-style.css`	5.87 kB
`build/wc-blocks-google-analytics.js`	1.56 kB
`build/wc-blocks-middleware.js`	933 B
`build/wc-blocks-registry.js`	3.15 kB
`build/wc-blocks-shared-context.js`	1.52 kB
`build/wc-blocks-shared-hocs.js`	1.75 kB
`build/wc-blocks-style-rtl.css`	27.7 kB
`build/wc-blocks-style.css`	27.7 kB
`build/wc-blocks-vendors-style-rtl.css`	1.96 kB
`build/wc-blocks-vendors-style.css`	1.96 kB
`build/wc-blocks-vendors.js`	65.2 kB
`build/wc-blocks.js`	2.63 kB
`build/wc-payment-method-bacs.js`	816 B
`build/wc-payment-method-cheque.js`	811 B
`build/wc-payment-method-cod.js`	909 B
`build/wc-payment-method-paypal.js`	837 B
`build/wc-settings.js`	2.6 kB
`build/wc-shipping-method-pickup-location.js`	30.3 kB
`build/woo-directives-runtime.js`	2.73 kB
`build/woo-directives-vendors.js`	7.91 kB

_{compressed-size-action}

albarin · 2023-04-25T09:29:25Z

Another issue is in the WP editor, this pattern's preview shows a list of products to choose which is not ideal. This happens because the block doesn't have reference to what product to use and therefore will not show any specific product.

I'm not sure what to do with that, it's not great, it's unlikely anyone will choose the pattern without the preview. The only way I see right now it's not to use the Single Product block and build the patterns just with rows, columns, images, buttons, etc.

Another thing I was not able to accomplish is making the product image landscaped mode. I don't believe you can change the product image ratio/size in the single product block.

Maybe for this we can try to use the Post featured image block instead, I think it provides more options in terms of dimensions (aspect ratio, etc).

roykho · 2023-04-25T14:34:45Z

If we don't use the single product block then I am not seeing this pattern as very useful other than giving them an visual idea which then we don't actually need a pattern and a simple example documentation would do.

If we used only WP core blocks, they would have to remove almost everything to either put in a single product block or add their own individual parts of single product block (which I don't think we support?). WDYT? cc @shaunandrews

Also note that I believe the Single Product Block is still in experimental and many things are not ironed out yet. Perhaps when it is complete, it will have more options to manipulate the image size/ratio... show/hide quantity etc?

github-actions · 2023-05-03T09:02:51Z

This PR has been marked as stale because it has not seen any activity within the past 7 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label.

roykho · 2023-05-03T15:42:28Z

I've updated the pattern to use WP core blocks instead of the Single Product Block.

albarin

Good job! 👏

Add product hero wide pattern

6902b4b

roykho added skip-changelog PRs that you don't want to appear in the changelog. focus: patterns WooCommerce patterns labels Apr 24, 2023

Merge branch 'trunk' into add/product-hero-wide

fa32b2f

roykho requested review from albarin and shaunandrews April 24, 2023 14:12

github-actions bot added the status: stale Stale issues and PRs have had no updates for 60 days. label May 3, 2023

roykho removed status: stale Stale issues and PRs have had no updates for 60 days. skip-changelog PRs that you don't want to appear in the changelog. labels May 3, 2023

roykho added 2 commits May 3, 2023 07:03

Merge branch 'trunk' into add/product-hero-wide

a9f4328

Convert to using WP core blocks

904ee50

roykho changed the title ~~Add product hero wide pattern~~ Add product hero pattern May 3, 2023

Merge branch 'trunk' into add/product-hero-wide

66d700b

roykho marked this pull request as ready for review May 3, 2023 15:41

woocommercebot requested a review from a team May 3, 2023 15:41

roykho requested review from albarin and removed request for albarin May 3, 2023 15:43

albarin approved these changes May 4, 2023

View reviewed changes

github-actions bot added this to the 10.2.0 milestone May 4, 2023

github-actions bot added the status: ready to merge label May 4, 2023

roykho merged commit 6028944 into trunk May 4, 2023

roykho deleted the add/product-hero-wide branch May 4, 2023 13:00

github-actions bot removed the status: ready to merge label May 4, 2023

kmanijak added the type: enhancement The issue is a request for an enhancement. label May 8, 2023

kmanijak mentioned this pull request May 11, 2023

Update/woocommerce blocks 10.2.0 woocommerce/woocommerce#38246

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add product hero pattern #9181

Add product hero pattern #9181

roykho commented Apr 24, 2023 •

edited by kmanijak

Loading

github-actions bot commented Apr 24, 2023 •

edited

Loading

github-actions bot commented Apr 24, 2023 •

edited

Loading

albarin commented Apr 25, 2023 •

edited

Loading

roykho commented Apr 25, 2023

github-actions bot commented May 3, 2023

roykho commented May 3, 2023

albarin left a comment

Add product hero pattern #9181

Add product hero pattern #9181

Conversation

roykho commented Apr 24, 2023 • edited by kmanijak Loading

Screenshots

Testing

User Facing Testing

WooCommerce Visibility

Performance Impact

Changelog

github-actions bot commented Apr 24, 2023 • edited Loading

Script Dependencies Report

TypeScript Errors Report

github-actions bot commented Apr 24, 2023 • edited Loading

albarin commented Apr 25, 2023 • edited Loading

roykho commented Apr 25, 2023

github-actions bot commented May 3, 2023

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label.

roykho commented May 3, 2023

albarin left a comment

Choose a reason for hiding this comment

roykho commented Apr 24, 2023 •

edited by kmanijak

Loading

github-actions bot commented Apr 24, 2023 •

edited

Loading

github-actions bot commented Apr 24, 2023 •

edited

Loading

albarin commented Apr 25, 2023 •

edited

Loading