将单个SVG列入白名单以在POST_CONTENT中使用

时间:2021-04-15 作者:Bysander

我有一个内置于古腾堡的积木-其中我使用了来自“@wordpress/components”的图标元素

我使用一个箭头创建一个下拉列表,该下拉列表呈现为SVG。当然,当不是超级管理员或管理员的任何人保存此块时,SVG将被剥离,块将断开,因为没有找到与save()函数匹配的SVG。

出于安全原因,我不想将一个站点上的所有SVG都列入白名单,所以理想情况下,我只想将这个SVG列入白名单。我原以为WP KSE也可以通过可接受的值,但我错了。

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 );
将是完美的-但不起作用,因为我仍然可以传递各种属性中的任何内容。

各位,有什么建议吗?感谢您的时间:-)

1 个回复
SO网友:Bysander

这个问题在某种程度上改变了询问的内容,但我认为如果其他杯子在其保存功能中被react冲昏头脑,这可能会很有用。

所以,这个问题解决了@Tom J Nowell 建议,并改为进行PHP回调以允许保存。我弃用了该块,并从save函数中删除了SVG,因此弃用中的save函数包含了SVG,而新函数没有。

因此,旧块不会两次显示SVG,但新块可能会被迁移,我最终在块的迁移中强制设置了一个属性-在block deprecation function 记住申报新的blockVersion 新版本块注册中的属性-我将默认值设置为null 用于块注册的PHP和JS端。

migrate( attributes ) {
    attributes.blockVersion = \'2.0.0\';
return { ...attributes }
render_callback 函数I仅在选取“2.0.0”的版本属性时渲染SVG服务器端。如下所示:

/**
 * Callback function to render the block on the front end
 *
 * @since 2.0.0
 * @param Array  $attributes  Array of block attributes
 * @param String $content     Block content
 *
 * @return String HTML
 */
function render_block( $attributes, $content ) {
    if ( ! empty( $attributes[\'blockVersion\'] ) && version_compare( $attributes[\'blockVersion\'], \'2.0.0\', \'>=\' ) ) {
        $arrow_colour = esc_attr( $attributes[\'svgColor\'] );
        $position     = esc_attr( $attributes[\'position\'] );
    
        $svg = "<svg aria-hidden=\'true\' role=\'img\' xmlns=\'http://www.w3.org/2000/svg\' width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' style=\'color:$arrow_colour;fill:$arrow_colour\' class=\'dashicon dashicons-arrow-down-alt2 arrow-side-$position\'><path d=\'M5 6l5 5 5-5 2 1-7 7-7-7z\'></path></svg>";
    
        return "
        <div class=\'wp-block-namespace-blockname\'>
            $svg
            $content
        </div>";

    } else {
        return $content;
    }
}
最后在块的编辑功能中-我使用setAttribute() 将属性设置为“2.0.0”,以便新块在内容中始终具有块版本的非默认值。这允许PHP选择不同的版本。