Widgetkit 3.0 – Completely Rebuilt with UIkit 3

Sascha
January 26, 2021
Widgetkit

Surprise, it's time for another long-awaited update – say hello to Widgetkit 3. It's been almost 5 years since the last major update, and today we are bringing Widgetkit to the UIkit 3, and therefore also YOOtheme Pro ecosystem. We completely modernized Wigetkit by refactoring the administration and all its widgets with UIkit 3. It now makes use of all UIkit 3 features and benefits. Additionally, we added new options to the widgets, and made some general improvements. Let's get into details.

Make sure to subscribe to our YouTube channel and join our Discord Chat Server for all news and discussions.

UIkit 3 Features

Finally, Widgetkit got rid of UIkit 2 and all its outdated JavaScripts. This is a huge step for Widgetkit since it heavily uses the UIkit JavaScripts for all its widget effects. Not only were they greatly improved, but the file size also got about 25% smaller. This, in addition to the removed jQuery dependency, significantly improves your site's speed.

Now slideshows and sliders support touch and swipe navigation as well as mouse drag for desktops. You can control the animation with your fingertips, and it even accelerates to keep up with your pace. Background videos used in slideshows and sliders will play automatically when you scroll through the slides, autopause when you move to the next slide and start playing again where you left off when you swipe back. Widetkit now uses the lightweight SVG icon system from UIkit and no longer requires loading FontAwesome. The parallax effect, the masonry layout and filtering options for the Grid and Gallery widgets can now be used in any combination, and they will work seamlessly together. And these are just the main improvements, there is so much more to discover in the detail.

We also added some missing options to the widgets. There is an additional x-large breakpoint option for larger screens and a new HTML element setting for titles in all widgets, which is great for SEO. The animation setting got new small and medium offset options for the slide animations. The List widget has more list type options like bullet, divider, hyphen and more, and the Map widget now uses Algolia Places instead of the Google API for geocoding.

YOOtheme Pro Integration

Since YOOtheme Pro also uses UIKit 3, Widgetkit will not load UIkit and instead will adapt the YOOtheme Pro style. You can see how Widgetkit looks like with all the different YOOtheme Pro styles on our demo server. Additionally, there is a new Widgetkit element in YOOtheme Pro that allows you to load any widget into the YOOtheme Pro page builder. It opens the Widgetkit administration as you are used to in a modal where you can select and manage your widgets.

YOOtheme Pro integration

Gutenberg Integration

We also integrated Widgetkit 3 into the WordPress Gutenberg editor. Simply add the Widgetkit block to your Gutenberg layout. It will open the Widgetkit administration in a modal just like the YOOtheme Pro Widgetkit element.

Gutenberg integration

3rd-Party Theme Integration

Widgetkit 3 improves the integration with themes from another theme provider. UIkit will now be loaded in the scope mode so the Widgetkit and theme CSS will not interfere with each other. This means the CSS which comes with Widgetkit is only applied to the widgets and will not affect the theme markup. Additionally, its CSS specificity got higher, so it's more robust against the theme CSS.

Migration and Breaking Changes

As it usually is with major updates, there are always things that get changed or removed. In UIkit 3 some slideshow animations got replaced with new ones. The UIkit 2 Slideset component with all its animations got removed, and it's functionality was replaced by the Set option in the UIkit 3 slider. UIkit 3 comes with its own SVG icons instead of FontAwesome, which is why the icon selection is different in Widgetkit 3. For you this all means that your widgets may look slightly different, but there are no further actions required.

The Slideshow component in UIkit 3 has a mandatory ratio option, which is set to 16:9 by default. This means if you are using the Slideshow, Grid Slider or Slideshow Panel widgets, you have to set the required ratio. The easiest way is to use the width and height of your slideshow images, for example, 1600:750.

Of course, if you are using UIkit 2 HTML classes in your content, you have to update them to UIkit 3. The same applies to custom widgets or custom content providers which need to be updated to UIkit 3. Otherwise, they will break both in the site and Widgetkit administration.

Who is Widgetkit 3 for?

Depending on the theme you are using, there are different recommendations on whether you should use Widgetkit 3.

Theme	Recommendation
YOOtheme Pro	If your site is built with YOOtheme Pro, there should be no need to use Widgetkit. Use it only if you need a Widgetkit feature not available in YOOtheme Pro.
Warp Theme	If your site is built with one of our old Warp themes, we strongly recommend to switch to YOOtheme Pro. Just two weeks ago we announced that we are sunsetting Warp 7 themes. The update to Widgetkit 3 will allow you to keep all your Widgetkit content and make the migration to YOOtheme Pro much easier. Widgetkit will adapt perfectly to your chosen YOOtheme Pro style. If for some reason you are forced to stay with the Warp theme, do not update to Widgetkit 3 because its style will no longer adapt to the chosen Warp theme. Mind that this also means you will stay with outdated software since both Warp and Widgetkit 2 are no longer maintained.
3rd-Party Theme	If your site is built with a theme from another theme provider, the Widgetkit 3 update is just right for you. It will bring all your Widgetkit Galleries, Slideshows and Sliders up-to-date with the latest UIkit 3 JavaScripts and all the new features.

Mind that Widgetkit 3 is only available with a Widgetkit subscription. Now go ahead and check out Widgetkit 3 yourself. As always, let us know what you think in the comments below.