Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Some suggestions on GB Pro 2.0 beta global style design options

  • First of all, I would like to thank the GenerateBlocks team for bringing us a major update to version 2.0. Wish you:
    Happy New Year!
    Since the early stage of GenerateBlocks Beta, we upgraded our subscription from GeneratePress to GeneratePress One just to try out the content of GenerateBlocks Pro 2.0.
    After a period of trial, we found that the design options of global styles in GenerateBlocks Pro 2.0 have some limitations. Some CSS functions are not listed in the existing options list; and no custom CSS code content is added to the existing options list. If you want to implement certain functions, you still need to insert additional manual code to achieve the desired functions.
    For example:
    When I want to add a dynamic ripple effect to a button, I may need the following CSS code:

    .jzb-button-blue:hover::after {
    animation: touchripple 1s ease-out;
    }
    @keyframes touchripple {
    0% {
    transform: scale(0,0);
    opacity: .3;
    }
    
    20% {
    transform: scale(25,25);
    opacity: .3;
    }
    
    100% {
    opacity: 0;
    transform: scale(40,40);
    }
    }

    However, the global style options cannot meet this requirement, and it does not have an option to manually enter custom CSS. In this case, I can only insert these codes into the theme custom CSS for global call; or use a third-party code management plug-in to achieve it.
    Can you add an option to write custom CSS in the global style setting list to solve this problem?
    Maybe my suggestion is wrong, or I haven’t found the right way to use it? I hope to get a reply and answer, thank you!

  • Hi there,

    That is one of the limitations of the current Global Styles feature, as you cannot define the @keyframes within the Global Styles. Adding an option to write custom CSS in Global Styles may not be feasible, as it could introduce more issues if users with limited CSS understanding make unintended modifications.

    Anyway, I’ll highlight this issue to our development team and see how they decide to proceed with it.

  • Thanks for your reply! I still hope to add an option to input custom CSS code.

  • Hi there,

    thanks for the feedback – it is much appreciated.
    The new 2.0 CSS engine has been built with expansion in mind. And adding a new property to it is very simple, the complicated part is the custom UI necessary for handling complex options such as animations. That is something we will be looking into,

    For now, you could save your CSS in your child theme ( or wherever ) and then simply create a GB Global Style using the same class name eg. jzb-button-blue

    This way you keep the custom CSS in an accessible place with the convenience of a global style for applying it.

  • Thanks for your reply!
    Regarding the difference between ordinary users and advanced users, I have a small suggestion: Can a function switch be added in the settings of GenerateBlocks Pro?
    This function is only for developers or advanced users. After turning it on, you can open the input window of custom CSS in the settings of Global Styles, allowing users to fill in some CSS styles by themselves?

  • We have some ideas on this for the future; ie. allowing users to add other properties to the CSS as well as converting CSS to Global Styles. But it’s not straight forward as it would require validation and error handling which is why we don’t currently do it. But it’s on our feature request list.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.