WooCommerce bundled styles conflict with Gutenberg/WordPress CustomSelectControl component styles

[andrewserong]

Describe the bug

Bundled WordPress components styles for the CustomSelectControl component appear to be causing styling conflicts within the post editor with both WooCommerce and the Gutenberg plugin active. Specifically, the bundled styles appear to be overriding the styles coming from Gutenberg, causing a styling issue with the Position dropdown within the block inspector. This new Position panel will be included in WordPress core version 6.2.

To reproduce

1. Set your theme to TT3
2. With the Gutenberg plugin and WooCommerce plugins active (e.g. GB 15.3.1 and WooCommerce 7.5.0) create a new post
3. Add a Group block
4. Expand the Position panel in the block inspector
5. Click the drop down list and observe the styling with and without the WooCommerce plugin active

Expected behavior

The styling rules for the CustomSelectControl component not to be overridden with the WooCommerce plugin active.

Screenshots

With WooCommerce + Gutenberg active	With WooCommerce deactivated

Environment

WordPress (please complete the following information):

• WordPress version: 6.1.1
• Gutenberg version (if installed): 15.3.1
• WooCommerce version: 7.5.0
• WooCommerce Blocks version: (Not sure, I only have WooCommerce plugin activated as far as I can tell)
• Site language:
• Any other plugins installed: Gutenberg (15.3.1)

Desktop (please complete the following information):

• OS: Mac
• Browser: Chrome
• Version: 111.0.5563.64

Additional context

The cause of the styling conflict above appears to be that the version of the styles shipped with WooCommerce sets the .components-custom-select-control__item to display: flex, whereas Gutenberg sets it to display: grid. The PR that switched the component to use grid was this one, which merged back in October 2021: WordPress/gutenberg#35395

I have very little knowledge of how the WC Blocks plugin is built, but as far as I can tell from a quick search of the repo, I imagine the bundled styles are being included somewhere around here:

woocommerce-blocks/bin/webpack-entries.js

Line 105 in 7f85c21

'./node_modules/wordpress-components/src/custom-select-control/style.scss',

A couple of questions to hopefully help debug:

• Is it necessary for this component's styles to be loaded in this way in the post and site editors?
• If the styles are needed for WC Blocks, should they be scoped to the intended areas where the styles should apply, instead of applying globally to the post or site editors? This is the main issue I encountered but there could be other uses of the CustomSelectControl component that also won't be compatible with the version shipped by WooCommerce.

Thanks for taking a look! Let me know if you need any additional information or context.

[kmanijak]

Hi @andrewserong, thanks for raising the issue and for the very detailed explanation!

Let me know if you need any additional information or context.

That's enough information for us to take this issue to backlog, thank you!

[nerrad]

I'm raising the priority on this one because anything that impacts the editor component styles should be prioritized - it's not good for a WordPress plugin to be impacting @wordpress/component styling this way.

[kmanijak]

I'm raising the priority on this one because anything that impacts the editor component styles should be prioritized - it's not good for a WordPress plugin to be impacting @wordpress/component styling this way.

Makes sense and I'll keep in mind prioritizing such issues in the future 🙌 .

I double-checked the issue and it's no longer reproducible. It was fixed at least a couple of months ago (I think WC Blocks 11.1.0 in this PR: #10758).

I checked with some older versions of WC Core (8.2) including WC Blocks 11.1.0 and WP 6.2 where CustomSelectControl got the position control and the issue is not there. I'm closing the issue.