fix(frontend): remove duplicate select arrow and show the WordPress brand icon

This commit is contained in:
2026-10-06 13:23:05 +08:00
parent 962ab5c290
commit fe57022550
5 changed files with 38 additions and 4 deletions
@@ -236,7 +236,8 @@ test('frontend page edit icons follow the FA5 convention and the hint bar fades
assert.match(pageAdminSet, /<i class="fa fas fa-cog fa-spin" aria-hidden="true"><\/i>/);
assert.match(pageAdminSet, /<i class="fa fas fa-sliders-h mr10" aria-hidden="true"><\/i>/);
assert.match(pageAdminSet, /<i class="fa fas fa-chart-pie" aria-hidden="true"><\/i>/);
assert.match(pageAdminSet, /<i class="fa fas fa-wordpress" aria-hidden="true"><\/i>/);
// fa-wordpress lives in FA5's Brands family, so it needs `fa fab`, not `fa fas`.
assert.match(pageAdminSet, /<i class="fa fab fa-wordpress" aria-hidden="true"><\/i>/);
assert.match(pageAdminSet, /<i class="fa fas fa-check" aria-hidden="true"><\/i>/);
assert.match(pageAdminSet, /<i class="fa fas fa-times" aria-hidden="true"><\/i>/);
// No bare FA4 prefixes survive inside the feature markup.
@@ -246,6 +247,12 @@ test('frontend page edit icons follow the FA5 convention and the hint bar fades
for (const token of ['fa-cog', 'fa-sliders-h', 'fa-chart-pie', 'fa-wordpress', 'fa-check', 'fa-times']) {
assert.ok(fa5.includes(`.${token}:before`), `${token} is missing from Font Awesome 5.15.4`);
}
// Brand icons resolve through the Brands family: .fab must set that font-family,
// and fa-wordpress must sit in it, otherwise the glyph box renders empty.
const fabRule = fa5.match(/\.fab\s*\{[^}]*\}/);
assert.ok(fabRule, '.fab is missing from Font Awesome 5.15.4');
assert.match(fabRule[0], /Font Awesome 5 Brands/);
assert.match(fa5, /\.fa-wordpress::?before\s*\{[^}]*content:\s*"\\f[0-9a-f]+"/i, 'fa-wordpress has no glyph content in FA5');
// The transient label fades 2s after load over 1s (reference js/page-edit.js).
assert.match(pageAdminSet, /add_action\('wp_footer', \[self::class, 'enqueue_hint_script'\], 9\)/);
@@ -269,6 +276,23 @@ test('frontend page edit icons follow the FA5 convention and the hint bar fades
assert.match(rule, /right:\s*0?\.7em/);
assert.match(rule, /transform:\s*translateY\(-50%\)/);
}
// Select arrow: .form-select::before already paints the FA5 chevron, so the
// wrapper's <select> must reset appearance or Chrome draws the native arrow
// beside it. main.min.css is the runtime file PHP enqueues.
const mainCss = read('assets/css/main.css');
const mainMinCss = read('assets/css/main.min.css');
const arrowRule = /\.form-select select\s*\{[^}]*\}/s;
assert.match(mainCss, arrowRule);
assert.match(mainMinCss, arrowRule);
for (const css of [mainCss, mainMinCss]) {
const rule = css.match(arrowRule)[0];
assert.match(rule, /-webkit-appearance:\s*none/);
assert.match(rule, /-moz-appearance:\s*none/);
assert.match(rule, /(^|[^-])appearance:\s*none/);
}
// The chevron itself stays co-located so the pair is reviewed together.
assert.match(mainCss, /\.form-select::before\s*\{[^}]*content:\s*'\\f107'/s);
});
test('float toolbar config reaches the tinymce plugin with reference-context buttons', () => {