Blocs V5 uses version 4 and 5 of the Bootstrap framework. This means Blocs V3 projects will open in Blocs V5 and may only require a small number of tweaks and changes.
Also remember Blocs V3 can run alongside Blocs V5, so if you have large sites or projects with deadlines, avoid migrating these unless you have the time to make substantial manual changes that may be required.
The most important thing to remember before you migrate a project from Blocs V3 to Blocs V5 is to back it up. Once a project is migrated and saved it can no longer be reverted, meaning it cannot be opened or used with Blocs V3. So please back up your projects before you continue to migrate.
Font Awesome
In Blocs V5, the Font Awesome icon set has been updated to V5. Blocs will attempt to migrate any old icon classes from Font Awesome V4 up to the new classes required for V5. However, if you have added your own custom code implementations of the Font Awesome icons then these will need to be manually updated.
You can read about which classes have changed in Font Awesome V5 and how to manually migrate the classes here.
Carousel, Lightbox and Scroll To Top UI Icons
In Blocs V5 the carousel, light box and scroll to top button use SVG icons rather than icon fonts, this means the old subclasses that were used in Blocs V3 to set the colour of the icons will no longer work. There are new subclasses that target these SVG icons.
Please note, you will no longer use font colour to set the icon colour, instead use the SVG stroke colour styling controls in the Class Editor.
Parallax Background
The way parallax works has changed in Blocs V5, previously it used this technique which applies the class rule background-attachment: fixed;. However, this approach has one major downfall which is, it doesn’t work on mobile devices.
In Blocs V5, parallax is now powered by a Javascript solution which means it works great on desktop and mobile. There are a few downsides to this new parallax method, the main one being, backgrounds no longer seamlessly repeat if you have a number of Blocs stacked together with the same background image. A workaround for this, is to simply relocate the main rows containing the Bloc content from each individual Bloc and place them into a single Bloc with the parallax background effect turned on.
If you really need to get the classic Blocs V3 parallax effect in Blocs V5, this guide will walk you through the process of creating it manually.
Menu Icon
In Blocs V5 the toggle menu icon is now an inline SVG. This means it can be easily styled and customised using custom classes. However, if you previously used a custom Bric such as Easy Burger to customise the menu of your website, you may find some issues. We recommend building your menu again and removing any Brics that manipulate the menu, if you encounter issues.
Margin
Blocs V5 no longer has limited pre-set margin controls for text and images, instead Blocs has full access to the Bootstrap spacing utilities which offer a much greater experience. These allow you to apply pre-set margin and padding for any edge on any element. However, when using spacing, you may find the controls do not take effect. To flush an elements, margin or padding, hold down the option key and click the small X on the relevant edge segmented control that you would like to clear. After this you can now apply a new margin/padding value to that edge.
Colours
Blocs V5 has an entirely new colour system with many great benefits. However, due to such a big change, you may encounter some global swatches that may not work correctly in Blocs V5, when you try to assign them to an element. Simply right click the problematic swatch in the Swatch Manager and duplicate it, now remove the original and use the duplicated version.
Using Blocs V3 and V5 Alongside Each Other
It’s possible to run Blocs V3 and V5 on the same Mac as they both use version dedicated application support resources. However, the following points should be considered.
- Both versions of Blocs share the same name, this means it’s impossible for both apps to occupy the same space within the MacOS applications folder. To avoid this problem, simply rename the Blocs V3 application from Blocs to Blocs V3. This will allow both apps to be placed in the MacOS application folder.
Migrating a Project from Blocs V2
If you are migrating a project from Blocs V2 to Blocs V5, you can find the dedicated migration guide here.