Product Details block: Remove the fill color of the Product Details icon and move it to the icons library

[thealexandrelara]

Description

🤖 Generated by Copilot at 411d9ef

When selecting the Product Details block in the blocks list on the Site Editor, the icon color is always set to black. The expected behavior is that when selecting the icon, its color should change to white.

Walkthrough

🤖 Generated by Copilot at 411d9ef

• Add productDetails icon to @woocommerce/icons library (link, link)
• Use Icon component and productDetails icon to render Product Details block icon in the editor (link, link)
• Replace img element with Icon component for better scaling and accessibility (link)

Fixes #9417

Accessibility

• I've tested using only a keyboard (no mouse)
• I've tested using a screen reader
• All animations respect prefers-reduced-motion
• All text has at least a 4.5 color contrast with its background

Other Checks

• 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.
• I tagged two reviewers because this PR makes queries to the database or I think it might have some security impact.

Screenshots

Before	After

Testing

Automated Tests

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

User Facing Testing

1. Log in to your WordPress dashboard.
2. From your WordPress dashboard, go to Appearance > Themes. Make sure you have a block-based theme installed and activated. If not, you can install one from the Add New option. Block-based themes include "Twenty-twenty Two," "Twenty-twenty Three", etc.
3. On the left-hand side menu, click on Appearance > Editor. This will open the Site Editor.
4. On the left-hand side menu, click on Templates. This will open the list of available templates.
5. Find and select the Single Product template from the list.
6. When the Classic Product Template renders, click on Transform into Blocks. This will transform the Classic template in a block template if you haven't done it before.
7. Inside the Site editor, click on the List View button, usually found at the top left of the editing space, to see the list of blocks added to the editor area.
8. In the list of blocks, click on the Product Details block. Make sure the icon change its default color from black to white when selected.

• Do not include in the Testing Notes

WooCommerce Visibility

• WooCommerce Core
• Feature plugin
• Experimental

Changelog

Fix an issue that caused the color of the Product Details block icon to not change when the block was selected in the Site Editor's List View.

[github-actions]

The release ZIP for this PR is accessible via:

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

🎉 🎉 This PR does not introduce new TS errors.

_{comments-aggregator}

[github-actions]

Size Change: +562 B (0%)

Total Size: 1.09 MB

Filename	Size	Change
build/all-products.js	39.8 kB	+560 B (+1%)
build/checkout.js	46.3 kB	+2 B (0%)
build/mini-cart-contents.js	18 kB	-1 B (0%)
build/single-product.js	11.1 kB	+1 B (0%)

ℹ️ View Unchanged

