Гутенберг ломает SVG на сохранение

Question

Кажется, что Гутенберг прерывает вывод SVG в блоке, но только для многословных атрибутов SVG и только при сохранении. Предварительный просмотр редактора работает нормально.

Конечно, я сталкивался с этим на более сложном примере, но вот самый простой из возможных способов воссоздания:

Если вы добавите SVG к своим edit и save функциям с помощью JSX:

<svg strokeLinecap={"round"}/>

Хороший вывод для предварительного просмотра:

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

но save делает что-то особенное:

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

Он теряет дефис между словами и поэтому ломает все атрибуты из нескольких слов. Браузеры просто игнорируют их.

Это известная проблема? Есть ли билет на ошибку в Гутенберге? Есть ли обходной путь? Или я что-то не так делаю?

Answer 1

То, что вы хотите сделать, это использовать собственный WordPress Gutenberg SVG Компонент

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