我有一个内置于古腾堡的积木-其中我使用了来自“@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 );
将是完美的-但不起作用,因为我仍然可以传递各种属性中的任何内容。
各位,有什么建议吗?感谢您的时间:-)
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选择不同的版本。