Migrating from Legacy Global Styles

Our new Global Styles feature (released in 1.7.0) is a complete rewrite of the existing Global Styles system. For that reason, there is no automatic way to migrate from the old system to the new system. This would require us to mass auto-replace data in your content, which we don’t like doing.

It’s important to note that legacy Global Styles are not going anywhere. You are in no rush to migrate all of them – they will continue to work as they always have.

However, if you want to move them to the new system slowly, there is a simple process.

First, navigate to your legacy Global Styles page. You can do this by going to GenerateBlocks > Global Styles.

This page is now for our new Global Style system, but if you have any legacy Global Styles, you will see a button at the top that will take you to the legacy page.

This will take you to the standard legacy Global Styles dashboard page. You can now open the legacy Global Style that you want to convert to the new system.

Once editing the legacy Global Style, you’ll see the familiar section on the right. The arrow is pointing to the current legacy Global Style name.

In this case, the class name that my legacy Global Style uses is: .gb-button-primary

You can keep this class name, or you can create a new one. It doesn’t matter, as you will need to manually add the new class to your existing blocks.

To create a new Global Style from this legacy Global Style, you can use the “Add or Create Style” dropdown.

You can learn more about creating Global Styles here.

Once you’ve chosen a style name and clicked “Create”, you will be taken to the onboarder.

You want to choose the Copy the local block styles option. This is essential, as it will copy all of your legacy Global Styles and paste them into the new Global Style automatically.

You do not want to use the “Move” option, as your legacy Global Style needs to keep all of its styles until you’ve removed it from all existing blocks on your website.

You can now click the “Update” button at the top of the editor to save your new Global Style.

You can now begin replacing the legacy Global Style with the new Global Style in your content.

This block is now using your new Global Style.

Once you have replaced all instances of the legacy Global Style, you can safely delete it in the legacy Global Style dashboard.