6.8 Update – Class first system, StyleBook, Slider parallax, API 3 migration

6.8 is a major update with a huge amount of new features. This is most complex update for the whole year. Let me concentrate on some most important updates

Class system

Finally, Greenshift became not just a set of unique blocks, but a complete page builder. The class system is a new approach to building designs. It’s not for all, but more and more users use it. Instead of adding attributes to the block’s options, you can just select a specific class to attach style.

We decided to go further with class system and give you several types: Local (when you attach design options only to local page), Global (synchronized class across whole site), Classic (the same when you add in WordPress advanced panel), Preset (some interesting one click ready effects to blocks) and Framework (when you use one of supported CSS frameworks)

You can also register own presets and framework classes. Check our tutorial


Additionally to Class System, we added also StyleBook feature. It’s our first attempt to combine all global options in one place. Here you can find all your registered Global Classes, Global Colors and you can set also design to global elements like headings, paragraphs, buttons

Priority of styles that can be attached to the block is next: Theme styles and Gutenberg default styles -> Global Element styles -> Local attributes styles -> Global and Local classes styles

Parallax and option to add images from parent slider block

Now, you can enable parallax effects in slider. But what is more important, you can also add all images from main slider block without adding them in each slide separately

An example of parallax slider block was added to the library

Clip path option to CSS transform

Now, it’s easy to add interesting clipping effects, like corner masks and even animations based on clipping and hover

Migration to API 3

You should not see any difference but this feature opens many possibilities in future.

New Button block

Button block now has an update and it will inherit styles from buttons of theme. This is also useful because you can overwrite these styles in StyleBook. All old buttons will continue to work as usual. This option will be used only in new added buttons

Flexbox option for fast ordering

Now, when you use Flexbox, you can enable fast child order

once enabled, you can click on autodetect number of child and then use drag and drop to change order.

Experimental option to set variables in UnitControl

Using variables and calc options has become more and more popular. Currently we added experimental option to set them in numeric fields with units

Currently, it’s working in Spacing fields and Position fields. This is also useful, because you may need to use margin auto or position auto in some scenarios. You can select CALC, VAR, AUTO units in unit selector or simply start to type calc, var, auto in field and it will be automatically converted to text field.

There are many other improvements and updates in this release, you can check them in changelog

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