As web designers and developers, we’re constantly adapting to new updates in WordPress and its plugins. The latest update from GenerateBlocks introduces a new Global Style system that deprecates the old Legacy Styles. Today, I’ll walk you through how to migrate your old Legacy Styles into the new Global Class system.
Step 1: Ensure You’re Up to Date
Before we begin, make sure you’re using the latest version of GenerateBlocks: version 1.9 for the free version and 1.7 for the pro version. This update introduces the new Global Style system.
Step 2: Access the New Global Styles Panel
Go to the GenerateBlocks tab in the WordPress sidebar and visit Global Styles. You’ll notice that things look a bit different from what you’re used to. There’s a new All Global Styles panel, which contains the new classes you may have already set up.
To start the migration, visit your Legacy Global Styles at the top. Here, you’ll see the familiar old style settings. A notice will inform you that this system is deprecated—you can still edit and use these styles, but you can no longer add new ones. To avoid outdated and potentially unusable websites, it’s important to transition to the new system.
Step 3: Migrate a Legacy Style
Let’s take an example of a Legacy Global Style—a blue button you’ve set up previously. In the old system, you would have a label like “Blue Button” that generated a Global Style class for you. Now, we need to migrate these styles, including colors and spacing, into the new Global Class system while keeping the look intact.
- Create a New Global Style: Click on Add or Create Style in the new panel. Type in a new name for the class—something easy to remember, like “BTN-Blue.” Click Create.
- Copy Local Styles: You’ll see four options. Choose the third option: Copy the Local Block Style. This will take the styles you’ve already set up and move them into your new “BTN-Blue” Global Style.
- Verify Settings: Once you’re in the editing panel, verify that all your settings, such as padding and background color, have migrated correctly. For example, if you have a hover state, make sure to switch to that state and check the background color.
Step 4: Remove Local Styles
After migrating the styles, you’ll notice that your block now has two classes applied: the new “BTN-Blue” class and the old Local Styles. Since we’ve migrated everything to the new class, the Local Styles are no longer needed. Click the X to remove the Local Styles and confirm the deletion.
Step 5: Save Changes
Now, hit Update at the top. WordPress will save both the Global Style change and the Legacy Global Style change. This ensures that everything is saved correctly.
Step 6: Apply the New Global Style
Let’s say you want to insert the newly migrated button on a page. Go to the page (e.g., an About page), and insert a new button block with GenerateBlocks. Open the panel below the headline and choose the new “BTN-Blue” class from the dropdown.
By default, GenerateBlocks applies local styles to the button block itself. To see your newly applied Global Style, remove the local styles by clicking the light pink label that indicates local styles.
Step 7: Delete Legacy Global Styles
Once you’ve successfully migrated your Legacy Global Style to the new system, you can go back to GenerateBlocks > Global Styles and delete the old Legacy Global Style. This keeps your setup clean and ensures you’re only using the new system.
Final Thoughts
You can use this process for any Legacy Global Styles you’ve previously set up, whether they’re for containers, headlines, or other elements. Just remember to choose the third option in the new Global Style panel—Copy to a New Global Style—and then remove the local styles from the block before saving.
