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

Remove opinionated styles from Alternating Image and Text pattern #10292

Merged
merged 2 commits into from
Jul 25, 2023

Conversation

Aljullu
Copy link
Contributor

@Aljullu Aljullu commented Jul 20, 2023

Fixes #10290.

Testing

User Facing Testing

  1. In the post editor or the site editor, add the Alternating Image and Text pattern.
  2. Click on the image placeholders and add images to the pattern.
  3. Visit the frontend of your site.
  4. Verify the patterns looks like the After patterns in screenshots below.

Desktop:

Before After
imatge imatge
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Updated Product Hero pattern to have no opinionated styles.

@Aljullu Aljullu added type: enhancement The issue is a request for an enhancement. focus: patterns WooCommerce patterns labels Jul 20, 2023
@Aljullu Aljullu self-assigned this Jul 20, 2023
@woocommercebot woocommercebot requested review from a team and thealexandrelara and removed request for a team July 20, 2023 12:53
@github-actions
Copy link
Contributor

github-actions bot commented Jul 20, 2023

The release ZIP for this PR is accessible via:

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

Script Dependencies Report

There is no changed script dependency between this branch and trunk.

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

TypeScript Errors Report

  • Files with errors: 469
  • Total errors: 2243

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Jul 20, 2023

Size Change: 0 B

