For now, I’ve modified the svgs-inline-min.js file by adding a check to see if parent element has a .style-img class before further processing. I used parent class because Gutenberg “Image Block” advanced settings class is added to <figure> and not to <img> tag.
jQuery(document).ready((function($){
function t(t) {
var i = t.attr("id"),
r = t.attr("class"),
n = t.attr("src");
// Condition added
if (t.closest('.style-img').length > 0) {
console.log("Skipping SVG inlining for:", n);
return;
}
}
}));
-
This reply was modified 5 months, 2 weeks ago by
egornmore.
hi there,
you could set a custom class to target in svg support settings, then only use that class on the one you want to affect. all else will remain standard. no need for code editing 🙂
Hi! Thanks for fast response =)
You got me a bit wrong, I want to inline img.wp-block-cover__image-background element (cover image) of Gutenberg “Cover” block. As soon as Gutenberg doesn’t provide “Edit as HTML” feature for cover block I can’t add .style-svg class to img.wp-block-cover__image-background directly, so I’m forced to add class to cover block itself. My cover block has another Gutenberg “Image” block as content which is SVG and as soon as it’s parent (cover block) has .style-svg class it is inlined as well. I want to prevent inlining specific child elements somehow.
Here is Gutenberg “Cover” block structure for reference:
<div class="wp-block-cover style-svg">
<span class="wp-block-cover__background"></span>
<img class="wp-block-cover__image-background" src="url.svg" /> <!-- Cover bg image -->
<div class="wp-block-cover__inner-container">
<!-- Cover block content -->
<div class="wp-block-image">
<figure>
<img src="url.svg" />
</figure>
</div>
</div>
</div>
Ah ok, I get you now.
I have added a new setting “Skip Nested SVGs” so you can enable this functionality as an option under advanced in the next version of the plugin.
You can play with the development version to test if it works (I tested and it’s working for me) by using the code from GitHub before I publish to WP repo (I’m working on a number of updates and changes, but this is included already):
https://github.com/benbodhi/svg-support
Let me know if this works for you.
That feature perfectly fits for me, thanks!
I’ve tested development version, and I’m getting following error in the Guttenberg editor:
ReferenceError: Cannot access 'composedCheckBox' before initialization
at https://v3.nmore.dev/wp-content/plugins/svg-support-master//js/gutenberg-filters.js:24:17
at ht (https://v3.nmore.dev/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.3.1:10:45730)
at Qs (https://v3.nmore.dev/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.3.1:10:120536)
at wl (https://v3.nmore.dev/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.3.1:10:88637)
at bl (https://v3.nmore.dev/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.3.1:10:88565)
at yl (https://v3.nmore.dev/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.3.1:10:88428)
at il (https://v3.nmore.dev/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.3.1:10:85252)
at fl (https://v3.nmore.dev/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.3.1:10:85639)
at Nn (https://v3.nmore.dev/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.3.1:10:32474)
at https://v3.nmore.dev/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.3.1:10:83204
That error appears on enabling “Advanced Mode”.
ah yeah, sorry, I have fixed that up now and pushed to the dev version on GitHub.
I still need to do some more testing and make sure everything is in order before I push to WP repo.
Hi @benbodhi, tested “Skip Nested SVGs” feature, everything works!
Thanks for your help, left a 5 star review 🙂
That’s great news! I think it’s quite a handy feature, thank you for the suggestion and review!
