More default gradients

  • Resolved Drivingralle

    (@drivingralle)


    4 months ago

    Hey!

    Today I worked on a client website. The pattern work well.

    Some of the pattern (ex. Testimonial, three Boxes, split Background) are quite brutal with a black (foreground) as part of the split color gradient as a background. I tried to change them to a more colorful gradient. Sadly the split color gradients are only for foreground and background color. I would love it to have all theme colors as a split color gradient.

    Greetings
    derRALF

Viewing 4 replies - 1 through 4 (of 4 total)
  • Theme Author Jessica Lyschik

    (@luminuu)

    Hi Ralf,

    Thank you so much for your feedback! We have to think through this as it would mean to have a lot of gradient options, but we’ll discuss this soon. I just tried to create custom gradients like this and it seems pretty hard to achieve them, so I totally get your point.

    Edit for some context: The main issue here is that unfortunately, gradients do not support CSS variables, therefore all colors of all palettes need to be included for every style variation. This would massively increase the number of gradient options at the moment.

    Best,
    Jessica

    Thread Starter Drivingralle

    (@drivingralle)

    I tried to duplicate the existing one, but that’s not a feature in Gutenberg. Maybe a duplication and change workflow for GB is a better way

    Theme Author Jessica Lyschik

    (@luminuu)

    Hi Ralf,

    we have decided to wait for the editor to be able to work with CSS variables in gradients. There’s currently a PR in progress to fix this issue: https://github.com/WordPress/gutenberg/pull/63915

    In the meantime, you can manually add the gradient to a block by using the Code Editor. Here’s an example of how one of those gradients was added to a paragraph block with the primary color:

    <!-- wp:paragraph {"className":"","style":{"color":{"gradient":"linear-gradient(180deg,var(--wp--preset--color--primary) 75%,var(--wp--preset--color--transparent) 75%)"}}} -->
    <p class="has-background" style="background:linear-gradient(180deg,var(--wp--preset--color--primary) 75%,var(--wp--preset--color--transparent) 75%)">Gradient Paragraph Test</p>
    <!-- /wp:paragraph -->

    I’m aware this is only a way for advanced users, for the interface to support it we have to wait until the above PR is merged.

    Thread Starter Drivingralle

    (@drivingralle)

    Sounds great. Let’s wait for it ??

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