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

Conversation

@sunyatasattva
Copy link
Contributor

Gutenberg uses two different attributes for text colors:

  • style.color.text, and
  • textColor

However, the second one is used only when a color from the default palette is selected AND the post is saved and reloaded.

With this fix we use the human readable string from the default palette as a CSS variable.

Please note that while Gutenberg correctly assigns the appropriate CSS class to render the right color, the problem is that if the color is handled by a class, it can be overridden for example by themes (see #6492).

Fixes #6522

Testing

Automated Tests

  • Changes in this PR are covered by Automated Tests.
    • Unit tests
    • E2E tests

User Facing Testing

  1. Add the Featured Category block.
  2. Select it and go to the “Text” option of the inspector bar.
  3. Select a color from the default palette.
  4. Note that the color gets correctly applied to the text within the block.
  5. Save the post.
  6. Reload the page.
  7. Make sure the color is still correctly applied.
  8. Visit the page and make sure the color is correctly applied on the frontend too.
  9. Repeat steps 2–8 for the Featured Product block.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Featured Item block: fixed an issue where the custom color wouldn't be applied if part of the default palette.

Gutenberg uses two different attributes for text colors:

* `style.color.text`, and
* `textColor`

However, the second one is used only when a color from the default
palette is selected AND the post is saved and reloaded.

With this fix we use the human readable string from the default palette
as a CSS variable.

Please note that while Gutenberg correctly assigns the appropriate CSS
class to render the right color, the problem is that if the color is
handled by a class, it can be overridden for example by themes.

See #6492
@sunyatasattva sunyatasattva added 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 Jun 7, 2022
@sunyatasattva sunyatasattva requested a review from gigitux June 7, 2022 00:17
@sunyatasattva sunyatasattva self-assigned this Jun 7, 2022
@rubikuserbot rubikuserbot requested a review from a team June 7, 2022 00:18
@github-actions
Copy link
Contributor

github-actions bot commented Jun 7, 2022

Size Change: +64 B (0%)

Total Size: 863 kB

Filename Size Change
build/featured-category.js 13.2 kB +32 B (0%)
build/featured-product.js 13.5 kB +32 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 6.59 kB
build/active-filters.js 7.43 kB
build/all-products-frontend.js 18.1 kB
build/all-products.js 33.4 kB
build/all-reviews.js 7.79 kB
build/attribute-filter-frontend.js 17.7 kB
build/attribute-filter.js 13.8 kB
build/blocks-checkout.js 17.4 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.16 kB
build/cart-blocks/cart-express-payment-frontend.js 5.06 kB
build/cart-blocks/cart-items-frontend.js 299 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.27 kB
build/cart-blocks/cart-line-items-frontend.js 432 B
build/cart-blocks/cart-order-summary-frontend.js 1.11 kB
build/cart-blocks/cart-totals-frontend.js 322 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/filled-cart-frontend.js 782 B
build/cart-blocks/order-summary-coupon-form-frontend.js 2.62 kB
build/cart-blocks/order-summary-discount-frontend.js 2.13 kB
build/cart-blocks/order-summary-fee-frontend.js 273 B
build/cart-blocks/order-summary-heading-frontend.js 454 B
build/cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping-frontend.js 6.34 kB
build/cart-blocks/order-summary-shipping-frontend.js 428 B
build/cart-blocks/order-summary-subtotal-frontend.js 273 B
build/cart-blocks/order-summary-taxes-frontend.js 433 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.15 kB
build/cart-frontend.js 45.3 kB
build/cart.js 44.1 kB
build/checkout-blocks/actions-frontend.js 1.41 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.12 kB
build/checkout-blocks/billing-address-frontend.js 892 B
build/checkout-blocks/contact-information-frontend.js 2.83 kB
build/checkout-blocks/express-payment-frontend.js 5.35 kB
build/checkout-blocks/fields-frontend.js 345 B
build/checkout-blocks/order-note-frontend.js 1.07 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.66 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 2.78 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.25 kB
build/checkout-blocks/order-summary-fee-frontend.js 275 B
build/checkout-blocks/order-summary-frontend.js 1.11 kB
build/checkout-blocks/order-summary-shipping-frontend.js 603 B
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 432 B
build/checkout-blocks/payment-frontend.js 7.67 kB
build/checkout-blocks/shipping-address-frontend.js 997 B
build/checkout-blocks/shipping-methods-frontend.js 4.71 kB
build/checkout-blocks/terms-frontend.js 1.22 kB
build/checkout-blocks/totals-frontend.js 326 B
build/checkout-frontend.js 47.5 kB
build/checkout.js 45.4 kB
build/handpicked-products.js 7.39 kB
build/legacy-template.js 2.45 kB
build/mini-cart-component-frontend.js 16.6 kB
build/mini-cart-contents-block/empty-cart-frontend.js 364 B
build/mini-cart-contents-block/filled-cart-frontend.js 230 B
build/mini-cart-contents-block/footer--mini-cart-contents-block/products-table-frontend.js 4.69 kB
build/mini-cart-contents-block/footer-frontend.js 5.63 kB
build/mini-cart-contents-block/items-frontend.js 225 B
build/mini-cart-contents-block/products-table-frontend.js 289 B
build/mini-cart-contents-block/shopping-button-frontend.js 287 B
build/mini-cart-contents-block/title-frontend.js 366 B
build/mini-cart-contents.js 22.8 kB
build/mini-cart-frontend.js 1.72 kB
build/mini-cart.js 6.62 kB
build/price-filter-frontend.js 12.5 kB
build/price-filter.js 8.74 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js 223 B
build/product-add-to-cart--product-button--product-image--product-title.js 2.65 kB
build/product-add-to-cart--product-button.js 564 B
build/product-add-to-cart-frontend.js 6.96 kB
build/product-add-to-cart.js 6.64 kB
build/product-best-sellers.js 7.47 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 499 B
build/product-button-frontend.js 1.85 kB
build/product-button.js 1.09 kB
build/product-categories.js 2.78 kB
build/product-category-list-frontend.js 923 B
build/product-category-list.js 501 B
build/product-category.js 8.58 kB
build/product-image-frontend.js 1.84 kB
build/product-image.js 1.07 kB
build/product-new.js 7.76 kB
build/product-on-sale.js 8.08 kB
build/product-price-frontend.js 1.94 kB
build/product-price.js 1.5 kB
build/product-rating-frontend.js 1.15 kB
build/product-rating.js 735 B
build/product-sale-badge-frontend.js 1.09 kB
build/product-sale-badge.js 679 B
build/product-search.js 2.18 kB
build/product-sku-frontend.js 380 B
build/product-sku.js 381 B
build/product-stock-indicator-frontend.js 1.03 kB
build/product-stock-indicator.js 621 B
build/product-summary-frontend.js 1.33 kB
build/product-summary.js 916 B
build/product-tag-list-frontend.js 917 B
build/product-tag-list.js 495 B
build/product-tag.js 8.12 kB
build/product-title-frontend.js 1.3 kB
build/product-title.js 910 B
build/product-top-rated.js 8 kB
build/products-by-attribute.js 8.69 kB
build/reviews-by-category.js 11.3 kB
build/reviews-by-product.js 12.4 kB
build/reviews-frontend.js 7.02 kB
build/single-product-frontend.js 21.5 kB
build/single-product.js 10.1 kB
build/stock-filter-frontend.js 6.87 kB
build/stock-filter.js 6.95 kB
build/vendors--cart-blocks/cart-line-items--cart-blocks/cart-order-summary--cart-blocks/order-summary-shi--c02aad66-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.14 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 4.72 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 20.5 kB
build/vendors--mini-cart-contents-block/footer-frontend.js 6.86 kB
build/vendors--product-add-to-cart-frontend.js 7.53 kB
build/wc-blocks-data.js 9.87 kB
build/wc-blocks-editor-style-rtl.css 5.07 kB
build/wc-blocks-editor-style.css 5.07 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 930 B
build/wc-blocks-registry.js 2.7 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.14 kB
build/wc-blocks-style-rtl.css 22.2 kB
build/wc-blocks-style.css 22.1 kB
build/wc-blocks-vendors-style-rtl.css 1.28 kB
build/wc-blocks-vendors-style.css 1.28 kB
build/wc-blocks-vendors.js 59 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.61 kB

compressed-size-action

Copy link
Contributor

@gigitux gigitux left a comment

Choose a reason for hiding this comment

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

Thanks for working on this! LGTM :shipit:

@gigitux gigitux merged commit e246c18 into trunk Jun 7, 2022
@gigitux gigitux deleted the fix/6522-featured-item-default-colors-not-updating branch June 7, 2022 08:44
gigitux pushed a commit that referenced this pull request Jun 7, 2022
Gutenberg uses two different attributes for text colors:

* `style.color.text`, and
* `textColor`

However, the second one is used only when a color from the default
palette is selected AND the post is saved and reloaded.

With this fix we use the human readable string from the default palette
as a CSS variable.

Please note that while Gutenberg correctly assigns the appropriate CSS
class to render the right color, the problem is that if the color is
handled by a class, it can be overridden for example by themes.

See #6492
gigitux added a commit that referenced this pull request Jun 7, 2022
* Empty commit for release pull request

* Add changelog for the 7.8.0 release

* Add testing notes for 7.8.0 release

* move legacy payment processing to its own class (#6519)

* update changelog and testing instructions after the cherry-pick

* add link

* Featured Item: Fix colors from default palette not being applied (#6525)

Gutenberg uses two different attributes for text colors:

* `style.color.text`, and
* `textColor`

However, the second one is used only when a color from the default
palette is selected AND the post is saved and reloaded.

With this fix we use the human readable string from the default palette
as a CSS variable.

Please note that while Gutenberg correctly assigns the appropriate CSS
class to render the right color, the problem is that if the color is
handled by a class, it can be overridden for example by themes.

See #6492

* upload new zip

* update changelog

* Revert "Remove Combobox patch (#6465)" (#6531)

This reverts commit 617f297.

* upload new zip

* Bumping version strings to new version.

Co-authored-by: github-actions <[email protected]>
Co-authored-by: Luigi <[email protected]>
Co-authored-by: Seghir Nadir <[email protected]>
Co-authored-by: Lucio Giannotta <[email protected]>
Co-authored-by: Albert Juhé Lluveras <[email protected]>
@Aljullu Aljullu added this to the 7.8.0 milestone Jun 20, 2022
gigitux added a commit that referenced this pull request Jun 20, 2022
* Empty commit for release pull request

* Add changelog for the 7.8.0 release

* Add testing notes for 7.8.0 release

* move legacy payment processing to its own class (#6519)

* update changelog and testing instructions after the cherry-pick

* add link

* Featured Item: Fix colors from default palette not being applied (#6525)

Gutenberg uses two different attributes for text colors:

* `style.color.text`, and
* `textColor`

However, the second one is used only when a color from the default
palette is selected AND the post is saved and reloaded.

With this fix we use the human readable string from the default palette
as a CSS variable.

Please note that while Gutenberg correctly assigns the appropriate CSS
class to render the right color, the problem is that if the color is
handled by a class, it can be overridden for example by themes.

See #6492

* upload new zip

* update changelog

* Revert "Remove Combobox patch (#6465)" (#6531)

This reverts commit 617f297.

* upload new zip

* Bumping version strings to new version.

* Fix MD lint errors and fix conflicts

* Empty commit for release pull request

* Release: 7.8.3 (#6602)

* Fix PHP notice in Mini Cart when prices included taxes (#6537)

* Empty commit for release pull request

* Add changelog to readme.txt

* Update versions

* Add Testing steps for version 7.8.1

* Bumping version strings to new version.

* Empty commit for release pull request

* Empty commit for release pull request

* Replace instances of wp_is_block_theme() with wc_current_theme_is_fse_theme() (#6590)

* update changelog and testing instructions

* Empty commit for release pull request

* upload zip

* Bumping version strings to new version.

* Fix images hidden by default in Product grid blocks (#6599)

* update changelog and testing instructons

* Bumping version strings to new version.

Co-authored-by: Albert Juhé Lluveras <[email protected]>
Co-authored-by: github-actions <[email protected]>
Co-authored-by: Luigi <[email protected]>

* fix MD lint errors

* fix sort deps

Co-authored-by: github-actions <[email protected]>
Co-authored-by: Seghir Nadir <[email protected]>
Co-authored-by: Lucio Giannotta <[email protected]>
Co-authored-by: Albert Juhé Lluveras <[email protected]>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
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. type: bug The issue/PR concerns a confirmed bug.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Featured Item: Default palette colors not updating on the editor

4 participants