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

Blog Staff

October 4, 2023

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

StyleBook

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

<p>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</p>

<h2 class="wp-block-heading" id="class-system">Class system</h2>

<p>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. </p>

<p>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)</p>

<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://www.youtube.com/watch?v=P8lFjwQHiz0
</div></figure>

<div id="gspb_infoBox-id-gsbp-a2412ca3-4aed" class="gspb_infoBox gspb_infoBox-id-gsbp-a2412ca3-4aed wp-block-greenshift-blocks-infobox"><div class="gs-box info_type icon_type"><div class="gs-box-icon"><svg x="0px" y="0px" viewBox="0 0 512 512"> <g><g> <path d="M256,0C114.497,0,0,114.507,0,256c0,141.503,114.507,256,256,256c141.503,0,256-114.507,256-256 C512,114.497,397.492,0,256,0z M256,472c-119.393,0-216-96.615-216-216c0-119.393,96.615-216,216-216 c119.393,0,216,96.615,216,216C472,375.393,375.384,472,256,472z"></path> </g> </g> <g> <g> <path d="M256,214.33c-11.046,0-20,8.954-20,20v128.793c0,11.046,8.954,20,20,20s20-8.955,20-20.001V234.33 C276,223.284,267.046,214.33,256,214.33z"></path> </g> </g> <g> <g> <circle cx="256" cy="162.84" r="27"></circle> </g> </g> </svg></div><div class="gs-box-text">
<p>You can also register own presets and framework classes. <a href="https://greenshiftwp.com/class-first-system-and-how-to-register-own-css-framework-and-components/" data-type="post" data-id="3455">Check our tutorial</a></p>
</div></div></div>

<h2 class="wp-block-heading" id="stylebook">StyleBook</h2>

<p>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</p>

<figure class="wp-block-image size-large"><img src="https://greenshiftwp.com/wp-content/uploads/2023/10/presetss-1024x497.jpg" alt="" class="wp-image-3476"/></figure>

<div id="gspb_infoBox-id-gsbp-383ae929-75b7" class="gspb_infoBox gspb_infoBox-id-gsbp-383ae929-75b7 wp-block-greenshift-blocks-infobox"><div class="gs-box notice_type icon_type"><div class="gs-box-icon"><svg x="0px" y="0px" viewBox="0 0 486.463 486.463"> <g> <g> <path d="M243.225,333.382c-13.6,0-25,11.4-25,25s11.4,25,25,25c13.1,0,25-11.4,24.4-24.4 C268.225,344.682,256.925,333.382,243.225,333.382z"></path> <path d="M474.625,421.982c15.7-27.1,15.8-59.4,0.2-86.4l-156.6-271.2c-15.5-27.3-43.5-43.5-74.9-43.5s-59.4,16.3-74.9,43.4 l-156.8,271.5c-15.6,27.3-15.5,59.8,0.3,86.9c15.6,26.8,43.5,42.9,74.7,42.9h312.8 C430.725,465.582,458.825,449.282,474.625,421.982z M440.625,402.382c-8.7,15-24.1,23.9-41.3,23.9h-312.8 c-17,0-32.3-8.7-40.8-23.4c-8.6-14.9-8.7-32.7-0.1-47.7l156.8-271.4c8.5-14.9,23.7-23.7,40.9-23.7c17.1,0,32.4,8.9,40.9,23.8 l156.7,271.4C449.325,369.882,449.225,387.482,440.625,402.382z"></path> <path d="M237.025,157.882c-11.9,3.4-19.3,14.2-19.3,27.3c0.6,7.9,1.1,15.9,1.7,23.8c1.7,30.1,3.4,59.6,5.1,89.7 c0.6,10.2,8.5,17.6,18.7,17.6c10.2,0,18.2-7.9,18.7-18.2c0-6.2,0-11.9,0.6-18.2c1.1-19.3,2.3-38.6,3.4-57.9 c0.6-12.5,1.7-25,2.3-37.5c0-4.5-0.6-8.5-2.3-12.5C260.825,160.782,248.925,155.082,237.025,157.882z"></path> </g> </g> </svg></div><div class="gs-box-text">
<p>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</p>
</div></div></div>

<h2 class="wp-block-heading" id="parallax-and-option-to-add-images-from-parent-slider-block">Parallax and option to add images from parent slider block</h2>

<p>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</p>

<figure class="wp-block-image size-large is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2023/10/slider-466x1024.jpg" alt="" class="wp-image-3477" width="233" height="512"/></figure>

<p>An example of parallax slider block was added to the library</p>

<figure class="wp-block-video"><video controls src="https://greenshiftwp.com/wp-content/uploads/2023/10/swiperparallax-1.mp4"></video></figure>

<h2 class="wp-block-heading" id="clip-path-option-to-css-transform">Clip path option to CSS transform</h2>

<p>Now, it's easy to add interesting clipping effects, like corner masks and even animations based on clipping and hover</p>

<figure class="wp-block-video"><video controls src="https://greenshiftwp.com/wp-content/uploads/2023/10/clippathtransform.mp4"></video></figure>

<h2 class="wp-block-heading" id="migration-to-api-3">Migration to API 3</h2>

<p>You should not see any difference but this feature opens many possibilities in future.</p>

<h2 class="wp-block-heading" id="new-button-block">New Button block</h2>

<p>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</p>

<h2 class="wp-block-heading" id="flexbox-option-for-fast-ordering">Flexbox option for fast ordering</h2>

<p>Now, when you use Flexbox, you can enable fast child order</p>

<figure class="wp-block-image size-full is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2023/10/flexbox.jpg" alt="" class="wp-image-3480" width="271" height="471"/></figure>

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

<h2 class="wp-block-heading" id="experimental-option-to-set-variables-in-unitcontrol">Experimental option to set variables in UnitControl</h2>

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

<p>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.</p>

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

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

Class system

StyleBook

Parallax and option to add images from parent slider block

Clip path option to CSS transform

Migration to API 3

New Button block

Flexbox option for fast ordering

Experimental option to set variables in UnitControl