There are not many migration considerations to be made when upgrading your projects to Blocs 6 from Blocs 5. However, there are a few changes in Blocs 6 that may cause some confusion or visual issues when working with your Blocs 5 project.
Blocs 6 projects can be opened in Blocs 5, however, when you open a project in Blocs 5 that has been saved in Blocs 6, you will be prompted with an alert stating that any new Blocs 6 functionality used in your website will not work if you export or publish. For this reason, we still recommend making a backup of your Blocs projects before saving them in Blocs 6, as you may encounter some unwanted errors and having backups is best practise regardless.
Icons
Blocs 6 comes with a new SVG Icon Manager, which is the default icon manager that Blocs will display when using icon Brics. It’s important to note that Blocs does not migrate old icons to the new SVG icons automatically.
If you would like to replace icons in your project to use the new SVG icons, you will need to do that manually, by deleting each old icon Bric and adding a new icon Bric in its place. The reason we do not offer automatic migration of icons is because the new icons are inline SVG files and the old ones are icon fonts. Because the old icons are technically a text character with a font applied to make them look like an icon, it was possible to style them with the text CSS properties in the Class Editor. The new inline SVG icons are styled in a different way and will require the SVG CSS property controls, which are also found in the Class Editor.
Icon Colour
Setting the colour of an icon in previous versions of Blocs used to be achieved by applying a colour to the text colour property in the Class Editor. To set a fill colour to an SVG icon in Blocs 6, you would use the SVG fill CSS property.
Icon Size
Setting the size of an icon in previous versions of Blocs used to be achieved by applying a numerical value to the text size property in the Class Editor. To set the size of an SVG icon in Blocs 6, you would use the width CSS property, which is found in the metrics section of the Class Editor.