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

Fix border styles not visible in the editor in Featured Product and Featured Category blocks #8838

Merged
merged 1 commit into from
Mar 23, 2023

Conversation

Aljullu
Copy link
Contributor

@Aljullu Aljullu commented Mar 23, 2023

Fixes a bug in WC core that made the border not visible in the editor for the Featured Product and Featured Category blocks. That happened because in #8472 we refactored the code to use useBorderProps(), but that function has an extra protection so it returns no styles in WC core.

I removed that extra protection from useBorderProps() and useColorProps(). IMO, if we want some styling options not to be available in core, we need to gate them in the block metadata, but adding those protections into the useXProps() hook is dangeours because we end up with cases like this, where the controls are visible but they take no effect.

Testing

User Facing Testing

  1. (If testing the PR directly) build with WOOCOMMERCE_BLOCKS_PHASE=1 npm run build, so you simulate a WC core build.
  2. Add a Featured Item (Featured Category or Featured Product) block to a page or post.
  3. Select the border controls and add a border style. Add a color and give it some width.
  4. You should see the border you set dynamically display on the featured item.
  5. Now click on the Unlink button on the border controls and try setting different values for color and width for each of the border sides (top,right,bottom,left).
  6. Ensure this is working by visually seeing the changes to the featured item.
  7. Save and make sure this is also displaying correctly on the frontend.
  8. Test both Featured Category and Featured Product blocks.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Fix border styles not visible in the editor in Featured Product and Featured Category blocks

@Aljullu Aljullu added status: needs review type: bug The issue/PR concerns a confirmed bug. block: featured category Issues related to the Featured Category block, block: featured product Issues related to the Featured Product block. labels Mar 23, 2023
@Aljullu Aljullu self-assigned this Mar 23, 2023
@woocommercebot woocommercebot requested review from a team and albarin and removed request for a team March 23, 2023 13:50
@github-actions
Copy link
Contributor

github-actions bot commented Mar 23, 2023

The release ZIP for this PR is accessible via:

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

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

Size Change: -86 B (0%)

Total Size: 1.06 MB

