Happy New Year, everyone! 🥳
I was really hoping to get a beta of 7.0 out by now, but I’m running a bit behind. Here’s where things are at and what you can expect in the coming months.
The editor is my favorite part of 7.0. It’s absolutely stunning.
Editor guides are back!
These visual indicators make what can be edited more obvious. They disappear while you’re editing, though, so you won’t be distracted. They also have different icons depending on the type of editable region.
The main toolbar has been replaced with contextual toolbars. Here’s what the standard toolbar for block-level elements looks like:
Only the options available for each region will be shown. Here’s the toolbar for inline regions:
Some toolbars appear when working with various elements. For example, the block/repeatable region toolbar:
And the table toolbar:
Obtrusive modals (dialogs) have been replaced with panels that slide in only when needed. They feel so natural and provide more space to work with than modals.
You can edit background images and colors, including select options for background sizing and repeating!
The syntax for this is simple:
<div class="cms-editable" type="background" style="background-image: url('image.png')"> <!-- You can nest other editable regions inside background regions --> </div>
The file browser has been redesigned to be less obtrusive and easier to use. When you click Browse, here’s what you’ll see:
Clients are only able to upload and modify files located in the upload folder that you choose. (No more root uploads!)
There’s also a tab so you can select pages for easy linking:
This is still in the works, but it’s a feature you and your clients are really going to appreciate. The file browser has a built-in image search powered by Unsplash! You’ll soon have access to hundreds of thousands of high-quality, images to use in your designs, completely free of charge!
I was initially planning on allowing content boundaries, which would let you have blocks and editable regions inside them:
<div class="cms-boundary" id="my-boundary"> <div class="cms-block"> <img src="user.svg"> <span class="cms-editable">Bob Marley</span> </div> </div>
The idea was that you could define sections of the page where blocks can be added, reordered, etc. and your editable regions would be defined inside those blocks and boundaries. Unfortunately, this didn’t bode well with backwards compatibility and the syntax was confusing according to a number of users I talked to.
So I had to backpedal on the original concept of how blocks work, but I came up with an alternative that I’m very happy with. Now, the syntax for editable regions remains 100% the same:
<div class="cms-editable" id="my-region"> ... </div>
Blocks (currently known as “snippets”) can be inserted into any block-level content region. They 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>
A block’s content is not editable by default. This gives you complete control over the structure of your blocks. The
cms-block-content class is used to tell Surreal which parts of the block can be changed.
Note: You’ll see that I’m using the
cms-editable class instead of
editable. Don’t worry, the
editable class still works, but I recommend using the
cms- prefix for all editable and repeatable regions from now on.
I’m really happy with the new version of Surreal CMS so far. It’s shockingly good. I still have some backend work to do in terms of publishing, but most of what’s left is on the front end. I’m trying to wrap up what’s left of the editor, then I have a couple more views to finish up.
Remember, this is a huge release! It’s been rewritten using a completely different stack than what’s powered Surreal for the last 10 years. Literally every piece of code has been rewritten from scratch.
I appreciate your patience and your patronage as I work to finish up 7.0!