fix(icons): emit FA5 only and upgrade legacy FA4 icon values
The theme is FA5-only, but aksrt_icon_markup() prefixed bare glyphs with the FA4 style token, so stored icon-picker values rendered FA4 markup, and three runtime strings still carried the FA4 double-fa form (report modal header and submit button, comment report menu item). That left the navigation icon contract failing at 11/12. - aksrt_icon_markup() normalizes bare glyphs, legacy FA4 values and style-only values to "fa fas fa-<glyph>", keeping the FA5 brand family (fa fab) and trailing classes intact. - aksrt_normalize_icon_key() strips the legacy FA4 prefix so stored values resolve against the brand-icon catalog again. - report.js and the comment report item emit FA5 markup. - An icon-picker contract test locks the upgrade behaviour. Verification: 338 widget-system, 12 navigation, 28 admin and 13 front-submit contract tests pass; normalization also exercised against legacy, FA5 and brand inputs.
This commit is contained in:
+2
-2
@@ -80,7 +80,7 @@
|
||||
// 弹窗头：参考主题 edit-header 同构（关闭钮 + 红色警示徽标 + 标题）。
|
||||
html += '<div class="mb10 edit-header touch">';
|
||||
html += '<button type="button" class="close" data-aksrt-modal-close aria-label="关闭"><svg class="ic-close" aria-hidden="true"><use xlink:href="#icon-close"></use></svg></button>';
|
||||
html += '<b class="flex ac c-red"><span class="toggle-radius mr10 c-red"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i></span>' + escapeHtml(title) + '</b>';
|
||||
html += '<b class="flex ac c-red"><span class="toggle-radius mr10 c-red"><i class="fa fas fa-exclamation-triangle" aria-hidden="true"></i></span>' + escapeHtml(title) + '</b>';
|
||||
html += '</div>';
|
||||
|
||||
html += '<form class="aksrt-report-form dependency-box">';
|
||||
@@ -144,7 +144,7 @@
|
||||
// 底栏：参考主题 but-average modal-buts 双按钮。
|
||||
html += '<div class="but-average modal-buts">';
|
||||
html += '<button type="button" class="but" data-aksrt-modal-close>取消</button>';
|
||||
html += '<button type="button" class="but c-blue" data-aksrt-report-submit><i class="fa fa-check" aria-hidden="true"></i>确认提交</button>';
|
||||
html += '<button type="button" class="but c-blue" data-aksrt-report-submit><i class="fa fas fa-check" aria-hidden="true"></i>确认提交</button>';
|
||||
html += '</div>';
|
||||
html += '</form>';
|
||||
|
||||
|
||||
@@ -88,6 +88,8 @@ if (!function_exists('aksrt_normalize_icon_key')) :
|
||||
*
|
||||
* Examples: 'fa fab fa-github' | 'fa-github' | 'github' | 'weixin' → 'github' | 'wechat'
|
||||
*
|
||||
* Legacy FA4 values (a bare `fa` token followed by `fa-<glyph>`) are stripped too.
|
||||
*
|
||||
* @param string $name Raw icon key or FA class string.
|
||||
* @return string Short key (may be empty).
|
||||
*/
|
||||
@@ -97,8 +99,11 @@ function aksrt_normalize_icon_key(string $name): string {
|
||||
return '';
|
||||
}
|
||||
|
||||
// Strip the FA5 layout/style prefixes and glyph prefix.
|
||||
// Strip the FA5 layout/style prefixes, the glyph prefix and the legacy FA4
|
||||
// double-`fa` form (a bare `fa` token followed by `fa-<glyph>`). The site
|
||||
// ships FA5 only, but stored values may predate it.
|
||||
$name = preg_replace('/^fa\s+(?:fas|far|fab)\s+/i', '', $name);
|
||||
$name = preg_replace('/^fa\s+fa-/i', '', (string) $name);
|
||||
$name = preg_replace('/^(?:fas|far|fab)\s+/i', '', (string) $name);
|
||||
$name = preg_replace('/^fa-/i', '', (string) $name);
|
||||
$name = trim((string) $name, "- \t\n\r\0\x0B");
|
||||
@@ -299,9 +304,12 @@ if (!function_exists('aksrt_icon_markup')) :
|
||||
* Supported values:
|
||||
* - "fa fas fa-star" / "fa fab fa-weixin" — FA5 class string
|
||||
* - "fa-star" — bare glyph, rendered as solid FA5
|
||||
* - legacy FA4 string — double-`fa` form, upgraded to FA5
|
||||
* - "zibsvg-hot" — theme built-in SVG sprite key
|
||||
* - "customsvg-<svg …>" — inline user SVG markup
|
||||
*
|
||||
* Output is always FA5 — the legacy FA4 double-`fa` prefix is never emitted.
|
||||
*
|
||||
* @param string $value Raw stored value.
|
||||
* @param array|string $extra_classes Extra classes for the rendered element.
|
||||
* @return string Safe HTML, empty string for empty values.
|
||||
@@ -343,7 +351,13 @@ function aksrt_icon_markup(string $value, $extra_classes = []): string {
|
||||
return '<svg class="' . esc_attr($class) . '" aria-hidden="true"><use xlink:href="#icon-' . $key . '"></use></svg>';
|
||||
}
|
||||
|
||||
if (!str_contains($value, 'fa ') && str_contains($value, 'fa-')) {
|
||||
// 本站统一 FA5 输出：遗留 FA4 双 fa 前缀、裸字形 "fa-xxx" 与缺少 fa 前缀的
|
||||
// "fas/far/fab fa-xxx" 均归一为 "fa fas fa-xxx"（末尾附加类名原样保留）。
|
||||
if (preg_match('/^fa\s+fa-/i', $value)) {
|
||||
$value = preg_replace('/^fa\s+/i', 'fa fas ', $value, 1);
|
||||
} elseif (preg_match('/^fa-/i', $value)) {
|
||||
$value = 'fa fas ' . $value;
|
||||
} elseif (preg_match('/^(?:fas|far|fab)\s+fa-/i', $value)) {
|
||||
$value = 'fa ' . $value;
|
||||
}
|
||||
return '<i class="' . esc_attr($value . $extra) . '" aria-hidden="true"></i>';
|
||||
|
||||
@@ -178,7 +178,7 @@ if (!function_exists('aksrt_get_comment_report_html')) :
|
||||
'target_avatar' => get_avatar_url((int) $comment->user_id > 0 ? (int) $comment->user_id : 0, ['size' => 40]) ?: '',
|
||||
]);
|
||||
|
||||
return '<li><a class="comment-report-link" href="javascript:;" data-aksrt-report="' . esc_attr((string) $report_payload) . '"><i class="fa fa-exclamation-triangle mr10 fa-fw c-red" aria-hidden="true"></i>' . esc_html__('举报', 'aksrt') . '</a></li>';
|
||||
return '<li><a class="comment-report-link" href="javascript:;" data-aksrt-report="' . esc_attr((string) $report_payload) . '"><i class="fa fas fa-exclamation-triangle mr10 fa-fw c-red" aria-hidden="true"></i>' . esc_html__('举报', 'aksrt') . '</a></li>';
|
||||
}
|
||||
endif;
|
||||
|
||||
|
||||
@@ -127,6 +127,18 @@ test('nav menu icons render every format without legacy fa-prefix mangling', ()
|
||||
assert.doesNotMatch(helper, /'<i class="' \. esc_attr\(\$icon_class\)/, 'no raw i-tag bypassing the unified helper');
|
||||
});
|
||||
|
||||
test('icon markup upgrades legacy FA4 values to FA5 and never emits the FA4 form', () => {
|
||||
const helper = read('inc/helpers/aksrt-icons.php');
|
||||
// Bare glyph, legacy double-fa value and style-only value all normalize to FA5 solid.
|
||||
assert.match(helper, /preg_match\('\/\^fa\\s\+fa-\/i', \$value\)/, 'legacy double-fa value is detected');
|
||||
assert.match(helper, /preg_replace\('\/\^fa\\s\+\/i', 'fa fas ', \$value, 1\)/, 'legacy double-fa value upgrades to FA5');
|
||||
assert.match(helper, /\$value = 'fa fas ' \. \$value;/, 'bare glyph gets the FA5 solid prefix');
|
||||
assert.match(helper, /preg_match\('\/\^\(\?:fas\|far\|fab\)\\s\+fa-\/i', \$value\)/, 'style-only value gets the fa token');
|
||||
// Key normalization strips the same legacy form, otherwise stored values miss the
|
||||
// brand-icon catalog and the picker shows an unresolvable key.
|
||||
assert.match(helper, /preg_replace\('\/\^fa\\s\+fa-\/i', '', \(string\) \$name\)/, 'icon keys normalize the legacy FA4 form');
|
||||
});
|
||||
|
||||
test('brand icons render despite the zibll-legacy fa-fab double prefix', () => {
|
||||
const rule = /\.fa\.fab\{font-family:"Font Awesome 5 Brands";font-weight:400\}/;
|
||||
for (const file of ['assets/css/main.css', 'assets/css/admin-icon-picker.css', 'assets/admin/src/style.css']) {
|
||||
|
||||
Reference in New Issue
Block a user