Wrap WYSIWYG content using custom HTML

This article will show you how to set up custom HTML wrapping element around “content” reference (but can be applied to any other reference in any other module). Let’s get started.

First of all, you need to set up the following folder structure:

app/design/frontend/your_namespace/your_theme/Magento_Cms/layout

Inside the layout folder, 3 XML files should be created:

• catalogsearch_advanced_index.xml – this file represents any module/controller/action route mapping (so in this case, this will be loaded when user visits /catalogsearch/advanced route in browser)
• cms_page_view.xml – this file will be loaded when any CMS page is opened, (for example, Homepage, About us, Customer Service…)
• cms_page_view_id_enable-cookies.xml – this file will be loaded only when specific page is opened in browser (in this case, “Enable Cookies” page). As a rule of thumb, the XML file should be named according to the following: cms_page_view_id_{{page-identifier}}.xml

Wrap using route-specific update

Paste the following code within body node in catalogsearch_advanced_index.xml:

<referenceContainer name="content" htmlTag="div" htmlClass="advancedsearch-class" htmlId="advancedsearch-id" />

Wrap using page-global update

Paste the following code within body node in cms_page_view.xml:

<referenceContainer name="content" htmlTag="div" htmlClass="wysiwyg-general-class" htmlId="wysiwyg-general-id" />

Wrap using page-specific update

Paste the following code within body node in cms_page_view_id_enable-cookies.xml:

<referenceContainer name="content" htmlTag="div" htmlClass="wysiwyg-specific-class" htmlId="wysiwyg-specific-id" />

Wrap using static-block-specific update

All that needs to be done is create your custom block as a child node of the content reference, as shown in the following snippet:

<block class="Magento\Framework\View\Element\Text\ListText"
       name="block-container-wrapper-name"
       as="block-container-wrapper-id"
       htmlTag="div"
       htmlClass="block-class"
       htmlId="block-id">
    <block class="Magento\Cms\Block\Block" name="cms_test_block">
        <arguments>
            <argument name="block_id" xsi:type="string">test-block</argument>
        </arguments>
    </block>
</block>

There are two important things to mention about this article:

1. Be careful if you are setting up custom wrapping on both Page-global and Page-specific level, Page-specific values will override Page-global values
2. The list of allowed HTML tags is as follows: dd, div, dl, fieldset, main, header, footer, ol, p, section, table, tfoot, ul, nav

There is also a zip file containing the files used here, in case you need some help. If you have any questions, leave a comment below. Happy M2 coding! =)