Total Size: 1.36 MB

ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.7 kB
build/active-filters-rtl.css 2.02 kB
build/active-filters-wrapper--mini-cart-contents-block/cart-button--mini-cart-contents-block/checkout-but--e791dc6c-style.js 958 B
build/active-filters-wrapper-frontend.js 7.64 kB
build/active-filters-wrapper-rtl.css 1.88 kB
build/active-filters-wrapper.css 1.88 kB
build/active-filters.css 2.02 kB
build/active-filters.js 7.59 kB
build/add-to-cart-form-rtl.css 380 B
build/add-to-cart-form.css 378 B
build/all-products-frontend.js 10.1 kB
build/all-products-rtl.css 4.24 kB
build/all-products.css 4.24 kB
build/all-products.js 41.8 kB
build/all-reviews-rtl.css 1.84 kB
build/all-reviews.css 1.84 kB
build/all-reviews.js 7.87 kB
build/attribute-filter-frontend.js 23 kB
build/attribute-filter-rtl.css 4.19 kB
build/attribute-filter-wrapper-frontend.js 7.71 kB
build/attribute-filter-wrapper-rtl.css 4.06 kB
build/attribute-filter-wrapper.css 4.06 kB
build/attribute-filter.css 4.19 kB
build/attribute-filter.js 13.3 kB
build/blocks-checkout.js 35.1 kB
build/breadcrumbs-rtl.css 253 B
build/breadcrumbs.css 253 B
build/breadcrumbs.js 2.14 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.38 kB
build/cart-blocks/cart-accepted-payment-methods-style.js 137 B
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-cross-sells-products--product-price-frontend.js 2.91 kB
build/cart-blocks/cart-cross-sells-products-frontend.js 3.83 kB
build/cart-blocks/cart-cross-sells-products-style.js 138 B
build/cart-blocks/cart-cross-sells-style.js 253 B
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.17 kB
build/cart-blocks/cart-express-payment-frontend.js 719 B
build/cart-blocks/cart-express-payment-style.js 137 B
build/cart-blocks/cart-items-frontend.js 301 B
build/cart-blocks/cart-items-style.js 228 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.47 kB
build/cart-blocks/cart-line-items-frontend.js 1.06 kB
build/cart-blocks/cart-line-items-style.js 137 B
build/cart-blocks/cart-order-summary-frontend.js 1.28 kB
build/cart-blocks/cart-order-summary-style.js 321 B
build/cart-blocks/cart-totals-frontend.js 307 B
build/cart-blocks/cart-totals-style.js 238 B
build/cart-blocks/empty-cart-frontend.js 347 B
build/cart-blocks/empty-cart-style.js 339 B
build/cart-blocks/filled-cart-frontend.js 655 B
build/cart-blocks/filled-cart-style.js 313 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.63 kB
build/cart-blocks/order-summary-coupon-form-style.js 136 B
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB
build/cart-blocks/order-summary-discount-style.js 136 B
build/cart-blocks/order-summary-fee-frontend.js 272 B
build/cart-blocks/order-summary-fee-style.js 137 B
build/cart-blocks/order-summary-heading-frontend.js 333 B
build/cart-blocks/order-summary-heading-style.js 335 B
build/cart-blocks/order-summary-shipping-frontend.js 17 kB
build/cart-blocks/order-summary-shipping-style.js 178 B
build/cart-blocks/order-summary-subtotal-frontend.js 273 B
build/cart-blocks/order-summary-subtotal-style.js 137 B
build/cart-blocks/order-summary-taxes-frontend.js 434 B
build/cart-blocks/order-summary-taxes-style.js 177 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.43 kB
build/cart-blocks/proceed-to-checkout-style.js 1.09 kB
build/cart-frontend.js 29.9 kB
build/cart-rtl.css 9.59 kB
build/cart.css 9.58 kB
build/cart.js 45.2 kB
build/catalog-sorting-rtl.css 277 B
build/catalog-sorting.css 276 B
build/catalog-sorting.js 1.71 kB
build/checkout-blocks/actions--checkout-blocks/terms-style.js 485 B
build/checkout-blocks/actions-frontend.js 1.88 kB
build/checkout-blocks/actions-style.js 684 B
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.7 kB
build/checkout-blocks/billing-address-frontend.js 1.18 kB
build/checkout-blocks/billing-address-style.js 532 B
build/checkout-blocks/contact-information-frontend.js 2.04 kB
build/checkout-blocks/contact-information-style.js 610 B
build/checkout-blocks/express-payment-frontend.js 1.13 kB
build/checkout-blocks/fields-frontend.js 318 B
build/checkout-blocks/fields-style.js 260 B
build/checkout-blocks/order-note-frontend.js 1.13 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.75 kB
build/checkout-blocks/order-summary-cart-items-style.js 137 B
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.79 kB
build/checkout-blocks/order-summary-coupon-form-style.js 136 B
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB
build/checkout-blocks/order-summary-discount-style.js 137 B
build/checkout-blocks/order-summary-fee-frontend.js 275 B
build/checkout-blocks/order-summary-fee-style.js 137 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-shipping-style.js 137 B
build/checkout-blocks/order-summary-style.js 320 B
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-subtotal-style.js 137 B
build/checkout-blocks/order-summary-taxes-frontend.js 435 B
build/checkout-blocks/order-summary-taxes-style.js 176 B
build/checkout-blocks/payment-frontend.js 9.28 kB
build/checkout-blocks/payment-style.js 462 B
build/checkout-blocks/pickup-options-frontend.js 4.84 kB
build/checkout-blocks/pickup-options-style.js 444 B
build/checkout-blocks/shipping-address-frontend.js 1.18 kB
build/checkout-blocks/shipping-address-style.js 476 B
build/checkout-blocks/shipping-method-frontend.js 2.62 kB
build/checkout-blocks/shipping-method-style.js 1.37 kB
build/checkout-blocks/shipping-methods-frontend.js 6.41 kB
build/checkout-blocks/shipping-methods-style.js 418 B
build/checkout-blocks/terms-frontend.js 1.55 kB
build/checkout-blocks/terms-style.js 676 B
build/checkout-blocks/totals-frontend.js 347 B
build/checkout-blocks/totals-style.js 284 B
build/checkout-frontend.js 31.8 kB
build/checkout-rtl.css 9.22 kB
build/checkout.css 9.21 kB
build/checkout.js 47.8 kB
build/customer-account-rtl.css 406 B
build/customer-account.css 406 B
build/customer-account.js 3.19 kB
build/featured-category-rtl.css 986 B
build/featured-category.css 987 B
build/featured-category.js 15.1 kB
build/featured-product-rtl.css 1.03 kB
build/featured-product.css 1.03 kB
build/featured-product.js 15.3 kB
build/filter-wrapper-frontend.js 14.3 kB
build/filter-wrapper-rtl.css 399 B
build/filter-wrapper.css 397 B
build/filter-wrapper.js 2.4 kB
build/handpicked-products.js 8.11 kB
build/legacy-template-rtl.css 258 B
build/legacy-template.css 257 B
build/legacy-template.js 8.93 kB
build/mini-cart-component-frontend.js 30.9 kB
build/mini-cart-contents-block/cart-button--mini-cart-contents-block/checkout-button--mini-cart-contents---358acf4e-style.js 294 B
build/mini-cart-contents-block/cart-button-frontend.js 1.73 kB
build/mini-cart-contents-block/cart-button-style.js 387 B
build/mini-cart-contents-block/checkout-button-frontend.js 1.81 kB
build/mini-cart-contents-block/checkout-button-style.js 470 B
build/mini-cart-contents-block/empty-cart-frontend.js 360 B
build/mini-cart-contents-block/empty-cart-style.js 360 B
build/mini-cart-contents-block/filled-cart-frontend.js 267 B
build/mini-cart-contents-block/filled-cart-style.js 268 B
build/mini-cart-contents-block/footer-frontend.js 3.83 kB
build/mini-cart-contents-block/footer-rtl.css 419 B
build/mini-cart-contents-block/footer-style.js 2.4 kB
build/mini-cart-contents-block/footer.css 418 B
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/items-style.js 238 B
build/mini-cart-contents-block/products-table--product-image--product-title-style.js 352 B
build/mini-cart-contents-block/products-table-frontend.js 582 B
build/mini-cart-contents-block/products-table-rtl.css 2.19 kB
build/mini-cart-contents-block/products-table-style.js 5.45 kB
build/mini-cart-contents-block/products-table.css 2.18 kB
build/mini-cart-contents-block/shopping-button-frontend.js 538 B
build/mini-cart-contents-block/shopping-button-style.js 404 B
build/mini-cart-contents-block/title-frontend.js 1.9 kB
build/mini-cart-contents-block/title-items-counter-frontend.js 1.59 kB
build/mini-cart-contents-block/title-items-counter-style.js 301 B
build/mini-cart-contents-block/title-label-frontend.js 1.53 kB
build/mini-cart-contents-block/title-label-style.js 300 B
build/mini-cart-contents-block/title-style.js 443 B
build/mini-cart-contents-rtl.css 2.73 kB
build/mini-cart-contents.css 2.73 kB
build/mini-cart-contents.js 17.9 kB
build/mini-cart-frontend.js 2.85 kB
build/mini-cart-rtl.css 2.61 kB
build/mini-cart.css 2.61 kB
build/mini-cart.js 6.1 kB
build/packages-style-rtl.css 3.59 kB
build/packages-style.css 3.59 kB
build/price-filter-frontend.js 14.6 kB
build/price-filter-rtl.css 2.71 kB
build/price-filter-wrapper-frontend.js 6.75 kB
build/price-filter-wrapper-rtl.css 2.56 kB
build/price-filter-wrapper.css 2.56 kB
build/price-filter.css 2.7 kB
build/price-filter.js 8.58 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-average-rating--product-button--product-image--product-price--product---1d132d69.js 272 B
build/product-add-to-cart--product-button--product-rating--product-rating-counter--product-rating-stars.js 151 B
build/product-add-to-cart--product-image--product-title.js 351 B
build/product-add-to-cart-frontend.js 8.67 kB
build/product-add-to-cart-rtl.css 1.39 kB
build/product-add-to-cart.css 1.4 kB
build/product-add-to-cart.js 8.71 kB
build/product-average-rating--product-button--product-image--product-price--product-rating--product-ratin--e23975b5.js 954 B
build/product-average-rating-frontend.js 1.72 kB
build/product-average-rating.js 397 B
build/product-best-sellers.js 8.45 kB
build/product-button-frontend.js 4.96 kB
build/product-button-rtl.css 889 B
build/product-button.css 891 B
build/product-button.js 3.95 kB
build/product-categories-rtl.css 671 B
build/product-categories.css 670 B
build/product-categories.js 2.71 kB
build/product-category.js 9.47 kB
build/product-collection.js 13.9 kB
build/product-details-rtl.css 413 B
build/product-details.css 410 B
build/product-gallery-large-image-rtl.css 314 B
build/product-gallery-large-image.css 313 B
build/product-gallery-large-image.js 2.01 kB
build/product-gallery.js 2.3 kB
build/product-image-frontend.js 2.72 kB
build/product-image-gallery-rtl.css 322 B
build/product-image-gallery.css 322 B
build/product-image-rtl.css 951 B
build/product-image.css 949 B
build/product-image.js 1.57 kB
build/product-new.js 8.75 kB
build/product-on-sale.js 8.76 kB
build/product-price-frontend.js 248 B
build/product-price-rtl.css 696 B
build/product-price.css 695 B
build/product-price.js 1.67 kB
build/product-query-rtl.css 367 B
build/product-query.css 365 B
build/product-query.js 12.7 kB
build/product-rating-counter-frontend.js 2.03 kB
build/product-rating-counter.js 687 B
build/product-rating-frontend.js 2.37 kB
build/product-rating-rtl.css 262 B
build/product-rating-stars-frontend.js 2.27 kB
build/product-rating-stars-rtl.css 914 B
build/product-rating-stars.css 916 B
build/product-rating-stars.js 937 B
build/product-rating.css 262 B
build/product-rating.js 1.04 kB
build/product-results-count-rtl.css 248 B
build/product-results-count.css 247 B
build/product-results-count.js 1.67 kB
build/product-reviews-rtl.css 474 B
build/product-reviews.css 473 B
build/product-sale-badge-frontend.js 1.81 kB
build/product-sale-badge-rtl.css 392 B
build/product-sale-badge.css 389 B
build/product-sale-badge.js 665 B
build/product-search-rtl.css 435 B
build/product-search.css 434 B
build/product-search.js 2.63 kB
build/product-sku-frontend.js 1.87 kB
build/product-sku-rtl.css 258 B
build/product-sku.css 258 B
build/product-sku.js 535 B
build/product-stock-indicator-frontend.js 2.06 kB
build/product-stock-indicator-rtl.css 250 B
build/product-stock-indicator.css 250 B
build/product-stock-indicator.js 729 B
build/product-summary-frontend.js 2.28 kB
build/product-summary-rtl.css 571 B
build/product-summary.css 572 B
build/product-summary.js 1.01 kB
build/product-tag.js 8.95 kB
build/product-template-rtl.css 439 B
build/product-template.css 437 B
build/product-template.js 3.35 kB
build/product-title-frontend.js 2.23 kB
build/product-title-rtl.css 718 B
build/product-title.css 719 B
build/product-title.js 973 B
build/product-top-rated.js 9.01 kB
build/products-by-attribute.js 9.8 kB
build/rating-filter-frontend.js 21.4 kB
build/rating-filter-rtl.css 4.25 kB
build/rating-filter-wrapper-frontend.js 6.23 kB
build/rating-filter-wrapper-rtl.css 4.11 kB
build/rating-filter-wrapper.css 4.11 kB
build/rating-filter.css 4.24 kB
build/rating-filter.js 6.94 kB
build/reviews-by-category-rtl.css 1.84 kB
build/reviews-by-category.css 1.84 kB
build/reviews-by-category.js 12.2 kB
build/reviews-by-product-rtl.css 1.84 kB
build/reviews-by-product.css 1.84 kB
build/reviews-by-product.js 13.4 kB
build/reviews-frontend.js 7.18 kB
build/single-product-rtl.css 399 B
build/single-product.css 397 B
build/single-product.js 11.3 kB
build/stock-filter-frontend.js 21.6 kB
build/stock-filter-rtl.css 4.06 kB
build/stock-filter-wrapper-frontend.js 6.45 kB
build/stock-filter-wrapper-rtl.css 3.93 kB
build/stock-filter-wrapper.css 3.93 kB
build/stock-filter.css 4.06 kB
build/stock-filter.js 7.65 kB
build/store-notices.js 1.69 kB
build/vendors--active-filters-wrapper--attribute-filter-wrapper--mini-cart-contents-block/cart-button--mi--d6bb29e6-style.js 604 B
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js 6.84 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js 4.2 kB
build/vendors--attribute-filter-wrapper-frontend.js 5.11 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.57 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 19.4 kB
build/vendors--cart-blocks/proceed-to-checkout-style.js 178 B
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--checkout-blocks/shipping-method-style.js 11.7 kB
build/vendors--mini-cart-contents-block/products-table--price-filter-wrapper--product-price-style.js 5.27 kB
build/vendors--mini-cart-contents-block/products-table-style.js 3.16 kB
build/vendors--price-filter-wrapper-frontend.js 2.2 kB
build/vendors--product-add-to-cart-frontend.js 7.25 kB
build/vendors--rating-filter-wrapper-frontend.js 5.11 kB
build/vendors--stock-filter-wrapper-frontend.js 5.11 kB
build/wc-blocks-data.js 22.4 kB
build/wc-blocks-editor-style-rtl.css 6.4 kB
build/wc-blocks-editor-style.css 6.4 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 934 B
build/wc-blocks-registry.js 3.15 kB
build/wc-blocks-rtl.css 2.54 kB
build/wc-blocks-shared-context.js 1.1 kB
build/wc-blocks-shared-hocs.js 1.75 kB
build/wc-blocks-vendors.js 65.5 kB
build/wc-blocks.css 2.54 kB
build/wc-blocks.js 3.75 kB
build/wc-interactivity.js 10.4 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.4 kB