Filename	Size
build/active-filters-frontend.js	8.57 kB
build/active-filters-wrapper-frontend.js	7.62 kB
build/active-filters.js	7.48 kB
build/all-products-frontend.js	11.9 kB
build/all-reviews.js	7.77 kB
build/attribute-filter-wrapper--stock-filter-wrapper-frontend.js	4.05 kB
build/attribute-filter-wrapper-frontend.js	4.28 kB
build/attribute-filter.js	13.1 kB
build/blocks-checkout.js	35.1 kB
build/breadcrumbs.js	2.05 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js	1.39 kB
build/cart-blocks/cart-cross-sells-frontend.js	253 B
build/cart-blocks/cart-cross-sells-products--product-price-frontend.js	2.94 kB
build/cart-blocks/cart-cross-sells-products-frontend.js	3.73 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js	5.17 kB
build/cart-blocks/cart-express-payment-frontend.js	717 B
build/cart-blocks/cart-items-frontend.js	301 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js	5.51 kB
build/cart-blocks/cart-line-items-frontend.js	1.06 kB
build/cart-blocks/cart-order-summary-frontend.js	1.28 kB
build/cart-blocks/cart-totals-frontend.js	308 B
build/cart-blocks/empty-cart-frontend.js	345 B
build/cart-blocks/filled-cart-frontend.js	656 B
build/cart-blocks/order-summary-coupon-form-frontend.js	1.63 kB
build/cart-blocks/order-summary-discount-frontend.js	2.12 kB
build/cart-blocks/order-summary-fee-frontend.js	273 B
build/cart-blocks/order-summary-heading-frontend.js	333 B
build/cart-blocks/order-summary-shipping-frontend.js	17 kB
build/cart-blocks/order-summary-subtotal-frontend.js	273 B
build/cart-blocks/order-summary-taxes-frontend.js	435 B
build/cart-blocks/proceed-to-checkout-frontend.js	1.38 kB
build/cart-frontend.js	29.7 kB
build/cart.js	45 kB
build/catalog-sorting.js	1.7 kB
build/checkout-blocks/actions-frontend.js	1.85 kB
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/contact-information-frontend.js	2.05 kB
build/checkout-blocks/express-payment-frontend.js	1.13 kB
build/checkout-blocks/fields-frontend.js	330 B
build/checkout-blocks/order-note-frontend.js	1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js	3.69 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js	1.79 kB
build/checkout-blocks/order-summary-discount-frontend.js	2.29 kB
build/checkout-blocks/order-summary-fee-frontend.js	276 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-subtotal-frontend.js	273 B
build/checkout-blocks/order-summary-taxes-frontend.js	435 B
build/checkout-blocks/payment-frontend.js	8.29 kB
build/checkout-blocks/pickup-options-frontend.js	4.8 kB
build/checkout-blocks/shipping-address-frontend.js	1.17 kB
build/checkout-blocks/shipping-method-frontend.js	2.59 kB
build/checkout-blocks/shipping-methods-frontend.js	6.36 kB
build/checkout-blocks/terms-frontend.js	1.56 kB
build/checkout-blocks/totals-frontend.js	312 B
build/checkout-frontend.js	31.3 kB
build/customer-account.js	3.18 kB
build/featured-category.js	15 kB
build/featured-product.js	15.2 kB
build/filter-wrapper-frontend.js	14.2 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	8 kB
build/legacy-template.js	6.45 kB
build/mini-cart-component-frontend.js	28.4 kB
build/mini-cart-contents-block/cart-button-frontend.js	1.73 kB
build/mini-cart-contents-block/checkout-button-frontend.js	1.74 kB
build/mini-cart-contents-block/empty-cart-frontend.js	360 B
build/mini-cart-contents-block/filled-cart-frontend.js	266 B
build/mini-cart-contents-block/footer-frontend.js	4.1 kB
build/mini-cart-contents-block/items-frontend.js	237 B
build/mini-cart-contents-block/products-table-frontend.js	591 B
build/mini-cart-contents-block/shopping-button-frontend.js	528 B
build/mini-cart-contents-block/title-frontend.js	1.91 kB
build/mini-cart-contents-block/title-items-counter-frontend.js	1.61 kB
build/mini-cart-contents-block/title-label-frontend.js	1.54 kB
build/mini-cart-frontend.js	2.15 kB
build/mini-cart.js	4.2 kB
build/price-filter-wrapper-frontend.js	6.75 kB
build/price-filter.js	8.47 kB
build/price-format.js	1.19 kB
build/product-add-to-cart--product-button--product-image--product-price--product-rating--product-sale-bad--49d3ecb2.js	251 B
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js	151 B
build/product-add-to-cart-frontend.js	6.52 kB
build/product-add-to-cart.js	8.87 kB
build/product-best-sellers.js	8.34 kB
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js	963 B
build/product-button-frontend.js	2.65 kB
build/product-button.js	4.01 kB
build/product-categories.js	2.37 kB
build/product-category.js	9.35 kB
build/product-collection.js	3.39 kB
build/product-image-frontend.js	2.63 kB
build/product-image.js	4.18 kB
build/product-new.js	8.34 kB
build/product-on-sale.js	8.68 kB
build/product-price-frontend.js	203 B
build/product-price.js	1.68 kB
build/product-query.js	11.7 kB
build/product-rating-frontend.js	2.31 kB
build/product-rating.js	999 B
build/product-results-count.js	1.66 kB
build/product-sale-badge-frontend.js	1.8 kB
build/product-sale-badge.js	666 B
build/product-search.js	2.63 kB
build/product-sku-frontend.js	1.84 kB
build/product-sku.js	535 B
build/product-stock-indicator-frontend.js	2.02 kB
build/product-stock-indicator.js	731 B
build/product-summary-frontend.js	2.19 kB
build/product-summary.js	904 B
build/product-tag.js	8.97 kB
build/product-template.js	3.26 kB
build/product-title-frontend.js	2.22 kB
build/product-title.js	3.69 kB
build/product-top-rated.js	8.58 kB
build/products-by-attribute.js	9.7 kB
build/rating-filter-frontend.js	21.3 kB
build/rating-filter-wrapper-frontend.js	6.21 kB
build/rating-filter.js	6.88 kB
build/reviews-by-category.js	12.1 kB
build/reviews-by-product.js	13.2 kB
build/reviews-frontend.js	7.11 kB
build/stock-filter-wrapper-frontend.js	2.98 kB
build/stock-filter.js	7.6 kB
build/store-notices.js	1.69 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js	6.82 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js	4.21 kB
build/vendors--attribute-filter-wrapper--stock-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--checkout-blocks/pickup-options--checkout-blocks/shipping-methods-frontend.js	8.25 kB
build/vendors--checkout-blocks/shipping-method-frontend.js	12.5 kB
build/vendors--price-filter-wrapper-frontend.js	2.2 kB
build/vendors--product-add-to-cart-frontend.js	7.26 kB
build/vendors--rating-filter-wrapper-frontend.js	5.11 kB
build/wc-blocks-data.js	22.5 kB
build/wc-blocks-editor-style-rtl.css	5.96 kB
build/wc-blocks-editor-style.css	5.96 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-shared-hocs.js	1.75 kB
build/wc-blocks-style-rtl.css	27.8 kB
build/wc-blocks-style.css	27.8 kB
build/wc-blocks-vendors-style-rtl.css	1.96 kB
build/wc-blocks-vendors-style.css	1.96 kB
build/wc-blocks-vendors.js	65.1 kB
build/wc-blocks.js	3.7 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.3 kB
build/woo-directives-runtime.js	2.73 kB
build/woo-directives-vendors.js	7.91 kB

_{compressed-size-action}

[gigitux]

LGTM!