search

maximebj / agb.plugin

Awesome customizable blocks for the new WordPress Editor
133 stars 29 forks source link

Some themes override color/margin/padding in advanced blocks #59

Open fsvm88 opened 4 years ago

fsvm88 commented 4 years ago

Hello,

I have been using Advanced Gutenberg Blocks for a couple weeks, and always noticed that with the Advanced Code blocks, the theme I'm using sends inline CSS to force the color of the text to a specific value. Not only that, it also overrides padding and margin, so that the lines appear with huge spacing and make the editing almost impractical.

I solved my use case by appending the following to dist/blocks.style.build.css: .wp-block-advanced-gutenberg-blocks-code .CodeMirror pre{color:inherit;margin:inherit;padding:inherit;}

This way I can finally edit plain text with a black background, and with the paddings/margins that appear in the published post.

Would it be possible to make this a feature, adding an on/off checkbox in the "Tweak Editor" settings page? Something like "Workaround for themes forcing styles in ACB". I am not sure if those are the only 3 properties being overwritten by the theme, but I guess they're the most important ones to not mess up the preview (and esp. allowing seeing the text, when you have theme text color == block background color).

For reference, the theme displaying the issue for me is Typology: https://mekshq.com/theme/typology/

maximebj commented 4 years ago

It's always an hassle to deal with CSS in Gutenberg because of styles inheritances, since the beginning of the project.

Maybe I can always add this CSS to CodeMirror in order to prevent suchs cases. Would it work every time ?

Thank you for your feedback!

fsvm88 commented 4 years ago

I am not sure it will work every time, but in my case I have seen that the theme was sending inline CSS that was overriding the AGB one as it was more specific, so this fix works. I guess it really depends on whether the theme has more specific selectors, and at which point in the hierarchy.