I have been creating custom Gutenberg blocks for projects and I want to create a simple block to add inline SVG code that renders in the block builder and the front-end.

Would I create a element to add the SVG code then output it?

Any help with direction here would be great : )

  • Keep in mind that SVG's can contain dangerous elements, any block UI would need to sanitise and whitelist attributes and tags to avoid exploits such as XML attacks, or embedded script tags – Tom J Nowell Apr 19 '20 at 17:30
  • This would be more for people that know how to work with SVGs and would not embed any unknown SVGs. I just need to make the block editor look as much like the front-end as possible and make it easy to add inline SVG. – houstonaspen Apr 19 '20 at 17:55
  • That's a very insecure attitude, the majority of people are unaware that SVG's can be used that way, I see no reason why the block itself couldn't sanitise the input. There are already plugins that do this for SVG uploads. Otherwise you're just giving people a textbox they can put any HTML or javascript into – Tom J Nowell Apr 19 '20 at 18:41
  • This is only to ease the internal workflow and not for other people to use (yet). Once I can learn how to complete this part I will then work on the sanitize portion and make this a plugin for others to use. Thanks for being so concerned about security. Just trying to figure out this first step – houstonaspen Apr 19 '20 at 18:45
  • Also @TomJNowell, what would be the difference between this and the HTML block in WordPress? People can just add any bit of code they want there as well. – houstonaspen Apr 19 '20 at 19:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.