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

[Pattern] Add new Hero product chessboard pattern #9180

Merged
merged 4 commits into from
May 8, 2023

Conversation

albarin
Copy link
Contributor

@albarin albarin commented Apr 24, 2023

This PR implements the Footer with Simple Menu and Cart pattern.

Fixes #9041

Screenshots

Design

Centered Search

Implementation

Screenshot 2023-04-26 at 10 22 48

Testing

User-Facing Testing

  1. Create a new page or post
  2. Make sure the Hero product chessboard pattern appears under the WooCommerce category dropdown.
  3. Insert in and make sure it shows as expected on the design.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Add new Hero product chessboard pattern

@github-actions
Copy link
Contributor

github-actions bot commented Apr 24, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-9180.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 Removed
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: 450
  • Total errors: 2228

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Apr 24, 2023

Size Change: +9.69 kB (+1%)

Total Size: 1.11 MB

Filename Size Change
build/active-filters-frontend.js 8.56 kB +573 B (+7%) 🔍
build/active-filters-wrapper-frontend.js 4.68 kB -1.29 kB (-22%) 🎉
build/active-filters.js 7.48 kB -2 B (0%)
build/all-products-frontend.js 12.1 kB +304 B (+3%)
build/all-products.js 38.8 kB +180 B (0%)
build/all-reviews.js 7.77 kB +115 B (+2%)
build/attribute-filter-frontend.js 23.2 kB +701 B (+3%)
build/attribute-filter-wrapper-frontend.js 4.63 kB -2.44 kB (-34%) 🎉
build/attribute-filter.js 13.3 kB +81 B (+1%)
build/blocks-checkout.js 35.1 kB -1 B (0%)
build/breadcrumbs.js 2.05 kB -2 B (0%)
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.38 kB +1 B (0%)
build/cart-blocks/cart-cross-sells-products-frontend.js 5.39 kB +4 B (0%)
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.16 kB -3 B (0%)
build/cart-blocks/cart-express-payment-frontend.js 717 B -2 B (0%)
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.39 kB -5 B (0%)
build/cart-blocks/cart-line-items-frontend.js 1.07 kB +3 B (0%)
build/cart-blocks/cart-order-summary-frontend.js 1.27 kB +2 B (0%)
build/cart-blocks/cart-totals-frontend.js 308 B +1 B (0%)
build/cart-blocks/filled-cart-frontend.js 654 B -2 B (0%)
build/cart-blocks/order-summary-coupon-form-frontend.js 1.63 kB +2 B (0%)
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB +4 B (0%)
build/cart-blocks/order-summary-heading-frontend.js 332 B -1 B (0%)
build/cart-blocks/order-summary-shipping-frontend.js 16.9 kB +5.1 kB (+43%) 🚨
build/cart-blocks/order-summary-subtotal-frontend.js 273 B -1 B (0%)
build/cart-blocks/order-summary-taxes-frontend.js 434 B +3 B (+1%)
build/cart-blocks/proceed-to-checkout-frontend.js 1.38 kB +3 B (0%)
build/cart-frontend.js 29.6 kB +337 B (+1%)
build/cart.js 44.5 kB +35 B (0%)
build/catalog-sorting.js 1.7 kB +1 B (0%)
build/checkout-blocks/actions-frontend.js 1.85 kB +3 B (0%)
build/checkout-blocks/billing-address-frontend.js 1.18 kB -3 kB (-72%) 🏆
build/checkout-blocks/contact-information-frontend.js 2.05 kB -1 B (0%)
build/checkout-blocks/express-payment-frontend.js 1.13 kB -2 B (0%)
build/checkout-blocks/order-note-frontend.js 1.13 kB -2 B (0%)
build/checkout-blocks/order-summary-cart-items-frontend.js 3.69 kB +2 B (0%)
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB +4 B (0%)
build/checkout-blocks/order-summary-frontend.js 1.28 kB +3 B (0%)
build/checkout-blocks/order-summary-shipping-frontend.js 17 kB +5.12 kB (+43%) 🚨
build/checkout-blocks/order-summary-taxes-frontend.js 434 B +4 B (+1%)
build/checkout-blocks/payment-frontend.js 8.27 kB +4 B (0%)
build/checkout-blocks/pickup-options-frontend.js 4.81 kB +675 B (+16%) ⚠️
build/checkout-blocks/shipping-address-frontend.js 1.14 kB -3 kB (-72%) 🏆
build/checkout-blocks/shipping-method-frontend.js 2.59 kB +6 B (0%)
build/checkout-blocks/shipping-methods-frontend.js 6.3 kB +655 B (+12%) ⚠️
build/checkout-blocks/terms-frontend.js 1.56 kB -3 B (0%)
build/checkout-blocks/totals-frontend.js 311 B +1 B (0%)
build/checkout-frontend.js 31.3 kB +366 B (+1%)
build/checkout.js 46.2 kB +33 B (0%)
build/customer-account.js 3.18 kB +11 B (0%)
build/featured-category.js 14.4 kB +89 B (+1%)
build/featured-product.js 14.7 kB +137 B (+1%)
build/filter-wrapper-frontend.js 14.2 kB +125 B (+1%)
build/filter-wrapper.js 2.4 kB -1 B (0%)
build/handpicked-products.js 8 kB +75 B (+1%)
build/mini-cart-component-frontend.js 29.5 kB +315 B (+1%)
build/mini-cart-contents-block/cart-button-frontend.js 864 B -3 B (0%)
build/mini-cart-contents-block/checkout-button-frontend.js 866 B -4 B (0%)
build/mini-cart-contents-block/footer-frontend.js 3.23 kB +27 B (+1%)
build/mini-cart-contents-block/shopping-button-frontend.js 760 B +1 B (0%)
build/mini-cart-contents-block/title-frontend.js 1.09 kB -4 B (0%)
build/mini-cart-contents-block/title-items-counter-frontend.js 731 B -1 B (0%)
build/mini-cart-contents-block/title-label-frontend.js 661 B +1 B (0%)
build/mini-cart-contents.js 17.9 kB +54 B (0%)
build/mini-cart.js 4.49 kB -1 B (0%)
build/price-filter-frontend.js 14.5 kB +611 B (+4%)
build/price-filter-wrapper-frontend.js 5.78 kB -1.25 kB (-18%) 👏
build/price-filter.js 8.46 kB +19 B (0%)
build/price-format.js 1.19 kB +1 B (0%)
build/product-add-to-cart--product-button--product-image--product-price--product-rating--product-sale-bad--49d3ecb2.js 251 B -2 B (-1%)
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 0 B -151 B (removed) 🏆
build/product-add-to-cart-frontend.js 6.5 kB +79 B (+1%)
build/product-add-to-cart.js 8.87 kB +34 B (0%)
build/product-best-sellers.js 8.34 kB +81 B (+1%)
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js 463 B -1 B (0%)
build/product-button-frontend.js 1.92 kB +1 B (0%)
build/product-button.js 4.18 kB +14 B (0%)
build/product-categories.js 2.36 kB +1 B (0%)
build/product-category.js 9.35 kB +99 B (+1%)
build/product-image-frontend.js 1.84 kB -3 B (0%)
build/product-image.js 4.31 kB +9 B (0%)
build/product-new.js 8.34 kB +88 B (+1%)
build/product-on-sale.js 8.67 kB +87 B (+1%)
build/product-price-frontend.js 2.12 kB +1 B (0%)
build/product-price.js 1.68 kB +2 B (0%)
build/product-query.js 11.4 kB +84 B (+1%)
build/product-rating-frontend.js 1.33 kB -3 B (0%)
build/product-rating.js 921 B +1 B (0%)
build/product-results-count.js 1.66 kB -1 B (0%)
build/product-sale-badge-frontend.js 974 B -1 B (0%)
build/product-sku-frontend.js 998 B -2 B (0%)
build/product-stock-indicator-frontend.js 1.19 kB -1 B (0%)
build/product-stock-indicator.js 770 B +1 B (0%)
build/product-summary-frontend.js 1.29 kB -3 B (0%)
build/product-summary.js 922 B +2 B (0%)
build/product-tag.js 8.97 kB +224 B (+3%)
build/product-title-frontend.js 1.37 kB -3 B (0%)
build/product-title.js 3.75 kB +21 B (+1%)
build/product-top-rated.js 8.58 kB +84 B (+1%)
build/products-by-attribute.js 9.7 kB +109 B (+1%)
build/rating-filter-frontend.js 21.5 kB +667 B (+3%)
build/rating-filter-wrapper-frontend.js 3.04 kB -2.55 kB (-46%) 🎉
build/rating-filter.js 7.01 kB +31 B (0%)
build/reviews-by-category.js 12.1 kB +190 B (+2%)
build/reviews-by-product.js 13.2 kB +228 B (+2%)
build/reviews-frontend.js 7.1 kB -2 B (0%)
build/single-product.js 11.1 kB +119 B (+1%)
build/stock-filter-frontend.js 21.8 kB +687 B (+3%)
build/stock-filter-wrapper-frontend.js 3.31 kB -2.52 kB (-43%) 🎉
build/stock-filter.js 7.73 kB +22 B (0%)
build/store-notices.js 1.69 kB +4 B (0%)
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js 6.82 kB -1 B (0%)
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 0 B -7.7 kB (removed) 🏆
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.58 kB +435 B (+14%) ⚠️
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 19.1 kB +1 B (0%)
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping--checkout-block--24d3fc0c-frontend.js 0 B -8.25 kB (removed) 🏆
build/vendors--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 0 B -5.44 kB (removed) 🏆
build/vendors--checkout-blocks/shipping-method-frontend.js 12.4 kB +484 B (+4%)
build/vendors--product-add-to-cart-frontend.js 7.25 kB +1 B (0%)
build/wc-blocks-data.js 22.7 kB +842 B (+4%)
build/wc-blocks-shared-hocs.js 1.75 kB +3 B (0%)
build/wc-blocks-style-rtl.css 27.7 kB +61 B (0%)
build/wc-blocks-style.css 27.6 kB +59 B (0%)
build/wc-blocks-vendors.js 64.1 kB +1.32 kB (+2%)
build/wc-blocks.js 2.62 kB -2 B (0%)
build/wc-shipping-method-pickup-location.js 30.3 kB +276 B (+1%)
build/active-filters-wrapper--attribute-filter-wrapper--price-filter-wrapper--rating-filter-wrapper--stoc--78b62dd5-frontend.js 2.31 kB +2.31 kB (new file) 🆕
build/attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 5.53 kB +5.53 kB (new file) 🆕
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.66 kB +4.66 kB (new file) 🆕
build/product-add-to-cart--product-rating.js 151 B +151 B (new file) 🆕
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js 4.2 kB +4.2 kB (new file) 🆕
build/vendors--checkout-blocks/pickup-options--checkout-blocks/shipping-methods-frontend.js 8.25 kB +8.25 kB (new file) 🆕
ℹ️ View Unchanged
Filename Size
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-items-frontend.js 302 B
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/order-summary-fee-frontend.js 273 B
build/checkout-blocks/fields-frontend.js 331 B
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.79 kB
build/checkout-blocks/order-summary-fee-frontend.js 275 B
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/legacy-template.js 5.62 kB
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/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 589 B
build/mini-cart-frontend.js 2.02 kB
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--408017d2.js 262 B
build/product-sale-badge.js 801 B
build/product-search.js 2.63 kB
build/product-sku.js 578 B
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js 5.26 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-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 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/woo-directives-runtime.js 2.73 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

