Attachments with MIME types that include a dot do not get a custom icon

[dotsam]

For example, an attachment with MIME type application/vnd.openxmlformats-officedocument.spreadsheetml.sheet gets the following classes:

• attachment-123
• file_application
• file_vnd.openxmlformats-officedocument.spreadsheetml.sheet

While the generated CSS selector is something like this:

.wp-block-downloadlist-list.iconset-dashicons .file_vnd.openxmlformats-officedocument.spreadsheetml.sheet:before {
    content: "\f495";
    font-family: "dashicons", sans-serif;
    font-size: 24px;
}

While the class that includes the "." is technically valid, the selector that's generated won't match it, as the browser will try and parse all the dots as a compound selector. To keep these class names but have the selector work, the dots in the class name would need to be escaped. I think ideally, the dots should not be used in the class names at all.

I've worked around this myself for now by replacing the dots with underscores via your filters, and then fixing them on the frontend by hoking the attribute_escape function:

/**
 * Convert dots to underscores in all mime types
 */
add_filters(
    ['downloadlist_dashicons_icons', 'downloadlist_bootstrap_icons', 'downloadlist_fontawesome_icons'],
    function ($dashicons) {
        return array_combine(
            str_replace(
                '.',
                '_',
                array_keys($dashicons)
            ),
            $dashicons
        );
    }
);

/**
 * Do the same conversion for the frontend output
 */
add_filter('attribute_escape', function ($safe_text, $text) {
    if (strpos($safe_text, 'vnd') === 0 && strpos($safe_text, '.') !== false) {
        return str_replace('.', '_', $safe_text);
    }

    return $safe_text;
}, 10, 2);

[threadi]

Thanks for the hint. I implemented a solution in #78 - will be in next release.