WordPress *strips* some inline CSS directives from my posts

  • squeegily

    (@squeegily)


    5 years, 4 months ago

    I’m developing a website with WordPress.

    In some cases, I would like to apply ad-hoc CSS to elements in a given post.

    Most CSS directives (background-color, font-family) are saved and delivered in my post exactly as I would like, and even survive switching back to the Visual Editor.

    However, some directives (white-space, outline) appear to be being purged from my code, even if I never switched back to the Visual Editor.

    Directives in the latter category are just silently removed from my style="…" attributes whenever the Save Draft, Publish, or Update buttons are clicked; they also do not even appear in the output html when clicking Preview.

    Swiching to the Classic Editor did not fix this.

    How can I direct WordPress not to forcibly remove certain inline CSS directives I intentionally put into a post?

    • This topic was modified 5 years, 4 months ago by squeegily.
Viewing 4 replies - 1 through 4 (of 4 total)
  • Dion

    (@diondesigns)

    5 years, 4 months ago

    You’ll need to use the safe_style_css filter to add to the list of allowed inline style attributes. Here’s some documentation:

    https://developer.ww.wp.xz.cn/reference/hooks/safe_style_css/

    The default list of allowed attributes is in the wp-includes/kses.php file (near the bottom).

    Thread Starter squeegily

    (@squeegily)

    5 years, 4 months ago

    1. So, I’ll need to write an add-on or site-specific code to do this?

    2. Is it possible to remove this safe_style_css filter only from posts, and not from comments?

    Dion

    (@diondesigns)

    5 years, 4 months ago

    Answers to your questions.

    1) You’ll need to add one line of PHP code to do what you want. It can be in your theme’s functions.php file, at the bottom of the wp-config.php file, or built into a very simple plugin. Here’s the line of code (not tested):

    add_filter('safe_style_css', function($atts){return array_merge($atts, ['white-space','outline']);});

    2) I have no idea, though to be clear, you would be adding a filter, not removing one.

    Moderator bcworkz

    (@bcworkz)

    5 years, 4 months ago

    2) Probably, it’s a matter of deciding whether to add your filter callback before it is actually used. You’d need to find an appropriate hook that fires before the filter is applied where the context of it being for post or comment is available.

    One possible (untested) approach would be to unconditionally add the filter as suggested. Then hook ‘preprocess_comment’ filter and remove the filter previously added. It’ll only be removed for comments, not anything else. While this is also a filter, you’re using it more like an action hook. Your callback here does need to return the passed data unchanged after removing the ‘safe_style_css’ callback.

    It’s difficult to remove anonymous callback functions like Dion had used. For easier removal, add a declared function name to the filter, like so:

    add_filter('safe_style_css', 'my_safe_styles');
function my_safe_styles( $atts ) {
  return array_merge( $atts, ['white-space','outline']);
}
Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘WordPress *strips* some inline CSS directives from my posts’ is closed to new replies.