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

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="css-variables">CSS variables </h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/video {"id":"gsbp-bf3d5e47-0249","src":"https://www.youtube.com/watch?v=dnPMQlDVSOE","provider":"youtube","poster":"https://i.ytimg.com/vi/dnPMQlDVSOE/maxresdefault.jpg","isOverlay":true,"overlayOpacity":0.05,"overlayIcon":true,"postDate":"2023-10-31T18:05:08"} -->
<div class="wp-block-greenshift-blocks-video gs-video youtube gspb_video-id-gsbp-bf3d5e47-0249" id="gs-video-gsbp-bf3d5e47-0249"><div class="gs-video-wrapper" itemscope><iframe class="gs-video-element" data-src="https://www.youtube.com/watch?v=dnPMQlDVSOE" data-provider="youtube" data-autoplay="true" data-playsinline="false" data-controls="true" data-loop="false" data-mute="false" data-overlay="true" data-lightbox="false" data-modestbranding="false" data-suggested="true" frameborder="0" allowfullscreen></iframe><div class="gs-video-overlay" style="background-image:url(https://i.ytimg.com/vi/dnPMQlDVSOE/maxresdefault.jpg)" data-type="youtube" data-lightbox="false"><div class="gs-play-icon" style="background-color:#cc0000"><div style="content:"";display:block;position:absolute;border-radius:50%;border:1px solid #cc0000;left:-20px;right:-20px;bottom:-20px;top:-20px;animation:pulsevideobutton 1.5s linear infinite;opacity:0"></div><span></span><div style="content:"";display:block;position:absolute;border-radius:50%;border:1px solid #cc0000;left:-20px;right:-20px;bottom:-20px;top:-20px;animation:pulsevideobutton 1.5s linear infinite;opacity:0;animation-delay:0.5s"></div></div><div class="gs-overlay-color" style="background-color:#9b51e0;background-image:;opacity:0.05"></div></div></div></div>
<!-- /wp:greenshift-blocks/video -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="figma-stylebook-creator">Figma Stylebook creator</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="interaction-panels">Interaction Panels</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="grid-range-builder">Grid Range Builder</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/video {"id":"gsbp-16b060f9-2df7","src":"https://youtu.be/bEeLykKHJQ8","provider":"youtube","poster":"https://i.ytimg.com/vi/bEeLykKHJQ8/maxresdefault.jpg","isOverlay":true,"overlayOpacity":0,"overlayIcon":true,"postDate":"2023-10-31T18:05:08"} -->
<div class="wp-block-greenshift-blocks-video gs-video youtube gspb_video-id-gsbp-16b060f9-2df7" id="gs-video-gsbp-16b060f9-2df7"><div class="gs-video-wrapper" itemscope><iframe class="gs-video-element" data-src="https://youtu.be/bEeLykKHJQ8" data-provider="youtube" data-autoplay="true" data-playsinline="false" data-controls="true" data-loop="false" data-mute="false" data-overlay="true" data-lightbox="false" data-modestbranding="false" data-suggested="true" frameborder="0" allowfullscreen></iframe><div class="gs-video-overlay" style="background-image:url(https://i.ytimg.com/vi/bEeLykKHJQ8/maxresdefault.jpg)" data-type="youtube" data-lightbox="false"><div class="gs-play-icon" style="background-color:#cc0000"><div style="content:"";display:block;position:absolute;border-radius:50%;border:1px solid #cc0000;left:-20px;right:-20px;bottom:-20px;top:-20px;animation:pulsevideobutton 1.5s linear infinite;opacity:0"></div><span></span><div style="content:"";display:block;position:absolute;border-radius:50%;border:1px solid #cc0000;left:-20px;right:-20px;bottom:-20px;top:-20px;animation:pulsevideobutton 1.5s linear infinite;opacity:0;animation-delay:0.5s"></div></div><div class="gs-overlay-color" style="background-color:#9b51e0;background-image:;opacity:0"></div></div></div></div>
<!-- /wp:greenshift-blocks/video -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="stylebook-improvements">Stylebook improvements</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/video {"id":"gsbp-7001ec77-1822","src":"https://www.youtube.com/watch?v=oyxy7qUDLtU\u0026t=1s","provider":"youtube","poster":"https://i.ytimg.com/vi/oyxy7qUDLtU/maxresdefault.jpg","isOverlay":true,"overlayOpacity":0,"overlayIcon":true,"postDate":"2023-10-31T18:05:08"} -->
<div class="wp-block-greenshift-blocks-video gs-video youtube gspb_video-id-gsbp-7001ec77-1822" id="gs-video-gsbp-7001ec77-1822"><div class="gs-video-wrapper" itemscope><iframe class="gs-video-element" data-src="https://www.youtube.com/watch?v=oyxy7qUDLtU&t=1s" data-provider="youtube" data-autoplay="true" data-playsinline="false" data-controls="true" data-loop="false" data-mute="false" data-overlay="true" data-lightbox="false" data-modestbranding="false" data-suggested="true" frameborder="0" allowfullscreen></iframe><div class="gs-video-overlay" style="background-image:url(https://i.ytimg.com/vi/oyxy7qUDLtU/maxresdefault.jpg)" data-type="youtube" data-lightbox="false"><div class="gs-play-icon" style="background-color:#cc0000"><div style="content:"";display:block;position:absolute;border-radius:50%;border:1px solid #cc0000;left:-20px;right:-20px;bottom:-20px;top:-20px;animation:pulsevideobutton 1.5s linear infinite;opacity:0"></div><span></span><div style="content:"";display:block;position:absolute;border-radius:50%;border:1px solid #cc0000;left:-20px;right:-20px;bottom:-20px;top:-20px;animation:pulsevideobutton 1.5s linear infinite;opacity:0;animation-delay:0.5s"></div></div><div class="gs-overlay-color" style="background-color:#9b51e0;background-image:;opacity:0"></div></div></div></div>
<!-- /wp:greenshift-blocks/video -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="complex-shadow-borders">Complex shadow, borders</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>If you need more advanced borders or shadows, use Custom button </p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":3497,"width":235,"height":512,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2023/10/border-469x1024.jpg" alt="" class="wp-image-3497" width="235" height="512"/></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="tabs-design-was-recreated">Tabs design was recreated</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Previously tabs used our old panels, now, it's migrated to new components. And now you can have much more control for tab style</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":3498,"width":278,"height":284,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2023/10/tabs.jpg" alt="" class="wp-image-3498" width="278" height="284"/></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="the-video-box-supports-live-links-for-youtube">The video box supports Live links for YouTube</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Live YouTube player have become more popular so our video box now supports it</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>There are many other improvements under the hood, especially in the Admin panels design.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="deprecation">Deprecation</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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. </p>
<!-- /wp:paragraph -->