exist GenerateBlocks With Pro version 1.7, the plugin introduces a more powerful and flexible global style system. Compared to the old version, which could only assign a single style to each element, the new system supports the use of multiple styles on top of each other and allows for clearer management of design components such as buttons and containers.

If you have used older styles in 1.6 or earlier (Legacy Global Styles), this article will show you step-by-step how to migrate these styles to the new version of the structure.

I. Review of the old global style

In the old system, only one global style could be bound to each block type (e.g. button or container). Each style could be controlled:

• Button color, insidemargin, corners, etc.
• Top, bottom, left and right margins of the container
• Style switching between background and hover state

These styles, while basic, become progressively more difficult to maintain as the program grows.

Second, upgrade the plugin and enter the new version of the style panel

First, make sure GenerateBlocks Pro has been upgraded to version 1.7 or later.

• show (a ticket) WordPress Backstage, go to GenerateBlocks → Global Styles
• You will see a new entry on the page Legacy Global Styles

• Clicking on this will take you to the old style management screen, where you can select the items you want to migrate.

Three, the button style migration example

Step 1: Select the old style

Take the button style for example, click on one of the items in the list of old styles to enter the edit page.

Step 2: Name the new style class

To enter a name for the new style, a uniform format with a prefix is recommended, for example:abc-button

included among these abc It can be coded for a company, project or team for easy sorting and calling at a later stage.

Step 3: Copy the old style content

By clicking the "Copy this region block style" option, the system will automatically copy all the values set in the original style (including thehoverstatus) is copied to the new version of the style system.

Step 4: Check for style integrity

Open the new style of Spacing,Background,Hover and other areas to ensure that colors, inner margins, and interaction states have migrated correctly.

Click "Save" when you are done.

IV. Migrating container styles

The migration process for containers is exactly the same as for buttons:

• Selecting the Old Container Style
• named after abc-container

• Again copy the style attributes and save

V. Calling new styles in the page

Once the migration is complete, you can use the new style classes in any page:

• stick GenerateBlocks Container Block → Add Class Name abc-container
• Insert button block → Add class name abc-button

If the button style is not displayed correctly, check to see if the local style is still retained. You can remove the default style by clicking on the "X" icon to ensure that the new style takes effect.

VI. Cleaning up old styles

When you have confirmed that all styles have been successfully migrated:

• Back to Legacy Global Styles panel
• Remove old styles that are no longer used

• Next all pages will use the new style system, the interface is also more refreshing!

VII. Summary of advantages of the new system

The new style system offers a higher degree of freedom with a modular structure:

• Multiple style classes can be added to the element, freely combinable
• Clearer style settings, including pseudo-states (e.g. hover)
• Modify one place and automatically apply to all references

Compared to the old structure, the new system is more suitable for building a componentized and maintainable design system.

concluding remarks

If you are still using GenerateBlocks Now is a good time to migrate from the old style of Pro. The new system is not only more flexible, but also better suited for future site expansion and team collaboration.

The migration operation does not require complex setup, just a few clicks to give your design system a full upgrade.

Recent Updates

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨詢：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off