Twenty Twelve: Inconsistency with Button Colors

[carinapilar]

Steps to reproduce the behavior

1. Create a new page, on a site with the Twenty Twelve theme
2. Add a Button block on the page
3. Change the Button's background and text color, in the block's settings

What I expected to happen

For the Button to show with the colors set in the settings, either on the editor, and on the site.

What actually happened

If you set a background Solid color, it doesn't show on the editor, and on the site. If you set a Gradient color, it shows in the editor, but not on the site.

As for the text color, if you select one of the 5 ones shown in the settings, it won't show on the site, you need to select a Custom Color instead.

Reported on 4098492-zd-woothemes Originally reported here: pd4QKa-7r-p2

[inaikem]

Tested and confirmed the above on a Simple sites. My atomic test site was not affected.

[filipanoscampos]

I believe I have run into another case of a related bug on this ticket 4540236-zd-woothemes.

When buttons have outlines added to them, it shows on the editor, but not the frontend.

Both I and the HC that worked on the ticket could confirm this on our test sites.

Here is how a button looks with the Twenty Twenty theme on the editor of my Premium plan test site:

And here is the result visitors will see on the frontend side:

I have shared CSS code with the user to try and temporarily solve this issue. We are waiting for the user to confirm it works as expected, but this was the CSS code:

/*Show Outline Button Style on frontend / 4540236-zd FC*/ .site-content button, .button, .faux-button, .wp-block-button__link, .wp-block-file .wp-block-file__button { border: solid !important; }

The theme CSS is overriding the border settings and setting border: none;.

This appears to be a similar behavior to the one described above, also affecting button border styling.

[the-misha]

Another user report: 33267670-hc / 4774293-zd-woothemes

Gradient is showing in both the editor and on the live site. Solid colors are showing neither place.

[galakhyati]

Another case of set button colors not being respected. The user is on Personal plan so cannot provide CSS support too.

4864597-zd-woothemes

[cintacks]

Another instance of button colors not inheriting correctly: 36328844-hc

Provided CSS workaround:

.button-white a {
    border-color: white !important;
    color: white !important;
}

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 4098492-zen
• [ ] 4540236-zen
• [ ] 4774293-zen
• [ ] 4864597-zen
• [ ] 5782232-zen

[cometgrrl]

@Robertght should this be moved to themes?

[Robertght]

Thank you @cometgrrl !

I can confirm this is still an issue on Simple sites only.

Self-hosted sites work as intended.

[jp-imagines]

Reported here as well: 5782232-zd-woothemes

This is an Atomic site, but otherwise the issue is the same. I was able to replicate on an Atomic test site as well. Some points of note:

• Setting a gradient does work in both the editor and on the live site. Setting a gradient with the same color on either end is an effective workaround to setting a solid background color here.
• CSS works as well:

.wp-block-button .wp-block-button__link, .wp-block-button .wp-block-button__link:visited {
    background-color: #21759b;
    background-image: unset;
}

[kelasante]

Another instance in 33389253-hc. Provided the CSS that @jp-imagines shared above, and that worked. The user also mentioned that buttons flicker when editing in the Page Editor.