WP strips CSS attributes

  • joncosby

    (@joncosby)


    6 years ago

    I’m trying to use styles to mask an email address with this code:

    .myemail:present{
    content: attr(data-domain) “\0040” attr(data-user);
    unicode-bidi: bidi-override;
    direction: rtl;
    }

    When the page is published, WP strips the domain and user attributes and I’m left with an ampersand displayed on the page. Is this another security feature? I’m not using anything but plain css. What’s going on? Please don’t tell me I need another plugin. I already have a different one for each task.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • catacaustic

    (@catacaustic)

    If you’re trying to add that in a post (or page) body, then that’s the wrong way to do it. The page editor is well-renowned for borking things like this.

    The good news is that you don’t need another plugin. You can use the CSS editor in the Customizer to add that CSS ino for the site, and it will keep it as it’s meant to be without any changes.

    Thread Starter joncosby

    (@joncosby)

    Thanks, but I’m using the customizer. Unfortunately, when I try to use this on the page above, it gets stripped when published:

    <span class="myemail" data-domain="seablues.net" data-user="blog"></span>
    is stripped to
    <span class="myemail"></span>

    leaving only the “@”.

    Moderator bcworkz

    (@bcworkz)

    Yes, WP strips tag attributes in content that are not whitelisted. There is probably a way to whitelist your attributes, but I recommend you implement the desired output by using the Shortcode API. The filter that strips attributes runs before shortcodes are expanded. Shortcodes are the go to work around for things you need that the editor tries to bork, so it’s a good thing to learn to use.

    You could add those specific data attributes (data-domain & data-user) to the allowed HTML using the wp_kses_allowed_html filter. For your specific example:

    
function my_allowed_html($allowed, $context) {
  
  $allowed['span']['data-domain'] = true;
  $allowed['span']['data-user'] = true;
  
  return $allowed;

}
add_filter('wp_kses_allowed_html', 'my_allowed_html', 10, 2);
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘WP strips CSS attributes’ is closed to new replies.