search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.41k stars 4.16k forks source link

[Style] - Inline style !important and CSS variable scope #62959

Open webexpr-dhenriet opened 3 months ago

webexpr-dhenriet commented 3 months ago

Is there any reason to put a !important on all inline styles generated by theme.json ?

.has-black-800-color {
    color: var(--wp--preset--color--black-800) !important;
}

this should be enough ? Would it be possible to remove !important ?

.has-black-800-color {
    color: var(--wp--preset--color--black-800);
}

For CSS variables, why is the scope body and not :root ?

body {
    --wp--preset--color--black: #000000;
}

Would it be possible to encapsulate them in :root ?

:root {
    --wp--preset--color--black: #000000;
}
Mamaduka commented 3 months ago

I've seen a similar discussion somewhere but can't find it now.

@ndiego, do you remember anything related/similar?

skorasaurus commented 3 months ago

@Mamaduka -

It's been a source of frustration for myself and several others but the reasons are outlined in https://github.com/WordPress/gutenberg/issues/37590#issuecomment-1000253978

Gierand commented 3 months ago

For CSS variables, why is the scope body and not :root ?

body {
    --wp--preset--color--black: #000000;
}

Would it be possible to encapsulate them in :root ?

:root {
    --wp--preset--color--black: #000000;
}

This has now been fixed (with Gutenberg plugin or WP 6.6).

webexpr-dhenriet commented 3 months ago

@Gierand thanks for your feedback