compressed-size-action

Copy link
Contributor

@thealexandrelara thealexandrelara left a comment

Choose a reason for hiding this comment

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

I used images with different sizes and this is the result:
image

I think you used square images for the "after" image, so just confirming that the images should maintain their aspect ratio (like in the image above) instead of being squared when using images with different sizes for the height and width

Other than that, code looks good and everything is working as expected, so I'm pre-approving this PR! 🚀

@github-actions github-actions bot added this to the 10.8.0 milestone Jul 20, 2023
@Aljullu
Copy link
Contributor Author

Aljullu commented Jul 21, 2023

Thanks for the review @thealexandrelara!

I think you used square images for the "after" image, so just confirming that the images should maintain their aspect ratio (like in the image above) instead of being squared when using images with different sizes for the height and width

Good question. I'm going to ping @jarekmorawski about this. tl;dr Should we default to a square aspect ratio in the images of the Alternating Image and Text pattern?

@jarekmorawski
Copy link

I think it's okay to default to square as long as the user can change the position in the inspector, similar to how they can do it in the Cover block.

image

@Aljullu
Copy link
Contributor Author

Aljullu commented Jul 24, 2023

Unfortunately, that's not possible with the Image block:

In that case, should we not have an aspect ratio by default and simply honor the existing aspect ratio of the image, @jarekmorawski? Users can still easily modify the aspect ratio in the sidebar if they want.

@jarekmorawski
Copy link

In that case, yes, we should keep the original aspect ratio. Thanks for looking into it, Albert! 🙏

@Aljullu
Copy link
Contributor Author

Aljullu commented Jul 25, 2023

Makes sense. Thanks for your input, @jarekmorawski!

@Aljullu Aljullu merged commit 55cc42e into trunk Jul 25, 2023
@Aljullu Aljullu deleted the fix/10290-alternating-image-and-text-wireframe branch July 25, 2023 08:12
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.

Store Customization > Alternating Image and Text pattern - Update the pattern to become wireframed
3 participants