I have a block built in Gutenberg – in it I use an Icon element from ‘wordpress user/components’

I use a single arrow to create a dropdown which renders as an SVG. Of course when anyone who is not a super admin or admin saves this block – then the SVG is stripped and the block breaks as no SVG is found matching the save() function.

I don’t want to whitelist all SVGs on a site for security reasons – so ideally I’d just like to white-list this one. I had thought that WP KSES can pass acceptable values too but I’m wrong.

function allow_arrow_svg( $tags ) {

$tags['svg'] = array(
    'aria-hidden' => array( 'true', 'false' ),
    'role'        => array( 'img' ),
    'xmlns'       => array( 'http://www.w3.org/2000/svg' ),
    'width'       => array( '20' ),
    'height'      => array( '20' ),
    'viewbox'     => array( '0 0 20 20' ),
    'style'       => array( 'color', 'fill' ),
    'class'       => array(),
);

$tags['path'] = array(
    'd' => array( 'M5 6l5 5 5-5 2 1-7 7-7-7z' ),
);
return $tags;
}

add_filter( 'wp_kses_allowed_html', 'allow_arrow_svg', 10, 2 );

Would be perfect – but doesn’t work as I can still pass anything in the various attributes.

Any suggestions out there folks? Thanks for your time 🙂