Canva embed code works with blog posts but not LifterLMS quizzes.

[dominiquemariano]

Reproduction Steps

1. Create a new post and use the Custom HTML block to embed the Canva embed code below.
2. Create a LifterLMS quiz and paste the Canva embed code below in the Description field of the quiz's General Settings.

<div style="position: relative; width: 100%; height: 0; padding-top: 100.0000%;
 padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden;
 border-radius: 8px; will-change: transform;">
  <iframe loading="lazy" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0;margin: 0;"
    src="https:&#x2F;&#x2F;www.canva.com&#x2F;design&#x2F;DAF-jiwqrl0&#x2F;O0oi5A-lhobvd3-jS5GtAA&#x2F;view?embed" allowfullscreen="allowfullscreen" allow="fullscreen">
  </iframe>
</div>
<a href="https:&#x2F;&#x2F;www.canva.com&#x2F;design&#x2F;DAF-jiwqrl0&#x2F;O0oi5A-lhobvd3-jS5GtAA&#x2F;view?utm_content=DAF-jiwqrl0&amp;utm_campaign=designshare&amp;utm_medium=embeds&amp;utm_source=link" target="_blank" rel="noopener">Design</a> by Nick

Expected Behavior

Both the blog post and the quiz should correctly display the output in the front-end.

Actual Behavior

Only the blog posts displays the correct output on the frontend, as you can see in this screenshot. The quiz does not display it correctly on the frontend, as you can see in this other screenshot

Why this happens

The style attribute of the <iframe> is being stripped away by the quiz. Blog posts do not do this in the block editor (Gutenberg).

This issue has been recreated:

• Locally
• On a staging site
• On a production website
• With only LifterLMS and a default theme

[ideadude]

My guess is we are escaping the content in the quiz descriptions. If we intend for admins to be able to embed any HTML, including iframes, and possibly scripts, we can update our code to use wp_kses_post or similar sanitization vs the likely stricter sanitization we are doing here.