Plugin ArchitectureHooks UsageSafe Style CSS

The safe_style_css Hook in WPFTS

The safe_style_css hook is a WordPress filter used to define a list of allowed CSS properties that can be used in the HTML style attribute and within <style> tags when WordPress cleans HTML code using the wp_kses() function. WPFTS uses this filter to add the display property to the list of allowed properties.

What WPFTS Does When safe_style_css is Called:

  1. Adding the display property: The plugin adds the display property to the array of allowed CSS properties. This is necessary because sometimes HTML code generated by the plugin (e.g., in Smart Excerpts) contains this property, and without explicit permission, it will be removed by the wp_kses() function.

Important Functions Involved in Processing safe_style_css:

  • No specific WPFTS functions are used; the standard WordPress mechanism is employed.

How to Use This in Addon Development:

If your addon generates HTML code containing a style attribute or <style> tags, and you use the wp_kses() function to sanitize this code, you may need to add the necessary CSS properties to the allowed list using the safe_style_css filter.

Example:

// Add the "position" property to the allowed list.
add_filter( 'safe_style_css', 'add_position_to_safe_styles' );
 
function add_position_to_safe_styles( $styles ) {
  $styles[] = 'position';
  return $styles;
}

content_copyUse code with caution.PHP

Additional Notes:

  • The safe_style_css filter is used to enhance website security by preventing the use of potentially dangerous CSS properties in HTML code.
  • Adding the display property to the allowed list in WPFTS is likely related to using this property to show/hide elements in Smart Excerpts. However, a better solution would be to use CSS classes for this purpose, avoiding the need to modify the list of allowed CSS properties.

This example demonstrates how WPFTS uses the safe_style_css filter and may be helpful for addon developers.

Pre Get PostsSave Post