WordPress.org

Make WordPress Core

Opened 7 months ago

Last modified 5 months ago

#49711 new enhancement

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

Reported by: ianbelanger Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: good-first-bug has-patch needs-design-feedback
Focuses: ui, javascript, css Cc:

Description (last modified by 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.

Attachments (8)

49711.patch (2.7 KB) - added by samful 6 months ago.
samful's patch for adding themed gradients to the 2020 theme
gradients-in-editor.png (14.1 KB) - added by samful 6 months ago.
gradient-colors-used-in-blocks.png (282.8 KB) - added by samful 6 months ago.
49711.2.patch (6.7 KB) - added by samful 6 months ago.
gradients-in-blocks-2020-defaults.png (1.0 MB) - added by samful 6 months ago.
blocks-do-not-change-in-customiser-screen.png (79.4 KB) - added by samful 6 months ago.
custom-color-examples.png (293.0 KB) - added by samful 6 months ago.
49711.3.patch (12.7 KB) - added by samful 6 months ago.

Download all attachments as: .zip

Change History (20)

#1 @ianbelanger
7 months ago

  • Description modified (diff)
  • Summary changed from Twenty Twenty: Add gradients that fit the theme color scheme to Twenty Twenty: Add gradient background options that fit the theme color scheme

#2 @ianbelanger
7 months ago

  • Focuses ui added

#3 @ianbelanger
7 months ago

  • Description modified (diff)

#4 @samful
6 months ago

  • Keywords has-patch needs-refresh needs-design-feedback added; needs-patch removed

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
6 months ago

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

#5 @ianbelanger
6 months ago

  • Focuses css added
  • Keywords needs-refresh removed

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?

#6 @samful
6 months ago

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?

#7 @ianbelanger
6 months ago

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

#8 @Anlino
6 months ago

👋 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().

#9 @samful
6 months ago

@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?
  1. 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:

@samful
6 months ago

#10 @Anlino
6 months ago

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
6 months ago

#11 @samful
6 months ago

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.

Last edited 6 months ago by samful (previous) (diff)

#12 @samful
5 months ago

  • Focuses javascript added
Note: See TracTickets for help on using tickets.