7.0 update – Variable builder, Interaction Layers, Figma synchronization, Global Gradient builder

7.0 update is our biggest update for the whole time of development. It will change the whole workflow of how you use the plugin and this update is the final point of our Productivity Stage of development. Let’s dive into mind-blowing new features.

CSS variables

We already implemented a class system. Now, let’s move further, and let me introduce variables. Now, you can add them in most of the fields, you can make variable components and you can select them. When do you need variables and when do you need classes? Both can be used for the same purposes. But my advice – classes is working more like components, because you can use them also for subselectors. While variables are for separate options.

For example, if you want to make a common design for Buttons – use classes. If you want to have common spacing for many elements – use Variables

Figma Stylebook creator

Interaction Panels

Now, you can build your own scripts and interaction logic between elements. In the video above you can find examples of how it can be used. We will discuss this topic more deeply in upcoming videos. In short – you can add a trigger to any element and you can add a chain of different actions

Grid Range Builder

Previously we added Visual builder for css grid which can help to change width and gap. Now, we also added option to build ranges visually. You can make complex grids. This will work not only for static block but also for Query Loop, Repeater field and dynamic/static galleries

Stylebook improvements

Now, you can add elements, colors, gradients, variables, classes. We also added clone of stylebook to sidebar panel in posts and FSE, so, you can easily change global parameters from sidebar. Click on G icon for this in top right corner

Complex shadow, borders

If you need more advanced borders or shadows, use Custom button

Tabs design was recreated

Previously tabs used our old panels, now, it’s migrated to new components. And now you can have much more control for tab style

Live YouTube player have become more popular so our video box now supports it

There are many other improvements under the hood, especially in the Admin panels design.


Typography presets will be removed. If you used them early, they will work on existed pages, but keep in mind that once you edit a block, you will lose the typography preset.

Currently, we recommend you investigate our class and variable system which are way more flexible. And for adding presets for default headings, it’s much more useful to use Stylebook Elements.

Also, don’t forget that reusable styles will be removed in a month. You can copy and save your existing reusable styles in Greenshift – Settings – CSS options if you plan to continue using them.

Copy this post’s content
Copy code below, and paste it (CTRL+V) in content of page