Migrate a Blocs V2 Project to Blocs V3

One of the biggest changes in Blocs 3 is the fact it no longer creates websites using Bootstrap 3 and instead uses the new and improved Bootstrap 4 framework.

Migration Tool

Projects created in Blocs 2 use the Bootstrap 3 framework which is obviously not ideal, as Bootstrap 3 and 4 are quite different. However, Blocs 3 comes with a migration tool built in that is designed to help convert Blocs 2 projects (Bootstrap 3) into Blocs 3 projects (Bootstrap 4) with as little upset as possible.

When migrating a Blocs 2 project (Bootstrap 3) to a Blocs 3 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 V3, 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 Migration Process

When you open a Blocs V2 project in Blocs V3, Blocs will ask if you would like to migrate the project to Blocs V3. 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 V3 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 V3 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.

Using Blocs 2 and 3 Alongside Each Other

It’s possible to run Blocs v2 and v3 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 v3 have different file types. This means once a file is saved in Blocs 3 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.