0

I am building a custom dragable interface where user can build form and drag elements. I am facing issue with inline style properties. The example html is given below

$content = <div style= "box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
background-color: rgb(236, 240, 241);
padding-top: 9px;
background-image: url(PATH/assets/img/leaves.png);"> </div>

Above you see, we have an to be saved as html in a custom table in WP db. Below is the code I am using to filter the content.

$allowed_tags = array(
            'div' => array(
                'class' => true,
                'style' => true,
                'id' => true,
                'draggable'=> true,
                'data-dragged-element-type' => true,
                'data-activationprops' => true,
                'data-visibilityprops' => true,
                'data-propdata' => true,
                'data-s-o-r-order' => true,
                'data-col_default_width' => true,
                'data-dragged-element-type' => true,
            ),
            'button' => array(
                'class' => true,
                'aria-label' => true,
                'type' => true,
                'style' => true,
                'data-propdata' => true,
            ),
            'a' => array(
                'href' => true,
                'class' => true,
                'target' => true,
                'data-type'=> true,
                'download' => true,
            ),
            'em' => array(
                'class' => true,
                'style' => true,
            ),
            'i' => array(
                'class' => true,
                'style' => true,
            ),
            'span' => array(
                'style' => true,
            ),
            'p' => array(
                'id' => true,
                'data-dragged-element-type' => true,
                'class' => true,
                'spellcheck' => true,
                'style' => true,
            ),
            // Add more tags and attributes as needed
        );

        // Allow specific styles within the style attribute
        $allowed_tags['div']['style'] = array(
            'width' => true,
            'right' => true,
            'z-index' => true,
            'min-width' => true,
            'background-image' => true,
            'background-color' => true,
            'box-shadow' => true,
            'color' => true,  // Allow color property
            'border' => true, // Allow border property
            'background' => true,  // Allow background property
        );

$this->content_post = wp_kses( $content, $allowed_tags );

When parced through this, I got this output, where all css properties with rgb or url() get removed.

<div style="padding-top: 9px;')"> </div>
3
  • 1
    I don't think wp_kses works that way. You can pass a list of allowed tags and attributes, but that's all. CSS properties are not attributes. Commented Dec 22, 2023 at 11:54
  • True. I used chatGPT which suggested passing style attributes further in the array. I have a whole set of HTML which has many types of attributes and inline style so what is any possible solution way to handle this.
    – iZeshan
    Commented Dec 22, 2023 at 13:26
  • You could check in the plugin code to see if there are hooks built in for filtering the HTML. If not, you can contact the author and ask for recommendations.
    – WebElaine
    Commented Dec 22, 2023 at 16:18

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.