WordPress.org

Make WordPress Core

Opened 7 months ago

Last modified 5 months ago

#49764 new enhancement

Twenty Eleven: 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 needs-refresh
Focuses: ui Cc:

Description

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 (3)

49764-add-gradient-background-options-twenty-eleven.diff (3.6 KB) - added by dboy1988 5 months ago.
Patch001
Capture.PNG (116.8 KB) - added by dboy1988 5 months ago.
48599-2.diff (3.4 KB) - added by dboy1988 5 months ago.

Download all attachments as: .zip

Change History (11)

#1 @dboy1988
6 months ago

Hi I am new to WordPress contributing, so just to confirm, this ticket is asking for a gradient background colour option to be added to the theme customisations panel / colours option?

Thanks!

#2 follow-up: @ianbelanger
6 months ago

Hi @dboy1988,

Yes that is correct. If you want to see an example from another theme, check out this ticket https://core.trac.wordpress.org/ticket/49711 for the Twenty Twenty theme. Thanks for contributing!!

#3 in reply to: ↑ 2 @dboy1988
6 months ago

Hi @ianbelanger,

Thanks for the reply! that helped a lot.

When I said "this ticket is asking for a gradient background colour option to be added to the theme customisations panel / colours option" I meant in the appearance -> customize -> colours section, where we have header text colour options, background colour & link colour and radio boxes for light & dark.

After going through the linked ticket, I believe you actually mean adding theme colour gradient options which can be used/selected to customise the background of blocks & buttons that already have the background gradient option, so it's actually for the Gutenberg editor, not the theme customisation panel and basically we are just adding colour options.

Thanks.

Replying to ianbelanger:

Hi @dboy1988,

Yes that is correct. If you want to see an example from another theme, check out this ticket https://core.trac.wordpress.org/ticket/49711 for the Twenty Twenty theme. Thanks for contributing!!

#4 @dboy1988
5 months ago

Hi so I have just uploaded the first patch file, hopefully I have done that right?

I was a little unsure what to name the colours as they are header text colour etc, prob needs some thought?

Looking forward to some feedback!

Thanks

#5 @ianbelanger
5 months ago

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

Hi @dboy1988,

Thanks for submitting your patch, while your patch did apply correctly, it does not seem to work as it should. For instance, when I select the first or second gradient option, it selects both the first and second options and it shows no background in the editor. It does work on the front-end, but the text is not readable because the colors are too dark. Also I think we need to give some other color optionss for this. I'm going to mark with needs-design-feedback so we can get a designer to weigh in.

#6 @dboy1988
5 months ago

Hi @ianbelanger

Can you explain a little more about what exactly is happening because I cannot replicate? I am also using VVV so the enviroment/setup should be the same.

As far as I am concerned, Gutenberg deals with adding styles to the editor, inline, ive not touched anything to do with Gutenberg, just added WordPress functions using the "editor-gradient-presets"

Selecting 1 gradient and the other also being selected to me sounds like a JavaScript issue?

I have attached an image, for me when I click the gradient option in the edit page screen, I see the background ok and all is working fine as far as I can see.

I was testing using the button block & cover block, were you using the same?

Also in terms of the design and colours, they are dictated by the choice of colours in the theme customize panel so they can change on a website/website basis, if the text is not readable, can we not change the text colour such as a dark background you would use white text etc etc? I am not sure I understand

If we need some more static graident options, please let me know and I am more than happy to set that up.

Looking forward to hearing from you, hopefully we can get to the bottom of this quickly :)

Thanks

Last edited 5 months ago by dboy1988 (previous) (diff)

@dboy1988
5 months ago

#7 @ianbelanger
5 months ago

  • Keywords needs-design-feedback removed

Hi @dboy1988,

I figured out why we are seeing different things. If I change the colors in the customizer, then the gradient options work just fine. However, if I start out with a brand new install, activate Twenty Eleven and do not change the colors in the customizer, then I see the issues I was talking about. Screenshot coming.

The reason that both the first and second options are selected when selecting either of them, is that they are using exactly the same colors. See code below.

if(!empty(get_theme_mod('header_textcolor'))) {
        $themeColor['htc'] = twentyeleven_hexToRgb(str_split(get_theme_mod('header_textcolor')));
} else {
        $themeColor['htc'] = twentyeleven_hexToRgb(str_split("000000"));
}
if(!empty(get_theme_mod('background_color'))) {
        $themeColor['bgc'] = twentyeleven_hexToRgb(str_split(get_theme_mod('background_color')));
} else {
        $themeColor['bgc'] = twentyeleven_hexToRgb(str_split("000000"));
}

Changing this: $themeColor['bgc'] = twentyeleven_hexToRgb(str_split("000000")); or this $themeColor['htc'] = twentyeleven_hexToRgb(str_split("000000")); to another color should fix this issue.

Also, the gradient colors do show in the editor for the cover block and the button blocks, but it does not show when using a group block. Gradient support for group blocks will be added in the 5.5 release of WP, so we need to make sure that they are supported.

If we get these things resolved, then this should be good to commit. Thanks!

#8 @dboy1988
5 months ago

Hi @ianbelanger,

Thanks for spotting that, indeed I had the same colour twice.

I have looked into the "if I start out with a brand new install, activate Twenty Eleven and do not change the colors in the customizer, then I see the issues I was talking about"

If you are starting out with a fresh install of twenty eleven, are you not removing the code I have added and installing the theme/code from WordPress and that would be why it does not work? Sorry just a thought!

I cannot replicate your issue otherwise. In the twentyeleven_get_theme_colors function I provide default values if the options in the customizer are not set as you saw.

As I mentioned before, I am using the gradients API provided by WordPress, if WordPress does not currently support gradients for group blocks, I believe that is why it is not there, once the support is created, the gradients I have setup will be available for the group block as well.

New patch attached with the updated colour.

Thanks

@dboy1988
5 months ago

Note: See TracTickets for help on using tickets.