fix(icons): 图标卡片支持内置 SVG 与自定义 SVG,修复前端图标不显示
顶部多功能组件的图标卡片只能显示 FA5 图标。后台「选择图标 → 内置 SVG」
页签写入的是 zibsvg-{key},但渲染器把它拼成了
<i class="fa fas fa-zibsvg-hot">,浏览器没有这个名字的字形,前端图标位置
空白。
根因:aksrt_icon_cover_card() 与 aksrt_icon_card() 只实现了 FA 类名一条
路径,未走全站统一渲染器 aksrt_icon_markup();函数内那条用于跳过前缀拼接的
判断用的是 aksrtsvg-(任何选择器都不会产生的废弃前缀),形同虚设。
- 新增 aksrt_card_icon_inner() 统一解析器,横版 / 竖版卡片均委派给它,
FA5 类名、zibsvg- 内置图标、customsvg- 内联 SVG 三种格式统一渲染
- aksrt_icon_card() 的 icon 值改用 aksrt_sanitize_icon_value(),
原 sanitize_text_field 会把 customsvg-<svg> 的标签整段剥成裸前缀
- SchemaProvider::sanitize_field_value() 补 type === 'icon' 分支:
分组 / 重复器内的图标子字段原先落到 sanitize_text_field,
header_slider_card_option.cards[].icon 的 customsvg- 在保存时即被剥空
- PageConfigMetaBox::sanitize_card_options() 同步改用图标净化
- aksrt_svg_kses_tags() 补齐 circle / ellipse / rect / polygon / line,
与选择器端 cleanSvg() 的接受范围对齐;原先粘贴以 <circle> 为主的图标
会在 kses 阶段被静默剥离形状
- icon-card-contract 新增 3 项契约
内置 SVG 的 sprite 由 svg-icon.js 每页注入 body,无需额外入队。
未写数据迁移;已存量的 zibsvg- / FA 值无需转换,customsvg- 存量值本就被
旧净化逻辑破坏,不在此次范围内。
验证:node --test tests/widget-system/*.test.cjs 311 项全部通过(原 308 +
新增 3);php -l 4 个改动文件通过;隔离 PHP 探针覆盖 9 种取值并走完整
「保存净化 → 前端渲染」链路,修复前 / 后输出逐项对比。
This commit is contained in:
@@ -69,3 +69,58 @@ test('header icon-card defaults use bundled Font Awesome icons', () => {
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
test('icon card renderers route every picker format through the shared icon renderer', () => {
|
||||
const helper = read('inc/helpers/aksrt-icon-cards.php');
|
||||
|
||||
// One resolver owns the icon-value contract for both card shapes.
|
||||
assert.match(helper, /function aksrt_card_icon_inner\(string \$value, string \$extra = ''\): string/);
|
||||
assert.match(helper, /if \(function_exists\('aksrt_icon_markup'\)\) \{\s*return aksrt_icon_markup\(\$value, \$extra\);/s);
|
||||
|
||||
// Both renderers must delegate: emitting a bare FA class string produced
|
||||
// `<i class="fa fas fa-zibsvg-hot">`, i.e. an invisible glyph, for the two
|
||||
// SVG formats the admin picker can store.
|
||||
assert.match(helper, /\$icon_inner = aksrt_card_icon_inner\(\$icon_fa, 'em09'\);/);
|
||||
assert.match(helper, /\$icon_inner = aksrt_card_icon_inner\(\$icon_fa\);/);
|
||||
|
||||
// The picker prefixes must drive the SVG branches, and the stale
|
||||
// `aksrtsvg-` prefix (never emitted by any picker) must be gone.
|
||||
assert.match(helper, /str_starts_with\(\$value, 'zibsvg-'\) \|\| str_starts_with\(\$value, 'customsvg-'\)/);
|
||||
assert.doesNotMatch(helper, /aksrtsvg-/);
|
||||
assert.doesNotMatch(helper, /'fa fas fa-'\s*\.\s*\$icon_fa/);
|
||||
assert.doesNotMatch(helper, /<i class="'\s*\.\s*esc_attr\(\$icon_fa\)\s*\.\s*' em09"/);
|
||||
});
|
||||
|
||||
test('custom SVG payloads survive the admin save path for nested icon sub-fields', () => {
|
||||
const provider = read('src/Admin/SchemaProvider.php');
|
||||
const metaBox = read('src/Admin/PageConfigMetaBox.php');
|
||||
|
||||
// header_slider_card_option.cards[].icon is a group sub-field: plain
|
||||
// sanitize_text_field stripped "customsvg-<svg>" down to a bare prefix.
|
||||
assert.match(provider, /if \(\$type === 'icon'\) \{\s*return function_exists\('aksrt_sanitize_icon_value'\)/s);
|
||||
assert.match(metaBox, /'icon'\s*=>\s*function_exists\('aksrt_sanitize_icon_value'\)/);
|
||||
assert.doesNotMatch(metaBox, /'icon'\s*=>\s*sanitize_text_field\(\(string\) \(\$card\['icon'\]/);
|
||||
});
|
||||
|
||||
test('inline custom SVG shapes survive the kses allow list', () => {
|
||||
const icons = read('inc/helpers/aksrt-icons.php');
|
||||
const start = icons.indexOf('function aksrt_svg_kses_tags');
|
||||
const ksesBody = icons.slice(start, icons.indexOf('endif;', start));
|
||||
|
||||
// Any element the picker's cleanSvg() lets through must also be accepted
|
||||
// here, otherwise the pasted icon is saved without its shapes.
|
||||
const pickerFiles = ['assets/js/admin-icon-picker.js', 'assets/admin/src/utils/icons.js'];
|
||||
for (const file of pickerFiles) {
|
||||
assert.match(
|
||||
read(file),
|
||||
/\/<path\|<use\|<g\\b\|<circle\|<rect\|<polygon\|<ellipse\|<line\/i/,
|
||||
`${file} must keep its cleanSvg accept test in sync with the PHP allow list`,
|
||||
);
|
||||
}
|
||||
|
||||
for (const tag of ['circle', 'ellipse', 'rect', 'polygon', 'line', 'path', 'g', 'use']) {
|
||||
assert.match(ksesBody, new RegExp(`'${tag}'\\s*=>`), `aksrt_svg_kses_tags() is missing <${tag}>`);
|
||||
}
|
||||
assert.match(ksesBody, /'viewbox'/);
|
||||
assert.match(ksesBody, /'xlink:href'/);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user