Opened 5 years ago
Closed 10 months ago
#49711 closed enhancement (wontfix)
Twenty Twenty: Add gradient background options that fit the theme color scheme
Reported by: | ianbelanger | Owned by: | |
---|---|---|---|
Milestone: | Priority: | normal | |
Severity: | normal | Version: | |
Component: | Bundled Theme | Keywords: | good-first-bug has-patch needs-design-feedback close |
Focuses: | ui, javascript, css | Cc: |
Description (last modified by )
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)
Change History (22)
#1
@
5 years 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
#5
@
5 years 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
@
5 years 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
@
5 years 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
@
5 years 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
@
5 years ago
@Anlino Thanks for the expert feedback, I have followed your advice and have:
- changed the
gradient
value in theeditor-gradient-presets
to usetwentytwenty_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:
- I had to add a hex to rgb function into the theme, is the functions.php the best place for this?
- 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:
#10
@
5 years 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. :)
#11
@
5 years 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 calledtwentytwenty_hex2rgb
and close to thetwentytwenty_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.
#13
@
10 months ago
- Keywords close added
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.
#14
@
10 months ago
- Milestone Future Release deleted
- Resolution set to wontfix
- Status changed from new to closed
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.
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.