Load same stylesheets in the Site Editor as in the frontend

[Aljullu]

All Submissions:

• Have you followed the WooCommerce Contributing guideline?
• Does your code follow the WordPress' coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

Currently, in the Site Editor we are only loading two frontend styles: /assets/css/woocommerce.css and /assets/css/woocommerce-blocktheme.css. However, in some circumstances, there might be more CSS files or they might be replaced by others, for example, when using TT2 or TT3, which replace /assets/css/woocommerce.css with their own stylesheet. We would like to honor that in the editor so frontend and editor look as similar as possible.

This PR uses WC_Frontend_Scripts::get_styles() to get the list of styles which are loaded in the frontend to load them in the Site Editor.

• This PR is a very minor change/addition and does not require testing instructions (if checked you can ignore/remove the next section).

How to test the changes in this Pull Request:

• Have you followed the Writing high-quality testing instructions guide?

1. You will need to install WC Blocks 9.7.0 or higher. This will enable the Product Details block.
2. Install also TT2 or TT3 themes.
3. Go to Appearance > Editor and edit the Single Product template.
4. After the WooCommerce Single Product Block, add the Product Details block.
5. Verify theme styles are applied properly:

Before	After

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your changes, as applicable?
• Have you created a changelog file for each project being changed, ie pnpm --filter=<project> changelog add?

FOR PR REVIEWER ONLY:

• I have reviewed that everything is sanitized/escaped appropriately for any SQL or XSS injection possibilities. I made sure Linting is not ignored or disabled.

[Aljullu]

Because the Product Details block is not inside a .woocommerce wrapper in the editor, we needed to move these styles out of .woocomerce { ... }. The change shouldn't be problematic because these classes are all prefixed with .woocommerce- or .wc-, so there won't be conflicts with styles from WP core or other plugins.

[codecov]

Codecov Report

Merging #36911 (00b8a8e) into trunk (c8074a7) will decrease coverage by 0.0%.
The diff coverage is 0.0%.

Additional details and impacted files

@@            Coverage Diff             @@
##             trunk   #36911     +/-   ##
==========================================
- Coverage     46.7%    46.7%   -0.0%     
- Complexity   17178    17180      +2     
==========================================
  Files          429      429             
  Lines        64779    64784      +5     
==========================================
  Hits         30242    30242             
- Misses       34537    34542      +5     

Impacted Files	Coverage Δ
...ocommerce/includes/admin/class-wc-admin-assets.php	0.0% <0.0%> (ø)

[github-actions]

Test Results Summary

Commit SHA: 00b8a8e

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	1m 13s
E2E Tests	189	0	0	6	0	195	15m 40s

---

To view the full API test report, click here.
To view the full E2E test report, click here.
To view all test reports, visit the WooCommerce Test Reports Dashboard.

[Konamiman]

This is how I see it with TT2 in a JN site, is this expected?

[Aljullu]

This is how I see it with TT2 in a JN site, is this expected?

Yes, it is. That gray color in the non-active tabs is coming from the theme stylesheet.

Before	After