Filename Size Change
build/active-filters-frontend.js 7.98 kB -7 B (0%)
build/active-filters-wrapper-frontend.js 5.97 kB -37 B (-1%)
build/active-filters.js 7.49 kB +3 B (0%)
build/all-products-frontend.js 11.8 kB +7 B (0%)
build/all-products.js 36.7 kB -36 B (0%)
build/all-reviews.js 7.65 kB -6 B (0%)
build/attribute-filter-frontend.js 22.4 kB -35 B (0%)
build/attribute-filter-wrapper--stock-filter-wrapper-frontend.js 0 B -3.38 kB (removed) 🏆
build/attribute-filter-wrapper-frontend.js 7.1 kB +2.6 kB (+58%) 🆘
build/attribute-filter.js 13.2 kB -6 B (0%)
build/breadcrumbs.js 2.04 kB -5 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 9.71 kB -43 B (0%)
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.2 kB +4 B (0%)
build/cart-blocks/cart-express-payment-frontend.js 719 B -1 B (0%)
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.36 kB +1 B (0%)
build/cart-blocks/cart-line-items-frontend.js 1.07 kB +2 B (0%)
build/cart-blocks/cart-order-summary-frontend.js 1.24 kB -2 B (0%)
build/cart-blocks/order-summary-coupon-form-frontend.js 1.62 kB -1 B (0%)
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB -2 B (0%)
build/cart-blocks/order-summary-fee-frontend.js 273 B -1 B (0%)
build/cart-blocks/order-summary-shipping-frontend.js 10.7 kB -3 B (0%)
build/cart-blocks/order-summary-subtotal-frontend.js 274 B -1 B (0%)
build/cart-blocks/proceed-to-checkout-frontend.js 1.33 kB -1 B (0%)
build/cart-frontend.js 29.3 kB -20 B (0%)
build/cart.js 48.1 kB -31 B (0%)
build/catalog-sorting.js 1.7 kB -2 B (0%)
build/checkout-blocks/actions-frontend.js 1.85 kB +3 B (0%)
build/checkout-blocks/contact-information-frontend.js 2.05 kB -2 B (0%)
build/checkout-blocks/express-payment-frontend.js 1.13 kB +2 B (0%)
build/checkout-blocks/order-note-frontend.js 1.14 kB +1 B (0%)
build/checkout-blocks/order-summary-cart-items-frontend.js 3.68 kB -2 B (0%)
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB -4 B (0%)
build/checkout-blocks/order-summary-fee-frontend.js 275 B -2 B (-1%)
build/checkout-blocks/order-summary-frontend.js 1.24 kB -2 B (0%)
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B -2 B (-1%)
build/checkout-blocks/order-summary-taxes-frontend.js 433 B -1 B (0%)
build/checkout-blocks/payment-frontend.js 8.39 kB +4 B (0%)
build/checkout-blocks/pickup-options-frontend.js 4.04 kB -4 B (0%)
build/checkout-blocks/shipping-address-frontend.js 4.14 kB -3 B (0%)
build/checkout-blocks/shipping-methods-frontend.js 4.81 kB -5 B (0%)
build/checkout-blocks/terms-frontend.js 1.56 kB +2 B (0%)
build/checkout-blocks/totals-frontend.js 309 B -1 B (0%)
build/checkout-frontend.js 30.8 kB -18 B (0%)
build/checkout.js 45.7 kB +5 B (0%)
build/customer-account.js 3.16 kB -1 B (0%)
build/featured-category.js 14 kB -24 B (0%)
build/featured-product.js 14.4 kB -18 B (0%)
build/filter-wrapper-frontend.js 14 kB -46 B (0%)
build/legacy-template.js 5.32 kB -3 B (0%)
build/mini-cart-component-frontend.js 28 kB +2 B (0%)
build/mini-cart-contents-block/empty-cart-frontend.js 361 B +1 B (0%)
build/mini-cart-contents-block/footer-frontend.js 2.85 kB -5 B (0%)
build/mini-cart-contents-block/title-frontend.js 367 B -1 B (0%)
build/mini-cart-contents.js 17 kB -10 B (0%)
build/mini-cart.js 4.49 kB -3 B (0%)
build/price-filter-frontend.js 13.9 kB -20 B (0%)
build/price-filter-wrapper-frontend.js 6.95 kB -53 B (-1%)
build/price-filter.js 8.4 kB -3 B (0%)
build/product-add-to-cart-frontend.js 6.43 kB -5 B (0%)
build/product-button-frontend.js 1.91 kB -70 B (-4%)
build/product-categories.js 2.36 kB +1 B (0%)
build/product-category.js 9.25 kB +3 B (0%)
build/product-image-frontend.js 1.77 kB -63 B (-3%)
build/product-new.js 8.26 kB +1 B (0%)
build/product-on-sale.js 8.59 kB +3 B (0%)
build/product-price-frontend.js 2.07 kB -65 B (-3%)
build/product-query.js 11 kB -1 B (0%)
build/product-rating-frontend.js 1.33 kB -67 B (-5%)
build/product-sale-badge-frontend.js 975 B -70 B (-7%)
build/product-stock-indicator-frontend.js 1.01 kB -61 B (-6%)
build/product-summary-frontend.js 1.29 kB -58 B (-4%)
build/product-tag.js 8.74 kB +1 B (0%)
build/product-title-frontend.js 1.37 kB -35 B (-2%)
build/product-top-rated.js 8.5 kB -2 B (0%)
build/rating-filter-frontend.js 20.8 kB -38 B (0%)
build/rating-filter-wrapper-frontend.js 5.58 kB -45 B (-1%)
build/rating-filter.js 6.99 kB -457 B (-6%)
build/reviews-frontend.js 7.1 kB -8 B (0%)
build/stock-filter-frontend.js 21 kB -36 B (0%)
build/stock-filter-wrapper-frontend.js 5.82 kB +2.66 kB (+84%) 🆘
build/stock-filter.js 7.7 kB -458 B (-6%)
build/store-notices.js 1.69 kB -2 B (0%)
build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--ef6753df-frontend.js 6.85 kB -1 B (0%)
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 7.7 kB +4 B (0%)
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js 5.26 kB +1 B (0%)
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.4 kB -5 B (0%)
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.25 kB -1 B (0%)
build/wc-blocks-vendors.js 64.2 kB -4 B (0%)
ℹ️ View Unchanged
Filename Size
build/blocks-checkout.js 43.9 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-items-frontend.js 301 B
build/cart-blocks/cart-totals-frontend.js 307 B
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/filled-cart-frontend.js 655 B
build/cart-blocks/order-summary-heading-frontend.js 456 B
build/cart-blocks/order-summary-taxes-frontend.js 434 B
build/checkout-blocks/billing-address-frontend.js 4.19 kB
build/checkout-blocks/fields-frontend.js 331 B
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.78 kB
build/checkout-blocks/order-summary-shipping-frontend.js 10.8 kB
build/checkout-blocks/shipping-method-frontend.js 2.61 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 7.92 kB
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-contents-block/shopping-button-frontend.js 572 B
build/mini-cart-frontend.js 2.02 kB
build/price-format.js 1.19 kB
build/product-add-to-cart.js 178 B
build/product-best-sellers.js 8.26 kB
build/product-image.js 178 B
build/product-results-count.js 1.66 kB
build/product-search.js 2.63 kB
build/product-sku-frontend.js 453 B
build/product-title.js 178 B
build/products-by-attribute.js 9.58 kB
build/reviews-by-category.js 11.9 kB
build/reviews-by-product.js 13 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping--checkout-block--24d3fc0c-frontend.js 8.24 kB
build/vendors--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 5.44 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12 kB
build/wc-blocks-data.js 21.8 kB
build/wc-blocks-editor-style-rtl.css 5.78 kB
build/wc-blocks-editor-style.css 5.78 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 930 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.73 kB
build/wc-blocks-style-rtl.css 26.9 kB
build/wc-blocks-style.css 26.9 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 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 29.9 kB
build/woo-directives-runtime.js 2.73 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

