How can I prevent WordPress from generating inline style CSS?

Question

I have a problem with WordPress generating image elements. When I place an image there's no problem, but when I need that image to be a link it adds 'width: 0 !important' as inline style. Is there a way to prevent this from happening, or at least the !important part which prevents me to override it in the CSS file?

Here's the generated code:

without link:

<figure class="aligncenter size-large">
    <img decoding="async" width="1024" height="676" src="IMGSRC" alt="IMGALT" class="wp-image-55" srcset="IMGSRCSET" sizes="(max-width: 1024px) 100vw, 1024px">
    <figcaption class="wp-element-caption">IMAGECAPTION</figcaption>
</figure>

with link:

<figure class="aligncenter size-large">
   <a href="LINK">
       <img decoding="async" width="1024" height="676" src="IMGSRC" alt="IMGALT" class="wp-image-55" srcset="IMGSRCSET" sizes="(max-width: 1024px) 100vw, 1024px" style="width: 0px !important;">   
   </a>
   <figcaption class="wp-element-caption">IMAGECAPTION</figcaption>
</figure>

This issue is giving me problems in the post page, but also using plugins for ad management in every other page of the site, every time that WP has to generate the code for an image inside an anchor tag.

I tried searching for someone with the same problem, but all the solutions I found was for inline code without the !important part.

Answer 1

You can try using CSS to override the !important rule. Although it's generally tricky to override !important declarations, you can sometimes use more specific CSS selectors or add !important to your own CSS to override the inline style.

figure a img {
  width: auto !important;
}

This CSS rule targets the <img> element specifically when it's anywhere within an anchor tag (<a>) anywhere inside a <figure> element. It attempts to override the width set by the inline style. However, the effectiveness of this approach may vary depending on the specificity of your CSS selectors and the order in which styles are applied.

Answer 2

I suspect that there is some plugin or code somewhere that inserts width: 0px !important; and should be removed. CTRL + F the code base for that bit to see if anything pops up and remove or disable.

OR, you may be able to intercept all image blocks with render_block hook and replace the inline style like so (unless the inline style is added client-side):

// Define a function to remove inline styles from the image tag within an image block
function remove_inline_styles_from_image_block($block_content, $block) {
    // Check if the block is an image block
    if ($block['blockName'] === 'core/image') {
        // Remove the 'style' attribute from the <img> tag
        $block_content = str_replace('width: 0px !important;', '', $block_content);
    }

    return $block_content;
}

// Add a filter to apply the function to the block output
add_filter('render_block', 'remove_inline_styles_from_image_block', 10, 2);

Use with caution as the more image blocks this needs to parse, the more performance intensive it gets.

hope that helps.