Using HTML blocks to edit code in content blocks

What's my plan?

Note: this feature is part of the early access program (EAP). For more details, check this article.

You can use HTML blocks to quickly access and edit complex HTML code in your content blocks. HTML blocks enable you to work with blocks of code that would otherwise not be editable within the content block editor, and to display them in a safe manner within your help center.

With HTML blocks, you can copy and paste unsupported code for HTML elements into the source code editor. The code is then wrapped in an HTML block and displayed within the content block editor. You can click the HTML block within the content block editor to open a source code editor that displays only the code for that block. You can use this focused view to manipulate the HTML for your selected content without scrolling through the source code for the entire content block.

When you update the content block, the HTML elements associated with the HTML block appear in all published articles that contain the content block. You can use HTML blocks to include any block of unsupported HTML code in your content blocks, including complex HTML scripts or elements such as tables of contents, accordions, tabs, or steppers.

This article contains the following sections:

• Creating HTML blocks
• Editing HTML blocks
• Removing HTML blocks

Creating HTML blocks

You can create an HTML block by either pasting a block of code into the content block source code, or by using a keyboard shortcut (cmd + option + h / ctrl + alt + h) to create an empty HTML block in the content block editor. Once created, you can access HTML block code from within the HTML block editor or the article source code editor.

Note: In order for HTML blocks to display in the browser, you must enable unsafe content. See Editing the source code of help center articles.

To create an HTML block

1. In the help center or Guide admin, create or edit a content block.
2. In the content block editor, click the source code icon () on the toolbar.
3. In the source code editor, create or edit the unsupported source code you want to use.

   

4. Click Apply to save the code and return to the content block editor. The unsupported code appears as an HTML block within the editor. You can click the HTML block to display additional options, or you can click and drag the block around the editor to move the element to a new location.

   

Editing HTML blocks

HTML blocks let you easily locate and work with the source code for that block. Instead of scrolling through the source code for the entire content block, you can access and edit the source code for the HTML block directly from the content block editor.

To edit an HTML block

1. Open the content block that contains the HTML block you want to edit in Edit mode.
2. Click the HTML block you want to edit to display the option icons, then select the edit icon ().

   The HTML block editor opens in edit mode.

   

3. Make any necessary changes in the HTML block editor.
4. Click Apply.

   Your updates are saved and visible in all articles that use the content block. You do not need to republish the articles for the changes to appear.

Removing HTML blocks

If you find that you no longer need an HTML block, you can remove it from the content block in which it appears. Removing HTML blocks from content blocks removes the HTML block immediately from all articles in which the content block appears.

To remove an HTML block

1. Open the content block that contains the HTML block you want to delete in Edit mode.
2. Click the HTML block you want to delete to expose the option icons, then select the delete icon ().

   The HTML block is removed from the content block.

3. Click Update.

   The HTML block is removed in all articles in which the content block appears.