@albarin albarin added type: enhancement The issue is a request for an enhancement. focus: patterns WooCommerce patterns labels Apr 26, 2023
@albarin albarin marked this pull request as ready for review April 26, 2023 08:24
@woocommercebot woocommercebot requested review from a team and gigitux and removed request for a team April 26, 2023 08:24
@nefeline
Copy link
Contributor

Great work!

I have a couple of questions:

On the editor side, I'm seeing a "Write title" text in front of the images: is that expected?

Screenshot 2023-04-28 at 13 58 59

I'm seeing the button color matching my theme's: is that expected, or should it be black by default when using this pattern?

Screenshot 2023-04-28 at 14 00 05

@nefeline
Copy link
Contributor

Adding one extra comment here as I just noticed the "Shop Now" button is not linking on any page by default: is that expected? One idea could perhaps be for us to link it to the shop page by default instead of leaving it blank.

Screen.Recording.2023-04-28.at.14.05.53.mov

@albarin
Copy link
Contributor Author

albarin commented Apr 28, 2023

@nefeline Thanks for the review 🙏

On the editor side, I'm seeing a "Write title" text in front of the images: is that expected?

That's because I'm using the cover blocks instead of the image, I saw it provides some more options like choosing the focal point, overlay, etc, so I decided to use it.
Screenshot 2023-04-28 at 14 41 43

