Troubleshooting issues with HTML blocks in the new article editor

<p>The new article editor may work in a different way when you paste or edit content from tools such as Google Docs, Notion, or Microsoft Word. You may see unwanted styles or uneditable HTML or code blocks.</p><p>This article includes these topics:</p><div style="margin-bottom: 20px; text-align: right;">
<button id="master-toggle" class="btn fw-semibold text-dark" data-action="expand" style="background-color: #DEF991; border: none; outline: none; border-radius: 7px; padding: 10px 20px; font-size: 15px; transition: background-color 0.2s ease;" onmouseover="this.style.backgroundColor='#cbef6d'" onmouseout="this.style.backgroundColor='#DEF991'">
Expand all tabs
</button>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const toggleBtn = document.getElementById('master-toggle');

toggleBtn.addEventListener('click', function () {
const action = this.getAttribute('data-action');
const headers = document.querySelectorAll('.accordion');

headers.forEach(header => {
const isActive = header.classList.contains('active');
const panel = header.nextElementSibling; // Grabs the corresponding .panel container

if (action === 'expand' && !isActive) {
// Open it by simulating a standard click
header.click();
} else if (action === 'collapse' && isActive) {
// Close it by simulating a standard click
header.click();
}
});

// Flip button text and states
if (action === 'expand') {
this.setAttribute('data-action', 'collapse');
this.textContent = 'Collapse all tabs';
} else {
this.setAttribute('data-action', 'expand');
this.textContent = 'Expand all tabs';
}
});
});
</script><div class="accordion"><h3 id="h_01KA8ZASQP10GKD1GAP0XB6Z97">Why HTML issues happen</h3></div><div class="panel">
<p>HTML block issues happen because the old and new article editors use different systems that handle HTML. The new editor creates cleaner, more structured HTML, so it does not always support custom HTML from older articles.</p>
<p>If your article has custom HTML that the new editor cannot support, the editor puts the content in an HTML block. This helps the new editor read and show your code the right way. Without this block, the editor might display your article with layout or format problems.</p>
<p>This image shows what you see when you open an affected article in the new editor. The content stays in an HTML block, but you can still preview and publish the article.</p>
<p><img class="wysiwyg-image-resized" style="aspect-ratio: 1864/1486; width: 58.5%;" src="https://support.zendesk.com/hc/article_attachments/9966242167194" width="1864" height="1486"></p>
</div><div class="accordion"><h3 id="h_01KAE9KDZS13SY8J5AFDTQEV8X">Paste without unwanted styles</h3></div><div class="panel">
<p>To paste content from sources such as Google Docs, Notion, or Microsoft Word without unwanted styles:</p>
<ol>
<li data-list-item-id="e3d30f46ef94a0f74003e22081f972875">Use your browser's <strong>Paste as plain text</strong> feature:<ul>
<li data-list-item-id="ec4e49d66000aea3d44fae2163ee8201e">In <strong>Microsoft Edge</strong>, right-click in the editor and select <strong>Paste as plain text</strong>
</li>
<li data-list-item-id="e70f96aee5e1231ed13ee3c79e69b87a2">In <strong>Google Chrome</strong>, right-click and select <strong>Paste and match style</strong>
</li>
</ul>
</li>
<li data-list-item-id="e824cc2db37d20c34630e72a00da4c4bd">If you already pasted content with styles, select <strong>Source code</strong> from the toolbar<br><img class="wysiwyg-image-resized" style="aspect-ratio: 1316/648; width: 51.59%;" src="https://support.zendesk.com/hc/article_attachments/10569901678490" alt="HTML code editor in article.png" width="1316" height="648">
</li>
<li data-list-item-id="ee1ca7c10a2704e2ba859b07a72e77176">Click <strong>Actions</strong> &gt; <strong>Clean up styles</strong> to remove inline styles. Note that some basic styles, such as <strong>bold</strong>, may remain.</li>
<li data-list-item-id="ec49e16f25463792769d665b723350ea5">Reapply the styles you want. Use the toolbar to apply bold or italic, set a header level, or add bullets as needed.</li>
<li data-list-item-id="eca1dc18a99040d205b2a2e61944e76ff">If you migrate content often, paste it into a plain text app, such as Notepad, before you move it into the new article editor to remove all styles</li>
</ol>
</div><div class="accordion"><h3 id="h_01KA8ZASQRYD3JDMRFETFE4M5B">Avoid and edit HTML blocks</h3></div><div class="panel">
<p>After you migrate or paste, some tables or formatted blocks may be editable only as HTML or code blocks. This can occur when content includes unsupported HTML or deprecated attributes. For example, the height attribute in <code>&lt;td&gt;</code> tags. The new article editor enforces stricter HTML support than previous editors, which can isolate some blocks as HTML or code blocks.</p>
<p>To avoid a <code>&lt;zd-html-block&gt;</code> wrapper:</p>
<ul>
<li data-list-item-id="ea424ef3cb1a4ce71c2fe4dfd4ad70721">Before you copy from Notion or similar tools, make sure the content does not include unsupported HTML or code elements</li>
<li data-list-item-id="e1a632c2e28b08a483f5c6ef9fbfe6e6e">Paste as plain text to avoid unsupported code that triggers automatic isolation</li>
<li data-list-item-id="e902fc9b7c054d0c95806f12d48191c3e">Use the new article editor's built-in tools after you paste to apply styles as needed</li>
</ul>
<p>To convert HTML blocks for visual editor use:</p>
<ol>
<li data-list-item-id="ed6c38dbf18035bed2c35078fce234196">Click the HTML block in the new article editor</li>
<li data-list-item-id="eb05e03f091bdc22828e2b792662bd610">Select <strong>Unlink</strong> to remove unsupported markup. The editor shows which markup it will remove.<br><img class="wysiwyg-image-resized" style="aspect-ratio: 1562/322; width: 72.2%;" src="https://support.zendesk.com/hc/article_attachments/9957804182298" width="1562" height="322">
</li>
<li data-list-item-id="eb51dbc714cecd66f84f7e362ab8d6fe8">Review and confirm the changes. You can then edit the block in the visual editor.</li>
</ol>
<p>If you apply bold or other styles to text in a formatted text block, the block can turn into an HTML or code block. Use <strong>Unlink</strong> to return it to visual editor mode.</p>
<div class="p"><div class="note attention">
<span class="attentiontitle">Attention:</span> After you save, the block may revert to a code block. This is a known limitation.</div></div>
</div><div class="accordion"><h3 id="h_01KAE9CNW22ZKKBRYDTH6FFMVY">Edit the source code in the HTML block</h3></div><div class="panel">
<div id="topic_hld_vlq_hgc" aria-labelledby="ariaid-title6"><div>
<p>If you know HTML and need to make minor edits to an affected article, such as text edits, you can use the HTML block editor.</p>
<p>You can <a href="https://support.zendesk.com/hc/en-us/articles/6739380623770" target="_blank" rel="noopener noreferrer">edit code within an HTML block</a> to change the content and keep the protective HTML block in the article. When you use this option to edit content and apply your changes within the HTML block editor, your updates are saved and visible in all articles and content blocks that contain the HTML block. You do not need to republish the articles for the changes to appear.</p>
<p><img class="wysiwyg-image-resized" style="width: 84.27%;" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/HTMLblock-source-code-edit.png" width="450" id="topic_hld_vlq_hgc__image_tkf_m4d_hgc"></p>
</div></div>
<div class="p"><div class="note attention">
<span class="attentiontitle">Attention:</span> You must be familiar with HTML code to use this option, since you will make all edits in the source code editor. Remember that when you update content in an HTML block and apply your changes, it automatically appears in all published articles.</div></div>
</div><div class="accordion"><h3 id="h_01KA8ZASQXSW9JNMR34Q3ZVPHY">Limitations and best practices</h3></div><div class="panel">
<ul>
<li data-list-item-id="e89074af8d6b6d45f436c0acad6d3b4e0">Complex formats, such as accordions or tabs that use custom HTML or JavaScript, may not be fully supported in the visual editor and may require HTML mode or simpler content</li>
<li data-list-item-id="e422321cfaba3dc70d6216853a8e7036a">Use only supported HTML and styles. Prefer inline styles, for example, <code>style="height: 50px;"</code>, over deprecated attributes.</li>
<li data-list-item-id="e61ebb2d417ad15f805829aab114ed851">Review pasted content for unwanted styles or HTML blocks every time before you publish</li>
<li data-list-item-id="ea3258bf6af0b59cc031d662edea1b516">Use the editor's preview feature to check how your article looks to end users</li>
</ul>
<p>Contact <a href="https://support.zendesk.com/hc/en-us/articles/4408843597850-Contacting-Zendesk-Customer-Support" target="_blank" rel="noopener noreferrer">Zendesk Customer Support</a> for further help.</p>
</div>