Description

I ran into an issue at a client's site after updating Gutenberg Plugin to 18.2 release at development environment. This site runs a custom Blockbase child theme with Bootstrap, WordPress, plugins and themes are all updated to their latest versions.

The issue is that some Global Styles set at the theme.json file are overridden by Bootstrap's CSS, even though it's loaded before Global Styles.

I expected theme's Global Styles would override any other libraries I use to develop my theme.

Step-by-step reproduction instructions

I investigated what's happening and I understand it's because some Global Styles selectors have been replaced with less specific ones at this PR #60106

Screenshots, screen recording, code snippet

Like for example, Global Styles rules that would be applied to body element :

body {
    background-color: var(--wp--preset--color--cc-ice);
    color: var(--wp--preset--color--cc-black);
    font-family: var(--wp--preset--font-family--poppins);
    font-size: var(--wp--custom--font-sizes--normal);
    font-weight: var(--wp--custom--body--typography--font-weight);
    line-height: var(--wp--custom--body--typography--line-height);
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}

now are applied to :where(body)

:where(body) {
    background-color: var(--wp--preset--color--cc-ice);
    color: var(--wp--preset--color--cc-black);
    font-family: var(--wp--preset--font-family--poppins);
    font-size: var(--wp--custom--font-sizes--normal);
    font-weight: var(--wp--custom--body--typography--font-weight);
    line-height: var(--wp--custom--body--typography--line-height);
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}

I can fix this by customizing Bootstrap and compiling my own Bootstrap CSS, I haven't done that because this is double work.

So I guess this will be an issue for other themes and plugins that use third party libraries or that have their own CSS, many times required to work.

Environment info

• WordPress 6.5.3, Gutenberg 18.3, Blockbase 3.1.17 + Child theme with Bootstrap 5.3
• All browsers
• All devices

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes