Lockables

Lockables give you the power to lock elements, making only certain things inside of them editable. This is a great way to preserve the structure of complex markup, especially in repeatables or blocks.

Lockables can only be placed inside block regions and inline regions. To define a lockable, add the cms-lock class to any element.

<div id="content" class="cms-editable">
  <!-- This is editable -->
  <p>Lorem ipsum dolor...</p>

  <!-- But this is not -->
  <p class="cms-lock">You can't edit this.</p>
</div>

In this example, the second paragraph will be locked, or not editable. However, by design, lockables can still be deleted.

Unlocking Elements

Lockables are pretty useful on their own, but it would be even more useful if we could unlock certain things inside to make them editable. This can be done with the cms-unlock class.

Consider this markup of a blog post preview.

<div id="content" class="cms-editable">

  <!-- Lock the post container -->
  <div class="post cms-lock">

    <!-- Unlock the title -->
    <h3 class="post-title cms-unlock">
      Post Title
    </h3>

    <p class="post-author">
      Written by
      <!-- Unlock the name -->
      <span class="cms-unlock">John Doe</span>
    </p>

    <!-- Unlock the excerpt -->
    <p class="post-excerpt cms-unlock">
      This is an excerpt...
    </p>
  </div>

</div>

This example is more complex, but look closely. The post container has the cms-lock class which locks the entire element. Then, three elements inside of it have the cms-unlock class. When you edit this page, you'll be able to change the title, the author's name, and the excerpt, but you won't be able to change the structure of the post <div> or anything else inside it.

As you can see, lockables are a pretty powerful tool, and even more so when you combine them with repeatables and blocks.