reactjs - 古腾堡在保存时破坏了 svg

Question

Gutenberg 似乎在一个 block 中破坏了 SVG 输出，但仅针对多词 SVG 属性且仅在保存时。编辑器预览工作正常。

当然，我在一个更复杂的例子中遇到过这个问题，但这里是重新创建的最简单的可能方法:

如果使用 JSX 将 SVG 添加到 edit 和 save 函数中:

<svg strokeLinecap={"round"}/>

编辑器预览输出没问题:

<svg stroke-linecap="round"></svg>

但是 save 对它做了一些特别的事情:

<svg strokelinecap="round"></svg>

它丢失了单词之间的连字符，因此破坏了所有多单词属性。浏览器然后简单地忽略它们。

这是一个已知问题吗？古腾堡是否有此问题的错误票？有解决方法吗？还是我做错了什么？

Answer 1

我在 2021 年 6 月遇到了同样的问题。@niklas 的回答无效，@cngodles 的回答不适用于我的情况，问题仍然存在。

既然问题问的是这是否是一个已知问题以及是否有错误报告，我会回答说我发现了以下最近 Unresolved 问题并向其添加了评论:

https://github.com/WordPress/gutenberg/issues/30241

希望对其他人有所帮助:如果您遇到此 SO 希望找到解决方案或解决方法，我认为您的答案可能在于 WordPress 使用过滤器修改行为的广泛能力。

您始终可以过滤 the_content 以使用有效属性查找/替换错误属性。还有许多与 block 专门相关的过滤器选项:https://developer.wordpress.org/block-editor/reference-guides/filters/并且可以 Hook JS 中 block 的“保存”操作。

编辑:

这是一个使用过滤器完成的解决方法的快速示例，其中仅更正了无效的 clipRule、fillRule 和 viewBox 映射。根据需要添加您自己的规则以修复您的 SVG:

    public function fix_invalid_svg_attributes_filter( $block_content, $block ) {
        $replacement = str_replace('cliprule=', 'clip-rule=', $block_content);
        $replacement = str_replace('fillrule=', 'fill-rule=', $replacement);
        $replacement = str_replace('viewbox=', 'viewBox=', $replacement);
        return $replacement;
    }

在 render_block 上 Hook 过滤器:

// e.g. adding in functions.php or a simple plugin
add_filter( 'render_block', 'fix_invalid_svg_attributes_filter', 10, 3 );

// e.g. adding in a class-based plugin where the above filter function is defined as a method of a public class:
\add_filter( 'render_block', [ $this, 'fix_invalid_svg_attributes_filter' ], 10, 3 );