Block Inline CSS gets always loaded

[thomasbachem]

Describe the bug

The block inline CSS gets always added to every page:

<style id='safe-svg-svg-icon-style-inline-css' type='text/css'>
.safe-svg-cover{text-align:center}.safe-svg-cover .safe-svg-inside{display:inline-block;max-width:100%}.safe-svg-cover svg{height:100%;max-height:100%;max-width:100%;width:100%}

</style>

It seems like commit 687092a intends to fix that, but it doesn't.

Steps to Reproduce

I don't use any blocks at all, just an old custom WordPress theme and upgraded to recent WP + Safe SVG versions.

It even happens on pages where there is no inline or external SVG image in the HTML output referenced at all.

Screenshots, screen recording, code snippet

No response

Environment information

No response

WordPress information

WordPress v6.4.3 Safe SVG v2.2.4

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[korn806]

Yes, this bug is still there. A quick fix is to comment out the initiation of the blocks setup in line 170 of safe-svg.php.

From Blocks\setup(); to //Blocks\setup();

But you will have to do that after every plugin update.

A more robust workaround would be an action to allow the deactivation of the blocks setup in the functions.php when not needed. Something like this:

Change the code in safe-svg.php from

public function setup_blocks() {
    Blocks\setup();
}

to

public function setup_blocks() {
	add_action('safe_svg_blocks', function () {
		if (isset($this->disabled)) {
			return;
		}
               else  {
			Blocks\setup();
               }
	});
	do_action('safe_svg_blocks', $this);
}

public function safe_svg_blocks_disable() {
	$this->disabled = true;
}

Now you can disable the blogs setup with the following action in functions.php:

add_action('safe_svg_blocks', function (SafeSvg\safe_svg $safe_svg_blocks) {
        $safe_svg_blocks->safe_svg_blocks_disable();
    });

[dkotter]

Curious if there are additional reproduction steps that could be provided here? I've tried reproducing this myself but the only time I see that CSS being loaded is if I'm on a post or page that uses the Safe SVG block. All other posts, pages, home page, etc don't load that CSS.

I've tried testing both on content created with the Block Editor and content created with the Classic Editor, both posts and pages but I never see that CSS load unless the block is being used.

[korn806]

As thomasbachem described: An old-style custom WordPress theme without blocks and upgraded to recent WP + Safe SVG versions.

[kirtangajjar]

@dkotter I was able to reproduce this issue in a classic theme(twentyfourteen). So this issue is actually a WP core behaviour and not a safe-svg plugin specific issue. On non-block themes, WordPress renders styles of all blocks regardless of if they're rendered or not. This happens in wp_enqueue_registered_block_scripts_and_styles function which is hooked on enqueue_block_assets action.

So all WP would render styles of all the blocks registered by all the plugins. To disable this behaviour and render a style only when the block is loaded, add this filter in the code and it should be sorted:

add_filter( 'should_load_separate_core_block_assets', '__return_true' );

Since this is a WP core behaviour, I don't think we need to create a workaround for it in our code.

[korn806]

kirtangajjar the propblem of this solution is that you now get the "global-styles-inline-css"-style injected in the html, which kinda defeats the purpose.