Gutenberg buttons text color bug

  • danigomu

    (@danigomu)


    3 years ago

    Good Morning,

    I am writing to report a possible bug in generatepress with Gutenberg button text colors when using theme colors.

    The problem is that Gutenberg buttons text color is not displayed correctly on the frontend despite seeing it correctly on the backend.

    For example, in the image buttons the text color var(–contrast) has been selected and it is displayed correctly in the backend. On the frontend the color white appears instead.

    Buttons in backend: https://ibb.co/sVLqG5J
    Buttons in frontend: https://ibb.co/HdSQscw

    Can you take a look at it? Thanks.

Viewing 4 replies - 16 through 19 (of 19 total)
  • Thread Starter danigomu

    (@danigomu)

    Hi David, thanks for replying in such detail.

    Sorry but I don’t quite understand how to fix the problem.

    It only happens when the button text color is set with the var(–contrast) variable. When I set the color var(–contrast) for the text in settings, I should see the same color var(–contrast) for the active, focus, hover and visited states, right?

    On the other hand, I have another website with generatepress and the same configuration and I doesn’t get the problem.

    This is my other site’s settings and I’m using var(–contrast) for the text color:

    Captura de pantalla 2022-03-23 a las 15.57.53.png

    As you can see, the color on hover, visited… etc is the same as the color set in var(–contrast) settings.

    Captura de pantalla 2022-03-23 a las 15.56.43.png

    Why don’t I have the same thing on the other website? ??

    • This reply was modified 3 years ago by danigomu.
    • This reply was modified 3 years ago by danigomu.
    • This reply was modified 3 years ago by danigomu.
    • This reply was modified 3 years ago by danigomu.
    David

    (@diggeddy)

    I can’t say what the difference is with the other site – it may be just versioning – if that page was built on an older version of WP then it may behave differently.

    I ran a quick test on a dev site ( latest version of WP ) and it behaves the same way as the site you raised an issue with.

    You can fix it by adding some CSS – for example:

    .wp-block-button__link:active, .wp-block-button__link:focus, .wp-block-button__link:hover, .wp-block-button__link:visited {
    color: var(–contrast) !important;
}
    Thread Starter danigomu

    (@danigomu)

    Thanks for the solution.

    With that CSS it is solved.

    David

    (@diggeddy)

    Glad to hear that!

Viewing 4 replies - 16 through 19 (of 19 total)
  • The topic ‘Gutenberg buttons text color bug’ is closed to new replies.