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.
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.
Question
Is there a way to force wpautop
to run on content that already has another wrapper?