I'm seeing the button color matching my theme's: is that expected, or should it be black by default when using this pattern?

That's right, I'm not sure about that, maybe @shaunandrews can decide here. I thought it should follow the style of all other buttons, also if the theme has a dark background and the button is black it may not be very visible.

Adding one extra comment here as I just noticed the "Shop Now" button is not linking on any page by default: is that expected? One idea could perhaps be for us to link it to the shop page by default instead of leaving it blank.

Good catch, I forgot to add it, just pushed the change.

Also, I changed the padding to use px otherwise the size varies when changing themes/styles and it does not look good, it happened in other patterns I already merged.

@albarin albarin changed the title Add new Hero product chessboard pattern [Pattern] Add new Hero product chessboard pattern May 2, 2023
Copy link
Contributor

@nefeline nefeline left a comment

Choose a reason for hiding this comment

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

That's right, I'm not sure about that, maybe @shaunandrews can decide here. I thought it should follow the style of all other buttons, also if the theme has a dark background and the button is black it may not be very visible.

👍

Good catch, I forgot to add it, just pushed the change.
Also, I changed the padding to use px otherwise the size varies when changing themes/styles and it does not look good, it happened in other patterns I already merged.

👍

Awesome work! I'm pre-approving, just left a comment regarding block types in the docblock.

* Title: Hero Product Chessboard
* Slug: woocommerce-blocks/hero-product-chessboard
* Categories: WooCommerce
*/
Copy link
Contributor

Choose a reason for hiding this comment

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

should we add the Block Types: being used on this pattern, the same way as other patterns in our repo do?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Not sure if it's really useful for this pattern since it's not designed for a specific template part 🤔
I'll merge and if necessary we can always add it later.
Thanks 😄

@albarin albarin merged commit 5aded61 into trunk May 8, 2023
@albarin albarin deleted the 9041/hero-product-chessboard branch May 8, 2023 09:35
@mikejolley mikejolley added this to the 10.3.0 milestone May 22, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
focus: patterns WooCommerce patterns type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Create Hero product: chessboard pattern
3 participants