WordPress wpautop Not Working Inside Wrapper

Background

I am extending TinyMCE in the WordPress visual editor, and have added a button to wrap selected content in <section></section>, which is used on the front-end of my theme for a hero element.


Problem

When I wrap text inside <section> tags, wpautop stops running. The <p> tags aren’t added at all, which breaks things when the selection is multiple paragraphs worth.

Read More

Example:

This text is in the Text editor (not visual editor).

<section>This is paragraph one. This is paragraph one.
This is paragraph two. This is paragraph two.</section>

On the front end of the site, it should become:

<section><p>This is paragraph one. This is paragraph one.</p>
<p>This is paragraph two. This is paragraph two.</p></section>

No <p> tags are added though.

What I’ve Tried:

I’ve tried forcing the issue by putting in breaks myself, but they all just get removed.

var output = '<section><article>' + text + '</article></section>';
var output = '<section><article><p>' + text + '</p></article></section>';
var output = '<section><article><br>' + text + '</br></article></section>';
var output = '<section><article>n' + text + 'n</article></section>';
var output = '<section><article>nn' + text + 'nn</article></section>';

No matter what I try, the new lines are slowly destroyed.

enter image description here

Question

Is there a way to force wpautop to run on content that already has another wrapper?

Related posts