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" />

catalogsearch_advanced

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" />

cms_page_view

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" />

cms_page_view_enable_cookies

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>

cms_static_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! =)


About Danijel Vrgoc

Frontend Developer

Danijel is a Frontend Developer who is in charge of breathing in life into design. Besides the world of web development, he loves american football, barbecue and a good stand up comedy.

Read more posts by Danijel / Visit Danijel's profile

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.