Hide element when its content is empty

How to use it

1. Select a Section, Container, Block, Div, Basic text, Rich text or Heading element.
2. In the Content tab, tick Hide when empty.
3. View the page on the front end. If the element renders empty, Kiln leaves it out of the HTML.

Where it appears in Bricks

Section, Container, Block, Div, Basic text, Rich text, Heading, Content tab: Hide when empty.

What counts as empty

Kiln checks the element's rendered HTML, so it covers nested elements, dynamic data, shortcodes and templates. The element is empty when it holds none of these:

• Visible text. Spaces, non-breaking spaces and zero-width characters do not count as text.
• Media or interactive tags: img, picture, video, audio, iframe, svg, canvas, input, select, textarea, button, form, object, embed, hr, progress, meter and math.
• An icon-font icon (an i tag with a class).
• Any other Bricks element, such as an Icon, Map, Counter, Lottie or Form. Only Section, Container, Block, Div, Basic text, Rich text and Heading count as plain layout and text.

Scripts, styles, templates and noscript blocks do not count as content.

A background image or background video chosen in the element's own style settings keeps the element on the page. A background image that comes only from your own CSS does not.

How it works with query loops

• If the element has a query loop itself, Kiln never removes the loop element. It needs its markup for filters, AJAX pagination and live search.
• Each item of that loop is checked on its own. Tick Hide when empty on a looping Block and the items that render empty drop out.

Limits

• Front end only. In the builder the element stays visible and selectable.
• If Kiln cannot read the element's HTML (for example, a very large inline script), it keeps the element.

Settings

None. Turn the module on in Bricks > Kiln (it is on by default).

Requirements

Bricks 2.4 or newer.