Space

The core of conditional rendering is a Space that you create. A Space consists of two things: a Component List & a Filter. Creating this Space allows us to group conditional content so that we can control the editing experience of components that might conditionally occupy an area of your page, but it also allows us to be very specific in how we run our tests. You can have an unlimited number of Space components on your site, each with their own unique filter, the only requirement is that the name of each Space component begins with clay-space. Examples of Space names might be:

• clay-space-first-wins
• clay-space-check-for-awesome
• clay-space-literally-anything

The last trick to a Space is that you only want to apply your Filter when not in edit mode. When you're not in edit mode this plugin will control the visibility of all the components in the Space, but first, we need to render all the components to the DOM. Finally, here's an example of a very basic Space's template written in Nunjucks:

<div data-uri="{{ _ref or _self }}" class="clay-space">
  {% if locals.edit %}
    {{ embed(state.getTemplate('clay-component-list'), content, state) | safe }}
  {% else %}
    {{ embed(state.getTemplate('clay-component-list'), content | myFilter, state) | safe }}
  {% endif %}
</div>

You can see that we're embedding a Component List in the Space and passing in the content Array. When not in edit mode the content array is being passed through a filter which is testing for some property, but in edit mode, all the components are getting rendered to the page.