One of the biggest differences in Blocs V5 compared to Blocs V2 is the fact Blocs no longer creates websites using Bootstrap 3 and instead uses the new and improved Bootstrap 4 framework.
Migration Tool
Projects created in Blocs V2 use the Bootstrap 3 framework which is obviously not ideal, as Bootstrap 3 and 4 are quite different. However, Blocs V5 comes with a migration tool built in that is designed to help convert Blocs V2 projects (Bootstrap 3) into Blocs V5 projects (Bootstrap 4) with as little upset as possible.
When migrating a Blocs V2 project (Bootstrap 3) to a Blocs V5 project (Bootstrap 4) you are guaranteed to notice various aspects of your site may require further attention, this is due to a number of factors that we will expand on throughout this post.
Also remember Blocs V2 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 V2 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 V2. So please back up your projects before you continue to migrate.
The Migration Process
When you open a Blocs V2 project in Blocs V5, Blocs will ask if you would like to migrate the project to Blocs V5. It’s important at this point to make sure you have a backup of your project so you can easily revert to Blocs 2 if your migration requires a lot more work than you had initially envisaged.
When Blocs migrates a project to Bootstrap 4, it checks the projects HTML for references to old Bootstrap 3 classes and also scans the HTML structure making changes when required. It’s important to remember Blocs does not change any custom classes, so any visual styling issues caused by custom classes will need to be manually amended.
Natural Visual Differences
There are a number of factors that will cause your site to look different in Blocs V5 compared to Blocs V2. The following are normal and caused because of key changes to the Bootstrap framework.
Text is bigger
After migration the most common change you may notice is the text may look bigger. This is because Bootstrap 4 now uses larger font sizes across all of its’ core typography styling. The reference below illustrates the differences between Bootstrap 3 and 4 regrading font sizes for the heading tags.
Bootstrap 3
H1 = 36px
H2 = 30px
H3 = 24px
H4 = 18px
H5 = 14px
H6 = 12px
Bootstrap 4
H1 = 2.5 rem
H2 = 2 rem
H3 = 1.75 rem
H4 = 1.5 rem
H5 = 1.25rem
H6 = 1rem
Toggle Symbol Styling
Another common visual issue when migrating is problems with the toggle symbol styling. This is because, in Bootstrap 4, the navigator toggle symbol is now an SVG image. This means it is no longer possible to customise the toggle symbol with old subclasses from Blocs V2. To change the colour of the toggle symbol in Blocs V5 for light or dark backgrounds, you will need to set the parent navigation Brics theme style.
Cache Issues
When you migrate a project to Bootstrap 4 and export it, it is very likely server cache will cause your site to initially look broken once it’s hosted. This can be easily fixed by clearing a browser’s cache. You can read more about addressing browser cache issues here.
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.
Don’t forget, Blocs V5 also comes with access to the WebKit developer tools in preview mode, simply right click and inspect to access them. Using the dev tools is a great way to find out which custom classes may be causing unwanted styling issues in your site, making it quicker to fix.
Using Blocs V2 and V5 Alongside Each Other
It’s possible to run Blocs V2 and V5 on the same system 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 V2 application from Blocs to Blocs V2. This will allow both apps to be placed in the MacOS application folder.
- Blocs V2 and V5 have different file types. This means once a file is saved in Blocs V5 it can’t be opened in Blocs V2. With this in mind, we recommend that you keep multiple copies of your projects, to avoid being forced to use them in a specific version of Blocs.