Question

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

当然，我在一个更复杂的示例中遇到了这个问题，但这是最简单的重新创建方法：

如果您通过JSX将SVG添加到edit和save函数中，则：

<svg strokeLinecap={"round"}/>

编辑器预览输出很好：

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

但是save对此有特殊之处：

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

它会松开单词之间的连字符，因此会破坏所有多单词属性。然后浏览器只需忽略它们。

这是一个已知问题吗？古登堡（Gutenberg）是否有臭虫票？有解决方法吗？还是我做错了什么？

Answer 1

您要使用的是wordpress gutenberg自己的SVG Component

import { G, Path, SVG, Rect, Polygon } from '@wordpress/components';
<svg strokeLinecap={ "round" }/>

Answer 2

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

既然问题问的是这是否是一个已知问题，如果有错误报告，我会回答说我发现了以下最近未解决的问题并添加了评论：

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

希望能帮助他人：如果您遇到这个希望找到解决方案或变通方法的 SO，我认为您的答案可能在于 WordPress 使用过滤器修改行为的广泛能力。

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

编辑：

以下是使用过滤器完成的解决方法的快速示例，其中仅更正了无效的 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 上挂钩过滤器：

// 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 );

古腾堡在保存时中断svg

2 个答案: