I know it has been some time but I wanted to say that I eventually resorted to using the shadow DOM to resolve this issue. It’s working great so far.
Off course (as this is just a simple test, I put my css inline):
<div class="testwidget" style="height: 400px; width: 100%; background-color: blue; background-position: center; background-size: cover; background-image:url('<?php echo get_field( 'widgetbackgroundimage', 'widget_' . $widget_id ); ?>');">
</div>
I’m still somewhat puzzled that the gutenberg styles affected it in the first place. Isn’t a block supposed to be a web component that isn’t affected by this kind of stuff? Also, in the video tutorials this never happens, nor do they even address its possibility. Am I missing something here?
I’ve finally had the chance to test this function and it helps solve about 70% of my problems. There’s still some fonts missing and some heights are eratic. But overall, a great help so far.
Can somebody please help me…