7.0: New Year's Update


#1

Happy New Year, everyone! :partying_face:

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.

Contextual Toolbars

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:

image

And the table toolbar:

Panels

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.

Images:

Links:

Backgrounds

You can edit background images and colors, including select options for background sizing and repeating! :tada:

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>

File Browser

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:

Image Search

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!

Blocks

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.

(The syntax for blocks has been updated! See 7.0: Blocks Update for more information.)

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.

What’s Left

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!


A way for clients to easily add and delete navigation
7.0: Blocks Update
Surreal CMS 7.0
#2

Can’t wait for this release! Always struggle for an appropriate cms for lower end clients who want blogging and photo gallery capabilities.


#3

Looks great Cory, looking forward to it!


#4

Looks great! Can you estimate a release Date?


#5

I’m trying hard for next month, but there’s still a lot to do. I’ll post another update with my progress soon.


#6

Ok, here’s where things are at as of today:

The App

We are feature complete! :partying_face:

Also, I finished up the new admin panel today. This is a behind the scenes section of that app that you guys don’t see, but it plays a critical part for support and troubleshooting.

Here’s what’s left:

  • Scheduled tasks need to be setup
  • A new demo page (or two) needs to be created for on-boarding purposes (this is the “demo site” new users see when they first sign up — it helps them get familiar with how the CMS works)

Marketing Website

Next comes the new marketing website. The current one is a few years old and needs an overhaul. I’ll be working on the new website over the next week or so. This includes updated documentation and tutorials, so it’s a bit of work. :sweat_smile:

Upgrade Scripts

Since 7.0 runs on an entirely different stack, special scripts need to be created to automate upgrading from the old version to the new version. This isn’t anything new. The last major upgrade was a few years ago and it went smoothly. I expect a the same experience this time around.

Once the new version is available, I’ll send out emails and you’ll also see a banner inside the dashboard. Clicking it will take you through a few pages explaining what’s new and what’s changed, then you can run the upgrade.

You will not have to modify your sites or pages for them to work with 7.0. I’ve put a lot of effort into making the new version backwards compatible, so everything will just work. :wink:

Ok, that’s it for now! I’ll post again as the launch gets closer. :man_technologist:t2: