Twenty Twenty: Add gradient background options that fit the theme color scheme

[ianbelanger]

Now that we have the option for certain blocks to have gradient backgrounds, we need to add gradient background options to the theme that fit the themes color scheme.

[samful]

I like the idea of this feature, I created a patch for anyone to use, screenshots to look at easily and would like feedback on the design. I created these gradients based off the colour scheme of 2020 (cream, white, black and pink) however my design skills are not my best asset.

[samful]

samful's patch for adding themed gradients to the 2020 theme

[ianbelanger]

Hi @samful, thanks for the patch. I think it is a great start, but I would definitely like to get some design feedback on the color combinations we should use. @andersnoren could you weigh-in on this?

[samful]

Thanks for checking up on this @ianbelanger, however I don't think @andersnoren is a user? (mine says "User not found" at least) is there anyone else you know who can help or should we just wait until a designer stumbles upon this ticket?

[ianbelanger]

You are correct @samful. I got his username wrong. @anlino could you take a look at this and give us some feedback? Thanks

[Anlino]

👋 I think the gradients used looks good, but I'm assuming we'd need to tie them into the custom accent color and the main background color, so the colors chosen in the Customizer are reflected in the gradient backgrounds as well. I don't think there's support for getting lighter or darker versions of the accent color currently, so we're (currently) limited to using the five colors used in the color palette (Accent, Primary, Secondary, Subtle Background, Background) for the gradients.

On the technical side of things, that means the gradient value in the editor-gradient-presets array would need to be updated to use the colors from twentytwenty_get_color_for_area(), and the front-end output in twentytwenty_get_customizer_css() would need to be updated with output of CSS for the gradient classes when the colors set in the Customizer differ from the defaults. twentytwenty_get_elements_array(), which is used to define which colors to apply to which selectors and properties in the custom CSS, doesn't support multiple colors used in combination, so the gradient custom CSS would probably need to be added directly in the front-end section of twentytwenty_get_customizer_css().

[samful]

@Anlino Thanks for the expert feedback, I have followed your advice and have:

• changed the gradient value in the editor-gradient-presets to use twentytwenty_get_color_for_area()

and

• added the css directly in the front-end section of twentytwenty_get_customizer_css()

So now the gradients are based on the Customizer's values (Accent, Primary, Secondary, Subtle Background, Background), rather than my own.

I have 2 quick questions:

1. I had to add a hex to rgb function into the theme, is the functions.php the best place for this?

2. The Customizer does not update the gradients Live, you need to manually refresh the page, how would we get round this?

I'll upload the patch and screenshots below, any advise and further suggestions would be great:

[Anlino]

Hi @samful,

Sorry for the late reply. I've had a look at the patch now, and included some notes below.

I believe we also need to output the gradient custom CSS in the block editor section of custom-css.php. For me, running Gutenberg 8.0.0, blocks with the gradients set aren't displaying the gradient background on the block unless I duplicate the generate CSS code for the gradient classes in the elseif ( 'block-editor' === $type ) section of the file.

The .has-X-color classes prepends the target with a :root selector to increase specificity, so we should probably replicate that in the gradient classes as well (so instead of targeting ‌.has-primary-to-accent-gradient-background, we target :root .has-primary-to-accent-gradient-background).

The .has-X-color classes are included in style.css and .editor-style-block.css with the default values, and are output in custom-css.php only if the value set in the Customizer differs from the default value. For consistency, the gradient code should probably be structured the same way. In other words, the gradient classes should be included in style.css and editor-style-block.css with the default values, and the code outputting the gradient styles in custom-css.php should be wrapped in conditionals so they are only output if any of the colors used in each gradient differ from the default color.

Using .has-primary-to-accent-gradient-background as an example:

if ( ( $body && $body !== $body_default ) || ( $accent && $accent !== $accent_default ) ) {
        twentytwenty_generate_css( '.has-primary-to-accent-gradient-background', 'background', 'linear-gradient(135deg, rgba('.$primaryRGB['red'].','.$primaryRGB['green'].','.$primaryRGB['blue'].', 1) 0%, rgba('.$accentRGB['red'].','.$accentRGB['green'].','.$accentRGB['blue'].', 1) 100%)' );
}

The hex2rgb function should probably be near the bottom of the functions.php file, close to the twentytwenty_get_elements_array function, and it’ll need to be prefixed with twentytwenty_ (so twentytwenty_hex2rgb).

There’s a bunch of guidelines for code formatting to adhere to (spacing, variable naming, comment structure, and so on), but I’m not the best person to speak to that stuff.

Re the preview in the Customizer: It seems like the JavaScript function twentyTwentyGenerateColorA11yPreviewStyles(), which renders the color preview, uses the selectors and values returned from twentytwenty_get_elements_array(). I’m assuming a similar solution would need to be created for the gradients, but someone else will have to say how that should be built. :)

[samful]

thanks @Anlino, no problem about "late" reply, I'm very grateful you taking the time for this, and it wasn't late ;)

I have fixed the points you mentioned apart from the customiser issue, I will try and make it clear for you:

• Strangely i didn't encounter the "Gutenberg 8.0.0, blocks with the gradients set aren't displaying the gradient background" issue but i added an IF statement to account to fix this as it does seem logical.

• After checking the twentytwenty_get_elements_array I can see this ":root selector", and have changed my code to target :root .has-primary-to-accent-gradient-background.

• Added default CSS to style.css, style-rtl.css, editor-style-block.css and editor-style-block-rtl.css files. Code outputting the gradient styles in custom-css.php are now wrapped in conditionals, so they are only output if any of the colors used in each gradient differ from the default color.

• hex2rgb function is now called twentytwenty_hex2rgb and close to the twentytwenty_get_elements_array function.

• I've tried to follow existing file structure and naming, but if anyone can check it before the patch goes live then that would be ideal.

• Regarding the Customizer I'm afraid i know less that you do about this. I tried looking at what is going on and it seems like the javascript function twentyTwentyGenerateColorA11yPreviewStyles() is generating a CSS file on the fly, but I am unsure how we can do what I did in PHP in javascript... do you know anyone who can advise on this?

Many thanks.

[karmatosed]

I would recommend considering that this can be done in theme.json and that is the preferred way this ticket is closed for now along with any others that implement gradients as CSS. The default themes currently are being focus on for bugs and not enhancements so this also fits that pattern.

To reflect this recommendation, I am going to put the keyword 'close' on this for now. If anyone wishes to counter this please add feedback and that can be taken into consideration. Thank you for everyone's collaboration in getting this so far, things have change a lot and this is just one thing done really well within the editor itself and theme.json now.

[sabernhardt]

I am going to close this. It was discussed in Slack, along with other tickets around gradients, and these were left them open for a few days with the 'close' keyword for feedback.

Thank you everyone for your collaboration.