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

Product Gallery: Lock the Sale Badge and the Next/Prev Buttons #10869

Merged
merged 31 commits into from
Sep 11, 2023

Conversation

danieldudzic
Copy link
Contributor

What

Fixes #10868

  • The lock on the Sale Badge still allows the user to delete the block.
  • For the Next/Prev Buttons such thing is not necessary as the user can hide the block with block settings.

Why

This PR locks the Sale Badge and Next/Prev Buttons blocks in order to prevent unexpected behavior when these blocks get moved.

Testing Instructions

Please consider any edge cases this change may have, and also other areas of the product this may impact.

  1. Using a block theme, go to Appearance > Editor.
  2. Go to Templates > Single Product.
  3. Make sure you are using the blockified template.
  4. Add the Product Gallery block .
  5. Try to move the Sale Badge below the Next/Prev Buttons.
  6. Notice the blocks are locked.
  • Do not include in the Testing Notes
  • Should be tested by the development team exclusively

Screenshots or screencast

Before After
Single_Product_‹_Template_‹_Editor_‹_newproductgallery_—_WordPress-3 Single_Product_‹_Template_‹_Editor_‹_newproductgallery_—_WordPress-2

WooCommerce Visibility

Required:

  • WooCommerce Core
  • Feature plugin
  • Experimental
  • N/A

Checklist

Required:

  • This PR has either a [type] label or a [skip-changelog] label.
  • This PR is assigned to a milestone.

Conditional:

  • This PR has a changelog description (if [skip-changelog] label is not present).
  • This PR adds/removes a feature flag & I've updated this doc.
  • This PR adds/removes an experimental interfaces, and I've updated this doc.
  • This PR has been accessibility tested.
  • This PR has had any necessary documentation added/updated.

Changelog

Product Gallery: Lock the Sale Badge and Next/Prev Buttons.

albarin and others added 29 commits August 17, 2023 09:46
@danieldudzic danieldudzic added the type: enhancement The issue is a request for an enhancement. label Sep 7, 2023
@danieldudzic danieldudzic added the block: product gallery Issues related to the Product Gallery block. label Sep 7, 2023
@danieldudzic danieldudzic added this to the 11.1.0 milestone Sep 7, 2023
@woocommercebot woocommercebot requested review from a team and kmanijak and removed request for a team September 7, 2023 14:27
@github-actions
Copy link
Contributor

github-actions bot commented Sep 7, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-10869.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: 489
  • Total errors: 2258

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Sep 7, 2023

Size Change: +6 B (0%)

Total Size: 1.37 MB

