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

Question

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

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

Если вы добавите SVG в свой edit а также save функции с JSX:

<svg strokeLinecap={"round"}/>

Вывод редактора предварительного просмотра в порядке:

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

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

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

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

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

Answer 1

У меня такая же проблема в июне 2021 года. Ответ @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 );

Answer 2

То, что вы хотите сделать, это использовать собственный WordPress Гутенберг SVG Составная часть

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