How to create a widget that accepts html input?

Question

I am new to web development and WordPress. Since, I am still learning, I want to achieve the results by doing my own research. And when it is not helping, only then I try to seek help. Well this may be the first time I am posting a question. Without wasting time, I will come to my question:

I have tried to put together a widget that shows the carousel. The carousel slides will have a Headline, some text below the headline and then a link formatted as button. All of this will be on the left side and on right side I will have an image.

Whatever I mentioned above was achievable with a little research. However, I want to submit the headline input as:

<h1>
    <span class="headline">
        <strong class="text-primary">Some heading starts here</strong>
        and ends here
    </span>
</h1>

Here is the code for widget input fields, which is working fine.

        <p>
            <label for="<?php echo $this->get_field_id('headline'); ?>">Headline</label><br />
            <input type="text" name="<?php echo $this->get_field_name('headline'); ?>" id="<?php echo $this->get_field_id('headline'); ?>" value="<?php echo $instance['headline']; ?>" class="widefat" />
        </p>

        <p>
            <label for="<?php echo $this->get_field_id('description'); ?>">Description</label><br />
            <textarea type="text" name="<?php echo $this->get_field_name('description'); ?>" id="<?php echo $this->get_field_id('description'); ?>" class="widefat"><?php echo $instance['description']; ?></textarea>
        </p>

        <p>
            <label for="<?php echo $this->get_field_id('link_title'); ?>">Link Title</label><br />
            <input type="text" name="<?php echo $this->get_field_name('link_title'); ?>" id="<?php echo $this->get_field_id('link_title'); ?>" value="<?php echo $instance['link_title']; ?>" class="widefat" />
        </p>

        <p>
            <label for="<?php echo $this->get_field_id('link_url'); ?>">Link URL</label><br />
            <input type="text" name="<?php echo $this->get_field_name('link_url'); ?>" id="<?php echo $this->get_field_id('link_url'); ?>" value="<?php echo $instance['link_url']; ?>" class="widefat" />
        </p>

        <p>
            <label for="<?= $this->get_field_id( 'image_uri' ); ?>">Image</label>
            <img class="<?= $this->id ?>_img" src="<?= (!empty($instance['image_uri'])) ? $instance['image_uri'] : ''; ?>" style="margin:0;padding:0;max-width:100%;display:block"/>
            <input type="text" class="widefat <?= $this->id ?>_url" name="<?= $this->get_field_name( 'image_uri' ); ?>" value="<?= $instance['image_uri']; ?>" style="margin-top:5px;" />
            <input type="button" id="<?= $this->id ?>" class="button button-primary js_custom_upload_media" value="Upload Image" style="margin-top:5px;" />
        </p>

I know that below code will not help in achieving the desired result.

        <p>
            <label for="<?php echo $this->get_field_id('headline'); ?>">Headline</label><br />
            <input type="text" name="<?php echo $this->get_field_name('headline'); ?>" id="<?php echo $this->get_field_id('headline'); ?>" value="<?php echo $instance['headline']; ?>" class="widefat" />
        </p>

So, I want to know my options to achieve the desired result.

Thanks!

Answer 1

Thanks to @TomJNowell for his advise on using textarea.

This is what I did to achieve what I wanted. It serves the purpose but I am not sure if it is the right way or not.

• I changed below input field:

        <p>
            <label for="<?php echo $this->get_field_id('headline'); ?>">Headline</label><br />
            <input type="text" name="<?php echo $this->get_field_name('headline'); ?>" id="<?php echo $this->get_field_id('headline'); ?>" value="<?php echo $instance['headline']; ?>" class="widefat" />
        </p>

To a textarea:

        <p>
            <label for="<?php echo $this->get_field_id('headline'); ?>">Headline</label><br />
            <textarea name="<?php echo $this->get_field_name('headline'); ?>" id="<?php echo $this->get_field_id('headline'); ?>" class="widefat" rows="5"><?php echo $instance['headline']; ?></textarea>
        </p>

And this is my update function:

    public function update( $new_instance, $old_instance ) {
        // processes widget options to be saved
        $instance = $old_instance;
        $instance['headline']   =   wp_kses_post($new_instance['headline']);
        $instance['description'] = strip_tags( $new_instance['description'] );
        $instance['link_title'] = strip_tags( $new_instance['link_title'] );
        $instance['link_url'] = strip_tags( $new_instance['link_url'] );
        $instance['image_uri'] = strip_tags( $new_instance['image_uri'] );
        return $instance;       
    }