7.0: Blocks Update


#1

As you may have heard, “Snippets” will become “Blocks” in 7.0. In order to maintain 100% backwards compatibility, I’ve changed the way blocks will work from what I previously proposed.

I had posted earlier that the blocks syntax will look like this:

<div class="cms-block">
  <h2 class="cms-block-content">This heading is editable.</h2>
  <p>This paragraph is not editable.</p>
</div>

This would effectively destroy backwards compatibility, because by default the cms-block element would not have been editable, whereas snippets are.

A more flexible approach (that also comes with easier to remember class names) builds off the uneditable feature that exists in the current version.

By default, blocks will act just like snippets do, but you’ll be able to use the new cms-disable and cms-enable classes to control what users can edit. For example:

<div class="cms-disable">
  <h2 class="cms-enable">This heading is editable.</h2>
  <p>This paragraph is not editable.</p>
</div>

In this case, you’ll only be able to edit the heading, while the rest of the block retains its structure.

This gives you the flexibility to create blocks that serve as simple code snippets as well as more complex, structured elements :slight_smile:


Enable the client to add an editable div
#2

Something that I need fairly frequently is the ability to have editable elements (and non editable elements) inside a repeatable element. So for example a news page, containing repeatable articles - and inside the articles might be an editable heading, then an editable text div and an editable image.

Will this be possible in version 7?


#3

That’s exactly what this allows. The comments below describe how that might work:

<!-- Just a normal editable region -->
<div class="cms-editable">

  <!-- You can edit content as usual -->
  <p>Lorem ipsum dolor...</p>


  <!-- Now we'll create a repeatable region and disable editing on it using 
       cms-disable. This will preserve its structure. -->
  <div class="cms-repeatable cms-disable">

    <!-- You can't edit this icon, because we haven't enabled it -->
    <span class="icon">
      <i class="fa fa-star"></i>
    </span>

    <!-- You can edit this though, because it has the cms-enable class -->
    <h3 class="cms-enable">Amazing Things Coming</h3>

    <!-- ...and this -->
    <img class="cms-enable" src="surreal.jpg">

    <!-- ...and even this -->
    <article class="cms-enable">
      <p>Surreal CMS is getting more and more awesome with every release.</p>
    </article>
  </div>

</div>

Something I don’t see a lot of people take advantage of is using repeatable regions inside of blocks (formerly snippets), but it’s totally possible. In fact, you’ll be able to use cms-repeatable, cms-disable, and cms-enable in your blocks which makes this a pretty powerful feature.


#4

Hi Cory

Sounds great

Mark


#5

Will blocks/snippets work like true symbols in the new version? i.e. If you edit a block, will it automatically update each instance throughout the site?

That’s the only major issue I have with Surreal CMS currently. Templates and snippets are of limited use if you can’t edit them in just one place.


#6

Blocks are static by design, but you can use the new cms-include syntax if you need a specific element to be updated on every page.


#7

Okay, thanks for the reply. I look forward to trying it out.