title: Why are Custom Elements Breaking TinyMCE in WordPress?
body: <h1>Background</h1>
  
  <p>I am working on extending the visual editor inside WordPress, which is just TinyMCE:</p>
  
  <p><a href="https://i.stack.imgur.com/rbSNb.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rbSNb.gif" alt="enter image description here"></a></p>
  
  <p>I am using a structure of:</p>
  
  <pre><code>&lt;section&gt;
      &lt;controls&gt;&lt;/controls&gt;
      &lt;content&gt;
          &lt;column class="one-third"&gt;
          &lt;/column&gt;
          &lt;column class="two-thirds"&gt;
          &lt;/column&gt;
      &lt;/content&gt;
  &lt;/section&gt;
  </code></pre>
  
  <h1>Problem</h1>
  
  <p>The problem is that when I try to change text from <code>Paragraph</code> to <code>Header</code>, nothing happens:</p>
  
  <p><a href="https://i.stack.imgur.com/PHRfS.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PHRfS.gif" alt="enter image description here"></a></p>
  
  <h1>Problem Cause</h1>
  
  <p>I've tracked the issue down to using custom elements. When I change my code to use this structure, the problem goes away:</p>
  
  <pre><code>&lt;section&gt;
      &lt;controls&gt;&lt;/controls&gt;
      &lt;article&gt;
          &lt;div class="one-third"&gt;
          &lt;/div&gt;
          &lt;div class="two-thirds"&gt;
          &lt;/div&gt;
      &lt;/article&gt;
  &lt;/section&gt;
  </code></pre>
  
  <h1>Attempted Solutions</h1>
  
  <p>I have tried adding <code>column</code> and <code>content</code> to the <code>extended_valid_elements</code> and the <code>custom_elements</code> lists, and that has had zero effect.</p>
  
  <pre><code>$init['custom_elements'] = 'content[*],column[*]';
  $init['extended_valid_elements'] = 'content[*],column[*]';
  </code></pre>
  
  <h1>Question</h1>
  
  <p>Is there anything that pops out immediately that I'm doing completely wrong? Is there a way to get around this, or to force TinyMCE to treat my custom elements as valid?</p>