Filename Size Change
build/product-gallery.js 9.22 kB +6 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.58 kB
build/active-filters-rtl.css 1.99 kB
build/active-filters-wrapper--mini-cart-contents-block/cart-button--mini-cart-contents-block/checkout-but--e791dc6c-style.js 929 B
build/active-filters-wrapper-frontend.js 6.18 kB
build/active-filters-wrapper-rtl.css 1.85 kB
build/active-filters-wrapper.css 1.85 kB
build/active-filters.css 1.99 kB
build/active-filters.js 7.51 kB
build/add-to-cart-form-rtl.css 355 B
build/add-to-cart-form.css 354 B
build/all-products-frontend.js 9.94 kB
build/all-products-rtl.css 4.47 kB
build/all-products.css 4.46 kB
build/all-products.js 41.5 kB
build/all-reviews-rtl.css 1.79 kB
build/all-reviews.css 1.79 kB
build/all-reviews.js 8.37 kB
build/attribute-filter-frontend.js 22.9 kB
build/attribute-filter-rtl.css 4.14 kB
build/attribute-filter-wrapper-frontend.js 8.04 kB
build/attribute-filter-wrapper-rtl.css 4.01 kB
build/attribute-filter-wrapper.css 4.01 kB
build/attribute-filter.css 4.14 kB
build/attribute-filter.js 13.1 kB
build/blocks-checkout.js 35.3 kB
build/breadcrumbs-rtl.css 232 B
build/breadcrumbs.css 232 B
build/breadcrumbs.js 2.27 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.34 kB
build/cart-blocks/cart-accepted-payment-methods-style.js 136 B
build/cart-blocks/cart-cross-sells-frontend.js 250 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.72 kB
build/cart-blocks/cart-cross-sells-products-style.js 138 B
build/cart-blocks/cart-cross-sells-style.js 250 B
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5 kB
build/cart-blocks/cart-express-payment-frontend.js 712 B
build/cart-blocks/cart-express-payment-style.js 137 B
build/cart-blocks/cart-items-frontend.js 284 B
build/cart-blocks/cart-items-style.js 219 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.34 kB
build/cart-blocks/cart-line-items-frontend.js 1.04 kB
build/cart-blocks/cart-line-items-style.js 136 B
build/cart-blocks/cart-order-summary-frontend.js 1.24 kB
build/cart-blocks/cart-order-summary-style.js 318 B
build/cart-blocks/cart-totals-frontend.js 288 B
build/cart-blocks/cart-totals-style.js 228 B
build/cart-blocks/empty-cart-frontend.js 353 B
build/cart-blocks/empty-cart-style.js 344 B
build/cart-blocks/filled-cart-frontend.js 652 B
build/cart-blocks/filled-cart-style.js 309 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.57 kB
build/cart-blocks/order-summary-coupon-form-style.js 137 B
build/cart-blocks/order-summary-discount-frontend.js 2.04 kB
build/cart-blocks/order-summary-discount-style.js 137 B
build/cart-blocks/order-summary-fee-frontend.js 271 B
build/cart-blocks/order-summary-fee-style.js 137 B
build/cart-blocks/order-summary-heading-frontend.js 325 B
build/cart-blocks/order-summary-heading-style.js 325 B
build/cart-blocks/order-summary-shipping-frontend.js 12 kB
build/cart-blocks/order-summary-shipping-style.js 178 B
build/cart-blocks/order-summary-subtotal-frontend.js 272 B
build/cart-blocks/order-summary-subtotal-style.js 137 B
build/cart-blocks/order-summary-taxes-frontend.js 433 B
build/cart-blocks/order-summary-taxes-style.js 177 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.41 kB
build/cart-blocks/proceed-to-checkout-style.js 1.09 kB
build/cart-frontend.js 29.6 kB
build/cart-rtl.css 9.77 kB
build/cart.css 9.76 kB
build/cart.js 45 kB
build/catalog-sorting-rtl.css 256 B
build/catalog-sorting.css 256 B
build/catalog-sorting.js 1.71 kB
build/checkout-blocks/actions--checkout-blocks/terms-style.js 487 B
build/checkout-blocks/actions-frontend.js 1.81 kB
build/checkout-blocks/actions-style.js 682 B
build/checkout-blocks/billing-address-frontend.js 4.3 kB
build/checkout-blocks/billing-address-style.js 529 B
build/checkout-blocks/contact-information-frontend.js 2.02 kB
build/checkout-blocks/contact-information-style.js 606 B
build/checkout-blocks/express-payment-frontend.js 1.12 kB
build/checkout-blocks/fields-frontend.js 299 B
build/checkout-blocks/fields-style.js 250 B
build/checkout-blocks/order-note-frontend.js 1.1 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.63 kB
build/checkout-blocks/order-summary-cart-items-style.js 137 B
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.73 kB
build/checkout-blocks/order-summary-coupon-form-style.js 137 B
build/checkout-blocks/order-summary-discount-frontend.js 2.21 kB
build/checkout-blocks/order-summary-discount-style.js 137 B
build/checkout-blocks/order-summary-fee-frontend.js 274 B
build/checkout-blocks/order-summary-fee-style.js 137 B
build/checkout-blocks/order-summary-frontend.js 1.24 kB
build/checkout-blocks/order-summary-shipping-frontend.js 12 kB
build/checkout-blocks/order-summary-shipping-style.js 137 B
build/checkout-blocks/order-summary-style.js 318 B
build/checkout-blocks/order-summary-subtotal-frontend.js 272 B
build/checkout-blocks/order-summary-subtotal-style.js 137 B
build/checkout-blocks/order-summary-taxes-frontend.js 434 B
build/checkout-blocks/order-summary-taxes-style.js 177 B
build/checkout-blocks/payment-frontend.js 9.13 kB
build/checkout-blocks/payment-style.js 459 B
build/checkout-blocks/pickup-options-frontend.js 4.13 kB
build/checkout-blocks/pickup-options-style.js 438 B
build/checkout-blocks/shipping-address-frontend.js 4.28 kB
build/checkout-blocks/shipping-address-style.js 474 B
build/checkout-blocks/shipping-method-frontend.js 2.58 kB
build/checkout-blocks/shipping-method-style.js 1.35 kB
build/checkout-blocks/shipping-methods-frontend.js 5.68 kB
build/checkout-blocks/shipping-methods-style.js 414 B
build/checkout-blocks/terms-frontend.js 1.51 kB
build/checkout-blocks/terms-style.js 673 B
build/checkout-blocks/totals-frontend.js 333 B
build/checkout-blocks/totals-style.js 274 B
build/checkout-frontend.js 31.5 kB
build/checkout-rtl.css 9.08 kB
build/checkout.css 9.07 kB
build/checkout.js 47.7 kB
build/customer-account-rtl.css 407 B
build/customer-account.css 407 B
build/customer-account.js 3.18 kB
build/featured-category-rtl.css 971 B
build/featured-category.css 970 B
build/featured-category.js 15.1 kB
build/featured-product-rtl.css 1.02 kB
build/featured-product.css 1.02 kB
build/featured-product.js 15.3 kB
build/filter-wrapper-frontend.js 14 kB
build/filter-wrapper-rtl.css 375 B
build/filter-wrapper.css 375 B
build/filter-wrapper.js 2.39 kB
build/handpicked-products.js 7.99 kB
build/legacy-template-rtl.css 238 B
build/legacy-template.css 238 B
build/legacy-template.js 8.14 kB
build/mini-cart-component-frontend.js 30.5 kB
build/mini-cart-contents-block/cart-button--mini-cart-contents-block/checkout-button--mini-cart-contents---358acf4e-style.js 248 B
build/mini-cart-contents-block/cart-button-frontend.js 1.72 kB
build/mini-cart-contents-block/cart-button-style.js 383 B
build/mini-cart-contents-block/checkout-button-frontend.js 1.8 kB
build/mini-cart-contents-block/checkout-button-style.js 465 B
build/mini-cart-contents-block/empty-cart-frontend.js 359 B
build/mini-cart-contents-block/empty-cart-style.js 355 B
build/mini-cart-contents-block/filled-cart-frontend.js 267 B
build/mini-cart-contents-block/filled-cart-style.js 267 B
build/mini-cart-contents-block/footer-frontend.js 2.36 kB
build/mini-cart-contents-block/footer-rtl.css 400 B
build/mini-cart-contents-block/footer-style.js 2.35 kB
build/mini-cart-contents-block/footer.css 400 B
build/mini-cart-contents-block/items-frontend.js 228 B
build/mini-cart-contents-block/items-style.js 228 B
build/mini-cart-contents-block/products-table--product-image--product-title-style.js 316 B
build/mini-cart-contents-block/products-table-frontend.js 548 B
build/mini-cart-contents-block/products-table-rtl.css 2.12 kB
build/mini-cart-contents-block/products-table-style.js 5.32 kB
build/mini-cart-contents-block/products-table.css 2.11 kB
build/mini-cart-contents-block/shopping-button-frontend.js 491 B
build/mini-cart-contents-block/shopping-button-style.js 396 B
build/mini-cart-contents-block/title-frontend.js 1.89 kB
build/mini-cart-contents-block/title-items-counter-frontend.js 1.6 kB
build/mini-cart-contents-block/title-items-counter-style.js 301 B
build/mini-cart-contents-block/title-label-frontend.js 1.54 kB
build/mini-cart-contents-block/title-label-style.js 301 B
build/mini-cart-contents-block/title-style.js 439 B
build/mini-cart-contents-rtl.css 2.66 kB
build/mini-cart-contents.css 2.65 kB
build/mini-cart-contents.js 17.6 kB
build/mini-cart-frontend.js 2.79 kB
build/mini-cart-rtl.css 2.56 kB
build/mini-cart.css 2.56 kB
build/mini-cart.js 6.34 kB
build/packages-style-rtl.css 3.55 kB
build/packages-style.css 3.55 kB
build/price-filter-frontend.js 14.5 kB
build/price-filter-rtl.css 2.69 kB
build/price-filter-wrapper-frontend.js 8.59 kB
build/price-filter-wrapper-rtl.css 2.55 kB
build/price-filter-wrapper.css 2.54 kB
build/price-filter.css 2.69 kB
build/price-filter.js 8.52 kB
build/price-format.js 1.15 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 150 B
build/product-add-to-cart--product-image--product-title.js 320 B
build/product-add-to-cart-frontend.js 8.51 kB
build/product-add-to-cart-rtl.css 1.35 kB
build/product-add-to-cart.css 1.36 kB
build/product-add-to-cart.js 8.54 kB
build/product-average-rating--product-button--product-image--product-price--product-rating--product-ratin--e23975b5.js 933 B
build/product-average-rating-frontend.js 1.73 kB
build/product-average-rating.js 402 B
build/product-best-sellers.js 8.33 kB
build/product-button-frontend.js 4.88 kB
build/product-button-interactivity-frontend.js 9.54 kB
build/product-button-rtl.css 1.14 kB
build/product-button.css 1.14 kB
build/product-button.js 3.86 kB
build/product-categories-rtl.css 651 B
build/product-categories.css 649 B
build/product-categories.js 2.72 kB
build/product-category.js 9.29 kB
build/product-collection.js 14.9 kB
build/product-details-rtl.css 394 B
build/product-details.css 391 B
build/product-gallery-frontend.js 600 B
build/product-gallery-large-image-frontend.js 802 B
build/product-gallery-large-image-next-previous-rtl.css 489 B
build/product-gallery-large-image-next-previous.css 490 B
build/product-gallery-large-image-next-previous.js 4.07 kB
build/product-gallery-large-image-rtl.css 377 B
build/product-gallery-large-image.css 377 B
build/product-gallery-large-image.js 2.34 kB
build/product-gallery-pager-rtl.css 293 B
build/product-gallery-pager.css 294 B
build/product-gallery-pager.js 3.49 kB
build/product-gallery-rtl.css 627 B
build/product-gallery-thumbnails-rtl.css 272 B
build/product-gallery-thumbnails.css 271 B
build/product-gallery-thumbnails.js 3.91 kB
build/product-gallery.css 627 B
build/product-image-frontend.js 2.69 kB
build/product-image-gallery-rtl.css 304 B
build/product-image-gallery.css 303 B
build/product-image-rtl.css 988 B
build/product-image.css 986 B
build/product-image.js 1.53 kB
build/product-new.js 8.61 kB
build/product-on-sale.js 8.61 kB
build/product-price-frontend.js 247 B
build/product-price-rtl.css 667 B
build/product-price.css 665 B
build/product-price.js 1.66 kB
build/product-query-rtl.css 347 B
build/product-query.css 347 B
build/product-query.js 13.1 kB
build/product-rating-counter-frontend.js 2.03 kB
build/product-rating-counter.js 689 B
build/product-rating-frontend.js 2.37 kB
build/product-rating-rtl.css 244 B
build/product-rating-stars-frontend.js 2.27 kB
build/product-rating-stars-rtl.css 895 B
build/product-rating-stars.css 897 B
build/product-rating-stars.js 939 B
build/product-rating.css 244 B
build/product-rating.js 1.04 kB
build/product-results-count-rtl.css 228 B
build/product-results-count.css 228 B
build/product-results-count.js 1.66 kB
build/product-reviews-rtl.css 456 B
build/product-reviews.css 455 B
build/product-sale-badge-frontend.js 1.85 kB
build/product-sale-badge-rtl.css 435 B
build/product-sale-badge.css 434 B
build/product-sale-badge.js 699 B
build/product-search-rtl.css 415 B
build/product-search.css 415 B
build/product-search.js 2.63 kB
build/product-sku-frontend.js 1.86 kB
build/product-sku-rtl.css 237 B
build/product-sku.css 237 B
build/product-sku.js 523 B
build/product-stock-indicator-frontend.js 2.05 kB
build/product-stock-indicator-rtl.css 229 B
build/product-stock-indicator.css 229 B
build/product-stock-indicator.js 710 B
build/product-summary-frontend.js 2.2 kB
build/product-summary-rtl.css 546 B
build/product-summary.css 546 B
build/product-summary.js 917 B
build/product-tag.js 8.62 kB
build/product-template-rtl.css 418 B
build/product-template.css 418 B
build/product-template.js 2.87 kB
build/product-title-frontend.js 2.23 kB
build/product-title-rtl.css 688 B
build/product-title.css 689 B
build/product-title.js 959 B
build/product-top-rated.js 8.88 kB
build/products-by-attribute.js 9.65 kB
build/rating-filter-frontend.js 21.4 kB
build/rating-filter-rtl.css 4.2 kB
build/rating-filter-wrapper-frontend.js 6.65 kB
build/rating-filter-wrapper-rtl.css 4.07 kB
build/rating-filter-wrapper.css 4.07 kB
build/rating-filter.css 4.19 kB
build/rating-filter.js 6.88 kB
build/reviews-by-category-rtl.css 1.79 kB
build/reviews-by-category.css 1.79 kB
build/reviews-by-category.js 12.6 kB
build/reviews-by-product-rtl.css 1.79 kB
build/reviews-by-product.css 1.79 kB
build/reviews-by-product.js 14 kB
build/reviews-frontend.js 7.07 kB
build/single-product-rtl.css 375 B
build/single-product.css 375 B
build/single-product.js 11.4 kB
build/stock-filter-frontend.js 21.6 kB
build/stock-filter-rtl.css 4.01 kB
build/stock-filter-wrapper-frontend.js 6.85 kB
build/stock-filter-wrapper-rtl.css 3.88 kB
build/stock-filter-wrapper.css 3.88 kB
build/stock-filter.css 4.01 kB
build/stock-filter.js 7.6 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 629 B
build/vendors--active-filters-wrapper-frontend.js 1.69 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js 6.85 kB
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 8.31 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js 5.29 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/order-summary-shipping--checkout-blocks/order-summary-shipping--checkout-block--24d3fc0c-frontend.js 8.38 kB
build/vendors--cart-blocks/proceed-to-checkout-style.js 179 B
build/vendors--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 5.6 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12.5 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--product-add-to-cart-frontend.js 7.5 kB
build/wc-blocks-classic-template-revert-button-style-rtl.css 237 B
build/wc-blocks-classic-template-revert-button-style.css 236 B
build/wc-blocks-classic-template-revert-button.js 1.53 kB
build/wc-blocks-data.js 22 kB
build/wc-blocks-editor-style-rtl.css 6.49 kB
build/wc-blocks-editor-style.css 6.49 kB
build/wc-blocks-google-analytics.js 1.55 kB
build/wc-blocks-middleware.js 934 B
build/wc-blocks-registry.js 3.19 kB
build/wc-blocks-rtl.css 2.46 kB
build/wc-blocks-shared-context.js 1.1 kB
build/wc-blocks-shared-hocs.js 1.63 kB
build/wc-blocks-vendors.js 64.1 kB
build/wc-blocks.css 2.46 kB
build/wc-blocks.js 2.63 kB
build/wc-interactivity.js 10.8 kB
build/wc-payment-method-bacs.js 817 B
build/wc-payment-method-cheque.js 813 B
build/wc-payment-method-cod.js 914 B
build/wc-payment-method-paypal.js 852 B
build/wc-settings.js 2.68 kB
build/wc-shipping-method-pickup-location.js 30.5 kB

