Gutenberg doesn't play nice with other styles/libs
stefanchrobot opened this issue · 8 comments
It's tough to use Gutenberg together with other styles/libs, since it's hijacking top-level and generic selectors, i.e. *, html and body.
What do you think about scoping Gutenberg's application to a certain subtree, i.e.:
...
<body>
<div class="some-stuff">
</div>
<div class="gutenberg">
<!-- Gutenberg's rules apply here -->
</div>
</body>
...
Hey @stefanchrobot I think that's a good idea. This issue has never crossed my mind tbh. I'll keep it in mind for the next release...
I wonder if it is possible to create a marriage between Bulma and Gutenberg. Bulma does not affect the generic selectors and has a special class "content" for an area where a CMS or whatever inserts html-formatted content with generic selectors only.
@juh2 I haven't heard of Bulma... what is it?
I really like Gutenberg's look, but am struggling to figure out how I could sneak it into an existing project without it breaking everything is styled globally without a "gutenberg" class.
@wmhilton I know what you mean, others mentioned this and I experience it myself. Unfortunately, I don't have much time to work on this. Do you have any ideas how this could be done better?
Well, I started by just prepending a .gutenberg class selector to all the styles in src/style/gutenberg.css. Then I deleted the styles applied directly to the top-level body and html.
There's probably a way to do it cleverly using SASS... hold on while I try something... if it works I'll make a PR.
Awesome, that would be much appreciated @wmhilton !
Use sass :
.gutenberg {
@import "~gutenberg-web-type/src/style/gutenberg";
}