Copy link
Contributor

@albarin albarin left a comment

Choose a reason for hiding this comment

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

Working great 🚀

@github-actions github-actions bot added this to the 9.9.0 milestone Mar 23, 2023
@Aljullu Aljullu modified the milestones: 9.9.0, 9.8.3 Mar 23, 2023
@Aljullu Aljullu merged commit 2b81145 into trunk Mar 23, 2023
@Aljullu Aljullu deleted the fix/core-featured-items-border branch March 23, 2023 14:36
@Aljullu Aljullu modified the milestones: 9.8.3, 9.9.0 Mar 23, 2023
@tarunvijwani tarunvijwani changed the title Fix border styles not visible in the editor in Featured Product and Featured Category blocks in core Fix border styles not visible in the editor in Featured Product and Featured Category blocks Mar 27, 2023
@Aljullu Aljullu modified the milestones: 9.9.0, 9.8.3 Mar 28, 2023
@Aljullu Aljullu added the release: cherry-pick Cherry picked into the relevant release branch. label Mar 28, 2023
Aljullu added a commit that referenced this pull request Mar 28, 2023
Aljullu added a commit that referenced this pull request Mar 28, 2023
Aljullu added a commit that referenced this pull request Mar 28, 2023
* Empty commit for release pull request

* Update version numbers to 9.8.3

* Add 9.8.3 changelog

* Fix save changes bug in Firefox browser (#8754)

* Fix border styles not visible in the editor in Featured Product and Featured Category blocks in core (#8838)

* Check for address on shippingData (#8878)

* Add 9.8.3 testing steps

---------

Co-authored-by: github-actions <[email protected]>
Co-authored-by: Albert Juhé Lluveras <[email protected]>
Co-authored-by: Saad Tarhi <[email protected]>
Co-authored-by: Thomas Roberts <[email protected]>
Aljullu added a commit that referenced this pull request Mar 30, 2023
Aljullu added a commit that referenced this pull request Mar 30, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: featured category Issues related to the Featured Category block, block: featured product Issues related to the Featured Product block. release: cherry-pick Cherry picked into the relevant release branch. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants