Widgetkit 3.0 – Completely Rebuilt with UIkit 3
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.
UIkit 3 Features
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.
New Widget Settings
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.
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.
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.
|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.|
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.
Update (29 January)
As promised, we have created a tutorial on how to migrate your Warp 7 site with Widgetkit to YOOtheme Pro.