How to comment out Sections in Oxygen

In Oxygen Slack, a user asks:

is there a way to “comment out a section in oxygenbuilder?

Setting display to none for a Section will not show it both in the Oxygen editor as well as the frontend. But a bigger issue is that all its actual HTML itself will still be output on the frontend.

We can use the recently added Shortcode Wrapper element and wrap Sections that should be “commented out” or “unpublished” in a custom shortcode that will simply not return anything thereby not outputting the Section on the frontend at all.

Step 1

Install and activate Code Snippets plugin.

Step 2

Go to Snippets > Add New.

Title: Shortcode to not output elements

Code:

add_shortcode( 'isempty', 'dont_output_this_element' );
function dont_output_this_element( $atts, $content = '' ) {
    return "";
}

Set it to run everywhere.

Step 3

In the Oxygen’s editor, open the Structure panel and select the Inner Content (or the top-most item) and add a Shortcode Wrapper (+ Add > WordPress).

Drag your Section that you wish to not show on the frontend inside the Shortcode Wrapper.

Select the Shortcode Wrapper and paste the following for the Full shortcode:

[isempty][/isempty]

That’s it!

This Section will now not be output on the frontend.

Note that empty markup similar to

<div id="nestable_shortcode-7-2" class="ct-nestable-shortcode"></div>

will be left behind in the frontend.

I have created a topic in the Feature Requests forum asking them to fix this here.

When you are ready to uncomment and “publish” your Section again, move it back to where it was out of the Shortcode Wrapper.

Reference: https://codex.wordpress.org/Shortcode_API#Enclosing_vs_self-closing_shortcodes