Is Greenshift a Cwicly alternative?

I’m actually asking you 😀 After Cwicly announced they were discontinuing the development of their plugin, I saw so many comments from people saying there’s no alternative to switch to. And even though I never really used Cwicly (I had a license for it and installed it on a test site, but never deep dived into it), whenever I see those comments, I always think “did you never hear of GreenShift yet?”

Which Cwicly features does Greenshift have as well?

So what are the features that made user love Cwicly so much? Since I’m not a Cwicly expert, I’ll just borrow the extensive feature list David McCan published in his article
“The Cwicly Conundrum”.

Greenshift is also built on top of Gutenberg, just like Cwicly

Yes, GreenShift is a Gutenberg addon, just like Cwicly. But where Cwicly added a lot of stuff to the Gutenberg interface and had a completely different UI,
Greenshift keeps things a lot closer to core. Although their recent “element” block and global classes also work with icons, but those are meant for professionals
who use Greenshift on a daily base.

Bloat-free and performant output on the front end

This is one of the key points for Greenshift. It’s even where the name comes from; shift to green Core Web Vitals. The plugin only loads the necessary assets for the blocks
you use on the page, and has no dependencies like jQuery. It even doesn’t include things like Font Awesome for performance reasons; the icon block has only a few dozen icons 
to choose from, but does offer a custom SVG code field so you can just copy the SVG code from Font Awesome.

There’s also an element block which is basically a blank div that produces really clean HTML code, without any styling, extra wrappers or default classes. This is a very versatile block
which allows you to choose your own HTML tag, like div, p, h1-h6, section, ul, ol, li, nav, button, article, aside, span, figure etcetera. You could build your entire site with just this block.

You get a lot of extra blocks in Greenshift, even more than in Cwicly

CSS grid and flexbox

Another beloved Cwicly feature was the ability to use modern layout techniques like flexbox and CSS grid in Gutenberg. Greenshift has that as well, and gives you full control over it. Even better; it has a very user-friendly visual grid builder to create complex layouts with drag and drop. Flexbox also offers flex-child controls, like changing the order on mobile.

Global classes

And yes, it also lets you style pseudo-classes like :hover and :active. And not only that: Greenshift also let’s you target elements within a block with a certain class.
So for example, I can have a container block with the class “product-features”, and I can add a “sub class” to that which targets LI or IMG elements in that block.
It even has a rule builder to make that process more user-friendly.

It also supports CSS variables / tokens, and even supports Core Framework. Learn more about the class system here.

A lot of layout and styling options

For sure! Greenshift’s options go WAY beyond the basics, offering things like text shadow and border, text wrap, background overlays with filters and mix blend, 3 shadow layers etc.

Greenshift had great responsive controls with 4 customizable breakpoints

Greenshift offers you 4 customizable breakpoints (so you can set the breakpoint’s resolution yourself) and you can adjust almost everything per breakpoint.
Apart from that, you can also choose to hide content on certain devices.

Global design options

Greenshift has something called stylebook, which is a central place to manage your default typography settings (h1 – h6 and p), button styling and global colors. 
Next to that, you can also manage all your global classes and variables from here, as well as some site settings like the logo, favicon and site title.

Reusable blocks and components

In Gutenberg, there’s a feature called reusable patterns. You can save any block in a library to reuse it later elsewhere in the site. You can also sync those patterns,
meaning that if you change something in 1 block, that change will automatically be reflected in all other blocks that use that synced pattern.

However, Cwicly had a special form of synced patterns, called “components” which allows you to only sync certain (HTML) parts of a block. For example, if you have 
a button, you can easily keep it’s styling (colors, padding, border) the same on every page with a global class. If the text and link are the same on every page as well,
you can create a synced pattern. In that case, if you change the link of 1 button, that link will change in all buttons using that synced pattern.

But what if you want to change the link per button, but globally control the text? You could do that with Cwicly components, but it’s not possible with Gutenberg / Greenshift
right now. However, it will be possible soon; this feature should have been in WP 6.5 but it’s pushed to 6.6. 

Popups and off canvas sliding panels

One of the blocks in Greenshift is the popup / sliding panel block. Apart from popups, you can also use it to create off canvas areas, for example for filters or a custom mobile menu. You can trigger it via a button, but also from any other block using a CSS class or ID, or automatically after a certain amount of time, or when a user wants to exit the page (exit intent).
And the best part? This block is in the free core version!

Interactive and animation effects

Greenshift has a really powerful feature called “interaction layers” in the free core plugin. With that, you can set a trigger and an action; when this happens, do that.
For example, when the user clicks on an element, attach a class to that element and place a cookie (you can add multiple actions to a trigger). Or when a video block
comes into the viewport, start playing it. You can even add HTML on a trigger.

For animation, Greenshift has both entry and scroll animations, and with the premium animation addon, you even get GSAP animations, which is the same library
the popular motion.page plugin uses.

A code block

Greenshift has a free Smart Code AI addon, which they describe as a “Code snippet plugin on steroids”. Next to things like auto complete and syntax highliting,
it can also generate code via AI.