compressed-size-action

Copy link
Contributor

@kmanijak kmanijak left a comment

Choose a reason for hiding this comment

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

It works fine! Left one question, but pre-approving anyway!


Not related to this PR but let me leave a piece of feedback on Next/Prev Buttons.

I noticed the block offers horizontal alignment options that have no influence on the block, so potentially could be removed to avoid confusion.

image

assets/js/blocks/product-gallery/edit.tsx Show resolved Hide resolved
@danieldudzic
Copy link
Contributor Author

I noticed the block offers horizontal alignment options that have no influence on the block, so potentially could be removed to avoid confusion.

Thanks! This is a known bug, and I have opened an issue for it in Gutenberg a while back:
WordPress/gutenberg#53871

@danieldudzic danieldudzic enabled auto-merge (squash) September 8, 2023 21:50
@danieldudzic danieldudzic modified the milestones: 11.1.0, 11.2.0 Sep 11, 2023
@danieldudzic danieldudzic merged commit 21789e8 into trunk Sep 11, 2023
32 checks passed
@danieldudzic danieldudzic deleted the fix/10868-product-gallery-sale-badge-lock branch September 11, 2023 11:37
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: product gallery Issues related to the Product Gallery block. type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Product Gallery: Sale badge can be moved, but the change isn't reflected on the page
4 participants