We are glad to introduce GreenShift X – major 10 version update. There are many improvements and new features, this topic will gather all the noticeable updates and new features.
Filter block
This was a top-voted request on our feature request forum. Finally, we added a filter block to the Query add-on.
How it works?
You can connect the Filter panel to Query Builder. It works on REST API (no ajax) and loads dynamically. It also supports infinite loading and many scripts (like slider). It also has indexer so it should work a bit faster then regular ajax filtering.
This is new modern CSS feature that allows to connect one item to another. It’s absolute position option on steroids. Biggest benefit is that you can place anchored and targeted items absolutely in any place on page and they do not require to be in the same Parent block. This opens many features that previously can be used only with heavy script calculations. We added few items in library to show where this can be used. Of course, as all modern features, Greenshift automatically detects if browser doesn’t support it and add polyfill so you don’t need to worry about browser support.
We already have Sliding panel block, but it works more as ready preset with button without direct access to panels. Now, with new Interaction layers actions you can build custom panels with easiest way to add custom animations and full control how panel looks. This also adds all accessibility features to such panels automatically
Another good feature of modern CSS is scroll-based animations. Previously, we had something like GSAP + Scroll Trigger scripts on the page, but now, it’s fully browser-related fluent CSS. We added many new animation presets for the most common tasks related to scrolling and also several library items
Animation Presets for Interactions
Most common task related to Interactions – is when you need to show something or hide something related to user’s actions.
Previously your workflow was next – you make interaction layer with click trigger, that will change class. Then, you need to create local class, add Initial state of element, then add sub class “.active” to add active state.
Now, it’s much easier. Simply add Interaction layer that will add .active class to parent item. Now, in Animation preset, just enable option to activate it on .active class
Screenshot
That’s all. Now, you need to select the animation type: no more local class creation, setup of CSS transformations, transitions, etc.
We also added a Reverse option. Use it when you want to hide an Item when the parent block has .active class.
This option also works with Custom panels that are described above and with active Sliders
GreenLight Elements update
Element block was our requested feature to give more control to those users who are fine with studying web development as IS, without any wrappers and helpers. This block is like fluent HTML but with helper of all Greenshift features. We decided to give it its name – GreenLight, and after setup, you can select which blocks you can prioritize in Inserter – GreenLight or GreenShift.
Please, note, that this division is more UI related. Both can be used for any sites. So, “Beginner” and “Professional” blocks are not good names, but they can be more intuitive for new users. Some people prefer more control over output, and others prefer more “from the box” solutions. So, we decided that there is no sense to try put all in single UI, this is why Greenshift blocks will continue to simplify panels and GreenLight blocks will continue to be more dev/freelance/advanced users oriented.
There is nothing terrible to use both – this is why we recommend enabling option to use Both in Inserter.
We added also a lot of ready presets for Element block – from Content Sections to Countdowns
Layout blocks
We made some renaming of blocks and more organisation in Inserter. Now, all blocks are grouped by Layout, Content, Extra type. Layout and Content blocks are most used and now they are more closer to top of Inserter panel.
Simplified Panel option
Another new experimental feature, this is currently enabled only for GreenLight element blocks and partially for Greenshift blocks
This feature works in two levels.
Content Level. Once enabled (GS – Settings – Interface) users can change only content. Next attributes are allowed to change: Text Content, Link URL, alt, title, image/video/audio source, Input field placeholders, icons
Move Lock. You can additionally lock any block from removal and changing place. Users will not be able to unlock them (also they can’t lock other blocks)
Screenshot
This feature allows the admin or editor to make a site for a client. Then, make another account on the site with any role less than Editor, for example, Contributor. Now, the user can change content, URLs, and images, and that’s all, so they can’t break something. Please test and write your thoughts
Exit Intent Trigger for Interaction Layers
Previously, we had this option only in the Popup block. Now, you can build any kind of interactions with this new trigger for Interaction Layers. For example, play video or Rive animation.
Inline Styles Conversion
There are many parts in plugin that are working globally. For example, preset and global classes. Problem is that styles are loaded inline for them (otherwise, it can create many unused styles for page). Now, you can try to load them in head section. For this, visit GS Settings – CSS Options
This feature will work ONLY in block themes
AI Builder
We are also experimenting with AI helpers, we already have Smart Code AI free plugin but it’s time to make more fine-tuning and teach AI to cook Greenshift blocks
In the First step, we need to teach the basic code of blocks. Here is our test site for this – Cook GS blocks
So, ask AI to build custom sections or whatever you need. Wait for an answer and copy the code. Now, in your editor, switch to code editor by clicking on 3 dots icon
Screenshot
Paste code and switch back to visual view.
Write me results. When it is good enough, we will integrate it inside UI of the plugin
<!-- wp:paragraph -->
<p>We are glad to introduce GreenShift X - major 10 version update. There are many improvements and new features, this topic will gather all the noticeable updates and new features.</p>
<!-- /wp:paragraph -->
<!-- wp:heading -->
<h2 class="wp-block-heading" id="filter-block">Filter block</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>This was a top-voted request on our feature request forum. Finally, we added a filter block to the Query add-on.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>How it works?</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>You can connect the Filter panel to Query Builder. It works on REST API (no ajax) and loads dynamically. It also supports infinite loading and many scripts (like slider). It also has indexer so it should work a bit faster then regular ajax filtering. </p>
<!-- /wp:paragraph -->
<!-- wp:greenshift-blocks/infobox {"id":"gsbp-4d0461fa-662d","type":"blue","custombg":true,"customborder":true,"color":"#180033","background":{"color":"var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dcolor\u002d\u002dtagcolor, #b952fe26)"},"border":{"borderRadius":{"values":{},"locked":true},"style":{},"size":{"left":[3]},"color":{"left":["var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dcolor\u002d\u002dprimary, #7000f4)"]},"styleHover":{},"sizeHover":{},"colorHover":{}}} -->
<div class="wp-block-greenshift-blocks-infobox gspb_infoBox gspb_infoBox-id-gsbp-4d0461fa-662d" id="gspb_infoBox-id-gsbp-4d0461fa-662d"><div class="gs-box blue_type "><div class="gs-box-icon"></div><div class="gs-box-text"><!-- wp:paragraph -->
<p><a href="https://greenshiftwp.com/filter-block/" data-type="post" data-id="5430">Read more about Filter Block</a></p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:greenshift-blocks/infobox -->
<!-- wp:heading -->
<h2 class="wp-block-heading" id="anchor-api">Anchor API</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>This is new modern CSS feature that allows to connect one item to another. It's absolute position option on steroids. Biggest benefit is that you can place anchored and targeted items absolutely in any place on page and they do not require to be in the same Parent block. This opens many features that previously can be used only with heavy script calculations. We added few items in library to show where this can be used. Of course, as all modern features, Greenshift automatically detects if browser doesn't support it and add polyfill so you don't need to worry about browser support.</p>
<!-- /wp:paragraph -->
<!-- wp:video {"id":5448} -->
<figure class="wp-block-video"><video controls src="https://greenshiftwp.com/wp-content/uploads/2024/12/fluidtabs.mp4"></video></figure>
<!-- /wp:video -->
<!-- wp:paragraph -->
<p><a href="https://greenshift.wpsoul.net/magnetic-vertical-tabs/">Demo</a> </p>
<!-- /wp:paragraph -->
<!-- wp:video {"id":5449} -->
<figure class="wp-block-video"><video controls src="https://greenshiftwp.com/wp-content/uploads/2024/12/anchorAPI.mp4"></video></figure>
<!-- /wp:video -->
<!-- wp:paragraph -->
<p><a href="https://greenshift.wpsoul.net/anchored-custom-dropdown/">Demo</a></p>
<!-- /wp:paragraph -->
<!-- wp:heading -->
<h2 class="wp-block-heading" id="custom-panels-popups-lightboxes">Custom panels, popups, lightboxes</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>We already have Sliding panel block, but it works more as ready preset with button without direct access to panels. Now, with new Interaction layers actions you can build custom panels with easiest way to add custom animations and full control how panel looks. This also adds all accessibility features to such panels automatically</p>
<!-- /wp:paragraph -->
<!-- wp:greenshift-blocks/video {"id":"gsbp-9254ea1","src":"https://www.youtube.com/watch?v=S3jmjLIhi5g","provider":"youtube","poster":"https://i.ytimg.com/vi/S3jmjLIhi5g/maxresdefault.jpg","isOverlay":true,"overlayOpacity":0.15,"overlayIcon":true,"postDate":"2024-12-10T23:34:56+00:00"} -->
<div class="wp-block-greenshift-blocks-video gs-video youtube gspb_video-id-gsbp-9254ea1" id="gs-video-gsbp-9254ea1"><div class="gs-video-wrapper" itemscope><iframe class="gs-video-element" data-src="https://www.youtube.com/watch?v=S3jmjLIhi5g" 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/S3jmjLIhi5g/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.15"></div></div></div></div>
<!-- /wp:greenshift-blocks/video -->
<!-- wp:paragraph -->
<p><a href="https://greenshiftwp.com/sliding-panels/" data-type="post" data-id="771">Read more about custom panels</a></p>
<!-- /wp:paragraph -->
<!-- wp:heading -->
<h2 class="wp-block-heading" id="scroll-api">Scroll API</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Another good feature of modern CSS is scroll-based animations. Previously, we had something like GSAP + Scroll Trigger scripts on the page, but now, it's fully browser-related fluent CSS. We added many new animation presets for the most common tasks related to scrolling and also several library items</p>
<!-- /wp:paragraph -->
<!-- wp:greenshift-blocks/video {"id":"gsbp-4b03fe9","src":"https://www.youtube.com/watch?v=fc5uuHN3lkI","provider":"youtube","poster":"https://i.ytimg.com/vi/fc5uuHN3lkI/maxresdefault.jpg","isOverlay":true,"overlayOpacity":0.1,"overlayIcon":true,"postDate":"2024-12-10T23:34:56+00:00","playiconBg":"#000000"} -->
<div class="wp-block-greenshift-blocks-video gs-video youtube gspb_video-id-gsbp-4b03fe9" id="gs-video-gsbp-4b03fe9"><div class="gs-video-wrapper" itemscope><iframe class="gs-video-element" data-src="https://www.youtube.com/watch?v=fc5uuHN3lkI" 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/fc5uuHN3lkI/maxresdefault.jpg)" data-type="youtube" data-lightbox="false"><div class="gs-play-icon" style="background-color:#000000"><div style="content:"";display:block;position:absolute;border-radius:50%;border:1px solid #000000;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 #000000;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.1"></div></div></div></div>
<!-- /wp:greenshift-blocks/video -->
<!-- wp:heading -->
<h2 class="wp-block-heading" id="animation-presets-for-interactions">Animation Presets for Interactions</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Most common task related to Interactions - is when you need to show something or hide something related to user's actions.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Previously your workflow was next - you make interaction layer with click trigger, that will change class. Then, you need to create local class, add Initial state of element, then add sub class ".active" to add active state. </p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Now, it's much easier. Simply add Interaction layer that will add .active class to parent item. Now, in Animation preset, just enable option to activate it on .active class</p>
<!-- /wp:paragraph -->
<!-- wp:image {"id":5450,"width":"300px","sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2024/12/[email protected]" alt="" class="wp-image-5450" style="width:300px"/><figcaption class="wp-element-caption">Screenshot</figcaption></figure>
<!-- /wp:image -->
<!-- wp:paragraph -->
<p>That's all. Now, you need to select the animation type: no more local class creation, setup of CSS transformations, transitions, etc. </p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>We also added a Reverse option. Use it when you want to hide an Item when the parent block has .active class.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>This option also works with Custom panels that are described above and with active <a href="https://greenshiftwp.com/advanced-slider-and-carousel/" data-type="post" data-id="565">Sliders</a></p>
<!-- /wp:paragraph -->
<!-- wp:heading -->
<h2 class="wp-block-heading" id="greenlight-elements-update">GreenLight Elements update</h2>
<!-- /wp:heading -->
<!-- wp:image {"id":5451,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://greenshiftwp.com/wp-content/uploads/2024/12/Untitled-3-1024x576.png" alt="" class="wp-image-5451"/></figure>
<!-- /wp:image -->
<!-- wp:paragraph -->
<p><span style="box-sizing: border-box; margin: 0px; padding: 0px;"><a href="https://greenshiftwp.com/element-tag-block/" target="_blank">Element block</a> was our requested feature to give more control to</span> those users who are fine with studying web development as IS, without any wrappers and helpers. This block is like fluent HTML but with helper of all Greenshift features. We decided to give it its name - GreenLight, and after setup, you can select which blocks you can prioritize in Inserter - GreenLight or GreenShift. </p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Please, note, that this division is more UI related. Both can be used for any sites. So, "Beginner" and "Professional" blocks are not good names, but they can be more intuitive for new users. Some people prefer more control over output, and others prefer more "from the box" solutions. So, we decided that there is no sense to try put all in single UI, this is why Greenshift blocks will continue to simplify panels and GreenLight blocks will continue to be more dev/freelance/advanced users oriented.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>There is nothing terrible to use both - this is why we recommend enabling option to use Both in Inserter.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>We added also a lot of ready presets for Element block - from Content Sections to Countdowns</p>
<!-- /wp:paragraph -->
<!-- wp:heading -->
<h2 class="wp-block-heading" id="layout-blocks">Layout blocks</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>We made some renaming of blocks and more organisation in Inserter. Now, all blocks are grouped by Layout, Content, Extra type. Layout and Content blocks are most used and now they are more closer to top of Inserter panel. </p>
<!-- /wp:paragraph -->
<!-- wp:heading -->
<h2 class="wp-block-heading" id="simplified-panel-option">Simplified Panel option</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Another new experimental feature, this is currently enabled only for GreenLight element blocks and partially for Greenshift blocks</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>This feature works in two levels.</p>
<!-- /wp:paragraph -->
<!-- wp:list {"ordered":true} -->
<ol class="wp-block-list"><!-- wp:list-item -->
<li>Content Level. Once enabled (GS - Settings - Interface) users can change only content.<br>Next attributes are allowed to change: Text Content, Link URL, alt, title, image/video/audio source, Input field placeholders, icons</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>Move Lock. You can additionally lock any block from removal and changing place. Users will not be able to unlock them (also they can't lock other blocks)</li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->
<!-- wp:image {"id":5453,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://greenshiftwp.com/wp-content/uploads/2024/12/[email protected]" alt="" class="wp-image-5453"/><figcaption class="wp-element-caption">Screenshot</figcaption></figure>
<!-- /wp:image -->
<!-- wp:paragraph -->
<p>This feature allows the admin or editor to make a site for a client. Then, make another account on the site with any role less than Editor, for example, Contributor. Now, the user can change content, URLs, and images, and that's all, so they can't break something. Please test and write your thoughts</p>
<!-- /wp:paragraph -->
<!-- wp:heading -->
<h2 class="wp-block-heading" id="exit-intent-trigger-for-interaction-layers">Exit Intent Trigger for Interaction Layers</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Previously, we had this option only in the Popup block. Now, you can build any kind of interactions with this new trigger for Interaction Layers. For example, play video or Rive animation. </p>
<!-- /wp:paragraph -->
<!-- wp:heading -->
<h2 class="wp-block-heading" id="inline-styles-conversion">Inline Styles Conversion</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>There are many parts in plugin that are working globally. For example, preset and global classes. Problem is that styles are loaded inline for them (otherwise, it can create many unused styles for page). Now, you can try to load them in head section. For this, visit GS Settings - CSS Options </p>
<!-- /wp:paragraph -->
<!-- wp:greenshift-blocks/infobox {"id":"gsbp-5b15d3a","type":"errorlight"} -->
<div class="wp-block-greenshift-blocks-infobox gspb_infoBox gspb_infoBox-id-gsbp-5b15d3a" id="gspb_infoBox-id-gsbp-5b15d3a"><div class="gs-box errorlight_type icon_type"><div class="gs-box-icon"><svg x="0px" y="0px" viewBox="0 0 512 512"> <g> <g> <path d="M256,0C114.508,0,0,114.497,0,256c0,141.493,114.497,256,256,256c141.492,0,256-114.497,256-256 C512,114.507,397.503,0,256,0z M256,472c-119.384,0-216-96.607-216-216c0-119.385,96.607-216,216-216 c119.384,0,216,96.607,216,216C472,375.385,375.393,472,256,472z"></path> </g> </g> <g> <g> <path d="M343.586,315.302L284.284,256l59.302-59.302c7.81-7.81,7.811-20.473,0.001-28.284c-7.812-7.811-20.475-7.81-28.284,0 L256,227.716l-59.303-59.302c-7.809-7.811-20.474-7.811-28.284,0c-7.81,7.811-7.81,20.474,0.001,28.284L227.716,256 l-59.302,59.302c-7.811,7.811-7.812,20.474-0.001,28.284c7.813,7.812,20.476,7.809,28.284,0L256,284.284l59.303,59.302 c7.808,7.81,20.473,7.811,28.284,0C351.398,335.775,351.397,323.112,343.586,315.302z"></path> </g> </g> </svg></div><div class="gs-box-text"><!-- wp:paragraph -->
<p>This feature will work ONLY in block themes</p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:greenshift-blocks/infobox -->
<!-- wp:heading -->
<h2 class="wp-block-heading" id="ai-builder">AI Builder</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>We are also experimenting with AI helpers, we already have <a href="https://greenshiftwp.com/learning/ai-blocks/smart-code-ai/" data-type="learning" data-id="3950">Smart Code AI</a> free plugin but it's time to make more fine-tuning and teach AI to cook Greenshift blocks</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>In the First step, we need to teach the basic code of blocks. Here is our test site for this - <a href="https://glbuilder.streamlit.app/">Cook GS blocks</a></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>So, ask AI to build custom sections or whatever you need. Wait for an answer and copy the code. Now, in your editor, switch to code editor by clicking on 3 dots icon</p>
<!-- /wp:paragraph -->
<!-- wp:image {"id":5455,"width":"500px","sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2024/12/[email protected]" alt="" class="wp-image-5455" style="width:500px"/><figcaption class="wp-element-caption">Screenshot</figcaption></figure>
<!-- /wp:image -->
<!-- wp:paragraph -->
<p>Paste code and switch back to visual view.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Write me results. When it is good enough, we will integrate it inside UI of the plugin</p>
<!-- /wp:paragraph -->
